@graphcommerce/magento-product 8.1.0-canary.3 → 8.1.0-canary.5

package/components/ProductCustomizable/CustomizableFieldOption.tsx

@@ -1,3 +1,4 @@
+import { Money } from '@graphcommerce/magento-store'
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { SectionHeader } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
@@ -10,10 +11,12 @@ type CustomizableFieldOptionProps = React.ComponentProps<
 >
 
 export function CustomizableFieldOption(props: CustomizableFieldOptionProps) {
-  const { uid, required, optionIndex, index, title, fieldValue } = props
-  const { control, register } = useFormAddProductsToCart()
+  const { uid, required, optionIndex, index, title, fieldValue, productPrice, currency } = props
+  const { control, register, resetField, getValues } = useFormAddProductsToCart()
 
-  const maxLength = fieldValue?.max_characters ?? 0
+  if (!fieldValue) return null
+
+  const maxLength = fieldValue.max_characters ?? 0
   return (
     <Box>
       <SectionHeader labelLeft={title} sx={{ mt: 0 }} />
@@ -29,7 +32,36 @@ export function CustomizableFieldOption(props: CustomizableFieldOptionProps) {
         control={control}
         name={`cartItems.${index}.entered_options.${optionIndex}.value`}
         required={Boolean(required)}
-        validation={{
+        InputProps={{
+          endAdornment:
+            fieldValue.price === 0
+              ? null
+              : fieldValue.price && (
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      typography: 'body1',
+                      '&.sizeMedium': { typographty: 'subtitle1' },
+                      '&.sizeLarge': { typography: 'h6' },
+                      color: getValues(`cartItems.${index}.entered_options.${optionIndex}.value`)
+                        ? 'text.primary'
+                        : 'text.secondary',
+                    }}
+                  >
+                    {/* Change fontFamily so the + is properly outlined */}
+                    <span style={{ fontFamily: 'arial', paddingTop: '1px' }}>+{'\u00A0'}</span>
+                    <Money
+                      value={
+                        fieldValue.price_type === 'PERCENT'
+                          ? productPrice * (fieldValue.price / 100)
+                          : fieldValue.price
+                      }
+                      currency={currency}
+                    />
+                  </Box>
+                ),
+        }}
+        rules={{
           maxLength: {
             value: maxLength,
             message: i18n._(/* i18n*/ 'There is a maximum of ‘{maxLength}’ characters', {
@@ -43,6 +75,10 @@ export function CustomizableFieldOption(props: CustomizableFieldOptionProps) {
             maxLength,
           })
         }
+        onChange={(data) => {
+          if (!data.currentTarget.value)
+            resetField(`cartItems.${index}.entered_options.${optionIndex}.value`)
+        }}
       />
     </Box>
   )

package/components/ProductFiltersPro/ProductFiltersPro.tsx

@@ -1,14 +1,15 @@
 import { useForm, UseFormProps, UseFormReturn } from '@graphcommerce/ecommerce-ui'
-import { useMemoObject } from '@graphcommerce/next-ui'
-import { useEventCallback } from '@mui/material'
-import React, { BaseSyntheticEvent, createContext, useContext, useMemo } from 'react'
-import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
+import { useMatchMediaMotionValue, useMemoObject } from '@graphcommerce/next-ui'
+import { useEventCallback, useTheme } from '@mui/material'
+import { m, useTransform } from 'framer-motion'
+import { useRouter } from 'next/router'
+import React, { BaseSyntheticEvent, createContext, useContext, useMemo, useRef } from 'react'
+import { productListLinkFromFilter } from '../../hooks/useProductListLink'
 import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
 import {
   ProductFilterParams,
   ProductListParams,
   toFilterParams,
-  toProductListParams,
 } from '../ProductListItems/filterTypes'
 
 type DataProps = {
@@ -44,17 +45,31 @@ export type FilterFormProviderProps = Omit<
   params: ProductListParams
 } & DataProps
 
+const isSidebar = import.meta.graphCommerce.productFiltersLayout === 'SIDEBAR'
+
 export function ProductFiltersPro(props: FilterFormProviderProps) {
   const { children, params, aggregations, appliedAggregations, filterTypes, ...formProps } = props
 
   const defaultValues = useMemoObject(toFilterParams(params))
   const form = useForm<ProductFilterParams>({ defaultValues, ...formProps })
+  const ref = useRef<HTMLFormElement>(null)
+
+  const router = useRouter()
+  const theme = useTheme()
+  const isDesktop = useMatchMediaMotionValue('up', 'md')
+  const scrollMarginTop = useTransform(() => (isDesktop.get() ? 0 : theme.appShell.headerHeightSm))
+  const scroll = useTransform(() => !isSidebar || isDesktop.get())
 
-  const push = useProductListLinkReplace({ scroll: false })
   const submit = useEventCallback(
-    form.handleSubmit(async (formValues) =>
-      push({ ...toProductListParams(formValues), currentPage: 1 }),
-    ),
+    form.handleSubmit(async (formValues) => {
+      const path = productListLinkFromFilter({ ...formValues, currentPage: 1 })
+      if (router.asPath === path) return false
+
+      const opts = { scroll: scroll.get() }
+      return (router.query.url ?? []).includes('q')
+        ? router.replace(path, path, opts)
+        : router.push(path, path, opts)
+    }),
   )
 
   const filterFormContext: FilterFormContextProps = useMemo(
@@ -71,7 +86,7 @@ export function ProductFiltersPro(props: FilterFormProviderProps) {
 
   return (
     <FilterFormContext.Provider value={filterFormContext}>
-      <form noValidate onSubmit={submit} id='products' />
+      <m.form ref={ref} noValidate onSubmit={submit} id='products' style={{ scrollMarginTop }} />
       {children}
     </FilterFormContext.Provider>
   )

package/components/ProductFiltersPro/ProductFiltersProAllFiltersChip.tsx

@@ -29,7 +29,7 @@ const defaultRenderer = {
 }
 
 export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFiltersChipProps) {
-  const { sort_fields, total_count, renderer, ...rest } = props
+  const { sort_fields, total_count, renderer, category, ...rest } = props
 
   const { submit, params, aggregations, appliedAggregations } = useProductFiltersPro()
   const { sort } = params
@@ -59,7 +59,11 @@ export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFilte
     >
       {() => (
         <>
-          <ProductFiltersProSortSection sort_fields={sort_fields} total_count={total_count} />
+          <ProductFiltersProSortSection
+            sort_fields={sort_fields}
+            total_count={total_count}
+            category={category}
+          />
           <ProductFiltersProLimitSection />
           <ProductFiltersProAggregations renderer={{ ...defaultRenderer, ...renderer }} />
         </>

package/components/ProductFiltersPro/ProductFiltersProAllFiltersSidebar.tsx

@@ -20,11 +20,15 @@ const defaultRenderer = {
 }
 
 export function ProductFiltersProAllFiltersSidebar(props: ProductFiltersProAllFiltersSidebarProps) {
-  const { sort_fields, total_count, renderer, sx = [] } = props
+  const { sort_fields, total_count, renderer, sx = [], category } = props
 
   return (
     <Box sx={[{ display: { xs: 'none', md: 'grid' } }, ...(Array.isArray(sx) ? sx : [sx])]}>
-      <ProductFiltersProSortSection sort_fields={sort_fields} total_count={total_count} />
+      <ProductFiltersProSortSection
+        sort_fields={sort_fields}
+        total_count={total_count}
+        category={category}
+      />
       <ProductFiltersProLimitSection />
       <ProductFiltersProAggregations renderer={{ ...defaultRenderer, ...renderer }} />
     </Box>

package/components/ProductFiltersPro/ProductFiltersProSortChip.tsx

@@ -1,53 +1,34 @@
-import { useWatch } from '@graphcommerce/ecommerce-ui'
-import { useQuery } from '@graphcommerce/graphql'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import {
   ActionCard,
   ActionCardListForm,
   ChipOverlayOrPopper,
   ChipOverlayOrPopperProps,
-  filterNonNullableKeys,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { useMemo } from 'react'
-import { ProductListSortFragment } from '../ProductListSort/ProductListSort.gql'
 import { useProductFiltersPro } from './ProductFiltersPro'
+import { UseProductFiltersProSortProps, useProductFiltersProSort } from './useProductFiltersProSort'
 
-export type ProductListActionSortProps = ProductListSortFragment &
+export type ProductListActionSortProps = UseProductFiltersProSortProps &
   Omit<
     ChipOverlayOrPopperProps,
     'label' | 'selected' | 'selectedLabel' | 'onApply' | 'onReset' | 'onClose' | 'children'
   >
 
 export function ProductFiltersProSortChip(props: ProductListActionSortProps) {
-  const { sort_fields, chipProps, ...rest } = props
-  const { params, form, submit } = useProductFiltersPro()
-  const { control } = form
-  const activeSort = useWatch({ control, name: 'sort' })
-
-  const { data: storeConfigQuery } = useQuery(StoreConfigDocument)
-  const defaultSort = storeConfigQuery?.storeConfig?.catalog_default_sort_by
-
-  const options = useMemo(
-    () =>
-      filterNonNullableKeys(sort_fields?.options, ['value', 'label']).map((option) => ({
-        ...option,
-        value: option.value === defaultSort ? null : option.value,
-        title: option.label,
-      })),
-    [defaultSort, sort_fields?.options],
-  )
+  const { sort_fields, chipProps, category, ...rest } = props
+  const { submit, form } = useProductFiltersPro()
+  const { options, showReset, selected, selectedLabel } = useProductFiltersProSort(props)
 
   return (
     <ChipOverlayOrPopper
       {...rest}
       overlayProps={{ sizeSm: 'minimal', sizeMd: 'minimal', ...rest.overlayProps }}
       label={<Trans id='Sort By' />}
-      selected={Boolean(params.sort)}
-      selectedLabel={options.find((option) => option.value === params.sort)?.label}
+      selected={selected}
+      selectedLabel={selectedLabel}
       onApply={submit}
       onReset={
-        activeSort
+        showReset
           ? () => {
               form.setValue('sort', null)
               form.setValue('dir', null)
@@ -60,7 +41,7 @@ export function ProductFiltersProSortChip(props: ProductListActionSortProps) {
     >
       {() => (
         <ActionCardListForm
-          control={control}
+          control={form.control}
           name='sort'
           layout='list'
           variant='default'

package/components/ProductFiltersPro/ProductFiltersProSortDirectionArrow.tsx

@@ -0,0 +1,17 @@
+import { SortEnum } from '@graphcommerce/graphql-mesh'
+import { IconSvg } from '@graphcommerce/next-ui'
+import * as IconArrowDown from '@graphcommerce/next-ui/icons/arrow-down.svg'
+import * as IconArrowUp from '@graphcommerce/next-ui/icons/arrow-up.svg'
+
+type Props = {
+  sortDirection: SortEnum | null
+}
+
+export function ProductFiltersProSortDirectionArrow({ sortDirection }: Props) {
+  return (
+    <IconSvg
+      src={sortDirection === 'ASC' || sortDirection === null ? IconArrowUp : IconArrowDown}
+      sx={{ display: 'flex' }}
+    />
+  )
+}

package/components/ProductFiltersPro/ProductFiltersProSortSection.tsx

@@ -1,46 +1,21 @@
-import { useWatch } from '@graphcommerce/ecommerce-ui'
-import { useQuery } from '@graphcommerce/graphql'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import {
-  ActionCard,
-  ActionCardAccordion,
-  ActionCardListForm,
-  Button,
-  filterNonNullableKeys,
-} from '@graphcommerce/next-ui'
+import { ActionCard, ActionCardAccordion, ActionCardListForm, Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { useMemo } from 'react'
-import { ProductListSortFragment } from '../ProductListSort/ProductListSort.gql'
 import { useProductFiltersPro } from './ProductFiltersPro'
+import { UseProductFiltersProSortProps, useProductFiltersProSort } from './useProductFiltersProSort'
 
-export type ProductFiltersProSortSectionProps = ProductListSortFragment
+export type ProductFiltersProSortSectionProps = UseProductFiltersProSortProps
 
 export function ProductFiltersProSortSection(props: ProductFiltersProSortSectionProps) {
-  const { sort_fields } = props
   const { form } = useProductFiltersPro()
-  const { control } = form
-  const activeSort = useWatch({ control, name: 'sort' })
-
-  const { data: storeConfigQuery } = useQuery(StoreConfigDocument)
-  const defaultSort = storeConfigQuery?.storeConfig?.catalog_default_sort_by
-
-  const options = useMemo(
-    () =>
-      filterNonNullableKeys(sort_fields?.options, ['value', 'label']).map((option) => ({
-        ...option,
-        value: option.value === defaultSort ? null : option.value,
-        title: option.label,
-      })),
-    [defaultSort, sort_fields?.options],
-  )
+  const { options, showReset, selected } = useProductFiltersProSort(props)
 
   return (
     <ActionCardAccordion
-      defaultExpanded={!!activeSort}
+      defaultExpanded={selected}
       summary={<Trans id='Sort By' />}
       details={
         <ActionCardListForm
-          control={control}
+          control={form.control}
           name='sort'
           layout='list'
           variant='default'
@@ -50,7 +25,7 @@ export function ProductFiltersProSortSection(props: ProductFiltersProSortSection
         />
       }
       right={
-        activeSort ? (
+        showReset ? (
           <Button
             color='primary'
             onClick={(e) => {

package/components/ProductFiltersPro/useProductFiltersProSort.tsx

@@ -0,0 +1,74 @@
+import { useWatch } from '@graphcommerce/ecommerce-ui'
+import { useQuery } from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { i18n } from '@lingui/core'
+import { useMemo } from 'react'
+import { CategoryDefaultFragment } from '../ProductListItems/CategoryDefault.gql'
+import { ProductFilterParams } from '../ProductListItems/filterTypes'
+import { ProductListSortFragment } from '../ProductListSort'
+import { useProductFiltersPro } from './ProductFiltersPro'
+import type { ProductListActionSortProps } from './ProductFiltersProSortChip'
+import { ProductFiltersProSortDirectionArrow } from './ProductFiltersProSortDirectionArrow'
+
+const exclude = ['relevance', 'position']
+
+export type UseProductFiltersProSortProps = ProductListSortFragment & {
+  category?: CategoryDefaultFragment
+}
+
+export function useProductFiltersProSort(props: ProductListActionSortProps) {
+  const { sort_fields, category } = props
+
+  const { params, form } = useProductFiltersPro()
+  const { control, setValue } = form
+
+  const sortFields = useMemo(
+    () =>
+      filterNonNullableKeys(sort_fields?.options).map((o) =>
+        !category?.uid && o.value === 'position'
+          ? { value: 'relevance', label: i18n._('Relevance') }
+          : o,
+      ),
+    [category?.uid, sort_fields?.options],
+  )
+  const availableSortBy = category?.available_sort_by ?? sortFields.map((o) => o.value)
+
+  const conf = useQuery(StoreConfigDocument).data?.storeConfig
+  const defaultSortBy = (
+    category ? category.default_sort_by ?? conf?.catalog_default_sort_by ?? 'position' : 'relevance'
+  ) as ProductFilterParams['sort']
+
+  const formSort = useWatch({ control, name: 'sort' })
+  const formDirection = useWatch({ control, name: 'dir' })
+  const showReset = Boolean(formSort !== defaultSortBy || formDirection === 'DESC')
+  const selected = Boolean(params.sort && (params.sort !== defaultSortBy || params.dir === 'DESC'))
+
+  const options = useMemo(
+    () =>
+      sortFields
+        .filter((o) => availableSortBy.includes(o.value))
+        .map((option) => {
+          const value = option.value === defaultSortBy ? null : option.value
+          const showSort = formSort === value && !exclude.includes(option.value)
+
+          return {
+            ...option,
+            value,
+            title: option.label,
+            ...(showSort && {
+              onClick: () => setValue('dir', formDirection === 'DESC' ? null : 'DESC'),
+              price: <ProductFiltersProSortDirectionArrow sortDirection={formDirection} />,
+            }),
+          }
+        }),
+    [sortFields, availableSortBy, defaultSortBy, formSort, formDirection, setValue],
+  )
+
+  return {
+    options,
+    selected,
+    showReset,
+    selectedLabel: options.find((option) => option.value === params.sort)?.label,
+  }
+}

package/components/ProductListItems/CategoryDefault.graphql

@@ -0,0 +1,5 @@
+fragment CategoryDefault on CategoryInterface {
+  uid
+  default_sort_by
+  available_sort_by
+}

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -1,7 +1,7 @@
 import { LazyHydrate, RenderType, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
 import { Box, BoxProps } from '@mui/material'
 import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
-import { AddProductsToCartForm } from '../../index'
+import { AddProductsToCartForm } from '../AddProductsToCart'
 import { ProductListItemProps } from '../ProductListItem/ProductListItem'
 import { ProductListItemRenderer } from './renderer'
 

package/components/ProductListItems/filterTypes.tsx

@@ -31,7 +31,7 @@ export type ProductFilterParams = {
 
 export function toFilterParams(params: ProductListParams): ProductFilterParams {
   const [sortKey] = Object.keys(params.sort) as [keyof ProductAttributeSortInput]
-  const dir = params.sort[sortKey] as SortEnum | undefined
+  const dir = params.sort[sortKey]?.toUpperCase() as SortEnum | undefined
 
   return {
     ...params,

package/components/ProductListItems/filteredProductList.tsx

@@ -35,7 +35,7 @@ export function parseParams(
     }
     if (param === 'dir') {
       const [sortBy] = Object.keys(categoryVariables.sort)
-      if (sortBy) categoryVariables.sort[sortBy] = value as SortEnum
+      if (sortBy) categoryVariables.sort[sortBy] = value?.toUpperCase() as SortEnum
       return undefined
     }
 

package/components/ProductListItems/productListApplyCategoryDefaults.ts

@@ -0,0 +1,28 @@
+import { StoreConfigQuery } from '@graphcommerce/magento-store'
+import { CategoryDefaultFragment } from './CategoryDefault.gql'
+import { ProductListParams } from './filterTypes'
+import { cloneDeep } from '@graphcommerce/graphql'
+
+export async function productListApplyCategoryDefaults(
+  params: ProductListParams | undefined,
+  conf: StoreConfigQuery,
+  category: Promise<CategoryDefaultFragment | null | undefined>,
+) {
+  if (!params) return params
+
+  const newParams = cloneDeep(params)
+  if (!newParams.pageSize) newParams.pageSize = conf.storeConfig?.grid_per_page ?? 12
+
+  if (Object.keys(params.sort).length === 0) {
+    const categorySort = (await category)?.default_sort_by as keyof ProductListParams['sort']
+    const defaultSort = conf.storeConfig?.catalog_default_sort_by as keyof ProductListParams['sort']
+    if (categorySort) newParams.sort = { [categorySort]: 'ASC' }
+    else if (defaultSort) newParams.sort = { [defaultSort]: 'ASC' }
+  }
+
+  if (!newParams.filters.category_uid?.in?.[0]) {
+    newParams.filters.category_uid = { eq: (await category)?.uid }
+  }
+
+  return newParams
+}

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.tsx

@@ -32,9 +32,11 @@ export function ProductPageBreadcrumb(props: ProductPageBreadcrumbsProps) {
             {breadcrumb.category_name}
           </Link>
         ))}
-      <Link href={`/${category?.url_path}`} underline='hover' color='inherit'>
-        {category?.name}
-      </Link>
+      {category && (
+        <Link href={`/${category?.url_path}`} underline='hover' color='inherit'>
+          {category?.name}
+        </Link>
+      )}
       <Typography color='text.primary'>{name}</Typography>
     </Breadcrumbs>
   )

package/components/ProductPagePrice/ProductPagePrice.graphql

@@ -1,4 +1,5 @@
 fragment ProductPagePrice on ProductInterface {
+  __typename
   url_key
   price_range {
     minimum_price {
@@ -30,4 +31,6 @@ fragment ProductPagePrice on ProductInterface {
     }
     quantity
   }
+
+  ...ProductCustomizable
 }

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,127 @@
+import { useWatch } from '@graphcommerce/ecommerce-ui'
+import { PriceTypeEnum } from '@graphcommerce/graphql-mesh'
+import { MoneyFragment } from '@graphcommerce/magento-store'
+import { filterNonNullableKeys, isTypename, nonNullable } from '@graphcommerce/next-ui'
+import type { Simplify } from 'type-fest'
+import { AddToCartItemSelector, useFormAddProductsToCart } from '../AddProductsToCart'
+import type { CustomizableAreaOptionFragment } from '../ProductCustomizable/CustomizableAreaOption.gql'
+import type { CustomizableCheckboxOptionFragment } from '../ProductCustomizable/CustomizableCheckboxOption.gql'
+import type { CustomizableDateOptionFragment } from '../ProductCustomizable/CustomizableDateOption.gql'
+import type { CustomizableDropDownOptionFragment } from '../ProductCustomizable/CustomizableDropDownOption.gql'
+import type { CustomizableFieldOptionFragment } from '../ProductCustomizable/CustomizableFieldOption.gql'
+import type { CustomizableFileOptionFragment } from '../ProductCustomizable/CustomizableFileOption.gql'
+import type { CustomizableMultipleOptionFragment } from '../ProductCustomizable/CustomizableMultipleOption.gql'
+import { CustomizableRadioOptionFragment } from '../ProductCustomizable/CustomizableRadioOption.gql'
+import { ProductCustomizable_SimpleProduct_Fragment } from '../ProductCustomizable/ProductCustomizable.gql'
+import { ProductPagePriceFragment } from './ProductPagePrice.gql'
+import { getProductTierPrice } from './getProductTierPrice'
+
+type AnyOption = NonNullable<
+  NonNullable<ProductCustomizable_SimpleProduct_Fragment['options']>[number]
+>
+type OptionValueSelector = {
+  [T in AnyOption as T['__typename']]: (option: T) => Option | Option[]
+}
+
+const defaultSelectors = {
+  CustomizableAreaOption: (o: CustomizableAreaOptionFragment) => o.areaValue,
+  CustomizableCheckboxOption: (o: CustomizableCheckboxOptionFragment) => o.checkboxValue,
+  CustomizableFileOption: (o: CustomizableFileOptionFragment) => o.fileValue,
+  CustomizableDateOption: (o: CustomizableDateOptionFragment) => o.dateValue,
+  CustomizableDropDownOption: (o: CustomizableDropDownOptionFragment) => o.dropdownValue,
+  CustomizableFieldOption: (o: CustomizableFieldOptionFragment) => o.fieldValue,
+  CustomizableMultipleOption: (o: CustomizableMultipleOptionFragment) => o.multipleValue,
+  CustomizableRadioOption: (o: CustomizableRadioOptionFragment) => o.radioValue,
+}
+
+type MissingOptionValueSelectors = Omit<OptionValueSelector, keyof typeof defaultSelectors>
+type DefinedOptionValueSelectors = Partial<Pick<OptionValueSelector, keyof typeof defaultSelectors>>
+
+type Selectors = Simplify<
+  keyof MissingOptionValueSelectors extends never
+    ? (MissingOptionValueSelectors & DefinedOptionValueSelectors) | undefined
+    : MissingOptionValueSelectors & DefinedOptionValueSelectors
+>
+
+export type UseCustomizableOptionPriceProps = {
+  product: ProductPagePriceFragment
+} & AddToCartItemSelector &
+  (keyof MissingOptionValueSelectors extends never
+    ? { selectors?: Selectors }
+    : { selectors: Selectors })
+
+type Option =
+  | {
+      price?: number | null | undefined
+      price_type?: PriceTypeEnum | null | undefined
+      uid?: string | null | undefined
+    }
+  | undefined
+  | null
+
+function calcOptionPrice(option: Option, 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 = { ...defaultSelectors, ...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) => Option | Option[])
+    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
+}