@embedreach/components 0.1.72 → 0.1.73

package/dist/chunks/index.js

@@ -2768,6 +2768,9 @@ var AutomationTriggerType = /* @__PURE__ */ ((AutomationTriggerType2) => {
 function isOneTimeTriggerMetadata(triggerMetadata) {
   return triggerMetadata?.trigger_type === "one_time";
 }
+function isTriggerBasedTriggerMetadata(triggerMetadata) {
+  return triggerMetadata?.trigger_type === "trigger_based";
+}
 var AutomationStatus = /* @__PURE__ */ ((AutomationStatus2) => {
   AutomationStatus2["DRAFT"] = "draft";
   AutomationStatus2["ACTIVE"] = "active";
@@ -26483,6 +26486,37 @@ function UnreachableCaseStatement(x3, enumObj) {
     `Unreachable case statement: ${JSON.stringify(x3)}. Valid values are: ${Object.values(enumObj).join(", ")}`
   );
 }
+const Input = React.forwardRef(
+  ({ className: className2, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn$1(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className2
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+const Textarea = React.forwardRef(({ className: className2, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: cn$1(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className2
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Textarea.displayName = "Textarea";
 const OneTimeBroadcast = ({ iconDefinitions }) => {
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("div", { className: styles$3.iconWrapper, children: /* @__PURE__ */ jsx(iconDefinitions.OneTimeBroadcast, {}) }),
@@ -26498,7 +26532,14 @@ const RealtimeActivity = ({ iconDefinitions }) => {
     /* @__PURE__ */ jsx("p", { className: styles$3.cardDescription, children: "Responds to immediate actions your contacts take, like abandoned carts, form submissions, or appointment bookings." })
   ] });
 };
-const SetAutomationName = ({ selectedType, setAutomationName, automationName, iconDefinitions }) => {
+const SetAutomationNameAndDescription = ({
+  selectedType,
+  setAutomationName,
+  automationName,
+  iconDefinitions,
+  setAutomationDescription,
+  automationDescription
+}) => {
   const getAutomationComponent = () => {
     switch (selectedType) {
       case AutomationTriggerType.ONE_TIME:
@@ -26513,31 +26554,58 @@ const SetAutomationName = ({ selectedType, setAutomationName, automationName, ic
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center p-8 max-w-lg mx-auto", children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold mb-6 text-center", children: "Name Your Automation" }),
-    /* @__PURE__ */ jsxs("div", { className: "w-full space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "bg-gray-50 p-4 rounded-lg items-center justify-center text-center", children: getAutomationComponent() }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx(
-          "label",
-          {
-            htmlFor: "automationName",
-            className: "block text-sm font-medium text-gray-700",
-            children: "Automation Name"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            id: "automationName",
-            type: "text",
-            value: automationName,
-            onChange: (e4) => setAutomationName(e4.target.value),
-            className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 shadow-sm",
-            placeholder: "Enter a descriptive name...",
-            autoFocus: true
-          }
-        ),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "This name is for your internal reference only - your customers won't see it" })
+    /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold mb-8 text-center", children: "Name Your Automation" }),
+    /* @__PURE__ */ jsxs("div", { className: "w-full space-y-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "bg-gray-50 p-6 rounded-xl items-center justify-center text-center", children: getAutomationComponent() }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mb-2", children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "automationName",
+                className: "block text-sm font-medium text-gray-900",
+                children: "Name"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Only visible to your team" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "automationName",
+              type: "text",
+              value: automationName,
+              onChange: (e4) => setAutomationName(e4.target.value),
+              className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 shadow-sm",
+              placeholder: "e.g. April Newsletter Campaign",
+              autoFocus: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mb-2", children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "automationDescription",
+                className: "block text-sm font-medium text-gray-900",
+                children: "Description"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Optional" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              id: "automationDescription",
+              value: automationDescription,
+              onChange: (e4) => setAutomationDescription(e4.target.value),
+              className: "w-full min-h-[80px] resize-none",
+              placeholder: "Add any helpful context for your team..."
+            }
+          )
+        ] })
       ] })
     ] })
   ] });
@@ -26562,9 +26630,11 @@ const CreateAutomationModal = ({
      */
     automationType ? {
       name: void 0,
+      description: void 0,
       type: automationType
     } : {
       name: void 0,
+      description: void 0,
       type: void 0
     }
   );
@@ -26581,9 +26651,11 @@ const CreateAutomationModal = ({
         day: "numeric"
       });
       const autoName = `Campaign ${formattedDate} ${formattedTime}`;
+      const autoDescription = `New one time campaign created on ${formattedDate} at ${formattedTime}`;
       setAutomationState((prevState) => ({
         ...prevState,
-        name: autoName
+        name: autoName,
+        description: autoDescription
       }));
     }
   }, [automationState]);
@@ -26597,7 +26669,8 @@ const CreateAutomationModal = ({
     setStartedCreating(true);
     const params = {
       name: automationState.name,
-      type: automationState.type
+      type: automationState.type,
+      description: automationState.description
     };
     createAutomation2(params, {
       onSuccess: async (response) => {
@@ -26626,6 +26699,7 @@ const CreateAutomationModal = ({
       onSettled: () => {
         setAutomationState({
           name: void 0,
+          description: void 0,
           type: void 0
         });
       }
@@ -26647,7 +26721,7 @@ const CreateAutomationModal = ({
         }
       ) }, "choose-automation-type"),
       currentStep === CreateAutomationModalStep.SetAutomationName && automationState.type && /* @__PURE__ */ jsx(BlurDiv, { children: /* @__PURE__ */ jsx(
-        SetAutomationName,
+        SetAutomationNameAndDescription,
         {
           iconDefinitions: finalIconDefinitions,
           selectedType: automationState.type,
@@ -26657,7 +26731,14 @@ const CreateAutomationModal = ({
               name
             });
           },
-          automationName: automationState.name ?? ""
+          automationName: automationState.name ?? "",
+          setAutomationDescription: (description2) => {
+            setAutomationState({
+              ...automationState,
+              description: description2
+            });
+          },
+          automationDescription: automationState.description ?? ""
         }
       ) }, "set-automation-name")
     ] }),
@@ -33842,23 +33923,6 @@ const HeaderActions = memo$1(
     ] }) });
   }
 );
-const Input = React.forwardRef(
-  ({ className: className2, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "input",
-      {
-        type,
-        className: cn$1(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className2
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
 const SearchBar = memo$1(
   ({
     searchQuery,
@@ -45919,20 +45983,6 @@ const useMe = () => {
   });
   return query;
 };
-const Textarea = React.forwardRef(({ className: className2, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      className: cn$1(
-        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className2
-      ),
-      ref,
-      ...props
-    }
-  );
-});
-Textarea.displayName = "Textarea";
 const SMSPreview = ({ automation, iconDefinitions, mergeFieldsResponse }) => {
   const [isUpdating, setIsUpdating] = useState(false);
   const _getCommunicationGroupFromAutomation = useCallback(() => {
@@ -48297,29 +48347,36 @@ const ViewAutomationHeaderContainer = ({
       /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: handleDuplicateAutomation, children: "Duplicate" })
     ] })
   ] });
-  const renderAutomationDetails = () => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-8 gap-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
+  const renderAutomationDetails = () => /* @__PURE__ */ jsx("div", { className: "@container", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 @sm:grid-cols-2 gap-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-[200px]", children: [
       /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600", children: "Name" }),
-      /* @__PURE__ */ jsx("div", { className: "font-medium", children: automation.name })
+      /* @__PURE__ */ jsx("div", { className: "font-medium truncate", children: automation.name })
+    ] }),
+    automation.description && /* @__PURE__ */ jsxs("div", { className: "", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600", children: "Description" }),
+      /* @__PURE__ */ jsx("div", { className: "font-medium whitespace-pre-wrap", children: automation.description })
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600", children: "Date Created" }),
       /* @__PURE__ */ jsx("div", { className: "font-medium", children: format$1(new Date(automation.created_at), "h:mma MM/dd/yy") })
     ] }),
-    automation.trigger_type === AutomationTriggerType.ONE_TIME && isOneTimeTriggerMetadata(automation.trigger_metadata) && automation.trigger_metadata.scheduled_at && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600", children: "Type" }),
-        /* @__PURE__ */ jsx("div", { className: "font-medium", children: "One Time" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600", children: "Scheduled For" }),
-        /* @__PURE__ */ jsx("div", { className: "font-medium", children: format$1(
-          new Date(automation.trigger_metadata.scheduled_at),
-          "h:mma MM/dd/yy"
-        ) })
-      ] })
+    automation.trigger_type === AutomationTriggerType.ONE_TIME && isOneTimeTriggerMetadata(automation.trigger_metadata) && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600", children: "Type" }),
+      /* @__PURE__ */ jsx("div", { className: "font-medium", children: "One Time" })
+    ] }),
+    automation.trigger_type === AutomationTriggerType.TRIGGER_BASED && isTriggerBasedTriggerMetadata(automation.trigger_metadata) && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600", children: "Type" }),
+      /* @__PURE__ */ jsx("div", { className: "font-medium", children: "Trigger Based" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "col-span-1 @sm:col-span-2", children: /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200" }) }),
+    automation.trigger_type === AutomationTriggerType.ONE_TIME && isOneTimeTriggerMetadata(automation.trigger_metadata) && automation.trigger_metadata.scheduled_at && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600", children: "Scheduled For" }),
+      /* @__PURE__ */ jsx("div", { className: "font-medium", children: format$1(
+        new Date(automation.trigger_metadata.scheduled_at),
+        "h:mma MM/dd/yy"
+      ) })
     ] })
-  ] });
+  ] }) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     renderEditAutomationDialog(),
     renderCancelAutomationDialog(),