From 9c6a87c5e99102a8047cb674810b713f60069ea0 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <pritish.budhiraja@gmail.com>
Date: Fri, 31 May 2024 16:05:10 +0530
Subject: [PATCH] fix: mb_way ui fix (#407)

---
 src/Components/DropdownField.res           |   4 +-
 src/Components/PaymentField.res            | 149 ++++++++++++---------
 src/Components/PhoneNumberPaymentInput.res |   2 +-
 3 files changed, 87 insertions(+), 68 deletions(-)

diff --git a/src/Components/DropdownField.res b/src/Components/DropdownField.res
index aacc0029e..90cee57a9 100644
--- a/src/Components/DropdownField.res
+++ b/src/Components/DropdownField.res
@@ -104,12 +104,12 @@ let make = (
         <div className={`Input ${className} appearance-none relative`}>
           <RenderIf condition={isDisplayValueVisible && displayValue->Option.isSome}>
             <div
-              className="absolute top-2.5 right-0 left-2 bottom-0 pointer-events-none rounded-sm"
+              className="absolute top-1 left-1 right-0 bottom-0  pointer-events-none rounded-sm z-20 whitespace-nowrap"
               style={
                 background: disabled ? disbaledBG : themeObj.colorBackground,
                 opacity: disabled ? "35%" : "",
                 padding: themeObj.spacingUnit,
-                width: "100%",
+                width: "95%",
               }>
               {React.string(displayValue->Option.getOr(""))}
             </div>
diff --git a/src/Components/PaymentField.res b/src/Components/PaymentField.res
index 8c88e538e..710f88795 100644
--- a/src/Components/PaymentField.res
+++ b/src/Components/PaymentField.res
@@ -87,22 +87,10 @@ let make = (
 
   let flexDirectionBasedOnType = type_ === "tel" ? "flex-row" : "flex-col"
 
-  <div className={`flex ${flexDirectionBasedOnType} w-full`} style={color: themeObj.colorText}>
-    <RenderIf condition={type_ === "tel"}>
-      <DropdownField
-        appearance=config.appearance
-        value={valueDropDown->Option.getOr("")}
-        setValue={setValueDropDown->Option.getOr(_ => ())}
-        fieldName={dropDownFieldName->Option.getOr("")}
-        options={dropDownOptions->Option.getOr([])}
-        width="w-1/3 mr-2"
-        displayValue={displayValue->Option.getOr("")}
-        setDisplayValue={setDisplayValue->Option.getOr(_ => ())}
-        isDisplayValueVisible=true
-      />
-    </RenderIf>
+  <div className="flex flex-col">
     <RenderIf
-      condition={fieldName->String.length > 0 &&
+      condition={name === "phone" &&
+      fieldName->String.length > 0 &&
       config.appearance.labels == Above &&
       isSpacedInnerLayout}>
       <div
@@ -116,59 +104,90 @@ let make = (
         {React.string(fieldName)}
       </div>
     </RenderIf>
-    <div className="flex flex-row w-full" style={direction: direction}>
-      <div className="relative w-full">
-        <input
-          style={
-            background: backgroundClass,
-            padding: themeObj.spacingUnit,
-            width: "100%",
-          }
-          disabled=readOnly
-          ref={inputRef->ReactDOM.Ref.domRef}
-          type_
-          name
-          ?maxLength
-          ?pattern
-          className={`${inputClassStyles} ${inputClass} ${className} focus:outline-none transition-shadow ease-out duration-200`}
-          placeholder={config.appearance.labels == Above || config.appearance.labels == Never
-            ? placeholder
-            : ""}
-          value={value.value}
-          autoComplete="on"
-          onChange
-          onBlur=handleBlur
-          onFocus=handleFocus
+    <div className={`flex ${flexDirectionBasedOnType} w-full`} style={color: themeObj.colorText}>
+      <RenderIf condition={type_ === "tel"}>
+        <DropdownField
+          appearance=config.appearance
+          value={valueDropDown->Option.getOr("")}
+          setValue={setValueDropDown->Option.getOr(_ => ())}
+          fieldName={dropDownFieldName->Option.getOr("")}
+          options={dropDownOptions->Option.getOr([])}
+          width="w-1/3 mr-2"
+          displayValue={displayValue->Option.getOr("")}
+          setDisplayValue={setDisplayValue->Option.getOr(_ => ())}
+          isDisplayValueVisible=true
         />
-        <RenderIf condition={config.appearance.labels == Floating}>
-          <div
-            className={`Label ${floatinglabelClass} ${labelClass} absolute bottom-0 ml-3 ${focusClass}`}
+      </RenderIf>
+      <RenderIf
+        condition={name !== "phone" &&
+        fieldName->String.length > 0 &&
+        config.appearance.labels == Above &&
+        isSpacedInnerLayout}>
+        <div
+          className={`Label ${labelClass}`}
+          style={
+            fontWeight: themeObj.fontWeightNormal,
+            fontSize: themeObj.fontSizeLg,
+            marginBottom: "5px",
+            opacity: "0.6",
+          }>
+          {React.string(fieldName)}
+        </div>
+      </RenderIf>
+      <div className="flex flex-row w-full" style={direction: direction}>
+        <div className="relative w-full">
+          <input
             style={
-              marginBottom: {
-                inputFocused || value.value->String.length > 0 ? "" : themeObj.spacingUnit
-              },
-              fontSize: {
-                inputFocused || value.value->String.length > 0 ? themeObj.fontSizeXs : ""
-              },
-              opacity: "0.6",
-            }>
-            {React.string(fieldName)}
-          </div>
-        </RenderIf>
+              background: backgroundClass,
+              padding: themeObj.spacingUnit,
+              width: "100%",
+            }
+            disabled=readOnly
+            ref={inputRef->ReactDOM.Ref.domRef}
+            type_
+            name
+            ?maxLength
+            ?pattern
+            className={`${inputClassStyles} ${inputClass} ${className} focus:outline-none transition-shadow ease-out duration-200`}
+            placeholder={config.appearance.labels == Above || config.appearance.labels == Never
+              ? placeholder
+              : ""}
+            value={value.value}
+            autoComplete="on"
+            onChange
+            onBlur=handleBlur
+            onFocus=handleFocus
+          />
+          <RenderIf condition={config.appearance.labels == Floating}>
+            <div
+              className={`Label ${floatinglabelClass} ${labelClass} absolute bottom-0 ml-3 ${focusClass}`}
+              style={
+                marginBottom: {
+                  inputFocused || value.value->String.length > 0 ? "" : themeObj.spacingUnit
+                },
+                fontSize: {
+                  inputFocused || value.value->String.length > 0 ? themeObj.fontSizeXs : ""
+                },
+                opacity: "0.6",
+              }>
+              {React.string(fieldName)}
+            </div>
+          </RenderIf>
+        </div>
+        <div className={`relative flex -ml-10  items-center`}> {rightIcon} </div>
       </div>
-      <div className={`relative flex -ml-10  items-center`}> {rightIcon} </div>
+      <RenderIf condition={value.errorString->String.length > 0}>
+        <div
+          className="Error pt-1"
+          style={
+            color: themeObj.colorDangerText,
+            fontSize: themeObj.fontSizeSm,
+            alignSelf: "start",
+            textAlign: "left",
+          }>
+          {React.string(value.errorString)}
+        </div>
+      </RenderIf>
     </div>
-    <RenderIf condition={value.errorString->String.length > 0}>
-      <div
-        className="Error pt-1"
-        style={
-          color: themeObj.colorDangerText,
-          fontSize: themeObj.fontSizeSm,
-          alignSelf: "start",
-          textAlign: "left",
-        }>
-        {React.string(value.errorString)}
-      </div>
-    </RenderIf>
   </div>
 }
diff --git a/src/Components/PhoneNumberPaymentInput.res b/src/Components/PhoneNumberPaymentInput.res
index 9d52efc0f..31ba06cf9 100644
--- a/src/Components/PhoneNumberPaymentInput.res
+++ b/src/Components/PhoneNumberPaymentInput.res
@@ -92,7 +92,7 @@ let make = () => {
       type_="tel"
       name="phone"
       inputRef=phoneRef
-      placeholder="+351 200 000 000"
+      placeholder="000 000 000"
       maxLength=14
       dropDownOptions=phoneNumberCodeOptions
       valueDropDown