@graphcommerce/magento-payment-braintree 3.0.6 → 3.0.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 3.0.7
+
+### Patch Changes
+
+- Updated dependencies [[`3c801f45c`](https://github.com/graphcommerce-org/graphcommerce/commit/3c801f45c7df55131acf30ae2fe0d2344830d480), [`b8d04130a`](https://github.com/graphcommerce-org/graphcommerce/commit/b8d04130a1b1cb8fc85308939235140288744465), [`3192fab82`](https://github.com/graphcommerce-org/graphcommerce/commit/3192fab82560e2211dfcacadc3b0b305260527d8), [`104abd14e`](https://github.com/graphcommerce-org/graphcommerce/commit/104abd14e1585ef0d8de77937d25156b8fa1e201), [`0e425e85e`](https://github.com/graphcommerce-org/graphcommerce/commit/0e425e85ee8fed280349317ee0440c7bceea5823), [`2a125b1f9`](https://github.com/graphcommerce-org/graphcommerce/commit/2a125b1f98bb9272d96c3577f21d6c984caad892), [`8a354d1cd`](https://github.com/graphcommerce-org/graphcommerce/commit/8a354d1cd4757497ddfc9b1969a0addbc8ff616b), [`6ebe9d12d`](https://github.com/graphcommerce-org/graphcommerce/commit/6ebe9d12db9fcaa2af67a475e64a08d63e232b46)]:
+  - @graphcommerce/next-ui@4.6.0
+  - @graphcommerce/magento-cart@4.2.4
+  - @graphcommerce/magento-cart-payment-method@3.1.0
+  - @graphcommerce/react-hook-form@3.1.0
+  - @graphcommerce/image@3.1.4
+  - @graphcommerce/magento-store@4.1.6
+
 ## 3.0.6
 
 ### Patch Changes

package/hooks/useBraintreeCartLock.ts

@@ -0,0 +1,7 @@
+import { CartLockState, useCartLock } from '@graphcommerce/magento-cart-payment-method'
+
+type BraintreeCartLock = CartLockState & {
+  payment_id: string | null
+}
+
+export const useBraintreeCartLock = () => useCartLock<BraintreeCartLock>()

package/hooks/useBraintreeLocalPayment.ts

@@ -12,7 +12,7 @@ type StartPaymentPayload = {
 type LocalPayment = {
   closeWindow(): void
   focusWindow(): void
-  hasTokenizationParams(): void
+  hasTokenizationParams(): boolean
   startPayment(options: StartPaymentOptions): Promise<StartPaymentPayload>
   teardown(): Promise<void>
   tokenize(params: {

package/methods/braintree/PaymentMethodOptions.tsx

@@ -2,16 +2,9 @@
 import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import { PaymentOptionsProps } from '@graphcommerce/magento-cart-payment-method'
 import { useFormCompose } from '@graphcommerce/react-hook-form'
-// import { BraintreeError } from 'braintree-web'
 import { BraintreePaymentMethodOptionsDocument } from '../../BraintreePaymentMethodOptions.gql'
 import { useBraintreeHostedFields } from '../../hooks/useBraintreeHostedFields'
 
-// const errorTypes = ['CUSTOMER', 'MERCHANT', 'NETWORK', 'INTERNAL', 'UNKNOWN']
-
-// function isBraintreeError(e: any | BraintreeError): e is BraintreeError {
-//   return errorTypes.includes((e as BraintreeError).type)
-// }
-
 /** It sets the selected payment method on the cart. */
 export function PaymentMethodOptions(props: PaymentOptionsProps) {
   const { code, step, Container } = props

package/methods/braintree_local_payments/PaymentHandler.tsx

@@ -0,0 +1,3 @@
+export function PaymentHandler() {
+  return null
+}

package/methods/braintree_local_payments/PaymentMethodOptions.tsx

@@ -1,10 +1,63 @@
 import { useCartQuery, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
-import { PaymentOptionsProps } from '@graphcommerce/magento-cart-payment-method'
+import {
+  PaymentOptionsProps,
+  usePaymentMethodContext,
+} from '@graphcommerce/magento-cart-payment-method'
 import { useFormCompose } from '@graphcommerce/react-hook-form'
+import { useEffect } from 'react'
 import { BraintreePaymentMethodOptionsDocument } from '../../BraintreePaymentMethodOptions.gql'
 import { StartPaymentOptions } from '../../hooks/useBraintree'
+import { useBraintreeCartLock } from '../../hooks/useBraintreeCartLock'
 import { useBraintreeLocalPayment } from '../../hooks/useBraintreeLocalPayment'
-import { BraintreeLocalPaymentsCartDocument } from './BraintreeLocalPaymentsCart.gql'
+import { isBraintreeError } from '../../utils/isBraintreeError'
+import {
+  BraintreeLocalPaymentsCartDocument,
+  BraintreeLocalPaymentsCartQuery,
+} from './BraintreeLocalPaymentsCart.gql'
+
+function validateAndBuildStartPaymentParams(cartData: BraintreeLocalPaymentsCartQuery): Partial {
+  const cart = cartData?.cart
+
+  const { email } = cart ?? {}
+  if (!email) throw Error('Please provide an email address')
+  const { value: amount, currency: currencyCode } = cart?.prices?.grand_total ?? {}
+
+  if (!cart?.shipping_addresses?.[0]) throw Error('Please provide a shipping method')
+  if (!amount || !currencyCode) throw Error('Grand total was not set')
+
+  const {
+    telephone: phone,
+    firstname: givenName,
+    lastname: surname,
+    street,
+    city: locality,
+    postcode: postalCode,
+    region: regionObj,
+    country,
+  } = cart?.shipping_addresses?.[0] ?? {}
+
+  const [streetAddress, ...rest] = street ?? []
+  const extendedAddress = rest.join('\n')
+  if (!streetAddress) throw Error('Please provide a street address')
+
+  const region = regionObj?.code ?? ''
+  if (!postalCode) throw Error('Please provide postalCode')
+
+  const { code: countryCode } = country ?? {}
+  if (!countryCode) throw Error('Please provide countryCode')
+
+  return {
+    amount: amount.toString(),
+
+    currencyCode,
+    shippingAddressRequired: false,
+    email: cart?.email ?? '',
+    phone,
+    givenName,
+    surname,
+    address: { streetAddress, extendedAddress, locality, postalCode, region, countryCode },
+  }
+}
 
 /** It sets the selected payment method on the cart. */
 export function PaymentMethodOptions(props: PaymentOptionsProps) {
@@ -13,6 +66,24 @@ export function PaymentMethodOptions(props: PaymentOptionsProps) {
   const { code, step, child } = props
   const paymentType = child as StartPaymentOptions['paymentType']
   const { data: cartData } = useCartQuery(BraintreeLocalPaymentsCartDocument)
+  const [lockState, lock, unlock] = useBraintreeCartLock()
+  const { selectedMethod } = usePaymentMethodContext()
+
+  useEffect(() => {
+    if (lockState.locked && !lockState.justLocked) {
+      const params = unlock({ payment_id: null })
+
+      //     // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      //     ;(async () => {
+      //       const localPayment = await localPaymentPromise
+      //       if (localPayment.hasTokenizationParams()) {
+      //         await localPayment.tokenize(({}) => {
+      //           // do stuff;
+      //         })
+      //       }
+      //     })()
+    }
+  }, [lockState.justLocked, lockState.locked, unlock])
 
   /**
    * In the this folder you'll also find a PaymentMethodOptionsNoop.graphql document that is
@@ -21,46 +92,40 @@ export function PaymentMethodOptions(props: PaymentOptionsProps) {
   const form = useFormGqlMutationCart(BraintreePaymentMethodOptionsDocument, {
     defaultValues: { code },
     onBeforeSubmit: async () => {
-      if (!cartData || !paymentType) throw Error('no ready')
+      if (!cartData?.cart?.id) throw Error('Cart id is missing')
+      if (!paymentType) throw Error('Could not resolve payment type')
+      if (!selectedMethod?.code) throw Error('Selected method not found')
+      const options = validateAndBuildStartPaymentParams(cartData)
 
-      const address = cartData.cart?.shipping_addresses?.[0]
+      lock({ payment_id: null, method: selectedMethod?.code })
 
       const localPayment = await localPaymentPromise
-      const paymentResult = await localPayment.startPayment({
-        paymentType,
-        amount: cartData.cart?.prices?.grand_total?.value?.toString() ?? '0.00',
-        fallback: {
-          buttonText: 'Return to website',
-          url: window.location.href,
-        },
-        currencyCode: cartData.cart?.prices?.grand_total?.currency ?? 'EUR',
-        shippingAddressRequired: false,
-        email: cartData?.cart?.email ?? '',
-        phone: address?.telephone ?? '',
-        givenName: address?.firstname ?? '',
-        surname: address?.lastname ?? '',
-        address: {
-          streetAddress: address?.street[0] ?? '',
-          extendedAddress: address?.street.slice(1).join('\n') ?? '',
-          locality: address?.city ?? '',
-          postalCode: address?.postcode ?? '',
-          region: address?.region?.code ?? '',
-          countryCode: address?.country.code ?? '',
-        },
-        onPaymentStart: ({ paymentId }, next) => {
-          // todo what should we do with the payment id?
-          // eslint-disable-next-line no-console
-          console.log(paymentId)
-          next()
-        },
-      })
-
-      return {
-        cartId: cartData.cart?.id as string,
-        deviceData: '',
-        isTokenEnabler: false,
-        nonce: paymentResult.nonce,
-        code,
+      try {
+        const paymentResult = await localPayment.startPayment({
+          paymentType,
+          ...options,
+          fallback: {
+            buttonText: 'Return to website',
+            url: window.location.href,
+          },
+          onPaymentStart: ({ paymentId }, next) => {
+            lock({ payment_id: paymentId, method: selectedMethod?.code })
+            next()
+          },
+        })
+
+        await localPayment.teardown()
+
+        return {
+          cartId: cartData?.cart?.id,
+          deviceData: '',
+          isTokenEnabler: false,
+          nonce: paymentResult.nonce,
+          code,
+        }
+      } catch (e) {
+        if (isBraintreeError(e)) unlock({ payment_id: null })
+        throw e
       }
     },
   })
@@ -78,3 +143,5 @@ export function PaymentMethodOptions(props: PaymentOptionsProps) {
     </form>
   )
 }
+
+type Partial = Omit<StartPaymentOptions, 'paymentType' | 'fallback'>

package/methods/braintree_local_payments/index.ts

@@ -2,11 +2,13 @@ import {
   PaymentMethodPlaceOrderNoop,
   PaymentModule,
 } from '@graphcommerce/magento-cart-payment-method'
+import { PaymentHandler } from './PaymentHandler'
 import { PaymentMethodOptions } from './PaymentMethodOptions'
 import { expandMethods } from './expandMethods'
 
 export const braintree_local_payment = {
   PaymentOptions: PaymentMethodOptions,
   PaymentPlaceOrder: PaymentMethodPlaceOrderNoop,
+  PaymentHandler,
   expandMethods,
 } as PaymentModule

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-payment-braintree",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -13,9 +13,9 @@
   },
   "devDependencies": {
     "@graphcommerce/eslint-config-pwa": "^4.1.4",
-    "@graphcommerce/magento-cart-shipping-address": "3.0.6",
-    "@graphcommerce/magento-product": "4.1.4",
-    "@graphcommerce/magento-product-configurable": "4.0.8",
+    "@graphcommerce/magento-cart-shipping-address": "3.0.7",
+    "@graphcommerce/magento-product": "4.1.5",
+    "@graphcommerce/magento-product-configurable": "4.0.9",
     "@graphcommerce/prettier-config-pwa": "^4.0.5",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
     "@playwright/test": "^1.20.1",
@@ -24,12 +24,12 @@
   },
   "dependencies": {
     "@graphcommerce/graphql": "3.0.7",
-    "@graphcommerce/image": "3.1.3",
-    "@graphcommerce/magento-cart": "4.2.3",
-    "@graphcommerce/magento-cart-payment-method": "3.0.7",
-    "@graphcommerce/magento-store": "4.1.5",
-    "@graphcommerce/next-ui": "4.5.1",
-    "@graphcommerce/react-hook-form": "3.0.7",
+    "@graphcommerce/image": "3.1.4",
+    "@graphcommerce/magento-cart": "4.2.4",
+    "@graphcommerce/magento-cart-payment-method": "3.1.0",
+    "@graphcommerce/magento-store": "4.1.6",
+    "@graphcommerce/next-ui": "4.6.0",
+    "@graphcommerce/react-hook-form": "3.1.0",
     "braintree-web": "^3.85.2"
   },
   "peerDependencies": {

package/test/braintree.playwright.ts

@@ -9,7 +9,7 @@ import { expect } from '@playwright/test'
 test('place order', async ({ page, productURL }) => {
   await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
 
-  await page.click('a:has-text("View shopping cart")')
+  await page.click('#view-shopping-cart-button')
 
   await page.click('a[href="/checkout"]:last-of-type')
 

package/test/braintree_local_payments.playwright.ts

@@ -1,33 +1,28 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { waitForGraphQlResponse } from '@graphcommerce/graphql/test/apolloClient.fixture'
 import { PaymentMethodPlaceOrderNoopDocument } from '@graphcommerce/magento-cart-payment-method/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.gql'
-import { fillShippingAddressForm } from '@graphcommerce/magento-cart-shipping-address/test/fillShippingAddressForm'
+import { goToPayment } from '@graphcommerce/magento-cart-payment-method/test/goToPayment'
 import { addConfigurableProductToCart } from '@graphcommerce/magento-product-configurable/test/addConfigurableProductToCart'
 import { test } from '@graphcommerce/magento-product/test/productURL.fixture'
 import { expect } from '@playwright/test'
 
-test('place order', async ({ page, productURL }) => {
-  await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
-
-  await page.click('a:has-text("View shopping cart")')
-
-  await page.click('a[href="/checkout"]:last-of-type')
-
-  await page.click('input[name="email"]')
-  await page.fill('input[name="email"]', 'test@test.com')
+test('place order ideal', async ({ page, productURL, apolloClient, locale }) => {
+  test.skip(locale !== 'nl', 'Skip test for non-nl locale')
 
-  await fillShippingAddressForm(page)
-
-  await page.click('button[value=flatrate-flatrate]')
-  await page.click('#next')
+  await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+  await goToPayment(page, apolloClient)
 
   await page.click('button[value=braintree_local_payment___ideal]')
 
+  await page.pause()
+
   const [braintreePopup] = await Promise.all([
     page.waitForEvent('popup'),
     page.click('#place-order'),
   ])
 
+  await page.pause()
+
   await braintreePopup.click('text=Proceed with Sandbox Purchase')
   const result = await waitForGraphQlResponse(page, PaymentMethodPlaceOrderNoopDocument)
   expect(result.errors).toBeUndefined()

package/utils/isBraintreeError.ts

@@ -0,0 +1,11 @@
+import { BraintreeError } from 'braintree-web'
+
+const errorTypes = ['CUSTOMER', 'MERCHANT', 'NETWORK', 'INTERNAL', 'UNKNOWN']
+
+export function isBraintreeError(e: unknown): e is BraintreeError {
+  return errorTypes.includes((e as BraintreeError).type) && e instanceof Error
+}
+
+export function isBraintreeCustomerError(e: unknown): e is BraintreeError {
+  return isBraintreeError(e) && e.type === 'CUSTOMER'
+}