fix(payout): dropdown for selecting payment methods, UI updates (#581)

juspay · Aug 23, 2024 · 78bc958 · 78bc958
1 parent 8a10f88
commit 78bc958
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 28 deletions.
diff --git a/src/CollectWidget.res b/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,9 +546,8 @@ 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)}>
-                  <div className="ml-2.5"> {React.string(pmt->getPaymentMethodTypeLabel)} </div>
+                  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

diff --git a/src/PaymentMethodCollectElement.res b/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">