crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 15:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix typo on PLP and correct site name in core charge

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe 2024-07-11 08:39:35 +07:00
parent d651cbd228
commit a76dfd6c7d
No known key found for this signature in database
GPG Key ID: CFD53CE570D42DF5
4 changed files with 84 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/layout/search/filters/sub-menu.tsx
View File

@ -39,7 +39,7 @@ const SubMenu = async ({ collection }: { collection: string }) => {
if (collectionData.plpType === 'Product Type' && collectionData.lhnLinks) {
displayField = 'make';
title = 'Populer Makes';
title = 'Popular Makes';
const response = await getMetaobjectsByIds(collectionData.lhnLinks);
subMenu = sortOptions(response, displayField);
}

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

@ -1,19 +1,20 @@
'use client';
import { InformationCircleIcon } from '@heroicons/react/20/solid';
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, phoneNumber } from 'lib/constants';
import { CORE_VARIANT_ID_KEY, CORE_WAIVER } from 'lib/constants';
import { CoreChargeOption, ProductVariant } from 'lib/shopify/types';
import { cn, createUrl } from 'lib/utils';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useState } from 'react';
import { ReactNode, useState } from 'react';
type CoreChargeProps = {
variants: ProductVariant[];
children: ReactNode;
};
const CoreCharge = ({ variants }: CoreChargeProps) => {
const CoreCharge = ({ variants, children }: CoreChargeProps) => {
const searchParams = useSearchParams();
const pathname = usePathname();
const router = useRouter();
@ -70,68 +71,7 @@ const CoreCharge = ({ variants }: CoreChargeProps) => {
</button>
<SideDialog title="Core Charges and Returns" onClose={closeDialog} open={isOpenDialog}>
<div className="mt-5 flex h-full flex-col space-y-5 overflow-hidden">
<section>
<p className="text-md mb-3 font-semibold">What is a core charge?</p>
<p className="mb-3 text-sm">
When you purchase a remanufactured transmission, the price assumes that you return
your old transmission. This old part is called a core.
</p>
<p className="text-sm">
The core charge is a refundable deposit that is added to the price of the part to
ensure that the old part is returned for proper disposal or remanufacturing. When
you return the old part, you receive a refund of the core charge.
</p>
</section>
<section>
<p className="text-md mb-3 font-semibold">Understanding our core waiver</p>
<p className="mb-3 text-sm">
At Transmission Locator, we offer a 30-day core waiver option on some of our
transmissions. This means that you can choose to waive the core deposit for up to 30
days after your purchase. As long as you return your old part within the 30-day
period, you will never need to pay the core charge.
</p>
<p className="text-sm">
If you don&apos;t manage to return the old part within the 30-day period, we will
then charge you the core charge. This keeps more money in your pocket upfront.
</p>
</section>
<section>
<p className="text-md mb-3 font-semibold">Returning your core</p>
<p className="text-sm">
We will pick up your core at no cost to you. Simply let us know that the core is
ready and we will send you a prepaid label, as well as a driver to pick up the core.
</p>
</section>
<section>
<div className="rounded-md border border-blue-700 bg-blue-50 p-2">
<div className="flex items-center">
<div className="flex-shrink-0 px-2">
<InformationCircleIcon className="h-5 w-5 text-blue-400" aria-hidden="true" />
</div>
<div className="ml-3">
<p className="font-medium text-blue-700">
Have questions? Speak to a specialist now:
</p>
<div className="md:flex md:justify-between">
<p className="mt-1 text-blue-700 md:mt-0">
<a
href={phoneNumber?.link}
className="whitespace-nowrap text-blue-700 hover:text-blue-600"
>
{phoneNumber?.title}
<span aria-hidden="true"> &rarr;</span>
</a>
</p>
</div>
</div>
</div>
</div>
</section>
</div>
{children}
</SideDialog>
</div>
<ul className="flex min-h-16 flex-row space-x-4 pt-2">

73
components/product/core-dialog-content.tsx Normal file
View File

@ -0,0 +1,73 @@
import { InformationCircleIcon } from '@heroicons/react/20/solid';
import { phoneNumber } from 'lib/constants';
const { SITE_NAME } = process.env;
const CoreDialogContent = () => {
return (
<div className="mt-5 flex h-full flex-col space-y-5 overflow-hidden">
<section>
<p className="text-md mb-3 font-semibold">What is a core charge?</p>
<p className="mb-3 text-sm">
When you purchase a remanufactured transmission, the price assumes that you return your
old transmission. This old part is called a core.
</p>
<p className="text-sm">
The core charge is a refundable deposit that is added to the price of the part to ensure
that the old part is returned for proper disposal or remanufacturing. When you return the
old part, you receive a refund of the core charge.
</p>
</section>
<section>
<p className="text-md mb-3 font-semibold">Understanding our core waiver</p>
<p className="mb-3 text-sm">
At {SITE_NAME}, we offer a 30-day core waiver option on some of our transmissions. This
means that you can choose to waive the core deposit for up to 30 days after your purchase.
As long as you return your old part within the 30-day period, you will never need to pay
the core charge.
</p>
<p className="text-sm">
If you don&apos;t manage to return the old part within the 30-day period, we will then
charge you the core charge. This keeps more money in your pocket upfront.
</p>
</section>
<section>
<p className="text-md mb-3 font-semibold">Returning your core</p>
<p className="text-sm">
We will pick up your core at no cost to you. Simply let us know that the core is ready and
we will send you a prepaid label, as well as a driver to pick up the core.
</p>
</section>
<section>
<div className="rounded-md border border-blue-700 bg-blue-50 p-2">
<div className="flex items-center">
<div className="flex-shrink-0 px-2">
<InformationCircleIcon className="h-5 w-5 text-blue-400" aria-hidden="true" />
</div>
<div className="ml-3">
<p className="font-medium text-blue-700">
Have questions? Speak to a specialist now:
</p>
<div className="md:flex md:justify-between">
<p className="mt-1 text-blue-700 md:mt-0">
<a
href={phoneNumber?.link}
className="whitespace-nowrap text-blue-700 hover:text-blue-600"
>
{phoneNumber?.title}
<span aria-hidden="true"> &rarr;</span>
</a>
</p>
</div>
</div>
</div>
</div>
</section>
</div>
);
};
export default CoreDialogContent;

5
components/product/product-description.tsx
View File

@ -3,6 +3,7 @@ import Prose from 'components/prose';
import { Product } from 'lib/shopify/types';
import { Suspense } from 'react';
import CoreCharge from './core-charge';
import CoreDialogContent from './core-dialog-content';
import Delivery from './delivery';
import PriceSummary from './price-summary';
import ProductDetails from './product-details';
@ -39,7 +40,9 @@ export function ProductDescription({ product }: { product: Product }) {
<ProductDetails product={product} />
<div className="mb-2 border-t py-4 dark:border-neutral-700">
<CoreCharge variants={product.variants} />
<CoreCharge variants={product.variants}>
<CoreDialogContent />
</CoreCharge>
</div>
<div className="mb-2 border-t py-4 dark:border-neutral-700">