@embedreach/components 0.2.13 → 0.2.14

package/dist/chunks/index.js

@@ -6,6 +6,7 @@ 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";
@@ -2621,7 +2622,14 @@ const createQueryClient = () => new QueryClient({
 const automationKeys = {
   all: ["automations"],
   single: (id2) => [...automationKeys.all, id2],
-  recipients: (id2) => [...automationKeys.all, id2, "recipients"],
+  sentCommunications: (args) => [
+    ...automationKeys.all,
+    args.automationId,
+    "sentCommunications",
+    ...args.cursor ? [args.cursor] : [],
+    ...args.limit ? [args.limit] : [],
+    ...args.search ? [args.search] : []
+  ],
   statistics: (id2) => [...automationKeys.all, id2, "statistics"],
   list: (args) => [
     ...automationKeys.all,
@@ -2649,10 +2657,21 @@ const getAutomation = async (automationId) => {
   );
   return response.data;
 };
-const getAutomationRecipients = async (automationId) => {
-  const response = await baseRequest(
-    `${BUSINESS_AUTOMATION_PATH}/${automationId}/recipients`
-  );
+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"
+  });
   return response.data;
 };
 const updateAutomation = async (id2, params) => {
@@ -2736,18 +2755,30 @@ const useGetBusinessAutomation = (automationId) => {
     })
   };
 };
-const useGetBusinessAutomationRecipients = (automationId) => {
-  const getAutomationRecipientsQuery = useQuery({
-    queryKey: automationKeys.recipients(automationId),
-    queryFn: () => getAutomationRecipients(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
   });
   return {
-    // Get automation recipients query
-    recipients: getAutomationRecipientsQuery.data,
-    isFetching: getAutomationRecipientsQuery.isFetching,
-    isLoading: getAutomationRecipientsQuery.isLoading,
-    fetchError: getAutomationRecipientsQuery.error,
-    refetchAutomationRecipients: getAutomationRecipientsQuery.refetch
+    // Get automation sent communications query
+    sentCommunications: getSentCommunicationsQuery.data,
+    isFetching: getSentCommunicationsQuery.isFetching,
+    isLoading: getSentCommunicationsQuery.isLoading,
+    isPlaceholderData: getSentCommunicationsQuery.isPlaceholderData,
+    fetchError: getSentCommunicationsQuery.error,
+    refetchSentCommunications: getSentCommunicationsQuery.refetch
   };
 };
 const useCreateBusinessAutomation = () => {
@@ -2852,6 +2883,11 @@ 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,
@@ -64546,12 +64582,6 @@ const EditCampaignContent = ({
         }
       });
     } else {
-      if (communicationGroup?.id && communicationGroup.extraMergeFields !== null) {
-        updateCommunicationGroup2({
-          groupId: communicationGroup?.id,
-          params: { extraMergeFields: null }
-        });
-      }
       setMergeFieldsResponse(getMergeFields$1);
     }
   }, [
@@ -81959,13 +81989,13 @@ const useAutomationStatusToggle = (id2) => {
   }, [isUpdateSuccess, updateError, toast2]);
   return { toggleStatus };
 };
-const DEFAULT_PAGE_SIZE$2 = 10;
+const DEFAULT_PAGE_SIZE$3 = 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$2);
+  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE$3);
   const [cursorForQuery, setCursorForQuery] = useState(
     void 0
   );
@@ -82055,14 +82085,14 @@ function AutomationList() {
     }
   ) }) });
 }
-const DEFAULT_PAGE_SIZE$1 = 10;
+const DEFAULT_PAGE_SIZE$2 = 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$1);
+  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE$2);
   const [cursorForQuery, setCursorForQuery] = useState(
     void 0
   );
@@ -82116,7 +82146,7 @@ function BroadcastList() {
   );
   const resetListPagination = () => {
     setCursorForQuery(void 0);
-    setPageSizeForQuery(DEFAULT_PAGE_SIZE$1);
+    setPageSizeForQuery(DEFAULT_PAGE_SIZE$2);
     setSearchQuery("");
   };
   const onDialogClose = (result) => {
@@ -82184,12 +82214,12 @@ function BroadcastList() {
     )
   ] });
 }
-const DEFAULT_PAGE_SIZE = 10;
+const DEFAULT_PAGE_SIZE$1 = 10;
 function SegmentList() {
   const { toast: toast2 } = useToast();
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
   const [selectedSegment, setSelectedSegment] = useState(null);
-  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE);
+  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE$1);
   const [cursorForQuery, setCursorForQuery] = useState(
     void 0
   );
@@ -82243,7 +82273,7 @@ function SegmentList() {
   );
   const resetListPagination = () => {
     setCursorForQuery(void 0);
-    setPageSizeForQuery(DEFAULT_PAGE_SIZE);
+    setPageSizeForQuery(DEFAULT_PAGE_SIZE$1);
     setSearchQuery("");
   };
   const onDialogClose = (result) => {
@@ -82873,14 +82903,59 @@ const AutomationsEditorStatsTab = ({ hideSms, hideSales }) => {
     }
   ) });
 };
-const AutomationsEditorRecipientsTab = () => {
+const DEFAULT_PAGE_SIZE = 10;
+const AutomationRecipientsTable = () => {
   const automation2 = useAutomation();
+  const [pageSizeForQuery, setPageSizeForQuery] = useState(DEFAULT_PAGE_SIZE);
+  const [cursorForQuery, setCursorForQuery] = useState(
+    void 0
+  );
+  const [searchQuery, setSearchQuery] = useState("");
   const {
-    recipients,
+    sentCommunications,
     isLoading: isLoadingRecipients,
+    isFetching,
+    isPlaceholderData,
     fetchError
-  } = useGetBusinessAutomationRecipients(automation2?.id ?? "");
+  } = useGetBusinessAutomationSentCommunications({
+    automationId: automation2?.id ?? "",
+    cursor: cursorForQuery,
+    limit: pageSizeForQuery,
+    search: searchQuery || void 0
+  });
+  const handleQueryParametersChange = useCallback(
+    (params) => {
+      setCursorForQuery(params.cursor);
+      setPageSizeForQuery(params.pageSize);
+    },
+    []
+  );
   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",
@@ -82901,9 +82976,73 @@ const AutomationsEditorRecipientsTab = () => {
       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 || !recipients) {
+  if (!automation2 || isLoadingRecipients || !sentCommunications) {
     return /* @__PURE__ */ jsx(BasicLoader, { text: ["Fetching Recipients", "Finishing up"] });
   }
   if (fetchError) {
@@ -82912,31 +83051,56 @@ const AutomationsEditorRecipientsTab = () => {
       fetchError.message
     ] });
   }
-  if (!recipients || recipients.recipients.length === 0) {
+  if (!sentCommunications || !searchQuery && sentCommunications.results.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 Recipients Found" }),
+      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold text-gray-700", children: "No Communications Sent Yet" }),
       /* @__PURE__ */ jsxs("p", { className: "text-gray-500", children: [
-        "This ",
-        t$1("engage:automation"),
-        " currently has no assigned recipients. Please update the include or exclude",
+        "This",
+        " ",
+        automation2.triggerType === AutomationTriggerType.ONE_TIME ? t$1("engage:one_time") : t$1("engage:automation"),
         " ",
-        t$1("engage:segment", { count: 2 }),
-        " to add recipients."
+        "hasn't sent any communications yet. Please check back later to see recipient details once communications have been sent."
       ] })
     ] });
   }
   return /* @__PURE__ */ jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsx(
     TanstackTable,
     {
-      data: recipients.recipients,
+      data: sentCommunications.results,
       columns,
-      paginationMode: "standard",
-      initialPageSize: 10,
-      isLoading: isLoadingRecipients
+      paginationMode: "cursor",
+      initialPageSize: pageSizeForQuery,
+      isLoading: isLoadingRecipients && !isPlaceholderData,
+      cursorPaginationQueryResult: {
+        nextCursor: sentCommunications.pagination.cursor,
+        isLoading: isLoadingRecipients,
+        isFetching,
+        isPlaceholderData
+      },
+      onQueryParametersChange: handleQueryParametersChange,
+      searchValue: searchQuery,
+      onSearchChange: setSearchQuery
     }
   ) });
 };
+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 = {