Merge pull request #467 from commercelayer/fix/add-payments-loader

Add payments loader and Stripe Link support
commercelayer · May 15, 2024 · f544671 · f544671
2 parents bf204a8 + ed4ac0f
commit f544671
Show file tree

Hide file tree

Showing 13 changed files with 6,363 additions and 4,940 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,13 +1,13 @@
 version: 2.1
 
 orbs:
-  aws-cli: circleci/aws-cli@4.1.2
+  aws-cli: circleci/aws-cli@4.1.3
   aws-s3: circleci/aws-s3@4.0.0
 
 jobs:
   test: # this can be any name you choose
     docker:
-      - image: mcr.microsoft.com/playwright:v1.41.2-focal
+      - image: mcr.microsoft.com/playwright:v1.44.0-focal
     resource_class: medium+
     parallelism: 10
 

diff --git a/components/composite/StepPayment/CheckoutCustomerPayment.tsx b/components/composite/StepPayment/CheckoutCustomerPayment.tsx
@@ -1,4 +1,6 @@
-import PaymentMethod from "@commercelayer/react-components/payment_methods/PaymentMethod"
+import PaymentMethod, {
+  PaymentMethodOnClickParams,
+} from "@commercelayer/react-components/payment_methods/PaymentMethod"
 import PaymentSource, {
   CustomerSaveToWalletProps,
 } from "@commercelayer/react-components/payment_source/PaymentSource"
@@ -17,10 +19,8 @@ import {
   WalletCheckbox,
 } from "./styled"
 
-import { THandleClick } from "."
-
 interface Props {
-  selectPayment: THandleClick
+  selectPayment: (params: PaymentMethodOnClickParams) => void
   hasTitle: boolean
   autoSelectCallback: () => void
   hasSubscriptions: boolean
@@ -104,10 +104,8 @@ export const CheckoutCustomerPayment: React.FC<Props> = ({
         autoSelectSinglePaymentMethod={autoSelectCallback}
         activeClass="active group"
         className="payment"
-        // @ts-expect-error Type 'FC<{}>' is not assignable to type 'LoaderType'.
-        loader={PaymentSkeleton}
+        loader={<PaymentSkeleton />}
         clickableContainer
-        // @ts-expect-error Types of parameters 'params' and 'payment' are incompatible.
         onClick={selectPayment}
       >
         <PaymentWrapper>
@@ -121,8 +119,7 @@ export const CheckoutCustomerPayment: React.FC<Props> = ({
               templateCustomerSaveToWallet={(props) => (
                 <TemplateSaveToWalletCheckbox {...props} />
               )}
-              // @ts-expect-error Type 'FC<{}>' is not assignable to type 'LoaderType'.
-              loader={PaymentSkeleton}
+              loader={<PaymentSkeleton />}
             >
               <PaymentDetailsWrapper>
                 <PaymentDetails hasEditButton />

diff --git a/components/composite/StepPayment/CheckoutPayment.tsx b/components/composite/StepPayment/CheckoutPayment.tsx
@@ -9,10 +9,8 @@ import {
   PaymentDetailsWrapper,
 } from "./styled"
 
-import { THandleClick } from "."
-
 interface Props {
-  selectPayment: THandleClick
+  selectPayment: Parameters<typeof PaymentMethod>[0]["onClick"]
   hasTitle: boolean
   autoSelectCallback: () => void
 }
@@ -30,7 +28,6 @@ export const CheckoutPayment = ({
       loader={<PaymentSkeleton />}
       clickableContainer
       hide={["external_payments"]}
-      // @ts-expect-error Type Types of parameters 'params' and 'payment' are incompatible.
       onClick={selectPayment}
     >
       <PaymentWrapper data-testid="payment-sources-container">

diff --git a/components/composite/StepPayment/index.tsx b/components/composite/StepPayment/index.tsx
@@ -4,6 +4,7 @@ import {
   PaymentSourceDetail,
   PaymentSource,
   PaymentSourceBrandIcon,
+  PaymentMethodOnClickParams,
 } from "@commercelayer/react-components"
 import { PaymentMethod as PaymentMethodType } from "@commercelayer/sdk"
 import classNames from "classnames"
@@ -20,12 +21,6 @@ import { CheckoutCustomerPayment } from "./CheckoutCustomerPayment"
 import { CheckoutPayment } from "./CheckoutPayment"
 import { PaymentSkeleton } from "./PaymentSkeleton"
 
-export type THandleClick = (params: {
-  payment?: PaymentMethodType | Record<string, unknown>
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  paymentSource?: Record<string, any>
-}) => void
-
 interface HeaderProps {
   className?: string
   step: number
@@ -112,8 +107,14 @@ export const StepPayment: React.FC = () => {
 
   const { isGuest, isPaymentRequired, setPayment, hasSubscriptions } = appCtx
 
-  const selectPayment: THandleClick = ({ payment, paymentSource }) => {
-    if (paymentSource?.payment_methods?.paymentMethods?.length > 1) {
+  const selectPayment = ({ payment, order }: PaymentMethodOnClickParams) => {
+    if (
+      order?.payment_source &&
+      // @ts-expect-error available only on adyen
+      order?.payment_source.payment_methods &&
+      // @ts-expect-error available only on adyen
+      order?.payment_source?.payment_methods?.length > 1
+    ) {
       setHasMultiplePaymentMethods(true)
     }
     setPayment({ payment: payment as PaymentMethodType })

diff --git a/components/data/AppProvider/utils.ts b/components/data/AppProvider/utils.ts
@@ -350,9 +350,9 @@ export function calculateSettings(
     ...(isShipmentRequired
       ? calculateSelectedShipments(prepareShipments(order.shipments))
       : {
-          hasShippingMethod: true,
-          shipments: [],
-        }),
+        hasShippingMethod: true,
+        shipments: [],
+      }),
     ...checkPaymentMethod(order),
     returnUrl: order.return_url,
     cartUrl: order.cart_url,
@@ -367,13 +367,11 @@ export function checkPaymentMethod(order: Order) {
 
   const paymentSource: PaymentSourceType | undefined =
     order.payment_source as PaymentSourceType
-
   let hasPaymentMethod = Boolean(
-    paymentSource?.metadata?.card ||
-      paymentSource?.options?.card ||
-      paymentSource?.payment_response?.source
+    // @ts-expect-error no type for payment_method
+    paymentSource?.payment_method?.lenght > 0 ||
+    paymentSource?.payment_response?.source
   )
-
   const paymentRequired = isPaymentRequired(order)
   if (!hasPaymentMethod && !paymentRequired) {
     hasPaymentMethod = true
@@ -410,10 +408,10 @@ export function calculateSelectedShipments(
   const shipmentsSelected = shipments?.map((shipment) => {
     return shipment.shipmentId === payload?.shipmentId
       ? {
-          ...shipment,
-          shippingMethodId: payload.shippingMethod.id,
-          shippingMethodName: payload.shippingMethod.name,
-        }
+        ...shipment,
+        shippingMethodId: payload.shippingMethod.id,
+        shippingMethodName: payload.shippingMethod.name,
+      }
       : shipment
   })
   const hasShippingMethod = hasShippingMethodSet(shipmentsSelected)

diff --git a/package.json b/package.json
@@ -72,19 +72,19 @@
     "commercelayer"
   ],
   "dependencies": {
-    "@commercelayer/js-auth": "^6.0.0",
+    "@commercelayer/js-auth": "^6.2.1",
     "@commercelayer/organization-config": "^1.4.5",
-    "@commercelayer/react-components": "^4.12.0",
-    "@commercelayer/sdk": "^5.36.0",
+    "@commercelayer/react-components": "^4.13.3",
+    "@commercelayer/sdk": "^6.0.2",
     "@faker-js/faker": "^8.4.1",
-    "@headlessui/react": "^1.7.18",
-    "@next/bundle-analyzer": "^14.1.4",
-    "@next/eslint-plugin-next": "^14.1.4",
-    "@playwright/test": "1.43.0",
+    "@headlessui/react": "^1.7.19",
+    "@next/bundle-analyzer": "^14.2.3",
+    "@next/eslint-plugin-next": "^14.2.3",
+    "@playwright/test": "1.44.0",
     "@tailwindcss/forms": "^0.5.7",
     "@types/async-retry": "1.4.8",
-    "@types/node": "^20.12.4",
-    "@types/react": "^18.2.74",
+    "@types/node": "^20.12.12",
+    "@types/react": "^18.3.2",
     "@types/react-gtm-module": "^2.0.3",
     "@types/styled-components": "^5.1.34",
     "async-retry": "^1.3.3",
@@ -93,34 +93,34 @@
     "babel-plugin-styled-components": "^2.1.4",
     "classnames": "^2.5.1",
     "cron-parser": "^4.9.0",
-    "cronstrue": "^2.49.0",
+    "cronstrue": "^2.50.0",
     "dotenv": "^16.4.5",
-    "i18next": "^23.10.1",
-    "next": "^14.1.4",
+    "i18next": "^23.11.4",
+    "next": "^14.2.3",
     "next-build-id": "^3.0.0",
-    "next-i18next": "^15.2.0",
+    "next-i18next": "^15.3.0",
     "postcss": "^8.4.38",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-gtm-module": "^2.0.11",
-    "react-i18next": "^14.1.0",
-    "react-router-dom": "^6.22.3",
-    "styled-components": "^6.1.8",
+    "react-i18next": "^14.1.1",
+    "react-router-dom": "^6.23.1",
+    "styled-components": "^6.1.11",
     "tailwindcss": "^3.4.3",
     "twin.macro": "^3.4.1",
-    "typescript": "^5.4.4"
+    "typescript": "^5.4.5"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^12.0.0",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^10.0.2",
-    "@semantic-release/npm": "^12.0.0",
+    "@semantic-release/github": "^10.0.3",
+    "@semantic-release/npm": "^12.0.1",
     "@semantic-release/release-notes-generator": "^13.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.1.4",
+    "eslint-config-next": "^14.2.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
@@ -130,10 +130,10 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-tailwind": "^0.2.1",
-    "npm-check-updates": "^16.14.18",
+    "npm-check-updates": "^16.14.20",
     "prettier": "^3.2.5",
-    "semantic-release": "^23.0.7",
-    "serve": "^14.2.1",
+    "semantic-release": "^23.1.1",
+    "serve": "^14.2.3",
     "stylelint": "^16.3.1",
     "stylelint-config-standard": "^36.0.0"
   },
@@ -148,4 +148,4 @@
   "cacheDirectories": [
     ".next/cache"
   ]
-}
+}
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -8,7 +8,7 @@ dotenv.config({ path: path.resolve(__dirname, "../../.env.local") })
 // Reference: https://playwright.dev/docs/test-configuration
 const config: PlaywrightTestConfig = {
   // Timeout per test
-  timeout: 1 * 60 * 1000,
+  timeout: 1 * 80 * 1000,
   // Test directory
   testDir: "specs/e2e",
   // If a test fails, retry it additional 2 times