@graphcommerce/magento-cart 3.1.2 → 3.1.3

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
 
 

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/CartSummary/index.tsx

@@ -45,10 +45,7 @@ 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 })
 
   if (!data?.cart) return null
 

package/components/EmptyCart/EmptyCart.tsx

@@ -1,5 +1,11 @@
-import { responsiveVal, SvgImage, iconSadShoppingBag } from '@graphcommerce/next-ui'
-import { makeStyles, Theme, Typography } from '@material-ui/core'
+import {
+  responsiveVal,
+  SvgImage,
+  iconSadShoppingBag,
+  FullPageMessage,
+} from '@graphcommerce/next-ui'
+import { Button, makeStyles, Theme, Typography } from '@material-ui/core'
+import Link from 'next/link'
 import React from 'react'
 
 const useStyles = makeStyles(
@@ -31,6 +37,30 @@ export default function EmptyCart(props: EmptyCartProps) {
   const { children } = props
   const classes = useStyles()
 
+  return (
+    <FullPageMessage
+      title={'Your cart is empty'}
+      icon={
+        <SvgImage
+          src={iconSadShoppingBag}
+          alt='Empty Cart'
+          className={classes.img}
+          loading='eager'
+          size='large'
+        />
+      }
+      button={
+        <Link href='/' passHref>
+          <Button variant='contained' color='primary' size='large'>
+            Continue shopping
+          </Button>
+        </Link>
+      }
+    >
+      Discover our collection and add items to your basket!
+    </FullPageMessage>
+  )
+
   return (
     <div className={classes.root}>
       <div>

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.2",
+  "version": "3.1.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -21,14 +21,14 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/framer-scroller": "^0.2.6",
+    "@graphcommerce/framer-scroller": "^0.2.7",
     "@graphcommerce/graphql": "^2.103.5",
     "@graphcommerce/image": "^2.104.6",
-    "@graphcommerce/magento-customer": "^3.0.15",
+    "@graphcommerce/magento-customer": "^3.0.16",
     "@graphcommerce/magento-graphql": "^2.103.5",
-    "@graphcommerce/magento-store": "^3.0.13",
-    "@graphcommerce/next-ui": "^3.1.5",
-    "@graphcommerce/react-hook-form": "^2.102.5",
+    "@graphcommerce/magento-store": "^3.0.14",
+    "@graphcommerce/next-ui": "^3.1.6",
+    "@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": "f1d0e488921787f39a260c410790ec13d32c8143"
+  "gitHead": "717bd3c1658e421c247c1f8b210935cdb7780197"
 }