1 files changed, 65 insertions, 38 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/settings/index.tsx b/packages/merchant-backoffice-ui/src/paths/settings/index.tsx
index 128450553..0d514f2df 100644
--- a/packages/merchant-backoffice-ui/src/paths/settings/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/settings/index.tsx
@@ -1,10 +1,10 @@
-import { VNode, h } from "preact";
-import { LangSelector } from "../../components/menu/LangSelector.js";
 import { useLang, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { VNode, h } from "preact";
+import { FormErrors, FormProvider } from "../../components/form/FormProvider.js";
+import { InputSelector } from "../../components/form/InputSelector.js";
 import { InputToggle } from "../../components/form/InputToggle.js";
+import { LangSelector } from "../../components/menu/LangSelector.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;
@@ -24,7 +24,11 @@ export function Settings(): VNode {
 
   function valueHandler(s: (d: Partial<Settings>) => Partial<Settings>): void {
     const next = s(value)
-    updateValue("advanceOrderMode", next.advanceOrderMode ?? false)
+    const v: Settings = {
+      advanceOrderMode: next.advanceOrderMode ?? false,
+      dateFormat: next.dateFormat ?? "ymd"
+    }
+    updateValue(v)
   }
 
   return <div>
@@ -32,41 +36,64 @@ export function Settings(): VNode {
       <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))
+          <div>
+
+            <FormProvider<Settings>
+              name="settings"
+              errors={errors}
+              object={value}
+              valueHandler={valueHandler}
+            >
+              <div class="field is-horizontal">
+                <div class="field-label is-normal">
+                  <label class="label">
+                    <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 field-body has-addons is-flex-grow-3">
+                  <LangSelector />
+                  &nbsp;
+                  {borwserLang !== undefined && <button
+                    data-tooltip={i18n.str`generate random secret key`}
+                    class="button is-info mr-2"
+                    onClick={(e) => {
+                      update(borwserLang.substring(0, 2))
+                    }}
+                  >
+                    <i18n.Translate>Set default</i18n.Translate>
+                  </button>}
+                </div>
+              </div>
+              <InputToggle<Settings>
+                label={i18n.str`Advance order creation`}
+                tooltip={i18n.str`Shows more options in the order creation form`}
+                name="advanceOrderMode"
+              />
+              <InputSelector<Settings>
+                name="dateFormat"
+                label={i18n.str`Date format`}
+                expand={true}
+                help={
+                  value.dateFormat === "dmy" ? "31/12/2001" : value.dateFormat === "mdy" ? "12/31/2001" : value.dateFormat === "ymd" ? "2001/12/31" : ""
+                }
+                toStr={(e) => {
+                  if (e === "ymd") return "year month day"
+                  if (e === "mdy") return "month day year"
+                  if (e === "dmy") return "day month year"
+                  return "choose one"
                 }}
-              >
-                <i18n.Translate>Set default</i18n.Translate>
-              </button>}
-            </div>
+                values={[
+                  "ymd",
+                  "mdy",
+                  "dmy",
+                ]}
+                tooltip={i18n.str`how the date is going to be displayed`}
+              />
+            </FormProvider>
           </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>