Merge pull request #10 from Zenfulcode/checkout-flow

Checkoutflow rework and

.env.example

@@ -1,15 +1,21 @@
-NEXT_PUBLIC_COMMERCIFY_API_URL=http://localhost:8080/api/v1
+NODE_ENV=development
 
-# MySQL Configuration
-MYSQL_ROOT_PASSWORD=Password1234!
-MYSQL_USER=commercify
-MYSQL_PASSWORD=c0mmercifypassw0rd123!
+NEXT_PUBLIC_COMMERCIFY_API_URL=https://domain.com:6091/api/v1
+NEXT_PUBLIC_DEV_COMMERCIFY_API_URL=http://localhost:6091/api/v1
+SMTP_HOST=smtp.ethereal.email
+SMTP_PORT=587
+SMTP_USER=
+SMTP_PASSWORD=
+EMAIL_DEV=[email protected]
 
-# Spring Boot Application Configuration
-SPRING_DATASOURCE_URL=jdbc:mysql://mysql-db:3306/commercifydb
+# Backend Configuration
+# use "host.docker.internal" as host if you are connecting to a MySQL database running on the host machine
+SPRING_DATASOURCE_URL=jdbc:mysql://localhost:3306/commercifydb?createDatabaseIfNotExist=true
 SPRING_DATASOURCE_USERNAME=root
 SPRING_DATASOURCE_PASSWORD=Password1234!
 STRIPE_TEST_SECRET=sk_test_
 STRIPE_SECRET_WEBHOOK=whsec_
 STRIPE_WEBHOOK_ENDPOINT=we_
 JWT_SECRET_KEY=7581e8477a88733917bc3b48f683a876935a492a0bd976a59429a2f28c71fde
+ADMIN_EMAIL=[email protected]
+ADMIN_PASSWORD=commercifyadmin123! # min 8 characters

package.json

@@ -13,8 +13,12 @@
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.1",
     "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.2",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.1",

src/app/(client)/checkout/_components/AuthenticationStep.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import React from 'react';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { useAuth } from '@/context/AuthContext';
+import { useCheckout } from '@/context/CheckoutContext';
+import { useToast } from '@/hooks/use-toast';
+
+const loginSchema = z.object({
+    email: z.string().email(),
+    password: z.string().min(6, "Password must be at least 6 characters"),
+});
+
+export function AuthenticationStep() {
+    const { isAuthenticated, login } = useAuth();
+    const { setStep, setIsGuest } = useCheckout();
+    const { toast } = useToast();
+    const [isLoading, setIsLoading] = React.useState(false);
+
+    const form = useForm<z.infer<typeof loginSchema>>({
+        resolver: zodResolver(loginSchema),
+    });
+
+    console.log(isAuthenticated);
+
+    if (isAuthenticated) {
+        setStep('information');
+        return null;
+    }
+
+    const handleLogin = async (data: z.infer<typeof loginSchema>) => {
+        try {
+            setIsLoading(true);
+            await login(data);
+            setIsGuest(false);
+            setStep('information');
+        } catch (error) {
+            if (error instanceof Error) {
+                toast({
+                    title: "Login failed",
+                    description: "Invalid email or password",
+                    variant: "destructive",
+                });
+            }
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleGuestCheckout = () => {
+        setIsGuest(true);
+        setStep('information');
+    };
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Sign In</CardTitle>
+                <CardDescription>
+                    Sign in to your account or continue as a guest
+                </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(handleLogin)} className="space-y-4">
+                        <FormField
+                            control={form.control}
+                            name="email"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Email</FormLabel>
+                                    <FormControl>
+                                        <Input type="email" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <FormField
+                            control={form.control}
+                            name="password"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Password</FormLabel>
+                                    <FormControl>
+                                        <Input type="password" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <Button type="submit" className="w-full" disabled={isLoading}>
+                            {isLoading ? "Signing in..." : "Sign In"}
+                        </Button>
+                    </form>
+                </Form>
+
+                <div className="relative">
+                    <div className="absolute inset-0 flex items-center">
+                        <div className="w-full border-t border-gray-200" />
+                    </div>
+                    <div className="relative flex justify-center text-sm">
+                        <span className="px-2 bg-background text-muted-foreground">
+                            Or continue with
+                        </span>
+                    </div>
+                </div>
+
+                <Button
+                    variant="outline"
+                    className="w-full"
+                    onClick={handleGuestCheckout}
+                    disabled={isLoading}
+                >
+                    Continue as Guest
+                </Button>
+            </CardContent>
+        </Card>
+    );
+}