From a59df74fb2b4374fd58f68fd4abaffe623cd54d6 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Fri, 22 Sep 2023 15:29:19 -0300
Subject: more ui

---
 packages/demobank-ui/src/pages/PaymentOptions.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

(limited to 'packages/demobank-ui/src/pages/PaymentOptions.tsx')

diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx
index 573f8c769..2830f5c1e 100644
--- a/packages/demobank-ui/src/pages/PaymentOptions.tsx
+++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx
@@ -26,12 +26,11 @@ import { useSettings } from "../hooks/settings.js";
  * Let the user choose a payment option,
  * then specify the details trigger the action.
  */
-export function PaymentOptions({ limit }: { limit: AmountJson }): VNode {
+export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJson, goToConfirmOperation: (id: string) => void }): VNode {
   const { i18n } = useTranslationContext();
-  const [settings, updateSettings] = useSettings();
+  const [settings] = useSettings();
 
   const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>();
-  // const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(undefined);
 
   return (
     <div class="mt-2">
@@ -56,6 +55,14 @@ export function PaymentOptions({ limit }: { limit: AmountJson }): VNode {
                 <span id="project-type-0-description-0" class="mt-1 flex items-center text-sm text-gray-500">
                   <i18n.Translate>Withdraw digital money into your mobile wallet or browser extension</i18n.Translate>
                 </span>
+                {!!settings.currentWithdrawalOperationId &&
+                  <span class="inline-flex items-center gap-x-1.5 rounded-full bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700">
+                    <svg class="h-1.5 w-1.5 fill-green-500" viewBox="0 0 6 6" aria-hidden="true">
+                      <circle cx="3" cy="3" r="3" />
+                    </svg>
+                    <i18n.Translate>Operation in progress</i18n.Translate>
+                  </span>
+                }
               </span>
             </span>
             <svg class="h-5 w-5 text-indigo-600" style={{ visibility: tab === "charge-wallet" ? "visible" : "hidden" }} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -88,9 +95,7 @@ export function PaymentOptions({ limit }: { limit: AmountJson }): VNode {
           <WalletWithdrawForm
             focus
             limit={limit}
-            onSuccess={(id) => {
-              updateSettings("currentWithdrawalOperationId", id);
-            }}
+            goToConfirmOperation={goToConfirmOperation}
             onCancel={() => {
               setTab(undefined)
             }}
-- 
cgit v1.2.3