@croacroa/react-native-template 2.1.0 → 3.2.0

package/components/ui/Paywall.tsx

@@ -0,0 +1,253 @@
+/**
+ * @fileoverview Paywall component for displaying subscription products
+ * Shows available products, feature highlights, and a restore purchases link.
+ * @module components/ui/Paywall
+ */
+
+import { View, Text, Pressable, ScrollView } from "react-native";
+import { useTranslation } from "react-i18next";
+import { cn } from "@/utils/cn";
+import { useProducts } from "@/hooks/useProducts";
+import { usePurchase } from "@/hooks/usePurchase";
+import { Skeleton, SkeletonText } from "@/components/ui/Skeleton";
+import { Button } from "@/components/ui/Button";
+import type { Product, Purchase } from "@/services/payments/types";
+
+// ============================================================================
+// Props
+// ============================================================================
+
+interface PaywallProps {
+  /** Product IDs to display (must match store product IDs) */
+  productIds: string[];
+  /** Optional list of feature descriptions to display */
+  features?: string[];
+  /** Paywall title */
+  title?: string;
+  /** Paywall subtitle */
+  subtitle?: string;
+  /** Called after a successful purchase */
+  onPurchaseSuccess?: (purchase: Purchase) => void;
+  /** Called after a successful restore */
+  onRestore?: (purchases: Purchase[]) => void;
+  /** Additional className for the outer container */
+  className?: string;
+}
+
+// ============================================================================
+// Sub-components
+// ============================================================================
+
+/** Loading skeleton shown while products are being fetched */
+function PaywallSkeleton() {
+  return (
+    <View className="gap-4 px-6">
+      <Skeleton height={28} width="60%" />
+      <SkeletonText width="80%" />
+      <View className="mt-4 gap-3">
+        <Skeleton height={120} borderRadius={16} />
+        <Skeleton height={120} borderRadius={16} />
+      </View>
+    </View>
+  );
+}
+
+/** Feature list item with a checkmark icon */
+function FeatureItem({ text }: { text: string }) {
+  return (
+    <View className="flex-row items-center gap-3">
+      <View className="h-6 w-6 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
+        <Text className="text-sm text-green-600 dark:text-green-400">
+          {"\u2713"}
+        </Text>
+      </View>
+      <Text className="flex-1 text-base text-text-light dark:text-text-dark">
+        {text}
+      </Text>
+    </View>
+  );
+}
+
+/** Card displaying a single product option */
+function ProductCard({
+  product,
+  onPress,
+  isLoading,
+}: {
+  product: Product;
+  onPress: () => void;
+  isLoading: boolean;
+}) {
+  const isYearly = product.subscriptionPeriod === "yearly";
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={isLoading}
+      className={cn(
+        "rounded-2xl border-2 p-4",
+        isYearly
+          ? "border-primary-600 bg-primary-50 dark:bg-primary-950"
+          : "border-gray-200 bg-surface-light dark:border-gray-700 dark:bg-surface-dark"
+      )}
+    >
+      {isYearly && (
+        <View className="mb-2 self-start rounded-full bg-primary-600 px-3 py-1">
+          <Text className="text-xs font-bold text-white">BEST VALUE</Text>
+        </View>
+      )}
+
+      <Text className="text-lg font-bold text-text-light dark:text-text-dark">
+        {product.title}
+      </Text>
+
+      <Text className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+        {product.description}
+      </Text>
+
+      <View className="mt-3 flex-row items-baseline gap-1">
+        <Text className="text-2xl font-bold text-primary-600 dark:text-primary-400">
+          {product.priceString}
+        </Text>
+        {product.subscriptionPeriod && (
+          <Text className="text-sm text-gray-500 dark:text-gray-400">
+            /{product.subscriptionPeriod === "monthly" ? "mo" : "yr"}
+          </Text>
+        )}
+      </View>
+
+      <Button className="mt-3" isLoading={isLoading} onPress={onPress}>
+        {isYearly ? "Subscribe & Save" : "Subscribe"}
+      </Button>
+    </Pressable>
+  );
+}
+
+// ============================================================================
+// Paywall Component
+// ============================================================================
+
+/**
+ * Full-screen paywall component for presenting subscription options.
+ *
+ * Features:
+ * - Loads products from the payment adapter via useProducts
+ * - Shows a loading skeleton while products are being fetched
+ * - Displays a features list with checkmark icons
+ * - Maps products to selectable ProductCard sub-components
+ * - Includes a "Restore Purchases" link at the bottom
+ *
+ * @example
+ * ```tsx
+ * <Paywall
+ *   productIds={["premium_monthly", "premium_yearly"]}
+ *   title="Go Premium"
+ *   subtitle="Unlock all features and remove ads"
+ *   features={["Unlimited access", "No ads", "Priority support"]}
+ *   onPurchaseSuccess={(purchase) => router.back()}
+ * />
+ * ```
+ */
+export function Paywall({
+  productIds,
+  features,
+  title,
+  subtitle,
+  onPurchaseSuccess,
+  onRestore,
+  className,
+}: PaywallProps) {
+  const { t } = useTranslation();
+  const resolvedTitle = title ?? t("payments.upgradeToPremium");
+  const resolvedSubtitle =
+    subtitle ??
+    "Unlock all features and take your experience to the next level.";
+  const { data: products, isLoading: productsLoading } =
+    useProducts(productIds);
+  const { purchase, restore, isLoading: purchaseLoading } = usePurchase();
+
+  const handlePurchase = async (productId: string) => {
+    const result = await purchase(productId);
+    if (result) {
+      onPurchaseSuccess?.(result);
+    }
+  };
+
+  const handleRestore = async () => {
+    const restored = await restore();
+    if (restored.length > 0) {
+      onRestore?.(restored);
+    }
+  };
+
+  // Loading state
+  if (productsLoading) {
+    return <PaywallSkeleton />;
+  }
+
+  return (
+    <ScrollView
+      className={cn("flex-1", className)}
+      contentContainerClassName="px-6 py-8"
+      showsVerticalScrollIndicator={false}
+    >
+      {/* Header */}
+      <View className="mb-6">
+        <Text className="text-2xl font-bold text-text-light dark:text-text-dark">
+          {resolvedTitle}
+        </Text>
+        <Text className="mt-2 text-base text-gray-500 dark:text-gray-400">
+          {resolvedSubtitle}
+        </Text>
+      </View>
+
+      {/* Features */}
+      {features && features.length > 0 && (
+        <View className="mb-6 gap-3">
+          {features.map((feature) => (
+            <FeatureItem key={feature} text={feature} />
+          ))}
+        </View>
+      )}
+
+      {/* Products */}
+      <View className="gap-4">
+        {products?.map((product) => (
+          <ProductCard
+            key={product.id}
+            product={product}
+            onPress={() => handlePurchase(product.id)}
+            isLoading={purchaseLoading}
+          />
+        ))}
+      </View>
+
+      {/* Empty state */}
+      {(!products || products.length === 0) && !productsLoading && (
+        <View className="items-center py-8">
+          <Text className="text-base text-gray-500 dark:text-gray-400">
+            No products available at the moment.
+          </Text>
+        </View>
+      )}
+
+      {/* Restore purchases */}
+      <Pressable
+        onPress={handleRestore}
+        disabled={purchaseLoading}
+        className="mt-6 items-center py-3"
+      >
+        <Text
+          className={cn(
+            "text-sm",
+            purchaseLoading
+              ? "text-gray-400 dark:text-gray-600"
+              : "text-primary-600 dark:text-primary-400"
+          )}
+        >
+          {t("payments.restore")}
+        </Text>
+      </Pressable>
+    </ScrollView>
+  );
+}

package/components/ui/PermissionGate.tsx

@@ -0,0 +1,155 @@
+/**
+ * @fileoverview Permission-gated content component
+ * Renders children only when a specific permission is granted,
+ * otherwise shows a configurable permission request UI.
+ * @module components/ui/PermissionGate
+ */
+
+import { ReactNode } from "react";
+import { View, Text, ActivityIndicator } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useTranslation } from "react-i18next";
+
+import { usePermission } from "@/hooks/usePermission";
+import { useTheme } from "@/hooks";
+import { Button } from "@/components/ui/Button";
+import type {
+  PermissionType,
+  PermissionConfig,
+} from "@/services/permissions/types";
+
+interface PermissionGateProps {
+  /** The permission type required to show children */
+  type: PermissionType;
+  /** Optional custom permission config to override defaults */
+  config?: Partial<PermissionConfig>;
+  /** Content to render when permission is granted */
+  children: ReactNode;
+  /** Custom fallback to render when permission is not granted */
+  fallback?: ReactNode;
+}
+
+/**
+ * Component that gates content behind a permission check.
+ * Shows children when the permission is granted, otherwise displays
+ * a permission request UI (or a custom fallback).
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <PermissionGate type="camera">
+ *   <CameraView />
+ * </PermissionGate>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom config
+ * <PermissionGate
+ *   type="location"
+ *   config={{
+ *     title: "Find Nearby Places",
+ *     message: "Allow location access to discover restaurants near you.",
+ *   }}
+ * >
+ *   <MapView />
+ * </PermissionGate>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom fallback
+ * <PermissionGate
+ *   type="notifications"
+ *   fallback={<Text>Notifications are disabled</Text>}
+ * >
+ *   <NotificationsList />
+ * </PermissionGate>
+ * ```
+ */
+export function PermissionGate({
+  type,
+  config: customConfig,
+  children,
+  fallback,
+}: PermissionGateProps) {
+  const { isGranted, isBlocked, isLoading, config, request, openSettings } =
+    usePermission(type, customConfig);
+  const { isDark } = useTheme();
+  const { t } = useTranslation();
+
+  // Show loading state while checking permission
+  if (isLoading) {
+    return (
+      <View className="flex-1 items-center justify-center bg-background-light dark:bg-background-dark">
+        <ActivityIndicator
+          size="large"
+          color={isDark ? "#f8fafc" : "#0f172a"}
+        />
+      </View>
+    );
+  }
+
+  // Permission is granted — render children
+  if (isGranted) {
+    return <>{children}</>;
+  }
+
+  // Permission not granted — show fallback or default UI
+  if (fallback) {
+    return <>{fallback}</>;
+  }
+
+  return (
+    <View className="flex-1 items-center justify-center px-8 bg-background-light dark:bg-background-dark">
+      <View className="w-full items-center rounded-2xl bg-surface-light dark:bg-surface-dark p-8">
+        {/* Icon */}
+        <View className="mb-6 h-20 w-20 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900">
+          <Ionicons
+            name={config.icon as keyof typeof Ionicons.glyphMap}
+            size={36}
+            color={isDark ? "#34d399" : "#059669"}
+          />
+        </View>
+
+        {/* Title */}
+        <Text className="mb-3 text-center text-xl font-bold text-text-light dark:text-text-dark">
+          {config.title}
+        </Text>
+
+        {/* Message */}
+        <Text className="mb-8 text-center text-base leading-6 text-muted-light dark:text-muted-dark">
+          {config.message}
+        </Text>
+
+        {/* Action Button */}
+        {isBlocked ? (
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-full"
+            onPress={openSettings}
+          >
+            {t("permissions.openSettings")}
+          </Button>
+        ) : (
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-full"
+            onPress={request}
+          >
+            {t("permissions.allowAccess")}
+          </Button>
+        )}
+
+        {/* Secondary hint for blocked state */}
+        {isBlocked && (
+          <Text className="mt-4 text-center text-sm text-muted-light dark:text-muted-dark">
+            Permission was denied. Please enable it in your device settings.
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+}

package/components/ui/PurchaseButton.tsx

@@ -0,0 +1,84 @@
+/**
+ * @fileoverview Standalone purchase button component
+ * Wraps the Button component with purchase flow logic.
+ * @module components/ui/PurchaseButton
+ */
+
+import { useCallback } from "react";
+import { Button } from "@/components/ui/Button";
+import { usePurchase } from "@/hooks/usePurchase";
+import type { Purchase } from "@/services/payments/types";
+import type { PressableProps } from "react-native";
+
+// ============================================================================
+// Props
+// ============================================================================
+
+interface PurchaseButtonProps extends Omit<
+  PressableProps,
+  "onPress" | "children"
+> {
+  /** The product ID to purchase */
+  productId: string;
+  /** Button label text */
+  label?: string;
+  /** Called after a successful purchase */
+  onSuccess?: (purchase: Purchase) => void;
+  /** Called when a purchase fails */
+  onError?: (error: Error) => void;
+  /** Additional className for the button */
+  className?: string;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * A button that initiates an in-app purchase when pressed.
+ * Delegates rendering to the Button component and handles loading state
+ * automatically via the usePurchase hook.
+ *
+ * @example
+ * ```tsx
+ * <PurchaseButton
+ *   productId="premium_monthly"
+ *   label="Subscribe Now"
+ *   onSuccess={(purchase) => console.log("Purchased!", purchase.id)}
+ *   onError={(error) => Alert.alert("Error", error.message)}
+ * />
+ * ```
+ */
+export function PurchaseButton({
+  productId,
+  label = "Subscribe",
+  onSuccess,
+  onError,
+  className,
+  ...props
+}: PurchaseButtonProps) {
+  const { purchase, isLoading, error } = usePurchase();
+
+  const handlePress = useCallback(async () => {
+    const result = await purchase(productId);
+
+    if (result) {
+      onSuccess?.(result);
+    } else if (error) {
+      // Only call onError when the hook recorded an actual error.
+      // A null result without an error means the user cancelled.
+      onError?.(error);
+    }
+  }, [productId, purchase, onSuccess, onError, error]);
+
+  return (
+    <Button
+      onPress={handlePress}
+      isLoading={isLoading}
+      className={className}
+      {...props}
+    >
+      {label}
+    </Button>
+  );
+}