bookings countdown: internalionalise date debug elements

eisbuk · Mar 21, 2024 · b34c897 · b34c897
1 parent 4c3cd69
commit b34c897
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 31 deletions.
diff --git a/packages/translations/src/dict/en.json b/packages/translations/src/dict/en.json
@@ -434,5 +434,11 @@
   "Forms": {
     "ShowPassword": "show password",
     "HidePassword": "hide password"
+  },
+
+  "Debug": {
+    "SystemDate": "System date",
+    "ExtendedBookingDate": "Extended booking date",
+    "DebugOnlyMessage": "This area is for debug only. The changes made here will not be saved."
   }
 }
diff --git a/packages/translations/src/dict/it.json b/packages/translations/src/dict/it.json
@@ -437,5 +437,11 @@
   "Forms": {
     "ShowPassword": "Mostra password",
     "HidePassword": "Nascondi password"
+  },
+
+  "Debug": {
+    "SystemDate": "System date",
+    "ExtendedBookingDate": "Extended booking date",
+    "DebugOnlyMessage": "This area is for debug only. The changes made here will not be saved."
   }
 }
diff --git a/packages/translations/src/translations.ts b/packages/translations/src/translations.ts
@@ -471,3 +471,9 @@ export enum Forms {
   HidePassword = "Forms.HidePassword",
 }
 // #endregion forms
+
+export enum Debug {
+  SystemDate = "Debug.SystemDate",
+  ExtendedBookingDate = "Debug.ExtendedBookingDate",
+  DebugOnlyMessage = "Debug.DebugOnlyMessage",
+}
diff --git a/packages/ui/src/BookingDateDebugDialog/BookingDateDebugDialog.tsx b/packages/ui/src/BookingDateDebugDialog/BookingDateDebugDialog.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 
+import { Debug, useTranslation } from "@eisbuk/translations";
+
 import { DateNavigation } from "../CalendarNav";
 
 type DateFieldProps = {
@@ -14,37 +16,50 @@ type Props = {
   extendedDate: DateFieldProps;
 };
 
-const DateDebug: React.FC<Props> = ({ systemDate, extendedDate }) => (
-  <div className="flex items-center justify-between flex-wrap gap-4 rounded-lg p-4 border-2 border-gray-300">
-    <div className="flex items-center gap-4">
-      <span className="text-base font-semibold">System date:</span>
-      <DateNavigation
-        className="w-full md:w-[320px] border-gray-300 border-2 rounded"
-        onPrev={systemDate.navigate(-1)}
-        onNext={systemDate.navigate(1)}
-      >
-        <input
-          className="h-full w-full border-none text-center"
-          value={systemDate.value}
-          onChange={(e) => systemDate.onChange(e.target.value)}
-        />
-      </DateNavigation>
-    </div>
+const DateDebug: React.FC<Props> = ({ systemDate, extendedDate }) => {
+  const { t } = useTranslation();
 
-    <div className="flex items-center gap-4">
-      <span className="text-base font-semibold">Extended booking date:</span>
-      <DateNavigation
-        className="w-full md:w-[320px] border-gray-300 border-2 rounded"
-        onPrev={extendedDate.navigate(-1)}
-        onNext={extendedDate.navigate(1)}
-      >
-        <input
-          className="h-full w-full border-none text-center"
-          value={extendedDate.value}
-          onChange={(e) => extendedDate.onChange(e.target.value)}
-        />
-      </DateNavigation>
+  return (
+    <div className="rounded-lg border-2 border-gray-300 px-4 py-2">
+      <div className="flex items-center justify-between flex-wrap gap-4">
+        <div className="flex items-center gap-4">
+          <span className="text-base font-semibold">
+            {t(Debug.SystemDate)}:
+          </span>
+          <DateNavigation
+            className="w-full md:w-[320px] border-gray-300 border-2 rounded"
+            onPrev={systemDate.navigate(-1)}
+            onNext={systemDate.navigate(1)}
+          >
+            <input
+              className="h-full w-full border-none text-center"
+              value={systemDate.value}
+              onChange={(e) => systemDate.onChange(e.target.value)}
+            />
+          </DateNavigation>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <span className="text-base font-semibold">
+            {t(Debug.ExtendedBookingDate)}:
+          </span>
+          <DateNavigation
+            className="w-full md:w-[320px] border-gray-300 border-2 rounded"
+            onPrev={extendedDate.navigate(-1)}
+            onNext={extendedDate.navigate(1)}
+          >
+            <input
+              className="h-full w-full border-none text-center"
+              value={extendedDate.value}
+              onChange={(e) => extendedDate.onChange(e.target.value)}
+            />
+          </DateNavigation>
+        </div>
+      </div>
+      <p className="mt-4 w-full text-center font-bold italic">
+        {t(Debug.DebugOnlyMessage)}
+      </p>
     </div>
-  </div>
-);
+  );
+};
 export default DateDebug;