company name

public/locales/de/translation.json

@@ -52,7 +52,9 @@
       "passwordRequired": "Passwort ist erforderlich",
       "passwordMinLength": "Passwort muss mindestens {{minLength}} Zeichen lang sein",
       "calendarMaxFutureBookingDaysRequired": "Maximaler Buchungszeitraum ist erforderlich",
-      "calendarMinEarliestBookingTimeRequired": "Minimaler frühester Buchungszeitpunkt ist erforderlich"
+      "calendarMinEarliestBookingTimeRequired": "Minimaler frühester Buchungszeitpunkt ist erforderlich",
+      "companyNameRequired": "Firmenname ist erforderlich",
+      "companyNameMinLength": "Firmenname muss mindestens {{minLength}} Zeichen lang sein"
     },
     "request": {
       "inputsInvalid": {

public/locales/en/translation.json

@@ -52,7 +52,9 @@
       "passwordRequired": "Please enter your password",
       "passwordMinLength": "Password must be at least {{minLength}} characters",
       "calendarMaxFutureBookingDaysRequired": "Please enter the max. future booking days",
-      "calendarMinEarliestBookingTimeRequired": "Please enter the min. earliest booking time"
+      "calendarMinEarliestBookingTimeRequired": "Please enter the min. earliest booking time",
+      "companyNameRequired": "Please enter the company name",
+      "companyNameMinLength": "Company name must be at least {{minLength}} characters"
     },
     "request": {
       "inputsInvalid": {

src/Components/MyFormInputs/index.js

@@ -142,6 +142,28 @@ export function MyCalendarMinEarliestBookingTimeFormInput() {
   );
 }
 
+export function MyCompanyNameFormInput({ showSkeleton }) {
+  const { t } = useTranslation();
+
+  return (
+    <MyFormInput
+      formItemName="companyName"
+      label={t("common.companyName")}
+      inputPlaceholder={t("common.companyNamePlaceholder")}
+      showSkeleton={showSkeleton}
+      ruleMessageValueRequired={t("common.inputRules.companyNameRequired")}
+      ruleMessageValueMinLengthRequired={t(
+        "common.inputRules.companyNameMinLength",
+        {
+          minLength: Constants.GLOBALS.MIN_COMPANY_NAME_LENGTH,
+        }
+      )}
+      minLength={Constants.GLOBALS.MIN_COMPANY_NAME_LENGTH}
+      maxLength={Constants.GLOBALS.MAX_COMPANY_NAME_LENGTH}
+    />
+  );
+}
+
 export function MyAvailableCheckFormInput({
   propsFormItem,
   propsInput,

src/Pages/Authentication/index.js

@@ -20,6 +20,7 @@ import {
 import { useEffect, useState } from "react";
 import {
   MyAccountNameFormInput,
+  MyCompanyNameFormInput,
   MyPasswordFormInput,
   MyUsernameFormInput,
 } from "../../Components/MyFormInputs";
@@ -337,6 +338,7 @@ function SignUp({ notificationApi }) {
         setIsRequesting(true);
 
         let body = {
+          companyName: values.companyName,
           accountName: values.accountName.toLocaleLowerCase(),
           password: EncodeStringToBase64(values.password),
           username: values.username,
@@ -375,6 +377,8 @@ function SignUp({ notificationApi }) {
         rememberMe: false,
       }}
     >
+      <MyCompanyNameFormInput />
+
       <MyUsernameFormInput />
 
       <MyAccountNameFormInput hasFeedback={true} />

src/Pages/Store/Settings/index.js

@@ -1,8 +1,11 @@
 import { useEffect, useRef, useState } from "react";
-import { myFetch } from "../../../utils";
+import { myFetch, showInputsInvalidNotification } from "../../../utils";
 import { useParams } from "react-router-dom";
 import { Card, Form, notification } from "antd";
-import { MyFormInput } from "../../../Components/MyFormInputs";
+import {
+  MyCompanyNameFormInput,
+  MyFormInput,
+} from "../../../Components/MyFormInputs";
 import { useTranslation } from "react-i18next";
 import {
   RequestState,
@@ -68,20 +71,28 @@ export default function StoreSettings() {
     }
 
     delayTimeout.current = setTimeout(() => {
-      myFetch({
+      form
-        url: `/store/${storeId}`,
+        .validateFields()
-        method: "POST",
+        .then(() => {
-        body: {
+          myFetch({
-          name: companyName,
+            url: `/store/${storeId}`,
-          phoneNumber,
+            method: "POST",
-          email,
+            body: {
-          address,
+              name: companyName,
-        },
+              phoneNumber,
-        notificationApi: notificationApi,
+              email,
-        t: t,
+              address,
-      })
+            },
-        .then(() => setRequestState(RequestState.SUCCESS))
+            notificationApi: notificationApi,
-        .catch(() => setRequestState(RequestState.FAILED));
+            t: t,
+          })
+            .then(() => setRequestState(RequestState.SUCCESS))
+            .catch(() => setRequestState(RequestState.FAILED));
+        })
+        .catch(() => {
+          setRequestState(RequestState.NOTHING);
+          showInputsInvalidNotification(notificationApi, t);
+        });
     }, 500);
   }, [companyName, phoneNumber, email, address]);
 
@@ -99,18 +110,14 @@ export default function StoreSettings() {
         }
       >
         <Form form={form} requiredMark={false} layout="vertical">
-          <MyFormInput
+          <MyCompanyNameFormInput showSkeleton={isRequesting} />
-            formItemName="companyName"
-            label={t("common.companyName")}
-            inputPlaceholder={t("common.companyNamePlaceholder")}
-            showSkeleton={isRequesting}
-          />
 
           <MyFormInput
             formItemName="phoneNumber"
             label={t("common.companyPhoneNumber")}
             inputPlaceholder={t("common.companyPhoneNumberPlaceholder")}
             showSkeleton={isRequesting}
+            inputNotRequired
           />
 
           <MyFormInput
@@ -118,6 +125,7 @@ export default function StoreSettings() {
             label={t("common.companyEmail")}
             inputPlaceholder={t("common.companyEmailPlaceholder")}
             showSkeleton={isRequesting}
+            inputNotRequired
           />
 
           <MyFormInput
@@ -126,6 +134,7 @@ export default function StoreSettings() {
             inputType="textarea"
             inputPlaceholder={t("common.companyAddressPlaceholder")}
             showSkeleton={isRequesting}
+            inputNotRequired
           />
         </Form>
       </Card>

src/utils.js

@@ -76,6 +76,8 @@ export const Constants = {
     MAX_CALENDAR_EARLIEST_BOOKING_TIME: 60 * 24, // 24 hours in minutes
     MIN_FEEDBACK_LENGTH: 10,
     MAX_FEEDBACK_LENGTH: 1024,
+    MIN_COMPANY_NAME_LENGTH: 3,
+    MAX_COMPANY_NAME_LENGTH: 64,
   },
   DELAY_ACCOUNT_NAME_CHECK: 250,
   CLARITY_PROJECT_ID: "kr0pale8uy",