@graphcommerce/magento-product 9.0.0-canary.98 → 9.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +211 -1277
- package/components/AddProductsToCart/AddProductsToCartButton.tsx +4 -5
- package/components/AddProductsToCart/AddProductsToCartError.tsx +3 -2
- package/components/AddProductsToCart/AddProductsToCartFab.tsx +5 -6
- package/components/AddProductsToCart/AddProductsToCartForm.tsx +15 -19
- package/components/AddProductsToCart/AddProductsToCartQuantity.tsx +7 -5
- package/components/AddProductsToCart/AddProductsToCartSnackbar.tsx +2 -1
- package/components/AddProductsToCart/AddProductsToCartSnackbarMessage.tsx +5 -6
- package/components/AddProductsToCart/findAddedItems.ts +2 -2
- package/components/AddProductsToCart/toUserErrors.ts +2 -2
- package/components/AddProductsToCart/useAddProductsToCartAction.ts +4 -3
- package/components/AddProductsToCart/useFormAddProductsToCart.ts +3 -3
- package/components/JsonLdProduct/ProductPageJsonLd.tsx +1 -1
- package/components/JsonLdProduct/jsonLdProduct.tsx +2 -2
- package/components/ProductAddToCart/index.ts +0 -1
- package/components/ProductCustomizable/CustomizableAreaOption.tsx +5 -4
- package/components/ProductCustomizable/CustomizableCheckboxOption.tsx +4 -8
- package/components/ProductCustomizable/CustomizableDateOption.tsx +3 -3
- package/components/ProductCustomizable/CustomizableDropDownOption.tsx +6 -6
- package/components/ProductCustomizable/CustomizableFieldOption.tsx +3 -3
- package/components/ProductCustomizable/CustomizableMultipleOption.tsx +4 -8
- package/components/ProductCustomizable/CustomizableRadioOption.tsx +4 -8
- package/components/ProductCustomizable/ProductCustomizable.tsx +7 -6
- package/components/ProductFiltersPro/PriceSlider.tsx +4 -2
- package/components/ProductFiltersPro/ProductFilterEqualChip.tsx +1 -1
- package/components/ProductFiltersPro/ProductFilterEqualSection.tsx +1 -1
- package/components/ProductFiltersPro/ProductFilterRangeChip.tsx +1 -1
- package/components/ProductFiltersPro/ProductFiltersPro.tsx +10 -19
- package/components/ProductFiltersPro/ProductFiltersProAggregations.tsx +2 -2
- package/components/ProductFiltersPro/ProductFiltersProAllFiltersChip.tsx +7 -7
- package/components/ProductFiltersPro/ProductFiltersProAllFiltersSidebar.tsx +8 -15
- package/components/ProductFiltersPro/ProductFiltersProCategorySection.tsx +6 -8
- package/components/ProductFiltersPro/ProductFiltersProChips.tsx +4 -2
- package/components/ProductFiltersPro/ProductFiltersProClearAll.tsx +2 -2
- package/components/ProductFiltersPro/ProductFiltersProLayoutSidebar.tsx +8 -2
- package/components/ProductFiltersPro/ProductFiltersProLimitChip.tsx +4 -2
- package/components/ProductFiltersPro/ProductFiltersProLimitSection.tsx +3 -2
- package/components/ProductFiltersPro/ProductFiltersProNoResults.tsx +5 -4
- package/components/ProductFiltersPro/ProductFiltersProSortChip.tsx +4 -2
- package/components/ProductFiltersPro/ProductFiltersProSortDirectionArrow.tsx +5 -3
- package/components/ProductFiltersPro/ProductFiltersProSortSection.tsx +3 -2
- package/components/ProductFiltersPro/activeAggregations.ts +2 -2
- package/components/ProductFiltersPro/applyAggregationCount.ts +2 -2
- package/components/ProductFiltersPro/useProductFiltersProClearAllAction.ts +1 -1
- package/components/ProductFiltersPro/useProductFiltersProSort.tsx +3 -3
- package/components/ProductList/ProductList.graphql +4 -3
- package/components/ProductListCount/ProductListCount.tsx +3 -2
- package/components/ProductListFilters/FilterCheckboxType.tsx +5 -4
- package/components/ProductListFilters/FilterEqualType.tsx +7 -7
- package/components/ProductListFilters/FilterRangeType.tsx +4 -3
- package/components/ProductListFilters/ProductFilters.graphql +2 -2
- package/components/ProductListFilters/ProductListFilters.tsx +3 -3
- package/components/ProductListFiltersContainer/ProductListFiltersContainer.tsx +5 -4
- package/components/ProductListItem/ProductDiscountLabel.tsx +4 -3
- package/components/ProductListItem/ProductListItem.tsx +58 -31
- package/components/ProductListItem/ProductListItemImage.tsx +9 -7
- package/components/ProductListItem/ProductListItemImageContainer.tsx +9 -8
- package/components/ProductListItem/ProductListItemLinkOrDiv.tsx +13 -8
- package/components/ProductListItem/ProductListItemTitleAndPrice.tsx +4 -3
- package/components/ProductListItems/ProductListItemsBase.tsx +24 -18
- package/components/ProductListItems/ProductListParamsProvider.tsx +2 -2
- package/components/ProductListItems/filterTypes.tsx +4 -4
- package/components/ProductListItems/filteredProductList.tsx +2 -2
- package/components/ProductListItems/getFilterTypes.ts +2 -1
- package/components/ProductListItems/productListApplyCategoryDefaults.ts +5 -4
- package/components/ProductListItems/renderer.tsx +3 -2
- package/components/ProductListLink/ProductListLink.tsx +5 -3
- package/components/ProductListPagination/ProductListPagination.tsx +6 -5
- package/components/ProductListPrice/ProductListPrice.tsx +12 -7
- package/components/ProductListSort/ProductListSort.tsx +8 -6
- package/components/ProductListSuggestions/ProductListSearchSuggestion.graphql +3 -0
- package/components/ProductListSuggestions/ProductListSuggestions.graphql +1 -1
- package/components/ProductListSuggestions/ProductListSuggestions.tsx +2 -2
- package/components/ProductPage/ProductPageAddToCartRow.tsx +4 -3
- package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.tsx +6 -4
- package/components/ProductPageBreadcrumb/ProductPageBreadcrumbs.tsx +3 -3
- package/components/ProductPageCategory/productPageCategory.ts +1 -1
- package/components/ProductPageDescription/ProductPageDescription.tsx +7 -6
- package/components/ProductPageGallery/ProductPageGallery.tsx +3 -7
- package/components/ProductPageMeta/ProductPageMeta.tsx +2 -2
- package/components/ProductPageName/ProductPageName.tsx +2 -2
- package/components/ProductPagePrice/ProductPagePrice.tsx +10 -11
- package/components/ProductPagePrice/ProductPagePriceTiers.tsx +5 -5
- package/components/ProductPagePrice/getProductTierPrice.ts +2 -2
- package/components/ProductPagePrice/useCustomizableOptionPrice.ts +7 -6
- package/components/ProductScroller/ProductScroller.tsx +11 -16
- package/components/ProductShortDescription/ProductShortDescription.tsx +3 -2
- package/components/ProductSidebarDelivery/ProductSidebarDelivery.tsx +4 -4
- package/components/ProductSpecs/ProductSpecs.tsx +5 -4
- package/components/ProductSpecs/ProductSpecsAggregations.tsx +2 -2
- package/components/ProductSpecs/ProductSpecsCustomAttributes.tsx +3 -3
- package/components/ProductStaticPaths/getProductStaticPaths.ts +4 -3
- package/components/ProductStaticPaths/getSitemapPaths.ts +3 -2
- package/components/ProductWeight/ProductWeight.tsx +5 -7
- package/components/index.ts +5 -0
- package/context/productListParamsContext.ts +1 -1
- package/hooks/useProductLink.ts +6 -2
- package/hooks/useProductList.ts +14 -17
- package/hooks/useProductListLink.ts +7 -5
- package/hooks/useProductListLinkReplace.ts +1 -1
- package/package.json +15 -15
- package/test/productURL.fixture.ts +1 -1
- package/tsconfig.json +1 -1
- package/components/ProductAddToCart/ProductAddToCart.tsx +0 -139
- package/components/ProductPageGallery/ProductImage.tsx +0 -10
- package/components/ProductPageGallery/ProductVideo.tsx +0 -10
@@ -1,10 +1,9 @@
|
|
1
1
|
import { useCartEnabled } from '@graphcommerce/magento-cart'
|
2
|
-
import {
|
2
|
+
import type { ButtonProps } from '@graphcommerce/next-ui'
|
3
|
+
import { Button } from '@graphcommerce/next-ui'
|
3
4
|
import { Trans } from '@lingui/macro'
|
4
|
-
import {
|
5
|
-
|
6
|
-
UseAddProductsToCartActionProps,
|
7
|
-
} from './useAddProductsToCartAction'
|
5
|
+
import type { UseAddProductsToCartActionProps } from './useAddProductsToCartAction'
|
6
|
+
import { useAddProductsToCartAction } from './useAddProductsToCartAction'
|
8
7
|
|
9
8
|
export type AddProductsToCartButtonProps = UseAddProductsToCartActionProps &
|
10
9
|
Pick<
|
@@ -1,8 +1,9 @@
|
|
1
1
|
import { useFormState } from '@graphcommerce/ecommerce-ui'
|
2
2
|
import { FormHelperText } from '@mui/material'
|
3
|
-
import { AddToCartItemSelector
|
3
|
+
import type { AddToCartItemSelector } from './useFormAddProductsToCart'
|
4
|
+
import { useFormAddProductsToCart } from './useFormAddProductsToCart'
|
4
5
|
|
5
|
-
type AddProductsToCartErrorProps = {
|
6
|
+
export type AddProductsToCartErrorProps = {
|
6
7
|
children?: React.ReactNode
|
7
8
|
} & AddToCartItemSelector
|
8
9
|
|
@@ -1,11 +1,10 @@
|
|
1
1
|
import { useCartEnabled } from '@graphcommerce/magento-cart'
|
2
|
-
import {
|
2
|
+
import type { FabProps } from '@graphcommerce/next-ui'
|
3
|
+
import { Fab, iconCheckmark, iconShoppingBag } from '@graphcommerce/next-ui'
|
3
4
|
import { t } from '@lingui/macro'
|
4
|
-
import { SxProps, Theme } from '@mui/material'
|
5
|
-
import {
|
6
|
-
|
7
|
-
UseAddProductsToCartActionProps,
|
8
|
-
} from './useAddProductsToCartAction'
|
5
|
+
import type { SxProps, Theme } from '@mui/material'
|
6
|
+
import type { UseAddProductsToCartActionProps } from './useAddProductsToCartAction'
|
7
|
+
import { useAddProductsToCartAction } from './useAddProductsToCartAction'
|
9
8
|
|
10
9
|
export type AddProductsToCartFabProps = {
|
11
10
|
sx?: SxProps<Theme>
|
@@ -1,25 +1,21 @@
|
|
1
|
-
import { UseFormGraphQlOptions } from '@graphcommerce/ecommerce-ui'
|
2
|
-
import { ApolloQueryResult
|
3
|
-
import {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
} from '@graphcommerce/
|
8
|
-
import {
|
9
|
-
import { Box
|
1
|
+
import type { UseFormGraphQlOptions } from '@graphcommerce/ecommerce-ui'
|
2
|
+
import type { ApolloQueryResult } from '@graphcommerce/graphql'
|
3
|
+
import { useApolloClient } from '@graphcommerce/graphql'
|
4
|
+
import type { CrosssellsQuery } from '@graphcommerce/magento-cart'
|
5
|
+
import { CrosssellsDocument, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
|
6
|
+
import type { ErrorSnackbarProps, MessageSnackbarProps } from '@graphcommerce/next-ui'
|
7
|
+
import { nonNullable } from '@graphcommerce/next-ui'
|
8
|
+
import type { SxProps, Theme } from '@mui/material'
|
9
|
+
import { Box } from '@mui/material'
|
10
10
|
import { useRouter } from 'next/router'
|
11
11
|
import { useMemo, useRef } from 'react'
|
12
|
-
import {
|
13
|
-
import {
|
14
|
-
|
15
|
-
|
16
|
-
} from './AddProductsToCartSnackbar'
|
12
|
+
import type { AddProductsToCartMutation } from './AddProductsToCart.gql'
|
13
|
+
import { AddProductsToCartDocument } from './AddProductsToCart.gql'
|
14
|
+
import type { AddProductsToCartSnackbarProps } from './AddProductsToCartSnackbar'
|
15
|
+
import { AddProductsToCartSnackbar } from './AddProductsToCartSnackbar'
|
17
16
|
import { toUserErrors } from './toUserErrors'
|
18
|
-
import {
|
19
|
-
|
20
|
-
AddProductsToCartFields,
|
21
|
-
RedirectType,
|
22
|
-
} from './useFormAddProductsToCart'
|
17
|
+
import type { AddProductsToCartFields, RedirectType } from './useFormAddProductsToCart'
|
18
|
+
import { AddProductsToCartContext } from './useFormAddProductsToCart'
|
23
19
|
|
24
20
|
export type AddProductsToCartFormProps = {
|
25
21
|
children: React.ReactNode
|
@@ -1,9 +1,11 @@
|
|
1
|
-
import {
|
1
|
+
import type { NumberFieldElementProps } from '@graphcommerce/ecommerce-ui'
|
2
|
+
import { NumberFieldElement } from '@graphcommerce/ecommerce-ui'
|
2
3
|
import { i18n } from '@lingui/core'
|
3
|
-
import { AddProductsToCartMutationVariables } from './AddProductsToCart.gql'
|
4
|
-
import { AddToCartItemSelector
|
4
|
+
import type { AddProductsToCartMutationVariables } from './AddProductsToCart.gql'
|
5
|
+
import type { AddToCartItemSelector } from './useFormAddProductsToCart'
|
6
|
+
import { useFormAddProductsToCart } from './useFormAddProductsToCart'
|
5
7
|
|
6
|
-
type AddToCartQuantityProps = Omit<
|
8
|
+
export type AddToCartQuantityProps = Omit<
|
7
9
|
NumberFieldElementProps<AddProductsToCartMutationVariables>,
|
8
10
|
'error' | 'required' | 'inputProps' | 'helperText' | 'name' | 'control'
|
9
11
|
> &
|
@@ -18,13 +20,13 @@ export function AddProductsToCartQuantity(props: AddToCartQuantityProps) {
|
|
18
20
|
variant='outlined'
|
19
21
|
size='small'
|
20
22
|
color='primary'
|
21
|
-
{...props}
|
22
23
|
required
|
23
24
|
inputProps={{ min: 1, 'aria-label': i18n._(/* i18n */ 'Add to cart quantity') }}
|
24
25
|
defaultValue={1}
|
25
26
|
control={control}
|
26
27
|
aria-label={i18n._(/* i18n */ 'Add to cart quantity')}
|
27
28
|
name={`cartItems.${index}.quantity`}
|
29
|
+
{...props}
|
28
30
|
/>
|
29
31
|
)
|
30
32
|
}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { useFormState } from '@graphcommerce/ecommerce-ui'
|
2
|
-
import { ErrorSnackbarProps, MessageSnackbarProps
|
2
|
+
import type { ErrorSnackbarProps, MessageSnackbarProps } from '@graphcommerce/next-ui'
|
3
|
+
import { nonNullable } from '@graphcommerce/next-ui'
|
3
4
|
import { useMemo } from 'react'
|
4
5
|
import { AddProductsToCartSnackbarMessage } from './AddProductsToCartSnackbarMessage'
|
5
6
|
import { findAddedItems } from './findAddedItems'
|
@@ -1,14 +1,13 @@
|
|
1
|
-
import { ApolloError } from '@graphcommerce/graphql'
|
2
|
-
import { CartUserInputError } from '@graphcommerce/graphql-mesh'
|
1
|
+
import type { ApolloError } from '@graphcommerce/graphql'
|
2
|
+
import type { CartUserInputError } from '@graphcommerce/graphql-mesh'
|
3
3
|
import { ApolloCartErrorSnackbar } from '@graphcommerce/magento-cart'
|
4
|
+
import type { ErrorSnackbarProps, MessageSnackbarProps } from '@graphcommerce/next-ui'
|
4
5
|
import {
|
5
6
|
Button,
|
6
7
|
ErrorSnackbar,
|
7
|
-
ErrorSnackbarProps,
|
8
8
|
IconSvg,
|
9
9
|
ListFormat,
|
10
10
|
MessageSnackbar,
|
11
|
-
MessageSnackbarProps,
|
12
11
|
iconChevronRight,
|
13
12
|
} from '@graphcommerce/next-ui'
|
14
13
|
import { Plural, Trans } from '@lingui/macro'
|
@@ -62,7 +61,7 @@ export function AddProductsToCartSnackbarMessage(props: AddProductsToCartSnackba
|
|
62
61
|
one={
|
63
62
|
<Trans>
|
64
63
|
<ListFormat listStyle='long' type='conjunction'>
|
65
|
-
{addedItems
|
64
|
+
{addedItems}
|
66
65
|
</ListFormat>{' '}
|
67
66
|
has been added to your shopping cart
|
68
67
|
</Trans>
|
@@ -70,7 +69,7 @@ export function AddProductsToCartSnackbarMessage(props: AddProductsToCartSnackba
|
|
70
69
|
two={
|
71
70
|
<Trans>
|
72
71
|
<ListFormat listStyle='long' type='conjunction'>
|
73
|
-
{addedItems
|
72
|
+
{addedItems}
|
74
73
|
</ListFormat>{' '}
|
75
74
|
have been added to your shopping cart!
|
76
75
|
</Trans>
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { filterNonNullableKeys, isTypename } from '@graphcommerce/next-ui'
|
2
|
-
import { AddProductsToCartMutation } from './AddProductsToCart.gql'
|
3
|
-
import { AddProductsToCartFields } from './useFormAddProductsToCart'
|
2
|
+
import type { AddProductsToCartMutation } from './AddProductsToCart.gql'
|
3
|
+
import type { AddProductsToCartFields } from './useFormAddProductsToCart'
|
4
4
|
|
5
5
|
export function findAddedItems(
|
6
6
|
data: AddProductsToCartMutation | null | undefined,
|
@@ -1,6 +1,6 @@
|
|
1
|
-
import { CartUserInputError } from '@graphcommerce/graphql-mesh'
|
1
|
+
import type { CartUserInputError } from '@graphcommerce/graphql-mesh'
|
2
2
|
import { filterNonNullableKeys } from '@graphcommerce/next-ui'
|
3
|
-
import { AddProductsToCartMutation } from './AddProductsToCart.gql'
|
3
|
+
import type { AddProductsToCartMutation } from './AddProductsToCart.gql'
|
4
4
|
|
5
5
|
export function toUserErrors(data?: AddProductsToCartMutation | null): CartUserInputError[] {
|
6
6
|
const cartItemErrors = filterNonNullableKeys(data?.addProductsToCart?.cart.items)
|
@@ -1,9 +1,10 @@
|
|
1
1
|
import { useFormState } from '@graphcommerce/ecommerce-ui'
|
2
2
|
import { useEventCallback } from '@mui/material'
|
3
3
|
import { startTransition, useEffect, useState } from 'react'
|
4
|
-
import { UseAddProductsToCartActionFragment } from './UseAddProductsToCartAction.gql'
|
4
|
+
import type { UseAddProductsToCartActionFragment } from './UseAddProductsToCartAction.gql'
|
5
5
|
import { toUserErrors } from './toUserErrors'
|
6
|
-
import { AddToCartItemSelector
|
6
|
+
import type { AddToCartItemSelector } from './useFormAddProductsToCart'
|
7
|
+
import { useFormAddProductsToCart } from './useFormAddProductsToCart'
|
7
8
|
|
8
9
|
export type UseAddProductsToCartActionProps = AddToCartItemSelector & {
|
9
10
|
disabled?: boolean
|
@@ -66,7 +67,7 @@ export function useAddProductsToCartAction(
|
|
66
67
|
e.stopPropagation()
|
67
68
|
if (formState.isSubmitting) return
|
68
69
|
if (process.env.NODE_ENV !== 'production') {
|
69
|
-
if (!sku) console.warn(
|
70
|
+
if (!sku) console.warn("You must provide a 'sku' to useAddProductsToCartAction")
|
70
71
|
}
|
71
72
|
// TODO should be removed, setting the form value on submission isn't a great idea.
|
72
73
|
if (!getValues(`cartItems.${index}.sku`)) setValue(`cartItems.${index}.sku`, sku ?? '')
|
@@ -1,7 +1,7 @@
|
|
1
|
-
import { UseFormGqlMutationReturn } from '@graphcommerce/ecommerce-ui'
|
1
|
+
import type { UseFormGqlMutationReturn } from '@graphcommerce/ecommerce-ui'
|
2
2
|
import { createContext, useContext } from 'react'
|
3
|
-
import type {
|
4
|
-
import {
|
3
|
+
import type { LiteralUnion, Simplify } from 'type-fest'
|
4
|
+
import type {
|
5
5
|
AddProductsToCartMutation,
|
6
6
|
AddProductsToCartMutationVariables,
|
7
7
|
} from './AddProductsToCart.gql'
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import type { ProductImage } from '@graphcommerce/graphql-mesh'
|
2
2
|
import type { Product } from 'schema-dts'
|
3
|
-
import { JsonLdProductFragment } from './JsonLdProduct.gql'
|
4
|
-
import { JsonLdProductOfferFragment } from './JsonLdProductOffer.gql'
|
3
|
+
import type { JsonLdProductFragment } from './JsonLdProduct.gql'
|
4
|
+
import type { JsonLdProductOfferFragment } from './JsonLdProductOffer.gql'
|
5
5
|
|
6
6
|
export function jsonLdProduct(props: JsonLdProductFragment): Product {
|
7
7
|
const { name, sku, media_gallery, categories, description } = props
|
@@ -1,12 +1,13 @@
|
|
1
1
|
import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
|
2
|
-
import { CurrencyEnum } from '@graphcommerce/graphql-mesh'
|
2
|
+
import type { CurrencyEnum } from '@graphcommerce/graphql-mesh'
|
3
3
|
import { Money } from '@graphcommerce/magento-store'
|
4
|
-
import {
|
4
|
+
import type { TypeRenderer } from '@graphcommerce/next-ui'
|
5
|
+
import { SectionHeader } from '@graphcommerce/next-ui'
|
5
6
|
import { i18n } from '@lingui/core'
|
6
7
|
import { Box } from '@mui/material'
|
7
8
|
import React from 'react'
|
8
9
|
import { useFormAddProductsToCart } from '../AddProductsToCart'
|
9
|
-
import { ProductCustomizableFragment } from './ProductCustomizable.gql'
|
10
|
+
import type { ProductCustomizableFragment } from './ProductCustomizable.gql'
|
10
11
|
|
11
12
|
export type OptionTypeRenderer = TypeRenderer<
|
12
13
|
NonNullable<NonNullable<ProductCustomizableFragment['options']>[number]> & {
|
@@ -17,7 +18,7 @@ export type OptionTypeRenderer = TypeRenderer<
|
|
17
18
|
}
|
18
19
|
>
|
19
20
|
|
20
|
-
type CustomizableAreaOptionProps = React.ComponentProps<
|
21
|
+
export type CustomizableAreaOptionProps = React.ComponentProps<
|
21
22
|
OptionTypeRenderer['CustomizableAreaOption']
|
22
23
|
>
|
23
24
|
|
@@ -1,17 +1,13 @@
|
|
1
1
|
import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
|
2
2
|
import { Money } from '@graphcommerce/magento-store'
|
3
|
-
import {
|
4
|
-
|
5
|
-
ActionCardProps,
|
6
|
-
filterNonNullableKeys,
|
7
|
-
SectionHeader,
|
8
|
-
} from '@graphcommerce/next-ui'
|
3
|
+
import type { ActionCardProps } from '@graphcommerce/next-ui'
|
4
|
+
import { ActionCard, SectionHeader, filterNonNullableKeys } from '@graphcommerce/next-ui'
|
9
5
|
import { i18n } from '@lingui/core'
|
10
6
|
import { Box, Checkbox } from '@mui/material'
|
11
7
|
import { useFormAddProductsToCart } from '../AddProductsToCart'
|
12
|
-
import { OptionTypeRenderer } from './CustomizableAreaOption'
|
8
|
+
import type { OptionTypeRenderer } from './CustomizableAreaOption'
|
13
9
|
|
14
|
-
type CustomizableCheckboxOptionProps = React.ComponentProps<
|
10
|
+
export type CustomizableCheckboxOptionProps = React.ComponentProps<
|
15
11
|
OptionTypeRenderer['CustomizableCheckboxOption']
|
16
12
|
>
|
17
13
|
|
@@ -1,12 +1,12 @@
|
|
1
1
|
import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
|
2
|
+
import { Money } from '@graphcommerce/magento-store'
|
2
3
|
import { SectionHeader } from '@graphcommerce/next-ui'
|
3
4
|
import { Trans } from '@lingui/react'
|
4
5
|
import { Box } from '@mui/material'
|
5
6
|
import { useFormAddProductsToCart } from '../AddProductsToCart'
|
6
|
-
import { OptionTypeRenderer } from './CustomizableAreaOption'
|
7
|
-
import { Money } from '@graphcommerce/magento-store'
|
7
|
+
import type { OptionTypeRenderer } from './CustomizableAreaOption'
|
8
8
|
|
9
|
-
type CustomizableDateOptionProps = React.ComponentProps<
|
9
|
+
export type CustomizableDateOptionProps = React.ComponentProps<
|
10
10
|
OptionTypeRenderer['CustomizableDateOption']
|
11
11
|
> & {
|
12
12
|
minDate?: Date
|
@@ -1,17 +1,17 @@
|
|
1
|
-
import {
|
1
|
+
import { useController } from '@graphcommerce/ecommerce-ui'
|
2
|
+
import { Money } from '@graphcommerce/magento-store'
|
2
3
|
import { SectionHeader, filterNonNullableKeys } from '@graphcommerce/next-ui'
|
3
|
-
import { Box,
|
4
|
+
import { Box, MenuItem, TextField } from '@mui/material'
|
4
5
|
import { useFormAddProductsToCart } from '../AddProductsToCart'
|
5
|
-
import { OptionTypeRenderer } from './CustomizableAreaOption'
|
6
|
-
import { Money } from '@graphcommerce/magento-store'
|
6
|
+
import type { OptionTypeRenderer } from './CustomizableAreaOption'
|
7
7
|
|
8
|
-
type CustomizableDropDownOptionProps = React.ComponentProps<
|
8
|
+
export type CustomizableDropDownOptionProps = React.ComponentProps<
|
9
9
|
OptionTypeRenderer['CustomizableDropDownOption']
|
10
10
|
>
|
11
11
|
|
12
12
|
export function CustomizableDropDownOption(props: CustomizableDropDownOptionProps) {
|
13
13
|
const { uid, required, index, title, dropdownValue, productPrice, currency } = props
|
14
|
-
const { control
|
14
|
+
const { control } = useFormAddProductsToCart()
|
15
15
|
|
16
16
|
const {
|
17
17
|
field: { onChange, value, ref, ...field },
|
@@ -1,12 +1,12 @@
|
|
1
|
-
import { Money } from '@graphcommerce/magento-store'
|
2
1
|
import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
|
2
|
+
import { Money } from '@graphcommerce/magento-store'
|
3
3
|
import { SectionHeader } from '@graphcommerce/next-ui'
|
4
4
|
import { i18n } from '@lingui/core'
|
5
5
|
import { Box } from '@mui/material'
|
6
6
|
import { useFormAddProductsToCart } from '../AddProductsToCart'
|
7
|
-
import { OptionTypeRenderer } from './CustomizableAreaOption'
|
7
|
+
import type { OptionTypeRenderer } from './CustomizableAreaOption'
|
8
8
|
|
9
|
-
type CustomizableFieldOptionProps = React.ComponentProps<
|
9
|
+
export type CustomizableFieldOptionProps = React.ComponentProps<
|
10
10
|
OptionTypeRenderer['CustomizableFieldOption']
|
11
11
|
>
|
12
12
|
|
@@ -1,17 +1,13 @@
|
|
1
1
|
import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
|
2
2
|
import { Money } from '@graphcommerce/magento-store'
|
3
|
-
import {
|
4
|
-
|
5
|
-
ActionCardProps,
|
6
|
-
filterNonNullableKeys,
|
7
|
-
SectionHeader,
|
8
|
-
} from '@graphcommerce/next-ui'
|
3
|
+
import type { ActionCardProps } from '@graphcommerce/next-ui'
|
4
|
+
import { ActionCard, SectionHeader, filterNonNullableKeys } from '@graphcommerce/next-ui'
|
9
5
|
import { i18n } from '@lingui/core'
|
10
6
|
import { Box } from '@mui/material'
|
11
7
|
import { useFormAddProductsToCart } from '../AddProductsToCart'
|
12
|
-
import { OptionTypeRenderer } from './CustomizableAreaOption'
|
8
|
+
import type { OptionTypeRenderer } from './CustomizableAreaOption'
|
13
9
|
|
14
|
-
type CustomizableMultipleOptionProps = React.ComponentProps<
|
10
|
+
export type CustomizableMultipleOptionProps = React.ComponentProps<
|
15
11
|
OptionTypeRenderer['CustomizableMultipleOption']
|
16
12
|
>
|
17
13
|
|
@@ -1,17 +1,13 @@
|
|
1
1
|
import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
|
2
2
|
import { Money } from '@graphcommerce/magento-store'
|
3
|
-
import {
|
4
|
-
|
5
|
-
ActionCardProps,
|
6
|
-
filterNonNullableKeys,
|
7
|
-
SectionHeader,
|
8
|
-
} from '@graphcommerce/next-ui'
|
3
|
+
import type { ActionCardProps } from '@graphcommerce/next-ui'
|
4
|
+
import { ActionCard, SectionHeader, filterNonNullableKeys } from '@graphcommerce/next-ui'
|
9
5
|
import { i18n } from '@lingui/core'
|
10
6
|
import { Box } from '@mui/material'
|
11
7
|
import { useFormAddProductsToCart } from '../AddProductsToCart'
|
12
|
-
import { OptionTypeRenderer } from './CustomizableAreaOption'
|
8
|
+
import type { OptionTypeRenderer } from './CustomizableAreaOption'
|
13
9
|
|
14
|
-
type CustomizableRadioOptionProps = React.ComponentProps<
|
10
|
+
export type CustomizableRadioOptionProps = React.ComponentProps<
|
15
11
|
OptionTypeRenderer['CustomizableRadioOption']
|
16
12
|
>
|
17
13
|
|
@@ -1,14 +1,15 @@
|
|
1
|
-
import {
|
2
|
-
import { AddToCartItemSelector } from '../AddProductsToCart'
|
3
|
-
import { ProductPagePriceFragment } from '../ProductPagePrice'
|
4
|
-
import {
|
1
|
+
import { RenderType, filterNonNullableKeys } from '@graphcommerce/next-ui'
|
2
|
+
import type { AddToCartItemSelector } from '../AddProductsToCart'
|
3
|
+
import type { ProductPagePriceFragment } from '../ProductPagePrice'
|
4
|
+
import type { OptionTypeRenderer } from './CustomizableAreaOption'
|
5
|
+
import { CustomizableAreaOption } from './CustomizableAreaOption'
|
5
6
|
import { CustomizableCheckboxOption } from './CustomizableCheckboxOption'
|
6
7
|
import { CustomizableDateOption } from './CustomizableDateOption'
|
7
8
|
import { CustomizableDropDownOption } from './CustomizableDropDownOption'
|
8
9
|
import { CustomizableFieldOption } from './CustomizableFieldOption'
|
9
10
|
import { CustomizableMultipleOption } from './CustomizableMultipleOption'
|
10
11
|
import { CustomizableRadioOption } from './CustomizableRadioOption'
|
11
|
-
import { ProductCustomizableFragment } from './ProductCustomizable.gql'
|
12
|
+
import type { ProductCustomizableFragment } from './ProductCustomizable.gql'
|
12
13
|
|
13
14
|
const defaultRenderer = {
|
14
15
|
CustomizableAreaOption,
|
@@ -32,7 +33,7 @@ type OptionTypeRendererProp = Simplify<
|
|
32
33
|
: MissingOptionTypeRenderer & DefinedOptionTypeRenderer
|
33
34
|
>
|
34
35
|
|
35
|
-
type ProductCustomizableProps = AddToCartItemSelector & {
|
36
|
+
export type ProductCustomizableProps = AddToCartItemSelector & {
|
36
37
|
product: ProductCustomizableFragment & ProductPagePriceFragment
|
37
38
|
} & (keyof MissingOptionTypeRenderer extends never
|
38
39
|
? { renderer?: OptionTypeRendererProp }
|
@@ -1,12 +1,14 @@
|
|
1
|
-
import { FilterRangeTypeInput } from '@graphcommerce/graphql-mesh'
|
1
|
+
import type { FilterRangeTypeInput } from '@graphcommerce/graphql-mesh'
|
2
2
|
import { Money } from '@graphcommerce/magento-store'
|
3
3
|
import { extendableComponent, filterNonNullableKeys } from '@graphcommerce/next-ui'
|
4
|
-
import {
|
4
|
+
import type { SxProps, Theme } from '@mui/material'
|
5
|
+
import { Box, Slider, useEventCallback } from '@mui/material'
|
5
6
|
import { useCallback } from 'react'
|
6
7
|
import type { FilterProps } from './ProductFiltersProAggregations'
|
7
8
|
|
8
9
|
export type PriceSliderProps = {
|
9
10
|
value: FilterRangeTypeInput | null | undefined
|
11
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
10
12
|
onChange: (...event: any[]) => void
|
11
13
|
sx?: SxProps<Theme>
|
12
14
|
options: FilterProps['aggregation']['options']
|
@@ -3,9 +3,9 @@ import type { ProductAttributeFilterInput } from '@graphcommerce/graphql-mesh'
|
|
3
3
|
import {
|
4
4
|
ActionCard,
|
5
5
|
ChipOverlayOrPopper,
|
6
|
+
IconSvg,
|
6
7
|
filterNonNullableKeys,
|
7
8
|
iconCirle,
|
8
|
-
IconSvg,
|
9
9
|
} from '@graphcommerce/next-ui'
|
10
10
|
import { Box } from '@mui/material'
|
11
11
|
import { useMemo } from 'react'
|
@@ -3,7 +3,7 @@ import type { ProductAttributeFilterInput } from '@graphcommerce/graphql-mesh'
|
|
3
3
|
import { Money } from '@graphcommerce/magento-store'
|
4
4
|
import { ChipOverlayOrPopper, extendableComponent } from '@graphcommerce/next-ui'
|
5
5
|
import { isFilterTypeRange } from '../ProductListItems/filterTypes'
|
6
|
-
import {
|
6
|
+
import { PriceSlider, getMinMaxFromOptions } from './PriceSlider'
|
7
7
|
import { useProductFiltersPro } from './ProductFiltersPro'
|
8
8
|
import type { FilterProps } from './ProductFiltersProAggregations'
|
9
9
|
|
@@ -1,32 +1,23 @@
|
|
1
|
-
import {
|
1
|
+
import type {
|
2
2
|
DeepPartial,
|
3
|
-
FormAutoSubmit,
|
4
|
-
useForm,
|
5
3
|
UseFormProps,
|
6
4
|
UseFormReturn,
|
7
5
|
WatchObserver,
|
8
6
|
} from '@graphcommerce/ecommerce-ui'
|
7
|
+
import { FormAutoSubmit, useForm } from '@graphcommerce/ecommerce-ui'
|
9
8
|
import { useMatchMediaMotionValue, useMemoObject } from '@graphcommerce/next-ui'
|
10
|
-
import { Theme
|
9
|
+
import type { Theme } from '@mui/material'
|
10
|
+
// eslint-disable-next-line @typescript-eslint/no-restricted-imports
|
11
|
+
import { useEventCallback, useMediaQuery, useTheme } from '@mui/material'
|
11
12
|
import { m, useTransform } from 'framer-motion'
|
12
13
|
import { useRouter } from 'next/router'
|
13
|
-
import
|
14
|
-
|
15
|
-
createContext,
|
16
|
-
MutableRefObject,
|
17
|
-
useContext,
|
18
|
-
useEffect,
|
19
|
-
useMemo,
|
20
|
-
useRef,
|
21
|
-
} from 'react'
|
14
|
+
import type { BaseSyntheticEvent, MutableRefObject } from 'react'
|
15
|
+
import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react'
|
22
16
|
import type { Subscription } from 'react-hook-form/dist/utils/createSubject'
|
23
17
|
import { productListLinkFromFilter } from '../../hooks/useProductListLink'
|
24
|
-
import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
|
25
|
-
import {
|
26
|
-
|
27
|
-
ProductListParams,
|
28
|
-
toFilterParams,
|
29
|
-
} from '../ProductListItems/filterTypes'
|
18
|
+
import type { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
|
19
|
+
import type { ProductFilterParams, ProductListParams } from '../ProductListItems/filterTypes'
|
20
|
+
import { toFilterParams } from '../ProductListItems/filterTypes'
|
30
21
|
|
31
22
|
type DataProps = {
|
32
23
|
filterTypes: Record<string, string | undefined>
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import { AttributeFrontendInputEnum } from '@graphcommerce/graphql-mesh'
|
2
|
-
import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
|
1
|
+
import type { AttributeFrontendInputEnum } from '@graphcommerce/graphql-mesh'
|
2
|
+
import type { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
|
3
3
|
import { ProductFilterEqualChip } from './ProductFilterEqualChip'
|
4
4
|
import { ProductFilterEqualSection } from './ProductFilterEqualSection'
|
5
5
|
import { ProductFilterRangeChip } from './ProductFilterRangeChip'
|
@@ -1,16 +1,15 @@
|
|
1
|
-
import {
|
1
|
+
import type { ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
|
2
|
+
import { ChipOverlayOrPopper } from '@graphcommerce/next-ui'
|
2
3
|
import { Trans } from '@lingui/react'
|
3
4
|
import { useProductFiltersPro } from './ProductFiltersPro'
|
5
|
+
import type { ProductFiltersProAggregationsProps } from './ProductFiltersProAggregations'
|
4
6
|
import {
|
5
7
|
ProductFiltersProAggregations,
|
6
|
-
ProductFiltersProAggregationsProps,
|
7
8
|
productFiltersProSectionRenderer,
|
8
9
|
} from './ProductFiltersProAggregations'
|
9
10
|
import { ProductFiltersProLimitSection } from './ProductFiltersProLimitSection'
|
10
|
-
import {
|
11
|
-
|
12
|
-
ProductFiltersProSortSectionProps,
|
13
|
-
} from './ProductFiltersProSortSection'
|
11
|
+
import type { ProductFiltersProSortSectionProps } from './ProductFiltersProSortSection'
|
12
|
+
import { ProductFiltersProSortSection } from './ProductFiltersProSortSection'
|
14
13
|
import { activeAggregations } from './activeAggregations'
|
15
14
|
import { applyAggregationCount } from './applyAggregationCount'
|
16
15
|
import { useProductFiltersProClearAllAction } from './useProductFiltersProClearAllAction'
|
@@ -20,7 +19,8 @@ export type ProductFiltersProAllFiltersChipProps = ProductFiltersProAggregations
|
|
20
19
|
Omit<
|
21
20
|
ChipOverlayOrPopperProps,
|
22
21
|
'label' | 'selected' | 'selectedLabel' | 'onApply' | 'onReset' | 'onClose' | 'children'
|
23
|
-
>
|
22
|
+
> &
|
23
|
+
Partial<Pick<ChipOverlayOrPopperProps, 'label' | 'selectedLabel' | 'children'>>
|
24
24
|
|
25
25
|
export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFiltersChipProps) {
|
26
26
|
const { sort_fields, total_count, renderer, category, ...rest } = props
|
@@ -1,20 +1,15 @@
|
|
1
|
-
import {
|
2
|
-
import {
|
3
|
-
import {
|
1
|
+
import type { SxProps, Theme } from '@mui/material'
|
2
|
+
import { Box } from '@mui/material'
|
3
|
+
import type { ProductFiltersProAggregationsProps } from './ProductFiltersProAggregations'
|
4
4
|
import {
|
5
5
|
ProductFiltersProAggregations,
|
6
|
-
ProductFiltersProAggregationsProps,
|
7
6
|
productFiltersProSectionRenderer,
|
8
7
|
} from './ProductFiltersProAggregations'
|
9
|
-
import {
|
10
|
-
|
11
|
-
ProductFiltersProCategorySection,
|
12
|
-
} from './ProductFiltersProCategorySection'
|
8
|
+
import type { ProductFiltersCategorySectionProps } from './ProductFiltersProCategorySection'
|
9
|
+
import { ProductFiltersProCategorySection } from './ProductFiltersProCategorySection'
|
13
10
|
import { ProductFiltersProLimitSection } from './ProductFiltersProLimitSection'
|
14
|
-
import {
|
15
|
-
|
16
|
-
ProductFiltersProSortSectionProps,
|
17
|
-
} from './ProductFiltersProSortSection'
|
11
|
+
import type { ProductFiltersProSortSectionProps } from './ProductFiltersProSortSection'
|
12
|
+
import { ProductFiltersProSortSection } from './ProductFiltersProSortSection'
|
18
13
|
|
19
14
|
export type ProductFiltersProAllFiltersSidebarProps = ProductFiltersProAggregationsProps &
|
20
15
|
ProductFiltersProSortSectionProps &
|
@@ -22,9 +17,7 @@ export type ProductFiltersProAllFiltersSidebarProps = ProductFiltersProAggregati
|
|
22
17
|
|
23
18
|
/**
|
24
19
|
* @deprecated Not used anymore
|
25
|
-
*
|
26
|
-
* @param props
|
27
|
-
* @returns
|
20
|
+
* @public
|
28
21
|
*/
|
29
22
|
export function ProductFiltersProAllFiltersSidebar(props: ProductFiltersProAllFiltersSidebarProps) {
|
30
23
|
const { sort_fields, total_count, renderer, sx = [], category, params } = props
|