adding auditor-backoffice-ui

5 files changed, 813 insertions, 0 deletions

diff --git a/packages/auditor-backoffice-ui/src/paths/instance/reserves/list/AutorizeRewardModal.tsx b/packages/auditor-backoffice-ui/src/paths/instance/reserves/list/AutorizeRewardModal.tsx
new file mode 100644
index 000000000..e205ee621
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/paths/instance/reserves/list/AutorizeRewardModal.tsx
@@ -0,0 +1,124 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2023 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import * as yup from "yup";
+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 { MerchantBackend } from "../../../../declaration.js";
+import { AuthorizeRewardSchema } from "../../../../schemas/index.js";
+import { CreatedSuccessfully } from "./CreatedSuccessfully.js";
+
+interface AuthorizeRewardModalProps {
+  onCancel: () => void;
+  onConfirm: (value: MerchantBackend.Rewards.RewardCreateRequest) => void;
+  rewardAuthorized?: {
+    response: MerchantBackend.Rewards.RewardCreateConfirmation;
+    request: MerchantBackend.Rewards.RewardCreateRequest;
+  };
+}
+
+export function AuthorizeRewardModal({
+  onCancel,
+  onConfirm,
+  rewardAuthorized,
+}: AuthorizeRewardModalProps): VNode {
+  // const result = useOrderDetails(id)
+  type State = MerchantBackend.Rewards.RewardCreateRequest;
+  const [form, setValue] = useState<Partial<State>>({});
+  const { i18n } = useTranslationContext();
+
+  // const [errors, setErrors] = useState<FormErrors<State>>({})
+  let errors: FormErrors<State> = {};
+  try {
+    AuthorizeRewardSchema.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 hasErrors = Object.keys(errors).some(
+    (k) => (errors as any)[k] !== undefined,
+  );
+
+  const validateAndConfirm = () => {
+    onConfirm(form as State);
+  };
+  if (rewardAuthorized) {
+    return (
+      <ContinueModal description="reward" active onConfirm={onCancel}>
+        <CreatedSuccessfully
+          entity={rewardAuthorized.response}
+          request={rewardAuthorized.request}
+          onConfirm={onCancel}
+        />
+      </ContinueModal>
+    );
+  }
+
+  return (
+    <ConfirmModal
+      description="New reward"
+      active
+      onCancel={onCancel}
+      disabled={hasErrors}
+      onConfirm={validateAndConfirm}
+    >
+      <FormProvider<State>
+        errors={errors}
+        object={form}
+        valueHandler={setValue}
+      >
+        <InputCurrency<State>
+          name="amount"
+          label={i18n.str`Amount`}
+          tooltip={i18n.str`amount of reward`}
+        />
+        <Input<State>
+          name="justification"
+          label={i18n.str`Justification`}
+          inputType="multiline"
+          tooltip={i18n.str`reason for the reward`}
+        />
+        <Input<State>
+          name="next_url"
+          label={i18n.str`URL after reward`}
+          tooltip={i18n.str`URL to visit after reward payment`}
+        />
+      </FormProvider>
+    </ConfirmModal>
+  );
+}
diff --git a/packages/auditor-backoffice-ui/src/paths/instance/reserves/list/CreatedSuccessfully.tsx b/packages/auditor-backoffice-ui/src/paths/instance/reserves/list/CreatedSuccessfully.tsx
new file mode 100644
index 000000000..b78236bc7
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/paths/instance/reserves/list/CreatedSuccessfully.tsx
@@ -0,0 +1,102 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2023 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 <http://www.gnu.org/licenses/>
+ */
+import { format } from "date-fns";
+import { Fragment, h, VNode } from "preact";
+import { CreatedSuccessfully as Template } from "../../../../components/notifications/CreatedSuccessfully.js";
+import { MerchantBackend } from "../../../../declaration.js";
+import { datetimeFormatForSettings, useSettings } from "../../../../hooks/useSettings.js";
+
+type Entity = MerchantBackend.Rewards.RewardCreateConfirmation;
+
+interface Props {
+  entity: Entity;
+  request: MerchantBackend.Rewards.RewardCreateRequest;
+  onConfirm: () => void;
+  onCreateAnother?: () => void;
+}
+
+export function CreatedSuccessfully({
+  request,
+  entity,
+  onConfirm,
+  onCreateAnother,
+}: Props): VNode {
+  const [settings] = useSettings();
+  return (
+    <Fragment>
+      <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={request.amount} />
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Justification</label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <input readonly class="input" value={request.justification} />
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">URL</label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <input readonly class="input" value={entity.reward_status_url} />
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Valid until</label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <input
+                class="input"
+                readonly
+                value={
+                  !entity.reward_expiration ||
+                    entity.reward_expiration.t_s === "never"
+                    ? "never"
+                    : format(
+                      entity.reward_expiration.t_s * 1000,
+                      datetimeFormatForSettings(settings),
+                    )
+                }
+              />
+            </p>
+          </div>
+        </div>
+      </div>
+    </Fragment>
+  );
+}
diff --git a/packages/auditor-backoffice-ui/src/paths/instance/reserves/list/List.stories.tsx b/packages/auditor-backoffice-ui/src/paths/instance/reserves/list/List.stories.tsx
new file mode 100644
index 000000000..b070bbde3
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/paths/instance/reserves/list/List.stories.tsx
@@ -0,0 +1,96 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2023 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode, FunctionalComponent } from "preact";
+import { CardTable as TestedComponent } from "./Table.js";
+
+export default {
+  title: "Pages/Reserve/List",
+  component: TestedComponent,
+};
+
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>,
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
+}
+
+export const AllFunded = createExample(TestedComponent, {
+  instances: [
+    {
+      id: "reseverId",
+      active: true,
+      committed_amount: "TESTKUDOS:10",
+      creation_time: {
+        t_s: new Date().getTime() / 1000,
+      },
+      exchange_initial_amount: "TESTKUDOS:10",
+      expiration_time: {
+        t_s: new Date().getTime() / 1000,
+      },
+      merchant_initial_amount: "TESTKUDOS:10",
+      pickup_amount: "TESTKUDOS:10",
+      reserve_pub: "WEQWDASDQWEASDADASDQWEQWEASDAS",
+    },
+    {
+      id: "reseverId2",
+      active: true,
+      committed_amount: "TESTKUDOS:13",
+      creation_time: {
+        t_s: new Date().getTime() / 1000,
+      },
+      exchange_initial_amount: "TESTKUDOS:10",
+      expiration_time: {
+        t_s: new Date().getTime() / 1000,
+      },
+      merchant_initial_amount: "TESTKUDOS:10",
+      pickup_amount: "TESTKUDOS:10",
+      reserve_pub: "WEQWDASDQWEASDADASDQWEQWEASDAS",
+    },
+  ],
+});
+
+export const Empty = createExample(TestedComponent, {
+  instances: [],
+});
+
+export const OneNotYetFunded = createExample(TestedComponent, {
+  instances: [
+    {
+      id: "reseverId",
+      active: true,
+      committed_amount: "TESTKUDOS:0",
+      creation_time: {
+        t_s: new Date().getTime() / 1000,
+      },
+      exchange_initial_amount: "TESTKUDOS:0",
+      expiration_time: {
+        t_s: new Date().getTime() / 1000,
+      },
+      merchant_initial_amount: "TESTKUDOS:10",
+      pickup_amount: "TESTKUDOS:10",
+      reserve_pub: "WEQWDASDQWEASDADASDQWEQWEASDAS",
+    },
+  ],
+});
diff --git a/packages/auditor-backoffice-ui/src/paths/instance/reserves/list/Table.tsx b/packages/auditor-backoffice-ui/src/paths/instance/reserves/list/Table.tsx
new file mode 100644
index 000000000..795e7ec82
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/paths/instance/reserves/list/Table.tsx
@@ -0,0 +1,320 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2023 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { format } from "date-fns";
+import { Fragment, h, VNode } from "preact";
+import { MerchantBackend, WithId } from "../../../../declaration.js";
+import { datetimeFormatForSettings, useSettings } from "../../../../hooks/useSettings.js";
+
+type Entity = MerchantBackend.Rewards.ReserveStatusEntry & WithId;
+
+interface Props {
+  instances: Entity[];
+  onNewReward: (id: Entity) => void;
+  onSelect: (id: Entity) => void;
+  onDelete: (id: Entity) => void;
+  onCreate: () => void;
+}
+
+export function CardTable({
+  instances,
+  onCreate,
+  onSelect,
+  onNewReward,
+  onDelete,
+}: Props): VNode {
+  const [withoutFunds, withFunds] = instances.reduce((prev, current) => {
+    const amount = current.exchange_initial_amount;
+    if (amount.endsWith(":0")) {
+      prev[0] = prev[0].concat(current);
+    } else {
+      prev[1] = prev[1].concat(current);
+    }
+    return prev;
+  }, new Array<Array<Entity>>([], []));
+
+  const { i18n } = useTranslationContext();
+
+  return (
+    <Fragment>
+      {withoutFunds.length > 0 && (
+        <div class="card has-table">
+          <header class="card-header">
+            <p class="card-header-title">
+              <span class="icon">
+                <i class="mdi mdi-cash" />
+              </span>
+              <i18n.Translate>Reserves not yet funded</i18n.Translate>
+            </p>
+          </header>
+          <div class="card-content">
+            <div class="b-table has-pagination">
+              <div class="table-wrapper has-mobile-cards">
+                <TableWithoutFund
+                  instances={withoutFunds}
+                  onNewReward={onNewReward}
+                  onSelect={onSelect}
+                  onDelete={onDelete}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div class="card has-table">
+        <header class="card-header">
+          <p class="card-header-title">
+            <span class="icon">
+              <i class="mdi mdi-cash" />
+            </span>
+            <i18n.Translate>Reserves ready</i18n.Translate>
+          </p>
+          <div class="card-header-icon" aria-label="more options" />
+          <div class="card-header-icon" aria-label="more options">
+            <span
+              class="has-tooltip-left"
+              data-tooltip={i18n.str`add new reserve`}
+            >
+              <button class="button is-info" type="button" onClick={onCreate}>
+                <span class="icon is-small">
+                  <i class="mdi mdi-plus mdi-36px" />
+                </span>
+              </button>
+            </span>
+          </div>
+        </header>
+        <div class="card-content">
+          <div class="b-table has-pagination">
+            <div class="table-wrapper has-mobile-cards">
+              {withFunds.length > 0 ? (
+                <Table
+                  instances={withFunds}
+                  onNewReward={onNewReward}
+                  onSelect={onSelect}
+                  onDelete={onDelete}
+                />
+              ) : (
+                <EmptyTable />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Fragment>
+  );
+}
+interface TableProps {
+  instances: Entity[];
+  onNewReward: (id: Entity) => void;
+  onDelete: (id: Entity) => void;
+  onSelect: (id: Entity) => void;
+}
+
+function Table({ instances, onNewReward, onSelect, onDelete }: TableProps): VNode {
+  const { i18n } = useTranslationContext();
+  const [settings] = useSettings();
+  return (
+    <div class="table-container">
+      <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th>
+              <i18n.Translate>Created at</i18n.Translate>
+            </th>
+            <th>
+              <i18n.Translate>Expires at</i18n.Translate>
+            </th>
+            <th>
+              <i18n.Translate>Initial</i18n.Translate>
+            </th>
+            <th>
+              <i18n.Translate>Picked up</i18n.Translate>
+            </th>
+            <th>
+              <i18n.Translate>Committed</i18n.Translate>
+            </th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {instances.map((i) => {
+            return (
+              <tr key={i.id}>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.creation_time.t_s === "never"
+                    ? "never"
+                    : format(i.creation_time.t_s * 1000, datetimeFormatForSettings(settings))}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.expiration_time.t_s === "never"
+                    ? "never"
+                    : format(
+                      i.expiration_time.t_s * 1000,
+                      datetimeFormatForSettings(settings),
+                    )}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.exchange_initial_amount}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.pickup_amount}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.committed_amount}
+                </td>
+                <td class="is-actions-cell right-sticky">
+                  <div class="buttons is-right">
+                    <button
+                      class="button is-small is-danger has-tooltip-left"
+                      data-tooltip={i18n.str`delete selected reserve from the database`}
+                      type="button"
+                      onClick={(): void => onDelete(i)}
+                    >
+                      Delete
+                    </button>
+                    <button
+                      class="button is-small is-info has-tooltip-left"
+                      data-tooltip={i18n.str`authorize new reward from selected reserve`}
+                      type="button"
+                      onClick={(): void => onNewReward(i)}
+                    >
+                      New Reward
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function EmptyTable(): VNode {
+  const { i18n } = useTranslationContext();
+  return (
+    <div class="content has-text-grey has-text-centered">
+      <p>
+        <span class="icon is-large">
+          <i class="mdi mdi-emoticon-sad mdi-48px" />
+        </span>
+      </p>
+      <p>
+        <i18n.Translate>
+          There is no ready reserves yet, add more pressing the + sign or fund
+          them
+        </i18n.Translate>
+      </p>
+    </div>
+  );
+}
+
+function TableWithoutFund({
+  instances,
+  onSelect,
+  onDelete,
+}: TableProps): VNode {
+  const { i18n } = useTranslationContext();
+  const [settings] = useSettings();
+  return (
+    <div class="table-container">
+      <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th>
+              <i18n.Translate>Created at</i18n.Translate>
+            </th>
+            <th>
+              <i18n.Translate>Expires at</i18n.Translate>
+            </th>
+            <th>
+              <i18n.Translate>Expected Balance</i18n.Translate>
+            </th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {instances.map((i) => {
+            return (
+              <tr key={i.id}>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.creation_time.t_s === "never"
+                    ? "never"
+                    : format(i.creation_time.t_s * 1000, datetimeFormatForSettings(settings))}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.expiration_time.t_s === "never"
+                    ? "never"
+                    : format(
+                      i.expiration_time.t_s * 1000,
+                      datetimeFormatForSettings(settings),
+                    )}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.merchant_initial_amount}
+                </td>
+                <td class="is-actions-cell right-sticky">
+                  <div class="buttons is-right">
+                    <button
+                      class="button is-small is-danger jb-modal has-tooltip-left"
+                      type="button"
+                      data-tooltip={i18n.str`delete selected reserve from the database`}
+                      onClick={(): void => onDelete(i)}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/packages/auditor-backoffice-ui/src/paths/instance/reserves/list/index.tsx b/packages/auditor-backoffice-ui/src/paths/instance/reserves/list/index.tsx
new file mode 100644
index 000000000..b26ff0000
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/paths/instance/reserves/list/index.tsx
@@ -0,0 +1,171 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2023 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import {
+  ErrorType,
+  HttpError,
+  useTranslationContext,
+} from "@gnu-taler/web-util/browser";
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { Loading } from "../../../../components/exception/loading.js";
+import { NotificationCard } from "../../../../components/menu/index.js";
+import { MerchantBackend } from "../../../../declaration.js";
+import {
+  useInstanceReserves,
+  useReservesAPI,
+} from "../../../../hooks/reserves.js";
+import { Notification } from "../../../../utils/types.js";
+import { AuthorizeRewardModal } from "./AutorizeRewardModal.js";
+import { CardTable } from "./Table.js";
+import { HttpStatusCode } from "@gnu-taler/taler-util";
+import { ConfirmModal } from "../../../../components/modal/index.js";
+
+interface Props {
+  onUnauthorized: () => VNode;
+  onLoadError: (e: HttpError<MerchantBackend.ErrorDetail>) => VNode;
+  onSelect: (id: string) => void;
+  onNotFound: () => VNode;
+  onCreate: () => void;
+}
+
+interface RewardConfirmation {
+  response: MerchantBackend.Rewards.RewardCreateConfirmation;
+  request: MerchantBackend.Rewards.RewardCreateRequest;
+}
+
+export default function ListRewards({
+  onUnauthorized,
+  onLoadError,
+  onNotFound,
+  onSelect,
+  onCreate,
+}: Props): VNode {
+  const result = useInstanceReserves();
+  const { deleteReserve, authorizeRewardReserve } = useReservesAPI();
+  const [notif, setNotif] = useState<Notification | undefined>(undefined);
+  const { i18n } = useTranslationContext();
+  const [reserveForReward, setReserveForReward] = useState<string | undefined>(
+    undefined,
+  );
+  const [deleting, setDeleting] =
+    useState<MerchantBackend.Rewards.ReserveStatusEntry | null>(null);
+  const [rewardAuthorized, setRewardAuthorized] = useState<
+    RewardConfirmation | undefined
+  >(undefined);
+
+  if (result.loading) return <Loading />;
+  if (!result.ok) {
+    if (
+      result.type === ErrorType.CLIENT &&
+      result.status === HttpStatusCode.Unauthorized
+    )
+      return onUnauthorized();
+    if (
+      result.type === ErrorType.CLIENT &&
+      result.status === HttpStatusCode.NotFound
+    )
+      return onNotFound();
+    return onLoadError(result);
+  }
+
+  return (
+    <section class="section is-main-section">
+      <NotificationCard notification={notif} />
+
+      {reserveForReward && (
+        <AuthorizeRewardModal
+          onCancel={() => {
+            setReserveForReward(undefined);
+            setRewardAuthorized(undefined);
+          }}
+          rewardAuthorized={rewardAuthorized}
+          onConfirm={async (request) => {
+            try {
+              const response = await authorizeRewardReserve(
+                reserveForReward,
+                request,
+              );
+              setRewardAuthorized({
+                request,
+                response: response.data,
+              });
+            } catch (error) {
+              setNotif({
+                message: i18n.str`could not create the reward`,
+                type: "ERROR",
+                description: error instanceof Error ? error.message : undefined,
+              });
+              setReserveForReward(undefined);
+            }
+          }}
+        />
+      )}
+
+      <CardTable
+        instances={result.data.reserves
+          .filter((r) => r.active)
+          .map((o) => ({ ...o, id: o.reserve_pub }))}
+        onCreate={onCreate}
+        onDelete={(reserve) => {
+          setDeleting(reserve)
+        }}
+        onSelect={(reserve) => onSelect(reserve.id)}
+        onNewReward={(reserve) => setReserveForReward(reserve.id)}
+      />
+
+      {deleting && (
+        <ConfirmModal
+          label={`Delete reserve`}
+          description={`Delete the reserve`}
+          danger
+          active
+          onCancel={() => setDeleting(null)}
+          onConfirm={async (): Promise<void> => {
+            try {
+              await deleteReserve(deleting.reserve_pub);
+              setNotif({
+                message: i18n.str`Reserve for "${deleting.merchant_initial_amount}" (ID: ${deleting.reserve_pub}) has been deleted`,
+                type: "SUCCESS",
+              });
+            } catch (error) {
+              setNotif({
+                message: i18n.str`Failed to delete reserve`,
+                type: "ERROR",
+                description: error instanceof Error ? error.message : undefined,
+              });
+            }
+            setDeleting(null);
+          }}
+        >
+          <p>
+            If you delete the reserve for <b>&quot;{deleting.merchant_initial_amount}&quot;</b> you won't be able to create more rewards. <br />
+            Reserve ID: <b>{deleting.reserve_pub}</b>
+          </p>
+          <p class="warning">
+            Deleting an template <b>cannot be undone</b>.
+          </p>
+        </ConfirmModal>
+      )}
+
+    </section>
+  );
+}