pretty

12 files changed, 389 insertions, 218 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/Create.stories.tsx
index 2f7f25b09..5542c028a 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/Create.stories.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/Create.stories.tsx
@@ -15,28 +15,29 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
-import { h, VNode, FunctionalComponent } from 'preact';
+import { h, VNode, FunctionalComponent } from "preact";
 import { CreatePage as TestedComponent } from "./CreatePage.js";
 
-
 export default {
-  title: 'Pages/Reserve/Create',
+  title: "Pages/Reserve/Create",
   component: TestedComponent,
   argTypes: {
-    onCreate: { action: 'onCreate' },
-    onBack: { action: 'onBack' },
+    onCreate: { action: "onCreate" },
+    onBack: { action: "onBack" },
   },
 };
 
-function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
-  const r = (args: any) => <Component {...args} />
-  r.args = props
-  return r
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>,
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
 }
 
-export const Example = createExample(TestedComponent, {
-});
+export const Example = createExample(TestedComponent, {});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx
index 4910f9345..2c3e963b8 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx
@@ -15,154 +15,252 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
 import { Fragment, h, VNode } from "preact";
 import { StateUpdater, useEffect, useState } from "preact/hooks";
-import { FormErrors, FormProvider } from "../../../../components/form/FormProvider.js";
+import {
+  FormErrors,
+  FormProvider,
+} from "../../../../components/form/FormProvider.js";
 import { Input } from "../../../../components/form/Input.js";
 import { InputCurrency } from "../../../../components/form/InputCurrency.js";
 import { ExchangeBackend, MerchantBackend } from "../../../../declaration.js";
 import { Translate, useTranslator } from "../../../../i18n/index.js";
 import { AsyncButton } from "../../../../components/exception/AsyncButton.js";
-import { canonicalizeBaseUrl, ExchangeKeysJson } from "@gnu-taler/taler-util"
-import { PAYTO_WIRE_METHOD_LOOKUP, URL_REGEX } from "../../../../utils/constants.js";
+import { canonicalizeBaseUrl, ExchangeKeysJson } from "@gnu-taler/taler-util";
+import {
+  PAYTO_WIRE_METHOD_LOOKUP,
+  URL_REGEX,
+} from "../../../../utils/constants.js";
 import { request } from "../../../../hooks/backend.js";
 import { InputSelector } from "../../../../components/form/InputSelector.js";
 
-type Entity = MerchantBackend.Tips.ReserveCreateRequest
+type Entity = MerchantBackend.Tips.ReserveCreateRequest;
 
 interface Props {
   onCreate: (d: Entity) => Promise<void>;
   onBack?: () => void;
 }
 
-
 enum Steps {
   EXCHANGE,
   WIRE_METHOD,
 }
 
 interface ViewProps {
-  step: Steps,
+  step: Steps;
   setCurrentStep: (s: Steps) => void;
   reserve: Partial<Entity>;
   onBack?: () => void;
   submitForm: () => Promise<void>;
   setReserve: StateUpdater<Partial<Entity>>;
 }
-function ViewStep({ step, setCurrentStep, reserve, onBack, submitForm, setReserve }: ViewProps): VNode {
-  const i18n = useTranslator()
-  const [wireMethods, setWireMethods] = useState<Array<string>>([])
-  const [exchangeQueryError, setExchangeQueryError] = useState<string | undefined>(undefined)
+function ViewStep({
+  step,
+  setCurrentStep,
+  reserve,
+  onBack,
+  submitForm,
+  setReserve,
+}: ViewProps): VNode {
+  const i18n = useTranslator();
+  const [wireMethods, setWireMethods] = useState<Array<string>>([]);
+  const [exchangeQueryError, setExchangeQueryError] = useState<
+    string | undefined
+  >(undefined);
 
   useEffect(() => {
-    setExchangeQueryError(undefined)
-  }, [reserve.exchange_url])
+    setExchangeQueryError(undefined);
+  }, [reserve.exchange_url]);
 
   switch (step) {
     case Steps.EXCHANGE: {
       const errors: FormErrors<Entity> = {
-        initial_balance: !reserve.initial_balance ? 'cannot be empty' : !(parseInt(reserve.initial_balance.split(':')[1], 10) > 0) ? i18n`it should be greater than 0` : undefined,
-        exchange_url: !reserve.exchange_url ? i18n`cannot be empty` : !URL_REGEX.test(reserve.exchange_url) ? i18n`must be a valid URL` : !exchangeQueryError ? undefined : exchangeQueryError,
-      }
-
-      const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined)
-
-      return <Fragment>
-        <FormProvider<Entity> object={reserve} errors={errors} valueHandler={setReserve}>
-          <InputCurrency<Entity> name="initial_balance" label={i18n`Initial balance`} tooltip={i18n`balance prior to deposit`} />
-          <Input<Entity> name="exchange_url" label={i18n`Exchange URL`} tooltip={i18n`URL of exchange`} />
-        </FormProvider>
-
-        <div class="buttons is-right mt-5">
-          {onBack && <button class="button" onClick={onBack} ><Translate>Cancel</Translate></button>}
-          <AsyncButton class="has-tooltip-left" onClick={() => {
-            return request<ExchangeBackend.WireResponse>(`${reserve.exchange_url}wire`).then(r => {
-              const wireMethods = r.data.accounts.map(a => {
-                const match = PAYTO_WIRE_METHOD_LOOKUP.exec(a.payto_uri)
-                return match && match[1] || ''
-              })
-              setWireMethods(wireMethods)
-              setCurrentStep(Steps.WIRE_METHOD)
-              return
-            }).catch((r: any) => {
-              setExchangeQueryError(r.message)
-            })
-          }} data-tooltip={
-            hasErrors ? i18n`Need to complete marked fields` : 'confirm operation'
-          } disabled={hasErrors} ><Translate>Next</Translate></AsyncButton>
-        </div>
-      </Fragment>
+        initial_balance: !reserve.initial_balance
+          ? "cannot be empty"
+          : !(parseInt(reserve.initial_balance.split(":")[1], 10) > 0)
+          ? i18n`it should be greater than 0`
+          : undefined,
+        exchange_url: !reserve.exchange_url
+          ? i18n`cannot be empty`
+          : !URL_REGEX.test(reserve.exchange_url)
+          ? i18n`must be a valid URL`
+          : !exchangeQueryError
+          ? undefined
+          : exchangeQueryError,
+      };
+
+      const hasErrors = Object.keys(errors).some(
+        (k) => (errors as any)[k] !== undefined,
+      );
+
+      return (
+        <Fragment>
+          <FormProvider<Entity>
+            object={reserve}
+            errors={errors}
+            valueHandler={setReserve}
+          >
+            <InputCurrency<Entity>
+              name="initial_balance"
+              label={i18n`Initial balance`}
+              tooltip={i18n`balance prior to deposit`}
+            />
+            <Input<Entity>
+              name="exchange_url"
+              label={i18n`Exchange URL`}
+              tooltip={i18n`URL of exchange`}
+            />
+          </FormProvider>
+
+          <div class="buttons is-right mt-5">
+            {onBack && (
+              <button class="button" onClick={onBack}>
+                <Translate>Cancel</Translate>
+              </button>
+            )}
+            <AsyncButton
+              class="has-tooltip-left"
+              onClick={() => {
+                return request<ExchangeBackend.WireResponse>(
+                  `${reserve.exchange_url}wire`,
+                )
+                  .then((r) => {
+                    const wireMethods = r.data.accounts.map((a) => {
+                      const match = PAYTO_WIRE_METHOD_LOOKUP.exec(a.payto_uri);
+                      return (match && match[1]) || "";
+                    });
+                    setWireMethods(wireMethods);
+                    setCurrentStep(Steps.WIRE_METHOD);
+                    return;
+                  })
+                  .catch((r: any) => {
+                    setExchangeQueryError(r.message);
+                  });
+              }}
+              data-tooltip={
+                hasErrors
+                  ? i18n`Need to complete marked fields`
+                  : "confirm operation"
+              }
+              disabled={hasErrors}
+            >
+              <Translate>Next</Translate>
+            </AsyncButton>
+          </div>
+        </Fragment>
+      );
     }
 
     case Steps.WIRE_METHOD: {
       const errors: FormErrors<Entity> = {
         wire_method: !reserve.wire_method ? i18n`cannot be empty` : undefined,
-      }
-
-      const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined)
-      return <Fragment>
-        <FormProvider<Entity> object={reserve} errors={errors} valueHandler={setReserve}>
-          <InputCurrency<Entity> name="initial_balance" label={i18n`Initial balance`} tooltip={i18n`balance prior to deposit`} readonly />
-          <Input<Entity> name="exchange_url" label={i18n`Exchange URL`} tooltip={i18n`URL of exchange`} readonly />
-          <InputSelector<Entity> name="wire_method" label={i18n`Wire method`} tooltip={i18n`method to use for wire transfer`} values={wireMethods} placeholder={i18n`Select one wire method`} />
-        </FormProvider>
-        <div class="buttons is-right mt-5">
-          {onBack && <button class="button" onClick={() => setCurrentStep(Steps.EXCHANGE)} ><Translate>Back</Translate></button>}
-          <AsyncButton onClick={submitForm} data-tooltip={
-              hasErrors ? i18n`Need to complete marked fields` : 'confirm operation'
-            } disabled={hasErrors} ><Translate>Confirm</Translate></AsyncButton>
-        </div>
-      </Fragment>
+      };
 
+      const hasErrors = Object.keys(errors).some(
+        (k) => (errors as any)[k] !== undefined,
+      );
+      return (
+        <Fragment>
+          <FormProvider<Entity>
+            object={reserve}
+            errors={errors}
+            valueHandler={setReserve}
+          >
+            <InputCurrency<Entity>
+              name="initial_balance"
+              label={i18n`Initial balance`}
+              tooltip={i18n`balance prior to deposit`}
+              readonly
+            />
+            <Input<Entity>
+              name="exchange_url"
+              label={i18n`Exchange URL`}
+              tooltip={i18n`URL of exchange`}
+              readonly
+            />
+            <InputSelector<Entity>
+              name="wire_method"
+              label={i18n`Wire method`}
+              tooltip={i18n`method to use for wire transfer`}
+              values={wireMethods}
+              placeholder={i18n`Select one wire method`}
+            />
+          </FormProvider>
+          <div class="buttons is-right mt-5">
+            {onBack && (
+              <button
+                class="button"
+                onClick={() => setCurrentStep(Steps.EXCHANGE)}
+              >
+                <Translate>Back</Translate>
+              </button>
+            )}
+            <AsyncButton
+              onClick={submitForm}
+              data-tooltip={
+                hasErrors
+                  ? i18n`Need to complete marked fields`
+                  : "confirm operation"
+              }
+              disabled={hasErrors}
+            >
+              <Translate>Confirm</Translate>
+            </AsyncButton>
+          </div>
+        </Fragment>
+      );
     }
   }
 }
 
 export function CreatePage({ onCreate, onBack }: Props): VNode {
-  const [reserve, setReserve] = useState<Partial<Entity>>({})
-
+  const [reserve, setReserve] = useState<Partial<Entity>>({});
 
   const submitForm = () => {
-    return onCreate(reserve as Entity)
-  }
+    return onCreate(reserve as Entity);
+  };
 
-  const [currentStep, setCurrentStep] = useState(Steps.EXCHANGE)
-
-
-  return <div>
-    <section class="section is-main-section">
-      <div class="columns">
-        <div class="column" />
-        <div class="column is-four-fifths">
-
-          <div class="tabs is-toggle is-fullwidth is-small">
-            <ul>
-              <li class={currentStep === Steps.EXCHANGE ? "is-active" : ""}>
-                <a style={{ cursor: 'initial' }}>
-                  <span>Step 1: Specify exchange</span>
-                </a>
-              </li>
-              <li class={currentStep === Steps.WIRE_METHOD ? "is-active" : ""}>
-                <a style={{ cursor: 'initial' }}>
-                  <span>Step 2: Select wire method</span>
-                </a>
-              </li>
-            </ul>
-          </div>
+  const [currentStep, setCurrentStep] = useState(Steps.EXCHANGE);
+
+  return (
+    <div>
+      <section class="section is-main-section">
+        <div class="columns">
+          <div class="column" />
+          <div class="column is-four-fifths">
+            <div class="tabs is-toggle is-fullwidth is-small">
+              <ul>
+                <li class={currentStep === Steps.EXCHANGE ? "is-active" : ""}>
+                  <a style={{ cursor: "initial" }}>
+                    <span>Step 1: Specify exchange</span>
+                  </a>
+                </li>
+                <li
+                  class={currentStep === Steps.WIRE_METHOD ? "is-active" : ""}
+                >
+                  <a style={{ cursor: "initial" }}>
+                    <span>Step 2: Select wire method</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
 
-          <ViewStep step={currentStep} reserve={reserve}
-            setCurrentStep={setCurrentStep}
-            setReserve={setReserve}
-            submitForm={submitForm}
-            onBack={onBack}
-          />
+            <ViewStep
+              step={currentStep}
+              reserve={reserve}
+              setCurrentStep={setCurrentStep}
+              setReserve={setReserve}
+              submitForm={submitForm}
+              onBack={onBack}
+            />
+          </div>
+          <div class="column" />
         </div>
-        <div class="column" />
-      </div>
-    </section>
-  </div>
+      </section>
+    </div>
+  );
 }
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx
index 453147cdf..1d848a033 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx
@@ -15,39 +15,41 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
-import { h, VNode, FunctionalComponent } from 'preact';
+import { h, VNode, FunctionalComponent } from "preact";
 import { CreatedSuccessfully as TestedComponent } from "./CreatedSuccessfully.js";
 
-
 export default {
-  title: 'Pages/Reserve/CreatedSuccessfully',
+  title: "Pages/Reserve/CreatedSuccessfully",
   component: TestedComponent,
   argTypes: {
-    onCreate: { action: 'onCreate' },
-    onBack: { action: 'onBack' },
+    onCreate: { action: "onCreate" },
+    onBack: { action: "onBack" },
   },
 };
 
-function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
-  const r = (args: any) => <Component {...args} />
-  r.args = props
-  return r
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>,
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
 }
 
 export const Example = createExample(TestedComponent, {
   entity: {
     request: {
-      exchange_url: 'http://exchange.taler/',
-      initial_balance: 'TESTKUDOS:1',
-      wire_method: 'x-taler-bank',
+      exchange_url: "http://exchange.taler/",
+      initial_balance: "TESTKUDOS:1",
+      wire_method: "x-taler-bank",
     },
     response: {
-      payto_uri: 'payto://x-taler-bank/bank.taler:8080/exchange_account',
-      reserve_pub: 'WEQWDASDQWEASDADASDQWEQWEASDAS'
-    }
-  }
+      payto_uri: "payto://x-taler-bank/bank.taler:8080/exchange_account",
+      reserve_pub: "WEQWDASDQWEASDADASDQWEQWEASDAS",
+    },
+  },
 });
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
index 3da8beff8..9bb228e1f 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
@@ -20,7 +20,10 @@ import { MerchantBackend } from "../../../../declaration.js";
 import { Translate } from "../../../../i18n/index.js";
 import { QR } from "../../../../components/exception/QR.js";
 
-type Entity = { request: MerchantBackend.Tips.ReserveCreateRequest, response: MerchantBackend.Tips.ReserveCreateConfirmation };
+type Entity = {
+  request: MerchantBackend.Tips.ReserveCreateRequest;
+  response: MerchantBackend.Tips.ReserveCreateConfirmation;
+};
 
 interface Props {
   entity: Entity;
@@ -28,52 +31,77 @@ interface Props {
   onCreateAnother?: () => void;
 }
 
-export function CreatedSuccessfully({ entity, onConfirm, onCreateAnother }: Props): VNode {
-  const link = `${entity.response.payto_uri}?message=${entity.response.reserve_pub}&amount=${entity.request.initial_balance}`
+export function CreatedSuccessfully({
+  entity,
+  onConfirm,
+  onCreateAnother,
+}: Props): VNode {
+  const link = `${entity.response.payto_uri}?message=${entity.response.reserve_pub}&amount=${entity.request.initial_balance}`;
 
-  return <Template onConfirm={onConfirm} onCreateAnother={onCreateAnother}>
-    <div class="field is-horizontal">
-      <div class="field-label is-normal">
-        <label class="label">Amount</label>
-      </div>
-      <div class="field-body is-flex-grow-3">
-        <div class="field">
-          <p class="control">
-            <input readonly class="input" value={entity.request.initial_balance} />
-          </p>
+  return (
+    <Template onConfirm={onConfirm} onCreateAnother={onCreateAnother}>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Amount</label>
         </div>
-      </div>
-    </div>
-    <div class="field is-horizontal">
-      <div class="field-label is-normal">
-        <label class="label">Exchange bank account</label>
-      </div>
-      <div class="field-body is-flex-grow-3">
-        <div class="field">
-          <p class="control">
-            <input readonly class="input" value={entity.response.payto_uri} />
-          </p>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <input
+                readonly
+                class="input"
+                value={entity.request.initial_balance}
+              />
+            </p>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="field is-horizontal">
-      <div class="field-label is-normal">
-        <label class="label">Wire transfer subject</label>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Exchange bank account</label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <input readonly class="input" value={entity.response.payto_uri} />
+            </p>
+          </div>
+        </div>
       </div>
-      <div class="field-body is-flex-grow-3">
-        <div class="field">
-          <p class="control">
-            <input class="input" readonly value={entity.response.reserve_pub} />
-          </p>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Wire transfer subject</label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <input
+                class="input"
+                readonly
+                value={entity.response.reserve_pub}
+              />
+            </p>
+          </div>
         </div>
       </div>
-    </div>
-    <p class="is-size-5"><Translate>To complete the setup of the reserve, you must now initiate a wire transfer using the given wire transfer subject and crediting the specified amount to the indicated account of the exchange.</Translate></p>
-    <p class="is-size-5"><Translate>If your system supports RFC 8905, you can do this by opening this URI:</Translate></p>
-    <pre>
-      <a target="_blank" rel="noreferrer" href={link}>{link}</a>
-    </pre>
-    <QR text={link} />
-  </Template>;
+      <p class="is-size-5">
+        <Translate>
+          To complete the setup of the reserve, you must now initiate a wire
+          transfer using the given wire transfer subject and crediting the
+          specified amount to the indicated account of the exchange.
+        </Translate>
+      </p>
+      <p class="is-size-5">
+        <Translate>
+          If your system supports RFC 8905, you can do this by opening this URI:
+        </Translate>
+      </p>
+      <pre>
+        <a target="_blank" rel="noreferrer" href={link}>
+          {link}
+        </a>
+      </pre>
+      <QR text={link} />
+    </Template>
+  );
 }
-
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx
index 689cdaaf5..b0b291859 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx
@@ -29,7 +29,10 @@ import { Input } from "../../../../components/form/Input.js";
 import { InputCurrency } from "../../../../components/form/InputCurrency.js";
 import { InputDate } from "../../../../components/form/InputDate.js";
 import { TextField } from "../../../../components/form/TextField.js";
-import { ContinueModal, SimpleModal } from "../../../../components/modal/index.js";
+import {
+  ContinueModal,
+  SimpleModal,
+} from "../../../../components/modal/index.js";
 import { MerchantBackend } from "../../../../declaration.js";
 import { useTipDetails } from "../../../../hooks/reserves.js";
 import { Translate, useTranslator } from "../../../../i18n/index.js";
@@ -47,7 +50,7 @@ interface Props {
 export function DetailPage({ id, selected, onBack }: Props): VNode {
   const i18n = useTranslator();
   const didExchangeAckTransfer = Amounts.isNonZero(
-    Amounts.parseOrThrow(selected.exchange_initial_amount)
+    Amounts.parseOrThrow(selected.exchange_initial_amount),
   );
   const link = `${selected.payto_uri}?message=${id}&amount=${selected.merchant_initial_amount}`;
 
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/Details.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/Details.stories.tsx
index fbf3e4fa4..cd1318922 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/Details.stories.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/Details.stories.tsx
@@ -33,7 +33,7 @@ export default {
 
 function createExample<Props>(
   Component: FunctionalComponent<Props>,
-  props: Partial<Props>
+  props: Partial<Props>,
 ) {
   const r = (args: any) => <Component {...args} />;
   r.args = props;
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/TipInfo.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/TipInfo.tsx
index d31310cc9..360d39aba 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/TipInfo.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/TipInfo.tsx
@@ -74,7 +74,7 @@ export function TipInfo({ id, amount, entity }: Props): VNode {
                     ? "never"
                     : format(
                         entity.expiration.t_s * 1000,
-                        "yyyy/MM/dd HH:mm:ss"
+                        "yyyy/MM/dd HH:mm:ss",
                       )
                 }
               />
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeTipModal.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeTipModal.tsx
index 24bd011e2..5200abedf 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeTipModal.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeTipModal.tsx
@@ -15,21 +15,27 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { FormErrors, FormProvider } from "../../../../components/form/FormProvider.js";
+import {
+  FormErrors,
+  FormProvider,
+} from "../../../../components/form/FormProvider.js";
 import { Input } from "../../../../components/form/Input.js";
 import { InputCurrency } from "../../../../components/form/InputCurrency.js";
-import { ConfirmModal, ContinueModal } from "../../../../components/modal/index.js";
+import {
+  ConfirmModal,
+  ContinueModal,
+} from "../../../../components/modal/index.js";
 import { MerchantBackend } from "../../../../declaration.js";
 import { useTranslator } from "../../../../i18n/index.js";
 import { AuthorizeTipSchema } from "../../../../schemas/index.js";
 import { CreatedSuccessfully } from "./CreatedSuccessfully.js";
-import * as yup from 'yup';
+import * as yup from "yup";
 
 interface AuthorizeTipModalProps {
   onCancel: () => void;
@@ -40,46 +46,79 @@ interface AuthorizeTipModalProps {
   };
 }
 
-export function AuthorizeTipModal({ onCancel, onConfirm, tipAuthorized }: AuthorizeTipModalProps): VNode {
+export function AuthorizeTipModal({
+  onCancel,
+  onConfirm,
+  tipAuthorized,
+}: AuthorizeTipModalProps): VNode {
   // const result = useOrderDetails(id)
-  type State = MerchantBackend.Tips.TipCreateRequest
-  const [form, setValue] = useState<Partial<State>>({})
+  type State = MerchantBackend.Tips.TipCreateRequest;
+  const [form, setValue] = useState<Partial<State>>({});
   const i18n = useTranslator();
 
   // const [errors, setErrors] = useState<FormErrors<State>>({})
-  let errors: FormErrors<State> = {}
+  let errors: FormErrors<State> = {};
   try {
-    AuthorizeTipSchema.validateSync(form, { abortEarly: false })
+    AuthorizeTipSchema.validateSync(form, { abortEarly: false });
   } catch (err) {
     if (err instanceof yup.ValidationError) {
-      const yupErrors = err.inner as any[]
-      errors = yupErrors.reduce((prev, cur) => !cur.path ? prev : ({ ...prev, [cur.path]: cur.message }), {})
+      const yupErrors = err.inner as any[];
+      errors = yupErrors.reduce(
+        (prev, cur) =>
+          !cur.path ? prev : { ...prev, [cur.path]: cur.message },
+        {},
+      );
     }
   }
-  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 validateAndConfirm = () => {
-    onConfirm(form as State)
-  }
+    onConfirm(form as State);
+  };
   if (tipAuthorized) {
-    return <ContinueModal description="tip" active onConfirm={onCancel}>
-      <CreatedSuccessfully
-        entity={tipAuthorized.response}
-        request={tipAuthorized.request}
-        onConfirm={onCancel}
-      />
-    </ContinueModal>
+    return (
+      <ContinueModal description="tip" active onConfirm={onCancel}>
+        <CreatedSuccessfully
+          entity={tipAuthorized.response}
+          request={tipAuthorized.request}
+          onConfirm={onCancel}
+        />
+      </ContinueModal>
+    );
   }
 
-  return <ConfirmModal description="tip" active onCancel={onCancel} disabled={hasErrors} onConfirm={validateAndConfirm}>
-
-    <FormProvider<State> errors={errors} object={form} valueHandler={setValue} >
-      <InputCurrency<State> name="amount" label={i18n`Amount`} tooltip={i18n`amount of tip`} />
-      <Input<State> name="justification" label={i18n`Justification`} inputType="multiline" tooltip={i18n`reason for the tip`} />
-      <Input<State> name="next_url" label={i18n`URL after tip`} tooltip={i18n`URL to visit after tip payment`} />
-    </FormProvider>
-
-  </ConfirmModal>
+  return (
+    <ConfirmModal
+      description="tip"
+      active
+      onCancel={onCancel}
+      disabled={hasErrors}
+      onConfirm={validateAndConfirm}
+    >
+      <FormProvider<State>
+        errors={errors}
+        object={form}
+        valueHandler={setValue}
+      >
+        <InputCurrency<State>
+          name="amount"
+          label={i18n`Amount`}
+          tooltip={i18n`amount of tip`}
+        />
+        <Input<State>
+          name="justification"
+          label={i18n`Justification`}
+          inputType="multiline"
+          tooltip={i18n`reason for the tip`}
+        />
+        <Input<State>
+          name="next_url"
+          label={i18n`URL after tip`}
+          tooltip={i18n`URL to visit after tip payment`}
+        />
+      </FormProvider>
+    </ConfirmModal>
+  );
 }
-
-
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/CreatedSuccessfully.tsx
index 62f6ac538..643651b52 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/CreatedSuccessfully.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/CreatedSuccessfully.tsx
@@ -87,7 +87,7 @@ export function CreatedSuccessfully({
                     ? "never"
                     : format(
                         entity.tip_expiration.t_s * 1000,
-                        "yyyy/MM/dd HH:mm:ss"
+                        "yyyy/MM/dd HH:mm:ss",
                       )
                 }
               />
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/List.stories.tsx
index db4f3c51e..fe305f4fd 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/List.stories.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/List.stories.tsx
@@ -35,7 +35,7 @@ export default {
 
 function createExample<Props>(
   Component: FunctionalComponent<Props>,
-  props: Partial<Props>
+  props: Partial<Props>,
 ) {
   const r = (args: any) => <Component {...args} />;
   r.args = props;
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/Table.tsx
index f9efad91e..86b79d1dd 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/Table.tsx
@@ -171,7 +171,7 @@ function Table({ instances, onNewTip, onSelect, onDelete }: TableProps): VNode {
                     ? "never"
                     : format(
                         i.expiration_time.t_s * 1000,
-                        "yyyy/MM/dd HH:mm:ss"
+                        "yyyy/MM/dd HH:mm:ss",
                       )}
                 </td>
                 <td
@@ -282,7 +282,7 @@ function TableWithoutFund({
                     ? "never"
                     : format(
                         i.expiration_time.t_s * 1000,
-                        "yyyy/MM/dd HH:mm:ss"
+                        "yyyy/MM/dd HH:mm:ss",
                       )}
                 </td>
                 <td
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/index.tsx
index 680589eed..182b3f72c 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/index.tsx
@@ -59,7 +59,7 @@ export default function ListTips({
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
   const i18n = useTranslator();
   const [reserveForTip, setReserveForTip] = useState<string | undefined>(
-    undefined
+    undefined,
   );
   const [tipAuthorized, setTipAuthorized] = useState<
     TipConfirmation | undefined
@@ -85,7 +85,7 @@ export default function ListTips({
             try {
               const response = await authorizeTipReserve(
                 reserveForTip,
-                request
+                request,
               );
               setTipAuthorized({
                 request,