二次支付页面样式；结账页和支付结果页样式优化；

README.md

@@ -361,6 +361,7 @@ useEffect 只会在客户端执行，具体是在浏览器绘制后执行，服
 51. 关于分享组件：https://chatgpt.com/share/6aa351f3-5ed0-83ea-8320-43d34d66f10a
     -- 可以参考https://github.com/nygardk/react-share
     -- 接着SocialShare写
+    -- https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard/writeText
 
 
 > 39,40 参考 https://chatgpt.com/share/6a4f0637-ad28-83ea-ad44-423740795054

src/app/(checkout)/checkout/_components/CheckoutAddress/BillingAddressCheckout.tsx

@@ -342,8 +342,8 @@ export default function BillingAddressCheckout ({
                     <label className="text-ly-16 block mb-1 font-semibold">
                         Name *
                     </label>
-                    <div className="w-full flex justify-between">
-                        <div className="w-80.5 flex-none">
+                    <div className="w-full flex justify-between gap-3">
+                        <div className="">
                             <InputText
                                 type="text"
                                 placeholder="First name"
@@ -357,7 +357,7 @@ export default function BillingAddressCheckout ({
                                 error={errors.billingFirstName && errors.billingFirstName.message as string}
                             />
                         </div> 
-                        <div className="w-80.5 flex-none">
+                        <div className="">
                             <InputText
                                 type="text"
                                 placeholder="Last name"
@@ -390,8 +390,8 @@ export default function BillingAddressCheckout ({
                 <div className="w-full mt-4">
                     <label className="text-ly-16 block mb-1 font-semibold">Country and State/Province  *</label>
                     <div className="w-full">
-                        <div className="w-full flex justify-between">
-                            <div className="w-80.5 flex-none">
+                        <div className="w-full flex justify-between gap-3">
+                            <div className="">
                                 <Select placeholder="Country/Region"
                                     {...register("billingCountry", {
                                         required: !billingSameAsShipping ? "Country/Region field is required" : false,
@@ -410,7 +410,7 @@ export default function BillingAddressCheckout ({
                                     error={errors.billingCountry && errors.billingCountry.message as string}
                                 /> 
                             </div>
-                            <div className="w-80.5 flex-none relative">
+                            <div className="relative">
                                 {statesLoading && <LoadingSpinner className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />}
                                 {statesOptions.length > 0 ?
                                 (
@@ -436,8 +436,8 @@ export default function BillingAddressCheckout ({
                             </div>
                             
                         </div>
-                        <div className="w-full flex justify-between mt-4">
-                            <div className="w-80.5 flex-none">
+                        <div className="w-full flex justify-between mt-4 gap-3">
+                            <div className="">
                                 <InputText
                                     type="text"
                                     placeholder="Zip/Postal Code"
@@ -451,7 +451,7 @@ export default function BillingAddressCheckout ({
                                     error={errors.billingPostcode&& errors.billingPostcode.message as string}
                                 />
                             </div>
-                            <div className="w-80.5 flex-none">
+                            <div className="">
                                 <InputText
                                     type="text"
                                     placeholder="City"

src/app/(checkout)/checkout/_components/CheckoutAddress/CheckoutAssress.tsx

@@ -3,7 +3,7 @@
 import {type Ref, useState, useEffect, useCallback, useImperativeHandle, useMemo } from "react";
 import clsx from "clsx";
 import { useRouter } from 'next/navigation';
-import { useForm, FormProvider } from "react-hook-form";
+import { useForm, FormProvider, useWatch } from "react-hook-form";
 import { useCustomToast } from "@/utils/hooks/useToast";
 import {useCheckoutAddress, addressIsSame} from "@/utils/hooks/useCheckoutAddress"
 import {useLoginModal} from "@/providers/LoginModalProvider";
@@ -421,7 +421,10 @@ export function CheckoutAddress({
         
     };
 
-    const isBillSameAsShip = addressForm.watch("billingSameAsShipping");
+    const isBillSameAsShip = useWatch({
+        control: addressForm.control,
+        name: "billingSameAsShipping",
+    });
     const showSaveBtn = () => {
         let res = false;
         if(

src/app/(checkout)/checkout/_components/CheckoutAddress/ShippingAddressCheckout.tsx

@@ -260,8 +260,8 @@ export default function ShippingAddressCheckout({
                 <label className="text-ly-16 block mb-1 font-semibold">
                     Name *
                 </label>
-                <div className="w-full flex justify-between">
-                    <div className="w-80.5 flex-none">
+                <div className="w-full flex justify-between gap-3">
+                    <div className="">
                         <InputText
                             type="text"
                             placeholder="First name"
@@ -275,7 +275,7 @@ export default function ShippingAddressCheckout({
                             error={errors.shippingFirstName && errors.shippingFirstName.message as string}
                         />
                     </div> 
-                    <div className="w-80.5 flex-none">
+                    <div className="">
                         <InputText
                             type="text"
                             placeholder="Last name"
@@ -336,8 +336,8 @@ export default function ShippingAddressCheckout({
             <div className="w-full mt-4">
                 <label className="text-ly-16 block mb-1 font-semibold">Country and State/Province  *</label>
                 <div className="w-full">
-                    <div className="w-full flex justify-between">
-                        <div className="w-80.5 flex-none">
+                    <div className="w-full flex justify-between gap-3">
+                        <div className="">
                             <Select placeholder="Country/Region"
                                 {...register("shippingCountry", {
                                     required: "Country/Region field is required",
@@ -357,7 +357,7 @@ export default function ShippingAddressCheckout({
                                 error={errors.shippingCountry && errors.shippingCountry.message as string}
                             /> 
                         </div>
-                        <div className="w-80.5 flex-none relative">
+                        <div className=" relative">
                             {statesLoading && <LoadingSpinner className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />}
                             {statesOptions.length > 0 ?
                             (
@@ -383,8 +383,8 @@ export default function ShippingAddressCheckout({
                         </div>
                         
                     </div>
-                    <div className="w-full flex justify-between mt-4">
-                        <div className="w-80.5 flex-none">
+                    <div className="w-full flex justify-between mt-4 gap-3">
+                        <div className="">
                             <InputText
                                 type="text"
                                 placeholder="Zip/Postal Code"
@@ -398,7 +398,7 @@ export default function ShippingAddressCheckout({
                                 error={errors.shippingPostcode&& errors.shippingPostcode.message as string}
                             />
                         </div>
-                        <div className="w-80.5 flex-none">
+                        <div className="">
                             <InputText
                                 type="text"
                                 placeholder="City"

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

@@ -323,8 +323,8 @@ export default function CheckoutWrapper({
             console.log('checkoutWrapper unmout==========================');
         }
     },[]);
-    return (<div className="w-full flex max-w-300 mx-auto items-start mt-6 mb-30">
-        <section className="flex-initial w-164 mr-16">
+    return (<div className="w-full flex justify-between max-w-312 mx-auto items-start mt-6 mb-30 px-6">
+        <section className="flex-initial w-164">
             <div className="pb-6 border-b-1">
                 <CheckoutAddress 
                     ref={checkoutAddressRef}
@@ -415,7 +415,7 @@ export default function CheckoutWrapper({
             </div>
 
         </section>
-        <section className="flex-none box-border w-120 border-1 p-4">
+        <section className="flex-initial box-border w-120 border-1 p-4 ml-4">
             <div className="box-border">
                 <CheckoutProducts 
                     cartData={cartData}

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

@@ -1,7 +1,6 @@
 "use client";
 
 import clsx from "clsx";
-import Image from "next/image";
 import { use,useState,useCallback } from "react";
 import { useForm, get, useWatch } from "react-hook-form";
 import { useRouter } from 'next/navigation'
@@ -436,24 +435,22 @@ export function PaymentMethodContinueTpPay({
 
     return (
         <>
-            <form name="shipping method" className="w-full box-border px-4 mt-4">
-                <div className="mt-3 w-full">
+            <form name="shipping method" className="w-full box-border">
+                <div className="mt-4 w-full">
                     {paymentMethodsData.error && <p className="text-red-500 text-ly-12">{paymentMethodsData.error.message}</p>}
                     <ul className="w-full">
                     {
                         paymentMethods.map((item) => {
-                            return (<li className="w-full mt-3" key={item.method}>
+                            return (<li className="w-full mt-4" key={item.method}>
                                 <label htmlFor={"paymentmethod-" + item.method} 
                                     className="group box-border flex items-center relative bg-ly-lightgray  p-3 rounded-sm has-checked:bg-white has-checked:border-1 has-checked:border-ly-green"
                                 >
                                     <p className="pr-2 flex-none relative">
-                                        <Image className="block h-8 w-auto"
+                                        <img className="block h-8 w-auto"
                                             src={getPaymentMethodLogo(item.method)} alt={"Payment Method " + item.title}
-                                            width={32}
-                                            height={32}
                                         />
                                     </p>
-                                    <p className="text-ly-12 text-[#666666] ml-1">{genetePaymentTips(item.method)}</p>
+                                    <p className="text-ly-14 text-[#666666] ml-1">{genetePaymentTips(item.method)}</p>
 
                                     <div className="absolute top-1/2 -translate-y-1/2 right-3 flex items-center">
                                         <svg className="check w-4 h-4 hidden group-has-[:checked]:block" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><rect  x="1" y="1" width="14" height="14" rx="1"    fill="#000000" ></rect><path    stroke="rgba(255, 255, 255, 1)" strokeWidth="1.5"  strokeLinecap="square"  d="M5.3335 8L7.3335 10L11.3335 6"></path></svg>
@@ -487,9 +484,9 @@ export function PaymentMethodContinueTpPay({
                 </div> 
             </form>
             
-            <div className="w-full box-border px-4 mt-3">
+            <div className="w-full box-border mt-4">
                 <p className="text-ly-12 text-[#666666] leading-4.75">
-                    By providing your information, you agree to Wiggins'sPrivacy Policyand Terms of Use.
+                    By providing your information, you agree to Asteria's Privacy Policyand Terms of Use.
                 </p>
 
                 <div className="mt-6 w-full">

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

@@ -0,0 +1,52 @@
+"use client";
+
+import Image from "next/image";
+import type {ProductsInOrderDetails} from "@/types/customer/type";
+import {getProductAdditionalInfo} from "@/utils/orderDetailTools";
+
+
+export default function ProductsInPendingOrder({
+    products,
+    currencySymbol,
+}: {
+    products: ProductsInOrderDetails[],
+    currencySymbol: string;
+}) {
+
+    return (
+        <div className="w-full">
+            {products.map((product) => {
+                const baseImage = JSON.parse(product.baseImage);
+                return (
+                    <div key={product.id} 
+                        className="flex justify-between w-full box-border pb-4 border-b-1 border-[#f0f0f0] mt-4 last:border-0 last:pb-0 last:mt-0"
+                    >
+                        <div className="relative flex-initial w-22 h-30 mr-2">
+                            <Image className="object-cover" fill
+                                src={baseImage.medium_image_url}
+                                alt={product.name} 
+                            />
+                        </div>
+                        <div className="flex-1 flex flex-col justify-between ">
+                            <div>
+                                <p className="text-ly-14 leading-ly-20 line-clamp-2 text-ly-placeholder">
+                                    {product.name}
+                                </p>
+                                <p className="text-ly-14 leading-ly-20 mt-3">
+                                    {getProductAdditionalInfo(JSON.parse(product.additional))}
+                                </p>
+                            </div>
+                            <div className="flex justify-between items-center">
+                                <span className="text-ly-14 font-bold">
+                                    {currencySymbol + product.price}
+                                </span>
+                                <span className="text-ly-14">X {product.qtyOrdered}</span>
+                            </div>
+                        </div>
+                    </div>
+                )
+            })}
+            
+        </div>
+    );
+}

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

@@ -1,124 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import CommonModal from "@/components/theme/ui/CommonModal";
-import type {ProductsInOrderDetails, ProductItemAdditional} from "@/types/customer/type";
-
-
-// 根据products 计算总价和总个数
-function caclculateTotal(products: ProductsInOrderDetails[]) {
-    let total = 0;
-    let totalItems = 0;
-
-    products.forEach((product) => {
-        total += product.total * 100;
-        totalItems += product.qtyOrdered;
-    });
-    let ss = String(total);
-    if(ss.length >= 3) {
-        ss = ss.slice(0, ss.length - 2) + "." + ss.slice(ss.length - 2);
-    } else if(ss.length === 2) {
-        ss = "0." + ss;
-    } else {
-        ss = "0.0" + ss;
-    }
-
-    return { 
-        subTotal: ss, 
-        totalItems: totalItems > 1 ? String(totalItems) + " Items" : String(totalItems) + " Item"
-    };
-}
-
-function getProductAdditionalInfo(productItem: ProductItemAdditional) { 
-    const attributeKeys = Object.keys(productItem.attributes);
-    let res = '';
-    attributeKeys.forEach(key => {
-      const attribute = productItem.attributes[key];
-      if (attribute) {
-        // option_label value_label
-
-        if(res) {
-            res = res + ', ' + attribute.option_label + ': ' + attribute.value_label;
-        } else {
-            res = attribute.option_label + ': ' + attribute.value_label;
-        }
-      }
-    });
-    return res;
-}
-
-export default function ProductsModalPendingOrder({
-    isOpen,
-    products,
-    currencySymbol,
-    onClose,
-}: {
-    isOpen: boolean;
-    products: ProductsInOrderDetails[],
-    currencySymbol: string;
-    onClose: () => void;
-}) {
-
-    const { subTotal, totalItems } = caclculateTotal(products);
-    
-
-    const closeModal = () => {
-        onClose();
-    };
-  return (
-    <CommonModal
-      isOpen={isOpen}
-      onClose={() => closeModal()}
-      header={
-        <div className="relative w-full box-border p-4">
-            <div className="flex justify-between items-center">
-                <span className="text-ly-16 flex-none">Order Summary</span>
-                <button className="flex-none w-6 h-6" onClick={() => closeModal()}>
-                    <svg className="block w-full h-full" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg>
-                </button>
-            </div>
-            
-            <div className="mt-6 flex justify-between items-center">
-                <span className="text-ly-12">{totalItems}</span>
-                <span className="text-ly-14 font-bold">{currencySymbol + subTotal}</span>
-            </div>
-        </div>
-      }
-      body={
-        <div className="w-full px-4 pb-6">
-            {products.map((product) => {
-                const baseImage = JSON.parse(product.baseImage);
-                return (
-                    <div key={product.id} className="flex justify-between w-full box-border pb-4 border-b-1 border-[#f0f0f0] mt-4 last:border-0 last:pb-0 last:mt-0">
-                        <div className="relative flex-none w-33 h-44 mr-2">
-                            <Image className="object-cover" fill
-                                src={baseImage.medium_image_url}
-                                alt={product.name} 
-                            />
-                        </div>
-                        <div className="flex-auto flex flex-col justify-between ">
-                            <div>
-                                <p className="text-ly-12 leading-ly-20 line-clamp-2 text-ly-placeholder">
-                                    {product.name}
-                                </p>
-                                <p className="text-ly-12 leading-ly-20 mt-3">
-                                    {getProductAdditionalInfo(JSON.parse(product.additional))}
-                                </p>
-                            </div>
-                            <div className="flex justify-between items-center">
-                                <span className="text-ly-14 font-bold">
-                                    {currencySymbol + product.price}
-                                </span>
-                                <span className="text-ly-12">X {product.qtyOrdered}</span>
-                            </div>
-                        </div>
-                    </div>
-                )
-            })}
-            
-        </div>
-      }
-      
-    />
-  )
-}

src/app/(checkout)/checkout/_components/GiftCard/CheckoutGiftCardGate.tsx

@@ -54,6 +54,7 @@ export default function CheckoutGiftCardGate({
             currentPageRef.current = res.pagination.current_page;
         } else {
             showToast(res.message,"danger");
+            setHasMore(false);
         }
     },[showToast]);
 

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

@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 import { type Ref, useEffect, useImperativeHandle } from "react";
 import { useForm, get } from "react-hook-form";
 import {useConfig} from "@/utils/hooks/useConfig";

src/app/(checkout)/checkout/continuetopay/page.tsx

@@ -10,7 +10,7 @@ import type { OrderDetailsData } from "@/types/customer/type";
 import type { RepayOrderPaymentMethodsData } from "@/types/checkout/type";
 import {PaymentMethodContinueTpPay} from "../_components/ContinueToPay/PaymentMethodContinueTpPay";
 import LoadingPaymentMethod from "../_components/LoadingPaymentMethod";
-import TitleHeader from "@components/layout/navbar/TitleHeader";
+
 
 // 只能存在一个待支付订单
 export const dynamic = "force-dynamic";
@@ -64,9 +64,8 @@ export default async function ContinueToPay({searchParams}: {
     });
       
     return (<>
-        <TitleHeader title="Continue To Pay" />
         {orderDetailError ?
-            <div className="box-border px-4 w-full">
+            <div className="box-border max-w-312 mx-auto mb-30 mt-6 px-6">
             
                 
                 <div className="w-12 h-12 mx-auto mt-9">
@@ -77,27 +76,31 @@ export default async function ContinueToPay({searchParams}: {
                     <span className="text-ly-16">{orderDetailError.message}</span>
                 </p>
 
-                <Link href="/" className="mt-6 flex justify-center items-center h-12 border-1 rounded-3xl text-ly-14">
+                <Link href="/" className="mt-6 mx-auto flex justify-center items-center w-30 h-12 border-1 rounded-3xl text-ly-16">
                     Continue Shopping
                 </Link>
             </div>
         :
-            <div className="w-full pb-8">
+            <div className="flex justify-between items-start box-border max-w-312 mx-auto mb-30 mt-6 px-6">
+                <div className="flex-initial w-164 mr-4">
+                    <ContinueToPayOrderInfo orderDetail={orderDetailData} />
+                </div>
             
-                <ContinueToPayOrderInfo orderDetail={orderDetailData} />
+                
             
-                <div className="mt-6 box-border px-4">
-                    <h3 className="text-ly-24 font-medium">Payment Method</h3>
+                <div className="flex-initial w-120 box-border">
+                    <h3 className="text-ly-20 font-medium">Payment Method</h3>
+                    <Suspense fallback={<LoadingPaymentMethod/>}> 
+                        <PaymentMethodContinueTpPay 
+                            orderId={orderDetailData._id}
+                            orderDetail={orderDetailData}
+                            paymentMethodsDataPromise={paymentMethodsResponse}
+                            defaultPaymentMethod={orderDetailData.payment}
+                        />
+                    </Suspense>
 
                 </div>
-                <Suspense fallback={<LoadingPaymentMethod/>}> 
-                    <PaymentMethodContinueTpPay 
-                        orderId={orderDetailData._id}
-                        orderDetail={orderDetailData}
-                        paymentMethodsDataPromise={paymentMethodsResponse}
-                        defaultPaymentMethod={orderDetailData.payment}
-                    />
-                </Suspense>
+                
                 
             </div>
         }

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

@@ -64,8 +64,8 @@ export default function CancelOrFailure({
 
 
 
-    return (<div className="flex max-w-300 mx-auto items-start">
-        <div className="flex-initial w-164 mr-16">
+    return (<div className="flex items-start justify-between max-w-312 mx-auto px-6">
+        <div className="flex-initial w-164 mr-4">
             <div className="box-border w-full">
                 {paymentStatus === 'failure' &&
                     <>
@@ -115,9 +115,9 @@ export default function CancelOrFailure({
             </div>
             <div className="box-border w-full mt-6">
                 <h4 className="text-ly-20 font-medium">Order Information</h4>
-                <div className="mt-6 flex justify-between">
-                    <div className="text-ly-14 flex-none">Ship to:</div>
-                    <div className="w-117.5 text-ly-14 leading-ly-20 text-[#666666] flex-none">
+                <div className="mt-6 flex justify-between gap-6">
+                    <div className="text-ly-14 flex-none w-35.5">Ship to:</div>
+                    <div className="text-ly-14 leading-ly-20 text-[#666666] flex-1">
                         {
                             shippingAddress.firstName 
                             + ' ' + shippingAddress.lastName 
@@ -130,33 +130,33 @@ export default function CancelOrFailure({
                         }
                     </div>
                 </div>
-                <div className="mt-4 flex justify-between">
-                    <div className="text-ly-14 flex-none">Order number:</div>
-                    <div className="w-117.5 text-ly-14 leading-ly-20 text-[#666666] flex-none">
+                <div className="mt-4 flex justify-between gap-6">
+                    <div className="text-ly-14 flex-none w-35.5">Order number:</div>
+                    <div className="text-ly-14 leading-ly-20 text-[#666666] flex-1">
                         {orderDetailRes?._id}
                     </div>
                 </div>
-                <div className="mt-4 flex justify-between">
-                    <div className="text-ly-14 flex-none">Status:</div>
-                    <div className="w-117.5 text-ly-14 leading-ly-20 text-[#666666] flex-none capitalize">
+                <div className="mt-4 flex justify-between gap-6">
+                    <div className="text-ly-14 flex-none w-35.5">Status:</div>
+                    <div className="text-ly-14 leading-ly-20 text-[#666666] flex-1 capitalize">
                         {orderDetailRes?.status}
                     </div>
                 </div>
-                <div className="mt-4 flex justify-between">
-                    <div className="text-ly-14 flex-none">Order date:</div>
-                    <div className="w-117.5 text-ly-14 leading-ly-20 text-[#666666] flex-none">
+                <div className="mt-4 flex justify-between gap-6">
+                    <div className="text-ly-14 flex-none w-35.5">Order date:</div>
+                    <div className="text-ly-14 leading-ly-20 text-[#666666] flex-1">
                         {orderCreatedAt}
                     </div>
                 </div>
-                <div className="mt-4 flex justify-between">
-                    <div className="text-ly-14 flex-none">Shipping method:</div>
-                    <div className="w-117.5 text-ly-14 leading-ly-20 text-[#666666] flex-none">
+                <div className="mt-4 flex justify-between gap-6">
+                    <div className="text-ly-14 flex-none w-35.5">Shipping method:</div>
+                    <div className="text-ly-14 leading-ly-20 text-[#666666] flex-1">
                         {orderDetailRes?.shippingTitle}
                     </div>
                 </div>
-                <div className="mt-4 flex justify-between">
-                    <div className="text-ly-14 flex-none">Payment method:</div>
-                    <div className="w-117.5 text-ly-14 leading-ly-20 text-[#666666] flex-none">
+                <div className="mt-4 flex justify-between gap-6">
+                    <div className="text-ly-14 flex-none w-35.5">Payment method:</div>
+                    <div className="text-ly-14 leading-ly-20 text-[#666666] flex-1">
                         {orderDetailRes?.payment?.methodTitle}
                     </div>
                 </div>
@@ -164,20 +164,20 @@ export default function CancelOrFailure({
             </div>
         </div>
 
-        <div className="flex-none box-border w-120 border-1 p-4">
+        <div className="flex-initial box-border w-120 border-1 p-4">
             <h3 className="text-ly-20">My Bag({orderDetailRes.totalQtyOrdered})</h3>
             <div className="box-border w-full max-h-130 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200">
                 {productItems.map((product) => {
                     const baseImage = JSON.parse(product.baseImage);
                     return (
                         <div key={product.id} className="w-full flex gap-2 mt-4 pt-4 border-t-1 border-[#f0f0f0]">
-                            <div className="relative w-33 h-44 flex-none">
+                            <div className="relative w-33 h-44 flex-initial">
                                 <Image className="object-cover" fill
                                     src={baseImage.medium_image_url}
                                     alt={product.name} 
                                 />
                             </div>
-                            <div className="flex-initial w-77 flex flex-col justify-between">
+                            <div className="flex-1 flex flex-col justify-between">
                                 <div>
                                     <p className="text-ly-14 leading-ly-20 line-clamp-2">
                                         {product.name}

src/app/globals.css

@@ -116,6 +116,7 @@ html {
 body {
   background: var(--background);
   color: var(--foreground);
+  min-width: 768px;
 }
 
 @layer components {

src/components/theme/ui/kernel/confirm/host.tsx

@@ -33,7 +33,7 @@ export function ConfirmHost() {
                 <div className="w-80 p-3 bg-white rounded-xl">
                     <h3 className="text-center text-ly-18 font-bold mb-6">{current.title}</h3>
                     <p className="text-ly-16 leading-5 text-center">{current.content}</p>
-                    <div className="w-full flex justify-between gap-3 mt-6">
+                    <div className="w-full flex justify-center gap-3 mt-6">
                         {!current.noOk && <button className="w-35.5 h-12 flex justify-center items-center rounded-3xl border-1 text-ly-16 font-medium" onClick={() => close(true)}>Yes</button>}
                         {!current.noCancel && <button className="w-35.5 h-12 flex justify-center items-center rounded-3xl bg-ly-green text-white text-ly-16 font-medium" onClick={() => close(false)}>Cancel</button>}
                     </div>

src/providers/SocialShareProvider.tsx

@@ -1,5 +1,5 @@
 "use client";
-
+/*
 import Script from "next/script";
 import {
   createContext,
@@ -121,4 +121,5 @@ export const useSocialShareContext = () => {
     }
 
     return context;
-};
+};
+*/