vibefast-cli 0.4.0 → 0.5.1

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

@@ -0,0 +1,116 @@
+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/recipes/payments/apps/native/src/features/payments/components/paywall-product-card.tsx

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

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

@@ -0,0 +1,146 @@
+import type React from 'react';
+import { ActivityIndicator, Pressable, Text, View } from 'react-native';
+
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+type PaywallRemoteModeProps = {
+  onPresentPaywall: () => void;
+  isPurchasing: boolean;
+};
+
+export const PaywallRemoteMode: React.FC<PaywallRemoteModeProps> = ({
+  onPresentPaywall,
+  isPurchasing,
+}) => {
+  const theme = useThemeConfig();
+
+  return (
+    <View className="flex-1 px-4">
+      <View className="mb-8 items-center">
+        <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.remote.hero_title')}
+        </Text>
+        <Text
+          className="mb-8 text-center text-lg leading-6"
+          style={{ color: theme.colors.mutedForeground }}
+        >
+          {translate('paywall.remote.hero_subtitle')}
+        </Text>
+      </View>
+
+      <View
+        className="mb-6 rounded-3xl p-8"
+        style={{
+          backgroundColor: theme.colors.card,
+          shadowColor: theme.colors.primary,
+          shadowOffset: { width: 0, height: 20 },
+          shadowOpacity: 0.1,
+          shadowRadius: 30,
+          elevation: 8,
+        }}
+      >
+        <View className="mb-6 items-center">
+          <Text
+            className="mb-2 text-xl font-semibold"
+            style={{ color: theme.colors.foreground }}
+          >
+            {translate('paywall.remote.features_title')}
+          </Text>
+          <View
+            className="h-1 w-16 rounded-full"
+            style={{ backgroundColor: theme.colors.primary }}
+          />
+        </View>
+
+        <View className="gap-y-4">
+          <View className="flex-row items-center">
+            <View
+              className="mr-3 size-8 items-center justify-center rounded-full"
+              style={{ backgroundColor: `${theme.colors.success}20` }}
+            >
+              <Text className="text-sm">🎨</Text>
+            </View>
+            <Text style={{ color: theme.colors.mutedForeground }}>
+              {translate('paywall.remote.features.native_ui')}
+            </Text>
+          </View>
+          <View className="flex-row items-center">
+            <View
+              className="mr-3 size-8 items-center justify-center rounded-full"
+              style={{ backgroundColor: `${theme.colors.success}20` }}
+            >
+              <Text className="text-sm">🔄</Text>
+            </View>
+            <Text style={{ color: theme.colors.mutedForeground }}>
+              {translate('paywall.remote.features.realtime_updates')}
+            </Text>
+          </View>
+          <View className="flex-row items-center">
+            <View
+              className="mr-3 size-8 items-center justify-center rounded-full"
+              style={{ backgroundColor: `${theme.colors.success}20` }}
+            >
+              <Text className="text-sm">📱</Text>
+            </View>
+            <Text style={{ color: theme.colors.mutedForeground }}>
+              {translate('paywall.remote.features.mobile_optimized')}
+            </Text>
+          </View>
+        </View>
+      </View>
+
+      <Pressable
+        onPress={onPresentPaywall}
+        disabled={isPurchasing}
+        className="mb-4 items-center justify-center rounded-3xl py-6"
+        style={{
+          backgroundColor: isPurchasing
+            ? theme.colors.muted
+            : theme.colors.primary,
+          opacity: isPurchasing ? 0.6 : 1,
+          shadowColor: theme.colors.primary,
+          shadowOffset: { width: 0, height: 8 },
+          shadowOpacity: 0.3,
+          shadowRadius: 16,
+          elevation: 8,
+        }}
+      >
+        {isPurchasing ? (
+          <View className="flex-row items-center">
+            <ActivityIndicator
+              size="small"
+              color={theme.colors.primaryForeground}
+            />
+            <Text
+              className="ml-3 text-lg font-bold"
+              style={{ color: theme.colors.primaryForeground }}
+            >
+              {translate('common.loading')}
+            </Text>
+          </View>
+        ) : (
+          <Text
+            className="text-xl font-bold"
+            style={{ color: theme.colors.primaryForeground }}
+          >
+            {translate('paywall.remote.cta')}
+          </Text>
+        )}
+      </Pressable>
+    </View>
+  );
+};

package/recipes/payments/apps/native/src/features/payments/hooks/use-entitlement.ts

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+
+import { RevenueCatAdapter } from '@/features/payments/services/revenuecat-adapter';
+
+/**
+ * Hook to check if a user has a specific entitlement
+ * @param entitlementId - The entitlement identifier to check
+ * @returns Object containing entitlement status, loading state, and any error
+ */
+export const useEntitlement = (entitlementId: string) => {
+  const [isEntitled, setIsEntitled] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const checkEntitlement = async () => {
+      if (!entitlementId) {
+        if (!isMounted) return;
+        setIsEntitled(false);
+        setIsLoading(false);
+        return;
+      }
+
+      try {
+        if (!isMounted) return;
+        setIsLoading(true);
+        setError(null);
+
+        if (!RevenueCatAdapter.getIsInitialized()) {
+          await RevenueCatAdapter.initialize();
+        }
+
+        const paymentService = new RevenueCatAdapter();
+        const { isActive } =
+          await paymentService.getUserSubscriptionStatus(entitlementId);
+        if (!isMounted) return;
+        setIsEntitled(isActive);
+      } catch (e) {
+        if (!isMounted) return;
+        setIsEntitled(false); // Default to not entitled on error
+        setError(
+          e instanceof Error ? e.message : 'Failed to check entitlement',
+        );
+      } finally {
+        if (!isMounted) return;
+        setIsLoading(false);
+      }
+    };
+
+    checkEntitlement();
+
+    // Optional: Add listener for customer info updates from RevenueCat
+    // This would require implementing a listener mechanism in RevenueCatAdapter
+    // For now, we'll rely on component re-mounting or manual refresh
+    return () => {
+      isMounted = false;
+    };
+  }, [entitlementId]);
+
+  return { isEntitled, isLoading, error };
+};

package/recipes/payments/apps/native/src/features/payments/index.ts

@@ -0,0 +1,8 @@
+// Components
+export { PaymentInitializer } from './components/payment-initializer';
+
+// Hooks
+export { useEntitlement } from './hooks/use-entitlement';
+
+// Services
+export { RevenueCatAdapter } from './services/revenuecat-adapter';