@sudobility/subscription-components-rn 1.0.4 → 1.0.5

package/dist/index.mjs

@@ -1190,6 +1190,24 @@ function SubscriptionTile({
     }
   );
 }
+const PLATFORM_ICONS = {
+  web: "🌐",
+  ios: "",
+  android: "🤖",
+  macos: ""
+};
+const PLATFORM_DISPLAY_NAMES = {
+  web: "Web",
+  ios: "iOS",
+  android: "Android",
+  macos: "macOS"
+};
+function PlatformIcon({ platform, className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className, children: PLATFORM_ICONS[platform] });
+}
+function platformDisplayName(platform) {
+  return PLATFORM_DISPLAY_NAMES[platform];
+}
 function SubscriptionLayout({
   title,
   children,
@@ -1208,7 +1226,7 @@ function SubscriptionLayout({
   trackingLabel,
   componentName = "SubscriptionLayout"
 }) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const showActionButtons = variant === "selection" && primaryAction;
   const shouldShowFreeTile = variant === "cta" && freeTileConfig;
   const handlePrimaryPress = () => {
@@ -1229,23 +1247,36 @@ function SubscriptionLayout({
         headerContent,
         currentStatus && /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "mb-6", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4", children: currentStatusLabel }),
-          currentStatus.isActive ? /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4", children: [
+          currentStatus.isActive ? /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "bg-gray-50 dark:bg-gray-800/30 border border-gray-200 dark:border-gray-700 rounded-lg p-4", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center mb-2", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "w-3 h-3 bg-green-500 rounded-full mr-3" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "font-semibold text-green-800 dark:text-green-300", children: ((_a = currentStatus.activeContent) == null ? void 0 : _a.title) || "Active Subscription" })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "font-semibold text-gray-800 dark:text-gray-200", children: ((_a = currentStatus.activeContent) == null ? void 0 : _a.title) || "Active Subscription" })
             ] }),
             ((_b = currentStatus.activeContent) == null ? void 0 : _b.fields) && currentStatus.activeContent.fields.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "mt-4 gap-4", children: currentStatus.activeContent.fields.map(
               (field, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-sm text-green-600 dark:text-green-400", children: field.label }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "font-semibold text-green-800 dark:text-green-300", children: field.value })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-sm text-gray-500 dark:text-gray-400", children: field.label }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "font-semibold text-gray-700 dark:text-gray-300", children: field.value })
               ] }, index)
-            ) })
+            ) }),
+            ((_c = currentStatus.activeContent) == null ? void 0 : _c.platform) && /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "mt-4", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-sm text-gray-500 dark:text-gray-400", children: currentStatus.activeContent.platform.label }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center gap-1.5 mt-0.5", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  PlatformIcon,
+                  {
+                    platform: currentStatus.activeContent.platform.value,
+                    className: "text-gray-600 dark:text-gray-300"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "font-semibold text-gray-700 dark:text-gray-300", children: platformDisplayName(currentStatus.activeContent.platform.value) })
+              ] })
+            ] })
           ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center mb-2", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "w-3 h-3 bg-yellow-500 rounded-full mr-3" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "font-semibold text-yellow-800 dark:text-yellow-300", children: ((_c = currentStatus.inactiveContent) == null ? void 0 : _c.title) || "No Active Subscription" })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "font-semibold text-yellow-800 dark:text-yellow-300", children: ((_d = currentStatus.inactiveContent) == null ? void 0 : _d.title) || "No Active Subscription" })
             ] }),
-            ((_d = currentStatus.inactiveContent) == null ? void 0 : _d.message) && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-yellow-700 dark:text-yellow-400", children: currentStatus.inactiveContent.message })
+            ((_e = currentStatus.inactiveContent) == null ? void 0 : _e.message) && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-yellow-700 dark:text-yellow-400", children: currentStatus.inactiveContent.message })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4", children: title }),