@graphcommerce/magento-payment-paypal 1.0.2

package/CHANGELOG.md

@@ -0,0 +1,34 @@
+# @graphcommerce/magento-payment-paypal
+
+## 1.0.2
+
+### Patch Changes
+
+- [#1693](https://github.com/graphcommerce-org/graphcommerce/pull/1693) [`63e52a25d`](https://github.com/graphcommerce-org/graphcommerce/commit/63e52a25d35aa9600820155760fce23e91920185) Thanks [@paales](https://github.com/paales)! - Make release public
+
+## 1.0.1
+
+### Patch Changes
+
+- [#1692](https://github.com/graphcommerce-org/graphcommerce/pull/1692) [`a7fbe58d4`](https://github.com/graphcommerce-org/graphcommerce/commit/a7fbe58d4bbb43c59fa2ead05935757d2013404c) Thanks [@paales](https://github.com/paales)! - Make sure the cartLock state is refreshed when the page is loaded with the bfcache
+
+- [#1692](https://github.com/graphcommerce-org/graphcommerce/pull/1692) [`edbecfbfd`](https://github.com/graphcommerce-org/graphcommerce/commit/edbecfbfd532a6c78ae75ffe850c4bcf898e855d) Thanks [@paales](https://github.com/paales)! - Locking the cart when navigating away from the checkout and unlock the cart when pressing back. Made the justLocked flag a global state.
+
+- Updated dependencies [[`a7fbe58d4`](https://github.com/graphcommerce-org/graphcommerce/commit/a7fbe58d4bbb43c59fa2ead05935757d2013404c), [`a26a2d05e`](https://github.com/graphcommerce-org/graphcommerce/commit/a26a2d05eecabeeef70e4d69105343197ae092b7), [`edbecfbfd`](https://github.com/graphcommerce-org/graphcommerce/commit/edbecfbfd532a6c78ae75ffe850c4bcf898e855d)]:
+  - @graphcommerce/magento-cart-payment-method@3.6.9
+  - @graphcommerce/magento-cart@4.9.5
+
+## 1.0.0
+
+### Major Changes
+
+- [#1688](https://github.com/graphcommerce-org/graphcommerce/pull/1688) [`4490bde21`](https://github.com/graphcommerce-org/graphcommerce/commit/4490bde217c49d022d39486b21ca77a7dbc74f4c) Thanks [@paales](https://github.com/paales)! - Created PayPal express integration
+
+### Patch Changes
+
+- Updated dependencies [[`8393cb266`](https://github.com/graphcommerce-org/graphcommerce/commit/8393cb2662860be0c2aa5df432447bb73c427d8e), [`f544401c7`](https://github.com/graphcommerce-org/graphcommerce/commit/f544401c7b653fda39c7c260ad0dcfb3bf543b65), [`f105d4223`](https://github.com/graphcommerce-org/graphcommerce/commit/f105d4223aa68df30970149e51ae72897e489bf9)]:
+  - @graphcommerce/next-ui@4.29.3
+  - @graphcommerce/magento-cart-payment-method@3.6.8
+  - @graphcommerce/ecommerce-ui@1.5.8
+  - @graphcommerce/magento-cart@4.9.4
+  - @graphcommerce/magento-store@4.3.6

package/components/PayPalPaymentActionCard/PayPalPaymentActionCard.tsx

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

package/components/PayPalPaymentHandler/PayPalPaymentHandler.graphql

@@ -0,0 +1,15 @@
+mutation PayPalPaymentHandler($cartId: String!, $paymentMethod: PaymentMethodInput!) {
+  setPaymentMethodOnCart(input: { cart_id: $cartId, payment_method: $paymentMethod }) {
+    cart {
+      id
+      selected_payment_method {
+        ...SelectedPaymentMethod
+      }
+    }
+  }
+  placeOrder(input: { cart_id: $cartId }) {
+    order {
+      order_number
+    }
+  }
+}

package/components/PayPalPaymentHandler/PayPalPaymentHandler.tsx

@@ -0,0 +1,76 @@
+import { ApolloErrorSnackbar } from '@graphcommerce/ecommerce-ui'
+import { useMutation } from '@graphcommerce/graphql'
+import {
+  useAssignCurrentCartId,
+  useClearCurrentCartId,
+  useCurrentCartId,
+} from '@graphcommerce/magento-cart'
+import { PaymentHandlerProps } from '@graphcommerce/magento-cart-payment-method'
+import { ErrorSnackbar } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { FormControlLabel } from '@mui/material'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { usePayPalCartLock } from '../../hooks/usePayPalCartLock'
+import { PayPalPaymentHandlerDocument } from './PayPalPaymentHandler.gql'
+
+export const PayPalPaymentHandler = (props: PaymentHandlerProps) => {
+  const { code } = props
+  const { push } = useRouter()
+  const [lockStatus, , unlock] = usePayPalCartLock()
+  const clearCurrentCartId = useClearCurrentCartId()
+  const { currentCartId: cartId } = useCurrentCartId()
+
+  const { token, PayerID, locked, justLocked, method } = lockStatus
+  const [placeOrder, { error, called }] = useMutation(PayPalPaymentHandlerDocument, {
+    variables: {
+      cartId,
+      paymentMethod: {
+        code,
+        paypal_express: {
+          payer_id: PayerID ?? '',
+          token: token ?? '',
+        },
+      },
+    },
+    errorPolicy: 'all',
+  })
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    if (locked && !justLocked && method === code && !PayerID) unlock({ token: null })
+  }, [PayerID, code, justLocked, locked, method, unlock])
+
+  // If successfull we clear it's cart and redirect to the success page.
+  useEffect(() => {
+    if (!token || !PayerID || called) return
+    if (!cartId) return
+
+    const fetchData = async () => {
+      const res = await placeOrder()
+
+      if (res.errors) {
+        await unlock({ token: null, PayerID: null })
+        return
+      }
+
+      // We're done with the current cart, we clear the current cartId.
+      clearCurrentCartId()
+
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      push({
+        pathname: '/checkout/success',
+        query: {
+          cart_id: cartId,
+          order_number: res.data?.placeOrder?.order.order_number,
+        },
+      })
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    fetchData()
+  }, [PayerID, called, cartId, clearCurrentCartId, placeOrder, push, token, unlock])
+
+  if (error) return <ApolloErrorSnackbar error={error} />
+  return null
+}

package/components/PayPalPaymentOptionsAndPlaceOrder/PayPalPaymentOptions.graphql

@@ -0,0 +1,23 @@
+mutation PayPalPaymentOptions(
+  $cartId: String!
+  $code: String!
+  $expressButton: Boolean = false
+  $usePayPalCredit: Boolean = false
+  $urls: PaypalExpressUrlsInput!
+) {
+  createPaypalExpressToken(
+    input: {
+      cart_id: $cartId
+      code: $code
+      urls: $urls
+      express_button: $expressButton
+      use_paypal_credit: $usePayPalCredit
+    }
+  ) {
+    paypal_urls {
+      edit
+      start
+    }
+    token
+  }
+}

package/components/PayPalPaymentOptionsAndPlaceOrder/PayPalPaymentOptions.tsx

@@ -0,0 +1,46 @@
+import { useFormCompose } from '@graphcommerce/ecommerce-ui'
+import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
+import { PaymentOptionsProps } from '@graphcommerce/magento-cart-payment-method'
+import { useRouter } from 'next/router'
+import { usePayPalCartLock } from '../../hooks/usePayPalCartLock'
+import { PayPalPaymentOptionsDocument } from './PayPalPaymentOptions.gql'
+
+/** It sets the selected payment method on the cart. */
+export function PayPalPaymentOptions(props: PaymentOptionsProps) {
+  const { code, step } = props
+  const [, lock] = usePayPalCartLock()
+  const { push } = useRouter()
+
+  const form = useFormGqlMutationCart(PayPalPaymentOptionsDocument, {
+    onBeforeSubmit: (variables) => ({
+      ...variables,
+      code,
+      urls: { cancel_url: `checkout/payment`, return_url: `checkout/payment` },
+    }),
+    onComplete: async (result) => {
+      if (result.errors) return
+
+      const start = result.data?.createPaypalExpressToken?.paypal_urls?.start
+      const token = result.data?.createPaypalExpressToken?.token
+
+      if (!start)
+        throw Error(
+          'Error while starting the PayPal payment, please try again with a different payment method',
+        )
+
+      await lock({ token, method: code })
+      // We are going to redirect, but we're not waiting, because we need to complete the submission to release the buttons
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      push(start)
+    },
+  })
+
+  const submit = form.handleSubmit(() => {})
+  useFormCompose({ form, step, submit, key: `PaymentMethodOptions_${code}` })
+
+  return (
+    <form onSubmit={submit} noValidate>
+      <input type='hidden' value={code} {...form.register('code')} />
+    </form>
+  )
+}

package/hooks/usePayPalCartLock.ts

@@ -0,0 +1,15 @@
+import { CartLockState, useCartLock } from '@graphcommerce/magento-cart-payment-method'
+
+type PayPalLockState = CartLockState & {
+  token?: string | null
+  PayerID?: string | 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 usePayPalCartLock = () => useCartLock<PayPalLockState>()

package/icons/paypal.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="124px" height="33px" viewBox="0 0 124 33" enable-background="new 0 0 124 33" xml:space="preserve">
+<path fill="#253B80" d="M46.211,6.749h-6.839c-0.468,0-0.866,0.34-0.939,0.802l-2.766,17.537c-0.055,0.346,0.213,0.658,0.564,0.658
+	h3.265c0.468,0,0.866-0.34,0.939-0.803l0.746-4.73c0.072-0.463,0.471-0.803,0.938-0.803h2.165c4.505,0,7.105-2.18,7.784-6.5
+	c0.306-1.89,0.013-3.375-0.872-4.415C50.224,7.353,48.5,6.749,46.211,6.749z M47,13.154c-0.374,2.454-2.249,2.454-4.062,2.454
+	h-1.032l0.724-4.583c0.043-0.277,0.283-0.481,0.563-0.481h0.473c1.235,0,2.4,0,3.002,0.704C47.027,11.668,47.137,12.292,47,13.154z"
+	/>
+<path fill="#253B80" d="M66.654,13.075h-3.275c-0.279,0-0.52,0.204-0.563,0.481l-0.145,0.916l-0.229-0.332
+	c-0.709-1.029-2.29-1.373-3.868-1.373c-3.619,0-6.71,2.741-7.312,6.586c-0.313,1.918,0.132,3.752,1.22,5.031
+	c0.998,1.176,2.426,1.666,4.125,1.666c2.916,0,4.533-1.875,4.533-1.875l-0.146,0.91c-0.055,0.348,0.213,0.66,0.562,0.66h2.95
+	c0.469,0,0.865-0.34,0.939-0.803l1.77-11.209C67.271,13.388,67.004,13.075,66.654,13.075z M62.089,19.449
+	c-0.316,1.871-1.801,3.127-3.695,3.127c-0.951,0-1.711-0.305-2.199-0.883c-0.484-0.574-0.668-1.391-0.514-2.301
+	c0.295-1.855,1.805-3.152,3.67-3.152c0.93,0,1.686,0.309,2.184,0.892C62.034,17.721,62.232,18.543,62.089,19.449z"/>
+<path fill="#253B80" d="M84.096,13.075h-3.291c-0.314,0-0.609,0.156-0.787,0.417l-4.539,6.686l-1.924-6.425
+	c-0.121-0.402-0.492-0.678-0.912-0.678h-3.234c-0.393,0-0.666,0.384-0.541,0.754l3.625,10.638l-3.408,4.811
+	c-0.268,0.379,0.002,0.9,0.465,0.9h3.287c0.312,0,0.604-0.152,0.781-0.408L84.564,13.97C84.826,13.592,84.557,13.075,84.096,13.075z
+	"/>
+<path fill="#179BD7" d="M94.992,6.749h-6.84c-0.467,0-0.865,0.34-0.938,0.802l-2.766,17.537c-0.055,0.346,0.213,0.658,0.562,0.658
+	h3.51c0.326,0,0.605-0.238,0.656-0.562l0.785-4.971c0.072-0.463,0.471-0.803,0.938-0.803h2.164c4.506,0,7.105-2.18,7.785-6.5
+	c0.307-1.89,0.012-3.375-0.873-4.415C99.004,7.353,97.281,6.749,94.992,6.749z M95.781,13.154c-0.373,2.454-2.248,2.454-4.062,2.454
+	h-1.031l0.725-4.583c0.043-0.277,0.281-0.481,0.562-0.481h0.473c1.234,0,2.4,0,3.002,0.704
+	C95.809,11.668,95.918,12.292,95.781,13.154z"/>
+<path fill="#179BD7" d="M115.434,13.075h-3.273c-0.281,0-0.52,0.204-0.562,0.481l-0.145,0.916l-0.23-0.332
+	c-0.709-1.029-2.289-1.373-3.867-1.373c-3.619,0-6.709,2.741-7.311,6.586c-0.312,1.918,0.131,3.752,1.219,5.031
+	c1,1.176,2.426,1.666,4.125,1.666c2.916,0,4.533-1.875,4.533-1.875l-0.146,0.91c-0.055,0.348,0.213,0.66,0.564,0.66h2.949
+	c0.467,0,0.865-0.34,0.938-0.803l1.771-11.209C116.053,13.388,115.785,13.075,115.434,13.075z M110.869,19.449
+	c-0.314,1.871-1.801,3.127-3.695,3.127c-0.949,0-1.711-0.305-2.199-0.883c-0.484-0.574-0.666-1.391-0.514-2.301
+	c0.297-1.855,1.805-3.152,3.67-3.152c0.93,0,1.686,0.309,2.184,0.892C110.816,17.721,111.014,18.543,110.869,19.449z"/>
+<path fill="#179BD7" d="M119.295,7.23l-2.807,17.858c-0.055,0.346,0.213,0.658,0.562,0.658h2.822c0.469,0,0.867-0.34,0.939-0.803
+	l2.768-17.536c0.055-0.346-0.213-0.659-0.562-0.659h-3.16C119.578,6.749,119.338,6.953,119.295,7.23z"/>
+<path fill="#253B80" d="M7.266,29.154l0.523-3.322l-1.165-0.027H1.061L4.927,1.292C4.939,1.218,4.978,1.149,5.035,1.1
+	c0.057-0.049,0.13-0.076,0.206-0.076h9.38c3.114,0,5.263,0.648,6.385,1.927c0.526,0.6,0.861,1.227,1.023,1.917
+	c0.17,0.724,0.173,1.589,0.007,2.644l-0.012,0.077v0.676l0.526,0.298c0.443,0.235,0.795,0.504,1.065,0.812
+	c0.45,0.513,0.741,1.165,0.864,1.938c0.127,0.795,0.085,1.741-0.123,2.812c-0.24,1.232-0.628,2.305-1.152,3.183
+	c-0.482,0.809-1.096,1.48-1.825,2c-0.696,0.494-1.523,0.869-2.458,1.109c-0.906,0.236-1.939,0.355-3.072,0.355h-0.73
+	c-0.522,0-1.029,0.188-1.427,0.525c-0.399,0.344-0.663,0.814-0.744,1.328l-0.055,0.299l-0.924,5.855l-0.042,0.215
+	c-0.011,0.068-0.03,0.102-0.058,0.125c-0.025,0.021-0.061,0.035-0.096,0.035H7.266z"/>
+<path fill="#179BD7" d="M23.048,7.667L23.048,7.667L23.048,7.667c-0.028,0.179-0.06,0.362-0.096,0.55
+	c-1.237,6.351-5.469,8.545-10.874,8.545H9.326c-0.661,0-1.218,0.48-1.321,1.132l0,0l0,0L6.596,26.83l-0.399,2.533
+	c-0.067,0.428,0.263,0.814,0.695,0.814h4.881c0.578,0,1.069-0.42,1.16-0.99l0.048-0.248l0.919-5.832l0.059-0.32
+	c0.09-0.572,0.582-0.992,1.16-0.992h0.73c4.729,0,8.431-1.92,9.513-7.476c0.452-2.321,0.218-4.259-0.978-5.622
+	C24.022,8.286,23.573,7.945,23.048,7.667z"/>
+<path fill="#222D65" d="M21.754,7.151c-0.189-0.055-0.384-0.105-0.584-0.15c-0.201-0.044-0.407-0.083-0.619-0.117
+	c-0.742-0.12-1.555-0.177-2.426-0.177h-7.352c-0.181,0-0.353,0.041-0.507,0.115C9.927,6.985,9.675,7.306,9.614,7.699L8.05,17.605
+	l-0.045,0.289c0.103-0.652,0.66-1.132,1.321-1.132h2.752c5.405,0,9.637-2.195,10.874-8.545c0.037-0.188,0.068-0.371,0.096-0.55
+	c-0.313-0.166-0.652-0.308-1.017-0.429C21.941,7.208,21.848,7.179,21.754,7.151z"/>
+<path fill="#253B80" d="M9.614,7.699c0.061-0.393,0.313-0.714,0.652-0.876c0.155-0.074,0.326-0.115,0.507-0.115h7.352
+	c0.871,0,1.684,0.057,2.426,0.177c0.212,0.034,0.418,0.073,0.619,0.117c0.2,0.045,0.395,0.095,0.584,0.15
+	c0.094,0.028,0.187,0.057,0.278,0.086c0.365,0.121,0.704,0.264,1.017,0.429c0.368-2.347-0.003-3.945-1.272-5.392
+	C20.378,0.682,17.853,0,14.622,0h-9.38c-0.66,0-1.223,0.48-1.325,1.133L0.01,25.898c-0.077,0.49,0.301,0.932,0.795,0.932h5.791
+	l1.454-9.225L9.614,7.699z"/>
+</svg>

package/index.ts

@@ -0,0 +1,15 @@
+import { PaymentModule } from '@graphcommerce/magento-cart-payment-method'
+import { PayPalExpressActionCard } from './components/PayPalPaymentActionCard/PayPalPaymentActionCard'
+import { PayPalPaymentHandler } from './components/PayPalPaymentHandler/PayPalPaymentHandler'
+import { PayPalPaymentOptions } from './components/PayPalPaymentOptionsAndPlaceOrder/PayPalPaymentOptions'
+
+const mspModule: PaymentModule = {
+  PaymentOptions: PayPalPaymentOptions,
+  PaymentActionCard: PayPalExpressActionCard,
+  PaymentHandler: PayPalPaymentHandler,
+  PaymentPlaceOrder: () => null,
+}
+
+export const paypal: Record<string, PaymentModule> = {
+  paypal_express: mspModule,
+}

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-paypal",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "1.0.2",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/eslint-config-pwa": "^4.1.10",
+    "@graphcommerce/prettier-config-pwa": "^4.0.6",
+    "@graphcommerce/typescript-config-pwa": "^4.0.4",
+    "@playwright/test": "^1.21.1",
+    "type-fest": "^2.12.2"
+  },
+  "dependencies": {
+    "@graphcommerce/ecommerce-ui": "1.5.8",
+    "@graphcommerce/graphql": "3.5.0",
+    "@graphcommerce/image": "3.1.10",
+    "@graphcommerce/magento-cart": "4.9.5",
+    "@graphcommerce/magento-cart-payment-method": "3.6.9",
+    "@graphcommerce/magento-store": "4.3.6",
+    "@graphcommerce/next-ui": "4.29.3"
+  },
+  "peerDependencies": {
+    "@lingui/react": "^3.13.2",
+    "@lingui/core": "^3.13.2",
+    "@mui/material": "5.5.3",
+    "framer-motion": "^6.2.4",
+    "next": "^12.1.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}

package/tsconfig.json

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