Merge pull request #3 from PeterMonkey/feat/confirm

Feat/confirm
soyricardodev · Jul 27, 2024 · 516c286 · 516c286
2 parents f560558 + 14eafc4
commit 516c286
Show file tree

Hide file tree

Showing 4 changed files with 174 additions and 44 deletions.
diff --git a/apps/gifting-concierge/src/app/(auth)/login/login-form.tsx b/apps/gifting-concierge/src/app/(auth)/login/login-form.tsx
@@ -2,62 +2,137 @@
 
 import Link from "next/link";
 
-import { Button } from "@theliaison/ui/button";
+//import { Button } from "@theliaison/ui/button";
+import { useState } from "react";
 import {
 	Card,
 	CardContent,
 	CardDescription,
 	CardHeader,
 	CardTitle,
 } from "@theliaison/ui/card";
-import { Input } from "@theliaison/ui/input";
+import { Button, Input } from "@nextui-org/react";
 import { Label } from "@theliaison/ui/label";
+import { createClient } from "~/supabase/client";
+import { redirect } from "next/navigation";
+
 export function LoginForm() {
+
+	const [login, setLogin ] = useState<boolean>(false)
+	const [email, setEmail ] = useState<string>('')
+
+	const signInWithEmailAction = async (formData: FormData) => {
+		const email = formData.get("email") as string;
+		const supabase = createClient();
+
+		const { error } = await supabase.auth.signInWithOtp({
+			email,
+		});
+
+		if (error) {
+			console.log(error);
+		}
+
+		//redirect(`/login/verify?email=${email}`);
+		setEmail(email)
+		setLogin(true)
+	};
+
 	return (
+		<>
+		{
+			login ? <VerifyOTP email={email}/> : 
+			<Card className="mx-auto max-w-sm backdrop-blur-2xl bg-white/20 border-transparent shadow-sm">
+				<CardHeader>
+					<CardTitle className="text-2xl text-black">Login</CardTitle>
+					<CardDescription className="text-black">
+						Enter your email below to login to your account
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<form action={signInWithEmailAction}>
+					<div className="grid gap-4">
+						<div className="grid gap-2">
+							<Label className="text-black" htmlFor="email">Email</Label>
+							<Input
+								id="email"
+								type="email"
+								name="email"
+								placeholder="m@example.com"
+								className="border-black text-black placeholder:text-black/90"
+								required
+							/>
+						</div>
+						<Button type="submit" className="w-full bg-black">
+							Login
+						</Button>
+					</div>
+					</form>
+				</CardContent>
+			</Card>
+
+		}
+		</>
+	);
+}
+
+function VerifyOTP({email}:{email: string}) {
+
+	const [verify, setVerify ] = useState<boolean>(false)
+
+	const verifyOTPAction = async (formData: FormData) => {
+
+		const otp = formData.get("otp") as string;
+		const supabase = createClient();
+
+		const { error, data } = await supabase.auth.verifyOtp({
+			email,
+			token: otp,
+			type: "email",
+		});
+		console.log('hola')
+
+		console.log({ error, data });
+		if (!error) setVerify(true)
+	};
+	return(
+		<>
+		{
+			verify ? <h1>Verify Email</h1> :
 		<Card className="mx-auto max-w-sm backdrop-blur-2xl bg-white/20 border-transparent shadow-sm">
 			<CardHeader>
-				<CardTitle className="text-2xl text-black">Login</CardTitle>
+				<CardTitle className="text-2xl text-black">Verify Email</CardTitle>
 				<CardDescription className="text-black">
-					Enter your email below to login to your account
+				Please enter the OTP sent to your email address
 				</CardDescription>
 			</CardHeader>
 			<CardContent>
+				<form action={verifyOTPAction}>
 				<div className="grid gap-4">
 					<div className="grid gap-2">
-						<Label htmlFor="email">Email</Label>
 						<Input
 							id="email"
-							type="email"
-							placeholder="m@example.com"
+							type="text"
+							name="otp"
+							placeholder="Enter your OTP"
 							className="border-black text-black placeholder:text-black/90"
 							required
 						/>
 					</div>
-					<div className="grid gap-2">
-						<div className="flex items-center">
+					{/* <div className="flex items-center">
 							<Label htmlFor="password">Password</Label>
-							<Link href="#" className="ml-auto inline-block text-sm underline">
+							<Link href="#" className="ml-auto inline-block text-sm text-black underline">
 								Forgot your password?
 							</Link>
-						</div>
-						<Input
-							id="password"
-							type="password"
-							required
-							className="border-black text-black"
-						/>
-					</div>
+						</div> */}
 					<Button type="submit" className="w-full bg-black">
-						Login
+						Verify
 					</Button>
 				</div>
-				<div className="mt-4 text-center text-sm">
-					Don&apos;t have an account?{" "}
-					<Link href="/register" className="underline">
-						Register
-					</Link>
-				</div>
+				</form>
 			</CardContent>
 		</Card>
-	);
+		}
+		</>
+	)
 }
diff --git a/apps/gifting-concierge/src/app/confirm/[giftId]/confirm-gift.tsx b/apps/gifting-concierge/src/app/confirm/[giftId]/confirm-gift.tsx
@@ -9,6 +9,9 @@ import { Step, Stepper, useStepper } from "@theliaison/ui/stepper";
 import { ChevronRightIcon } from "lucide-react";
 import Link from "next/link";
 import { useConfirmDialogStore } from "~/store/confirm-dialog";
+import { createClient } from '@supabase/supabase-js'; 
+import { LoginForm } from "~/app/(auth)/login/login-form";
+
 
 const steps: { label: string; description: string }[] = [
 	{
@@ -107,16 +110,17 @@ function StepperConfirmGift({ children }: { children: React.ReactNode }) {
 			<Stepper initialStep={0} steps={steps}>
 				{steps.map((stepProps, index) => {
 					return (
-						<Step key={stepProps.label} {...stepProps}>
+						<Step key={stepProps.label}>
 							<div
 								className={cn(
-									"min-h-40 h-auto flex items-center justify-center my-2 border bg-secondary text-primary rounded-md p-4",
+									"min-h-40 h-auto flex items-center justify-center my-2 border bg-white text-primary rounded-md p-4",
 									{
 										"bg-transparent": index === 2,
 									},
 								)}
 							>
 								{index === 0 ? <FirstStepConfirmGift /> : null}
+								{index === 1 ? <LoginForm/> : null}
 								{index === 2 ? children : null}
 							</div>
 						</Step>
@@ -157,10 +161,11 @@ const Footer = () => {
 							onClick={prevStep}
 							size="sm"
 							variant="secondary"
+							className="bg-white hover:bg-slate-300"
 						>
 							Prev
 						</Button>
-						<Button size="sm" onClick={nextStep}>
+						<Button size="sm" className="bg-gray-800 hover:bg-slate-900" onClick={nextStep}>
 							{isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
 						</Button>
 					</>
@@ -217,3 +222,15 @@ function FirstStepConfirmGift() {
 		</div>
 	);
 }
+
+function LoginButton() {
+	// const origin = window.location.origin
+	// return (
+	// 	<div className="flex flex-col gap-2">
+	// 		<p>You need to log in</p>
+	// 		<Button onClick={() => window.open(`${origin}/login`, '_blank')}>
+	// 			Login
+	// 		</Button>
+	// 	</div>
+	// )
+}
diff --git a/apps/gifting-concierge/src/app/confirm/[giftId]/details/shipping-form.tsx b/apps/gifting-concierge/src/app/confirm/[giftId]/details/shipping-form.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button } from "@theliaison/ui/button";
+//import { Button } from "@theliaison/ui/button";
 import { Input } from "@theliaison/ui/input";
 import type React from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { cn } from "@theliaison/ui";
+import { SearchIcon } from "lucide-react";
 
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import {
@@ -18,10 +19,13 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@theliaison/ui/form";
+import { Button } from "@nextui-org/react";
 import {
 	Select,
 	SelectContent,
 	SelectItem,
+	SelectGroup,
+	SelectValue,
 	SelectTrigger,
 } from "@theliaison/ui/select";
 import { useState } from "react";
@@ -52,13 +56,22 @@ const ShippingForm = ({
 	});
 
 	const [fedexLocationData, setFedexLocationData] = useState<any>();
-
+	const [isLoading, setIsLoading] = useState<boolean>(false)
+//"Getting fedex locations..."
 	async function onSubmit(data: z.infer<typeof ShippingFormSchema>) {
-		toast.info("Getting fedex locations...");
-		const fedexLocation = await getFedexLocations(data.postal_code);
-		setFedexLocationData(fedexLocation?.locationDetailList);
-		console.log(fedexLocation);
-		toast.success("FedEx locations fetched successfully!");
+		setIsLoading(true)
+		try {
+			toast.info("Loading location...");
+			const fedexLocation = await getFedexLocations(data.postal_code);
+			setFedexLocationData(fedexLocation?.locationDetailList);
+			console.log(fedexLocation);
+
+		} catch (error) {
+			console.error(error)
+		} finally {
+			toast.success("FedEx locations fetched successfully!");
+			setIsLoading(false)
+		}
 		// console.log(data);
 		// toast.promise(
 		// 	validateRecipientAddress({
@@ -113,7 +126,7 @@ const ShippingForm = ({
 						render={({ field }) => (
 							<FormItem className="w-full text-white">
 								<FormLabel className="text-foreground">
-									Postal Code/ZIP
+								Enter your zip code to find locations near you
 								</FormLabel>
 								<FormControl>
 									<Input placeholder="90210" {...field} />
@@ -124,17 +137,21 @@ const ShippingForm = ({
 					/>
 				</div>
 
-				<Select>
+				{
+					fedexLocationData && 
+					<Select>
 					<SelectTrigger>
-						Select a location
+						<SelectValue placeholder="Select a location"/>
 						<ChevronDownIcon className="ml-2 h-4 w-4" />
 					</SelectTrigger>
 					<SelectContent>
+						<SelectGroup>
 						{fedexLocationData?.map((location) => (
 							<SelectItem
 								value={location.distance.value}
-								key={location.distance.value}
+								key={location.contactAndAddress.address.streetLines[0]}
 								className="grid grid-cols-2 gap-1 grid-flow-col"
+								// onClick={() => console.log(location.contactAndAddress)}
 							>
 								<div>
 									<p className="font-semibold">
@@ -148,18 +165,38 @@ const ShippingForm = ({
 								</div>
 							</SelectItem>
 						))}
+						</SelectGroup>
 					</SelectContent>
-				</Select>
+				</Select> 
+				}
 
-				<Button
+				<Button 
+					className="w-full bg-white text-black hover:bg-[#DBD0C5]"
+					type="submit"
+					isLoading={isLoading}
+					disabled={false}
+					>
+					Search
+					<SearchIcon/>
+				</Button>
+
+				{/* <Button
 					type="submit"
 					className="w-full bg-white text-black hover:bg-[#DBD0C5]"
 				>
 					Confirm
-				</Button>
+				</Button> */}
 			</form>
 		</Form>
 	);
 };
 
+// function Loading() {
+// 	return (
+// 		<>
+// 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect fill="#FFF" width="100%" height="100%"/><radialGradient id="a12" cx=".66" fx=".66" cy=".3125" fy=".3125" gradientTransform="scale(1.5)"><stop offset="0" stop-color="#CACBCC"></stop><stop offset=".3" stop-color="#CACBCC" stop-opacity=".9"></stop><stop offset=".6" stop-color="#CACBCC" stop-opacity=".6"></stop><stop offset=".8" stop-color="#CACBCC" stop-opacity=".3"></stop><stop offset="1" stop-color="#CACBCC" stop-opacity="0"></stop></radialGradient><circle transform-origin="center" fill="none" stroke="url(#a12)" stroke-width="26" stroke-linecap="round" stroke-dasharray="200 1000" stroke-dashoffset="0" cx="100" cy="100" r="70"><animateTransform type="rotate" attributeName="transform" calcMode="spline" dur="2" values="360;0" keyTimes="0;1" keySplines="0 0 1 1" repeatCount="indefinite"></animateTransform></circle><circle transform-origin="center" fill="none" opacity=".2" stroke="#CACBCC" stroke-width="26" stroke-linecap="round" cx="100" cy="100" r="70"></circle></svg>
+//   		</>
+// 	)
+// }
+
 export default ShippingForm;
diff --git a/packages/ui/src/stepper/step.tsx b/packages/ui/src/stepper/step.tsx
@@ -64,7 +64,8 @@ const Step = React.forwardRef<HTMLLIElement, StepProps>(
 						</VerticalStep>
 					);
 				default:
-					return <HorizontalStep ref={ref} {...sharedProps} />;
+					return <span className="h-6"/>
+					// return <HorizontalStep ref={ref} {...sharedProps} />;
 			}
 		};