feat(dashboard): add delay step

apps/api/src/app/workflows-v2/shared/schemas/delay-control.schema.ts

@@ -12,7 +12,7 @@ import {
 export const DelayTimeControlZodSchema = z
   .object({
     type: z.enum(['regular']).default('regular'),
-    amount: z.number(),
+    amount: z.number().min(1),
     unit: z.nativeEnum(TimeUnitEnum),
   })
   .strict();
@@ -26,15 +26,15 @@ export const delayUiSchema: UiSchema = {
   properties: {
     amount: {
       component: UiComponentEnum.DELAY_AMOUNT,
-      placeholder: '30',
+      placeholder: null,
     },
     unit: {
       component: UiComponentEnum.DELAY_UNIT,
       placeholder: DigestUnitEnum.SECONDS,
     },
     type: {
       component: UiComponentEnum.DELAY_TYPE,
-      placeholder: null,
+      placeholder: 'regular',
     },
   },
 };

apps/dashboard/src/components/number-input-with-select.tsx

@@ -0,0 +1,104 @@
+import { cn } from '@/utils/ui';
+import { FormControl, FormField, FormItem, FormMessagePure } from '@/components/primitives/form/form';
+import { Input } from '@/components/primitives/input';
+import { InputFieldPure } from '@/components/primitives/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/primitives/select';
+import { useFormContext } from 'react-hook-form';
+import { useMemo } from 'react';
+
+type InputWithSelectProps = {
+  fields: {
+    inputKey: string;
+    selectKey: string;
+  };
+  options: string[];
+  defaultOption?: string;
+  className?: string;
+  placeholder?: string;
+  isReadOnly?: boolean;
+};
+
+export const NumberInputWithSelect = ({
+  fields,
+  options,
+  defaultOption,
+  className,
+  placeholder,
+  isReadOnly,
+}: InputWithSelectProps) => {
+  const { getFieldState, setValue, getValues, control } = useFormContext();
+
+  const input = getFieldState(`${fields.inputKey}`);
+  const select = getFieldState(`${fields.selectKey}`);
+  const error = input.error || select.error;
+
+  const defaultSelectedValue = useMemo(() => {
+    return defaultOption ?? options[0];
+  }, [defaultOption, options]);
+
+  const handleChange = (value: { input: number; select: string }) => {
+    // we want to always set both values and treat it as a single input
+    setValue(fields.inputKey, value.input, { shouldDirty: true });
+    setValue(fields.selectKey, value.select, { shouldDirty: true });
+  };
+
+  return (
+    <>
+      <InputFieldPure className="h-7 rounded-lg border pr-0">
+        <FormField
+          control={control}
+          name={fields.inputKey}
+          render={({ field }) => (
+            <FormItem className="w-full overflow-hidden">
+              <FormControl>
+                <Input
+                  type="number"
+                  className={cn(
+                    'min-w-[20ch] [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+                    className
+                  )}
+                  placeholder={placeholder}
+                  disabled={isReadOnly}
+                  {...field}
+                  onChange={(e) => {
+                    handleChange({ input: Number(e.target.value), select: getValues(fields.selectKey) });
+                  }}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={control}
+          name={fields.selectKey}
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Select
+                  onValueChange={(value) => {
+                    handleChange({ input: Number(getValues(fields.inputKey)), select: value });
+                  }}
+                  defaultValue={defaultSelectedValue}
+                  disabled={isReadOnly}
+                  {...field}
+                >
+                  <SelectTrigger className="h-7 w-auto translate-x-0.5 gap-1 rounded-l-none border-l bg-neutral-50 p-2 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {options.map((option) => (
+                      <SelectItem key={option} value={option}>
+                        {option}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </InputFieldPure>
+      <FormMessagePure error={error ? String(error.message) : undefined} />
+    </>
+  );
+};

apps/dashboard/src/components/primitives/form/form.tsx

@@ -120,8 +120,8 @@ const FormMessagePure = React.forwardRef<
       className={formMessageVariants({ variant: error ? 'error' : 'default', className })}
       {...props}
     >
-      {error ? <RiErrorWarningFill className="size-4" /> : <RiInformationFill className="size-4" />}
-      <span className="mt-[1px] text-xs leading-3">{body}</span>
+      <span>{error ? <RiErrorWarningFill className="size-4" /> : <RiInformationFill className="size-4" />}</span>
+      <span className="mt-[1px] text-xs leading-4">{body}</span>
     </p>
   );
 });

apps/dashboard/src/components/workflow-editor/add-step-menu.tsx

@@ -8,6 +8,8 @@ import { Badge } from '../primitives/badge';
 import { cn } from '@/utils/ui';
 import { StepTypeEnum } from '@/utils/enums';
 import { STEP_TYPE_TO_COLOR } from '@/utils/color';
+import { useFeatureFlag } from '@/hooks/use-feature-flag';
+import { FeatureFlagsKeysEnum } from '@novu/shared';
 
 const MenuGroup = ({ children }: { children: ReactNode }) => {
   return <div className="flex flex-col">{children}</div>;
@@ -41,7 +43,7 @@ const MenuItem = ({
 
   return (
     <span
-      onClick={onClick}
+      onClick={!disabled ? onClick : undefined}
       className={cn(
         'shadow-xs text-foreground-600 hover:bg-accent flex cursor-pointer items-center gap-2 rounded-lg p-1.5',
         {
@@ -73,6 +75,7 @@ export const AddStepMenu = ({
   onMenuItemClick: (stepType: StepTypeEnum) => void;
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const isDelayDigestEmailEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_ND_DELAY_DIGEST_EMAIL_ENABLED);
 
   const handleMenuItemClick = (stepType: StepTypeEnum) => {
     onMenuItemClick(stepType);
@@ -121,7 +124,13 @@ export const AddStepMenu = ({
               <MenuTitle>Action Steps</MenuTitle>
               <MenuItemsGroup>
                 <MenuItem stepType={StepTypeEnum.DIGEST}>Digest</MenuItem>
-                <MenuItem stepType={StepTypeEnum.DELAY}>Delay</MenuItem>
+                <MenuItem
+                  stepType={StepTypeEnum.DELAY}
+                  disabled={!isDelayDigestEmailEnabled}
+                  onClick={() => handleMenuItemClick(StepTypeEnum.DELAY)}
+                >
+                  Delay
+                </MenuItem>
               </MenuItemsGroup>
             </MenuGroup>
           </div>

apps/dashboard/src/components/workflow-editor/nodes.tsx

@@ -183,6 +183,7 @@ export const DelayNode = (props: NodeProps<NodeType>) => {
           <NodeName>{data.name || 'Delay Step'}</NodeName>
         </NodeHeader>
         <NodeBody>{data.content || 'You have been invited to the Novu party on "commentSnippet"'}</NodeBody>
+        {data.error && <NodeError>{data.error}</NodeError>}
         <Handle isConnectable={false} className={handleClassName} type="target" position={Position.Top} id="a" />
         <Handle isConnectable={false} className={handleClassName} type="source" position={Position.Bottom} id="b" />
       </StepNode>

apps/dashboard/src/components/workflow-editor/steps/component-utils.tsx

@@ -5,6 +5,7 @@ import { InAppSubject } from '@/components/workflow-editor/steps/in-app/in-app-s
 import { InAppBody } from '@/components/workflow-editor/steps/in-app/in-app-body';
 import { InAppAvatar } from '@/components/workflow-editor/steps/in-app/in-app-avatar';
 import { InAppRedirect } from '@/components/workflow-editor/steps/in-app/in-app-redirect';
+import { DelayAmount } from '@/components/workflow-editor/steps/delay/delay-amount';
 
 export const getComponentByType = ({ component }: { component?: UiComponentEnum }) => {
   switch (component) {
@@ -23,6 +24,11 @@ export const getComponentByType = ({ component }: { component?: UiComponentEnum
     case UiComponentEnum.URL_TEXT_BOX: {
       return <InAppRedirect />;
     }
+    case UiComponentEnum.DELAY_AMOUNT:
+    case UiComponentEnum.DELAY_UNIT:
+    case UiComponentEnum.DELAY_TYPE: {
+      return <DelayAmount />;
+    }
     default: {
       return null;
     }

apps/dashboard/src/components/workflow-editor/steps/configure-inline/configure-step-inline-form.tsx

@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import merge from 'lodash.merge';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { StepDataDto, StepIssuesDto, UpdateWorkflowDto, WorkflowResponseDto } from '@novu/shared';
+import { StepTypeEnum } from '@novu/shared';
+
+import { flattenIssues, updateStepControlValuesInWorkflow } from '@/components/workflow-editor/step-utils';
+import { buildDefaultValues, buildDefaultValuesOfDataSchema, buildDynamicZodSchema } from '@/utils/schema';
+import { Form } from '@/components/primitives/form/form';
+import { useFormAutosave } from '@/hooks/use-form-autosave';
+import { SaveFormContext } from '@/components/workflow-editor/steps/save-form-context';
+import { DelayForm } from '@/components/workflow-editor/steps/delay/delay-form';
+
+const STEP_TYPE_TO_INLINE_FORM: Record<StepTypeEnum, (args: StepInlineFormProps) => React.JSX.Element | null> = {
+  [StepTypeEnum.DELAY]: DelayForm,
+  [StepTypeEnum.IN_APP]: () => null,
+  [StepTypeEnum.EMAIL]: () => null,
+  [StepTypeEnum.SMS]: () => null,
+  [StepTypeEnum.CHAT]: () => null,
+  [StepTypeEnum.PUSH]: () => null,
+  [StepTypeEnum.CUSTOM]: () => null,
+  [StepTypeEnum.TRIGGER]: () => null,
+  [StepTypeEnum.DIGEST]: () => null,
+};
+
+// Use the UI Schema to build the default values if it exists else use the data schema (code-first approach) values
+const calculateDefaultValues = (step: StepDataDto) => {
+  if (Object.keys(step.controls.uiSchema ?? {}).length !== 0) {
+    return merge(buildDefaultValues(step.controls.uiSchema ?? {}), step.controls.values);
+  }
+
+  return merge(buildDefaultValuesOfDataSchema(step.controls.dataSchema ?? {}), step.controls.values);
+};
+
+export type StepInlineFormProps = {
+  workflow: WorkflowResponseDto;
+  step: StepDataDto;
+};
+
+type ConfigureStepInlineFormProps = StepInlineFormProps & {
+  issues?: StepIssuesDto;
+  update: (data: UpdateWorkflowDto) => void;
+  updateStepCache: (step: Partial<StepDataDto>) => void;
+};
+
+export const ConfigureStepInlineForm = (props: ConfigureStepInlineFormProps) => {
+  const { workflow, step, issues, update, updateStepCache } = props;
+  const schema = useMemo(() => buildDynamicZodSchema(step.controls.dataSchema ?? {}), [step.controls.dataSchema]);
+
+  const defaultValues = useMemo(() => {
+    return calculateDefaultValues(step);
+  }, [step]);
+
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues,
+    shouldFocusError: false,
+  });
+
+  const { onBlur, saveForm } = useFormAutosave({
+    previousData: defaultValues,
+    form,
+    save: (data) => {
+      update(updateStepControlValuesInWorkflow(workflow, step, data));
+      updateStepCache({ ...step, controls: { ...step.controls, values: data } });
+    },
+  });
+
+  const setIssuesFromStep = useCallback(() => {
+    const stepIssues = flattenIssues(issues?.controls);
+    Object.entries(stepIssues).forEach(([key, value]) => {
+      form.setError(key as string, { message: value });
+    });
+  }, [form, issues]);
+
+  useEffect(() => {
+    setIssuesFromStep();
+  }, [setIssuesFromStep]);
+
+  const InlineForm = STEP_TYPE_TO_INLINE_FORM[step.type];
+
+  const value = useMemo(() => ({ saveForm }), [saveForm]);
+
+  return (
+    <Form {...form}>
+      <form className="flex h-full flex-col" onBlur={onBlur}>
+        <SaveFormContext.Provider value={value}>
+          <InlineForm workflow={workflow} step={step} />
+        </SaveFormContext.Provider>
+      </form>
+    </Form>
+  );
+};