From 9062dba9184561b5af399e25632f4fe132960223 Mon Sep 17 00:00:00 2001
From: Anton Lantukh <alantukh@jwplayer.com>
Date: Fri, 6 Sep 2024 13:48:59 +0200
Subject: [PATCH] fix(e2e): fix tests after cleeng api update (#606)

---
 packages/common/src/controllers/CheckoutController.ts        | 3 ++-
 packages/common/src/utils/payments.ts                        | 3 +++
 .../ui-react/src/containers/AccountModal/forms/Checkout.tsx  | 5 +++--
 3 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 packages/common/src/utils/payments.ts

diff --git a/packages/common/src/controllers/CheckoutController.ts b/packages/common/src/controllers/CheckoutController.ts
index 3695e4af9..933188483 100644
--- a/packages/common/src/controllers/CheckoutController.ts
+++ b/packages/common/src/controllers/CheckoutController.ts
@@ -27,6 +27,7 @@ import { useCheckoutStore } from '../stores/CheckoutStore';
 import { useAccountStore } from '../stores/AccountStore';
 import { FormValidationError } from '../errors/FormValidationError';
 import { determineSwitchDirection } from '../utils/subscription';
+import { findDefaultCardMethodId } from '../utils/payments';
 
 @injectable()
 export default class CheckoutController {
@@ -70,7 +71,7 @@ export default class CheckoutController {
     const { customer } = getAccountInfo();
 
     const paymentMethods = await this.getPaymentMethods();
-    const paymentMethodId = paymentMethods[0]?.id;
+    const paymentMethodId = parseInt(findDefaultCardMethodId(paymentMethods));
 
     const createOrderArgs: CreateOrderArgs = {
       offer,
diff --git a/packages/common/src/utils/payments.ts b/packages/common/src/utils/payments.ts
new file mode 100644
index 000000000..441d889d7
--- /dev/null
+++ b/packages/common/src/utils/payments.ts
@@ -0,0 +1,3 @@
+import type { PaymentMethod } from '@jwp/ott-common/types/checkout';
+
+export const findDefaultCardMethodId = (paymentMethods: PaymentMethod[] | null) => paymentMethods?.find((el) => el.methodName === 'card')?.id?.toString() || '';
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
index b65abac5f..1dd3c9d51 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
@@ -6,6 +6,7 @@ import useForm from '@jwp/ott-hooks-react/src/useForm';
 import { FormValidationError } from '@jwp/ott-common/src/errors/FormValidationError';
 import { useTranslation } from 'react-i18next';
 import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
+import { findDefaultCardMethodId } from '@jwp/ott-common/src/utils/payments';
 
 import CheckoutForm from '../../../components/CheckoutForm/CheckoutForm';
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
@@ -53,7 +54,7 @@ const Checkout = () => {
     handleChange,
     handleSubmit,
   } = useForm({
-    initialValues: { couponCode: '', paymentMethodId: paymentMethods?.[0]?.id?.toString() || '' },
+    initialValues: { couponCode: '', paymentMethodId: findDefaultCardMethodId(paymentMethods) },
     onSubmit: ({ couponCode, paymentMethodId }) => {
       setShowCouponCodeSuccess(false);
 
@@ -84,7 +85,7 @@ const Checkout = () => {
   useEffect(() => {
     if (!paymentMethods?.length) return;
 
-    setValue('paymentMethodId', paymentMethods[0].id.toString());
+    setValue('paymentMethodId', findDefaultCardMethodId(paymentMethods));
   }, [paymentMethods, setValue]);
 
   // clear after closing the checkout modal