Add saving and retreiving currency from localstorage in giftcard create dialog (#1415)

src/giftCards/GiftCardCreateDialog/GiftCardCreateDialog.tsx

@@ -27,10 +27,7 @@ const GiftCardCreateDialog: React.FC<DialogActionHandlersProps> = ({
   const intl = useIntl();
   const notify = useNotifier();
 
-  const {
+  const { loading: loadingChannelCurrencies } = useChannelCurrencies({});
-    data: channelCurrenciesData,
-    loading: loadingChannelCurrencies
-  } = useChannelCurrencies({});
 
   const [cardCode, setCardCode] = useState(null);
 
@@ -116,7 +113,6 @@ const GiftCardCreateDialog: React.FC<DialogActionHandlersProps> = ({
             />
           ) : (
             <GiftCardCreateDialogForm
-              channelCurrencies={channelCurrenciesData?.shop?.channelCurrencies}
               opts={createGiftCardOpts}
               onClose={handleClose}
               apiErrors={createGiftCardOpts?.data?.giftCardCreate?.errors}

src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx

@@ -8,7 +8,6 @@ import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
 import DialogButtons from "@saleor/components/ActionDialog/DialogButtons";
 import CardSpacer from "@saleor/components/CardSpacer";
 import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
-import TextWithSelectField from "@saleor/components/TextWithSelectField";
 import { GiftCardError } from "@saleor/fragments/types/GiftCardError";
 import GiftCardTagInput from "@saleor/giftCards/components/GiftCardTagInput";
 import useForm from "@saleor/hooks/useForm";
@@ -20,23 +19,22 @@ import {
   TimePeriodTypeEnum
 } from "@saleor/types/globalTypes";
 import { getFormErrors } from "@saleor/utils/errors";
-import { mapSingleValueNodeToChoice } from "@saleor/utils/maps";
 import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import GiftCardSendToCustomer from "../components/GiftCardSendToCustomer/GiftCardSendToCustomer";
 import { useGiftCardSettingsQuery } from "../GiftCardSettings/queries";
-import { getGiftCardErrorMessage } from "../GiftCardUpdate/messages";
+import GiftCardCreateDialogMoneyInput from "./GiftCardCreateDialogMoneyInput";
 import GiftCardCreateExpirySelect from "./GiftCardCreateExpirySelect";
 import { giftCardCreateDialogMessages as messages } from "./messages";
 import { useGiftCardCreateDialogFormStyles as useStyles } from "./styles";
 import {
-  GiftCardCommonFormData,
+  GiftCardCreateFormCommonProps,
   GiftCardCreateFormCustomer,
   GiftCardExpiryType
 } from "./types";
 
-export interface GiftCardCreateFormData extends GiftCardCommonFormData {
+export interface GiftCardCreateFormData {
   note: string;
   sendToCustomerSelected: boolean;
   selectedCustomer?: GiftCardCreateFormCustomer;
@@ -46,6 +44,10 @@ export interface GiftCardCreateFormData extends GiftCardCommonFormData {
   expiryPeriodType: TimePeriodTypeEnum;
   expiryPeriodAmount: number;
   requiresActivation: boolean;
+  tag: string;
+  balanceAmount: number;
+  balanceCurrency: string;
+  expiryDate: string;
 }
 
 const initialCustomer = { email: "", name: "" };
@@ -69,21 +71,17 @@ interface GiftCardCreateDialogFormProps {
   apiErrors: GiftCardError[];
   onSubmit: (data: GiftCardCreateFormData) => void;
   onClose: () => void;
-  channelCurrencies: string[];
 }
 
 const GiftCardCreateDialogForm: React.FC<GiftCardCreateDialogFormProps> = ({
   onSubmit,
   opts,
   onClose,
-  apiErrors,
+  apiErrors
-  channelCurrencies
 }) => {
   const intl = useIntl();
   const classes = useStyles({});
 
-  const initialCurrency = channelCurrencies[0];
-
   const {
     data: settingsData,
     loading: loadingSettings
@@ -114,11 +112,11 @@ const GiftCardCreateDialogForm: React.FC<GiftCardCreateDialogFormProps> = ({
     };
   };
 
-  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<GiftCardCreateDialogFormProps> = ({
     sendToCustomerSelected,
     channelSlug,
     balanceAmount,
-    balanceCurrency,
     expirySelected,
     expiryType,
-    expiryPeriodAmount,
-    expiryPeriodType,
     expiryDate,
     requiresActivation
   } = data;
@@ -155,28 +150,16 @@ const GiftCardCreateDialogForm: React.FC<GiftCardCreateDialogFormProps> = ({
     return true;
   };
 
+  const commonFormProps: GiftCardCreateFormCommonProps = {
+    data,
+    errors: formErrors,
+    change
+  };
+
   return (
     <>
       <DialogContent>
-        <TextWithSelectField
+        <GiftCardCreateDialogMoneyInput {...commonFormProps} set={set} />
-          isError={!!formErrors?.balance}
-          helperText={getGiftCardErrorMessage(formErrors?.balance, intl)}
-          change={change}
-          choices={mapSingleValueNodeToChoice(channelCurrencies)}
-          containerClassName={classes.balanceContainer}
-          textFieldProps={{
-            type: "float",
-            label: intl.formatMessage(messages.amountLabel),
-            name: "balanceAmount",
-            value: balanceAmount,
-            minValue: 0
-          }}
-          selectFieldProps={{
-            name: "balanceCurrency",
-            value: balanceCurrency || initialCurrency,
-            className: classes.currencySelectField
-          }}
-        />
         <CardSpacer />
         <GiftCardTagInput
           error={formErrors?.tag}
@@ -195,15 +178,7 @@ const GiftCardCreateDialogForm: React.FC<GiftCardCreateDialogFormProps> = ({
         />
         <Divider />
         <VerticalSpacer />
-        <GiftCardCreateExpirySelect
+        <GiftCardCreateExpirySelect {...commonFormProps} />
-          errors={formErrors}
-          change={change}
-          expirySelected={expirySelected}
-          expiryType={expiryType}
-          expiryPeriodAmount={expiryPeriodAmount}
-          expiryPeriodType={expiryPeriodType}
-          expiryDate={expiryDate}
-        />
         <VerticalSpacer />
         <TextField
           name="note"

src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogMoneyInput.tsx

@@ -0,0 +1,87 @@
+import TextWithSelectField from "@saleor/components/TextWithSelectField";
+import { ChangeEvent } from "@saleor/hooks/useForm";
+import useLocalStorage from "@saleor/hooks/useLocalStorage";
+import { mapSingleValueNodeToChoice } from "@saleor/utils/maps";
+import * as React from "react";
+import { useEffect } from "react";
+import { useIntl } from "react-intl";
+
+import { getGiftCardErrorMessage } from "../GiftCardUpdate/messages";
+import { GiftCardCreateFormData } from "./GiftCardCreateDialogForm";
+import { giftCardCreateDialogMessages as messages } from "./messages";
+import { useChannelCurrencies } from "./queries";
+import { useGiftCardCreateDialogFormStyles as useStyles } from "./styles";
+import { GiftCardCreateFormCommonProps } from "./types";
+
+interface GiftCardCreateDialogMoneyInputProps
+  extends GiftCardCreateFormCommonProps {
+  set: (data: Partial<GiftCardCreateFormData>) => void;
+}
+
+const GiftCardCreateDialogMoneyInput: React.FC<GiftCardCreateDialogMoneyInputProps> = ({
+  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<any>) => {
+    if (event.target?.name === "balanceCurrency") {
+      setCurrency(event.target?.value);
+    }
+
+    change(event);
+  };
+
+  return (
+    <TextWithSelectField
+      isError={!!errors?.balance}
+      helperText={getGiftCardErrorMessage(errors?.balance, intl)}
+      change={handleInputChange}
+      choices={mapSingleValueNodeToChoice(channelCurrencies)}
+      containerClassName={classes.balanceContainer}
+      textFieldProps={{
+        type: "float",
+        label: intl.formatMessage(messages.amountLabel),
+        name: "balanceAmount",
+        value: balanceAmount,
+        minValue: 0
+      }}
+      selectFieldProps={{
+        name: "balanceCurrency",
+        value: balanceCurrency,
+        className: classes.currencySelectField
+      }}
+    />
+  );
+};
+
+export default GiftCardCreateDialogMoneyInput;

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 {
+const GiftCardCreateExpirySelect: React.FC<GiftCardCreateFormCommonProps> = ({
-  change: FormChange;
-  expirySelected: boolean;
-  expiryPeriodType: TimePeriodTypeEnum;
-  expiryPeriodAmount: number;
-  expiryType: GiftCardExpiryType;
-  customOptions?: UntranslatedOption[];
-  errors?: Record<"expiryDate", GiftCardError>;
-  expiryDate?: string;
-}
-
-const GiftCardCreateExpirySelect: React.FC<GiftCardCreateExpirySelectProps> = ({
   errors,
   change,
-  expirySelected,
+  data: {
-  expiryPeriodType,
+    expirySelected,
-  expiryPeriodAmount,
+    expiryPeriodType,
-  expiryType,
+    expiryPeriodAmount,
-  expiryDate
+    expiryType,
+    expiryDate
+  }
 }) => {
   const intl = useIntl();
   const classes = useStyles({});

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;
 }

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<GiftCardCommonFormData, "balanceAmount" | "balanceCurrency">;
+  Pick<GiftCardCreateFormData, "tag" | "expiryDate">;
 
 export interface GiftCardUpdateFormConsumerData
   extends GiftCardUpdateFormErrors {