@sudobility/building_blocks_rn 0.0.2 → 0.0.3

package/dist/src/components/pages/AppSubscriptionPage.d.ts

@@ -0,0 +1,35 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { SubscriptionPageLabels, SubscriptionPageFormatters, AnalyticsTrackingParams } from '../../types';
+import type { SubscriptionPackage } from '../subscription/SubscriptionScreen';
+export interface CurrentSubscriptionStatus {
+    isActive: boolean;
+    planName?: string;
+    expirationDate?: string | null;
+    willRenew?: boolean;
+    productIdentifier?: string;
+}
+export interface AppSubscriptionPageLabels extends SubscriptionPageLabels {
+    statusActive?: string;
+    statusInactive?: string;
+    statusInactiveMessage?: string;
+    labelPlan?: string;
+    labelExpires?: string;
+    labelRenews?: string;
+    yes?: string;
+    no?: string;
+}
+export interface AppSubscriptionPageProps {
+    currentStatus?: CurrentSubscriptionStatus;
+    packages: SubscriptionPackage[];
+    labels?: AppSubscriptionPageLabels;
+    formatters?: SubscriptionPageFormatters;
+    onPurchase: (packageId: string) => Promise<boolean>;
+    onRestore: () => Promise<boolean>;
+    onPurchaseSuccess?: () => void;
+    onRestoreSuccess?: () => void;
+    onError?: (title: string, message: string) => void;
+    style?: StyleProp<ViewStyle>;
+    onTrack?: (params: AnalyticsTrackingParams) => void;
+    isLoading?: boolean;
+}
+export declare function AppSubscriptionPage({ currentStatus, packages, labels, formatters, onPurchase, onRestore, onPurchaseSuccess, onRestoreSuccess, onError, style, onTrack, isLoading: externalLoading, }: AppSubscriptionPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/pages/AppSubscriptionPage.js

@@ -0,0 +1,256 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { View, Text, Pressable, ScrollView, ActivityIndicator, } from 'react-native';
+import { createThemedStyles } from '../../utils/styles';
+export function AppSubscriptionPage({ currentStatus, packages, labels = {}, formatters = {}, onPurchase, onRestore, onPurchaseSuccess, onRestoreSuccess, onError, style, onTrack, isLoading: externalLoading, }) {
+    const styles = useStyles();
+    const [loading, setLoading] = useState(null);
+    const formatPrice = formatters.formatPrice ??
+        ((price, currency) => `${currency} ${price.toFixed(2)}`);
+    const handlePurchase = useCallback(async (pkg) => {
+        if (loading)
+            return;
+        setLoading(pkg.id);
+        onTrack?.({
+            eventType: 'subscription_action',
+            componentName: 'AppSubscriptionPage',
+            label: 'purchase_tapped',
+            params: { package_id: pkg.id },
+        });
+        try {
+            const success = await onPurchase(pkg.id);
+            if (success) {
+                onPurchaseSuccess?.();
+            }
+        }
+        catch (e) {
+            onError?.('Purchase Failed', e instanceof Error ? e.message : 'An error occurred.');
+        }
+        finally {
+            setLoading(null);
+        }
+    }, [loading, onPurchase, onPurchaseSuccess, onError, onTrack]);
+    const handleRestore = useCallback(async () => {
+        if (loading)
+            return;
+        setLoading('restore');
+        onTrack?.({
+            eventType: 'subscription_action',
+            componentName: 'AppSubscriptionPage',
+            label: 'restore_tapped',
+        });
+        try {
+            const success = await onRestore();
+            if (success) {
+                onRestoreSuccess?.();
+            }
+        }
+        catch (e) {
+            onError?.('Restore Failed', e instanceof Error ? e.message : 'An error occurred.');
+        }
+        finally {
+            setLoading(null);
+        }
+    }, [loading, onRestore, onRestoreSuccess, onError, onTrack]);
+    return (_jsxs(ScrollView, { style: [styles.container, style], contentContainerStyle: styles.content, children: [currentStatus && (_jsxs(View, { style: styles.statusCard, children: [_jsx(View, { style: styles.statusHeader, children: _jsx(View, { style: [
+                                styles.statusBadge,
+                                currentStatus.isActive
+                                    ? styles.statusBadgeActive
+                                    : styles.statusBadgeInactive,
+                            ], children: _jsx(Text, { style: [
+                                    styles.statusBadgeText,
+                                    currentStatus.isActive
+                                        ? styles.statusBadgeTextActive
+                                        : styles.statusBadgeTextInactive,
+                                ], children: currentStatus.isActive
+                                    ? (labels.statusActive ?? 'Active')
+                                    : (labels.statusInactive ?? 'Inactive') }) }) }), currentStatus.isActive ? (_jsxs(View, { style: styles.statusFields, children: [currentStatus.planName && (_jsxs(View, { style: styles.statusField, children: [_jsx(Text, { style: styles.statusFieldLabel, children: labels.labelPlan ?? 'Plan' }), _jsx(Text, { style: styles.statusFieldValue, children: currentStatus.planName })] })), currentStatus.expirationDate && (_jsxs(View, { style: styles.statusField, children: [_jsx(Text, { style: styles.statusFieldLabel, children: labels.labelExpires ?? 'Expires' }), _jsx(Text, { style: styles.statusFieldValue, children: currentStatus.expirationDate })] })), currentStatus.willRenew !== undefined && (_jsxs(View, { style: styles.statusField, children: [_jsx(Text, { style: styles.statusFieldLabel, children: labels.labelRenews ?? 'Auto-renews' }), _jsx(Text, { style: styles.statusFieldValue, children: currentStatus.willRenew
+                                            ? (labels.yes ?? 'Yes')
+                                            : (labels.no ?? 'No') })] }))] })) : (_jsx(Text, { style: styles.statusInactiveMessage, children: labels.statusInactiveMessage ??
+                            'Subscribe to unlock premium features' }))] })), externalLoading && (_jsx(View, { style: styles.loadingContainer, children: _jsx(ActivityIndicator, { size: 'large', color: styles.loadingIndicator.color }) })), !externalLoading && packages.length > 0 && (_jsx(View, { style: styles.packageList, children: packages.map(pkg => (_jsxs(View, { style: [
+                        styles.packageCard,
+                        pkg.isMostPopular && styles.packageCardPopular,
+                    ], children: [pkg.isMostPopular && (_jsx(View, { style: styles.popularBadge, children: _jsx(Text, { style: styles.popularBadgeText, children: labels.mostPopular ?? 'Most Popular' }) })), _jsx(Text, { style: styles.packageTitle, children: pkg.title }), pkg.description && (_jsx(Text, { style: styles.packageDescription, children: pkg.description })), _jsx(Text, { style: styles.packagePrice, children: formatPrice(pkg.price, pkg.currency) }), pkg.features && pkg.features.length > 0 && (_jsx(View, { style: styles.featureList, children: pkg.features.map((feature, i) => (_jsxs(Text, { style: styles.featureItem, children: ['\u2713', " ", feature] }, i))) })), pkg.isCurrent ? (_jsx(View, { style: styles.currentBadge, children: _jsx(Text, { style: styles.currentBadgeText, children: labels.currentlyActive ?? 'Current Plan' }) })) : (_jsx(Pressable, { style: [
+                                styles.purchaseButton,
+                                loading === pkg.id && styles.purchaseButtonDisabled,
+                            ], onPress: () => handlePurchase(pkg), disabled: loading !== null, children: loading === pkg.id ? (_jsx(ActivityIndicator, { color: '#ffffff', size: 'small' })) : (_jsx(Text, { style: styles.purchaseButtonText, children: labels.purchase ?? 'Subscribe' })) }))] }, pkg.id))) })), _jsx(Pressable, { style: [
+                    styles.restoreButton,
+                    loading === 'restore' && styles.restoreButtonDisabled,
+                ], onPress: handleRestore, disabled: loading !== null, children: loading === 'restore' ? (_jsx(ActivityIndicator, { color: styles.restoreText.color, size: 'small' })) : (_jsx(Text, { style: styles.restoreText, children: labels.restore ?? 'Restore Purchases' })) }), labels.restoreDescription && (_jsx(Text, { style: styles.restoreDescription, children: labels.restoreDescription }))] }));
+}
+const useStyles = createThemedStyles(colors => ({
+    container: {
+        flex: 1,
+        backgroundColor: colors.background,
+    },
+    content: {
+        padding: 16,
+        paddingBottom: 32,
+    },
+    // Status card
+    statusCard: {
+        backgroundColor: colors.card,
+        borderRadius: 16,
+        padding: 20,
+        borderWidth: 1,
+        borderColor: colors.border,
+        marginBottom: 16,
+    },
+    statusHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 12,
+    },
+    statusBadge: {
+        borderRadius: 12,
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+    },
+    statusBadgeActive: {
+        backgroundColor: '#dcfce7',
+    },
+    statusBadgeInactive: {
+        backgroundColor: colors.surfaceSecondary,
+    },
+    statusBadgeText: {
+        fontSize: 13,
+        fontWeight: '600',
+    },
+    statusBadgeTextActive: {
+        color: '#16a34a',
+    },
+    statusBadgeTextInactive: {
+        color: colors.textSecondary,
+    },
+    statusFields: {
+        gap: 8,
+    },
+    statusField: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    statusFieldLabel: {
+        fontSize: 14,
+        color: colors.textSecondary,
+    },
+    statusFieldValue: {
+        fontSize: 14,
+        fontWeight: '500',
+        color: colors.text,
+    },
+    statusInactiveMessage: {
+        fontSize: 14,
+        color: colors.textSecondary,
+    },
+    // Loading
+    loadingContainer: {
+        paddingVertical: 48,
+        alignItems: 'center',
+    },
+    loadingIndicator: {
+        color: colors.primary,
+    },
+    // Package cards (mirrors SubscriptionScreen styles)
+    packageList: {
+        gap: 16,
+    },
+    packageCard: {
+        backgroundColor: colors.card,
+        borderRadius: 16,
+        padding: 20,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    packageCardPopular: {
+        borderColor: colors.primary,
+        borderWidth: 2,
+    },
+    popularBadge: {
+        backgroundColor: colors.primary,
+        borderRadius: 12,
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        alignSelf: 'flex-start',
+        marginBottom: 8,
+    },
+    popularBadgeText: {
+        color: '#ffffff',
+        fontSize: 12,
+        fontWeight: '600',
+    },
+    packageTitle: {
+        fontSize: 20,
+        fontWeight: '600',
+        color: colors.text,
+    },
+    packageDescription: {
+        fontSize: 14,
+        color: colors.textSecondary,
+        marginTop: 4,
+    },
+    packagePrice: {
+        fontSize: 28,
+        fontWeight: '700',
+        color: colors.text,
+        marginTop: 8,
+    },
+    featureList: {
+        marginTop: 12,
+        gap: 6,
+    },
+    featureItem: {
+        fontSize: 14,
+        color: colors.textSecondary,
+    },
+    purchaseButton: {
+        backgroundColor: colors.primary,
+        borderRadius: 10,
+        paddingVertical: 14,
+        alignItems: 'center',
+        marginTop: 16,
+        minHeight: 48,
+        justifyContent: 'center',
+    },
+    purchaseButtonDisabled: {
+        opacity: 0.6,
+    },
+    purchaseButtonText: {
+        color: '#ffffff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    currentBadge: {
+        borderRadius: 10,
+        paddingVertical: 14,
+        alignItems: 'center',
+        marginTop: 16,
+        backgroundColor: colors.surfaceSecondary,
+    },
+    currentBadgeText: {
+        color: colors.textSecondary,
+        fontSize: 16,
+        fontWeight: '500',
+    },
+    restoreButton: {
+        marginTop: 24,
+        paddingVertical: 12,
+        alignItems: 'center',
+        minHeight: 44,
+        justifyContent: 'center',
+    },
+    restoreButtonDisabled: {
+        opacity: 0.6,
+    },
+    restoreText: {
+        color: colors.primary,
+        fontSize: 15,
+        fontWeight: '500',
+    },
+    restoreDescription: {
+        fontSize: 13,
+        color: colors.textMuted,
+        textAlign: 'center',
+        marginTop: 4,
+    },
+}));

package/dist/src/components/pages/index.d.ts

@@ -2,3 +2,5 @@ export { AppTextScreen } from './AppTextScreen';
 export type { AppTextScreenProps } from './AppTextScreen';
 export { LoginScreen } from './LoginScreen';
 export type { LoginScreenProps } from './LoginScreen';
+export { AppSubscriptionPage } from './AppSubscriptionPage';
+export type { AppSubscriptionPageProps, AppSubscriptionPageLabels, CurrentSubscriptionStatus, } from './AppSubscriptionPage';

package/dist/src/components/pages/index.js

@@ -1,2 +1,3 @@
 export { AppTextScreen } from './AppTextScreen';
 export { LoginScreen } from './LoginScreen';
+export { AppSubscriptionPage } from './AppSubscriptionPage';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/building_blocks_rn",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Higher-level shared UI building blocks for Sudobility React Native apps",
   "type": "module",
   "main": "./dist/index.js",