Merge branch 'main' of github.com:juspay/hyperswitch-web into compres…

…sed-theme-layout
juspay · May 2, 2024 · c1c1152 · c1c1152
2 parents 02d2d6f + 9daf6d4
commit c1c1152
Show file tree

Hide file tree

Showing 28 changed files with 727 additions and 429 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,63 @@
-## [0.45.2](https://github.com/juspay/hyperswitch-web/compare/v0.45.1...v0.45.2) (2024-04-24)
+# [0.47.0](https://github.com/juspay/hyperswitch-web/compare/v0.46.5...v0.47.0) (2024-04-30)
 
 
 ### Bug Fixes
 
-* added breakpoints to debug ([1f754b6](https://github.com/juspay/hyperswitch-web/commit/1f754b6f4023709752ef892c0e2861d34aa4f2fe))
+* third party confirm url ([#342](https://github.com/juspay/hyperswitch-web/issues/342)) ([4ba7599](https://github.com/juspay/hyperswitch-web/commit/4ba7599c90dac4c990950eda9bcff49b9ef59e02))
+
+
+### Features
+
+* added one click widgets (applepay, googlepay, paypal) ([#271](https://github.com/juspay/hyperswitch-web/issues/271)) ([509829a](https://github.com/juspay/hyperswitch-web/commit/509829a0c24e10008eef22ede8f4462dfd9eca2d))
+
+## [0.46.6](https://github.com/juspay/hyperswitch-web/compare/v0.46.5...v0.46.6) (2024-04-30)
+
+
+### Bug Fixes
+
+* third party confirm url ([#342](https://github.com/juspay/hyperswitch-web/issues/342)) ([4ba7599](https://github.com/juspay/hyperswitch-web/commit/4ba7599c90dac4c990950eda9bcff49b9ef59e02))
+
+## [0.46.5](https://github.com/juspay/hyperswitch-web/compare/v0.46.4...v0.46.5) (2024-04-30)
+
+
+### Bug Fixes
+
+* cdn confirm endpoint ([#341](https://github.com/juspay/hyperswitch-web/issues/341)) ([664fd07](https://github.com/juspay/hyperswitch-web/commit/664fd07e227f49598f8ba83d1894abce0648dec6))
+
+## [0.46.4](https://github.com/juspay/hyperswitch-web/compare/v0.46.3...v0.46.4) (2024-04-30)
+
+
+### Bug Fixes
+
+* cdn confirm endpoint ([#340](https://github.com/juspay/hyperswitch-web/issues/340)) ([6750ad0](https://github.com/juspay/hyperswitch-web/commit/6750ad014677a173de2c9874a9771f9bdf149557))
+
+## [0.46.3](https://github.com/juspay/hyperswitch-web/compare/v0.46.2...v0.46.3) (2024-04-30)
+
+
+### Bug Fixes
+
+* cdn backend endpoint ([#339](https://github.com/juspay/hyperswitch-web/issues/339)) ([5aa7459](https://github.com/juspay/hyperswitch-web/commit/5aa74596c123a909f646ed767a694f741e1a2d4f))
+
+## [0.46.2](https://github.com/juspay/hyperswitch-web/compare/v0.46.1...v0.46.2) (2024-04-30)
+
+
+### Bug Fixes
+
+* **webpack:** reverting back the CDN changes ([a524987](https://github.com/juspay/hyperswitch-web/commit/a524987f488fd57d775c671cec6dcf59f9db797c))
+
+## [0.46.1](https://github.com/juspay/hyperswitch-web/compare/v0.46.0...v0.46.1) (2024-04-29)
+
+
+### Bug Fixes
+
+* move applepay thirdparty event listeners outside ([#336](https://github.com/juspay/hyperswitch-web/issues/336)) ([c08ec25](https://github.com/juspay/hyperswitch-web/commit/c08ec25e1211e3efdbe7af5c6db44d6a0b7cc03b))
+
+# [0.46.0](https://github.com/juspay/hyperswitch-web/compare/v0.45.1...v0.46.0) (2024-04-26)
+
+
+### Features
+
+* three_ds polling part2 ([#334](https://github.com/juspay/hyperswitch-web/issues/334)) ([b61bc3c](https://github.com/juspay/hyperswitch-web/commit/b61bc3cdd049a8b66bbfe38879367ecb22ec0659))
 
 ## [0.45.1](https://github.com/juspay/hyperswitch-web/compare/v0.45.0...v0.45.1) (2024-04-24)
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.45.2",
+  "version": "0.47.0",
   "main": "index.js",
   "private": true,
   "dependencies": {

diff --git a/src/App.res b/src/App.res
@@ -1,13 +1,14 @@
 @react.component
 let make = () => {
-  let (logger, initTimestamp) = React.useMemo0(() => {
-    (OrcaLogger.make(), Date.now())
-  })
   let url = RescriptReactRouter.useUrl()
   let (integrateError, setIntegrateErrorError) = React.useState(() => false)
   let setLoggerState = Recoil.useSetRecoilState(RecoilAtoms.loggerAtom)
 
   let paymentMode = CardUtils.getQueryParamsDictforKey(url.search, "componentName")
+  let paymentType = paymentMode->CardThemeType.getPaymentMode
+  let (logger, initTimestamp) = React.useMemo0(() => {
+    (OrcaLogger.make(~source=Elements(paymentType), ()), Date.now())
+  })
   let fullscreenMode = CardUtils.getQueryParamsDictforKey(url.search, "fullscreenType")
 
   React.useEffect(() => {

diff --git a/src/CardTheme.res b/src/CardTheme.res
@@ -42,17 +42,6 @@ let getShowLoader = (str, logger) => {
   }
 }
 
-let getPaymentMode = val => {
-  switch val {
-  | "card" => Card
-  | "payment" => Payment
-  | "cardNumber" => CardNumberElement
-  | "cardExpiry" => CardExpiryElement
-  | "cardCvc" => CardCVCElement
-  | _ => NONE
-  }
-}
-
 let defaultAppearance = {
   theme: Default,
   variables: DefaultTheme.default,

diff --git a/src/CardUtils.res b/src/CardUtils.res
@@ -338,6 +338,10 @@ let getCardBrandIcon = (cardType, paymentType) => {
     | CardNumberElement
     | CardExpiryElement
     | CardCVCElement
+    | GooglePayElement
+    | PayPalElement
+    | ApplePayElement
+    | PaymentRequestButtonsElement
     | NONE =>
       <Icon size=brandIconSize name="default-card" />
     }

diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
@@ -22,7 +22,7 @@ let make = (
   let {billingAddress} = Recoil.useRecoilValueFromAtom(optionAtom)
 
   //<...>//
-  let paymentMethodTypes = DynamicFieldsUtils.usePaymentMethodTypeFromList(
+  let paymentMethodTypes = PaymentUtils.usePaymentMethodTypeFromList(
     ~list,
     ~paymentMethod,
     ~paymentMethodType,

diff --git a/src/Components/SavedMethods.res b/src/Components/SavedMethods.res
@@ -55,7 +55,7 @@ let make = (
           | Some(ele) => ele
           | None => ""
           }->getCardType,
-          ""->CardTheme.getPaymentMode,
+          ""->CardThemeType.getPaymentMode,
         )
       }
       let isActive = token == obj.paymentToken

diff --git a/src/LoaderController.res b/src/LoaderController.res
@@ -73,12 +73,16 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
 
   let updateOptions = dict => {
     let optionsDict = dict->getDictFromObj("options")
-    switch paymentMode->CardTheme.getPaymentMode {
+    switch paymentMode->CardThemeType.getPaymentMode {
     | CardNumberElement
     | CardExpiryElement
     | CardCVCElement
     | Card =>
       setOptions(_ => ElementType.itemToObjMapper(optionsDict, logger))
+    | GooglePayElement
+    | PayPalElement
+    | ApplePayElement
+    | PaymentRequestButtonsElement
     | Payment => {
         let paymentOptions = PaymentType.itemToObjMapper(optionsDict, logger)
         setOptionsPayment(_ => paymentOptions)
@@ -176,7 +180,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
     if dict->Dict.toArray->Array.length > 0 {
       generateStyleSheet("", dict, "themestyle")
     }
-    switch paymentMode->CardTheme.getPaymentMode {
+    switch paymentMode->CardThemeType.getPaymentMode {
     | Payment => ()
     | _ =>
       let styleClass = [
@@ -233,11 +237,6 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
                 let publishableKey = dict->getString("publishableKey", "")
                 logger.setMerchantId(publishableKey)
               }
-
-              if dict->getDictIsSome("endpoint") {
-                let endpoint = dict->getString("endpoint", "")
-                ApiEndpoint.setApiEndPoint(endpoint)
-              }
               if dict->getDictIsSome("analyticsMetadata") {
                 let metadata = dict->getJsonObjectFromDict("analyticsMetadata")
                 logger.setMetadata(metadata)
@@ -498,8 +497,9 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
   }
 
   React.useEffect(() => {
+    let iframeHeight = divH->Float.equal(0.0) ? divH : divH +. 1.0
     handlePostMessage([
-      ("iframeHeight", (divH +. 1.0)->JSON.Encode.float),
+      ("iframeHeight", iframeHeight->JSON.Encode.float),
       ("iframeId", iframeId->JSON.Encode.string),
     ])
     None

diff --git a/src/PaymentElement.res b/src/PaymentElement.res
@@ -19,10 +19,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
   } = Recoil.useRecoilValueFromAtom(optionAtom)
   let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let optionAtomValue = Recoil.useRecoilValueFromAtom(optionAtom)
-  let isApplePayReady = Recoil.useRecoilValueFromAtom(isApplePayReady)
-  let isGooglePayReady = Recoil.useRecoilValueFromAtom(isGooglePayReady)
   let methodslist = Recoil.useRecoilValueFromAtom(list)
-  let paymentOrder = paymentMethodOrder->getOptionalArr->removeDuplicate
   let (sessions, setSessions) = React.useState(_ => Dict.make()->JSON.Encode.object)
   let (paymentOptions, setPaymentOptions) = React.useState(_ => [])
   let (walletOptions, setWalletOptions) = React.useState(_ => [])
@@ -102,52 +99,12 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
     None
   }, [savedMethods])
 
-  let areAllGooglePayRequiredFieldsPrefilled = DynamicFieldsUtils.useAreAllRequiredFieldsPrefilled(
+  let (walletList, paymentOptionsList, actualList) = PaymentUtils.useGetPaymentMethodList(
     ~list,
-    ~paymentMethod="wallet",
-    ~paymentMethodType="google_pay",
+    ~paymentOptions,
+    ~paymentType,
   )
 
-  let areAllApplePayRequiredFieldsPrefilled = DynamicFieldsUtils.useAreAllRequiredFieldsPrefilled(
-    ~list,
-    ~paymentMethod="wallet",
-    ~paymentMethodType="apple_pay",
-  )
-
-  let (walletList, paymentOptionsList, actualList) = React.useMemo(() => {
-    switch methodslist {
-    | Loaded(paymentlist) =>
-      let paymentOrder =
-        paymentOrder->Array.length > 0 ? paymentOrder : PaymentModeType.defaultOrder
-      let plist = paymentlist->getDictFromJson->PaymentMethodsRecord.itemToObjMapper
-      let (wallets, otherOptions) =
-        plist->PaymentUtils.paymentListLookupNew(
-          ~order=paymentOrder,
-          ~showApplePay=isApplePayReady,
-          ~showGooglePay=isGooglePayReady,
-          ~areAllGooglePayRequiredFieldsPrefilled,
-          ~areAllApplePayRequiredFieldsPrefilled,
-        )
-      (
-        wallets->removeDuplicate,
-        paymentOptions->Array.concat(otherOptions)->removeDuplicate,
-        otherOptions,
-      )
-    | SemiLoaded =>
-      showCardFormByDefault && checkPriorityList(paymentMethodOrder)
-        ? ([], ["card"], [])
-        : ([], [], [])
-    | _ => ([], [], [])
-    }
-  }, (
-    methodslist,
-    paymentMethodOrder,
-    isApplePayReady,
-    isGooglePayReady,
-    areAllGooglePayRequiredFieldsPrefilled,
-    areAllApplePayRequiredFieldsPrefilled,
-  ))
-
   React.useEffect(() => {
     switch methodslist {
     | Loaded(paymentlist) =>

diff --git a/src/PaymentElementRenderer.res b/src/PaymentElementRenderer.res
@@ -15,9 +15,14 @@ let make = (
   switch (sessions, list) {
   | (_, Loading) =>
     <RenderIf condition=showLoader>
-      <PaymentElementShimmer />
+      {paymentType->Utils.isWalletElementPaymentType
+        ? <WalletShimmer />
+        : <PaymentElementShimmer />}
     </RenderIf>
-  | _ => <PaymentElement cardProps expiryProps cvcProps paymentType />
+  | _ =>
+    paymentType->Utils.isWalletElementPaymentType
+      ? <WalletElement paymentType />
+      : <PaymentElement cardProps expiryProps cvcProps paymentType />
   }
 }
 

diff --git a/src/Payments/ApplePay.res b/src/Payments/ApplePay.res
@@ -54,7 +54,7 @@ let make = (
 
   let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
 
-  let processPayment = bodyArr => {
+  let processPayment = (bodyArr, ~isThirdPartyFlow=false, ()) => {
     let requestBody = PaymentUtils.appendedCustomerAcceptance(
       ~isGuestCustomer,
       ~paymentType=list.payment_type,
@@ -69,6 +69,7 @@ let make = (
           publishableKey,
         },
         ~handleUserError=true,
+        ~isThirdPartyFlow,
         (),
       )
     } else {
@@ -86,6 +87,7 @@ let make = (
           publishableKey,
         },
         ~handleUserError=true,
+        ~isThirdPartyFlow,
         (),
       )
     }
@@ -264,22 +266,15 @@ let make = (
           if isDelayedSessionToken {
             setShowApplePayLoader(_ => true)
             let bodyDict = PaymentBody.applePayThirdPartySdkBody(~connectors)
-            processPayment(bodyDict)
+            processPayment(bodyDict, ~isThirdPartyFlow=true, ())
           } else {
             let message = [("applePayButtonClicked", true->JSON.Encode.bool)]
             Utils.handlePostMessage(message)
           }
         } else {
           let bodyDict = PaymentBody.applePayRedirectBody(~connectors)
-          processPayment(bodyDict)
+          processPayment(bodyDict, ())
         }
-        let value = "Payment Data Filled: New Payment Method"
-        loggerState.setLogInfo(
-          ~value,
-          ~eventName=PAYMENT_DATA_FILLED,
-          ~paymentMethod="APPLE_PAY",
-          (),
-        )
       } else {
         setApplePayClicked(_ => false)
       }
@@ -302,7 +297,7 @@ let make = (
           let token =
             dict->Dict.get("applePayProcessPayment")->Option.getOr(Dict.make()->JSON.Encode.object)
           let bodyDict = PaymentBody.applePayBody(~token, ~connectors)
-          processPayment(bodyDict)
+          processPayment(bodyDict, ())
         } else if dict->Dict.get("showApplePayButton")->Option.isSome {
           setApplePayClicked(_ => false)
           if !isWallet {