@embedreach/components 0.2.14 → 0.2.15

package/dist/chunks/index.js

@@ -6,7 +6,6 @@ import ReactDOM__default from "react-dom";
 const BUSINESS_PATH = "/businesses/me";
 const BUSINESS_SEGMENT_PATH = "/segments";
 const BUSINESS_AUTOMATION_PATH = "/automations";
-const BUSINESS_AUTOMATION_INTERNAL_PATH = "/automations/internal";
 const WEB_PRESENCE_PATH = "/web-presence";
 const WEBSITE_BRAND_SETTINGS_PATH = `${WEB_PRESENCE_PATH}/brand-settings`;
 const CHANNEL_SENDER_PATH = "/channel/senders";
@@ -2622,14 +2621,7 @@ const createQueryClient = () => new QueryClient({
 const automationKeys = {
   all: ["automations"],
   single: (id2) => [...automationKeys.all, id2],
-  sentCommunications: (args) => [
-    ...automationKeys.all,
-    args.automationId,
-    "sentCommunications",
-    ...args.cursor ? [args.cursor] : [],
-    ...args.limit ? [args.limit] : [],
-    ...args.search ? [args.search] : []
-  ],
+  recipients: (id2) => [...automationKeys.all, id2, "recipients"],
   statistics: (id2) => [...automationKeys.all, id2, "statistics"],
   list: (args) => [
     ...automationKeys.all,
@@ -2657,21 +2649,10 @@ const getAutomation = async (automationId) => {
   );
   return response.data;
 };
-const getSentCommunications = async (args) => {
-  const params = new URLSearchParams();
-  if (args.cursor) {
-    params.append("cursor", args.cursor);
-  }
-  if (args.limit) {
-    params.append("limit", args.limit.toString());
-  }
-  if (args.search) {
-    params.append("search", args.search);
-  }
-  const url = `${BUSINESS_AUTOMATION_INTERNAL_PATH}/${args.automationId}/sent${params.toString() ? `?${params.toString()}` : ""}`;
-  const response = await baseRequest(url, {
-    method: "GET"
-  });
+const getAutomationRecipients = async (automationId) => {
+  const response = await baseRequest(
+    `${BUSINESS_AUTOMATION_PATH}/${automationId}/recipients`
+  );
   return response.data;
 };
 const updateAutomation = async (id2, params) => {
@@ -2755,30 +2736,18 @@ const useGetBusinessAutomation = (automationId) => {
     })
   };
 };
-const useGetBusinessAutomationSentCommunications = (args) => {
-  const getSentCommunicationsQuery = useQuery({
-    queryKey: automationKeys.sentCommunications(args),
-    queryFn: () => getSentCommunications(args),
-    // placeholderData: keepPreviousData is a powerful feature from TanStack Query.
-    // What it does:
-    // 1. When new data is being fetched for a query (e.g., due to a queryKey change like a new cursor),
-    //    TanStack Query will continue to show the data from the previous successful fetch (the "placeholder" data)
-    //    until the new data arrives.
-    // 2. While this placeholder data is being shown, `isPlaceholderData` will be true.
-    // 3. `isLoading` will only be true if there's no data at all (initial fetch or hard refresh with no cache).
-    //    It will be false if placeholder data is being shown, even though a new fetch is in progress (`isFetching` will be true).
-    // This provides a much smoother UX, as the UI doesn't jump to a loading state on pagination or filter changes
-    // if previous data is available to show in the meantime.
-    placeholderData: keepPreviousData
+const useGetBusinessAutomationRecipients = (automationId) => {
+  const getAutomationRecipientsQuery = useQuery({
+    queryKey: automationKeys.recipients(automationId),
+    queryFn: () => getAutomationRecipients(automationId)
   });
   return {
-    // Get automation sent communications query
-    sentCommunications: getSentCommunicationsQuery.data,
-    isFetching: getSentCommunicationsQuery.isFetching,
-    isLoading: getSentCommunicationsQuery.isLoading,
-    isPlaceholderData: getSentCommunicationsQuery.isPlaceholderData,
-    fetchError: getSentCommunicationsQuery.error,
-    refetchSentCommunications: getSentCommunicationsQuery.refetch
+    // Get automation recipients query
+    recipients: getAutomationRecipientsQuery.data,
+    isFetching: getAutomationRecipientsQuery.isFetching,
+    isLoading: getAutomationRecipientsQuery.isLoading,
+    fetchError: getAutomationRecipientsQuery.error,
+    refetchAutomationRecipients: getAutomationRecipientsQuery.refetch
   };
 };
 const useCreateBusinessAutomation = () => {
@@ -2883,11 +2852,6 @@ var AutomationStatus = /* @__PURE__ */ ((AutomationStatus2) => {
   AutomationStatus2["DEACTIVATED"] = "deactivated";
   return AutomationStatus2;
 })(AutomationStatus || {});
-var ChannelIntegrationTypeEnum = /* @__PURE__ */ ((ChannelIntegrationTypeEnum2) => {
-  ChannelIntegrationTypeEnum2["EMAIL"] = "email";
-  ChannelIntegrationTypeEnum2["SMS"] = "sms";
-  return ChannelIntegrationTypeEnum2;
-})(ChannelIntegrationTypeEnum || {});
 var sharedConfig = {
   context: void 0,
   registry: void 0,
@@ -63089,6 +63053,44 @@ const MissingSenderForPreview = ({
   ] });
 };
 const StripoEditor = ({ containerRef, stripoDialogDimensions, showSaving }) => {
+  useEffect(() => {
+    const handleWheel = (e4) => {
+      const container22 = containerRef.current;
+      if (!container22) return;
+      const uiEditor = container22.querySelector("ui-editor");
+      if (!uiEditor) return;
+      const shadowRoot = uiEditor.shadowRoot;
+      if (!shadowRoot) return;
+      const rect = shadowRoot.host.getBoundingClientRect();
+      const x3 = e4.clientX - rect.left;
+      const y4 = e4.clientY - rect.top;
+      const el = shadowRoot.elementFromPoint(x3, y4);
+      function findScrollable(node) {
+        while (node) {
+          const style2 = getComputedStyle(node);
+          if ((style2.overflowY === "auto" || style2.overflowY === "scroll") && node.scrollHeight > node.clientHeight) {
+            return node;
+          }
+          node = node.parentElement;
+        }
+        return null;
+      }
+      const scrollable = findScrollable(el) || shadowRoot.firstElementChild;
+      if (!scrollable) return;
+      scrollable.scrollTop += e4.deltaY;
+      scrollable.scrollLeft += e4.deltaX;
+      e4.preventDefault();
+    };
+    const container2 = containerRef.current;
+    if (container2) {
+      container2.addEventListener("wheel", handleWheel, { passive: false });
+    }
+    return () => {
+      if (container2) {
+        container2.removeEventListener("wheel", handleWheel);
+      }
+    };
+  }, [containerRef]);
   return /* @__PURE__ */ jsxs("div", { className: "w-full h-full flex flex-col items-center justify-center", children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -81989,13 +81991,13 @@ const useAutomationStatusToggle = (id2) => {
   }, [isUpdateSuccess, updateError, toast2]);
   return { toggleStatus };
 };
-const DEFAULT_PAGE_SIZE$3 = 10;
+const DEFAULT_PAGE_SIZE$2 = 10;
 function AutomationList() {
   const { toast: toast2 } = useToast();
   const [updatingId, setUpdatingId] = useState(null);
   const { toggleStatus } = useAutomationStatusToggle(updatingId || "");
   const navigate = useNavigate();
-  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE$3);
+  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE$2);
   const [cursorForQuery, setCursorForQuery] = useState(
     void 0
   );
@@ -82085,14 +82087,14 @@ function AutomationList() {
     }
   ) }) });
 }
-const DEFAULT_PAGE_SIZE$2 = 10;
+const DEFAULT_PAGE_SIZE$1 = 10;
 function BroadcastList() {
   const { toast: toast2 } = useToast();
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
   const [updatingId, setUpdatingId] = useState(null);
   const { toggleStatus } = useAutomationStatusToggle(updatingId || "");
   const navigate = useNavigate();
-  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE$2);
+  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE$1);
   const [cursorForQuery, setCursorForQuery] = useState(
     void 0
   );
@@ -82146,7 +82148,7 @@ function BroadcastList() {
   );
   const resetListPagination = () => {
     setCursorForQuery(void 0);
-    setPageSizeForQuery(DEFAULT_PAGE_SIZE$2);
+    setPageSizeForQuery(DEFAULT_PAGE_SIZE$1);
     setSearchQuery("");
   };
   const onDialogClose = (result) => {
@@ -82214,12 +82216,12 @@ function BroadcastList() {
     )
   ] });
 }
-const DEFAULT_PAGE_SIZE$1 = 10;
+const DEFAULT_PAGE_SIZE = 10;
 function SegmentList() {
   const { toast: toast2 } = useToast();
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
   const [selectedSegment, setSelectedSegment] = useState(null);
-  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE$1);
+  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE);
   const [cursorForQuery, setCursorForQuery] = useState(
     void 0
   );
@@ -82273,7 +82275,7 @@ function SegmentList() {
   );
   const resetListPagination = () => {
     setCursorForQuery(void 0);
-    setPageSizeForQuery(DEFAULT_PAGE_SIZE$1);
+    setPageSizeForQuery(DEFAULT_PAGE_SIZE);
     setSearchQuery("");
   };
   const onDialogClose = (result) => {
@@ -82903,59 +82905,14 @@ const AutomationsEditorStatsTab = ({ hideSms, hideSales }) => {
     }
   ) });
 };
-const DEFAULT_PAGE_SIZE = 10;
-const AutomationRecipientsTable = () => {
+const AutomationsEditorRecipientsTab = () => {
   const automation2 = useAutomation();
-  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE);
-  const [cursorForQuery, setCursorForQuery] = useState(
-    void 0
-  );
-  const [searchQuery, setSearchQuery] = useState("");
   const {
-    sentCommunications,
+    recipients,
     isLoading: isLoadingRecipients,
-    isFetching,
-    isPlaceholderData,
     fetchError
-  } = useGetBusinessAutomationSentCommunications({
-    automationId: automation2?.id ?? "",
-    cursor: cursorForQuery,
-    limit: pageSizeForQuery,
-    search: searchQuery || void 0
-  });
-  const handleQueryParametersChange = useCallback(
-    (params) => {
-      setCursorForQuery(params.cursor);
-      setPageSizeForQuery(params.pageSize);
-    },
-    []
-  );
+  } = useGetBusinessAutomationRecipients(automation2?.id ?? "");
   const columns = [
-    {
-      accessorKey: "communicationsSent",
-      id: "lastCommunication",
-      header: "Updated At",
-      cell: ({ row }) => {
-        const communications = row.original.communicationsSent || [];
-        if (communications.length === 0) {
-          return /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "None" });
-        }
-        const latestCommunication = communications.reduce(
-          (latest, current) => {
-            if (!latest || !latest.updatedAt) return current;
-            if (!current.updatedAt) return latest;
-            return new Date(current.updatedAt) > new Date(latest.updatedAt) ? current : latest;
-          }
-        );
-        if (!latestCommunication?.updatedAt) {
-          return /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Not available" });
-        }
-        return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-600", children: format$1(
-          new Date(latestCommunication.updatedAt),
-          "MMM d, yyyy h:mm a"
-        ) }) });
-      }
-    },
     {
       accessorFn: (row) => `${row.firstName || ""} ${row.lastName || ""}`.trim(),
       id: "name",
@@ -82976,73 +82933,9 @@ const AutomationRecipientsTable = () => {
       accessorKey: "phone",
       header: "Phone",
       cell: ({ row }) => row.original.phone || /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Not provided" })
-    },
-    {
-      accessorKey: "communicationsSent",
-      id: "communicationsSent",
-      header: "Communications Sent",
-      cell: ({ row }) => {
-        const communications = row.original.communicationsSent || [];
-        const emailCommunications = communications.filter(
-          (c2) => c2.type === ChannelIntegrationTypeEnum.EMAIL
-        );
-        const smsCommunications = communications.filter(
-          (c2) => c2.type === ChannelIntegrationTypeEnum.SMS
-        );
-        const hasEmail = emailCommunications.length > 0;
-        const hasSms = smsCommunications.length > 0;
-        const emailDelivered = emailCommunications.some((c2) => c2.delivered);
-        const smsDelivered = smsCommunications.some((c2) => c2.delivered);
-        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          hasEmail && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx(
-                IconDefinitions.EmailIcon,
-                {
-                  className: `h-4 w-4 ${emailDelivered ? "text-green-500" : "text-gray-400"}`
-                }
-              ),
-              emailDelivered && /* @__PURE__ */ jsx("div", { className: "absolute -right-1 -top-1 h-2 w-2 rounded-full bg-green-500 ring-1 ring-white" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Email" }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: `text-xs ${emailDelivered ? "text-green-600" : "text-gray-500"}`,
-                  children: emailDelivered ? "Delivered" : "Pending"
-                }
-              )
-            ] })
-          ] }),
-          hasEmail && hasSms && /* @__PURE__ */ jsx("div", { className: "h-8 w-px bg-gray-200" }),
-          hasSms && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx(
-                IconDefinitions.SmsIcon,
-                {
-                  className: `h-4 w-4 ${smsDelivered ? "text-green-500" : "text-gray-400"}`
-                }
-              ),
-              smsDelivered && /* @__PURE__ */ jsx("div", { className: "absolute -right-1 -top-1 h-2 w-2 rounded-full bg-green-500 ring-1 ring-white" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "SMS" }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: `text-xs ${smsDelivered ? "text-green-600" : "text-gray-500"}`,
-                  children: smsDelivered ? "Delivered" : "Pending"
-                }
-              )
-            ] })
-          ] }),
-          !hasEmail && !hasSms && /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-400", children: "None" })
-        ] });
-      }
     }
   ];
-  if (!automation2 || isLoadingRecipients || !sentCommunications) {
+  if (!automation2 || isLoadingRecipients || !recipients) {
     return /* @__PURE__ */ jsx(BasicLoader, { text: ["Fetching Recipients", "Finishing up"] });
   }
   if (fetchError) {
@@ -83051,56 +82944,31 @@ const AutomationRecipientsTable = () => {
       fetchError.message
     ] });
   }
-  if (!sentCommunications || !searchQuery && sentCommunications.results.length === 0) {
+  if (!recipients || recipients.recipients.length === 0) {
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center p-8 text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(IconDefinitions.UserIcon, { className: "h-12 w-12 text-gray-400" }) }),
-      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold text-gray-700", children: "No Communications Sent Yet" }),
+      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold text-gray-700", children: "No Recipients Found" }),
       /* @__PURE__ */ jsxs("p", { className: "text-gray-500", children: [
-        "This",
+        "This ",
+        t$1("engage:automation"),
+        " currently has no assigned recipients. Please update the include or exclude",
         " ",
-        automation2.triggerType === AutomationTriggerType.ONE_TIME ? t$1("engage:one_time") : t$1("engage:automation"),
-        " ",
-        "hasn't sent any communications yet. Please check back later to see recipient details once communications have been sent."
+        t$1("engage:segment", { count: 2 }),
+        " to add recipients."
       ] })
     ] });
   }
   return /* @__PURE__ */ jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsx(
     TanstackTable,
     {
-      data: sentCommunications.results,
+      data: recipients.recipients,
       columns,
-      paginationMode: "cursor",
-      initialPageSize: pageSizeForQuery,
-      isLoading: isLoadingRecipients && !isPlaceholderData,
-      cursorPaginationQueryResult: {
-        nextCursor: sentCommunications.pagination.cursor,
-        isLoading: isLoadingRecipients,
-        isFetching,
-        isPlaceholderData
-      },
-      onQueryParametersChange: handleQueryParametersChange,
-      searchValue: searchQuery,
-      onSearchChange: setSearchQuery
+      paginationMode: "standard",
+      initialPageSize: 10,
+      isLoading: isLoadingRecipients
     }
   ) });
 };
-const AutomationsEditorRecipientsTab = () => {
-  const automation2 = useAutomation();
-  if (automation2?.triggerType === AutomationTriggerType.ONE_TIME && automation2?.status === AutomationStatus.DRAFT) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center p-8 text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(IconDefinitions.UserIcon, { className: "h-12 w-12 text-gray-400" }) }),
-      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold text-gray-700", children: "No Recipients Available Yet" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-gray-500", children: [
-        "Recipients will be available once this",
-        " ",
-        automation2.triggerType === AutomationTriggerType.ONE_TIME ? t$1("engage:one_time") : t$1("engage:automation"),
-        " ",
-        "has completed running. Please check back after the automation has finished."
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsx(AutomationRecipientsTable, {});
-};
 const PanelGroupContext = createContext$1(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 const DATA_ATTRIBUTES = {