fix: card cvc bug fix

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');
+        })
+
+    })
+
+})
+
+
+
+

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";

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
+}

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])