diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx')
-rw-r--r-- | packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx | 120 |
1 files changed, 51 insertions, 69 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx index 5140aae3a..7322ca169 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 Taler Systems S.A. + (C) 2021-2024 Taler Systems S.A. GNU Taler is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software @@ -19,113 +19,101 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { stringifyPayTemplateUri } from "@gnu-taler/taler-util"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { + TalerMerchantApi, + stringifyPayTemplateUri +} from "@gnu-taler/taler-util"; +import { + useTranslationContext +} from "@gnu-taler/web-util/browser"; import { VNode, h } from "preact"; -import { useState } from "preact/hooks"; import { QR } from "../../../../components/exception/QR.js"; -import { - FormErrors, - FormProvider, -} from "../../../../components/form/FormProvider.js"; -import { Input } from "../../../../components/form/Input.js"; -import { InputCurrency } from "../../../../components/form/InputCurrency.js"; -import { useBackendContext } from "../../../../context/backend.js"; -import { useConfigContext } from "../../../../context/config.js"; -import { useInstanceContext } from "../../../../context/instance.js"; -import { MerchantBackend } from "../../../../declaration.js"; - -type Entity = MerchantBackend.Template.UsingTemplateDetails; +import { useSessionContext } from "../../../../context/session.js"; + +// type Entity = TalerMerchantApi.UsingTemplateDetails; interface Props { - contract: MerchantBackend.Template.TemplateContractDetails; + contract: TalerMerchantApi.TemplateContractDetails; id: string; onBack?: () => void; } -export function QrPage({ contract, id: templateId, onBack }: Props): VNode { +export function QrPage({ id: templateId, onBack }: Props): VNode { const { i18n } = useTranslationContext(); - const { url: backendURL } = useBackendContext() - const { id: instanceId } = useInstanceContext(); - const config = useConfigContext(); + const { state } = useSessionContext(); - const [state, setState] = useState<Partial<Entity>>({ - amount: contract.amount, - summary: contract.summary, - }); + // const [state, setState] = useState<Partial<Entity>>({ + // amount: contract.amount, + // summary: contract.summary, + // }); - const errors: FormErrors<Entity> = {}; + // const errors: FormErrors<Entity> = {}; - const fixedAmount = !!contract.amount; - const fixedSummary = !!contract.summary; + // const fixedAmount = !!contract.amount; + // const fixedSummary = !!contract.summary; - const templateParams: Record<string, string> = {} - if (!fixedAmount) { - if (state.amount) { - templateParams.amount = state.amount - } else { - templateParams.amount = config.currency - } - } + // const templateParams: Record<string, string> = {}; + // if (!fixedAmount) { + // if (state.amount) { + // templateParams.amount = state.amount; + // } else { + // templateParams.amount = config.currency; + // } + // } - if (!fixedSummary) { - templateParams.summary = state.summary ?? "" - } + // if (!fixedSummary) { + // templateParams.summary = state.summary ?? ""; + // } - const merchantBaseUrl = new URL(backendURL).href; + const merchantBaseUrl = state.backendUrl.href; const payTemplateUri = stringifyPayTemplateUri({ merchantBaseUrl, templateId, - templateParams - }) - - const issuer = encodeURIComponent( - `${new URL(backendURL).host}/${instanceId}`, - ); + templateParams: {}, + }); return ( <div> + <section id="printThis"> + <QR text={payTemplateUri} /> + <pre style={{ textAlign: "center" }}> + <a href={payTemplateUri}>{payTemplateUri}</a> + </pre> + </section> + <section class="section is-main-section"> <div class="columns"> <div class="column" /> <div class="column is-four-fifths"> - <p class="is-size-5 mt-5 mb-5"> + {/* <p class="is-size-5 mt-5 mb-5"> <i18n.Translate> Here you can specify a default value for fields that are not fixed. Default values can be edited by the customer before the payment. </i18n.Translate> - </p> + </p> */} <p></p> - <FormProvider + {/* <FormProvider object={state} valueHandler={setState} errors={errors} > <InputCurrency<Entity> name="amount" - label={ - fixedAmount - ? i18n.str`Fixed amount` - : i18n.str`Default amount` - } - readonly={fixedAmount} + label={i18n.str`Amount`} + readonly tooltip={i18n.str`Amount of the order`} /> <Input<Entity> name="summary" inputType="multiline" - readonly={fixedSummary} - label={ - fixedSummary - ? i18n.str`Fixed summary` - : i18n.str`Default summary` - } + readonly + label={i18n.str`Summary`} tooltip={i18n.str`Title of the order to be shown to the customer`} /> - </FormProvider> + </FormProvider> */} <div class="buttons is-right mt-5"> {onBack && ( @@ -144,12 +132,6 @@ export function QrPage({ contract, id: templateId, onBack }: Props): VNode { <div class="column" /> </div> </section> - <section id="printThis"> - <QR text={payTemplateUri} /> - <pre style={{ textAlign: "center" }}> - <a href={payTemplateUri}>{payTemplateUri}</a> - </pre> - </section> </div> ); } @@ -167,6 +149,6 @@ function saveAsPDF(name: string): void { printWindow.document.body.appendChild(divContents.cloneNode(true)); printWindow.addEventListener("load", () => { printWindow.print(); - printWindow.close(); + // printWindow.close(); }); } |