Merge branch 'small-refactoring' of github.com:juspay/hyperswitch-web…

… into small-refactoring

CHANGELOG.md

@@ -1,3 +1,24 @@
+## [0.99.4](https://github.com/juspay/hyperswitch-web/compare/v0.99.3...v0.99.4) (2024-11-05)
+
+
+### Bug Fixes
+
+* card brand update to prevent multiple error messages ([#767](https://github.com/juspay/hyperswitch-web/issues/767)) ([17892d9](https://github.com/juspay/hyperswitch-web/commit/17892d9ff7470ac12e251e878afe9ae9affffd50))
+
+## [0.99.3](https://github.com/juspay/hyperswitch-web/compare/v0.99.2...v0.99.3) (2024-11-05)
+
+
+### Bug Fixes
+
+* remove blue border of iframe in firefox ([#766](https://github.com/juspay/hyperswitch-web/issues/766)) ([f629219](https://github.com/juspay/hyperswitch-web/commit/f629219492ef234c2df76a52a99fb135def7b428))
+
+## [0.99.2](https://github.com/juspay/hyperswitch-web/compare/v0.99.1...v0.99.2) (2024-11-04)
+
+
+### Reverts
+
+* reverting fetchAPI changes ([3108148](https://github.com/juspay/hyperswitch-web/commit/31081488d47d81590a980cc147efdb918b2a8235))
+
 ## [0.99.1](https://github.com/juspay/hyperswitch-web/compare/v0.99.0...v0.99.1) (2024-11-04)
 
 

package.json

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

src/Payment.res

@@ -334,10 +334,11 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
       ""
     } else if isCardSupported->Option.getOr(true) {
       localeString.inValidCardErrorText
-    } else if cardBrand == "" {
-      localeString.enterValidCardNumberErrorText
     } else {
-      localeString.cardBrandConfiguredErrorText(cardBrand)
+      switch cardNumber->CardUtils.getCardBrand {
+      | "" => localeString.inValidCardErrorText
+      | cardBrandValue => localeString.cardBrandConfiguredErrorText(cardBrandValue)
+      }
     }
     setCardError(_ => cardError)
     None

src/ThreeDSAuth.res

@@ -145,7 +145,13 @@ let make = () => {
     <div className="backdrop-blur-xl">
       <div id="threeDsAuthDiv" className="hidden" />
       <iframe
-        id="threeDsAuthFrame" name="threeDsAuthFrame" style={minHeight: "500px"} width="100%"
+        id="threeDsAuthFrame"
+        name="threeDsAuthFrame"
+        style={
+          minHeight: "500px",
+          outline: "none",
+        }
+        width="100%"
       />
     </div>
   </Modal>

src/ThreeDSMethod.res

@@ -140,6 +140,7 @@ let make = () => {
       name="threeDsInvisibleIframe"
       className="h-96 invisible"
       ref={divRef->ReactDOM.Ref.domRef}
+      style={outline: "none"}
       onLoad={handleOnLoad}
     />
   </>

src/Utilities/Utils.res

@@ -876,50 +876,30 @@ let formatException = exc =>
   | _ => exc->Identity.anyTypeToJson
   }
 
-let fetchApi = async (uri, ~bodyStr: string="", ~headers=Dict.make(), ~method: Fetch.method) => {
-  try {
-    let body = switch method {
-    | #GET => None
-    | _ => Some(Fetch.Body.string(bodyStr))
-    }
-
-    let response = await Fetch.fetch(
+let fetchApi = (uri, ~bodyStr: string="", ~headers=Dict.make(), ~method: Fetch.method) => {
+  open Promise
+  let body = switch method {
+  | #GET => resolve(None)
+  | _ => resolve(Some(Fetch.Body.string(bodyStr)))
+  }
+  body->then(body => {
+    Fetch.fetch(
       uri,
       {
         method,
         ?body,
         headers: getHeaders(~headers, ~uri),
       },
     )
-
-    //*  Fetch.Response.ok - Response status code - 200-299
-    if !(response->Fetch.Response.ok) {
-      let errorText = await response->Fetch.Response.text
-      let status = response->Fetch.Response.status
-      let errorMessage = `FetchError: Failed to fetch (${status->Int.toString}): ${errorText}`
-      Error.raise(Error.make(errorMessage))
-    }
-
-    response
-  } catch {
-  | Exn.Error(error) => {
-      let errorMessage = switch Exn.message(error) {
-      | Some(msg) => msg
-      | None => "Unknown error occurred"
-      }
-
-      let enhancedError = Error.make(`APIError: ${errorMessage} (URL: ${uri})`)
-      Error.raise(enhancedError)
-    }
-  | err => {
-      let exceptionVal = err->formatException->getDictFromJson
-      let errorMessage = exceptionVal->getString("message", "Unknown error")
-      let errorType = exceptionVal->getString("type", "Unknown")
-      let networkError = Error.make(`${errorType}: ${errorMessage} (URL: ${uri})`)
-      Error.raise(networkError)
-    }
-  }
+    ->catch(err => {
+      reject(err)
+    })
+    ->then(resp => {
+      resolve(resp)
+    })
+  })
 }
+
 let arrayJsonToCamelCase = arr => {
   arr->Array.map(item => {
     item->transformKeys(CamelCase)

src/index.css

@@ -1,3 +1,14 @@
+/* Remove blue outline of input, button in firefox */
+@-moz-document url-prefix() {
+  *:focus,
+  *:focus-visible,
+  *:focus-within,
+  *:active,
+  *:visited {
+    outline: none !important;
+  }
+}
+
 /* Remove contact and password icon in safari */
 input::-webkit-credentials-auto-fill-button,
 input::-webkit-contacts-auto-fill-button {

src/orca-loader/Elements.res

@@ -72,6 +72,7 @@ let make = (
               name="orca-payment-element-iframeRef-${localSelectorString}"
               src="${ApiEndpoint.sdkDomainUrl}/index.html?fullscreenType=${componentType}&publishableKey=${publishableKey}&clientSecret=${clientSecret}&sessionId=${sdkSessionId}&endpoint=${endpoint}&merchantHostname=${merchantHostname}&customPodUri=${customPodUri}"              allow="*"
               name="orca-payment"
+              style="outline: none;"
             ></iframe>
           </div>`
         let iframeDiv = Window.createElement("div")

src/orca-loader/LoaderPaymentElement.res

@@ -385,7 +385,7 @@ let make = (
           src="${ApiEndpoint.sdkDomainUrl}/index.html?componentName=${componentType}"
           allow="payment *"
           name="orca-payment"
-          style="border: 0px; ${additionalIframeStyle}"
+          style="border: 0px; ${additionalIframeStyle} outline: none;"
           width="100%"
         ></iframe>
         </div>`

src/orca-loader/PaymentMethodsManagementElements.res

@@ -56,6 +56,7 @@ let make = (
           src="${ApiEndpoint.sdkDomainUrl}/index.html?fullscreenType=${componentType}&publishableKey=${publishableKey}&ephemeralKey=${ephemeralKey}&sessionId=${sdkSessionId}&endpoint=${endpoint}&hyperComponentName=${hyperComponentName->getStrFromHyperComponentName}"
           allow="*"
           name="orca-payment"
+          style="outline: none;"
         ></iframe>
         </div>`
         let iframeDiv = Window.createElement("div")