@sudobility/building_blocks 0.0.21 → 0.0.23

package/dist/index.js

@@ -505,9 +505,31 @@ const AppFooter = ({
   LinkComponent = DefaultLinkComponent$1,
   sticky = true,
   isNetworkOnline = true,
-  className
+  className,
+  onTrack
 }) => {
   const year = copyrightYear || getCopyrightYear$1();
+  const track = useCallback(
+    (label, params) => {
+      onTrack == null ? void 0 : onTrack({
+        eventType: "link_click",
+        componentName: "AppFooter",
+        label,
+        params
+      });
+    },
+    [onTrack]
+  );
+  const createTrackedLinkHandler = useCallback(
+    (linkLabel, linkHref, originalOnClick) => (e) => {
+      track("footer_link_clicked", {
+        link_label: linkLabel,
+        link_href: linkHref
+      });
+      originalOnClick == null ? void 0 : originalOnClick(e);
+    },
+    [track]
+  );
   const companyLink = companyUrl ? /* @__PURE__ */ jsx(
     LinkComponent,
     {
@@ -549,7 +571,11 @@ const AppFooter = ({
         /* @__PURE__ */ jsx(FooterCompactRight, { children: links.map((link, index) => /* @__PURE__ */ jsx(React.Fragment, { children: link.onClick ? /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: link.onClick,
+            onClick: createTrackedLinkHandler(
+              link.label,
+              link.href,
+              link.onClick
+            ),
             className: "text-gray-400 hover:text-white transition-colors",
             children: link.label
           }
@@ -557,6 +583,7 @@ const AppFooter = ({
           LinkComponent,
           {
             href: link.href,
+            onClick: createTrackedLinkHandler(link.label, link.href),
             className: "text-gray-400 hover:text-white transition-colors",
             children: link.label
           }
@@ -610,10 +637,33 @@ const AppFooterForHomePage = ({
   LinkComponent = DefaultLinkComponent,
   isNetworkOnline = true,
   className,
-  gridColumns
+  gridColumns,
+  onTrack
 }) => {
   const year = copyrightYear || getCopyrightYear();
   const gridClass = getGridColumnsClass(linkSections.length, gridColumns);
+  const track = useCallback(
+    (label, params) => {
+      onTrack == null ? void 0 : onTrack({
+        eventType: "link_click",
+        componentName: "AppFooterForHomePage",
+        label,
+        params
+      });
+    },
+    [onTrack]
+  );
+  const createTrackedLinkHandler = useCallback(
+    (linkLabel, linkHref, sectionTitle, originalOnClick) => (e) => {
+      track("footer_link_clicked", {
+        link_label: linkLabel,
+        link_href: linkHref,
+        section_title: sectionTitle
+      });
+      originalOnClick == null ? void 0 : originalOnClick(e);
+    },
+    [track]
+  );
   const companyLink = companyUrl ? /* @__PURE__ */ jsx(
     LinkComponent,
     {
@@ -627,7 +677,30 @@ const AppFooterForHomePage = ({
       FooterLinkSection,
       {
         title: section.title,
-        children: section.links.map((link, linkIndex) => /* @__PURE__ */ jsx(FooterLink, { children: link.onClick ? /* @__PURE__ */ jsx("button", { onClick: link.onClick, className: "text-left", children: link.label }) : /* @__PURE__ */ jsx(LinkComponent, { href: link.href, children: link.label }) }, link.href || linkIndex))
+        children: section.links.map((link, linkIndex) => /* @__PURE__ */ jsx(FooterLink, { children: link.onClick ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: createTrackedLinkHandler(
+              link.label,
+              link.href,
+              section.title,
+              link.onClick
+            ),
+            className: "text-left",
+            children: link.label
+          }
+        ) : /* @__PURE__ */ jsx(
+          LinkComponent,
+          {
+            href: link.href,
+            onClick: createTrackedLinkHandler(
+              link.label,
+              link.href,
+              section.title
+            ),
+            children: link.label
+          }
+        ) }, link.href || linkIndex))
       },
       section.title || sectionIndex
     )) }),
@@ -895,12 +968,38 @@ const GlobalSettingsPage = ({
   t,
   appearanceT,
   className,
-  showAppearanceInfoBox = true
+  showAppearanceInfoBox = true,
+  onTrack
 }) => {
   const [selectedSection, setSelectedSection] = useState("appearance");
   const [mobileView, setMobileView] = useState(
     "navigation"
   );
+  const track = useCallback(
+    (label, params) => {
+      onTrack == null ? void 0 : onTrack({
+        eventType: "settings_change",
+        componentName: "GlobalSettingsPage",
+        label,
+        params
+      });
+    },
+    [onTrack]
+  );
+  const handleThemeChange = useCallback(
+    (newTheme) => {
+      track("theme_changed", { theme: newTheme });
+      onThemeChange(newTheme);
+    },
+    [track, onThemeChange]
+  );
+  const handleFontSizeChange = useCallback(
+    (newFontSize) => {
+      track("font_size_changed", { font_size: newFontSize });
+      onFontSizeChange(newFontSize);
+    },
+    [track, onFontSizeChange]
+  );
   const getText = useCallback(
     (key) => {
       const fallback = defaultTranslations[key];
@@ -920,8 +1019,8 @@ const GlobalSettingsPage = ({
           {
             theme,
             fontSize,
-            onThemeChange,
-            onFontSizeChange,
+            onThemeChange: handleThemeChange,
+            onFontSizeChange: handleFontSizeChange,
             t: appearanceT,
             showInfoBox: showAppearanceInfoBox
           }
@@ -934,18 +1033,20 @@ const GlobalSettingsPage = ({
       getText,
       theme,
       fontSize,
-      onThemeChange,
-      onFontSizeChange,
+      handleThemeChange,
+      handleFontSizeChange,
       appearanceT,
       showAppearanceInfoBox
     ]
   );
   const currentSection = allSections.find((s) => s.id === selectedSection) || allSections[0];
   const handleSectionSelect = (sectionId) => {
+    track("section_selected", { section_id: sectionId });
     setSelectedSection(sectionId);
     setMobileView("content");
   };
   const handleBackToNavigation = () => {
+    track("back_to_navigation");
     setMobileView("navigation");
   };
   const navigationList = /* @__PURE__ */ jsx("div", { className: "space-y-0", children: allSections.map((section) => {
@@ -4180,13 +4281,15 @@ const DEFAULT_PACKAGE_ENTITLEMENT_MAP = {
 function AppSubscriptionsPage({
   subscription,
   rateLimitsConfig,
+  subscriptionUserId,
   labels,
   formatters,
   packageEntitlementMap = DEFAULT_PACKAGE_ENTITLEMENT_MAP,
   onPurchaseSuccess,
   onRestoreSuccess,
   onError,
-  onWarning
+  onWarning,
+  onTrack
 }) {
   const {
     products,
@@ -4201,6 +4304,17 @@ function AppSubscriptionsPage({
   const [selectedPlan, setSelectedPlan] = useState(null);
   const [isPurchasing, setIsPurchasing] = useState(false);
   const [isRestoring, setIsRestoring] = useState(false);
+  const track = useCallback(
+    (label, params) => {
+      onTrack == null ? void 0 : onTrack({
+        eventType: "subscription_action",
+        componentName: "AppSubscriptionsPage",
+        label,
+        params
+      });
+    },
+    [onTrack]
+  );
   useEffect(() => {
     if (error) {
       onError == null ? void 0 : onError(labels.errorTitle, error);
@@ -4212,48 +4326,94 @@ function AppSubscriptionsPage({
     const isYearly = product.period.includes("Y") || product.period.includes("year");
     return billingPeriod === "yearly" ? isYearly : !isYearly;
   }).sort((a, b2) => parseFloat(a.price) - parseFloat(b2.price));
-  const handlePeriodChange = (period) => {
-    setBillingPeriod(period);
-    setSelectedPlan(null);
-  };
-  const handlePurchase = async () => {
+  const handlePeriodChange = useCallback(
+    (period) => {
+      setBillingPeriod(period);
+      setSelectedPlan(null);
+      track("billing_period_changed", { billing_period: period });
+    },
+    [track]
+  );
+  const handlePurchase = useCallback(async () => {
     if (!selectedPlan) return;
     setIsPurchasing(true);
     clearError();
+    track("purchase_initiated", { plan_identifier: selectedPlan });
     try {
-      const result = await purchase(selectedPlan);
+      const result = await purchase(selectedPlan, subscriptionUserId);
       if (result) {
+        track("purchase_completed", { plan_identifier: selectedPlan });
         onPurchaseSuccess == null ? void 0 : onPurchaseSuccess();
         setSelectedPlan(null);
+      } else {
+        track("purchase_failed", {
+          plan_identifier: selectedPlan,
+          reason: "purchase_returned_false"
+        });
       }
     } catch (err) {
-      onError == null ? void 0 : onError(
-        labels.errorTitle,
-        err instanceof Error ? err.message : labels.purchaseError
-      );
+      const errorMessage = err instanceof Error ? err.message : labels.purchaseError;
+      track("purchase_failed", {
+        plan_identifier: selectedPlan,
+        reason: errorMessage
+      });
+      onError == null ? void 0 : onError(labels.errorTitle, errorMessage);
     } finally {
       setIsPurchasing(false);
     }
-  };
-  const handleRestore = async () => {
+  }, [
+    selectedPlan,
+    clearError,
+    track,
+    purchase,
+    subscriptionUserId,
+    onPurchaseSuccess,
+    labels.errorTitle,
+    labels.purchaseError,
+    onError
+  ]);
+  const handlePlanSelect = useCallback(
+    (planIdentifier) => {
+      setSelectedPlan(planIdentifier);
+      track("plan_selected", {
+        plan_identifier: planIdentifier ?? "free",
+        is_free_tier: planIdentifier === null
+      });
+    },
+    [track]
+  );
+  const handleRestore = useCallback(async () => {
     setIsRestoring(true);
     clearError();
+    track("restore_initiated");
     try {
-      const result = await restore();
+      const result = await restore(subscriptionUserId);
       if (result) {
+        track("restore_completed");
         onRestoreSuccess == null ? void 0 : onRestoreSuccess();
       } else {
+        track("restore_failed", { reason: "no_purchases_found" });
         onWarning == null ? void 0 : onWarning(labels.errorTitle, labels.restoreNoPurchases);
       }
     } catch (err) {
-      onError == null ? void 0 : onError(
-        labels.errorTitle,
-        err instanceof Error ? err.message : labels.restoreError
-      );
+      const errorMessage = err instanceof Error ? err.message : labels.restoreError;
+      track("restore_failed", { reason: errorMessage });
+      onError == null ? void 0 : onError(labels.errorTitle, errorMessage);
     } finally {
       setIsRestoring(false);
     }
-  };
+  }, [
+    clearError,
+    track,
+    restore,
+    subscriptionUserId,
+    onRestoreSuccess,
+    labels.errorTitle,
+    labels.restoreNoPurchases,
+    labels.restoreError,
+    onWarning,
+    onError
+  ]);
   const formatExpirationDate = useCallback((date) => {
     if (!date) return "";
     return new Intl.DateTimeFormat(void 0, {
@@ -4479,7 +4639,7 @@ function AppSubscriptionsPage({
             periodLabel: labels.periodMonth,
             features: getFreeTierFeatures(),
             isSelected: !(currentSubscription == null ? void 0 : currentSubscription.isActive) && selectedPlan === null,
-            onSelect: () => setSelectedPlan(null),
+            onSelect: () => handlePlanSelect(null),
             topBadge: !(currentSubscription == null ? void 0 : currentSubscription.isActive) ? {
               text: labels.currentPlanBadge,
               color: "green"
@@ -4500,7 +4660,7 @@ function AppSubscriptionsPage({
               periodLabel: getPeriodLabel(product.period),
               features: getProductFeatures(product.identifier),
               isSelected: selectedPlan === product.identifier,
-              onSelect: () => setSelectedPlan(product.identifier),
+              onSelect: () => handlePlanSelect(product.identifier),
               isBestValue: product.identifier.includes("pro"),
               discountBadge: ((_a = product.period) == null ? void 0 : _a.includes("Y")) ? (() => {
                 const savings = getYearlySavingsPercent(
@@ -4533,9 +4693,43 @@ function AppPricingPage({
   onPlanClick,
   onFreePlanClick,
   faqItems,
-  className
+  className,
+  onTrack
 }) {
   const [billingPeriod, setBillingPeriod] = useState("monthly");
+  const track = useCallback(
+    (label, params) => {
+      onTrack == null ? void 0 : onTrack({
+        eventType: "subscription_action",
+        componentName: "AppPricingPage",
+        label,
+        params
+      });
+    },
+    [onTrack]
+  );
+  const handleBillingPeriodChange = useCallback(
+    (value) => {
+      const newPeriod = value;
+      setBillingPeriod(newPeriod);
+      track("billing_period_changed", { billing_period: newPeriod });
+    },
+    [track]
+  );
+  const handleFreePlanClick = useCallback(() => {
+    track("free_plan_clicked", { plan: "free" });
+    onFreePlanClick();
+  }, [track, onFreePlanClick]);
+  const handlePlanClick = useCallback(
+    (planIdentifier, actionType) => {
+      track("plan_clicked", {
+        plan_identifier: planIdentifier,
+        action_type: actionType
+      });
+      onPlanClick(planIdentifier);
+    },
+    [track, onPlanClick]
+  );
   const getProductLevel = useCallback(
     (productId) => {
       const entitlement = entitlementMap[productId];
@@ -4619,7 +4813,7 @@ function AppPricingPage({
         {
           options: billingPeriodOptions,
           value: billingPeriod,
-          onChange: (value) => setBillingPeriod(value)
+          onChange: handleBillingPeriodChange
         }
       ) }),
       /* @__PURE__ */ jsxs(
@@ -4652,7 +4846,7 @@ function AppPricingPage({
                   // Logged in with subscription: no CTA (can't downgrade here)
                   !isAuthenticated ? {
                     label: labels.ctaTryFree,
-                    onClick: onFreePlanClick
+                    onClick: handleFreePlanClick
                   } : void 0
                 ),
                 hideSelectionIndicator: isAuthenticated
@@ -4666,14 +4860,14 @@ function AppPricingPage({
               if (!isAuthenticated) {
                 ctaButton = {
                   label: labels.ctaLogIn,
-                  onClick: () => onPlanClick(product.identifier)
+                  onClick: () => handlePlanClick(product.identifier, "login")
                 };
               } else if (isCurrent) {
                 ctaButton = void 0;
               } else if (canUpgrade) {
                 ctaButton = {
                   label: labels.ctaUpgrade,
-                  onClick: () => onPlanClick(product.identifier)
+                  onClick: () => handlePlanClick(product.identifier, "upgrade")
                 };
               }
               let topBadge;