@embedreach/components 0.1.47 → 0.1.49

package/dist/chunks/index.js

@@ -33498,7 +33498,7 @@ const MultiSelect = React.forwardRef(
                         children: "Close"
                       }
                     ),
-                    extraCommandItems && extraCommandItems
+                    extraCommandItems && extraCommandItems.map((item) => item(setIsPopoverOpen))
                   ] }) })
                 ] })
               ] })
@@ -35043,9 +35043,10 @@ const styles$3 = {
 };
 const SegmentBuilder = ({
   onClose,
-  iconDefinitions,
+  iconDefinitions: passedInIconDefinitions,
   segmentId
 }) => {
+  const iconDefinitions = mergeIconDefinitions(passedInIconDefinitions);
   const SEGMENT_ID = segmentId || void 0;
   const { toast: toast2 } = useToast();
   const { segment: existingSegment } = useGetSegment(SEGMENT_ID);
@@ -35060,7 +35061,7 @@ const SegmentBuilder = ({
   });
   const [conditionNameToMetadata, setConditionNameToMetadata] = useState({});
   const isReadyToCreate = nameAndDescriptionState.name && nameAndDescriptionState.description && conditionState.some(
-    (condition) => condition.field && condition.operator && condition.value.length > 0
+    (condition) => condition.field && condition.operator && (condition.operator === "exists" || condition.value.length > 0)
   );
   useEffect(() => {
     if (!segmentsConditions) return;
@@ -38827,7 +38828,7 @@ const MissingDataForPreview = ({
   ] });
 };
 const EmailPreviewHtmlRenderer = ({ html, height, width }) => {
-  return /* @__PURE__ */ jsx("div", { className: "w-full h-full min-h-[300px] bg-white rounded-lg border-0 overflow-hidden transition-all duration-300 ease-in-out", children: html ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full min-h-[300px] bg-white rounded-lg border-0 overflow-hidden transition-all duration-300 ease-in-out flex items-center justify-center", children: html ? /* @__PURE__ */ jsx(
     "iframe",
     {
       title: "Email Preview",
@@ -38849,7 +38850,27 @@ const EmailPreview$1 = ({
   emailBody,
   emailBaseDomain
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-6 ", children: [
+  const [emailPreviewDimensions, setEmailPreviewDimensions] = useState({
+    width: 0,
+    height: 0
+  });
+  const emailPreviewDiv = useRef(null);
+  useEffect(() => {
+    const updateHeight = () => {
+      if (emailPreviewDiv.current) {
+        requestAnimationFrame(() => {
+          setEmailPreviewDimensions({
+            width: emailPreviewDiv.current ? emailPreviewDiv.current.offsetWidth - 100 : 0,
+            height: emailPreviewDiv.current ? emailPreviewDiv.current.offsetHeight - 100 : 0
+          });
+        });
+      }
+    };
+    updateHeight();
+    window.addEventListener("resize", updateHeight);
+    return () => window.removeEventListener("resize", updateHeight);
+  }, [emailPreviewDiv]);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6 h-full", children: [
     /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 p-5 rounded-lg space-y-4 border border-gray-100", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-700 w-24", children: "From:" }),
@@ -38864,7 +38885,21 @@ const EmailPreview$1 = ({
         /* @__PURE__ */ jsx("span", { className: "text-gray-600 italic", children: emailPreviewText })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "border rounded-lg p-6 min-h-[300px] bg-white shadow-inner flex", children: /* @__PURE__ */ jsx(EmailPreviewHtmlRenderer, { html: emailBody, height: 500, width: 500 }) })
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "border rounded-lg p-6  bg-white shadow-inner flex-1 h-full w-full items-center justify-center",
+        ref: emailPreviewDiv,
+        children: /* @__PURE__ */ jsx(
+          EmailPreviewHtmlRenderer,
+          {
+            html: emailBody,
+            height: emailPreviewDimensions.height,
+            width: emailPreviewDimensions.width
+          }
+        )
+      }
+    )
   ] });
 };
 const SMSPreview$1 = ({ fromPhone, body }) => {
@@ -38878,6 +38913,8 @@ const SMSPreview$1 = ({ fromPhone, body }) => {
 };
 const PreviewPanel = ({ emailPreview, smsPreview, iconDefinitions }) => {
   const [selectedTab, setSelectedTab] = useState("email");
+  console.log(emailPreview);
+  console.log(smsPreview);
   useEffect(() => {
     if (emailPreview) {
       setSelectedTab("email");
@@ -41075,8 +41112,8 @@ const EmailPreview = ({ automation }) => {
       if (emailPreviewDiv.current) {
         requestAnimationFrame(() => {
           setEmailPreviewDimensions({
-            width: emailPreviewDiv.current?.offsetWidth || 0,
-            height: emailPreviewDiv.current?.offsetHeight || 0
+            width: emailPreviewDiv.current ? emailPreviewDiv.current.offsetWidth - 100 : 0,
+            height: emailPreviewDiv.current ? emailPreviewDiv.current.offsetHeight - 100 : 0
           });
         });
       }
@@ -45958,7 +45995,7 @@ const SegmentSection = ({
   allSegments,
   onAddSegment,
   onRemoveSegment,
-  onCreateSegment,
+  setOpenCreateSegmentDialog,
   iconDefinitions
 }) => {
   const handleValueChange = (newValues) => {
@@ -45967,54 +46004,43 @@ const SegmentSection = ({
     segmentsToAdd.forEach(onAddSegment);
     segmentsToRemove.forEach(onRemoveSegment);
   };
-  const [openSegmentBuilder, setOpenSegmentBuilder] = useState(false);
   const [segmentSelectedIds, setSegmentSelectedIds] = useState([]);
   const options = allSegments.map((segment) => ({
     label: segment.name,
     value: segment.id
   }));
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Dialog, { open: openSegmentBuilder, onOpenChange: setOpenSegmentBuilder, children: /* @__PURE__ */ jsx(DialogContent, { hideCloseButton: true, children: /* @__PURE__ */ jsx(
-      SegmentBuilder,
-      {
-        iconDefinitions,
-        onClose: (createdSegment) => {
-          if (createdSegment === "error") {
-            console.error("Error creating segment");
-            setOpenSegmentBuilder(false);
-          } else if (createdSegment === false) {
-            setOpenSegmentBuilder(false);
-          } else if (createdSegment) {
-            onCreateSegment();
-            setOpenSegmentBuilder(false);
-          }
-        }
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx(
-      MultiSelect,
-      {
-        selectedValues: segmentSelectedIds,
-        setSelectedValues: setSegmentSelectedIds,
-        options,
-        defaultValue: segments,
-        onValueChange: handleValueChange,
-        placeholder: "Select segments",
-        maxCount: 5,
-        extraCommandItems: /* @__PURE__ */ jsxs(
+  useEffect(() => {
+    setSegmentSelectedIds(segments);
+  }, [segments]);
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    MultiSelect,
+    {
+      selectedValues: segmentSelectedIds,
+      setSelectedValues: setSegmentSelectedIds,
+      options,
+      defaultValue: segments,
+      onValueChange: handleValueChange,
+      placeholder: "Select segments",
+      maxCount: 5,
+      extraCommandItems: [
+        (closePopup) => /* @__PURE__ */ jsxs(
           CommandItem,
           {
-            onSelect: () => setOpenSegmentBuilder(true),
+            onSelect: () => {
+              closePopup(false);
+              setOpenCreateSegmentDialog(true);
+            },
             className: "cursor-pointer",
             children: [
               /* @__PURE__ */ jsx(iconDefinitions.PlusIcon, { className: "w-4 h-4" }),
               "New"
             ]
-          }
+          },
+          "new-segment"
         )
-      }
-    )
-  ] });
+      ]
+    }
+  ) });
 };
 const SelectSegments = ({
   iconDefinitions,
@@ -46022,7 +46048,7 @@ const SelectSegments = ({
   excludedSegments,
   handleAddSegment,
   handleRemoveSegment,
-  handleCreateSegment,
+  setOpenCreateSegmentDialog,
   segments,
   defaultIsExcludeOpen = false
 }) => {
@@ -46035,7 +46061,7 @@ const SelectSegments = ({
         allSegments: segments?.segments || [],
         onAddSegment: (id2) => handleAddSegment(id2, "include"),
         onRemoveSegment: (id2) => handleRemoveSegment(id2, "include"),
-        onCreateSegment: handleCreateSegment,
+        setOpenCreateSegmentDialog,
         iconDefinitions
       }
     ),
@@ -46075,7 +46101,7 @@ const SelectSegments = ({
               allSegments: segments?.segments || [],
               onAddSegment: (id2) => handleAddSegment(id2, "exclude"),
               onRemoveSegment: (id2) => handleRemoveSegment(id2, "exclude"),
-              onCreateSegment: handleCreateSegment,
+              setOpenCreateSegmentDialog,
               iconDefinitions
             }
           )
@@ -46085,6 +46111,7 @@ const SelectSegments = ({
   ] });
 };
 const SelectAudience = ({ iconDefinitions, automation }) => {
+  const { toast: toast2 } = useToast();
   const [openCreateSegmentDialog, setOpenCreateSegmentDialog] = React__default.useState(false);
   const [initialStateSet, setInitialStateSet] = React__default.useState(false);
   const { segments, isLoading, refetchSegments } = useListSegments();
@@ -46118,8 +46145,9 @@ const SelectAudience = ({ iconDefinitions, automation }) => {
       setExcludedSegments((prev) => prev.filter((id2) => id2 !== segmentId));
     }
   };
-  const handleCreateSegment = () => {
-    setOpenCreateSegmentDialog(true);
+  const handleCreateSegment = (segmentId) => {
+    refetchSegments();
+    setIncludedSegments((prev) => [...prev, segmentId]);
   };
   useEffect(() => {
     const hasSegmentsChanged = JSON.stringify(automation.includeSegmentIds) !== JSON.stringify(includedSegments) || JSON.stringify(automation.excludeSegmentIds) !== JSON.stringify(excludedSegments);
@@ -46169,6 +46197,8 @@ const SelectAudience = ({ iconDefinitions, automation }) => {
       setInitialStateSet(true);
       return;
     }
+    console.log("automation.includeSegmentIds", automation.includeSegmentIds);
+    console.log("automation.excludeSegmentIds", automation.excludeSegmentIds);
     if (allUsersSelected) {
       setSelectedAudience("all");
     } else {
@@ -46184,8 +46214,8 @@ const SelectAudience = ({ iconDefinitions, automation }) => {
     allUsersSelected,
     getAllUsersSegment,
     updateAutomation2,
-    automation.includeSegmentIds.length,
-    automation.excludeSegmentIds.length
+    automation.includeSegmentIds,
+    automation.excludeSegmentIds
   ]);
   if (isLoading || !segments || !initialStateSet) {
     return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching segments", "Finishing up"] }) });
@@ -46195,19 +46225,35 @@ const SelectAudience = ({ iconDefinitions, automation }) => {
       Dialog,
       {
         open: openCreateSegmentDialog,
+        modal: true,
         onOpenChange: setOpenCreateSegmentDialog,
-        children: /* @__PURE__ */ jsx(DialogContent, { className: "max-w-4xl", children: /* @__PURE__ */ jsx(
-          SegmentBuilder,
-          {
-            iconDefinitions,
-            onClose: (result) => {
-              if (result !== false && result !== "error") {
-                refetchSegments();
+        children: /* @__PURE__ */ jsxs(DialogContent, { hideCloseButton: true, children: [
+          /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: "Create Segment" }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: "Create a new segment to use in your automation." })
+          ] }),
+          /* @__PURE__ */ jsx(
+            SegmentBuilder,
+            {
+              iconDefinitions,
+              onClose: (createdSegment) => {
+                if (createdSegment === "error") {
+                  toast2({
+                    title: "Error creating segment",
+                    description: "Please try again",
+                    variant: "destructive"
+                  });
+                  setOpenCreateSegmentDialog(false);
+                } else if (createdSegment === false) {
+                  setOpenCreateSegmentDialog(false);
+                } else if (createdSegment) {
+                  handleCreateSegment(createdSegment);
+                  setOpenCreateSegmentDialog(false);
+                }
               }
-              setOpenCreateSegmentDialog(false);
             }
-          }
-        ) })
+          )
+        ] })
       }
     ),
     /* @__PURE__ */ jsx("div", { className: " w-full", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
@@ -46244,7 +46290,7 @@ const SelectAudience = ({ iconDefinitions, automation }) => {
                     excludedSegments,
                     handleAddSegment,
                     handleRemoveSegment,
-                    handleCreateSegment,
+                    setOpenCreateSegmentDialog,
                     segments,
                     defaultIsExcludeOpen: automation.excludeSegmentIds?.length > 0
                   }
@@ -46844,7 +46890,7 @@ const ViewAutomationHeader = ({
             /* @__PURE__ */ jsx(iconDefinitions.DropdownMenuTrigger, { className: "ml-2 h-4 w-4" })
           ] }) }),
           /* @__PURE__ */ jsxs(DropdownMenuContent, { children: [
-            (automation.status === AutomationStatus.DRAFT || automation.status === AutomationStatus.ACTIVE) && /* @__PURE__ */ jsx(
+            automation.status === AutomationStatus.DRAFT && /* @__PURE__ */ jsx(
               DropdownMenuItem,
               {
                 onClick: () => setOpenEditAutomationPopup(true),
@@ -46909,12 +46955,13 @@ const ViewAutomationHeader = ({
   ] });
 };
 const ViewAutomationModalContent = ({
-  iconDefinitions,
+  iconDefinitions: passedInIconDefinitions,
   autoOpenEditPopup,
   automationId,
   showBackButton = false,
   logoUrl
 }) => {
+  const iconDefinitions = mergeIconDefinitions(passedInIconDefinitions);
   const params = useParams();
   const [searchParams] = useSearchParams();
   const FINAL_AUTOMATION_ID = automationId || params?.automationId || searchParams.get("automationId");

package/dist/index.d.ts

@@ -14,11 +14,11 @@ declare interface CreateAutomationModalProps {
     /**
      * Optional keys to override the default icon definitions
      */
-    iconDefinitions?: IconDefinitionsType;
+    iconDefinitions?: Partial<IconDefinitionsType>;
 }
 
 export declare const Engage: default_2.FC<{
-    iconDefinitions: IconDefinitionsType;
+    iconDefinitions: Partial<IconDefinitionsType>;
 }>;
 
 /**
@@ -120,7 +120,7 @@ declare interface SegmentBuilderProps {
     /**
      * Optional keys to override the default icon definitions
      */
-    iconDefinitions?: IconDefinitionsType;
+    iconDefinitions?: Partial<IconDefinitionsType>;
 }
 
 /**