From 87685fda61a2b3adb7007faded26c59514e6a1c3 Mon Sep 17 00:00:00 2001 From: Chloe Date: Mon, 17 Jun 2024 16:21:32 +0700 Subject: [PATCH] fix: add additional information section Signed-off-by: Chloe --- app/product/[handle]/page.tsx | 4 +- components/product/additional-information.tsx | 16 +++ components/product/details.tsx | 82 ++++++++++++++ components/product/disclosure-section.tsx | 25 +++++ components/product/product-description.tsx | 2 + components/product/shipping-policy.tsx | 44 ++++++++ components/product/warranty-policy.tsx | 102 ++++++++++++++++++ 7 files changed, 273 insertions(+), 2 deletions(-) create mode 100644 components/product/additional-information.tsx create mode 100644 components/product/details.tsx create mode 100644 components/product/disclosure-section.tsx create mode 100644 components/product/shipping-policy.tsx create mode 100644 components/product/warranty-policy.tsx diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx index b162cb0c1..29e07422c 100644 --- a/app/product/[handle]/page.tsx +++ b/app/product/[handle]/page.tsx @@ -81,7 +81,7 @@ export default async function ProductPage({ params }: { params: { handle: string __html: JSON.stringify(productJsonLd) }} /> -
+
@@ -90,7 +90,7 @@ export default async function ProductPage({ params }: { params: { handle: string
-
+
diff --git a/components/product/additional-information.tsx b/components/product/additional-information.tsx new file mode 100644 index 000000000..1ef09b598 --- /dev/null +++ b/components/product/additional-information.tsx @@ -0,0 +1,16 @@ +import { Product } from 'lib/shopify/types'; +import Details from './details'; +import ShippingPolicy from './shipping-policy'; +import WarrantyPolicy from './warranty-policy'; + +const AdditionalInformation = ({ product }: { product: Product }) => { + return ( +
+
+ + +
+ ); +}; + +export default AdditionalInformation; diff --git a/components/product/details.tsx b/components/product/details.tsx new file mode 100644 index 000000000..27ba66eb7 --- /dev/null +++ b/components/product/details.tsx @@ -0,0 +1,82 @@ +'use client'; + +import clsx from 'clsx'; +import Price from 'components/price'; +import { Product } from 'lib/shopify/types'; +import { useSearchParams } from 'next/navigation'; +import DisclosureSection from './disclosure-section'; + +const Details = ({ product }: { product: Product }) => { + const searchParams = useSearchParams(); + const variants = product.variants; + + const variant = variants.find((variant) => + variant.selectedOptions.every( + (option) => option.value === searchParams.get(option.name.toLowerCase()) + ) + ); + + const details = [ + ...(product.transmissionTag + ? [ + { + title: 'Transmission Tag', + value: product.transmissionTag.join() + } + ] + : []), + ...(product.transmissionCode + ? [ + { + title: 'Transmission Code', + value: product.transmissionCode.join() + } + ] + : []), + ...(product.transmissionSpeeds + ? [ + { + title: 'Transmission Speeds', + value: product.transmissionSpeeds.map((speed) => `${speed}-Speed`).join() + } + ] + : []) + ]; + return ( + +
+ Condition + {variant?.condition || 'N/A'} +
+
+ Price + +
+
+ Warranty + +
+
+ Cylinders + {product.engineCylinders?.map((cylinder) => `${cylinder} Cylinders`).join()} +
+ + {details.map(({ title, value }, index) => ( +
+ {title} + {value} +
+ ))} + + ); +}; + +export default Details; diff --git a/components/product/disclosure-section.tsx b/components/product/disclosure-section.tsx new file mode 100644 index 000000000..9d5c28231 --- /dev/null +++ b/components/product/disclosure-section.tsx @@ -0,0 +1,25 @@ +'use client'; + +import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react'; +import { ChevronDownIcon } from '@heroicons/react/24/outline'; +import { ReactNode } from 'react'; + +type DisclosureProps = { + children: ReactNode; + defaultOpen?: boolean; + title: string; +}; + +const DisclosureSection = ({ children, title, defaultOpen }: DisclosureProps) => { + return ( + + + {title} + + + {children} + + ); +}; + +export default DisclosureSection; diff --git a/components/product/product-description.tsx b/components/product/product-description.tsx index cec16316b..76d4d55d4 100644 --- a/components/product/product-description.tsx +++ b/components/product/product-description.tsx @@ -2,6 +2,7 @@ import { AddToCart } from 'components/cart/add-to-cart'; import Prose from 'components/prose'; import { Product } from 'lib/shopify/types'; import { Suspense } from 'react'; +import AdditionalInformation from './additional-information'; import CoreCharge from './core-charge'; import Delivery from './delivery'; import PriceSummary from './price-summary'; @@ -55,6 +56,7 @@ export function ProductDescription({ product }: { product: Product }) { + ); } diff --git a/components/product/shipping-policy.tsx b/components/product/shipping-policy.tsx new file mode 100644 index 000000000..be98d8e70 --- /dev/null +++ b/components/product/shipping-policy.tsx @@ -0,0 +1,44 @@ +import DisclosureSection from './disclosure-section'; + +const { SITE_NAME } = process.env; +const ShippingPolicy = () => { + return ( + +

+ At {SITE_NAME}, we offer a Flat Rate Shipping (Commercial address) service as long as the + delivery address is in a commercially zoned location. Unfortunately, residential and home + businesses are not considered commercial addresses. A business or commercial address + location must be able to receive freight without the requirement of prior appointment setup + or notification. This location should also have the capability of unloading the + remanufactured transmission with a forklift from the delivery truck. If you don't have + a commercial or business address that meets these specifications, you should ship it + directly to the dealership or repair shop that is performing the repairs to ensure you enjoy + Flat Rate Shipping (Commercial address). Residential delivery or Liftgate service will + result in additional $99 fee. +

+

+ After placing the order for a remanufactured transmission, most customers will receive it + within 7-14 business days — not including holidays or weekends. Please keep in mind that + certain locations (remote areas) and locations in Colorado, Utah, New York, Oregon, and + California may require an additional delivery fee. In either case, we will always ship your + remanufactured transmission out as soon as possible. Because of weather conditions, + increasing order volumes, and conditions outside of our control, all shipping times are + estimates, not guarantees. It's important to note that {SITE_NAME} will not be liable + for any extra fees the carrier may levy due to storage or redelivery. While every + transmission from {SITE_NAME} has been rigorously inspected and tested prior to being + shipped, damage may occur during transportation. +

+

+ As such, we strongly suggest you carefully inspect your transmission upon receipt. If you + notice any missing parts, wrong parts, or damage, you should report it prior to signing any + delivery documentation. It"s imperative to report missing parts, damage, or wrong parts + at the time of delivery. If you fail to do so prior to signing your shipping documents, + responsibility will be placed on the purchaser or receiver. For clarity, + "purchaser" refers to any representative of the company designated to sign for the + delivery of the remanufactured transmission. +

+ + ); +}; + +export default ShippingPolicy; diff --git a/components/product/warranty-policy.tsx b/components/product/warranty-policy.tsx new file mode 100644 index 000000000..0457e52b5 --- /dev/null +++ b/components/product/warranty-policy.tsx @@ -0,0 +1,102 @@ +import { + ArrowPathIcon, + ArrowsRightLeftIcon, + CurrencyDollarIcon, + FlagIcon +} from '@heroicons/react/24/outline'; +import DisclosureSection from './disclosure-section'; + +const { SITE_NAME } = process.env; + +const WarrantyPolicy = () => { + return ( + +
Year 2001 and Newer
+
+ Personal/Individual Transmission Warranty + 60 Months/ Unlimited Mileage +
+
+ Commercial Transmissions Warranty + Prior to 03/01/2020 18 Months/ 100,000 Miles +
+
+ Commercial Transmissions Warranty + Effective 03/01/2020 36 Months/ Unlimited Mileage +
+
+ Continuously Variable Transmission (CVT) Warranty + 36 Months/ Unlimited Mileage +
+
+ Manual Transmission Warranty + 36 Months/ Unlimited Miles +
+
Year 2000 and Older
+
+ Personal/Individual Transmission Warranty + 36 Months/ Unlimited Mileage +
+
+ Commercial Transmissions Warranty + 18 Months/ 100,000 Miles +
+
+ Commercial Transmissions Warranty + 36 Months/ Unlimited Mileage +
+
+ Continuously Variable Transmission (CVT) Warranty + 36 Months/ Unlimited Miles +
+
+
+ + Easy, Hassle-Free, Transferable Warranty +
+

+ At {SITE_NAME}, we offer an easy, transferable, hassle-free warranty. Instead of being + associated only with you, the warranty is attached to your Vehicle Identification Number. + As such, the warranty is transferable with vehicle ownership, which means you never have + to worry about any paperwork or fees involved. Please note, that the used parts warranty + is not transferable. +

+
+
+
+ + Nationwide Coverage +
+

+ Whether you're in California, Chicago, New York, Florida, or anywhere in between, you + are covered with a nationwide warranty. This warranty covers you anywhere in the + continental U.S. +

+
+
+
+ + Instant Replacement +
+

+ With instant replacement, your replacement transmission will be sent out as soon as you + submit your claim. This way you can spend less time waiting and more time doing whatever + needs to be done. +

+
+ +
+
+ + Paid Parts & Labor +
+

+ When you have your work performed in a certified shop, your {SITE_NAME} warranty will pay + for parts and labor at $50 an hour, which is the Mitchell labor reimbursement rate. +

+
+ + ); +}; + +export default WarrantyPolicy;