diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/PaymentOptions.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/PaymentOptions.tsx | 100 |
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> - ); + ); */} } |