Skip to content

Commit

Permalink
Merge branch 'main' into test/adyen-card-e2e-success-flow
Browse files Browse the repository at this point in the history
  • Loading branch information
PritishBudhiraja authored Oct 31, 2024
2 parents c2da6a7 + f55f61a commit be45ed4
Show file tree
Hide file tree
Showing 49 changed files with 717 additions and 333 deletions.
58 changes: 58 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,61 @@
## [0.98.4](https://github.com/juspay/hyperswitch-web/compare/v0.98.3...v0.98.4) (2024-10-30)


### Bug Fixes

* Google pay log issue fix ([#762](https://github.com/juspay/hyperswitch-web/issues/762)) ([df629e9](https://github.com/juspay/hyperswitch-web/commit/df629e9d053f6e2fd443c833a9e343b3cf841f90))

## [0.98.3](https://github.com/juspay/hyperswitch-web/compare/v0.98.2...v0.98.3) (2024-10-30)


### Bug Fixes

* Gpay unified checkout fix ([#761](https://github.com/juspay/hyperswitch-web/issues/761)) ([45ee508](https://github.com/juspay/hyperswitch-web/commit/45ee50849c1d048e3dba0b35c5252bd4e2ffac89))

## [0.98.2](https://github.com/juspay/hyperswitch-web/compare/v0.98.1...v0.98.2) (2024-10-30)


### Reverts

* remove changes of pr [#746](https://github.com/juspay/hyperswitch-web/issues/746) ([#758](https://github.com/juspay/hyperswitch-web/issues/758)) ([cdae75e](https://github.com/juspay/hyperswitch-web/commit/cdae75ec21525e21aa2049f7bbfd513adebfef89))

## [0.98.1](https://github.com/juspay/hyperswitch-web/compare/v0.98.0...v0.98.1) (2024-10-29)


### Bug Fixes

* remove contact and password icon in safari ([#747](https://github.com/juspay/hyperswitch-web/issues/747)) ([ebeca6e](https://github.com/juspay/hyperswitch-web/commit/ebeca6e1380c8b76830aa81b0df9e3bd07d4c880))

# [0.98.0](https://github.com/juspay/hyperswitch-web/compare/v0.97.0...v0.98.0) (2024-10-29)


### Features

* added dynamic fields for SEPA ([#624](https://github.com/juspay/hyperswitch-web/issues/624)) ([63f536e](https://github.com/juspay/hyperswitch-web/commit/63f536ef22dc0304b01d703a232ce99819743608))

# [0.97.0](https://github.com/juspay/hyperswitch-web/compare/v0.96.3...v0.97.0) (2024-10-29)


### Features

* tax calculation in google pay ([#750](https://github.com/juspay/hyperswitch-web/issues/750)) ([0039fbe](https://github.com/juspay/hyperswitch-web/commit/0039fbe65ec7ff958d637d00c58aed710fed5b1f))

## [0.96.3](https://github.com/juspay/hyperswitch-web/compare/v0.96.2...v0.96.3) (2024-10-29)


### Bug Fixes

* remove blue border in firefox ([#746](https://github.com/juspay/hyperswitch-web/issues/746)) ([40ef7a5](https://github.com/juspay/hyperswitch-web/commit/40ef7a5578b3a687c9b596a27818f4533758f136))

## [0.96.2](https://github.com/juspay/hyperswitch-web/compare/v0.96.1...v0.96.2) (2024-10-28)

## [0.96.1](https://github.com/juspay/hyperswitch-web/compare/v0.96.0...v0.96.1) (2024-10-25)


### Bug Fixes

* card cvc bug fix ([#748](https://github.com/juspay/hyperswitch-web/issues/748)) ([6122d9d](https://github.com/juspay/hyperswitch-web/commit/6122d9d200b934969ee8643e598754d724a786a4))

# [0.96.0](https://github.com/juspay/hyperswitch-web/compare/v0.95.3...v0.96.0) (2024-10-23)


Expand Down
84 changes: 84 additions & 0 deletions cypress-tests/cypress/e2e/cvc-checks-e2e-test.cy.ts
Original file line number Diff line number Diff line change
@@ -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');
})

})

})




12 changes: 12 additions & 0 deletions cypress-tests/cypress/support/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,16 @@ export const getClientURL = (clientSecret, publishableKey) => {
return `${CLIENT_BASE_URL}?isCypressTestMode=true&clientSecret=${clientSecret}&publishableKey=${publishableKey}`;
}

export const enum connectorEnum{
TRUSTPAY,
ADYEN,
STRIPE
}
export const connectorProfileIdMapping = new Map<connectorEnum, string>([
[connectorEnum.TRUSTPAY, "pro_eP323T9e4ApKpilWBfPA"],
[connectorEnum.ADYEN, "pro_Kvqzu8WqBZsT1OjHlCj4"],
[connectorEnum.STRIPE, "pro_5fVcCxU8MFTYozgtf0P8"],
]);

export const createPaymentBody = {
currency: "USD",
Expand Down Expand Up @@ -116,3 +126,5 @@ export const confirmBody = {
export const stripeTestCard = "4000000000003220";
export const adyenTestCard = "4917610000000000";
export const bluesnapTestCard = "4000000000001091";
export const amexTestCard = "378282246310005"
export const visaTestCard = "4242424242424242";
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

27 changes: 13 additions & 14 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "orca-payment-page",
"version": "0.96.0",
"version": "0.98.4",
"main": "index.js",
"private": true,
"dependencies": {
Expand All @@ -16,23 +16,22 @@
"webpack-merge": "^5.9.0"
},
"scripts": {
"build:dev": "cross-env sdkEnv=sandbox webpack --config webpack.dev.js",
"build:dev-integ": "cross-env sdkEnv=integ webpack --config webpack.dev.js",
"start": "cross-env sdkEnv=local webpack serve --config webpack.dev.js",
"build:prod": "cross-env sdkEnv=prod webpack --config webpack.common.js",
"build": "webpack --config webpack.common.js",
"build:sandbox": "cross-env sdkEnv=sandbox webpack --config webpack.common.js",
"build:integ": "cross-env sdkEnv=integ webpack --config webpack.common.js",
"test": "cd cypress-tests && npm run cypress:run",
"build:integ": "cross-env sdkEnv=integ enableLogging=false webpack --config webpack.common.js",
"build:playground": "npm run setup:playground && npm run build",
"build:prod": "cross-env sdkEnv=prod enableLogging=true webpack --config webpack.common.js",
"build:sandbox": "cross-env sdkEnv=sandbox enableLogging=true webpack --config webpack.common.js",
"deploy-to-s3": "node ./scripts/pushToS3.js",
"postinstall": "cd Hyperswitch-React-Demo-App && npm i",
"prepare": "husky install",
"re:build": "rescript",
"re:clean": "rescript clean",
"re:start": "rescript -w",
"re:format": "rescript format -all",
"start:playground": "npm run postinstall && cd Hyperswitch-React-Demo-App && node promptScript.js && npm run start",
"build:playground": "npm run postinstall && cd Hyperswitch-React-Demo-App && node promptScript.js && npm run build",
"prepare": "husky install",
"deploy-to-s3": "node ./scripts/pushToS3.js",
"postinstall": "cd Hyperswitch-React-Demo-App && npm i",
"re:start": "rescript -w",
"setup:playground": "npm run postinstall && cd Hyperswitch-React-Demo-App && node promptScript.js",
"start": "cross-env sdkEnv=local enableLogging=false webpack serve --config webpack.dev.js",
"start:playground": "npm run setup:playground && npm run start",
"test": "cd cypress-tests && npm run cypress:run",
"test:hooks": "npx eslint src/"
},
"eslintConfig": {
Expand Down
32 changes: 32 additions & 0 deletions src/App.res
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,38 @@ let make = () => {
None
}, [logger])

React.useEffect0(() => {
let handleMetaDataPostMessage = (ev: Window.event) => {
let json = ev.data->Utils.safeParse
let dict = json->Utils.getDictFromJson

if dict->Dict.get("metadata")->Option.isSome {
let metadata = dict->Utils.getJsonObjectFromDict("metadata")
let config = metadata->Utils.getDictFromJson->Dict.get("config")

switch config {
| Some(config) => {
let config = CardTheme.itemToObjMapper(
config->Utils.getDictFromJson,
DefaultTheme.default,
DefaultTheme.defaultRules,
logger,
)

CardUtils.generateFontsLink(config.fonts)
let dict = config.appearance.rules->Utils.getDictFromJson
if dict->Dict.toArray->Array.length > 0 {
Utils.generateStyleSheet("", dict, "mystyle")
}
}
| None => ()
}
}
}
Window.addEventListener("message", handleMetaDataPostMessage)
Some(() => Window.removeEventListener("message", handleMetaDataPostMessage))
})

let renderFullscreen = switch paymentMode {
| "paymentMethodCollect" =>
<LoaderController paymentMode setIntegrateErrorError logger initTimestamp>
Expand Down
4 changes: 2 additions & 2 deletions src/CardTheme.res
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ open Utils
open ErrorUtils

let getTheme = (val, logger) => {
switch val {
switch val->String.toLowerCase {
| "default" => Default
| "brutal" => Brutal
| "midnight" => Midnight
Expand Down Expand Up @@ -360,7 +360,7 @@ let getAppearance = (
variables: getVariables("variables", json, default, logger),
rules: mergeJsons(rulesJson, getJsonObjectFromDict(json, "rules")),
innerLayout: getWarningString(json, "innerLayout", "spaced", ~logger)->getInnerLayout,
labels: switch getWarningString(json, "labels", "above", ~logger) {
labels: switch getWarningString(json, "labels", "above", ~logger)->String.toLowerCase {
| "above" => Above
| "floating" => Floating
| "none" => Never
Expand Down
6 changes: 5 additions & 1 deletion src/CardUtils.res
Original file line number Diff line number Diff line change
Expand Up @@ -424,7 +424,7 @@ let cvcNumberInRange = (val, cardBrand) => {
})
cvcLengthInRange
}
let genreateFontsLink = (fonts: array<CardThemeType.fonts>) => {
let generateFontsLink = (fonts: array<CardThemeType.fonts>) => {
if fonts->Array.length > 0 {
fonts
->Array.map(item =>
Expand Down Expand Up @@ -671,3 +671,7 @@ let getEligibleCoBadgedCardSchemes = (~matchedCardSchemes, ~enabledCardSchemes)
enabledCardSchemes->Array.includes(ele->String.toLowerCase)
})
}

let getCardBrandFromStates = (cardBrand, cardScheme, showFields) => {
!showFields ? cardScheme : cardBrand
}
7 changes: 5 additions & 2 deletions src/Components/AddBankAccount.res
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ module ToolTip = {
let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
<RenderIf condition={openTip}>
<button
className="h-auto max-w-20 w-auto cursor-pointer absolute m-1 px-1 py-2 top-[-3rem] right-[1em]"
className="h-auto max-w-30 w-auto cursor-pointer absolute m-1 px-1 py-2 top-[-3rem] right-[1em]"
style={
background: themeObj.colorBackground,
color: themeObj.colorDanger,
Expand All @@ -30,15 +30,18 @@ module ToolTip = {
@react.component
let make = (~modalData, ~setModalData) => {
let isDataAvailable = modalData->Option.isSome
let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
let {themeObj, localeString, config} = Recoil.useRecoilValueFromAtom(configAtom)
let {iframeId} = Recoil.useRecoilValueFromAtom(keys)
let (openToolTip, setOpenToolTip) = React.useState(_ => false)
let toolTipRef = React.useRef(Nullable.null)

let openModal = () => {
let metaData = [("config", config->Identity.anyTypeToJson)]->getJsonFromArrayOfJson

messageParentWindow([
("fullscreen", true->JSON.Encode.bool),
("iframeId", iframeId->JSON.Encode.string),
("metadata", metaData),
])
}
<div
Expand Down
37 changes: 37 additions & 0 deletions src/Components/DynamicFields.res
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,17 @@ let make = (
let line1Ref = React.useRef(Nullable.null)
let line2Ref = React.useRef(Nullable.null)
let cityRef = React.useRef(Nullable.null)
let bankAccountNumberRef = React.useRef(Nullable.null)
let postalRef = React.useRef(Nullable.null)
let (selectedBank, setSelectedBank) = Recoil.useRecoilState(userBank)
let (country, setCountry) = Recoil.useRecoilState(userCountry)

let (bankAccountNumber, setBankAccountNumber) = Recoil.useLoggedRecoilState(
userBankAccountNumber,
"bankAccountNumber",
logger,
)

let defaultCardProps = (
None,
_ => (),
Expand Down Expand Up @@ -462,6 +469,34 @@ let make = (
| PixKey => <PixPaymentInput label="pixKey" />
| PixCPF => <PixPaymentInput label="pixCPF" />
| PixCNPJ => <PixPaymentInput label="pixCNPJ" />
| BankAccountNumber | IBAN =>
<PaymentField
fieldName="IBAN"
setValue={setBankAccountNumber}
value=bankAccountNumber
onChange={ev => {
let value = ReactEvent.Form.target(ev)["value"]
setBankAccountNumber(_ => {
isValid: Some(value !== ""),
value,
errorString: value !== "" ? "" : localeString.ibanEmptyText,
})
}}
onBlur={ev => {
let value = ReactEvent.Focus.target(ev)["value"]
setBankAccountNumber(prev => {
...prev,
errorString: value !== "" ? "" : localeString.ibanEmptyText,
isValid: Some(value !== ""),
})
}}
paymentType
type_="text"
name="bankAccountNumber"
maxLength=42
inputRef=bankAccountNumberRef
placeholder="DE00 0000 0000 0000 0000 00"
/>
| Email
| InfoElement
| Country
Expand Down Expand Up @@ -777,6 +812,8 @@ let make = (
| PhoneCountryCode
| VpaId
| LanguagePreference(_)
| BankAccountNumber
| IBAN
| None => React.null
}}
</div>
Expand Down
Loading

0 comments on commit be45ed4

Please sign in to comment.