more ui

1 files changed, 76 insertions, 41 deletions

diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
index 3b983c2d4..b48e3b1dc 100644
--- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
@@ -62,9 +62,10 @@ export function WithdrawalQRCode({
       result.type === ErrorType.CLIENT &&
       result.status === HttpStatusCode.NotFound
     ) {
+      clearCurrentWithdrawal()
       return <div>operation not found</div>;
     }
-    onLoadNotOk();
+    // onLoadNotOk();
     return handleNotOkResult(i18n)(result);
   }
   const { data } = result;
@@ -85,12 +86,12 @@ export function WithdrawalQRCode({
           </i18n.Translate>
         </p>
         <a class="pure-button pure-button-primary"
-          style={{float:"right"}}
+          style={{ float: "right" }}
           onClick={async (e) => {
             e.preventDefault();
             clearCurrentWithdrawal()
             onContinue()
-        }}>
+          }}>
           {i18n.str`Continue`}
         </a>
 
@@ -99,49 +100,69 @@ export function WithdrawalQRCode({
   }
 
   if (data.confirmation_done) {
-    return <section id="main" class="content">
-      <h1 class="nav">{i18n.str`Operation completed`}</h1>
-
-      <section id="assets" style={{maxWidth: 400, marginLeft: "auto", marginRight:"auto"}}>
-        <p>
-          <i18n.Translate>
-            The wire transfer to the GNU Taler Exchange bank's account is completed, now the 
-            exchange will send the requested amount into your GNU Taler wallet.
-          </i18n.Translate>
-        </p>
-        <p>
-          <i18n.Translate>
-            You can close this page now or continue to the account page.
-          </i18n.Translate>
-        </p>
-        <div style={{textAlign:"center"}}>
+    if (!settings.showWithdrawalSuccess) {
+      clearCurrentWithdrawal()
+      onContinue()
+    }
+    return <div class="relative ml-auto mr-auto transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+      <div>
+        <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+          <svg class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+          </svg>
+        </div>
+        <div class="mt-3 text-center sm:mt-5">
+          <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">
+            <i18n.Translate>Withdrawal OK</i18n.Translate>
+          </h3>
+          <div class="mt-2">
+            <p class="text-sm text-gray-500">
+              <i18n.Translate>
+                The wire transfer to the Taler exchange bank's account is completed, now the
+                exchange will send the requested amount into your GNU Taler wallet.
+              </i18n.Translate>
+            </p>
+          </div>
+          <div class="mt-2">
+            <p >
+              <i18n.Translate>
+                You can close this page now or continue to the account page.
+              </i18n.Translate>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="mt-4">
+        <div class="flex items-center justify-between">
+          <span class="flex flex-grow flex-col">
+            <span class="text-sm text-black font-medium leading-6 " id="availability-label">
+              <i18n.Translate>Do not show this again</i18n.Translate>
+            </span>
+          </span>
+          <button type="button" data-enabled={!settings.showWithdrawalSuccess} class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description"
 
-          <a class="pure-button pure-button-primary"
-            onClick={async (e) => {
-              e.preventDefault();
-              clearCurrentWithdrawal()
-              onContinue()
+            onClick={() => {
+              updateSettings("showWithdrawalSuccess", !settings.showWithdrawalSuccess);
             }}>
-            {i18n.str`Continue`}
-          </a>
+            <span aria-hidden="true" data-enabled={!settings.showWithdrawalSuccess} class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
+          </button>
         </div>
-      </section>
-    </section>
-  }
-  if (!data.selected_reserve_pub) {
-    return <div>
-      the exchange is selcted but no reserve pub
+      </div>
+      <div class="mt-5 sm:mt-6">
+        <button type="button"
+          class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          onClick={async (e) => {
+            e.preventDefault();
+            clearCurrentWithdrawal()
+            onContinue()
+          }}>
+          <i18n.Translate>Continue</i18n.Translate>
+        </button>
+      </div>
     </div>
-  }
 
-  const account = !data.selected_exchange_account ? undefined : parsePaytoUri(data.selected_exchange_account)
 
-  if (!account) {
-    return <div>
-      the exchange is selcted but no account 
-    </div>
   }
-
   if (!data.selection_done) {
     return (
       <QrCodeSection
@@ -150,11 +171,25 @@ export function WithdrawalQRCode({
           notifyInfo(i18n.str`Operation canceled`);
           clearCurrentWithdrawal()
           onContinue()
-      }}
+        }}
       />
     );
   }
 
+  if (!data.selected_reserve_pub) {
+    return <div>
+      the exchange is selcted but no reserve pub
+    </div>
+  }
+
+  const account = !data.selected_exchange_account ? undefined : parsePaytoUri(data.selected_exchange_account)
+
+  if (!account) {
+    return <div>
+      the exchange is selcted but no account
+    </div>
+  }
+
   return (
     <WithdrawalConfirmationQuestion
       withdrawUri={withdrawUri}
@@ -167,7 +202,7 @@ export function WithdrawalQRCode({
         notifyInfo(i18n.str`Operation canceled`);
         clearCurrentWithdrawal()
         onContinue()
-  }}
+      }}
     />
   );
 }
\ No newline at end of file