@sudobility/building_blocks_rn 0.0.2 → 0.0.5

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: colors.successBg,
+    },
+    statusBadgeInactive: {
+        backgroundColor: colors.surfaceSecondary,
+    },
+    statusBadgeText: {
+        fontSize: 13,
+        fontWeight: '600',
+    },
+    statusBadgeTextActive: {
+        color: colors.successText,
+    },
+    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/LoginScreen.js

@@ -88,7 +88,7 @@ const useStyles = createThemedStyles(colors => ({
         marginBottom: 20,
     },
     errorBox: {
-        backgroundColor: '#fef2f2',
+        backgroundColor: colors.errorBg,
         borderRadius: 8,
         padding: 12,
         marginBottom: 16,
@@ -166,11 +166,11 @@ const useStyles = createThemedStyles(colors => ({
         color: colors.text,
     },
     appleButton: {
-        backgroundColor: '#000000',
-        borderColor: '#000000',
+        backgroundColor: colors.invertedBackground,
+        borderColor: colors.invertedBackground,
     },
     appleButtonText: {
-        color: '#ffffff',
+        color: colors.invertedText,
     },
     toggleLink: {
         marginTop: 16,

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/dist/src/components/toast/ToastProvider.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { createContext, useCallback, useContext, useRef, useState, } from 'react';
-import { View, Text, Animated, Pressable, StyleSheet } from 'react-native';
+import { View, Text, Animated, Pressable } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from '../../theme/ThemeContext';
+import { createThemedStyles } from '../../utils/styles';
 const ToastContext = createContext(null);
 let toastCounter = 0;
 export function ToastProvider({ children }) {
     const [toasts, setToasts] = useState([]);
     const insets = useSafeAreaInsets();
+    const styles = useToastStyles();
     const removeToast = useCallback((id) => {
         setToasts(prev => prev.filter(t => t.id !== id));
     }, []);
@@ -20,6 +23,8 @@ export function ToastProvider({ children }) {
     return (_jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, _jsx(View, { style: [styles.toastContainer, { top: insets.top + 8 }], pointerEvents: 'box-none', children: toasts.map(toast => (_jsx(ToastItem, { toast: toast, onDismiss: () => removeToast(toast.id) }, toast.id))) })] }));
 }
 function ToastItem({ toast, onDismiss, }) {
+    const { colors } = useTheme();
+    const styles = useToastStyles();
     const opacity = useRef(new Animated.Value(0)).current;
     const translateY = useRef(new Animated.Value(-20)).current;
     React.useEffect(() => {
@@ -37,10 +42,10 @@ function ToastItem({ toast, onDismiss, }) {
         ]).start();
     }, [opacity, translateY]);
     const bgColor = {
-        success: '#22c55e',
-        error: '#ef4444',
-        warning: '#f59e0b',
-        info: '#3b82f6',
+        success: colors.success,
+        error: colors.error,
+        warning: colors.warning,
+        info: colors.info,
     }[toast.type];
     return (_jsx(Animated.View, { style: [
             styles.toast,
@@ -57,7 +62,7 @@ export function useToast() {
     }
     return context;
 }
-const styles = StyleSheet.create({
+const useToastStyles = createThemedStyles(_colors => ({
     toastContainer: {
         position: 'absolute',
         left: 16,
@@ -84,4 +89,4 @@ const styles = StyleSheet.create({
         fontSize: 15,
         fontWeight: '500',
     },
-});
+}));

package/dist/src/theme/colors.d.ts

@@ -47,9 +47,14 @@ export interface ThemeColors {
     surface: string;
     surfaceSecondary: string;
     error: string;
+    errorBg: string;
     success: string;
+    successBg: string;
+    successText: string;
     warning: string;
     info: string;
+    invertedText: string;
+    invertedBackground: string;
 }
 export declare const lightColors: ThemeColors;
 export declare const darkColors: ThemeColors;

package/dist/src/theme/colors.js

@@ -47,9 +47,14 @@ export const lightColors = {
     surface: palette.white,
     surfaceSecondary: palette.gray[100],
     error: palette.error,
+    errorBg: '#fef2f2',
     success: palette.success,
+    successBg: '#dcfce7',
+    successText: '#16a34a',
     warning: palette.warning,
     info: palette.info,
+    invertedText: palette.white,
+    invertedBackground: palette.black,
 };
 export const darkColors = {
     primary: palette.primary[400],
@@ -63,7 +68,12 @@ export const darkColors = {
     surface: palette.gray[800],
     surfaceSecondary: palette.gray[700],
     error: palette.error,
+    errorBg: '#451a1a',
     success: palette.success,
+    successBg: '#052e16',
+    successText: '#86efac',
     warning: palette.warning,
     info: palette.info,
+    invertedText: palette.black,
+    invertedBackground: palette.white,
 };

package/package.json

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