1 files changed, 71 insertions, 29 deletions
diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx
index 3552da7b4..cf3f41deb 100644
--- a/packages/demobank-ui/src/pages/PaymentOptions.tsx
+++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx
@@ -31,11 +31,77 @@ export function PaymentOptions({ limit }: { limit: AmountJson }): VNode {
   const { i18n } = useTranslationContext();
   const [settings, updateSettings] = useSettings();
 
-  const [tab, setTab] = useState<"charge-wallet" | "wire-transfer">(
-    "charge-wallet",
-  );
+  const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(undefined);
 
-  return (
+  return (<fieldset>
+    <legend class="px-4 text-base font-semibold leading-6 text-gray-900">
+      <i18n.Translate>Send money to</i18n.Translate>
+    </legend>
+
+    <div class="px-4 mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-4">
+      {/* <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" --> */}
+      <label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" + (tab === "charge-wallet" ? "border-indigo-600 ring-2 ring-indigo-600" : "border-gray-300")}>
+        <input type="radio" name="project-type" value="Newsletter" class="sr-only" aria-labelledby="project-type-0-label" aria-describedby="project-type-0-description-0 project-type-0-description-1" onChange={() => {
+          setTab("charge-wallet")
+        }} />
+        <span class="flex flex-1">
+          <span class="flex flex-col">
+            <span id="project-type-0-label" class="block text-sm font-semibold font-medium text-gray-900">
+              <i18n.Translate>a Taler Wallet</i18n.Translate>
+            </span>
+            <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>
+          </span>
+        </span>
+        {/* <!-- Not Checked: "invisible" --> */}
+        <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">
+          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+        </svg>
+      </label>
+
+
+      {/* <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" --> */}
+      <label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" + (tab === "wire-transfer" ? "border-indigo-600 ring-2 ring-indigo-600" : "border-gray-300")}>
+        <input type="radio" name="project-type" value="Existing Customers" class="sr-only" aria-labelledby="project-type-1-label" aria-describedby="project-type-1-description-0 project-type-1-description-1" onChange={() => {
+          setTab("wire-transfer")
+        }} />
+        <span class="flex flex-1">
+          <span class="flex flex-col">
+            <span id="project-type-1-label" class="block text-sm font-semibold font-medium text-gray-900">
+              <i18n.Translate>another bank account</i18n.Translate>
+            </span>
+            <span id="project-type-1-description-0" class="mt-1 flex items-center text-sm text-gray-500">
+              <i18n.Translate>Make a wire transfer to an account which you know the address.</i18n.Translate>
+            </span>
+          </span>
+        </span>
+        <svg class="h-5 w-5 text-indigo-600" style={{ visibility: tab === "wire-transfer" ? "visible" : "hidden" }} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+        </svg>
+      </label>
+    </div>
+    {tab === "charge-wallet" && (
+      <WalletWithdrawForm
+        focus
+        limit={limit}
+        onSuccess={(id) => {
+          updateSettings("currentWithdrawalOperationId", id);
+        }}
+      />
+    )}
+    {tab === "wire-transfer" && (
+      <PaytoWireTransferForm
+        focus
+        limit={limit}
+        onSuccess={() => {
+          notifyInfo(i18n.str`Wire transfer created!`);
+        }}
+      />
+    )}
+
+  </fieldset>)
+  {/* return (
     <article>
       <div class="payments">
         <div class="tab">
@@ -56,31 +122,7 @@ export function PaymentOptions({ limit }: { limit: AmountJson }): VNode {
             {i18n.str`Wire transfer`}
           </button>
         </div>
-        {tab === "charge-wallet" && (
-          <div id="charge-wallet" class="tabcontent active">
-            <h3>{i18n.str`Obtain digital cash`}</h3>
-            <WalletWithdrawForm
-              focus
-              limit={limit}
-              onSuccess={(id) => {
-                updateSettings("currentWithdrawalOperationId", id);
-              }}
-            />
-          </div>
-        )}
-        {tab === "wire-transfer" && (
-          <div id="wire-transfer" class="tabcontent active">
-            <h3>{i18n.str`Transfer to bank account`}</h3>
-            <PaytoWireTransferForm
-              focus
-              limit={limit}
-              onSuccess={() => {
-                notifyInfo(i18n.str`Wire transfer created!`);
-              }}
-            />
-          </div>
-        )}
       </div>
     </article>
-  );
+  ); */}
 }