diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx index 7a419ebb9..021977dfe 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx @@ -25,6 +25,7 @@ interface Props extends InputProps { readonly?: boolean; expand?: boolean; values: string[]; + convert?: (v: string) => any; toStr?: (v?: any) => string; fromStr?: (s: string) => any; } @@ -41,6 +42,7 @@ export function InputSelector({ label, help, values, + convert, toStr = defaultToString, }: Props): VNode { const { error, value, onChange } = useField(name); @@ -66,7 +68,10 @@ export function InputSelector({ disabled={readonly} readonly={readonly} onChange={(e) => { - onChange(e.currentTarget.value as any); + const v = convert + ? convert(e.currentTarget.value) + : e.currentTarget.value; + onChange(v); }} > {placeholder && } diff --git a/packages/merchant-backoffice-ui/src/declaration.d.ts b/packages/merchant-backoffice-ui/src/declaration.d.ts index c9380760c..9fc4f0d77 100644 --- a/packages/merchant-backoffice-ui/src/declaration.d.ts +++ b/packages/merchant-backoffice-ui/src/declaration.d.ts @@ -1287,6 +1287,9 @@ export namespace MerchantBackend { // This parameter is optional. pos_key?: string; + // Algorithm for computing the POS confirmation, 0 for none. + pos_algorithm?: number; + // Additional information in a separate template. template_contract: TemplateContractDetails; } @@ -1313,6 +1316,9 @@ export namespace MerchantBackend { // This parameter is optional. pos_key?: string; + // Algorithm for computing the POS confirmation, 0 for none. + pos_algorithm?: Integer; + // Additional information in a separate template. template_contract: TemplateContractDetails; } @@ -1338,6 +1344,9 @@ export namespace MerchantBackend { // This parameter is optional. pos_key?: string; + // Algorithm for computing the POS confirmation, 0 for none. + pos_algorithm?: Integer; + // Additional information in a separate template. template_contract: TemplateContractDetails; } diff --git a/packages/merchant-backoffice-ui/src/hooks/templates.ts b/packages/merchant-backoffice-ui/src/hooks/templates.ts index dd096e4f9..97fb165b9 100644 --- a/packages/merchant-backoffice-ui/src/hooks/templates.ts +++ b/packages/merchant-backoffice-ui/src/hooks/templates.ts @@ -244,7 +244,11 @@ export function useTemplateDetails( }); if (isValidating) return { loading: true, data: data?.data }; - if (data) return data; + if (data) { + const d = structuredClone(data); + d.data.pos_algorithm = 1; + return d; + } if (error) return error.info; return { loading: true }; } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx index 22f86002a..144e968c5 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx @@ -31,9 +31,11 @@ import { Input } from "../../../../components/form/Input.js"; import { InputCurrency } from "../../../../components/form/InputCurrency.js"; import { InputDuration } from "../../../../components/form/InputDuration.js"; import { InputNumber } from "../../../../components/form/InputNumber.js"; +import { InputSelector } from "../../../../components/form/InputSelector.js"; import { InputWithAddon } from "../../../../components/form/InputWithAddon.js"; import { useBackendContext } from "../../../../context/backend.js"; import { MerchantBackend } from "../../../../declaration.js"; +import { randomBase32Key } from "../../../../utils/crypto.js"; import { undefinedIfEmpty } from "../../../../utils/table.js"; type Entity = MerchantBackend.Template.TemplateAddDetails; @@ -43,6 +45,13 @@ interface Props { onBack?: () => void; } +const algorithms = ["0", "1", "2"]; +const algorithmsNames = [ + "off", + "30s 8d TOTP-SHA1 without amount", + "30s 8d eTOTP-SHA1 with amount", +]; + export function CreatePage({ onCreate, onBack }: Props): VNode { const { i18n } = useTranslationContext(); const backend = useBackendContext(); @@ -104,7 +113,6 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { label={i18n.str`Identifier`} tooltip={i18n.str`Name of the template in URLs.`} /> - name="template_description" label={i18n.str`Description`} @@ -134,12 +142,35 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { help="" tooltip={i18n.str`How much time has the customer to complete the payment once the order was created.`} /> - - name="pos_key" - label={i18n.str`Point-of-sale key`} - help="" - tooltip={i18n.str`Useful to validate the purchase`} + + name="pos_algorithm" + label={i18n.str`Veritifaction algorithm`} + tooltip={i18n.str`Algorithm to use to verify transaction in offline mode`} + values={algorithms} + toStr={(v) => algorithmsNames[v]} + convert={(v) => Number(v)} /> + {state.pos_algorithm && state.pos_algorithm > 0 ? ( + + name="pos_key" + label={i18n.str`Point-of-sale key`} + help="" + tooltip={i18n.str`Useful to validate the purchase`} + side={ + + + + } + /> + ) : undefined}
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 756909d15..66ac72ff5 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 @@ -31,8 +31,10 @@ import { } from "../../../../components/form/FormProvider.js"; import { Input } from "../../../../components/form/Input.js"; import { InputCurrency } from "../../../../components/form/InputCurrency.js"; +import { ConfirmModal } from "../../../../components/modal/index.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; @@ -46,7 +48,9 @@ interface Props { export function QrPage({ template, id: templateId, onBack }: Props): VNode { const { i18n } = useTranslationContext(); const { url: backendUrl } = useBackendContext(); + const { id: instanceId } = useInstanceContext(); const config = useConfigContext(); + const [setupTOTP, setSetupTOTP] = useState(false); const [state, setState] = useState>({ amount: template.template_contract.amount, @@ -82,8 +86,33 @@ export function QrPage({ template, id: templateId, onBack }: Props): VNode { const payTemplateUri = `${talerProto}//pay-template/${merchantURL.hostname}/${templateId}${paramsStr}`; + const issuer = encodeURIComponent( + `${new URL(backendUrl).hostname}/${instanceId}`, + ); + const oauthUri = !template.pos_algorithm + ? undefined + : template.pos_algorithm === 1 + ? `otpauth://totp/${issuer}:${templateId}?secret=${template.pos_key}&issuer=${issuer}&algorithm=SHA1&digits=8&period=30` + : template.pos_algorithm === 2 + ? `otpauth://totp/${issuer}:${templateId}?secret=${template.pos_key}&issuer=${issuer}&algorithm=SHA1&digits=8&period=30` + : undefined; return (
+ {oauthUri && ( + { + setSetupTOTP(false); + }} + > +

Scan this qr code with your TOTP device

+ + 
+            {oauthUri}
+
+ + )}
@@ -114,20 +143,48 @@ export function QrPage({ template, id: templateId, onBack }: Props): VNode { Cancel )} - + {oauthUri && ( + + )}
-
- 
+      

+        
+        
           {payTemplateUri}
         

-
); } + +function saveAsPDF(name: string): void { + const printWindow = window.open("", "", "height=400,width=800"); + if (!printWindow) return; + const divContents = document.getElementById("printThis"); + if (!divContents) return; + printWindow.document.write( + `Order template for ${name} "); + printWindow.document.close(); + printWindow.document.body.appendChild(divContents.cloneNode(true)); + printWindow.addEventListener("load", () => { + printWindow.print(); + printWindow.close(); + }); +} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/index.tsx index 97d25b700..044cc7d79 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/index.tsx @@ -51,10 +51,8 @@ export default function TemplateQrPage({ onNotFound, onUnauthorized, }: Props): VNode { - const { createOrderFromTemplate } = useTemplateAPI(); const result = useTemplateDetails(tid); const [notif, setNotif] = useState(undefined); - const { i18n } = useTranslationContext(); if (result.clientError && result.isUnauthorized) return onUnauthorized(); if (result.clientError && result.isNotfound) return onNotFound(); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx index eba212517..e34e2c746 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx @@ -31,9 +31,11 @@ import { Input } from "../../../../components/form/Input.js"; import { InputCurrency } from "../../../../components/form/InputCurrency.js"; import { InputDuration } from "../../../../components/form/InputDuration.js"; import { InputNumber } from "../../../../components/form/InputNumber.js"; +import { InputSelector } from "../../../../components/form/InputSelector.js"; import { InputWithAddon } from "../../../../components/form/InputWithAddon.js"; import { useBackendContext } from "../../../../context/backend.js"; import { MerchantBackend, WithId } from "../../../../declaration.js"; +import { randomBase32Key } from "../../../../utils/crypto.js"; import { undefinedIfEmpty } from "../../../../utils/table.js"; type Entity = MerchantBackend.Template.TemplatePatchDetails & WithId; @@ -44,6 +46,13 @@ interface Props { template: Entity; } +const algorithms = ["0", "1", "2"]; +const algorithmsNames = [ + "off", + "30s 8d TOTP-SHA1 without amount", + "30s 8d eTOTP-SHA1 with amount", +]; + export function UpdatePage({ template, onUpdate, onBack }: Props): VNode { const { i18n } = useTranslationContext(); const backend = useBackendContext(); @@ -143,12 +152,35 @@ export function UpdatePage({ template, onUpdate, onBack }: Props): VNode { help="" tooltip={i18n.str`How much time has the customer to complete the payment once the order was created.`} /> - - name="pos_key" - label={i18n.str`Point-of-sale key`} - help="" - tooltip={i18n.str`Useful to validate the purchase`} + + name="pos_algorithm" + label={i18n.str`Veritifaction algorithm`} + tooltip={i18n.str`Algorithm to use to verify transaction in offline mode`} + values={algorithms} + toStr={(v) => algorithmsNames[v]} + convert={(v) => Number(v)} /> + {state.pos_algorithm && state.pos_algorithm > 0 ? ( + + name="pos_key" + label={i18n.str`Point-of-sale key`} + help="" + tooltip={i18n.str`Useful to validate the purchase`} + side={ + + + + } + /> + ) : undefined}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/use/UsePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/use/UsePage.tsx index a63469763..5abc6b153 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/use/UsePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/use/UsePage.tsx @@ -34,12 +34,13 @@ import { MerchantBackend } from "../../../../declaration.js"; type Entity = MerchantBackend.Template.UsingTemplateDetails; interface Props { + id: string; template: MerchantBackend.Template.TemplateDetails; onCreateOrder: (d: Entity) => Promise; onBack?: () => void; } -export function UsePage({ template, onCreateOrder, onBack }: Props): VNode { +export function UsePage({ id, template, onCreateOrder, onBack }: Props): VNode { const { i18n } = useTranslationContext(); const [state, setState] = useState>({ @@ -75,6 +76,22 @@ export function UsePage({ template, onCreateOrder, onBack }: Props): VNode { return (
+
+
+
+
+
+
+ + New order for template:{" "} + {id} + +
+
+
+
+
+
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/use/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/use/index.tsx index d5fa6d39d..b6175bcfb 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/use/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/use/index.tsx @@ -68,6 +68,7 @@ export default function TemplateUsePage({ + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +const encTable = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567"; +// base32 RFC 3548 +function encodeBase32(data: ArrayBuffer) { + const dataBytes = new Uint8Array(data); + let sb = ""; + const size = data.byteLength; + let bitBuf = 0; + let numBits = 0; + let pos = 0; + while (pos < size || numBits > 0) { + if (pos < size && numBits < 5) { + const d = dataBytes[pos++]; + bitBuf = (bitBuf << 8) | d; + numBits += 8; + } + if (numBits < 5) { + // zero-padding + bitBuf = bitBuf << (5 - numBits); + numBits = 5; + } + const v = (bitBuf >>> (numBits - 5)) & 31; + sb += encTable[v]; + numBits -= 5; + } + return sb; +} + +export function randomBase32Key(): string { + var buf = new Uint8Array(20); + window.crypto.getRandomValues(buf); + return encodeBase32(buf); +}