@graphcommerce/magento-cart 9.0.0-canary.101 → 9.0.0-canary.103

package/components/ApolloCartError/ApolloCartErrorAlert.tsx

@@ -1,7 +1,5 @@
-import {
-  ApolloCustomerErrorAlert,
-  ApolloCustomerErrorAlertProps,
-} from '@graphcommerce/magento-customer'
+import type { ApolloCustomerErrorAlertProps } from '@graphcommerce/magento-customer'
+import { ApolloCustomerErrorAlert } from '@graphcommerce/magento-customer'
 
 export type ApolloCartErrorAlertProps = ApolloCustomerErrorAlertProps
 

package/components/ApolloCartError/ApolloCartErrorFullPage.tsx

@@ -1,7 +1,5 @@
-import {
-  ApolloCustomerErrorFullPage,
-  ApolloCustomerErrorFullPageProps,
-} from '@graphcommerce/magento-customer'
+import type { ApolloCustomerErrorFullPageProps } from '@graphcommerce/magento-customer'
+import { ApolloCustomerErrorFullPage } from '@graphcommerce/magento-customer'
 import { iconShoppingBag, IconSvg } from '@graphcommerce/next-ui'
 
 export type ApolloCartErrorFullPageProps = Omit<ApolloCustomerErrorFullPageProps, 'icon'>

package/components/ApolloCartError/ApolloCartErrorSnackbar.tsx

@@ -1,7 +1,5 @@
-import {
-  ApolloCustomerErrorSnackbar,
-  ApolloCustomerErrorSnackbarProps,
-} from '@graphcommerce/magento-customer'
+import type { ApolloCustomerErrorSnackbarProps } from '@graphcommerce/magento-customer'
+import { ApolloCustomerErrorSnackbar } from '@graphcommerce/magento-customer'
 
 export type ApolloCartErrorSnackbarProps = ApolloCustomerErrorSnackbarProps
 

package/components/CartAddressMultiLine/CartAddressMultiLine.tsx

@@ -1,7 +1,7 @@
 import type { CountryCodeEnum } from '@graphcommerce/graphql-mesh'
 import { AddressMultiLine } from '@graphcommerce/magento-customer'
 import React from 'react'
-import { CartAddressFragment } from '../CartAddress/CartAddress.gql'
+import type { CartAddressFragment } from '../CartAddress/CartAddress.gql'
 
 export type CartAddressMultiLineProps = Partial<CartAddressFragment>
 

package/components/CartAddressSingleLine/CartAddressSingleLine.tsx

@@ -1,7 +1,7 @@
 import type { CountryCodeEnum } from '@graphcommerce/graphql-mesh'
 import { AddressSingleLine } from '@graphcommerce/magento-customer'
 import React from 'react'
-import { CartAddressFragment } from '../CartAddress/CartAddress.gql'
+import type { CartAddressFragment } from '../CartAddress/CartAddress.gql'
 
 export type CartAddressSingleLineProps = CartAddressFragment & { locale?: CountryCodeEnum }
 

package/components/CartAgreementsForm/CartAgreementsForm.tsx

@@ -1,20 +1,17 @@
 import { CheckboxElement } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { extendableComponent, FormDiv } from '@graphcommerce/next-ui'
-import {
-  FormPersist,
-  useForm,
-  useFormCompose,
-  UseFormComposeOptions,
-} from '@graphcommerce/react-hook-form'
+import type { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
+import { FormPersist, useForm, useFormCompose } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
-import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Link, Typography } from '@mui/material'
 import React from 'react'
 import { CartAgreementsDocument } from './CartAgreements.gql'
 
 export type CartAgreementsFormProps = Pick<UseFormComposeOptions, 'step'> & { sx?: SxProps<Theme> }
 
-const componentName = 'CartAgreementsForm' as const
+const componentName = 'CartAgreementsForm'
 const parts = ['form', 'formInner', 'formControlRoot', 'manualCheck'] as const
 const { classes } = extendableComponent(componentName, parts)
 
@@ -117,7 +114,7 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
                       label={labelContent}
                     />
                   ) : (
-                    <Box className={classes.manualCheck} sx={{ padding: `9px 0` }}>
+                    <Box className={classes.manualCheck} sx={{ padding: '9px 0' }}>
                       {labelContent}
                     </Box>
                   )}

package/components/CartDebugger/CartDebugger.tsx

@@ -18,7 +18,7 @@ export function CartDebugger() {
             console.log('No customerToken available, nothing to break')
           } else {
             // eslint-disable-next-line no-console
-            console.log(`Changing current token to a random one`)
+            console.log('Changing current token to a random one')
             writeCartId(client.cache, `${Math.random().toString(36).slice(2)}random-cardId`)
           }
         }}

package/components/CartFab/CartFab.tsx

@@ -8,17 +8,19 @@ import {
   useFabSize,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
-import { alpha, Fab, FabProps, styled, useTheme, Box, SxProps, Theme } from '@mui/material'
+import type { BadgeProps, FabProps, SxProps, Theme } from '@mui/material'
+import { alpha, Fab, styled, useTheme, Box } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import React from 'react'
 import { useCartEnabled, useCartShouldLoginToContinue } from '../../hooks'
 import { useCartQuery } from '../../hooks/useCartQuery'
 import { CartFabDocument } from './CartFab.gql'
-import { CartTotalQuantityFragment } from './CartTotalQuantity.gql'
+import type { CartTotalQuantityFragment } from './CartTotalQuantity.gql'
 
 export type CartFabProps = {
   icon?: React.ReactNode
   sx?: SxProps<Theme>
+  BadgeProps?: BadgeProps
 } & Pick<FabProps, 'color' | 'size' | 'variant'>
 
 type CartFabContentProps = CartFabProps & CartTotalQuantityFragment
@@ -35,7 +37,7 @@ const MotionFab = m.create(
 const { classes } = extendableComponent('CartFab', ['root', 'cart', 'shadow'] as const)
 
 function CartFabContent(props: CartFabContentProps) {
-  const { total_quantity, icon, sx = [], ...fabProps } = props
+  const { total_quantity, icon, sx = [], BadgeProps, ...fabProps } = props
 
   const theme2 = useTheme()
   const scrollY = useScrollY()
@@ -75,6 +77,7 @@ function CartFabContent(props: CartFabContentProps) {
           variant='dot'
           overlap='circular'
           badgeContent={total_quantity}
+          {...BadgeProps}
         >
           {cartIcon}
         </DesktopHeaderBadge>

package/components/CartItemSummary/CartItemSummary.tsx

@@ -1,19 +1,21 @@
-import { CartItemActionCard, CartItemActionCardProps } from '@graphcommerce/magento-cart-items'
+import type { CartItemActionCardProps } from '@graphcommerce/magento-cart-items'
+import { CartItemActionCard } from '@graphcommerce/magento-cart-items'
+import type { ActionCardLayoutProps } from '@graphcommerce/next-ui'
 import {
   SectionContainer,
   extendableComponent,
   breakpointVal,
   nonNullable,
-  ActionCardLayoutProps,
   ActionCardLayout,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, Divider, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Divider } from '@mui/material'
 import { useCartQuery } from '../../hooks'
 import { CartTotals } from '../CartTotals/CartTotals'
 import { CartItemSummaryDocument } from './GetCartItemSummary.gql'
 
-const name = 'CartItemSummary' as const
+const name = 'CartItemSummary'
 const parts = [
   'root',
   'imageScrollerContainer',

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -1,10 +1,11 @@
 import { Money } from '@graphcommerce/magento-store'
 import { iconChevronRight, IconSvg, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { Box, Button, ButtonProps, Link, SxProps, Theme } from '@mui/material'
+import type { ButtonProps, SxProps, Theme } from '@mui/material'
+import { Box, Button, Link } from '@mui/material'
 import React from 'react'
 import { useCheckoutShouldLoginToContinue } from '../../hooks'
-import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
+import type { CartStartCheckoutFragment } from './CartStartCheckout.gql'
 
 export type CartStartCheckoutProps = {
   children?: React.ReactNode

package/components/CartStartCheckout/CartStartCheckoutLinkOrButton.tsx

@@ -1,9 +1,10 @@
-import { iconChevronRight, IconSvg, LinkOrButton, LinkOrButtonProps } from '@graphcommerce/next-ui'
+import type { LinkOrButtonProps } from '@graphcommerce/next-ui'
+import { iconChevronRight, IconSvg, LinkOrButton } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { useCheckoutShouldLoginToContinue } from '../../hooks'
-import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
+import type { CartStartCheckoutFragment } from './CartStartCheckout.gql'
 
 export type CartStartCheckoutLinkOrButtonProps = {
   children?: React.ReactNode

package/components/CartSummary/CartSummary.tsx

@@ -1,7 +1,8 @@
 import { useHistoryLink } from '@graphcommerce/framer-next-pages'
 import { SectionContainer, extendableComponent, breakpointVal } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, Link, SxProps, Theme, Typography, lighten } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Link, Typography, lighten } from '@mui/material'
 import React from 'react'
 import { useCartQuery } from '../../hooks'
 import { CartAddressMultiLine } from '../CartAddressMultiLine/CartAddressMultiLine'
@@ -14,7 +15,7 @@ export type CartSummaryProps = {
 
 type OwnerState = { editable?: boolean }
 
-const compName = 'CartSummary' as const
+const compName = 'CartSummary'
 const parts = ['root', 'detailsContainer', 'sectionHeaderWrapper'] as const
 const { classes } = extendableComponent<OwnerState, typeof compName, typeof parts>(compName, parts)
 
@@ -77,9 +78,9 @@ export function CartSummary(props: CartSummaryProps) {
           padding: theme.spacings.sm,
           gridColumnGap: theme.spacings.xxl,
           gridRowGap: theme.spacings.sm,
-          display: `grid`,
+          display: 'grid',
           [theme.breakpoints.up('sm')]: {
-            gridTemplateColumns: `1fr 1fr`,
+            gridTemplateColumns: '1fr 1fr',
             marginTop: theme.spacings.xxs,
           },
         })}

package/components/CartTotals/CartTotals.tsx

@@ -1,7 +1,8 @@
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent, breakpointVal } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, Divider, lighten, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Divider, lighten } from '@mui/material'
 import { useCartQuery, useDisplayInclTax } from '../../hooks'
 import { GetCartTotalsDocument } from './GetCartTotals.gql'
 
@@ -12,7 +13,7 @@ export type CartTotalsProps = OwnerProps & {
 }
 
 type OwnerProps = { containerMargin?: boolean }
-const name = 'CartTotals' as const
+const name = 'CartTotals'
 const parts = [
   'root',
   'costsDivider',
@@ -156,7 +157,7 @@ export function CartTotals(props: CartTotalsProps) {
       {additionalSubtotals}
 
       <Box key='divider'>
-        <Divider className={classes.costsDivider} sx={{ margin: `1em 0` }} />
+        <Divider className={classes.costsDivider} sx={{ margin: '1em 0' }} />
       </Box>
 
       {prices?.grand_total && (

package/components/EmptyCart/EmptyCart.tsx

@@ -1,11 +1,8 @@
-import {
-  FullPageMessage,
-  IconSvg,
-  iconShoppingBag,
-  FullPageMessageProps,
-} from '@graphcommerce/next-ui'
+import type { FullPageMessageProps } from '@graphcommerce/next-ui'
+import { FullPageMessage, IconSvg, iconShoppingBag } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Button, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Button } from '@mui/material'
 import React from 'react'
 
 type EmptyCartProps = {

package/components/InlineAccount/InlineAccount.tsx

@@ -7,7 +7,8 @@ import {
 } from '@graphcommerce/magento-customer'
 import { Button, FormRow, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, SxProps, TextField, Theme, Typography } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, TextField, Typography } from '@mui/material'
 import React, { useState } from 'react'
 import { useCartQuery } from '../../hooks/useCartQuery'
 import { InlineAccountDocument } from './InlineAccount.gql'
@@ -15,10 +16,6 @@ import { InlineAccountDocument } from './InlineAccount.gql'
 export type InlineAccountProps = {
   title?: React.ReactNode
   description?: React.ReactNode
-  /**
-   * @deprecated This is not used anymore.
-   */
-  accountHref: string
   sx?: SxProps<Theme>
 }
 

package/hooks/useAssignCurrentCartId.ts

@@ -1,4 +1,5 @@
-import { ApolloCache, useApolloClient } from '@graphcommerce/graphql'
+import type { ApolloCache } from '@graphcommerce/graphql'
+import { useApolloClient } from '@graphcommerce/graphql'
 import { cookie } from '@graphcommerce/next-ui'
 import { useCallback } from 'react'
 import { CurrentCartIdDocument } from './CurrentCartId.gql'

package/hooks/useCartQuery.ts

@@ -1,4 +1,5 @@
-import { useQuery, TypedDocumentNode, QueryHookOptions, ApolloError } from '@graphcommerce/graphql'
+import type { TypedDocumentNode, QueryHookOptions } from '@graphcommerce/graphql'
+import { useQuery, ApolloError } from '@graphcommerce/graphql'
 import { GraphQLError } from 'graphql'
 import { useRouter } from 'next/router'
 import { useCartShouldLoginToContinue } from './useCartPermissions'

package/hooks/useCurrentCartId.ts

@@ -1,9 +1,7 @@
-import { QueryHookOptions, useQuery } from '@graphcommerce/graphql'
-import {
-  CurrentCartIdDocument,
-  CurrentCartIdQuery,
-  CurrentCartIdQueryVariables,
-} from './CurrentCartId.gql'
+import type { QueryHookOptions } from '@graphcommerce/graphql'
+import { useQuery } from '@graphcommerce/graphql'
+import type { CurrentCartIdQuery, CurrentCartIdQueryVariables } from './CurrentCartId.gql'
+import { CurrentCartIdDocument } from './CurrentCartId.gql'
 
 export function useCurrentCartId<
   Q extends CurrentCartIdQuery,

package/hooks/useFormGqlMutationCart.ts

@@ -1,14 +1,10 @@
-import {
-  ApolloError,
-  MutationHookOptions,
-  TypedDocumentNode,
-  useApolloClient,
-} from '@graphcommerce/graphql'
-import {
-  useFormGqlMutation,
+import type { MutationHookOptions, TypedDocumentNode } from '@graphcommerce/graphql'
+import { ApolloError, useApolloClient } from '@graphcommerce/graphql'
+import type {
   UseFormGqlMutationReturn,
   UseFormGraphQlOptions,
 } from '@graphcommerce/react-hook-form'
+import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { GraphQLError, Kind } from 'graphql'
 import { isProtectedCartOperation } from '../link/isProtectedCartOperation'
 import { CurrentCartIdDocument } from './CurrentCartId.gql'

package/link/cartLink.ts

@@ -1,10 +1,13 @@
-import { fromPromise, globalApolloClient, Operation } from '@graphcommerce/graphql'
+import type { Operation } from '@graphcommerce/graphql'
+import { fromPromise, globalApolloClient } from '@graphcommerce/graphql'
 import { ApolloLink, Observable, onError } from '@graphcommerce/graphql/apollo'
 import { CustomerTokenDocument, getCustomerAccountCanSignIn } from '@graphcommerce/magento-customer'
-import { PushRouter, pushWithPromise } from '@graphcommerce/magento-customer/link/customerLink'
-import { ErrorCategory } from '@graphcommerce/magento-graphql'
+import type { PushRouter } from '@graphcommerce/magento-customer/link/customerLink'
+import { pushWithPromise } from '@graphcommerce/magento-customer/link/customerLink'
+import type { ErrorCategory } from '@graphcommerce/magento-graphql'
 import { t } from '@lingui/macro'
-import { GraphQLError, GraphQLFormattedError } from 'graphql'
+import type { GraphQLFormattedError } from 'graphql'
+import { GraphQLError } from 'graphql'
 import { writeCartId } from '../hooks'
 import { CreateEmptyCartDocument } from '../hooks/CreateEmptyCart.gql'
 import { getCartEnabledForUser } from '../utils'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.101",
+  "version": "9.0.0-canary.103",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,25 +12,25 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.101",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.101",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.101",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.101",
-    "@graphcommerce/framer-utils": "^9.0.0-canary.101",
-    "@graphcommerce/graphql": "^9.0.0-canary.101",
-    "@graphcommerce/image": "^9.0.0-canary.101",
-    "@graphcommerce/magento-customer": "^9.0.0-canary.101",
-    "@graphcommerce/magento-graphql": "^9.0.0-canary.101",
-    "@graphcommerce/magento-store": "^9.0.0-canary.101",
-    "@graphcommerce/next-ui": "^9.0.0-canary.101",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.101",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.101",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.101",
+    "@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/framer-utils": "^9.0.0-canary.103",
+    "@graphcommerce/graphql": "^9.0.0-canary.103",
+    "@graphcommerce/image": "^9.0.0-canary.103",
+    "@graphcommerce/magento-customer": "^9.0.0-canary.103",
+    "@graphcommerce/magento-graphql": "^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/react-hook-form": "^9.0.0-canary.103",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.103",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",
     "@mui/material": "^5.10.16",
-    "framer-motion": "^10.0.0",
+    "framer-motion": "^11.0.0",
     "graphql": "^16.0.0",
     "next": "*",
     "react": "^18.2.0",

package/plugins/MagentoCartGraphqlProvider.tsx

@@ -1,7 +1,7 @@
-import { GraphQLProviderProps } from '@graphcommerce/graphql'
+import type { GraphQLProviderProps } from '@graphcommerce/graphql'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useEventCallback } from '@mui/material'
-import { NextRouter } from 'next/router'
+import type { NextRouter } from 'next/router'
 import { useMemo } from 'react'
 import { cartLink } from '../link/cartLink'
 import { cartTypePolicies, migrateCart } from '../typePolicies'

package/plugins/useSignInFormMergeCart.ts

@@ -10,11 +10,11 @@ export const config: PluginConfig = {
   module: '@graphcommerce/magento-customer',
 }
 
-export const useSignInForm: FunctionPlugin<typeof useSignInFormType> = (useSignInForm, options) => {
+export const useSignInForm: FunctionPlugin<typeof useSignInFormType> = (useSignIn, options) => {
   const client = useApolloClient()
   const assignCurrentCartId = useAssignCurrentCartId()
 
-  return useSignInForm({
+  return useSignIn({
     ...options,
     onComplete: async (data, variables) => {
       await options.onComplete?.(data, variables)

package/test/fillCartAgreementsForm.ts

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
-import { Page } from '@playwright/test'
+import type { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
+import type { Page } from '@playwright/test'
 import { CartAgreementsDocument } from '../components/CartAgreementsForm/CartAgreements.gql'
 
 export async function fillCartAgreementsForm(

package/typePolicies.ts

@@ -1,5 +1,8 @@
-import { ApolloCache, NormalizedCacheObject } from '@graphcommerce/graphql'
-import type { StrictTypedTypePolicies } from '@graphcommerce/graphql'
+import type {
+  ApolloCache,
+  NormalizedCacheObject,
+  StrictTypedTypePolicies,
+} from '@graphcommerce/graphql'
 import type { CartPrices, QuerycartArgs, ShippingCartAddress } from '@graphcommerce/graphql-mesh'
 import { CartFabDocument } from './components/CartFab/CartFab.gql'
 import { readCartId, writeCartId } from './hooks'