mirror of
https://github.com/vercel/commerce.git
synced 2025-05-18 15:36:58 +00:00
feat: implement variant selector panel
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe
parent
d5cdb55845
commit
2ad07c3682
@ -4,7 +4,7 @@ import { ShoppingCartIcon } from '@heroicons/react/24/outline';
|
||||
import clsx from 'clsx';
|
||||
import { addItem } from 'components/cart/actions';
|
||||
import LoadingDots from 'components/loading-dots';
|
||||
import { CORE_VARIANT_ID_KEY } from 'lib/constants';
|
||||
import { CORE_VARIANT_ID_KEY, CORE_WAIVER } from 'lib/constants';
|
||||
import { ProductVariant } from 'lib/shopify/types';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useFormState, useFormStatus } from 'react-dom';
|
||||
@ -69,18 +69,20 @@ export function AddToCart({
|
||||
}) {
|
||||
const [message, formAction] = useFormState(addItem, null);
|
||||
const searchParams = useSearchParams();
|
||||
const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
|
||||
const variant = variants.find((variant: ProductVariant) =>
|
||||
variant.selectedOptions.every(
|
||||
(option) => option.value === searchParams.get(option.name.toLowerCase())
|
||||
)
|
||||
);
|
||||
const selectedVariantId = variant?.id || defaultVariantId;
|
||||
const selectedVariantId = variant?.id;
|
||||
const missingCoreVariantId = variant?.coreVariantId && !searchParams.has(CORE_VARIANT_ID_KEY);
|
||||
|
||||
const coreVariantId = searchParams.get(CORE_VARIANT_ID_KEY);
|
||||
|
||||
const selectedVariantIds = [coreVariantId, selectedVariantId].filter(Boolean) as string[];
|
||||
// remove special core-waiver value as it is not a valid variant
|
||||
const selectedVariantIds = [coreVariantId, selectedVariantId]
|
||||
.filter(Boolean)
|
||||
.filter((value) => value !== CORE_WAIVER) as string[];
|
||||
|
||||
const actionWithVariant = formAction.bind(null, selectedVariantIds);
|
||||
|
||||
|
||||
@ -2,15 +2,14 @@
|
||||
|
||||
import Price from 'components/price';
|
||||
import { CORE_VARIANT_ID_KEY, CORE_WAIVER } from 'lib/constants';
|
||||
import { Money, ProductVariant } from 'lib/shopify/types';
|
||||
import { CoreChargeOption, ProductVariant } from 'lib/shopify/types';
|
||||
import { cn, createUrl } from 'lib/utils';
|
||||
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
|
||||
|
||||
type CoreChargeProps = {
|
||||
variants: ProductVariant[];
|
||||
defaultPrice: Money;
|
||||
};
|
||||
const CoreCharge = ({ variants, defaultPrice }: CoreChargeProps) => {
|
||||
const CoreCharge = ({ variants }: CoreChargeProps) => {
|
||||
const searchParams = useSearchParams();
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
@ -24,35 +23,32 @@ const CoreCharge = ({ variants, defaultPrice }: CoreChargeProps) => {
|
||||
)
|
||||
);
|
||||
|
||||
const { coreCharge, waiverAvailable } = variant ?? {};
|
||||
const { coreCharge, waiverAvailable, coreVariantId } = variant ?? {};
|
||||
|
||||
const handleSelectCoreChargeOption = (action: 'add' | 'remove') => {
|
||||
if (action === 'add' && variant?.coreVariantId) {
|
||||
optionSearchParams.set(CORE_VARIANT_ID_KEY, variant.coreVariantId);
|
||||
} else if (action === 'remove') {
|
||||
optionSearchParams.set(CORE_VARIANT_ID_KEY, CORE_WAIVER);
|
||||
}
|
||||
const handleSelectCoreChargeOption = (coreVariantId: string) => {
|
||||
optionSearchParams.set(CORE_VARIANT_ID_KEY, coreVariantId);
|
||||
|
||||
const newUrl = createUrl(pathname, optionSearchParams);
|
||||
router.replace(newUrl, { scroll: false });
|
||||
};
|
||||
|
||||
// if the selected variant has changed, and the core change variant id is not the same as the selected variant id
|
||||
// or if users have selected the core waiver but the selected variant does not have a waiver available
|
||||
// we remove the core charge from the url
|
||||
if (
|
||||
variant?.coreVariantId &&
|
||||
optionSearchParams.has(CORE_VARIANT_ID_KEY) &&
|
||||
(coreVariantIdSearchParam !== CORE_WAIVER || !variant.waiverAvailable) &&
|
||||
coreVariantIdSearchParam !== variant.coreVariantId
|
||||
) {
|
||||
optionSearchParams.delete(CORE_VARIANT_ID_KEY);
|
||||
const newUrl = createUrl(pathname, optionSearchParams);
|
||||
router.replace(newUrl, { scroll: false });
|
||||
}
|
||||
const coreChargeOptions = [
|
||||
waiverAvailable && {
|
||||
label: 'Core Waiver',
|
||||
value: CORE_WAIVER,
|
||||
price: { amount: 0, currencyCode: variant?.price.currencyCode }
|
||||
},
|
||||
coreVariantId &&
|
||||
coreCharge && {
|
||||
label: 'Core Charge',
|
||||
value: coreVariantId,
|
||||
price: coreCharge
|
||||
}
|
||||
].filter(Boolean) as CoreChargeOption[];
|
||||
|
||||
const selectedPayCoreCharge = coreVariantIdSearchParam === variant?.coreVariantId;
|
||||
const selectedCoreWaiver = coreVariantIdSearchParam === CORE_WAIVER;
|
||||
if (!optionSearchParams.has(CORE_VARIANT_ID_KEY) && coreChargeOptions.length > 0) {
|
||||
handleSelectCoreChargeOption((coreChargeOptions[0] as CoreChargeOption).value);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col text-xs lg:text-sm">
|
||||
@ -63,38 +59,22 @@ const CoreCharge = ({ variants, defaultPrice }: CoreChargeProps) => {
|
||||
recycling. When you return the old part, you'll receive a refund of the core charge.
|
||||
</p>
|
||||
<ul className="flex min-h-16 flex-row space-x-4 pt-2">
|
||||
{waiverAvailable ? (
|
||||
<li className="flex w-32">
|
||||
{coreChargeOptions.map((option) => (
|
||||
<li className="flex w-32" key={option.value}>
|
||||
<button
|
||||
onClick={() => handleSelectCoreChargeOption('remove')}
|
||||
onClick={() => handleSelectCoreChargeOption(option.value)}
|
||||
className={cn(
|
||||
'flex w-full flex-col flex-wrap items-center justify-center space-y-2 rounded-md border p-2 text-center text-xs font-medium',
|
||||
{
|
||||
'ring-2 ring-secondary': selectedCoreWaiver
|
||||
'ring-2 ring-secondary': coreVariantIdSearchParam === option.value
|
||||
}
|
||||
)}
|
||||
>
|
||||
<span>Core Waiver</span>
|
||||
<Price amount="0" currencyCode={defaultPrice.currencyCode} />
|
||||
<span>{option.label}</span>
|
||||
<Price {...option.price} />
|
||||
</button>
|
||||
</li>
|
||||
) : null}
|
||||
{coreCharge && variant?.coreVariantId ? (
|
||||
<li className="flex w-32">
|
||||
<button
|
||||
onClick={() => handleSelectCoreChargeOption('add')}
|
||||
className={cn(
|
||||
'flex w-full flex-col flex-wrap items-center justify-center space-y-2 rounded-md border p-2 text-center text-xs font-medium',
|
||||
{
|
||||
'ring-2 ring-secondary': selectedPayCoreCharge
|
||||
}
|
||||
)}
|
||||
>
|
||||
<span>Core Charge</span>
|
||||
<Price amount={coreCharge.amount} currencyCode={coreCharge.currencyCode} />
|
||||
</button>
|
||||
</li>
|
||||
) : null}
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -19,7 +19,11 @@ export function ProductDescription({ product }: { product: Product }) {
|
||||
/>
|
||||
</div>
|
||||
<Suspense fallback={null}>
|
||||
<VariantSelector options={product.options} variants={product.variants} />
|
||||
<VariantSelector
|
||||
options={product.options}
|
||||
variants={product.variants}
|
||||
minPrice={product.priceRange.minVariantPrice}
|
||||
/>
|
||||
</Suspense>
|
||||
|
||||
{product.descriptionHtml ? (
|
||||
@ -30,11 +34,11 @@ export function ProductDescription({ product }: { product: Product }) {
|
||||
) : null}
|
||||
|
||||
<div className="mb-4 border-t pb-4 pt-6 dark:border-neutral-700">
|
||||
<CoreCharge variants={product.variants} defaultPrice={product.priceRange.minVariantPrice} />
|
||||
<CoreCharge variants={product.variants} />
|
||||
</div>
|
||||
|
||||
<div className="mb-4 border-t py-6 dark:border-neutral-700">
|
||||
<Warranty productType={product.productType} />
|
||||
<Warranty />
|
||||
</div>
|
||||
|
||||
<Suspense fallback={null}>
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
'use client';
|
||||
|
||||
import { Dialog, Transition } from '@headlessui/react';
|
||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
||||
import clsx from 'clsx';
|
||||
import { ProductOption, ProductVariant } from 'lib/shopify/types';
|
||||
import Price from 'components/price';
|
||||
import { CORE_VARIANT_ID_KEY, CORE_WAIVER } from 'lib/constants';
|
||||
import { CoreChargeOption, Money, ProductOption, ProductVariant } from 'lib/shopify/types';
|
||||
import { createUrl } from 'lib/utils';
|
||||
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
|
||||
import { Fragment, MouseEvent, useEffect, useState } from 'react';
|
||||
|
||||
type Combination = {
|
||||
id: string;
|
||||
@ -13,20 +18,17 @@ type Combination = {
|
||||
|
||||
export function VariantSelector({
|
||||
options,
|
||||
variants
|
||||
variants,
|
||||
minPrice
|
||||
}: {
|
||||
options: ProductOption[];
|
||||
variants: ProductVariant[];
|
||||
minPrice: Money;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const hasNoOptionsOrJustOneOption =
|
||||
!options.length || (options.length === 1 && options[0]?.values.length === 1);
|
||||
|
||||
if (hasNoOptionsOrJustOneOption) {
|
||||
return null;
|
||||
}
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const combinations: Combination[] = variants.map((variant) => ({
|
||||
id: variant.id,
|
||||
@ -38,70 +40,231 @@ export function VariantSelector({
|
||||
)
|
||||
}));
|
||||
|
||||
return options.map((option) => (
|
||||
<dl className="mb-6" key={option.id}>
|
||||
<dt className="mb-4 text-sm font-medium tracking-wide">{option.name}</dt>
|
||||
<dd className="flex flex-wrap gap-3">
|
||||
{option.values.map((value) => {
|
||||
const optionNameLowerCase = option.name.toLowerCase();
|
||||
const variantsById: Record<string, ProductVariant> = variants.reduce((acc, variant) => {
|
||||
return { ...acc, [variant.id]: variant };
|
||||
}, {});
|
||||
|
||||
// Base option params on current params so we can preserve any other param state in the url.
|
||||
const optionSearchParams = new URLSearchParams(searchParams.toString());
|
||||
// If a variant is not selected, we want to select the first available for sale variant as default
|
||||
useEffect(() => {
|
||||
const hasSelectedVariant = Array.from(searchParams.entries()).some(([key, value]) => {
|
||||
return combinations.some((combination) => combination[key] === value);
|
||||
});
|
||||
|
||||
// Update the option params using the current option to reflect how the url *would* change,
|
||||
// if the option was clicked.
|
||||
optionSearchParams.set(optionNameLowerCase, value);
|
||||
if (!hasSelectedVariant) {
|
||||
const defaultVariant = variants.find((variant) => variant.availableForSale);
|
||||
if (defaultVariant) {
|
||||
const optionSearchParams = new URLSearchParams(searchParams.toString());
|
||||
defaultVariant.selectedOptions.forEach((option) => {
|
||||
optionSearchParams.set(option.name.toLowerCase(), option.value);
|
||||
});
|
||||
const defaultUrl = createUrl(pathname, optionSearchParams);
|
||||
router.replace(defaultUrl, { scroll: false });
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const optionUrl = createUrl(pathname, optionSearchParams);
|
||||
const hasNoOptionsOrJustOneOption =
|
||||
!options.length || (options.length === 1 && options[0]?.values.length === 1);
|
||||
|
||||
// In order to determine if an option is available for sale, we need to:
|
||||
//
|
||||
// 1. Filter out all other param state
|
||||
// 2. Filter out invalid options
|
||||
// 3. Check if the option combination is available for sale
|
||||
//
|
||||
// This is the "magic" that will cross check possible variant combinations and preemptively
|
||||
// disable combinations that are not available. For example, if the color gray is only available in size medium,
|
||||
// then all other sizes should be disabled.
|
||||
const filtered = Array.from(optionSearchParams.entries()).filter(([key, value]) =>
|
||||
options.find(
|
||||
(option) => option.name.toLowerCase() === key && option.values.includes(value)
|
||||
)
|
||||
);
|
||||
const isAvailableForSale = combinations.find((combination) =>
|
||||
filtered.every(
|
||||
([key, value]) => combination[key] === value && combination.availableForSale
|
||||
)
|
||||
);
|
||||
if (hasNoOptionsOrJustOneOption) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// The option is active if it's in the url params.
|
||||
const isActive = searchParams.get(optionNameLowerCase) === value;
|
||||
const openModal = () => setIsOpen(true);
|
||||
const closeModal = () => setIsOpen(false);
|
||||
|
||||
return (
|
||||
<button
|
||||
key={value}
|
||||
aria-disabled={!isAvailableForSale}
|
||||
disabled={!isAvailableForSale}
|
||||
onClick={() => {
|
||||
router.replace(optionUrl, { scroll: false });
|
||||
}}
|
||||
title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
|
||||
className={clsx(
|
||||
'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
|
||||
{
|
||||
'cursor-default ring-2 ring-secondary': isActive,
|
||||
'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-secondary ':
|
||||
!isActive && isAvailableForSale,
|
||||
'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
|
||||
!isAvailableForSale
|
||||
}
|
||||
)}
|
||||
>
|
||||
{value}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</dd>
|
||||
</dl>
|
||||
));
|
||||
const handleCoreChargeClick = (
|
||||
event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>,
|
||||
coreVariantId: string | null
|
||||
) => {
|
||||
event.stopPropagation();
|
||||
if (!coreVariantId) return;
|
||||
const optionSearchParams = new URLSearchParams(searchParams.toString());
|
||||
optionSearchParams.set(CORE_VARIANT_ID_KEY, coreVariantId);
|
||||
const newUrl = createUrl(pathname, optionSearchParams);
|
||||
router.replace(newUrl, { scroll: false });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mb-6 flex flex-row gap-1 text-sm font-medium">
|
||||
More Remanufactured and Used Options{' '}
|
||||
<button
|
||||
className="flex flex-row gap-0.5 font-normal text-blue-800 hover:underline"
|
||||
aria-label="Open variants selector"
|
||||
onClick={openModal}
|
||||
>
|
||||
from
|
||||
<Price amount={minPrice.amount} currencyCode={minPrice.currencyCode} />
|
||||
</button>
|
||||
<Transition show={isOpen} as={Fragment}>
|
||||
<Dialog onClose={closeModal} className="relative z-50">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="transition-all ease-in-out duration-300"
|
||||
enterFrom="opacity-0 backdrop-blur-none"
|
||||
enterTo="opacity-100 backdrop-blur-[.5px]"
|
||||
leave="transition-all ease-in-out duration-200"
|
||||
leaveFrom="opacity-100 backdrop-blur-[.5px]"
|
||||
leaveTo="opacity-0 backdrop-blur-none"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black/30" aria-hidden="true" />
|
||||
</Transition.Child>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="transition-all ease-in-out duration-300"
|
||||
enterFrom="translate-x-full"
|
||||
enterTo="translate-x-0"
|
||||
leave="transition-all ease-in-out duration-200"
|
||||
leaveFrom="translate-x-0"
|
||||
leaveTo="translate-x-full"
|
||||
>
|
||||
<Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl md:w-[500px]">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-lg font-semibold">Manufactured & Used Options</p>
|
||||
|
||||
<button aria-label="Close cart" onClick={closeModal} className="text-black">
|
||||
<XMarkIcon className="h-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-5 flex h-full flex-col justify-between overflow-hidden ">
|
||||
<div>
|
||||
{options.map((option) => {
|
||||
return (
|
||||
<ul
|
||||
key={option.id}
|
||||
className="flex-grow flex-col space-y-4 overflow-auto px-1 py-4"
|
||||
>
|
||||
{option.values.map((value) => {
|
||||
const optionNameLowerCase = option.name.toLowerCase();
|
||||
const optionSearchParams = new URLSearchParams(searchParams.toString());
|
||||
|
||||
optionSearchParams.set(optionNameLowerCase, value);
|
||||
|
||||
// In order to determine if an option is available for sale, we need to:
|
||||
//
|
||||
// 1. Filter out all other param state
|
||||
// 2. Filter out invalid options
|
||||
// 3. Check if the option combination is available for sale
|
||||
//
|
||||
// This is the "magic" that will cross check possible variant combinations and preemptively
|
||||
// disable combinations that are not available. For example, if the color gray is only available in size medium,
|
||||
// then all other sizes should be disabled.
|
||||
const filtered = Array.from(optionSearchParams.entries()).filter(
|
||||
([key, value]) =>
|
||||
options.find(
|
||||
(option) =>
|
||||
option.name.toLowerCase() === key && option.values.includes(value)
|
||||
)
|
||||
);
|
||||
|
||||
const isAvailableForSale = combinations.find((combination) =>
|
||||
filtered.every(
|
||||
([key, value]) =>
|
||||
combination[key] === value && combination.availableForSale
|
||||
)
|
||||
);
|
||||
|
||||
const variant = isAvailableForSale
|
||||
? variantsById[isAvailableForSale.id]
|
||||
: undefined;
|
||||
|
||||
const coreChargeOptions = [
|
||||
variant?.waiverAvailable && {
|
||||
label: 'Core Waiver',
|
||||
value: CORE_WAIVER,
|
||||
price: { amount: 0, currencyCode: variant?.price.currencyCode }
|
||||
},
|
||||
variant?.coreVariantId &&
|
||||
variant.coreCharge && {
|
||||
label: 'Core Charge',
|
||||
value: variant.coreVariantId,
|
||||
price: variant.coreCharge
|
||||
}
|
||||
].filter(Boolean) as CoreChargeOption[];
|
||||
|
||||
// preset the first core charge option if not set
|
||||
coreChargeOptions[0] &&
|
||||
optionSearchParams.set(CORE_VARIANT_ID_KEY, coreChargeOptions[0].value);
|
||||
|
||||
const optionUrl = createUrl(pathname, optionSearchParams);
|
||||
|
||||
// The option is active if it's in the url params.
|
||||
const isActive = searchParams.get(optionNameLowerCase) === value;
|
||||
|
||||
return (
|
||||
<li
|
||||
key={value}
|
||||
className={clsx('flex w-full rounded border border-neutral-300', {
|
||||
'cursor-default ring-2 ring-secondary': isActive,
|
||||
'ring-2 ring-transparent hover:ring-secondary':
|
||||
!isActive && isAvailableForSale,
|
||||
'cursor-not-allowed opacity-60 ring-1 ring-neutral-300':
|
||||
!isAvailableForSale
|
||||
})}
|
||||
>
|
||||
<button
|
||||
disabled={!isAvailableForSale}
|
||||
aria-disabled={!isAvailableForSale}
|
||||
onClick={() => router.replace(optionUrl, { scroll: false })}
|
||||
className="flex w-full flex-col gap-2 px-4 py-3"
|
||||
>
|
||||
<div className="flex w-full flex-row items-center justify-between">
|
||||
<div className="flex flex-col items-start gap-1">
|
||||
{variant ? (
|
||||
<Price
|
||||
amount={variant.price.amount}
|
||||
currencyCode={variant.price.currencyCode}
|
||||
className="text-base font-semibold"
|
||||
/>
|
||||
) : null}
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs font-medium text-gray-600">
|
||||
{option.name}:
|
||||
</span>
|
||||
<span className="text-xs text-gray-600">{value}</span>
|
||||
</div>
|
||||
</div>
|
||||
{!isAvailableForSale ? <span>Out of Stock</span> : null}
|
||||
</div>
|
||||
<div className="mt-1.5 flex flex-row flex-wrap items-center gap-3">
|
||||
{coreChargeOptions.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
disabled={!isActive}
|
||||
className={clsx(
|
||||
'flex flex-row items-center gap-2 rounded-full border border-neutral-300 px-3 py-1 text-xs',
|
||||
{
|
||||
'bg-gray-200':
|
||||
isActive &&
|
||||
searchParams.get(CORE_VARIANT_ID_KEY) === option.value,
|
||||
'bg-transparent':
|
||||
searchParams.get(CORE_VARIANT_ID_KEY) !== option.value,
|
||||
'cursor-not-allowed opacity-50 hover:bg-transparent':
|
||||
!isActive,
|
||||
'hover:bg-gray-200': isActive
|
||||
}
|
||||
)}
|
||||
onClick={(e) => handleCoreChargeClick(e, option.value)}
|
||||
>
|
||||
<span>{option.label}</span>
|
||||
<Price {...option.price} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,16 +2,12 @@ import { ShieldCheckIcon } from '@heroicons/react/24/outline';
|
||||
import Link from 'next/link';
|
||||
import WarrantySelector from './warranty-selector';
|
||||
|
||||
type WarrantyProps = {
|
||||
productType: string | null;
|
||||
};
|
||||
|
||||
const Warranty = ({ productType }: WarrantyProps) => {
|
||||
const Warranty = () => {
|
||||
return (
|
||||
<div className="flex flex-col text-xs lg:text-sm">
|
||||
<div className="mb-3 flex flex-row items-center space-x-2 text-base font-medium">
|
||||
<ShieldCheckIcon className="h-7 w-7" />
|
||||
<span> Protect your {productType ?? 'product'}</span>
|
||||
<span> Protect your product</span>
|
||||
</div>
|
||||
<div className="mb-1 flex flex-row items-center space-x-1 divide-x divide-gray-400 leading-none lg:space-x-3">
|
||||
<span>Extended Warranty</span>
|
||||
|
||||
@ -73,9 +73,6 @@ const productFragment = /* GraphQL */ `
|
||||
}
|
||||
tags
|
||||
updatedAt
|
||||
productType: metafield(namespace: "custom", key: "product_type") {
|
||||
value
|
||||
}
|
||||
}
|
||||
${imageFragment}
|
||||
${seoFragment}
|
||||
|
||||
@ -194,12 +194,11 @@ const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean =
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const { images, variants, productType, ...rest } = product;
|
||||
const { images, variants, ...rest } = product;
|
||||
return {
|
||||
...rest,
|
||||
images: reshapeImages(images, product.title),
|
||||
variants: reshapeVariants(removeEdgesAndNodes(variants)),
|
||||
productType: productType?.value ?? null
|
||||
variants: reshapeVariants(removeEdgesAndNodes(variants))
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -62,10 +62,9 @@ export type Page = {
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
export type Product = Omit<ShopifyProduct, 'variants' | 'images' | 'productType'> & {
|
||||
export type Product = Omit<ShopifyProduct, 'variants' | 'images'> & {
|
||||
variants: ProductVariant[];
|
||||
images: Image[];
|
||||
productType: string | null;
|
||||
};
|
||||
|
||||
export type ProductOption = {
|
||||
@ -148,9 +147,6 @@ export type ShopifyProduct = {
|
||||
handle: string;
|
||||
}[];
|
||||
};
|
||||
productType: {
|
||||
value: string;
|
||||
} | null;
|
||||
};
|
||||
|
||||
export type ShopifyCartOperation = {
|
||||
@ -288,3 +284,9 @@ export type ShopifyProductsOperation = {
|
||||
sortKey?: string;
|
||||
};
|
||||
};
|
||||
|
||||
export type CoreChargeOption = {
|
||||
label: string;
|
||||
value: string;
|
||||
price: Money;
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user