@embedreach/components 0.3.17 → 0.3.18

package/dist/chunks/index.js

@@ -3233,6 +3233,7 @@ const useGetBusinessAutomationSentCommunications = (args) => {
   return {
     // Get automation sent communications query
     sentCommunications: getSentCommunicationsQuery.data,
+    totalCount: getSentCommunicationsQuery.data?.pagination.total ?? null,
     isFetching: getSentCommunicationsQuery.isFetching,
     isLoading: getSentCommunicationsQuery.isLoading,
     isPlaceholderData: getSentCommunicationsQuery.isPlaceholderData,
@@ -3314,6 +3315,8 @@ const useListBusinessAutomations = (args) => {
     // The cursor to be used to fetch the *next* page of results.
     // Null or undefined if there are no more pages.
     nextCursor: query.data?.pagination.cursor ?? null,
+    // Total count of items for pagination display
+    totalCount: query.data?.pagination.total ?? null,
     isLoading: query.isLoading,
     error: query.error,
     isFetching: query.isFetching,
@@ -49151,6 +49154,8 @@ const useListSegments = (params) => {
     // The cursor to be used to fetch the *next* page of results.
     // Null or undefined if there are no more pages.
     nextCursor: query.data?.pagination.cursor ?? null,
+    // Total count of items for pagination display
+    totalCount: query.data?.pagination.total ?? null,
     isLoading: query.isLoading,
     error: query.error,
     isFetching: query.isFetching,
@@ -52901,7 +52906,7 @@ function useTanstackTable({
   columns,
   enableDebug = false,
   paginationMode = "none",
-  initialPageSize = 10,
+  initialPageSize = 20,
   initialPageIndex = 0,
   cursorPaginationQueryResult,
   onQueryParametersChange,
@@ -53180,6 +53185,25 @@ function SortingHeader({
     )
   ] });
 }
+const formatValue = (value, options = {}) => {
+  const { decimals = 0, suffix = "", useLocale = false } = options;
+  const num = Number(value);
+  if (!value || Number.isNaN(num)) {
+    return `0${decimals > 0 ? "." + "0".repeat(decimals) : ""}${suffix}`;
+  }
+  let formatted;
+  if (useLocale) {
+    formatted = num.toLocaleString(void 0, {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals
+    });
+  } else if (decimals > 0) {
+    formatted = num.toFixed(decimals);
+  } else {
+    formatted = Math.round(num).toString();
+  }
+  return `${formatted}${suffix}`;
+};
 function DebouncedInput({
   value: initialValue,
   onChange,
@@ -53207,7 +53231,8 @@ function TanstackTable({
   columns,
   enableDebug = false,
   paginationMode = "none",
-  initialPageSize = 10,
+  initialPageSize = 20,
+  totalCount,
   initialPageIndex = 0,
   headerActions,
   isLoading = false,
@@ -53260,7 +53285,8 @@ function TanstackTable({
     manualSorting,
     enableSortingRemoval,
     onSortingChange: handleSortingChangeInternal,
-    manualFiltering
+    manualFiltering,
+    manualPageCount: totalCount ? Math.ceil(totalCount / initialPageSize) : void 0
   });
   const scrollContainerRef = useRef(null);
   const [isScrolled, setIsScrolled] = useState(false);
@@ -53338,7 +53364,20 @@ function TanstackTable({
         ))
       },
       row.id
-    )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results found" }) }) })
+    )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results found" }) }) }),
+    enableFooter && !!data?.length && /* @__PURE__ */ jsx(TableFooter, { className: "sticky bottom-0 z-10 bg-card border-t", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx(TableRow, { children: footerGroup.headers.map((header2) => /* @__PURE__ */ jsx(
+      TableHead,
+      {
+        colSpan: header2.colSpan,
+        style: { width: header2.getSize() },
+        className: "bg-card text-card-foreground font-medium",
+        children: header2.isPlaceholder ? null : flexRender(
+          header2.column.columnDef.footer,
+          header2.getContext()
+        )
+      },
+      header2.id
+    )) }, footerGroup.id)) })
   ] });
   const TableSkeleton = () => /* @__PURE__ */ jsx("div", { className: "h-full w-full flex items-center justify-center min-h-[250px]", children: /* @__PURE__ */ jsx(BasicLoader, {}) });
   const isTableLoading = hideLoadingState ? isLoading && (!data || data.length === 0) : isLoading;
@@ -53358,8 +53397,8 @@ function TanstackTable({
       /* @__PURE__ */ jsx(LoaderCircle, { className: "h-4 w-4 animate-spin text-primary" }),
       /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: "Loading..." })
     ] }) }),
-    (onSearchChange || isStandardPagination || isCursorPagination) && !isTableLoading && /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-20 bg-card border-b px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx("div", { children: onSearchChange && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    (onSearchChange || isStandardPagination || isCursorPagination) && !isTableLoading && /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-20 bg-card border-b px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", children: [
+      onSearchChange && /* @__PURE__ */ jsxs("div", { className: "relative w-full sm:w-auto", children: [
         /* @__PURE__ */ jsx(
           DebouncedInput,
           {
@@ -53385,7 +53424,7 @@ function TanstackTable({
               }
             },
             className: cn$1(
-              "w-80 h-9 text-sm border border-border rounded-md px-3 bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring",
+              "w-full sm:w-80 h-9 text-sm border border-border rounded-md px-3 bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring",
               isFetching && "pr-10"
               // Add padding for spinner
             ),
@@ -53394,31 +53433,32 @@ function TanstackTable({
           }
         ),
         !hideLoadingState && isFetching && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx(LoaderCircle, { className: "h-4 w-4 animate-spin text-muted-foreground" }) })
-      ] }) }),
+      ] }),
       /* @__PURE__ */ jsx("div", { children: (isStandardPagination || isCursorPagination) && /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
         /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: (() => {
-          if (paginationMode === "cursor") {
-            return null;
-          }
-          const totalRows = table.getPrePaginationRowModel().rows.length;
           const currentPageRows = table.getRowModel().rows.length;
-          if (totalRows === 0) {
-            return /* @__PURE__ */ jsx("span", { children: "No items" });
+          const total = totalCount && totalCount > 0 ? formatValue(totalCount, {
+            decimals: 0,
+            useLocale: true
+          }) : table.getPrePaginationRowModel().rows.length;
+          if (currentPageRows === 0) {
+            return null;
           }
-          const startItem = pageIndex * pageSize + 1;
-          const endItem = pageIndex * pageSize + currentPageRows;
+          const logicalPageNumber = isCursorPagination ? table.logicalPage ?? 0 : pageIndex;
+          const startItem = logicalPageNumber * pageSize + 1;
+          const endItem = logicalPageNumber * pageSize + currentPageRows;
           return /* @__PURE__ */ jsxs("span", { children: [
             "Showing ",
             startItem,
             "–",
             endItem,
             " of ",
-            totalRows,
+            total,
             " items"
           ] });
         })() }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             Button$1,
             {
               "data-testid": "previous-button",
@@ -53432,13 +53472,10 @@ function TanstackTable({
                 }
               },
               disabled: !actualCanPreviousPage || (hideLoadingState ? false : isLoading || isFetching),
-              children: [
-                /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4 mr-1" }),
-                "Previous"
-              ]
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4 mr-1" })
             }
           ),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             Button$1,
             {
               "data-testid": "next-button",
@@ -53452,10 +53489,7 @@ function TanstackTable({
                 }
               },
               disabled: !actualCanNextPage || (hideLoadingState ? false : isLoading || isFetching),
-              children: [
-                "Next",
-                /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 ml-1" })
-              ]
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 ml-1" })
             }
           )
         ] })
@@ -53470,18 +53504,6 @@ function TanstackTable({
         children: isTableLoading ? /* @__PURE__ */ jsx(TableSkeleton, {}) : /* @__PURE__ */ jsx(TableContent, {})
       }
     ),
-    enableFooter && !isTableLoading && !!data?.length && /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 z-10 bg-card border-t", children: /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx(Table$1, { className: "table-fixed", children: /* @__PURE__ */ jsx(TableFooter, { children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx(TableRow, { children: footerGroup.headers.map((header2) => /* @__PURE__ */ jsx(
-      TableHead,
-      {
-        colSpan: header2.colSpan,
-        style: { width: header2.getSize() },
-        children: header2.isPlaceholder ? null : flexRender(
-          header2.column.columnDef.footer,
-          header2.getContext()
-        )
-      },
-      header2.id
-    )) }, footerGroup.id)) }) }) }) }),
     enableDebug && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx("pre", { className: "p-2 bg-gray-50 text-xs overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: JSON.stringify(table.getState(), null, 2) }) }) })
   ] });
 }
@@ -102536,6 +102558,8 @@ const ChannelToggleButton = ({
   isUpdating,
   onToggle
 }) => {
+  const automation2 = useAutomation();
+  const disableToggle = !automation2 || automation2.status !== AutomationStatus.DRAFT;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ jsx(
       Switch,
@@ -102546,7 +102570,7 @@ const ChannelToggleButton = ({
             onToggle();
           }
         },
-        disabled: isUpdating,
+        disabled: isUpdating || disableToggle,
         className: "data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-gray-300"
       }
     ),
@@ -103724,16 +103748,14 @@ const AutomationEditorSMSPreview = ({
     () => communicationGroup?.textMessageMediaUrls ?? [],
     [communicationGroup?.textMessageMediaUrls]
   );
+  const isLoading = !communicationGroup || !channelSenders || !channelAccounts;
   const dynamicMergeFieldImages = useMemo(() => {
     return getDynamicMergeFieldImages(smsBody);
   }, [getDynamicMergeFieldImages, smsBody]);
   const allImageUrls = useMemo(() => {
-    return [
-      ...dynamicMergeFieldImages.map((img) => img.placeholderUrl),
-      ...imageUrls
-    ];
+    const dynamicUrls = dynamicMergeFieldImages.map((img) => img.placeholderUrl);
+    return [...dynamicUrls, ...imageUrls];
   }, [imageUrls, dynamicMergeFieldImages]);
-  const isLoading = !communicationGroup || !channelSenders || !channelAccounts;
   const lastValidCompanyName = useRef(null);
   const lastChangeTime = useRef(0);
   const companyName = useMemo(() => {
@@ -103868,7 +103890,17 @@ const AutomationEditorSMSPreview = ({
     if (prevWithoutCompany === nextWithoutCompany) {
       return true;
     }
-    return false;
+    const prevImageUrls = prevProps.imageUrls || [];
+    const nextImageUrls = nextProps.imageUrls || [];
+    if (prevImageUrls.length !== nextImageUrls.length) {
+      return false;
+    }
+    for (let i3 = 0; i3 < prevImageUrls.length; i3++) {
+      if (prevImageUrls[i3] !== nextImageUrls[i3]) {
+        return false;
+      }
+    }
+    return true;
   });
   return /* @__PURE__ */ jsx("div", { className: "h-full", children: hasAnySMSsenders === false ? /* @__PURE__ */ jsx("div", { className: "w-full pt-8 mx-auto", children: /* @__PURE__ */ jsx(SMSSetup, {}) }) : /* @__PURE__ */ jsxs(
     motion.div,
@@ -103968,7 +104000,7 @@ const AutomationEditorSMSPreview = ({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx(
+                isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Loading preview..." }) }) : /* @__PURE__ */ jsx(
                   MemoizedSMSPreview,
                   {
                     body: finalSMSBody,
@@ -111115,6 +111147,7 @@ function AutomationList() {
   const {
     automations,
     nextCursor,
+    totalCount,
     isLoading,
     error: error2,
     isFetching,
@@ -111209,6 +111242,7 @@ function AutomationList() {
         data: mappedItems,
         columns,
         paginationMode: "cursor",
+        totalCount: totalCount ?? void 0,
         initialPageSize: pageSizeForQuery,
         isLoading: isLoading && !isPlaceholderData,
         onRowClick: (row) => {
@@ -111251,6 +111285,7 @@ function BroadcastList() {
   const [searchQuery, setSearchQuery] = useState("");
   const {
     automations,
+    totalCount,
     nextCursor,
     isLoading,
     error: error2,
@@ -111409,6 +111444,7 @@ function BroadcastList() {
         paginationMode: "cursor",
         initialPageSize: pageSizeForQuery,
         isLoading: isLoading && !isPlaceholderData,
+        totalCount: totalCount ?? void 0,
         cursorPaginationQueryResult: {
           nextCursor,
           isLoading,
@@ -111444,7 +111480,14 @@ function SegmentList() {
     void 0
   );
   const [searchQuery, setSearchQuery] = useState("");
-  const { segments, isLoading, nextCursor, isFetching, isPlaceholderData } = useListSegments({
+  const {
+    segments,
+    isLoading,
+    nextCursor,
+    totalCount,
+    isFetching,
+    isPlaceholderData
+  } = useListSegments({
     search: searchQuery || void 0,
     cursor: cursorForQuery,
     limit: pageSizeForQuery
@@ -111500,6 +111543,7 @@ function SegmentList() {
         paginationMode: "cursor",
         initialPageSize: pageSizeForQuery,
         isLoading: isLoading && !isPlaceholderData,
+        totalCount: totalCount ?? void 0,
         cursorPaginationQueryResult: {
           nextCursor,
           isLoading,
@@ -112956,6 +113000,7 @@ const AutomationRecipientsTable = () => {
   const [searchQuery, setSearchQuery] = useState("");
   const {
     sentCommunications,
+    totalCount,
     isLoading: isLoadingRecipients,
     isFetching,
     isPlaceholderData,
@@ -113109,6 +113154,7 @@ const AutomationRecipientsTable = () => {
     {
       data: sentCommunications?.results || [],
       columns,
+      totalCount: totalCount ?? void 0,
       paginationMode: "cursor",
       initialPageSize: pageSizeForQuery,
       isLoading: isLoadingRecipients && !isPlaceholderData,
@@ -115572,6 +115618,40 @@ const AutomationEditorTrigger = () => {
   };
   return /* @__PURE__ */ jsx(Fragment$1, { children: renderTriggerData() });
 };
+const safelyTruncateWithMergeFields = (text2, maxLength) => {
+  if (text2.length <= maxLength) {
+    return text2;
+  }
+  const mergeFieldRegex = /\{\{[^}]+\}\}/g;
+  const mergeFields = [];
+  let match2;
+  while ((match2 = mergeFieldRegex.exec(text2)) !== null) {
+    mergeFields.push({
+      start: match2.index,
+      end: match2.index + match2[0].length,
+      field: match2[0]
+    });
+  }
+  let truncationPoint = maxLength;
+  for (const mergeField of mergeFields) {
+    if (truncationPoint > mergeField.start && truncationPoint < mergeField.end) {
+      truncationPoint = mergeField.start;
+      break;
+    }
+    if (truncationPoint === mergeField.start) {
+      const lastSpace = text2.lastIndexOf(" ", mergeField.start - 1);
+      truncationPoint = lastSpace > 0 ? lastSpace : mergeField.start;
+      break;
+    }
+  }
+  if (truncationPoint === 0) {
+    if (mergeFields.length > 0) {
+      return mergeFields[0].field;
+    }
+    return text2.substring(0, Math.min(maxLength, text2.length));
+  }
+  return text2.substring(0, truncationPoint) + "...";
+};
 const AutomationEditorSubStep = ({
   type,
   actionId
@@ -115702,7 +115782,10 @@ const AutomationEditorSubStep = ({
           ) : isGettingMergeFields ? /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground", children: "..." }) : /* @__PURE__ */ jsx(
             MergeFieldRenderer,
             {
-              content: communicationGroup?.smsMessageBody ? `${communicationGroup.smsMessageBody.substring(0, 40)}${communicationGroup.smsMessageBody.length > 40 ? "..." : ""}` : "No message set",
+              content: communicationGroup?.smsMessageBody ? safelyTruncateWithMergeFields(
+                communicationGroup.smsMessageBody,
+                40
+              ) : "No message set",
               mergeFieldsResponse: getMergeFields2,
               variant: "minimal",
               className: "text-[10px] font-medium text-muted-foreground"