结账页vip plus 功能 --- v1

README.md

@@ -256,6 +256,7 @@ apollo client 中的错误分类：
 
 next-auth只负责登录和校验用户
 
+关于next-auth: https://juejin.cn/post/7532344864815022115
 
 
 ## 关于cookie的携带
@@ -348,6 +349,7 @@ useEffect 只会在客户端执行，具体是在浏览器绘制后执行，服
 
 45. nextjs缓存与bagisto后台管理打通（后台修改配置通知nextjs清除缓存）
     -- 参考https://chat.deepseek.com/share/6h1huduahkqln69gu1
+46. 购物车详情里的subtotal和grandtotal金额不对，（一个sku产品加购多个，钱只算了一个）
 
 
 > 39,40 参考 https://chatgpt.com/share/6a4f0637-ad28-83ea-ad44-423740795054

src/app/(checkout)/checkout/_components/CheckoutWrapper.tsx

@@ -39,6 +39,7 @@ import CommonModal from "@/components/theme/ui/CommonModal";
 import PaypalApplepayButton from "./PaymentButton/PaypalApplepayButton";
 import CheckoutGiftCardGate from "./GiftCard/CheckoutGiftCardGate";
 import PromotionsDetails from "./PromotionsDetails";
+import CheckoutVipPlus from "./VipPlus/CheckoutVipPlus";
 
 /***
  * 不用useForShipping字段了
@@ -566,7 +567,7 @@ export default function CheckoutWrapper({
             return resultData;
     }
 
-    const onChangeGiftcard = async (paylod: CartDetail) => {
+    const onCartDataChange = async (paylod: CartDetail) => {
         dispatchCartStore('update',paylod);
         setCartData({...paylod});
         // @todo 还要请求支付方式和运输方式
@@ -663,12 +664,19 @@ export default function CheckoutWrapper({
                     onShipMethodChange={handleShippingMethodChange}  
                 />
             </div>
-
+            {!cartData.isGuest &&
+                <div className="mt-6 box-border px-4">
+                    <CheckoutGiftCardGate 
+                        giftcardNumber={cartData.giftcardNumber || ''}
+                        formattedGiftcardAmount={cartData.formattedGiftcardAmount} 
+                        onChangeGiftcard={onCartDataChange}
+                    />
+                </div>
+            }
             <div className="mt-6 box-border px-4">
-                <CheckoutGiftCardGate 
-                    giftcardNumber={cartData.giftcardNumber || ''}
-                    formattedGiftcardAmount={cartData.formattedGiftcardAmount} 
-                    onChangeGiftcard={onChangeGiftcard}
+                <CheckoutVipPlus 
+                    cartData={cartData} 
+                    onSwitchVip={onCartDataChange}
                 />
             </div>
             

src/app/(checkout)/checkout/_components/ContinueToPay/ContinueToPayOrderInfo.tsx

@@ -164,22 +164,43 @@ export default function ContinueToPayOrderInfo({
                     <p className="text-ly-12 leading-ly-20">Subtotal</p>
                     <p className="text-ly-12 leading-ly-20">{orderSymbol}{orderDetail.subTotal}</p>
                 </div>
-                <div className="flex justify-between mt-3 first:mt-0">
-                    <p className="text-ly-12 leading-ly-20">Shipping</p>
-                    <p className="text-ly-12 leading-ly-20">{orderSymbol}{orderDetail.shippingAmount}</p>
-                </div>
-                <div className="flex justify-between mt-3 first:mt-0">
-                    <p className="text-ly-12 leading-ly-20">Tax</p>
-                    <p className="text-ly-12 leading-ly-20">{orderSymbol}{orderDetail.taxAmount}</p>
-                </div>
-                <div className="flex justify-between mt-3 first:mt-0">
-                    <p className="text-ly-12 leading-ly-20">Discount</p>
-                    <p className="text-ly-12 leading-ly-20">{orderSymbol}{orderDetail.discountAmount}</p>
-                </div>
-                <div className="flex justify-between mt-3 first:mt-0">
-                    <p className="text-ly-12 leading-ly-20">Gift Card</p>
-                    <p className="text-ly-12 leading-ly-20">-{orderSymbol}{orderDetail.giftcardAmount}</p>
-                </div>
+                {orderDetail.shippingAmount !== 0 &&
+                    <div className="flex justify-between mt-3 first:mt-0">
+                        <p className="text-ly-12 leading-ly-20">Shipping</p>
+                        <p className="text-ly-12 leading-ly-20">{orderSymbol}{orderDetail.shippingAmount}</p>
+                    </div>
+                }
+                {orderDetail.taxAmount !== 0 &&
+                    <div className="flex justify-between mt-3 first:mt-0">
+                        <p className="text-ly-12 leading-ly-20">Tax</p>
+                        <p className="text-ly-12 leading-ly-20">{orderSymbol}{orderDetail.taxAmount}</p>
+                    </div>
+                }
+                {(orderDetail.vipPlusAmount !== '0.00' && orderDetail.vipPlusAmount !== null)  &&
+                    <div className="flex justify-between mt-3 first:mt-0">
+                        <p className="text-ly-12 leading-ly-20">Plus Fee</p>
+                        <p className="text-ly-12 leading-ly-20">{orderSymbol}{orderDetail.vipPlusAmount}</p>
+                    </div>
+                }
+                {orderDetail.discountAmount !== 0 &&
+                    <div className="flex justify-between mt-3 first:mt-0">
+                        <p className="text-ly-12 leading-ly-20">Discount</p>
+                        <p className="text-ly-12 leading-ly-20">-{orderSymbol}{orderDetail.discountAmount}</p>
+                    </div>
+                }
+                {(orderDetail.giftcardAmount !== '0.00' && orderDetail.giftcardAmount !== null) &&
+                    <div className="flex justify-between mt-3 first:mt-0">
+                        <p className="text-ly-12 leading-ly-20">Gift Card</p>
+                        <p className="text-ly-12 leading-ly-20">-{orderSymbol}{orderDetail.giftcardAmount}</p>
+                    </div>
+                }
+                {(orderDetail.vipDiscountAmount !== '0.00' && orderDetail.vipDiscountAmount !== null) &&
+                    <div className="flex justify-between mt-3 first:mt-0">
+                        <p className="text-ly-12 leading-ly-20">Plus Save</p>
+                        <p className="text-ly-12 leading-ly-20">-{orderSymbol}{orderDetail.vipDiscountAmount}</p>
+                    </div>
+                }
+
                 {/* <div className="flex justify-between mt-3 first:mt-0">
                     <p className="text-ly-12 leading-ly-20">You Earn</p>
                     <p className="text-ly-12 leading-ly-20">600 Reward Points</p>

src/app/(checkout)/checkout/_components/PromotionsDetails.tsx

@@ -16,14 +16,30 @@ export default function PromotionsDetails({cartData}:{
                     <span>Subtotal</span>
                     <span>{cartData.formattedSubtotal}</span>
                 </li>
-                <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
-                    <span>Shipping Method</span>
-                    <span>{cartData.formattedShippingAmount}</span>
-                </li>
-                <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
-                    <span>Gift Card</span>
-                    <span className="flex items-center flex-none h-6 bg-ly-gold px-2 text-ly-14">-{cartData.formattedGiftcardAmount}</span>
-                </li>
+                {cartData.shippingAmount !== 0 &&
+                    <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
+                        <span>Shipping Method</span>
+                        <span>{cartData.formattedShippingAmount}</span>
+                    </li>
+                }
+                {cartData.vipPlusAmount !== 0 &&
+                    <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
+                        <span>Vip Plus Fee</span>
+                        <span>{cartData.formattedVipPlusAmount}</span>
+                    </li>
+                }
+                {cartData.vipDiscountAmount !== 0 &&
+                    <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
+                        <span>Plus</span>
+                        <span className="flex items-center flex-none h-6 bg-ly-gold px-2 text-ly-14">-{cartData.formattedVipDiscountAmount}</span>
+                    </li>
+                }
+                {cartData.giftcardAmount !== 0 &&
+                    <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
+                        <span>Gift Card</span>
+                        <span className="flex items-center flex-none h-6 bg-ly-gold px-2 text-ly-14">-{cartData.formattedGiftcardAmount}</span>
+                    </li>
+                }
                 <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
                     <span>Grand Total</span>
                     <span>{cartData.formattedGrandTotal}</span>

src/app/(public)/paymentresult/_components/OrderDetailWrapper.tsx

@@ -176,22 +176,42 @@ export default function OrderDetailWrapper({
                     <p className="text-ly-12 leading-ly-20">Subtotal</p>
                     <p className="text-ly-12 leading-ly-20">{currency && currency.symbol}{orderDetailRes?.subTotal}</p>
                 </div>
-                <div className="flex justify-between mt-3 first:mt-0">
-                    <p className="text-ly-12 leading-ly-20">Shipping</p>
-                    <p className="text-ly-12 leading-ly-20">{currency && currency.symbol}{orderDetailRes?.shippingAmount}</p>
-                </div>
-                <div className="flex justify-between mt-3 first:mt-0">
-                    <p className="text-ly-12 leading-ly-20">Tax</p>
-                    <p className="text-ly-12 leading-ly-20">{currency && currency.symbol}{orderDetailRes?.taxAmount}</p>
-                </div>
-                <div className="flex justify-between mt-3 first:mt-0">
-                    <p className="text-ly-12 leading-ly-20">Discount</p>
-                    <p className="text-ly-12 leading-ly-20">{currency && currency.symbol}{orderDetailRes?.discountAmount}</p>
-                </div>
-                <div className="flex justify-between mt-3 first:mt-0">
-                    <p className="text-ly-12 leading-ly-20">Gift Card</p>
-                    <p className="text-ly-12 leading-ly-20">-{currency && currency.symbol}{orderDetailRes?.giftcardAmount}</p>
-                </div>
+                {!!orderDetailRes?.shippingAmount &&
+                    <div className="flex justify-between mt-3 first:mt-0">
+                        <p className="text-ly-12 leading-ly-20">Shipping</p>
+                        <p className="text-ly-12 leading-ly-20">{currency && currency.symbol}{orderDetailRes?.shippingAmount}</p>
+                    </div>
+                }
+                {!!orderDetailRes?.taxAmount &&
+                    <div className="flex justify-between mt-3 first:mt-0">
+                        <p className="text-ly-12 leading-ly-20">Tax</p>
+                        <p className="text-ly-12 leading-ly-20">{currency && currency.symbol}{orderDetailRes?.taxAmount}</p>
+                    </div>
+                }
+                {(orderDetailRes?.vipPlusAmount !== '0.00' && orderDetailRes?.vipPlusAmount !== null) &&
+                    <div className="flex justify-between mt-3 first:mt-0">
+                        <p className="text-ly-12 leading-ly-20">Plus Fee</p>
+                        <p className="text-ly-12 leading-ly-20">{currency && currency.symbol}{orderDetailRes?.vipPlusAmount}</p>
+                    </div>
+                }
+                {!!orderDetailRes?.discountAmount &&
+                    <div className="flex justify-between mt-3 first:mt-0">
+                        <p className="text-ly-12 leading-ly-20">Discount</p>
+                        <p className="text-ly-12 leading-ly-20">-{currency && currency.symbol}{orderDetailRes?.discountAmount}</p>
+                    </div>
+                }
+                {(orderDetailRes?.giftcardAmount !== '0.00' && orderDetailRes?.giftcardAmount !== null) &&
+                    <div className="flex justify-between mt-3 first:mt-0">
+                        <p className="text-ly-12 leading-ly-20">Gift Card</p>
+                        <p className="text-ly-12 leading-ly-20">-{currency && currency.symbol}{orderDetailRes?.giftcardAmount}</p>
+                    </div>
+                }
+                {(orderDetailRes?.vipDiscountAmount !== '0.00' && orderDetailRes?.vipDiscountAmount !== null) &&
+                    <div className="flex justify-between mt-3 first:mt-0">
+                        <p className="text-ly-12 leading-ly-20">Plus Save</p>
+                        <p className="text-ly-12 leading-ly-20">-{currency && currency.symbol}{orderDetailRes?.vipDiscountAmount}</p>
+                    </div>
+                }
                 {/* <div className="flex justify-between mt-3 first:mt-0">
                     <p className="text-ly-12 leading-ly-20">You Earn</p>
                     <p className="text-ly-12 leading-ly-20">600 Reward Points</p>

src/app/globals.css

@@ -77,6 +77,8 @@ html {
   --color-ly-lightgray: #f9f9f9;
   --color-ly-middlegray: #f2f2f2;
   --color-ly-gray: #d3d3d3; /*可被映射为text-ly-gray，bg-ly-gray等相关的颜色类目*/
+  --color-ly-deepgray: #ACACAC;
+  --color-ly-gold: #ffd700;
   --color-ly-gold: #ffd700;
   --color-ly-green: #01754a;
   --color-ly-middlegreen: #036141;
@@ -262,6 +264,9 @@ body {
   .ly-thin-shadow{
       box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   }
+  .ly-vipplus-bg{
+    background: linear-gradient(128.05deg, rgba(250, 231, 200, 1) 0%, rgba(249, 255, 235, 1) 27.29%, rgba(242, 215, 172, 1) 64.42%, rgba(232, 202, 153, 1) 100%);
+  }
 }
 
 apple-pay-button {

src/components/home/HomeImageBanner.tsx

@@ -1,12 +1,12 @@
 "use client";
 
+import { useRouter } from 'next/navigation';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import {CurrencySwitch} from "@/components/common/CurrencySwitch/CurrencySwitch";
 import makeClient from "@/lib/ApolloClientBrowser";
-
-import { GET_CART_ITEM,GET_FILTER_ATTRIBUTES,CREATE_APPLY_COUPON } from "@/graphql";
-import { useMutation, useLazyQuery } from "@apollo/client/react";
+import { GET_CART_ITEM,GET_FILTER_ATTRIBUTES,CREATE_APPLY_COUPON, GET_COUNTRY_STATES} from "@/graphql";
+import { useMutation, useLazyQuery, useQuery } from "@apollo/client/react";
 import {handleApolloBusinessError} from "@/lib/ApolloErrorHandler";
 import { useCustomToast } from "@/utils/hooks/useToast";
 // interface ImageCarouselProps {
@@ -19,14 +19,15 @@ import { useCustomToast } from "@/utils/hooks/useToast";
 //     };
 // }
 export default function HomeImageBanner() {
+  const router = useRouter();
   const { showToast } = useCustomToast();
   const apolloClient = makeClient();
-  // const res = useQuery(GET_COUNTRY_STATES, {
-  //         variables: {
-  //             countryId: 1000
-  //         }
-  //     });
-  //     console.log('query state --- res', res);
+  const res = useQuery(GET_COUNTRY_STATES, {
+          variables: {
+              countryId: 1000
+          }
+      });
+      console.log('query state --- res', res);
   const ttt = async () => {
     try {
       const res = await apolloClient.mutate({
@@ -118,6 +119,12 @@ const [getContent] = useLazyQuery(GET_FILTER_ATTRIBUTES,{
                 console.log('testApplyCoupon error ---- ',err);
             }
         };
+
+
+        const toggleLoginModal = () => {
+          // openLoginModal();
+          router.refresh();
+        };
   
   return (
     <>
@@ -141,6 +148,8 @@ const [getContent] = useLazyQuery(GET_FILTER_ATTRIBUTES,{
       <SwiperSlide>Slide 4</SwiperSlide>
     </Swiper>
     <CurrencySwitch/>
+
+    <p><button onClick={() => toggleLoginModal()}>show Login Modal</button></p>
     </>
   )
 }

src/graphql/cart/mutations/AddProductToCart.ts

@@ -50,6 +50,7 @@ export const CREATE_ADD_PRODUCT_IN_CART: TypedDocumentNode<AddToCartData> = gql`
         discountAmount
         giftcardAmount
         vipPlusAmount
+        vipExpireDate
         taxAmount
         taxTotal
         shippingAmount

src/graphql/cart/mutations/CreateMergeCart.ts

@@ -42,6 +42,7 @@ export const CREATE_MERGE_CART: TypedDocumentNode<CreateMergeCartData> = gql`
         discountAmount
         giftcardAmount
         vipPlusAmount
+        vipExpireDate
         taxAmount
         taxTotal
         shippingAmount

src/graphql/cart/mutations/GetCartItem.ts

@@ -36,6 +36,7 @@ export const GET_CART_ITEM: TypedDocumentNode<GetCartItemData> = gql`
         discountAmount
         giftcardAmount
         vipPlusAmount
+        vipExpireDate
         taxAmount
         taxTotal
         shippingAmount

src/graphql/cart/mutations/RemoveCartItem.ts

@@ -36,6 +36,7 @@ export const REMOVE_CART_ITEM: TypedDocumentNode<RemoveCartItemData> = gql`
         discountAmount
         giftcardAmount
         vipPlusAmount
+        vipExpireDate
         taxAmount
         taxTotal
         shippingAmount

src/graphql/cart/mutations/UpdateCartItems.ts

@@ -45,6 +45,7 @@ export const UPDATE_CART_ITEM: TypedDocumentNode<UpdateCartItemData> = gql
         discountAmount
         giftcardAmount
         vipPlusAmount
+        vipExpireDate
         taxAmount
         taxTotal
         shippingAmount

src/graphql/checkout/mutations/CreateSaveCheckoutCart.ts

@@ -50,6 +50,7 @@ export const CREATE_SAVE_CHECKOUT_CART: TypedDocumentNode<SaveCheckoutCartData>
                 discountAmount
                 giftcardAmount
                 vipPlusAmount
+                vipExpireDate
                 taxAmount
                 taxTotal
                 shippingAmount

src/types/cart/type.ts

@@ -54,6 +54,7 @@ export interface CartDetail {
   // baseDiscountAmount: number;
   giftcardAmount: number;
   vipPlusAmount: number;
+  vipExpireDate: string;
   taxAmount: number;
   taxTotal: number;
   shippingAmount: number;

src/utils/cartDetailTools.ts

@@ -14,6 +14,7 @@ export function formatCartDetail(cart:CartDetail): CartDetail {
         giftcardNumber: cart.giftcardNumber,
         giftcardAmount: cart.giftcardAmount,
         vipPlusAmount: cart.vipPlusAmount,
+        vipExpireDate: cart.vipExpireDate,
         subtotal: cart.subtotal,
         subTotalInclTax: cart.subTotalInclTax,
         discountAmount: cart.discountAmount,