mirror of
https://github.com/hanzo-apps/cms.git
synced 2026-10-30 14:47:33 +00:00
zeekay
09c5e16c5c
- payload -> @hanzo/cms (core), bin payload -> hanzo-cms - create-payload-app -> @hanzo/create-cms-app - @payloadcms/<x> -> @hanzo/cms-<x> across the whole dependency graph - 3545 files, 72 package.json, 4419 scoped refs, 3852 core import specifiers, 82 scss imports - MIT attribution to Payload CMS Inc. preserved (LICENSE.md, author emails) Upstream: github.com/payloadcms/payload @ v3.85.2 (MIT)
73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
'use client'
|
|
import { Product as ProductType } from '@payload-types'
|
|
import { useCart, useCurrency } from '@hanzo/cms-plugin-ecommerce/react'
|
|
import React from 'react'
|
|
|
|
type Props = {
|
|
product: ProductType
|
|
}
|
|
|
|
export const Product: React.FC<Props> = ({ product }) => {
|
|
const { addItem, removeItem } = useCart()
|
|
const { formatCurrency, currency } = useCurrency()
|
|
|
|
const pricePath = `priceIn${currency.code.toUpperCase()}`
|
|
// @ts-expect-error
|
|
const productPrice = pricePath in product ? product[pricePath] : undefined
|
|
|
|
const hasVariants =
|
|
product.enableVariants && product.variants?.docs?.length && product.variants?.docs?.length > 0
|
|
|
|
return (
|
|
<div>
|
|
<h2>{product.name}</h2>
|
|
|
|
<div>Price: {formatCurrency(productPrice)}</div>
|
|
|
|
{!hasVariants && (
|
|
<div>
|
|
<button
|
|
onClick={() => {
|
|
addItem({
|
|
productID: product.id,
|
|
quantity: 1,
|
|
product: product,
|
|
})
|
|
}}
|
|
>
|
|
Add to cart
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{hasVariants &&
|
|
product.variants!.docs!.map((variant) => {
|
|
if (typeof variant === 'string') {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div key={variant.id}>
|
|
<div>{variant.title}</div>
|
|
<div>Price: {formatCurrency(variant.priceInUSD)}</div>
|
|
|
|
<button
|
|
onClick={() => {
|
|
addItem({
|
|
productID: product.id,
|
|
variantID: variant.id,
|
|
quantity: 1,
|
|
variant: variant,
|
|
product: product,
|
|
})
|
|
}}
|
|
>
|
|
Add to cart
|
|
</button>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|