@graphcommerce/magento-cart 3.1.0 → 3.1.4

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.1.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.1.3...@graphcommerce/magento-cart@3.1.4) (2021-10-08)
+
+
+### Bug Fixes
+
+* conditional hook in CartSummary ([780c5c1](https://github.com/ho-nl/m2-pwa/commit/780c5c140e03ea5f77ea9cf5409498ed853e772c))
+* issue where the cart shippingMethod didn't have a value defined ([a1f27d1](https://github.com/ho-nl/m2-pwa/commit/a1f27d1bff01921ff2cf783394c2bb4a65285d17))
+
+
+
+
+
+## [3.1.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.1.2...@graphcommerce/magento-cart@3.1.3) (2021-10-07)
+
+
+### Bug Fixes
+
+* **cart:** agreements didn't handle state updates properly ([4401ff9](https://github.com/ho-nl/m2-pwa/commit/4401ff96a410379805d89bb2fa711df2d8a8fad0))
+* make sure if no payment method is filled in we get an error shown ([a203e57](https://github.com/ho-nl/m2-pwa/commit/a203e570caad0732427a178e8e8b10b4a15d676b))
+* make sure the CartAgreementsForm validates immediately ([eceacbb](https://github.com/ho-nl/m2-pwa/commit/eceacbb4803dd6e2701bf1835aa601c06ba4d6a3))
+
+
+
+
+
+## [3.1.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.1.0...@graphcommerce/magento-cart@3.1.1) (2021-10-06)
+
+
+### Bug Fixes
+
+* **cart-fab:** box shadow in safari ([4eb316d](https://github.com/ho-nl/m2-pwa/commit/4eb316dd0f2ab7ee2806a3acdb306af1eb72854b))
+
+
+
+
+
 # [3.1.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.0.13...@graphcommerce/magento-cart@3.1.0) (2021-10-05)
 
 

package/_playwright/fillCartAgreementsForm.ts

@@ -0,0 +1,6 @@
+import { Page } from '@playwright/test'
+
+export async function fillCartAgreementsForm(page: Page) {
+  const inputs = await page.$$('form[name=cartAgreements] input')
+  await Promise.all(inputs.map((input) => input.check()))
+}

package/components/ApolloCartError/ApolloCartErrorAlert.tsx

@@ -16,13 +16,14 @@ export default function ApolloCartErrorAlert(props: ApolloCartErrorAlertProps) {
   let action: JSX.Element | undefined
 
   const [, noSuchEntity] = graphqlErrorByCategory({ category: 'graphql-no-such-entity', error })
-  action = noSuchEntity && clear ? <Button onClick={clear}>Reset Cart</Button> : undefined
+  action = noSuchEntity ? <Button onClick={clear}>Reset Cart</Button> : undefined
 
   const [, authorizationError] = graphqlErrorByCategory({
     category: 'graphql-authorization',
     error,
     mask: token?.token ? 'Please reauthenticate and try again' : 'You must sign in to continue',
   })
+
   action =
     authorizationError && clear ? (
       <Link href='/account/signin' passHref>

package/components/ApolloCartError/ApolloCartErrorFullPage.tsx

@@ -1 +1,30 @@
-export {}
+import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
+import {
+  ApolloErrorFullPage,
+  Button,
+  SvgImage,
+  ApolloErrorFullPageProps,
+  iconLock,
+  iconSadShoppingBag,
+} from '@graphcommerce/next-ui'
+import React from 'react'
+import { useClearCurrentCartId } from '../../hooks/useClearCurrentCartId'
+
+export type ApolloCartErrorFullPageProps = Omit<ApolloErrorFullPageProps, 'icon'>
+
+export default function ApolloCartErrorFullPage(props: ApolloCartErrorFullPageProps) {
+  const { error, ...passedProps } = props
+  const clear = useClearCurrentCartId()
+
+  const [, noSuchEntity] = graphqlErrorByCategory({ category: 'graphql-no-such-entity', error })
+  const action = noSuchEntity ? <Button onClick={clear}>Reset Cart</Button> : undefined
+
+  return (
+    <ApolloErrorFullPage
+      error={error}
+      icon={<SvgImage src={iconSadShoppingBag} size={148} alt='person' />}
+      button={action}
+      {...passedProps}
+    />
+  )
+}

package/components/CartAgreementsForm/CartAgreements.graphql

@@ -0,0 +1,11 @@
+query CartAgreements {
+  checkoutAgreements {
+    agreement_id
+    checkbox_text
+    content
+    content_height
+    is_html
+    mode
+    name
+  }
+}

package/components/CartAgreementsForm/CartAgreementsForm.tsx

@@ -0,0 +1,132 @@
+import { useQuery } from '@apollo/client'
+import { FormDiv } from '@graphcommerce/next-ui'
+import {
+  Controller,
+  useForm,
+  useFormCompose,
+  UseFormComposeOptions,
+  useFormPersist,
+} from '@graphcommerce/react-hook-form'
+import {
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  Link,
+  makeStyles,
+  Theme,
+} from '@material-ui/core'
+import PageLink from 'next/link'
+import React from 'react'
+import { CartAgreementsDocument } from './CartAgreements.gql'
+
+export type CartAgreementsFormProps = Pick<UseFormComposeOptions, 'step'>
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    formDiv: {
+      paddingTop: theme.spacings.sm,
+    },
+    formInner: {
+      ...theme.typography.body1,
+      display: 'inline-block',
+    },
+    formControlRoot: {
+      display: 'block',
+    },
+    manualCheck: {
+      padding: `9px 0`,
+    },
+  }),
+  {
+    name: 'CartAgreements',
+  },
+)
+
+export default function CartAgreementsForm(props: CartAgreementsFormProps) {
+  const { step } = props
+  const { data } = useQuery(CartAgreementsDocument)
+  const classes = useStyles()
+
+  // 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
+      })
+    : []
+
+  const form = useForm({ mode: 'onChange' })
+
+  const { handleSubmit, formState, control } = form
+
+  const submit = handleSubmit(() => {})
+
+  useFormPersist({ form, name: 'PaymentAgreementsForm' })
+
+  useFormCompose({ form, step, submit, key: 'PaymentAgreementsForm' })
+
+  return (
+    <FormDiv classes={{ root: classes.formDiv }}>
+      <form noValidate onSubmit={submit} name='cartAgreements'>
+        <div className={classes.formInner}>
+          {data?.checkoutAgreements &&
+            sortedAgreements?.map(
+              (agreement) =>
+                agreement && (
+                  <React.Fragment key={agreement.agreement_id}>
+                    {agreement.mode === 'MANUAL' ? (
+                      <>
+                        <Controller
+                          defaultValue={''}
+                          name={String(agreement.agreement_id)}
+                          control={control}
+                          rules={{ required: 'You have to agree in order to proceed' }}
+                          render={({
+                            field: { onChange, value, name, ref, onBlur },
+                            fieldState: { error },
+                          }) => (
+                            <FormControl
+                              error={!!formState.errors[String(agreement.agreement_id)]}
+                              classes={{ root: classes.formControlRoot }}
+                            >
+                              <FormControlLabel
+                                control={<Checkbox color='secondary' required={true} />}
+                                label={
+                                  <PageLink
+                                    href={`/legal/view/${agreement.name
+                                      ?.toLowerCase()
+                                      .replaceAll(' ', '-')}`}
+                                    passHref
+                                  >
+                                    <Link color='secondary'>{agreement.checkbox_text}</Link>
+                                  </PageLink>
+                                }
+                                checked={!!value}
+                                inputRef={ref}
+                                onBlur={onBlur}
+                                name={name}
+                                onChange={(e) => onChange(e as React.ChangeEvent<HTMLInputElement>)}
+                              />
+                              {error?.message && <FormHelperText>{error.message}</FormHelperText>}
+                            </FormControl>
+                          )}
+                        />
+                      </>
+                    ) : (
+                      <div className={classes.manualCheck}>
+                        <PageLink
+                          href={`/legal/view/${agreement.name?.toLowerCase().replaceAll(' ', '-')}`}
+                          passHref
+                        >
+                          <Link color='secondary'>{agreement.checkbox_text}</Link>
+                        </PageLink>
+                      </div>
+                    )}
+                  </React.Fragment>
+                ),
+            )}
+        </div>
+      </form>
+    </FormDiv>
+  )
+}

package/components/CartFab/CartFab.tsx

@@ -2,6 +2,7 @@ import {
   iconShoppingBag,
   StyledBadge,
   SvgImageSimple,
+  FixedFab,
   useFixedFabAnimation,
 } from '@graphcommerce/next-ui'
 import { Fab, FabProps, NoSsr } from '@material-ui/core'
@@ -23,12 +24,20 @@ function CartFabContent(props: CartFabContentProps) {
   const cartIcon = icon ?? (
     <SvgImageSimple src={iconShoppingBag} alt='Shopping Bag' loading='eager' size='large' />
   )
-  const { filter } = useFixedFabAnimation()
+  const { boxShadow } = useFixedFabAnimation()
 
   return (
-    <m.div style={{ filter }}>
+    <m.div style={{ boxShadow, width: 'inherit', borderRadius: 'inherit' }}>
       <PageLink href='/cart' passHref>
-        <Fab aria-label='Cart' color='inherit' size='large' {...fabProps}>
+        <Fab
+          aria-label='Cart'
+          color='inherit'
+          size='large'
+          style={{
+            boxShadow: 'none',
+          }}
+          {...fabProps}
+        >
           {total_quantity > 0 ? (
             <StyledBadge color='primary' variant='dot'>
               {cartIcon}
@@ -60,8 +69,10 @@ export default function CartFab(props: CartFabProps) {
   const qty = data?.cart?.total_quantity ?? 0
 
   return (
-    <NoSsr fallback={<CartFabContent {...props} total_quantity={0} />}>
-      <CartFabContent total_quantity={qty} {...props} />
-    </NoSsr>
+    <FixedFab>
+      <NoSsr fallback={<CartFabContent {...props} total_quantity={0} />}>
+        <CartFabContent total_quantity={qty} {...props} />
+      </NoSsr>
+    </FixedFab>
   )
 }

package/components/CartSummary/index.tsx

@@ -45,19 +45,15 @@ export default function CartSummary(props: CartSummaryProps) {
   const classes = useStyles(props)
   const { children, editable } = props
 
-  const { data } = useCartQuery(GetCartSummaryDocument, {
-    // allowUrl: true,
-    fetchPolicy: 'network-only',
+  const { data } = useCartQuery(GetCartSummaryDocument, { allowUrl: true })
+  const { href: historyHref, onClick: historyOnClick } = useHistoryLink({
+    href: '/checkout',
   })
 
   if (!data?.cart) return null
 
   const { email, shipping_addresses, billing_address } = data.cart
 
-  const { href: historyHref, onClick: historyOnClick } = useHistoryLink({
-    href: '/checkout',
-  })
-
   return (
     <div className={classes.root}>
       <div className={classes.detailsContainer}>

package/components/CartTotals/CartTotals.tsx

@@ -65,9 +65,10 @@ export default function CartTotals(props: CartTotalsProps) {
   const { containerMargin } = props
   const { shipping_addresses, prices } = data.cart
   const shippingMethod = shipping_addresses?.[0]?.selected_shipping_method
+
   const shippingMethodPrices = shipping_addresses?.[0]?.available_shipping_methods?.find(
     (avail) =>
-      (shippingMethod?.amount.value ?? 0) > 0 &&
+      (shippingMethod?.amount?.value ?? 0) > 0 &&
       avail?.carrier_code === shippingMethod?.carrier_code &&
       avail?.method_code === shippingMethod?.method_code,
   )

package/components/EmptyCart/EmptyCart.tsx

@@ -1,56 +1,25 @@
-import { responsiveVal, SvgImage, iconSadShoppingBag } from '@graphcommerce/next-ui'
-import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { iconSadShoppingBag, FullPageMessage, SvgImageSimple } from '@graphcommerce/next-ui'
+import { Button } from '@material-ui/core'
+import Link from 'next/link'
 import React from 'react'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      textAlign: 'center',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      [theme.breakpoints.down('sm')]: {
-        minHeight: '70vh',
-      },
-      [theme.breakpoints.up('md')]: {
-        minHeight: '60vh',
-      },
-    },
-    img: {
-      display: 'block',
-      margin: `0 auto ${theme.spacings.xxs} auto`,
-      width: responsiveVal(120, 180),
-      height: responsiveVal(120, 180),
-    },
-  }),
-  { name: 'EmptyCart' },
-)
-
 type EmptyCartProps = { children?: React.ReactNode }
 export default function EmptyCart(props: EmptyCartProps) {
   const { children } = props
-  const classes = useStyles()
 
   return (
-    <div className={classes.root}>
-      <div>
-        <SvgImage
-          src={iconSadShoppingBag}
-          alt='Empty Cart'
-          className={classes.img}
-          loading='eager'
-          size='large'
-        />
-
-        {children ?? (
-          <>
-            <Typography variant='h3' gutterBottom component='h1'>
-              Your cart is empty
-            </Typography>
-            <Typography>Discover our collection and add items to your basket!</Typography>
-          </>
-        )}
-      </div>
-    </div>
+    <FullPageMessage
+      title='Your cart is empty'
+      icon={<SvgImageSimple src={iconSadShoppingBag} alt='Empty Cart' layout='fill' />}
+      button={
+        <Link href='/' passHref>
+          <Button variant='contained' color='primary' size='large'>
+            Continue shopping
+          </Button>
+        </Link>
+      }
+    >
+      {children ?? <>Discover our collection and add items to your basket!</>}
+    </FullPageMessage>
   )
 }

package/components/index.ts

@@ -12,8 +12,8 @@ export { default as EmptyCart } from './EmptyCart/EmptyCart'
 export * from './ApolloCartError/ApolloCartErrorAlert'
 export { default as ApolloCartErrorAlert } from './ApolloCartError/ApolloCartErrorAlert'
 
-// export { default as ApolloCartErrorFullPage } from './ApolloCartError/ApolloCartErrorFullPage'
-// export * from './ApolloCartError/ApolloCartErrorFullPage'
+export * from './ApolloCartError/ApolloCartErrorFullPage'
+export { default as ApolloCartErrorFullPage } from './ApolloCartError/ApolloCartErrorFullPage'
 
 export * from './CartSummary'
 export { default as CartSummary } from './CartSummary'
@@ -28,3 +28,6 @@ export { default as CartAddressMultiLine } from './CartAddressMultiLine'
 
 export * from './CartAddressSingleLine'
 export { default as CartAddressSingleLine } from './CartAddressSingleLine'
+
+export * from './CartAgreementsForm/CartAgreementsForm'
+export { default as CartAgreementsForm } from './CartAgreementsForm/CartAgreementsForm'

package/hooks/useClearCurrentCartId.ts

@@ -1,14 +1,13 @@
 import { useApolloClient } from '@apollo/client'
 import { CurrentCartIdDocument } from './CurrentCartId.gql'
-import { useCurrentCartId } from './useCurrentCartId'
 
 export function useClearCurrentCartId() {
   const { cache } = useApolloClient()
-  const currentCartId = useCurrentCartId()
-
-  if (!currentCartId) return undefined
 
   return () => {
+    const id = cache.readQuery({ query: CurrentCartIdDocument })?.currentCartId?.id
+    if (!id) return
+
     cache.writeQuery({
       query: CurrentCartIdDocument,
       data: { currentCartId: { __typename: 'CurrentCartId', id: null } },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-cart",
-  "version": "3.1.0",
+  "version": "3.1.4",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -14,21 +14,21 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.1",
-    "@graphcommerce/eslint-config-pwa": "^3.0.4",
+    "@graphcommerce/eslint-config-pwa": "^3.0.5",
     "@graphcommerce/prettier-config-pwa": "^3.0.2",
     "@graphcommerce/typescript-config-pwa": "^3.1.0",
     "@playwright/test": "^1.15.0"
   },
   "dependencies": {
-    "@apollo/client": "^3.3.21",
-    "@graphcommerce/framer-scroller": "^0.2.5",
-    "@graphcommerce/graphql": "^2.103.4",
-    "@graphcommerce/image": "^2.104.5",
-    "@graphcommerce/magento-customer": "^3.0.13",
-    "@graphcommerce/magento-graphql": "^2.103.4",
-    "@graphcommerce/magento-store": "^3.0.11",
-    "@graphcommerce/next-ui": "^3.1.3",
-    "@graphcommerce/react-hook-form": "^2.102.4",
+    "@apollo/client": "^3.4.16",
+    "@graphcommerce/framer-scroller": "^0.2.7",
+    "@graphcommerce/graphql": "^2.103.5",
+    "@graphcommerce/image": "^2.104.6",
+    "@graphcommerce/magento-customer": "^3.0.17",
+    "@graphcommerce/magento-graphql": "^2.103.5",
+    "@graphcommerce/magento-store": "^3.0.15",
+    "@graphcommerce/next-ui": "^3.1.7",
+    "@graphcommerce/react-hook-form": "^2.102.6",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -38,5 +38,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "bffc2d42dc3f1e6a95cbff7025ede389693f8a54"
+  "gitHead": "7c6ad9b6fdf91e48b33013218d962ad15f931db8"
 }