diff options
author | Sebastian <sebasjm@gmail.com> | 2023-09-20 15:18:36 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-09-25 14:50:39 -0300 |
commit | e39d5c488e2e425bd7febf694caadc17d5126401 (patch) | |
tree | 0431fcaeebf8e515f21f7f1ff607cb4f12fcd509 /packages/demobank-ui/src/pages/PaymentOptions.tsx | |
parent | fdbe623e1060efc4b074d213a96e8f5a2ab7498b (diff) |
more ui
Diffstat (limited to 'packages/demobank-ui/src/pages/PaymentOptions.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/PaymentOptions.tsx | 48 |
1 files changed, 14 insertions, 34 deletions
diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx index cf3f41deb..c82c1b28d 100644 --- a/packages/demobank-ui/src/pages/PaymentOptions.tsx +++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx @@ -15,10 +15,9 @@ */ import { AmountJson } from "@gnu-taler/taler-util"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { notifyInfo, useTranslationContext } from "@gnu-taler/web-util/browser"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; -import { notifyInfo } from "../hooks/notification.js"; import { PaytoWireTransferForm } from "./PaytoWireTransferForm.js"; import { WalletWithdrawForm } from "./WalletWithdrawForm.js"; import { useSettings } from "../hooks/settings.js"; @@ -31,7 +30,8 @@ export function PaymentOptions({ limit }: { limit: AmountJson }): VNode { const { i18n } = useTranslationContext(); const [settings, updateSettings] = useSettings(); - const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(undefined); + const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(); + // const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(undefined); return (<fieldset> <legend class="px-4 text-base font-semibold leading-6 text-gray-900"> @@ -41,34 +41,32 @@ export function PaymentOptions({ limit }: { limit: AmountJson }): VNode { <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={() => { + <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" onClick={() => { 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 id="project-type-0-label" class="block text-sm font-medium text-gray-900"> + <i18n.Translate>a <b>Taler</b> 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={() => { + <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" onClick={() => { 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"> + <span id="project-type-1-label" class="block text-sm 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"> @@ -88,6 +86,9 @@ export function PaymentOptions({ limit }: { limit: AmountJson }): VNode { onSuccess={(id) => { updateSettings("currentWithdrawalOperationId", id); }} + onCancel={() => { + setTab(undefined) + }} /> )} {tab === "wire-transfer" && ( @@ -97,32 +98,11 @@ export function PaymentOptions({ limit }: { limit: AmountJson }): VNode { onSuccess={() => { notifyInfo(i18n.str`Wire transfer created!`); }} + onCancel={() => { + setTab(undefined) + }} /> )} </fieldset>) - {/* return ( - <article> - <div class="payments"> - <div class="tab"> - <button - class={tab === "charge-wallet" ? "tablinks active" : "tablinks"} - onClick={(): void => { - setTab("charge-wallet"); - }} - > - {i18n.str`Withdraw `} - </button> - <button - class={tab === "wire-transfer" ? "tablinks active" : "tablinks"} - onClick={(): void => { - setTab("wire-transfer"); - }} - > - {i18n.str`Wire transfer`} - </button> - </div> - </div> - </article> - ); */} } |