From 44d8cc1a5d2fdcdfe742b5a10824a30c4fe57c60 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <Pritish.budhiraja@gmail.com>
Date: Thu, 13 Jun 2024 18:03:53 +0530
Subject: [PATCH] fix: loader changes

---
 src/Components/Loader.res                | 40 +++++++++++++++---------
 src/Components/PaymentLoader.res         | 24 +++++++++++---
 src/Types/PaymentType.res                |  1 +
 src/orca-loader/LoaderPaymentElement.res | 10 ++++--
 4 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/src/Components/Loader.res b/src/Components/Loader.res
index b3188c667..4186c62ab 100644
--- a/src/Components/Loader.res
+++ b/src/Components/Loader.res
@@ -1,22 +1,34 @@
 @react.component
-let make = (~showText=true) => {
+let make = (~branding="auto", ~showText=true) => {
   let arr = ["hyperswitch-triangle", "hyperswitch-square", "hyperswitch-circle"]
 
   <div className="flex flex-col gap-10 justify-center items-center">
     <div className="flex flex-row gap-10">
-      {arr
-      ->Array.mapWithIndex((item, i) => {
-        <Icon
-          size=52
-          style={
-            animation: "slowShow 1.5s ease-in-out infinite",
-            animationDelay: {((i + 1) * 180)->Int.toString ++ "ms"},
-          }
-          name=item
-          key={i->Int.toString}
-        />
-      })
-      ->React.array}
+      <RenderIf condition={branding === "auto"}>
+        {arr
+        ->Array.mapWithIndex((item, i) => {
+          <Icon
+            size=52
+            style={
+              animation: "slowShow 1.5s ease-in-out infinite",
+              animationDelay: {((i + 1) * 180)->Int.toString ++ "ms"},
+            }
+            name=item
+            key={i->Int.toString}
+          />
+        })
+        ->React.array}
+      </RenderIf>
+      <RenderIf condition={branding === "never"}>
+        <div
+          className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-[#0069FD] border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+          role="status">
+          <span
+            className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
+            {"Loading..."->React.string}
+          </span>
+        </div>
+      </RenderIf>
     </div>
     <RenderIf condition={showText}>
       <div className="flex flex-col gap-5">
diff --git a/src/Components/PaymentLoader.res b/src/Components/PaymentLoader.res
index caa0c11bf..88e75ff12 100644
--- a/src/Components/PaymentLoader.res
+++ b/src/Components/PaymentLoader.res
@@ -1,10 +1,26 @@
 @react.component
 let make = () => {
-  let loaderUI =
+  let (branding, setBranding) = React.useState(_ => "auto")
+
+  React.useEffect0(() => {
+    Utils.handlePostMessage([("iframeMountedCallback", true->JSON.Encode.bool)])
+    let handle = (ev: Window.event) => {
+      let json = ev.data->JSON.parseExn
+      let dict = json->Utils.getDictFromJson
+      setBranding(_ => dict->Utils.getDictFromDict("options")->Utils.getString("branding", "auto"))
+    }
+    Window.addEventListener("message", handle)
+    Some(() => {Window.removeEventListener("message", handle)})
+  })
+
+  let styles =
+    branding === "auto"
+      ? "backdrop-blur-md bg-black/80"
+      : "backdrop-contrast-125 backdrop-blur-2xl opacity-70 bg-black/80"
+
+  <div className={`h-screen w-screen flex m-auto items-center ${styles}`}>
     <div className={`flex flex-col justify-center m-auto visible`}>
-      <Loader />
+      <Loader branding />
     </div>
-  <div className="h-screen w-screen bg-black/80 flex m-auto items-center backdrop-blur-md">
-    {loaderUI}
   </div>
 }
diff --git a/src/Types/PaymentType.res b/src/Types/PaymentType.res
index a9b3c807c..523694c14 100644
--- a/src/Types/PaymentType.res
+++ b/src/Types/PaymentType.res
@@ -978,6 +978,7 @@ let itemToObjMapper = (dict, logger) => {
       "paymentMethodsHeaderText",
       "savedPaymentMethodsHeaderText",
       "hideExpiredPaymentMethods",
+      "branding",
     ],
     dict,
     "options",
diff --git a/src/orca-loader/LoaderPaymentElement.res b/src/orca-loader/LoaderPaymentElement.res
index 5acfaec8f..6f3705efe 100644
--- a/src/orca-loader/LoaderPaymentElement.res
+++ b/src/orca-loader/LoaderPaymentElement.res
@@ -158,7 +158,8 @@ let make = (componentType, options, setIframeRef, iframeRef, mountPostMessage) =
               `#orca-payment-element-iframeRef-${localSelectorString}`,
             )
             switch elem->Nullable.toOption {
-            | Some(ele) => ele
+            | Some(ele) =>
+              ele
               ->Window.style
               ->Window.setHeight(`${iframeHeightRef.contents->Float.toString}px`)
             | None => ()
@@ -246,6 +247,7 @@ let make = (componentType, options, setIframeRef, iframeRef, mountPostMessage) =
                           [
                             ("fullScreenIframeMounted", true->JSON.Encode.bool),
                             ("metadata", fullscreenMetadata.contents),
+                            ("options", options),
                           ]->Dict.fromArray,
                         )
                       }
@@ -254,6 +256,7 @@ let make = (componentType, options, setIframeRef, iframeRef, mountPostMessage) =
                           [
                             ("fullScreenIframeMounted", true->JSON.Encode.bool),
                             ("metadata", fullscreenMetadata.contents),
+                            ("options", options),
                           ]->Dict.fromArray,
                         )
                       }
@@ -269,7 +272,10 @@ let make = (componentType, options, setIframeRef, iframeRef, mountPostMessage) =
               : {
                   ele->Window.innerHTML("")
                   mainElement->Window.iframePostMessage(
-                    [("fullScreenIframeMounted", false->JSON.Encode.bool)]->Dict.fromArray,
+                    [
+                      ("fullScreenIframeMounted", false->JSON.Encode.bool),
+                      ("options", options),
+                    ]->Dict.fromArray,
                   )
                 }
           | None => ()