@embedreach/components 0.2.7 → 0.2.9

package/dist/chunks/index.js

@@ -60341,8 +60341,12 @@ const InfoTooltip = ({ title: title2, alertText, Icon: Icon2 = Info, onClick, as
   const [isOpen, setIsOpen] = useState(false);
   const handleClick = (e4) => {
     e4.stopPropagation();
-    setIsOpen(!isOpen);
-    onClick?.();
+    if (onClick) {
+      onClick();
+      setIsOpen(false);
+    } else {
+      setIsOpen(!isOpen);
+    }
   };
   return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { open: isOpen, onOpenChange: setIsOpen, children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild, children: /* @__PURE__ */ jsx(
@@ -66063,7 +66067,8 @@ const AutomationEditorSMSPreview = ({
 const AutomationEditorTabs = ({
   disablePreview = false,
   disableEditContent = false,
-  disablePreviewSubtext = false
+  disablePreviewSubtext = false,
+  hideSms = false
 }) => {
   const [activeTab, setActiveTab] = useState("email");
   const [initialLoad, setInitialLoad] = useState(false);
@@ -66094,46 +66099,52 @@ const AutomationEditorTabs = ({
       defaultValue: "email",
       className: "flex flex-col gap-4 pt-4 flex-1 bg-muted rounded-md",
       children: [
-        /* @__PURE__ */ jsx("div", { className: "max-w-[640px] mx-auto w-full", children: /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "email", className: "group", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: emailActiveIcon,
-                alt: "Email",
-                className: "w-4 h-4 mr-2 hidden group-data-[state=active]:block"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: emailInactiveIcon,
-                alt: "Email",
-                className: "w-4 h-4 mr-2 block group-data-[state=active]:hidden"
-              }
-            ),
-            "Email"
-          ] }) }),
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "sms", className: "group", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: smsActiveIcon,
-                alt: "SMS",
-                className: "w-4 h-4 mr-2 hidden group-data-[state=active]:block"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: smsInactiveIcon,
-                alt: "SMS",
-                className: "w-4 h-4 mr-2 block group-data-[state=active]:hidden"
-              }
-            ),
-            "SMS"
-          ] }) })
-        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "max-w-[640px] mx-auto w-full", children: /* @__PURE__ */ jsxs(
+          TabsList,
+          {
+            className: `grid w-full ${hideSms ? "grid-cols-1" : "grid-cols-2"}`,
+            children: [
+              /* @__PURE__ */ jsx(TabsTrigger, { value: "email", className: "group", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: emailActiveIcon,
+                    alt: "Email",
+                    className: "w-4 h-4 mr-2 hidden group-data-[state=active]:block"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: emailInactiveIcon,
+                    alt: "Email",
+                    className: "w-4 h-4 mr-2 block group-data-[state=active]:hidden"
+                  }
+                ),
+                "Email"
+              ] }) }),
+              !hideSms && /* @__PURE__ */ jsx(TabsTrigger, { value: "sms", className: "group", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: smsActiveIcon,
+                    alt: "SMS",
+                    className: "w-4 h-4 mr-2 hidden group-data-[state=active]:block"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: smsInactiveIcon,
+                    alt: "SMS",
+                    className: "w-4 h-4 mr-2 block group-data-[state=active]:hidden"
+                  }
+                ),
+                "SMS"
+              ] }) })
+            ]
+          }
+        ) }),
         /* @__PURE__ */ jsxs("div", { className: "max-w-[1000px] mx-auto w-full flex-1", children: [
           /* @__PURE__ */ jsx(TabsContent, { value: "sms", children: /* @__PURE__ */ jsx(
             AutomationEditorSMSPreview,
@@ -73457,6 +73468,13 @@ const OneTimeWizardMain = ({ onFinish, getExtraMergeFields, onBeforeSchedule })
     renderFooter()
   ] });
 };
+const OneTimeWizardWrapper = ({ children: children2, actionId }) => {
+  const { setActionId: setActionId2 } = useContext$1(Context);
+  useEffect(() => {
+    setActionId2(actionId);
+  }, [actionId, setActionId2]);
+  return /* @__PURE__ */ jsx("div", { children: children2 });
+};
 const OneTimeBroadcast = () => {
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("div", { className: styles$4.iconWrapper, children: /* @__PURE__ */ jsx(IconDefinitions.OneTimeBroadcast, {}) }),
@@ -73569,6 +73587,7 @@ const CreateAutomationModal = ({
   const [automationId, setAutomationId] = useState(
     void 0
   );
+  const [communicationActionId, setCommunicationActionId] = useState(void 0);
   const [initalStateSet, setInitalStateSet] = useState(false);
   const [automationState, setAutomationState] = useState(
     /**
@@ -73643,6 +73662,7 @@ const CreateAutomationModal = ({
           });
           if (automationType === AutomationTriggerType.ONE_TIME) {
             setCurrentStep(CreateAutomationModalStep.OneTimeWizard);
+            setCommunicationActionId(actionId);
             setStartedCreating(false);
           } else {
             onClose?.(response.id);
@@ -73709,10 +73729,10 @@ const CreateAutomationModal = ({
           }
         );
       case CreateAutomationModalStep.OneTimeWizard:
-        if (!automationId) {
+        if (!automationId || !communicationActionId) {
           return null;
         }
-        return /* @__PURE__ */ jsx(ViewAutomationProvider, { automationId, children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(ViewAutomationProvider, { automationId, children: /* @__PURE__ */ jsx(OneTimeWizardWrapper, { actionId: communicationActionId, children: /* @__PURE__ */ jsx(
           OneTimeWizardMain,
           {
             onFinish: () => {
@@ -73721,7 +73741,7 @@ const CreateAutomationModal = ({
             getExtraMergeFields,
             onBeforeSchedule
           }
-        ) });
+        ) }) });
       default:
         throw UnreachableCaseStatement$1(currentStep, CreateAutomationModalStep);
     }
@@ -74041,6 +74061,7 @@ const StatsGrid = ({
 const AutomationStatistics = ({
   automationId,
   includeSales = false,
+  includeSms = false,
   automation: automation2
 }) => {
   const [activeTab, setActiveTab] = useState("email");
@@ -74062,11 +74083,13 @@ const AutomationStatistics = ({
       label: `Email ${t$1("engage:insight", { count: 2 })}`,
       content: /* @__PURE__ */ jsx(StatsGrid, { activeTab: "email", statistics })
     },
-    {
-      id: "sms",
-      label: `SMS ${t$1("engage:insight", { count: 2 })}`,
-      content: /* @__PURE__ */ jsx(StatsGrid, { activeTab: "sms", statistics })
-    },
+    ...includeSms ? [
+      {
+        id: "sms",
+        label: `SMS ${t$1("engage:insight", { count: 2 })}`,
+        content: /* @__PURE__ */ jsx(StatsGrid, { activeTab: "sms", statistics })
+      }
+    ] : [],
     ...includeSales ? [
       {
         id: "sales",
@@ -81724,6 +81747,10 @@ function AutomationEditDialog({
     defaultValues: {
       name: automation2?.name ?? "",
       description: automation2?.description ?? ""
+    },
+    values: {
+      name: automation2?.name ?? "",
+      description: automation2?.description ?? ""
     }
   });
   function onSubmit(values) {
@@ -81738,8 +81765,17 @@ function AutomationEditDialog({
   }
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [
     /* @__PURE__ */ jsxs(DialogHeader, { children: [
-      /* @__PURE__ */ jsx(DialogTitle, { children: "Edit Automation" }),
-      /* @__PURE__ */ jsx(DialogDescription, { children: "Update the title and description of your automation." })
+      /* @__PURE__ */ jsxs(DialogTitle, { children: [
+        "Edit",
+        " ",
+        automation2.triggerType === AutomationTriggerType.ONE_TIME ? t$1("engage:one_time") : t$1("engage:automation")
+      ] }),
+      /* @__PURE__ */ jsxs(DialogDescription, { children: [
+        "Update the title and description of your",
+        " ",
+        automation2.triggerType === AutomationTriggerType.ONE_TIME ? t$1("engage:one_time") : t$1("engage:automation"),
+        "."
+      ] })
     ] }),
     /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4", children: [
       /* @__PURE__ */ jsx(
@@ -82009,36 +82045,24 @@ const AutomationsEditorHeader = ({ showBackButton, onDuplicationCreated, onBefor
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "ml-auto flex gap-4 items-center", children: [
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 text-muted-foreground", children: automation2.triggerType === AutomationTriggerType.ONE_TIME && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "div",
+        /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10 cursor-pointer", children: /* @__PURE__ */ jsx(
+          InfoTooltip,
           {
-            className: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10 cursor-pointer",
-            onClick: () => setIsEditDialogOpen(true),
-            children: /* @__PURE__ */ jsx(
-              InfoTooltip,
-              {
-                title: "Edit",
-                Icon: IconDefinitions.EditIcon,
-                asChild: false
-              }
-            )
+            title: "Edit",
+            Icon: IconDefinitions.EditIcon,
+            asChild: false,
+            onClick: () => setIsEditDialogOpen(true)
           }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10 cursor-pointer", children: /* @__PURE__ */ jsx(
+          InfoTooltip,
           {
-            className: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10 cursor-pointer",
-            onClick: () => setIsDuplicateDialogOpen(true),
-            children: /* @__PURE__ */ jsx(
-              InfoTooltip,
-              {
-                title: "Duplicate",
-                Icon: IconDefinitions.DuplicateIcon,
-                asChild: false
-              }
-            )
+            title: "Duplicate",
+            Icon: IconDefinitions.DuplicateIcon,
+            asChild: false,
+            onClick: () => setIsDuplicateDialogOpen(true)
           }
-        )
+        ) })
       ] }) }),
       editingStatus ? /* @__PURE__ */ jsx("div", { className: "flex items-center text-muted-foreground pr-8", children: /* @__PURE__ */ jsx(BasicLoader, {}) }) : renderSwitch()
     ] }),
@@ -82067,7 +82091,7 @@ const AutomationsEditorHeader = ({ showBackButton, onDuplicationCreated, onBefor
     )
   ] });
 };
-const AutomationsEditorStatsTab = () => {
+const AutomationsEditorStatsTab = ({ hideSms, hideSales }) => {
   const automation2 = useAutomation();
   const { isLoading: isStatisticsLoading } = useGetBusinessAutomationStatistics(
     automation2?.id
@@ -82085,7 +82109,8 @@ const AutomationsEditorStatsTab = () => {
     {
       automationId: automation2.id,
       automation: automation2,
-      includeSales: true
+      includeSales: !hideSales,
+      includeSms: !hideSms
     }
   ) });
 };
@@ -84664,11 +84689,16 @@ const AutomationsEditorStep = ({
 const AutomationFlowMain = () => {
   const [isDetailsVisible, setIsDetailsVisible] = useState(false);
   const [actionDataWithMetadata, setActionDataWithMetadata] = useState(void 0);
+  const [isEditingDescription, setIsEditingDescription] = useState(false);
+  const [editedDescription, setEditedDescription] = useState("");
+  const [optimisticDescription, setOptimisticDescription] = useState(null);
   const automation2 = useAutomation();
   const {
     setActionId: setActionId2,
     state: { selectedActionId }
   } = useContext$1(Context);
+  const { updateAutomation: businessUpdateAutomation } = useUpdateBusinessAutomation(automation2?.id || "");
+  const { toast: toast2 } = useToast();
   useEffect(() => {
     if (!automation2) {
       return;
@@ -84716,6 +84746,10 @@ const AutomationFlowMain = () => {
     };
     getData();
   }, [automation2]);
+  useEffect(() => {
+    setOptimisticDescription(null);
+    setEditedDescription(automation2?.description ?? "");
+  }, [automation2?.description]);
   if (!automation2 || !actionDataWithMetadata) {
     return null;
   }
@@ -84737,17 +84771,69 @@ const AutomationFlowMain = () => {
       ] });
     };
   }
+  const handleSaveDescription = async () => {
+    setOptimisticDescription(editedDescription);
+    businessUpdateAutomation(
+      {
+        description: editedDescription
+      },
+      {
+        onSuccess: () => {
+          toast2({
+            title: "Description updated 🚀"
+          });
+          setIsEditingDescription(false);
+        }
+      }
+    );
+  };
+  const handleCancelEdit = () => {
+    setIsEditingDescription(false);
+  };
   const renderAutomationDescription = () => {
-    if (!automation2.description) return null;
+    if (!automation2.description && !isEditingDescription) return null;
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: "w-full mx-auto rounded-xl bg-neutral-50 dark:bg-neutral-900 shadow-sm px-4 py-3 my-2 border border-neutral-200 dark:border-neutral-800 text-neutral-800 dark:text-neutral-100 text-[15px] font-medium leading-snug tracking-tight justify-start",
+        className: "w-full mx-auto rounded-xl bg-neutral-50 dark:bg-neutral-900 shadow-sm px-4 py-3 my-2 border border-neutral-200 dark:border-neutral-800 text-neutral-800 dark:text-neutral-100 text-[15px] font-medium leading-snug tracking-tight justify-start group relative transition-colors duration-150",
         style: {
-          /* Container queries for mobile optimization */
           containerType: "inline-size"
         },
-        children: automation2.description
+        tabIndex: 0,
+        onClick: () => {
+          setIsEditingDescription(true);
+        },
+        role: "button",
+        "aria-label": "Edit automation description",
+        children: isEditingDescription ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              className: "w-full bg-transparent outline-none resize-none text-[15px] font-medium leading-snug tracking-tight text-neutral-800 dark:text-neutral-100 rounded-xl border border-primary-500 focus:ring-2 focus:ring-primary-400 transition-all min-h-[48px] p-2",
+              style: { containerType: "inline-size" },
+              value: editedDescription,
+              autoFocus: true,
+              rows: 2,
+              maxLength: 300,
+              onChange: (e4) => setEditedDescription(e4.target.value),
+              onBlur: handleCancelEdit,
+              "aria-label": "Edit automation description textarea"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button$1,
+            {
+              variant: "secondary",
+              onClick: handleSaveDescription,
+              onMouseDown: (e4) => e4.preventDefault(),
+              className: "z-20",
+              children: "Update Description"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "pr-8 select-text cursor-pointer", children: optimisticDescription !== null ? optimisticDescription : automation2.description }),
+          /* @__PURE__ */ jsx("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-150 pointer-events-none", children: /* @__PURE__ */ jsx(IconDefinitions.EditIcon, { className: "w-4 h-4" }) })
+        ] })
       }
     );
   };
@@ -84804,26 +84890,26 @@ const AutomationsEditorSidebar = () => {
   }
   return /* @__PURE__ */ jsx("div", { className: "h-full pt-4 relative", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-y-auto flex flex-col gap-3", children: /* @__PURE__ */ jsx(AutomationFlowMain, {}) }) });
 };
-const AutomationsEditorMain = () => {
+const AutomationsEditorMain = ({ hideSms }) => {
   const {
     state: { selectedActionId }
   } = useContext$1(Context);
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 h-full w-full", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: selectedActionId === BuiltInActionIds.EditTime ? /* @__PURE__ */ jsx(AutomationSelectTimeMain, {}) : selectedActionId === BuiltInActionIds.EditAudience ? /* @__PURE__ */ jsx(AutomationAudienceSelectorMain, {}) : /* @__PURE__ */ jsx(AutomationEditorTabs, {}) }) });
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 h-full w-full", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: selectedActionId === BuiltInActionIds.EditTime ? /* @__PURE__ */ jsx(AutomationSelectTimeMain, {}) : selectedActionId === BuiltInActionIds.EditAudience ? /* @__PURE__ */ jsx(AutomationAudienceSelectorMain, {}) : /* @__PURE__ */ jsx(AutomationEditorTabs, { hideSms }) }) });
 };
-const AutomationsEditorWorkflowTab = () => {
+const AutomationsEditorWorkflowTab = ({ hideSms }) => {
   return /* @__PURE__ */ jsxs(ResizablePanelGroup, { direction: "horizontal", className: "flex-1", children: [
     /* @__PURE__ */ jsx(ResizablePanel, { defaultSize: 30, minSize: 16, maxSize: 48, children: /* @__PURE__ */ jsx("aside", { className: "h-full", children: /* @__PURE__ */ jsx(AutomationsEditorSidebar, {}) }) }),
     /* @__PURE__ */ jsx(ResizableHandle, { className: "px-1 opacity-0 hover:opacity-100 transition-opacity duration-200 mx-1" }),
-    /* @__PURE__ */ jsx(ResizablePanel, { defaultSize: 70, children: /* @__PURE__ */ jsx("main", { className: "h-full", children: /* @__PURE__ */ jsx(AutomationsEditorMain, {}) }) })
+    /* @__PURE__ */ jsx(ResizablePanel, { defaultSize: 70, children: /* @__PURE__ */ jsx("main", { className: "h-full", children: /* @__PURE__ */ jsx(AutomationsEditorMain, { hideSms }) }) })
   ] });
 };
-const AutomationsEditorTabs = () => {
+const AutomationsEditorTabs = ({ hideSms, hideSales }) => {
   const [activeTab, setActiveTab] = React__default.useState("workflow");
   const tabs = [
     {
       id: "workflow",
       label: "Workflow",
-      content: /* @__PURE__ */ jsx(AutomationsEditorWorkflowTab, {})
+      content: /* @__PURE__ */ jsx(AutomationsEditorWorkflowTab, { hideSms })
     },
     {
       id: "recipients",
@@ -84833,7 +84919,7 @@ const AutomationsEditorTabs = () => {
     {
       id: "insights",
       label: t$1("engage:insight", { count: 2 }),
-      content: /* @__PURE__ */ jsx(AutomationsEditorStatsTab, {})
+      content: /* @__PURE__ */ jsx(AutomationsEditorStatsTab, { hideSms, hideSales })
     }
   ];
   return /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx(
@@ -84850,7 +84936,9 @@ const ViewAutomationMain = ({
   showBackButton = false,
   onDuplicationCreated,
   onBeforeSchedule,
-  getExtraMergeFields
+  getExtraMergeFields,
+  hideSms,
+  hideSales
 }) => {
   const automation2 = useAutomation();
   const communicationGroup = useCommunicationGroup();
@@ -84907,7 +84995,7 @@ const ViewAutomationMain = ({
         onBeforeSchedule
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 border-t", children: /* @__PURE__ */ jsx(AutomationsEditorTabs, {}) })
+    /* @__PURE__ */ jsx("div", { className: "flex-1 border-t", children: /* @__PURE__ */ jsx(AutomationsEditorTabs, { hideSms, hideSales }) })
   ] });
 };
 const ViewAutomationContent = ({ ...props2 }) => {

package/dist/index.d.ts

@@ -300,6 +300,11 @@ export declare type ViewAutomationProps = {
         estimatedEmailRecipients: number;
         estimatedSmsRecipients: number;
     }) => Promise<true | string>;
+    /**
+     * Optional boolean to hide features
+     */
+    hideSms?: boolean;
+    hideSales?: boolean;
 };
 
 export { }