saafe-redirection-flow 2.0.0

package/src/pages/Login.tsx

@@ -0,0 +1,363 @@
+import { useState, useEffect } from "react";
+import { FrostedLayout } from "@/components/layouts/FrostedLayout";
+import { OTPInputComponent } from "@/components/ui/otp-input";
+import logo from "../assets/brand/saafe-icon.svg";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { useNavigate } from "react-router-dom";
+import { z } from "zod";
+import { useForm, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { FormField } from "@/components/ui/form";
+import { useAuthStore } from "@/store/auth.store";
+import { getErrorMessage } from "@/utils/api-error";
+import { Input } from "@/components/ui/input";
+import { useInitiateOtp, useVerifyOtp } from "@/hooks/use-auth-query";
+import { useRedirectStore } from "@/store/redirect.store";
+import { trackEvent, EVENTS } from "@/utils/posthog";
+import { useTranslation } from "react-i18next";
+import { handleApiErrorWithCallback } from "@/utils/error-callback";
+import { DocumentLink } from "@/components/ui/document-link";
+
+const Login = () => {
+  const [isOtpSent, setIsOtpSent] = useState(false);
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const { t } = useTranslation();
+
+  // Get auth state from Zustand store
+  const {
+    error,
+    isAuthenticated,
+    otpUniqueId,
+    setError
+  } = useAuthStore();
+
+  // Get redirect information
+  const { decodedInfo, isDecoded } = useRedirectStore();
+
+  // React Query hooks
+  const initiateOtpMutation = useInitiateOtp();
+  const verifyOtpMutation = useVerifyOtp();
+  const isLoading = initiateOtpMutation.isPending || verifyOtpMutation.isPending;
+
+  // Create schemas using the translation function
+  const otpFormSchema = z.object({
+    otp: z.string().min(4, t("errors.enterOtp")),
+    terms: z.boolean().refine((value) => value, {
+      message: t("errors.termsRequired"),
+    }),
+  });
+
+  const phoneFormSchema = z.object({
+    phoneNumber: z.string().min(10, t("errors.invalidPhone")).max(10, t("errors.invalidPhone")),
+    terms: z.boolean().refine((value) => value, {
+      message: t("errors.termsRequired"),
+    }),
+  });
+
+  const otpForm = useForm<z.infer<typeof otpFormSchema>>({
+    resolver: zodResolver(otpFormSchema),
+    defaultValues: {
+      otp: "",
+      terms: true,
+    },
+  });
+
+  const phoneForm = useForm<z.infer<typeof phoneFormSchema>>({
+    resolver: zodResolver(phoneFormSchema),
+    defaultValues: {
+      phoneNumber: decodedInfo?.phoneNumber || "",
+      terms: true,
+    },
+  });
+
+  // Auto-populate phone number and pre-check terms when decoded info is available
+  useEffect(() => {
+    if (isDecoded && decodedInfo?.phoneNumber) {
+      phoneForm.setValue("phoneNumber", decodedInfo.phoneNumber);
+      phoneForm.setValue("terms", true); // Auto-accept terms
+
+      // If we have a phone number from the URL, auto-initiate OTP
+      if (decodedInfo.phoneNumber.length >= 10 && !isOtpSent && !isAuthenticated) {
+        // Auto-submit the form with the provided phone number
+        handlePhoneSubmit({
+          phoneNumber: decodedInfo.phoneNumber,
+          terms: true
+        });
+      }
+    }
+  }, [isDecoded, decodedInfo?.phoneNumber]);
+
+  // Reset error on form change
+  useEffect(() => {
+    if (error) {
+      setError(null);
+    }
+  }, [otpForm.watch(), phoneForm.watch(), error, setError]);
+
+  // Redirect if authenticated
+  // useEffect(() => {
+  //   if (isAuthenticated && decodedInfo) {
+  //     console.log('decodedInfo >>>>>>>>>>>>> ', decodedInfo);
+  //     if (decodedInfo.isUserPresent) {
+  //       navigate("/link-accounts/old-user");
+  //     } else if (decodedInfo?.fiTypesRequiredForConsent.length > 0) {
+  //       if (decodedInfo?.fipId) {
+  //         navigate(`/link-accounts/discovery`);
+  //       } else {
+  //         const fiTypes = extractCategories(decodedInfo?.fiTypesRequiredForConsent);
+  //         console.log('fiTypes >>>>>>>>>>>>> ', fiTypes);
+  //         navigate(`/link-accounts/${fiTypes?.[0]?.toLowerCase()}`);
+  //       }
+  //     } else {
+  //       navigate("/link-accounts/banks");
+  //     }
+  //   }
+  // }, [isAuthenticated, navigate, decodedInfo]);
+
+  // Handle phone number submit
+  const handlePhoneSubmit = async (data: z.infer<typeof phoneFormSchema>) => {
+    try {
+      const response = await initiateOtpMutation.mutateAsync({
+        phoneNumber: data.phoneNumber,
+        isTermsAndConditionAgreed: data.terms
+      });
+
+      if (response) {
+        setPhoneNumber(data.phoneNumber);
+        setIsOtpSent(true);
+
+        // Store otpUniqueID explicitly
+        if (response.otpUniqueID) {
+          setError(null);
+          useAuthStore.getState().setOtpUniqueId(response.otpUniqueID);
+          trackEvent(EVENTS.INIT_OTP, { phoneNumber: data.phoneNumber });
+        }
+      }
+    } catch (error: unknown) {
+      if (error && typeof error === 'object' && 'response' in error &&
+        error.response && typeof error.response === 'object' &&
+        'data' in error.response && error.response.data &&
+        typeof error.response.data === 'object' && 'errorCode' in error.response.data) {
+        phoneForm.setError("phoneNumber", {
+          message: String(error.response.data.errorCode)
+        });
+      } else {
+        phoneForm.setError("phoneNumber", {
+          message: "Failed to send OTP"
+        });
+      }
+    }
+  };
+
+  // Handle OTP verification
+  const handleOtpSubmit = async (data: z.infer<typeof otpFormSchema>) => {
+    if (!otpUniqueId) {
+      setError(t("login.sessionExpired"));
+      otpForm.setError("otp", { message: "Session expired" });
+      return;
+    }
+
+    try {
+      await verifyOtpMutation.mutateAsync({
+        phoneNumber,
+        code: data.otp,
+        otpUniqueID: otpUniqueId
+      });
+      trackEvent(EVENTS.SUBMIT_OTP, { phoneNumber });
+      // Navigation will happen via useEffect when isAuthenticated changes
+    } catch (error: unknown) {
+      if (error && typeof error === 'object' && 'response' in error &&
+        error.response && typeof error.response === 'object' &&
+        'data' in error.response && error.response.data &&
+        typeof error.response.data === 'object' && 'errorCode' in error.response.data) {
+        otpForm.setValue("otp", "");
+        otpForm.setError("otp", {
+          message: String(error.response.data.errorCode)
+        });
+      } else {
+        otpForm.setValue("otp", "");
+        otpForm.setError("otp", {
+          message: "Failed to verify OTP"
+        });
+        handleApiErrorWithCallback(error, "Failed to verify OTP");
+      }
+    }
+  };
+
+  // Handle OTP resend
+  const handleResendOtp = async () => {
+    if (!phoneNumber) return;
+
+    try {
+      await initiateOtpMutation.mutateAsync({
+        phoneNumber,
+        isTermsAndConditionAgreed: phoneForm.getValues("terms")
+      });
+      trackEvent(EVENTS.RESEND_OTP, { phoneNumber });
+    } catch (error: unknown) {
+      if (error && typeof error === 'object' && 'response' in error &&
+        error.response && typeof error.response === 'object' &&
+        'data' in error.response && error.response.data &&
+        typeof error.response.data === 'object' && 'errorCode' in error.response.data) {
+        phoneForm.setError("phoneNumber", {
+          message: String(error.response.data.errorCode)
+        });
+      } else {
+        phoneForm.setError("phoneNumber", {
+          message: "Failed to resend OTP"
+        });
+        handleApiErrorWithCallback(error, "Failed to resend OTP");
+      }
+    }
+  };
+
+  return (
+    <FrostedLayout notAuthenticated={true}>
+      <div className="flex flex-col items-center justify-center gap-4 w-full h-full">
+        <div>
+          <div className="flex flex-col items-center gap-4">
+            <img src={logo} alt="logo" className="w-10 h-10" />
+
+            {!isOtpSent ? (
+              // Phone Number Form
+              <div className="w-full">
+                <h2 className="text-xl font-semibold text-center mb-6 dark:text-white">{t("login.title")}</h2>
+                <form onSubmit={phoneForm.handleSubmit(handlePhoneSubmit)} className="space-y-6">
+                  <FormField
+                    control={phoneForm.control}
+                    name="phoneNumber"
+                    render={({ field }) => (
+                      <div className="space-y-2">
+                        <Label htmlFor="phoneNumber">{t("login.phoneNumber")}</Label>
+                        <Input
+                          id="phoneNumber"
+                          placeholder={t("login.phoneNumberPlaceholder")}
+                          className="h-12 dark:text-white"
+                          maxLength={10}
+                          type="tel"
+                          inputMode="numeric"
+                          {...field}
+                          onChange={(e) => {
+                            const value = e.target.value.replace(/[^0-9]/g, '');
+                            field.onChange(value);
+                          }}
+                        />
+                        {phoneForm.formState.errors.phoneNumber && (
+                          <p className="text-red-500 text-sm">
+                            {phoneForm.formState.errors.phoneNumber.message}
+                          </p>
+                        )}
+                      </div>
+                    )}
+                  />
+
+                  <div className="flex items-center gap-2">
+                    <FormField
+                      control={phoneForm.control}
+                      name="terms"
+                      render={({ field }) => (
+                        <Checkbox
+                          id="phone-terms"
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                          error={!!phoneForm.formState.errors.terms?.message}
+                          errorMessage={phoneForm.formState.errors.terms?.message?.toString() || ''}
+                        />
+                      )}
+                    />
+                    <Label htmlFor="phone-terms" className="text-muted-secondary font-normal">
+                      <div className="leading-5">
+                        {" "}{t("login.iAgree")}{" "}
+                        <DocumentLink type="terms">
+                          {" "}{t("login.termsAndConditions")}{" "}
+                        </DocumentLink>
+                        {" "}{t("login.and")}{" "}
+                        <DocumentLink type="privacy">
+                          {" "}{t("login.privacyPolicy")}{" "}
+                        </DocumentLink>
+                      </div>
+                    </Label>
+                  </div>
+
+                  {error && (
+                    <p className="text-red-500 text-sm">{getErrorMessage(error)}</p>
+                  )}
+
+                  <Button type="submit" size="lg" className="w-full mt-8 md:mt-12" disabled={isLoading}>
+                    {isLoading ? t("login.sendingOtp") : t("login.getOtp")}
+                  </Button>
+                </form>
+              </div>
+            ) : (
+              // OTP Form
+              <form onSubmit={otpForm.handleSubmit(handleOtpSubmit)} className="w-full space-y-6">
+                <Controller
+                  control={otpForm.control}
+                  name="otp"
+                  render={({ field }) => (
+                    <OTPInputComponent
+                      title={t("login.enterOtp")}
+                      mobileNumber={phoneNumber}
+                      onResend={handleResendOtp}
+                      handleEdit={() => setIsOtpSent(false)}
+                      countdownTime={30}
+                      error={!!otpForm.formState.errors.otp?.message}
+                      errorMessage={otpForm.formState.errors.otp?.message?.toString() || ''}
+                      disabled={isLoading}
+                      resendLoading={initiateOtpMutation.isPending}
+                      value={field.value}
+                      handleLogin={otpForm.handleSubmit(handleOtpSubmit)}
+                      onChange={field.onChange}
+                      maxLength={4}
+                      autoFocus={true}
+                    />
+                  )}
+                />
+
+                <div className="flex items-center gap-2 mt-12">
+                  <FormField
+                    control={otpForm.control}
+                    name="terms"
+                    render={({ field }) => (
+                      <Checkbox
+                        id="otp-terms"
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        error={!!otpForm.formState.errors.terms?.message}
+                        errorMessage={otpForm.formState.errors.terms?.message?.toString() || ''}
+                      />
+                    )}
+                  />
+                  <Label htmlFor="otp-terms" className="text-muted-secondary font-normal">
+                    <div className="leading-5">
+                      {t("login.iAgree")} {" "}
+                      <DocumentLink type="terms">
+                        {t("login.termsAndConditions")}
+                      </DocumentLink>
+                      {" "}{t("login.and")}{" "}
+                      <DocumentLink type="privacy">
+                        {t("login.privacyPolicy")}
+                      </DocumentLink>
+                    </div>
+                  </Label>
+                </div>
+
+                {error && (
+                  <p className="text-red-500 text-sm">{getErrorMessage(error)}</p>
+                )}
+
+                <Button type="submit" disabled={!otpForm.watch("otp") || isLoading} size="lg" className="w-full mt-8">
+                  {isLoading ? t("login.verifying") : t("login.verify")}
+                </Button>
+              </form>
+            )}
+          </div>
+        </div>
+      </div>
+    </FrostedLayout>
+  );
+};
+
+export default Login;