@digilogiclabs/create-saas-app 1.0.1

package/src/templates/mobile/ui-auth-payments/template/app/(tabs)/billing.tsx

@@ -0,0 +1,743 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, ScrollView, Alert, RefreshControl, Animated } from 'react-native';
+import { useStripe } from '@stripe/stripe-react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { BlurView } from 'expo-blur';
+import * as Haptics from 'expo-haptics';
+
+// UI Components
+import {
+  NativeCard as Card,
+  NativeMobileContainer as MobileContainer,
+  NativeButton as Button,
+  NativeBadge as Badge,
+  NativePageTransition as PageTransition,
+  NativeModal as Modal,
+  NativeInput as Input,
+  NativeMobileHero as MobileHero,
+  NativePullToRefresh as PullToRefresh,
+  useTheme
+} from '@digilogiclabs/saas-factory-ui/native';
+
+// Payments Hook
+import { usePayments } from '@digilogiclabs/saas-factory-payments/native';
+
+// Icons
+import { 
+  CreditCard,
+  Plus,
+  Trash2,
+  Shield,
+  Calendar,
+  DollarSign,
+  Receipt,
+  Star
+} from 'react-native-heroicons/outline';
+
+interface PaymentMethod {
+  id: string;
+  type: 'card';
+  card: {
+    brand: string;
+    last4: string;
+    expiryMonth: number;
+    expiryYear: number;
+  };
+  isDefault: boolean;
+}
+
+interface Subscription {
+  id: string;
+  name: string;
+  price: number;
+  interval: 'month' | 'year';
+  status: 'active' | 'cancelled' | 'past_due';
+  currentPeriodEnd: string;
+  features: string[];
+}
+
+interface Invoice {
+  id: string;
+  number: string;
+  amount: number;
+  status: 'paid' | 'pending' | 'failed';
+  date: string;
+  dueDate: string;
+  description: string;
+}
+
+const mockPaymentMethods: PaymentMethod[] = [
+  {
+    id: '1',
+    type: 'card',
+    card: {
+      brand: 'visa',
+      last4: '4242',
+      expiryMonth: 12,
+      expiryYear: 2025
+    },
+    isDefault: true
+  },
+  {
+    id: '2',
+    type: 'card',
+    card: {
+      brand: 'mastercard',
+      last4: '5555',
+      expiryMonth: 8,
+      expiryYear: 2026
+    },
+    isDefault: false
+  }
+];
+
+const mockSubscription: Subscription = {
+  id: 'sub_1',
+  name: 'Pro Plan',
+  price: 29.99,
+  interval: 'month',
+  status: 'active',
+  currentPeriodEnd: '2024-02-15',
+  features: [
+    'Unlimited projects',
+    'Priority support',
+    'Advanced analytics',
+    'Custom integrations'
+  ]
+};
+
+const mockInvoices: Invoice[] = [
+  {
+    id: 'inv_1',
+    number: 'INV-001234',
+    amount: 29.99,
+    status: 'paid',
+    date: '2024-01-15',
+    dueDate: '2024-01-15',
+    description: 'Pro Plan - January 2024'
+  },
+  {
+    id: 'inv_2',
+    number: 'INV-001233',
+    amount: 29.99,
+    status: 'paid',
+    date: '2023-12-15',
+    dueDate: '2023-12-15',
+    description: 'Pro Plan - December 2023'
+  }
+];
+
+export default function BillingScreen() {
+  const { initPaymentSheet, presentPaymentSheet } = useStripe();
+  const { createPaymentMethod, deletePaymentMethod, updateSubscription } = usePayments();
+  const { theme, isDark } = useTheme();
+  
+  const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>(mockPaymentMethods);
+  const [subscription, setSubscription] = useState<Subscription | null>(mockSubscription);
+  const [invoices, setInvoices] = useState<Invoice[]>(mockInvoices);
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [showAddCard, setShowAddCard] = useState(false);
+  
+  // Animation values
+  const fadeAnim = useState(new Animated.Value(0))[0];
+  const slideAnim = useState(new Animated.Value(50))[0];
+
+  useEffect(() => {
+    // Entrance animations
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 600,
+        useNativeDriver: true,
+      }),
+      Animated.spring(slideAnim, {
+        toValue: 0,
+        tension: 50,
+        friction: 8,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, []);
+
+  const onRefresh = async () => {
+    setRefreshing(true);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    // Simulate refresh
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    setRefreshing(false);
+  };
+
+  const handleAddPaymentMethod = async () => {
+    try {
+      setLoading(true);
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      
+      const { error } = await initPaymentSheet({
+        merchantDisplayName: '{{titleCaseName}}',
+        paymentIntentClientSecret: 'your-payment-intent-client-secret',
+        setupIntentClientSecret: 'your-setup-intent-client-secret',
+        allowsDelayedPaymentMethods: true,
+        defaultBillingDetails: {
+          name: 'John Doe',
+        }
+      });
+
+      if (!error) {
+        const { error: presentError } = await presentPaymentSheet();
+
+        if (presentError) {
+          Alert.alert('Error', presentError.message);
+        } else {
+          Alert.alert('Success', 'Payment method added successfully!');
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+          // Refresh payment methods
+        }
+      }
+    } catch (error: any) {
+      Alert.alert('Error', error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDeletePaymentMethod = async (methodId: string) => {
+    Alert.alert(
+      'Delete Payment Method',
+      'Are you sure you want to delete this payment method?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: async () => {
+            try {
+              await deletePaymentMethod(methodId);
+              setPaymentMethods(prev => prev.filter(method => method.id !== methodId));
+              Alert.alert('Success', 'Payment method deleted successfully');
+            } catch (error: any) {
+              Alert.alert('Error', error.message);
+            }
+          }
+        }
+      ]
+    );
+  };
+
+  const handleSetDefaultPaymentMethod = async (methodId: string) => {
+    try {
+      // Update default payment method
+      setPaymentMethods(prev =>
+        prev.map(method => ({
+          ...method,
+          isDefault: method.id === methodId
+        }))
+      );
+      Alert.alert('Success', 'Default payment method updated');
+    } catch (error: any) {
+      Alert.alert('Error', error.message);
+    }
+  };
+
+  const renderPaymentMethod = (method: PaymentMethod) => (
+    <Card key={method.id} style={styles.paymentMethodCard}>
+      <View style={styles.paymentMethodHeader}>
+        <View style={styles.cardInfo}>
+          <View style={styles.cardBrand}>
+            <CreditCard width={24} height={24} color="#64748b" />
+            <Text style={styles.cardText}>
+              •••• •••• •••• {method.card.last4}
+            </Text>
+          </View>
+          <Text style={styles.cardExpiry}>
+            {String(method.card.expiryMonth).padStart(2, '0')}/{method.card.expiryYear}
+          </Text>
+        </View>
+        {method.isDefault && (
+          <Badge variant="success" style={styles.defaultBadge}>
+            <Star width={12} height={12} />
+            <Text>Default</Text>
+          </Badge>
+        )}
+      </View>
+      
+      <View style={styles.paymentMethodActions}>
+        {!method.isDefault && (
+          <Button
+            variant="outline"
+            size="sm"
+            onPress={() => handleSetDefaultPaymentMethod(method.id)}
+          >
+            Set as Default
+          </Button>
+        )}
+        <Button
+          variant="outline"
+          size="sm"
+          onPress={() => handleDeletePaymentMethod(method.id)}
+          style={styles.deleteButton}
+        >
+          <Trash2 width={16} height={16} color="#ef4444" />
+        </Button>
+      </View>
+    </Card>
+  );
+
+  const renderInvoice = (invoice: Invoice) => (
+    <Card key={invoice.id} style={styles.invoiceCard}>
+      <View style={styles.invoiceHeader}>
+        <View>
+          <Text style={styles.invoiceNumber}>{invoice.number}</Text>
+          <Text style={styles.invoiceDescription}>{invoice.description}</Text>
+        </View>
+        <Badge 
+          variant={invoice.status === 'paid' ? 'success' : invoice.status === 'pending' ? 'warning' : 'error'}
+        >
+          {invoice.status.toUpperCase()}
+        </Badge>
+      </View>
+      
+      <View style={styles.invoiceDetails}>
+        <View style={styles.invoiceAmount}>
+          <DollarSign width={16} height={16} color="#64748b" />
+          <Text style={styles.amountText}>${invoice.amount.toFixed(2)}</Text>
+        </View>
+        <View style={styles.invoiceDate}>
+          <Calendar width={16} height={16} color="#64748b" />
+          <Text style={styles.dateText}>{invoice.date}</Text>
+        </View>
+        <Button variant="ghost" size="sm">
+          <Receipt width={16} height={16} />
+          <Text>Download</Text>
+        </Button>
+      </View>
+    </Card>
+  );
+
+  return (
+    <PageTransition type="fade">
+      <View style={styles.mainContainer}>
+        {/* Enhanced gradient background with floating elements */}
+        <LinearGradient
+          colors={isDark 
+            ? ['#0F172A', '#1E293B', '#334155']
+            : ['#F8FAFC', '#E2E8F0', '#CBD5E1']
+          }
+          style={styles.gradientBackground}
+        />
+        
+        {/* Floating animated elements */}
+        <Animated.View style={[styles.floatingElement, styles.element1, {
+          opacity: fadeAnim,
+          transform: [{ translateY: slideAnim }]
+        }]}>
+          <LinearGradient
+            colors={['rgba(34, 197, 94, 0.3)', 'rgba(22, 163, 74, 0.3)']}
+            style={styles.gradientOrb}
+          />
+        </Animated.View>
+        
+        <Animated.View style={[styles.floatingElement, styles.element2, {
+          opacity: fadeAnim,
+          transform: [{ translateY: slideAnim }]
+        }]}>
+          <LinearGradient
+            colors={['rgba(59, 130, 246, 0.3)', 'rgba(37, 99, 235, 0.3)']}
+            style={styles.gradientOrb}
+          />
+        </Animated.View>
+
+        <PullToRefresh
+          onRefresh={onRefresh}
+          refreshing={refreshing}
+        >
+          <ScrollView 
+            style={styles.scrollView}
+            showsVerticalScrollIndicator={false}
+            refreshControl={
+              <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+            }
+          >
+            <MobileContainer style={styles.container}>
+              {/* Hero Section */}
+              <Animated.View style={{
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }]
+              }}>
+                <MobileHero
+                  badge={{
+                    text: "💳 Billing Center",
+                    variant: "secondary"
+                  }}
+                  title={{
+                    text: "Manage Payments",
+                    size: "lg"
+                  }}
+                  description="View your subscription, manage payment methods, and access billing history."
+                  className="text-center mb-6"
+                />
+              </Animated.View>
+              {/* Current Subscription with Glass Effect */}
+              {subscription && (
+                <Animated.View style={{
+                  opacity: fadeAnim,
+                  transform: [{ translateY: slideAnim }]
+                }}>
+                  <BlurView intensity={30} style={styles.subscriptionBlur}>
+                    <Card style={styles.subscriptionCard}>
+                      <View style={styles.subscriptionHeader}>
+                        <Text style={styles.subscriptionTitle}>{subscription.name}</Text>
+                        <Badge 
+                          variant={subscription.status === 'active' ? 'success' : 'error'}
+                          style={styles.statusBadge}
+                        >
+                          {subscription.status.toUpperCase()}
+                        </Badge>
+                      </View>
+                      
+                      <View style={styles.subscriptionPricing}>
+                        <Text style={styles.price}>
+                          ${subscription.price.toFixed(2)}
+                          <Text style={styles.interval}>/{subscription.interval}</Text>
+                        </Text>
+                        <Text style={styles.nextBilling}>
+                          Next billing: {subscription.currentPeriodEnd}
+                        </Text>
+                      </View>
+
+                      <View style={styles.features}>
+                        {subscription.features.map((feature, index) => (
+                          <View key={index} style={styles.feature}>
+                            <Shield width={16} height={16} color="#10b981" />
+                            <Text style={styles.featureText}>{feature}</Text>
+                          </View>
+                        ))}
+                      </View>
+
+                      <View style={styles.subscriptionActions}>
+                        <Button variant="outline" style={styles.actionButton}>
+                          Change Plan
+                        </Button>
+                        <Button variant="ghost" style={styles.actionButton}>
+                          Cancel Subscription
+                        </Button>
+                      </View>
+                    </Card>
+                  </BlurView>
+                </Animated.View>
+              )}
+
+              {/* Payment Methods with Glass Effect */}
+              <Animated.View style={[styles.section, {
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }]
+              }]}>
+                <View style={styles.sectionHeader}>
+                  <Text style={styles.sectionTitle}>Payment Methods</Text>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onPress={handleAddPaymentMethod}
+                    loading={loading}
+                  >
+                    <Plus width={16} height={16} />
+                    <Text>Add Card</Text>
+                  </Button>
+                </View>
+
+                {paymentMethods.map((method) => (
+                  <BlurView key={method.id} intensity={25} style={styles.paymentMethodBlur}>
+                    {renderPaymentMethod(method)}
+                  </BlurView>
+                ))}
+
+                {paymentMethods.length === 0 && (
+                  <BlurView intensity={20} style={styles.emptyStateBlur}>
+                    <Card style={styles.emptyState}>
+                      <CreditCard width={48} height={48} color="#94a3b8" />
+                      <Text style={styles.emptyTitle}>No payment methods</Text>
+                      <Text style={styles.emptySubtitle}>
+                        Add a payment method to continue
+                      </Text>
+                      <Button
+                        style={styles.addFirstCard}
+                        onPress={handleAddPaymentMethod}
+                        loading={loading}
+                      >
+                        Add Payment Method
+                      </Button>
+                    </Card>
+                  </BlurView>
+                )}
+              </Animated.View>
+
+              {/* Billing History with Glass Effect */}
+              <Animated.View style={[styles.section, {
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }]
+              }]}>
+                <Text style={styles.sectionTitle}>Billing History</Text>
+                {invoices.map((invoice) => (
+                  <BlurView key={invoice.id} intensity={25} style={styles.invoiceBlur}>
+                    {renderInvoice(invoice)}
+                  </BlurView>
+                ))}
+              </Animated.View>
+            </MobileContainer>
+          </ScrollView>
+        </PullToRefresh>
+      </View>
+    </PageTransition>
+  );
+}
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  gradientBackground: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+  floatingElement: {
+    position: 'absolute',
+    borderRadius: 100,
+  },
+  element1: {
+    top: 150,
+    right: 30,
+    width: 100,
+    height: 100,
+  },
+  element2: {
+    bottom: 300,
+    left: 50,
+    width: 80,
+    height: 80,
+  },
+  gradientOrb: {
+    flex: 1,
+    borderRadius: 100,
+  },
+  scrollView: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  container: {
+    padding: 16,
+    paddingBottom: 100,
+  },
+  subscriptionBlur: {
+    borderRadius: 20,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    marginBottom: 24,
+  },
+  subscriptionCard: {
+    padding: 20,
+    backgroundColor: 'transparent',
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  subscriptionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  subscriptionTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#1e293b',
+  },
+  statusBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  subscriptionPricing: {
+    marginBottom: 20,
+  },
+  price: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#1e293b',
+    marginBottom: 4,
+  },
+  interval: {
+    fontSize: 16,
+    fontWeight: 'normal',
+    color: '#64748b',
+  },
+  nextBilling: {
+    fontSize: 14,
+    color: '#64748b',
+  },
+  features: {
+    gap: 12,
+    marginBottom: 20,
+  },
+  feature: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  featureText: {
+    fontSize: 14,
+    color: '#374151',
+  },
+  subscriptionActions: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  actionButton: {
+    flex: 1,
+  },
+  section: {
+    marginBottom: 24,
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#1e293b',
+    marginBottom: 16,
+  },
+  paymentMethodBlur: {
+    borderRadius: 16,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    marginBottom: 12,
+  },
+  paymentMethodCard: {
+    padding: 16,
+    backgroundColor: 'transparent',
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  paymentMethodHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  cardInfo: {
+    flex: 1,
+  },
+  cardBrand: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginBottom: 4,
+  },
+  cardText: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#1e293b',
+  },
+  cardExpiry: {
+    fontSize: 14,
+    color: '#64748b',
+  },
+  defaultBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  paymentMethodActions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: 8,
+  },
+  deleteButton: {
+    borderColor: '#ef4444',
+  },
+  emptyStateBlur: {
+    borderRadius: 16,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+  },
+  emptyState: {
+    alignItems: 'center',
+    padding: 32,
+    backgroundColor: 'transparent',
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  emptyTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#64748b',
+    marginTop: 12,
+    marginBottom: 4,
+  },
+  emptySubtitle: {
+    fontSize: 14,
+    color: '#94a3b8',
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  addFirstCard: {
+    paddingHorizontal: 24,
+  },
+  invoiceBlur: {
+    borderRadius: 16,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    marginBottom: 12,
+  },
+  invoiceCard: {
+    padding: 16,
+    backgroundColor: 'transparent',
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  invoiceHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 12,
+  },
+  invoiceNumber: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1e293b',
+    marginBottom: 4,
+  },
+  invoiceDescription: {
+    fontSize: 14,
+    color: '#64748b',
+  },
+  invoiceDetails: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 16,
+  },
+  invoiceAmount: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  amountText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#1e293b',
+  },
+  invoiceDate: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  dateText: {
+    fontSize: 12,
+    color: '#64748b',
+  },
+});