@digilogiclabs/create-saas-app 2.11.0 → 2.12.0

package/src/templates/web/base/template/src/app/checkout/page.tsx

@@ -1,119 +1,92 @@
 'use client';
 
-import React from 'react';
-import { usePayments } from '@digilogiclabs/app-sdk';
+import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { 
-  PageTransition,
-  MobileContainer,
-  TouchInput,
-  MobileForm,
-  SwipeableCard,
-  NetworkAwareContent,
-  useNetworkInfo
-} from '@digilogiclabs/saas-factory-ui';
-import { CreditCard, Zap } from 'lucide-react';
+import { CreditCard, Check, ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import { MOCK_MODE, MOCK_PRODUCTS } from '@/lib/mock';
 
 export default function CheckoutPage() {
-  const { handleCheckout } = usePayments();
-  const networkInfo = useNetworkInfo();
+  const [loading, setLoading] = useState(false);
+  const [selectedPlan, setSelectedPlan] = useState('prod_2');
 
   const onCheckout = async () => {
-    await handleCheckout({
-      priceId: 'price_12345', // Replace with your actual price ID
-      returnUrl: `${window.location.origin}/dashboard`,
-    });
+    setLoading(true);
+    try {
+      // TODO: [REAL_DATA] Create a Stripe checkout session via your API
+      // const res = await fetch('/api/checkout', {
+      //   method: 'POST',
+      //   headers: { 'Content-Type': 'application/json' },
+      //   body: JSON.stringify({ priceId: selectedPlan }),
+      // });
+      // const { url } = await res.json();
+      // window.location.href = url;
+
+      if (MOCK_MODE) {
+        alert('Mock Mode: Checkout would redirect to Stripe. Configure your payment provider to enable real payments.');
+      }
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
-    <PageTransition type="slide" direction="up" duration={350}>
-      <div className="flex items-center justify-center min-h-screen bg-gray-100">
-        <MobileContainer className="w-full max-w-md">
-          <NetworkAwareContent
-            showOnSlow={
-              <div className="p-6 bg-white rounded-lg shadow-md">
-                <div className="flex items-center gap-2 mb-4">
-                  <CreditCard className="h-6 w-6 text-blue-600" />
-                  <h1 className="text-xl font-bold">Checkout</h1>
-                </div>
-                <p className="mb-6 text-gray-600">
-                  Simplified checkout for slower connections.
-                </p>
-                <Button 
-                  onClick={onCheckout} 
-                  className="w-full"
-                  size="lg"
-                >
-                  Proceed to Checkout
-                </Button>
-              </div>
-            }
+    <div className="flex items-center justify-center min-h-screen bg-background">
+      <div className="w-full max-w-3xl mx-auto px-4 py-12">
+        <div className="mb-6">
+          <Link
+            href="/dashboard"
+            className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4"
           >
-            <SwipeableCard
-              leftActions={[
-                { 
-                  id: 'back', 
-                  label: 'Back', 
-                  onAction: () => window.history.back(),
-                  color: 'gray'
-                }
-              ]}
-              rightActions={[
-                { 
-                  id: 'proceed', 
-                  label: 'Pay Now', 
-                  onAction: onCheckout,
-                  color: 'green'
-                }
-              ]}
-              threshold={60}
-              hapticFeedback={true}
-              showActionLabels={true}
-            >
-              <div className="p-8 bg-white rounded-lg shadow-md">
-                <div className="flex items-center gap-3 mb-6">
-                  <div className="p-3 bg-blue-100 rounded-full">
-                    <Zap className="h-6 w-6 text-blue-600" />
-                  </div>
-                  <div>
-                    <h1 className="text-2xl font-bold">Premium Checkout</h1>
-                    <p className="text-sm text-gray-500">
-                      {networkInfo?.effectiveType && `${networkInfo.effectiveType.toUpperCase()} connection`}
-                    </p>
-                  </div>
-                </div>
-                
-                <div className="space-y-4 mb-6">
-                  <div className="p-4 bg-blue-50 rounded-lg">
-                    <h3 className="font-semibold text-blue-900">Pro Plan</h3>
-                    <p className="text-blue-700">$29/month • All features included</p>
-                  </div>
-                  
-                  <div className="text-sm text-gray-600">
-                    <p>✓ Touch-optimized checkout experience</p>
-                    <p>✓ Network-aware performance</p>
-                    <p>✓ Secure payment processing</p>
-                  </div>
-                </div>
+            <ArrowLeft className="h-3 w-3" />
+            Back to Dashboard
+          </Link>
+          <div className="flex items-center gap-3">
+            <h1 className="text-2xl font-bold text-foreground">Choose Your Plan</h1>
+            {MOCK_MODE && (
+              <span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
+                Mock Data
+              </span>
+            )}
+          </div>
+        </div>
 
-                <div className="space-y-3">
-                  <Button 
-                    onClick={onCheckout} 
-                    className="w-full"
-                    size="lg"
-                  >
-                    Proceed to Checkout
-                  </Button>
-                  
-                  <p className="text-xs text-center text-gray-500">
-                    Swipe left to go back • Swipe right to pay now
-                  </p>
-                </div>
+        {/* TODO: [REAL_DATA] Fetch plans from your payment provider */}
+        <div className="grid gap-4 md:grid-cols-3 mb-8">
+          {MOCK_PRODUCTS.map((plan) => (
+            <button
+              key={plan.id}
+              onClick={() => setSelectedPlan(plan.id)}
+              className={`rounded-xl border p-6 text-left transition-all ${
+                selectedPlan === plan.id
+                  ? 'border-primary ring-2 ring-primary bg-card'
+                  : 'border-border bg-card hover:border-primary/50'
+              }`}
+            >
+              <h3 className="text-lg font-semibold text-card-foreground">{plan.name}</h3>
+              <div className="mt-1 mb-4">
+                <span className="text-3xl font-bold text-foreground">${plan.price}</span>
+                <span className="text-muted-foreground">/mo</span>
               </div>
-            </SwipeableCard>
-          </NetworkAwareContent>
-        </MobileContainer>
+              <ul className="space-y-2">
+                {plan.features.map((feat) => (
+                  <li key={feat} className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Check className="h-4 w-4 text-primary shrink-0" />
+                    {feat}
+                  </li>
+                ))}
+              </ul>
+            </button>
+          ))}
+        </div>
+
+        <div className="flex justify-center">
+          <Button onClick={onCheckout} size="lg" disabled={loading} className="min-w-[200px]">
+            <CreditCard className="mr-2 h-4 w-4" />
+            {loading ? 'Processing...' : 'Continue to Payment'}
+          </Button>
+        </div>
       </div>
-    </PageTransition>
+    </div>
   );
 }