Refactoring

components/ContactInfoForm.js

@@ -0,0 +1,145 @@
+import React, { memo } from "react";
+
+import localStorage from '../../../utils/browser/localStorage';
+import { WarningIcon, SuccessIcon } from '../../../Icons';
+import { Input, SuggestionsInput, FormRow, Button, Range } from '../../../UiComponents';
+import { MAGIC_STRINGS, LOCALES } from "./const";
+
+export const ContactInfoForm = (props) => {
+  const {
+    userInfo,
+    setValue,
+    validate,
+    internalErrors,
+    removeError,
+    permissions,
+    phoneVerification,
+    username,
+    openModal,
+    whatsApp,
+    whatsAppSetNotifications,
+  } = props;
+
+  const sameUser = username === userInfo.username;
+  const whatsAppEnabled = sameUser && whatsApp && whatsApp.bot_enabled;
+  const userWorkHours = sameUser && userInfo.workHours;
+
+  const phoneVerificationButton = sameUser && (
+    <Button
+      type={MAGIC_STRINGS.text}
+      tooltip={phoneVerification ? LOCALES.phoneConfirmed : LOCALES.phoneNotConfirmed}
+      mode={phoneVerification ? MAGIC_STRINGS.success : MAGIC_STRINGS.error}
+      onClick={
+        !localStorage.getSwitchUser() && !phoneVerification
+        ? () => openModal(MAGIC_STRINGS.verificationPhoneModal)
+        : () => null
+      }
+    >
+      {phoneVerification ? <SuccessIcon /> : <WarningIcon />}
+    </Button>
+  );
+
+  const whatsAppNotifyButton = (
+    <Button
+      inline
+      onClick={(e) => {
+        e.preventDefault();
+        whatsAppSetNotifications(!whatsApp.notify_enabled);
+      }}
+    >
+      {whatsApp.notify_enabled ? LOCALES.notifyWhatsappDisable : LOCALES.notifyWhatsappEnable}
+    </Button>
+  );
+  const whatsAppBotButton = (
+    <Button
+      inline
+      onClick={() =>
+        openModal(MAGIC_STRINGS.whatsAppAuthModal, {
+          link: whatsApp[MAGIC_STRINGS.redirect_url],
+        })
+      }
+    >
+      {LOCALES.whatsappBotEnable}
+    </Button>
+  );
+
+  return (
+    <>
+      <FormRow>
+        <Input
+          id={MAGIC_STRINGS.email}
+          label={LOCALES.email}
+          size='lg'
+          disabled={!permissions.editEmail}
+          value={userInfo.email}
+          onChange={(value) => setValue([MAGIC_STRINGS.userInfo, MAGIC_STRINGS.email], value)}
+          onBlur={(value) => {
+            validate(MAGIC_STRINGS.email, value);
+          }}
+          error={internalErrors.email}
+        />
+        <Input
+          id={MAGIC_STRINGS.phone}
+          label={LOCALES.phone}
+          disabled={!permissions.editPhone}
+          value={userInfo.phone}
+          onChange={(value) => setValue([MAGIC_STRINGS.userInfo, MAGIC_STRINGS.phone], value)}
+          onBlur={(value) => {
+            validate(MAGIC_STRINGS.phone, value);
+          }}
+          error={internalErrors.phone}
+          after={phoneVerificationButton}
+        />
+        {
+          whatsAppEnabled
+          && (whatsApp.bot_started ? whatsAppNotifyButton : whatsAppBotButton)
+        }
+        <SuggestionsInput
+          id={MAGIC_STRINGS.address}
+          label={LOCALES.address}
+          placeholder={LOCALES.addressDefault}
+          name={MAGIC_STRINGS.address}
+          size='xl'
+          value={userInfo.address}
+          list={userInfo.addressList}
+          keyName={MAGIC_STRINGS.text}
+          onChange={setValue}
+          onBlur={(address) => {
+            validate(MAGIC_STRINGS.addressInProfile, address);
+            removeError(MAGIC_STRINGS.addressInProfile);
+          }}
+          error={internalErrors.addressInProfile}
+        />
+      </FormRow>
+      {permissions.editNote && (
+        <FormRow>
+          <Input
+            id={MAGIC_STRINGS.description}
+            label={LOCALES.remark}
+            rows='3'
+            size='stretch'
+            disabled={!permissions.editNote}
+            value={userInfo.notes}
+            onChange={(value) => setValue([MAGIC_STRINGS.userInfo, MAGIC_STRINGS.notes], value)}
+          />
+        </FormRow>
+      )}
+      {userWorkHours && (
+        <>
+          {LOCALES.workHours}
+          <FormRow>
+            <Range
+              step={1}
+              min={0}
+              max={23}
+              values={userInfo.workHours}
+              onChange={(value) => setValue([MAGIC_STRINGS.userInfo, MAGIC_STRINGS.workHours], value)}
+            />
+          </FormRow>
+        </>
+      )}
+    </>
+  );
+};
+
+export default memo(ContactInfoForm);

components/LegalInfoForm.js

@@ -0,0 +1,146 @@
+import React, { memo } from "react";
+import moment from "moment";
+
+import {
+  Input,
+  DateInput,
+  RadioButtons,
+  FormRow,
+} from "../../../UiComponents";
+import { MAGIC_STRINGS, LOCALES, REGEXP, DATES_FORMAT } from "./const";
+
+export const LegalInfoForm = (props) => {
+  const {
+    userInfo,
+    setValue,
+    validate,
+    internalErrors,
+    isJuridical,
+    permissions,
+    rejectSet,
+  } = props;
+
+  const setIsJuridical = (value) => {
+    if (permissions.editJuridical) {
+      setValue([MAGIC_STRINGS.userInfo, MAGIC_STRINGS.isJuridical], value);
+    } else {
+      rejectSet(LOCALES.juridicalError);
+    }
+  };
+
+  return (
+    <FormRow>
+      <RadioButtons
+        id={MAGIC_STRINGS.isJuridical}
+        value={isJuridical}
+        list={[
+          { title: LOCALES.physical, value: false },
+          { title: LOCALES.juridical, value: true },
+        ]}
+        onChange={(value) => setIsJuridical(value)}
+      />
+      {isJuridical ? (
+        <Input
+          id={MAGIC_STRINGS.inn}
+          label={LOCALES.inn}
+          maxLength="12"
+          value={userInfo.inn}
+          onChange={(value) => {
+            if (
+              REGEXP.inn.test(value) ||
+              value.length < userInfo.inn.length
+            )
+              return setValue([MAGIC_STRINGS.userInfo, MAGIC_STRINGS.inn], value);
+          }}
+        />
+      ) : (
+        <>
+          <Input
+            id={MAGIC_STRINGS.series}
+            label={LOCALES.passportSerial}
+            placeholder={LOCALES.passportSerialDefault}
+            maxLength="4"
+            size="xs"
+            value={userInfo.series}
+            onChange={(value) => {
+              if (
+                REGEXP.passportSerial.test(value) ||
+                value.length < userInfo.series.length
+              )
+                return setValue([MAGIC_STRINGS.userInfo, MAGIC_STRINGS.series], value);
+            }}
+            onBlur={(value) => {
+              validate(MAGIC_STRINGS.series, value, {
+                documentType: MAGIC_STRINGS.passport,
+              });
+            }}
+            error={internalErrors.series}
+          />
+          <Input
+            id={MAGIC_STRINGS.number}
+            label={LOCALES.passportNumber}
+            placeholder={LOCALES.passportNumberDefault}
+            maxLength="6"
+            size="xs"
+            value={userInfo.number}
+            onChange={(value) => {
+              if (
+                REGEXP.passportNumber.test(value) ||
+                value.length < userInfo.number.length
+              )
+                return setValue([MAGIC_STRINGS.userInfo, MAGIC_STRINGS.number], value);
+            }}
+            onBlur={(value) => {
+              validate(MAGIC_STRINGS.number, value, {
+                documentType: MAGIC_STRINGS.passport,
+              });
+            }}
+            error={internalErrors.number}
+          />
+          <DateInput
+            id={MAGIC_STRINGS.birthday}
+            label={LOCALES.birthday}
+            value={userInfo.birthday}
+            onChange={(value) => {
+              if (
+                REGEXP.birthday.test(value) ||
+                value.length < userInfo.birthday.length
+              )
+                return setValue([MAGIC_STRINGS.userInfo, MAGIC_STRINGS.birthday], value);
+            }}
+            onBlur={(value) => {
+              validate(MAGIC_STRINGS.birthday, value);
+              if (userInfo.issuedAt)
+                validate(MAGIC_STRINGS.issuedAt, userInfo.issuedAt, {
+                  documentType: MAGIC_STRINGS.passport,
+                  birth: value,
+                });
+              if (moment(value, DATES_FORMAT.DDMMYYYY).isValid()) {
+                setValue(
+                  [MAGIC_STRINGS.userInfo, MAGIC_STRINGS.birthday],
+                  moment(value, DATES_FORMAT.DDMMYYYY).format(DATES_FORMAT.DDMMYYYY)
+                );
+              }
+            }}
+            error={internalErrors.birthday}
+          />
+          <Input
+            id={MAGIC_STRINGS.snils}
+            label={LOCALES.snils}
+            maxLength="11"
+            value={userInfo.snils}
+            onChange={(value) => {
+              if (
+                REGEXP.snils.test(value) ||
+                value.length < userInfo.snils.length
+              )
+                return setValue([MAGIC_STRINGS.userInfo, MAGIC_STRINGS.snils], value);
+            }}
+          />
+        </>
+      )}
+    </FormRow>
+  );
+};
+
+export default memo(LegalInfoForm);