@graphcommerce/magento-product 9.0.0-canary.103 → 9.0.0-canary.105

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 9.0.0-canary.105
+
+## 9.0.0-canary.104
+
 ## 9.0.0-canary.103
 
 ## 9.0.0-canary.91
@@ -907,7 +911,7 @@
   All occurences of `<Trans>` and `t` need to be replaced:
 
   ```tsx
-  import { Trans, t } from '@lingui/macro'
+  import { t, Trans } from '@lingui/macro'
 
   function MyComponent() {
     const foo = 'bar'
@@ -922,8 +926,8 @@
   Needs to be replaced with:
 
   ```tsx
-  import { Trans } from '@lingui/react'
   import { i18n } from '@lingui/core'
+  import { Trans } from '@lingui/react'
 
   function MyComponent() {
     const foo = 'bar'

package/components/AddProductsToCart/AddProductsToCartFab.tsx

@@ -1,6 +1,6 @@
 import { useCartEnabled } from '@graphcommerce/magento-cart'
 import type { FabProps } from '@graphcommerce/next-ui'
-import { Fab, iconShoppingBag, iconCheckmark } from '@graphcommerce/next-ui'
+import { Fab, iconCheckmark, iconShoppingBag } from '@graphcommerce/next-ui'
 import { t } from '@lingui/macro'
 import type { SxProps, Theme } from '@mui/material'
 import type { UseAddProductsToCartActionProps } from './useAddProductsToCartAction'

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -2,7 +2,7 @@ import type { UseFormGraphQlOptions } from '@graphcommerce/ecommerce-ui'
 import type { ApolloQueryResult } from '@graphcommerce/graphql'
 import { useApolloClient } from '@graphcommerce/graphql'
 import type { CrosssellsQuery } from '@graphcommerce/magento-cart'
-import { useFormGqlMutationCart, CrosssellsDocument } from '@graphcommerce/magento-cart'
+import { CrosssellsDocument, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import type { ErrorSnackbarProps, MessageSnackbarProps } from '@graphcommerce/next-ui'
 import { nonNullable } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'

package/components/AddProductsToCart/AddProductsToCartSnackbarMessage.tsx

@@ -61,7 +61,7 @@ export function AddProductsToCartSnackbarMessage(props: AddProductsToCartSnackba
             one={
               <Trans>
                 <ListFormat listStyle='long' type='conjunction'>
-                  {addedItems.map((item) => item)}
+                  {addedItems}
                 </ListFormat>{' '}
                 has been added to your shopping cart
               </Trans>
@@ -69,7 +69,7 @@ export function AddProductsToCartSnackbarMessage(props: AddProductsToCartSnackba
             two={
               <Trans>
                 <ListFormat listStyle='long' type='conjunction'>
-                  {addedItems.map((item) => item)}
+                  {addedItems}
                 </ListFormat>{' '}
                 have been added to your shopping cart!
               </Trans>

package/components/AddProductsToCart/useFormAddProductsToCart.ts

@@ -1,6 +1,6 @@
 import type { UseFormGqlMutationReturn } from '@graphcommerce/ecommerce-ui'
 import { createContext, useContext } from 'react'
-import type { Simplify, LiteralUnion } from 'type-fest'
+import type { LiteralUnion, Simplify } from 'type-fest'
 import type {
   AddProductsToCartMutation,
   AddProductsToCartMutationVariables,

package/components/ProductAddToCart/ProductAddToCart.tsx

@@ -5,14 +5,14 @@ import type { MoneyProps } from '@graphcommerce/magento-store'
 import { Money } from '@graphcommerce/magento-store'
 import {
   Button,
-  MessageSnackbar,
-  iconChevronRight,
   IconSvg,
+  MessageSnackbar,
   extendableComponent,
+  iconChevronRight,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
 import type { ButtonProps } from '@mui/material'
-import { Divider, Typography, Box, Alert } from '@mui/material'
+import { Alert, Box, Divider, Typography } from '@mui/material'
 import React from 'react'
 import type { ProductAddToCartMutationVariables } from './ProductAddToCart.gql'
 import { ProductAddToCartDocument } from './ProductAddToCart.gql'

package/components/ProductCustomizable/CustomizableCheckboxOption.tsx

@@ -1,7 +1,7 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
-import { ActionCard, filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
+import { ActionCard, SectionHeader, filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Box, Checkbox } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'

package/components/ProductCustomizable/CustomizableMultipleOption.tsx

@@ -1,7 +1,7 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
-import { ActionCard, filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
+import { ActionCard, SectionHeader, filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'

package/components/ProductCustomizable/CustomizableRadioOption.tsx

@@ -1,7 +1,7 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
-import { ActionCard, filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
+import { ActionCard, SectionHeader, filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'

package/components/ProductCustomizable/ProductCustomizable.tsx

@@ -1,4 +1,4 @@
-import { filterNonNullableKeys, RenderType } from '@graphcommerce/next-ui'
+import { RenderType, filterNonNullableKeys } from '@graphcommerce/next-ui'
 import type { AddToCartItemSelector } from '../AddProductsToCart'
 import type { ProductPagePriceFragment } from '../ProductPagePrice'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'

package/components/ProductFiltersPro/ProductFilterEqualChip.tsx

@@ -3,9 +3,9 @@ import type { ProductAttributeFilterInput } from '@graphcommerce/graphql-mesh'
 import {
   ActionCard,
   ChipOverlayOrPopper,
+  IconSvg,
   filterNonNullableKeys,
   iconCirle,
-  IconSvg,
 } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
 import { useMemo } from 'react'

package/components/ProductFiltersPro/ProductFilterEqualSection.tsx

@@ -4,9 +4,9 @@ import {
   ActionCard,
   ActionCardAccordion,
   Button,
+  IconSvg,
   filterNonNullableKeys,
   iconCirle,
-  IconSvg,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box } from '@mui/material'

package/components/ProductFiltersPro/ProductFilterRangeChip.tsx

@@ -3,7 +3,7 @@ import type { ProductAttributeFilterInput } from '@graphcommerce/graphql-mesh'
 import { Money } from '@graphcommerce/magento-store'
 import { ChipOverlayOrPopper, extendableComponent } from '@graphcommerce/next-ui'
 import { isFilterTypeRange } from '../ProductListItems/filterTypes'
-import { getMinMaxFromOptions, PriceSlider } from './PriceSlider'
+import { PriceSlider, getMinMaxFromOptions } from './PriceSlider'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import type { FilterProps } from './ProductFiltersProAggregations'
 

package/components/ProductFiltersPro/ProductFiltersProLayoutSidebar.tsx

@@ -1,5 +1,5 @@
 import { FormAutoSubmit } from '@graphcommerce/ecommerce-ui'
-import { extendableComponent, StickyBelowHeader } from '@graphcommerce/next-ui'
+import { StickyBelowHeader, extendableComponent } from '@graphcommerce/next-ui'
 import type { Theme } from '@mui/material'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { Box, Container, useMediaQuery } from '@mui/material'

package/components/ProductListFilters/FilterCheckboxType.tsx

@@ -1,5 +1,5 @@
 import { cloneDeep } from '@graphcommerce/graphql'
-import { iconCancelAlt, IconSvg } from '@graphcommerce/next-ui'
+import { IconSvg, iconCancelAlt } from '@graphcommerce/next-ui'
 import type { ChipProps, SxProps, Theme } from '@mui/material'
 import { Chip } from '@mui/material'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'

package/components/ProductListFilters/FilterEqualType.tsx

@@ -1,10 +1,9 @@
 import { cloneDeep } from '@graphcommerce/graphql'
 import type { FilterEqualTypeInput } from '@graphcommerce/graphql-mesh'
 import type { ChipMenuProps } from '@graphcommerce/next-ui'
-import { responsiveVal, extendableComponent, ChipMenu } from '@graphcommerce/next-ui'
+import { ChipMenu, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
 import {
-  Box,
-  // eslint-disable-next-line @typescript-eslint/no-restricted-imports
+  Box, // eslint-disable-next-line @typescript-eslint/no-restricted-imports
   Checkbox,
   ListItem,
   ListItemSecondaryAction,

package/components/ProductListFiltersContainer/ProductListFiltersContainer.tsx

@@ -1,10 +1,10 @@
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
 import {
+  IconSvg,
+  extendableComponent,
   iconChevronLeft,
   iconChevronRight,
-  IconSvg,
   useScrollY,
-  extendableComponent,
 } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, styled } from '@mui/material'

package/components/ProductListItem/ProductDiscountLabel.tsx

@@ -26,7 +26,7 @@ export function ProductDiscountLabel(props: ProductDiscountLabelProps) {
           }}
           {...boxProps}
         >
-          <PercentFormat>{discount / 100}</PercentFormat>
+          <PercentFormat maximumFractionDigits={0} value={discount / 100} />
         </Box>
       )}
     </>

package/components/ProductListItem/ProductListItem.tsx

@@ -1,7 +1,7 @@
 import type { ImageProps } from '@graphcommerce/image'
 import { extendableComponent } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
-import { useEventCallback, Skeleton } from '@mui/material'
+import { Skeleton, useEventCallback } from '@mui/material'
 import React from 'react'
 import type { ProductListItemFragment } from '../../Api/ProductListItem.gql'
 import { productLink } from '../../hooks/useProductLink'
@@ -13,7 +13,7 @@ import type {
   ProductListItemImageAreaKeys,
   ProductListsItemImageAreaProps,
 } from './ProductListItemImageContainer'
-import { ProductListItemImageAreas, ProductImageContainer } from './ProductListItemImageContainer'
+import { ProductImageContainer, ProductListItemImageAreas } from './ProductListItemImageContainer'
 import { ProductListItemLinkOrDiv } from './ProductListItemLinkOrDiv'
 import type { ProductListItemTitleAndPriceProps } from './ProductListItemTitleAndPrice'
 import { ProductListItemTitleAndPrice } from './ProductListItemTitleAndPrice'

package/components/ProductListItem/ProductListItemImageContainer.tsx

@@ -1,4 +1,4 @@
-import { responsiveVal, breakpointVal } from '@graphcommerce/next-ui'
+import { breakpointVal, responsiveVal } from '@graphcommerce/next-ui'
 import type { BoxProps } from '@mui/material'
 import { Box } from '@mui/material'
 

package/components/ProductListItems/ProductListParamsProvider.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { productListParamsContext } from '../../context/productListParamsContext'
 import type { ProductListParams } from './filterTypes'
 

package/components/ProductListItems/filterTypes.tsx

@@ -1,11 +1,11 @@
 import type {
-  Maybe,
-  Scalars,
-  ProductAttributeFilterInput,
-  ProductAttributeSortInput,
   FilterEqualTypeInput,
   FilterMatchTypeInput,
   FilterRangeTypeInput,
+  Maybe,
+  ProductAttributeFilterInput,
+  ProductAttributeSortInput,
+  Scalars,
   SortEnum,
 } from '@graphcommerce/graphql-mesh'
 

package/components/ProductListPagination/ProductListPagination.tsx

@@ -1,4 +1,4 @@
-import { NextLink, PaginationExtended, Pagination } from '@graphcommerce/next-ui'
+import { NextLink, Pagination, PaginationExtended } from '@graphcommerce/next-ui'
 import type { PaginationProps } from '@mui/material'
 import { Link } from '@mui/material'
 import { productListLink } from '../../hooks/useProductListLink'

package/components/ProductListSort/ProductListSort.tsx

@@ -1,4 +1,4 @@
-import { useQuery, cloneDeep } from '@graphcommerce/graphql'
+import { cloneDeep, useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import type { ChipMenuProps } from '@graphcommerce/next-ui'
 import { ChipMenu, extendableComponent } from '@graphcommerce/next-ui'

package/components/ProductPageDescription/ProductPageDescription.tsx

@@ -1,9 +1,9 @@
 import type { ColumnTwoWithTopProps } from '@graphcommerce/next-ui'
 import {
   ColumnTwoWithTop,
-  extendableComponent,
-  breakpointVal,
   LazyHydrate,
+  breakpointVal,
+  extendableComponent,
 } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Typography } from '@mui/material'

package/components/ProductPageGallery/ProductPageGallery.tsx

@@ -1,5 +1,5 @@
 import type { SidebarGalleryProps, TypeRenderer } from '@graphcommerce/next-ui'
-import { nonNullable, SidebarGallery } from '@graphcommerce/next-ui'
+import { SidebarGallery, nonNullable } from '@graphcommerce/next-ui'
 import type { ProductPageGalleryFragment } from './ProductPageGallery.gql'
 
 export type ProductPageGalleryRenderers = TypeRenderer<

package/components/ProductPagePrice/useCustomizableOptionPrice.ts

@@ -4,9 +4,9 @@ import { filterNonNullableKeys, isTypename, nonNullable } from '@graphcommerce/n
 import type { AddToCartItemSelector } from '../AddProductsToCart'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type {
+  AnyOption,
   CustomizableProductOptionBase,
   OptionValueSelector,
-  AnyOption,
   SelectorsProp,
 } from '../ProductCustomizable/productCustomizableSelectors'
 import { productCustomizableSelectors } from '../ProductCustomizable/productCustomizableSelectors'

package/components/ProductScroller/ProductScroller.tsx

@@ -15,7 +15,8 @@ export type ProductScrollerProps = {
   sx?: SxProps<Theme>
   containerProps?: ContainerProps
   titleProps?: TypographyProps
-  itemScrollerProps?: ItemScrollerProps
+  itemScrollerProps?: Omit<ItemScrollerProps, 'children'>
+  sizes?: string
 }
 export const ProductScroller = forwardRef<HTMLDivElement, ProductScrollerProps>(
   (props: ProductScrollerProps, ref) => {
@@ -28,6 +29,7 @@ export const ProductScroller = forwardRef<HTMLDivElement, ProductScrollerProps>(
       containerProps,
       titleProps,
       itemScrollerProps,
+      sizes = responsiveVal(200, 300),
     } = props
 
     const theme = useTheme()
@@ -54,7 +56,7 @@ export const ProductScroller = forwardRef<HTMLDivElement, ProductScrollerProps>(
                   renderer={productListRenderer}
                   {...item}
                   imageOnly={imageOnly}
-                  sizes={responsiveVal(200, 300)}
+                  sizes={sizes}
                 />
               ))}
             </ItemScroller>

package/components/ProductSidebarDelivery/ProductSidebarDelivery.tsx

@@ -1,4 +1,4 @@
-import { breakpointVal, iconOrderBefore, IconSvg } from '@graphcommerce/next-ui'
+import { IconSvg, breakpointVal, iconOrderBefore } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box, darken, lighten } from '@mui/material'
 import type { UseAddProductsToCartActionFragment } from '../AddProductsToCart/UseAddProductsToCartAction.gql'

package/components/ProductSpecs/ProductSpecs.tsx

@@ -1,4 +1,4 @@
-import { responsiveVal, Row, SectionContainer, extendableComponent } from '@graphcommerce/next-ui'
+import { Row, SectionContainer, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import type { ProductSpecsFragment } from './ProductSpecs.gql'

package/components/ProductSpecs/ProductSpecsCustomAttributes.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@graphcommerce/graphql'
-import { extendableComponent, ListFormat } from '@graphcommerce/next-ui'
+import { ListFormat, extendableComponent } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
 import type { ProductSpecsFragment } from './ProductSpecs.gql'
 import { ProductSpecsTypesDocument } from './ProductSpecsTypes.gql'

package/components/ProductWeight/ProductWeight.tsx

@@ -15,9 +15,5 @@ export function ProductWeight(props: ProductWeightProps) {
 
   const unit = conf?.storeConfig?.weight_unit === 'lbs' ? 'pound' : 'kilogram'
 
-  return (
-    <UnitFormat unit={unit} {...rest}>
-      {product.weight}
-    </UnitFormat>
-  )
+  return <UnitFormat unit={unit} {...rest} value={product.weight} />
 }

package/hooks/useProductList.ts

@@ -1,6 +1,6 @@
 import { debounce } from '@graphcommerce/ecommerce-ui'
 import type { ApolloClient } from '@graphcommerce/graphql'
-import { useQuery, useInContextQuery, getInContextInput } from '@graphcommerce/graphql'
+import { getInContextInput, useInContextQuery, useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { showPageLoadIndicator } from '@graphcommerce/next-ui'
 import { useEventCallback } from '@mui/material'
@@ -20,8 +20,8 @@ import type { ProductListParams } from '../components/ProductListItems/filterTyp
 import { toProductListParams } from '../components/ProductListItems/filterTypes'
 import { useRouterFilterParams } from '../components/ProductListItems/filteredProductList'
 import {
-  productListApplyCategoryDefaults,
   categoryDefaultsToProductListFilters,
+  productListApplyCategoryDefaults,
   useProductListApplyCategoryDefaults,
 } from '../components/ProductListItems/productListApplyCategoryDefaults'
 

package/package.json

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