Преглед изворни кода

结账页地址模块添加校验邮箱是否注册功能;

fogwind пре 20 часа
родитељ
комит
ca447243c7

+ 60 - 6
src/app/(checkout)/checkout/_components/CheckoutAddress/CheckoutAssress.tsx

@@ -1,24 +1,25 @@
 "use client";
 
 import {Ref, useState, useEffect, useCallback, useImperativeHandle, useMemo } from "react";
-
+import { useRouter } from 'next/navigation';
 import { useForm, FormProvider } from "react-hook-form";
 import { useCustomToast } from "@/utils/hooks/useToast";
 import {useCheckoutAddress} from "@/utils/hooks/useCheckoutAddress"
-
+import {useLoginModal} from "@/providers/LoginModalProvider";
 import { useGetCustomerAddress } from "@utils/hooks/useGetCustomerAddress";
+import { EMAIL_REGEX } from "@utils/constants";
 import { 
     ShipAddressFormData,
     FullAddressFormData,
     CreateCheckoutAddressVariables,
 } from "@/types/checkout/type";
-import { CustomerAddressItem } from "@/types/customer/type";
+import { CustomerAddressItem,CheckEmailRegisteredData } from "@/types/customer/type";
 import { CartDetail,CartAddress } from "@/types/cart/type";
-
+import { formatCartDetail } from "@/utils/cartDetailTools";
+import {clientFetch} from "@/lib/restApiClient";
+import { confirmDialog } from "@/components/theme/ui/kernel/confirm/api";
 import { overlayLoading } from "@/components/theme/ui/kernel/loading/api";
-
 import {normalizePhoneForForm} from "@/utils/phoneNumberTools";
-
 import AddressResultDisplay from "./AddressResultDisplay";
 import ShippingAddressCheckout from "./ShippingAddressCheckout";
 import BillingAddressCheckout from "./BillingAddressCheckout";
@@ -210,13 +211,18 @@ export function CheckoutAddress({
     loginEmail,
     cartData,
     onSaveAddress,
+    onCartChange
 }: {
     ref: Ref<RefCheckoutAddressHandle>;
     loginEmail: string;
     cartData: CartDetail;
     onSaveAddress: (saveRes: {billingAddress: CartAddress; shippingAddress: CartAddress;}) => void;
+    onCartChange: (data: CartDetail,dispatch: boolean) => void;
 }) {
 
+    const router = useRouter();
+    const {openLoginModal} = useLoginModal();
+
     const addressFormDefaultValues = useMemo(() => {
         return getAddressFormDataFromCart(cartData,loginEmail)
     },[cartData,loginEmail]);
@@ -383,6 +389,53 @@ export function CheckoutAddress({
         return () => window.cancelAnimationFrame(timer)
     },[cartData.isGuest,addressFormDefaultValues]);
 
+    const verifyEmailIsRegistered = async (value: string) => {
+        if(!cartData.isGuest) return;
+        if(!EMAIL_REGEX.test(value)) return;
+        const param = new URLSearchParams({ email: value });
+
+        const res = await clientFetch<CheckEmailRegisteredData>(`/api/customer/check-email?${param.toString()}`,{
+            method: 'GET',
+        });
+
+        if(res.success && res.data.exists) { // 注册过
+            openLoginModal({
+                defaultEmail: value,
+                onFinalResult: async (res) => {
+                    if(res.mergeCartSuccess) { // 购物车合并成功
+                        if(res.cartAfterMerge){
+                            const newCartDetail = formatCartDetail(res.cartAfterMerge);
+                            onCartChange(newCartDetail,false);
+                        }
+                        
+                    } else { // 购物车合并失败
+                        // 三种 情况: 登录成功; 注册成功;
+                        if(res.loginSuccess) {
+                            // 登录成功 需要刷新页面
+                            showToast('You have logged in successfully. But something wrong','danger');
+                            await confirmDialog({
+                                title: "Warning",
+                                content: "You have logged in successfully. But something wrong. You must refresh the page.",
+                                noCancel: true,
+                            });
+                            window.location.reload();
+                        }
+                        if(res.registerSuccess && !res.loginSuccess) {
+                            // 注册成功,去登录
+                            await confirmDialog({
+                                title: "Warning",
+                                content: "You have registered successfully. But something wrong. You have to login.",
+                                noCancel: true,
+                            });
+                            router.replace('/customer/login');
+                        }
+                    }
+                }
+            });
+        }
+        
+    };
+
     // function tt() {
     //     const arr = [
     //         ['US','3803800217'], 
@@ -428,6 +481,7 @@ export function CheckoutAddress({
                                     customerAddressList={myAddressList}
                                     showFormField={showShipFormField}
                                     onShowFormFieldChange={showShipFormFieldChange}
+                                    onEmailChange={verifyEmailIsRegistered}
                                 />
                                 <BillingAddressCheckout 
                                     noAddress={noBillAddress}

+ 9 - 0
src/app/(checkout)/checkout/_components/CheckoutAddress/ShippingAddressCheckout.tsx

@@ -30,12 +30,14 @@ export default function ShippingAddressCheckout({
     showFormField,
     onShowFormFieldChange,
     customerAddressList,
+    onEmailChange
 }: {
     noAddress: boolean;
     isGuest: boolean;
     showFormField: boolean;
     onShowFormFieldChange: (e: boolean) => void;
     customerAddressList: CustomerAddressItem[];
+    onEmailChange: (value: string) => void;
 }) {
 
     const {countries} = useConfig();
@@ -263,6 +265,13 @@ export default function ShippingAddressCheckout({
                         pattern: {
                             value: EMAIL_REGEX,
                             message: "Please enter a valid email address",
+                        },
+                        onChange: (e) => {
+                            onEmailChange(e.target.value);
+                            // console.log(e.target.value);
+                            // if(isGuest) {
+                            //     verifyEmailIsRegistered(e.target.value);
+                            // }
                         }
                     })}
                     error={errors.shippingEmail && errors.shippingEmail.message as string}

+ 1 - 0
src/app/(checkout)/checkout/_components/CheckoutWrapper.tsx

@@ -331,6 +331,7 @@ export default function CheckoutWrapper({
                     loginEmail={loginEmail}
                     cartData={cartData}
                     onSaveAddress={saveAddressCallback}
+                    onCartChange={onCartDataChange}
                 />
  
                   

+ 1 - 1
src/app/(checkout)/checkout/_components/RewardPointsRedeemMoney/RewardPointsRedeemMoney.tsx

@@ -65,7 +65,7 @@ export default function RewardPointsRedeemMoney({
                 if(res.mergeCartSuccess) { // 购物车合并成功
                     if(res.cartAfterMerge) {
                         const newCartDetail = formatCartDetail(res.cartAfterMerge);
-                        onPointsChange(newCartDetail);
+                        onPointsChange(newCartDetail,false);
                     }
                     
                 } else { // 购物车合并失败

+ 8 - 1
src/components/common/LoginModal/LoginModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {useState, useLayoutEffect} from "react";
+import {useState, useLayoutEffect, useEffect} from "react";
 import { useRouter } from 'next/navigation';
 import { signIn } from "next-auth/react";
 import clsx from "clsx";
@@ -33,10 +33,12 @@ export interface LoginModalReult {
 export default function LoginModal({
     isShow,
     callbackUrl,
+    defaultEmail,
     closeModal,
     onFinalResult = async () => {},
 }: {
     isShow: boolean;
+    defaultEmail?: string;
     callbackUrl?: string
     closeModal: (bool: boolean) => void;
     onFinalResult?: (param: LoginModalReult) =>void | Promise<void>;
@@ -69,6 +71,11 @@ export default function LoginModal({
     });
     const [activeTab, setActiveTab] = useState<TabFlag>('login');
 
+    useEffect(() => {
+        
+        loginForm.setValue('username',defaultEmail || '');
+        
+    },[defaultEmail]);
 
     useLayoutEffect(() => {
         if(isShow) {

+ 2 - 0
src/providers/LoginModalProvider.tsx

@@ -11,6 +11,7 @@ import {
 import LoginModal, {LoginModalReult} from "@/components/common/LoginModal/LoginModal";
 
 type LoginModalOptions = {
+    defaultEmail?: string;
     callbackUrl?: string;
     onFinalResult?:(param:LoginModalReult)=>void | Promise<void>;
 };
@@ -75,6 +76,7 @@ export function LoginModalProvider({
                 closeModal={closeLoginModal}
                 callbackUrl={modalOptions?.callbackUrl}
                 onFinalResult={ modalOptions?.onFinalResult }
+                defaultEmail={modalOptions?.defaultEmail}
             />