hours and minutes to one input for duration

public/locales/de/translation.json

@@ -16,8 +16,12 @@
       "add": "Hinzufügen"
     },
     "unit": {
+      "hours": "Stunden",
+      "hour": "Stunde",
       "minutes": "Minuten",
-      "days": "Tage"
+      "minute": "Minute",
+      "days": "Tage",
+      "separator": "und"
     },
     "failed": "Fehlgeschlagen",
     "action": "Aktion",
@@ -104,10 +108,7 @@
     "serviceActivityPrice": "Preis der Tätigkeit",
     "serviceActivityPricePlaceholder": "Geben Sie den Preis der Tätigkeit ein",
     "serviceActivityPriceUnit": "€",
-    "serviceActivityDurationHours": "Dauer der Tätigkeit (Stunden)",
+    "serviceActivityDurationMinutes": "Dauer der Tätigkeit",
-    "serviceActivityDurationHoursPlaceholder": "Geben Sie die Dauer der Tätigkeit in Stunden ein",
-    "serviceActivityDurationHoursUnit": "Stunden",
-    "serviceActivityDurationMinutes": "Dauer der Tätigkeit (Minuten)",
     "serviceActivityDurationMinutesPlaceholder": "Geben Sie die Dauer der Tätigkeit in Minuten ein",
     "serviceActivityDurationMinutesUnit": "Minuten",
     "serviceActivityResponsible": "Verantwortliche Mitarbeiter",

public/locales/en/translation.json

@@ -16,8 +16,12 @@
       "add": "Add"
     },
     "unit": {
-      "minutes": "Minutes",
+      "hours": "hours",
-      "days": "Days"
+      "hour": "hour",
+      "minutes": "minutes",
+      "minute": "minute",
+      "days": "Days",
+      "separator": "and"
     },
     "failed": "Failed",
     "action": "Action",
@@ -107,9 +111,6 @@
     "serviceActivityPrice": "Price of the activity",
     "serviceActivityPricePlaceholder": "Enter the price of the activity",
     "serviceActivityPriceUnit": "€",
-    "serviceActivityDurationHours": "Duration of activity (hours)",
-    "serviceActivityDurationHoursPlaceholder": "Enter the duration of the activity in hours",
-    "serviceActivityDurationHoursUnit": "Hours",
     "serviceActivityDurationMinutes": "Duration of activity (minutes)",
     "serviceActivityDurationMinutesPlaceholder": "Enter the duration of the activity in minutes",
     "serviceActivityDurationMinutesUnit": "Minutes",

src/Pages/Store/Services/index.js

@@ -351,7 +351,12 @@ function Service({
                         >
                           <p>{activity.description}</p>
                           <p>Preis: {activity.price} €</p>
-                          <p>Dauer: {activity.duration} Minuten</p>
+                          <p>
+                            Dauer: {activity.duration} Minuten{" "}
+                            <Typography.Text type="secondary">
+                              {durationToHoursAndMinutes(t, activity.duration)}
+                            </Typography.Text>
+                          </p>
                         </Card>
                       );
                     })
@@ -366,6 +371,37 @@ function Service({
   );
 }
 
+function durationToHoursAndMinutes(t, duration) {
+  const MINUTES_IN_HOUR = 60;
+  const singularHourText = t("common.unit.hour");
+  const pluralHourText = t("common.unit.hours");
+  const singularMinuteText = t("common.unit.minute");
+  const pluralMinuteText = t("common.unit.minutes");
+
+  const hours = Math.floor(duration / MINUTES_IN_HOUR);
+  const minutes = duration % MINUTES_IN_HOUR;
+
+  if (hours === 0 && minutes < 61) {
+    return "";
+  }
+
+  let response = "";
+
+  if (hours === 0) {
+    response = `${minutes} ${
+      minutes === 1 ? singularMinuteText : pluralMinuteText
+    }`;
+  } else if (minutes === 0) {
+    response = `${hours} ${hours === 1 ? singularHourText : pluralHourText}`;
+  } else {
+    response = `${hours} ${hours === 1 ? singularHourText : pluralHourText} ${t(
+      "common.unit.separator"
+    )} ${minutes} ${minutes === 1 ? singularMinuteText : pluralMinuteText}`;
+  }
+
+  return `(${response})`;
+}
+
 // this modal is used to create and edit services
 function ModalAddEditService({
   storeId,
@@ -550,11 +586,9 @@ function ModalAddEditServiceActivity({
         serviceActivityDescription:
           addEditServiceActivityModalOptions.activity.description,
         serviceActivityPrice: addEditServiceActivityModalOptions.activity.price,
-        serviceActivityDurationHours: Math.floor(
+
-          addEditServiceActivityModalOptions.activity.duration / 60
-        ),
         serviceActivityDurationMinutes:
-          addEditServiceActivityModalOptions.activity.duration % 60,
+          addEditServiceActivityModalOptions.activity.duration,
       });
 
       setSelectedEmployeesRowKeys(
@@ -600,9 +634,7 @@ function ModalAddEditServiceActivity({
                     name: values.serviceActivityName,
                     description: values.serviceActivityDescription,
                     price: values.serviceActivityPrice,
-                    duration:
+                    duration: values.serviceActivityDurationMinutes,
-                      values.serviceActivityDurationHours * 60 +
-                      values.serviceActivityDurationMinutes,
                     userIds:
                       selectedEmployeesRowKeys.length === users.length
                         ? []
@@ -637,14 +669,11 @@ function ModalAddEditServiceActivity({
               const formServiceActivityPrice = form.getFieldValue(
                 "serviceActivityPrice"
               );
-              const formServiceActivityDurationHours = form.getFieldValue(
-                "serviceActivityDurationHours"
-              );
               const formServiceActivityDurationMinutes = form.getFieldValue(
                 "serviceActivityDurationMinutes"
               );
 
-              // if the service name didn't change, don't send a request
+              // if the service didn't change, don't send a request
               if (
                 addEditServiceActivityModalOptions.activity.name ===
                   formServiceActivityName &&
@@ -653,7 +682,6 @@ function ModalAddEditServiceActivity({
                 addEditServiceActivityModalOptions.activity.price ===
                   formServiceActivityPrice &&
                 addEditServiceActivityModalOptions.activity.duration ===
-                  formServiceActivityDurationHours * 60 +
                   formServiceActivityDurationMinutes &&
                 (selectedEmployeesRowKeys.length === users.length ||
                   addEditServiceActivityModalOptions.activity
@@ -694,15 +722,12 @@ function ModalAddEditServiceActivity({
                 body.price = formServiceActivityPrice;
               }
 
-              let formDuration =
+              let formDuration = formServiceActivityDurationMinutes;
-                formServiceActivityDurationHours * 60 +
-                formServiceActivityDurationMinutes;
 
               if (
                 formDuration !==
                 addEditServiceActivityModalOptions.activity.duration
               ) {
-                validateFields.push("serviceActivityDurationHours");
                 validateFields.push("serviceActivityDurationMinutes");
                 body.duration = formDuration;
               }
@@ -740,8 +765,6 @@ function ModalAddEditServiceActivity({
 
         <ServiceActivityPriceFormInput formItemName="serviceActivityPrice" />
 
-        <ServiceActivityDurationHoursFormInput formItemName="serviceActivityDurationHours" />
-
         <ServiceActivityDurationMinutesFormInput formItemName="serviceActivityDurationMinutes" />
 
         <Space direction="vertical" style={{ width: "100%" }}>
@@ -870,7 +893,7 @@ function ServiceActivityPriceFormInput({ formItemName }) {
     />
   );
 }
-
+/*
 function ServiceActivityDurationHoursFormInput({
   formItemName,
   setIsInputValid,
@@ -897,7 +920,7 @@ function ServiceActivityDurationHoursFormInput({
     />
   );
 }
-
+*/
 function ServiceActivityDurationMinutesFormInput({
   formItemName,
   setIsInputValid,

src/utils.js

@@ -70,14 +70,12 @@ export const Constants = {
     MAX_STORE_SERVICE_ACTIVITY_DESCRIPTION_LENGTH: 1024,
     MIN_STORE_SERVICE_ACTIVITY_PRICE: 0,
     MAX_STORE_SERVICE_ACTIVITY_PRICE: 10000000,
-    MIN_STORE_SERVICE_ACTIVITY_DURATION_HOURS: 0,
-    MAX_STORE_SERVICE_ACTIVITY_DURATION_HOURS: 23,
     MIN_STORE_SERVICE_ACTIVITY_DURATION_MINUTES: 0,
-    MAX_STORE_SERVICE_ACTIVITY_DURATION_MINUTES: 59,
+    MAX_STORE_SERVICE_ACTIVITY_DURATION_MINUTES: 60 * 24, // 24 hours in minutes
     MIN_CALENDAR_FUTURE_BOOKING_DAYS: 0,
     MAX_CALENDAR_FUTURE_BOOKING_DAYS: 365,
     MIN_CALENDAR_EARLIEST_BOOKING_TIME: 0,
-    MAX_CALENDAR_EARLIEST_BOOKING_TIME: 60 * 24, // 24 hours
+    MAX_CALENDAR_EARLIEST_BOOKING_TIME: 60 * 24, // 24 hours in minutes
   },
   DELAY_ACCOUNT_NAME_CHECK: 250,
   MAX_AVATAR_SIZE: 5 * 1024 * 1024,