diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialog.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialog.tsx index eaf6ffe37..afed21a2e 100644 --- a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialog.tsx +++ b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialog.tsx @@ -27,10 +27,7 @@ const GiftCardCreateDialog: React.FC = ({ const intl = useIntl(); const notify = useNotifier(); - const { - data: channelCurrenciesData, - loading: loadingChannelCurrencies - } = useChannelCurrencies({}); + const { loading: loadingChannelCurrencies } = useChannelCurrencies({}); const [cardCode, setCardCode] = useState(null); @@ -116,7 +113,6 @@ const GiftCardCreateDialog: React.FC = ({ /> ) : ( void; onClose: () => void; - channelCurrencies: string[]; } const GiftCardCreateDialogForm: React.FC = ({ onSubmit, opts, onClose, - apiErrors, - channelCurrencies + apiErrors }) => { const intl = useIntl(); const classes = useStyles({}); - const initialCurrency = channelCurrencies[0]; - const { data: settingsData, loading: loadingSettings @@ -114,11 +112,11 @@ const GiftCardCreateDialogForm: React.FC = ({ }; }; - const { submit, change, data } = useForm( + const { submit, change, data, set } = useForm( { ...initialData, ...getInitialExpirySettingsData(), - balanceCurrency: initialCurrency, + balanceCurrency: "", channelSlug: "" }, handleSubmit @@ -134,11 +132,8 @@ const GiftCardCreateDialogForm: React.FC = ({ sendToCustomerSelected, channelSlug, balanceAmount, - balanceCurrency, expirySelected, expiryType, - expiryPeriodAmount, - expiryPeriodType, expiryDate, requiresActivation } = data; @@ -155,28 +150,16 @@ const GiftCardCreateDialogForm: React.FC = ({ return true; }; + const commonFormProps: GiftCardCreateFormCommonProps = { + data, + errors: formErrors, + change + }; + return ( <> - + = ({ /> - + ) => void; +} + +const GiftCardCreateDialogMoneyInput: React.FC = ({ + errors, + data: { balanceAmount, balanceCurrency }, + change, + set +}) => { + const intl = useIntl(); + const classes = useStyles({}); + + const { data: channelCurrenciesData } = useChannelCurrencies({}); + + const { channelCurrencies } = channelCurrenciesData?.shop; + + const [savedCurrency, setCurrency] = useLocalStorage( + "giftCardCreateDialogCurrency", + undefined + ); + + const getInitialCurrency = () => { + if ( + savedCurrency && + !!channelCurrencies.find((currency: string) => currency === savedCurrency) + ) { + return savedCurrency; + } + + return channelCurrencies[0]; + }; + + useEffect(() => { + set({ + balanceCurrency: getInitialCurrency() + }); + }, []); + + const handleInputChange = (event: ChangeEvent) => { + if (event.target?.name === "balanceCurrency") { + setCurrency(event.target?.value); + } + + change(event); + }; + + return ( + + ); +}; + +export default GiftCardCreateDialogMoneyInput; diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateExpirySelect/GiftCardCreateExpirySelect.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateExpirySelect/GiftCardCreateExpirySelect.tsx index 0e6ba69aa..846acc0a7 100644 --- a/src/giftCards/GiftCardCreateDialog/GiftCardCreateExpirySelect/GiftCardCreateExpirySelect.tsx +++ b/src/giftCards/GiftCardCreateDialog/GiftCardCreateExpirySelect/GiftCardCreateExpirySelect.tsx @@ -3,14 +3,14 @@ import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer"; import VerticalSpacer from "@saleor/apps/components/VerticalSpacer"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; import RadioGroupField from "@saleor/components/RadioGroupField"; -import { GiftCardError } from "@saleor/fragments/types/GiftCardError"; import TimePeriodField from "@saleor/giftCards/components/TimePeriodField"; -import { GiftCardExpiryType } from "@saleor/giftCards/GiftCardCreateDialog/types"; +import { + GiftCardCreateFormCommonProps, + GiftCardExpiryType +} from "@saleor/giftCards/GiftCardCreateDialog/types"; import { getExpiryPeriodTerminationDate } from "@saleor/giftCards/GiftCardCreateDialog/utils"; import { getGiftCardErrorMessage } from "@saleor/giftCards/GiftCardUpdate/messages"; import useCurrentDate from "@saleor/hooks/useCurrentDate"; -import { FormChange } from "@saleor/hooks/useForm"; -import { TimePeriodTypeEnum } from "@saleor/types/globalTypes"; import React from "react"; import { FormattedMessage } from "react-intl"; import { MessageDescriptor, useIntl } from "react-intl"; @@ -34,25 +34,16 @@ const options: UntranslatedOption[] = [ } ]; -interface GiftCardCreateExpirySelectProps { - change: FormChange; - expirySelected: boolean; - expiryPeriodType: TimePeriodTypeEnum; - expiryPeriodAmount: number; - expiryType: GiftCardExpiryType; - customOptions?: UntranslatedOption[]; - errors?: Record<"expiryDate", GiftCardError>; - expiryDate?: string; -} - -const GiftCardCreateExpirySelect: React.FC = ({ +const GiftCardCreateExpirySelect: React.FC = ({ errors, change, - expirySelected, - expiryPeriodType, - expiryPeriodAmount, - expiryType, - expiryDate + data: { + expirySelected, + expiryPeriodType, + expiryPeriodAmount, + expiryType, + expiryDate + } }) => { const intl = useIntl(); const classes = useStyles({}); diff --git a/src/giftCards/GiftCardCreateDialog/types.ts b/src/giftCards/GiftCardCreateDialog/types.ts index f96c1cd3a..1b3950ee3 100644 --- a/src/giftCards/GiftCardCreateDialog/types.ts +++ b/src/giftCards/GiftCardCreateDialog/types.ts @@ -10,29 +10,13 @@ export interface GiftCardCreateFormCustomer { email: string; } -export interface GiftCardCommonFormData { - tag: string; - balanceAmount: number; - balanceCurrency: string; - expiryDate: string; -} - export type GiftCardCreateFormErrors = Record< - "tag" | "expiryDate" | "customer" | "currency" | "amount", + "tag" | "expiryDate" | "customer" | "currency" | "amount" | "balance", GiftCardError >; -export type GiftCardCreateInputData = Pick< - GiftCardCreateFormData, - | "expirySelected" - | "expiryDate" - | "expiryPeriodAmount" - | "expiryPeriodType" - | "expiryType" ->; - export interface GiftCardCreateFormCommonProps { change: FormChange; errors: GiftCardCreateFormErrors; - data: GiftCardCommonFormData; + data: GiftCardCreateFormData; } diff --git a/src/giftCards/GiftCardUpdate/providers/GiftCardUpdateFormProvider/GiftCardUpdateFormProvider.tsx b/src/giftCards/GiftCardUpdate/providers/GiftCardUpdateFormProvider/GiftCardUpdateFormProvider.tsx index 05b2e7e7c..c5b52e1fd 100644 --- a/src/giftCards/GiftCardUpdate/providers/GiftCardUpdateFormProvider/GiftCardUpdateFormProvider.tsx +++ b/src/giftCards/GiftCardUpdate/providers/GiftCardUpdateFormProvider/GiftCardUpdateFormProvider.tsx @@ -1,6 +1,5 @@ import { MetadataFormData } from "@saleor/components/Metadata"; import { GiftCardError } from "@saleor/fragments/types/GiftCardError"; -import { GiftCardCommonFormData } from "@saleor/giftCards/GiftCardCreateDialog/types"; import { MutationResultWithOpts } from "@saleor/hooks/makeMutation"; import useForm, { FormChange, UseFormResult } from "@saleor/hooks/useForm"; import useNotifier from "@saleor/hooks/useNotifier"; @@ -18,7 +17,10 @@ import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTr import React, { createContext } from "react"; import { useIntl } from "react-intl"; -import { initialData as emptyFormData } from "../../../GiftCardCreateDialog/GiftCardCreateDialogForm"; +import { + GiftCardCreateFormData, + initialData as emptyFormData +} from "../../../GiftCardCreateDialog/GiftCardCreateDialogForm"; import { useGiftCardUpdateMutation } from "../../mutations"; import { GiftCardUpdate } from "../../types/GiftCardUpdate"; import useGiftCardDetails from "../GiftCardDetailsProvider/hooks/useGiftCardDetails"; @@ -28,7 +30,7 @@ interface GiftCardUpdateFormProviderProps { } export type GiftCardUpdateFormData = MetadataFormData & - Omit; + Pick; export interface GiftCardUpdateFormConsumerData extends GiftCardUpdateFormErrors {