@graphcommerce/magento-payment-multisafepay 9.1.0-canary.54 → 9.1.0-canary.55

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @graphcommerce/magento-payment-multisafepay
 
+## 9.1.0-canary.55
+
+### Patch Changes
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`21dc35d`](https://github.com/graphcommerce-org/graphcommerce/commit/21dc35d09521f47b7f91dc868ca776603e2da4a2) - Solve issue where the cart would remain locked if a user would return to the website without going through the checkout/payment step. ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`6a55be4`](https://github.com/graphcommerce-org/graphcommerce/commit/6a55be43ab1f53eb689abf8ad742383daf65822e) - Solve issue where the MSPPaymentHandler query would be executed multiple times. ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.54
 
 ## 9.1.0-canary.53

package/components/MSPPaymentHandler/MSPPaymentHandler.tsx

@@ -14,11 +14,12 @@ export function MSPPaymentHandler(props: PaymentHandlerProps) {
   const assignCurrentCartId = useAssignCurrentCartId()
   const { onSuccess } = usePaymentMethodContext()
 
-  const [restore, { error }] = useMutation(MSPPaymentHandlerDocument)
+  const [restore, { error, called }] = useMutation(MSPPaymentHandlerDocument)
 
   const { justLocked, success, cart_id: cartId, locked, method, order_number } = lockStatus
 
-  const canProceed = !(justLocked || !locked || !cartId || method !== code)
+  const canProceed =
+    !justLocked && locked && cartId && method === code && !called && success !== '1'
 
   // When the payment has failed we restore the current cart
   const shouldRestore = canProceed && success !== '1'

package/components/MSPRestoreLocked/MSPRestoreLocked.tsx

@@ -0,0 +1,64 @@
+import { ApolloErrorSnackbar } from '@graphcommerce/ecommerce-ui'
+import { useMutation, useQuery } from '@graphcommerce/graphql'
+import { useAssignCurrentCartId, useCartQuery } from '@graphcommerce/magento-cart'
+import { BillingPageDocument } from '@graphcommerce/magento-cart-checkout'
+import { CurrentCartIdDocument } from '@graphcommerce/magento-cart/hooks/CurrentCartId.gql'
+import { Button, FullPageMessage, iconShoppingBag, IconSvg } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
+import { useMSPCartLock } from '../../hooks/useMSPCartLock'
+import { MSPPaymentHandlerDocument } from '../MSPPaymentHandler/MSPPaymentHandler.gql'
+
+const DialogDynamic = dynamic(() => import('@mui/material').then((mod) => mod.Dialog), {
+  ssr: false,
+})
+
+export function MSPRestoreLocked() {
+  const [, , unlock] = useMSPCartLock()
+  const assignCurrentCartId = useAssignCurrentCartId()
+  const router = useRouter()
+
+  const [restore, { loading, error }] = useMutation(MSPPaymentHandlerDocument)
+  const status = useQuery(CurrentCartIdDocument).data?.currentCartId
+  const { locked } = status ?? {}
+  const cart = useCartQuery(BillingPageDocument)
+  const cartId = cart.data?.cart?.id
+  const isMsp = cart.data?.cart?.selected_payment_method?.code.startsWith('multisafepay_')
+  const isPaymentPage = router.pathname.startsWith('/checkout/payment')
+  const shouldRestore = locked && cartId && isMsp && !isPaymentPage
+
+  return (
+    <>
+      <ApolloErrorSnackbar error={error} />
+      {isMsp && (
+        <DialogDynamic open={Boolean(shouldRestore)} fullWidth>
+          <FullPageMessage
+            disableMargin
+            icon={<IconSvg src={iconShoppingBag} />}
+            title={<Trans id='Your cart is locked.' />}
+            button={
+              <Button
+                variant='pill'
+                onClick={async () => {
+                  if (!cartId) return
+                  const res = await restore({ variables: { cartId } })
+                  if (!res.data?.getPaymentMeta) return
+                  assignCurrentCartId(res.data.getPaymentMeta)
+                  await unlock({ success: null })
+                }}
+                loading={loading}
+              >
+                <Trans id='Cancel payment and unlock cart' />
+              </Button>
+            }
+          >
+            <Trans id='1. You are still paying in another window: Close this window and continue there.' />
+            <br />
+            <Trans id="2. You don't have an open payment window: Press the button below." />
+          </FullPageMessage>
+        </DialogDynamic>
+      )}
+    </>
+  )
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-payment-multisafepay",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.54",
+  "version": "9.1.0-canary.55",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,22 +12,22 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.54",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.54",
-    "@graphcommerce/graphql": "^9.1.0-canary.54",
-    "@graphcommerce/graphql-mesh": "^9.1.0-canary.54",
-    "@graphcommerce/image": "^9.1.0-canary.54",
-    "@graphcommerce/magento-cart": "^9.1.0-canary.54",
-    "@graphcommerce/magento-cart-checkout": "^9.1.0-canary.54",
-    "@graphcommerce/magento-cart-payment-method": "^9.1.0-canary.54",
-    "@graphcommerce/magento-cart-shipping-address": "^9.1.0-canary.54",
-    "@graphcommerce/magento-product": "^9.1.0-canary.54",
-    "@graphcommerce/magento-product-configurable": "^9.1.0-canary.54",
-    "@graphcommerce/magento-store": "^9.1.0-canary.54",
-    "@graphcommerce/next-ui": "^9.1.0-canary.54",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.54",
-    "@graphcommerce/react-hook-form": "^9.1.0-canary.54",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.54",
+    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.55",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.55",
+    "@graphcommerce/graphql": "^9.1.0-canary.55",
+    "@graphcommerce/graphql-mesh": "^9.1.0-canary.55",
+    "@graphcommerce/image": "^9.1.0-canary.55",
+    "@graphcommerce/magento-cart": "^9.1.0-canary.55",
+    "@graphcommerce/magento-cart-checkout": "^9.1.0-canary.55",
+    "@graphcommerce/magento-cart-payment-method": "^9.1.0-canary.55",
+    "@graphcommerce/magento-cart-shipping-address": "^9.1.0-canary.55",
+    "@graphcommerce/magento-product": "^9.1.0-canary.55",
+    "@graphcommerce/magento-product-configurable": "^9.1.0-canary.55",
+    "@graphcommerce/magento-store": "^9.1.0-canary.55",
+    "@graphcommerce/next-ui": "^9.1.0-canary.55",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.55",
+    "@graphcommerce/react-hook-form": "^9.1.0-canary.55",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.55",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/plugins/AddRestoreLocked.tsx

@@ -0,0 +1,18 @@
+import type { PagesProps } from '@graphcommerce/framer-next-pages'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { MSPRestoreLocked } from '../components/MSPRestoreLocked/MSPRestoreLocked'
+
+export const config: PluginConfig = {
+  module: '@graphcommerce/framer-next-pages',
+  type: 'component',
+}
+
+export function FramerNextPages(props: PluginProps<PagesProps>) {
+  const { Prev, ...rest } = props
+  return (
+    <>
+      <Prev {...rest} />
+      <MSPRestoreLocked />
+    </>
+  )
+}