From 72b429321553841ac1ff48cf974bfc65da01bb06 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 19 Dec 2022 12:23:39 -0300 Subject: pretty --- .../src/components/modal/index.tsx | 561 ++++++++++++++------- 1 file changed, 389 insertions(+), 172 deletions(-) (limited to 'packages/merchant-backoffice-ui/src/components/modal') diff --git a/packages/merchant-backoffice-ui/src/components/modal/index.tsx b/packages/merchant-backoffice-ui/src/components/modal/index.tsx index 7c7e19316..6e5575f63 100644 --- a/packages/merchant-backoffice-ui/src/components/modal/index.tsx +++ b/packages/merchant-backoffice-ui/src/components/modal/index.tsx @@ -15,10 +15,9 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ - + * + * @author Sebastian Javier Marchano (sebasjm) + */ import { ComponentChildren, h, VNode } from "preact"; import { useState } from "preact/hooks"; @@ -40,104 +39,220 @@ interface Props { disabled?: boolean; } -export function ConfirmModal({ active, description, onCancel, onConfirm, children, danger, disabled, label = 'Confirm' }: Props): VNode { - return
-
-
-
- {!description ? null :

{description}

} -
-
- {children} -
-
-
- - -
-
+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 ContinueModal({ + active, + description, + onCancel, + onConfirm, + children, + disabled, +}: Props): VNode { + return ( +
+
+
+
+ {!description ? null :

{description}

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

{description}

} -
-
- {children} -
-
- {onClear && } -
- - -
-
+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 }; + 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 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.

- +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 { @@ -148,115 +263,217 @@ interface UpdateTokenModalProps { } //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 } +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() + old_token: "", + new_token: "", + repeat_token: "", + }); + const i18n = useTranslator(); - const hasInputTheCorrectOldToken = oldToken && oldToken !== form.old_token + 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 - } + 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 hasErrors = Object.keys(errors).some( + (k) => (errors as any)[k] !== undefined, + ); - const instance = useInstanceContext() + const instance = useInstanceContext(); - const text = i18n`You are updating the access token from instance with id ${instance.id}` + 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

+ 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 } +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() + 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) + 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

+ 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 && } -
- - -
-
+
+
+ {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`}

-
-
-
- -
-
+ const i18n = useTranslator(); + return ( +
+
+
+
+

+ Operation in progress... +

+
+
+
+
+ +
+
+

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

+
+
+
+ +
+
+
+
-
+ ); } -- cgit v1.2.3