@graphcommerce/magento-cart-payment-method 9.0.0-canary.78 → 9.0.0-canary.80

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 9.0.0-canary.80
+
+## 9.0.0-canary.79
+
 ## 9.0.0-canary.78
 
 ## 9.0.0-canary.77

package/PaymentMethodActionCardList/PaymentMethodActionCardListForm.tsx

@@ -1,11 +1,5 @@
-import {
-  ActionCard,
-  Button,
-  FormDiv,
-  ActionCardItemRenderProps,
-  ActionCardListForm,
-  ActionCardProps,
-} from '@graphcommerce/next-ui'
+import { ActionCardItemRenderProps, ActionCardListForm } from '@graphcommerce/ecommerce-ui'
+import { ActionCard, ActionCardProps, Button, FormDiv } from '@graphcommerce/next-ui'
 import {
   FormPersist,
   useForm,
@@ -75,15 +69,17 @@ export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardLi
   const [lockState] = useCartLock()
 
   type FormFields = { code: string | null; paymentMethod?: string }
-  const form = useForm<FormFields>({
-    defaultValues: { code: lockState.method },
-  })
+  const form = useForm<FormFields>({})
 
   const { control, handleSubmit, watch, setValue } = form
   const submit = handleSubmit(() => {})
 
   const paymentMethod = watch('paymentMethod')
 
+  useEffect(() => {
+    if (lockState.method) setValue('code', lockState.method)
+  }, [lockState.method, setValue])
+
   useFormCompose({ form, step: 1, submit, key: 'PaymentMethodActionCardList' })
 
   // todo: Do not useEffect to set value, usePaymentMethodContext should calculate these values.
@@ -116,6 +112,7 @@ export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardLi
         collapse
         size='large'
         color='secondary'
+        required
         items={methods.map((method) => ({
           ...method,
           value: `${method.code}___${method.child}`,

package/PaymentMethodButton/PaymentMethodButton.tsx

@@ -1,5 +1,5 @@
 import { ApolloCartErrorSnackbar } from '@graphcommerce/magento-cart'
-import { LinkOrButton, LinkOrButtonProps } from '@graphcommerce/next-ui'
+import { ErrorSnackbar, LinkOrButton, LinkOrButtonProps } from '@graphcommerce/next-ui'
 import {
   ComposedSubmit,
   ComposedSubmitProps,
@@ -50,8 +50,9 @@ export function PaymentMethodButton(props: PaymentMethodButtonProps) {
   return (
     <ComposedSubmit
       onSubmitSuccessful={onSubmitSuccessful}
-      render={({ submit, buttonState, error }) => {
+      render={({ submit, buttonState, error, rootThrown }) => {
         const errorVal = buttonState.isSubmitting ? undefined : error
+        const rootMessage = buttonState.isSubmitting ? undefined : rootThrown?.message
         const button = (
           <PaymentMethodButtonRenderer
             buttonProps={buttonProps}
@@ -66,6 +67,9 @@ export function PaymentMethodButton(props: PaymentMethodButtonProps) {
           <>
             {button}
             <ApolloCartErrorSnackbar key='error' error={errorVal} />
+            <ErrorSnackbar variant='pill' severity='error' open={!!rootMessage}>
+              <>{rootMessage}</>
+            </ErrorSnackbar>
           </>
         )
       }}

package/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.tsx

@@ -1,5 +1,6 @@
 import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import { useFormCompose } from '@graphcommerce/react-hook-form'
+import { t } from '@lingui/macro'
 import { PaymentPlaceOrderProps } from '../Api/PaymentMethod'
 import { usePaymentMethodContext } from '../PaymentMethodContext/paymentMethodContextType'
 import { PaymentMethodPlaceOrderNoopDocument } from './PaymentMethodPlaceOrderNoop.gql'
@@ -10,7 +11,11 @@ export function PaymentMethodPlaceOrderNoop(props: PaymentPlaceOrderProps) {
 
   const form = useFormGqlMutationCart(PaymentMethodPlaceOrderNoopDocument, {
     onComplete: async (result) => {
-      if (!result.data?.placeOrder?.order) return
+      if (!result.data?.placeOrder?.order)
+        throw Error(
+          t`An error occurred while processing your payment. Please contact the store owner`,
+        )
+
       await onSuccess(result.data.placeOrder.order.order_number)
     },
     submitWhileLocked: true,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart-payment-method",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.78",
+  "version": "9.0.0-canary.80",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,17 +12,18 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.78",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.78",
-    "@graphcommerce/graphql": "^9.0.0-canary.78",
-    "@graphcommerce/image": "^9.0.0-canary.78",
-    "@graphcommerce/magento-cart": "^9.0.0-canary.78",
-    "@graphcommerce/magento-cart-shipping-address": "^9.0.0-canary.78",
-    "@graphcommerce/magento-store": "^9.0.0-canary.78",
-    "@graphcommerce/next-ui": "^9.0.0-canary.78",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.78",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.78",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.78",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.80",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.80",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.80",
+    "@graphcommerce/graphql": "^9.0.0-canary.80",
+    "@graphcommerce/image": "^9.0.0-canary.80",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.80",
+    "@graphcommerce/magento-cart-shipping-address": "^9.0.0-canary.80",
+    "@graphcommerce/magento-store": "^9.0.0-canary.80",
+    "@graphcommerce/next-ui": "^9.0.0-canary.80",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.80",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.80",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.80",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",