@digilogiclabs/create-saas-app 1.14.0 → 1.17.0

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

@@ -0,0 +1,193 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, Image } from 'react-native';
+import { router } from 'expo-router';
+import { LinearGradient } from 'expo-linear-gradient';
+import * as Haptics from 'expo-haptics';
+
+// UI Components - v0.22.0
+import {
+  NativeOnboarding,
+  NativeWelcomeModal,
+  PageTransition,
+  Button,
+  useTheme
+} from '@digilogiclabs/saas-factory-ui/native';
+
+// Icons for onboarding steps
+import { 
+  Zap, 
+  Shield, 
+  Users, 
+  Rocket,
+  CheckCircle,
+  ArrowRight
+} from 'react-native-heroicons/outline';
+
+export default function OnboardingScreen() {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [showWelcome, setShowWelcome] = useState(true);
+  const { theme, isDark } = useTheme();
+
+  const onboardingSteps = [
+    {
+      id: 'welcome',
+      title: 'Welcome to {{titleCaseName}}',
+      description: 'Your all-in-one platform for managing your business with powerful analytics and seamless payments.',
+      icon: <Rocket width={64} height={64} color="#3b82f6" />,
+      primaryColor: '#3b82f6',
+      backgroundGradient: ['#dbeafe', '#bfdbfe']
+    },
+    {
+      id: 'analytics',
+      title: 'Powerful Analytics',
+      description: 'Track your performance with real-time insights, detailed reports, and actionable business intelligence.',
+      icon: <Zap width={64} height={64} color="#f59e0b" />,
+      primaryColor: '#f59e0b',
+      backgroundGradient: ['#fef3c7', '#fed7aa']
+    },
+    {
+      id: 'payments',
+      title: 'Secure Payments',
+      description: 'Accept payments safely with Stripe integration, manage subscriptions, and track billing seamlessly.',
+      icon: <Shield width={64} height={64} color="#10b981" />,
+      primaryColor: '#10b981',
+      backgroundGradient: ['#dcfce7', '#bbf7d0']
+    },
+    {
+      id: 'community',
+      title: 'Join the Community',
+      description: 'Connect with other entrepreneurs, share insights, and grow your business with our vibrant community.',
+      icon: <Users width={64} height={64} color="#8b5cf6" />,
+      primaryColor: '#8b5cf6',
+      backgroundGradient: ['#ede9fe', '#ddd6fe']
+    },
+    {
+      id: 'ready',
+      title: "You're All Set!",
+      description: "Everything is ready for you to start building your success. Let's create something amazing together.",
+      icon: <CheckCircle width={64} height={64} color="#059669" />,
+      primaryColor: '#059669',
+      backgroundGradient: ['#dcfce7', '#a7f3d0']
+    }
+  ];
+
+  const handleWelcomeComplete = () => {
+    setShowWelcome(false);
+    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+  };
+
+  const handleOnboardingComplete = () => {
+    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    // Mark onboarding as completed in storage
+    router.replace('/(tabs)');
+  };
+
+  const handleSkip = () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    router.replace('/(tabs)');
+  };
+
+  if (showWelcome) {
+    return (
+      <PageTransition type="fade">
+        <NativeWelcomeModal
+          title="Welcome to {{titleCaseName}}!"
+          subtitle="Let's get you started with a quick tour"
+          features={[
+            {
+              icon: <Zap width={24} height={24} color="#3b82f6" />,
+              title: "Real-time Analytics",
+              description: "Track your business performance instantly"
+            },
+            {
+              icon: <Shield width={24} height={24} color="#10b981" />,
+              title: "Secure Payments",
+              description: "Accept payments with confidence"
+            },
+            {
+              icon: <Users width={24} height={24} color="#8b5cf6" />,
+              title: "Team Collaboration",
+              description: "Work together seamlessly"
+            }
+          ]}
+          primaryAction={{
+            label: "Get Started",
+            onPress: handleWelcomeComplete,
+            icon: ArrowRight
+          }}
+          secondaryAction={{
+            label: "Skip Tour",
+            onPress: handleSkip
+          }}
+          backgroundImage={{
+            uri: "https://images.unsplash.com/photo-1557804506-669a67965ba0?auto=format&fit=crop&w=1000&q=80"
+          }}
+          showProgress={true}
+          enableHaptics={true}
+        />
+      </PageTransition>
+    );
+  }
+
+  return (
+    <PageTransition type="slide" direction="horizontal">
+      <View style={styles.container}>
+        {/* Dynamic gradient background based on current step */}
+        <LinearGradient
+          colors={isDark 
+            ? ['#1e293b', '#334155'] 
+            : onboardingSteps[currentStep]?.backgroundGradient || ['#f8fafc', '#e2e8f0']
+          }
+          style={styles.gradientBackground}
+        />
+        
+        <NativeOnboarding
+          steps={onboardingSteps}
+          currentStep={currentStep}
+          onStepChange={(stepIndex) => {
+            setCurrentStep(stepIndex);
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+          }}
+          onComplete={handleOnboardingComplete}
+          onSkip={handleSkip}
+          showSkip={true}
+          showProgress={true}
+          nextButtonText="Continue"
+          skipButtonText="Skip Tour"
+          doneButtonText="Get Started"
+          dotStyle={{
+            backgroundColor: 'rgba(255, 255, 255, 0.3)'
+          }}
+          activeDotStyle={{
+            backgroundColor: onboardingSteps[currentStep]?.primaryColor || '#3b82f6'
+          }}
+          style={styles.onboarding}
+          enableSwipeGestures={true}
+          enableHaptics={true}
+          autoPlay={false}
+          showStepIndicator={true}
+          stepIndicatorStyle="dots"
+        />
+      </View>
+    </PageTransition>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  gradientBackground: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+  onboarding: {
+    flex: 1,
+    paddingHorizontal: 20,
+    paddingVertical: 40,
+  },
+});

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

@@ -0,0 +1,272 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { router } from 'expo-router';
+import { LinearGradient } from 'expo-linear-gradient';
+import * as Haptics from 'expo-haptics';
+
+// UI Components - v0.22.0
+import {
+  NativeTour,
+  PageTransition,
+  Button,
+  useTheme
+} from '@digilogiclabs/saas-factory-ui/native';
+
+// Icons for tour steps
+import { 
+  Home,
+  ShoppingBag,
+  BarChart3,
+  CreditCard,
+  User,
+  Zap,
+  Target,
+  CheckCircle
+} from 'react-native-heroicons/outline';
+
+export default function TourScreen() {
+  const [currentStep, setCurrentStep] = useState(0);
+  const { theme, isDark } = useTheme();
+
+  // Comprehensive tour steps for the mobile app
+  const tourSteps = [
+    {
+      id: 'welcome',
+      target: null, // Full screen welcome
+      title: 'Welcome to Your Dashboard',
+      content: 'Let me show you around your new mobile business dashboard. This tour will help you discover all the powerful features available.',
+      icon: <Home width={48} height={48} color="#3b82f6" />,
+      placement: 'center',
+      showSkip: true,
+      actionButton: {
+        text: 'Start Tour',
+        variant: 'primary'
+      }
+    },
+    {
+      id: 'dashboard',
+      target: 'stats-section',
+      title: 'Business Statistics',
+      content: 'Monitor your key business metrics at a glance. Track orders, revenue, customers, and conversion rates in real-time.',
+      icon: <BarChart3 width={24} height={24} color="#10b981" />,
+      placement: 'bottom',
+      highlight: {
+        type: 'rectangle',
+        padding: 16
+      }
+    },
+    {
+      id: 'charts',
+      target: 'chart-section',
+      title: 'Visual Analytics',
+      content: 'Dive deeper into your data with interactive charts. Switch between different metrics to analyze trends.',
+      icon: <Target width={24} height={24} color="#f59e0b" />,
+      placement: 'top',
+      highlight: {
+        type: 'rectangle',
+        padding: 12
+      }
+    },
+    {
+      id: 'orders',
+      target: 'orders-tab',
+      title: 'Order Management',
+      content: 'View and manage all your orders in one place. Use filters to find specific orders quickly.',
+      icon: <ShoppingBag width={24} height={24} color="#8b5cf6" />,
+      placement: 'top',
+      highlight: {
+        type: 'circle',
+        padding: 8
+      }
+    },
+    {
+      id: 'analytics',
+      target: 'analytics-tab',
+      title: 'Advanced Analytics',
+      content: 'Access detailed analytics and reporting. Track performance over different time periods.',
+      icon: <BarChart3 width={24} height={24} color="#06b6d4" />,
+      placement: 'top',
+      highlight: {
+        type: 'circle',
+        padding: 8
+      }
+    },
+    {
+      id: 'billing',
+      target: 'billing-tab',
+      title: 'Payment Management',
+      content: 'Manage your subscriptions, payment methods, and billing history securely.',
+      icon: <CreditCard width={24} height={24} color="#ef4444" />,
+      placement: 'top',
+      highlight: {
+        type: 'circle',
+        padding: 8
+      }
+    },
+    {
+      id: 'profile',
+      target: 'profile-tab',
+      title: 'Account Settings',
+      content: 'Customize your profile, manage preferences, and access security settings.',
+      icon: <User width={24} height={24} color="#84cc16" />,
+      placement: 'top',
+      highlight: {
+        type: 'circle',
+        padding: 8
+      }
+    },
+    {
+      id: 'navigation',
+      target: 'bottom-navigation',
+      title: 'Quick Navigation',
+      content: 'Use the bottom navigation to quickly switch between different sections of your dashboard.',
+      icon: <Zap width={24} height={24} color="#f97316" />,
+      placement: 'top',
+      highlight: {
+        type: 'rectangle',
+        padding: 16
+      }
+    },
+    {
+      id: 'complete',
+      target: null,
+      title: 'Tour Complete!',
+      content: "You're all set! You now know how to navigate and use your mobile dashboard. Start managing your business with confidence.",
+      icon: <CheckCircle width={48} height={48} color="#10b981" />,
+      placement: 'center',
+      actionButton: {
+        text: 'Get Started',
+        variant: 'primary'
+      }
+    }
+  ];
+
+  const handleTourComplete = () => {
+    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    // Mark tour as completed in storage
+    router.replace('/(tabs)');
+  };
+
+  const handleSkipTour = () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    router.replace('/(tabs)');
+  };
+
+  const handleStepChange = (stepIndex: number) => {
+    setCurrentStep(stepIndex);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+  };
+
+  return (
+    <PageTransition type="fade" duration={300}>
+      <View style={styles.container}>
+        {/* Dynamic gradient background */}
+        <LinearGradient
+          colors={isDark 
+            ? ['#1e293b', '#334155', '#475569'] 
+            : ['#f1f5f9', '#e2e8f0', '#cbd5e1']
+          }
+          style={styles.gradientBackground}
+        />
+        
+        <NativeTour
+          steps={tourSteps}
+          currentStep={currentStep}
+          onStepChange={handleStepChange}
+          onComplete={handleTourComplete}
+          onSkip={handleSkipTour}
+          
+          // Tour configuration
+          isActive={true}
+          animated={true}
+          animationDuration={300}
+          
+          // UI customization
+          maskColor="rgba(0, 0, 0, 0.7)"
+          borderRadius={12}
+          arrowSize={16}
+          
+          // Navigation
+          showPrevious={true}
+          showNext={true}
+          showSkip={true}
+          showClose={false}
+          
+          // Button labels
+          previousText="Back"
+          nextText="Next"
+          skipText="Skip Tour"
+          doneText="Finish"
+          
+          // Interaction
+          backdropPressToNext={false}
+          stopOnOutsideClick={false}
+          
+          // Haptic feedback
+          enableHaptics={true}
+          
+          // Custom styling
+          tooltipStyle={styles.tooltip}
+          titleStyle={styles.tooltipTitle}
+          contentStyle={styles.tooltipContent}
+          buttonStyle={styles.tourButton}
+          
+          // Auto-progression (optional)
+          autoPlay={false}
+          autoPlayDelay={5000}
+          
+          // Step indicators
+          showStepNumber={true}
+          showProgress={true}
+          progressBarColor="#3b82f6"
+          
+          // Accessibility
+          accessible={true}
+          accessibilityLabel="Product tour"
+        />
+      </View>
+    </PageTransition>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  gradientBackground: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+  tooltip: {
+    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+    borderRadius: 16,
+    padding: 20,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.15,
+    shadowRadius: 20,
+    elevation: 10,
+  },
+  tooltipTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#1e293b',
+    marginBottom: 8,
+  },
+  tooltipContent: {
+    fontSize: 14,
+    color: '#64748b',
+    lineHeight: 20,
+    marginBottom: 16,
+  },
+  tourButton: {
+    borderRadius: 12,
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    backgroundColor: '#3b82f6',
+  },
+});

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

@@ -0,0 +1,93 @@
+{
+  "expo": {
+    "name": "{{titleCaseName}}",
+    "slug": "{{kebabCaseName}}", 
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "automatic",
+    "scheme": "{{kebabCaseName}}",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.{{packageName}}.app",
+      "config": {
+        "usesNonExemptEncryption": false
+      },
+      "infoPlist": {
+        "NSCameraUsageDescription": "This app uses the camera to scan QR codes and take photos",
+        "NSLocationWhenInUseUsageDescription": "This app uses location to provide location-based features",
+        "NSLocationAlwaysAndWhenInUseUsageDescription": "This app uses location to provide location-based features"
+      }
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.{{packageName}}.app",
+      "permissions": [
+        "CAMERA",
+        "ACCESS_FINE_LOCATION",
+        "ACCESS_COARSE_LOCATION",
+        "RECEIVE_BOOT_COMPLETED",
+        "VIBRATE"
+      ]
+    },
+    "web": {
+      "favicon": "./assets/favicon.png",
+      "bundler": "metro"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-notifications",
+        {
+          "icon": "./assets/notification-icon.png",
+          "color": "#ffffff",
+          "sounds": [
+            "./assets/notification-sound.wav"
+          ]
+        }
+      ],
+      [
+        "expo-location",
+        {
+          "locationAlwaysAndWhenInUsePermission": "Allow {{titleCaseName}} to use your location to provide location-based features."
+        }
+      ],
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "Allow {{titleCaseName}} to access your camera to scan QR codes and take photos."
+        }
+      ],
+      [
+        "@stripe/stripe-react-native",
+        {
+          "merchantIdentifier": "merchant.com.{{packageName}}.app",
+          "enableGooglePay": true
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "tsconfigPaths": true
+    },
+    "extra": {
+      "router": {
+        "origin": false
+      },
+      "eas": {
+        "projectId": "{{easProjectId}}"
+      }
+    }
+  }
+}

package/src/templates/mobile/ui-auth-payments/template/babel.config.js

@@ -0,0 +1,23 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          root: ['./'],
+          alias: {
+            '@': './',
+            '@/components': './components',
+            '@/hooks': './hooks',
+            '@/utils': './utils',
+            '@/types': './types',
+            '@/constants': './constants',
+          },
+        },
+      ],
+      'react-native-reanimated/plugin', // Must be last
+    ],
+  };
+};

package/src/templates/mobile/ui-auth-payments/template/eas.json

@@ -0,0 +1,45 @@
+{
+  "cli": {
+    "version": ">= 5.9.0"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal",
+      "ios": {
+        "resourceClass": "m-medium"
+      },
+      "android": {
+        "buildType": "apk"
+      }
+    },
+    "preview": {
+      "distribution": "internal",
+      "ios": {
+        "simulator": true,
+        "resourceClass": "m-medium"
+      },
+      "android": {
+        "buildType": "apk"
+      }
+    },
+    "production": {
+      "ios": {
+        "resourceClass": "m-medium"
+      }
+    }
+  },
+  "submit": {
+    "production": {
+      "ios": {
+        "appleId": "{{appleId}}",
+        "ascAppId": "{{ascAppId}}",
+        "appleTeamId": "{{appleTeamId}}"
+      },
+      "android": {
+        "serviceAccountKeyPath": "./android-service-account.json",
+        "track": "internal"
+      }
+    }
+  }
+}

package/src/templates/mobile/ui-auth-payments/template/expo-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="expo/types" />
+
+// NOTE: This file should not be edited and should be in your .gitignore

package/src/templates/mobile/ui-auth-payments/template/jest-setup.ts

@@ -0,0 +1,74 @@
+import '@testing-library/jest-native/extend-expect';
+
+// Mock reanimated
+jest.mock('react-native-reanimated', () => {
+  const Reanimated = require('react-native-reanimated/mock');
+  
+  // The mock for `call` immediately calls the callback which is incorrect
+  // So we override it with a no-op
+  Reanimated.default.call = () => {};
+  
+  return Reanimated;
+});
+
+// Silence the warning: Animated: `useNativeDriver` is not supported
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
+
+// Mock Expo modules
+jest.mock('expo-haptics', () => ({
+  impactAsync: jest.fn(),
+  notificationAsync: jest.fn(),
+  selectionAsync: jest.fn(),
+}));
+
+jest.mock('expo-constants', () => ({
+  default: {
+    expoConfig: {
+      name: 'Test App',
+    },
+  },
+}));
+
+jest.mock('expo-router', () => ({
+  router: {
+    push: jest.fn(),
+    replace: jest.fn(),
+    back: jest.fn(),
+  },
+  useRouter: () => ({
+    push: jest.fn(),
+    replace: jest.fn(),
+    back: jest.fn(),
+  }),
+  Link: 'View',
+  Stack: {
+    Screen: 'View',
+  },
+  Tabs: {
+    Screen: 'View',
+  },
+}));
+
+// Mock Stripe
+jest.mock('@stripe/stripe-react-native', () => ({
+  useStripe: () => ({
+    initPaymentSheet: jest.fn(),
+    presentPaymentSheet: jest.fn(),
+  }),
+  StripeProvider: ({ children }: any) => children,
+}));
+
+// Mock Supabase
+jest.mock('@supabase/supabase-js', () => ({
+  createClient: jest.fn(() => ({
+    auth: {
+      signUp: jest.fn(),
+      signInWithPassword: jest.fn(),
+      signOut: jest.fn(),
+      getUser: jest.fn(),
+      onAuthStateChange: jest.fn(() => ({
+        unsubscribe: jest.fn(),
+      })),
+    },
+  })),
+}));