From 3e060b80428943c6562250a6ff77eff10a0259b7 Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Mon, 24 Oct 2022 10:46:14 +0200 Subject: repo: integrate packages from former merchant-backoffice.git --- .../src/components/modal/index.tsx | 262 +++++++++++++++++++++ 1 file changed, 262 insertions(+) create mode 100644 packages/merchant-backoffice-ui/src/components/modal/index.tsx (limited to 'packages/merchant-backoffice-ui/src/components/modal/index.tsx') diff --git a/packages/merchant-backoffice-ui/src/components/modal/index.tsx b/packages/merchant-backoffice-ui/src/components/modal/index.tsx new file mode 100644 index 000000000..a7edb9e48 --- /dev/null +++ b/packages/merchant-backoffice-ui/src/components/modal/index.tsx @@ -0,0 +1,262 @@ +/* + This file is part of GNU Taler + (C) 2021 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 + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ + + +import { ComponentChildren, h, VNode } from "preact"; +import { useState } from "preact/hooks"; +import { useInstanceContext } from "../../context/instance"; +import { Translate, useTranslator } from "../../i18n"; +import { DEFAULT_REQUEST_TIMEOUT } from "../../utils/constants"; +import { Loading, Spinner } from "../exception/loading"; +import { FormProvider } from "../form/FormProvider"; +import { Input } from "../form/Input"; + +interface Props { + active?: boolean; + description?: string; + onCancel?: () => void; + onConfirm?: () => void; + label?: string; + children?: ComponentChildren; + danger?: boolean; + disabled?: boolean; +} + +export function ConfirmModal({ active, description, onCancel, onConfirm, children, danger, disabled, label = 'Confirm' }: Props): VNode { + return
+
+
+
+ {!description ? null :

{description}

} +
+
+ {children} +
+
+
+ + +
+
+
+
+} + +export function ContinueModal({ active, description, onCancel, onConfirm, children, disabled }: Props): VNode { + return
+
+
+
+ {!description ? null :

{description}

} +
+
+ {children} +
+
+
+ +
+
+
+
+} + +export function SimpleModal({ onCancel, children }: any): VNode { + return
+
+
+
+ {children} +
+
+
+} + +export function ClearConfirmModal({ description, onCancel, onClear, onConfirm, children }: Props & { onClear?: () => void }): VNode { + return
+
+
+
+ {!description ? null :

{description}

} +
+
+ {children} +
+
+ {onClear && } +
+ + +
+
+
+
+} + +interface DeleteModalProps { + element: { id: string, name: string }; + onCancel: () => void; + onConfirm: (id: string) => void; +} + +export function DeleteModal({ element, onCancel, onConfirm }: DeleteModalProps): VNode { + return onConfirm(element.id)}> +

If you delete the instance named "{element.name}" (ID: {element.id}), the merchant will no longer be able to process orders or refunds

+

This action deletes the instance private key, but preserves all transaction data. You can still access that data after deleting the instance.

+

Deleting an instance cannot be undone.

+ +} + +export function PurgeModal({ element, onCancel, onConfirm }: DeleteModalProps): VNode { + return onConfirm(element.id)}> +

If you purge the instance named "{element.name}" (ID: {element.id}), you will also delete all it's transaction data.

+

The instance will disappear from your list, and you will no longer be able to access it's data.

+

Purging an instance cannot be undone.

+ +} + +interface UpdateTokenModalProps { + oldToken?: string; + onCancel: () => void; + onConfirm: (value: string) => void; + onClear: () => void; +} + +//FIXME: merge UpdateTokenModal with SetTokenNewInstanceModal +export function UpdateTokenModal({ onCancel, onClear, onConfirm, oldToken }: UpdateTokenModalProps): VNode { + type State = { old_token: string, new_token: string, repeat_token: string } + const [form, setValue] = useState>({ + old_token: '', new_token: '', repeat_token: '', + }) + const i18n = useTranslator() + + const hasInputTheCorrectOldToken = oldToken && oldToken !== form.old_token + const errors = { + old_token: hasInputTheCorrectOldToken ? i18n`is not the same as the current access token` : undefined, + new_token: !form.new_token ? i18n`cannot be empty` : (form.new_token === form.old_token ? i18n`cannot be the same as the old token` : undefined), + repeat_token: form.new_token !== form.repeat_token ? i18n`is not the same` : undefined + } + + const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined) + + const instance = useInstanceContext() + + const text = i18n`You are updating the access token from instance with id ${instance.id}` + + return onConfirm(form.new_token!) : undefined} + onClear={!hasInputTheCorrectOldToken && oldToken ? onClear : undefined} + > +
+
+
+ + {oldToken && name="old_token" label={i18n`Old access token`} tooltip={i18n`access token currently in use`} inputType="password" />} + name="new_token" label={i18n`New access token`} tooltip={i18n`next access token to be used`} inputType="password" /> + name="repeat_token" label={i18n`Repeat access token`} tooltip={i18n`confirm the same access token`} inputType="password" /> + +

Clearing the access token will mean public access to the instance

+
+
+
+ +} + +export function SetTokenNewInstanceModal({ onCancel, onClear, onConfirm }: UpdateTokenModalProps): VNode { + type State = { old_token: string, new_token: string, repeat_token: string } + const [form, setValue] = useState>({ + new_token: '', repeat_token: '', + }) + const i18n = useTranslator() + + const errors = { + new_token: !form.new_token ? i18n`cannot be empty` : (form.new_token === form.old_token ? i18n`cannot be the same as the old access token` : undefined), + repeat_token: form.new_token !== form.repeat_token ? i18n`is not the same` : undefined + } + + const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined) + + + return
+
+
+
+

{i18n`You are setting the access token for the new instance`}

+
+
+
+
+
+ + name="new_token" label={i18n`New access token`} tooltip={i18n`next access token to be used`} inputType="password" /> + name="repeat_token" label={i18n`Repeat access token`} tooltip={i18n`confirm the same access token`} inputType="password" /> + +

With external authorization method no check will be done by the merchant backend

+
+
+
+
+
+ {onClear && } +
+ + +
+
+
+
+} + +export function LoadingModal({ onCancel }: { onCancel: () => void }): VNode { + const i18n = useTranslator() + return
+
+
+
+

Operation in progress...

+
+
+
+
+ +
+
+

{i18n`The operation will be automatically canceled after ${DEFAULT_REQUEST_TIMEOUT} seconds`}

+
+
+
+ +
+
+
+
+} -- cgit v1.2.3