@graphcommerce/magento-cart 3.6.4 → 3.7.1

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+### Bug Fixes
+
+* disable CartFab animation for mobile ([ea04e67](https://github.com/ho-nl/m2-pwa/commit/ea04e678b7d5ab23e903a59a7f369053d17f9e79))
+
+
+
+
+
+# [3.7.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.6.6...@graphcommerce/magento-cart@3.7.0) (2021-11-12)
+
+
+### Features
+
+* added tons of translations ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
+
+
+
+
+
+## [3.6.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.6.4...@graphcommerce/magento-cart@3.6.5) (2021-11-12)
+
+
+### Bug Fixes
+
+* behaviour for CartFab animation including darkTheme support ([6152ef3](https://github.com/ho-nl/m2-pwa/commit/6152ef32d093e42c58ee79d4d713c5b8c2870746))
+
+
+
+
+
 ## [3.6.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.6.3...@graphcommerce/magento-cart@3.6.4) (2021-11-12)
 
 

package/components/ApolloCartError/ApolloCartErrorAlert.tsx

@@ -4,6 +4,7 @@ import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import { ApolloErrorAlert, ApolloErrorAlertProps, Button } from '@graphcommerce/next-ui'
 import Link from 'next/link'
 import React from 'react'
+import { t } from '@lingui/macro'
 import { useClearCurrentCartId } from '../../hooks/useClearCurrentCartId'
 
 export type ApolloCartErrorAlertProps = ApolloErrorAlertProps
@@ -21,7 +22,7 @@ export default function ApolloCartErrorAlert(props: ApolloCartErrorAlertProps) {
   const [, authorizationError] = graphqlErrorByCategory({
     category: 'graphql-authorization',
     error,
-    mask: token?.token ? 'Please reauthenticate and try again' : 'You must sign in to continue',
+    mask: token?.token ? t`Please reauthenticate and try again` : t`You must sign in to continue`,
   })
 
   action =

package/components/ApolloCartError/ApolloCartErrorFullPage.tsx

@@ -2,9 +2,7 @@ import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import {
   ApolloErrorFullPage,
   Button,
-  SvgImage,
   ApolloErrorFullPageProps,
-  iconLock,
   iconSadFace,
   SvgImageSimple,
 } from '@graphcommerce/next-ui'

package/components/CartAgreementsForm/CartAgreementsForm.tsx

@@ -7,6 +7,7 @@ import {
   UseFormComposeOptions,
   useFormPersist,
 } from '@graphcommerce/react-hook-form'
+import { t } from '@lingui/macro'
 import {
   Checkbox,
   FormControl,
@@ -80,7 +81,7 @@ export default function CartAgreementsForm(props: CartAgreementsFormProps) {
                       defaultValue={''}
                       name={String(agreement.agreement_id)}
                       control={control}
-                      rules={{ required: 'You have to agree in order to proceed' }}
+                      rules={{ required: t`You have to agree in order to proceed` }}
                       render={({
                         field: { onChange, value, name, ref, onBlur },
                         fieldState: { error },

package/components/CartFab/CartFab.tsx

@@ -7,7 +7,8 @@ import {
   useFixedFabAnimation,
   UseStyles,
 } from '@graphcommerce/next-ui'
-import { Fab, FabProps, makeStyles, NoSsr, Theme } from '@material-ui/core'
+import { t } from '@lingui/macro'
+import { Fab, FabProps, makeStyles, NoSsr, Theme, useMediaQuery, useTheme } from '@material-ui/core'
 import { m } from 'framer-motion'
 import PageLink from 'next/link'
 import React from 'react'
@@ -20,6 +21,7 @@ const useStyles = makeStyles(
     fab: {
       boxShadow: 'none',
       [theme.breakpoints.down('sm')]: {
+        background: theme.palette.background.paper,
         width: responsiveVal(42, 56),
         height: responsiveVal(42, 56),
       },
@@ -40,15 +42,24 @@ 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 } = useFixedFabAnimation()
+  const { boxShadow, backgroundColor } = useFixedFabAnimation()
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const classes = useStyles(props)
 
   return (
-    <m.div style={{ boxShadow, width: 'inherit', borderRadius: 'inherit' }}>
+    <m.div
+      style={{
+        boxShadow: isMobile ? undefined : boxShadow,
+        backgroundColor: isMobile ? undefined : backgroundColor,
+        width: 'inherit',
+        borderRadius: 'inherit',
+      }}
+    >
       <PageLink href='/cart' passHref>
         <Fab
-          aria-label='Cart'
-          color='default'
+          aria-label={t`Cart`}
+          color='inherit'
           size='large'
           classes={{ root: classes.fab }}
           {...fabProps}

package/components/CartItemSummary/index.tsx

@@ -8,6 +8,7 @@ import {
   SvgImageSimple,
   UseStyles,
 } from '@graphcommerce/next-ui'
+import { t } from '@lingui/macro'
 import { Divider, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
@@ -84,7 +85,7 @@ export default function CartItemSummary(props: OrderSummaryProps) {
         classes={{
           sectionHeaderWrapper: classes.sectionHeaderWrapper,
         }}
-        labelLeft='Order summary'
+        labelLeft={t`Order summary`}
         // labelRight={
         //   <PageLink href='/download' passHref>
         //     <Link color='secondary'>Download invoice</Link>

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -1,5 +1,6 @@
 import { Money } from '@graphcommerce/magento-store'
 import { Button, iconChevronRight, SvgImageSimple } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
 import { makeStyles, Theme } from '@material-ui/core'
 import PageLink from 'next/link'
 import React, { PropsWithChildren } from 'react'
@@ -46,7 +47,9 @@ export default function CartStartCheckout(props: CartStartCheckoutProps) {
           endIcon={<SvgImageSimple src={iconChevronRight} inverted />}
           disabled={!hasTotals}
         >
-          <span className={classes.checkoutButtonTotal}>Start Checkout</span>{' '}
+          <span className={classes.checkoutButtonTotal}>
+            <Trans>Start Checkout</Trans>
+          </span>{' '}
           {hasTotals && (
             <span className={classes.checkoutMoney}>
               <Money {...prices?.grand_total} />

package/components/CartSummary/index.tsx

@@ -1,5 +1,6 @@
 import { useHistoryLink } from '@graphcommerce/framer-next-pages'
 import { SectionContainer, UseStyles } from '@graphcommerce/next-ui'
+import { t, Trans } from '@lingui/macro'
 import { Link, makeStyles, Theme, Typography } from '@material-ui/core'
 import PageLink from 'next/link'
 import React from 'react'
@@ -63,7 +64,7 @@ export default function CartSummary(props: CartSummaryProps) {
         <div>
           <SectionContainer
             variantLeft='h5'
-            labelLeft='Confirmation + Track & trace'
+            labelLeft={t`Confirmation + Track & trace`}
             classes={{ sectionHeaderWrapper: classes.sectionHeaderWrapper }}
           />
           <Typography variant='body1'>{email || ''}</Typography>
@@ -71,7 +72,7 @@ export default function CartSummary(props: CartSummaryProps) {
         <div>
           <SectionContainer
             variantLeft='h5'
-            labelLeft='Shipping method'
+            labelLeft={t`Shipping method`}
             classes={{ sectionHeaderWrapper: classes.sectionHeaderWrapper }}
           />
           <Typography variant='body1'>
@@ -84,13 +85,13 @@ export default function CartSummary(props: CartSummaryProps) {
             <div>
               <SectionContainer
                 variantLeft='h5'
-                labelLeft='Shipping address'
+                labelLeft={t`Shipping address`}
                 classes={{ sectionHeaderWrapper: classes.sectionHeaderWrapper }}
                 labelRight={
                   editable ? (
                     <PageLink href={historyHref} passHref>
                       <Link color='secondary' variant='body2' onClick={historyOnClick}>
-                        Edit
+                        <Trans>Edit</Trans>
                       </Link>
                     </PageLink>
                   ) : undefined
@@ -101,13 +102,13 @@ export default function CartSummary(props: CartSummaryProps) {
             <div>
               <SectionContainer
                 variantLeft='h5'
-                labelLeft='Billing Address'
+                labelLeft={t`Billing Address`}
                 classes={{ sectionHeaderWrapper: classes.sectionHeaderWrapper }}
                 labelRight={
                   editable ? (
                     <PageLink href='/checkout/edit/billing-address' passHref>
                       <Link color='secondary' variant='body2'>
-                        Edit
+                        <Trans>Edit</Trans>
                       </Link>
                     </PageLink>
                   ) : undefined

package/components/CartTotals/CartTotals.tsx

@@ -1,5 +1,6 @@
-import { Money, MoneyProps } from '@graphcommerce/magento-store'
+import { Money } from '@graphcommerce/magento-store'
 import { AnimatedRow, UseStyles } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
 import { Divider, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import { AnimatePresence } from 'framer-motion'
@@ -83,7 +84,9 @@ export default function CartTotals(props: CartTotalsProps) {
       <AnimatePresence initial={false}>
         {prices?.subtotal_including_tax && (
           <AnimatedRow className={classes.costsRow} key='subtotal'>
-            <div>Products</div>
+            <div>
+              <Trans>Products</Trans>
+            </div>
             <div className={classes.money}>
               <Money
                 {...(inclTax ? prices.subtotal_including_tax : prices.subtotal_excluding_tax)}
@@ -131,7 +134,9 @@ export default function CartTotals(props: CartTotalsProps) {
         {shippingMethod && (
           <AnimatedRow className={classes.costsRow} key='shippingMethod'>
             <div>
-              Shipping ({shippingMethod.carrier_title} {shippingMethod.method_title})
+              <Trans>
+                Shipping ({shippingMethod.carrier_title} {shippingMethod.method_title})
+              </Trans>
             </div>
             <div className={classes.money}>
               <Money
@@ -162,7 +167,9 @@ export default function CartTotals(props: CartTotalsProps) {
             className={clsx(classes.costsRow, classes.costsGrandTotal)}
             key='grand_total'
           >
-            <div>Grand total</div>
+            <div>
+              <Trans>Grand total</Trans>
+            </div>
             <div className={classes.money}>
               <Money {...prices.grand_total} />
             </div>
@@ -175,7 +182,9 @@ export default function CartTotals(props: CartTotalsProps) {
               className={clsx(classes.costsRow, classes.costsTax)}
               key={`incl${tax?.label}`}
             >
-              <div>Including {tax?.label}</div>
+              <div>
+                <Trans>Including {tax?.label}</Trans>
+              </div>
               <div className={classes.money}>
                 <Money {...tax?.amount} />
               </div>

package/components/EmptyCart/EmptyCart.tsx

@@ -20,7 +20,7 @@ export default function EmptyCart(props: EmptyCartProps) {
         </Link>
       }
     >
-      {children ?? <Trans>Discover our collection and add items to your basket!</Trans>}
+      {children ?? <Trans>Discover our collection and add items to your cart!</Trans>}
     </FullPageMessage>
   )
 }

package/components/InlineAccount/index.tsx

@@ -7,6 +7,7 @@ import {
 import Button from '@graphcommerce/next-ui/Button'
 import FormRow from '@graphcommerce/next-ui/Form/FormRow'
 import { UseStyles } from '@graphcommerce/next-ui/Styles'
+import { Trans } from '@lingui/macro'
 import { makeStyles, TextField, Theme, Typography } from '@material-ui/core'
 import React, { useState } from 'react'
 import { useCartQuery } from '../../hooks/useCartQuery'
@@ -82,9 +83,9 @@ export default function InlineAccount(props: InlineAccountProps) {
             <div className={classes.innerContainer}>
               <div>
                 <Typography variant='h4' className={classes.title}>
-                  {title ?? 'No account yet?'}
+                  {title ?? <Trans>No account yet?</Trans>}
                 </Typography>
-                {description ?? 'You can track your order status and much more!'}
+                {description ?? <Trans>You can track your order status and much more!</Trans>}
               </div>
               <div>
                 {!toggled && (
@@ -95,7 +96,7 @@ export default function InlineAccount(props: InlineAccountProps) {
                     onClick={() => setToggled(!toggled)}
                     className={classes.button}
                   >
-                    Create an account
+                    <Trans>Create an account</Trans>
                   </Button>
                 )}
               </div>
@@ -128,9 +129,9 @@ export default function InlineAccount(props: InlineAccountProps) {
           <div className={classes.innerContainer}>
             <div>
               <Typography variant='h4' className={classes.title}>
-                {title ?? 'Have an account?'}
+                {title ?? <Trans>Have an account?</Trans>}
               </Typography>
-              {description ?? 'You can find your order history in your account!'}
+              {description ?? <Trans>You can find your order history in your account!</Trans>}
             </div>
             <div>
               <Button
@@ -139,7 +140,7 @@ export default function InlineAccount(props: InlineAccountProps) {
                 href={accountHref}
                 className={classes.button}
               >
-                My account
+                <Trans>Account</Trans>
               </Button>
             </div>
           </div>

package/hooks/useCartIdCreate.ts

@@ -1,4 +1,5 @@
 import { useMutation } from '@apollo/client'
+import { t } from '@lingui/macro'
 import { CreateEmptyCartDocument } from './CreateEmptyCart.gql'
 import { useAssignCurrentCartId } from './useAssignCurrentCartId'
 import { useCurrentCartId } from './useCurrentCartId'
@@ -12,7 +13,7 @@ export function useCartIdCreate() {
     if (cartId) return cartId
 
     const { data } = await create()
-    if (!data?.createEmptyCart) throw Error('Could not create an empty cart')
+    if (!data?.createEmptyCart) throw Error(t`Could not create an empty cart`)
 
     // We store the cartId that is returned as the currentCartId result
     assignCurrentCartId(data.createEmptyCart)

package/hooks/useCartQuery.ts

@@ -27,8 +27,10 @@ export function useCartQuery<Q, V extends { cartId: string; [index: string]: unk
 
   if (usingUrl && typeof queryOptions.fetchPolicy === 'undefined')
     queryOptions.fetchPolicy = 'cache-only'
+
   if (usingUrl && typeof queryOptions.returnPartialData === 'undefined')
     queryOptions.returnPartialData = true
+
   queryOptions.variables = { cartId, ...options?.variables } as V
   queryOptions.skip = queryOptions?.skip || !cartId
   queryOptions.ssr = false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-cart",
-  "version": "3.6.4",
+  "version": "3.7.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -14,22 +14,23 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.4",
+    "@graphcommerce/eslint-config-pwa": "^3.1.5",
     "@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-scroller": "^1.0.3",
-    "@graphcommerce/graphql": "^2.105.4",
-    "@graphcommerce/image": "^2.105.3",
-    "@graphcommerce/magento-customer": "^3.5.4",
-    "@graphcommerce/magento-graphql": "^2.104.4",
-    "@graphcommerce/magento-store": "^3.2.19",
-    "@graphcommerce/next-ui": "^3.15.2",
-    "@graphcommerce/react-hook-form": "^2.103.1",
-    "@graphql-typed-document-node/core": "^3.1.0",
+    "@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.1",
+    "@graphcommerce/magento-graphql": "^2.104.5",
+    "@graphcommerce/magento-store": "^3.3.1",
+    "@graphcommerce/next-ui": "^3.17.1",
+    "@graphcommerce/react-hook-form": "^2.104.0",
+    "@lingui/macro": "^3.12.1",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "clsx": "^1.1.1",
@@ -38,5 +39,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "47e8be849eaecea00f8673696ae1ec3283ec5fd6"
+  "gitHead": "e8578cc336e58d896531179f5fcb6973e8a983ce"
 }