min, max and info icons

public/locales/de/translation.json

@@ -43,8 +43,10 @@
     "calendarUsingPrimaryCalendar": "Verwende primären Kalender",
     "companyName": "Firmenname",
     "companyNamePlaceholder": "Geben Sie den Firmennamen ein",
+    "companyNameInfo": "Der Firmenname wird in Emails und auf der Buchungsseite angezeigt.",
     "companyAddress": "Firmenadresse",
-    "companyAddressPlaceholder": "Geben Sie die Firmenadresse ein",
+    "companyAddressPlaceholder": "Musterstraße 1\n12345 Musterstadt",
+    "companyAddressInfo": "Die Firmenaddresse wird in Emails und auf der Buchungsseite angezeigt.",
     "companyEmail": "Firmen E-Mail",
     "companyEmailPlaceholder": "Geben Sie die Firmen E-Mail ein",
     "companyPhoneNumber": "Firmen Telefonnummer",
@@ -62,6 +64,12 @@
       "calendarMinEarliestBookingTimeRequired": "Minimaler frühester Buchungszeitpunkt ist erforderlich",
       "companyNameRequired": "Firmenname ist erforderlich",
       "companyNameMinLength": "Firmenname muss mindestens {{minLength}} Zeichen lang sein",
+      "companyAddressRequired": "Firmenaddresse ist erforderlich",
+      "companyAddressMinLength": "Firmenaddresse muss mindestens {{minLength}} Zeichen lang sein",
+      "companyEmailRequired": "Firmen E-Mail ist erforderlich",
+      "companyEmailInvalid": "Firmen E-Mail ist ungültig",
+      "companyPhoneNumberRequired": "Firmen Telefonnummer ist erforderlich",
+      "companyPhoneNumberInvalid": "Firmen Telefonnummer ist ungültig",
       "recaptchaRequired": "Bitte bestätigen Sie, dass Sie kein Roboter sind",
       "privacyPolicyRequired": "Bitte akzeptieren Sie die Datenschutzbestimmungen"
     },

public/locales/en/translation.json

@@ -43,8 +43,10 @@
     "calendarUsingPrimaryCalendar": "Using primary calendar",
     "companyName": "Company name",
     "companyNamePlaceholder": "Enter your company name",
+    "companyNameInfo": "The company name is displayed in emails and on the booking page.",
     "companyAddress": "Company address",
-    "companyAddressPlaceholder": "Enter your company address",
+    "companyAddressPlaceholder": "Musterstraße 1\n12345 Musterstadt",
+    "companyAddressInfo": "The company address is displayed in emails and on the booking page.",
     "companyEmail": "Company email",
     "companyEmailPlaceholder": "Enter your company email",
     "companyPhoneNumber": "Company phone",
@@ -62,6 +64,12 @@
       "calendarMinEarliestBookingTimeRequired": "Please enter the min. earliest booking time",
       "companyNameRequired": "Please enter the company name",
       "companyNameMinLength": "Company name must be at least {{minLength}} characters",
+      "companyAddressRequired": "Please enter the company address",
+      "companyAddressMinLength": "Company address must be at least {{minLength}} characters",
+      "companyEmailRequired": "Please enter the company email",
+      "companyEmailInvalid": "Please enter a valid company email",
+      "companyPhoneNumberRequired": "Please enter the company phone number",
+      "companyPhoneNumberMinLength": "Company phone number must be at least {{minLength}} characters",
       "recaptchaRequired": "Please confirm that you are not a robot",
       "privacyPolicyRequired": "Please accept the privacy policy"
     },

src/Components/MyFormInputs/index.js

@@ -181,17 +181,42 @@ export function MyCompanyNameFormInput({ showSkeleton }) {
     <MyFormInput
       formItemName="companyName"
       label={t("common.companyName")}
+      propsFormItem={{ tooltip: t("common.companyNameInfo") }}
       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_STORE_SETTING_COMPANY_NAME_LENGTH,
         }
       )}
-      minLength={Constants.GLOBALS.MIN_COMPANY_NAME_LENGTH}
-      maxLength={Constants.GLOBALS.MAX_COMPANY_NAME_LENGTH}
+      minLength={Constants.GLOBALS.MIN_STORE_SETTING_COMPANY_NAME_LENGTH}
+      maxLength={Constants.GLOBALS.MAX_STORE_SETTING_COMPANY_NAME_LENGTH}
+    />
+  );
+}
+
+export function MyCompanyAddressFormInput({ showSkeleton }) {
+  const { t } = useTranslation();
+
+  return (
+    <MyFormInput
+      formItemName="companyAddress"
+      propsFormItem={{ tooltip: t("common.companyAddressInfo") }}
+      label={t("common.companyAddress")}
+      inputType="textarea"
+      inputPlaceholder={t("common.companyAddressPlaceholder")}
+      showSkeleton={showSkeleton}
+      ruleMessageValueRequired={t("common.inputRules.companyAddressRequired")}
+      ruleMessageValueMinLengthRequired={t(
+        "common.inputRules.companyAddressMinLength",
+        {
+          minLength: Constants.GLOBALS.MIN_STORE_SETTING_COMPANY_ADDRESS_LENGTH,
+        }
+      )}
+      minLength={Constants.GLOBALS.MIN_STORE_SETTING_COMPANY_ADDRESS_LENGTH}
+      maxLength={Constants.GLOBALS.MAX_STORE_SETTING_COMPANY_ADDRESS_LENGTH}
     />
   );
 }

src/Pages/Authentication/SignUp.js

@@ -24,25 +24,22 @@ import {
   showUnkownErrorNotification,
 } from "../../utils";
 import {
+  MyCompanyAddressFormInput,
   MyCompanyNameFormInput,
   MyEmailFormInput,
   MyPasswordFormInput,
   MyUsernameFormInput,
 } from "../../Components/MyFormInputs";
-import {
-  MyRecaptcha,
-  PendingEmailVerification,
-  PrivacyPolicyCheckbox,
-} from ".";
+import { MyRecaptcha, PrivacyPolicyCheckbox } from ".";
 import MyAppLogo from "../../Components/MyAppLogo";
 import { CheckOutlined } from "@ant-design/icons";
 import { RequestState } from "../../Components/MyRequestStateItem";
-
+/*
 const SignUpStep = {
   SIGN_UP: 1,
   PENDING_EMAIL_VERIFICATION: 2,
 };
-
+*/
 export default function SignUp({ paymentPlan }) {
   const [notificationApi, notificationContextHolder] =
     notification.useNotification();
@@ -51,11 +48,11 @@ export default function SignUp({ paymentPlan }) {
   const navigate = useNavigate();
   const [form] = Form.useForm();
 
-  const [step, setStep] = useState(SignUpStep.SIGN_UP);
-
+  //const [step, setStep] = useState(SignUpStep.SIGN_UP);
+  /*
   if (step === SignUpStep.PENDING_EMAIL_VERIFICATION) {
     return <PendingEmailVerification />;
-  }
+  } */
 
   return (
     <>
@@ -119,8 +116,10 @@ function AccountDetails({ t, form }) {
       >
         <MyCompanyNameFormInput />
 
+        <MyCompanyAddressFormInput />
+
         <MyUsernameFormInput
-          propsFormItem={{ extra: t("common.usernameInfo") }}
+          propsFormItem={{ tooltip: t("common.usernameInfo") }}
         />
 
         <MyEmailFormInput hasFeedback={true} />
@@ -209,6 +208,7 @@ function CostSummary({ notificationApi, paymentPlan, form }) {
             recaptcha: recaptchaValueRef.current,
             paymentPlan: paymentPlan,
             paymentInterval: segmentedValue,
+            companyAddress: values.companyAddress,
           },
           notificationApi: notificationApi,
           t: t,

src/Pages/Store/Settings/index.js

@@ -1,9 +1,15 @@
 import { useEffect, useRef, useState } from "react";
-import { myFetch, showInputsInvalidNotification } from "../../../utils";
+import {
+  Constants,
+  myFetch,
+  showInputsInvalidNotification,
+} from "../../../utils";
 import { useParams } from "react-router-dom";
 import { Card, Form, notification } from "antd";
 import {
+  MyCompanyAddressFormInput,
   MyCompanyNameFormInput,
+  MyEmailFormInput,
   MyFormInput,
 } from "../../../Components/MyFormInputs";
 import { useTranslation } from "react-i18next";
@@ -28,7 +34,7 @@ export default function StoreSettings() {
   const companyName = Form.useWatch("companyName", form);
   const phoneNumber = Form.useWatch("phoneNumber", form);
   const email = Form.useWatch("email", form);
-  const address = Form.useWatch("address", form);
+  const address = Form.useWatch("companyAddress", form);
 
   useEffect(() => {
     myFetch({
@@ -42,7 +48,7 @@ export default function StoreSettings() {
           companyName: data.store.name,
           phoneNumber: data.store.phone_number,
           email: data.store.email,
-          address: data.store.address,
+          companyAddress: data.store.address,
         });
 
         setIsRequesting(false);
@@ -118,6 +124,12 @@ export default function StoreSettings() {
             inputPlaceholder={t("common.companyPhoneNumberPlaceholder")}
             showSkeleton={isRequesting}
             inputNotRequired
+            minLength={
+              Constants.GLOBALS.MIN_STORE_SETTING_COMPANY_PHONE_NUMBER_LENGTH
+            }
+            maxLength={
+              Constants.GLOBALS.MAX_STORE_SETTING_COMPANY_PHONE_NUMBER_LENGTH
+            }
           />
 
           <MyFormInput
@@ -126,16 +138,18 @@ export default function StoreSettings() {
             inputPlaceholder={t("common.companyEmailPlaceholder")}
             showSkeleton={isRequesting}
             inputNotRequired
+            minLength={Constants.GLOBALS.MIN_EMAIL_LENGTH}
+            maxLength={Constants.GLOBALS.MAX_EMAIL_LENGTH}
+            inputType="email"
+            formItemRules={[
+              {
+                type: "email",
+                message: t("common.inputRules.emailInvalid"),
+              },
+            ]}
           />
 
-          <MyFormInput
-            formItemName="address"
-            label={t("common.companyAddress")}
-            inputType="textarea"
-            inputPlaceholder={t("common.companyAddressPlaceholder")}
-            showSkeleton={isRequesting}
-            inputNotRequired
-          />
+          <MyCompanyAddressFormInput showSkeleton={isRequesting} />
         </Form>
       </Card>
     </>

src/utils.js

@@ -78,6 +78,12 @@ export const Constants = {
     EMAIL_REGEX: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
     MIN_PASSWORD_LENGTH: 8,
     MAX_PASSWORD_LENGTH: 64,
+    MIN_STORE_SETTING_COMPANY_NAME_LENGTH: 2,
+    MAX_STORE_SETTING_COMPANY_NAME_LENGTH: 64,
+    MIN_STORE_SETTING_COMPANY_PHONE_NUMBER_LENGTH: 0,
+    MAX_STORE_SETTING_COMPANY_PHONE_NUMBER_LENGTH: 64,
+    MIN_STORE_SETTING_COMPANY_ADDRESS_LENGTH: 2,
+    MAX_STORE_SETTING_COMPANY_ADDRESS_LENGTH: 250,
     MIN_STORE_SERVICE_NAME_LENGTH: 3,
     MAX_STORE_SERVICE_NAME_LENGTH: 64,
     MIN_STORE_SERVICE_ACTIVITY_NAME_LENGTH: 3,
@@ -92,8 +98,6 @@ 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_EMAIL_CHECK: 250,
   CLARITY_PROJECT_ID: process.env.REACT_APP_CLARITY_PROJECT_ID,