@oxyhq/services 19.0.1 → 19.1.1

package/lib/module/ui/screens/PremiumSubscriptionScreen.js

@@ -6,6 +6,8 @@ import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Button } from '@oxyhq/bloom/button';
 import { Chip } from '@oxyhq/bloom/chip';
+import { Badge } from '@oxyhq/bloom/badge';
+import { Card, CardBody } from '@oxyhq/bloom/card';
 import { H2, H4, H5, Text } from '@oxyhq/bloom/typography';
 import { BenefitList, BenefitRow } from '@oxyhq/bloom/benefit-list';
 import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '@oxyhq/bloom/segmented-control';
@@ -415,65 +417,70 @@ const PremiumSubscriptionScreen = ({
       children: [/*#__PURE__*/_jsx(H5, {
         className: "text-text mb-space-12",
         children: t('premium.current.title') || 'Current Subscription'
-      }), /*#__PURE__*/_jsxs(View, {
-        className: "bg-fill border border-border-image rounded-radius-20 p-space-20 shadow-s",
-        children: [/*#__PURE__*/_jsxs(View, {
-          className: "flex-row justify-between items-start mb-space-12",
+      }), /*#__PURE__*/_jsx(Card, {
+        variant: "outlined",
+        children: /*#__PURE__*/_jsxs(CardBody, {
+          style: {
+            padding: 20
+          },
           children: [/*#__PURE__*/_jsxs(View, {
-            className: "flex-1 pr-space-12",
-            children: [/*#__PURE__*/_jsx(H4, {
-              className: "text-text",
-              numberOfLines: 1,
-              children: currentPlan.name
-            }), /*#__PURE__*/_jsx(Text, {
-              className: "text-text-secondary text-sm mt-space-2",
-              children: `$${currentPlan.price}/month`
+            className: "flex-row justify-between items-start mb-space-12",
+            children: [/*#__PURE__*/_jsxs(View, {
+              className: "flex-1 pr-space-12",
+              children: [/*#__PURE__*/_jsx(H4, {
+                className: "text-text",
+                numberOfLines: 1,
+                children: currentPlan.name
+              }), /*#__PURE__*/_jsx(Text, {
+                className: "text-text-secondary text-sm mt-space-2",
+                children: `$${currentPlan.price}/month`
+              })]
+            }), /*#__PURE__*/_jsx(Badge, {
+              variant: "subtle",
+              color: statusChipColor,
+              size: "large",
+              content: subscription.status.toUpperCase()
             })]
-          }), /*#__PURE__*/_jsx(Chip, {
-            variant: "soft",
-            color: statusChipColor,
-            size: "small",
-            children: subscription.status.toUpperCase()
-          })]
-        }), /*#__PURE__*/_jsx(Text, {
-          className: "text-text-secondary text-sm mb-space-16",
-          children: t('premium.current.renewsOn', {
-            date: new Date(subscription.currentPeriodEnd).toLocaleDateString()
-          }) || `Renews on ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`
-        }), subscription.cancelAtPeriodEnd && /*#__PURE__*/_jsxs(View, {
-          className: "flex-row items-center bg-fill-secondary rounded-radius-12 p-space-12 mb-space-16",
-          children: [/*#__PURE__*/_jsx(Ionicons, {
-            name: "warning",
-            size: 16,
-            color: colors.warning
           }), /*#__PURE__*/_jsx(Text, {
-            className: "text-text-secondary text-sm ml-space-8 flex-1",
-            children: t('premium.current.willCancelOn', {
+            className: "text-text-secondary text-sm mb-space-16",
+            children: t('premium.current.renewsOn', {
               date: new Date(subscription.currentPeriodEnd).toLocaleDateString()
-            }) || `Subscription will cancel on ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`
-          })]
-        }), /*#__PURE__*/_jsxs(View, {
-          className: "flex-row gap-space-12",
-          children: [subscription.cancelAtPeriodEnd ? /*#__PURE__*/_jsx(Button, {
-            variant: "primary",
-            onPress: handleReactivateSubscription,
-            className: "flex-1",
-            accessibilityLabel: t('premium.actions.reactivate') || 'Reactivate',
-            children: t('premium.actions.reactivate') || 'Reactivate'
-          }) : /*#__PURE__*/_jsx(Button, {
-            variant: "destructive",
-            onPress: confirmCancelSubscription,
-            className: "flex-1",
-            accessibilityLabel: t('premium.actions.cancelSubBtn') || 'Cancel Subscription',
-            children: t('premium.actions.cancelSubBtn') || 'Cancel Subscription'
-          }), /*#__PURE__*/_jsx(Button, {
-            variant: "outline",
-            onPress: () => navigate?.('PaymentGateway'),
-            className: "flex-1",
-            accessibilityLabel: t('premium.actions.manageBilling') || 'Manage Billing',
-            children: t('premium.actions.manageBilling') || 'Manage Billing'
+            }) || `Renews on ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`
+          }), subscription.cancelAtPeriodEnd && /*#__PURE__*/_jsxs(View, {
+            className: "flex-row items-center bg-fill-secondary rounded-radius-12 p-space-12 mb-space-16",
+            children: [/*#__PURE__*/_jsx(Ionicons, {
+              name: "warning",
+              size: 16,
+              color: colors.warning
+            }), /*#__PURE__*/_jsx(Text, {
+              className: "text-text-secondary text-sm ml-space-8 flex-1",
+              children: t('premium.current.willCancelOn', {
+                date: new Date(subscription.currentPeriodEnd).toLocaleDateString()
+              }) || `Subscription will cancel on ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            className: "flex-row gap-space-12",
+            children: [subscription.cancelAtPeriodEnd ? /*#__PURE__*/_jsx(Button, {
+              variant: "primary",
+              onPress: handleReactivateSubscription,
+              className: "flex-1",
+              accessibilityLabel: t('premium.actions.reactivate') || 'Reactivate',
+              children: t('premium.actions.reactivate') || 'Reactivate'
+            }) : /*#__PURE__*/_jsx(Button, {
+              variant: "destructive",
+              onPress: confirmCancelSubscription,
+              className: "flex-1",
+              accessibilityLabel: t('premium.actions.cancelSubBtn') || 'Cancel Subscription',
+              children: t('premium.actions.cancelSubBtn') || 'Cancel Subscription'
+            }), /*#__PURE__*/_jsx(Button, {
+              variant: "outline",
+              onPress: () => navigate?.('PaymentGateway'),
+              className: "flex-1",
+              accessibilityLabel: t('premium.actions.manageBilling') || 'Manage Billing',
+              children: t('premium.actions.manageBilling') || 'Manage Billing'
+            })]
           })]
-        })]
+        })
       })]
     });
   };
@@ -536,94 +543,103 @@ const PremiumSubscriptionScreen = ({
       };
     };
     const availability = getAvailabilityStatus();
-    return /*#__PURE__*/_jsxs(View, {
-      className: `bg-fill border border-border-image rounded-radius-20 p-space-20 mb-space-16 shadow-s ${!availability.available ? 'opacity-60' : ''}`,
-      style: isSelected || plan.isPopular ? {
+    return /*#__PURE__*/_jsx(Card, {
+      variant: "outlined",
+      style: [{
+        marginBottom: 16
+      }, !availability.available ? {
+        opacity: 0.6
+      } : null, isSelected || plan.isPopular ? {
         borderColor: colors.primary,
         borderWidth: 2
-      } : undefined,
-      children: [/*#__PURE__*/_jsxs(View, {
-        className: "flex-row flex-wrap gap-space-8 mb-space-12",
-        children: [plan.isPopular && /*#__PURE__*/_jsx(Chip, {
-          variant: "solid",
-          color: "primary",
-          size: "small",
-          children: t('premium.plan.badge.mostPopular') || 'Most Popular'
-        }), isAppSpecific && /*#__PURE__*/_jsx(Chip, {
-          variant: "soft",
-          color: isAvailableForCurrentApp ? 'success' : 'warning',
-          size: "small",
-          children: isAvailableForCurrentApp ? t('premium.plan.badge.appExclusive') || 'App Exclusive' : t('premium.plan.badge.notAvailable') || 'Not Available'
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        className: "mb-space-16",
-        children: [/*#__PURE__*/_jsx(H4, {
-          className: "text-text mb-space-4",
-          children: plan.name
-        }), /*#__PURE__*/_jsx(Text, {
-          className: "text-text-secondary text-sm",
-          children: plan.description
-        }), /*#__PURE__*/_jsx(Text, {
-          className: "text-text-tertiary text-xs mt-space-4 italic",
-          children: getAppScopeText()
-        }), !availability.available && /*#__PURE__*/_jsx(Text, {
-          className: "text-xs mt-space-4 font-medium",
-          style: {
-            color: colors.error
-          },
-          children: availability.reason
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        className: "flex-row items-baseline mb-space-20",
-        children: [/*#__PURE__*/_jsx(H2, {
-          className: "text-text",
-          children: pricing.formatted
-        }), /*#__PURE__*/_jsx(Text, {
-          className: "text-text-secondary text-sm ml-space-4",
-          children: t('premium.plan.perInterval', {
-            interval: pricing.interval
-          }) || `per ${pricing.interval}`
-        })]
-      }), /*#__PURE__*/_jsx(BenefitList, {
-        className: "mb-space-24",
-        children: plan.features.map((feature, index) => /*#__PURE__*/_jsx(BenefitRow, {
+      } : null],
+      children: /*#__PURE__*/_jsxs(CardBody, {
+        style: {
+          padding: 20
+        },
+        children: [/*#__PURE__*/_jsxs(View, {
+          className: "flex-row flex-wrap gap-space-8 mb-space-12",
+          children: [plan.isPopular && /*#__PURE__*/_jsx(Badge, {
+            variant: "solid",
+            color: "primary",
+            size: "large",
+            content: t('premium.plan.badge.mostPopular') || 'Most Popular'
+          }), isAppSpecific && /*#__PURE__*/_jsx(Badge, {
+            variant: "subtle",
+            color: isAvailableForCurrentApp ? 'success' : 'warning',
+            size: "large",
+            content: isAvailableForCurrentApp ? t('premium.plan.badge.appExclusive') || 'App Exclusive' : t('premium.plan.badge.notAvailable') || 'Not Available'
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          className: "mb-space-16",
+          children: [/*#__PURE__*/_jsx(H4, {
+            className: "text-text mb-space-4",
+            children: plan.name
+          }), /*#__PURE__*/_jsx(Text, {
+            className: "text-text-secondary text-sm",
+            children: plan.description
+          }), /*#__PURE__*/_jsx(Text, {
+            className: "text-text-tertiary text-xs mt-space-4 italic",
+            children: getAppScopeText()
+          }), !availability.available && /*#__PURE__*/_jsx(Text, {
+            className: "text-xs mt-space-4 font-medium",
+            style: {
+              color: colors.error
+            },
+            children: availability.reason
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          className: "flex-row items-baseline mb-space-20",
+          children: [/*#__PURE__*/_jsx(H2, {
+            className: "text-text",
+            children: pricing.formatted
+          }), /*#__PURE__*/_jsx(Text, {
+            className: "text-text-secondary text-sm ml-space-4",
+            children: t('premium.plan.perInterval', {
+              interval: pricing.interval
+            }) || `per ${pricing.interval}`
+          })]
+        }), /*#__PURE__*/_jsx(BenefitList, {
+          className: "mb-space-24",
+          children: plan.features.map((feature, index) => /*#__PURE__*/_jsx(BenefitRow, {
+            icon: /*#__PURE__*/_jsx(Ionicons, {
+              name: "checkmark",
+              size: 18,
+              color: colors.success
+            }),
+            label: feature
+          }, index))
+        }), isCurrentPlan ? /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          disabled: true,
           icon: /*#__PURE__*/_jsx(Ionicons, {
-            name: "checkmark",
+            name: "checkmark-circle",
             size: 18,
             color: colors.success
           }),
-          label: feature
-        }, index))
-      }), isCurrentPlan ? /*#__PURE__*/_jsx(Button, {
-        variant: "secondary",
-        disabled: true,
-        icon: /*#__PURE__*/_jsx(Ionicons, {
-          name: "checkmark-circle",
-          size: 18,
-          color: colors.success
-        }),
-        accessibilityLabel: t('premium.plan.current') || 'Current Plan',
-        className: "w-full",
-        children: t('premium.plan.current') || 'Current Plan'
-      }) : !availability.available ? /*#__PURE__*/_jsx(Button, {
-        variant: "secondary",
-        disabled: true,
-        accessibilityLabel: t('premium.plan.notAvailableInApp') || 'Not Available in Current App',
-        className: "w-full",
-        children: t('premium.plan.notAvailableInApp') || 'Not Available in Current App'
-      }) : /*#__PURE__*/_jsx(Button, {
-        variant: plan.isPopular ? 'primary' : 'secondary',
-        onPress: () => handleSubscribe(plan.id),
-        disabled: processingPayment,
-        loading: processingPayment && isSelected,
-        accessibilityLabel: t('premium.actions.subscribeTo', {
-          name: plan.name
-        }) || `Subscribe to ${plan.name}`,
-        className: "w-full",
-        children: t('premium.actions.subscribeTo', {
-          name: plan.name
-        }) || `Subscribe to ${plan.name}`
-      })]
+          accessibilityLabel: t('premium.plan.current') || 'Current Plan',
+          className: "w-full",
+          children: t('premium.plan.current') || 'Current Plan'
+        }) : !availability.available ? /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          disabled: true,
+          accessibilityLabel: t('premium.plan.notAvailableInApp') || 'Not Available in Current App',
+          className: "w-full",
+          children: t('premium.plan.notAvailableInApp') || 'Not Available in Current App'
+        }) : /*#__PURE__*/_jsx(Button, {
+          variant: plan.isPopular ? 'primary' : 'secondary',
+          onPress: () => handleSubscribe(plan.id),
+          disabled: processingPayment,
+          loading: processingPayment && isSelected,
+          accessibilityLabel: t('premium.actions.subscribeTo', {
+            name: plan.name
+          }) || `Subscribe to ${plan.name}`,
+          className: "w-full",
+          children: t('premium.actions.subscribeTo', {
+            name: plan.name
+          }) || `Subscribe to ${plan.name}`
+        })]
+      })
     }, plan.id);
   };
   const renderTabNavigation = () => /*#__PURE__*/_jsx(View, {
@@ -691,107 +707,114 @@ const PremiumSubscriptionScreen = ({
         apps: feature.applicableApps.join(', ')
       }) || `Available in: ${feature.applicableApps.join(', ')}`;
     };
-    return /*#__PURE__*/_jsxs(View, {
-      className: "bg-fill border border-border-image rounded-radius-12 p-space-16 mb-space-12 shadow-s",
-      style: isIncludedInCurrentPlan ? {
+    return /*#__PURE__*/_jsx(Card, {
+      variant: "outlined",
+      style: [{
+        marginBottom: 12
+      }, isIncludedInCurrentPlan ? {
         borderColor: colors.primary,
         borderWidth: 2
       } : isSubscribed ? {
         borderColor: colors.success,
         borderWidth: 2
-      } : undefined,
-      children: [/*#__PURE__*/_jsxs(View, {
-        className: "flex-row items-start mb-space-12",
-        children: [/*#__PURE__*/_jsx(View, {
-          className: "bg-fill-secondary rounded-radius-max items-center justify-center mr-space-12",
-          style: {
-            width: 40,
-            height: 40
-          },
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: getCategoryIcon(feature.category),
-            size: 24,
-            color: getCategoryColor(feature.category)
-          })
-        }), /*#__PURE__*/_jsxs(View, {
-          className: "flex-1",
-          children: [/*#__PURE__*/_jsxs(View, {
-            className: "flex-row items-center justify-between mb-space-4",
-            children: [/*#__PURE__*/_jsx(H5, {
-              className: "text-text flex-1 pr-space-8",
-              numberOfLines: 1,
-              children: feature.name
-            }), isIncludedInCurrentPlan && /*#__PURE__*/_jsx(Chip, {
-              variant: "solid",
-              color: "primary",
-              size: "small",
-              children: t('premium.feature.included') || 'Included'
+      } : null],
+      children: /*#__PURE__*/_jsxs(CardBody, {
+        style: {
+          padding: 16
+        },
+        children: [/*#__PURE__*/_jsxs(View, {
+          className: "flex-row items-start mb-space-12",
+          children: [/*#__PURE__*/_jsx(View, {
+            className: "bg-fill-secondary rounded-radius-max items-center justify-center mr-space-12",
+            style: {
+              width: 40,
+              height: 40
+            },
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: getCategoryIcon(feature.category),
+              size: 24,
+              color: getCategoryColor(feature.category)
+            })
+          }), /*#__PURE__*/_jsxs(View, {
+            className: "flex-1",
+            children: [/*#__PURE__*/_jsxs(View, {
+              className: "flex-row items-center justify-between mb-space-4",
+              children: [/*#__PURE__*/_jsx(H5, {
+                className: "text-text flex-1 pr-space-8",
+                numberOfLines: 1,
+                children: feature.name
+              }), isIncludedInCurrentPlan && /*#__PURE__*/_jsx(Badge, {
+                variant: "solid",
+                color: "primary",
+                size: "large",
+                content: t('premium.feature.included') || 'Included'
+              })]
+            }), /*#__PURE__*/_jsx(Text, {
+              className: "text-text-secondary text-sm",
+              children: feature.description
+            }), /*#__PURE__*/_jsx(Text, {
+              className: "text-text-tertiary text-xs mt-space-4 italic",
+              children: getAppScopeText()
             })]
+          })]
+        }), !isIncludedInCurrentPlan && /*#__PURE__*/_jsxs(View, {
+          className: "items-center mb-space-16",
+          children: [/*#__PURE__*/_jsx(H4, {
+            className: "text-text",
+            children: pricing.formatted
           }), /*#__PURE__*/_jsx(Text, {
-            className: "text-text-secondary text-sm",
-            children: feature.description
-          }), /*#__PURE__*/_jsx(Text, {
-            className: "text-text-tertiary text-xs mt-space-4 italic",
-            children: getAppScopeText()
+            className: "text-text-secondary text-sm mt-space-2",
+            children: t('premium.plan.perInterval', {
+              interval: pricing.interval
+            }) || `per ${pricing.interval}`
           })]
-        })]
-      }), !isIncludedInCurrentPlan && /*#__PURE__*/_jsxs(View, {
-        className: "items-center mb-space-16",
-        children: [/*#__PURE__*/_jsx(H4, {
-          className: "text-text",
-          children: pricing.formatted
-        }), /*#__PURE__*/_jsx(Text, {
-          className: "text-text-secondary text-sm mt-space-2",
-          children: t('premium.plan.perInterval', {
-            interval: pricing.interval
-          }) || `per ${pricing.interval}`
-        })]
-      }), isIncludedInCurrentPlan ? /*#__PURE__*/_jsx(Button, {
-        variant: "primary",
-        disabled: true,
-        icon: /*#__PURE__*/_jsx(Ionicons, {
-          name: "checkmark-circle",
-          size: 16,
-          color: colors.primaryForeground
-        }),
-        accessibilityLabel: t('premium.feature.includedInPlan') || 'Included in your plan',
-        className: "w-full",
-        children: t('premium.feature.includedInPlan') || 'Included in your plan'
-      }) : isSubscribed ? /*#__PURE__*/_jsxs(View, {
-        className: "flex-row gap-space-8",
-        children: [/*#__PURE__*/_jsx(Button, {
-          variant: "secondary",
+        }), isIncludedInCurrentPlan ? /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
           disabled: true,
           icon: /*#__PURE__*/_jsx(Ionicons, {
-            name: "checkmark",
+            name: "checkmark-circle",
             size: 16,
-            color: colors.success
+            color: colors.primaryForeground
           }),
-          accessibilityLabel: t('premium.feature.subscribed') || 'Subscribed',
-          className: "flex-1",
-          children: t('premium.feature.subscribed') || 'Subscribed'
-        }), /*#__PURE__*/_jsx(Button, {
-          variant: "outline",
-          onPress: () => confirmFeatureUnsubscribe(feature.id),
-          accessibilityLabel: t('premium.actions.unsubscribe') || 'Unsubscribe',
-          className: "flex-1",
-          children: t('premium.actions.unsubscribe') || 'Unsubscribe'
+          accessibilityLabel: t('premium.feature.includedInPlan') || 'Included in your plan',
+          className: "w-full",
+          children: t('premium.feature.includedInPlan') || 'Included in your plan'
+        }) : isSubscribed ? /*#__PURE__*/_jsxs(View, {
+          className: "flex-row gap-space-8",
+          children: [/*#__PURE__*/_jsx(Button, {
+            variant: "secondary",
+            disabled: true,
+            icon: /*#__PURE__*/_jsx(Ionicons, {
+              name: "checkmark",
+              size: 16,
+              color: colors.success
+            }),
+            accessibilityLabel: t('premium.feature.subscribed') || 'Subscribed',
+            className: "flex-1",
+            children: t('premium.feature.subscribed') || 'Subscribed'
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "outline",
+            onPress: () => confirmFeatureUnsubscribe(feature.id),
+            accessibilityLabel: t('premium.actions.unsubscribe') || 'Unsubscribe',
+            className: "flex-1",
+            children: t('premium.actions.unsubscribe') || 'Unsubscribe'
+          })]
+        }) : canPurchase ? /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          onPress: () => handleFeatureSubscribe(feature.id),
+          disabled: processingPayment,
+          loading: processingPayment,
+          accessibilityLabel: t('premium.actions.subscribe') || 'Subscribe',
+          className: "w-full",
+          children: t('premium.actions.subscribe') || 'Subscribe'
+        }) : /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          disabled: true,
+          accessibilityLabel: t('premium.feature.plansOnly') || 'Only available in subscription plans',
+          className: "w-full",
+          children: t('premium.feature.plansOnly') || 'Only available in subscription plans'
         })]
-      }) : canPurchase ? /*#__PURE__*/_jsx(Button, {
-        variant: "primary",
-        onPress: () => handleFeatureSubscribe(feature.id),
-        disabled: processingPayment,
-        loading: processingPayment,
-        accessibilityLabel: t('premium.actions.subscribe') || 'Subscribe',
-        className: "w-full",
-        children: t('premium.actions.subscribe') || 'Subscribe'
-      }) : /*#__PURE__*/_jsx(Button, {
-        variant: "secondary",
-        disabled: true,
-        accessibilityLabel: t('premium.feature.plansOnly') || 'Only available in subscription plans',
-        className: "w-full",
-        children: t('premium.feature.plansOnly') || 'Only available in subscription plans'
-      })]
+      })
     }, feature.id);
   };
   const renderIndividualFeatures = () => /*#__PURE__*/_jsxs(View, {