Various fixes

.changeset/afraid-ants-shout.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-product': patch
+---
+
+Hide ProductScroller components when no items are available

.changeset/small-onions-marry.md

@@ -0,0 +1,28 @@
+---
+'@graphcommerce/magento-cart-shipping-address': patch
+'@graphcommerce/magento-cart-shipping-method': patch
+'@graphcommerce/magento-product-configurable': patch
+'@graphcommerce/magento-product-downloadable': patch
+'@graphcommerce/magento-product-grouped': patch
+'@graphcommerce/magento-product-bundle': patch
+'@graphcommerce/mollie-magento-payment': patch
+'@graphcommerce/magento-pagebuilder': patch
+'@graphcommerce/magento-cart-items': patch
+'@graphcommerce/magento-newsletter': patch
+'@graphcommerce/magento-category': patch
+'@graphcommerce/magento-customer': patch
+'@graphcommerce/magento-wishlist': patch
+'@graphcommerce/framer-scroller': patch
+'@graphcommerce/magento-compare': patch
+'@graphcommerce/magento-product': patch
+'@graphcommerce/algolia-search': patch
+'@graphcommerce/magento-review': patch
+'@graphcommerce/magento-search': patch
+'@graphcommerce/magento-store': patch
+'@graphcommerce/ecommerce-ui': patch
+'@graphcommerce/magento-cart': patch
+'@graphcommerce/graphcms-ui': patch
+'@graphcommerce/next-ui': patch
+---
+
+Made all component prop types exported

.changeset/spotty-moons-jog.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-product-configurable': patch
+---
+
+Respect configurableVariantValues.gallery config when selecting a configurable variant. The image should only change to the simple product image when the config is set to true, otherwise the configurable image should remain. To keep this functionality, please set `configurableVariantValues: { gallery: true }` in your graphcommerce.config.js

.changeset/ten-camels-repeat.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-product': patch
+---
+
+Allow adding elements after/between product list items (e.g. banners)

.changeset/witty-beers-fail.md

@@ -0,0 +1,11 @@
+---
+'@graphcommerce/magento-cart-shipping-method': patch
+'@graphcommerce/magento-product-configurable': patch
+'@graphcommerce/magento-customer': patch
+'@graphcommerce/magento-wishlist': patch
+'@graphcommerce/magento-product': patch
+'@graphcommerce/ecommerce-ui': patch
+'@graphcommerce/next-ui': patch
+---
+
+Allow changing various props for internal components

packages/algolia-search/components/SearchBox/SearchBox.tsx

@@ -7,7 +7,7 @@ import { useCallback, useEffect, useRef } from 'react'
 import type { UseSearchBoxProps } from 'react-instantsearch-hooks-web'
 import { useHits, useSearchBox } from 'react-instantsearch-hooks-web'
 
-type SearchBoxProps = UseSearchBoxProps & SearchFormProps
+export type SearchBoxProps = UseSearchBoxProps & SearchFormProps
 
 export function SearchBox(props: SearchBoxProps) {
   const { search, textFieldProps, sx = [] } = props

packages/ecommerce-ui/components/ApolloError/ApolloErrorSnackbar.tsx

@@ -8,7 +8,7 @@ export type ApolloErrorSnackbarProps = {
 } & Pick<ErrorSnackbarProps, 'action' | 'onClose'>
 
 export function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {
-  const { error, action, ...passedProps } = props
+  const { error, ...passedProps } = props
 
   if (!error) return null
 

packages/ecommerce-ui/components/ComposedSubmitButton/ComposedSubmitButton.tsx

@@ -3,7 +3,7 @@ import { Button, IconSvg, iconChevronRight } from '@graphcommerce/next-ui'
 import type { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
 import { forwardRef } from 'react'
 
-type ComposedSubmitButtonProps = ComposedSubmitRenderComponentProps &
+export type ComposedSubmitButtonProps = ComposedSubmitRenderComponentProps &
   Omit<ButtonProps, 'loading' | 'onSubmit'>
 
 /** Makes a ComposedSubmitRenderComponent rendered as a LinkOrButton */

packages/ecommerce-ui/components/ComposedSubmitButton/ComposedSubmitLinkOrButton.tsx

@@ -3,7 +3,7 @@ import { IconSvg, LinkOrButton, iconChevronRight } from '@graphcommerce/next-ui'
 import type { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
 import { forwardRef } from 'react'
 
-type ComposedLinkOrButtonProps = ComposedSubmitRenderComponentProps &
+export type ComposedLinkOrButtonProps = ComposedSubmitRenderComponentProps &
   Omit<LinkOrButtonProps, 'loading'>
 
 /** Makes a ComposedSubmitRenderComponent rendered as a LinkOrButton */

packages/framer-scroller/components/ScrollerBar.tsx

@@ -11,7 +11,7 @@ type OwnerProps = {
   direction: 'x' | 'y'
 }
 
-type ScrollerBarProps = OwnerProps & {
+export type ScrollerBarProps = OwnerProps & {
   sx?: SxProps<Theme>
 }
 

packages/framer-scroller/components/ScrollerDot.tsx

@@ -15,7 +15,7 @@ type OwnerProps = { active: boolean }
 
 const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
 
-type ScrollerDotProps = Omit<FabProps, 'onClick' | 'className'> & ItemState & { idx: number }
+export type ScrollerDotProps = Omit<FabProps, 'onClick' | 'className'> & ItemState & { idx: number }
 
 const MotionBox = styled(m.div)({})
 

packages/framer-scroller/components/ScrollerThumbnail.tsx

@@ -14,7 +14,7 @@ type OwnerProps = { active: boolean }
 
 const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
 
-type ScrollerThumbnailProps = {
+export type ScrollerThumbnailProps = {
   idx: number
   image: Pick<ImageProps, 'src' | 'height' | 'width'>
   layoutDependency: boolean

packages/framer-scroller/components/ThumbnailContainer.tsx

@@ -6,7 +6,7 @@ import React, { useRef } from 'react'
 
 const MotionBox = styled(m.div)({})
 
-type ThumbnailContainerProps = {
+export type ThumbnailContainerProps = {
   children: React.ReactNode
   sx?: SxProps<Theme>
   layoutDependency: boolean

packages/hygraph-ui/components/Asset/Asset.tsx

@@ -16,7 +16,7 @@ function isImage(asset: AssetFragment): asset is ImageAsset {
   return !!(asset.width && asset.height)
 }
 
-type AssetProps = {
+export type AssetProps = {
   asset: AssetFragment
   sx?: SxProps<Theme>
 } & Omit<ImageProps, 'src' | 'width' | 'height' | 'alt' | 'sx'>

packages/magento-cart-items/components/EditCartItem/EditCartItemForm/EditCartItemForm.tsx

@@ -13,7 +13,7 @@ import { useRemoveItemFromCart } from '../../../hooks/useRemoveItemFromCart'
 import type { CartItemToCartItemInputProps } from '../../../utils/cartItemToCartItemInput'
 import { cartItemToCartItemInput } from '../../../utils/cartItemToCartItemInput'
 
-type EditInitProps = CartItemToCartItemInputProps & AddToCartItemSelector
+export type EditInitProps = CartItemToCartItemInputProps & AddToCartItemSelector
 
 function EditInit(props: EditInitProps) {
   const { product, selectors, cartItem, index = 0 } = props

packages/magento-cart-items/components/SelectedCustomizableOptions/SelectedCustomizableOptions.tsx

@@ -4,7 +4,7 @@ import { Box } from '@mui/material'
 import type { CartItemFragment } from '../../Api/CartItem.gql'
 import type { SelectedCustomizableOptionFragment } from './SelectedCustomizableOption.gql'
 
-type SelectedCustomizableOptionProps = CartItemFragment & {
+export type SelectedCustomizableOptionProps = CartItemFragment & {
   customizable_options?: (SelectedCustomizableOptionFragment | null | undefined)[] | null
 }
 

packages/magento-cart-shipping-address/components/CustomerAddressForm/CustomerAddressActionCard.tsx

@@ -6,7 +6,7 @@ import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import { useRouter } from 'next/router'
 
-type CustomerAddressActionCardProps = ActionCardItemRenderProps<
+export type CustomerAddressActionCardProps = ActionCardItemRenderProps<
   CustomerAddressFragment | null | undefined
 >
 

packages/magento-cart-shipping-address/components/CustomerAddressForm/CustomerAddressForm.tsx

@@ -30,7 +30,7 @@ import type {
 } from './SetCustomerShippingBillingAddressOnCart.gql'
 import { SetCustomerShippingBillingAddressOnCartDocument } from './SetCustomerShippingBillingAddressOnCart.gql'
 
-type CustomerAddressListProps = Pick<UseFormComposeOptions, 'step'> & {
+export type CustomerAddressListProps = Pick<UseFormComposeOptions, 'step'> & {
   children?: React.ReactNode
   sx?: SxProps<Theme>
 }

packages/magento-cart-shipping-method/components/ShippingMethodForm/ShippingMethodActionCard.tsx

@@ -6,7 +6,7 @@ import { Trans } from '@lingui/react'
 import { Button, Chip } from '@mui/material'
 import type { AvailableShippingMethodFragment } from '../../AvailableShippingMethod/AvailableShippingMethod.gql'
 
-type ShippingMethodActionCardProps = ActionCardItemRenderProps<
+export type ShippingMethodActionCardProps = ActionCardItemRenderProps<
   AvailableShippingMethodFragment | null | undefined
 >
 

packages/magento-cart-shipping-method/components/ShippingMethodForm/ShippingMethodForm.tsx

@@ -57,6 +57,7 @@ export function ShippingMethodForm(props: ShippingMethodFormProps) {
           ...method,
           disabled: !method?.available,
           value: `${method?.carrier_code}-${method?.method_code ?? ''}`,
+          method_title: method?.method_title || '',
         })),
     [availableMethods],
   )

packages/magento-cart/components/CartFab/CartFab.tsx

@@ -23,7 +23,7 @@ export type CartFabProps = {
   BadgeProps?: BadgeProps
 } & Pick<FabProps, 'color' | 'size' | 'variant'>
 
-type CartFabContentProps = CartFabProps & CartTotalQuantityFragment
+export type CartFabContentProps = CartFabProps & CartTotalQuantityFragment
 
 const MotionDiv = styled(m.div)({})
 

packages/magento-cart/components/CartItemSummary/CartItemSummary.tsx

@@ -30,7 +30,7 @@ const parts = [
 ] as const
 const { classes } = extendableComponent(name, parts)
 
-type OrderSummaryProps = ActionCardLayoutProps & {
+export type OrderSummaryProps = ActionCardLayoutProps & {
   sx?: SxProps<Theme>
   itemProps?: Omit<
     CartItemActionCardProps,

packages/magento-cart/components/EmptyCart/EmptyCart.tsx

@@ -5,7 +5,7 @@ import type { SxProps, Theme } from '@mui/material'
 import { Button } from '@mui/material'
 import React from 'react'
 
-type EmptyCartProps = {
+export type EmptyCartProps = {
   children?: React.ReactNode
   sx?: SxProps<Theme>
 } & Pick<FullPageMessageProps, 'button' | 'disableMargin'>

packages/magento-category/components/CategoryBreadcrumb/CategoryBreadcrumb.tsx

@@ -4,7 +4,8 @@ import type { BreadcrumbsProps } from '@mui/material'
 import { Breadcrumbs, Link, Typography } from '@mui/material'
 import type { CategoryBreadcrumbFragment } from './CategoryBreadcrumb.gql'
 
-type CategoryPageBreadcrumbsProps = CategoryBreadcrumbFragment & Omit<BreadcrumbsProps, 'children'>
+export type CategoryPageBreadcrumbsProps = CategoryBreadcrumbFragment &
+  Omit<BreadcrumbsProps, 'children'>
 
 /**
  * @deprecated Please use CategoryBreadcrumbs

packages/magento-category/components/CategoryChildren/CategoryChildren.tsx

@@ -6,7 +6,7 @@ import type { SxProps, Theme } from '@mui/material'
 import { Box, Link } from '@mui/material'
 import type { CategoryChildrenFragment } from './CategoryChildren.gql'
 
-type CategoryChildrenProps = Omit<CategoryChildrenFragment, 'uid'> & {
+export type CategoryChildrenProps = Omit<CategoryChildrenFragment, 'uid'> & {
   params: ProductListParams
   sx?: SxProps<Theme>
 }

packages/magento-category/components/CategoryHeroNav/CategoryHeroNavTitle.tsx

@@ -2,7 +2,7 @@ import { LayoutTitle } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { memo } from 'react'
 
-type CategoryHeroNavTitleProps = {
+export type CategoryHeroNavTitleProps = {
   children: React.ReactNode
   sx?: SxProps<Theme>
 }

packages/magento-compare/components/CompareFab.tsx

@@ -18,7 +18,7 @@ export type CompareFabProps = {
   sx?: SxProps<Theme>
 } & Pick<ButtonProps, 'color' | 'size' | 'variant'>
 
-type CompareFabContentProps = CompareFabProps & { total_quantity: number }
+export type CompareFabContentProps = CompareFabProps & { total_quantity: number }
 
 const MotionDiv = styled(m.div)({})
 

packages/magento-compare/components/CompareListForm.tsx

@@ -4,7 +4,7 @@ import { filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
 import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react'
 import { useCompareList } from '../hooks'
 
-type CompareListFormProps = { children?: React.ReactNode }
+export type CompareListFormProps = { children?: React.ReactNode }
 
 type FormFields = { selected: number[] }
 

packages/magento-compare/components/CompareListIntroText.tsx

@@ -1,6 +1,6 @@
 import { Box, Container } from '@mui/material'
 
-type CompareListIntroTextProps = {
+export type CompareListIntroTextProps = {
   children: React.ReactNode
 }
 

packages/magento-compare/components/CompareMessageSnackbar.tsx

@@ -2,7 +2,7 @@ import { Button, IconSvg, MessageSnackbar, iconChevronRight } from '@graphcommer
 import { Trans } from '@lingui/react'
 import type { SetStateAction } from 'react'
 
-type CompareMessageSnackbarProps = {
+export type CompareMessageSnackbarProps = {
   count: number | undefined
   name: string | null | undefined
   displayMessageBar: boolean

packages/magento-compare/components/CompareProductButton.tsx

@@ -10,7 +10,7 @@ import { useCompareSummary } from '../hooks'
 import { useCompareListUidCreate } from '../hooks/useCompareListUidCreate'
 import { CompareMessageSnackbar } from './CompareMessageSnackbar'
 
-type CompareProductButtonProps = CompareProductIdInternalFragment & { sx?: SxProps<Theme> }
+export type CompareProductButtonProps = CompareProductIdInternalFragment & { sx?: SxProps<Theme> }
 
 export function CompareProductButton(props: CompareProductButtonProps) {
   const { id, name, sx } = props

packages/magento-compare/components/CompareProductToggle.tsx

@@ -5,7 +5,7 @@ import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import type { SxProps, Theme } from '@mui/material'
-import { Checkbox, NoSsr, alpha, useTheme } from '@mui/material'
+import { alpha, Checkbox, NoSsr, useTheme } from '@mui/material'
 import { useState } from 'react'
 import type { CompareProductIdInternalFragment } from '../graphql'
 import { AddProductsToCompareListDocument } from '../graphql/AddProductsToCompareList.gql'
@@ -14,7 +14,7 @@ import { useCompareSummary } from '../hooks'
 import { useCompareListUidCreate } from '../hooks/useCompareListUidCreate'
 import { CompareMessageSnackbar } from './CompareMessageSnackbar'
 
-type CompareProductToggleProps = {
+export type CompareProductToggleProps = {
   sx?: SxProps<Theme>
   product: CompareProductIdInternalFragment
 } & Pick<FabProps, 'color'>

packages/magento-compare/components/EmptyCompareListButton.tsx

@@ -7,7 +7,7 @@ import { DeleteCompareListDocument } from '../graphql/DeleteCompareList.gql'
 import { useCompareList } from '../hooks'
 import { useClearCurrentCompareListUid } from '../hooks/useClearCurrentCompareListUid'
 
-type EmptyCompareListButtonProps = Omit<LinkOrButtonProps, 'onClick' | 'children'>
+export type EmptyCompareListButtonProps = Omit<LinkOrButtonProps, 'onClick' | 'children'>
 
 export function EmptyCompareListButton(props: EmptyCompareListButtonProps) {
   const { button = {}, link = {} } = props

packages/magento-customer/components/AddressMultiLine/AddressMultiLine.tsx

@@ -13,7 +13,7 @@ import type { CustomerAddressFragment } from '../CreateCustomerAddressForm/Custo
 // 	return exports.getEuMembers().indexOf(code.toUpperCase()) != -1;
 // };
 
-type AddressMultiLineProps = CustomerAddressFragment & { sx?: SxProps<Theme> }
+export type AddressMultiLineProps = CustomerAddressFragment & { sx?: SxProps<Theme> }
 
 const name = 'AddressMultiLine'
 const parts = ['root', 'title'] as const

packages/magento-customer/components/CancelOrder/CancelOrderForm.tsx

@@ -18,7 +18,7 @@ import type { OrderDetailsFragment } from '../OrderDetails/OrderDetails.gql'
 import type { CancelOrderMutation, CancelOrderMutationVariables } from './CancelOrder.gql'
 import { CancelOrderDocument } from './CancelOrder.gql'
 
-type CancelOrderFormProps = {
+export type CancelOrderFormProps = {
   order: OrderDetailsFragment
 } & Omit<AccordionProps, 'children'>
 

packages/magento-customer/components/ChangeNameForm/ChangeNameForm.tsx

@@ -5,7 +5,7 @@ import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerE
 import { NameFields } from '../NameFields/NameFields'
 import { UpdateCustomerNameDocument } from './UpdateCustomerName.gql'
 
-type ChangeNameFormProps = {
+export type ChangeNameFormProps = {
   prefix?: string
   firstname: string
   lastname: string

packages/magento-customer/components/CustomerFab/CustomerFab.tsx

@@ -11,7 +11,7 @@ import React from 'react'
 import type { UseCustomerSessionReturn } from '../../hooks'
 import { useCustomerAccountCanSignIn, useCustomerSession } from '../../hooks'
 
-type CustomerFabContentProps = {
+export type CustomerFabContentProps = {
   icon?: React.ReactNode
   authHref: string
   guestHref: string

packages/magento-customer/components/CustomerMenuFabItem/CustomerMenuFabItem.tsx

@@ -7,7 +7,7 @@ import { useCustomerAccountCanSignIn } from '../../hooks'
 import type { UseCustomerSessionReturn } from '../../hooks/useCustomerSession'
 import { useCustomerSession } from '../../hooks/useCustomerSession'
 
-type CustomerMenuFabItemProps = {
+export type CustomerMenuFabItemProps = {
   icon?: React.ReactNode
   children: React.ReactNode
   authHref: string

packages/magento-customer/components/EditAddressForm/EditAddressForm.tsx

@@ -12,7 +12,7 @@ import { CompanyFields } from '../CompanyFields'
 import { NameFields } from '../NameFields/NameFields'
 import { UpdateCustomerAddressDocument } from './UpdateCustomerAddress.gql'
 
-type EditAddressFormProps = {
+export type EditAddressFormProps = {
   address?: AccountAddressFragment
   sx?: SxProps<Theme>
 }

packages/magento-customer/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -10,8 +10,12 @@ import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerE
 import type { ForgotPasswordMutation, ForgotPasswordMutationVariables } from './ForgotPassword.gql'
 import { ForgotPasswordDocument } from './ForgotPassword.gql'
 
-export function ForgotPasswordForm(props: { sx?: SxProps<Theme> }) {
-  const { sx = [] } = props
+export type ForgotPasswordFormProps = {
+  sx?: SxProps<Theme>
+  buttonProps?: React.ComponentProps<typeof Button>
+}
+export function ForgotPasswordForm(props: ForgotPasswordFormProps) {
+  const { sx = [], buttonProps } = props
   const form = useFormGqlMutation<ForgotPasswordMutation, ForgotPasswordMutationVariables>(
     ForgotPasswordDocument,
   )
@@ -62,6 +66,7 @@ export function ForgotPasswordForm(props: { sx?: SxProps<Theme> }) {
           color='primary'
           variant='pill'
           size='large'
+          {...buttonProps}
         >
           <Trans id='Send password reset email' />
         </Button>