@graphcommerce/magento-product 4.7.3 → 4.8.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Change Log
 
+## 4.8.1
+
+### Patch Changes
+
+- [#1684](https://github.com/graphcommerce-org/graphcommerce/pull/1684) [`aab6b4fa5`](https://github.com/graphcommerce-org/graphcommerce/commit/aab6b4fa5b4708003cfb5bf673a617dc5dbf3078) Thanks [@paales](https://github.com/paales)! - Make sure the images are sorted according to their position field
+
+- Updated dependencies [[`ae28fb14c`](https://github.com/graphcommerce-org/graphcommerce/commit/ae28fb14cec298c52970260a4fc2c2551b5f175e), [`98d6a9cce`](https://github.com/graphcommerce-org/graphcommerce/commit/98d6a9cce1bb9514088be0af2736721b3edda467)]:
+  - @graphcommerce/magento-cart@4.9.2
+  - @graphcommerce/next-ui@4.29.1
+  - @graphcommerce/ecommerce-ui@1.5.6
+  - @graphcommerce/framer-scroller@2.1.43
+  - @graphcommerce/magento-store@4.3.4
+
+## 4.8.0
+
+### Minor Changes
+
+- [#1679](https://github.com/graphcommerce-org/graphcommerce/pull/1679) [`2b5451395`](https://github.com/graphcommerce-org/graphcommerce/commit/2b5451395dc1173de55d18d08968866e561f90ab) Thanks [@paales](https://github.com/paales)! - Move AddProductsToCartSnackbar to inside AddProductsToCartForm and make AddProductsToCartForm configrable via theme.ts
+
+- [#1679](https://github.com/graphcommerce-org/graphcommerce/pull/1679) [`e76df6dc3`](https://github.com/graphcommerce-org/graphcommerce/commit/e76df6dc37c11c793a5d008ba36932d17dc23855) Thanks [@paales](https://github.com/paales)! - Added AddProductsToCartFab for a smaller add to cart button
+
+- [#1678](https://github.com/graphcommerce-org/graphcommerce/pull/1678) [`78d7d51cb`](https://github.com/graphcommerce-org/graphcommerce/commit/78d7d51cb1551601d3a4756cd1f2157a49ff93b9) Thanks [@Jessevdpoel](https://github.com/Jessevdpoel)! - Changed styling and forwarded breadcrumbprops
+
+### Patch Changes
+
+- [#1679](https://github.com/graphcommerce-org/graphcommerce/pull/1679) [`c4ed376e2`](https://github.com/graphcommerce-org/graphcommerce/commit/c4ed376e2c72b16b34704d7d1ca69c074de172ba) Thanks [@paales](https://github.com/paales)! - Support passing children to AddProductsToCartButton instead of Add To Cart
+
+- Updated dependencies [[`e76df6dc3`](https://github.com/graphcommerce-org/graphcommerce/commit/e76df6dc37c11c793a5d008ba36932d17dc23855), [`0bd9ea582`](https://github.com/graphcommerce-org/graphcommerce/commit/0bd9ea58230dde79c5fe2cdb07e9860151460270)]:
+  - @graphcommerce/next-ui@4.29.0
+  - @graphcommerce/ecommerce-ui@1.5.5
+  - @graphcommerce/framer-scroller@2.1.42
+  - @graphcommerce/magento-cart@4.9.1
+  - @graphcommerce/magento-store@4.3.3
+
 ## 4.7.3
 
 ### Patch Changes

package/components/AddProductsToCart/AddProductsToCartButton.tsx

@@ -1,48 +1,31 @@
 import { Button, ButtonProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { SxProps, Theme, useEventCallback } from '@mui/material'
-import { useFormAddProductsToCart } from './AddProductsToCartForm'
+import {
+  useAddProductsToCartAction,
+  UseAddProductsToCartActionProps,
+} from './useAddProductsToCartAction'
 
-export type AddProductsToCartButtonProps = {
-  sx?: SxProps<Theme>
-  sku: string
-  index?: number
-} & Pick<
-  ButtonProps<'button'>,
-  | 'variant'
-  | 'color'
-  | 'size'
-  | 'disabled'
-  | 'fullWidth'
-  | 'startIcon'
-  | 'endIcon'
-  | 'onClick'
-  | 'loading'
->
+export type AddProductsToCartButtonProps = UseAddProductsToCartActionProps &
+  Pick<
+    ButtonProps<'button'>,
+    | 'variant'
+    | 'color'
+    | 'size'
+    | 'fullWidth'
+    | 'startIcon'
+    | 'endIcon'
+    | 'onClick'
+    | 'sx'
+    | 'children'
+  >
 
 export function AddProductsToCartButton(props: AddProductsToCartButtonProps) {
-  const { formState, setValue } = useFormAddProductsToCart()
-  const { loading, sku, index = 0, disabled, onClick } = props
-
-  const clickHandler: NonNullable<AddProductsToCartButtonProps['onClick']> = useEventCallback(
-    (e) => {
-      setValue(`cartItems.${index}.sku`, sku)
-      onClick?.(e)
-    },
-  )
+  const { children } = props
+  const action = useAddProductsToCartAction(props)
 
   return (
-    <Button
-      type='submit'
-      color='primary'
-      variant='pill'
-      size='large'
-      {...props}
-      disabled={Boolean(formState.errors.cartItems?.[index].sku?.message) || disabled}
-      loading={formState.isSubmitting || loading}
-      onClick={clickHandler}
-    >
-      <Trans id='Add to Cart' />
+    <Button type='submit' color='primary' variant='pill' size='large' {...props} {...action}>
+      {children || <Trans id='Add to Cart' />}
     </Button>
   )
 }

package/components/AddProductsToCart/AddProductsToCartError.tsx

@@ -1,5 +1,5 @@
 import { FormHelperText } from '@mui/material'
-import { useFormAddProductsToCart } from './AddProductsToCartForm'
+import { useFormAddProductsToCart } from './useFormAddProductsToCart'
 
 type AddProductsToCartErrorProps = {
   children?: React.ReactNode

package/components/AddProductsToCart/AddProductsToCartFab.tsx

@@ -0,0 +1,18 @@
+import { Fab, FabProps, iconShoppingBag } from '@graphcommerce/next-ui'
+import { SxProps, Theme } from '@mui/material'
+import {
+  useAddProductsToCartAction,
+  UseAddProductsToCartActionProps,
+} from './useAddProductsToCartAction'
+
+export type AddProductsToCartFabProps = {
+  sx?: SxProps<Theme>
+  icon?: FabProps['icon']
+} & Pick<FabProps, 'color' | 'size'> &
+  UseAddProductsToCartActionProps
+
+export function AddProductsToCartFab(props: AddProductsToCartFabProps) {
+  const { icon = iconShoppingBag } = props
+  const action = useAddProductsToCartAction(props)
+  return <Fab type='submit' {...props} {...action} icon={icon} />
+}

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -1,104 +1,111 @@
-import { UseFormGqlMutationReturn, UseFormGraphQlOptions } from '@graphcommerce/ecommerce-ui'
+import { UseFormGraphQlOptions } from '@graphcommerce/ecommerce-ui'
 import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
-import { Box, SxProps, Theme } from '@mui/material'
+import { ExtendableComponent } from '@graphcommerce/next-ui'
+import { Box, SxProps, Theme, useThemeProps } from '@mui/material'
 import { useRouter } from 'next/router'
-import { createContext, useContext, useEffect } from 'react'
+import { useMemo } from 'react'
 import {
   AddProductsToCartDocument,
   AddProductsToCartMutation,
   AddProductsToCartMutationVariables,
 } from './AddProductsToCart.gql'
-
-type RedirectType = 'added' | 'cart' | 'checkout' | undefined
-
-type AddProductsToCartFormState = AddProductsToCartMutationVariables & {
-  redirect?: RedirectType
-}
-
-type AddProductsToCartContextType = UseFormGqlMutationReturn<
-  AddProductsToCartMutation,
-  AddProductsToCartFormState
->
-
-export const addProductsToCartContext = createContext(
-  undefined as AddProductsToCartContextType | undefined,
-)
+import {
+  AddProductsToCartSnackbar,
+  AddProductsToCartSnackbarProps,
+} from './AddProductsToCartSnackbar'
+import { AddProductsToCartContext, RedirectType } from './useFormAddProductsToCart'
 
 type AddProductsToCartFormProps = {
+  // The props are actually used, but are passed through useThemeProps and that breaks react/no-unused-prop-types
+  // eslint-disable-next-line react/no-unused-prop-types
   children: React.ReactNode
+  // eslint-disable-next-line react/no-unused-prop-types
   sx?: SxProps<Theme>
+  // eslint-disable-next-line react/no-unused-prop-types
   redirect?: RedirectType
-} & Omit<
-  UseFormGraphQlOptions<AddProductsToCartMutation, AddProductsToCartFormState>,
-  'onBeforeSubmit'
->
+} & UseFormGraphQlOptions<AddProductsToCartMutation, AddProductsToCartMutationVariables> &
+  AddProductsToCartSnackbarProps
 
+const name = 'AddProductsToCartForm'
+
+/** Expose the component to be exendable in your theme.components */
+declare module '@mui/material/styles/components' {
+  interface Components {
+    AddProductsToCartForm?: Pick<
+      ExtendableComponent<Omit<AddProductsToCartFormProps, 'children'>>,
+      'defaultProps'
+    >
+  }
+}
+
+/**
+ * Component that handles adding products to the cart. Used on the product page, but can be used for
+ * any product listing.
+ *
+ * Can be configured globally in your theme.ts;
+ *
+ * - Uses react-hook-form's useForm hook under the hood and exposes the form as a context which can be
+ *   consumed with `useFormAddProductsToCart` hook.
+ * - Cleans up the submitted data.
+ * - Redirects the user to the cart/checkout/added page after successful submission.
+ */
 export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
-  const { children, defaultValues, redirect, onComplete, sx, ...formProps } = props
+  const {
+    children,
+    redirect = 'cart',
+    onComplete,
+    sx,
+    errorSnackbar,
+    successSnackbar,
+    ...formProps
+  } = useThemeProps({ name, props })
   const router = useRouter()
 
-  const form = useFormGqlMutationCart<AddProductsToCartMutation, AddProductsToCartFormState>(
-    AddProductsToCartDocument,
-    {
-      defaultValues: {
-        ...defaultValues,
-        redirect,
-      },
+  const form = useFormGqlMutationCart<
+    AddProductsToCartMutation,
+    AddProductsToCartMutationVariables
+  >(AddProductsToCartDocument, {
+    ...formProps,
+    // We're stripping out incomplete entered options.
+    onBeforeSubmit: async (variables) => {
+      const variables2 = (await formProps.onBeforeSubmit?.(variables)) ?? variables
+      if (variables2 === false) return false
 
-      // We're stripping out incomplete entered options.
-      onBeforeSubmit: ({ cartId, cartItems }) => ({
+      const { cartId, cartItems } = variables2
+      return {
         cartId,
         cartItems: cartItems
           .filter((cartItem) => cartItem.sku)
           .map((cartItem) => ({
             ...cartItem,
+            quantity: cartItem.quantity || 1,
             selected_options: cartItem.selected_options?.filter(Boolean),
             entered_options: cartItem.entered_options?.filter((option) => option?.value),
           })),
-      }),
-      onComplete: async (result, variables) => {
-        await onComplete?.(result, variables)
+      }
+    },
+    onComplete: async (result, variables) => {
+      await onComplete?.(result, variables)
 
-        if (
-          result.data?.addProductsToCart?.user_errors?.length ||
-          result.errors?.length ||
-          !redirect
-        )
-          return
+      if (result.data?.addProductsToCart?.user_errors?.length || result.errors?.length || !redirect)
+        return
 
-        if (redirect === 'checkout') await router.push('/checkout')
-        if (redirect === 'added') await router.push({ pathname: '/checkout/added' })
-        if (redirect === 'cart') await router.push({ pathname: '/cart' })
-      },
-      ...formProps,
+      if (redirect === 'checkout') await router.push('/checkout')
+      if (redirect === 'added') await router.push({ pathname: '/checkout/added' })
+      if (redirect === 'cart') await router.push({ pathname: '/cart' })
     },
-  )
-
-  // When the value changes, update the value in the form
-  useEffect(() => {
-    if (form.getValues('redirect') !== redirect) form.setValue('redirect', redirect)
-  }, [form, redirect])
+  })
 
   const submit = form.handleSubmit(() => {})
 
   return (
-    <addProductsToCartContext.Provider value={form}>
-      <Box component='form' onSubmit={submit} noValidate sx={sx}>
+    <AddProductsToCartContext.Provider
+      value={useMemo(() => ({ ...form, redirect }), [form, redirect])}
+    >
+      <Box component='form' onSubmit={submit} noValidate sx={sx} className={name}>
         {children}
       </Box>
-    </addProductsToCartContext.Provider>
+      <AddProductsToCartSnackbar errorSnackbar={errorSnackbar} successSnackbar={successSnackbar} />
+    </AddProductsToCartContext.Provider>
   )
 }
-
-export function useFormAddProductsToCart(optional: true): AddProductsToCartContextType | undefined
-export function useFormAddProductsToCart(optional?: false): AddProductsToCartContextType
-export function useFormAddProductsToCart(optional = false) {
-  const context = useContext(addProductsToCartContext)
-
-  if (!optional && typeof context === 'undefined') {
-    throw Error(
-      'useFormAddProductsToCart must be used within a AddProductsToCartForm or provide the optional=true argument',
-    )
-  }
-  return context
-}

package/components/AddProductsToCart/AddProductsToCartQuantity.tsx

@@ -1,5 +1,5 @@
 import { NumberFieldElement, NumberFieldElementProps } from '@graphcommerce/ecommerce-ui'
-import { useFormAddProductsToCart } from './AddProductsToCartForm'
+import { useFormAddProductsToCart } from './useFormAddProductsToCart'
 
 type AddToCartQuantityProps = Omit<
   NumberFieldElementProps,

package/components/AddProductsToCart/AddProductsToCartSnackbar.tsx

@@ -1,69 +1,84 @@
 import { ApolloCartErrorSnackbar } from '@graphcommerce/magento-cart'
 import {
   Button,
+  ErrorSnackbar,
+  ErrorSnackbarProps,
+  filterNonNullableKeys,
   iconChevronRight,
   IconSvg,
   MessageSnackbar,
-  ErrorSnackbar,
+  MessageSnackbarProps,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import PageLink from 'next/link'
-import { useFormAddProductsToCart } from './AddProductsToCartForm'
+import { useFormAddProductsToCart } from './useFormAddProductsToCart'
 
-type AddToCartMessageProps = { name?: string | null }
+export type AddProductsToCartSnackbarProps = {
+  errorSnackbar?: Omit<ErrorSnackbarProps, 'open'>
+  successSnackbar?: Omit<MessageSnackbarProps, 'open' | 'action'>
+}
 
-export function AddProductsToCartSnackbar(props: AddToCartMessageProps) {
-  const { name } = props
-  const { formState, error, data, getValues } = useFormAddProductsToCart()
+export function AddProductsToCartSnackbar(props: AddProductsToCartSnackbarProps) {
+  const { errorSnackbar, successSnackbar } = props
+  const { formState, error, data, redirect } = useFormAddProductsToCart()
 
   const showSuccess =
     !formState.isSubmitting &&
     formState.isSubmitSuccessful &&
     !error?.message &&
     !data?.addProductsToCart?.user_errors?.length &&
-    !getValues('redirect')
+    !redirect
 
+  const items = filterNonNullableKeys(data?.addProductsToCart?.cart.items)
+
+  const showErrorSnackbar = (data?.addProductsToCart?.user_errors?.length ?? 0) > 0
   return (
     <>
-      <ApolloCartErrorSnackbar error={error} />
-
-      <ErrorSnackbar
-        variant='pill'
-        severity='error'
-        open={(data?.addProductsToCart?.user_errors?.length ?? 0) > 0}
-        action={
-          <Button size='medium' variant='pill' color='secondary'>
-            <Trans id='Ok' />
-          </Button>
-        }
-      >
-        <>{data?.addProductsToCart?.user_errors?.map((e) => e?.message).join(', ')}</>
-      </ErrorSnackbar>
+      {error && <ApolloCartErrorSnackbar error={error} />}
 
-      <MessageSnackbar
-        open={showSuccess}
-        variant='pill'
-        action={
-          <PageLink href='/cart' passHref>
-            <Button
-              id='view-shopping-cart-button'
-              size='medium'
-              variant='pill'
-              color='secondary'
-              endIcon={<IconSvg src={iconChevronRight} />}
-              sx={{ display: 'flex' }}
-            >
-              <Trans id='View shopping cart' />
+      {showErrorSnackbar && (
+        <ErrorSnackbar
+          variant='pill'
+          severity='error'
+          action={
+            <Button size='medium' variant='pill' color='secondary'>
+              <Trans id='Ok' />
             </Button>
-          </PageLink>
-        }
-      >
-        <Trans
-          id='<0>{name}</0> has been added to your shopping cart!'
-          components={{ 0: <strong /> }}
-          values={{ name }}
-        />
-      </MessageSnackbar>
+          }
+          {...errorSnackbar}
+          open={showErrorSnackbar}
+        >
+          <>{data?.addProductsToCart?.user_errors?.map((e) => e?.message).join(', ')}</>
+        </ErrorSnackbar>
+      )}
+
+      {showSuccess && (
+        <MessageSnackbar
+          variant='pill'
+          {...successSnackbar}
+          open={showSuccess}
+          action={
+            <PageLink href='/cart' passHref>
+              <Button
+                id='view-shopping-cart-button'
+                size='medium'
+                variant='pill'
+                color='secondary'
+                endIcon={<IconSvg src={iconChevronRight} />}
+                sx={{ display: 'flex' }}
+              >
+                <Trans id='View shopping cart' />
+              </Button>
+            </PageLink>
+          }
+        >
+          <Trans
+            id='<0>{name}</0> has been added to your shopping cart!'
+            components={{ 0: <strong /> }}
+            values={{ name: items[items.length - 1]?.product.name }}
+          />
+        </MessageSnackbar>
+      )}
     </>
   )
 }

package/components/AddProductsToCart/index.ts

@@ -3,4 +3,5 @@ export * from './AddProductsToCartButton'
 export * from './AddProductsToCartError'
 export * from './AddProductsToCartForm'
 export * from './AddProductsToCartQuantity'
-export * from './AddProductsToCartSnackbar'
+export * from './useFormAddProductsToCart'
+export * from './AddProductsToCartFab'

package/components/AddProductsToCart/useAddProductsToCartAction.ts

@@ -0,0 +1,40 @@
+import { useEventCallback } from '@mui/material'
+import { useMemo } from 'react'
+import { useFormAddProductsToCart } from './useFormAddProductsToCart'
+
+export type UseAddProductsToCartActionProps = {
+  sku: string | null | undefined
+  index?: number
+  disabled?: boolean
+  loading?: boolean
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+}
+
+export type UseAddProductsToCartActionReturn = {
+  disabled: boolean
+  loading: boolean
+  onClick: React.MouseEventHandler<HTMLButtonElement>
+  onMouseDown: React.MouseEventHandler<HTMLButtonElement>
+}
+
+export function useAddProductsToCartAction(
+  props: UseAddProductsToCartActionProps,
+): UseAddProductsToCartActionReturn {
+  const { formState, setValue, getValues } = useFormAddProductsToCart()
+  const { sku, index = 0, onClick: onClickIncomming, disabled, loading } = props
+
+  return {
+    disabled: Boolean(formState.errors.cartItems?.[index].sku?.message || disabled),
+    loading: loading || (formState.isSubmitting && getValues(`cartItems.${index}.sku`) === sku),
+    onClick: useEventCallback((e) => {
+      e.stopPropagation()
+      if (formState.isSubmitting) return
+      if (process.env.NODE_ENV !== 'production') {
+        if (!sku) console.warn(`You must provide a 'sku' to useAddProductsToCartAction`)
+      }
+      setValue(`cartItems.${index}.sku`, sku ?? '')
+      onClickIncomming?.(e)
+    }),
+    onMouseDown: useEventCallback((e) => e.stopPropagation()),
+  }
+}

package/components/AddProductsToCart/useFormAddProductsToCart.ts

@@ -0,0 +1,30 @@
+import { UseFormGqlMutationReturn } from '@graphcommerce/ecommerce-ui'
+import { createContext, useContext } from 'react'
+import {
+  AddProductsToCartMutation,
+  AddProductsToCartMutationVariables,
+} from './AddProductsToCart.gql'
+
+export type RedirectType = 'added' | 'cart' | 'checkout' | undefined
+
+export type AddProductsToCartContextType = { redirect: RedirectType } & UseFormGqlMutationReturn<
+  AddProductsToCartMutation,
+  AddProductsToCartMutationVariables
+>
+
+export const AddProductsToCartContext = createContext(
+  undefined as AddProductsToCartContextType | undefined,
+)
+
+export function useFormAddProductsToCart(optional: true): AddProductsToCartContextType | undefined
+export function useFormAddProductsToCart(optional?: false): AddProductsToCartContextType
+export function useFormAddProductsToCart(optional = false) {
+  const context = useContext(AddProductsToCartContext)
+
+  if (!optional && typeof context === 'undefined') {
+    throw Error(
+      'useFormAddProductsToCart must be used within a AddProductsToCartForm or provide the optional=true argument',
+    )
+  }
+  return context
+}

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.tsx

@@ -5,38 +5,36 @@ import PageLink from 'next/link'
 import { productPageCategory } from '../ProductPageCategory/productPageCategory'
 import { ProductPageBreadcrumbFragment } from './ProductPageBreadcrumb.gql'
 
-type ProductPageBreadcrumbsProps = ProductPageBreadcrumbFragment & BreadcrumbsProps
+type ProductPageBreadcrumbsProps = ProductPageBreadcrumbFragment & Omit<BreadcrumbsProps, 'children'>
 
 export function ProductPageBreadcrumb(props: ProductPageBreadcrumbsProps) {
-  const { categories, name } = props
+  const { categories, name, ...breadcrumbProps } = props
   const prev = usePrevPageRouter()
 
   const category =
     categories?.find((c) => `/${c?.url_path}` === prev?.asPath) ?? productPageCategory(props)
 
   return (
-    <Container maxWidth={false}>
-      <Breadcrumbs>
-        <PageLink href='/' passHref>
-          <Link underline='hover' color='inherit'>
-            <Trans id='Home' />
-          </Link>
-        </PageLink>
-        {category?.breadcrumbs?.map((mapped_category, i) => (
-          <Link
-            underline='hover'
-            key={mapped_category?.category_uid}
-            color='inherit'
-            href={`/${mapped_category?.category_url_path}`}
-          >
-            {mapped_category?.category_name}
-          </Link>
-        ))}
-        <Link underline='hover' color='inherit' href={`/${category?.url_path}`}>
-          {category?.name}
+    <Breadcrumbs {...breadcrumbProps}>
+      <PageLink href='/' passHref>
+        <Link underline='hover' color='inherit'>
+          <Trans id='Home' />
         </Link>
-        <Typography color='text.primary'>{name}</Typography>
-      </Breadcrumbs>
-    </Container>
+      </PageLink>
+      {category?.breadcrumbs?.map((mapped_category, i) => (
+        <Link
+          underline='hover'
+          key={mapped_category?.category_uid}
+          color='inherit'
+          href={`/${mapped_category?.category_url_path}`}
+        >
+          {mapped_category?.category_name}
+        </Link>
+      ))}
+      <Link underline='hover' color='inherit' href={`/${category?.url_path}`}>
+        {category?.name}
+      </Link>
+      <Typography color='text.primary'>{name}</Typography>
+    </Breadcrumbs>
   )
 }

package/components/ProductPageGallery/ProductPageGallery.tsx

@@ -1,4 +1,9 @@
-import { SidebarGallery, SidebarGalleryProps, TypeRenderer } from '@graphcommerce/next-ui'
+import {
+  nonNullable,
+  SidebarGallery,
+  SidebarGalleryProps,
+  TypeRenderer,
+} from '@graphcommerce/next-ui'
 import { PropsWithChildren } from 'react'
 import { ProductPageGalleryFragment } from './ProductPageGallery.gql'
 
@@ -23,14 +28,17 @@ export function ProductPageGallery(props: ProductPageGalleryProps) {
       sidebar={children}
       aspectRatio={[width, height]}
       images={
-        media_gallery?.map((item) => {
-          if (item?.__typename === 'ProductImage')
-            return { src: item.url ?? '', alt: item.label || undefined, width, height }
-          return {
-            src: '',
-            alt: `{${item?.__typename} not yet supported}`,
-          }
-        }) ?? []
+        media_gallery
+          ?.filter(nonNullable)
+          .sort((a, b) => (a.position ?? 0) - (b.position ?? 0))
+          .map((item) => {
+            if (item.__typename === 'ProductImage')
+              return { src: item.url ?? '', alt: item.label || undefined, width, height }
+            return {
+              src: '',
+              alt: `{${item.__typename} not yet supported}`,
+            }
+          }) ?? []
       }
     />
   )

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.7.3",
+  "version": "4.8.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,15 +19,15 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.5.4",
-    "@graphcommerce/framer-scroller": "2.1.41",
+    "@graphcommerce/ecommerce-ui": "1.5.6",
+    "@graphcommerce/framer-scroller": "2.1.43",
     "@graphcommerce/framer-next-pages": "3.3.2",
     "@graphcommerce/graphql": "3.5.0",
     "@graphcommerce/graphql-mesh": "4.2.0",
     "@graphcommerce/image": "3.1.10",
-    "@graphcommerce/magento-cart": "4.9.0",
-    "@graphcommerce/magento-store": "4.3.2",
-    "@graphcommerce/next-ui": "4.28.1",
+    "@graphcommerce/magento-cart": "4.9.2",
+    "@graphcommerce/magento-store": "4.3.4",
+    "@graphcommerce/next-ui": "4.29.1",
     "schema-dts": "^1.1.0"
   },
   "peerDependencies": {