@digilogiclabs/create-saas-app 1.5.4 → 1.6.0

package/dist/templates/web/ui-auth-payments/template/src/app/checkout/page.tsx

@@ -1,14 +1,32 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import { usePayments, formatCurrency } from '@digilogiclabs/saas-factory-payments';
-import { Button, Card } from '@digilogiclabs/saas-factory-ui';
+import { 
+  Button, 
+  Card,
+  PageTransition,
+  MobileContainer,
+  ResponsiveGrid,
+  SwipeableCard,
+  NetworkAwareContent,
+  OfflineWrapper,
+  TouchInput,
+  MobileForm,
+  useNetworkInfo,
+  useOfflineState
+} from '@digilogiclabs/saas-factory-ui';
+import { CreditCard, Check, Star, Wifi, WifiOff, ArrowLeft, ArrowRight } from 'lucide-react';
 
 export default function CheckoutPage() {
   const { loading } = usePayments();
+  const networkInfo = useNetworkInfo();
+  const isOnline = useOfflineState();
+  const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
 
   const handlePlanSelect = (planId: string) => {
     console.log('Plan selected:', planId);
+    setSelectedPlan(planId);
     // Handle plan selection - redirect to payment processing
   };
 
@@ -47,96 +65,244 @@ export default function CheckoutPage() {
   ];
 
   return (
-    <div className="min-h-screen bg-gray-100 py-8">
-      <div className="max-w-6xl mx-auto px-4">
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">Choose Your Plan</h1>
-          <p className="text-xl text-gray-600">Select the perfect plan for your needs</p>
-        </div>
-        
-        {/* Subscription Plans */}
-        <div className="grid md:grid-cols-3 gap-6 mb-8">
+    <PageTransition type="slide" direction="up" duration={350}>
+      <OfflineWrapper
+        cacheStrategy="cache-first"
+        showOfflineIndicator={true}
+      >
+        <div className="min-h-screen bg-gray-100">
+          <MobileContainer className="py-8">
+            {/* Network Status */}
+            <div className="flex justify-center mb-4">
+              <div className="flex items-center gap-2 text-sm px-3 py-1 rounded-full bg-white shadow-sm">
+                {isOnline ? (
+                  <>
+                    <Wifi className="w-4 h-4 text-green-600" />
+                    <span>Secure Connection</span>
+                    {networkInfo?.effectiveType && (
+                      <span className="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">
+                        {networkInfo.effectiveType.toUpperCase()}
+                      </span>
+                    )}
+                  </>
+                ) : (
+                  <>
+                    <WifiOff className="w-4 h-4 text-red-600" />
+                    <span>Offline - Plans cached</span>
+                  </>
+                )}
+              </div>
+            </div>
+
+            <div className="text-center mb-12">
+              <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Choose Your Plan</h1>
+              <p className="text-lg md:text-xl text-gray-600">Select the perfect plan for your needs</p>
+            </div>
+            
+            {/* Subscription Plans */}
+            <NetworkAwareContent
+              showOnSlow={
+                <ResponsiveGrid columns={{ base: 1, md: 2 }} gap="lg" className="mb-8">
+                  {plans.slice(0, 2).map((plan) => (
+                    <Card key={plan.id} className={`p-6 relative ${plan.popular ? 'ring-2 ring-blue-500' : ''}`}>
+                      {plan.popular && (
+                        <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
+                          <span className="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1">
+                            <Star className="w-3 h-3" />
+                            Most Popular
+                          </span>
+                        </div>
+                      )}
+                      <h3 className="text-xl font-bold mb-2">{plan.name}</h3>
+                      <div className="text-3xl font-bold mb-4">
+                        {formatCurrency(plan.price)} 
+                        <span className="text-sm font-normal">/{plan.interval}</span>
+                      </div>
+                      <ul className="mb-6 space-y-2">
+                        {plan.features.slice(0, 3).map((feature, index) => (
+                          <li key={index} className="flex items-center">
+                            <Check className="text-green-500 mr-2 w-4 h-4" />
+                            {feature}
+                          </li>
+                        ))}
+                      </ul>
+                      <Button 
+                        onClick={() => handlePlanSelect(plan.id)}
+                        disabled={loading}
+                        className="w-full"
+                        variant={plan.popular ? "default" : "outline"}
+                        size="lg"
+                      >
+                        {loading ? 'Processing...' : 'Select Plan'}
+                      </Button>
+                    </Card>
+                  ))}
+                </ResponsiveGrid>
+              }
+            >
+              <ResponsiveGrid columns={{ base: 1, md: 3 }} gap="lg" className="mb-8">
           {plans.map((plan) => (
-            <Card key={plan.id} className={`p-6 relative ${plan.popular ? 'ring-2 ring-blue-500' : ''}`}>
-              {plan.popular && (
-                <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
-                  <span className="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium">
-                    Most Popular
-                  </span>
+            <SwipeableCard
+              key={plan.id}
+              leftActions={[
+                { 
+                  id: 'info', 
+                  label: 'More Info', 
+                  onAction: () => console.log('Show plan details'),
+                  color: 'blue'
+                }
+              ]}
+              rightActions={[
+                { 
+                  id: 'select', 
+                  label: 'Quick Select', 
+                  onAction: () => handlePlanSelect(plan.id),
+                  color: 'green',
+                  icon: ArrowRight
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+            >
+              <Card className={`p-6 relative ${plan.popular ? 'ring-2 ring-blue-500' : ''} ${selectedPlan === plan.id ? 'bg-blue-50 border-blue-200' : ''}`}>
+                {plan.popular && (
+                  <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
+                    <span className="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1">
+                      <Star className="w-3 h-3" />
+                      Most Popular
+                    </span>
+                  </div>
+                )}
+                <h3 className="text-xl font-bold mb-2">{plan.name}</h3>
+                <div className="text-3xl font-bold mb-4">
+                  {formatCurrency(plan.price)} 
+                  <span className="text-sm font-normal">/{plan.interval}</span>
                 </div>
-              )}
-              <h3 className="text-xl font-bold mb-2">{plan.name}</h3>
-              <div className="text-3xl font-bold mb-4">
-                {formatCurrency(plan.price)} 
-                <span className="text-sm font-normal">/{plan.interval}</span>
-              </div>
-              <ul className="mb-6 space-y-2">
-                {plan.features.map((feature, index) => (
-                  <li key={index} className="flex items-center">
-                    <span className="text-green-500 mr-2">✓</span>
-                    {feature}
-                  </li>
-                ))}
-              </ul>
-              <Button 
-                onClick={() => handlePlanSelect(plan.id)}
-                disabled={loading}
-                className="w-full"
-                variant={plan.popular ? "default" : "outline"}
-              >
-                {loading ? 'Processing...' : 'Select Plan'}
-              </Button>
-            </Card>
+                <ul className="mb-6 space-y-2">
+                  {plan.features.map((feature, index) => (
+                    <li key={index} className="flex items-center">
+                      <Check className="text-green-500 mr-2 w-4 h-4" />
+                      {feature}
+                    </li>
+                  ))}
+                </ul>
+                <Button 
+                  onClick={() => handlePlanSelect(plan.id)}
+                  disabled={loading}
+                  className="w-full"
+                  variant={selectedPlan === plan.id ? "default" : plan.popular ? "default" : "outline"}
+                  size="lg"
+                >
+                  {loading ? 'Processing...' : selectedPlan === plan.id ? 'Selected' : 'Select Plan'}
+                </Button>
+                <p className="text-xs text-center text-gray-500 mt-2">
+                  Swipe left for details • Swipe right to select
+                </p>
+              </Card>
+            </SwipeableCard>
           ))}
-        </div>
+              </ResponsiveGrid>
+            </NetworkAwareContent>
 
-        {/* Payment Form */}
-        <Card className="p-6 max-w-md mx-auto">
-          <h2 className="text-2xl font-bold mb-6">Payment Details</h2>
-          <div className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium mb-2">Card Number</label>
-              <input 
-                type="text" 
-                placeholder="1234 5678 9012 3456"
-                className="w-full p-3 border rounded-lg"
-                disabled
-              />
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium mb-2">Expiry Date</label>
-                <input 
-                  type="text" 
-                  placeholder="MM/YY"
-                  className="w-full p-3 border rounded-lg"
-                  disabled
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium mb-2">CVC</label>
-                <input 
-                  type="text" 
-                  placeholder="123"
-                  className="w-full p-3 border rounded-lg"
-                  disabled
-                />
-              </div>
-            </div>
-            <Button 
-              onClick={handlePayment}
-              disabled={loading}
-              className="w-full"
+            {/* Mobile-Optimized Payment Form */}
+            <SwipeableCard
+              leftActions={[
+                { 
+                  id: 'back', 
+                  label: 'Back', 
+                  onAction: () => window.history.back(),
+                  color: 'gray',
+                  icon: ArrowLeft
+                }
+              ]}
+              rightActions={[
+                { 
+                  id: 'pay', 
+                  label: 'Pay Now', 
+                  onAction: handlePayment,
+                  color: 'green',
+                  icon: CreditCard
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+              className="max-w-md mx-auto"
             >
-              {loading ? 'Processing...' : 'Complete Payment'}
-            </Button>
-            <p className="text-sm text-gray-600 text-center">
-              This is a demo. Payment processing requires Stripe integration.
-            </p>
-          </div>
-        </Card>
-      </div>
-    </div>
+              <Card className="p-6">
+                <div className="flex items-center gap-3 mb-6">
+                  <div className="p-2 bg-blue-100 rounded-full">
+                    <CreditCard className="w-5 h-5 text-blue-600" />
+                  </div>
+                  <h2 className="text-2xl font-bold">Payment Details</h2>
+                </div>
+                
+                <MobileForm className="space-y-4">
+                  <div>
+                    <label className="block text-sm font-medium mb-2">Card Number</label>
+                    <TouchInput 
+                      type="text" 
+                      placeholder="1234 5678 9012 3456"
+                      disabled
+                      mobileOptimized={true}
+                      hapticFeedback={true}
+                    />
+                  </div>
+                  <ResponsiveGrid columns={{ base: 2 }} gap="md">
+                    <div>
+                      <label className="block text-sm font-medium mb-2">Expiry Date</label>
+                      <TouchInput 
+                        type="text" 
+                        placeholder="MM/YY"
+                        disabled
+                        mobileOptimized={true}
+                        hapticFeedback={true}
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium mb-2">CVC</label>
+                      <TouchInput 
+                        type="text" 
+                        placeholder="123"
+                        disabled
+                        mobileOptimized={true}
+                        hapticFeedback={true}
+                      />
+                    </div>
+                  </ResponsiveGrid>
+                  
+                  {selectedPlan && (
+                    <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
+                      <div className="flex items-center justify-between">
+                        <span className="font-medium">Selected Plan:</span>
+                        <span className="text-blue-600 font-bold">
+                          {plans.find(p => p.id === selectedPlan)?.name}
+                        </span>
+                      </div>
+                    </div>
+                  )}
+                  
+                  <Button 
+                    onClick={handlePayment}
+                    disabled={loading || !isOnline}
+                    className="w-full"
+                    size="lg"
+                  >
+                    {loading ? 'Processing...' : !isOnline ? 'Offline - Cannot Process' : 'Complete Payment'}
+                  </Button>
+                  
+                  <div className="space-y-2 text-sm text-gray-600 text-center">
+                    <p>This is a demo. Payment processing requires Stripe integration.</p>
+                    <p className="text-xs">Swipe left to go back • Swipe right to pay now</p>
+                  </div>
+                </MobileForm>
+              </Card>
+            </SwipeableCard>
+          </MobileContainer>
+        </div>
+      </OfflineWrapper>
+    </PageTransition>
   );
 }
 

package/dist/templates/web/ui-auth-payments/template/src/app/globals.css

@@ -40,3 +40,132 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Mobile-first optimizations */
+@media (max-width: 768px) {
+  .mobile-optimized {
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+  
+  /* Better touch targets */
+  button, 
+  a, 
+  input, 
+  select, 
+  textarea {
+    min-height: 44px;
+    min-width: 44px;
+  }
+  
+  /* Smooth scrolling for mobile */
+  html {
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* Animated moving banner */
+@keyframes marquee {
+  0% {
+    transform: translate3d(100%, 0, 0);
+  }
+  100% {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.animate-marquee {
+  animation: marquee 15s linear infinite;
+}
+
+/* Network-aware styles */
+@media (prefers-reduced-data: reduce) {
+  .high-bandwidth-content {
+    display: none;
+  }
+}
+
+/* Reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  
+  .animate-marquee {
+    animation: none;
+  }
+}
+
+/* Hamburger menu animations */
+.hamburger-line {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center;
+}
+
+.hamburger-open .hamburger-line:nth-child(1) {
+  transform: rotate(45deg) translate(6px, 6px);
+}
+
+.hamburger-open .hamburger-line:nth-child(2) {
+  opacity: 0;
+}
+
+.hamburger-open .hamburger-line:nth-child(3) {
+  transform: rotate(-45deg) translate(6px, -6px);
+}
+
+/* Custom animations for mobile interactions */
+@keyframes haptic-feedback {
+  0% { transform: scale(1); }
+  50% { transform: scale(0.95); }
+  100% { transform: scale(1); }
+}
+
+.haptic-feedback {
+  animation: haptic-feedback 0.1s ease-in-out;
+}
+
+/* Offline indicator styles */
+.offline-indicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #f59e0b;
+  color: white;
+  text-align: center;
+  padding: 8px;
+  font-size: 14px;
+  z-index: 9999;
+}
+
+/* Loading states */
+.loading-skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Progressive image loading */
+.progressive-image {
+  filter: blur(5px);
+  transition: filter 0.3s;
+}
+
+.progressive-image.loaded {
+  filter: blur(0);
+}