chore(dashboard): Add for block and show behind a ff

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,16 +34,33 @@ 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}
       name="body"
       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,

apps/dashboard/src/index.css

@@ -92,4 +92,4 @@
     height: 100%;
     scroll-behavior: smooth;
   }
-}
+}

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',
 }