@embedreach/components 0.3.11 → 0.3.13

package/dist/chunks/index.js

@@ -12,6 +12,7 @@ const WEBSITE_BRAND_SETTINGS_PATH = `${WEB_PRESENCE_PATH}/brand-settings`;
 const CHANNEL_SENDER_PATH = "/channel/senders";
 const CHANNEL_ACCOUNT_PATH = "/channel/accounts";
 const COMMUNICATION_GROUP_PATH = "/communication-groups";
+const PARTNER_ME_PATH = "/partners/me";
 const STRIPO_PATH = "/stripo";
 const SLACK_NOTIFICATION_PATH = "/slack-notifications";
 const TELEMETRY_PATH = "/telemetry";
@@ -2553,6 +2554,14 @@ let EventEmitter$2 = class EventEmitter {
   }
 };
 const eventEmitter = new EventEmitter$2();
+const CACHE_INFINITY = {
+  // Never mark data as stale
+  staleTime: Infinity,
+  // Never remove data from cache
+  gcTime: Infinity,
+  // No need to revalidate on window focus for permanent data
+  refetchOnWindowFocus: false
+};
 const CACHE_STANDARD = {
   // Consider data stale after 5 minutes
   staleTime: 5 * 60 * 1e3,
@@ -28808,6 +28817,40 @@ const DEFAULT_THEME_STYLES = {
   "font-body": 'Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   "font-heading": '"Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
 };
+const DEFAULT_DARK_THEME_STYLES = {
+  background: "240 6% 10%",
+  // Very dark gray
+  foreground: "0 0% 98%",
+  // Near white
+  card: "240 6% 12%",
+  "card-foreground": "0 0% 98%",
+  popover: "240 6% 12%",
+  "popover-foreground": "0 0% 98%",
+  primary: "210 30% 88%",
+  // Light slate
+  "primary-foreground": "240 6% 10%",
+  secondary: "240 4% 20%",
+  // Muted dark
+  "secondary-foreground": "0 0% 98%",
+  muted: "240 4% 16%",
+  "muted-foreground": "220 10% 65%",
+  accent: "210 15% 24%",
+  "accent-foreground": "0 0% 98%",
+  destructive: "0 62% 54%",
+  // Softer red for dark
+  "destructive-foreground": "0 0% 98%",
+  border: "240 4% 20%",
+  input: "240 4% 20%",
+  ring: "210 30% 88%",
+  "chart-1": "210 50% 70%",
+  "chart-2": "260 50% 75%",
+  "chart-3": "150 50% 65%",
+  "chart-4": "325 50% 75%",
+  "chart-5": "45 80% 75%",
+  radius: "0.625rem",
+  "font-body": 'Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  "font-heading": '"Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+};
 const normalizeColor = (color2) => {
   const div = document.createElement("div");
   div.style.color = color2;
@@ -29196,14 +29239,14 @@ const tailwindToHsl = (tailwindClass) => {
   const [r2, g2, b3] = colorMap[color2][shade];
   return rgbToShadcnHsl(r2, g2, b3);
 };
-const applyThemeStyles = (styles2) => {
+const applyThemeStyles = (styles2, darkStyles) => {
   const existingStyles = document.getElementById("reach-theme-styles");
   if (existingStyles) {
     existingStyles.remove();
   }
   const styleElement2 = document.createElement("style");
   styleElement2.id = "reach-theme-styles";
-  const cssText = `
+  let cssText = `
     [data-reach-root] {
       ${Object.entries(DEFAULT_THEME_STYLES).map(([key, defaultValue]) => {
     const userValue = styles2[key];
@@ -29245,9 +29288,61 @@ const applyThemeStyles = (styles2) => {
       font-family: var(--reach-font-heading);
     }
   `;
+  if (darkStyles) {
+    cssText += `
+      .dark [data-reach-root] {
+        ${Object.entries(DEFAULT_DARK_THEME_STYLES).map(([key, defaultValue]) => {
+      const userValue = darkStyles[key];
+      let finalValue = defaultValue;
+      if (userValue !== void 0) {
+        if (key === "radius" || key === "font-body" || key === "font-heading") {
+          finalValue = userValue;
+        } else if (isValidColor(userValue)) {
+          const isTailwindClass = /^bg-/.test(userValue.trim()) && userValue.trim() !== "bg-inherit" && userValue.trim() !== "bg-current" && userValue.trim() !== "bg-transparent";
+          if (isTailwindClass) {
+            const className = userValue.replace(/['"]/g, "").trim();
+            finalValue = tailwindToHsl(className);
+          } else {
+            try {
+              finalValue = toShadcnFormat(userValue);
+            } catch (e4) {
+              console.warn(
+                `Failed to convert dark color for ${key}, using default`
+              );
+            }
+          }
+        }
+      }
+      return `--reach-${key}: ${finalValue};`;
+    }).join("\n")}
+      }
+
+      .dark [data-reach-root] {
+        font-family: var(--reach-font-body);
+      }
+      .dark [data-reach-root] h1,
+      .dark [data-reach-root] h2,
+      .dark [data-reach-root] h3,
+      .dark [data-reach-root] h4,
+      .dark [data-reach-root] h5,
+      .dark [data-reach-root] h6 {
+        font-family: var(--reach-font-heading);
+      }
+    `;
+  }
   styleElement2.textContent = cssText;
   document.head.appendChild(styleElement2);
 };
+const mergeThemeStyles = ({
+  partnerThemeConfig,
+  userOverrides
+} = {}) => {
+  return {
+    ...DEFAULT_THEME_STYLES,
+    ...partnerThemeConfig?.styles || {},
+    ...userOverrides || {}
+  };
+};
 const themeReducer = (state, action) => {
   switch (action.type) {
     case "set_theme":
@@ -29288,18 +29383,59 @@ const { Context: Context$3, Provider: BaseProvider } = createDataContext(
     error: null
   }
 );
+const getPartner = async () => {
+  const response = await baseRequest(PARTNER_ME_PATH);
+  return response.data;
+};
+const partnerQueryKey = ["partner"];
+const usePartner = () => {
+  const query = useQuery({
+    queryKey: partnerQueryKey,
+    queryFn: getPartner,
+    ...CACHE_INFINITY
+  });
+  return query;
+};
 const ThemeInitializer = ({ initialTheme, children }) => {
   const { setTheme: setTheme2, setLoading: setLoading2 } = React__default.useContext(Context$3);
+  const { data: partnerData, isLoading: isPartnerLoading } = usePartner();
   const themeApplied = useRef(false);
   useEffect(() => {
-    if (initialTheme && !themeApplied.current) {
-      applyThemeStyles(initialTheme.styles);
-      setTheme2(initialTheme);
+    if (isPartnerLoading) {
+      return;
+    }
+    if (!themeApplied.current) {
+      const mergedStyles = mergeThemeStyles({
+        partnerThemeConfig: partnerData?.theme_config,
+        userOverrides: initialTheme?.styles
+      });
+      let mergedDarkStyles = void 0;
+      const darkMode = partnerData?.theme_config?.darkMode || initialTheme?.darkMode;
+      if (darkMode) {
+        mergedDarkStyles = mergeThemeStyles({
+          partnerThemeConfig: {
+            styles: {
+              ...DEFAULT_DARK_THEME_STYLES,
+              ...partnerData?.theme_config?.styles || {}
+            }
+          },
+          userOverrides: initialTheme?.styles
+        });
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+      applyThemeStyles(mergedStyles, mergedDarkStyles);
+      const finalTheme = {
+        styles: mergedStyles,
+        darkMode
+      };
+      setTheme2(finalTheme);
       themeApplied.current = true;
     } else {
       setLoading2(false);
     }
-  }, [initialTheme, setTheme2, setLoading2]);
+  }, [initialTheme, partnerData, isPartnerLoading, setTheme2, setLoading2]);
   return /* @__PURE__ */ jsx(Fragment$1, { children });
 };
 const Provider$4 = ({ initialTheme, children }) => {
@@ -32157,6 +32293,8 @@ const measure$1 = {
       missing_website_tracking_banner_title: "Metrics are being processed",
       missing_website_tracking_banner_description: "We're preparing your dashboard and calculating your metrics. To see accurate campaign performance, please ensure tracking is set up on your website. This could take a few hours to a few days to complete but your data will be available soon.",
       missing_website_tracking_banner_action: "Setup Tracking On My Website",
+      update_meta_ads_tracking_banner_title: "Update Your Meta Ads Tracking Parameters",
+      update_meta_ads_tracking_banner_description: "Some of your Meta ads are missing our required tracking parameters for proper attribution. Please update them as soon as possible to ensure accurate attribution.",
       reach_managed_campaign_banner_title: "Campaign Data Processing",
       reach_managed_campaign_banner_description: "Your latest ad campaign data is currently being processed and will be available soon."
     },
@@ -32703,6 +32841,8 @@ const measure = {
       missing_website_tracking_banner_title: "Métricas están siendo procesadas",
       missing_website_tracking_banner_description: "Estamos preparando tu panel y calculando tus métricas. Para ver el rendimiento de tus campañas de manera precisa, por favor asegúrate de que el seguimiento esté configurado en tu sitio web. Esto puede tomar unas horas o unos días para completarse, pero tus datos estarán disponibles pronto.",
       missing_website_tracking_banner_action: "Configurar seguimiento en mi sitio web",
+      update_meta_ads_tracking_banner_title: "Actualizar parámetros de seguimiento de anuncios de Meta",
+      update_meta_ads_tracking_banner_description: "Algunos de tus anuncios de Meta están faltando nuestros parámetros de seguimiento requeridos para una atribución precisa. Por favor, actualízalos lo antes posible para garantizar una atribución precisa.",
       reach_managed_campaign_banner_title: "Datos de campaña procesando",
       reach_managed_campaign_banner_description: "Tus datos de campaña de anuncios están siendo procesados y estarán disponibles pronto."
     },
@@ -33314,6 +33454,8 @@ const defaultTranslations = {
           missing_website_tracking_banner_title: "Metrics are being processed",
           missing_website_tracking_banner_description: "We're preparing your dashboard and calculating your metrics. To see accurate campaign performance, please ensure tracking is set up on your website. This could take a few hours to a few days to complete but your data will be available soon.",
           missing_website_tracking_banner_action: "Setup Tracking On My Website",
+          update_meta_ads_tracking_banner_title: "Update Your Meta Ads Tracking Parameters",
+          update_meta_ads_tracking_banner_description: "Some of your Meta ads are missing our required tracking parameters for proper attribution. Please update them as soon as possible to ensure accurate attribution.",
           reach_managed_campaign_banner_title: "Campaign Data Processing",
           reach_managed_campaign_banner_description: "Your latest ad campaign data is currently being processed and will be available soon."
         },
@@ -48989,20 +49131,29 @@ const useValidationStats = () => {
   const { state } = useViewAutomationContext();
   return state.recipientStats;
 };
-const useRecipientStatsTracking = (automation2) => {
-  const { setRecipientStats: setRecipientStats2 } = useViewAutomationContext();
+const useRecipientStatsTracking = (existingAutomation) => {
+  const { setRecipientStats: setRecipientStats2, state } = useViewAutomationContext();
+  const automation2 = state.automation || existingAutomation;
   const { estimatedMatchesStats } = useRecipientStats$1(automation2);
   useEffect(() => {
     if (estimatedMatchesStats) {
       setRecipientStats2(estimatedMatchesStats);
     }
-  }, [estimatedMatchesStats, setRecipientStats2]);
+  }, [estimatedMatchesStats, setRecipientStats2, automation2]);
 };
 const ViewAutomationProvider = ({
   automationId,
+  existingAutomation,
   children
 }) => {
-  return /* @__PURE__ */ jsx(Provider$2, { children: /* @__PURE__ */ jsx(ViewAutomationContent$1, { automationId, children }) });
+  return /* @__PURE__ */ jsx(Provider$2, { children: /* @__PURE__ */ jsx(
+    ViewAutomationContent$1,
+    {
+      automationId,
+      existingAutomation,
+      children
+    }
+  ) });
 };
 const ViewAutomationContent$1 = ({ automationId, existingAutomation, children }) => {
   useAutomationFetching(automationId);
@@ -91447,7 +91598,7 @@ const getEmailChannelSendersWithChannelAccounts = (args) => {
       (account) => account.id === sender.channelAccountId
     );
     if (!channelAccount) return [];
-    if (channelAccount.channelAccountMetadata.type === ChannelAccountTypeEnum.REACH_MANAGED) {
+    if (channelAccount.channelAccountMetadata.type === ChannelAccountTypeEnum.REACH_MANAGED || channelAccount.channelAccountMetadata.type === ChannelAccountTypeEnum.REACH_MANAGED_SES) {
       return [
         {
           channelSenderId: sender.id,
@@ -106785,7 +106936,7 @@ const getAutomationSteps = ({
   ];
 };
 const useRecipientStats = (automation2) => {
-  const { data: estimatedMatches } = useGetCountOfBusinessAutomationRecipients({
+  const { data: estimatedMatches, isLoading } = useGetCountOfBusinessAutomationRecipients({
     automationId: automation2?.id ?? "",
     includeSegments: automation2?.includeSegmentIds ?? [],
     excludeSegments: automation2?.excludeSegmentIds ?? []
@@ -106802,7 +106953,8 @@ const useRecipientStats = (automation2) => {
   }, [estimatedMatches?.recipients]);
   return {
     estimatedMatches,
-    estimatedMatchesStats
+    estimatedMatchesStats,
+    isLoading
   };
 };
 const DEFAULT_LOGO_URL = "https://assets.embedreach.com/defaults/logo-placeholder-128.png";
@@ -107012,7 +107164,7 @@ const OneTimeWizardMain = ({ onFinish, getExtraMergeFields, onBeforeSchedule })
   const { updateAutomation: updateAutomation2 } = useUpdateBusinessAutomation(
     automation2?.id || ""
   );
-  const { estimatedMatchesStats } = useRecipientStats(automation2 ?? void 0);
+  const { estimatedMatchesStats, isLoading: isLoadingRecipientStats } = useRecipientStats(automation2 ?? void 0);
   const {
     state: { selectedChannels }
   } = useContext(Context);
@@ -107101,6 +107253,11 @@ const OneTimeWizardMain = ({ onFinish, getExtraMergeFields, onBeforeSchedule })
     }
     if (onBeforeSchedule) {
       try {
+        let attempts = 0;
+        while (isLoadingRecipientStats && attempts < 10) {
+          await new Promise((resolve) => setTimeout(resolve, 250));
+          attempts++;
+        }
         const result = await onBeforeSchedule({
           estimatedEmailRecipients: estimatedMatchesStats?.emails || 0,
           estimatedSmsRecipients: estimatedMatchesStats?.phones || 0
@@ -107597,7 +107754,8 @@ function CreateAutomationDialog({
   replyToSettingsText,
   replyToSettingsLink,
   fromNameSettingsText,
-  fromNameSettingsLink
+  fromNameSettingsLink,
+  onBeforeSchedule
 }) {
   const onCloseInner = (createdAutomation) => {
     onClose?.(createdAutomation);
@@ -107637,7 +107795,8 @@ function CreateAutomationDialog({
                 automationType,
                 currentStep,
                 setCurrentStep,
-                getExtraMergeFields
+                getExtraMergeFields,
+                onBeforeSchedule
               }
             )
           ]

package/dist/chunks/sandbox-loading-screen.js

@@ -22811,7 +22811,19 @@ const handlers = [
       message: "Success (Sandbox)",
       data: null
     });
-  })
+  }),
+  http.get(
+    `${HOSTNAME}/api/ad-platform-tracking/meta/check-for-existing?ad_account_id=sandbox-m-act-789`,
+    async () => {
+      return HttpResponse.json({
+        success: true,
+        message: "Success (Sandbox)",
+        data: {
+          ads_with_tracking: []
+        }
+      });
+    }
+  )
 ];
 const worker = setupWorker(...handlers);
 const MAX_RETRIES = 3;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { default as default_2 } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { ThemeConfig } from '@reach/shared-types/theme';
 
 export declare enum AutomationTriggerType {
     ONE_TIME = "one_time",
@@ -7,7 +8,7 @@ export declare enum AutomationTriggerType {
     DATE_BASED = "date_based"
 }
 
-export declare function CreateAutomationDialog({ open, setOpen, onClose, automationType, getExtraMergeFields, replyToSettingsText, replyToSettingsLink, fromNameSettingsText, fromNameSettingsLink, }: CreateAutomationDialogProps): JSX_2.Element;
+export declare function CreateAutomationDialog({ open, setOpen, onClose, automationType, getExtraMergeFields, replyToSettingsText, replyToSettingsLink, fromNameSettingsText, fromNameSettingsLink, onBeforeSchedule, }: CreateAutomationDialogProps): JSX_2.Element;
 
 declare interface CreateAutomationDialogProps extends CreateAutomationModalProps {
     /**
@@ -247,53 +248,7 @@ declare type StaticMergeField = ReachMergeFieldBase & {
     templateName: string;
 };
 
-/**
- * Theme initialization options that can be passed to ReachProvider
- */
-export declare interface ThemeConfig {
-    /** Optional overrides for theme styles */
-    styles: Partial<ThemeStyles>;
-    /** Dark mode toggle */
-    darkMode?: boolean;
-}
-
-/**
- * Theme styles incorporating shadcn variables
- *
- * Matches what we say in our dev docs here:
- * https://docs.embedreach.com/sdk/customization
- *
- * @interface ThemeStyles
- */
-declare interface ThemeStyles {
-    background?: string;
-    foreground?: string;
-    card?: string;
-    'card-foreground'?: string;
-    popover?: string;
-    'popover-foreground'?: string;
-    primary?: string;
-    'primary-foreground'?: string;
-    secondary?: string;
-    'secondary-foreground'?: string;
-    muted?: string;
-    'muted-foreground'?: string;
-    accent?: string;
-    'accent-foreground'?: string;
-    destructive?: string;
-    'destructive-foreground'?: string;
-    border?: string;
-    input?: string;
-    ring?: string;
-    'chart-1'?: string;
-    'chart-2'?: string;
-    'chart-3'?: string;
-    'chart-4'?: string;
-    'chart-5'?: string;
-    radius?: string;
-    'font-body'?: string;
-    'font-heading'?: string;
-}
+export { ThemeConfig }
 
 export declare const ViewAutomationModal: default_2.FC<ViewAutomationProps & {
     inRouter?: boolean;