backoffcie new version, lot of changes

1 files changed, 36 insertions, 6 deletions

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
index 37770d273..c29a6fa6e 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx
@@ -26,19 +26,24 @@ import { useState } from "preact/hooks";
 import { DatePicker } from "../../../../components/picker/DatePicker.js";
 import { MerchantBackend, WithId } from "../../../../declaration.js";
 import { CardTable } from "./Table.js";
+import { dateFormatForSettings, useSettings } from "../../../../hooks/useSettings.js";
 
 export interface ListPageProps {
   errorOrderId: string | undefined;
 
   onShowAll: () => void;
+  onShowNotPaid: () => void;
   onShowPaid: () => void;
   onShowRefunded: () => void;
   onShowNotWired: () => void;
+  onShowWired: () => void;
   onCopyURL: (id: string) => void;
   isAllActive: string;
   isPaidActive: string;
+  isNotPaidActive: string;
   isRefundedActive: string;
   isNotWiredActive: string;
+  isWiredActive: string;
 
   jumpToDate?: Date;
   onSelectDate: (date?: Date) => void;
@@ -66,18 +71,23 @@ export function ListPage({
   onCopyURL,
   onShowAll,
   onShowPaid,
+  onShowNotPaid,
   onShowRefunded,
   onShowNotWired,
+  onShowWired,
   onSelectDate,
   isPaidActive,
   isRefundedActive,
   isNotWiredActive,
   onCreate,
+  isNotPaidActive,
+  isWiredActive,
 }: ListPageProps): VNode {
   const { i18n } = useTranslationContext();
   const dateTooltip = i18n.str`select date to show nearby orders`;
   const [pickDate, setPickDate] = useState(false);
   const [orderId, setOrderId] = useState<string>("");
+  const [settings] = useSettings();
 
   return (
     <section class="section is-main-section">
@@ -116,13 +126,13 @@ export function ListPage({
         <div class="column is-two-thirds">
           <div class="tabs" style={{ overflow: "inherit" }}>
             <ul>
-              <li class={isAllActive}>
+              <li class={isNotPaidActive}>
                 <div
                   class="has-tooltip-right"
-                  data-tooltip={i18n.str`remove all filters`}
+                  data-tooltip={i18n.str`only show paid orders`}
                 >
-                  <a onClick={onShowAll}>
-                    <i18n.Translate>All</i18n.Translate>
+                  <a onClick={onShowNotPaid}>
+                    <i18n.Translate>New</i18n.Translate>
                   </a>
                 </div>
               </li>
@@ -156,6 +166,26 @@ export function ListPage({
                   </a>
                 </div>
               </li>
+              <li class={isWiredActive}>
+                <div
+                  class="has-tooltip-left"
+                  data-tooltip={i18n.str`only show orders where customers paid, but wire payments from payment provider are still pending`}
+                >
+                  <a onClick={onShowWired}>
+                    <i18n.Translate>Completed</i18n.Translate>
+                  </a>
+                </div>
+              </li>
+              <li class={isAllActive}>
+                <div
+                  class="has-tooltip-right"
+                  data-tooltip={i18n.str`remove all filters`}
+                >
+                  <a onClick={onShowAll}>
+                    <i18n.Translate>All</i18n.Translate>
+                  </a>
+                </div>
+              </li>
             </ul>
           </div>
         </div>
@@ -180,8 +210,8 @@ export function ListPage({
                     class="input"
                     type="text"
                     readonly
-                    value={!jumpToDate ? "" : format(jumpToDate, "yyyy/MM/dd")}
-                    placeholder={i18n.str`date (YYYY/MM/DD)`}
+                    value={!jumpToDate ? "" : format(jumpToDate, dateFormatForSettings(settings))}
+                    placeholder={i18n.str`date (${dateFormatForSettings(settings)})`}
                     onClick={() => {
                       setPickDate(true);
                     }}