Merge pull request #8142 from sagemathinc/topbar-balance-onprem

frontend/topBar/balance: hide for non-commercial and style it uniformly like the others
sagemathinc · Jan 24, 2025 · f6ab7c7 · f6ab7c7
2 parents 6ef6835 + 90edac3
commit f6ab7c7
Show file tree

Hide file tree

Showing 21 changed files with 104 additions and 31 deletions.
diff --git a/src/packages/frontend/app/nav-tab.tsx b/src/packages/frontend/app/nav-tab.tsx
@@ -51,7 +51,7 @@ export const NavTab: React.FC<Props> = React.memo((props: Props) => {
     if (!hide_label && label != null) {
       return (
         <span
-          style={{ marginLeft: "5px" }}
+          style={icon != null ? { marginLeft: "5px" } : undefined}
           className={label_class}
           cocalc-test={name}
         >

diff --git a/src/packages/frontend/app/page.tsx b/src/packages/frontend/app/page.tsx
@@ -27,6 +27,7 @@ import { SiteName } from "@cocalc/frontend/customize";
 import { FileUsePage } from "@cocalc/frontend/file-use/page";
 import { labels } from "@cocalc/frontend/i18n";
 import { ProjectsNav } from "@cocalc/frontend/projects/projects-nav";
+import BalanceButton from "@cocalc/frontend/purchases/balance-button";
 import PayAsYouGoModal from "@cocalc/frontend/purchases/pay-as-you-go/modal";
 import openSupportTab from "@cocalc/frontend/support/open";
 import { COLORS } from "@cocalc/util/theme";
@@ -44,7 +45,6 @@ import { NavTab } from "./nav-tab";
 import { Notification } from "./notifications";
 import PopconfirmModal from "./popconfirm-modal";
 import SettingsModal from "./settings-modal";
-import BalanceButton from "@cocalc/frontend/purchases/balance-button";
 import { HIDE_LABEL_THRESHOLD, NAV_CLASS } from "./top-nav-consts";
 import { useShowVerifyEmail, VerifyEmail } from "./verify-email-banner";
 import { CookieWarning, LocalStorageWarning, VersionWarning } from "./warnings";
@@ -181,6 +181,11 @@ export const Page: React.FC = () => {
     );
   }
 
+  function render_balance() {
+    if (!is_commercial) return;
+    return <BalanceButton minimal topBar />;
+  }
+
   function render_admin_tab(): JSX.Element | undefined {
     if (is_logged_in && groups?.includes("admin")) {
       return (
@@ -294,8 +299,8 @@ export const Page: React.FC = () => {
         {render_admin_tab()}
         {render_sign_in_tab()}
         {render_support()}
-        {is_logged_in && render_account_tab()}
-        <BalanceButton minimal />
+        {is_logged_in ? render_account_tab() : undefined}
+        {render_balance()}
         {render_notification()}
         {render_bell()}
         {!is_anonymous && (

diff --git a/src/packages/frontend/app/top-nav-consts.ts b/src/packages/frontend/app/top-nav-consts.ts
@@ -14,7 +14,7 @@ export const HIDE_LABEL_THRESHOLD = 6;
 // the width of the top bar
 export const NAV_HEIGHT_PX = 36;
 
-// … and on narrower screens, a bit tigher
+// … and on narrower screens, a bit tighter
 export const NAV_HEIGHT_NARROW_PX = 28;
 
 export const NAV_CLASS = "hidden-xs";

diff --git a/src/packages/frontend/i18n/common.ts b/src/packages/frontend/i18n/common.ts
@@ -847,6 +847,11 @@ export const labels = defineMessages({
     defaultMessage: "{n} of {m}",
     description: "item n in a list of m items.",
   },
+  balance: {
+    id: "labels.balance",
+    defaultMessage: "Balance",
+    description: "Short label for a monetary balance on an account",
+  },
 });
 
 export const menu = defineMessages({

diff --git a/src/packages/frontend/i18n/trans/ar_EG.json b/src/packages/frontend/i18n/trans/ar_EG.json
@@ -878,6 +878,7 @@
   "labels.always_running": "دائمًا يعمل",
   "labels.assistant": "مساعد",
   "labels.back": "رجوع",
+  "labels.balance": "الرصيد",
   "labels.button.cancel": "إلغاء",
   "labels.buttons": "الأزرار",
   "labels.change": "تغيير",

diff --git a/src/packages/frontend/i18n/trans/de_DE.json b/src/packages/frontend/i18n/trans/de_DE.json
@@ -878,6 +878,7 @@
   "labels.always_running": "Immer aktiv",
   "labels.assistant": "Assistent",
   "labels.back": "Zurück",
+  "labels.balance": "Guthaben",
   "labels.button.cancel": "Abbrechen",
   "labels.buttons": "Schaltflächen",
   "labels.change": "Ändern",

diff --git a/src/packages/frontend/i18n/trans/es_ES.json b/src/packages/frontend/i18n/trans/es_ES.json
@@ -878,6 +878,7 @@
   "labels.always_running": "Siempre en ejecución",
   "labels.assistant": "Asistente",
   "labels.back": "Atrás",
+  "labels.balance": "Saldo",
   "labels.button.cancel": "Cancelar",
   "labels.buttons": "Botones",
   "labels.change": "Cambiar",

diff --git a/src/packages/frontend/i18n/trans/fr_FR.json b/src/packages/frontend/i18n/trans/fr_FR.json
@@ -878,6 +878,7 @@
   "labels.always_running": "Toujours en cours d'exécution",
   "labels.assistant": "Assistant",
   "labels.back": "Retour",
+  "labels.balance": "Solde",
   "labels.button.cancel": "Annuler",
   "labels.buttons": "Boutons",
   "labels.change": "Changer",

diff --git a/src/packages/frontend/i18n/trans/he_IL.json b/src/packages/frontend/i18n/trans/he_IL.json
@@ -878,6 +878,7 @@
   "labels.always_running": "תמיד פועל",
   "labels.assistant": "עוזר",
   "labels.back": "חזרה",
+  "labels.balance": "יתרה",
   "labels.button.cancel": "ביטול",
   "labels.buttons": "כפתורים",
   "labels.change": "שנה",

diff --git a/src/packages/frontend/i18n/trans/hi_IN.json b/src/packages/frontend/i18n/trans/hi_IN.json
@@ -878,6 +878,7 @@
   "labels.always_running": "हमेशा चल रहा है",
   "labels.assistant": "सहायक",
   "labels.back": "वापस",
+  "labels.balance": "शेष",
   "labels.button.cancel": "रद्द करें",
   "labels.buttons": "बटन",
   "labels.change": "बदलें",

diff --git a/src/packages/frontend/i18n/trans/hu_HU.json b/src/packages/frontend/i18n/trans/hu_HU.json
@@ -878,6 +878,7 @@
   "labels.always_running": "Mindig fut",
   "labels.assistant": "Asszisztens",
   "labels.back": "Vissza",
+  "labels.balance": "Egyenleg",
   "labels.button.cancel": "Mégse",
   "labels.buttons": "Gombok",
   "labels.change": "Módosítás",

diff --git a/src/packages/frontend/i18n/trans/it_IT.json b/src/packages/frontend/i18n/trans/it_IT.json
@@ -878,6 +878,7 @@
   "labels.always_running": "Sempre in esecuzione",
   "labels.assistant": "Assistente",
   "labels.back": "Indietro",
+  "labels.balance": "Saldo",
   "labels.button.cancel": "Annulla",
   "labels.buttons": "Bottoni",
   "labels.change": "Cambia",

diff --git a/src/packages/frontend/i18n/trans/ja_JP.json b/src/packages/frontend/i18n/trans/ja_JP.json
@@ -878,6 +878,7 @@
   "labels.always_running": "常に実行中",
   "labels.assistant": "アシスタント",
   "labels.back": "戻る",
+  "labels.balance": "残高",
   "labels.button.cancel": "キャンセル",
   "labels.buttons": "ボタン",
   "labels.change": "変更",

diff --git a/src/packages/frontend/i18n/trans/ko_KR.json b/src/packages/frontend/i18n/trans/ko_KR.json
@@ -878,6 +878,7 @@
   "labels.always_running": "항상 실행 중",
   "labels.assistant": "어시스턴트",
   "labels.back": "뒤로",
+  "labels.balance": "잔액",
   "labels.button.cancel": "취소",
   "labels.buttons": "버튼들",
   "labels.change": "변경",

diff --git a/src/packages/frontend/i18n/trans/nl_NL.json b/src/packages/frontend/i18n/trans/nl_NL.json
@@ -878,6 +878,7 @@
   "labels.always_running": "Altijd Actief",
   "labels.assistant": "Assistent",
   "labels.back": "Terug",
+  "labels.balance": "Balans",
   "labels.button.cancel": "Annuleren",
   "labels.buttons": "Knoppen",
   "labels.change": "Wijzigen",

diff --git a/src/packages/frontend/i18n/trans/pl_PL.json b/src/packages/frontend/i18n/trans/pl_PL.json
@@ -878,6 +878,7 @@
   "labels.always_running": "Zawsze Uruchomione",
   "labels.assistant": "Asystent",
   "labels.back": "Wstecz",
+  "labels.balance": "Saldo",
   "labels.button.cancel": "Anuluj",
   "labels.buttons": "Przyciski",
   "labels.change": "Zmień",

diff --git a/src/packages/frontend/i18n/trans/pt_PT.json b/src/packages/frontend/i18n/trans/pt_PT.json
@@ -878,6 +878,7 @@
   "labels.always_running": "Sempre em Execução",
   "labels.assistant": "Assistente",
   "labels.back": "Voltar",
+  "labels.balance": "Saldo",
   "labels.button.cancel": "Cancelar",
   "labels.buttons": "Botões",
   "labels.change": "Alterar",

diff --git a/src/packages/frontend/i18n/trans/ru_RU.json b/src/packages/frontend/i18n/trans/ru_RU.json
@@ -878,6 +878,7 @@
   "labels.always_running": "Всегда работает",
   "labels.assistant": "Помощник",
   "labels.back": "Назад",
+  "labels.balance": "Баланс",
   "labels.button.cancel": "Отмена",
   "labels.buttons": "Кнопки",
   "labels.change": "Изменить",

diff --git a/src/packages/frontend/i18n/trans/tr_TR.json b/src/packages/frontend/i18n/trans/tr_TR.json
@@ -878,6 +878,7 @@
   "labels.always_running": "Her Zaman Çalışıyor",
   "labels.assistant": "Yardımcı",
   "labels.back": "Geri",
+  "labels.balance": "Bakiye",
   "labels.button.cancel": "İptal",
   "labels.buttons": "Düğmeler",
   "labels.change": "Değiştir",

diff --git a/src/packages/frontend/i18n/trans/zh_CN.json b/src/packages/frontend/i18n/trans/zh_CN.json
@@ -878,6 +878,7 @@
   "labels.always_running": "始终运行",
   "labels.assistant": "助手",
   "labels.back": "返回",
+  "labels.balance": "余额",
   "labels.button.cancel": "取消",
   "labels.buttons": "按钮",
   "labels.change": "更改",

diff --git a/src/packages/frontend/purchases/balance-button.tsx b/src/packages/frontend/purchases/balance-button.tsx
@@ -1,20 +1,28 @@
 import { Badge, Button, Spin } from "antd";
 import { useEffect, useState } from "react";
-import { getBalance as getBalanceUsingApi } from "./api";
-import { currency, round2down } from "@cocalc/util/misc";
-import { useTypedRedux } from "@cocalc/frontend/app-framework";
+import { useIntl } from "react-intl";
+
+import { CSS, useTypedRedux } from "@cocalc/frontend/app-framework";
+import { NavTab } from "@cocalc/frontend/app/nav-tab";
+import { NAV_CLASS } from "@cocalc/frontend/app/top-nav-consts";
+import { labels } from "@cocalc/frontend/i18n";
 import BalanceModal from "@cocalc/frontend/purchases/balance-modal";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
+import { currency, round2down } from "@cocalc/util/misc";
+import { getBalance as getBalanceUsingApi } from "./api";
 
 export default function BalanceButton({
   style,
   onRefresh,
   minimal = false,
+  topBar = false,
 }: {
   style?;
   onRefresh?: () => void;
   minimal?: boolean;
+  topBar?: boolean;
 }) {
+  const intl = useIntl();
   const [open, setOpen] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(true);
   const dbBalance = useTypedRedux("account", "balance");
@@ -50,39 +58,78 @@ export default function BalanceButton({
     handleRefresh();
   }, []);
 
-  return (
-    <>
-      <Button
-        size={minimal ? "small" : undefined}
-        type={"text"}
-        style={{
-          ...style,
-          ...(balanceAlert
-            ? { backgroundColor: "red", color: "white", marginRight: "5px" }
-            : undefined),
-        }}
-        onClick={() => {
-          handleRefresh();
-          setOpen(!open);
-        }}
-      >
-        {!minimal && <>Balance: </>}
+  function onClick() {
+    handleRefresh();
+    setOpen(!open);
+  }
+
+  function renderLabel() {
+    return (
+      <>
+        {!minimal && <>{intl.formatMessage(labels.balance)}: </>}
         {balance != null ? currency(round2down(balance)) : undefined}
         {balanceAlert && (
           <Badge
             count={1}
             size="small"
-            style={{ backgroundColor: "#688ff1" }}
+            style={{ backgroundColor: "#688ff1", marginLeft: "5px" }}
           />
         )}
         {!minimal && loading && <Spin style={{ marginLeft: "5px" }} />}
+      </>
+    );
+  }
+
+  const displayStyle: CSS = {
+    ...style,
+    ...(balanceAlert
+      ? { backgroundColor: "red", color: "white", marginRight: "5px" }
+      : undefined),
+  };
+
+  function renderButton() {
+    return (
+      <Button
+        size={minimal ? "small" : undefined}
+        type={"text"}
+        style={displayStyle}
+        onClick={onClick}
+      >
+        {renderLabel()}
       </Button>
-      {open && (
-        <BalanceModal
-          onRefresh={handleRefresh}
-          onClose={() => setOpen(false)}
+    );
+  }
+
+  function renderDisplay() {
+    if (topBar) {
+      return (
+        <NavTab
+          name={undefined} // never opens a tab
+          active_top_tab={"balance"} // never active
+          label={renderLabel()}
+          label_class={NAV_CLASS}
+          on_click={onClick}
+          hide_label={false}
+          add_inner_style={displayStyle}
         />
-      )}
+      );
+    } else {
+      return renderButton();
+    }
+  }
+
+  function renderModal() {
+    if (!open) return;
+
+    return (
+      <BalanceModal onRefresh={handleRefresh} onClose={() => setOpen(false)} />
+    );
+  }
+
+  return (
+    <>
+      {renderDisplay()}
+      {renderModal()}
     </>
   );
 }