diff --git a/components/cart/core-charge-badge.tsx b/components/cart/core-charge-badge.tsx new file mode 100644 index 000000000..f977d9fe7 --- /dev/null +++ b/components/cart/core-charge-badge.tsx @@ -0,0 +1,23 @@ +import CoreCharge from 'components/core-charge'; +import { ProductVariant } from 'lib/shopify/types'; + +type CoreChargeBadgeProps = { + selectedOptions: { + name: string; + value: string; + }[]; + variants: ProductVariant[]; +}; + +const CoreChargeBadge = ({ variants, selectedOptions }: CoreChargeBadgeProps) => { + const selectedOptionsMap = new Map(selectedOptions.map((option) => [option.name, option.value])); + console.log({ selectedOptionsMap, variants }); + const variant = variants.find((variant: ProductVariant) => + variant.selectedOptions.every((option) => option.value === selectedOptionsMap.get(option.name)) + ); + + console.log({ variant }); + return ; +}; + +export default CoreChargeBadge; diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx index 8a414afd3..1f6cdad5c 100644 --- a/components/cart/modal.tsx +++ b/components/cart/modal.tsx @@ -10,6 +10,7 @@ import Image from 'next/image'; import Link from 'next/link'; import { Fragment, useEffect, useRef, useState } from 'react'; import CloseCart from './close-cart'; +import CoreChargeBadge from './core-charge-badge'; import { DeleteItemButton } from './delete-item-button'; import { EditItemQuantityButton } from './edit-item-quantity-button'; import OpenCart from './open-cart'; @@ -98,7 +99,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) { return (
  • @@ -122,7 +123,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) { />
    -
    +
    {item.merchandise.product.title} @@ -133,19 +134,25 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) { ) : null}
    -
    +
    +
    +
    -
    - -

    - {item.quantity} -

    - -
    + +
    +
    + +

    + {item.quantity} +

    +
    • diff --git a/components/checkbox.tsx b/components/checkbox.tsx new file mode 100644 index 000000000..197cb3b1d --- /dev/null +++ b/components/checkbox.tsx @@ -0,0 +1,28 @@ +'use client'; + +import { CheckIcon } from '@heroicons/react/24/outline'; +import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; +import { cn } from 'lib/utils'; +import { forwardRef } from 'react'; + +const Checkbox = forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)); + +Checkbox.displayName = CheckboxPrimitive.Root.displayName; + +export { Checkbox }; diff --git a/components/core-charge.tsx b/components/core-charge.tsx new file mode 100644 index 000000000..55346fb91 --- /dev/null +++ b/components/core-charge.tsx @@ -0,0 +1,47 @@ +import { ArrowPathIcon } from '@heroicons/react/16/solid'; +import { ProductVariant } from 'lib/shopify/types'; +import Price from './price'; +import Tooltip from './tooltip'; + +type CoreChargeProps = { + variant?: ProductVariant; + sm?: boolean; +}; + +const CoreCharge = ({ variant, sm = false }: CoreChargeProps) => { + if (!variant || !variant.coreCharge?.amount || variant.waiverAvailable) return null; + + const originalPrice = String(Number(variant.price.amount) - Number(variant.coreCharge.amount)); + + const coreChargeDisplay = ( + + ); + + return ( +
    + + + {sm ? coreChargeDisplay : <>Core Charge: {coreChargeDisplay}} + + {sm ? null : ( + +

    + The core charge of {coreChargeDisplay} 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, making + the final price of the part{' '} + +

    +     + )} +
    + ); +}; + +export default CoreCharge; diff --git a/components/product/price-with-core-charge.tsx b/components/product/price-with-core-charge.tsx new file mode 100644 index 000000000..0d177ce4e --- /dev/null +++ b/components/product/price-with-core-charge.tsx @@ -0,0 +1,52 @@ +'use client'; + +import { InformationCircleIcon } from '@heroicons/react/24/outline'; +import { Checkbox } from 'components/checkbox'; +import CoreCharge from 'components/core-charge'; +import Price from 'components/price'; +import Tooltip from 'components/tooltip'; +import { Money, ProductVariant } from 'lib/shopify/types'; +import { useSearchParams } from 'next/navigation'; + +type PriceWithCoreChargeProps = { + variants: ProductVariant[]; + defaultPrice: Money; +}; + +const PriceWithCoreCharge = ({ variants, defaultPrice }: PriceWithCoreChargeProps) => { + const searchParams = useSearchParams(); + const variant = variants.find((variant: ProductVariant) => + variant.selectedOptions.every( + (option) => option.value === searchParams.get(option.name.toLowerCase()) + ) + ); + console.log({ variant }); + return ( +
    + + + {variant?.coreCharge?.amount && variant.waiverAvailable ? ( +
    + + + Select this if you do not have a core to return +
    + ) : null} +
    + ); +}; + +export default PriceWithCoreCharge; diff --git a/components/product/product-description.tsx b/components/product/product-description.tsx index 83567fe7c..0faec0d43 100644 --- a/components/product/product-description.tsx +++ b/components/product/product-description.tsx @@ -1,22 +1,19 @@ import { AddToCart } from 'components/cart/add-to-cart'; -import Price from 'components/price'; import Prose from 'components/prose'; import { Product } from 'lib/shopify/types'; import { Suspense } from 'react'; +import PriceWithCoreCharge from './price-with-core-charge'; import { VariantSelector } from './variant-selector'; export function ProductDescription({ product }: { product: Product }) { return ( <>
    -

    {product.title}

    -
    - -
    +

    {product.title}

    +
    diff --git a/lib/shopify/fragments/product.ts b/lib/shopify/fragments/product.ts index aa194ccbb..e78df9862 100644 --- a/lib/shopify/fragments/product.ts +++ b/lib/shopify/fragments/product.ts @@ -44,6 +44,12 @@ const productFragment = /* GraphQL */ ` amount currencyCode } + coreCharge: metafield(namespace: "custom", key: "core_charge") { + value + } + waiverAvailable: metafield(namespace: "custom", key: "waiver_available") { + value + } } } } diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts index ddf082fc4..65dcebcfa 100644 --- a/lib/shopify/index.ts +++ b/lib/shopify/index.ts @@ -1,6 +1,6 @@ import { HIDDEN_PRODUCT_TAG, SHOPIFY_GRAPHQL_API_ENDPOINT, TAGS } from 'lib/constants'; import { isShopifyError } from 'lib/type-guards'; -import { ensureStartsWith, normalizeUrl } from 'lib/utils'; +import { ensureStartsWith, normalizeUrl, parseMetaFieldValue } from 'lib/utils'; import { revalidateTag } from 'next/cache'; import { headers } from 'next/headers'; import { NextRequest, NextResponse } from 'next/server'; @@ -29,8 +29,10 @@ import { Connection, Image, Menu, + Money, Page, Product, + ProductVariant, ShopifyAddToCartOperation, ShopifyCart, ShopifyCartOperation, @@ -45,6 +47,7 @@ import { ShopifyProduct, ShopifyProductOperation, ShopifyProductRecommendationsOperation, + ShopifyProductVariant, ShopifyProductsOperation, ShopifyRemoveFromCartOperation, ShopifyUpdateCartOperation @@ -128,7 +131,13 @@ const reshapeCart = (cart: ShopifyCart): Cart => { return { ...cart, - lines: removeEdgesAndNodes(cart.lines) + lines: removeEdgesAndNodes(cart.lines).map((lineItem) => ({ + ...lineItem, + merchandise: { + ...lineItem.merchandise, + product: reshapeProduct(lineItem.merchandise.product) + } + })) }; }; @@ -171,6 +180,14 @@ const reshapeImages = (images: Connection, productTitle: string) => { }); }; +const reshapeVariants = (variants: ShopifyProductVariant[]): ProductVariant[] => { + return variants.map((variant) => ({ + ...variant, + coreCharge: parseMetaFieldValue(variant.coreCharge), + waiverAvailable: parseMetaFieldValue(variant.waiverAvailable) + })); +}; + const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean = true) => { if (!product || (filterHiddenProducts && product.tags.includes(HIDDEN_PRODUCT_TAG))) { return undefined; @@ -181,7 +198,7 @@ const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean = return { ...rest, images: reshapeImages(images, product.title), - variants: removeEdgesAndNodes(variants) + variants: reshapeVariants(removeEdgesAndNodes(variants)) }; }; diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts index 5069ee168..3a4dbfee2 100644 --- a/lib/shopify/types.ts +++ b/lib/shopify/types.ts @@ -82,6 +82,13 @@ export type ProductVariant = { value: string; }[]; price: Money; + coreCharge: Money | null; + waiverAvailable: boolean | null; +}; + +export type ShopifyProductVariant = Omit & { + coreCharge: { value: string } | null; + waiverAvailable: { value: string }; }; export type SEO = { @@ -121,7 +128,7 @@ export type ShopifyProduct = { maxVariantPrice: Money; minVariantPrice: Money; }; - variants: Connection; + variants: Connection; featuredImage: Image; images: Connection; seo: SEO; diff --git a/lib/utils.ts b/lib/utils.ts index 76628eee9..9d2179caf 100644 --- a/lib/utils.ts +++ b/lib/utils.ts @@ -47,3 +47,11 @@ export function cn(...inputs: ClassValue[]) { export function normalizeUrl(domain: string, url: string) { return url.replace(domain, '').replace('/collections', '/search').replace('/pages', ''); } + +export const parseMetaFieldValue = (field: { value: string } | null): T | null => { + try { + return JSON.parse(field?.value || '{}'); + } catch (error) { + return null; + } +}; diff --git a/package.json b/package.json index b0faf5da2..f758ea0e5 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "dependencies": { "@headlessui/react": "^1.7.18", "@heroicons/react": "^2.1.3", + "@radix-ui/react-checkbox": "^1.0.4", "clsx": "^2.1.0", "geist": "^1.3.0", "next": "14.1.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1954facb9..03dcf6dca 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ dependencies: '@heroicons/react': specifier: ^2.1.3 version: 2.1.3(react@18.2.0) + '@radix-ui/react-checkbox': + specifier: ^1.0.4 + version: 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0) clsx: specifier: ^2.1.0 version: 2.1.0 @@ -383,6 +386,198 @@ packages: dev: true optional: true + /@radix-ui/primitive@1.0.1: + resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==} + dependencies: + '@babel/runtime': 7.24.1 + dev: false + + /@radix-ui/react-checkbox@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.72)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.72)(react@18.2.0) + '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.72)(react@18.2.0) + '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.72)(react@18.2.0) + '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.72)(react@18.2.0) + '@types/react': 18.2.72 + '@types/react-dom': 18.2.22 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.72)(react@18.2.0): + resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@types/react': 18.2.72 + react: 18.2.0 + dev: false + + /@radix-ui/react-context@1.0.1(@types/react@18.2.72)(react@18.2.0): + resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@types/react': 18.2.72 + react: 18.2.0 + dev: false + + /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.72)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.72)(react@18.2.0) + '@types/react': 18.2.72 + '@types/react-dom': 18.2.22 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@radix-ui/react-slot': 1.0.2(@types/react@18.2.72)(react@18.2.0) + '@types/react': 18.2.72 + '@types/react-dom': 18.2.22 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@radix-ui/react-slot@1.0.2(@types/react@18.2.72)(react@18.2.0): + resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.72)(react@18.2.0) + '@types/react': 18.2.72 + react: 18.2.0 + dev: false + + /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.72)(react@18.2.0): + resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@types/react': 18.2.72 + react: 18.2.0 + dev: false + + /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.72)(react@18.2.0): + resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.72)(react@18.2.0) + '@types/react': 18.2.72 + react: 18.2.0 + dev: false + + /@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.72)(react@18.2.0): + resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@types/react': 18.2.72 + react: 18.2.0 + dev: false + + /@radix-ui/react-use-previous@1.0.1(@types/react@18.2.72)(react@18.2.0): + resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@types/react': 18.2.72 + react: 18.2.0 + dev: false + + /@radix-ui/react-use-size@1.0.1(@types/react@18.2.72)(react@18.2.0): + resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.72)(react@18.2.0) + '@types/react': 18.2.72 + react: 18.2.0 + dev: false + /@rushstack/eslint-patch@1.8.0: resolution: {integrity: sha512-0HejFckBN2W+ucM6cUOlwsByTKt9/+0tWhqUffNIcHqCXkthY/mZ7AuYPK/2IIaGWhdl0h+tICDO0ssLMd6XMQ==} dev: true @@ -444,20 +639,17 @@ packages: /@types/prop-types@15.7.12: resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==} - dev: true /@types/react-dom@18.2.22: resolution: {integrity: sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==} dependencies: '@types/react': 18.2.72 - dev: true /@types/react@18.2.72: resolution: {integrity: sha512-/e7GWxGzXQF7OJAua7UAYqYi/4VpXEfbGtmYQcAQwP3SjjjAXfybTf/JK5S+SaetB/ChXl8Y2g1hCsj7jDXxcg==} dependencies: '@types/prop-types': 15.7.12 csstype: 3.1.3 - dev: true /@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.3): resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==} @@ -970,7 +1162,6 @@ packages: /csstype@3.1.3: resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} - dev: true /damerau-levenshtein@1.0.8: resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}