repo: integrate packages from former merchant-backoffice.git

12 files changed, 2761 insertions, 0 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/Create.stories.tsx
new file mode 100644
index 000000000..43df8484a
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/Create.stories.tsx
@@ -0,0 +1,70 @@
+/*
+ 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode, FunctionalComponent } from "preact";
+import { CreatePage as TestedComponent } from "./CreatePage";
+
+export default {
+  title: "Pages/Order/Create",
+  component: TestedComponent,
+  argTypes: {
+    onCreate: { action: "onCreate" },
+    goBack: { action: "goBack" },
+  },
+};
+
+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, {
+  instanceConfig: {
+    default_max_deposit_fee: "",
+    default_max_wire_fee: "",
+    default_pay_delay: {
+      d_us: 1000 * 60 * 60,
+    },
+    default_wire_fee_amortization: 1,
+  },
+  instanceInventory: [
+    {
+      id: "t-shirt-1",
+      description: "a m size t-shirt",
+      price: "TESTKUDOS:1",
+      total_stock: -1,
+    },
+    {
+      id: "t-shirt-2",
+      price: "TESTKUDOS:1",
+      description: "a xl size t-shirt",
+    } as any,
+    {
+      id: "t-shirt-3",
+      price: "TESTKUDOS:1",
+      description: "a s size t-shirt",
+    } as any,
+  ],
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx
new file mode 100644
index 000000000..c08d8ee1d
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx
@@ -0,0 +1,576 @@
+/*
+ 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { add, isAfter, isBefore, isFuture } from "date-fns";
+import { Amounts } from "@gnu-taler/taler-util";
+import { Fragment, h, VNode } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import {
+  FormProvider,
+  FormErrors,
+} from "../../../../components/form/FormProvider";
+import { Input } from "../../../../components/form/Input";
+import { InputCurrency } from "../../../../components/form/InputCurrency";
+import { InputDate } from "../../../../components/form/InputDate";
+import { InputGroup } from "../../../../components/form/InputGroup";
+import { InputLocation } from "../../../../components/form/InputLocation";
+import { ProductList } from "../../../../components/product/ProductList";
+import { useConfigContext } from "../../../../context/config";
+import { Duration, MerchantBackend, WithId } from "../../../../declaration";
+import { Translate, useTranslator } from "../../../../i18n";
+import { OrderCreateSchema as schema } from "../../../../schemas/index";
+import { rate } from "../../../../utils/amount";
+import { InventoryProductForm } from "../../../../components/product/InventoryProductForm";
+import { NonInventoryProductFrom } from "../../../../components/product/NonInventoryProductForm";
+import { InputNumber } from "../../../../components/form/InputNumber";
+import { InputBoolean } from "../../../../components/form/InputBoolean";
+
+interface Props {
+  onCreate: (d: MerchantBackend.Orders.PostOrderRequest) => void;
+  onBack?: () => void;
+  instanceConfig: InstanceConfig;
+  instanceInventory: (MerchantBackend.Products.ProductDetail & WithId)[];
+}
+interface InstanceConfig {
+  default_max_wire_fee: string;
+  default_max_deposit_fee: string;
+  default_wire_fee_amortization: number;
+  default_pay_delay: Duration;
+}
+
+function with_defaults(config: InstanceConfig): Partial<Entity> {
+  const defaultPayDeadline =
+    !config.default_pay_delay || config.default_pay_delay.d_us === "forever"
+      ? undefined
+      : add(new Date(), { seconds: config.default_pay_delay.d_us / 1000 });
+
+  return {
+    inventoryProducts: {},
+    products: [],
+    pricing: {},
+    payments: {
+      max_wire_fee: config.default_max_wire_fee,
+      max_fee: config.default_max_deposit_fee,
+      wire_fee_amortization: config.default_wire_fee_amortization,
+      pay_deadline: defaultPayDeadline,
+      refund_deadline: defaultPayDeadline,
+      createToken: true,
+    },
+    shipping: {},
+    extra: "",
+  };
+}
+
+interface ProductAndQuantity {
+  product: MerchantBackend.Products.ProductDetail & WithId;
+  quantity: number;
+}
+export interface ProductMap {
+  [id: string]: ProductAndQuantity;
+}
+
+interface Pricing {
+  products_price: string;
+  order_price: string;
+  summary: string;
+}
+interface Shipping {
+  delivery_date?: Date;
+  delivery_location?: MerchantBackend.Location;
+  fullfilment_url?: string;
+}
+interface Payments {
+  refund_deadline?: Date;
+  pay_deadline?: Date;
+  wire_transfer_deadline?: Date;
+  auto_refund_deadline?: Date;
+  max_fee?: string;
+  max_wire_fee?: string;
+  wire_fee_amortization?: number;
+  createToken: boolean;
+  minimum_age?: number;
+}
+interface Entity {
+  inventoryProducts: ProductMap;
+  products: MerchantBackend.Product[];
+  pricing: Partial<Pricing>;
+  payments: Partial<Payments>;
+  shipping: Partial<Shipping>;
+  extra: string;
+}
+
+const stringIsValidJSON = (value: string) => {
+  try {
+    JSON.parse(value.trim());
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+function undefinedIfEmpty<T>(obj: T): T | undefined {
+  return Object.keys(obj).some((k) => (obj as any)[k] !== undefined)
+    ? obj
+    : undefined;
+}
+
+export function CreatePage({
+  onCreate,
+  onBack,
+  instanceConfig,
+  instanceInventory,
+}: Props): VNode {
+  const [value, valueHandler] = useState(with_defaults(instanceConfig));
+  const config = useConfigContext();
+  const zero = Amounts.getZero(config.currency);
+
+  const inventoryList = Object.values(value.inventoryProducts || {});
+  const productList = Object.values(value.products || {});
+
+  const i18n = useTranslator();
+
+  const errors: FormErrors<Entity> = {
+    pricing: undefinedIfEmpty({
+      summary: !value.pricing?.summary ? i18n`required` : undefined,
+      order_price: !value.pricing?.order_price
+        ? i18n`required`
+        : Amounts.isZero(value.pricing.order_price)
+        ? i18n`must be greater than 0`
+        : undefined,
+    }),
+    extra:
+      value.extra && !stringIsValidJSON(value.extra)
+        ? i18n`not a valid json`
+        : undefined,
+    payments: undefinedIfEmpty({
+      refund_deadline: !value.payments?.refund_deadline
+        ? undefined
+        : !isFuture(value.payments.refund_deadline)
+        ? i18n`should be in the future`
+        : value.payments.pay_deadline &&
+          isBefore(value.payments.refund_deadline, value.payments.pay_deadline)
+        ? i18n`refund deadline cannot be before pay deadline`
+        : value.payments.wire_transfer_deadline &&
+          isBefore(
+            value.payments.wire_transfer_deadline,
+            value.payments.refund_deadline
+          )
+        ? i18n`wire transfer deadline cannot be before refund deadline`
+        : undefined,
+      pay_deadline: !value.payments?.pay_deadline
+        ? undefined
+        : !isFuture(value.payments.pay_deadline)
+        ? i18n`should be in the future`
+        : value.payments.wire_transfer_deadline &&
+          isBefore(
+            value.payments.wire_transfer_deadline,
+            value.payments.pay_deadline
+          )
+        ? i18n`wire transfer deadline cannot be before pay deadline`
+        : undefined,
+      auto_refund_deadline: !value.payments?.auto_refund_deadline
+        ? undefined
+        : !isFuture(value.payments.auto_refund_deadline)
+        ? i18n`should be in the future`
+        : !value.payments?.refund_deadline
+        ? i18n`should have a refund deadline`
+        : !isAfter(
+            value.payments.refund_deadline,
+            value.payments.auto_refund_deadline
+          )
+        ? i18n`auto refund cannot be after refund deadline`
+        : undefined,
+    }),
+    shipping: undefinedIfEmpty({
+      delivery_date: !value.shipping?.delivery_date
+        ? undefined
+        : !isFuture(value.shipping.delivery_date)
+        ? i18n`should be in the future`
+        : undefined,
+    }),
+  };
+  const hasErrors = Object.keys(errors).some(
+    (k) => (errors as any)[k] !== undefined
+  );
+
+  const submit = (): void => {
+    const order = schema.cast(value);
+    if (!value.payments) return;
+    if (!value.shipping) return;
+
+    const request: MerchantBackend.Orders.PostOrderRequest = {
+      order: {
+        amount: order.pricing.order_price,
+        summary: order.pricing.summary,
+        products: productList,
+        extra: value.extra,
+        pay_deadline: value.payments.pay_deadline
+          ? {
+              t_s: Math.floor(value.payments.pay_deadline.getTime() / 1000),
+            }
+          : undefined,
+        wire_transfer_deadline: value.payments.wire_transfer_deadline
+          ? {
+              t_s: Math.floor(
+                value.payments.wire_transfer_deadline.getTime() / 1000
+              ),
+            }
+          : undefined,
+        refund_deadline: value.payments.refund_deadline
+          ? {
+              t_s: Math.floor(value.payments.refund_deadline.getTime() / 1000),
+            }
+          : undefined,
+        auto_refund: value.payments.auto_refund_deadline
+          ? {
+              d_us: Math.floor(
+                value.payments.auto_refund_deadline.getTime() * 1000
+              ),
+            }
+          : undefined,
+        wire_fee_amortization: value.payments.wire_fee_amortization as number,
+        max_fee: value.payments.max_fee as string,
+        max_wire_fee: value.payments.max_wire_fee as string,
+
+        delivery_date: value.shipping.delivery_date
+          ? { t_s: value.shipping.delivery_date.getTime() / 1000 }
+          : undefined,
+        delivery_location: value.shipping.delivery_location,
+        fulfillment_url: value.shipping.fullfilment_url,
+        minimum_age: value.payments.minimum_age,
+      },
+      inventory_products: inventoryList.map((p) => ({
+        product_id: p.product.id,
+        quantity: p.quantity,
+      })),
+      create_token: value.payments.createToken,
+    };
+
+    onCreate(request);
+  };
+
+  const addProductToTheInventoryList = (
+    product: MerchantBackend.Products.ProductDetail & WithId,
+    quantity: number
+  ) => {
+    valueHandler((v) => {
+      const inventoryProducts = { ...v.inventoryProducts };
+      inventoryProducts[product.id] = { product, quantity };
+      return { ...v, inventoryProducts };
+    });
+  };
+
+  const removeProductFromTheInventoryList = (id: string) => {
+    valueHandler((v) => {
+      const inventoryProducts = { ...v.inventoryProducts };
+      delete inventoryProducts[id];
+      return { ...v, inventoryProducts };
+    });
+  };
+
+  const addNewProduct = async (product: MerchantBackend.Product) => {
+    return valueHandler((v) => {
+      const products = v.products ? [...v.products, product] : [];
+      return { ...v, products };
+    });
+  };
+
+  const removeFromNewProduct = (index: number) => {
+    valueHandler((v) => {
+      const products = v.products ? [...v.products] : [];
+      products.splice(index, 1);
+      return { ...v, products };
+    });
+  };
+
+  const [editingProduct, setEditingProduct] = useState<
+    MerchantBackend.Product | undefined
+  >(undefined);
+
+  const totalPriceInventory = inventoryList.reduce((prev, cur) => {
+    const p = Amounts.parseOrThrow(cur.product.price);
+    return Amounts.add(prev, Amounts.mult(p, cur.quantity).amount).amount;
+  }, zero);
+
+  const totalPriceProducts = productList.reduce((prev, cur) => {
+    if (!cur.price) return zero;
+    const p = Amounts.parseOrThrow(cur.price);
+    return Amounts.add(prev, Amounts.mult(p, cur.quantity).amount).amount;
+  }, zero);
+
+  const hasProducts = inventoryList.length > 0 || productList.length > 0;
+  const totalPrice = Amounts.add(totalPriceInventory, totalPriceProducts);
+
+  const totalAsString = Amounts.stringify(totalPrice.amount);
+  const allProducts = productList.concat(inventoryList.map(asProduct));
+
+  useEffect(() => {
+    valueHandler((v) => {
+      return {
+        ...v,
+        pricing: {
+          ...v.pricing,
+          products_price: hasProducts ? totalAsString : undefined,
+          order_price: hasProducts ? totalAsString : undefined,
+        },
+      };
+    });
+  }, [hasProducts, totalAsString]);
+
+  const discountOrRise = rate(
+    value.pricing?.order_price || `${config.currency}:0`,
+    totalAsString
+  );
+
+  const minAgeByProducts = allProducts.reduce(
+    (cur, prev) =>
+      !prev.minimum_age || cur > prev.minimum_age ? cur : prev.minimum_age,
+    0
+  );
+  return (
+    <div>
+      <section class="section is-main-section">
+        <div class="columns">
+          <div class="column" />
+          <div class="column is-four-fifths">
+            {/* // FIXME: translating plural singular */}
+            <InputGroup
+              name="inventory_products"
+              label={i18n`Manage products in order`}
+              alternative={
+                allProducts.length > 0 && (
+                  <p>
+                    {allProducts.length} products with a total price of{" "}
+                    {totalAsString}.
+                  </p>
+                )
+              }
+              tooltip={i18n`Manage list of products in the order.`}
+            >
+              <InventoryProductForm
+                currentProducts={value.inventoryProducts || {}}
+                onAddProduct={addProductToTheInventoryList}
+                inventory={instanceInventory}
+              />
+
+              <NonInventoryProductFrom
+                productToEdit={editingProduct}
+                onAddProduct={(p) => {
+                  setEditingProduct(undefined);
+                  return addNewProduct(p);
+                }}
+              />
+
+              {allProducts.length > 0 && (
+                <ProductList
+                  list={allProducts}
+                  actions={[
+                    {
+                      name: i18n`Remove`,
+                      tooltip: i18n`Remove this product from the order.`,
+                      handler: (e, index) => {
+                        if (e.product_id) {
+                          removeProductFromTheInventoryList(e.product_id);
+                        } else {
+                          removeFromNewProduct(index);
+                          setEditingProduct(e);
+                        }
+                      },
+                    },
+                  ]}
+                />
+              )}
+            </InputGroup>
+
+            <FormProvider<Entity>
+              errors={errors}
+              object={value}
+              valueHandler={valueHandler as any}
+            >
+              {hasProducts ? (
+                <Fragment>
+                  <InputCurrency
+                    name="pricing.products_price"
+                    label={i18n`Total price`}
+                    readonly
+                    tooltip={i18n`total product price added up`}
+                  />
+                  <InputCurrency
+                    name="pricing.order_price"
+                    label={i18n`Total price`}
+                    addonAfter={
+                      discountOrRise > 0 &&
+                      (discountOrRise < 1
+                        ? `discount of %${Math.round(
+                            (1 - discountOrRise) * 100
+                          )}`
+                        : `rise of %${Math.round((discountOrRise - 1) * 100)}`)
+                    }
+                    tooltip={i18n`Amount to be paid by the customer`}
+                  />
+                </Fragment>
+              ) : (
+                <InputCurrency
+                  name="pricing.order_price"
+                  label={i18n`Order price`}
+                  tooltip={i18n`final order price`}
+                />
+              )}
+
+              <Input
+                name="pricing.summary"
+                inputType="multiline"
+                label={i18n`Summary`}
+                tooltip={i18n`Title of the order to be shown to the customer`}
+              />
+
+              <InputGroup
+                name="shipping"
+                label={i18n`Shipping and Fulfillment`}
+                initialActive
+              >
+                <InputDate
+                  name="shipping.delivery_date"
+                  label={i18n`Delivery date`}
+                  tooltip={i18n`Deadline for physical delivery assured by the merchant.`}
+                />
+                {value.shipping?.delivery_date && (
+                  <InputGroup
+                    name="shipping.delivery_location"
+                    label={i18n`Location`}
+                    tooltip={i18n`address where the products will be delivered`}
+                  >
+                    <InputLocation name="shipping.delivery_location" />
+                  </InputGroup>
+                )}
+                <Input
+                  name="shipping.fullfilment_url"
+                  label={i18n`Fulfillment URL`}
+                  tooltip={i18n`URL to which the user will be redirected after successful payment.`}
+                />
+              </InputGroup>
+
+              <InputGroup
+                name="payments"
+                label={i18n`Taler payment options`}
+                tooltip={i18n`Override default Taler payment settings for this order`}
+              >
+                <InputDate
+                  name="payments.pay_deadline"
+                  label={i18n`Payment deadline`}
+                  tooltip={i18n`Deadline for the customer to pay for the offer before it expires. Inventory products will be reserved until this deadline.`}
+                />
+                <InputDate
+                  name="payments.refund_deadline"
+                  label={i18n`Refund deadline`}
+                  tooltip={i18n`Time until which the order can be refunded by the merchant.`}
+                />
+                <InputDate
+                  name="payments.wire_transfer_deadline"
+                  label={i18n`Wire transfer deadline`}
+                  tooltip={i18n`Deadline for the exchange to make the wire transfer.`}
+                />
+                <InputDate
+                  name="payments.auto_refund_deadline"
+                  label={i18n`Auto-refund deadline`}
+                  tooltip={i18n`Time until which the wallet will automatically check for refunds without user interaction.`}
+                />
+
+                <InputCurrency
+                  name="payments.max_fee"
+                  label={i18n`Maximum deposit fee`}
+                  tooltip={i18n`Maximum deposit fees the merchant is willing to cover for this order. Higher deposit fees must be covered in full by the consumer.`}
+                />
+                <InputCurrency
+                  name="payments.max_wire_fee"
+                  label={i18n`Maximum wire fee`}
+                  tooltip={i18n`Maximum aggregate wire fees the merchant is willing to cover for this order. Wire fees exceeding this amount are to be covered by the customers.`}
+                />
+                <InputNumber
+                  name="payments.wire_fee_amortization"
+                  label={i18n`Wire fee amortization`}
+                  tooltip={i18n`Factor by which wire fees exceeding the above threshold are divided to determine the share of excess wire fees to be paid explicitly by the consumer.`}
+                />
+                <InputBoolean
+                  name="payments.createToken"
+                  label={i18n`Create token`}
+                  tooltip={i18n`Uncheck this option if the merchant backend generated an order ID with enough entropy to prevent adversarial claims.`}
+                />
+                <InputNumber
+                  name="payments.minimum_age"
+                  label={i18n`Minimum age required`}
+                  tooltip={i18n`Any value greater than 0 will limit the coins able be used to pay this contract. If empty the age restriction will be defined by the products`}
+                  help={
+                    minAgeByProducts > 0
+                      ? i18n`Min age defined by the producs is ${minAgeByProducts}`
+                      : undefined
+                  }
+                />
+              </InputGroup>
+
+              <InputGroup
+                name="extra"
+                label={i18n`Additional information`}
+                tooltip={i18n`Custom information to be included in the contract for this order.`}
+              >
+                <Input
+                  name="extra"
+                  inputType="multiline"
+                  label={`Value`}
+                  tooltip={i18n`You must enter a value in JavaScript Object Notation (JSON).`}
+                />
+              </InputGroup>
+            </FormProvider>
+
+            <div class="buttons is-right mt-5">
+              {onBack && (
+                <button class="button" onClick={onBack}>
+                  <Translate>Cancel</Translate>
+                </button>
+              )}
+              <button
+                class="button is-success"
+                onClick={submit}
+                disabled={hasErrors}
+              >
+                <Translate>Confirm</Translate>
+              </button>
+            </div>
+          </div>
+          <div class="column" />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function asProduct(p: ProductAndQuantity): MerchantBackend.Product {
+  return {
+    product_id: p.product.id,
+    image: p.product.image,
+    price: p.product.price,
+    unit: p.product.unit,
+    quantity: p.quantity,
+    description: p.product.description,
+    taxes: p.product.taxes,
+    minimum_age: p.product.minimum_age,
+  };
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx
new file mode 100644
index 000000000..14c5d68c3
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx
@@ -0,0 +1,89 @@
+/*
+ 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 <http://www.gnu.org/licenses/>
+ */
+import { h, VNode } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { CreatedSuccessfully } from "../../../../components/notifications/CreatedSuccessfully";
+import { useOrderAPI } from "../../../../hooks/order";
+import { Translate } from "../../../../i18n";
+import { Entity } from "./index";
+
+interface Props {
+  entity: Entity;
+  onConfirm: () => void;
+  onCreateAnother?: () => void;
+}
+
+export function OrderCreatedSuccessfully({ entity, onConfirm, onCreateAnother }: Props): VNode {
+  const { getPaymentURL } = useOrderAPI()
+  const [url, setURL] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    getPaymentURL(entity.response.order_id).then(response => {
+      setURL(response.data)
+    })
+  }, [getPaymentURL, entity.response.order_id])
+
+  return <CreatedSuccessfully onConfirm={onConfirm} onCreateAnother={onCreateAnother}>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label"><Translate>Amount</Translate></label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            <input class="input" readonly value={entity.request.order.amount} />
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label"><Translate>Summary</Translate></label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            <input class="input" readonly value={entity.request.order.summary} />
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label"><Translate>Order ID</Translate></label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            <input class="input" readonly value={entity.response.order_id} />
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label"><Translate>Payment URL</Translate></label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <p class="control">
+            <input class="input" readonly value={url} />
+          </p>
+        </div>
+      </div>
+    </div>
+  </CreatedSuccessfully>;
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx
new file mode 100644
index 000000000..c447c4b04
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx
@@ -0,0 +1,82 @@
+/*
+ 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { Fragment, h, VNode } from 'preact';
+import { useState } from 'preact/hooks';
+import { Loading } from '../../../../components/exception/loading';
+import { NotificationCard } from '../../../../components/menu';
+import { MerchantBackend } from '../../../../declaration';
+import { HttpError } from '../../../../hooks/backend';
+import { useInstanceDetails } from '../../../../hooks/instance';
+import { useOrderAPI } from '../../../../hooks/order';
+import { useInstanceProducts } from '../../../../hooks/product';
+import { Notification } from '../../../../utils/types';
+import { CreatePage } from './CreatePage';
+import { OrderCreatedSuccessfully } from './OrderCreatedSuccessfully';
+
+export type Entity = {
+  request: MerchantBackend.Orders.PostOrderRequest,
+  response: MerchantBackend.Orders.PostOrderResponse
+}
+interface Props {
+  onBack?: () => void;
+  onConfirm: () => void;
+  onUnauthorized: () => VNode;
+  onNotFound: () => VNode;
+  onLoadError: (error: HttpError) => VNode;
+}
+export default function OrderCreate({ onConfirm, onBack, onLoadError, onNotFound, onUnauthorized }: Props): VNode {
+  const { createOrder } = useOrderAPI()
+  const [notif, setNotif] = useState<Notification | undefined>(undefined)
+
+  const detailsResult = useInstanceDetails()
+  const inventoryResult = useInstanceProducts()
+
+  if (detailsResult.clientError && detailsResult.isUnauthorized) return onUnauthorized()
+  if (detailsResult.clientError && detailsResult.isNotfound) return onNotFound()
+  if (detailsResult.loading) return <Loading />
+  if (!detailsResult.ok) return onLoadError(detailsResult)
+
+  if (inventoryResult.clientError && inventoryResult.isUnauthorized) return onUnauthorized()
+  if (inventoryResult.clientError && inventoryResult.isNotfound) return onNotFound()
+  if (inventoryResult.loading) return <Loading />
+  if (!inventoryResult.ok) return onLoadError(inventoryResult)
+
+  return <Fragment>
+    
+    <NotificationCard notification={notif} />
+
+    <CreatePage
+      onBack={onBack}
+      onCreate={(request: MerchantBackend.Orders.PostOrderRequest) => {
+        createOrder(request).then(onConfirm).catch((error) => {
+          setNotif({
+            message: 'could not create order',
+            type: "ERROR",
+            description: error.message
+          })
+        })
+      }} 
+      instanceConfig={detailsResult.data}
+      instanceInventory={inventoryResult.data}
+      />
+  </Fragment>
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Detail.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Detail.stories.tsx
new file mode 100644
index 000000000..812b11a76
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Detail.stories.tsx
@@ -0,0 +1,137 @@
+/*
+ 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { addDays } from "date-fns";
+import { h, VNode, FunctionalComponent } from "preact";
+import { MerchantBackend } from "../../../../declaration";
+import { DetailPage as TestedComponent } from "./DetailPage";
+
+export default {
+  title: "Pages/Order/Detail",
+  component: TestedComponent,
+  argTypes: {
+    onRefund: { action: "onRefund" },
+    onBack: { action: "onBack" },
+  },
+};
+
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
+}
+
+const defaultContractTerm = {
+  amount: "TESTKUDOS:10",
+  timestamp: {
+    t_s: new Date().getTime() / 1000,
+  },
+  auditors: [],
+  exchanges: [],
+  max_fee: "TESTKUDOS:1",
+  max_wire_fee: "TESTKUDOS:1",
+  merchant: {} as any,
+  merchant_base_url: "http://merchant.url/",
+  order_id: "2021.165-03GDFC26Y1NNG",
+  products: [],
+  summary: "text summary",
+  wire_fee_amortization: 1,
+  wire_transfer_deadline: {
+    t_s: "never",
+  },
+  refund_deadline: { t_s: "never" },
+  merchant_pub: "ASDASDASDSd",
+  nonce: "QWEQWEQWE",
+  pay_deadline: {
+    t_s: "never",
+  },
+  wire_method: "x-taler-bank",
+  h_wire: "asd",
+} as MerchantBackend.ContractTerms;
+
+// contract_terms: defaultContracTerm,
+export const Claimed = createExample(TestedComponent, {
+  id: "2021.165-03GDFC26Y1NNG",
+  selected: {
+    order_status: "claimed",
+    contract_terms: defaultContractTerm,
+  },
+});
+
+export const PaidNotRefundable = createExample(TestedComponent, {
+  id: "2021.165-03GDFC26Y1NNG",
+  selected: {
+    order_status: "paid",
+    contract_terms: defaultContractTerm,
+    refunded: false,
+    deposit_total: "TESTKUDOS:10",
+    exchange_ec: 0,
+    order_status_url: "http://merchant.backend/status",
+    exchange_hc: 0,
+    refund_amount: "TESTKUDOS:0",
+    refund_details: [],
+    refund_pending: false,
+    wire_details: [],
+    wire_reports: [],
+    wired: false,
+  },
+});
+
+export const PaidRefundable = createExample(TestedComponent, {
+  id: "2021.165-03GDFC26Y1NNG",
+  selected: {
+    order_status: "paid",
+    contract_terms: {
+      ...defaultContractTerm,
+      refund_deadline: {
+        t_s: addDays(new Date(), 2).getTime() / 1000,
+      },
+    },
+    refunded: false,
+    deposit_total: "TESTKUDOS:10",
+    exchange_ec: 0,
+    order_status_url: "http://merchant.backend/status",
+    exchange_hc: 0,
+    refund_amount: "TESTKUDOS:0",
+    refund_details: [],
+    refund_pending: false,
+    wire_details: [],
+    wire_reports: [],
+    wired: false,
+  },
+});
+
+export const Unpaid = createExample(TestedComponent, {
+  id: "2021.165-03GDFC26Y1NNG",
+  selected: {
+    order_status: "unpaid",
+    order_status_url: "http://merchant.backend/status",
+    creation_time: {
+      t_s: new Date().getTime() / 1000,
+    },
+    summary: "text summary",
+    taler_pay_uri: "pay uri",
+    total_amount: "TESTKUDOS:10",
+  },
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx
new file mode 100644
index 000000000..4bb7051d6
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx
@@ -0,0 +1,776 @@
+/*
+ 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { AmountJson, Amounts } from "@gnu-taler/taler-util";
+import { format } from "date-fns";
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { FormProvider } from "../../../../components/form/FormProvider";
+import { Input } from "../../../../components/form/Input";
+import { InputCurrency } from "../../../../components/form/InputCurrency";
+import { InputDate } from "../../../../components/form/InputDate";
+import { InputDuration } from "../../../../components/form/InputDuration";
+import { InputGroup } from "../../../../components/form/InputGroup";
+import { InputLocation } from "../../../../components/form/InputLocation";
+import { TextField } from "../../../../components/form/TextField";
+import { ProductList } from "../../../../components/product/ProductList";
+import { useBackendContext } from "../../../../context/backend";
+import { MerchantBackend } from "../../../../declaration";
+import { Translate, useTranslator } from "../../../../i18n";
+import { mergeRefunds } from "../../../../utils/amount";
+import { RefundModal } from "../list/Table";
+import { Event, Timeline } from "./Timeline";
+
+type Entity = MerchantBackend.Orders.MerchantOrderStatusResponse;
+type CT = MerchantBackend.ContractTerms;
+
+interface Props {
+  onBack: () => void;
+  selected: Entity;
+  id: string;
+  onRefund: (id: string, value: MerchantBackend.Orders.RefundRequest) => void;
+}
+
+type Paid = MerchantBackend.Orders.CheckPaymentPaidResponse & {
+  refund_taken: string;
+};
+type Unpaid = MerchantBackend.Orders.CheckPaymentUnpaidResponse;
+type Claimed = MerchantBackend.Orders.CheckPaymentClaimedResponse;
+
+function ContractTerms({ value }: { value: CT }) {
+  const i18n = useTranslator();
+
+  return (
+    <InputGroup name="contract_terms" label={i18n`Contract Terms`}>
+      <FormProvider<CT> object={value} valueHandler={null}>
+        <Input<CT>
+          readonly
+          name="summary"
+          label={i18n`Summary`}
+          tooltip={i18n`human-readable description of the whole purchase`}
+        />
+        <InputCurrency<CT>
+          readonly
+          name="amount"
+          label={i18n`Amount`}
+          tooltip={i18n`total price for the transaction`}
+        />
+        {value.fulfillment_url && (
+          <Input<CT>
+            readonly
+            name="fulfillment_url"
+            label={i18n`Fulfillment URL`}
+            tooltip={i18n`URL for this purchase`}
+          />
+        )}
+        <Input<CT>
+          readonly
+          name="max_fee"
+          label={i18n`Max fee`}
+          tooltip={i18n`maximum total deposit fee accepted by the merchant for this contract`}
+        />
+        <Input<CT>
+          readonly
+          name="max_wire_fee"
+          label={i18n`Max wire fee`}
+          tooltip={i18n`maximum wire fee accepted by the merchant`}
+        />
+        <Input<CT>
+          readonly
+          name="wire_fee_amortization"
+          label={i18n`Wire fee amortization`}
+          tooltip={i18n`over how many customer transactions does the merchant expect to amortize wire fees on average`}
+        />
+        <InputDate<CT>
+          readonly
+          name="timestamp"
+          label={i18n`Created at`}
+          tooltip={i18n`time when this contract was generated`}
+        />
+        <InputDate<CT>
+          readonly
+          name="refund_deadline"
+          label={i18n`Refund deadline`}
+          tooltip={i18n`after this deadline has passed no refunds will be accepted`}
+        />
+        <InputDate<CT>
+          readonly
+          name="pay_deadline"
+          label={i18n`Payment deadline`}
+          tooltip={i18n`after this deadline, the merchant won't accept payments for the contract`}
+        />
+        <InputDate<CT>
+          readonly
+          name="wire_transfer_deadline"
+          label={i18n`Wire transfer deadline`}
+          tooltip={i18n`transfer deadline for the exchange`}
+        />
+        <InputDate<CT>
+          readonly
+          name="delivery_date"
+          label={i18n`Delivery date`}
+          tooltip={i18n`time indicating when the order should be delivered`}
+        />
+        {value.delivery_date && (
+          <InputGroup
+            name="delivery_location"
+            label={i18n`Location`}
+            tooltip={i18n`where the order will be delivered`}
+          >
+            <InputLocation name="payments.delivery_location" />
+          </InputGroup>
+        )}
+        <InputDuration<CT>
+          readonly
+          name="auto_refund"
+          label={i18n`Auto-refund delay`}
+          tooltip={i18n`how long the wallet should try to get an automatic refund for the purchase`}
+        />
+        <Input<CT>
+          readonly
+          name="extra"
+          label={i18n`Extra info`}
+          tooltip={i18n`extra data that is only interpreted by the merchant frontend`}
+        />
+      </FormProvider>
+    </InputGroup>
+  );
+}
+
+function ClaimedPage({
+  id,
+  order,
+}: {
+  id: string;
+  order: MerchantBackend.Orders.CheckPaymentClaimedResponse;
+}) {
+  const events: Event[] = [];
+  if (order.contract_terms.timestamp.t_s !== "never") {
+    events.push({
+      when: new Date(order.contract_terms.timestamp.t_s * 1000),
+      description: "order created",
+      type: "start",
+    });
+  }
+  if (order.contract_terms.pay_deadline.t_s !== "never") {
+    events.push({
+      when: new Date(order.contract_terms.pay_deadline.t_s * 1000),
+      description: "pay deadline",
+      type: "deadline",
+    });
+  }
+  if (order.contract_terms.refund_deadline.t_s !== "never") {
+    events.push({
+      when: new Date(order.contract_terms.refund_deadline.t_s * 1000),
+      description: "refund deadline",
+      type: "deadline",
+    });
+  }
+  if (order.contract_terms.wire_transfer_deadline.t_s !== "never") {
+    events.push({
+      when: new Date(order.contract_terms.wire_transfer_deadline.t_s * 1000),
+      description: "wire deadline",
+      type: "deadline",
+    });
+  }
+  if (
+    order.contract_terms.delivery_date &&
+    order.contract_terms.delivery_date.t_s !== "never"
+  ) {
+    events.push({
+      when: new Date(order.contract_terms.delivery_date?.t_s * 1000),
+      description: "delivery",
+      type: "delivery",
+    });
+  }
+
+  const [value, valueHandler] = useState<Partial<Claimed>>(order);
+  const i18n = useTranslator();
+
+  return (
+    <div>
+      <section class="section">
+        <div class="columns">
+          <div class="column" />
+          <div class="column is-10">
+            <section class="hero is-hero-bar">
+              <div class="hero-body">
+                <div class="level">
+                  <div class="level-left">
+                    <div class="level-item">
+                      <Translate>Order</Translate> #{id}
+                      <div class="tag is-info ml-4">
+                        <Translate>claimed</Translate>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="level">
+                  <div class="level-left">
+                    <div class="level-item">
+                      <h1 class="title">{order.contract_terms.amount}</h1>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="level">
+                  <div class="level-left" style={{ maxWidth: "100%" }}>
+                    <div class="level-item" style={{ maxWidth: "100%" }}>
+                      <div
+                        class="content"
+                        style={{
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                        }}
+                      >
+                        <p>
+                          <b>
+                            <Translate>claimed at</Translate>:
+                          </b>{" "}
+                          {format(
+                            new Date(order.contract_terms.timestamp.t_s * 1000),
+                            "yyyy-MM-dd HH:mm:ss"
+                          )}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section class="section">
+              <div class="columns">
+                <div class="column is-4">
+                  <div class="title">
+                    <Translate>Timeline</Translate>
+                  </div>
+                  <Timeline events={events} />
+                </div>
+                <div class="column is-8">
+                  <div class="title">
+                    <Translate>Payment details</Translate>
+                  </div>
+                  <FormProvider<Claimed>
+                    object={value}
+                    valueHandler={valueHandler}
+                  >
+                    <Input
+                      name="contract_terms.summary"
+                      readonly
+                      inputType="multiline"
+                      label={i18n`Summary`}
+                    />
+                    <InputCurrency
+                      name="contract_terms.amount"
+                      readonly
+                      label={i18n`Amount`}
+                    />
+                    <Input<Claimed>
+                      name="order_status"
+                      readonly
+                      label={i18n`Order status`}
+                    />
+                  </FormProvider>
+                </div>
+              </div>
+            </section>
+
+            {order.contract_terms.products.length ? (
+              <Fragment>
+                <div class="title">
+                  <Translate>Product list</Translate>
+                </div>
+                <ProductList list={order.contract_terms.products} />
+              </Fragment>
+            ) : undefined}
+
+            {value.contract_terms && (
+              <ContractTerms value={value.contract_terms} />
+            )}
+          </div>
+          <div class="column" />
+        </div>
+      </section>
+    </div>
+  );
+}
+function PaidPage({
+  id,
+  order,
+  onRefund,
+}: {
+  id: string;
+  order: MerchantBackend.Orders.CheckPaymentPaidResponse;
+  onRefund: (id: string) => void;
+}) {
+  const events: Event[] = [];
+  if (order.contract_terms.timestamp.t_s !== "never") {
+    events.push({
+      when: new Date(order.contract_terms.timestamp.t_s * 1000),
+      description: "order created",
+      type: "start",
+    });
+  }
+  if (order.contract_terms.pay_deadline.t_s !== "never") {
+    events.push({
+      when: new Date(order.contract_terms.pay_deadline.t_s * 1000),
+      description: "pay deadline",
+      type: "deadline",
+    });
+  }
+  if (order.contract_terms.refund_deadline.t_s !== "never") {
+    events.push({
+      when: new Date(order.contract_terms.refund_deadline.t_s * 1000),
+      description: "refund deadline",
+      type: "deadline",
+    });
+  }
+  if (order.contract_terms.wire_transfer_deadline.t_s !== "never") {
+    events.push({
+      when: new Date(order.contract_terms.wire_transfer_deadline.t_s * 1000),
+      description: "wire deadline",
+      type: "deadline",
+    });
+  }
+  if (
+    order.contract_terms.delivery_date &&
+    order.contract_terms.delivery_date.t_s !== "never"
+  ) {
+    if (order.contract_terms.delivery_date)
+      events.push({
+        when: new Date(order.contract_terms.delivery_date?.t_s * 1000),
+        description: "delivery",
+        type: "delivery",
+      });
+  }
+  order.refund_details.reduce(mergeRefunds, []).forEach((e) => {
+    if (e.timestamp.t_s !== "never") {
+      events.push({
+        when: new Date(e.timestamp.t_s * 1000),
+        description: `refund: ${e.amount}: ${e.reason}`,
+        type: e.pending ? "refund" : "refund-taken",
+      });
+    }
+  });
+  if (order.wire_details && order.wire_details.length) {
+    if (order.wire_details.length > 1) {
+      let last: MerchantBackend.Orders.TransactionWireTransfer | null = null;
+      let first: MerchantBackend.Orders.TransactionWireTransfer | null = null;
+      let total: AmountJson | null = null;
+
+      order.wire_details.forEach((w) => {
+        if (last === null || last.execution_time.t_s < w.execution_time.t_s) {
+          last = w;
+        }
+        if (first === null || first.execution_time.t_s > w.execution_time.t_s) {
+          first = w;
+        }
+        total =
+          total === null
+            ? Amounts.parseOrThrow(w.amount)
+            : Amounts.add(total, Amounts.parseOrThrow(w.amount)).amount;
+      });
+      const last_time = last!.execution_time.t_s;
+      if (last_time !== "never") {
+        events.push({
+          when: new Date(last_time * 1000),
+          description: `wired ${Amounts.stringify(total!)}`,
+          type: "wired-range",
+        });
+      }
+      const first_time = first!.execution_time.t_s;
+      if (first_time !== "never") {
+        events.push({
+          when: new Date(first_time * 1000),
+          description: `wire transfer started...`,
+          type: "wired-range",
+        });
+      }
+    } else {
+      order.wire_details.forEach((e) => {
+        if (e.execution_time.t_s !== "never") {
+          events.push({
+            when: new Date(e.execution_time.t_s * 1000),
+            description: `wired ${e.amount}`,
+            type: "wired",
+          });
+        }
+      });
+    }
+  }
+
+  const [value, valueHandler] = useState<Partial<Paid>>(order);
+  const { url } = useBackendContext();
+  const refundHost = url.replace(/.*:\/\//, ""); // remove protocol part
+  const proto = url.startsWith("http://") ? "taler+http" : "taler";
+  const refundurl = `${proto}://refund/${refundHost}/${order.contract_terms.order_id}/`;
+  const refundable =
+    new Date().getTime() < order.contract_terms.refund_deadline.t_s * 1000;
+  const i18n = useTranslator();
+
+  const amount = Amounts.parseOrThrow(order.contract_terms.amount);
+  const refund_taken = order.refund_details.reduce((prev, cur) => {
+    if (cur.pending) return prev;
+    return Amounts.add(prev, Amounts.parseOrThrow(cur.amount)).amount;
+  }, Amounts.getZero(amount.currency));
+  value.refund_taken = Amounts.stringify(refund_taken);
+
+  return (
+    <div>
+      <section class="section">
+        <div class="columns">
+          <div class="column" />
+          <div class="column is-10">
+            <section class="hero is-hero-bar">
+              <div class="hero-body">
+                <div class="level">
+                  <div class="level-left">
+                    <div class="level-item">
+                      <Translate>Order</Translate> #{id}
+                      <div class="tag is-success ml-4">
+                        <Translate>paid</Translate>
+                      </div>
+                      {order.wired ? (
+                        <div class="tag is-success ml-4">
+                          <Translate>wired</Translate>
+                        </div>
+                      ) : null}
+                      {order.refunded ? (
+                        <div class="tag is-danger ml-4">
+                          <Translate>refunded</Translate>
+                        </div>
+                      ) : null}
+                    </div>
+                  </div>
+                </div>
+                <div class="level">
+                  <div class="level-left">
+                    <div class="level-item">
+                      <h1 class="title">{order.contract_terms.amount}</h1>
+                    </div>
+                  </div>
+                  <div class="level-right">
+                    <div class="level-item">
+                      <h1 class="title">
+                        <div class="buttons">
+                          <span
+                            class="has-tooltip-left"
+                            data-tooltip={
+                              refundable
+                                ? i18n`refund order`
+                                : i18n`not refundable`
+                            }
+                          >
+                            <button
+                              class="button is-danger"
+                              disabled={!refundable}
+                              onClick={() => onRefund(id)}
+                            >
+                              <Translate>refund</Translate>
+                            </button>
+                          </span>
+                        </div>
+                      </h1>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="level">
+                  <div class="level-left" style={{ maxWidth: "100%" }}>
+                    <div class="level-item" style={{ maxWidth: "100%" }}>
+                      <div
+                        class="content"
+                        style={{
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          // maxWidth: '100%',
+                        }}
+                      >
+                        <p>
+                          <a
+                            href={order.contract_terms.fulfillment_url}
+                            rel="nofollow"
+                            target="new"
+                          >
+                            {order.contract_terms.fulfillment_url}
+                          </a>
+                        </p>
+                        <p>
+                          {format(
+                            new Date(order.contract_terms.timestamp.t_s * 1000),
+                            "yyyy/MM/dd HH:mm:ss"
+                          )}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section class="section">
+              <div class="columns">
+                <div class="column is-4">
+                  <div class="title">
+                    <Translate>Timeline</Translate>
+                  </div>
+                  <Timeline events={events} />
+                </div>
+                <div class="column is-8">
+                  <div class="title">
+                    <Translate>Payment details</Translate>
+                  </div>
+                  <FormProvider<Paid>
+                    object={value}
+                    valueHandler={valueHandler}
+                  >
+                    {/* <InputCurrency<Paid> name="deposit_total" readonly label={i18n`Deposit total`} /> */}
+                    {order.refunded && (
+                      <InputCurrency<Paid>
+                        name="refund_amount"
+                        readonly
+                        label={i18n`Refunded amount`}
+                      />
+                    )}
+                    {order.refunded && (
+                      <InputCurrency<Paid>
+                        name="refund_taken"
+                        readonly
+                        label={i18n`Refund taken`}
+                      />
+                    )}
+                    <Input<Paid>
+                      name="order_status"
+                      readonly
+                      label={i18n`Order status`}
+                    />
+                    <TextField<Paid>
+                      name="order_status_url"
+                      label={i18n`Status URL`}
+                    >
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={order.order_status_url}
+                      >
+                        {order.order_status_url}
+                      </a>
+                    </TextField>
+                    {order.refunded && (
+                      <TextField<Paid>
+                        name="order_status_url"
+                        label={i18n`Refund URI`}
+                      >
+                        <a target="_blank" rel="noreferrer" href={refundurl}>
+                          {refundurl}
+                        </a>
+                      </TextField>
+                    )}
+                  </FormProvider>
+                </div>
+              </div>
+            </section>
+
+            {order.contract_terms.products.length ? (
+              <Fragment>
+                <div class="title">
+                  <Translate>Product list</Translate>
+                </div>
+                <ProductList list={order.contract_terms.products} />
+              </Fragment>
+            ) : undefined}
+
+            {value.contract_terms && (
+              <ContractTerms value={value.contract_terms} />
+            )}
+          </div>
+          <div class="column" />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function UnpaidPage({
+  id,
+  order,
+}: {
+  id: string;
+  order: MerchantBackend.Orders.CheckPaymentUnpaidResponse;
+}) {
+  const [value, valueHandler] = useState<Partial<Unpaid>>(order);
+  const i18n = useTranslator();
+  return (
+    <div>
+      <section class="hero is-hero-bar">
+        <div class="hero-body">
+          <div class="level">
+            <div class="level-left">
+              <div class="level-item">
+                <h1 class="title">
+                  <Translate>Order</Translate> #{id}
+                </h1>
+              </div>
+              <div class="tag is-dark">
+                <Translate>unpaid</Translate>
+              </div>
+            </div>
+          </div>
+
+          <div class="level">
+            <div class="level-left" style={{ maxWidth: "100%" }}>
+              <div class="level-item" style={{ maxWidth: "100%" }}>
+                <div
+                  class="content"
+                  style={{
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                  }}
+                >
+                  <p>
+                    <b>
+                      <Translate>pay at</Translate>:
+                    </b>{" "}
+                    <a
+                      href={order.order_status_url}
+                      rel="nofollow"
+                      target="new"
+                    >
+                      {order.order_status_url}
+                    </a>
+                  </p>
+                  <p>
+                    <b>
+                      <Translate>created at</Translate>:
+                    </b>{" "}
+                    {order.creation_time.t_s === "never"
+                      ? "never"
+                      : format(
+                          new Date(order.creation_time.t_s * 1000),
+                          "yyyy-MM-dd HH:mm:ss"
+                        )}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="section is-main-section">
+        <div class="columns">
+          <div class="column" />
+          <div class="column is-four-fifths">
+            <FormProvider<Unpaid> object={value} valueHandler={valueHandler}>
+              <Input<Unpaid>
+                readonly
+                name="summary"
+                label={i18n`Summary`}
+                tooltip={i18n`human-readable description of the whole purchase`}
+              />
+              <InputCurrency<Unpaid>
+                readonly
+                name="total_amount"
+                label={i18n`Amount`}
+                tooltip={i18n`total price for the transaction`}
+              />
+              <Input<Unpaid>
+                name="order_status"
+                readonly
+                label={i18n`Order status`}
+              />
+              <Input<Unpaid>
+                name="order_status_url"
+                readonly
+                label={i18n`Order status URL`}
+              />
+              <TextField<Unpaid> name="taler_pay_uri" label={i18n`Payment URI`}>
+                <a target="_blank" rel="noreferrer" href={value.taler_pay_uri}>
+                  {value.taler_pay_uri}
+                </a>
+              </TextField>
+            </FormProvider>
+          </div>
+          <div class="column" />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export function DetailPage({ id, selected, onRefund, onBack }: Props): VNode {
+  const [showRefund, setShowRefund] = useState<string | undefined>(undefined);
+
+  const DetailByStatus = function () {
+    switch (selected.order_status) {
+      case "claimed":
+        return <ClaimedPage id={id} order={selected} />;
+      case "paid":
+        return <PaidPage id={id} order={selected} onRefund={setShowRefund} />;
+      case "unpaid":
+        return <UnpaidPage id={id} order={selected} />;
+      default:
+        return (
+          <div>
+            <Translate>
+              Unknown order status. This is an error, please contact the
+              administrator.
+            </Translate>
+          </div>
+        );
+    }
+  };
+
+  return (
+    <Fragment>
+      {DetailByStatus()}
+      {showRefund && (
+        <RefundModal
+          order={selected}
+          onCancel={() => setShowRefund(undefined)}
+          onConfirm={(value) => {
+            onRefund(showRefund, value);
+            setShowRefund(undefined);
+          }}
+        />
+      )}
+      <div class="columns">
+        <div class="column" />
+        <div class="column is-four-fifths">
+          <div class="buttons is-right mt-5">
+            <button class="button" onClick={onBack}>
+              <Translate>Back</Translate>
+            </button>
+          </div>
+        </div>
+        <div class="column" />
+      </div>
+    </Fragment>
+  );
+}
+
+async function copyToClipboard(text: string) {
+  return navigator.clipboard.writeText(text);
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx
new file mode 100644
index 000000000..bea65607a
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx
@@ -0,0 +1,128 @@
+/*
+ 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 <http://www.gnu.org/licenses/>
+ */
+import { format } from "date-fns";
+import { h } from "preact";
+import { useEffect, useState } from "preact/hooks";
+
+interface Props {
+  events: Event[];
+}
+
+export function Timeline({ events: e }: Props) {
+  const events = [...e];
+  events.push({
+    when: new Date(),
+    description: "now",
+    type: "now",
+  });
+
+  events.sort((a, b) => a.when.getTime() - b.when.getTime());
+
+  const [state, setState] = useState(events);
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      const eventsWithoutNow = state.filter((e) => e.type !== "now");
+      eventsWithoutNow.push({
+        when: new Date(),
+        description: "now",
+        type: "now",
+      });
+      setState(eventsWithoutNow);
+    }, 1000);
+    return () => {
+      clearTimeout(handle);
+    };
+  });
+  return (
+    <div class="timeline">
+      {events.map((e, i) => {
+        return (
+          <div key={i} class="timeline-item">
+            {(() => {
+              switch (e.type) {
+                case "deadline":
+                  return (
+                    <div class="timeline-marker is-icon ">
+                      <i class="mdi mdi-flag" />
+                    </div>
+                  );
+                case "delivery":
+                  return (
+                    <div class="timeline-marker is-icon ">
+                      <i class="mdi mdi-delivery" />
+                    </div>
+                  );
+                case "start":
+                  return (
+                    <div class="timeline-marker is-icon is-success">
+                      <i class="mdi mdi-flag " />
+                    </div>
+                  );
+                case "wired":
+                  return (
+                    <div class="timeline-marker is-icon is-success">
+                      <i class="mdi mdi-cash" />
+                    </div>
+                  );
+                case "wired-range":
+                  return (
+                    <div class="timeline-marker is-icon is-success">
+                      <i class="mdi mdi-cash" />
+                    </div>
+                  );
+                case "refund":
+                  return (
+                    <div class="timeline-marker is-icon is-danger">
+                      <i class="mdi mdi-cash" />
+                    </div>
+                  );
+                case "refund-taken":
+                  return (
+                    <div class="timeline-marker is-icon is-success">
+                      <i class="mdi mdi-cash" />
+                    </div>
+                  );
+                case "now":
+                  return (
+                    <div class="timeline-marker is-icon is-info">
+                      <i class="mdi mdi-clock" />
+                    </div>
+                  );
+              }
+            })()}
+            <div class="timeline-content">
+              <p class="heading">{format(e.when, "yyyy/MM/dd HH:mm:ss")}</p>
+              <p>{e.description}</p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+export interface Event {
+  when: Date;
+  description: string;
+  type:
+    | "start"
+    | "refund"
+    | "refund-taken"
+    | "wired"
+    | "wired-range"
+    | "deadline"
+    | "delivery"
+    | "now";
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx
new file mode 100644
index 000000000..cd4e163eb
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx
@@ -0,0 +1,67 @@
+/*
+ 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 <http://www.gnu.org/licenses/>
+ */
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { Loading } from "../../../../components/exception/loading";
+import { NotificationCard } from "../../../../components/menu";
+import { HttpError } from "../../../../hooks/backend";
+import { useOrderDetails, useOrderAPI } from "../../../../hooks/order";
+import { useTranslator } from "../../../../i18n";
+import { Notification } from "../../../../utils/types";
+import { DetailPage } from "./DetailPage";
+
+export interface Props {
+  oid: string;
+
+  onBack: () => void;
+  onUnauthorized: () => VNode;
+  onNotFound: () => VNode;
+  onLoadError: (error: HttpError) => VNode;
+}
+
+export default function Update({ oid, onBack, onLoadError, onNotFound, onUnauthorized }: Props): VNode {
+  const { refundOrder } = useOrderAPI();
+  const result = useOrderDetails(oid)
+  const [notif, setNotif] = useState<Notification | undefined>(undefined)
+
+  const i18n = useTranslator()
+
+  if (result.clientError && result.isUnauthorized) return onUnauthorized()
+  if (result.clientError && result.isNotfound) return onNotFound()
+  if (result.loading) return <Loading />
+  if (!result.ok) return onLoadError(result)
+
+  return <Fragment>
+
+    <NotificationCard notification={notif} />
+
+    <DetailPage
+      onBack={onBack}
+      id={oid}
+      onRefund={(id, value) => refundOrder(id, value)
+        .then(() => setNotif({
+          message: i18n`refund created successfully`,
+          type: "SUCCESS"
+        })).catch((error) => setNotif({
+          message: i18n`could not create the refund`,
+          type: "ERROR",
+          description: error.message
+        }))
+      }
+      selected={result.data}
+    />
+  </Fragment>
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/List.stories.tsx
new file mode 100644
index 000000000..1dbb3f20d
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/List.stories.tsx
@@ -0,0 +1,107 @@
+/*
+ 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode, FunctionalComponent } from "preact";
+import { ListPage as TestedComponent } from "./ListPage";
+
+export default {
+  title: "Pages/Order/List",
+  component: TestedComponent,
+  argTypes: {
+    onShowAll: { action: "onShowAll" },
+    onShowPaid: { action: "onShowPaid" },
+    onShowRefunded: { action: "onShowRefunded" },
+    onShowNotWired: { action: "onShowNotWired" },
+    onCopyURL: { action: "onCopyURL" },
+    onSelectDate: { action: "onSelectDate" },
+    onLoadMoreBefore: { action: "onLoadMoreBefore" },
+    onLoadMoreAfter: { action: "onLoadMoreAfter" },
+    onSelectOrder: { action: "onSelectOrder" },
+    onRefundOrder: { action: "onRefundOrder" },
+    onSearchOrderById: { action: "onSearchOrderById" },
+    onCreate: { action: "onCreate" },
+  },
+};
+
+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, {
+  orders: [
+    {
+      id: "123",
+      amount: "TESTKUDOS:10",
+      paid: false,
+      refundable: true,
+      row_id: 1,
+      summary: "summary",
+      timestamp: {
+        t_s: new Date().getTime() / 1000,
+      },
+      order_id: "123",
+    },
+    {
+      id: "234",
+      amount: "TESTKUDOS:12",
+      paid: true,
+      refundable: true,
+      row_id: 2,
+      summary:
+        "summary with long text, very very long text that someone want to add as a description of the order",
+      timestamp: {
+        t_s: new Date().getTime() / 1000,
+      },
+      order_id: "234",
+    },
+    {
+      id: "456",
+      amount: "TESTKUDOS:1",
+      paid: false,
+      refundable: false,
+      row_id: 3,
+      summary:
+        "summary with long text, very very long text that someone want to add as a description of the order",
+      timestamp: {
+        t_s: new Date().getTime() / 1000,
+      },
+      order_id: "456",
+    },
+    {
+      id: "234",
+      amount: "TESTKUDOS:12",
+      paid: false,
+      refundable: false,
+      row_id: 4,
+      summary:
+        "summary with long text, very very long text that someone want to add as a description of the order",
+      timestamp: {
+        t_s: new Date().getTime() / 1000,
+      },
+      order_id: "234",
+    },
+  ],
+});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx
new file mode 100644
index 000000000..032801bde
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx
@@ -0,0 +1,146 @@
+/*
+ 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { format } from 'date-fns';
+import { h, VNode } from 'preact';
+import { useState } from 'preact/hooks';
+import { DatePicker } from '../../../../components/picker/DatePicker';
+import { MerchantBackend, WithId } from '../../../../declaration';
+import { Translate, useTranslator } from '../../../../i18n';
+import { CardTable } from './Table';
+
+export interface ListPageProps {
+  errorOrderId: string | undefined,
+
+  onShowAll: () => void,
+  onShowPaid: () => void,
+  onShowRefunded: () => void,
+  onShowNotWired: () => void,
+  onCopyURL: (id: string) => void;
+  isAllActive: string,
+  isPaidActive: string,
+  isRefundedActive: string,
+  isNotWiredActive: string,
+
+  jumpToDate?: Date,
+  onSelectDate: (date?: Date) => void,
+
+  orders: (MerchantBackend.Orders.OrderHistoryEntry & WithId)[];
+  onLoadMoreBefore?: () => void;
+  hasMoreBefore?: boolean;
+  hasMoreAfter?: boolean;
+  onLoadMoreAfter?: () => void;
+
+  onSelectOrder: (o: MerchantBackend.Orders.OrderHistoryEntry & WithId) => void;
+  onRefundOrder: (o: MerchantBackend.Orders.OrderHistoryEntry & WithId) => void;
+  onSearchOrderById: (id: string) => void;
+  onCreate: () => void;
+}
+
+export function ListPage({ orders, errorOrderId, isAllActive, onSelectOrder, onRefundOrder, onSearchOrderById, jumpToDate, onCopyURL, onShowAll, onShowPaid, onShowRefunded, onShowNotWired, onSelectDate, isPaidActive, isRefundedActive, isNotWiredActive, onCreate }: ListPageProps): VNode {
+  const i18n = useTranslator();
+  const dateTooltip = i18n`select date to show nearby orders`;
+  const [pickDate, setPickDate] = useState(false);
+  const [orderId, setOrderId] = useState<string>('');
+
+  return <section class="section is-main-section">
+
+    <div class="level">
+      <div class="level-left">
+        <div class="level-item">
+          <div class="field has-addons">
+            <div class="control">
+              <input class={errorOrderId ? "input is-danger" : "input"} type="text" value={orderId} onChange={e => setOrderId(e.currentTarget.value)} placeholder={i18n`order id`} />
+              {errorOrderId && <p class="help is-danger">{errorOrderId}</p>}
+            </div>
+            <span class="has-tooltip-bottom" data-tooltip={i18n`jump to order with the given order ID`}>
+              <button class="button" onClick={(e) => onSearchOrderById(orderId)}>
+                <span class="icon"><i class="mdi mdi-arrow-right" /></span>
+              </button>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-two-thirds">
+        <div class="tabs" style={{overflow:'inherit'}}>
+          <ul>
+            <li class={isAllActive}>
+              <div class="has-tooltip-right" data-tooltip={i18n`remove all filters`}>
+                <a onClick={onShowAll}><Translate>All</Translate></a>
+              </div>
+            </li>
+            <li class={isPaidActive}>
+              <div class="has-tooltip-right" data-tooltip={i18n`only show paid orders`}>
+                <a onClick={onShowPaid}><Translate>Paid</Translate></a>
+              </div>
+            </li>
+            <li class={isRefundedActive}>
+              <div class="has-tooltip-right" data-tooltip={i18n`only show orders with refunds`}>
+                <a onClick={onShowRefunded}><Translate>Refunded</Translate></a>
+              </div>
+            </li>
+            <li class={isNotWiredActive}>
+              <div class="has-tooltip-left" data-tooltip={i18n`only show orders where customers paid, but wire payments from payment provider are still pending`}>
+                <a onClick={onShowNotWired}><Translate>Not wired</Translate></a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="column ">
+        <div class="buttons is-right">
+          <div class="field has-addons">
+            {jumpToDate && <div class="control">
+              <a class="button" onClick={() => onSelectDate(undefined)}>
+                <span class="icon" data-tooltip={i18n`clear date filter`}><i class="mdi mdi-close" /></span>
+              </a>
+            </div>}
+            <div class="control">
+              <span class="has-tooltip-top" data-tooltip={dateTooltip}>
+                <input class="input" type="text" readonly value={!jumpToDate ? '' : format(jumpToDate, 'yyyy/MM/dd')} placeholder={i18n`date (YYYY/MM/DD)`} onClick={() => { setPickDate(true); }} />
+              </span>
+            </div>
+            <div class="control">
+              <span class="has-tooltip-left" data-tooltip={dateTooltip}>
+                <a class="button" onClick={() => { setPickDate(true); }}>
+                  <span class="icon"><i class="mdi mdi-calendar" /></span>
+                </a>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <DatePicker
+      opened={pickDate}
+      closeFunction={() => setPickDate(false)}
+      dateReceiver={onSelectDate} />
+
+    <CardTable orders={orders}
+      onCreate={onCreate}
+      onCopyURL={onCopyURL}
+      onSelect={onSelectOrder}
+      onRefund={onRefundOrder} />
+  </section>;
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx
new file mode 100644
index 000000000..60d5fae59
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx
@@ -0,0 +1,412 @@
+/*
+ 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { Amounts } from "@gnu-taler/taler-util";
+import { format } from "date-fns";
+import { h, VNode } from "preact";
+import { StateUpdater, useState } from "preact/hooks";
+import {
+  FormErrors,
+  FormProvider,
+} from "../../../../components/form/FormProvider";
+import { Input } from "../../../../components/form/Input";
+import { InputCurrency } from "../../../../components/form/InputCurrency";
+import { InputGroup } from "../../../../components/form/InputGroup";
+import { InputSelector } from "../../../../components/form/InputSelector";
+import { ConfirmModal } from "../../../../components/modal";
+import { useConfigContext } from "../../../../context/config";
+import { MerchantBackend, WithId } from "../../../../declaration";
+import { Translate, useTranslator } from "../../../../i18n";
+import { mergeRefunds } from "../../../../utils/amount";
+
+type Entity = MerchantBackend.Orders.OrderHistoryEntry & WithId;
+interface Props {
+  orders: Entity[];
+  onRefund: (value: Entity) => void;
+  onCopyURL: (id: string) => void;
+  onCreate: () => void;
+  onSelect: (order: Entity) => void;
+  onLoadMoreBefore?: () => void;
+  hasMoreBefore?: boolean;
+  hasMoreAfter?: boolean;
+  onLoadMoreAfter?: () => void;
+}
+
+export function CardTable({
+  orders,
+  onCreate,
+  onRefund,
+  onCopyURL,
+  onSelect,
+  onLoadMoreAfter,
+  onLoadMoreBefore,
+  hasMoreAfter,
+  hasMoreBefore,
+}: Props): VNode {
+  const [rowSelection, rowSelectionHandler] = useState<string[]>([]);
+
+  const i18n = useTranslator();
+
+  return (
+    <div class="card has-table">
+      <header class="card-header">
+        <p class="card-header-title">
+          <span class="icon">
+            <i class="mdi mdi-cash-register" />
+          </span>
+          <Translate>Orders</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`create order`}>
+            <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">
+            {orders.length > 0 ? (
+              <Table
+                instances={orders}
+                onSelect={onSelect}
+                onRefund={onRefund}
+                onCopyURL={(o) => onCopyURL(o.id)}
+                rowSelection={rowSelection}
+                rowSelectionHandler={rowSelectionHandler}
+                onLoadMoreAfter={onLoadMoreAfter}
+                onLoadMoreBefore={onLoadMoreBefore}
+                hasMoreAfter={hasMoreAfter}
+                hasMoreBefore={hasMoreBefore}
+              />
+            ) : (
+              <EmptyTable />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+interface TableProps {
+  rowSelection: string[];
+  instances: Entity[];
+  onRefund: (id: Entity) => void;
+  onCopyURL: (id: Entity) => void;
+  onSelect: (id: Entity) => void;
+  rowSelectionHandler: StateUpdater<string[]>;
+  onLoadMoreBefore?: () => void;
+  hasMoreBefore?: boolean;
+  hasMoreAfter?: boolean;
+  onLoadMoreAfter?: () => void;
+}
+
+function Table({
+  instances,
+  onSelect,
+  onRefund,
+  onCopyURL,
+  onLoadMoreAfter,
+  onLoadMoreBefore,
+  hasMoreAfter,
+  hasMoreBefore,
+}: TableProps): VNode {
+  return (
+    <div class="table-container">
+      {onLoadMoreBefore && (
+        <button
+          class="button is-fullwidth"
+          disabled={!hasMoreBefore}
+          onClick={onLoadMoreBefore}
+        >
+          <Translate>load newer orders</Translate>
+        </button>
+      )}
+      <table class="table is-striped is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th style={{ minWidth: 100 }}>
+              <Translate>Date</Translate>
+            </th>
+            <th style={{ minWidth: 100 }}>
+              <Translate>Amount</Translate>
+            </th>
+            <th style={{ minWidth: 400 }}>
+              <Translate>Summary</Translate>
+            </th>
+            <th style={{ minWidth: 50 }} />
+          </tr>
+        </thead>
+        <tbody>
+          {instances.map((i) => {
+            return (
+              <tr key={i.id}>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.timestamp.t_s === "never"
+                    ? "never"
+                    : format(
+                        new Date(i.timestamp.t_s * 1000),
+                        "yyyy/MM/dd HH:mm:ss"
+                      )}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.amount}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.summary}
+                </td>
+                <td class="is-actions-cell right-sticky">
+                  <div class="buttons is-right">
+                    {i.refundable && (
+                      <button
+                        class="button is-small is-danger jb-modal"
+                        type="button"
+                        onClick={(): void => onRefund(i)}
+                      >
+                        <Translate>Refund</Translate>
+                      </button>
+                    )}
+                    {!i.paid && (
+                      <button
+                        class="button is-small is-info jb-modal"
+                        type="button"
+                        onClick={(): void => onCopyURL(i)}
+                      >
+                        <Translate>copy url</Translate>
+                      </button>
+                    )}
+                  </div>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      {onLoadMoreAfter && (
+        <button
+          class="button is-fullwidth"
+          disabled={!hasMoreAfter}
+          onClick={onLoadMoreAfter}
+        >
+          <Translate>load older orders</Translate>
+        </button>
+      )}
+    </div>
+  );
+}
+
+function EmptyTable(): VNode {
+  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>
+        <Translate>No orders have been found matching your query!</Translate>
+      </p>
+    </div>
+  );
+}
+
+interface RefundModalProps {
+  onCancel: () => void;
+  onConfirm: (value: MerchantBackend.Orders.RefundRequest) => void;
+  order: MerchantBackend.Orders.MerchantOrderStatusResponse;
+}
+
+export function RefundModal({
+  order,
+  onCancel,
+  onConfirm,
+}: RefundModalProps): VNode {
+  type State = { mainReason?: string; description?: string; refund?: string };
+  const [form, setValue] = useState<State>({});
+  const i18n = useTranslator();
+  // const [errors, setErrors] = useState<FormErrors<State>>({});
+
+  const refunds = (
+    order.order_status === "paid" ? order.refund_details : []
+  ).reduce(mergeRefunds, []);
+
+  const config = useConfigContext();
+  const totalRefunded = refunds
+    .map((r) => r.amount)
+    .reduce(
+      (p, c) => Amounts.add(p, Amounts.parseOrThrow(c)).amount,
+      Amounts.getZero(config.currency)
+    );
+  const orderPrice =
+    order.order_status === "paid"
+      ? Amounts.parseOrThrow(order.contract_terms.amount)
+      : undefined;
+  const totalRefundable = !orderPrice
+    ? Amounts.getZero(totalRefunded.currency)
+    : refunds.length
+    ? Amounts.sub(orderPrice, totalRefunded).amount
+    : orderPrice;
+
+  const isRefundable = Amounts.isNonZero(totalRefundable);
+  const duplicatedText = i18n`duplicated`;
+
+  const errors: FormErrors<State> = {
+    mainReason: !form.mainReason ? i18n`required` : undefined,
+    description:
+      !form.description && form.mainReason !== duplicatedText
+        ? i18n`required`
+        : undefined,
+    refund: !form.refund
+      ? i18n`required`
+      : !Amounts.parse(form.refund)
+      ? i18n`invalid format`
+      : Amounts.cmp(totalRefundable, Amounts.parse(form.refund)!) === -1
+      ? i18n`this value exceed the refundable amount`
+      : undefined,
+  };
+  const hasErrors = Object.keys(errors).some(
+    (k) => (errors as any)[k] !== undefined
+  );
+
+  const validateAndConfirm = () => {
+    try {
+      if (!form.refund) return;
+      onConfirm({
+        refund: Amounts.stringify(
+          Amounts.add(Amounts.parse(form.refund)!, totalRefunded).amount
+        ),
+        reason:
+          form.description === undefined
+            ? form.mainReason || ""
+            : `${form.mainReason}: ${form.description}`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //FIXME: parameters in the translation
+  return (
+    <ConfirmModal
+      description="refund"
+      danger
+      active
+      disabled={!isRefundable || hasErrors}
+      onCancel={onCancel}
+      onConfirm={validateAndConfirm}
+    >
+      {refunds.length > 0 && (
+        <div class="columns">
+          <div class="column is-12">
+            <InputGroup
+              name="asd"
+              label={`${Amounts.stringify(totalRefunded)} was already refunded`}
+            >
+              <table class="table is-fullwidth">
+                <thead>
+                  <tr>
+                    <th>
+                      <Translate>date</Translate>
+                    </th>
+                    <th>
+                      <Translate>amount</Translate>
+                    </th>
+                    <th>
+                      <Translate>reason</Translate>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {refunds.map((r) => {
+                    return (
+                      <tr key={r.timestamp.t_s}>
+                        <td>
+                          {r.timestamp.t_s === "never"
+                            ? "never"
+                            : format(
+                                new Date(r.timestamp.t_s * 1000),
+                                "yyyy-MM-dd HH:mm:ss"
+                              )}
+                        </td>
+                        <td>{r.amount}</td>
+                        <td>{r.reason}</td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </InputGroup>
+          </div>
+        </div>
+      )}
+
+      {isRefundable && (
+        <FormProvider<State>
+          errors={errors}
+          object={form}
+          valueHandler={(d) => setValue(d as any)}
+        >
+          <InputCurrency<State>
+            name="refund"
+            label={i18n`Refund`}
+            tooltip={i18n`amount to be refunded`}
+          >
+            <Translate>Max refundable:</Translate>{" "}
+            {Amounts.stringify(totalRefundable)}
+          </InputCurrency>
+          <InputSelector
+            name="mainReason"
+            label={i18n`Reason`}
+            values={[
+              i18n`Choose one...`,
+              duplicatedText,
+              i18n`requested by the customer`,
+              i18n`other`,
+            ]}
+            tooltip={i18n`why this order is being refunded`}
+          />
+          {form.mainReason && form.mainReason !== duplicatedText ? (
+            <Input<State>
+              label={i18n`Description`}
+              name="description"
+              tooltip={i18n`more information to give context`}
+            />
+          ) : undefined}
+        </FormProvider>
+      )}
+    </ConfirmModal>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx
new file mode 100644
index 000000000..47e143fb7
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx
@@ -0,0 +1,171 @@
+/*
+ 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode, Fragment } from 'preact';
+import { useState } from 'preact/hooks';
+import { Loading } from '../../../../components/exception/loading';
+import { NotificationCard } from '../../../../components/menu';
+import { MerchantBackend, WithId } from '../../../../declaration';
+import { HttpError } from '../../../../hooks/backend';
+import { InstanceOrderFilter, useInstanceOrders, useOrderAPI, useOrderDetails } from '../../../../hooks/order';
+import { useTranslator } from '../../../../i18n';
+import { Notification } from '../../../../utils/types';
+import { RefundModal } from './Table';
+import { ListPage } from './ListPage';
+
+interface Props {
+  onUnauthorized: () => VNode;
+  onLoadError: (error: HttpError) => VNode;
+  onNotFound: () => VNode;
+  onSelect: (id: string) => void;
+  onCreate: () => void;
+}
+
+export default function ({ onUnauthorized, onLoadError, onCreate, onSelect, onNotFound }: Props): VNode {
+  const [filter, setFilter] = useState<InstanceOrderFilter>({})
+  const [orderToBeRefunded, setOrderToBeRefunded] = useState<MerchantBackend.Orders.OrderHistoryEntry | undefined>(undefined)
+
+  const setNewDate = (date?: Date) => setFilter(prev => ({ ...prev, date }))
+
+  const result = useInstanceOrders(filter, setNewDate)
+  const { refundOrder, getPaymentURL } = useOrderAPI()
+
+  const [notif, setNotif] = useState<Notification | undefined>(undefined)
+
+  if (result.clientError && result.isUnauthorized) return onUnauthorized()
+  if (result.clientError && result.isNotfound) return onNotFound()
+  if (result.loading) return <Loading />
+  if (!result.ok) return onLoadError(result)
+
+  const isPaidActive = filter.paid === 'yes' ? "is-active" : ''
+  const isRefundedActive = filter.refunded === 'yes' ? "is-active" : ''
+  const isNotWiredActive = filter.wired === 'no' ? "is-active" : ''
+  const isAllActive = filter.paid === undefined && filter.refunded === undefined && filter.wired === undefined ? 'is-active' : ''
+
+  const i18n = useTranslator()
+  const [errorOrderId, setErrorOrderId] = useState<string | undefined>(undefined)
+
+  async function testIfOrderExistAndSelect(orderId: string) {
+    if (!orderId) {
+      setErrorOrderId(i18n`Enter an order id`)
+      return;
+    }
+    try {
+      await getPaymentURL(orderId)
+      onSelect(orderId)
+      setErrorOrderId(undefined)
+    } catch {
+      setErrorOrderId(i18n`order not found`)
+    }
+  }
+
+  return <Fragment>
+    <NotificationCard notification={notif} />
+
+    <ListPage
+      orders={result.data.orders.map(o => ({ ...o, id: o.order_id }))}
+      onLoadMoreBefore={result.loadMorePrev} hasMoreBefore={!result.isReachingStart}
+      onLoadMoreAfter={result.loadMore} hasMoreAfter={!result.isReachingEnd}
+
+      onSelectOrder={(order) => onSelect(order.id)}
+      onRefundOrder={(value) => setOrderToBeRefunded(value)}
+
+      errorOrderId={errorOrderId}
+      isAllActive={isAllActive}
+      isNotWiredActive={isNotWiredActive}
+      isPaidActive={isPaidActive}
+      isRefundedActive={isRefundedActive}
+      jumpToDate={filter.date}
+      onCopyURL={(id) => getPaymentURL(id).then((resp) => copyToClipboard(resp.data))}
+
+      onCreate={onCreate}
+      onSearchOrderById={testIfOrderExistAndSelect}
+      onSelectDate={setNewDate}
+      onShowAll={() => setFilter({})}
+      onShowPaid={() => setFilter({ paid: 'yes' })}
+      onShowRefunded={() => setFilter({ refunded: 'yes' })}
+      onShowNotWired={() => setFilter({ wired: 'no' })}
+
+    />
+
+    {orderToBeRefunded && <RefundModalForTable
+      id={orderToBeRefunded.order_id}
+      onCancel={() => setOrderToBeRefunded(undefined)}
+      onConfirm={(value) => refundOrder(orderToBeRefunded.order_id, value)
+        .then(() => setNotif({
+          message: i18n`refund created successfully`,
+          type: "SUCCESS"
+        }))
+        .catch((error) => setNotif({
+          message: i18n`could not create the refund`,
+          type: "ERROR",
+          description: error.message
+        }))
+        .then(() => setOrderToBeRefunded(undefined))}
+      onLoadError={(error) => {
+        setNotif({
+          message: i18n`could not create the refund`,
+          type: "ERROR",
+          description: error.message
+        });
+        setOrderToBeRefunded(undefined);
+        return <div />;
+      }}
+      onUnauthorized={onUnauthorized}
+      onNotFound={() => {
+        setNotif({
+          message: i18n`could not get the order to refund`,
+          type: "ERROR",
+          // description: error.message
+        });
+        setOrderToBeRefunded(undefined);
+        return <div />;
+      }} />}
+  </Fragment>
+}
+
+interface RefundProps {
+  id: string;
+  onUnauthorized: () => VNode;
+  onLoadError: (error: HttpError) => VNode;
+  onNotFound: () => VNode;
+  onCancel: () => void;
+  onConfirm: (m: MerchantBackend.Orders.RefundRequest) => void;
+}
+
+function RefundModalForTable({ id, onUnauthorized, onLoadError, onNotFound, onConfirm, onCancel }: RefundProps) {
+  const result = useOrderDetails(id);
+
+  if (result.clientError && result.isUnauthorized) return onUnauthorized()
+  if (result.clientError && result.isNotfound) return onNotFound()
+  if (result.loading) return <Loading />
+  if (!result.ok) return onLoadError(result)
+
+  return <RefundModal
+    order={result.data}
+    onCancel={onCancel}
+    onConfirm={onConfirm}
+  />
+}
+
+async function copyToClipboard(text: string) {
+  return navigator.clipboard.writeText(text)
+}