@graphcommerce/magento-cart 3.7.3 → 3.8.2

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.8.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.8.1...@graphcommerce/magento-cart@3.8.2) (2021-12-03)
+
+
+### Bug Fixes
+
+* spacing of LayoutTItle ([7afcd31](https://github.com/ho-nl/m2-pwa/commit/7afcd3163d16e902cf2ff7917f56ee6a8798f55b))
+
+
+
+
+
+# [3.8.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.7.4...@graphcommerce/magento-cart@3.8.0) (2021-12-01)
+
+
+### Bug Fixes
+
+* borderRadius ([0999901](https://github.com/ho-nl/m2-pwa/commit/0999901f6a3265f40fef18e72702d80158d8c4a9))
+
+
+### Features
+
+* borderRadius based on theme.shape.borderRadius ([7c34937](https://github.com/ho-nl/m2-pwa/commit/7c349376cd41a131c628324c299106fdb7e60484))
+
+
+
+
+
+## [3.7.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.7.3...@graphcommerce/magento-cart@3.7.4) (2021-11-27)
+
+
+### Bug Fixes
+
+* shadows ([8f43f33](https://github.com/ho-nl/m2-pwa/commit/8f43f33190e429e8abea8eddc0646ffd670f2ce8))
+
+
+
+
+
 ## [3.7.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.7.0...@graphcommerce/magento-cart@3.7.1) (2021-11-12)
 
 

package/components/ApolloCartError/ApolloCartErrorAlert.tsx

@@ -2,9 +2,9 @@ import { useQuery } from '@apollo/client'
 import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import { ApolloErrorAlert, ApolloErrorAlertProps, Button } from '@graphcommerce/next-ui'
+import { t } from '@lingui/macro'
 import Link from 'next/link'
 import React from 'react'
-import { t } from '@lingui/macro'
 import { useClearCurrentCartId } from '../../hooks/useClearCurrentCartId'
 
 export type ApolloCartErrorAlertProps = ApolloErrorAlertProps

package/components/CartAgreementsForm/CartAgreementsForm.tsx

@@ -51,9 +51,9 @@ export default function CartAgreementsForm(props: CartAgreementsFormProps) {
 
   // sort conditions so checkboxes will be placed first
   const sortedAgreements = data?.checkoutAgreements
-    ? [...data.checkoutAgreements].sort((a, b) => {
-        return a?.mode === 'MANUAL' ? -1 : b?.mode === 'MANUAL' ? 1 : 0
-      })
+    ? [...data.checkoutAgreements].sort((a, b) =>
+        a?.mode === 'MANUAL' ? -1 : b?.mode === 'MANUAL' ? 1 : 0,
+      )
     : []
 
   const form = useForm({ mode: 'onChange' })
@@ -78,7 +78,7 @@ export default function CartAgreementsForm(props: CartAgreementsFormProps) {
                 <React.Fragment key={agreement.agreement_id}>
                   {agreement.mode === 'MANUAL' ? (
                     <Controller
-                      defaultValue={''}
+                      defaultValue=''
                       name={String(agreement.agreement_id)}
                       control={control}
                       rules={{ required: t`You have to agree in order to proceed` }}
@@ -91,7 +91,7 @@ export default function CartAgreementsForm(props: CartAgreementsFormProps) {
                           classes={{ root: classes.formControlRoot }}
                         >
                           <FormControlLabel
-                            control={<Checkbox color='secondary' required={true} />}
+                            control={<Checkbox color='secondary' required />}
                             label={
                               <PageLink href={href} passHref>
                                 <Link color='secondary'>{agreement.checkbox_text}</Link>

package/components/CartFab/CartFab.tsx

@@ -26,6 +26,18 @@ const useStyles = makeStyles(
         height: responsiveVal(42, 56),
       },
     },
+    fabWrapper: {
+      position: 'relative',
+    },
+    shadow: {
+      pointerEvents: 'none',
+      borderRadius: '99em',
+      position: 'absolute',
+      height: '100%',
+      width: '100%',
+      boxShadow: theme.shadows[6],
+      top: 0,
+    },
   }),
   {
     name: 'CartFab',
@@ -42,7 +54,7 @@ type CartFabContentProps = CartFabProps & CartTotalQuantityFragment
 function CartFabContent(props: CartFabContentProps) {
   const { total_quantity, icon, ...fabProps } = props
   const cartIcon = icon ?? <SvgImageSimple src={iconShoppingBag} loading='eager' size='large' />
-  const { boxShadow, backgroundColor } = useFixedFabAnimation()
+  const { opacity, backgroundColor } = useFixedFabAnimation()
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const classes = useStyles(props)
@@ -50,11 +62,11 @@ function CartFabContent(props: CartFabContentProps) {
   return (
     <m.div
       style={{
-        boxShadow: isMobile ? undefined : boxShadow,
         backgroundColor: isMobile ? undefined : backgroundColor,
         width: 'inherit',
         borderRadius: 'inherit',
       }}
+      className={classes.fabWrapper}
     >
       <PageLink href='/cart' passHref>
         <Fab
@@ -73,6 +85,12 @@ function CartFabContent(props: CartFabContentProps) {
           )}
         </Fab>
       </PageLink>
+      <m.div
+        className={classes.shadow}
+        style={{
+          opacity: isMobile ? undefined : opacity,
+        }}
+       />
     </m.div>
   )
 }

package/components/CartItemSummary/index.tsx

@@ -32,8 +32,8 @@ const useStyles = makeStyles(
     image: {
       borderRadius: '50%',
       marginRight: theme.spacings.xs,
-      border: `5px ${theme.palette.common.white} solid`,
-      boxShadow: `0px 0px 2px ${theme.palette.grey[700]}`,
+      border: `1px solid ${theme.palette.divider}`,
+      padding: responsiveVal(5, 10),
       width: `${responsiveVal(48, 96)} !important`,
       height: `${responsiveVal(48, 96)} !important`,
       display: 'block',
@@ -77,7 +77,7 @@ export default function CartItemSummary(props: OrderSummaryProps) {
 
   if (!data?.cart) return null
 
-  const { items } = data?.cart
+  const items = data?.cart.items
 
   return (
     <div className={classes.root}>

package/components/CartSummary/index.tsx

@@ -20,7 +20,7 @@ const useStyles = makeStyles(
       borderRadius: '4px 4px 0 0',
       background: theme.palette.type === 'light' ? '#FFE10820' : theme.palette.background.paper,
       padding: theme.spacings.sm,
-      gridColumnGap: theme.spacings.xl,
+      gridColumnGap: theme.spacings.xxl,
       gridRowGap: theme.spacings.sm,
       display: `grid`,
       [theme.breakpoints.up('sm')]: {

package/components/CartTotals/CartTotals.tsx

@@ -1,5 +1,5 @@
 import { Money } from '@graphcommerce/magento-store'
-import { AnimatedRow, UseStyles } from '@graphcommerce/next-ui'
+import { AnimatedRow, responsiveVal, UseStyles } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
 import { Divider, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
@@ -11,7 +11,7 @@ import { GetCartTotalsDocument } from './GetCartTotals.gql'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     costsContainer: {
-      borderRadius: 4,
+      borderRadius: responsiveVal(theme.shape.borderRadius * 3, theme.shape.borderRadius * 4),
       background: theme.palette.type === 'light' ? '#FFE10820' : theme.palette.background.paper,
       padding: `${theme.spacings.xs} ${theme.spacings.sm}`,
     },

package/components/InlineAccount/index.tsx

@@ -62,9 +62,7 @@ export default function InlineAccount(props: InlineAccountProps) {
 
   const { data: customerTokenData } = useQuery(CustomerTokenDocument)
   const { data: isEmailAvailableData } = useQuery(IsEmailAvailableDocument, {
-    variables: {
-      email: cart?.email ?? '',
-    },
+    variables: { email: cart?.email ?? '' },
   })
 
   const { firstname, lastname } = cart?.shipping_addresses?.[0] ?? {}
@@ -73,7 +71,7 @@ export default function InlineAccount(props: InlineAccountProps) {
   )
   const canSignUp = isEmailAvailableData?.isEmailAvailable?.is_email_available === true
 
-  if (!canSignUp) return <></>
+  if (!canSignUp) return null
 
   return (
     <div>

package/hooks/useCartQuery.ts

@@ -1,5 +1,5 @@
 import { useQuery, TypedDocumentNode, QueryHookOptions } from '@apollo/client'
-import { useRouter } from 'next/router'
+import { usePageRouter } from '@graphcommerce/framer-next-pages'
 import { useCurrentCartId } from './useCurrentCartId'
 
 /**
@@ -18,7 +18,7 @@ export function useCartQuery<Q, V extends { cartId: string; [index: string]: unk
 ) {
   const { allowUrl = false, ...queryOptions } = options
 
-  const router = useRouter()
+  const router = usePageRouter()
   const currentCartId = useCurrentCartId()
   const urlCartId = router.query.cartId
   const usingUrl = allowUrl && typeof urlCartId === 'string'

package/hooks/useDisplayInclTax.ts

@@ -1,7 +1,7 @@
-import { useRouter } from 'next/router'
+import { usePageRouter } from '@graphcommerce/framer-next-pages'
 
 export function useDisplayInclTax(): boolean {
-  const { locale } = useRouter()
+  const { locale } = usePageRouter()
   const locales = (process.env.NEXT_PUBLIC_DISPLAY_INCL_TAX ?? '').split(',').map((i) => i.trim())
   return locale ? locales.includes(locale) : false
 }

package/hooks/useMergeCustomerCart.ts

@@ -1,6 +1,5 @@
 import { useMutation, useQuery } from '@apollo/client'
 import { CustomerTokenDocument, useExtractCustomerErrors } from '@graphcommerce/magento-customer'
-import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import { useEffect } from 'react'
 import { CustomerCartDocument } from './CustomerCart.gql'
 import { UseMergeCustomerCartDocument } from './UseMergeCustomerCart.gql'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-cart",
-  "version": "3.7.3",
+  "version": "3.8.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -14,22 +14,22 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.5",
+    "@graphcommerce/eslint-config-pwa": "^3.1.6",
     "@graphcommerce/prettier-config-pwa": "^3.0.4",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.16.2"
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/framer-next-pages": "^2.107.5",
-    "@graphcommerce/framer-scroller": "^1.0.4",
-    "@graphcommerce/graphql": "^2.105.5",
-    "@graphcommerce/image": "^2.105.4",
-    "@graphcommerce/magento-customer": "^3.6.3",
-    "@graphcommerce/magento-graphql": "^2.104.5",
-    "@graphcommerce/magento-store": "^3.3.3",
-    "@graphcommerce/next-ui": "^3.18.1",
-    "@graphcommerce/react-hook-form": "^2.104.0",
+    "@graphcommerce/framer-next-pages": "^2.108.0",
+    "@graphcommerce/framer-scroller": "^1.1.0",
+    "@graphcommerce/graphql": "^2.105.6",
+    "@graphcommerce/image": "^2.105.5",
+    "@graphcommerce/magento-customer": "^3.6.7",
+    "@graphcommerce/magento-graphql": "^2.104.6",
+    "@graphcommerce/magento-store": "^3.3.7",
+    "@graphcommerce/next-ui": "^3.20.0",
+    "@graphcommerce/react-hook-form": "^2.104.1",
     "@lingui/macro": "^3.12.1",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -39,5 +39,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "5ed153aa2213be8363138c0956872fe2fde2f590"
+  "gitHead": "8f156415c7f5a963e363f0d6d18fe5d6bbd5dba2"
 }