Merge remote-tracking branch 'origin/main' into iframe-redirections

.github/CODEOWNERS

@@ -1,12 +1,12 @@
-- @akash-c-k @ArushKapoorJuspay @PritishBudhiraja @seekshiva @vsrivatsa-edinburgh @swamu
+- @akash-c-k @ArushKapoorJuspay @PritishBudhiraja @seekshiva @swamu
 
 docs/ @akash-c-k
 LICENSE @akash-c-k
 README.md @akash-c-k
 SECURITY.md @akash-c-k
 .gitignore @ArushKapoorJuspay @PritishBudhiraja
 
-Hyperswitch-React-Demo-App/ @PritishBudhiraja @seekshiva @ArushKapoorJuspay @vsrivatsa-edinburgh
+Hyperswitch-React-Demo-App/ @PritishBudhiraja @seekshiva @ArushKapoorJuspay
 
 .husky/ @PritishBudhiraja @seekshiva
 .github/ @PritishBudhiraja @seekshiva
@@ -16,4 +16,4 @@ aws/ @seekshiva
 webpack.dev.js @ArushKapoorJuspay @PritishBudhiraja @seekshiva
 webpack.common.js @ArushKapoorJuspay @PritishBudhiraja @seekshiva
 
-src/ @seekshiva @PritishBudhiraja @ArushKapoorJuspay @vsrivatsa-edinburgh @swamu
+src/ @seekshiva @PritishBudhiraja @ArushKapoorJuspay @swamu

.github/workflows/pr-title-spell-check.yml

@@ -26,3 +26,15 @@ jobs:
         uses: crate-ci/typos@master
         with:
           files: ./pr_title.txt
+
+      - name: Assign to author
+        run: |
+          PR_NUMBER=$(jq --raw-output .pull_request.number "$GITHUB_EVENT_PATH")
+
+          curl -L \
+          -X POST \
+          -H "Accept: application/vnd.github+json" \
+          -H "Authorization: Bearer ${{ secrets.GITHUB_TOKEN }}" \
+          -H "X-GitHub-Api-Version: 2022-11-28" \
+          https://api.github.com/repos/${GITHUB_REPOSITORY}/issues/${PR_NUMBER}/assignees \
+          -d '{"assignees":["${{ github.event.pull_request.user.login }}"]}'

CHANGELOG.md

@@ -1,3 +1,21 @@
+## [0.84.5](https://github.com/juspay/hyperswitch-web/compare/v0.84.4...v0.84.5) (2024-08-26)
+
+## [0.84.4](https://github.com/juspay/hyperswitch-web/compare/v0.84.3...v0.84.4) (2024-08-23)
+
+
+### Bug Fixes
+
+* **payout:** dropdown for selecting payment methods, UI updates ([#581](https://github.com/juspay/hyperswitch-web/issues/581)) ([78bc958](https://github.com/juspay/hyperswitch-web/commit/78bc9580b21006fb8522e86e0c2e19f9777586e6))
+
+## [0.84.3](https://github.com/juspay/hyperswitch-web/compare/v0.84.2...v0.84.3) (2024-08-22)
+
+## [0.84.2](https://github.com/juspay/hyperswitch-web/compare/v0.84.1...v0.84.2) (2024-08-22)
+
+
+### Bug Fixes
+
+* google pay button border ([#570](https://github.com/juspay/hyperswitch-web/issues/570)) ([44be5b6](https://github.com/juspay/hyperswitch-web/commit/44be5b69ed95d081d178d9dbed74e9ddcc336a56))
+
 ## [0.84.1](https://github.com/juspay/hyperswitch-web/compare/v0.84.0...v0.84.1) (2024-08-13)
 
 

package.json

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

rescript.json

@@ -14,7 +14,7 @@
   "namespace": true,
   "ppx-flags": [],
   "package-specs": {
-    "module": "es6",
+    "module": "esmodule",
     "in-source": true
   },
   "bs-dependencies": [

src/CollectWidget.res

@@ -497,23 +497,28 @@ let make = (
   }
 
   let handleTabSelection = selectedPMT => {
-    if (
-      availablePaymentMethodTypesOrdered->Array.indexOf(selectedPMT) >=
-        defaultOptionsLimitInTabLayout
-    ) {
-      // Move the selected payment method at the last tab position
-      let ordList = availablePaymentMethodTypes->Array.reduceWithIndex([], (acc, pmt, i) => {
-        if i === defaultOptionsLimitInTabLayout - 1 {
-          acc->Array.push(selectedPMT)
-        }
-        if pmt !== selectedPMT {
-          acc->Array.push(pmt)
-        }
-        acc
-      })
-      setAvailablePaymentMethodTypesOrdered(_ => ordList)
-    }
-    setSelectedPaymentMethodType(_ => Some(selectedPMT))
+    availablePaymentMethodTypesOrdered
+    ->Array.find(pmt => pmt->getPaymentMethodTypeLabel === selectedPMT)
+    ->Option.map(selectedPaymentMethod => {
+      if (
+        availablePaymentMethodTypesOrdered->Array.indexOf(selectedPaymentMethod) >=
+          defaultOptionsLimitInTabLayout
+      ) {
+        // Move the selected payment method at the last tab position
+        let ordList = availablePaymentMethodTypes->Array.reduceWithIndex([], (acc, pmt, i) => {
+          if i === defaultOptionsLimitInTabLayout - 1 {
+            acc->Array.push(selectedPaymentMethod)
+          }
+          if pmt !== selectedPaymentMethod {
+            acc->Array.push(pmt)
+          }
+          acc
+        })
+        setAvailablePaymentMethodTypesOrdered(_ => ordList)
+      }
+      setSelectedPaymentMethodType(_ => Some(selectedPaymentMethod))
+    })
+    ->ignore
   }
 
   let renderTabScreen = (~limit=defaultOptionsLimitInTabLayout) => {
@@ -541,8 +546,7 @@ let make = (
                 <option
                   key={i->Int.toString}
                   value={pmt->getPaymentMethodTypeLabel}
-                  className="flex items-center px-2.5 py-0.5 cursor-pointer hover:bg-jp-gray-50"
-                  onClick={_ => handleTabSelection(pmt)}>
+                  className="text-black bg-white hover:bg-gray-100">
                   {React.string(pmt->getPaymentMethodTypeLabel)}
                 </option>,
               )
@@ -559,7 +563,7 @@ let make = (
                 <div
                   key={i->Int.toString}
                   onClick={_ => setSelectedPaymentMethodType(_ => Some(pmt))}
-                  className="flex w-full items-center rounded border border-solid border-jp-gray-700 px-2.5 py-1.5 mr-2.5 cursor-pointer hover:bg-jp-gray-50"
+                  className="flex w-full items-center rounded border-0 px-2.5 py-1.5 mr-2.5 cursor-pointer hover:bg-jp-gray-50"
                   style={selectedPaymentMethodType === Some(pmt) ? activeStyles : defaultStyles}>
                   {pmt->getPaymentMethodTypeIcon}
                   <div className="ml-2.5"> {React.string(pmt->getPaymentMethodTypeLabel)} </div>
@@ -582,7 +586,8 @@ let make = (
                       size=10
                     />
                     <select
-                      className="h-full relative rounded border border-solid border-jp-gray-700 py-1.5 cursor-pointer bg-white text-transparent w-8 hover:bg-jp-gray-50 focus:border-0.5">
+                      onChange={ev => handleTabSelection(ReactEvent.Form.target(ev)["value"])}
+                      className="h-full relative rounded border border-solid border-jp-gray-700 py-1.5 cursor-pointer bg-white text-transparent w-8 hover:bg-jp-gray-50">
                       {switch selectedPaymentMethodType {
                       | Some(selectedPaymentMethodType) =>
                         <option

src/Components/AddBankAccount.res

@@ -36,7 +36,7 @@ let make = (~modalData, ~setModalData) => {
   let toolTipRef = React.useRef(Nullable.null)
 
   let openModal = () => {
-    handlePostMessage([
+    messageParentWindow([
       ("fullscreen", true->JSON.Encode.bool),
       ("iframeId", iframeId->JSON.Encode.string),
     ])

src/Components/AddressPaymentInput.res

@@ -7,7 +7,7 @@ type addressType = Line1 | Line2 | City | Postal | State | Country
 type dataModule = {states: JSON.t}
 
 @val
-external importStates: string => Promise.t<dataModule> = "import"
+external importStates: string => promise<dataModule> = "import"
 
 let getShowType = str => {
   switch str {

src/Components/FullScreenDivDriver.res

@@ -1,7 +1,7 @@
 @react.component
 let make = () => {
   React.useEffect0(() => {
-    Utils.handlePostMessage([("driverMounted", true->JSON.Encode.bool)])
+    Utils.messageParentWindow([("driverMounted", true->JSON.Encode.bool)])
     None
   })
   <div />

src/Components/InputField.res

@@ -109,7 +109,7 @@ let make = (
   let concatString = Array.joinWith([cardEmpty, cardComplete, cardInvalid, cardFocused], "")
 
   React.useEffect(() => {
-    Utils.handlePostMessage([
+    Utils.messageParentWindow([
       ("id", iframeId->JSON.Encode.string),
       ("concatedString", concatString->JSON.Encode.string),
     ])

src/Components/Modal.res

@@ -1,7 +1,7 @@
 let close = setOpenModal => {
   setOpenModal(_ => false)
   setTimeout(() => {
-    Utils.handlePostMessage([("fullscreen", false->JSON.Encode.bool)])
+    Utils.messageParentWindow([("fullscreen", false->JSON.Encode.bool)])
   }, 450)->ignore
 }
 
@@ -21,7 +21,7 @@ let make = (
     switch closeCallback {
     | Some(fn) => fn()
     | None => setTimeout(() => {
-        Utils.handlePostMessage([("fullscreen", false->JSON.Encode.bool)])
+        Utils.messageParentWindow([("fullscreen", false->JSON.Encode.bool)])
       }, 450)->ignore
     }
   }

src/Components/PayNowButton.res

@@ -14,17 +14,13 @@ let make = () => {
   open RecoilAtoms
   open Utils
   let (showLoader, setShowLoader) = React.useState(() => false)
+  let (isPayNowButtonDisable, setIsPayNowButtonDisable) = React.useState(() => false)
   let {themeObj, localeString} = configAtom->Recoil.useRecoilValueFromAtom
   let {sdkHandleConfirmPayment} = optionAtom->Recoil.useRecoilValueFromAtom
-  let (isPayNowButtonDisable, setIsPayNowButtonDisable) = payNowButtonDisable->Recoil.useRecoilState
 
   let confirmPayload = sdkHandleConfirmPayment->PaymentBody.confirmPayloadForSDKButton
   let buttonText = sdkHandleConfirmPayment.buttonText->Option.getOr(localeString.payNowButton)
 
-  React.useEffect1(() => {
-    setIsPayNowButtonDisable(_ => !sdkHandleConfirmPayment.allowButtonBeforeValidation)
-    None
-  }, [sdkHandleConfirmPayment.allowButtonBeforeValidation])
 
   let handleMessage = (event: Types.event) => {
     let json = event.data->Identity.anyTypeToJson->getStringFromJson("")->safeParse
@@ -43,7 +39,7 @@ let make = () => {
     setIsPayNowButtonDisable(_ => true)
     setShowLoader(_ => true)
     EventListenerManager.addSmartEventListener("message", handleMessage, "onSubmitSuccessful")
-    handlePostMessage([("handleSdkConfirm", confirmPayload)])
+    messageParentWindow([("handleSdkConfirm", confirmPayload)])
   }
 
   <div className="flex flex-col gap-1 h-auto w-full items-center">

src/Components/PaymentLoader.res

@@ -4,7 +4,7 @@ let make = () => {
   let (branding, setBranding) = React.useState(_ => "auto")
 
   React.useEffect0(() => {
-    handlePostMessage([("iframeMountedCallback", true->JSON.Encode.bool)])
+    messageParentWindow([("iframeMountedCallback", true->JSON.Encode.bool)])
     let handle = (ev: Window.event) => {
       let json = ev.data->safeParse
       let dict = json->getDictFromJson

src/Components/SavedPaymentManagement.res

@@ -18,7 +18,7 @@ let make = (~savedMethods: array<PaymentType.customerMethods>, ~setSavedMethods)
   }
 
   let handleDelete = (paymentItem: PaymentType.customerMethods) => {
-    handlePostMessage([
+    messageParentWindow([
       ("fullscreen", true->JSON.Encode.bool),
       ("param", "paymentloader"->JSON.Encode.string),
       ("iframeId", iframeId->JSON.Encode.string),
@@ -44,7 +44,7 @@ let make = (~savedMethods: array<PaymentType.customerMethods>, ~setSavedMethods)
       } else {
         logger.setLogError(~value=res->JSON.stringify, ~eventName=DELETE_SAVED_PAYMENT_METHOD)
       }
-      handlePostMessage([("fullscreen", false->JSON.Encode.bool)])
+      messageParentWindow([("fullscreen", false->JSON.Encode.bool)])
       resolve()
     })
     ->catch(err => {
@@ -53,7 +53,7 @@ let make = (~savedMethods: array<PaymentType.customerMethods>, ~setSavedMethods)
         ~value=`Error Deleting Saved Payment Method: ${exceptionMessage}`,
         ~eventName=DELETE_SAVED_PAYMENT_METHOD,
       )
-      handlePostMessage([("fullscreen", false->JSON.Encode.bool)])
+      messageParentWindow([("fullscreen", false->JSON.Encode.bool)])
       resolve()
     })
     ->ignore

src/Hooks/UtilityHooks.res

@@ -14,14 +14,8 @@ let useHandlePostMessages = (~complete, ~empty, ~paymentType, ~savedMethod=false
   open RecoilAtoms
 
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
-  let setIsPayNowButtonDisable = Recoil.useSetRecoilState(payNowButtonDisable)
-  let {sdkHandleConfirmPayment} = Recoil.useRecoilValueFromAtom(optionAtom)
 
   React.useEffect(() => {
-    if !sdkHandleConfirmPayment.allowButtonBeforeValidation {
-      let isCompletelyFilled = complete && paymentType !== ""
-      setIsPayNowButtonDisable(_ => !isCompletelyFilled)
-    }
     Utils.handlePostMessageEvents(~complete, ~empty, ~paymentType, ~loggerState, ~savedMethod)
     None
   }, (complete, empty, paymentType))

src/LoaderController.res

@@ -24,7 +24,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
   let {config} = configAtom
   let {iframeId} = keys
 
-  let handlePostMessage = data => handlePostMessage(data, ~targetOrigin=keys.parentURL)
+  let messageParentWindow = data => messageParentWindow(data, ~targetOrigin=keys.parentURL)
 
   let setUserFullName = Recoil.useLoggedSetRecoilState(userFullName, "fullName", logger)
   let setUserEmail = Recoil.useLoggedSetRecoilState(userEmailAddress, "email", logger)
@@ -141,8 +141,8 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
   }
 
   React.useEffect0(() => {
-    handlePostMessage([("iframeMounted", true->JSON.Encode.bool)])
-    handlePostMessage([("applePayMounted", true->JSON.Encode.bool)])
+    messageParentWindow([("iframeMounted", true->JSON.Encode.bool)])
+    messageParentWindow([("applePayMounted", true->JSON.Encode.bool)])
     logger.setLogInitiated()
     let updatedState: PaymentType.loadType = switch paymentMethodList {
     | Loading =>
@@ -553,7 +553,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
 
   React.useEffect(() => {
     let iframeHeight = divH->Float.equal(0.0) ? divH : divH +. 1.0
-    handlePostMessage([
+    messageParentWindow([
       ("iframeHeight", iframeHeight->JSON.Encode.float),
       ("iframeId", iframeId->JSON.Encode.string),
     ])

src/PaymentElement.res

@@ -369,7 +369,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
     let evalMethodsList = () =>
       switch paymentMethodList {
       | SemiLoaded | LoadError(_) | Loaded(_) =>
-        handlePostMessage([("ready", true->JSON.Encode.bool)])
+        messageParentWindow([("ready", true->JSON.Encode.bool)])
       | _ => ()
       }
     if !displaySavedPaymentMethods {
@@ -379,7 +379,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       | LoadingSavedCards => ()
       | LoadedSavedCards(list, _) =>
         list->Array.length > 0
-          ? handlePostMessage([("ready", true->JSON.Encode.bool)])
+          ? messageParentWindow([("ready", true->JSON.Encode.bool)])
           : evalMethodsList()
       | NoResult(_) => evalMethodsList()
       }

src/PaymentMethodCollectElement.res

@@ -229,10 +229,10 @@ let make = (~integrateError, ~logger) => {
         <div
           className="flex flex-row justify-between items-center w-full px-10 py-5 border-b border-jp-gray-300">
           <div className="text-2xl font-semibold"> {React.string(options.collectorName)} </div>
-          <img className="h-7 w-auto" src={options.logo} alt="o" />
+          <img className="h-12 w-auto max-w-21" src={options.logo} alt="o" />
         </div>
         <img className="h-40 w-40 mt-7" src={imageSource} alt="o" />
-        <div className="text-5 font-semibold mt-2.5"> {React.string(readableStatus)} </div>
+        <div className="text-xl font-semibold mt-2.5"> {React.string(readableStatus)} </div>
         <div className="text-jp-gray-800 m text-center mx-10 mb-10">
           {React.string(statusInfo.message)}
         </div>
@@ -292,11 +292,12 @@ let make = (~integrateError, ~logger) => {
                   <div
                     className="flex flex-col-reverse
                     lg:mx-5 lg:mt-5 lg:flex-row lg:justify-between">
-                    <div className="font-bold text-5xl mt-5 lg:mt-0 lg:text-3xl">
-                      {React.string(`${options.currency} ${options.amount}`)}
+                    <div
+                      className="font-bold text-5xl mt-5 lg:mt-0 lg:text-3xl flex justify-center items-center">
+                      <p> {React.string(`${options.currency} ${options.amount}`)} </p>
                     </div>
-                    <div className="flex items-center justify-center h-16 w-16 bg-white rounded-sm">
-                      <img className="max-h-12 max-w-16 h-auto w-auto" src={merchantLogo} alt="O" />
+                    <div className="flex items-center justify-center h-12 w-auto bg-white rounded-sm">
+                      <img className="max-h-12 w-auto max-w-21 h-auto w-auto" src={merchantLogo} alt="O" />
                     </div>
                   </div>
                   <div className="lg:mx-5">

src/Payments/AddBankDetails.res

@@ -45,7 +45,7 @@ let make = (~paymentMethodType) => {
             ~optLogger=Some(logger),
           )
           ->then(_ => {
-            handlePostMessage([("fullscreen", false->JSON.Encode.bool)])
+            messageParentWindow([("fullscreen", false->JSON.Encode.bool)])
             setShowFields(_ => false)
             JSON.Encode.null->resolve
           })