From a953866ba407ae6ca41bd33cc210cfaa4ca01ce9 Mon Sep 17 00:00:00 2001
From: Lovish Duggal <lovishduggal11@gmail.com>
Date: Fri, 8 Mar 2024 12:04:13 +0530
Subject: [PATCH] fix: Fixed Visual Bug in Workflow Editor with Digests

---
 .../digest/TimedDigestWillBeSentHeader.tsx    | 32 +++++++++----------
 .../workflow/digest/WillBeSentHeader.tsx      |  2 +-
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/pages/templates/workflow/digest/TimedDigestWillBeSentHeader.tsx b/apps/web/src/pages/templates/workflow/digest/TimedDigestWillBeSentHeader.tsx
index b8ff9380772..6b07ae932ea 100644
--- a/apps/web/src/pages/templates/workflow/digest/TimedDigestWillBeSentHeader.tsx
+++ b/apps/web/src/pages/templates/workflow/digest/TimedDigestWillBeSentHeader.tsx
@@ -5,7 +5,6 @@ import { DigestUnitEnum, MonthlyTypeEnum } from '@novu/shared';
 
 import { colors } from '@novu/design-system';
 import { pluralizeTime } from '../../../../utils';
-import { useStepFormPath } from '../../hooks/useStepFormPath';
 
 const Highlight = ({ children, isHighlight }) => {
   const { colorScheme } = useMantineColorScheme();
@@ -61,13 +60,12 @@ const sortWeekdays = (weekdays: string[]): string[] => {
   return weekdays.sort((a, b) => WEEKDAYS_ORDER.indexOf(a) - WEEKDAYS_ORDER.indexOf(b));
 };
 
-export const TimedDigestWillBeSentHeader = ({ isHighlight = true }: { isHighlight?: boolean }) => {
+export const TimedDigestWillBeSentHeader = ({ path, isHighlight = true }: { path: string; isHighlight?: boolean }) => {
   const { watch } = useFormContext();
-  const stepFormPath = useStepFormPath();
 
-  const unit = watch(`${stepFormPath}.digestMetadata.timed.unit`);
+  const unit = watch(`${path}.digestMetadata.timed.unit`);
   if (unit == DigestUnitEnum.MINUTES) {
-    const amount = watch(`${stepFormPath}.digestMetadata.timed.minutes.amount`);
+    const amount = watch(`${path}.digestMetadata.timed.minutes.amount`);
 
     return (
       <>
@@ -77,7 +75,7 @@ export const TimedDigestWillBeSentHeader = ({ isHighlight = true }: { isHighligh
   }
 
   if (unit == DigestUnitEnum.HOURS) {
-    const amount = watch(`${stepFormPath}.digestMetadata.timed.hours.amount`);
+    const amount = watch(`${path}.digestMetadata.timed.hours.amount`);
 
     return (
       <>
@@ -87,8 +85,8 @@ export const TimedDigestWillBeSentHeader = ({ isHighlight = true }: { isHighligh
   }
 
   if (unit === DigestUnitEnum.DAYS) {
-    const amount = watch(`${stepFormPath}.digestMetadata.timed.days.amount`);
-    const atTime = watch(`${stepFormPath}.digestMetadata.timed.days.atTime`);
+    const amount = watch(`${path}.digestMetadata.timed.days.amount`);
+    const atTime = watch(`${path}.digestMetadata.timed.days.atTime`);
 
     if (amount !== '' && amount !== '1') {
       return (
@@ -118,9 +116,9 @@ export const TimedDigestWillBeSentHeader = ({ isHighlight = true }: { isHighligh
   }
 
   if (unit === DigestUnitEnum.WEEKS) {
-    const amount = watch(`${stepFormPath}.digestMetadata.timed.weeks.amount`);
-    const atTime = watch(`${stepFormPath}.digestMetadata.timed.weeks.atTime`);
-    const weekDays = watch(`${stepFormPath}.digestMetadata.timed.weeks.weekDays`) || [];
+    const amount = watch(`${path}.digestMetadata.timed.weeks.amount`);
+    const atTime = watch(`${path}.digestMetadata.timed.weeks.atTime`);
+    const weekDays = watch(`${path}.digestMetadata.timed.weeks.weekDays`) || [];
 
     const weekDaysString =
       weekDays?.length > 2
@@ -162,14 +160,14 @@ export const TimedDigestWillBeSentHeader = ({ isHighlight = true }: { isHighligh
     );
   }
 
-  const amount = watch(`${stepFormPath}.digestMetadata.timed.months.amount`);
-  const monthlyType = watch(`${stepFormPath}.digestMetadata.timed.months.monthlyType`);
-  const atTime = watch(`${stepFormPath}.digestMetadata.timed.months.atTime`);
-  const monthDays = watch(`${stepFormPath}.digestMetadata.timed.months.monthDays`) || [];
+  const amount = watch(`${path}.digestMetadata.timed.months.amount`);
+  const monthlyType = watch(`${path}.digestMetadata.timed.months.monthlyType`);
+  const atTime = watch(`${path}.digestMetadata.timed.months.atTime`);
+  const monthDays = watch(`${path}.digestMetadata.timed.months.monthDays`) || [];
 
   if (monthlyType === MonthlyTypeEnum.ON) {
-    const ordinal = watch(`${stepFormPath}.digestMetadata.timed.months.ordinal`);
-    const ordinalValue = watch(`${stepFormPath}.digestMetadata.timed.months.ordinalValue`);
+    const ordinal = watch(`${path}.digestMetadata.timed.months.ordinal`);
+    const ordinalValue = watch(`${path}.digestMetadata.timed.months.ordinalValue`);
 
     if (!ordinal || !ordinalValue) {
       return null;
diff --git a/apps/web/src/pages/templates/workflow/digest/WillBeSentHeader.tsx b/apps/web/src/pages/templates/workflow/digest/WillBeSentHeader.tsx
index 78cc99cc17c..984c4a730a7 100644
--- a/apps/web/src/pages/templates/workflow/digest/WillBeSentHeader.tsx
+++ b/apps/web/src/pages/templates/workflow/digest/WillBeSentHeader.tsx
@@ -37,7 +37,7 @@ export const WillBeSentHeader = ({ path, isHighlight = true }: { path: string; i
   const type = watch(`${path}.digestMetadata.type`);
 
   if (type === DigestTypeEnum.TIMED) {
-    return <TimedDigestWillBeSentHeader isHighlight={isHighlight} />;
+    return <TimedDigestWillBeSentHeader path={path} isHighlight={isHighlight} />;
   }
 
   const unit = watch(`${path}.digestMetadata.regular.unit`);