From 6122d9d200b934969ee8643e598754d724a786a4 Mon Sep 17 00:00:00 2001
From: Sanskar Atrey <sanskaratrey22@gmail.com>
Date: Fri, 25 Oct 2024 12:56:20 +0530
Subject: [PATCH] fix: card cvc bug fix (#748)

---
 .../cypress/e2e/cvc-checks-e2e-test.cy.ts     | 84 +++++++++++++++++++
 cypress-tests/cypress/support/utils.ts        |  2 +
 src/CardUtils.res                             |  4 +
 src/Payment.res                               |  3 +-
 4 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 cypress-tests/cypress/e2e/cvc-checks-e2e-test.cy.ts

diff --git a/cypress-tests/cypress/e2e/cvc-checks-e2e-test.cy.ts b/cypress-tests/cypress/e2e/cvc-checks-e2e-test.cy.ts
new file mode 100644
index 000000000..883aaa5bf
--- /dev/null
+++ b/cypress-tests/cypress/e2e/cvc-checks-e2e-test.cy.ts
@@ -0,0 +1,84 @@
+import * as testIds from "../../../src/Utilities/TestUtils.bs";
+import { getClientURL, amexTestCard, visaTestCard, createPaymentBody } from "../support/utils";
+
+describe("Card CVC Checks", () => {
+    let getIframeBody: () => Cypress.Chainable<JQuery<HTMLBodyElement>>;
+    const publishableKey = Cypress.env('HYPERSWITCH_PUBLISHABLE_KEY')
+    const secretKey = Cypress.env('HYPERSWITCH_SECRET_KEY')
+    let iframeSelector =
+        "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element";
+
+
+    beforeEach(() => {
+        getIframeBody = () => cy.iframe(iframeSelector);
+        cy.createPaymentIntent(secretKey, createPaymentBody).then(() => {
+            cy.getGlobalState("clientSecret").then((clientSecret) => {
+
+                cy.visit(getClientURL(clientSecret, publishableKey));
+            });
+
+        })
+    });
+
+
+
+
+    it("title rendered correctly", () => {
+        cy.contains("Hyperswitch Unified Checkout").should("be.visible");
+    });
+
+    it("orca-payment-element iframe loaded", () => {
+        cy.get(
+            "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element"
+        )
+            .should("be.visible")
+            .its("0.contentDocument")
+            .its("body");
+    });
+
+
+    it('user can enter 4 digit cvc in card form', () => {
+        getIframeBody().find(`[data-testid=${testIds.addNewCardIcon}]`).click()
+        getIframeBody().find(`[data-testid=${testIds.cardNoInputTestId}]`).type(amexTestCard)
+        getIframeBody().find(`[data-testid=${testIds.expiryInputTestId}]`).type("0444")
+        getIframeBody().find(`[data-testid=${testIds.cardCVVInputTestId}]`).type("1234").then(() => {
+            getIframeBody().find(`[data-testid=${testIds.cardCVVInputTestId}]`).should('have.value', '1234');
+        })
+
+
+    })
+    it('user can enter 3 digit cvc on saved payment methods screen', () => {
+        getIframeBody().find(`[data-testid=${testIds.cardCVVInputTestId}]`).type('123').then(() => {
+            getIframeBody().find(`[data-testid=${testIds.cardCVVInputTestId}]`).should('have.value', '123');
+        })
+
+    })
+
+    it('user can enter 3 digit cvc in card form', () => {
+        getIframeBody().find(`[data-testid=${testIds.addNewCardIcon}]`).click()
+        getIframeBody().find(`[data-testid=${testIds.cardNoInputTestId}]`).type(visaTestCard)
+        getIframeBody().find(`[data-testid=${testIds.expiryInputTestId}]`).type("0444")
+        getIframeBody().find(`[data-testid=${testIds.cardCVVInputTestId}]`).type("123").then(() => {
+            getIframeBody().find(`[data-testid=${testIds.cardCVVInputTestId}]`).should('have.value', '123');
+        })
+    })
+
+    it('user can enter 4 digit cvc on saved payment methods screen', () => {
+        cy.wait(2000)
+        getIframeBody()
+            .contains('div', '4 digit cvc test card')
+            .should('exist')
+            .trigger('click')
+        cy.wait(1000)
+
+        getIframeBody().find(`[data-testid=${testIds.cardCVVInputTestId}]`).type("1234").then(() => {
+            getIframeBody().find(`[data-testid=${testIds.cardCVVInputTestId}]`).should('have.value', '1234');
+        })
+
+    })
+
+})
+
+
+
+
diff --git a/cypress-tests/cypress/support/utils.ts b/cypress-tests/cypress/support/utils.ts
index 08a516365..4d6ca4c02 100644
--- a/cypress-tests/cypress/support/utils.ts
+++ b/cypress-tests/cypress/support/utils.ts
@@ -116,3 +116,5 @@ export const confirmBody = {
 export const stripeTestCard = "4000000000003220";
 export const adyenTestCard = "4917610000000000";
 export const bluesnapTestCard = "4000000000001091";
+export const amexTestCard = "378282246310005"
+export const visaTestCard = "4242424242424242";
diff --git a/src/CardUtils.res b/src/CardUtils.res
index 02a4bd55f..9341d889d 100644
--- a/src/CardUtils.res
+++ b/src/CardUtils.res
@@ -671,3 +671,7 @@ let getEligibleCoBadgedCardSchemes = (~matchedCardSchemes, ~enabledCardSchemes)
     enabledCardSchemes->Array.includes(ele->String.toLowerCase)
   })
 }
+
+let getCardBrandFromStates = (cardBrand, cardScheme, showFields) => {
+  !showFields ? cardScheme : cardBrand
+}
diff --git a/src/Payment.res b/src/Payment.res
index 9aa7ba63b..f549921df 100644
--- a/src/Payment.res
+++ b/src/Payment.res
@@ -18,7 +18,6 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
   let isManualRetryEnabled = Recoil.useRecoilValueFromAtom(isManualRetryEnabled)
   let paymentToken = Recoil.useRecoilValueFromAtom(paymentTokenAtom)
   let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
-
   let {iframeId} = keys
 
   let (cardNumber, setCardNumber) = React.useState(_ => "")
@@ -56,6 +55,8 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
   let (cardBrand, setCardBrand) = React.useState(_ =>
     !showFields && isNotBancontact ? cardScheme : cardBrand
   )
+
+  let cardBrand = CardUtils.getCardBrandFromStates(cardBrand, cardScheme, showFields)
   let supportedCardBrands = React.useMemo(() => {
     paymentMethodListValue->PaymentUtils.getSupportedCardBrands
   }, [paymentMethodListValue])