From 598c1ad53e40287849e31573246a2620d4c122cb Mon Sep 17 00:00:00 2001 From: jrphilo Date: Sun, 12 May 2024 13:39:14 +0200 Subject: [PATCH] feat: playing around with styles and layout on PDP Signed-off-by: jrphilo --- app/product/[handle]/page.tsx | 4 +-- components/price.tsx | 35 ++++++++++++++-------- components/product/core-charge.tsx | 26 +++++++++++----- components/product/gallery.tsx | 6 ++-- components/product/price-in-cart.tsx | 22 ++++++++++++++ components/product/product-description.tsx | 10 +++++-- components/product/variant-selector.tsx | 4 +-- components/product/warranty-selector.tsx | 15 ++++------ components/product/warranty.tsx | 27 +++++++++-------- 9 files changed, 98 insertions(+), 51 deletions(-) create mode 100644 components/product/price-in-cart.tsx diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx index b75d2b6fb..8057eba99 100644 --- a/app/product/[handle]/page.tsx +++ b/app/product/[handle]/page.tsx @@ -86,11 +86,11 @@ export default async function ProductPage({ params }: { params: { handle: string
-
+
+
} > ) => ( -

- {`${new Intl.NumberFormat(undefined, { - style: 'currency', - currency: currencyCode, - currencyDisplay: 'narrowSymbol' - }).format(parseFloat(amount))}`} - {showCurrency && ( - {`${currencyCode}`} - )} -

-); +} & React.ComponentProps<'p'>) => { + // Convert string to float and check if it is zero + const price = parseFloat(amount); + + // Return 'Included' if price is 0 + if (price === 0) { + return

Included

; + } + + // Otherwise, format and display the price + return ( +

+ {new Intl.NumberFormat(undefined, { + style: 'currency', + currency: currencyCode, + currencyDisplay: 'narrowSymbol' + }).format(price)} + {showCurrency && ( + {currencyCode} + )} +

+ ); +}; export default Price; diff --git a/components/product/core-charge.tsx b/components/product/core-charge.tsx index 7b16f08cc..adccc0a83 100644 --- a/components/product/core-charge.tsx +++ b/components/product/core-charge.tsx @@ -1,9 +1,11 @@ 'use client'; +import { ArrowPathRoundedSquareIcon } from '@heroicons/react/24/outline'; import Price from 'components/price'; 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'; type CoreChargeProps = { @@ -34,13 +36,13 @@ const CoreCharge = ({ variants }: CoreChargeProps) => { const coreChargeOptions = [ waiverAvailable && { - label: 'Core Waiver', + label: 'Waive Core', value: CORE_WAIVER, price: { amount: 0, currencyCode: variant?.price.currencyCode } }, coreVariantId && coreCharge && { - label: 'Core Charge', + label: 'Pay Core Upfront', value: coreVariantId, price: coreCharge } @@ -52,25 +54,35 @@ const CoreCharge = ({ variants }: CoreChargeProps) => { return (
-
Core Charge
+
+
+ + Core charge +
+ + Understanding Core Charges and Returns + +
+ {/* + Plan is to move this to within the a modal tht opens when a user clicks on Understanding Core Charges and Returns

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'll receive a refund of the core charge. -

+

*/}
    {coreChargeOptions.map((option) => (
    • diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx index 8c865980f..245f303f5 100644 --- a/components/product/gallery.tsx +++ b/components/product/gallery.tsx @@ -28,7 +28,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[] return ( <> -
    +
    {images[imageIndex] && ( {images.length > 1 ? ( -
      +
        {images.map((image, index) => { const isActive = index === imageIndex; const imageSearchParams = new URLSearchParams(searchParams.toString()); @@ -78,7 +78,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[] imageSearchParams.set('image', index.toString()); return ( -
      • +
      • { + const totalPrice = items.reduce((sum, item) => sum + item.price, 0); + + return ( +
        +
          + {items.map((item, index) => ( +
        • + {item.label} + ${item.price.toFixed(2)} +
          • + ))} +
        • + Total In Cart + ${totalPrice.toFixed(2)} +
          • +
        +
        + ); +}; + +export default PriceInCart; diff --git a/components/product/product-description.tsx b/components/product/product-description.tsx index d58bded3b..e22248464 100644 --- a/components/product/product-description.tsx +++ b/components/product/product-description.tsx @@ -12,7 +12,11 @@ export function ProductDescription({ product }: { product: Product }) { return ( <>
        -

        {product.title}

        +

        {product.title}

        +
        +

        SKU: 123456

        +

        Condition: Used

        +
        ) : null} -
        +
        -
        +
        diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx index 4ee9d46bc..1cbc0ffbe 100644 --- a/components/product/variant-selector.tsx +++ b/components/product/variant-selector.tsx @@ -75,8 +75,8 @@ export function VariantSelector({ const closeModal = () => setIsOpen(false); return ( -
        - More Remanufactured and Used Options{' '} +
        + See more Remanufactured and Used Options{' '}