|
|
@@ -2,296 +2,419 @@
|
|
|
|
|
|
import { useState, useMemo } from "react";
|
|
|
import clsx from "clsx";
|
|
|
-import {
|
|
|
- ProductOption,
|
|
|
- ResolvedVariant
|
|
|
-} from "@/components/catalog/type";
|
|
|
+import { ProductOption, ResolvedVariant } from "@/components/catalog/type";
|
|
|
import { ProductAddToCart } from "@/app/(public)/product/_components/ProductAddToCart";
|
|
|
import { useCustomToast } from "@utils/hooks/useToast";
|
|
|
import { useAddProduct } from "@utils/hooks/useAddToCart";
|
|
|
-import { redirect, RedirectType } from 'next/navigation'
|
|
|
+import { redirect, RedirectType } from "next/navigation";
|
|
|
+import InstallmentPopup from "./popup/InstallmentPopup";
|
|
|
+import ProductText from "./ProductText";
|
|
|
+import NewUserBanner from "./NewUserBanner";
|
|
|
+import PromotionDiscountCardProps from "./PromotionDiscountCardProps ";
|
|
|
+import Image from "next/image";
|
|
|
import {
|
|
|
- isValueAvailable,
|
|
|
- isOptionValueAvailable,
|
|
|
- getFirstAvailable,
|
|
|
- getAvailableVariants,
|
|
|
- isCombinationAvailable,
|
|
|
- findNearestAvailableVariant
|
|
|
+ isValueAvailable,
|
|
|
+ isOptionValueAvailable,
|
|
|
+ getFirstAvailable,
|
|
|
+ getAvailableVariants,
|
|
|
+ isCombinationAvailable,
|
|
|
+ findNearestAvailableVariant,
|
|
|
} from "@/utils/variantTools";
|
|
|
import { Price } from "@components/theme/ui/Price";
|
|
|
|
|
|
-
|
|
|
export function ProductInformation({
|
|
|
- name,
|
|
|
- productId,
|
|
|
- productOptions,
|
|
|
- flexibleVariants,
|
|
|
- isSaleable
|
|
|
+ name,
|
|
|
+ productId,
|
|
|
+ productOptions,
|
|
|
+ flexibleVariants,
|
|
|
+ isSaleable,
|
|
|
}: {
|
|
|
- name: string;
|
|
|
- productId: number;
|
|
|
- productOptions: ProductOption[];
|
|
|
- flexibleVariants: ResolvedVariant[];
|
|
|
- isSaleable: string | undefined;
|
|
|
+ name: string;
|
|
|
+ productId: number;
|
|
|
+ productOptions: ProductOption[];
|
|
|
+ flexibleVariants: ResolvedVariant[];
|
|
|
+ isSaleable: string | undefined;
|
|
|
}) {
|
|
|
- const { isCartLoading, onAddToCart } = useAddProduct();
|
|
|
- const { showToast } = useCustomToast();
|
|
|
-
|
|
|
- // 记录当前哪个选项组刚刚被点击（用于实现“点击组内全部可点”）
|
|
|
- const [lastClickedOptionId, setLastClickedOptionId] = useState<number>(productOptions[0]?.id );
|
|
|
+ const { isCartLoading, onAddToCart } = useAddProduct();
|
|
|
+ const { showToast } = useCustomToast();
|
|
|
+
|
|
|
+ // 记录当前哪个选项组刚刚被点击（用于实现“点击组内全部可点”）
|
|
|
+ const [lastClickedOptionId, setLastClickedOptionId] = useState<number>(
|
|
|
+ productOptions[0]?.id,
|
|
|
+ );
|
|
|
|
|
|
- const [productQty, setProductQty] = useState(1);
|
|
|
+ const [productQty, setProductQty] = useState(1);
|
|
|
+ const [modalOpen, setModalOpen] = useState(false);
|
|
|
+ // 获取所有可用变体（quantity > 0）
|
|
|
+ const availableVariants = useMemo(() => {
|
|
|
+ return getAvailableVariants(flexibleVariants);
|
|
|
+ }, [flexibleVariants]);
|
|
|
|
|
|
- // 获取所有可用变体（quantity > 0）
|
|
|
- const availableVariants = useMemo(() => {
|
|
|
- return getAvailableVariants(flexibleVariants);
|
|
|
- }, [flexibleVariants]);
|
|
|
+ // 当前选中的选项值映射：option_id -> value_id
|
|
|
+ const [selected, setSelected] = useState<Record<number, number>>(() => {
|
|
|
+ let res: Record<number, number> = {};
|
|
|
|
|
|
- // 当前选中的选项值映射：option_id -> value_id
|
|
|
- const [selected, setSelected] = useState<Record<number, number>>(() => {
|
|
|
- let res: Record<number, number> = {};
|
|
|
+ const defaultSelected = getFirstAvailable(productOptions, flexibleVariants);
|
|
|
+ if (defaultSelected) {
|
|
|
+ res = defaultSelected;
|
|
|
+ } else {
|
|
|
+ // 极端情况：没有任何可用组合，默认全选每组第一个（但仍需标记为不可用，由禁用逻辑处理）
|
|
|
+ productOptions.forEach((opt) => {
|
|
|
+ res[opt.id] = opt.values[0]?.id;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ console.log("set default selected");
|
|
|
+ return res;
|
|
|
+ });
|
|
|
|
|
|
- const defaultSelected = getFirstAvailable(productOptions, flexibleVariants);;
|
|
|
- if (defaultSelected) {
|
|
|
- res = defaultSelected;
|
|
|
+ // 计算每个选项值的禁用状态
|
|
|
+ const disabledMap = useMemo(() => {
|
|
|
+ const map: Record<number, boolean> = {};
|
|
|
+ if (Object.keys(selected).length === 0) return map; // 没有选中的项
|
|
|
+
|
|
|
+ productOptions.forEach((option) => {
|
|
|
+ option.values.forEach((value) => {
|
|
|
+ // 规则：如果该选项组是最近点击的组，校验组中的值是否存在可用变体
|
|
|
+ if (option.id === lastClickedOptionId) {
|
|
|
+ // map[value.id] = false;
|
|
|
+ map[value.id] = !isValueAvailable(value.id, availableVariants);
|
|
|
} else {
|
|
|
- // 极端情况：没有任何可用组合，默认全选每组第一个（但仍需标记为不可用，由禁用逻辑处理）
|
|
|
- productOptions.forEach((opt) => {
|
|
|
- res[opt.id] = opt.values[0]?.id;
|
|
|
- });
|
|
|
+ // 校验其他组的选项值是否可用
|
|
|
+ map[value.id] = !isOptionValueAvailable(
|
|
|
+ option.id,
|
|
|
+ value.id,
|
|
|
+ selected,
|
|
|
+ productOptions,
|
|
|
+ availableVariants,
|
|
|
+ );
|
|
|
}
|
|
|
- console.log('set default selected');
|
|
|
- return res;
|
|
|
+ });
|
|
|
});
|
|
|
+ return map;
|
|
|
+ }, [selected, lastClickedOptionId, productOptions, availableVariants]);
|
|
|
|
|
|
- // 计算每个选项值的禁用状态
|
|
|
- const disabledMap = useMemo(() => {
|
|
|
- const map: Record<number, boolean> = {};
|
|
|
- if (Object.keys(selected).length === 0) return map; // 没有选中的项
|
|
|
-
|
|
|
- productOptions.forEach((option) => {
|
|
|
- option.values.forEach((value) => {
|
|
|
- // 规则：如果该选项组是最近点击的组，校验组中的值是否存在可用变体
|
|
|
- if (option.id === lastClickedOptionId) {
|
|
|
- // map[value.id] = false;
|
|
|
- map[value.id] = !isValueAvailable(value.id,availableVariants);
|
|
|
- } else {
|
|
|
- // 校验其他组的选项值是否可用
|
|
|
- map[value.id] = !isOptionValueAvailable(
|
|
|
- option.id,
|
|
|
- value.id,
|
|
|
- selected,
|
|
|
- productOptions,
|
|
|
- availableVariants
|
|
|
- );
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- return map;
|
|
|
- }, [selected, lastClickedOptionId, productOptions, availableVariants]);
|
|
|
-
|
|
|
- // 处理选项点击
|
|
|
- const handleOptionClick = (optionId: number, valueId: number) => {
|
|
|
- // 更新前需要判断当前选中的组合是否可以购买，如果可以购买正常更新；如果不能购买查找可以购买的组合然后更新
|
|
|
- let newSelected: Record<number, number> = {...selected,[optionId]: valueId};
|
|
|
- const selectedValueIds = Object.values(newSelected);
|
|
|
- if(!isCombinationAvailable(selectedValueIds, availableVariants)) {
|
|
|
- newSelected = findNearestAvailableVariant(optionId,valueId,{...newSelected},productOptions,availableVariants);
|
|
|
- }
|
|
|
- setSelected({ ...newSelected });
|
|
|
- // 记录当前点击的选项组
|
|
|
- setLastClickedOptionId(optionId);
|
|
|
+ // 处理选项点击
|
|
|
+ const handleOptionClick = (optionId: number, valueId: number) => {
|
|
|
+ // 更新前需要判断当前选中的组合是否可以购买，如果可以购买正常更新；如果不能购买查找可以购买的组合然后更新
|
|
|
+ let newSelected: Record<number, number> = {
|
|
|
+ ...selected,
|
|
|
+ [optionId]: valueId,
|
|
|
};
|
|
|
+ const selectedValueIds = Object.values(newSelected);
|
|
|
+ if (!isCombinationAvailable(selectedValueIds, availableVariants)) {
|
|
|
+ newSelected = findNearestAvailableVariant(
|
|
|
+ optionId,
|
|
|
+ valueId,
|
|
|
+ { ...newSelected },
|
|
|
+ productOptions,
|
|
|
+ availableVariants,
|
|
|
+ );
|
|
|
+ }
|
|
|
+ setSelected({ ...newSelected });
|
|
|
+ // 记录当前点击的选项组
|
|
|
+ setLastClickedOptionId(optionId);
|
|
|
+ };
|
|
|
|
|
|
- // 判断当前选中的组合是否可购买（用于控制购买按钮等）
|
|
|
- const isCurrentSelectionAvailable = useMemo(() => {
|
|
|
- let res = true;
|
|
|
- if(isSaleable !== '1') {
|
|
|
- res = false;
|
|
|
- } else {
|
|
|
- const selectedIds = Object.values(selected);
|
|
|
- if (selectedIds.length !== productOptions.length) {
|
|
|
- res = false
|
|
|
- } else {
|
|
|
- res = isCombinationAvailable(selectedIds, availableVariants);
|
|
|
- }
|
|
|
- }
|
|
|
- return res;
|
|
|
- }, [selected, productOptions, flexibleVariants, isSaleable]);
|
|
|
-
|
|
|
- // 获取当前选中变体和价格等信息
|
|
|
- // useEffect和useMemo的执行时机不同，useMemo早于useEffect执行，如果使用useEffect初始化selected，则需要对selected做判断，当为空对象时返回占位对象
|
|
|
- const currentVariantInfo: {variant:ResolvedVariant | null; totalLinePrice: number; totalNowPrice: number; save: number;} = useMemo(() => {
|
|
|
- const selectedIds = Object.values(selected);
|
|
|
- let totalLinePrice = 0;
|
|
|
- let totalNowPrice = 0;
|
|
|
- let save = 0;
|
|
|
- const variant = flexibleVariants.find((v) => {
|
|
|
- const vIds = v.optionValues.map((ov) => ov.id);
|
|
|
- return selectedIds.length === vIds.length && selectedIds.every((id) => vIds.includes(id));
|
|
|
- });
|
|
|
- if (selectedIds.length === 0 || variant === undefined) {
|
|
|
- // 尚未初始化，返回一个安全占位对象
|
|
|
- return { variant: null, totalLinePrice: 0, totalNowPrice: 0, save: 0 };
|
|
|
- }
|
|
|
-
|
|
|
- if(variant.priceIndices && variant.priceIndices.length > 0) {
|
|
|
- totalLinePrice = Number(variant.priceIndices[0].regular_min_price) * productQty;
|
|
|
- totalNowPrice = Number(variant.priceIndices[0].min_price) * productQty;
|
|
|
- }
|
|
|
- if(totalLinePrice !== totalNowPrice) {
|
|
|
- save = -(totalLinePrice - totalNowPrice);
|
|
|
- }
|
|
|
+ // 判断当前选中的组合是否可购买（用于控制购买按钮等）
|
|
|
+ const isCurrentSelectionAvailable = useMemo(() => {
|
|
|
+ let res = true;
|
|
|
+ if (isSaleable !== "1") {
|
|
|
+ res = false;
|
|
|
+ } else {
|
|
|
+ const selectedIds = Object.values(selected);
|
|
|
+ if (selectedIds.length !== productOptions.length) {
|
|
|
+ res = false;
|
|
|
+ } else {
|
|
|
+ res = isCombinationAvailable(selectedIds, availableVariants);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+ }, [selected, productOptions, flexibleVariants, isSaleable]);
|
|
|
|
|
|
- return {
|
|
|
- variant,
|
|
|
- totalLinePrice: totalLinePrice,
|
|
|
- totalNowPrice: totalNowPrice,
|
|
|
- save: save
|
|
|
- };
|
|
|
- }, [selected, flexibleVariants, productQty]);
|
|
|
+ // 获取当前选中变体和价格等信息
|
|
|
+ // useEffect和useMemo的执行时机不同，useMemo早于useEffect执行，如果使用useEffect初始化selected，则需要对selected做判断，当为空对象时返回占位对象
|
|
|
+ const currentVariantInfo: {
|
|
|
+ variant: ResolvedVariant | null;
|
|
|
+ totalLinePrice: number;
|
|
|
+ totalNowPrice: number;
|
|
|
+ save: number;
|
|
|
+ displayDayPrice: number;
|
|
|
+ } = useMemo(() => {
|
|
|
+ const selectedIds = Object.values(selected);
|
|
|
+ let totalLinePrice = 0;
|
|
|
+ let totalNowPrice = 0;
|
|
|
+ let save = 0;
|
|
|
+ let displayDayPrice = 0;
|
|
|
+ const variant = flexibleVariants.find((v) => {
|
|
|
+ const vIds = v.optionValues.map((ov) => ov.id);
|
|
|
+ return (
|
|
|
+ selectedIds.length === vIds.length &&
|
|
|
+ selectedIds.every((id) => vIds.includes(id))
|
|
|
+ );
|
|
|
+ });
|
|
|
+ if (selectedIds.length === 0 || variant === undefined) {
|
|
|
+ // 尚未初始化，返回一个安全占位对象
|
|
|
+ return {
|
|
|
+ variant: null,
|
|
|
+ totalLinePrice: 0,
|
|
|
+ totalNowPrice: 0,
|
|
|
+ save: 0,
|
|
|
+ displayDayPrice: 0,
|
|
|
+ };
|
|
|
+ }
|
|
|
|
|
|
+ if (variant.priceIndices && variant.priceIndices.length > 0) {
|
|
|
+ totalLinePrice =
|
|
|
+ Number(variant.priceIndices[0].regular_min_price) * productQty;
|
|
|
+ totalNowPrice = Number(variant.priceIndices[0].min_price) * productQty;
|
|
|
+ const dayPrice = totalNowPrice / 30; // 30天一期，日均成本
|
|
|
+ displayDayPrice = Number(dayPrice.toFixed(2));
|
|
|
+ }
|
|
|
+ if (totalLinePrice !== totalNowPrice) {
|
|
|
+ save = -(totalLinePrice - totalNowPrice);
|
|
|
+ }
|
|
|
|
|
|
- const classNameOptionValueBtn = "text-ly-14 leading-ly-24 border border-solid rounded-lg pt-1.5 pb-1.5 pl-3 pr-3 bg-white";
|
|
|
+ return {
|
|
|
+ variant,
|
|
|
+ totalLinePrice: totalLinePrice,
|
|
|
+ totalNowPrice: totalNowPrice,
|
|
|
+ save: save,
|
|
|
+ displayDayPrice: displayDayPrice,
|
|
|
+ };
|
|
|
+ }, [selected, flexibleVariants, productQty]);
|
|
|
|
|
|
+ const classNameOptionValueBtn =
|
|
|
+ "text-ly-14 leading-ly-24 border border-solid rounded-lg pt-1.5 pb-1.5 pl-3 pr-3 bg-white";
|
|
|
|
|
|
- const handlerProductQty = (action: string) => {
|
|
|
- if (action === "increase") {
|
|
|
- setProductQty(productQty + 1);
|
|
|
- } else if (action === "decrease" && productQty > 1) {
|
|
|
- setProductQty(productQty - 1);
|
|
|
- }
|
|
|
+ const handlerProductQty = (action: string) => {
|
|
|
+ if (action === "increase") {
|
|
|
+ setProductQty(productQty + 1);
|
|
|
+ } else if (action === "decrease" && productQty > 1) {
|
|
|
+ setProductQty(productQty - 1);
|
|
|
}
|
|
|
+ };
|
|
|
|
|
|
- async function addProductToCart(action:string = 'addtocart') {
|
|
|
-
|
|
|
- const params = {
|
|
|
- productId: String(productId),
|
|
|
- quantity: productQty,
|
|
|
- variantId: currentVariantInfo.variant?._id,
|
|
|
- };
|
|
|
- const res = await onAddToCart(params);
|
|
|
- console.log('onAddToCart result --- ', res);
|
|
|
- if(action === 'buynow') {
|
|
|
- if(res) {
|
|
|
- const responseData = res.data?.createAddProductInCart?.addProductInCart;
|
|
|
- if(responseData && responseData.success) {
|
|
|
- redirect('/checkout?step=address', RedirectType.push);
|
|
|
- }
|
|
|
- }
|
|
|
+ async function addProductToCart(action: string = "addtocart") {
|
|
|
+ const params = {
|
|
|
+ productId: String(productId),
|
|
|
+ quantity: productQty,
|
|
|
+ variantId: currentVariantInfo.variant?._id,
|
|
|
+ };
|
|
|
+ const res = await onAddToCart(params);
|
|
|
+ console.log("onAddToCart result --- ", res);
|
|
|
+ if (action === "buynow") {
|
|
|
+ if (res) {
|
|
|
+ const responseData = res.data?.createAddProductInCart?.addProductInCart;
|
|
|
+ if (responseData && responseData.success) {
|
|
|
+ redirect("/checkout?step=address", RedirectType.push);
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- const addToCartHandler = async () => {
|
|
|
-
|
|
|
- if(!isCurrentSelectionAvailable) {
|
|
|
- showToast("The selected options are not available!", "warning");
|
|
|
- return;
|
|
|
- }
|
|
|
+ const addToCartHandler = async () => {
|
|
|
+ if (!isCurrentSelectionAvailable) {
|
|
|
+ showToast("The selected options are not available!", "warning");
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- if(currentVariantInfo.variant && !isCartLoading) {
|
|
|
- addProductToCart();
|
|
|
- }
|
|
|
- };
|
|
|
+ if (currentVariantInfo.variant && !isCartLoading) {
|
|
|
+ addProductToCart();
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- const buyNowHandler = () => {
|
|
|
- if(!isCurrentSelectionAvailable) {
|
|
|
- showToast("The selected options are not available!", "warning");
|
|
|
- return;
|
|
|
- }
|
|
|
- if(currentVariantInfo.variant && !isCartLoading) {
|
|
|
- addProductToCart('buynow');
|
|
|
- }
|
|
|
- };
|
|
|
+ const buyNowHandler = () => {
|
|
|
+ if (!isCurrentSelectionAvailable) {
|
|
|
+ showToast("The selected options are not available!", "warning");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (currentVariantInfo.variant && !isCartLoading) {
|
|
|
+ addProductToCart("buynow");
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const currencySymbol = "$";
|
|
|
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <div className="box-border w-full pr-4 pl-4">
|
|
|
+ <h3 className="text-ly-14 text-black mt-4 leading-ly-22">
|
|
|
+ {name} {isSaleable}
|
|
|
+ </h3>
|
|
|
+ <ProductText ProductText="" />
|
|
|
+ <div className="flex items-center mt-2">
|
|
|
+ <Price
|
|
|
+ className="text-ly-16 leading-ly-24 font-bold"
|
|
|
+ amount={String(currentVariantInfo.totalNowPrice)}
|
|
|
+ currencyCode="USD"
|
|
|
+ />
|
|
|
+ {currentVariantInfo.totalLinePrice !==
|
|
|
+ currentVariantInfo.totalNowPrice && (
|
|
|
+ <>
|
|
|
+ <Price
|
|
|
+ className="text-ly-12 leading-ly-20 text-ly-gray line-through ml-1"
|
|
|
+ amount={String(currentVariantInfo.totalLinePrice)}
|
|
|
+ currencyCode="USD"
|
|
|
+ />
|
|
|
+ <Price
|
|
|
+ className="text-ly-12 leading-ly-20 text-ly-gray line-through ml-1"
|
|
|
+ amount={String(currentVariantInfo.totalLinePrice)}
|
|
|
+ currencyCode="USD"
|
|
|
+ />
|
|
|
+ <Price
|
|
|
+ className="text-ly-12 leading-ly-16 bg-ly-gold pr-1.5 pl-1.5 ml-3"
|
|
|
+ amount={String(currentVariantInfo.save)}
|
|
|
+ currencyCode="USD"
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
|
|
|
- return (<>
|
|
|
- <div className="box-border w-full pr-4 pl-4">
|
|
|
- <h3 className="text-ly-12 mt-4 leading-ly-22">{name} {isSaleable}</h3>
|
|
|
-
|
|
|
- <div className="flex items-center mt-2">
|
|
|
- <Price
|
|
|
- className="text-ly-16 leading-ly-24 font-bold"
|
|
|
- amount={String(currentVariantInfo.totalNowPrice)}
|
|
|
- currencyCode="USD"
|
|
|
- />
|
|
|
- {
|
|
|
- currentVariantInfo.totalLinePrice !== currentVariantInfo.totalNowPrice && (
|
|
|
- <>
|
|
|
- <Price
|
|
|
- className="text-ly-12 leading-ly-20 text-ly-gray line-through ml-1"
|
|
|
- amount={String(currentVariantInfo.totalLinePrice)}
|
|
|
- currencyCode="USD"
|
|
|
- /><Price
|
|
|
- className="text-ly-12 leading-ly-20 text-ly-gray line-through ml-1"
|
|
|
- amount={String(currentVariantInfo.totalLinePrice)}
|
|
|
- currencyCode="USD"
|
|
|
- />
|
|
|
- <Price
|
|
|
- className="text-ly-12 leading-ly-16 bg-ly-gold pr-1.5 pl-1.5 ml-3"
|
|
|
- amount={String(currentVariantInfo.save)}
|
|
|
- currencyCode="USD"
|
|
|
- />
|
|
|
- </>
|
|
|
- )
|
|
|
- }
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
+ <div className="w-full flex items-center gap-2 py-2">
|
|
|
+ <span className="text-black text-ly-12 leading-ly-20 font-normal ">
|
|
|
+ As Low as{" "}
|
|
|
+ <b>
|
|
|
+ {currencySymbol}
|
|
|
+ {currentVariantInfo.displayDayPrice}
|
|
|
+ </b>
|
|
|
+ /day with
|
|
|
+ </span>
|
|
|
+ <div className="">
|
|
|
+ <Image
|
|
|
+ src={"/image/products_details/klarna.png"}
|
|
|
+ width={44}
|
|
|
+ height={18}
|
|
|
+ alt="klarna"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className="">
|
|
|
+ <Image
|
|
|
+ src={"/image/products_details/afterpay.png"}
|
|
|
+ width={56}
|
|
|
+ height={18}
|
|
|
+ alt="afterpay"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className="">
|
|
|
+ <Image
|
|
|
+ src={"/image/products_details/paypal-expressm.png"}
|
|
|
+ width={56}
|
|
|
+ height={18}
|
|
|
+ alt="paypal-expressm"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <button
|
|
|
+ onClick={() => setModalOpen(true)}
|
|
|
+ className="w-4 h-4 rounded-full border border-black flex items-center justify-center text-black font-medium text-ly-12 "
|
|
|
+ >
|
|
|
+ ?
|
|
|
+ </button>
|
|
|
+ <InstallmentPopup
|
|
|
+ open={modalOpen}
|
|
|
+ onClose={() => setModalOpen(false)}
|
|
|
+ />
|
|
|
</div>
|
|
|
+ <NewUserBanner />
|
|
|
+ {/* 产品Code */}
|
|
|
+ <PromotionDiscountCardProps productId="product-1001" />
|
|
|
+ </div>
|
|
|
|
|
|
- <div className="box-border w-full pr-4 pl-4 mt-6">
|
|
|
- {productOptions.map((option) => (
|
|
|
- <div key={option.id}>
|
|
|
- <div className="text-ly-12 font-medium">{option.label}</div>
|
|
|
- <div className="flex flex-wrap gap-3 mt-3">
|
|
|
- {option.values.map((value) => {
|
|
|
- const isSelected = selected[option.id] === value.id;
|
|
|
- const isDisabled = disabledMap[value.id] || false;
|
|
|
- return (
|
|
|
- <button
|
|
|
- key={value.id}
|
|
|
- type="button"
|
|
|
- onClick={() => !isDisabled && handleOptionClick(option.id, value.id)}
|
|
|
- className={clsx(classNameOptionValueBtn, {
|
|
|
- 'border-ly-green text-ly-green': isSelected,
|
|
|
- 'border-black text-black': !isSelected,
|
|
|
- 'opacity-40 cursor-not-allowed strokeline-bg-disabled': isDisabled
|
|
|
- })}
|
|
|
-
|
|
|
- disabled={isDisabled}
|
|
|
- >
|
|
|
- {value.label}
|
|
|
- </button>
|
|
|
- );
|
|
|
- })}
|
|
|
- </div>
|
|
|
+ <div className="box-border w-full pr-4 pl-4 mt-4">
|
|
|
+ {productOptions.map((option) => (
|
|
|
+ <div key={option.id}>
|
|
|
+ <div className="text-ly-12 font-medium">{option.label}</div>
|
|
|
+ <div className="flex flex-wrap gap-3 mt-3">
|
|
|
+ {option.values.map((value) => {
|
|
|
+ const isSelected = selected[option.id] === value.id;
|
|
|
+ const isDisabled = disabledMap[value.id] || false;
|
|
|
+ return (
|
|
|
+ <button
|
|
|
+ key={value.id}
|
|
|
+ type="button"
|
|
|
+ onClick={() =>
|
|
|
+ !isDisabled && handleOptionClick(option.id, value.id)
|
|
|
+ }
|
|
|
+ className={clsx(classNameOptionValueBtn, {
|
|
|
+ "border-ly-green text-ly-green": isSelected,
|
|
|
+ "border-black text-black": !isSelected,
|
|
|
+ "opacity-40 cursor-not-allowed strokeline-bg-disabled":
|
|
|
+ isDisabled,
|
|
|
+ })}
|
|
|
+ disabled={isDisabled}
|
|
|
+ >
|
|
|
+ {value.label}
|
|
|
+ </button>
|
|
|
+ );
|
|
|
+ })}
|
|
|
</div>
|
|
|
- ))}
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
|
|
|
- <div className="text-ly-12 font-medium mt-4">Quantity*</div>
|
|
|
- <div className="w-full flex mt-3">
|
|
|
- <div className="flex border border-solid rounded-lg">
|
|
|
- <button onClick={() => handlerProductQty('decrease')} type="button" className="flex-none w-7.5 h-9 flex items-center justify-center">
|
|
|
- <svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
|
- <path stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" d="M3.33325 8L12.6666 8" />
|
|
|
- </svg>
|
|
|
- </button>
|
|
|
- <input type="text" className="w-15 h-9 leading-ly-36 text-center" value={productQty} readOnly />
|
|
|
- <button onClick={() => handlerProductQty('increase')} type="button" className="flex-none w-7.5 h-9 flex items-center justify-center">
|
|
|
- <svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
|
- <path stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" d="M8.02026 3.3335L8.00806 12.6668" />
|
|
|
- <path stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" d="M3.33325 8L12.6666 8" />
|
|
|
- </svg>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div className="w-full flex justify-between items-center mt-3">
|
|
|
+ <div className="text-ly-14 text-black font-medium ">Quantity*</div>
|
|
|
+ <div className="flex border border-solid rounded-lg">
|
|
|
+ <button
|
|
|
+ onClick={() => handlerProductQty("decrease")}
|
|
|
+ type="button"
|
|
|
+ className="flex-none w-7.5 h-11 flex items-center justify-center"
|
|
|
+ >
|
|
|
+ <svg
|
|
|
+ className="w-4 h-4"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="16"
|
|
|
+ height="16"
|
|
|
+ viewBox="0 0 16 16"
|
|
|
+ fill="none"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ stroke="rgba(0, 0, 0, 1)"
|
|
|
+ strokeWidth="1.5"
|
|
|
+ strokeLinejoin="round"
|
|
|
+ d="M3.33325 8L12.6666 8"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ className="w-15 h-11 leading-ly-36 text-center"
|
|
|
+ value={productQty}
|
|
|
+ readOnly
|
|
|
+ />
|
|
|
+ <button
|
|
|
+ onClick={() => handlerProductQty("increase")}
|
|
|
+ type="button"
|
|
|
+ className="flex-none w-7.5 h-11 flex items-center justify-center"
|
|
|
+ >
|
|
|
+ <svg
|
|
|
+ className="w-4 h-4"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="16"
|
|
|
+ height="16"
|
|
|
+ viewBox="0 0 16 16"
|
|
|
+ fill="none"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ stroke="rgba(0, 0, 0, 1)"
|
|
|
+ strokeWidth="1.5"
|
|
|
+ strokeLinejoin="round"
|
|
|
+ d="M8.02026 3.3335L8.00806 12.6668"
|
|
|
+ />
|
|
|
+ <path
|
|
|
+ stroke="rgba(0, 0, 0, 1)"
|
|
|
+ strokeWidth="1.5"
|
|
|
+ strokeLinejoin="round"
|
|
|
+ d="M3.33325 8L12.6666 8"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <ProductAddToCart
|
|
|
- isAvailable={isCurrentSelectionAvailable}
|
|
|
- isLoading={isCartLoading}
|
|
|
- onAddToCart={addToCartHandler}
|
|
|
- onBuyNow={buyNowHandler}
|
|
|
- />
|
|
|
- </>);
|
|
|
-}
|
|
|
+ </div>
|
|
|
+ <ProductAddToCart
|
|
|
+ isAvailable={isCurrentSelectionAvailable}
|
|
|
+ isLoading={isCartLoading}
|
|
|
+ onAddToCart={addToCartHandler}
|
|
|
+ onBuyNow={buyNowHandler}
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ );
|
|
|
+}
|
zhangzf
