@graphcommerce/magento-payment-afterpay 10.0.0-canary.72

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# @graphcommerce/magento-payment-afterpay
+
+## 10.0.0-canary.72
+
+## 10.0.0-canary.71

package/README.md

@@ -0,0 +1,16 @@
+# Magento Payment Afterpay
+
+Integrates GraphCommerce with the Magento Afterpay module.
+
+It requires [Afterpay](https://github.com/afterpay/afterpay-magento-2) module to
+be installed before using this package.
+
+## Installation
+
+1. Find current version of your `@graphcommerce/magento-cart-payment-method` in
+   your package.json.
+2. `yarn add @graphcommerce/magento-payment-afterpay@1.2.3` (replace 1.2.3 with
+   the version of the step above)
+
+This package uses GraphCommerce plugin systems, so there is no code modification
+required.

package/components/AfterpayPaymentActionCard/AfterpayPaymentActionCard.tsx

@@ -0,0 +1,22 @@
+import { Image } from '@graphcommerce/image'
+import type { PaymentMethodActionCardProps } from '@graphcommerce/magento-cart-payment-method'
+import { ActionCard, useIconSvgSize } from '@graphcommerce/next-ui'
+import afterpayMark from '../../icons/afterpay.png'
+
+export function AfterpayPaymentActionCard(props: PaymentMethodActionCardProps) {
+  const iconSize = useIconSvgSize('large')
+
+  return (
+    <ActionCard
+      {...props}
+      image={
+        <Image
+          layout='fixed'
+          sx={{ width: iconSize, height: iconSize, objectFit: 'contain' }}
+          unoptimized
+          src={afterpayMark}
+        />
+      }
+    />
+  )
+}

package/components/AfterpayPaymentHandler/AfterpayPaymentHandler.graphql

@@ -0,0 +1,12 @@
+mutation AfterpayPaymentHandler($cartId: String!, $paymentMethod: PaymentMethodInput!) {
+  setPaymentMethodOnCart(input: { cart_id: $cartId, payment_method: $paymentMethod }) {
+    cart {
+      ...PaymentMethodUpdated
+    }
+  }
+  placeOrder(input: { cart_id: $cartId }) {
+    order {
+      order_number
+    }
+  }
+}

package/components/AfterpayPaymentHandler/AfterpayPaymentHandler.tsx

@@ -0,0 +1,58 @@
+import { ApolloErrorSnackbar } from '@graphcommerce/ecommerce-ui'
+import { useMutation } from '@graphcommerce/graphql'
+import { useCurrentCartId } from '@graphcommerce/magento-cart'
+import type { PaymentHandlerProps } from '@graphcommerce/magento-cart-payment-method'
+import { usePaymentMethodContext } from '@graphcommerce/magento-cart-payment-method'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { useAfterpayCartLock } from '../../hooks/useAfterpayCartLock'
+import { AfterpayPaymentHandlerDocument } from './AfterpayPaymentHandler.gql'
+
+export function AfterpayPaymentHandler(props: PaymentHandlerProps) {
+  const { code } = props
+  const { push } = useRouter()
+  const [lockStatus, , unlock] = useAfterpayCartLock()
+  const { onSuccess } = usePaymentMethodContext()
+  const { currentCartId: cartId } = useCurrentCartId()
+
+  const { orderToken, status, locked, justLocked, method } = lockStatus
+  const [placeOrder, { error, called }] = useMutation(AfterpayPaymentHandlerDocument, {
+    variables: {
+      cartId,
+      paymentMethod: {
+        code,
+        afterpay: {
+          afterpay_token: orderToken ?? '',
+        },
+      },
+    },
+    errorPolicy: 'all',
+  })
+
+  useEffect(() => {
+    if (locked && !justLocked && status === 'CANCELLED')
+      void unlock({ orderToken: null, status: null })
+  }, [status, code, justLocked, locked, method, unlock])
+
+  // If successfull we clear it's cart and redirect to the success page.
+  useEffect(() => {
+    if (!orderToken || status !== 'SUCCESS' || called) return
+    if (!cartId) return
+
+    const fetchData = async () => {
+      const res = await placeOrder()
+
+      if (res.error || !res.data?.placeOrder?.order) {
+        await unlock({ orderToken: null, status: null })
+        return
+      }
+
+      await onSuccess(res.data?.placeOrder?.order.order_number)
+    }
+
+    void fetchData()
+  }, [status, called, cartId, onSuccess, placeOrder, push, orderToken, unlock])
+
+  if (error) return <ApolloErrorSnackbar error={error} />
+  return null
+}

package/components/AfterpayPaymentPlaceOrder/AfterpayPaymentPlaceOrder.graphql

@@ -0,0 +1,6 @@
+mutation AfterpayPaymentPlaceOrder($cartId: String!, $redirect_path: AfterpayRedirectPathInput!) {
+  createAfterpayCheckout(input: { cart_id: $cartId, redirect_path: $redirect_path }) {
+    afterpay_redirectCheckoutUrl
+    afterpay_token
+  }
+}

package/components/AfterpayPaymentPlaceOrder/AfterpayPaymentPlaceOrder.tsx

@@ -0,0 +1,43 @@
+import { useFormCompose } from '@graphcommerce/ecommerce-ui'
+import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
+import type { PaymentPlaceOrderProps } from '@graphcommerce/magento-cart-payment-method'
+import { useRouter } from 'next/router'
+import { useAfterpayCartLock } from '../../hooks/useAfterpayCartLock'
+import { AfterpayPaymentPlaceOrderDocument } from './AfterpayPaymentPlaceOrder.gql'
+
+export function AfterpayPaymentPlaceOrder(props: PaymentPlaceOrderProps) {
+  const { code, step } = props
+  const [, lock] = useAfterpayCartLock()
+  const { push } = useRouter()
+
+  const form = useFormGqlMutationCart(AfterpayPaymentPlaceOrderDocument, {
+    onBeforeSubmit: (variables) => ({
+      ...variables,
+      redirect_path: { cancel_path: `checkout/payment`, confirm_path: `checkout/payment` },
+    }),
+    onComplete: async (result) => {
+      if (result.errors) return
+
+      const start = result.data?.createAfterpayCheckout?.afterpay_redirectCheckoutUrl
+      const orderToken = result.data?.createAfterpayCheckout?.afterpay_token
+
+      if (!start)
+        throw Error(
+          'Error while starting the Afterpay payment, please try again with a different payment method',
+        )
+
+      await lock({ orderToken, method: code })
+      // We are going to redirect, but we're not waiting, because we need to complete the submission to release the buttons
+      void push(start)
+    },
+  })
+
+  const submit = form.handleSubmit(() => {})
+  useFormCompose({ form, step, submit, key: `AfterpayPaymentPlaceOrder_${code}` })
+
+  return (
+    <form onSubmit={submit} noValidate>
+      <input type='hidden' value={code} />
+    </form>
+  )
+}

package/hooks/useAfterpayCartLock.ts

@@ -0,0 +1,16 @@
+import type { CartLockState } from '@graphcommerce/magento-cart-payment-method'
+import { useCartLock } from '@graphcommerce/magento-cart-payment-method'
+
+type AfterpayLockState = CartLockState & {
+  orderToken?: string | null
+  status?: 'SUCCESS' | 'CANCELLED' | null
+}
+
+/**
+ * The cart lock situation is a bit odd since are unable to actually influence the return URL we
+ * can't safely remember the cart ID.
+ *
+ * This is a potential bug because when the customer is returning from an icognito session, the cart
+ * ID is not available.
+ */
+export const useAfterpayCartLock = () => useCartLock<AfterpayLockState>()

package/index.ts

@@ -0,0 +1 @@
+export {}

package/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+/// <reference types="@graphcommerce/next-ui/types" />

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@graphcommerce/magento-payment-afterpay",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "10.0.0-canary.72",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "exports": {
+    ".": "./index.ts",
+    "./plugins/AddAfterpayMethods": "./plugins/AddAfterpayMethods.tsx"
+  },
+  "peerDependencies": {
+    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.72",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/graphql": "^10.0.0-canary.72",
+    "@graphcommerce/image": "^10.0.0-canary.72",
+    "@graphcommerce/magento-cart": "^10.0.0-canary.72",
+    "@graphcommerce/magento-cart-payment-method": "^10.0.0-canary.72",
+    "@graphcommerce/magento-store": "^10.0.0-canary.72",
+    "@graphcommerce/next-ui": "^10.0.0-canary.72",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/react-hook-form": "^10.0.0-canary.72",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.72",
+    "@lingui/core": "^5",
+    "@lingui/macro": "^5",
+    "@lingui/react": "^5",
+    "@mui/material": "^7.0.0",
+    "framer-motion": "^11.0.0",
+    "next": "*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  }
+}

package/plugins/AddAfterpayMethods.tsx

@@ -0,0 +1,23 @@
+import type { PaymentMethodContextProviderProps } from '@graphcommerce/magento-cart-payment-method'
+import { PaymentMethodOptionsNoop } from '@graphcommerce/magento-cart-payment-method'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { AfterpayPaymentActionCard } from '../components/AfterpayPaymentActionCard/AfterpayPaymentActionCard'
+import { AfterpayPaymentHandler } from '../components/AfterpayPaymentHandler/AfterpayPaymentHandler'
+import { AfterpayPaymentPlaceOrder } from '../components/AfterpayPaymentPlaceOrder/AfterpayPaymentPlaceOrder'
+
+export const component = 'PaymentMethodContextProvider'
+export const exported = '@graphcommerce/magento-cart-payment-method'
+
+const afterpay = {
+  PaymentOptions: PaymentMethodOptionsNoop,
+  PaymentActionCard: AfterpayPaymentActionCard,
+  PaymentHandler: AfterpayPaymentHandler,
+  PaymentPlaceOrder: AfterpayPaymentPlaceOrder,
+}
+
+function AddAfterpayMethods(props: PluginProps<PaymentMethodContextProviderProps>) {
+  const { modules, Prev, ...rest } = props
+  return <Prev {...rest} modules={{ ...modules, afterpay }} />
+}
+
+export const Plugin = AddAfterpayMethods

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["node_modules"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}