fix #7704

1 files changed, 129 insertions, 54 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
index ae3a6e688..62a6c55ff 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
@@ -17,12 +17,15 @@
 import {
   ExchangeListItem,
   ExchangeTosStatus,
+  TranslatedString,
   WalletCoreVersion,
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
-import { Fragment, h, VNode } from "preact";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
+import { Fragment, VNode, h } from "preact";
+import { Pages } from "../NavigationBar.js";
 import { Checkbox } from "../components/Checkbox.js";
-import { JustInDevMode } from "../components/JustInDevMode.js";
+import { EnabledBySettings } from "../components/EnabledBySettings.js";
 import { Part } from "../components/Part.js";
 import { SelectList } from "../components/SelectList.js";
 import {
@@ -35,25 +38,20 @@ import {
 } from "../components/styled/index.js";
 import { useAlertContext } from "../context/alert.js";
 import { useBackendContext } from "../context/backend.js";
-import { useDevContext } from "../context/devContext.js";
-import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import { useSettings } from "../hooks/useSettings.js";
 import { useBackupDeviceName } from "../hooks/useBackupDeviceName.js";
 import { useClipboardPermissions } from "../hooks/useClipboardPermissions.js";
+import { useSettings } from "../hooks/useSettings.js";
 import { ToggleHandler } from "../mui/handlers.js";
-import { Pages } from "../NavigationBar.js";
 import { platform } from "../platform/foreground.js";
+import { Settings } from "../platform/api.js";
 
 const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
 
 export function SettingsPage(): VNode {
   const [settings, updateSettings] = useSettings();
-  const clipboardToggle = useClipboardPermissions();
-  const { devMode, toggle } = useDevContext();
   const { safely } = useAlertContext();
   const { name, update } = useBackupDeviceName();
-  const { pushAlertOnError } = useAlertContext();
   const webex = platform.getWalletWebExVersion();
   const api = useBackendContext();
 
@@ -76,16 +74,24 @@ export function SettingsPage(): VNode {
         value: settings.injectTalerSupport,
         button: {
           onClick: safely("update support injection", async () => {
-            console.log("click", settings.injectTalerSupport);
             updateSettings("injectTalerSupport", !settings.injectTalerSupport);
           }),
         },
       }}
-      clipboardToggle={clipboardToggle}
-      devModeToggle={{
-        value: devMode,
+      advanceToggle={{
+        value: settings.advanceMode,
         button: {
-          onClick: pushAlertOnError(toggle),
+          onClick: safely("update advance mode", async () => {
+            updateSettings("advanceMode", !settings.advanceMode);
+          }),
+        },
+      }}
+      langToggle={{
+        value: settings.langSelector,
+        button: {
+          onClick: safely("update lang selector", async () => {
+            updateSettings("langSelector", !settings.langSelector);
+          }),
         },
       }}
       webexVersion={{
@@ -101,8 +107,8 @@ export interface ViewProps {
   deviceName: string;
   setDeviceName: (s: string) => Promise<void>;
   autoOpenToggle: ToggleHandler;
-  clipboardToggle: ToggleHandler;
-  devModeToggle: ToggleHandler;
+  advanceToggle: ToggleHandler;
+  langToggle: ToggleHandler;
   knownExchanges: Array<ExchangeListItem>;
   coreVersion: WalletCoreVersion | undefined;
   webexVersion: {
@@ -114,8 +120,8 @@ export interface ViewProps {
 export function SettingsView({
   knownExchanges,
   autoOpenToggle,
-  clipboardToggle,
-  devModeToggle,
+  advanceToggle,
+  langToggle,
   coreVersion,
   webexVersion,
 }: ViewProps): VNode {
@@ -204,45 +210,19 @@ export function SettingsView({
           </LinkPrimary>
         </div>
 
-        <JustInDevMode>
-          <SubTitle>
-            <i18n.Translate>Display</i18n.Translate>
-          </SubTitle>
-          <Input>
-            <SelectList
-              label={<i18n.Translate>Current Language</i18n.Translate>}
-              list={supportedLang}
-              name="lang"
-              value={lang}
-              onChange={(v) => changeLanguage(v)}
-            />
-          </Input>
-        </JustInDevMode>
-        <SubTitle>
-          <i18n.Translate>Version</i18n.Translate>
-        </SubTitle>
-        {coreVersion && (
-          <Part
-            title={i18n.str`Wallet Core`}
-            text={
-              <span>
-                {coreVersion.version}{" "}
-                <JustInDevMode>{coreVersion.hash}</JustInDevMode>
-              </span>
-            }
-          />
-        )}
         <Part
           title={i18n.str`Web Extension`}
           text={
             <span>
               {webexVersion.version}{" "}
-              <JustInDevMode>{webexVersion.hash}</JustInDevMode>
+              <EnabledBySettings name="advanceMode">
+                {webexVersion.hash}
+              </EnabledBySettings>
             </span>
           }
         />
         {coreVersion && (
-          <JustInDevMode>
+          <EnabledBySettings name="advanceMode">
             <Part
               title={i18n.str`Exchange compatibility`}
               text={<span>{coreVersion.exchange}</span>}
@@ -255,18 +235,42 @@ export function SettingsView({
               title={i18n.str`Bank compatibility`}
               text={<span>{coreVersion.bank}</span>}
             />
-          </JustInDevMode>
+          </EnabledBySettings>
         )}
         <SubTitle>
-          <i18n.Translate>Troubleshooting</i18n.Translate>
+          <i18n.Translate>Advance mode</i18n.Translate>
         </SubTitle>
         <Checkbox
-          label={i18n.str`Developer mode`}
+          label={i18n.str`Enable advance mode`}
           name="devMode"
-          description={i18n.str`More options and information useful for debugging`}
-          enabled={devModeToggle.value!}
-          onToggle={devModeToggle.button.onClick!}
+          description={i18n.str`Show more information and options in the UI`}
+          enabled={advanceToggle.value!}
+          onToggle={advanceToggle.button.onClick!}
+        />
+        <EnabledBySettings name="advanceMode">
+          <AdvanceSettings />
+        </EnabledBySettings>
+        <Checkbox
+          label={i18n.str`Lang selector`}
+          name="langSelector"
+          description={i18n.str`Allows to manually change the language of the UI. Otherwise it will be automatically selected by your browser configuration.`}
+          enabled={langToggle.value!}
+          onToggle={langToggle.button.onClick!}
         />
+        <EnabledBySettings name="langSelector">
+          <SubTitle>
+            <i18n.Translate>Display</i18n.Translate>
+          </SubTitle>
+          <Input>
+            <SelectList
+              label={<i18n.Translate>Current Language</i18n.Translate>}
+              list={supportedLang}
+              name="lang"
+              value={lang}
+              onChange={(v) => changeLanguage(v)}
+            />
+          </Input>
+        </EnabledBySettings>
         <SubTitle>
           <i18n.Translate>Navigator</i18n.Translate>
         </SubTitle>
@@ -283,6 +287,77 @@ export function SettingsView({
           enabled={autoOpenToggle.value!}
           onToggle={autoOpenToggle.button.onClick!}
         />
+        <SubTitle>
+          <i18n.Translate>Version</i18n.Translate>
+        </SubTitle>
+        {coreVersion && (
+          <Part
+            title={i18n.str`Wallet Core`}
+            text={
+              <span>
+                {coreVersion.version}{" "}
+                <EnabledBySettings name="advanceMode">
+                  {coreVersion.hash}
+                </EnabledBySettings>
+              </span>
+            }
+          />
+        )}
+      </section>
+    </Fragment>
+  );
+}
+
+type Info = { label: TranslatedString; description: TranslatedString };
+type Options = {
+  [k in keyof Settings]?: Info;
+};
+function AdvanceSettings(): VNode {
+  const [settings, updateSettings] = useSettings();
+  const { i18n } = useTranslationContext();
+  const o: Options = {
+    backup: {
+      label: i18n.str`Show backup feature`,
+      description: i18n.str`Backup integration still in beta.`,
+    },
+    deleteActiveTransactions: {
+      label: i18n.str`Show delete active transaction`,
+      description: i18n.str`Deleting active transaction is not safe and you may loose your coins.`,
+    },
+    extendedAccountTypes: {
+      label: i18n.str`Show more account types on deposit`,
+      description: i18n.str`Extends the UI to more payment target types.`,
+    },
+    showJsonOnError: {
+      label: i18n.str`Show JSON on error`,
+      description: i18n.str`Print more information about the error. Useful for debugging.`,
+    },
+    walletAllowHttp: {
+      label: i18n.str`Allow HTTP connections`,
+      description: i18n.str`Using HTTP connection may be faster but unsafe (wallet restart required)`,
+    },
+    walletBatchWithdrawal: {
+      label: i18n.str`Allow batch withdrawals`,
+      description: i18n.str`Using the batch withdrawal API allows faster withdrawals (wallet restart required)`,
+    },
+  };
+  return (
+    <Fragment>
+      <section>
+        {Object.entries(o).map(([name, { label, description }]) => {
+          const settingsName = name as keyof Settings;
+          return (
+            <Checkbox
+              label={label}
+              name={name}
+              description={description}
+              enabled={settings[settingsName]}
+              onToggle={async () => {
+                updateSettings(settingsName, !settings[settingsName]);
+              }}
+            />
+          );
+        })}
       </section>
     </Fragment>
   );