Merge branch 'main' into refactor/masking-logic

CHANGELOG.md

@@ -1,3 +1,31 @@
+# [0.31.0](https://github.com/juspay/hyperswitch-web/compare/v0.30.0...v0.31.0) (2024-03-11)
+
+
+### Features
+
+* Added Payment Session Headless ([#209](https://github.com/juspay/hyperswitch-web/issues/209)) ([67be317](https://github.com/juspay/hyperswitch-web/commit/67be317957ff4d267f20cf5b376277116b7e4861))
+
+# [0.30.0](https://github.com/juspay/hyperswitch-web/compare/v0.29.1...v0.30.0) (2024-03-11)
+
+
+### Features
+
+* Support to handle confirm button (E2E) ([#198](https://github.com/juspay/hyperswitch-web/issues/198)) ([a4ffecf](https://github.com/juspay/hyperswitch-web/commit/a4ffecf0cc31a3d094eb0f8c57d9d8260d06204b))
+
+## [0.29.1](https://github.com/juspay/hyperswitch-web/compare/v0.29.0...v0.29.1) (2024-03-11)
+
+
+### Bug Fixes
+
+* added Wallets to Saved Payment Methods ([#213](https://github.com/juspay/hyperswitch-web/issues/213)) ([dc6a194](https://github.com/juspay/hyperswitch-web/commit/dc6a194512ac010cec55ae52451c98a017da5d7c))
+
+# [0.29.0](https://github.com/juspay/hyperswitch-web/compare/v0.28.0...v0.29.0) (2024-03-11)
+
+
+### Features
+
+* props divide disableSave cards to checkbox and api ([#206](https://github.com/juspay/hyperswitch-web/issues/206)) ([83426ab](https://github.com/juspay/hyperswitch-web/commit/83426ab9a11210ed1e7edb2341ef25ba4c8a4500))
+
 # [0.28.0](https://github.com/juspay/hyperswitch-web/compare/v0.27.5...v0.28.0) (2024-03-08)
 
 

Hyperswitch-React-Demo-App/server.js

@@ -54,7 +54,6 @@ app.get("/create-payment-intent", async (req, res) => {
           amount: 2999,
         },
       ],
-      currency: "USD",
       confirm: false,
       capture_method: "automatic",
       authentication_type: "three_ds",

Hyperswitch-React-Demo-App/src/Cart.js

@@ -9,8 +9,8 @@ function Cart() {
         <div className="titleContainer">
           <div class="title">
             {" "}
-            <img className="logoImg" width="28px" src={logo} /> Hyperswicth
-            Playground App
+            <img className="logoImg" width="28px" src={logo} alt="" />{" "}
+            Hyperswitch Playground App
           </div>
           <div class="testMode">Test Mode</div>
         </div>
@@ -19,7 +19,7 @@ function Cart() {
           <div className="Item">
             <div className="ItemContainer">
               <div className="itemImg">
-                <img src={shirt} />
+                <img src={shirt} alt="" />
               </div>
               <div className="itemDetails">
                 <div className="name">HS Tshirt</div>
@@ -37,7 +37,7 @@ function Cart() {
           <div className="Item">
             <div className="ItemContainer">
               <div className="itemImg">
-                <img src={cap} />
+                <img src={cap} alt="" />
               </div>
               <div className="itemDetails">
                 <div className="name">HS Cap</div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.28.0",
+  "version": "0.31.0",
   "main": "index.js",
   "private": true,
   "dependencies": {

src/BrutalTheme.res

@@ -38,6 +38,14 @@ let brutal = {
   colorIconCardError: "#ff1a1a",
   spacingGridColumn: "20px",
   spacingGridRow: "20px",
+  buttonBackgroundColor: "#f5fb1f",
+  buttonHeight: "48px",
+  buttonWidth: "thin",
+  buttonBorderRadius: "6px",
+  buttonBorderColor: "#566186",
+  buttonTextColor: "#000000",
+  buttonTextFontSize: "16px",
+  buttonTextFontWeight: "500",
 }
 let brutalRules = (theme: CardThemeType.themeClass) =>
   {

src/CardTheme.res

@@ -128,6 +128,14 @@ let getVariables = (str, dict, default, logger) => {
       "spacingGridColumn",
       "spacingGridRow",
       "spacingAccordionItem",
+      "buttonBackgroundColor",
+      "buttonHeight",
+      "buttonWidth",
+      "buttonBorderRadius",
+      "buttonBorderColor",
+      "buttonTextColor",
+      "buttonTextFontSize",
+      "buttonTextFontWeight",
     ]
     unknownKeysWarning(validKeys, json, "appearance.variables", ~logger)
     {
@@ -244,6 +252,39 @@ let getVariables = (str, dict, default, logger) => {
         ~logger,
       ),
       spacingGridRow: getWarningString(json, "spacingGridRow", default.spacingGridRow, ~logger),
+      buttonBackgroundColor: getWarningString(
+        json,
+        "buttonBackgroundColor",
+        default.spacingGridRow,
+        ~logger,
+      ),
+      buttonHeight: getWarningString(json, "buttonHeight", default.spacingGridRow, ~logger),
+      buttonWidth: getWarningString(json, "buttonWidth", default.spacingGridRow, ~logger),
+      buttonBorderRadius: getWarningString(
+        json,
+        "buttonBorderRadius",
+        default.spacingGridRow,
+        ~logger,
+      ),
+      buttonBorderColor: getWarningString(
+        json,
+        "buttonBorderColor",
+        default.spacingGridRow,
+        ~logger,
+      ),
+      buttonTextColor: getWarningString(json, "buttonTextColor", default.spacingGridRow, ~logger),
+      buttonTextFontSize: getWarningString(
+        json,
+        "buttonTextFontSize",
+        default.spacingGridRow,
+        ~logger,
+      ),
+      buttonTextFontWeight: getWarningString(
+        json,
+        "buttonTextFontWeight",
+        default.spacingGridRow,
+        ~logger,
+      ),
     }
   })
   ->Belt.Option.getWithDefault(default)

src/CardUtils.res

@@ -316,28 +316,28 @@ let calculateLuhn = value => {
 let getCardBrandIcon = (cardType, paymentType) => {
   open CardThemeType
   switch cardType {
-  | VISA => <Icon size=28 name="visa-light" />
-  | MASTERCARD => <Icon size=28 name="mastercard" />
-  | AMEX => <Icon size=28 name="amex-light" />
-  | MAESTRO => <Icon size=28 name="maestro" />
-  | DINERSCLUB => <Icon size=28 name="diners" />
-  | DISCOVER => <Icon size=28 name="discover" />
-  | BAJAJ => <Icon size=28 name="card" />
-  | SODEXO => <Icon size=28 name="card" />
-  | RUPAY => <Icon size=28 name="rupay-card" />
-  | JCB => <Icon size=28 name="jcb-card" />
-  | CARTESBANCAIRES => <Icon size=28 name="card" />
-  | UNIONPAY => <Icon size=28 name="card" />
-  | INTERAC => <Icon size=28 name="interac" />
+  | VISA => <Icon size=Utils.brandIconSize name="visa-light" />
+  | MASTERCARD => <Icon size=Utils.brandIconSize name="mastercard" />
+  | AMEX => <Icon size=Utils.brandIconSize name="amex-light" />
+  | MAESTRO => <Icon size=Utils.brandIconSize name="maestro" />
+  | DINERSCLUB => <Icon size=Utils.brandIconSize name="diners" />
+  | DISCOVER => <Icon size=Utils.brandIconSize name="discover" />
+  | BAJAJ => <Icon size=Utils.brandIconSize name="card" />
+  | SODEXO => <Icon size=Utils.brandIconSize name="card" />
+  | RUPAY => <Icon size=Utils.brandIconSize name="rupay-card" />
+  | JCB => <Icon size=Utils.brandIconSize name="jcb-card" />
+  | CARTESBANCAIRES => <Icon size=Utils.brandIconSize name="card" />
+  | UNIONPAY => <Icon size=Utils.brandIconSize name="card" />
+  | INTERAC => <Icon size=Utils.brandIconSize name="interac" />
   | NOTFOUND =>
     switch paymentType {
-    | Payment => <Icon size=28 name="base-card" />
+    | Payment => <Icon size=Utils.brandIconSize name="base-card" />
     | Card
     | CardNumberElement
     | CardExpiryElement
     | CardCVCElement
     | NONE =>
-      <Icon size=28 name="default-card" />
+      <Icon size=Utils.brandIconSize name="default-card" />
     }
   }
 }
@@ -640,15 +640,15 @@ let getCvcDetailsFromCvcProps = cvcProps => {
 
 let setRightIconForCvc = (~cardEmpty, ~cardInvalid, ~color, ~cardComplete) => {
   if cardEmpty {
-    <Icon size=28 name="cvc-empty" />
+    <Icon size=Utils.brandIconSize name="cvc-empty" />
   } else if cardInvalid {
     <div style={ReactDOMStyle.make(~color, ())}>
-      <Icon size=28 name="cvc-invalid" />
+      <Icon size=Utils.brandIconSize name="cvc-invalid" />
     </div>
   } else if cardComplete {
-    <Icon size=28 name="cvc-complete" />
+    <Icon size=Utils.brandIconSize name="cvc-complete" />
   } else {
-    <Icon size=28 name="cvc-empty" />
+    <Icon size=Utils.brandIconSize name="cvc-empty" />
   }
 }
 

src/CharcoalTheme.res

@@ -38,6 +38,14 @@ let charcoal = {
   colorIconCardError: "#fd1717",
   spacingGridColumn: "20px",
   spacingGridRow: "20px",
+  buttonBackgroundColor: "#000000",
+  buttonHeight: "48px",
+  buttonWidth: "thin",
+  buttonBorderRadius: "6px",
+  buttonBorderColor: "#000000",
+  buttonTextColor: "#ffffff",
+  buttonTextFontSize: "16px",
+  buttonTextFontWeight: "500",
 }
 
 let charcoalRules = theme =>

src/Components/AnimatedCheckbox.res

@@ -49,7 +49,7 @@ let make = (~isChecked, ~setIsChecked) => {
   <div className={`Checkbox ${checkboxState} flex flex-row gap-2 items-center`}>
     <style> {React.string(css)} </style>
     <label className={`container CheckboxInput ${checkedState}`}>
-      <input type_=`checkbox` onChange />
+      <input type_={`checkbox`} onChange />
       <div className={`checkmark CheckboxInput ${checkedState}`} />
       <div className={`CheckboxLabel ${checkBoxLabelSate} ml-2`}>
         {React.string(localeString.saveCardDetails)}

src/Components/DynamicFields.res

@@ -433,7 +433,7 @@ let make = (
           ->React.array}
           <RenderIf condition={isRenderDynamicFieldsInsideBilling}>
             <div
-              className="p-2"
+              className="p-2 w-full text-left"
               style={ReactDOMStyle.make(
                 ~border=`1px solid ${themeObj.borderColor}`,
                 ~borderRadius=themeObj.borderRadius,

src/Components/PayNowButton.res

@@ -1,6 +1,6 @@
-@send external postMessage: (Window.window, Js.Json.t, string) => unit = "postMessage"
+@send external postMessage: (Window.window, JSON.t, string) => unit = "postMessage"
 
-external eventToJson: ReactEvent.Mouse.t => Js.Json.t = "%identity"
+external eventToJson: ReactEvent.Mouse.t => JSON.t = "%identity"
 
 module Loader = {
   @react.component
@@ -14,41 +14,72 @@ module Loader = {
   }
 }
 @react.component
-let make = () => {
-  let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+let make = (
+  ~cvcProps: CardUtils.cvcProps,
+  ~cardProps: CardUtils.cardProps,
+  ~expiryProps: CardUtils.expiryProps,
+  ~selectedOption: PaymentModeType.payment,
+) => {
+  open RecoilAtoms
+  let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let (isDisabled, setIsDisabled) = React.useState(() => false)
   let (showLoader, setShowLoader) = React.useState(() => false)
-  let complete = Recoil.useRecoilValueFromAtom(RecoilAtoms.fieldsComplete)
+  let areRequiredFieldsValidValue = Recoil.useRecoilValueFromAtom(areRequiredFieldsValid)
+  let {sdkHandleConfirmPayment} = Recoil.useRecoilValueFromAtom(optionAtom)
 
-  let handleOnClick = _ev => {
+  let (isCVCValid, _, _, _, _, _, _, _, _, _) = cvcProps
+  let (isCardValid, _, _, _, _, _, _, _, _, _) = cardProps
+  let (isExpiryValid, _, _, _, _, _, _, _, _) = expiryProps
+
+  let validFormat =
+    isCVCValid->Option.getOr(false) &&
+    isCardValid->Option.getOr(false) &&
+    isExpiryValid->Option.getOr(false) &&
+    areRequiredFieldsValidValue
+
+  let confirmPayload = sdkHandleConfirmPayment->PaymentBody.confirmPayloadForSDKButton
+
+  let handleOnClick = _ => {
     setIsDisabled(_ => true)
     setShowLoader(_ => true)
-    Utils.handleOnConfirmPostMessage(~targetOrigin="*", ())
+    Utils.handlePostMessage([("handleSdkConfirm", confirmPayload)])
   }
-  React.useEffect1(() => {
-    setIsDisabled(_ => !complete)
+  React.useEffect3(() => {
+    if selectedOption === Card {
+      setIsDisabled(_ => !validFormat)
+    } else {
+      setIsDisabled(_ => !areRequiredFieldsValidValue)
+    }
     None
-  }, [complete])
+  }, (validFormat, areRequiredFieldsValidValue, selectedOption))
 
-  <div className="flex flex-col gap-1 h-auto w-full">
+  <div className="flex flex-col gap-1 h-auto w-full items-center">
     <button
       disabled=isDisabled
       onClick=handleOnClick
-      className={`w-full flex flex-row justify-center items-center rounded-md`}
+      className={`w-full flex flex-row justify-center items-center`}
       style={ReactDOMStyle.make(
-        ~backgroundColor=themeObj.colorBackground,
-        ~height="48px",
+        ~borderRadius=themeObj.buttonBorderRadius,
+        ~backgroundColor=themeObj.buttonBackgroundColor,
+        ~height=themeObj.buttonHeight,
         ~cursor={isDisabled ? "not-allowed" : "pointer"},
         ~opacity={isDisabled ? "0.6" : "1"},
-        ~borderWidth="thin",
-        ~borderColor=themeObj.colorPrimary,
+        ~width=themeObj.buttonWidth,
+        ~borderColor=themeObj.buttonBorderColor,
         (),
       )}>
-      <span id="button-text" style={ReactDOMStyle.make(~color=themeObj.colorPrimary, ())}>
+      <span
+        id="button-text"
+        style={ReactDOMStyle.make(
+          ~color=themeObj.buttonTextColor,
+          ~fontSize=themeObj.buttonTextFontSize,
+          ~fontWeight=themeObj.buttonTextFontWeight,
+          (),
+        )}>
         {if showLoader {
           <Loader />
         } else {
-          {React.string(localeString.payNowButton)}
+          localeString.payNowButton->React.string
         }}
       </span>
     </button>