From 493c71799b5f47958b3b912e0d7c7e0c17df9e0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82?= <pawel.tymczuk@gmail.com>
Date: Fri, 20 Dec 2024 12:38:33 +0100
Subject: [PATCH] feat(dashboard): digest window preserve regular/scheduled tab
 form changes

---
 .../steps/digest/digest-window.tsx            | 50 +++++++++++++------
 1 file changed, 35 insertions(+), 15 deletions(-)

diff --git a/apps/dashboard/src/components/workflow-editor/steps/digest/digest-window.tsx b/apps/dashboard/src/components/workflow-editor/steps/digest/digest-window.tsx
index 3d0ed32c099..a34042728d7 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/digest/digest-window.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/digest/digest-window.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Tabs } from '@radix-ui/react-tabs';
 import { RiCalendarScheduleFill } from 'react-icons/ri';
-import { useFormContext } from 'react-hook-form';
+import { FieldValues, useFormContext } from 'react-hook-form';
 import { TimeUnitEnum } from '@novu/shared';
 
 import { FormField, FormLabel, FormMessagePure } from '@/components/primitives/form/form';
@@ -18,6 +18,8 @@ const REGULAR_DIGEST_TYPE = 'regular';
 const SCHEDULED_DIGEST_TYPE = 'scheduled';
 const TWO_SECONDS = 2000;
 
+type PreservedFormValuesByType = { [key: string]: FieldValues | undefined };
+
 export const DigestWindow = () => {
   const { control, getFieldState, setValue, setError, getValues, trigger } = useFormContext();
   const formValues = getValues();
@@ -26,12 +28,43 @@ export const DigestWindow = () => {
   const [digestType, setDigestType] = useState(
     typeof amount !== 'undefined' ? REGULAR_DIGEST_TYPE : SCHEDULED_DIGEST_TYPE
   );
+  const [preservedFormValuesByType, setPreservedFormValuesByType] = useState<PreservedFormValuesByType>({
+    regular: undefined,
+    scheduled: undefined,
+  });
   const amountField = getFieldState(`${AMOUNT_KEY}`);
   const unitField = getFieldState(`${UNIT_KEY}`);
   const cronField = getFieldState(`${CRON_KEY}`);
   const regularDigestError = amountField.error || unitField.error;
   const scheduledDigestError = cronField.error;
 
+  const handleDigestTypeChange = async (value: string) => {
+    // get the latest form values
+    const controlValues = getValues().controlValues;
+
+    // preserve the current form values
+    setPreservedFormValuesByType((old) => ({ ...old, [digestType]: { ...controlValues } }));
+    setDigestType(value);
+
+    // restore the preserved form values
+    const preservedFormValues = preservedFormValuesByType[value];
+    if (preservedFormValues) {
+      setValue(AMOUNT_KEY, preservedFormValues['amount'], { shouldDirty: true });
+      setValue(UNIT_KEY, preservedFormValues['unit'], { shouldDirty: true });
+      setValue(CRON_KEY, preservedFormValues['cron'], { shouldDirty: true });
+    } else if (value === SCHEDULED_DIGEST_TYPE) {
+      setValue(AMOUNT_KEY, undefined, { shouldDirty: true });
+      setValue(UNIT_KEY, undefined, { shouldDirty: true });
+      setValue(CRON_KEY, EVERY_MINUTE_CRON, { shouldDirty: true });
+    } else {
+      setValue(AMOUNT_KEY, '', { shouldDirty: true });
+      setValue(UNIT_KEY, TimeUnitEnum.SECONDS, { shouldDirty: true });
+      setValue(CRON_KEY, undefined, { shouldDirty: true });
+    }
+    await trigger();
+    saveForm();
+  };
+
   return (
     <div className="flex flex-col gap-2">
       <FormLabel>
@@ -47,20 +80,7 @@ export const DigestWindow = () => {
           e.preventDefault();
           e.stopPropagation();
         }}
-        onValueChange={async (value) => {
-          setDigestType(value);
-          if (value === SCHEDULED_DIGEST_TYPE) {
-            setValue(AMOUNT_KEY, undefined, { shouldDirty: true });
-            setValue(UNIT_KEY, undefined, { shouldDirty: true });
-            setValue(CRON_KEY, EVERY_MINUTE_CRON, { shouldDirty: true });
-          } else {
-            setValue(AMOUNT_KEY, '', { shouldDirty: true });
-            setValue(UNIT_KEY, TimeUnitEnum.SECONDS, { shouldDirty: true });
-            setValue(CRON_KEY, undefined, { shouldDirty: true });
-          }
-          await trigger();
-          saveForm();
-        }}
+        onValueChange={handleDigestTypeChange}
       >
         <div className="bg-neutral-alpha-50 flex flex-col rounded-lg border border-solid border-neutral-100">
           <div className="rounded-t-lg p-2">