show advance mode in settings view

3 files changed, 123 insertions, 6 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/settings/index.tsx b/packages/merchant-backoffice-ui/src/paths/settings/index.tsx
index 1d0b4128a..128450553 100644
--- a/packages/merchant-backoffice-ui/src/paths/settings/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/settings/index.tsx
@@ -1,12 +1,74 @@
 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">
-          settings view
+          <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>
diff --git a/packages/merchant-backoffice-ui/src/scss/main.scss b/packages/merchant-backoffice-ui/src/scss/main.scss
index ad698eb26..c4be8aa73 100644
--- a/packages/merchant-backoffice-ui/src/scss/main.scss
+++ b/packages/merchant-backoffice-ui/src/scss/main.scss
@@ -52,6 +52,8 @@ $tooltip-color: red;
 @import "../../node_modules/@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css";
 @import "../../node_modules/bulma-timeline/dist/css/bulma-timeline.min.css";
 
+@import "toggle";
+
 .notification {
   background-color: transparent;
 }
@@ -82,7 +84,7 @@ $tooltip-color: red;
   pointer-events: none;
 }
 
-.toast > .message {
+.toast>.message {
   white-space: pre-wrap;
   opacity: 80%;
 }
@@ -92,6 +94,7 @@ div {
     position: relative;
     pointer-events: none;
     opacity: 0.5;
+
     &:after {
       // @include loader;
       position: absolute;
@@ -104,7 +107,7 @@ div {
   }
 }
 
-input[type="checkbox"]:indeterminate + .check {
+input[type="checkbox"]:indeterminate+.check {
   background: red !important;
 }
 
@@ -125,6 +128,7 @@ input[type="checkbox"]:indeterminate + .check {
 tr:hover .right-sticky {
   background-color: hsl(0, 0%, 80%);
 }
+
 .table.is-striped tbody tr:nth-child(even):hover .right-sticky {
   background-color: hsl(0, 0%, 95%);
 }
@@ -181,11 +185,11 @@ div[data-tooltip]::before {
   position: absolute;
 }
 
-.modal-card-body > p {
+.modal-card-body>p {
   padding: 1em;
 }
 
-.modal-card-body > p.warning {
+.modal-card-body>p.warning {
   background-color: #fffbdd;
   border: solid 1px #f2e9bf;
-}
+}
\ No newline at end of file
diff --git a/packages/merchant-backoffice-ui/src/scss/toggle.scss b/packages/merchant-backoffice-ui/src/scss/toggle.scss
new file mode 100644
index 000000000..24636da2f
--- /dev/null
+++ b/packages/merchant-backoffice-ui/src/scss/toggle.scss
@@ -0,0 +1,51 @@
+$green: #56c080;
+
+.toggle {
+  cursor: pointer;
+  display: inline-block;
+}
+.toggle-switch {
+  display: inline-block;
+  background: #ccc;
+  border-radius: 16px;
+  width: 58px;
+  height: 32px;
+  position: relative;
+  vertical-align: middle;
+  transition: background 0.25s;
+  &:before,
+  &:after {
+    content: "";
+  }
+  &:before {
+    display: block;
+    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+    width: 24px;
+    height: 24px;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    transition: left 0.25s;
+  }
+  .toggle:hover &:before {
+    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
+  }
+  .toggle-checkbox:checked + & {
+    background: $green;
+    &:before {
+      left: 30px;
+    }
+  }
+}
+.toggle-checkbox {
+  position: absolute;
+  visibility: hidden;
+}
+.toggle-label {
+  margin-left: 5px;
+  position: relative;
+  top: 2px;
+}