@embedreach/components 0.3.37 → 0.3.38

package/dist/chunks/index.js

@@ -23016,7 +23016,6 @@ const updateBusinessLocations = async (locations) => {
   return response.data;
 };
 const updateBusinessBrandSettings = async (branding) => {
-  console.log("branding", branding);
   const response = await baseRequest(BUSINESS_PATH, {
     method: "PATCH",
     body: JSON.stringify({ branding })
@@ -28705,7 +28704,6 @@ const useEngageFormSubmissions = () => {
   };
   const handleBusinessSubmit = async (data, onSuccess) => {
     try {
-      console.log("data", data);
       updateBusinessSettings2(data, {
         onSuccess: () => {
           onSuccess?.();
@@ -28727,12 +28725,16 @@ const useEngageFormSubmissions = () => {
       });
       const selectedSender = emailChannelSenders[0];
       if (!selectedSender) return;
+      const replyToEmail = data.replyToEmail?.trim() ? data.replyToEmail : (() => {
+        const domain = selectedSender.fullDomain.split("@")[1] || "";
+        return `no-reply@${domain}`;
+      })();
       updateChannelSender2(
         {
           toUpdate: {
             channelSenderMetadata: {
               ...selectedSender.channelSender.channelSenderMetadata,
-              emailReplyTo: data.replyToEmail ?? null,
+              emailReplyTo: replyToEmail,
               emailFromName: data.displayName
             }
           },
@@ -28800,6 +28802,7 @@ const initialState$3 = {
   currentStepIndex: 0,
   steps: allSteps,
   skipSMS: false,
+  skipCompletion: false,
   completedSteps: [],
   visitedSteps: [ENGAGE_STEPS.SPLASH],
   formData: {},
@@ -28850,6 +28853,16 @@ const engageOnboardingReducer = (state, action) => {
         steps: newStepsAfterSMS
       });
     }
+    case "SET_SKIP_COMPLETION": {
+      const newStepsAfterCompletion = allSteps.filter(
+        (step) => step !== ENGAGE_STEPS.COMPLETION || !action.payload
+      );
+      return updateNavigationState({
+        ...state,
+        skipCompletion: action.payload,
+        steps: newStepsAfterCompletion
+      });
+    }
     case "MARK_STEP_COMPLETE":
       return {
         ...state,
@@ -28921,6 +28934,9 @@ const setCurrentStep = (dispatch2) => (step) => {
 const setSkipSMS = (dispatch2) => (skipSMS) => {
   dispatch2({ type: "SET_SKIP_SMS", payload: skipSMS });
 };
+const setSkipCompletion = (dispatch2) => (skipCompletion) => {
+  dispatch2({ type: "SET_SKIP_COMPLETION", payload: skipCompletion });
+};
 const markStepComplete = (dispatch2) => (step) => {
   dispatch2({ type: "MARK_STEP_COMPLETE", payload: step });
 };
@@ -32284,7 +32300,8 @@ const EmailChannelForm = ({ onSubmit }) => {
       const { emailFromName, emailReplyTo } = firstSender.channelSender.channelSenderMetadata;
       form.reset({
         displayName: emailFromName || "",
-        replyToEmail: emailReplyTo && emailReplyTo.trim() ? emailReplyTo : firstSender.fullDomain
+        replyToEmail: emailReplyTo && emailReplyTo.trim() ? emailReplyTo : ""
+        // Leave blank for new users to encourage them to enter their own email
       });
     }
   }, [emailChannelSenders, form]);
@@ -32303,6 +32320,8 @@ const EmailChannelForm = ({ onSubmit }) => {
   const managedEmailAccount = emailChannelSenders[0];
   const displayName = form.watch("displayName") || "";
   const replyToEmail = form.watch("replyToEmail") || "";
+  const managedEmailDomain = managedEmailAccount.fullDomain.split("@")[1] || "";
+  const noReplyFallback = `no-reply@${managedEmailDomain}`;
   return /* @__PURE__ */ jsx(Form$1, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-8 p-8", children: [
     /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -32362,10 +32381,7 @@ const EmailChannelForm = ({ onSubmit }) => {
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs(Label$1, { className: "text-sm font-medium text-gray-900", children: [
-          "Reply-to Email ",
-          /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
-        ] }),
+        /* @__PURE__ */ jsx(Label$1, { className: "text-sm font-medium text-gray-900", children: "Reply-to Email" }),
         /* @__PURE__ */ jsx(
           InfoTooltip,
           {
@@ -32384,10 +32400,14 @@ const EmailChannelForm = ({ onSubmit }) => {
               Input,
               {
                 type: "email",
-                placeholder: "Enter email address for replies",
+                placeholder: "e.g., support@yourcompany.com",
                 ...field
               }
             ) }),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600 mt-2", children: [
+              /* @__PURE__ */ jsx("strong", { children: "Recommended:" }),
+              " Enter an inbox you actively monitor (like support@yourcompany.com) so you can respond to customer replies. If left blank, replies will go to a no-reply address."
+            ] }),
             /* @__PURE__ */ jsx(FormMessage, {})
           ] })
         }
@@ -32423,7 +32443,7 @@ const EmailChannelForm = ({ onSubmit }) => {
         /* @__PURE__ */ jsx("div", { className: "mt-4 p-3 bg-purple-100 rounded-lg", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-purple-700", children: [
           "Note: When customers reply, their response will go to",
           " ",
-          /* @__PURE__ */ jsx("span", { className: "font-semibold text-purple-900", children: replyToEmail || managedEmailAccount.fullDomain })
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-purple-900", children: replyToEmail || noReplyFallback })
         ] }) })
       ] })
     ] }),
@@ -32538,12 +32558,13 @@ const automationKeys = {
     ...args.limit ? [args.limit] : []
   ],
   businessStatistics: () => [...automationKeys.all, "business", "statistics"],
-  recipients: (id2, includeSegments, excludeSegments) => [
+  recipients: (id2, includeSegments, excludeSegments, search2) => [
     ...automationKeys.all,
     id2,
     "recipients",
     JSON.stringify(includeSegments),
-    JSON.stringify(excludeSegments)
+    JSON.stringify(excludeSegments),
+    ...search2 ? [search2] : []
   ],
   estimatedRecipients: (id2) => [...automationKeys.all, id2, "estimated-recipients"],
   list: (args) => [
@@ -35409,9 +35430,36 @@ const MergeFieldSettings = ({
   const goToNextStep2 = (isOnboarding ? onboardingContext?.goToNextStep : settingsContext?.navigation?.goToNextStep) || wizardContext?.goToNextStep || (() => {
   });
   const markStepComplete2 = onboardingContext?.markStepComplete;
+  const isLastStep = onboardingContext?.isLastStep ?? false;
+  const handleClose = onboardingContext?.handleClose;
+  const { toggleEngageOnboarding } = useBusiness$1();
   const stepTitle = title2 || ENGAGE_STRINGS.MERGE_FIELDS_TITLE;
   const stepDescription = description2 || "Manage merge fields for personalizing your communications with dynamic content.";
   const formRef = useRef(null);
+  const handleSkip = () => {
+    toggleEngageOnboarding(false);
+    handleClose?.();
+  };
+  const handleCompletion = () => {
+    if (formRef.current) {
+      const mergeFields = formRef.current.getData();
+      const mapping = Object.fromEntries(
+        mergeFields.filter((field) => field.fallbackValue.trim()).map((field) => [
+          field.value.replace(/[{}]/g, ""),
+          // Remove {{}} syntax
+          field.fallbackValue.trim()
+        ])
+      );
+      postBusinessMergeFieldFallbacks2({
+        mergeFieldFallbacks: mapping
+      });
+      if (markStepComplete2) {
+        markStepComplete2(ENGAGE_STEPS.MERGE_FIELDS);
+      }
+      toggleEngageOnboarding(false);
+      handleClose?.();
+    }
+  };
   const handleFormSubmit = () => {
     if (formRef.current) {
       const mergeFields = formRef.current.getData();
@@ -35429,18 +35477,26 @@ const MergeFieldSettings = ({
         if (markStepComplete2) {
           markStepComplete2(ENGAGE_STEPS.MERGE_FIELDS);
         }
-        goToNextStep2();
+        if (isLastStep) {
+          handleCompletion();
+        } else {
+          goToNextStep2();
+        }
       }
     }
   };
+  const showCompletionButtons = isOnboarding && isLastStep;
   return /* @__PURE__ */ jsxs(
     WizardFormWrapper,
     {
       title: stepTitle,
       description: stepDescription,
-      onBack: goToPreviousStep2,
+      onBack: showCompletionButtons ? void 0 : goToPreviousStep2,
       onNext: handleFormSubmit,
-      submitLabel: isOnboarding ? "Next step" : "Save",
+      onSkip: showCompletionButtons ? handleSkip : void 0,
+      submitLabel: showCompletionButtons ? isPosting ? "Saving..." : "Save & Go to dashboard" : isOnboarding ? "Next step" : "Save",
+      canGoNext: !isPosting,
+      skipLabel: showCompletionButtons ? "Skip" : void 0,
       mode: isOnboarding ? "onboarding" : "settings",
       isSubmitting: isPosting,
       children: [
@@ -35580,6 +35636,7 @@ const smsRegistrationApplicationDataSchema = z$2.discriminatedUnion(
 );
 var SmsRegistrationApplicationStatus = /* @__PURE__ */ ((SmsRegistrationApplicationStatus2) => {
   SmsRegistrationApplicationStatus2["PENDING"] = "pending";
+  SmsRegistrationApplicationStatus2["IN_REVIEW"] = "in_review";
   SmsRegistrationApplicationStatus2["APPROVED"] = "approved";
   SmsRegistrationApplicationStatus2["REJECTED"] = "rejected";
   return SmsRegistrationApplicationStatus2;
@@ -35859,7 +35916,7 @@ const SMSSetup = ({
       }
     }
   };
-  const isPending = latestSmsRegistrationApplication && latestSmsRegistrationApplication.status === SmsRegistrationApplicationStatus.PENDING;
+  const isInReview = latestSmsRegistrationApplication && (latestSmsRegistrationApplication.status === SmsRegistrationApplicationStatus.IN_REVIEW || latestSmsRegistrationApplication.status === SmsRegistrationApplicationStatus.PENDING);
   return /* @__PURE__ */ jsxs(
     motion.div,
     {
@@ -35880,17 +35937,32 @@ const SMSSetup = ({
             children: /* @__PURE__ */ jsx(IconDefinitions.SmsIcon, {})
           }
         ),
-        /* @__PURE__ */ jsx(
-          motion.h2,
-          {
-            variants: itemVariants2,
-            className: "text-sm font-medium text-foreground",
-            children: "Request your SMS sending number"
-          }
-        ),
-        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants2, className: "max-w-xl mx-auto", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-normal text-muted-foreground mb-2", children: "Before you can send messages, we need to verify your business info with our SMS provider. Once approved, we'll assign you a phone number to send SMS campaigns." }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-normal text-muted-foreground", children: "This usually takes 3-7 business days." })
+        isInReview ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsx(
+            motion.h2,
+            {
+              variants: itemVariants2,
+              className: "text-sm font-medium text-foreground",
+              children: "SMS Application Under Review"
+            }
+          ),
+          /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants2, className: "max-w-xl mx-auto", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-normal text-muted-foreground mb-2", children: "Your SMS application is currently being reviewed by our SMS provider. Once approved, we'll assign you a phone number to send SMS campaigns." }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-normal text-muted-foreground", children: "This usually takes 3-7 business days." })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsx(
+            motion.h2,
+            {
+              variants: itemVariants2,
+              className: "text-sm font-medium text-foreground",
+              children: "Request your SMS sending number"
+            }
+          ),
+          /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants2, className: "max-w-xl mx-auto", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-normal text-muted-foreground mb-2", children: "Before you can send messages, we need to verify your business info with our SMS provider. Once approved, we'll assign you a phone number to send SMS campaigns." }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-normal text-muted-foreground", children: "This usually takes 3-7 business days." })
+          ] })
         ] }),
         /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: showForm ? /* @__PURE__ */ jsx(
           motion.div,
@@ -35911,11 +35983,11 @@ const SMSSetup = ({
             )
           },
           "form"
-        ) : isPending ? /* @__PURE__ */ jsxs(
+        ) : isInReview ? /* @__PURE__ */ jsxs(
           motion.div,
           {
             variants: itemVariants2,
-            className: "flex items-center gap-2 px-3 py-1.5 bg-orange-50 border border-orange-200 rounded-full",
+            className: "flex items-center gap-2 px-3 py-1.5 bg-amber-50 border border-amber-200 rounded-full",
             children: [
               /* @__PURE__ */ jsx(
                 motion.div,
@@ -35929,13 +36001,13 @@ const SMSSetup = ({
                     repeat: Number.POSITIVE_INFINITY,
                     ease: "easeInOut"
                   },
-                  className: "w-2 h-2 bg-orange-500 rounded-full"
+                  className: "w-2 h-2 bg-amber-500 rounded-full"
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-orange-800", children: "Pending approval" })
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-amber-800", children: "Pending Review" })
             ]
           },
-          "pending"
+          "in-review"
         ) : /* @__PURE__ */ jsx(motion.div, { variants: itemVariants2, children: /* @__PURE__ */ jsx(
           Button$1,
           {
@@ -36023,7 +36095,8 @@ const SMSChannelSettings = ({
   const applicationValid = smsChannelSenders.some(
     (sender) => sender.smsApplication?.status === SmsRegistrationApplicationStatus.APPROVED
   );
-  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-4xl mx-auto mt-8", children: validSmsSender ? /* @__PURE__ */ jsxs(
+  const isInReview = smsApplication?.status === SmsRegistrationApplicationStatus.IN_REVIEW || smsApplication?.status === SmsRegistrationApplicationStatus.PENDING;
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-4xl mx-auto mt-8", children: isInReview ? /* @__PURE__ */ jsxs(
     motion.div,
     {
       initial: "hidden",
@@ -36033,6 +36106,64 @@ const SMSChannelSettings = ({
       className: cn$2(
         "flex flex-col items-center text-center w-full max-w-[72ch] rounded-xl gap-3 mx-auto bg-background"
       ),
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: itemVariants2,
+            className: "w-16 h-16 rounded-xl flex items-center justify-center bg-amber-50",
+            children: /* @__PURE__ */ jsx(IconDefinitions.SmsIcon, { className: "text-amber-600" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.h2,
+          {
+            variants: itemVariants2,
+            className: "text-lg font-medium text-foreground",
+            children: "SMS Application Under Review"
+          }
+        ),
+        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants2, className: "max-w-xl mx-auto", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-normal text-muted-foreground mb-2", children: "Your SMS application is currently being reviewed by our SMS provider. Once approved, we'll assign you a phone number to send SMS campaigns." }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-normal text-muted-foreground", children: "This usually takes 3-7 business days." })
+        ] }),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: itemVariants2,
+            className: "flex flex-col items-center w-full gap-4",
+            children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center px-4 py-1 rounded-full bg-amber-50 border border-amber-200 text-amber-800 font-medium text-base mb-2", children: [
+              /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  animate: {
+                    scale: [1, 1.2, 1],
+                    opacity: [1, 0.8, 1]
+                  },
+                  transition: {
+                    duration: 2,
+                    repeat: Number.POSITIVE_INFINITY,
+                    ease: "easeInOut"
+                  },
+                  className: "w-2 h-2 bg-amber-500 rounded-full mr-2"
+                }
+              ),
+              "Pending Review"
+            ] })
+          }
+        )
+      ]
+    }
+  ) : validSmsSender ? /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: "hidden",
+      animate: "visible",
+      exit: "exit",
+      variants: containerVariants,
+      className: cn$2(
+        "flex flex-col items-center text-center w-full max-w-[72ch] rounded-xl gap-3 mx-auto bg-blue-50 border-blue-200 text-blue-900"
+      ),
       children: [
         /* @__PURE__ */ jsx(
           motion.div,
@@ -36071,22 +36202,32 @@ const SMSChannelSettings = ({
                 /* @__PURE__ */ jsx("span", { className: "w-2 h-2 bg-blue-500 rounded-full mr-2" }),
                 "Ready to send"
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col gap-3 max-w-md mx-auto", children: smsChannelSenders.map((sender) => {
+              /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col gap-3 mx-auto", children: smsChannelSenders.map((sender) => {
                 const isPending = !!sender.channelSender.channelSenderMetadata.friendlyName?.toLowerCase().includes("pending approval");
                 const displayName = sender.channelSender.channelSenderMetadata.friendlyName || sender.channelSender.channelSenderMetadata.from || "Unknown Number";
                 return /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: cn$2(
-                      "flex items-center justify-between rounded-xl px-4 py-3 border shadow-sm",
+                      "flex items-start rounded-xl px-4 py-3 border shadow-sm",
                       isPending ? "bg-gray-50 border-gray-200 text-gray-500" : "bg-blue-50 border-blue-200 text-blue-900 font-semibold"
                     ),
                     children: [
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-                        isPending ? /* @__PURE__ */ jsx(IconDefinitions.AlertCircleIcon, { className: "w-5 h-5 text-yellow-500 shrink-0" }) : /* @__PURE__ */ jsx(IconDefinitions.CheckIcon, { className: "w-5 h-5 text-blue-500 shrink-0" }),
-                        /* @__PURE__ */ jsx("span", { className: "truncate", title: displayName, children: displayName })
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 flex-1 min-w-0", children: [
+                        isPending ? /* @__PURE__ */ jsx(IconDefinitions.AlertCircleIcon, { className: "w-5 h-5 text-yellow-500 shrink-0 mt-0.5" }) : /* @__PURE__ */ jsx(IconDefinitions.CheckIcon, { className: "w-5 h-5 text-blue-500 shrink-0 mt-0.5" }),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn$2(
+                              "text-sm leading-relaxed",
+                              isPending ? "break-words" : "truncate"
+                            ),
+                            title: displayName,
+                            children: displayName
+                          }
+                        )
                       ] }),
-                      !isPending && sender.channelSender.channelSenderMetadata.from && sender.channelSender.channelSenderMetadata.friendlyName !== sender.channelSender.channelSenderMetadata.from && /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-blue-700 ml-2", children: sender.channelSender.channelSenderMetadata.from })
+                      !isPending && sender.channelSender.channelSenderMetadata.from && sender.channelSender.channelSenderMetadata.friendlyName !== sender.channelSender.channelSenderMetadata.from && /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-blue-700 ml-2 shrink-0", children: sender.channelSender.channelSenderMetadata.from })
                     ]
                   },
                   sender.channelSender.id
@@ -37040,13 +37181,25 @@ const useAutomationSelection = () => {
       });
     });
   }, [updateAutomationStatesMutation]);
+  const enabledCount = useMemo(() => {
+    return Object.values(selectedAutomations).filter(Boolean).length;
+  }, [selectedAutomations]);
+  const allAutomationsEnabled = useMemo(() => {
+    if (automations.length === 0) return false;
+    return automations.every(
+      (automation2) => selectedAutomations[automation2.id] === true
+    );
+  }, [automations, selectedAutomations]);
   return {
     selectedAutomations,
     handleToggle,
     handleToggleAll,
     saveAutomationStates,
     isSaving: updateAutomationStatesMutation.isPending,
-    isLoading
+    isLoading,
+    enabledCount,
+    allAutomationsEnabled,
+    automations
   };
 };
 function composeEventHandlers$3(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
@@ -37490,109 +37643,158 @@ const OnboardingAutomationList = ({
       /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "No automations available yet" })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx("div", { className: "space-y-3 max-h-[60vh] overflow-y-auto", children: automations?.map((automation2) => {
-      const description2 = automation2.description;
-      const isEnabled = selectedAutomations[automation2.id] ?? true;
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex items-start gap-3 p-2 border border-border rounded-lg bg-background hover:bg-muted/30 transition-colors",
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0 mt-1.5" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsx("h4", { className: "font-medium text-sm text-foreground", children: automation2.name }),
-                description2 && typeof description2 === "string" && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5 leading-relaxed", children: description2 })
-              ] })
-            ] }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
-              /* @__PURE__ */ jsx(
-                Label$1,
-                {
-                  htmlFor: `automation-${automation2.id}`,
-                  className: "text-xs font-medium cursor-pointer",
-                  children: isEnabled ? "On" : "Off"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Switch,
-                {
-                  id: `automation-${automation2.id}`,
-                  checked: isEnabled,
-                  onCheckedChange: (checked) => onToggle(automation2.id, checked),
-                  className: "data-[state=checked]:bg-primary"
-                }
-              )
-            ] })
-          ]
-        },
-        automation2.id
-      );
-    }) }),
-    /* @__PURE__ */ jsx("div", { className: "text-center pt-4 border-t border-border", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "💡 You can change these settings anytime from your automations page" }) })
-  ] });
+  return /* @__PURE__ */ jsx("div", { className: "space-y-3 overflow-y-auto flex-1 min-h-0 p-3", children: automations?.map((automation2) => {
+    const description2 = automation2.description;
+    const isEnabled = selectedAutomations[automation2.id] ?? true;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center gap-3 px-3 py-2 border border-border rounded-lg bg-background hover:bg-muted/30 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx("h4", { className: "font-medium text-sm text-foreground", children: automation2.name }),
+            description2 && typeof description2 === "string" && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5 leading-relaxed", children: description2 })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+            /* @__PURE__ */ jsx(
+              Label$1,
+              {
+                htmlFor: `automation-${automation2.id}`,
+                className: "text-xs font-medium cursor-pointer",
+                children: isEnabled ? "On" : "Off"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                id: `automation-${automation2.id}`,
+                checked: isEnabled,
+                onCheckedChange: (checked) => onToggle(automation2.id, checked)
+              }
+            )
+          ] })
+        ]
+      },
+      automation2.id
+    );
+  }) });
 };
 const CompletionStep = () => {
   const { handleClose, state } = useEngageOnboardingContext();
-  const { data: smsApplication } = useGetLatestSmsRegistrationApplication();
   const { toggleEngageOnboarding } = useBusiness$1();
   const {
     selectedAutomations,
     handleToggle,
     saveAutomationStates,
     isSaving,
-    isLoading: isLoadingAutomations
+    isLoading: isLoadingAutomations,
+    enabledCount,
+    automations
   } = useAutomationSelection();
+  const { data: smsApplication } = useGetLatestSmsRegistrationApplication();
   const hasSMSSteps = state.steps.includes(ENGAGE_STEPS.SMS) || state.steps.includes(ENGAGE_STEPS.SMS_INTERSTITIAL);
+  const hasAutomations = !isLoadingAutomations && automations.length > 0;
   const handleSkip = () => {
     toggleEngageOnboarding(false);
     handleClose?.();
   };
   const handleCompletion = async () => {
-    const success2 = await saveAutomationStates();
-    if (success2) {
-      toggleEngageOnboarding(false);
-      handleClose?.();
+    if (hasAutomations) {
+      const success2 = await saveAutomationStates();
+      if (!success2) {
+        return;
+      }
     }
+    toggleEngageOnboarding(false);
+    handleClose?.();
   };
-  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-6", children: /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto space-y-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "pb-4 border-b border-border", children: [
-        /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold text-foreground mb-1", children: "You're All Set! 🎉" }),
-        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
-          "Choose which ",
-          t$2("engage:automation", { count: 2 }).toLowerCase(),
-          " ",
-          "to enable"
-        ] })
+  if (isLoadingAutomations) {
+    return /* @__PURE__ */ jsx("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4" }),
+      /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
+        "Loading your ",
+        t$2("engage:automation", { count: 2 }).toLowerCase(),
+        "..."
+      ] })
+    ] }) });
+  }
+  if (!hasAutomations) {
+    return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 p-6 pb-4", children: /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "pb-4 border-b border-border", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold text-foreground mb-1", children: "You're All Set! 🎉" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Your Engage setup is complete. You can now start creating broadcasts and automations from your dashboard." })
+        ] }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center p-6", children: /* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto text-center", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold text-foreground mb-2", children: "Head to your dashboard to start creating broadcasts" }),
+          /* @__PURE__ */ jsx("p", { className: "text-base text-muted-foreground", children: "You're ready to engage with your audience through email and SMS campaigns." })
+        ] }) })
       ] }),
-      hasSMSSteps && (!smsApplication?.application || smsApplication.status === SmsRegistrationApplicationStatus.PENDING) && /* @__PURE__ */ jsx("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(
-          InfoTooltip,
-          {
-            title: "You can set up SMS later from the settings menu.",
-            size: "small"
-          }
-        ),
-        /* @__PURE__ */ jsx("p", { className: "text-blue-700 text-sm", children: "You can set up SMS later from the settings menu." })
+      /* @__PURE__ */ jsx("div", { className: "border-t border-border py-4 px-6 flex items-center justify-end bg-background gap-4", children: /* @__PURE__ */ jsx(
+        Button$1,
+        {
+          onClick: handleCompletion,
+          className: "flex items-center gap-2 text-sm",
+          children: "Go to dashboard"
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 p-6 pb-4", children: /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "pb-4 border-b border-border", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold text-foreground mb-1", children: "You're All Set! 🎉" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "These automations will start running automatically. Toggle off any you don't want right now." })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            InfoTooltip,
+            {
+              title: "All automations below are ON by default. You can always change these settings later from your automations page.",
+              size: "small"
+            }
+          ),
+          /* @__PURE__ */ jsxs("p", { className: "text-blue-700 text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "All automations below are ON by default." }),
+            " ",
+            "You can always change these settings later from your",
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "automations page" }),
+            "."
+          ] })
+        ] }) }),
+        hasSMSSteps && (!smsApplication?.application || smsApplication.status === SmsRegistrationApplicationStatus.PENDING || smsApplication.status === SmsRegistrationApplicationStatus.IN_REVIEW) && /* @__PURE__ */ jsx("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            InfoTooltip,
+            {
+              title: "You can set up SMS later from the settings menu.",
+              size: "small"
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-blue-700 text-sm", children: "You can set up SMS later from the settings menu." })
+        ] }) })
       ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "bg-background border border-border rounded-xl p-3 shadow-sm", children: !isLoadingAutomations ? /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col min-h-0 pb-4 px-6", children: /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto w-full flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ jsx("div", { className: "bg-background border border-border rounded-xl shadow-sm flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ jsx(
         OnboardingAutomationList,
         {
           selectedAutomations,
           onToggle: handleToggle
         }
-      ) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4" }),
-        /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
-          "Loading your",
-          " ",
-          t$2("engage:automation", { count: 2 }).toLowerCase(),
-          "..."
-        ] })
-      ] }) }) })
-    ] }) }),
+      ) }) }) })
+    ] }),
+    enabledCount > 0 && /* @__PURE__ */ jsx("div", { className: "px-6 pb-4", children: /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto", children: /* @__PURE__ */ jsx("div", { className: "bg-teal-50 border border-teal-200 rounded-lg p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-teal-600" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-teal-900 font-medium", children: [
+        enabledCount,
+        " ",
+        t$2("engage:automation", {
+          count: enabledCount
+        }).toLowerCase(),
+        " ",
+        "will be activated when you continue"
+      ] })
+    ] }) }) }) }),
     /* @__PURE__ */ jsxs("div", { className: "border-t border-border py-4 px-6 flex items-center justify-end bg-background gap-4", children: [
       /* @__PURE__ */ jsx(
         Button$1,
@@ -37892,12 +38094,14 @@ const EngageOnboarding = () => {
   const hasSMSSteps = state.steps.includes(ENGAGE_STEPS.SMS) || state.steps.includes(ENGAGE_STEPS.SMS_INTERSTITIAL);
   const sidebarSteps = useMemo(() => {
     const stepsToUse = hasSMSSteps ? ONBOARDING_STEP_CONFIGS : filteredSidebarItems;
-    return stepsToUse.map((step) => ({
+    return stepsToUse.filter(
+      (step) => state.steps.includes(step.key)
+    ).map((step) => ({
       key: step.key,
       label: step.label,
       isValid: () => state.completedSteps.includes(step.key)
     }));
-  }, [hasSMSSteps, filteredSidebarItems, state.completedSteps]);
+  }, [hasSMSSteps, filteredSidebarItems, state.completedSteps, state.steps]);
   const shouldRenderStep = hasSMSSteps || currentStep !== ENGAGE_STEPS.SMS && currentStep !== ENGAGE_STEPS.SMS_INTERSTITIAL;
   return /* @__PURE__ */ jsx(Dialog, { open: state.open, onOpenChange: handleOpenChange, modal: true, children: /* @__PURE__ */ jsxs(
     DialogContent,
@@ -37943,6 +38147,13 @@ const EngageOnboardingProvider = ({
   onClose,
   hideSMS = false
 }) => {
+  const { automations, isLoading: isLoadingAutomations } = useListBusinessAutomations({
+    triggerTypes: [
+      AutomationTriggerType.TRIGGER_BASED,
+      AutomationTriggerType.DATE_BASED
+    ],
+    limit: 50
+  });
   const filteredSteps = hideSMS ? initialState$3.steps.filter(
     (step) => step !== ENGAGE_STEPS.SMS && step !== ENGAGE_STEPS.SMS_INTERSTITIAL
   ) : initialState$3.steps;
@@ -37951,14 +38162,12 @@ const EngageOnboardingProvider = ({
     open,
     steps: filteredSteps
   });
-  React__default.useEffect(() => {
-    setOpen(dispatch2)(open);
-  }, [open]);
   const actions = useMemo(
     () => ({
       setOpen: setOpen(dispatch2),
       setCurrentStep: setCurrentStep(dispatch2),
       setSkipSMS: setSkipSMS(dispatch2),
+      setSkipCompletion: setSkipCompletion(dispatch2),
       markStepComplete: markStepComplete(dispatch2),
       updateFormData: updateFormData(dispatch2),
       resetState: resetState(dispatch2),
@@ -37966,8 +38175,17 @@ const EngageOnboardingProvider = ({
       goToPreviousStep: goToPreviousStep(dispatch2),
       goToStep: goToStep(dispatch2)
     }),
-    [dispatch2]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
   );
+  React__default.useEffect(() => {
+    actions.setOpen(open);
+  }, [open, actions]);
+  useEffect(() => {
+    if (!isLoadingAutomations && automations.length === 0) {
+      actions.setSkipCompletion(true);
+    }
+  }, [isLoadingAutomations, automations.length, actions]);
   const { isFirstStep, isLastStep, canGoNext, canGoPrevious } = state;
   const isStepComplete = useCallback(
     (step) => state.completedSteps.includes(step),
@@ -65628,13 +65846,13 @@ const measure$1 = {
           title_transaction: "Revenue by Source (Transaction Attributed)",
           total_revenue: "Total Revenue",
           click: "Click",
-          click_attributed: "Click Date Attributed",
-          click_attributed_description: "Counts transactions tracked to clicks made within the selected date range.",
-          click_attributed_why_it_matters: "Why it matters: Use this to understand which marketing touchpoints are driving conversions. Transactions are counted based on when the customer's first tracked interaction occurred (ad click, search, site visit), not when they completed their purchase. This helps you see the impact of your marketing efforts at the moment of customer engagement, even if the purchase happens days or weeks later.",
+          click_attributed: "Click Date",
+          click_attributed_description: "Shows ONLY transactions with an associated marketing click/call within the selected date range.",
+          click_attributed_why_it_matters: "Why it matters: \nUse this to understand which marketing touchpoints are driving conversions from when the marketing event occured. Transactions are shown based on when the customer's marketing interaction (ad click, call, google search etc) was tracked, not when they completed their transaction. This helps you see the impact of your marketing efforts at the moment of customer engagement, even if the transaction happens days or weeks later. \n\nExample: \nA customer clicks your ad on Oct 15 but completes their transaction on Nov 3. With Oct 1-31 selected, this transaction appears in your data. With Nov 1-30 selected, it doesn't.",
           transaction: "Transaction",
-          transaction_attributed: "Transaction Date Attributed",
-          transaction_attributed_description: "Counts transactions created in the selected date range.",
-          transaction_attributed_why_it_matters: "Why it matters: Use this to understand actual sales performance during a specific period. Transactions are counted based on when the transaction was completed (transaction date), regardless of when or how the customer first discovered your business. This helps you see all revenue that occurred during the selected timeframe, providing a clear view of business performance by date."
+          transaction_attributed: "Transaction Date",
+          transaction_attributed_description: "Shows all transactions created in the selected date range.",
+          transaction_attributed_why_it_matters: "Why it matters: \nUse this to understand actual sales performance during a specific period and where they came from. Transactions are shown based on when the transaction was created, regardless of when or how the customer first discovered your business. This helps you see all revenue that occurred during the selected timeframe, and which digital marketing efforts they are associated to. \n\nExample: \nA customer clicks your ad on Oct 15 but completes their transaction on Nov 3. With Nov 1-30 selected, this transaction appears in your data. With Oct 1-31 selected, it doesn't."
         }
       }
     }
@@ -66483,13 +66701,13 @@ const measure = {
           title_transaction: "Ingresos por Fuente (Atribución por Transacción)",
           total_revenue: "Ingresos Totales",
           click: "Clic",
-          click_attributed: "Fecha de Atribución por Clic",
-          click_attributed_description: "Cuenta transacciones rastreadas a clics realizados dentro del rango de fechas seleccionado.",
-          click_attributed_why_it_matters: "Why it matters: Use this to understand which marketing touchpoints are driving conversions. Transactions are counted based on when the customer's first tracked interaction occurred (ad click, search, site visit), not when they completed their purchase. This helps you see the impact of your marketing efforts at the moment of customer engagement, even if the purchase happens days or weeks later.",
+          click_attributed: "Fecha de Clic",
+          click_attributed_description: "Muestra SOLO transacciones con un clic/llamada de marketing asociado dentro del rango de fechas seleccionado.",
+          click_attributed_why_it_matters: "Por qué es importante: \nUsa esto para entender qué puntos de contacto de marketing están impulsando conversiones desde cuando ocurrió el evento de marketing. Las transacciones se muestran según cuándo se rastreó la interacción de marketing del cliente (clic en anuncio, llamada, búsqueda en Google, etc.), no cuando completaron su transacción. Esto te ayuda a ver el impacto de tus esfuerzos de marketing en el momento del compromiso del cliente, incluso si la transacción ocurre días o semanas después. \n\nEjemplo: \nUn cliente hace clic en tu anuncio el 15 de octubre pero completa su transacción el 3 de noviembre. Con el 1-31 de octubre seleccionado, esta transacción aparece en tus datos. Con el 1-30 de noviembre seleccionado, no aparece.",
           transaction: "Transacción",
-          transaction_attributed: "Fecha de Atribución por Transacción",
-          transaction_attributed_description: "Cuenta transacciones creadas en el rango de fechas seleccionado.",
-          transaction_attributed_why_it_matters: "Why it matters: Use this to understand actual sales performance during a specific period. Transactions are counted based on when the transaction was completed (transaction date), regardless of when or how the customer first discovered your business. This helps you see all revenue that occurred during the selected timeframe, providing a clear view of business performance by date."
+          transaction_attributed: "Fecha de Transacción",
+          transaction_attributed_description: "Muestra todas las transacciones creadas en el rango de fechas seleccionado.",
+          transaction_attributed_why_it_matters: "Por qué es importante: \nUsa esto para entender el rendimiento real de ventas durante un período específico y de dónde provinieron. Las transacciones se muestran según cuándo se creó la transacción, independientemente de cuándo o cómo el cliente descubrió por primera vez tu negocio. Esto te ayuda a ver todos los ingresos que ocurrieron durante el período de tiempo seleccionado, y con qué esfuerzos de marketing digital están asociados. \n\nEjemplo: \nUn cliente hace clic en tu anuncio el 15 de octubre pero completa su transacción el 3 de noviembre. Con el 1-30 de noviembre seleccionado, esta transacción aparece en tus datos. Con el 1-31 de octubre seleccionado, no aparece."
         }
       }
     }
@@ -67426,13 +67644,13 @@ const defaultTranslations = {
               title_transaction: "Revenue by Source (Transaction Attributed)",
               total_revenue: "Total Revenue",
               click: "Click",
-              click_attributed: "Click Date Attributed",
-              click_attributed_description: "Counts transactions tracked to clicks made within the selected date range.",
-              click_attributed_why_it_matters: "Why it matters: Use this to understand which marketing touchpoints are driving conversions. Transactions are counted based on when the customer's first tracked interaction occurred (ad click, search, site visit), not when they completed their purchase. This helps you see the impact of your marketing efforts at the moment of customer engagement, even if the purchase happens days or weeks later.",
+              click_attributed: "Click Date",
+              click_attributed_description: "Shows ONLY transactions with an associated marketing click/call within the selected date range.",
+              click_attributed_why_it_matters: "Why it matters: \nUse this to understand which marketing touchpoints are driving conversions from when the marketing event occured. Transactions are shown based on when the customer's marketing interaction (ad click, call, google search etc) was tracked, not when they completed their transaction. This helps you see the impact of your marketing efforts at the moment of customer engagement, even if the transaction happens days or weeks later. \n\nExample: \nA customer clicks your ad on Oct 15 but completes their transaction on Nov 3. With Oct 1-31 selected, this transaction appears in your data. With Nov 1-30 selected, it doesn't.",
               transaction: "Transaction",
-              transaction_attributed: "Transaction Date Attributed",
-              transaction_attributed_description: "Counts transactions created in the selected date range.",
-              transaction_attributed_why_it_matters: "Why it matters: Use this to understand actual sales performance during a specific period. Transactions are counted based on when the transaction was completed (transaction date), regardless of when or how the customer first discovered your business. This helps you see all revenue that occurred during the selected timeframe, providing a clear view of business performance by date."
+              transaction_attributed: "Transaction Date",
+              transaction_attributed_description: "Shows all transactions created in the selected date range.",
+              transaction_attributed_why_it_matters: "Why it matters: \nUse this to understand actual sales performance during a specific period and where they came from. Transactions are shown based on when the transaction was created, regardless of when or how the customer first discovered your business. This helps you see all revenue that occurred during the selected timeframe, and which digital marketing efforts they are associated to. \n\nExample: \nA customer clicks your ad on Oct 15 but completes their transaction on Nov 3. With Nov 1-30 selected, this transaction appears in your data. With Oct 1-31 selected, it doesn't."
             }
           }
         }
@@ -69259,26 +69477,21 @@ const parseDate = async (params) => {
   return response.data;
 };
 const previewSegmentRecipients = async (params) => {
-  let finalResult = [];
-  let cursor = void 0;
-  do {
-    const paramsWithCursor = {
-      ...params,
-      cursor
-    };
-    const iterationResult = await baseRequest(
-      `${BUSINESS_AUTOMATION_INTERNAL_PATH}/preview-segment-recipients`,
-      {
-        method: "POST",
-        body: JSON.stringify(paramsWithCursor)
-      }
-    );
-    finalResult = finalResult.concat(iterationResult.data.recipients);
-    cursor = iterationResult.data.pagination.cursor;
-  } while (cursor !== void 0);
+  const paramsWithLimit = {
+    ...params,
+    limit: params.limit ?? 100
+  };
+  const result = await baseRequest(
+    `${BUSINESS_AUTOMATION_INTERNAL_PATH}/preview-segment-recipients`,
+    {
+      method: "POST",
+      body: JSON.stringify(paramsWithLimit)
+    }
+  );
   return {
-    recipients: finalResult,
-    estimatedTotal: finalResult.length
+    recipients: result.data.recipients,
+    estimatedTotal: result.data.estimatedTotal,
+    pagination: result.data.pagination
   };
 };
 var JSONSchemaType = /* @__PURE__ */ ((JSONSchemaType2) => {
@@ -69340,6 +69553,7 @@ const useSegment = () => {
   return {
     // Create segment mutation
     createSegment: createMutation.mutate,
+    createSegmentAsync: createMutation.mutateAsync,
     isCreating: createMutation.isPending,
     createError: createMutation.error,
     isCreateSuccess: createMutation.isSuccess,
@@ -69409,6 +69623,55 @@ const useGetCountOfBusinessAutomationRecipients = (args) => {
     }
   };
 };
+const useGetCountOfBusinessAutomationRecipientsDebounced = (includeSegments, excludeSegments, automationId, options) => {
+  const [debouncedIncludeSegments, setDebouncedIncludeSegments] = useState(includeSegments);
+  const [debouncedExcludeSegments, setDebouncedExcludeSegments] = useState(excludeSegments);
+  const [debouncedSearch, setDebouncedSearch] = useState(options?.search || "");
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedIncludeSegments(includeSegments);
+      setDebouncedExcludeSegments(excludeSegments);
+    }, options?.debounceMs);
+    return () => clearTimeout(timer);
+  }, [includeSegments, excludeSegments, options?.debounceMs]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(options?.search || "");
+    }, 150);
+    return () => clearTimeout(timer);
+  }, [options?.search]);
+  const filter2 = options?.filter ?? "all";
+  const query = useQuery({
+    queryKey: [
+      ...automationKeys.recipients(
+        automationId,
+        debouncedIncludeSegments,
+        debouncedExcludeSegments,
+        debouncedSearch
+      ),
+      filter2,
+      options?.limit ?? 100
+    ],
+    queryFn: () => getCountOfBusinessAutomationRecipients({
+      includeSegments: debouncedIncludeSegments,
+      excludeSegments: debouncedExcludeSegments,
+      automationId,
+      search: debouncedSearch || void 0,
+      limit: options?.limit ?? 100,
+      filter: filter2
+    }),
+    enabled: (options?.enabled ?? true) && !!automationId,
+    staleTime: 0
+    // Always refetch when query key changes (including filter changes)
+  });
+  return {
+    data: query.data,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    error: query.error,
+    refetch: query.refetch
+  };
+};
 const useGetSegment = (segmentId) => {
   const segmentQuery = useQuery({
     queryKey: segmentKeys.detail(segmentId),
@@ -69437,6 +69700,27 @@ const useUpdateSegment = (segmentId) => {
   });
   return {
     updateSegment: updateSegmentMutation.mutate,
+    updateSegmentAsync: updateSegmentMutation.mutateAsync,
+    isUpdating: updateSegmentMutation.isPending,
+    updateError: updateSegmentMutation.error,
+    isUpdateSuccess: updateSegmentMutation.isSuccess
+  };
+};
+const useUpdateSegmentDynamic = () => {
+  const queryClient = useQueryClient();
+  const updateSegmentMutation = useMutation({
+    mutationFn: ({
+      segmentId,
+      params
+    }) => {
+      return updateSegment(segmentId, params);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: segmentKeys.all });
+    }
+  });
+  return {
+    updateSegmentAsync: updateSegmentMutation.mutateAsync,
     isUpdating: updateSegmentMutation.isPending,
     updateError: updateSegmentMutation.error,
     isUpdateSuccess: updateSegmentMutation.isSuccess
@@ -69476,12 +69760,19 @@ const useParseDate = () => {
 };
 const usePreviewSegmentRecipients = (type, conditions, businessId, options, existingSegmentConditions) => {
   const [debouncedConditions, setDebouncedConditions] = useState(conditions);
+  const [debouncedSearch, setDebouncedSearch] = useState(options?.search || "");
   useEffect(() => {
     const timer = setTimeout(() => {
       setDebouncedConditions(conditions);
     }, options?.debounceMs);
     return () => clearTimeout(timer);
   }, [conditions, options?.debounceMs]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(options?.search || "");
+    }, 600);
+    return () => clearTimeout(timer);
+  }, [options?.search]);
   const areConditionsValid = (conditions2, type2) => {
     if (type2 === BusinessSegmentTypeEnum.SQL) {
       return true;
@@ -69500,24 +69791,38 @@ const usePreviewSegmentRecipients = (type, conditions, businessId, options, exis
     });
     return isValid2;
   };
+  const conditionsKey = JSON.stringify(debouncedConditions);
+  const existingConditionsKey = JSON.stringify(existingSegmentConditions || []);
   const query = useQuery({
     queryKey: [
       "preview-segment-recipients",
       businessId,
-      debouncedConditions,
-      JSON.stringify(existingSegmentConditions || {})
+      type,
+      conditionsKey,
+      existingConditionsKey,
+      debouncedSearch || "",
+      options?.limit ?? 100
     ],
     queryFn: () => {
       return previewSegmentRecipients({
         businessId,
         // If the segment is a SQL segment, use the existing segment conditions
         conditions: type === BusinessSegmentTypeEnum.SQL && existingSegmentConditions ? existingSegmentConditions : debouncedConditions,
-        limit: 1e3
+        limit: options?.limit ?? 100,
+        search: debouncedSearch || void 0
       });
     },
     enabled: (options?.enabled ?? true) && areConditionsValid(debouncedConditions, type),
-    staleTime: 3e4
+    staleTime: 3e4,
     // 30 seconds
+    gcTime: 5 * 60 * 1e3,
+    // 5 minutes - keep in cache longer
+    placeholderData: keepPreviousData,
+    // Keep previous data while fetching to prevent re-renders
+    refetchOnWindowFocus: false,
+    // Don't refetch on window focus
+    refetchOnMount: false
+    // Don't refetch on mount if data exists
   });
   return {
     data: query.data,
@@ -69766,21 +70071,23 @@ const BigSelector = ({
   selected,
   disabled = false,
   hideSelectedText = false,
-  className = ""
+  className = "",
+  id: id2
 }) => {
   return /* @__PURE__ */ jsxs(
     "button",
     {
+      id: id2,
       onClick,
       className: cn$2(
         className,
-        `relative flex flex-col items-center justify-center rounded-lg border-2 p-6  transition-all duration-300 ease-in-out hover:shadow-lg ${selected ? "[border-color:hsl(var(--reach-primary))] shadow-lg" : "border-gray-200 "} ${disabled ? "opacity-50 cursor-not-allowed hover:shadow-none" : "hover:scale-[1.04] scale-[1.02]"} ${!selected && !disabled && "hover:[border-color:hsl(var(--reach-primary))] hover:bg-gray-50"}`
+        `relative flex flex-col items-center justify-center rounded-lg border-2 p-3 sm:p-4 md:p-6 transition-all duration-300 ease-in-out hover:shadow-lg min-w-0 ${selected ? "[border-color:hsl(var(--reach-primary))] shadow-lg" : "border-gray-200 "} ${disabled ? "opacity-50 cursor-not-allowed hover:shadow-none" : "hover:scale-[1.04] scale-[1.02]"} ${!selected && !disabled && "hover:[border-color:hsl(var(--reach-primary))] hover:bg-gray-50"}`
       ),
       children: [
         icon,
-        /* @__PURE__ */ jsxs("div", { className: "text-center mt-3 w-full", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-primary", children: title2 }),
-          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mt-1 line-clamp-3", children: subtitle })
+        /* @__PURE__ */ jsxs("div", { className: "text-center mt-2 md:mt-3 w-full min-w-0 px-0.5 md:px-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs sm:text-sm font-medium text-primary break-words line-clamp-2", children: title2 }),
+          /* @__PURE__ */ jsx("div", { className: "text-[10px] sm:text-xs text-muted-foreground mt-0.5 md:mt-1 line-clamp-2 break-words", children: subtitle })
         ] }),
         selected && /* @__PURE__ */ jsxs("div", { className: "absolute top-1 right-1 bg-card rounded-full px-3 py-1 flex items-center gap-1", children: [
           /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-card-foreground" }),
@@ -75512,7 +75819,7 @@ function createTextColumn({
     header: () => /* @__PURE__ */ jsx(
       "div",
       {
-        className: `flex items-center h-8 px-3 font-medium whitespace-nowrap text-muted-foreground ${meta?.align === "right" ? "justify-end float-right" : meta?.align === "center" ? "justify-center" : "justify-start"} ${headerClassName || ""}`.trim(),
+        className: `flex items-center h-8 px-2 sm:px-3 font-medium whitespace-nowrap text-muted-foreground ${meta?.align === "right" ? "justify-end float-right" : meta?.align === "center" ? "justify-center" : "justify-start"} ${headerClassName || ""}`.trim(),
         children: typeof header2 === "function" ? header2() : /* @__PURE__ */ jsx("span", { children: header2 })
       }
     ),
@@ -75552,7 +75859,7 @@ function createDateColumn({
     header: () => /* @__PURE__ */ jsx(
       "div",
       {
-        className: `float-right h-8 flex items-center justify-end px-3 font-medium whitespace-nowrap text-muted-foreground ${headerClassName || ""}`.trim(),
+        className: `float-right h-8 flex items-center justify-end px-2 sm:px-3 font-medium whitespace-nowrap text-muted-foreground ${headerClassName || ""}`.trim(),
         children: typeof header2 === "function" ? header2() : /* @__PURE__ */ jsx("span", { children: header2 })
       }
     ),
@@ -75571,7 +75878,7 @@ function createDateColumn({
       return /* @__PURE__ */ jsx(
         "div",
         {
-          className: `font-variant-numeric w-full h-8 flex items-center justify-end pr-4 whitespace-nowrap ${cellClassName || ""} ${meta?.className || ""}`.trim(),
+          className: `font-variant-numeric w-full h-8 flex items-center justify-end pr-2 sm:pr-3 md:pr-4 whitespace-nowrap ${cellClassName || ""} ${meta?.className || ""}`.trim(),
           children: formattedDate
         }
       );
@@ -75606,7 +75913,7 @@ function createNumericColumn({
     header: () => /* @__PURE__ */ jsx(
       "div",
       {
-        className: `float-right h-8 flex items-center justify-end px-3 font-medium whitespace-nowrap text-muted-foreground ${headerClassName || ""}`.trim(),
+        className: `float-right h-8 flex items-center justify-end px-2 sm:px-3 font-medium whitespace-nowrap text-muted-foreground ${headerClassName || ""}`.trim(),
         children: typeof header2 === "function" ? header2() : /* @__PURE__ */ jsx("span", { children: header2 })
       }
     ),
@@ -75615,7 +75922,7 @@ function createNumericColumn({
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: `font-variant-numeric h-8 flex items-center justify-end pr-4 ${cellClassName || ""} ${meta?.className || ""}`.trim(),
+          className: `font-variant-numeric h-8 flex items-center justify-end pr-2 sm:pr-3 md:pr-4 ${cellClassName || ""} ${meta?.className || ""}`.trim(),
           children: [
             prefix,
             value.toLocaleString(void 0, localeStringOptions),
@@ -75637,9 +75944,9 @@ function createIconActionColumn({
   header: header2,
   meta = { align: "center" },
   text: text2,
-  size: size2 = 80,
-  minSize = 80,
-  maxSize = 80,
+  size: size2 = 120,
+  minSize = 100,
+  maxSize = 200,
   enableSorting = false,
   enableHiding = false,
   headerClassName,
@@ -75653,8 +75960,8 @@ function createIconActionColumn({
     header: () => /* @__PURE__ */ jsx(
       "div",
       {
-        className: `float-right h-8 flex items-center justify-end px-3 font-medium whitespace-nowrap text-muted-foreground ${headerClassName || ""}`.trim(),
-        children: typeof header2 === "function" ? header2() : /* @__PURE__ */ jsx("span", { children: header2 })
+        className: `float-right h-8 flex items-center justify-end px-2 sm:px-3 font-medium whitespace-nowrap text-muted-foreground ${headerClassName || ""}`.trim(),
+        children: typeof header2 === "function" ? header2() : /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: header2 })
       }
     ),
     cell: (info) => {
@@ -75664,7 +75971,7 @@ function createIconActionColumn({
       return /* @__PURE__ */ jsx(
         "div",
         {
-          className: `flex items-center h-8 pr-3 ${meta?.align === "right" ? "justify-end" : meta?.align === "center" ? "justify-center" : "justify-start"} ${meta?.className || ""}`.trim(),
+          className: `flex items-center h-8 pr-2 sm:pr-3 min-w-0 ${meta?.align === "right" ? "justify-end" : meta?.align === "center" ? "justify-center" : "justify-start"} ${meta?.className || ""}`.trim(),
           children: /* @__PURE__ */ jsxs(
             Button$1,
             {
@@ -75672,9 +75979,10 @@ function createIconActionColumn({
               size: actionButtonSize,
               disabled: isDisabled,
               onClick: () => onAction(rowOriginal),
+              className: "whitespace-nowrap shrink-0",
               children: [
-                /* @__PURE__ */ jsx(IconComponent, { className: "h-4 w-4" }),
-                text2 && /* @__PURE__ */ jsx("span", { children: text2 })
+                /* @__PURE__ */ jsx(IconComponent, { className: "h-4 w-4 shrink-0" }),
+                text2 && /* @__PURE__ */ jsx("span", { className: "ml-1.5 shrink-0", children: text2 })
               ]
             }
           )
@@ -82983,9 +83291,9 @@ function createNameColumn(nameAccessor = "name", headerText, showDescription = f
     meta: {
       align: "left",
       displayName: headerText,
-      className: "min-w-[240px] w-full"
+      className: "min-w-[200px] sm:min-w-[240px] w-full"
     },
-    cellClassName: "pl-3 pr-2",
+    cellClassName: "pl-2 pr-1 sm:pl-3 sm:pr-2",
     cellFormatter: (info) => {
       const value = info.getValue();
       const { original: rowOriginal } = info.row;
@@ -83013,14 +83321,14 @@ function createNameColumn(nameAccessor = "name", headerText, showDescription = f
         [BusinessSegmentTypeEnum.ONE_OFF]: "bg-orange-500"
       };
       const dotColor = type ? typeDotStyles[type] : status ? badgeStyles[status] : "bg-blue-500";
-      return /* @__PURE__ */ jsx("div", { className: "w-full flex gap-6 justify-between items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1 items-center w-full", children: [
+      return /* @__PURE__ */ jsx("div", { className: "w-full flex gap-2 sm:gap-4 md:gap-6 justify-between items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1 items-center w-full min-w-0", children: [
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: `w-2 h-2 rounded-full mr-3 flex-shrink-0 ${dotColor}`
+            className: `w-2 h-2 rounded-full mr-1.5 sm:mr-2 md:mr-3 flex-shrink-0 ${dotColor}`
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-0.5 min-w-0", children: [
           /* @__PURE__ */ jsx("span", { className: "leading-tight font-medium text-sm overflow-hidden text-ellipsis", children: value }),
           showDescription && rowOriginal?.description && /* @__PURE__ */ jsx("div", { className: "relative h-4", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 text-muted-foreground text-xs truncate whitespace-nowrap overflow-hidden w-full", children: rowOriginal?.description }) })
         ] })
@@ -83033,15 +83341,19 @@ function createUsersColumn() {
     accessorKey: "user_count",
     header: t$2("engage:user_other"),
     enableSorting: false,
+    size: 120,
+    minSize: 100,
     headerClassName: "justify-end text-right w-full",
     meta: {
       align: "right",
       displayName: t$2("engage:user_other")
     },
-    cellClassName: "text-muted-foreground pr-4",
+    cellClassName: "text-muted-foreground pr-2 sm:pr-3 md:pr-4",
     cellFormatter: (info) => {
-      const value = info.getValue() ?? 0;
-      return `${value.toLocaleString()} ${t$2("engage:user", { count: value }).toLowerCase()}`;
+      const rawValue = info.getValue();
+      const value = typeof rawValue === "string" ? Number(rawValue) : rawValue ?? 0;
+      const numValue = isNaN(value) ? 0 : value;
+      return `${numValue.toLocaleString()} ${t$2("engage:user", { count: numValue }).toLowerCase()}`;
     }
   });
 }
@@ -83050,12 +83362,14 @@ function createTypeColumn() {
     accessorKey: "type",
     header: "Type",
     enableSorting: false,
+    size: 110,
+    minSize: 90,
     headerClassName: "justify-end text-right w-full",
     meta: {
       align: "right",
       displayName: `${t$2("engage:segment")} type`
     },
-    cellClassName: "pr-4",
+    cellClassName: "pr-2 sm:pr-3 md:pr-4",
     cellFormatter: (info) => {
       const typeFromCell = info.getValue();
       const displayText = typeFromCell ? typeFromCell === BusinessSegmentTypeEnum.SQL ? "Managed" : typeFromCell.split("_").map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(" ") : "Unknown";
@@ -83102,6 +83416,7 @@ function createModifiedColumn(dateAccessor = "updated_at") {
     header: "Last Modified",
     formatType: "relative",
     size: 160,
+    minSize: 120,
     enableSorting: false,
     headerClassName: "justify-end text-right w-full",
     meta: {
@@ -83137,7 +83452,7 @@ function createStatusColumn(args) {
     meta: {
       align: "right"
     },
-    cellClassName: "pr-4",
+    cellClassName: "pr-2 sm:pr-3 md:pr-4",
     cellFormatter: (info) => {
       const { original: rowOriginal } = info.row;
       const statusValue = rowOriginal.status ?? null;
@@ -83183,7 +83498,7 @@ function createBroadcastActionColumn(args) {
     meta: {
       align: "right"
     },
-    cellClassName: "pr-4",
+    cellClassName: "pr-2 sm:pr-3 md:pr-4",
     cellFormatter: (info) => {
       const { original: rowOriginal } = info.row;
       const statusValue = rowOriginal.status ?? null;
@@ -83223,7 +83538,10 @@ function createActionColumn(setSelectedSegment) {
       setSelectedSegment(row.id);
     },
     text: "Edit",
-    headerClassName: "w-full",
+    size: 140,
+    minSize: 120,
+    maxSize: 160,
+    headerClassName: "w-full whitespace-nowrap",
     enableHiding: false,
     meta: columnMeta
   });
@@ -83766,6 +84084,7 @@ const ContentBuilderStyleStep = () => {
           /* @__PURE__ */ jsx("div", { id: "wizard-ai-builder-option", className: "min-w-0 w-full h-full", children: /* @__PURE__ */ jsx(
             BigSelector,
             {
+              id: contentBuilderStyle === ContentBuilderStyleEnum.AI ? "wizard-ai-selected" : "wizard-ai-not-selected",
               onClick: () => {
                 handleContentBuilderStyleSelect(ContentBuilderStyleEnum.AI);
               },
@@ -83787,6 +84106,7 @@ const ContentBuilderStyleStep = () => {
               children: /* @__PURE__ */ jsx(
                 BigSelector,
                 {
+                  id: contentBuilderStyle === ContentBuilderStyleEnum.MANUAL ? "wizard-manual-selected" : "wizard-manual-not-selected",
                   onClick: () => {
                     handleContentBuilderStyleSelect(ContentBuilderStyleEnum.MANUAL);
                   },
@@ -104054,7 +104374,7 @@ const StripoWrapper = ({
   } = useStripoEditorData();
   const { updateCommunicationGroup: updateCommunicationGroup2 } = useUpdateCommunicationGroup();
   const checkEditorReady = useCallback(() => {
-    const isReady = !!(window.StripoEditorApi?.actionsApi && typeof window.StripoEditorApi.actionsApi.save === "function" && typeof window.StripoEditorApi.actionsApi.compileEmail === "function");
+    const isReady = !!(window.StripoEditorApi?.actionsApi && typeof window.StripoEditorApi.actionsApi.save === "function" && typeof window.StripoEditorApi.actionsApi.compileEmail === "function" && typeof window.StripoEditorApi.actionsApi.getTemplateData === "function");
     if (isReady && !isEditorReady) {
       setIsEditorReady(true);
       onEditorReadyChange?.(true);
@@ -104097,21 +104417,38 @@ const StripoWrapper = ({
     }
     try {
       const saveOperation = () => new Promise((resolve, reject) => {
+        let templateData = null;
+        let compiledHtml = null;
+        let saveCompleted = false;
+        const checkAndUpdate = async () => {
+          if (templateData && compiledHtml && saveCompleted) {
+            try {
+              await updateCommunicationGroup2({
+                groupId: template.communicationGroupId,
+                params: {
+                  emailHtmlBody: templateData.html,
+                  emailCss: templateData.css,
+                  emailCompiledHtml: compiledHtml
+                }
+              });
+              setStripoEmailCompiled(true);
+              resolve();
+            } catch (err) {
+              reject(err);
+            }
+          }
+        };
+        const getTemplateDataCallback = function(data) {
+          templateData = data;
+          checkAndUpdate();
+        };
         const compileEmailCallback = async function(error2, html) {
           if (error2) {
             reject(new Error(`Compile failed: ${error2}`));
             return;
           }
-          try {
-            updateCommunicationGroup2({
-              groupId: template.communicationGroupId,
-              params: { emailCompiledHtml: html }
-            });
-          } catch (err) {
-            reject(err);
-          }
-          setStripoEmailCompiled(true);
-          resolve();
+          compiledHtml = html;
+          await checkAndUpdate();
         };
         const saveCallback = function(error2) {
           if (error2) {
@@ -104119,7 +104456,12 @@ const StripoWrapper = ({
             return;
           }
           setStripoEmailSaved(true);
+          saveCompleted = true;
+          checkAndUpdate();
         };
+        window.StripoEditorApi.actionsApi.getTemplateData(
+          getTemplateDataCallback
+        );
         window.StripoEditorApi.actionsApi.compileEmail({
           callback: compileEmailCallback,
           minimize: true,
@@ -104703,8 +105045,8 @@ const EditEmailContent = () => {
       children: [
         /* @__PURE__ */ jsx(TitleAndResetButton, { title: "Email Content", type: ChannelType.EMAIL }),
         /* @__PURE__ */ jsx("div", { id: "wizard-email-settings-form", children: /* @__PURE__ */ jsx(EmailSettingsForm, { ...emailSettingsFormProps }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-h-0", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4 flex-shrink-0", children: [
             /* @__PURE__ */ jsx("h3", { className: "font-medium text-lg", children: "Preview" }),
             /* @__PURE__ */ jsx(
               Button$1,
@@ -104719,7 +105061,7 @@ const EditEmailContent = () => {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "w-full", children: memoizedEmailPreview })
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto min-h-0", children: memoizedEmailPreview })
         ] }),
         /* @__PURE__ */ jsx(
           StripoDialog,
@@ -107695,7 +108037,8 @@ const SendPreviewPopup = ({ automation: automation2, type, setOpenSendPreviewPop
   const [finishedLoading, setFinishedLoading] = useState(false);
   const [selectedPreviewAsRecipientId, setSelectedPreviewAsRecipientId] = useState("");
   const [allUsersForDropdown, setAllUsersForDropdown] = useState();
-  const [isLoadingUsers, setIsLoadingUsers] = useState(true);
+  const [isLoadingUsers, setIsLoadingUsers] = useState(false);
+  const [hasAttemptedFetch, setHasAttemptedFetch] = useState(false);
   const { sendTestCommunication: sendTestCommunication2, sendError, isSendSuccess } = useSendTestCommunication();
   const { toast: toast2 } = useToast();
   const { segments } = useListSegments();
@@ -107704,40 +108047,43 @@ const SendPreviewPopup = ({ automation: automation2, type, setOpenSendPreviewPop
   );
   const communicationGroupId = actionDataCommunication?.actionMetadata.communicationGroupId;
   const { communicationGroup, isGetting: isGettingCommunicationGroup } = useGetCommunicationGroup(communicationGroupId ?? void 0);
-  useEffect(() => {
-    const fetchAllUsers = async () => {
-      if (!segments) {
-        setIsLoadingUsers(false);
-        return;
-      }
-      if (allUsersForDropdown?.recipients) {
-        setIsLoadingUsers(false);
-        return;
-      }
+  const fetchUsersIfNeeded = React__default.useCallback(async () => {
+    if (hasAttemptedFetch || allUsersForDropdown?.recipients || !segments) {
+      return;
+    }
+    setHasAttemptedFetch(true);
+    setIsLoadingUsers(true);
+    try {
       const allUsersSegment = segments.find(
         (segment2) => segment2.type === BusinessSegmentTypeEnum.ALL_USERS
       );
       if (allUsersSegment) {
-        setIsLoadingUsers(true);
-        try {
-          const allUsersResponse = await getCountOfBusinessAutomationRecipients(
-            {
-              includeSegments: [allUsersSegment.id],
-              excludeSegments: []
-            }
-          );
-          setAllUsersForDropdown(allUsersResponse);
-        } catch (error22) {
-          console.error("Error fetching all users for dropdown:", error22);
-        } finally {
-          setIsLoadingUsers(false);
-        }
-      } else {
-        setIsLoadingUsers(false);
+        const allUsersResponse = await getCountOfBusinessAutomationRecipients({
+          includeSegments: [allUsersSegment.id],
+          excludeSegments: []
+        });
+        setAllUsersForDropdown(allUsersResponse);
       }
-    };
-    fetchAllUsers();
-  }, [segments, allUsersForDropdown?.recipients]);
+    } catch (error22) {
+      console.error("Error fetching users for dropdown:", error22);
+    } finally {
+      setIsLoadingUsers(false);
+    }
+  }, [hasAttemptedFetch, allUsersForDropdown?.recipients, segments]);
+  useEffect(() => {
+    if (!allUsersForDropdown?.recipients && segments && !isLoadingUsers && open) {
+      const timer = setTimeout(() => {
+        fetchUsersIfNeeded();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [
+    allUsersForDropdown?.recipients,
+    segments,
+    isLoadingUsers,
+    open,
+    fetchUsersIfNeeded
+  ]);
   const filteredRecipients = React__default.useMemo(() => {
     return [...allUsersForDropdown?.recipients ?? []].filter((recipient2) => {
       if (!recipient2.firstName || !recipient2.lastName) return false;
@@ -109245,22 +109591,27 @@ const RecipientsTable = ({
   filter: filter2 = "all",
   audienceMode,
   isSegmentBuilder = false,
-  isLoading = false
+  isLoading = false,
+  totalCount,
+  searchQuery = "",
+  onSearchChange,
+  onLoadMore,
+  hasMore = false,
+  isLoadingMore = false
 }) => {
   const [isSearchOpen, setIsSearchOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
   const [maxHeight, setMaxHeight] = useState(void 0);
   const [displayedCount, setDisplayedCount] = useState(50);
-  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [isLoadingMoreLocal, setIsLoadingMoreLocal] = useState(false);
   const containerRef = useRef(null);
   const scrollContainerRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const isLoadingMoreRef = useRef(false);
+  const isLoadingMoreState = onLoadMore ? isLoadingMore : isLoadingMoreLocal;
   const filteredRecipients = useMemo(() => {
     return recipients?.filter((recipient) => {
       const hasEmail = !!recipient.email;
       const hasPhone = !!recipient.phone;
-      if (!hasEmail && !hasPhone) {
-        return false;
-      }
       switch (filter2) {
         case "email":
           return hasEmail;
@@ -109272,42 +109623,55 @@ const RecipientsTable = ({
       }
     });
   }, [recipients, filter2]);
-  const searchFilteredRecipients = useMemo(() => {
-    if (!searchQuery.trim()) return filteredRecipients;
-    const query = searchQuery.toLowerCase();
-    return filteredRecipients?.filter((recipient) => {
-      const displayName = getDisplayName(
-        recipient,
-        `Unnamed ${t$2("engage:user")}`
-      ).toLowerCase();
-      const email = recipient.email?.toLowerCase() || "";
-      const phone = recipient.phone || "";
-      return displayName.includes(query) || email.includes(query) || phone.includes(query);
-    });
-  }, [filteredRecipients, searchQuery]);
   const displayedRecipients = useMemo(() => {
-    return searchFilteredRecipients?.slice(0, displayedCount) || [];
-  }, [searchFilteredRecipients, displayedCount]);
-  const hasMore = (searchFilteredRecipients?.length || 0) > displayedCount;
+    if (onLoadMore) {
+      return filteredRecipients || [];
+    } else {
+      return filteredRecipients?.slice(0, displayedCount) || [];
+    }
+  }, [filteredRecipients, displayedCount, onLoadMore]);
+  const hasMoreItems = onLoadMore ? hasMore : (filteredRecipients?.length || 0) > displayedCount;
   const loadMore = useCallback(() => {
-    if (isLoadingMore || !hasMore) return;
-    setIsLoadingMore(true);
-    setTimeout(() => {
-      setDisplayedCount(
-        (prev) => Math.min(prev + ITEMS_PER_LOAD, searchFilteredRecipients?.length || 0)
-      );
-      setIsLoadingMore(false);
-    }, 300);
-  }, [isLoadingMore, hasMore, searchFilteredRecipients?.length]);
+    if (isLoadingMoreRef.current) return;
+    if (onLoadMore) {
+      if (!isLoadingMoreState && hasMore && !isLoadingMoreRef.current) {
+        isLoadingMoreRef.current = true;
+        onLoadMore();
+        setTimeout(() => {
+          isLoadingMoreRef.current = false;
+        }, 1e3);
+      }
+    } else {
+      if (isLoadingMoreLocal || !hasMoreItems || isLoadingMoreRef.current)
+        return;
+      isLoadingMoreRef.current = true;
+      setIsLoadingMoreLocal(true);
+      setTimeout(() => {
+        setDisplayedCount(
+          (prev) => Math.min(prev + ITEMS_PER_LOAD, filteredRecipients?.length || 0)
+        );
+        setIsLoadingMoreLocal(false);
+        isLoadingMoreRef.current = false;
+      }, 300);
+    }
+  }, [
+    onLoadMore,
+    isLoadingMoreState,
+    isLoadingMoreLocal,
+    hasMore,
+    hasMoreItems,
+    filteredRecipients?.length
+  ]);
   const handleScroll2 = useCallback(() => {
     const container2 = scrollContainerRef.current;
-    if (!container2 || isLoadingMore || !hasMore) return;
+    if (!container2 || isLoadingMoreState || !hasMoreItems || isLoadingMoreRef.current)
+      return;
     const { scrollTop, scrollHeight, clientHeight } = container2;
     const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
-    if (scrollPercentage > 0.8) {
+    if (scrollPercentage > 0.9) {
       loadMore();
     }
-  }, [loadMore, isLoadingMore, hasMore]);
+  }, [loadMore, isLoadingMoreState, hasMoreItems]);
   useEffect(() => {
     if (!isSegmentBuilder || !containerRef.current) return;
     const calculateHeight = () => {
@@ -109330,6 +109694,16 @@ const RecipientsTable = ({
   useEffect(() => {
     setDisplayedCount(50);
   }, [searchQuery, filter2]);
+  useEffect(() => {
+    if (isSearchOpen && searchInputRef.current && document.activeElement !== searchInputRef.current) {
+      const timeout = setTimeout(() => {
+        if (searchInputRef.current && document.activeElement !== searchInputRef.current) {
+          searchInputRef.current.focus();
+        }
+      }, 0);
+      return () => clearTimeout(timeout);
+    }
+  }, [isSearchOpen, recipients.length, searchQuery]);
   useEffect(() => {
     const container2 = scrollContainerRef.current;
     if (!container2) return;
@@ -109358,7 +109732,19 @@ const RecipientsTable = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx(AnimatePresence, { children: isSearchOpen && /* @__PURE__ */ jsx(
+        searchQuery.trim() && filteredRecipients.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 px-3 py-2 bg-blue-50/50 border-b border-blue-100/50", children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-blue-700", children: [
+          'Showing all users matching "',
+          searchQuery,
+          '"'
+        ] }) }) : totalCount !== void 0 && totalCount > filteredRecipients.length && filteredRecipients.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 px-3 py-2 bg-blue-50/50 border-b border-blue-100/50", children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-blue-700", children: [
+          "Showing first ",
+          filteredRecipients.length.toLocaleString(),
+          " of",
+          " ",
+          totalCount.toLocaleString(),
+          " recipients. Use search to find specific recipients."
+        ] }) }),
+        /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isSearchOpen && /* @__PURE__ */ jsxs(
           motion.div,
           {
             initial: { opacity: 0, height: 0 },
@@ -109366,32 +109752,37 @@ const RecipientsTable = ({
             exit: { opacity: 0, height: 0 },
             transition: { duration: 0.2 },
             className: "flex-shrink-0 bg-white/80 backdrop-blur-sm border-b border-gray-200 px-3 py-3",
-            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(Search, { className: "w-4 h-4 text-gray-500 flex-shrink-0" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "text",
-                  placeholder: RECIPIENT_SEARCH_PLACEHOLDER,
-                  value: searchQuery,
-                  onChange: (e4) => setSearchQuery(e4.target.value),
-                  className: "flex-1 bg-transparent border-none outline-none text-sm placeholder:text-gray-400",
-                  autoFocus: true
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => {
-                    setIsSearchOpen(false);
-                    setSearchQuery("");
-                  },
-                  className: "p-1 rounded-md hover:bg-gray-200/50 transition-colors",
-                  children: /* @__PURE__ */ jsx(X$3, { className: "w-4 h-4 text-gray-500" })
-                }
-              )
-            ] })
-          }
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Search, { className: "w-4 h-4 text-gray-500 flex-shrink-0" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: searchInputRef,
+                    type: "text",
+                    placeholder: RECIPIENT_SEARCH_PLACEHOLDER,
+                    value: searchQuery,
+                    onChange: (e4) => onSearchChange?.(e4.target.value),
+                    className: "flex-1 bg-transparent border-none outline-none text-sm placeholder:text-gray-400",
+                    autoFocus: true
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => {
+                      setIsSearchOpen(false);
+                      onSearchChange?.("");
+                    },
+                    className: "p-1 rounded-md hover:bg-gray-200/50 transition-colors",
+                    children: /* @__PURE__ */ jsx(X$3, { className: "w-4 h-4 text-gray-500" })
+                  }
+                )
+              ] }),
+              searchQuery.trim() && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1.5 ml-6", children: "Searching across all recipients" })
+            ]
+          },
+          "search-input"
         ) }),
         /* @__PURE__ */ jsx("div", { ref: scrollContainerRef, className: "flex-1 overflow-y-auto min-h-0", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isLoading ? /* @__PURE__ */ jsx(
           motion.div,
@@ -109404,7 +109795,7 @@ const RecipientsTable = ({
             children: /* @__PURE__ */ jsx(BasicLoader, { size: "sm", textColor: "text-gray-500" })
           },
           "loading"
-        ) : !searchFilteredRecipients?.length ? /* @__PURE__ */ jsx(
+        ) : !filteredRecipients?.length ? /* @__PURE__ */ jsx(
           motion.div,
           {
             initial: { opacity: 0 },
@@ -109485,26 +109876,18 @@ const RecipientsTable = ({
                   `recipient-${index2}`
                 );
               }),
-              hasMore && /* @__PURE__ */ jsx(
+              isLoadingMoreState && displayedRecipients.length > 0 && /* @__PURE__ */ jsx(
                 motion.div,
                 {
                   initial: { opacity: 0 },
                   animate: { opacity: 1 },
+                  exit: { opacity: 0 },
                   transition: { duration: 0.2 },
-                  className: "flex justify-center py-4",
-                  children: isLoadingMore ? /* @__PURE__ */ jsx(BasicLoader, { size: "sm", textColor: "text-gray-500" }) : /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      onClick: loadMore,
-                      className: "text-sm text-gray-500 hover:text-gray-700 transition-colors px-3 py-2 rounded-md hover:bg-gray-100/50",
-                      children: [
-                        "Load more (",
-                        searchFilteredRecipients?.length - displayedCount,
-                        " ",
-                        "remaining)"
-                      ]
-                    }
-                  )
+                  className: "flex justify-center items-center py-6 border-t border-gray-200/50",
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(BasicLoader, { size: "sm", textColor: "text-gray-500" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: "Loading more recipients..." })
+                  ] })
                 }
               )
             ]
@@ -112197,16 +112580,28 @@ const SegmentBuilderContent = ({
   segmentType,
   existingSegmentConditions
 }) => {
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [limit, setLimit] = React.useState(100);
+  const conditionsKey = React.useMemo(
+    () => JSON.stringify(segment2.conditions),
+    [segment2.conditions]
+  );
+  React.useEffect(() => {
+    setLimit(100);
+  }, [searchQuery, conditionsKey]);
   const {
     data: recipientsData,
     isLoading,
+    isFetching,
     error: error2
   } = usePreviewSegmentRecipients(
     segment2.type,
     segment2.conditions,
     businessId,
     {
-      debounceMs: 500
+      debounceMs: 500,
+      search: searchQuery,
+      limit
     },
     existingSegmentConditions
   );
@@ -112217,6 +112612,16 @@ const SegmentBuilderContent = ({
     phone: recipient.phone
   })) ?? [];
   const estimatedTotal = recipientsData?.estimatedTotal ?? 0;
+  const hasMore = recipientsData?.pagination?.hasNextPage ?? false;
+  const isLoadingMoreRef = React.useRef(false);
+  const handleLoadMore = React.useCallback(() => {
+    if (isLoadingMoreRef.current || isLoading || !hasMore) return;
+    isLoadingMoreRef.current = true;
+    setLimit((prev) => prev + 100);
+    setTimeout(() => {
+      isLoadingMoreRef.current = false;
+    }, 1e3);
+  }, [isLoading, hasMore]);
   return /* @__PURE__ */ jsx(BlurDiv, { className: "flex-1 flex flex-col overflow-visible", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full gap-6 overflow-visible", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col overflow-visible", children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-6 grid grid-cols-2 gap-2", children: [
@@ -112374,7 +112779,14 @@ const SegmentBuilderContent = ({
           recipients,
           filter: "all",
           audienceMode: AutomationAudienceSelectorType.SEGMENTS,
-          isSegmentBuilder: true
+          isSegmentBuilder: true,
+          searchQuery,
+          onSearchChange: setSearchQuery,
+          totalCount: estimatedTotal,
+          onLoadMore: handleLoadMore,
+          hasMore,
+          isLoadingMore: isFetching,
+          isLoading
         }
       ) })
     ] })
@@ -113291,72 +113703,85 @@ const StatCard = ({
   isLoading,
   selected,
   onClick,
-  tooltip
+  tooltip,
+  icon: Icon2
 }) => {
   const variantStyles = {
-    default: "bg-gray-100/50 text-gray-700",
-    blue: "bg-blue-100/50 text-blue-700",
-    green: "bg-green-100/50 text-green-700"
+    default: "text-gray-700",
+    blue: "text-blue-700",
+    green: "text-green-700"
   };
-  return /* @__PURE__ */ jsxs(
+  const iconStyles = {
+    default: "text-gray-600",
+    blue: "text-blue-600",
+    green: "text-green-600"
+  };
+  return /* @__PURE__ */ jsx(
     motion.div,
     {
-      className: `rounded-md border-2 border-muted-foreground/20 px-2 pt-2 pb-3 duration-300 ease-in-out overflow-x-auto max-w-full min-w-0 ${selected ? "scale-[1.02] [border-color:hsl(var(--reach-primary))] shadow-lg" : ""} ${onClick ? "cursor-pointer hover:bg-gray-50/50 transition-colors" : ""}`,
+      className: `rounded-md border-2 border-muted-foreground/20 px-2 sm:px-3 lg:px-4 pt-3 lg:pt-4 pb-3 lg:pb-5 duration-300 ease-in-out overflow-x-auto max-w-full min-w-0 h-full flex flex-col ${selected ? "scale-[1.02] [border-color:hsl(var(--reach-primary))] shadow-lg" : ""} ${onClick ? "cursor-pointer hover:bg-gray-50/50 transition-colors" : ""}`,
       style: {
         containerType: "inline-size"
       },
       "data-card-container": true,
       onClick,
       layout: true,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 items-start w-full min-w-0", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-baseline gap-2 w-full min-w-0 @container/num h-8", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isLoading ? /* @__PURE__ */ jsx(
-            motion.div,
-            {
-              initial: { opacity: 0 },
-              animate: { opacity: 1 },
-              exit: { opacity: 0 },
-              transition: { duration: 0.2 },
-              className: "flex items-center gap-2 pl-2 h-full",
-              children: /* @__PURE__ */ jsx(BasicLoader, { size: "sm", textColor: "text-gray-500" })
-            },
-            "loading"
-          ) : /* @__PURE__ */ jsxs(
-            motion.div,
-            {
-              initial: { opacity: 0 },
-              animate: { opacity: 1 },
-              exit: { opacity: 0 },
-              transition: { duration: 0.2 },
-              className: "flex items-center gap-1 h-full",
-              children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "font-semibold pl-2 break-words max-w-full min-w-0 truncate\n                    text-xl @[250px]/card:text-2xl @[350px]/card:text-3xl @[500px]/card:text-4xl text-primary",
-                    children: value.toLocaleString()
-                  }
-                ),
-                tooltip && /* @__PURE__ */ jsx(InfoTooltip, { title: tooltip }),
-                percentage2 !== void 0 && value.toLocaleString().replace(/,/g, "").length < 5 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/50 text-sm hidden @[120px]/num:inline", children: [
-                  "(",
-                  percentage2,
-                  "%)"
-                ] })
-              ]
-            },
-            "content"
-          ) }) }),
-          /* @__PURE__ */ jsx(
-            "span",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full w-full min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5 sm:gap-2 w-full h-[2.5rem] sm:h-[2.75rem] mb-2 sm:mb-3 lg:mb-4", children: [
+          Icon2 ? /* @__PURE__ */ jsx(
+            Icon2,
             {
-              className: `px-2 sm:px-2.5 py-1 text-xs font-medium rounded-lg ${variantStyles[variant]}`,
-              children: label2
+              className: `w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0 mt-0.5 ${iconStyles[variant]}`
             }
-          )
+          ) : /* @__PURE__ */ jsx("div", { className: "w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5 flex-1 min-w-0 h-full", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `text-[10px] sm:text-xs font-medium leading-tight break-words ${variantStyles[variant]}`,
+                children: label2
+              }
+            ),
+            tooltip && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ jsx(InfoTooltip, { title: tooltip }) })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-fore hidden @[250px]/card:inline mt-1", children: value === 1 ? "contact" : "contacts" })
-      ]
+        /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-start w-full", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isLoading ? /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: { duration: 0.2 },
+            className: "flex items-center",
+            children: /* @__PURE__ */ jsx(BasicLoader, { size: "sm", textColor: "text-gray-500" })
+          },
+          "loading"
+        ) : /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: { duration: 0.2 },
+            className: "flex flex-col gap-1 w-full",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "font-semibold break-words max-w-full min-w-0\n                    text-lg sm:text-xl @[250px]:text-2xl @[350px]:text-3xl text-primary leading-none",
+                  children: value.toLocaleString()
+                }
+              ),
+              percentage2 !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/50 text-[10px] leading-none", children: [
+                "(",
+                percentage2,
+                "%)"
+              ] })
+            ]
+          },
+          "content"
+        ) }) })
+      ] })
     }
   );
 };
@@ -113367,17 +113792,44 @@ const EstimatedMatchesView = ({
   isLoading = false
 }) => {
   const stats = React__default.useMemo(() => {
-    if (!countResponse?.recipients) return { total: 0, emails: 0, phones: 0 };
-    return countResponse.recipients.reduce(
-      (acc, user2) => ({
-        total: countResponse.count,
-        emails: acc.emails + (user2.email ? 1 : 0),
-        phones: acc.phones + (user2.phone ? 1 : 0)
-      }),
-      { total: 0, emails: 0, phones: 0 }
-    );
+    if (!countResponse) return { total: 0, emails: 0, phones: 0 };
+    const total2 = countResponse.count || 0;
+    const responseWithCounts = countResponse;
+    if (responseWithCounts.emailCount !== void 0 && responseWithCounts.phoneCount !== void 0) {
+      return {
+        total: total2,
+        emails: responseWithCounts.emailCount,
+        phones: responseWithCounts.phoneCount
+      };
+    }
+    const recipientSample = countResponse.recipients || [];
+    const emails = recipientSample.filter((user2) => user2.email).length;
+    const phones = recipientSample.filter((user2) => user2.phone).length;
+    const sampleSize = recipientSample.length;
+    let estimatedEmails = 0;
+    let estimatedPhones = 0;
+    if (sampleSize > 0 && total2 > 0) {
+      const emailRatio = emails / sampleSize;
+      const phoneRatio = phones / sampleSize;
+      estimatedEmails = Math.round(total2 * emailRatio);
+      estimatedPhones = Math.round(total2 * phoneRatio);
+    } else if (total2 === 0) {
+      estimatedEmails = 0;
+      estimatedPhones = 0;
+    } else {
+      estimatedEmails = 0;
+      estimatedPhones = 0;
+    }
+    return {
+      total: total2,
+      emails: estimatedEmails,
+      phones: estimatedPhones
+    };
   }, [countResponse]);
-  const calculatePercentage = (value) => Math.round(value / (stats.total || 1) * 100);
+  const calculatePercentage = (value) => {
+    if (stats.total === 0) return 0;
+    return Math.round(value / stats.total * 100);
+  };
   const showReassuranceBanner = stats.total > Math.max(stats.emails, stats.phones);
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -113401,7 +113853,7 @@ const EstimatedMatchesView = ({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 md:mb-6 w-full gap-4 mt-3 px-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 lg:mb-6 w-full gap-3 sm:gap-4 mt-3 px-1 items-stretch", children: [
       /* @__PURE__ */ jsx(
         StatCard,
         {
@@ -113418,7 +113870,8 @@ const EstimatedMatchesView = ({
             {
               count: 2
             }
-          ).toLocaleLowerCase()} who might have opted out of email or sms.`
+          ).toLocaleLowerCase()} who might have opted out of email or sms.`,
+          icon: IconDefinitions.UsersIcon
         }
       ),
       /* @__PURE__ */ jsx(
@@ -113430,7 +113883,8 @@ const EstimatedMatchesView = ({
           variant: "blue",
           isLoading: isLoading || countResponse === void 0,
           selected: selectedFilter === "email",
-          onClick: onFilterChange ? () => onFilterChange("email") : void 0
+          onClick: onFilterChange ? () => onFilterChange("email") : void 0,
+          icon: IconDefinitions.EmailIcon
         }
       ),
       /* @__PURE__ */ jsx(
@@ -113442,7 +113896,8 @@ const EstimatedMatchesView = ({
           variant: "green",
           isLoading: isLoading || countResponse === void 0,
           selected: selectedFilter === "phone",
-          onClick: onFilterChange ? () => onFilterChange("phone") : void 0
+          onClick: onFilterChange ? () => onFilterChange("phone") : void 0,
+          icon: IconDefinitions.SmsIcon
         }
       )
     ] })
@@ -113464,11 +113919,11 @@ const AllOrSelectSegmentPicker = ({
       /* @__PURE__ */ jsx(MinorText, { children: "Filter" }),
       !canEditAudience && /* @__PURE__ */ jsx(InfoTooltip, { title: "You cannot edit the audience unless you are in draft mode" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4 p-1", children: [
-      /* @__PURE__ */ jsx("div", { id: "all-users-selector", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3 xl:gap-4 px-1", children: [
+      /* @__PURE__ */ jsx("div", { id: "all-users-selector", className: "h-full w-full", children: /* @__PURE__ */ jsx(
         BigSelector,
         {
-          className: "h-32",
+          className: "h-full w-full min-h-[6.5rem] xl:min-h-[8rem]",
           onClick: () => handleSelect(AutomationAudienceSelectorType.ALL),
           title: `All ${t$2("engage:user", { count: 2 })}`,
           subtitle: "Send to everyone",
@@ -113478,10 +113933,10 @@ const AllOrSelectSegmentPicker = ({
           hideSelectedText: true
         }
       ) }),
-      /* @__PURE__ */ jsx("div", { id: "segments-selector", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { id: "segments-selector", className: "h-full w-full", children: /* @__PURE__ */ jsx(
         BigSelector,
         {
-          className: "h-32",
+          className: "h-full w-full min-h-[6.5rem] xl:min-h-[8rem]",
           onClick: () => handleSelect(AutomationAudienceSelectorType.SEGMENTS),
           title: `Select ${t$2("engage:segment", { count: 2 })}`,
           subtitle: `Choose from ${t$2("engage:segment", { count: 2 })}`,
@@ -113491,10 +113946,10 @@ const AllOrSelectSegmentPicker = ({
           hideSelectedText: true
         }
       ) }),
-      /* @__PURE__ */ jsx("div", { id: "individual-users-selector", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { id: "individual-users-selector", className: "h-full w-full", children: /* @__PURE__ */ jsx(
         BigSelector,
         {
-          className: "h-32",
+          className: "h-full w-full min-h-[6.5rem] xl:min-h-[8rem]",
           onClick: () => handleSelect(AutomationAudienceSelectorType.INDIVIDUAL),
           title: "Select Individual",
           subtitle: `Pick ${t$2("engage:user", { count: 2 }).toLowerCase()} one by one`,
@@ -113510,45 +113965,48 @@ const AllOrSelectSegmentPicker = ({
 const SelectIndividualUsersContent = ({ selectedUserIds, onUserSelectionChange, canEditAudience = true }) => {
   const [tempSelectedUserIds, setTempSelectedUserIds] = useState(selectedUserIds);
   const [allUsersForDropdown, setAllUsersForDropdown] = useState();
-  const [isLoadingUsers, setIsLoadingUsers] = useState(true);
+  const [isLoadingUsers, setIsLoadingUsers] = useState(false);
+  const [hasAttemptedFetch, setHasAttemptedFetch] = useState(false);
   const { segments } = useListSegments();
   useEffect(() => {
     setTempSelectedUserIds(selectedUserIds);
   }, [selectedUserIds]);
-  useEffect(() => {
-    const fetchAllUsers = async () => {
-      if (!segments) {
-        setIsLoadingUsers(false);
-        return;
-      }
-      if (allUsersForDropdown?.recipients) {
-        setIsLoadingUsers(false);
-        return;
-      }
+  const fetchUsersIfNeeded = React__default.useCallback(async () => {
+    if (hasAttemptedFetch || allUsersForDropdown?.recipients || !segments) {
+      return;
+    }
+    setHasAttemptedFetch(true);
+    setIsLoadingUsers(true);
+    try {
       const allUsersSegment = segments.find(
         (segment2) => segment2.type === BusinessSegmentTypeEnum.ALL_USERS
       );
       if (allUsersSegment) {
-        setIsLoadingUsers(true);
-        try {
-          const allUsersResponse = await getCountOfBusinessAutomationRecipients(
-            {
-              includeSegments: [allUsersSegment.id],
-              excludeSegments: []
-            }
-          );
-          setAllUsersForDropdown(allUsersResponse);
-        } catch (error2) {
-          console.error("Error fetching all users for dropdown:", error2);
-        } finally {
-          setIsLoadingUsers(false);
-        }
-      } else {
-        setIsLoadingUsers(false);
+        const allUsersResponse = await getCountOfBusinessAutomationRecipients({
+          includeSegments: [allUsersSegment.id],
+          excludeSegments: []
+        });
+        setAllUsersForDropdown(allUsersResponse);
       }
-    };
-    fetchAllUsers();
-  }, [segments, allUsersForDropdown?.recipients]);
+    } catch (error2) {
+      console.error("Error fetching users for dropdown:", error2);
+    } finally {
+      setIsLoadingUsers(false);
+    }
+  }, [hasAttemptedFetch, allUsersForDropdown?.recipients, segments]);
+  useEffect(() => {
+    if (!allUsersForDropdown?.recipients && segments && !isLoadingUsers) {
+      const timer = setTimeout(() => {
+        fetchUsersIfNeeded();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [
+    allUsersForDropdown?.recipients,
+    segments,
+    isLoadingUsers,
+    fetchUsersIfNeeded
+  ]);
   const userOptions = React__default.useMemo(() => {
     if (!allUsersForDropdown?.recipients) return [];
     return allUsersForDropdown.recipients.map((recipient) => {
@@ -113784,29 +114242,127 @@ const AutomationAudienceSelectorMain = ({ title: title2 = "Preview Audience" })
   const [openCreateSegmentDialog, setOpenCreateSegmentDialog] = useState(false);
   const [initialStateSet, setInitialStateSet] = useState(false);
   const [selectedFilter, setSelectedFilter] = useState("all");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [limit, setLimit] = React__default.useState(100);
   const { segments, isLoading } = useListSegments();
   const { updateAutomation: updateAutomation2 } = useUpdateBusinessAutomation(
     automation2?.id ?? ""
   );
-  const [countResponse, setCountResponse] = useState(void 0);
-  const [isLoadingRecipients, setIsLoadingRecipients] = useState(false);
-  const [loadingTimeout, setLoadingTimeout] = useState(null);
-  const debouncedSetLoading = useCallback(
-    (loading2) => {
-      if (loadingTimeout) {
-        clearTimeout(loadingTimeout);
-      }
-      if (loading2) {
-        setIsLoadingRecipients(true);
-      } else {
-        const timeout = setTimeout(() => {
-          setIsLoadingRecipients(false);
-        }, 100);
-        setLoadingTimeout(timeout);
+  const { createSegmentAsync } = useSegment();
+  const { updateSegmentAsync } = useUpdateSegmentDynamic();
+  const countResponse = React__default.useMemo(() => {
+    if (!segments || segments.length === 0) {
+      return void 0;
+    }
+    let totalCount = 0;
+    let emailCount = 0;
+    let phoneCount = 0;
+    includedSegments.forEach((segmentId) => {
+      const segment2 = segments.find((s4) => s4.id === segmentId);
+      if (segment2) {
+        const userCount = Number(segment2.userCount) || 0;
+        const segmentWithCounts = segment2;
+        const email = Number(segmentWithCounts.emailCount) || 0;
+        const phone = Number(segmentWithCounts.phoneCount) || 0;
+        totalCount += userCount;
+        emailCount += email;
+        phoneCount += phone;
+      }
+    });
+    excludedSegments.forEach((segmentId) => {
+      const segment2 = segments.find((s4) => s4.id === segmentId);
+      if (segment2) {
+        const userCount = Number(segment2.userCount) || 0;
+        const segmentWithCounts = segment2;
+        const email = Number(segmentWithCounts.emailCount) || 0;
+        const phone = Number(segmentWithCounts.phoneCount) || 0;
+        totalCount = Math.max(0, totalCount - userCount);
+        emailCount = Math.max(0, emailCount - email);
+        phoneCount = Math.max(0, phoneCount - phone);
       }
-    },
-    [loadingTimeout]
+    });
+    return {
+      count: totalCount,
+      emailCount,
+      phoneCount,
+      recipients: []
+    };
+  }, [segments, includedSegments, excludedSegments]);
+  React__default.useEffect(() => {
+    setLimit(100);
+  }, [searchQuery, includedSegments, excludedSegments, selectedFilter]);
+  const {
+    data: recipientsData,
+    isLoading: isLoadingRecipients,
+    isFetching: isFetchingRecipients
+  } = useGetCountOfBusinessAutomationRecipientsDebounced(
+    includedSegments,
+    excludedSegments,
+    automation2?.id ?? "",
+    {
+      debounceMs: 500,
+      enabled: !!automation2?.id && initialStateSet && (includedSegments.length > 0 || excludedSegments.length > 0),
+      search: searchQuery,
+      limit,
+      filter: selectedFilter
+    }
+  );
+  const previousRecipientsRef = React__default.useRef([]);
+  const previousFilterRef = React__default.useRef(
+    selectedFilter
   );
+  const [filterChanged, setFilterChanged] = React__default.useState(false);
+  React__default.useEffect(() => {
+    if (previousFilterRef.current !== selectedFilter) {
+      setFilterChanged(true);
+      previousFilterRef.current = selectedFilter;
+    }
+  }, [selectedFilter]);
+  React__default.useEffect(() => {
+    if (recipientsData?.recipients !== void 0) {
+      previousRecipientsRef.current = recipientsData.recipients.map(
+        (recipient) => ({
+          firstName: recipient.firstName ?? "",
+          lastName: recipient.lastName ?? "",
+          email: recipient.email,
+          phone: recipient.phone
+        })
+      );
+      setFilterChanged(false);
+    }
+  }, [recipientsData?.recipients]);
+  const displayRecipients = React__default.useMemo(() => {
+    if (filterChanged) {
+      return [];
+    }
+    if (recipientsData?.recipients !== void 0) {
+      return recipientsData.recipients.map(
+        (recipient) => ({
+          firstName: recipient.firstName ?? "",
+          lastName: recipient.lastName ?? "",
+          email: recipient.email,
+          phone: recipient.phone
+        })
+      );
+    }
+    return previousRecipientsRef.current;
+  }, [recipientsData?.recipients, filterChanged]);
+  const finalCountResponse = React__default.useMemo(() => {
+    if (!countResponse) return void 0;
+    return {
+      // Always use segment-based total count
+      count: countResponse.count,
+      // Always use segment-based email and phone counts (accurate, not limited)
+      emailCount: countResponse.emailCount,
+      phoneCount: countResponse.phoneCount,
+      // Use API recipients for display (filtered by selectedFilter)
+      recipients: recipientsData?.recipients || []
+    };
+  }, [countResponse, recipientsData]);
+  const handleLoadMore = React__default.useCallback(() => {
+    if (isFetchingRecipients || isLoadingRecipients) return;
+    setLimit((prev) => prev + 100);
+  }, [isFetchingRecipients, isLoadingRecipients]);
   const allUsersSelected = includedSegments.length === 1 && excludedSegments.length === 0 && segments?.find(
     (segment2) => segment2.type === BusinessSegmentTypeEnum.ALL_USERS && segment2.id === includedSegments[0]
   ) !== void 0;
@@ -113816,7 +114372,7 @@ const AutomationAudienceSelectorMain = ({ title: title2 = "Preview Audience" })
   useEffect(() => {
     const initializeState = async () => {
       if (automation2 && !initialStateSet && isLoading === false) {
-        if (includedSegments.length === 1 && segments.find(
+        if (includedSegments.length === 1 && excludedSegments.length === 0 && segments.find(
           (segment2) => segment2.type === BusinessSegmentTypeEnum.ALL_USERS && segment2.id === includedSegments[0]
         ) !== void 0) {
           setSelectedAudience(AutomationAudienceSelectorType.ALL);
@@ -113838,17 +114394,6 @@ const AutomationAudienceSelectorMain = ({ title: title2 = "Preview Audience" })
         } else {
           setSelectedAudience(AutomationAudienceSelectorType.SEGMENTS);
         }
-        debouncedSetLoading(true);
-        getCountOfBusinessAutomationRecipients({
-          includeSegments: includedSegments,
-          excludeSegments: excludedSegments
-        }).then((response) => {
-          setCountResponse(response);
-          debouncedSetLoading(false);
-        }).catch((error2) => {
-          console.error("Error fetching recipients:", error2);
-          debouncedSetLoading(false);
-        });
         setInitialStateSet(true);
       }
     };
@@ -113862,8 +114407,7 @@ const AutomationAudienceSelectorMain = ({ title: title2 = "Preview Audience" })
     excludedSegments,
     segments,
     isLoading,
-    singleSegment,
-    debouncedSetLoading
+    singleSegment
   ]);
   const handleAudienceSelectionChange = async (value) => {
     setSelectedAudience(value);
@@ -113904,7 +114448,7 @@ const AutomationAudienceSelectorMain = ({ title: title2 = "Preview Audience" })
               setSelectedIndividualUserIds(userIds);
             }
           } else {
-            const newSegment = await createSegment({
+            const newSegment = await createSegmentAsync({
               name: segmentName,
               description: "One-off segment for individual user selection",
               type: BusinessSegmentTypeEnum.ONE_OFF,
@@ -113928,10 +114472,6 @@ const AutomationAudienceSelectorMain = ({ title: title2 = "Preview Audience" })
     } else if (value === AutomationAudienceSelectorType.SEGMENTS) {
       setIncludedSegments([]);
       setExcludedSegments([]);
-      setCountResponse({
-        count: 0,
-        recipients: []
-      });
     }
   };
   const handleAddSegment = (segmentId, type) => {
@@ -113959,24 +114499,27 @@ const AutomationAudienceSelectorMain = ({ title: title2 = "Preview Audience" })
         } catch (error2) {
         }
         if (segment2) {
-          const updatedSegment = await updateSegment(segment2.id, {
-            conditions: userIds.length > 0 ? [
-              {
-                field: "userId",
-                operator: ConditionOperatorEnumType.EQUALS,
-                value: userIds
-              }
-            ] : [
-              {
-                field: "userId",
-                operator: ConditionOperatorEnumType.EQUALS,
-                value: []
-              }
-            ]
+          const updatedSegment = await updateSegmentAsync({
+            segmentId: segment2.id,
+            params: {
+              conditions: userIds.length > 0 ? [
+                {
+                  field: "userId",
+                  operator: ConditionOperatorEnumType.EQUALS,
+                  value: userIds
+                }
+              ] : [
+                {
+                  field: "userId",
+                  operator: ConditionOperatorEnumType.EQUALS,
+                  value: []
+                }
+              ]
+            }
           });
           segment2 = updatedSegment;
         } else {
-          segment2 = await createSegment({
+          segment2 = await createSegmentAsync({
             name: segmentName,
             description: "One-off segment for individual user selection",
             type: BusinessSegmentTypeEnum.ONE_OFF,
@@ -114001,13 +114544,6 @@ const AutomationAudienceSelectorMain = ({ title: title2 = "Preview Audience" })
             excludeSegments: []
           });
           await new Promise((resolve) => setTimeout(resolve, 100));
-          debouncedSetLoading(true);
-          const countResponse2 = await getCountOfBusinessAutomationRecipients({
-            includeSegments: [segment2.id],
-            excludeSegments: []
-          });
-          setCountResponse(countResponse2);
-          debouncedSetLoading(false);
         }
       } catch (error2) {
         console.error("Error creating/updating ONE_OFF segment:", error2);
@@ -114015,120 +114551,128 @@ const AutomationAudienceSelectorMain = ({ title: title2 = "Preview Audience" })
     }
   };
   useEffect(() => {
-    if (automation2 && initialStateSet) {
-      if (selectedAudience === AutomationAudienceSelectorType.INDIVIDUAL && includedSegments.length === 0 && excludedSegments.length === 0) {
-        return;
-      }
-      if (JSON.stringify(includedSegments) !== JSON.stringify(automation2.includeSegmentIds) || JSON.stringify(excludedSegments) !== JSON.stringify(automation2.excludeSegmentIds)) {
-        updateAutomation2({
-          includeSegments: includedSegments,
-          excludeSegments: excludedSegments
-        });
-        debouncedSetLoading(true);
-        getCountOfBusinessAutomationRecipients({
-          includeSegments: includedSegments,
-          excludeSegments: excludedSegments
-        }).then((response) => {
-          setCountResponse(response);
-          debouncedSetLoading(false);
-        }).catch((error2) => {
-          console.error("Error fetching recipients:", error2);
-          debouncedSetLoading(false);
-        });
-      }
+    if (!automation2?.id || !initialStateSet) {
+      return;
+    }
+    if (selectedAudience === AutomationAudienceSelectorType.INDIVIDUAL && includedSegments.length === 0 && excludedSegments.length === 0) {
+      return;
+    }
+    const currentIncluded = [...includedSegments].sort().join(",");
+    const currentExcluded = [...excludedSegments].sort().join(",");
+    const savedIncluded = [...automation2.includeSegmentIds || []].sort().join(",");
+    const savedExcluded = [...automation2.excludeSegmentIds || []].sort().join(",");
+    if (currentIncluded !== savedIncluded || currentExcluded !== savedExcluded) {
+      updateAutomation2({
+        includeSegments: includedSegments,
+        excludeSegments: excludedSegments
+      });
     }
   }, [
     includedSegments,
     excludedSegments,
-    automation2,
+    automation2?.includeSegmentIds,
+    automation2?.excludeSegmentIds,
+    automation2?.id,
     initialStateSet,
     updateAutomation2,
-    selectedAudience,
-    debouncedSetLoading
+    selectedAudience
   ]);
   const onSegmentUpdated = (id2) => {
     if (id2) {
       setIncludedSegments((prev) => [...prev, id2]);
     }
   };
-  React__default.useEffect(() => {
-    return () => {
-      if (loadingTimeout) {
-        clearTimeout(loadingTimeout);
-      }
-    };
-  }, [loadingTimeout]);
   const canEditAudience = automation2?.status === AutomationStatus.DRAFT;
   return /* @__PURE__ */ jsxs(MainPageWrapper, { title: title2, children: [
-    isLoading || !segments || !initialStateSet ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(BasicLoader, { text: ["Fetching segments", "Finishing up"] }) }) : /* @__PURE__ */ jsxs("div", { className: "flex gap-6 w-full pb-4 px-4 min-h-0", children: [
-      /* @__PURE__ */ jsxs("div", { className: "w-1/2 min-h-0 flex flex-col gap-6", children: [
-        /* @__PURE__ */ jsx(
-          EstimatedMatchesView,
-          {
-            countResponse,
-            selectedFilter,
-            onFilterChange: setSelectedFilter,
-            isLoading: isLoadingRecipients
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          AllOrSelectSegmentPicker,
-          {
-            onSelectionChange: handleAudienceSelectionChange,
-            defaultValue: selectedAudience,
-            canEditAudience
-          }
-        ),
-        /* @__PURE__ */ jsx(AnimatePresence, { children: selectedAudience === AutomationAudienceSelectorType.SEGMENTS && /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            initial: { opacity: 0, height: 0 },
-            animate: { opacity: 1, height: "auto" },
-            exit: { opacity: 0, height: 0 },
-            transition: { duration: 0.3, ease: "easeInOut" },
-            className: "w-full",
-            children: /* @__PURE__ */ jsx(
-              SelectSegmentsContent,
+    isLoading || !segments || !initialStateSet ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(BasicLoader, { text: ["Fetching segments", "Finishing up"] }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row gap-4 md:gap-6 w-full pb-4 px-4 min-h-0", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "w-full md:w-1/2 flex flex-col gap-4 md:gap-6 overflow-y-auto",
+          style: { maxHeight: "calc(100vh - 350px)" },
+          children: [
+            /* @__PURE__ */ jsx(
+              EstimatedMatchesView,
               {
-                canEditAudience,
-                includedSegments,
-                excludedSegments,
-                handleAddSegment,
-                handleRemoveSegment,
-                setOpenCreateSegmentDialog,
-                segments,
-                defaultIsExcludeOpen: excludedSegments.length > 0
+                countResponse: finalCountResponse,
+                selectedFilter,
+                onFilterChange: setSelectedFilter,
+                isLoading
               }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ jsx(AnimatePresence, { children: selectedAudience === AutomationAudienceSelectorType.INDIVIDUAL && /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            initial: { opacity: 0, height: 0 },
-            animate: { opacity: 1, height: "auto" },
-            exit: { opacity: 0, height: 0 },
-            transition: { duration: 0.3, ease: "easeInOut" },
-            className: "w-full",
-            children: /* @__PURE__ */ jsx(
-              SelectIndividualUsersContent,
+            ),
+            /* @__PURE__ */ jsx(
+              AllOrSelectSegmentPicker,
               {
-                countResponse,
-                selectedUserIds: selectedIndividualUserIds,
-                onUserSelectionChange: handleIndividualUserSelectionChange,
+                onSelectionChange: handleAudienceSelectionChange,
+                defaultValue: selectedAudience,
                 canEditAudience
               }
-            )
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "w-1/2 min-h-0 flex flex-col", children: /* @__PURE__ */ jsx(
+            ),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: selectedAudience === AutomationAudienceSelectorType.SEGMENTS && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0, height: 0 },
+                animate: { opacity: 1, height: "auto" },
+                exit: { opacity: 0, height: 0 },
+                transition: { duration: 0.3, ease: "easeInOut" },
+                className: "w-full",
+                children: /* @__PURE__ */ jsx(
+                  SelectSegmentsContent,
+                  {
+                    canEditAudience,
+                    includedSegments,
+                    excludedSegments,
+                    handleAddSegment,
+                    handleRemoveSegment,
+                    setOpenCreateSegmentDialog,
+                    segments,
+                    defaultIsExcludeOpen: excludedSegments.length > 0
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: selectedAudience === AutomationAudienceSelectorType.INDIVIDUAL && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0, height: 0 },
+                animate: { opacity: 1, height: "auto" },
+                exit: { opacity: 0, height: 0 },
+                transition: { duration: 0.3, ease: "easeInOut" },
+                className: "w-full",
+                children: /* @__PURE__ */ jsx(
+                  SelectIndividualUsersContent,
+                  {
+                    countResponse,
+                    selectedUserIds: selectedIndividualUserIds,
+                    onUserSelectionChange: handleIndividualUserSelectionChange,
+                    canEditAudience
+                  }
+                )
+              }
+            ) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "w-full md:w-1/2 min-h-0 flex flex-col", children: /* @__PURE__ */ jsx(
         RecipientsTable,
         {
-          recipients: countResponse?.recipients || [],
+          recipients: displayRecipients,
           filter: selectedFilter,
           audienceMode: selectedAudience,
-          isLoading: isLoadingRecipients
+          isLoading: (
+            // Show loading if:
+            // 1. Initial load (no previous recipients)
+            // 2. Filter changed and we're fetching new data
+            isLoadingRecipients && previousRecipientsRef.current.length === 0 || filterChanged && isFetchingRecipients
+          ),
+          totalCount: selectedFilter === "email" ? finalCountResponse?.emailCount : selectedFilter === "phone" ? finalCountResponse?.phoneCount : finalCountResponse?.count,
+          searchQuery,
+          onSearchChange: setSearchQuery,
+          onLoadMore: handleLoadMore,
+          isLoadingMore: (
+            // Only show bottom loading indicator if filter hasn't changed (pagination)
+            isFetchingRecipients && !filterChanged
+          )
         }
       ) })
     ] }),
@@ -117176,7 +117720,12 @@ const EngageMain = () => {
       queryKey: automationKeys.list()
     });
     queryClient.prefetchQuery({
-      queryKey: segmentKeys.lists()
+      queryKey: segmentKeys.lists(),
+      queryFn: () => getSegments()
+    });
+    queryClient.prefetchQuery({
+      queryKey: segmentKeys.lists({ limit: 10 }),
+      queryFn: () => getSegments({ limit: 10 })
     });
   }, [queryClient]);
   useEffect(() => {
@@ -121139,9 +121688,21 @@ const BasicsButton = ({
 const SegmentPill = ({
   segmentName,
   segmentId,
-  onClick
+  onClick,
+  variant = "default"
 }) => {
   const isClickable = segmentId && onClick;
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "included":
+        return "bg-blue-50 border-blue-200 text-blue-700 hover:bg-blue-100 hover:border-blue-300";
+      case "excluded":
+        return "bg-red-50 border-red-200 text-red-700 hover:bg-red-100 hover:border-red-300";
+      default:
+        return "bg-white border-gray-200 text-gray-700 hover:bg-gray-50 hover:border-gray-300";
+    }
+  };
+  const baseStyles = `inline-flex items-center border rounded-md px-1.5 py-0.5 text-xs font-medium shadow-sm transition-colors ${getVariantStyles()}`;
   if (isClickable) {
     return /* @__PURE__ */ jsx(
       "button",
@@ -121149,12 +121710,12 @@ const SegmentPill = ({
         onClick: () => {
           onClick(segmentId);
         },
-        className: "inline-flex items-center bg-white border border-gray-200 rounded-md px-2 py-0.5 text-sm font-medium shadow-sm hover:bg-gray-50 hover:border-gray-300 transition-colors cursor-pointer",
+        className: `${baseStyles} cursor-pointer`,
         children: segmentName
       }
     );
   }
-  return /* @__PURE__ */ jsx("span", { className: "inline-flex items-center bg-white border border-gray-200 rounded-md px-2 py-0.5 text-sm font-medium shadow-sm", children: segmentName });
+  return /* @__PURE__ */ jsx("span", { className: baseStyles, children: segmentName });
 };
 const AutomationAudienceSelector = () => {
   const automation2 = useAutomation();
@@ -121175,6 +121736,7 @@ const AutomationAudienceSelector = () => {
     return null;
   }
   const includeSegmentIds = automation2.includeSegmentIds;
+  const excludeSegmentIds = automation2.excludeSegmentIds;
   let copyText;
   let showSegmentPills = true;
   if (singleSegment?.type === BusinessSegmentTypeEnum.ALL_USERS) {
@@ -121207,21 +121769,55 @@ const AutomationAudienceSelector = () => {
         Icon: IconDefinitions.AudienceIcon,
         children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
           /* @__PURE__ */ jsx(MinorText, { children: "Audience" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(AutomationFlowLabel, { copyText }),
-            showSegmentPills && /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: includeSegmentIds.map((id2) => {
-              const segment2 = segments?.find((segment22) => segment22.id === id2);
-              if (!segment2) return null;
-              return /* @__PURE__ */ jsx(
-                SegmentPill,
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(AutomationFlowLabel, { copyText }),
+              showSegmentPills && /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: includeSegmentIds.map((id2) => {
+                const segment2 = segments?.find(
+                  (segment22) => segment22.id === id2
+                );
+                if (!segment2) return null;
+                return /* @__PURE__ */ jsx(
+                  SegmentPill,
+                  {
+                    segmentName: segment2.name,
+                    segmentId: id2,
+                    onClick: handleSegmentClick,
+                    variant: "included"
+                  },
+                  id2
+                );
+              }) })
+            ] }),
+            excludeSegmentIds && excludeSegmentIds.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                AutomationFlowLabel,
                 {
-                  segmentName: segment2.name,
-                  segmentId: id2,
-                  onClick: handleSegmentClick
-                },
-                id2
-              );
-            }) })
+                  copyText: `Excluding ${excludeSegmentIds.length === 1 ? "this" : "these"} ${t$2(
+                    "engage:segment",
+                    {
+                      count: excludeSegmentIds.length
+                    }
+                  ).toLowerCase()}`
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: excludeSegmentIds.map((id2) => {
+                const segment2 = segments?.find(
+                  (segment22) => segment22.id === id2
+                );
+                if (!segment2) return null;
+                return /* @__PURE__ */ jsx(
+                  SegmentPill,
+                  {
+                    segmentName: segment2.name,
+                    segmentId: id2,
+                    onClick: handleSegmentClick,
+                    variant: "excluded"
+                  },
+                  id2
+                );
+              }) })
+            ] })
           ] })
         ] })
       }
@@ -122114,8 +122710,8 @@ const AutomationsEditorSidebar = ({
   hideSms
 }) => {
   const automation2 = useAutomation();
-  const { segments, isLoading } = useListSegments();
-  if (!automation2 || isLoading || segments.length === 0) {
+  const { segments } = useListSegments();
+  if (!automation2) {
     return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(
       BasicLoader,
       {
@@ -123624,6 +124220,7 @@ const ViewAutomationMain = ({
   const { updateCommunicationGroup: updateCommunicationGroup2 } = useUpdateCommunicationGroup();
   const { toast: toast2 } = useToast();
   const { channelSenders } = useChannelSender();
+  const { isLoading: isLoadingSegments } = useListSegments();
   const previousMergeFieldsRef = useRef("");
   const hasInitializedMergeFieldsRef = useRef(false);
   const hasInitializedChannelSendersRef = useRef(false);
@@ -123709,7 +124306,7 @@ const ViewAutomationMain = ({
     channelSenders,
     updateCommunicationGroup2
   ]);
-  if (!automation2 || !communicationGroup) {
+  if (!automation2 || !communicationGroup || isLoadingSegments) {
     return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(
       BasicLoader,
       {