1 files changed, 77 insertions, 0 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/settings/index.tsx b/packages/merchant-backoffice-ui/src/paths/settings/index.tsx
new file mode 100644
index 000000000..128450553
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/paths/settings/index.tsx
@@ -0,0 +1,77 @@
+import { VNode, h } from "preact";
+import { LangSelector } from "../../components/menu/LangSelector.js";
+import { useLang, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { InputToggle } from "../../components/form/InputToggle.js";
+import { Settings, useSettings } from "../../hooks/useSettings.js";
+import { FormErrors, FormProvider } from "../../components/form/FormProvider.js";
+import { useState } from "preact/hooks";
+
+function getBrowserLang(): string | undefined {
+  if (typeof window === "undefined") return undefined;
+  if (window.navigator.languages) return window.navigator.languages[0];
+  if (window.navigator.language) return window.navigator.language;
+  return undefined;
+}
+
+export function Settings(): VNode {
+  const { i18n } = useTranslationContext()
+  const borwserLang = getBrowserLang()
+  const { update } = useLang()
+
+  const [value, updateValue] = useSettings()
+  const errors: FormErrors<Settings> = {
+  }
+
+  function valueHandler(s: (d: Partial<Settings>) => Partial<Settings>): void {
+    const next = s(value)
+    updateValue("advanceOrderMode", next.advanceOrderMode ?? false)
+  }
+
+  return <div>
+    <section class="section is-main-section">
+      <div class="columns">
+        <div class="column" />
+        <div class="column is-four-fifths">
+          <div class="field is-horizontal">
+            <div class="field-label is-normal">
+              <label class="label" style={{ width: 200 }}>
+                <i18n.Translate>Language</i18n.Translate>
+                <span class="icon has-tooltip-right" data-tooltip={"Force language setting instance of taking the browser"}>
+                  <i class="mdi mdi-information" />
+                </span>
+              </label>
+            </div>
+            <div class="field has-addons">
+              <LangSelector />
+              &nbsp;
+              {borwserLang !== undefined && <button
+                data-tooltip={i18n.str`generate random secret key`}
+                class="button is-info mr-3"
+                onClick={(e) => {
+                  update(borwserLang.substring(0, 2))
+                }}
+              >
+                <i18n.Translate>Set default</i18n.Translate>
+              </button>}
+            </div>
+          </div>
+          <FormProvider<Settings>
+            name="settings"
+            errors={errors}
+            object={value}
+            valueHandler={valueHandler}
+          >
+            <InputToggle<Settings>
+              label={i18n.str`Advance order creation`}
+              tooltip={i18n.str`Shows more options in the order creation form`}
+              name="advanceOrderMode"
+            />
+          </FormProvider>
+
+
+        </div>
+        <div class="column" />
+      </div>
+    </section>
+  </div>
+}
+\ No newline at end of file