vibefast-cli 0.7.0 → 0.7.1

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

@@ -1,194 +0,0 @@
-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/2/apps/native/src/features/payments/app/remote-paywall.tsx

@@ -1,79 +0,0 @@
-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/2/apps/native/src/features/payments/components/payment-initializer.tsx

@@ -1,95 +0,0 @@
-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/2/apps/native/src/features/payments/components/paywall-error-state.tsx

@@ -1,60 +0,0 @@
-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>
-    </>
-  );
-};

package/2/apps/native/src/features/payments/components/paywall-local-mode.tsx

@@ -1,116 +0,0 @@
-import type React from 'react';
-import { ActivityIndicator, ScrollView, Text, View } from 'react-native';
-
-import type { ProductOffering } from '@/core/payments/payment-service';
-import { translate } from '@/lib';
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-import { PaywallErrorState } from './paywall-error-state';
-import { PaywallProductCard } from './paywall-product-card';
-
-type PaywallLocalModeProps = {
-  isLoading: boolean;
-  error: string | null;
-  offerings: ProductOffering[];
-  onPurchase: (productId: string) => void;
-  onRetry: () => void;
-  onRestorePurchases: () => void;
-  isPurchasing: boolean;
-  primaryColor: string;
-};
-
-export const PaywallLocalMode: React.FC<PaywallLocalModeProps> = ({
-  isLoading,
-  error,
-  offerings,
-  onPurchase,
-  onRetry,
-  onRestorePurchases,
-  isPurchasing,
-  primaryColor,
-}) => {
-  const theme = useThemeConfig();
-
-  return (
-    <View className="flex-1">
-      <View className="mb-8 items-center px-4">
-        <View
-          className="mb-6 size-32 items-center justify-center rounded-full"
-          style={{
-            backgroundColor: `${theme.colors.primary}10`,
-            borderWidth: 3,
-            borderColor: theme.colors.primary,
-          }}
-        >
-          <Text className="text-6xl">✨</Text>
-        </View>
-        <Text
-          className="mb-4 text-center text-3xl font-bold"
-          style={{ color: theme.colors.foreground }}
-        >
-          {translate('paywall.title')}
-        </Text>
-        <Text
-          className="text-center text-lg leading-6"
-          style={{ color: theme.colors.mutedForeground }}
-        >
-          {translate('paywall.subtitle')}
-        </Text>
-      </View>
-
-      {isLoading && (
-        <View className="flex-1 items-center justify-center py-20">
-          <ActivityIndicator size="large" color={theme.colors.primary} />
-          <Text
-            className="mt-4 text-lg"
-            style={{ color: theme.colors.mutedForeground }}
-          >
-            {translate('paywall.loading')}
-          </Text>
-        </View>
-      )}
-
-      {error && !isLoading && (
-        <PaywallErrorState
-          error={error}
-          onRetry={onRetry}
-          onRestorePurchases={onRestorePurchases}
-          isRestoringPurchases={isPurchasing}
-        />
-      )}
-
-      {!isLoading && !error && offerings.length === 0 && (
-        <View className="mx-4 mb-6">
-          <View
-            className="rounded-2xl p-6"
-            style={{ backgroundColor: `${theme.colors.warning}10` }}
-          >
-            <Text
-              className="text-center"
-              style={{ color: theme.colors.warning }}
-            >
-              {translate('paywall.no_offerings')}
-            </Text>
-          </View>
-        </View>
-      )}
-
-      {!isLoading && !error && offerings.length > 0 && (
-        <ScrollView
-          showsVerticalScrollIndicator={false}
-          contentContainerStyle={{ paddingBottom: 20 }}
-        >
-          {offerings.map((offering) => (
-            <PaywallProductCard
-              key={offering.id}
-              offering={offering}
-              onPurchase={onPurchase}
-              isLoading={isPurchasing}
-              primaryColor={primaryColor}
-            />
-          ))}
-        </ScrollView>
-      )}
-    </View>
-  );
-};

package/2/apps/native/src/features/payments/components/paywall-product-card.tsx

@@ -1,133 +0,0 @@
-import type React from 'react';
-import { ActivityIndicator, Pressable, Text, View } from 'react-native';
-
-import type { ProductOffering } from '@/core/payments/payment-service';
-import { translate } from '@/lib';
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-type PaywallProductCardProps = {
-  offering: ProductOffering;
-  onPurchase: (productId: string) => void;
-  isLoading: boolean;
-  primaryColor: string;
-};
-
-export const PaywallProductCard: React.FC<PaywallProductCardProps> = ({
-  offering,
-  onPurchase,
-  isLoading,
-  primaryColor,
-}) => {
-  const theme = useThemeConfig();
-
-  return (
-    <View
-      key={offering.id}
-      className="mx-4 mb-6 overflow-hidden rounded-3xl"
-      style={{
-        backgroundColor: theme.colors.card,
-        shadowColor: theme.colors.primary,
-        shadowOffset: { width: 0, height: 20 },
-        shadowOpacity: 0.15,
-        shadowRadius: 40,
-        elevation: 8,
-      }}
-    >
-      {/* Popular Badge */}
-      <View
-        className="absolute right-6 top-0 z-10 rounded-b-2xl px-4 py-2"
-        style={{ backgroundColor: theme.colors.primary }}
-      >
-        <Text
-          className="text-xs font-bold"
-          style={{ color: theme.colors.primaryForeground }}
-        >
-          {translate('paywall.product_card.badge')}
-        </Text>
-      </View>
-
-      <View className="p-6 pt-8">
-        {/* Header */}
-        <View className="mb-6 items-center">
-          <View
-            className="mb-4 size-20 items-center justify-center rounded-full"
-            style={{
-              backgroundColor: `${primaryColor}20`,
-              borderWidth: 3,
-              borderColor: `${primaryColor}30`,
-            }}
-          >
-            <Text className="text-3xl">💎</Text>
-          </View>
-
-          <Text
-            className="mb-2 text-xl font-bold"
-            style={{ color: theme.colors.foreground }}
-          >
-            {translate('paywall.product_card.title')}
-          </Text>
-
-          <Text className="text-3xl font-black" style={{ color: primaryColor }}>
-            {offering.priceString}
-          </Text>
-        </View>
-
-        {/* Features */}
-        <View className="mb-6 space-y-3">
-          <View className="flex-row items-center">
-            <Text className="mr-2 text-base">✨</Text>
-            <Text
-              className="text-base"
-              style={{ color: theme.colors.mutedForeground }}
-            >
-              {translate('paywall.product_card.features.ai_generations')}
-            </Text>
-          </View>
-          <View className="flex-row items-center">
-            <Text className="mr-2 text-base">🚀</Text>
-            <Text
-              className="text-base"
-              style={{ color: theme.colors.mutedForeground }}
-            >
-              {translate('paywall.product_card.features.priority_processing')}
-            </Text>
-          </View>
-          <View className="flex-row items-center">
-            <Text className="mr-2 text-base">💫</Text>
-            <Text
-              className="text-base"
-              style={{ color: theme.colors.mutedForeground }}
-            >
-              {translate('paywall.product_card.features.advanced_models')}
-            </Text>
-          </View>
-        </View>
-
-        {/* Purchase Button */}
-        <Pressable
-          onPress={() => onPurchase(offering.id)}
-          disabled={isLoading}
-          className="items-center justify-center rounded-2xl py-4"
-          style={{
-            backgroundColor: primaryColor,
-            opacity: isLoading ? 0.7 : 1,
-          }}
-        >
-          {isLoading ? (
-            <ActivityIndicator
-              size="small"
-              color={theme.colors.primaryForeground}
-            />
-          ) : (
-            <Text
-              className="text-lg font-bold"
-              style={{ color: theme.colors.primaryForeground }}
-            >
-              {translate('paywall.product_card.cta')}
-            </Text>
-          )}
-        </Pressable>
-      </View>
-    </View>
-  );
-};