@digilogiclabs/create-saas-app 1.14.0 → 1.17.0

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

@@ -0,0 +1,580 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, ScrollView, Alert, RefreshControl, Animated } from 'react-native';
+import { router } from 'expo-router';
+import { useAuth } from '@digilogiclabs/saas-factory-auth/native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { BlurView } from 'expo-blur';
+import * as Haptics from 'expo-haptics';
+
+// UI Components - Updated for v0.22.0
+import {
+  NativeCard as Card,
+  NativeMobileContainer as MobileContainer,
+  NativeButton as Button,
+  NativeAvatar as Avatar,
+  NativeListItem as ListItem,
+  PageTransition,
+  NativeSwitch as Switch,
+  LazyImage,
+  ProgressiveImage,
+  PullToRefresh,
+  NativeMobileHero as MobileHero,
+  NativeFeatureHighlight,
+  useTheme
+} from '@digilogiclabs/saas-factory-ui/native';
+
+// Icons
+import { 
+  User,
+  Settings,
+  Bell,
+  Shield,
+  HelpCircle,
+  LogOut,
+  ChevronRight,
+  Camera,
+  Mail,
+  Phone,
+  MapPin,
+  Calendar
+} from 'react-native-heroicons/outline';
+
+export default function ProfileScreen() {
+  const { user, signOut, updateProfile } = useAuth();
+  const { theme, isDark } = useTheme();
+  const [notificationsEnabled, setNotificationsEnabled] = useState(true);
+  const [emailUpdates, setEmailUpdates] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  
+  // Animation values
+  const fadeAnim = useState(new Animated.Value(0))[0];
+  const slideAnim = useState(new Animated.Value(50))[0];
+
+  const handleSignOut = () => {
+    Alert.alert(
+      'Sign Out',
+      'Are you sure you want to sign out?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        {
+          text: 'Sign Out',
+          style: 'destructive',
+          onPress: async () => {
+            try {
+              await signOut();
+              router.replace('/auth/login');
+            } catch (error: any) {
+              Alert.alert('Error', error.message);
+            }
+          }
+        }
+      ]
+    );
+  };
+
+  const handleEditProfile = () => {
+    router.push('/profile/edit');
+  };
+
+  const handleChangeAvatar = () => {
+    Alert.alert(
+      'Change Profile Photo',
+      'Choose an option',
+      [
+        { text: 'Camera', onPress: () => {/* Open camera */} },
+        { text: 'Photo Library', onPress: () => {/* Open library */} },
+        { text: 'Cancel', style: 'cancel' }
+      ]
+    );
+  };
+
+  const menuItems = [
+    {
+      id: 'edit-profile',
+      title: 'Edit Profile',
+      icon: <User width={20} height={20} color="#64748b" />,
+      onPress: handleEditProfile
+    },
+    {
+      id: 'settings',
+      title: 'Settings',
+      icon: <Settings width={20} height={20} color="#64748b" />,
+      onPress: () => router.push('/settings')
+    },
+    {
+      id: 'billing',
+      title: 'Billing & Payments',
+      icon: <Settings width={20} height={20} color="#64748b" />,
+      onPress: () => router.push('/billing')
+    },
+    {
+      id: 'security',
+      title: 'Security & Privacy',
+      icon: <Shield width={20} height={20} color="#64748b" />,
+      onPress: () => router.push('/profile/security')
+    },
+    {
+      id: 'help',
+      title: 'Help & Support',
+      icon: <HelpCircle width={20} height={20} color="#64748b" />,
+      onPress: () => router.push('/profile/help')
+    }
+  ];
+
+  const onRefresh = async () => {
+    setRefreshing(true);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    // Simulate refresh
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    setRefreshing(false);
+  };
+
+  React.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();
+  }, []);
+
+  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(99, 102, 241, 0.3)', 'rgba(79, 70, 229, 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: "👤 Your Profile",
+                    variant: "secondary"
+                  }}
+                  title={{
+                    text: "Account Settings",
+                    size: "lg"
+                  }}
+                  description="Manage your account, preferences, and security settings."
+                  className="text-center mb-6"
+                />
+              </Animated.View>
+
+              {/* Enhanced Profile Header with Glass Effect */}
+              <Animated.View style={{
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }]
+              }}>
+                <BlurView intensity={30} style={styles.profileCardBlur}>
+                  <Card style={styles.profileCard}>
+                    <View style={styles.profileHeader}>
+                      <View style={styles.avatarContainer}>
+                        <NativeFeatureHighlight
+                          target="profile-avatar"
+                          title="Profile Photo"
+                          content="Tap to change your profile photo"
+                          placement="bottom"
+                        >
+                          {user?.avatar ? (
+                            <ProgressiveImage
+                              source={{ uri: user.avatar }}
+                              placeholder={{ uri: 'https://via.placeholder.com/100x100/e2e8f0/64748b?text=Loading...' }}
+                              style={styles.profileImage}
+                              resizeMode="cover"
+                              fadeDuration={300}
+                              loadingIndicator={true}
+                            />
+                          ) : (
+                            <Avatar
+                              initials={user?.name?.charAt(0) || user?.email?.charAt(0) || 'U'}
+                              size="xl"
+                              style={styles.avatar}
+                            />
+                          )}
+                        </NativeFeatureHighlight>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          style={styles.cameraButton}
+                          onPress={handleChangeAvatar}
+                        >
+                          <Camera width={16} height={16} />
+                        </Button>
+                      </View>
+                      
+                      <View style={styles.profileInfo}>
+                        <Text style={styles.userName}>
+                          {user?.name || 'User Name'}
+                        </Text>
+                        <Text style={styles.userEmail}>
+                          {user?.email || 'user@example.com'}
+                        </Text>
+                        
+                        {/* User Details */}
+                        <View style={styles.userDetails}>
+                          {user?.phone && (
+                            <View style={styles.detailItem}>
+                              <Phone width={14} height={14} color="#64748b" />
+                              <Text style={styles.detailText}>{user.phone}</Text>
+                            </View>
+                          )}
+                          {user?.location && (
+                            <View style={styles.detailItem}>
+                              <MapPin width={14} height={14} color="#64748b" />
+                              <Text style={styles.detailText}>{user.location}</Text>
+                            </View>
+                          )}
+                          <View style={styles.detailItem}>
+                            <Calendar width={14} height={14} color="#64748b" />
+                            <Text style={styles.detailText}>
+                              Joined {new Date(user?.created_at || Date.now()).toLocaleDateString()}
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+
+                    <Button
+                      variant="outline"
+                      style={styles.editButton}
+                      onPress={handleEditProfile}
+                    >
+                      Edit Profile
+                    </Button>
+                  </Card>
+                </BlurView>
+              </Animated.View>
+
+              {/* Enhanced Menu Items with Glass Effects */}
+              <Animated.View style={{
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }]
+              }}>
+                {menuItems.map((item, index) => (
+                  <BlurView key={item.id} intensity={25} style={[styles.menuItemBlur, { marginBottom: 12 }]}>
+                    <ListItem
+                      leftIcon={item.icon}
+                      title={item.title}
+                      rightIcon={<ChevronRight width={16} height={16} color="#94a3b8" />}
+                      onPress={item.onPress}
+                      style={styles.menuItem}
+                    />
+                  </BlurView>
+                ))}
+              </Animated.View>
+
+              {/* Enhanced Preferences with Glass Effect */}
+              <Animated.View style={{
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }]
+              }}>
+                <BlurView intensity={25} style={styles.preferencesBlur}>
+                  <Card style={styles.preferencesCard}>
+                    <Text style={styles.sectionTitle}>Preferences</Text>
+                    
+                    <View style={styles.preferenceItem}>
+                      <View style={styles.preferenceInfo}>
+                        <Bell width={20} height={20} color="#64748b" />
+                        <View>
+                          <Text style={styles.preferenceTitle}>Push Notifications</Text>
+                          <Text style={styles.preferenceDescription}>
+                            Get notified about orders and updates
+                          </Text>
+                        </View>
+                      </View>
+                      <Switch
+                        value={notificationsEnabled}
+                        onValueChange={setNotificationsEnabled}
+                      />
+                    </View>
+
+                    <View style={styles.preferenceItem}>
+                      <View style={styles.preferenceInfo}>
+                        <Mail width={20} height={20} color="#64748b" />
+                        <View>
+                          <Text style={styles.preferenceTitle}>Email Updates</Text>
+                          <Text style={styles.preferenceDescription}>
+                            Receive promotional emails and newsletters
+                          </Text>
+                        </View>
+                      </View>
+                      <Switch
+                        value={emailUpdates}
+                        onValueChange={setEmailUpdates}
+                      />
+                    </View>
+                  </Card>
+                </BlurView>
+              </Animated.View>
+
+              {/* Enhanced Sign Out with Glass Effect */}
+              <Animated.View style={{
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }]
+              }}>
+                <BlurView intensity={20} style={styles.signOutBlur}>
+                  <Card style={styles.actionsCard}>
+                    <ListItem
+                      leftIcon={<LogOut width={20} height={20} color="#ef4444" />}
+                      title="Sign Out"
+                      titleStyle={styles.signOutText}
+                      onPress={handleSignOut}
+                      style={styles.signOutItem}
+                    />
+                  </Card>
+                </BlurView>
+              </Animated.View>
+
+              {/* App Info */}
+              <View style={styles.appInfo}>
+                <Text style={styles.appInfoText}>{{titleCaseName}} v1.0.0</Text>
+                <Text style={styles.appInfoText}>Made with ❤️ by Your Team</Text>
+              </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: 200,
+    right: 20,
+    width: 120,
+    height: 120,
+  },
+  gradientOrb: {
+    flex: 1,
+    borderRadius: 100,
+  },
+  scrollView: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  container: {
+    padding: 16,
+    paddingBottom: 100,
+  },
+  profileCardBlur: {
+    borderRadius: 20,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    marginBottom: 16,
+  },
+  profileCard: {
+    padding: 20,
+    backgroundColor: 'transparent',
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  profileHeader: {
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  avatarContainer: {
+    position: 'relative',
+    marginBottom: 16,
+  },
+  avatar: {
+    marginBottom: 0,
+  },
+  cameraButton: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    padding: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  profileInfo: {
+    alignItems: 'center',
+  },
+  userName: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#1e293b',
+    marginBottom: 4,
+  },
+  userEmail: {
+    fontSize: 16,
+    color: '#64748b',
+    marginBottom: 12,
+  },
+  userDetails: {
+    alignItems: 'center',
+    gap: 6,
+  },
+  detailItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  detailText: {
+    fontSize: 14,
+    color: '#64748b',
+  },
+  editButton: {
+    marginTop: 8,
+  },
+  profileImage: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+  },
+  menuItemBlur: {
+    borderRadius: 16,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+  },
+  preferencesBlur: {
+    borderRadius: 20,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    marginBottom: 16,
+  },
+  preferencesCard: {
+    padding: 20,
+    backgroundColor: 'transparent',
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  signOutBlur: {
+    borderRadius: 16,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    marginBottom: 16,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1e293b',
+    marginBottom: 16,
+  },
+  preferenceItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f1f5f9',
+  },
+  preferenceInfo: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  preferenceTitle: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#1e293b',
+    marginBottom: 2,
+  },
+  preferenceDescription: {
+    fontSize: 14,
+    color: '#64748b',
+  },
+  menuCard: {
+    marginBottom: 16,
+    overflow: 'hidden',
+  },
+  menuItem: {
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f1f5f9',
+  },
+  lastMenuItem: {
+    borderBottomWidth: 0,
+  },
+  actionsCard: {
+    padding: 16,
+    backgroundColor: 'transparent',
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  menuItem: {
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    backgroundColor: 'transparent',
+    borderBottomWidth: 0,
+  },
+  signOutItem: {
+    paddingVertical: 12,
+    paddingHorizontal: 0,
+  },
+  signOutText: {
+    color: '#ef4444',
+    fontWeight: '500',
+  },
+  appInfo: {
+    alignItems: 'center',
+    paddingVertical: 16,
+    gap: 4,
+  },
+  appInfoText: {
+    fontSize: 12,
+    color: '#94a3b8',
+  },
+});

package/src/templates/mobile/ui-auth-payments/template/app/_layout.tsx

@@ -0,0 +1,125 @@
+import { useEffect } from 'react';
+import { useFonts } from 'expo-font';
+import { SplashScreen, Stack } from 'expo-router';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { StatusBar } from 'expo-status-bar';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { StripeProvider } from '@stripe/stripe-react-native';
+
+// UI Library Providers
+import { 
+  NativeThemeProvider as ThemeProvider,
+  OfflineWrapper,
+  NetworkAwareContent,
+  NativeHapticsProvider as HapticsProvider,
+  AppShell
+} from '@digilogiclabs/saas-factory-ui/native';
+
+// Auth Provider
+import { AuthProvider } from '@digilogiclabs/saas-factory-auth/native';
+
+// Prevent the splash screen from auto-hiding before asset loading is complete
+SplashScreen.preventAutoHideAsync();
+
+export default function RootLayout() {
+  const [loaded, error] = useFonts({
+    // Add your custom fonts here
+  });
+
+  // Expo Router uses Error Boundaries to catch errors in the navigation tree
+  useEffect(() => {
+    if (error) throw error;
+  }, [error]);
+
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded]);
+
+  if (!loaded) {
+    return null;
+  }
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <SafeAreaProvider>
+        <ThemeProvider>
+          <HapticsProvider>
+            <OfflineWrapper
+              cacheStrategy="stale-while-revalidate"
+              showOfflineIndicator={true}
+              backgroundSync={true}
+            >
+              <NetworkAwareContent>
+                <AuthProvider
+                  supabaseUrl={process.env.EXPO_PUBLIC_SUPABASE_URL!}
+                  supabaseAnonKey={process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!}
+                >
+                  <StripeProvider
+                    publishableKey={process.env.EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY!}
+                    merchantIdentifier="merchant.com.{{packageName}}.app"
+                  >
+                    <AppShell
+                      navigationMode="tabs"
+                      showHeader={true}
+                      headerConfig={{
+                        title: "{{titleCaseName}}",
+                        showBackButton: false,
+                        showProfileButton: true
+                      }}
+                    >
+                      <Stack
+                        screenOptions={{
+                          headerShown: false,
+                          animation: 'slide_from_right',
+                          animationTypeForReplace: 'push'
+                        }}
+                      >
+                        <Stack.Screen 
+                          name="(tabs)" 
+                          options={{ headerShown: false }} 
+                        />
+                        <Stack.Screen 
+                          name="auth" 
+                          options={{ 
+                            presentation: 'modal',
+                            headerShown: false 
+                          }} 
+                        />
+                        <Stack.Screen 
+                          name="onboarding" 
+                          options={{ 
+                            presentation: 'fullScreenModal',
+                            headerShown: false 
+                          }} 
+                        />
+                        <Stack.Screen 
+                          name="profile" 
+                          options={{ 
+                            presentation: 'card',
+                            headerShown: true,
+                            title: 'Profile'
+                          }} 
+                        />
+                        <Stack.Screen 
+                          name="settings" 
+                          options={{ 
+                            presentation: 'card',
+                            headerShown: true,
+                            title: 'Settings'
+                          }} 
+                        />
+                      </Stack>
+                    </AppShell>
+                    <StatusBar style="auto" />
+                  </StripeProvider>
+                </AuthProvider>
+              </NetworkAwareContent>
+            </OfflineWrapper>
+          </HapticsProvider>
+        </ThemeProvider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
+}