vibefast-cli 0.4.0 → 0.5.1

package/recipes/payments/apps/native/src/features/payments/README.md

@@ -0,0 +1,200 @@
+# Payments Feature - RevenueCat Integration
+
+This feature provides a complete RevenueCat integration for handling in-app purchases and subscriptions in your React Native Expo app.
+
+## Features
+
+- ✅ RevenueCat SDK initialization on app startup
+- ✅ Automatic user authentication sync with RevenueCat
+- ✅ Product offerings fetching
+- ✅ Purchase handling (subscriptions and consumable products)
+- ✅ Subscription status checking
+- ✅ Purchase restoration
+- ✅ Complete TypeScript support
+- ✅ Comprehensive error handling
+- ✅ Testing utilities
+
+## Setup
+
+### 1. Environment Variables
+
+Make sure your RevenueCat API keys are configured in your `.env.local` file:
+
+```env
+REVENUECAT_API_KEY_APPLE=your_apple_key_here
+REVENUECAT_API_KEY_GOOGLE=your_google_key_here
+```
+
+### 2. Automatic Initialization
+
+The `PaymentInitializer` component is already added to your app's root layout and will:
+
+- Initialize RevenueCat SDK on app startup
+- Automatically set user ID when users log in
+- Handle user logout from RevenueCat
+
+No additional setup required!
+
+## Usage
+
+### Checking User Entitlements
+
+Use the `useEntitlement` hook to check if a user has access to premium features:
+
+```tsx
+import { useEntitlement } from '@/features/payments';
+
+export const PremiumFeature = () => {
+  const { isEntitled, isLoading, error } = useEntitlement('premium');
+
+  if (isLoading) {
+    return <Text>Checking subscription...</Text>;
+  }
+
+  if (error) {
+    return <Text>Error: {error}</Text>;
+  }
+
+  if (!isEntitled) {
+    return <PaywallScreen />;
+  }
+
+  return <PremiumContent />;
+};
+```
+
+### Fetching Product Offerings
+
+```tsx
+import { RevenueCatAdapter } from '@/features/payments';
+
+const paymentService = new RevenueCatAdapter();
+
+// Fetch available products
+const offerings = await paymentService.fetchProductOfferings('remote');
+console.log('Available products:', offerings);
+```
+
+### Making Purchases
+
+```tsx
+import { RevenueCatAdapter } from '@/features/payments';
+
+const paymentService = new RevenueCatAdapter();
+
+// Purchase a subscription
+const result = await paymentService.purchaseProduct('premium_monthly');
+
+if (result.success) {
+  console.log('Purchase successful!');
+  // Handle successful purchase
+} else {
+  console.log('Purchase failed:', result.error);
+  // Handle error
+}
+```
+
+### Handling Consumable Products (Credits)
+
+For consumable products like credits, provide a callback to record the purchase:
+
+```tsx
+const result = await paymentService.purchaseProduct(
+  'credits_100',
+  undefined, // offering identifier (optional)
+  async ({ productId, quantity }) => {
+    // Record the credit purchase in your backend
+    await recordCreditPurchase(productId, quantity);
+  },
+);
+```
+
+### Restoring Purchases
+
+```tsx
+const result = await paymentService.restorePurchases();
+
+if (result.success) {
+  console.log('Restored entitlements:', result.restoredEntitlements);
+} else {
+  console.log('Restore failed:', result.error);
+}
+```
+
+## Architecture
+
+### Components
+
+- **`PaymentInitializer`** - Handles SDK initialization and user auth sync
+- **`useEntitlement`** - Hook for checking subscription status
+
+### Services
+
+- **`RevenueCatAdapter`** - Main service implementing the PaymentService interface
+- **`PaymentService`** - Core interface defined in `@/core/payments`
+
+### Key Features
+
+1. **Modular Design** - Uses adapter pattern for easy swapping of payment providers
+2. **Type Safety** - Full TypeScript support with proper types
+3. **Error Handling** - Graceful error handling with logging
+4. **Testing** - Comprehensive test coverage
+5. **Platform Support** - Works on both iOS and Android
+
+## Error Handling
+
+The integration includes comprehensive error handling:
+
+- SDK initialization failures won't crash the app
+- Purchase errors are returned as structured responses
+- All errors are logged for debugging
+- Network issues are handled gracefully
+
+## Testing
+
+Run the payment feature tests:
+
+```bash
+npm test src/features/payments
+```
+
+## Configuration
+
+### Product ID Patterns
+
+For consumable products (credits), the adapter automatically detects quantities based on product ID patterns:
+
+- `credits_100` → 100 credits
+- `100_credits` → 100 credits
+- `credit_50` → 50 credits
+
+### Entitlement IDs
+
+Make sure your entitlement identifiers in RevenueCat match what you use in the `useEntitlement` hook.
+
+## Troubleshooting
+
+### Common Issues
+
+1. **SDK Not Initialized Error**
+   - Ensure API keys are set in environment variables
+   - Check that `PaymentInitializer` is included in app root
+
+2. **Purchase Failures**
+   - Verify product IDs match your RevenueCat configuration
+   - Check that offerings are properly configured in RevenueCat dashboard
+
+3. **Entitlement Not Found**
+   - Ensure entitlement ID matches your RevenueCat configuration
+   - Check that user is properly logged in
+
+### Debug Logging
+
+In development mode, debug logs are automatically enabled. Check your console for detailed RevenueCat logs.
+
+## Next Steps
+
+1. Configure your products in the RevenueCat dashboard
+2. Set up your entitlements and offerings
+3. Test purchases in sandbox mode
+4. Implement your paywall UI using the provided hooks and services

package/recipes/payments/apps/native/src/features/payments/app/local-paywall.tsx

@@ -0,0 +1,194 @@
+import { useEffect, useState } from 'react';
+import {
+  ActivityIndicator,
+  Alert,
+  Pressable,
+  ScrollView,
+  Text,
+  View,
+} from 'react-native';
+
+import { paymentsApi } from '@/api-client/payments';
+import { FocusAwareStatusBar } from '@/components/ui';
+import type {
+  PaymentService,
+  ProductOffering,
+} from '@/core/payments/payment-service';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import { PaywallLocalMode } from '../components/paywall-local-mode';
+
+interface LocalPaywallProps {
+  paymentService: PaymentService;
+}
+
+export default function LocalPaywall({ paymentService }: LocalPaywallProps) {
+  const theme = useThemeConfig();
+  const [offerings, setOfferings] = useState<ProductOffering[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isPurchasing, setIsPurchasing] = useState(false);
+
+  // Convex mutation for recording consumable purchases
+  const recordConsumablePurchase = paymentsApi.useRecordConsumablePurchase();
+
+  useEffect(() => {
+    const loadOfferings = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const fetchedOfferings =
+          await paymentService.fetchProductOfferings('local');
+        setOfferings(fetchedOfferings);
+      } catch (e) {
+        setError(translate('paywall.errors.load_offerings'));
+        console.error('Error fetching offerings:', e);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadOfferings();
+  }, [paymentService]);
+
+  const handleLocalPurchase = async (productId: string) => {
+    try {
+      setIsPurchasing(true);
+      await paymentService.purchaseProduct(
+        productId,
+        undefined,
+        async (details) => {
+          try {
+            await recordConsumablePurchase({
+              productId: details.productId,
+              quantity: details.quantity,
+            });
+          } catch (error) {
+            console.error('Failed to record consumable purchase:', error);
+          }
+        },
+      );
+    } catch (e) {
+      const errorMessage = String(e);
+      if (
+        errorMessage.includes('userCancelled') ||
+        errorMessage.includes('User cancelled')
+      ) {
+        return;
+      }
+      Alert.alert(
+        translate('paywall.errors.purchase_failed_title'),
+        translate('paywall.errors.purchase_failed_message'),
+      );
+      console.error('Purchase error:', e);
+    } finally {
+      setIsPurchasing(false);
+    }
+  };
+
+  const handleRestorePurchases = async () => {
+    try {
+      setIsPurchasing(true);
+      const result = await paymentService.restorePurchases();
+
+      if (result.success) {
+        const restoredCount = result.restoredEntitlements?.length ?? 0;
+        const message =
+          restoredCount > 0
+            ? translate('paywall.restore.success_with_count', {
+                count: restoredCount,
+              })
+            : translate('paywall.restore.none');
+        Alert.alert(translate('paywall.restore.complete_title'), message);
+      } else {
+        Alert.alert(
+          translate('paywall.restore.failed_title'),
+          result.error ?? translate('paywall.restore.failed_message'),
+        );
+      }
+    } catch (e) {
+      Alert.alert(
+        translate('paywall.restore.failed_title'),
+        translate('paywall.restore.error_message'),
+      );
+      console.error('Restore purchases error:', e);
+    } finally {
+      setIsPurchasing(false);
+    }
+  };
+
+  const retryLoadOfferings = async () => {
+    setError(null);
+    setIsLoading(true);
+    try {
+      const fetchedOfferings =
+        await paymentService.fetchProductOfferings('local');
+      setOfferings(fetchedOfferings);
+    } catch {
+      setError(translate('paywall.errors.load_offerings'));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <View
+        className="flex-1"
+        style={{ backgroundColor: theme.colors.background }}
+      >
+        <ScrollView
+          className="flex-1"
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={{ paddingTop: 60, paddingBottom: 20 }}
+        >
+          <PaywallLocalMode
+            isLoading={isLoading}
+            error={error}
+            offerings={offerings}
+            onPurchase={handleLocalPurchase}
+            onRetry={retryLoadOfferings}
+            onRestorePurchases={handleRestorePurchases}
+            isPurchasing={isPurchasing}
+            primaryColor={theme.colors.primary}
+          />
+
+          {/* Restore Purchases Button */}
+          <View className="mx-4 mt-8">
+            <Pressable
+              onPress={handleRestorePurchases}
+              disabled={isPurchasing}
+              className="items-center py-3"
+            >
+              <Text
+                className="text-base"
+                style={{
+                  color: theme.colors.mutedForeground,
+                  opacity: isPurchasing ? 0.5 : 1,
+                }}
+              >
+                {translate('paywall.restore_purchases')}
+              </Text>
+            </Pressable>
+
+            {isPurchasing && (
+              <View className="mt-2 flex-row items-center justify-center">
+                <ActivityIndicator
+                  size="small"
+                  color={theme.colors.mutedForeground}
+                />
+                <Text
+                  className="ml-2"
+                  style={{ color: theme.colors.mutedForeground }}
+                >
+                  {translate('paywall.processing')}
+                </Text>
+              </View>
+            )}
+          </View>
+        </ScrollView>
+      </View>
+    </>
+  );
+}

package/recipes/payments/apps/native/src/features/payments/app/remote-paywall.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react';
+import { Alert, View } from 'react-native';
+import Purchases, {
+  type CustomerInfo,
+  type PurchasesOffering,
+} from 'react-native-purchases';
+import RevenueCatUI from 'react-native-purchases-ui';
+
+import { FocusAwareStatusBar } from '@/components/ui';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function RemotePaywall() {
+  const theme = useThemeConfig();
+  const [offering, setOffering] = useState<PurchasesOffering | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const loadOfferings = async () => {
+      try {
+        setIsLoading(true);
+        // Get offerings directly from RevenueCat to get the correct type
+        const offerings = await Purchases.getOfferings();
+        setOffering(offerings.current);
+      } catch (e) {
+        console.error('Error fetching offerings:', e);
+        Alert.alert(
+          translate('common.error'),
+          translate('paywall.errors.load_offerings'),
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadOfferings();
+  }, []);
+
+  const handleRestoreCompleted = ({
+    customerInfo,
+  }: {
+    customerInfo: CustomerInfo;
+  }) => {
+    console.log('Restore completed:', customerInfo);
+  };
+
+  if (isLoading) {
+    return (
+      <>
+        <FocusAwareStatusBar />
+        <View
+          className="flex-1 items-center justify-center"
+          style={{ backgroundColor: theme.colors.background }}
+        >
+          {/* Could add a loading spinner here */}
+        </View>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <View
+        className="flex-1"
+        style={{ backgroundColor: theme.colors.background }}
+      >
+        <RevenueCatUI.Paywall
+          options={{
+            offering: offering || undefined,
+          }}
+          onRestoreCompleted={handleRestoreCompleted}
+          onDismiss={() => {
+            // Handle dismiss - could navigate back or show completion
+          }}
+        />
+      </View>
+    </>
+  );
+}

package/recipes/payments/apps/native/src/features/payments/components/payment-initializer.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useRef } from 'react';
+
+import * as Logger from '@/core/logging';
+import { useAuthClientStore } from '@/lib/state';
+
+import { RevenueCatAdapter } from '../services/revenuecat-adapter';
+
+/**
+ * PaymentInitializer component that initializes RevenueCat SDK on app startup
+ * and manages user authentication state with RevenueCat.
+ * This component should be rendered at the root level of the app.
+ */
+export const PaymentInitializer = () => {
+  const { currentUser, isAuthenticated } = useAuthClientStore();
+  const previousAuthState = useRef<boolean | null>(null);
+  const previousUserId = useRef<string | null>(null);
+
+  // Initialize RevenueCat SDK on app startup
+  useEffect(() => {
+    const initializePayments = async () => {
+      try {
+        await RevenueCatAdapter.initialize();
+        Logger.info(
+          '[PaymentInitializer] RevenueCat SDK initialized successfully',
+        );
+      } catch (error) {
+        Logger.error(
+          '[PaymentInitializer] Failed to initialize RevenueCat SDK: ' +
+            String(error),
+        );
+        // Don't throw error here to prevent app crash
+        // The adapter will handle individual method calls gracefully
+      }
+    };
+
+    initializePayments();
+  }, []);
+
+  // Handle user authentication state changes (with Fast Refresh protection)
+  useEffect(() => {
+    const handleAuthStateChange = async () => {
+      if (!RevenueCatAdapter.getIsInitialized()) {
+        return; // SDK not ready yet
+      }
+
+      const currentUserId = currentUser?.id || null;
+
+      // Skip if this is the first run (initialization)
+      if (previousAuthState.current === null) {
+        previousAuthState.current = isAuthenticated;
+        previousUserId.current = currentUserId;
+        return;
+      }
+
+      // Only react to actual auth state changes, not Fast Refresh temporary states
+      const authStateChanged = previousAuthState.current !== isAuthenticated;
+      const userIdChanged = previousUserId.current !== currentUserId;
+
+      if (!authStateChanged && !userIdChanged) {
+        return; // No actual change
+      }
+
+      try {
+        if (isAuthenticated && currentUserId) {
+          // User logged in or switched users - set user ID in RevenueCat
+          await RevenueCatAdapter.setUserId(currentUserId);
+          Logger.info(
+            `[PaymentInitializer] User logged in to RevenueCat: ${currentUserId}`,
+          );
+        } else if (!isAuthenticated && previousAuthState.current === true) {
+          // TEMPORARILY DISABLED: Prevent RevenueCat logout during Fast Refresh
+          // This was causing auth session invalidation during development
+          // await RevenueCatAdapter.logOut();
+          Logger.info(
+            '[PaymentInitializer] Skipping RevenueCat logout to prevent Fast Refresh issues',
+          );
+        }
+
+        // Update previous state
+        previousAuthState.current = isAuthenticated;
+        previousUserId.current = currentUserId;
+      } catch (error) {
+        Logger.error(
+          '[PaymentInitializer] Failed to handle auth state change: ' +
+            String(error),
+        );
+      }
+    };
+
+    handleAuthStateChange();
+  }, [isAuthenticated, currentUser?.id]);
+
+  // This component doesn't render anything
+  return null;
+};

package/recipes/payments/apps/native/src/features/payments/components/paywall-error-state.tsx

@@ -0,0 +1,60 @@
+import type React from 'react';
+import { Text, View } from 'react-native';
+
+import { Button } from '@/components/ui';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+type PaywallErrorStateProps = {
+  error: string;
+  onRetry: () => void;
+  onRestorePurchases: () => void;
+  isRestoringPurchases: boolean;
+};
+
+export const PaywallErrorState: React.FC<PaywallErrorStateProps> = ({
+  error,
+  onRetry,
+  onRestorePurchases,
+  isRestoringPurchases,
+}) => {
+  const theme = useThemeConfig();
+
+  return (
+    <>
+      {/* Error Message */}
+      <View className="mx-4 mb-6">
+        <View
+          className="rounded-2xl p-6"
+          style={{ backgroundColor: `${theme.colors.destructive}10` }}
+        >
+          <Text
+            className="mb-4 text-center font-semibold"
+            style={{ color: theme.colors.destructive }}
+          >
+            {error || translate('paywall.errors.loading_title')}
+          </Text>
+          <Button
+            label={translate('paywall.retry')}
+            onPress={onRetry}
+            variant="outline"
+          />
+        </View>
+      </View>
+
+      {/* Restore Purchases */}
+      <View className="mx-4 mb-6">
+        <Button
+          label={
+            isRestoringPurchases
+              ? translate('paywall.processing')
+              : translate('paywall.restore_purchases')
+          }
+          onPress={onRestorePurchases}
+          disabled={isRestoringPurchases}
+          variant="outline"
+        />
+      </View>
+    </>
+  );
+};