@graphcommerce/magento-product 8.1.0-canary.2 → 8.1.0-canary.22

package/components/ProductPagePrice/ProductPagePrice.tsx

@@ -1,12 +1,17 @@
 import { useWatch } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
+import { extendableComponent } from '@graphcommerce/next-ui'
+import { Box } from '@mui/material'
 import { AddToCartItemSelector, useFormAddProductsToCart } from '../AddProductsToCart'
 import { ProductPagePriceFragment } from './ProductPagePrice.gql'
 import { getProductTierPrice } from './getProductTierPrice'
-import { extendableComponent } from '@graphcommerce/next-ui'
-import { Box } from '@mui/material'
+import {
+  UseCustomizableOptionPriceProps,
+  useCustomizableOptionPrice,
+} from './useCustomizableOptionPrice'
 
-export type ProductPagePriceProps = { product: ProductPagePriceFragment } & AddToCartItemSelector
+export type ProductPagePriceProps = { product: ProductPagePriceFragment } & AddToCartItemSelector &
+  UseCustomizableOptionPriceProps
 
 const { classes } = extendableComponent('ProductPagePrice', ['root', 'discountPrice'] as const)
 
@@ -18,6 +23,8 @@ export function ProductPagePrice(props: ProductPagePriceProps) {
   const price =
     getProductTierPrice(product, quantity) ?? product.price_range.minimum_price.final_price
 
+  const priceValue = useCustomizableOptionPrice(props)
+
   return (
     <>
       {product.price_range.minimum_price.regular_price.value !== price.value && (
@@ -33,7 +40,7 @@ export function ProductPagePrice(props: ProductPagePriceProps) {
           <Money {...product.price_range.minimum_price.regular_price} />
         </Box>
       )}
-      <Money {...price} />
+      <Money {...price} value={priceValue} />
     </>
   )
 }

package/components/ProductPagePrice/useCustomizableOptionPrice.ts

@@ -0,0 +1,85 @@
+import { useWatch } from '@graphcommerce/ecommerce-ui'
+import { MoneyFragment } from '@graphcommerce/magento-store'
+import { filterNonNullableKeys, isTypename, nonNullable } from '@graphcommerce/next-ui'
+import { AddToCartItemSelector, useFormAddProductsToCart } from '../AddProductsToCart'
+import {
+  productCustomizableSelectors,
+  CustomizableProductOptionBase,
+  OptionValueSelector,
+  AnyOption,
+  SelectorsProp,
+} from '../ProductCustomizable/productCustomizableSelectors'
+import { ProductPagePriceFragment } from './ProductPagePrice.gql'
+import { getProductTierPrice } from './getProductTierPrice'
+
+export type UseCustomizableOptionPriceProps = {
+  product: ProductPagePriceFragment
+} & AddToCartItemSelector &
+  SelectorsProp
+
+function calcOptionPrice(option: CustomizableProductOptionBase, product: MoneyFragment) {
+  if (!option?.price) return 0
+  switch (option.price_type) {
+    case 'DYNAMIC':
+    case 'FIXED':
+      return option.price
+    case 'PERCENT':
+      return (product?.value ?? 0) * (option.price / 100)
+  }
+
+  return 0
+}
+
+export function useCustomizableOptionPrice(props: UseCustomizableOptionPriceProps) {
+  const { product, selectors, index = 0 } = props
+
+  const { control } = useFormAddProductsToCart()
+  const cartItem = useWatch({ control, name: `cartItems.${index}` }) ?? {}
+  const price =
+    getProductTierPrice(product, cartItem?.quantity) ??
+    product.price_range.minimum_price.final_price
+
+  const allSelectors: OptionValueSelector = { ...productCustomizableSelectors, ...selectors }
+
+  if (isTypename(product, ['GroupedProduct'])) return price.value
+  if (!product.options || product.options.length === 0) return price.value
+
+  const finalPrice = product.options.filter(nonNullable).reduce((optionPrice, productOption) => {
+    const isCustomizable = Boolean(cartItem.customizable_options?.[productOption.uid])
+    const isEntered = Boolean(
+      cartItem.entered_options?.find((o) => productOption.uid && o?.uid && o?.value),
+    )
+    if (!isCustomizable && !isEntered) return optionPrice
+
+    const selector = allSelectors[productOption.__typename] as
+      | undefined
+      | ((option: AnyOption) => CustomizableProductOptionBase | CustomizableProductOptionBase[])
+    const value = selector ? selector(productOption) : null
+
+    if (!value) return 0
+
+    // If the option can have multiple values
+    if (Array.isArray(value)) {
+      return (
+        optionPrice +
+        filterNonNullableKeys(value)
+          .filter(
+            (v) =>
+              cartItem.customizable_options?.[productOption.uid] &&
+              cartItem.customizable_options?.[productOption.uid].includes(v.uid),
+          )
+          .reduce((p, v) => p + calcOptionPrice(v, price), 0)
+      )
+    }
+
+    // If the option can have a single value entered.
+    if (
+      cartItem.entered_options?.filter((v) => v?.uid === productOption.uid && v.value).length !== 0
+    )
+      return optionPrice + calcOptionPrice(value, price)
+
+    return optionPrice
+  }, price.value ?? 0)
+
+  return finalPrice
+}

package/components/ProductShortDescription/ProductShortDescription.tsx

@@ -13,6 +13,8 @@ export function ProductShortDescription(props: ProductShortDescriptionProps) {
   const { product, sx = [] } = props
   const { short_description } = product
 
+  if (!short_description?.html) return null
+
   return (
     <Typography
       variant='body1'

package/components/ProductStaticPaths/getProductStaticPaths.ts

@@ -11,7 +11,7 @@ export type ProductTypenames = NonNullable<
 export async function getProductStaticPaths(
   client: ApolloClient<NormalizedCacheObject>,
   locale: string,
-  typename?: ProductTypenames,
+  options: { limit?: boolean } = { limit: import.meta.graphCommerce.limitSsg || false },
 ) {
   const query = client.query({
     query: ProductStaticPathsDocument,
@@ -36,8 +36,7 @@ export async function getProductStaticPaths(
   const paths: Return['paths'] = (await Promise.all(pages))
     .map((q) => q.data.products?.items)
     .flat(1)
-    .filter((item) => (typename ? item?.__typename === typename : true))
     .map((p) => ({ params: { url: `${p?.url_key}` }, locale }))
 
-  return import.meta.graphCommerce.limitSsg ? paths.slice(0, 1) : paths
+  return options.limit ? paths.slice(0, 1) : paths
 }

package/components/ProductStaticPaths/getSitemapPaths.ts

@@ -3,6 +3,9 @@ import { canonicalize, nonNullable } from '@graphcommerce/next-ui'
 import { productLink } from '../../hooks/useProductLink'
 import { ProductStaticPathsDocument } from './ProductStaticPaths.gql'
 
+/**
+ * @deprecated Not used anymore, use `getProductStaticPaths` instead.
+ */
 export async function getSitemapPaths(
   client: ApolloClient<NormalizedCacheObject>,
   ctx: { locale?: string; defaultLocale?: string },

package/components/index.ts

@@ -13,6 +13,8 @@ export * from './ProductListItems/filterTypes'
 export * from './ProductListItems/getFilterTypes'
 export * from './ProductListItems/ProductListItems.gql'
 export * from './ProductListItems/ProductListItemsBase'
+export * from './ProductListItems/productListApplyCategoryDefaults'
+export * from './ProductListItems/CategoryDefault.gql'
 export * from './ProductListItems/ProductListParamsProvider'
 export * from './ProductListItems/renderer'
 export * from './ProductListLink/ProductListLink'

package/hooks/useProductListLink.ts

@@ -2,11 +2,13 @@ import {
   isFilterTypeEqual,
   isFilterTypeMatch,
   isFilterTypeRange,
+  ProductFilterParams,
   ProductListParams,
+  toFilterParams,
 } from '../components/ProductListItems/filterTypes'
 
-export function productListLink(props: ProductListParams): string {
-  const { url, sort, currentPage, pageSize, filters: incoming } = props
+export function productListLinkFromFilter(props: ProductFilterParams): string {
+  const { url, sort, dir, currentPage, pageSize, filters: incoming } = props
   const isSearch = url.startsWith('search')
   const filters = isSearch ? incoming : { ...incoming, category_uid: undefined }
   const uid = incoming?.category_uid?.eq || incoming?.category_uid?.in?.[0]
@@ -19,9 +21,8 @@ export function productListLink(props: ProductListParams): string {
 
   // todo(paales): How should the URL look like with multiple sorts?
   // Something like: /sort/position,price/dir/asc,asc
-  const [sortBy] = Object.keys(sort)
-  if (sort && sortBy) query += `/sort/${sortBy}`
-  if (sort && sortBy && sort[sortBy] && sort[sortBy] === 'DESC') query += `/dir/desc`
+  if (sort) query += `/sort/${sort}`
+  if (dir) query += `/dir/desc`
   if (pageSize) query += `/page-size/${pageSize}`
 
   // Apply filters
@@ -42,6 +43,10 @@ export function productListLink(props: ProductListParams): string {
   return query ? `/${url}${paginateSort}/q${query}` : `/${url}${paginateSort}`
 }
 
+export function productListLink(props: ProductListParams): string {
+  return productListLinkFromFilter(toFilterParams(props))
+}
+
 export function useProductListLink(props: ProductListParams): string {
   return productListLink({ ...props, url: `${props.url}` })
 }

package/hooks/useProductListLinkReplace.ts

@@ -9,6 +9,9 @@ type UseProductLinkPushProps = {
   scroll?: boolean
 }
 
+/**
+ * @deprecated replaced by custom function inside ProductFiltersPro
+ */
 export function useProductListLinkReplace(props?: UseProductLinkPushProps) {
   const { setParams } = useProductListParamsContext()
   const router = useRouter()

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.2",
+  "version": "8.1.0-canary.22",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,18 +18,18 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.1.0-canary.2",
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.2",
-    "@graphcommerce/framer-next-pages": "^8.1.0-canary.2",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.2",
-    "@graphcommerce/graphql": "^8.1.0-canary.2",
-    "@graphcommerce/graphql-mesh": "^8.1.0-canary.2",
-    "@graphcommerce/image": "^8.1.0-canary.2",
-    "@graphcommerce/magento-cart": "^8.1.0-canary.2",
-    "@graphcommerce/magento-store": "^8.1.0-canary.2",
-    "@graphcommerce/next-ui": "^8.1.0-canary.2",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.2",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.2",
+    "@graphcommerce/ecommerce-ui": "^8.1.0-canary.22",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.22",
+    "@graphcommerce/framer-next-pages": "^8.1.0-canary.22",
+    "@graphcommerce/framer-scroller": "^8.1.0-canary.22",
+    "@graphcommerce/graphql": "^8.1.0-canary.22",
+    "@graphcommerce/graphql-mesh": "^8.1.0-canary.22",
+    "@graphcommerce/image": "^8.1.0-canary.22",
+    "@graphcommerce/magento-cart": "^8.1.0-canary.22",
+    "@graphcommerce/magento-store": "^8.1.0-canary.22",
+    "@graphcommerce/next-ui": "^8.1.0-canary.22",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.22",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.22",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "exclude": ["**/node_modules", "**/.*/"],
   "include": ["**/*.ts", "**/*.tsx"],
-  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json",
 }