fix #8358

1 files changed, 59 insertions, 23 deletions

diff --git a/packages/merchant-backoffice-ui/src/Routing.tsx b/packages/merchant-backoffice-ui/src/Routing.tsx
index c30b1912a..06701b513 100644
--- a/packages/merchant-backoffice-ui/src/Routing.tsx
+++ b/packages/merchant-backoffice-ui/src/Routing.tsx
@@ -122,7 +122,7 @@ export enum InstancePaths {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
+const noop = () => { };
 
 export enum AdminPaths {
   list_instances = "/instances",
@@ -130,7 +130,7 @@ export enum AdminPaths {
   update_instance = "/instance/:id/update",
 }
 
-export interface Props {}
+export interface Props { }
 
 export const privatePages = {
   home: urlPattern(/\/home/, () => "#/home"),
@@ -153,11 +153,17 @@ export function Routing(_p: Props): VNode {
     useState<GlobalNotifState>(undefined);
 
   const [error] = useErrorBoundary();
+  const [preference] = usePreference();
+
+  const now = AbsoluteTime.now();
 
   const instance = useInstanceBankAccounts();
   const accounts = !instance.ok ? undefined : instance.data.accounts;
   const shouldWarnAboutMissingBankAccounts =
-    !state.isAdmin && accounts !== undefined && accounts.length < 1;
+    !state.isAdmin && accounts !== undefined && accounts.length < 1 &&
+    (AbsoluteTime.isNever(preference.hideMissingAccountUntil) ||
+      AbsoluteTime.cmp(now, preference.hideMissingAccountUntil) > 1);
+  ;
   const shouldLogin =
     state.status === "loggedOut" || state.status === "expired";
 
@@ -245,14 +251,10 @@ export function Routing(_p: Props): VNode {
     return (
       <Fragment>
         <Menu />
-        <NotificationCard
-          notification={{
-            type: "INFO",
-            message: i18n.str`You need to associate a bank account to receive revenue.`,
-            description: i18n.str`Without this the merchant backend will refuse to create new orders.`,
-          }}
-        />
-        <BankAccountCreatePage onConfirm={() => {}} />
+        <BankAccountBanner />
+        <BankAccountCreatePage onConfirm={() => {
+          route(InstancePaths.bank_list);
+        }} />
       </Fragment>
     );
   }
@@ -682,20 +684,20 @@ function AdminInstanceUpdatePage({
           const notif =
             error.type === ErrorType.TIMEOUT
               ? {
-                  message: i18n.str`The request to the backend take too long and was cancelled`,
-                  description: i18n.str`Diagnostic from ${error.info.url} is '${error.message}'`,
-                  type: "ERROR" as const,
-                }
+                message: i18n.str`The request to the backend take too long and was cancelled`,
+                description: i18n.str`Diagnostic from ${error.info.url} is '${error.message}'`,
+                type: "ERROR" as const,
+              }
               : {
-                  message: i18n.str`The backend reported a problem: HTTP status #${error.status}`,
-                  description: i18n.str`Diagnostic from ${error.info.url} is '${error.message}'`,
-                  details:
-                    error.type === ErrorType.CLIENT ||
+                message: i18n.str`The backend reported a problem: HTTP status #${error.status}`,
+                description: i18n.str`Diagnostic from ${error.info.url} is '${error.message}'`,
+                details:
+                  error.type === ErrorType.CLIENT ||
                     error.type === ErrorType.SERVER
-                      ? error.payload.hint
-                      : undefined,
-                  type: "ERROR" as const,
-                };
+                    ? error.payload.hint
+                    : undefined,
+                type: "ERROR" as const,
+              };
           return (
             <Fragment>
               <NotificationCard notification={notif} />
@@ -722,6 +724,40 @@ function AdminInstanceUpdatePage({
   );
 }
 
+function BankAccountBanner(): VNode {
+  const { i18n } = useTranslationContext();
+
+  const [_, updatePref] = usePreference();
+  const now = AbsoluteTime.now();
+  const oneDay = { d_ms: 1000 * 60 * 60 * 24 };
+  const tomorrow = AbsoluteTime.addDuration(now, oneDay);
+
+  return (
+    <NotificationCard
+      notification={{
+        type: "INFO",
+        message: i18n.str`You need to associate a bank account to receive revenue.`,
+        description: (
+          <div>
+            <p>
+              <i18n.Translate>Without this the merchant backend will refuse to create new orders.</i18n.Translate>
+            </p>
+            <div class="buttons is-right">
+              <button
+                class="button"
+                onClick={() => updatePref("hideMissingAccountUntil", tomorrow)}
+              >
+                <i18n.Translate>Hide for today</i18n.Translate>
+              </button>
+            </div>
+          </div>
+        ),
+      }}
+    />
+  )
+}
+
+
 function KycBanner(): VNode {
   const kycStatus = useInstanceKYCDetails();
   const { i18n } = useTranslationContext();