crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: create side dialog for content inside PDP

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe
2024-05-21 15:19:00 +07:00
parent 7c60e4e7f4
commit 4684d54ac3
10 changed files with 156 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/product/core-charge.tsx
View File

@@ -2,11 +2,12 @@
import { ArrowPathRoundedSquareIcon } from '@heroicons/react/24/outline';
import Price from 'components/price';
import SideDialog from 'components/side-dialog';
import { CORE_VARIANT_ID_KEY, CORE_WAIVER } from 'lib/constants';
import { CoreChargeOption, ProductVariant } from 'lib/shopify/types';
import { cn, createUrl } from 'lib/utils';
import Link from 'next/link';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useState } from 'react';
type CoreChargeProps = {
variants: ProductVariant[];
@@ -16,6 +17,7 @@ const CoreCharge = ({ variants }: CoreChargeProps) => {
const pathname = usePathname();
const router = useRouter();
const [isOpenDialog, setIsOpenDialog] = useState(false);
const optionSearchParams = new URLSearchParams(searchParams);
const coreVariantIdSearchParam = optionSearchParams.get(CORE_VARIANT_ID_KEY);
@@ -52,6 +54,9 @@ const CoreCharge = ({ variants }: CoreChargeProps) => {
handleSelectCoreChargeOption((coreChargeOptions[0] as CoreChargeOption).value);
}
const openDialog = () => setIsOpenDialog(true);
const closeDialog = () => setIsOpenDialog(false);
return (
<div className="flex flex-col text-xs lg:text-sm">
<div className="mb-1 flex flex-row items-center space-x-1 divide-x divide-gray-400 leading-none lg:space-x-3">
@@ -59,17 +64,21 @@ const CoreCharge = ({ variants }: CoreChargeProps) => {
<ArrowPathRoundedSquareIcon className="h-5 w-5" />
<span> Core charge </span>
</div>
<Link href="#" className="pl-2 text-blue-800 hover:underline">
<button className="pl-2 text-blue-800 hover:underline" onClick={openDialog}>
Understanding Core Charges and Returns
</Link>
</button>
<SideDialog title="Core Charges and Returns" onClose={closeDialog} open={isOpenDialog}>
<div className="mt-5 flex h-full flex-col overflow-hidden">
<p className="text-sm tracking-tight">
The core charge is a refundable deposit that is added to the price of the part. This
charge ensures that the old, worn-out part is returned to the supplier for proper
disposal or recycling. When you return the old part, you&apos;ll receive a refund of
the core charge.
</p>
</div>
</SideDialog>
</div>
{/*
Plan is to move this to within the a modal tht opens when a user clicks on Understanding Core Charges and Returns
<p className="mb-2 text-sm tracking-tight text-neutral-500">
The core charge is a refundable deposit that is added to the price of the part. This charge
ensures that the old, worn-out part is returned to the supplier for proper disposal or
recycling. When you return the old part, you&apos;ll receive a refund of the core charge.
</p> */}
<ul className="flex min-h-16 flex-row space-x-4 pt-2">
{coreChargeOptions.map((option) => (
<li className="flex w-32" key={option.value}>