@graphcommerce/magento-cart-payment-method 2.106.0 → 2.106.4

package/Api/PaymentMethod.ts

@@ -1,4 +1,3 @@
-import { AvailablePaymentMethod } from '@graphcommerce/graphql'
 import { ButtonProps } from '@graphcommerce/next-ui/Button'
 import { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
 import React from 'react'
@@ -7,7 +6,7 @@ import { PaymentMethodContextFragment } from './PaymentMethodContext.gql'
 import { SelectedPaymentMethodFragment } from './SelectedPaymentMethod/SelectedPaymentMethod.gql'
 
 export type PaymentMethod = Partial<AvailablePaymentMethodFragment> &
-  Pick<AvailablePaymentMethod, 'code' | 'title'> & {
+  Pick<AvailablePaymentMethodFragment, 'code' | 'title'> & {
     child: string
     preferred?: boolean
     selected?: SelectedPaymentMethodFragment
@@ -33,6 +32,7 @@ export interface PaymentModule {
   PaymentButton?: React.VFC<PaymentButtonProps>
   PaymentToggle?: React.VFC<PaymentToggleProps>
   expandMethods?: ExpandPaymentMethods
+  PaymentHandler?: React.VFC
 }
 
 export type PaymentMethodModules = { [code: string]: PaymentModule }

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.106.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.106.3...@graphcommerce/magento-cart-payment-method@2.106.4) (2021-10-07)
+
+
+### Bug Fixes
+
+* make sure if no payment method is filled in we get an error shown ([a203e57](https://github.com/ho-nl/m2-pwa/commit/a203e570caad0732427a178e8e8b10b4a15d676b))
+
+
+
+
+
 # [2.106.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.105.11...@graphcommerce/magento-cart-payment-method@2.106.0) (2021-10-04)
 
 

package/PaymentMethodButton/PaymentMethodButton.tsx

@@ -1,6 +1,7 @@
-import { ApolloCartErrorAlert } from '@graphcommerce/magento-cart'
-import { Button, ButtonProps, FormRow } from '@graphcommerce/next-ui'
+import { ApolloCartErrorAlert, ApolloCartErrorFullPage } from '@graphcommerce/magento-cart'
+import { ApolloErrorFullPage, Button, ButtonProps, FormRow } from '@graphcommerce/next-ui'
 import { ComposedSubmit, ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
+import { Dialog } from '@material-ui/core'
 import React from 'react'
 import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
 
@@ -52,6 +53,7 @@ export default function PaymentMethodButton(props: PaymentMethodButtonProps) {
   return (
     <ComposedSubmit
       render={({ submit, buttonState, error }) => {
+        const errorVal = buttonState.isSubmitting ? undefined : error
         const button = (
           <PaymentMethodButtonRenderer
             buttonProps={buttonProps}
@@ -65,10 +67,7 @@ export default function PaymentMethodButton(props: PaymentMethodButtonProps) {
         ) : (
           <>
             <FormRow>{button}</FormRow>
-            <ApolloCartErrorAlert
-              key='error'
-              error={buttonState.isSubmitting ? undefined : error}
-            />
+            <ApolloCartErrorAlert key='error' error={errorVal} />
           </>
         )
       }}

package/PaymentMethodContext/PaymentMethodContext.tsx

@@ -26,6 +26,7 @@ export default function PaymentMethodContextProvider(props: PaymentMethodContext
   const { modules, children } = props
 
   const context = useCartQuery(GetPaymentMethodContextDocument)
+
   const cartContext = context?.data?.cart
   const [methods, setMethods] = useState<PaymentMethod[]>([])
   const [selectedMethod, setSelectedMethod] = useState<PaymentMethod>()
@@ -51,7 +52,12 @@ export default function PaymentMethodContextProvider(props: PaymentMethodContext
               : Promise.resolve([]),
         ) ?? []
 
-      setMethods((await Promise.all(promises)).flat(1).sort((a) => (a.preferred ? 1 : 0)))
+      const loaded = (await Promise.all(promises)).flat(1).sort((a) => (a.preferred ? 1 : 0))
+      const sortedMethods = loaded.sort((a, b) =>
+        !modules?.[a?.code] ? 0 : !modules?.[b?.code] ? -1 : 1,
+      )
+
+      setMethods(sortedMethods)
     })()
   }, [cartContext, modules])
 
@@ -66,6 +72,11 @@ export default function PaymentMethodContextProvider(props: PaymentMethodContext
         setSelectedModule,
       }}
     >
+      {Object.entries(modules).map(([method, module]) => {
+        const PaymentHandler = module.PaymentHandler
+        if (!PaymentHandler) return null
+        return <PaymentHandler key={method} />
+      })}
       {children}
     </paymentMethodContext.Provider>
   )

package/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.tsx

@@ -21,7 +21,7 @@ export default function PaymentMethodPlaceOrderNoop(props: PaymentPlaceOrderProp
 
   useEffect(() => {
     if (!data?.placeOrder?.order || error || !cartId) return
-    clearCurrentCartId?.()
+    clearCurrentCartId()
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     router.push({ pathname: '/checkout/success', query: { cartId } })
   }, [cartId, clearCurrentCartId, data?.placeOrder?.order, error, router])

package/PaymentMethodToggles/PaymentMethodToggles.tsx

@@ -8,14 +8,20 @@ import {
   SvgImage,
   ToggleButton,
 } from '@graphcommerce/next-ui'
-import { Controller, useForm, useFormPersist } from '@graphcommerce/react-hook-form'
-import { FormControl, makeStyles, Theme } from '@material-ui/core'
+import {
+  Controller,
+  useForm,
+  useFormCompose,
+  UseFormComposeOptions,
+  useFormPersist,
+} from '@graphcommerce/react-hook-form'
+import { FormControl, FormHelperText, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
 import React, { useEffect } from 'react'
 import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
 
-export type PaymentMethodTogglesProps = Record<string, unknown>
+export type PaymentMethodTogglesProps = Pick<UseFormComposeOptions, 'step'>
 
 // function Content(props: PaymentMethod) {
 //   const { code } = props
@@ -101,6 +107,7 @@ const useStyles = makeStyles(
 )
 
 export default function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
+  const { step } = props
   const { methods, selectedMethod, setSelectedMethod, setSelectedModule, modules } =
     usePaymentMethodContext()
 
@@ -112,9 +119,12 @@ export default function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
   })
   useFormPersist({ form, name: 'PaymentMethodToggle' })
 
-  const { control, handleSubmit, watch, register, setValue } = form
+  const { control, handleSubmit, watch, register, setValue, formState } = form
+
   const submitHandler = handleSubmit(() => {})
 
+  useFormCompose({ form, step, submit: submitHandler, key: 'PaymentMethodToggles' })
+
   const paymentMethod = watch('paymentMethod')
   useEffect(() => {
     const [code, child] = paymentMethod?.split('___') ?? ['']
@@ -132,15 +142,11 @@ export default function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
 
   if (!methods || methods.length < 1) return <></>
 
-  const sortedMethods = [...methods].sort((a, b) =>
-    !modules?.[a?.code] ? 0 : !modules?.[b?.code] ? -1 : 1,
-  )
-
   return (
     <Form onSubmit={submitHandler} noValidate classes={{ root: classes.formRoot }}>
       <input type='hidden' {...register('code', { required: true })} required />
       <FormRow className={classes.root}>
-        <ScrollerProvider scrollSnapType='none'>
+        <ScrollerProvider scrollSnapAlign='center'>
           <m.div className={classes.buttonContainer}>
             <ScrollerButton
               direction='left'
@@ -159,10 +165,9 @@ export default function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
               name='paymentMethod'
               rules={{ required: 'Please select a payment method' }}
               render={({ field: { onChange, value, name, ref, onBlur } }) => (
-                <Scroller className={classes.scrollerRoot} hideScrollbar>
-                  {sortedMethods?.map((pm) => {
+                <Scroller className={classes.scrollerRoot} hideScrollbar tabIndex={0}>
+                  {methods?.map((pm) => {
                     const buttonValue = `${pm.code}___${pm.child}`
-
                     return (
                       <ToggleButton
                         name={name}
@@ -189,6 +194,12 @@ export default function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
                 </Scroller>
               )}
             />
+
+            {formState.errors.paymentMethod?.message && (
+              <FormHelperText id='my-helper-text' error>
+                {formState.errors.paymentMethod.message}
+              </FormHelperText>
+            )}
           </FormControl>
 
           <m.div className={clsx(classes.buttonContainer, classes.buttonContainerRight)}>

package/hooks/UseCartLock.graphql

@@ -0,0 +1,7 @@
+query UseCartLock($cartId: String!) {
+  cart(cart_id: $cartId) @client {
+    __typename
+    id
+    locked
+  }
+}

package/hooks/UseCartLock.graphqls

@@ -0,0 +1,7 @@
+extend type Mutation {
+  lockCart(lock: Boolean): Boolean
+}
+
+extend type Cart {
+  locked: Boolean!
+}

package/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useCartLock'

package/hooks/useCartLock.ts

@@ -0,0 +1,33 @@
+import { useApolloClient } from '@apollo/client'
+import { useCartQuery, useCurrentCartId } from '@graphcommerce/magento-cart'
+import { useCallback } from 'react'
+import { UseCartLockDocument } from './UseCartLock.gql'
+
+/**
+ * Locking a cart might is usefull in the following cases: We want to disable cart modifications
+ * while still keeping the cart active on the website.
+ *
+ * Todo: Block all operations on the cart while the cart is being blocked.
+ */
+export function useCartLock() {
+  const { cache } = useApolloClient()
+  const cartId = useCurrentCartId()
+
+  const locked = useCartQuery(UseCartLockDocument).data?.cart?.locked ?? false
+
+  const lock = useCallback(
+    (locking: boolean) => {
+      if (!cartId) return
+
+      cache.writeQuery({
+        query: UseCartLockDocument,
+        data: { cart: { __typename: 'Cart', id: cartId, locked: locking } },
+        variables: { cartId },
+        broadcast: true,
+      })
+    },
+    [cache, cartId],
+  )
+
+  return { locked, lock }
+}

package/index.ts

@@ -1,4 +1,5 @@
 export * from './Api/PaymentMethod'
+export * from './hooks'
 
 export * from './PaymentMethodContext/PaymentMethodContext'
 export { default as PaymentMethodContextProvider } from './PaymentMethodContext/PaymentMethodContext'
@@ -15,4 +16,4 @@ export { default as PaymentMethodPlaceOrder } from './PaymentMethodPlaceOrder/Pa
 export { default as PaymentMethodPlaceOrderNoop } from './PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop'
 
 export * from './PaymentMethodToggles/PaymentMethodToggles'
-export { default as PaymentMethodToggle } from './PaymentMethodToggles/PaymentMethodToggles'
+export { default as PaymentMethodToggles } from './PaymentMethodToggles/PaymentMethodToggles'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-cart-payment-method",
-  "version": "2.106.0",
+  "version": "2.106.4",
   "sideEffects": false,
   "engines": {
     "node": "14.x"
@@ -17,20 +17,20 @@
   },
   "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-cart": "^3.0.13",
-    "@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-cart": "^3.1.3",
+    "@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",
@@ -41,5 +41,5 @@
     "react-dom": "^17.0.1",
     "type-fest": "^2.3.4"
   },
-  "gitHead": "148ed6eb34bf3b3da72c1791c4195d8d141bc6e6"
+  "gitHead": "717bd3c1658e421c247c1f8b210935cdb7780197"
 }