feat: save form state in localstorage on user interaction in buy flow…

… step 2
regen-network · Jan 8, 2025 · 0b294da · 0b294da
1 parent 7d19bb6
commit 0b294da
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 3 deletions.
diff --git a/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.CardInfo.tsx b/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.CardInfo.tsx
@@ -7,6 +7,8 @@ import CheckboxLabel from 'web-components/src/components/inputs/new/CheckboxLabe
 import { Body } from 'web-components/src/components/typography';
 import { UseStateSetter } from 'web-components/src/types/react/useState';
 
+import { useMultiStep } from 'components/templates/MultiStepTemplate';
+
 import { paymentElementOptions } from './PaymentInfoForm.constants';
 import { PaymentInfoFormSchemaType } from './PaymentInfoForm.schema';
 
@@ -22,6 +24,7 @@ export const CardInfo = ({
 }: CardInfoProps) => {
   const ctx = useFormContext<PaymentInfoFormSchemaType>();
   const { register, control, setValue } = ctx;
+  const { handleSave: updateMultiStepData, activeStep, data } = useMultiStep();
 
   const createAccount = useWatch({
     control: control,
@@ -36,6 +39,19 @@ export const CardInfo = ({
     setValue('savePaymentMethod', createAccount);
   }, [createAccount, setValue]);
 
+  useEffect(() => {
+    updateMultiStepData(
+      {
+        ...data,
+        savePaymentMethod,
+      },
+      activeStep,
+    );
+    // Intentionally omit `updateMultiStepData` and `data` from the dependency array
+    // because including them trigger unnecessary renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [savePaymentMethod, activeStep]);
+
   return (
     <div className={className}>
       <PaymentElement

diff --git a/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.PaymentInfo.tsx b/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.PaymentInfo.tsx
@@ -9,6 +9,8 @@ import { Radio } from 'web-components/src/components/inputs/new/Radio/Radio';
 import { Title } from 'web-components/src/components/typography';
 import { UseStateSetter } from 'web-components/src/types/react/useState';
 
+import { useMultiStep } from 'components/templates/MultiStepTemplate';
+
 import { CardInfo } from './PaymentInfoForm.CardInfo';
 import { PaymentInfoFormSchemaType } from './PaymentInfoForm.schema';
 
@@ -25,7 +27,7 @@ export const PaymentInfo = ({
   const { _ } = useLingui();
   const ctx = useFormContext<PaymentInfoFormSchemaType>();
   const { register, control, setValue } = ctx;
-
+  const { handleSave: updateMultiStepData, activeStep, data } = useMultiStep();
   const createAccount = useWatch({
     control: control,
     name: 'createAccount',
@@ -37,7 +39,18 @@ export const PaymentInfo = ({
 
   useEffect(() => {
     setValue('savePaymentMethod', createAccount);
-  }, [createAccount, setValue]);
+    updateMultiStepData(
+      {
+        ...data,
+        savePaymentMethod: createAccount,
+        createAccount,
+      },
+      activeStep,
+    );
+    // Intentionally omit `updateMultiStepData` and `data` from the dependency array
+    // because including them trigger unnecessary renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeStep, createAccount, setValue]);
 
   return (
     <Card className="py-30 px-20 sm:py-50 sm:px-40 border-grey-300">

diff --git a/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.tsx b/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.tsx
@@ -55,7 +55,12 @@ export const PaymentInfoForm = ({
   setCardDetails,
 }: PaymentInfoFormProps) => {
   const { _ } = useLingui();
-  const { handleBack } = useMultiStep();
+  const {
+    handleBack,
+    handleSave: updateMultiStepData,
+    activeStep,
+    data,
+  } = useMultiStep();
   const [paymentInfoValid, setPaymentInfoValid] = useState(false);
 
   const form = useZodForm({
@@ -89,6 +94,18 @@ export const PaymentInfoForm = ({
     () => paymentOption === PAYMENT_OPTIONS.CARD,
     [paymentOption],
   );
+
+  const handleOnBlur = () => {
+    updateMultiStepData(
+      {
+        ...data,
+        name: form.watch('name'),
+        email: form.watch('email'),
+      },
+      activeStep,
+    );
+  };
+
   return (
     <Form
       form={form}
@@ -142,6 +159,7 @@ export const PaymentInfoForm = ({
         }
         onSubmit(values);
       }}
+      onBlur={handleOnBlur}
     >
       <div className="flex flex-col gap-10 sm:gap-20 max-w-[560px]">
         <CustomerInfo