From 0b296dabc85454d22a09a21794df0fae6bccf668 Mon Sep 17 00:00:00 2001
From: desiprisg <george.desipris.56@gmail.com>
Date: Mon, 16 Dec 2024 17:36:23 +0200
Subject: [PATCH] chore(dashboard): Add for block and show behind a ff

---
 .../workflow-editor/steps/email/maily.tsx     | 21 ++++++++++++++++++-
 apps/dashboard/src/index.css                  |  2 +-
 packages/shared/src/types/feature-flags.ts    |  2 ++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/components/workflow-editor/steps/email/maily.tsx b/apps/dashboard/src/components/workflow-editor/steps/email/maily.tsx
index 0e172707647..48f67f5428a 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/email/maily.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/email/maily.tsx
@@ -1,5 +1,6 @@
 import { FormControl, FormField, FormMessage } from '@/components/primitives/form/form';
 import { useWorkflow } from '@/components/workflow-editor/workflow-provider';
+import { useFeatureFlag } from '@/hooks/use-feature-flag';
 import { parseStepVariablesToLiquidVariables } from '@/utils/parseStepVariablesToLiquidVariables';
 import { cn } from '@/utils/ui';
 import { Editor } from '@maily-to/core';
@@ -20,6 +21,7 @@ import {
   spacer,
   text,
 } from '@maily-to/core/blocks';
+import { FeatureFlagsKeysEnum } from '@novu/shared';
 import type { Editor as TiptapEditor } from '@tiptap/core';
 import { HTMLAttributes, useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -32,6 +34,15 @@ export const Maily = (props: MailyProps) => {
   const [_, setEditor] = useState<TiptapEditor>();
   const { control } = useFormContext();
 
+  const isForBlockEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_ND_EMAIL_FOR_BLOCK_ENABLED);
+  const isShowEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_ND_EMAIL_SHOW_ENABLED);
+
+  /* 
+button:has(.lucide-eye) {
+  display: none;
+}
+  */
+
   return (
     <FormField
       control={control}
@@ -39,9 +50,17 @@ export const Maily = (props: MailyProps) => {
       render={({ field }) => {
         return (
           <>
+            {!isShowEnabled && (
+              <style>{`
+                  button:has(.lucide-eye) {
+                    display: none;
+                  }
+                `}</style>
+            )}
             <div className={cn('mx-auto flex h-full w-full', className)} {...rest}>
               <FormControl>
                 <Editor
+                  key={isForBlockEnabled ? 'for-block-enabled' : 'for-block-disabled'}
                   config={{
                     hasMenuBar: false,
                     wrapClassName: 'h-full w-full',
@@ -57,7 +76,7 @@ export const Maily = (props: MailyProps) => {
                     image,
                     section,
                     columns,
-                    forLoop,
+                    ...(isForBlockEnabled ? [forLoop] : []),
                     divider,
                     spacer,
                     button,
diff --git a/apps/dashboard/src/index.css b/apps/dashboard/src/index.css
index c2eef11e4a2..298e1e982ff 100644
--- a/apps/dashboard/src/index.css
+++ b/apps/dashboard/src/index.css
@@ -92,4 +92,4 @@
     height: 100%;
     scroll-behavior: smooth;
   }
-}
+}
\ No newline at end of file
diff --git a/packages/shared/src/types/feature-flags.ts b/packages/shared/src/types/feature-flags.ts
index 3cd3afcb8d7..6d78f5f8be7 100644
--- a/packages/shared/src/types/feature-flags.ts
+++ b/packages/shared/src/types/feature-flags.ts
@@ -47,4 +47,6 @@ export enum FeatureFlagsKeysEnum {
   IS_NEW_DASHBOARD_GETTING_STARTED_ENABLED = 'IS_NEW_DASHBOARD_GETTING_STARTED_ENABLED',
   IS_ND_DELAY_DIGEST_EMAIL_ENABLED = 'IS_ND_DELAY_DIGEST_EMAIL_ENABLED',
   IS_NEW_DASHBOARD_ACTIVITY_FEED_ENABLED = 'IS_NEW_DASHBOARD_ACTIVITY_FEED_ENABLED',
+  IS_ND_EMAIL_FOR_BLOCK_ENABLED = 'IS_ND_EMAIL_FOR_BLOCK_ENABLED',
+  IS_ND_EMAIL_SHOW_ENABLED = 'IS_ND_EMAIL_SHOW_ENABLED',
 }