@bytebrand/fe-ui-core 4.8.26 → 4.8.27

package/source/components/ContactForm/ContactForm.tsx

@@ -1,588 +1,588 @@
-import React from 'react';
-import styles from './ContactForm.styl';
-import TextAreaField from '../_common/TextAreaField/TextAreaField';
-import { MenuItem } from '@mui/material';
-import Button from '../_common/Button/Button';
-import FormCheckbox from '../_common/Checkbox/FormCheckbox';
-import InfoBlockWrapper from '../InfoBlocks/InfoBlockWrapper/InfoBlockWrapper';
-import MaterialField from '../_common/MaterialField/MaterialField';
-import MaterialSelect from '../_common/MaterialSelect/MaterialSelect';
-import _get from 'lodash/get';
-import LazyLoad from 'react-lazyload';
-// import ReCAPTCHA from 'react-google-recaptcha';
-
-interface ITranslate {
-  i18nKey: string;
-}
-interface IReCAPTCHA {
-  ref: object;
-}
-
-interface IContactFormProps {
-  onChangeFieldValue: (value: string | number, name: string) => void;
-  t?: (string: string) => string;
-  dataUrl?: string;
-  privacyPolicyUrl?: string;
-  isRequested?: boolean;
-  userUrl?: string;
-  // Translate?: () => JSX.Element;
-  Translate?: React.ComponentType<ITranslate>;
-  form: any;
-  config: any;
-  // ReCAPTCHA: JSX.Element;
-  ReCAPTCHA: React.ComponentType<IReCAPTCHA>;
-  // LazyLoad: JSX.Element;
-  reCaptchaRef: string;
-  createUser: string;
-  handleFormSubmit: () => void;
-  isLoading: boolean;
-  textAreaChange: () => void;
-  contactFormValues: any;
-}
-
-const ContactForm = (props: any) => {
-  const [isLoading, setIsLoading] = React.useState(false);
-  const _reCaptchaRef = React.useRef(null);
-  const {
-    t,
-    dataUrl,
-    privacyPolicyUrl,
-    isRequested,
-    userUrl,
-    Translate,
-    config,
-    ReCAPTCHA,
-    // LazyLoad,
-    // reCaptchaRef,
-    // handleFormSubmit,
-    // isLoading,s
-    onChangeFieldValue,
-    contactFormValues,
-    textAreaChange
-  }: IContactFormProps = props;
-
-  const renderTermsLabel = () => {
-    return (
-      <Translate i18nKey='contactForm.policy'>
-        <span className={styles.policy}>
-          Ich stimme der Verarbeitung meiner Daten, wie in der
-          <a href={dataUrl} target='_blank' className={styles.link}>Einwilligungserklärung </a>
-          von auto.de beschrieben, zu. Ich kann diese Einwilligung...
-          <a href={privacyPolicyUrl} target='_blank' className={styles.link}>Datenschutzerklärung </a> zu.
-        </span>
-      </Translate>
-    );
-  };
-
-  const createUser = async (createUserData: any) => {
-    const { profileStore, GoogleTagManager } = props;
-
-    setIsLoading(true);
-
-    try {
-      const tempPassword = await profileStore.createUserProfileWithoutPassword(createUserData);
-      GoogleTagManager.pushSuccessCustomerRegistration();
-      return tempPassword;
-    } catch (reason) {
-      const { errors, id }: any = reason; //tslint:disable-line
-      if (!!id) {
-        handleErrorWithID(id, reason);
-      }
-      handleErrors(errors);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleFormSubmit = async () => {
-    const { profileStore, authStore, carStore, t, form } = props;
-    const { email, firstName, lastName, phoneMain, terms } = form.values();
-    const createUserData = {
-      email,
-      userAddress: {
-        firstName,
-        lastName,
-        phoneMain
-      },
-      termsPermissions: {
-        email: terms,
-        research: terms,
-        permissionText: t('modals:offerRequest.permissionText')
-      }
-    };
-
-    if (!authStore.isAuthorized) {
-      const tempPassword = await createUser(createUserData);
-      await authStore.signIn(email, tempPassword);
-      await authStore.updateToken();
-      await profileStore.getProfileData();
-    }
-    const token = await _reCaptchaRef.current.executeAsync();
-    _reCaptchaRef.current.reset();
-    carStore.setCaptcha(token);
-
-    await sendRequestOffer();
-
-    if (authStore.isAuthorized && !profileStore.hasProfileCompleted && !authStore.isDealer) {
-      showUpdateProfileModal();
-    } else if (authStore.isAuthorized) {
-      showThankYouModal();
-    }
-  };
-
-  const handleErrors = (errors: any) => {
-    const { addNotification, t, form, GoogleTagManager } = props;
-
-    if (Array.isArray(errors)) {
-      const details: string[] = [];
-      errors.forEach((error: any) => {
-        if (error.detail) {
-          details.push(error.detail);
-        }
-        if (error.status === '500') {
-          addNotification({
-            message: t('modals:offerRequest.saveDataFailed'),
-            level: 'error'
-          });
-          return;
-        }
-        const pointer = _get(error, 'source.pointer', '').split('/');
-        const fieldName = pointer.length ? pointer[pointer.length - 1] : '';
-        const errorDetail = _get(error, 'detail', '');
-        if (form.has(fieldName)) {
-          addNotification({
-            message: `Error in field "${fieldName}": ${errorDetail}`,
-            level: 'error'
-          });
-          const field = form.$(fieldName);
-          if (field.hasNestedFields) {
-            field.each((item: any) => {
-              item.invalidate();
-            });
-          } else {
-            field.invalidate(errorDetail);
-          }
-        }
-      });
-      GoogleTagManager.pushFailureCustomerRegistration(details.join(' | '));
-    }
-  };
-
-  // const onCaptchaChange = (captcha: string) => {
-  //   const { carStore } = props;
-  //   carStore.setCaptcha(captcha);
-  // };
-
-  const handleErrorWithID = (id: string, reason: any) => {
-    const { addNotification, t } = props;
-
-    addNotification({
-      message: t('modals:offerRequest.mailAlreadyInUse'),
-      level: 'error'
-    });
-    sendRequestOffer(id);
-    showLoginRegistrationModal();
-    throw reason;
-  };
-
-  const sendInvalidDataContactForm = (form: any, subCategory: string, needValidation: boolean = true, isValid?: boolean) => {
-    const {
-      profileStore: { userProfile, submitInvalidContactFormInformation },
-      authStore: { isAuthorized, userId },
-      carStore, CookieUtils
-    } = props;
-    const carId = _get(carStore, 'car._id', null);
-    const category = 'offerRequest';
-    const requestUserId = isAuthorized ? userId : null;
-    const cookieId = CookieUtils.resolveCookieId() || null;
-    const dealerId = _get(carStore, 'car.metaData.ownerId', null);
-    const formData: any = {};
-
-    if (form) {
-      if (needValidation) {
-        form.validate();
-      }
-
-      form.each((field: any) => {
-        if (!field.hasNestedFields) {
-          const value = field.values();
-
-          if (field.isValid) {
-            formData[field.name] = value;
-          } else if (field.isEmpty) {
-            formData[field.name] = 'invalid';
-          } else {
-            formData[field.name] = `invalidValue - ${value}`;
-          }
-        }
-      });
-    }
-
-    const submitData = {
-      carId,
-      cookieId,
-      dealerId,
-      category,
-      subCategory,
-      requestUserId,
-      ...formData
-    };
-
-    if (isValid) {
-      submitData.success = true;
-    }
-
-    if (!submitData.email) {
-      submitData.email = userProfile.email;
-    }
-
-    submitInvalidContactFormInformation(submitData);
-  };
-
-  const hideUpdateProfileModal = () => {
-    const { hideModal } = props;
-    hideModal('UPDATE_PROFILE_MODAL');
-  };
-
-  const hideLoginRegistrationModal = () => {
-    const { hideModal } = props;
-    hideModal('LOGIN_REGISTRATION_MODAL');
-  };
-
-  const hideResetPasswordModal = () => {
-    const { hideModal } = props;
-    hideModal('PASSWORD_RESET_MODAL');
-  };
-
-  const hideResetPasswordConfirmModal = () => {
-    const { hideModal } = props;
-    hideModal('PASSWORD_RESET_CONFIRM_MODAL');
-  };
-
-  const showUpdateProfileModal = () => {
-    const {
-      t,
-      authStore: { isAuthorized },
-      profileStore: { tempPassword, userProfile, clearTempPassword },
-      showModal, updateProfileForm
-    } = props;
-
-    showModal('UPDATE_PROFILE_MODAL', {
-      t,
-      isAuthorized,
-      tempPassword,
-      userProfile,
-      onSuccess: () => {
-        clearTempPassword();
-        hideUpdateProfileModal();
-        showThankYouModal();
-      },
-      onError: () => {
-        sendInvalidDataContactForm(updateProfileForm, 'updateProfile', false);
-      },
-      onClose: () => {
-        sendInvalidDataContactForm(updateProfileForm, 'updateProfile');
-        hideUpdateProfileModal();
-        showThankYouModal();
-      }
-    });
-  };
-
-  const showThankYouModal = () => {
-    const { t, carStore, showModal, hideModal, requestedOffers } = props;
-    const carId = _get(carStore, 'car._id');
-
-    if (requestedOffers.has(carId)) {
-      showModal('OFFER_REQUEST_THANKS_MODAL', { t, hideModal, showModal });
-    }
-  };
-
-  const showResetPasswordConfirmModal = () => {
-    const { t, showModal } = props;
-
-    showModal('PASSWORD_RESET_CONFIRM_MODAL', {
-      t,
-      onSuccess: () => {
-        hideResetPasswordConfirmModal();
-        showLoginRegistrationModal();
-      },
-      onClose: () => {
-        hideResetPasswordConfirmModal();
-      }
-    });
-  };
-
-  const showResetPasswordModal = () => {
-    const { t, showModal } = props;
-
-    showModal('PASSWORD_RESET_MODAL', {
-      t,
-      onSuccess: () => {
-        hideResetPasswordModal();
-        showResetPasswordConfirmModal();
-      },
-      onClose: () => {
-        hideResetPasswordModal();
-      }
-    });
-  };
-
-  const showLoginRegistrationModal = () => {
-    const { t, authStore, profileStore, showModal, registerForm, loginForm } = props;
-
-    showModal('LOGIN_REGISTRATION_MODAL', {
-      t,
-      currentTab: 1,
-      onSuccessRegistration: () => {
-        sendInvalidDataContactForm(registerForm, 'register', false, true);
-        sendRequestOffer()
-          .then(() => {
-            hideLoginRegistrationModal();
-            showUpdateProfileModal();
-          });
-      },
-      onSuccessLogin: () => {
-        sendRequestOffer()
-          .then(() => {
-            hideLoginRegistrationModal();
-            if (!profileStore.hasProfileCompleted && !authStore.isDealer) {
-              showUpdateProfileModal();
-            } else {
-              showThankYouModal();
-            }
-          });
-      },
-      onErrorRegistration: (reason?: any) => {
-        if (reason && reason.id) {
-          sendInvalidDataContactForm(registerForm, 'register', false, true);
-          sendRequestOffer(reason.id);
-        } else {
-          sendInvalidDataContactForm(registerForm, 'register', false);
-        }
-      },
-      onErrorLogin: () => {
-        sendInvalidDataContactForm(loginForm, 'login', false);
-      },
-      onCloseRegistration: () => {
-        sendInvalidDataContactForm(registerForm, 'register');
-        hideLoginRegistrationModal();
-        showThankYouModal();
-      },
-      onCloseLogin: () => {
-        sendInvalidDataContactForm(loginForm, 'login');
-        hideLoginRegistrationModal();
-        showThankYouModal();
-      },
-      onResetPassword: () => {
-        hideLoginRegistrationModal();
-        showResetPasswordModal();
-      }
-    });
-  };
-
-  const sendRequestOffer = async (userID?: string) => {
-    const { carStore, filterStore, getUserConfig, setRequestedOffer, getComputedFinancing, form , Cookies, toJS, GoogleTagManager } = props;
-    // const { getUserConfig, setRequestedOffer } = financingStore;
-    const { email, firstName, lastName, phoneMain, agreement, message } = form.values();
-
-    const carId = _get(carStore, 'car._id');
-    const financingConfig = getUserConfig(carId);
-    const calculatedInputs = getComputedFinancing(financingConfig);
-    const historyCalculatedInputs = getComputedFinancing({ ...financingConfig, isStrike: true });
-    const carPrice = _get(carStore, 'car.price.currentSalesPrice');
-    const marketingCookies = Cookies.get('marketing');
-
-    const contactFormData: any = {
-      firstName,
-      lastName,
-      email,
-      message,
-      phoneMain,
-      carId,
-      terms: agreement,
-      category: 'car_contactForm',
-      historyFinancingInfo: {
-        ...historyCalculatedInputs
-      },
-      financingInfo: {
-        ...calculatedInputs
-      },
-      financingConfig: {
-        ...calculatedInputs
-      }
-    };
-
-    if (!!userID) {
-      contactFormData.userId = userID;
-    }
-
-    const lastSearchString = toJS(filterStore.lastSearchString);
-
-    if (lastSearchString) {
-      contactFormData.lastSearchString = lastSearchString;
-    }
-
-    if (marketingCookies) {
-      contactFormData.marketing = JSON.parse(Cookies.get('marketing'));
-    }
-
-    await carStore.submitContactForm(contactFormData);
-    setRequestedOffer(carId);
-
-    GoogleTagManager.pushOfferRequestEvent(carId, carPrice);
-    GoogleTagManager.pushOfferRequestPurchaseEvent(toJS(carStore.car), contactFormData.financingInfo);
-    filterStore.clearLastSearchString();
-
-    return Promise.resolve();
-  };
-
-  const renderCaptcha = () => {
-    const lazyLoadProps = {
-      once: true,
-      offset: 500
-    };
-    const captchaProps = {
-      sitekey: config.recaptchaSiteKey,
-      size: 'invisible'
-    };
-    return (
-      <div className={styles.recaptcha}>
-        <LazyLoad {...lazyLoadProps}>
-          <ReCAPTCHA ref={_reCaptchaRef} {...captchaProps} />
-        </LazyLoad>
-      </div>
-    );
-  };
-
-  const renderThankYou = () => {
-    return (
-      <div className={styles.contentWrap}>
-        <h4 className={styles.heading}>{t('contactForm.thanks')}</h4>
-        <div className={styles.text}>{t('contactForm.thanksMessage')}</div>
-      </div>
-    );
-  };
-
-  const renderForm = () => {
-    const { t, carStore: { formStatus }, authStore, profileStore } = props;
-    const isLoadingCurrent = authStore.isAuthFetching || profileStore.profileLoading || isLoading;
-    return (
-      <form className={styles.form}>
-        <MaterialField
-          onChange={value => onChangeFieldValue(value , 'firstName')}
-          label={t('contactForm.firstName')}
-          size='custom'
-          value={contactFormValues.firstName.value}
-          // classNameInputLabel={styles.labelForm}
-          type={contactFormValues.firstName.type}
-          error={contactFormValues.firstName.hasError && !!contactFormValues.firstName.error}
-          required={contactFormValues.firstName.value === '' ? true : false}
-          className={styles[contactFormValues.firstName.name]}
-          // helperText={contactFormValues.firstName.error}
-        />
-        <MaterialField
-          onChange={value => onChangeFieldValue(value , 'lastName')}
-          label={t('contactForm.lastName')}
-          size='custom'
-          value={contactFormValues.lastName.value}
-          // classNameInputLabel={styles.labelForm}
-          type={contactFormValues.lastName.type}
-          error={contactFormValues.lastName.hasError && !!contactFormValues.lastName.error}
-          required={contactFormValues.lastName.value === '' ? true : false}
-          className={styles[contactFormValues.lastName.name]}
-          // helperText={contactFormValues.lastName.error}
-        />
-        <MaterialField
-          onChange={value => onChangeFieldValue(value , 'email')}
-          label={t('contactForm.email')}
-          value={contactFormValues.email.value}
-          size='custom'
-          // classNameInputLabel={styles.labelForm}
-          type={contactFormValues.email.type}
-          error={contactFormValues.email.hasError && !!contactFormValues.email.error}
-          required={contactFormValues.email.value === '' ? true : false}
-          className={styles[contactFormValues.email.name]}
-          // helperText={contactFormValues.email.error}
-        />
-        <MaterialSelect
-          className={styles[contactFormValues.countryCode.name]}
-          label={t('contactForm.countryCodePlaceholder')}
-          size='custom'
-          value={typeof contactFormValues.countryCode.value === 'string' ? contactFormValues.countryCode.value : contactFormValues.countryCode.value.value}
-          onChange={value => onChangeFieldValue(value , 'phoneMain.countryCode')}
-          error={contactFormValues.countryCode.hasError && !!contactFormValues.countryCode.error}
-          required={contactFormValues.countryCode.value === '' ? true : false}
-          classNameIcon={styles.selectIcon}
-        >
-          {contactFormValues.countryCode.extra.map(({ value, label } : { value: string, label: string }) => (
-            <MenuItem key={label} value={value}>{label}</MenuItem>
-          ))}
-        </MaterialSelect>
-        <MaterialField
-          onChange={value => onChangeFieldValue(value , 'phoneMain.areaCode')}
-          label={t('contactForm.areaCodePlaceholder')}
-          value={contactFormValues.areaCode.value}
-          size='custom'
-          // classNameInputLabel={styles.labelForm}
-          type={contactFormValues.areaCode.type}
-          error={contactFormValues.areaCode.hasError && !!contactFormValues.areaCode.error}
-          required={contactFormValues.areaCode.value === '' ? true : false}
-          className={styles[contactFormValues.areaCode.name]}
-          // helperText={contactFormValues.areaCode.error}
-        />
-         <MaterialField
-          onChange={value => onChangeFieldValue(value , 'phoneMain.phoneNumber')}
-          label={t('contactForm.phoneNumberPlaceholder')}
-          size='custom'
-          value={contactFormValues.phoneNumber.value}
-          // classNameInputLabel={styles.labelForm}
-          type={contactFormValues.phoneNumber.type}
-          error={contactFormValues.phoneNumber.hasError && !!contactFormValues.phoneNumber.error}
-          required={contactFormValues.phoneNumber.value === '' ? true : false}
-          className={styles[contactFormValues.phoneNumber.name]}
-          // helperText={contactFormValues.phoneNumber.error}
-        />
-        <TextAreaField
-          showPlaceholder={true}
-          name={contactFormValues.message.name}
-          value={contactFormValues.message.value}
-          fieldClassName={styles.messageField}
-          label={t(`${contactFormValues.message.placeHolder}`)}
-          className={styles[contactFormValues.message.name]}
-          onChange={textAreaChange}
-        />
-
-        <div className={styles.confirmBlock}>
-          <span className={styles.termsConditionsLabel}>
-            <Translate i18nKey='contactForm.termsConditions'>
-              <a href={userUrl} target='_blank' className={styles.link}>Nutzungsbedingungen</a>
-            </Translate>
-          </span>
-          <FormCheckbox checkboxClassName={styles.checkboxField} field={contactFormValues.checkBox} label={renderTermsLabel()} />
-        </div>
-        {renderCaptcha()}
-        <Button
-          disabled={formStatus === 'pending' || !contactFormValues.formIsValid}
-          onClick={handleFormSubmit}
-          color='primary'
-          className={styles.formSubmit}
-          loading={isLoadingCurrent}
-        >
-          {formStatus === 'pending' && <span className={styles.spinnerWait} /> || t('contactForm.send')}
-        </Button>
-      </form>
-    );
-  };
-  return (
-      <InfoBlockWrapper containerClassName={styles.container} title={t('contactForm.title')}>
-        <div className={styles.contentWrap}>
-          <p>{t('contactForm.topText1')}</p>
-          <p>{t('contactForm.topText2')} <a className={styles.link} href={dataUrl} target='_blank'>{t('contactForm.topTextLink')}</a></p>
-          <p>{t('contactForm.topText3')}</p>
-        </div>
-        {!isRequested ? renderForm() : renderThankYou()}
-      </InfoBlockWrapper>
-  );
-};
-
-export default ContactForm;
+import React from 'react';
+import styles from './ContactForm.styl';
+import TextAreaField from '../_common/TextAreaField/TextAreaField';
+import { MenuItem } from '@mui/material';
+import Button from '../_common/Button/Button';
+import FormCheckbox from '../_common/Checkbox/FormCheckbox';
+import InfoBlockWrapper from '../InfoBlocks/InfoBlockWrapper/InfoBlockWrapper';
+import MaterialField from '../_common/MaterialField/MaterialField';
+import MaterialSelect from '../_common/MaterialSelect/MaterialSelect';
+import _get from 'lodash/get';
+import LazyLoad from 'react-lazyload';
+// import ReCAPTCHA from 'react-google-recaptcha';
+
+interface ITranslate {
+  i18nKey: string;
+}
+interface IReCAPTCHA {
+  ref: object;
+}
+
+interface IContactFormProps {
+  onChangeFieldValue: (value: string | number, name: string) => void;
+  t?: (string: string) => string;
+  dataUrl?: string;
+  privacyPolicyUrl?: string;
+  isRequested?: boolean;
+  userUrl?: string;
+  // Translate?: () => JSX.Element;
+  Translate?: React.ComponentType<ITranslate>;
+  form: any;
+  config: any;
+  // ReCAPTCHA: JSX.Element;
+  ReCAPTCHA: React.ComponentType<IReCAPTCHA>;
+  // LazyLoad: JSX.Element;
+  reCaptchaRef: string;
+  createUser: string;
+  handleFormSubmit: () => void;
+  isLoading: boolean;
+  textAreaChange: () => void;
+  contactFormValues: any;
+}
+
+const ContactForm = (props: any) => {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const _reCaptchaRef = React.useRef(null);
+  const {
+    t,
+    dataUrl,
+    privacyPolicyUrl,
+    isRequested,
+    userUrl,
+    Translate,
+    config,
+    ReCAPTCHA,
+    // LazyLoad,
+    // reCaptchaRef,
+    // handleFormSubmit,
+    // isLoading,s
+    onChangeFieldValue,
+    contactFormValues,
+    textAreaChange
+  }: IContactFormProps = props;
+
+  const renderTermsLabel = () => {
+    return (
+      <Translate i18nKey='contactForm.policy'>
+        <span className={styles.policy}>
+          Ich stimme der Verarbeitung meiner Daten, wie in der
+          <a href={dataUrl} target='_blank' className={styles.link}>Einwilligungserklärung </a>
+          von auto.de beschrieben, zu. Ich kann diese Einwilligung...
+          <a href={privacyPolicyUrl} target='_blank' className={styles.link}>Datenschutzerklärung </a> zu.
+        </span>
+      </Translate>
+    );
+  };
+
+  const createUser = async (createUserData: any) => {
+    const { profileStore, GoogleTagManager } = props;
+
+    setIsLoading(true);
+
+    try {
+      const tempPassword = await profileStore.createUserProfileWithoutPassword(createUserData);
+      GoogleTagManager.pushSuccessCustomerRegistration();
+      return tempPassword;
+    } catch (reason) {
+      const { errors, id }: any = reason; //tslint:disable-line
+      if (!!id) {
+        handleErrorWithID(id, reason);
+      }
+      handleErrors(errors);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleFormSubmit = async () => {
+    const { profileStore, authStore, carStore, t, form } = props;
+    const { email, firstName, lastName, phoneMain, terms } = form.values();
+    const createUserData = {
+      email,
+      userAddress: {
+        firstName,
+        lastName,
+        phoneMain
+      },
+      termsPermissions: {
+        email: terms,
+        research: terms,
+        permissionText: t('modals:offerRequest.permissionText')
+      }
+    };
+
+    if (!authStore.isAuthorized) {
+      const tempPassword = await createUser(createUserData);
+      await authStore.signIn(email, tempPassword);
+      await authStore.updateToken();
+      await profileStore.getProfileData();
+    }
+    const token = await _reCaptchaRef.current.executeAsync();
+    _reCaptchaRef.current.reset();
+    carStore.setCaptcha(token);
+
+    await sendRequestOffer();
+
+    if (authStore.isAuthorized && !profileStore.hasProfileCompleted && !authStore.isDealer) {
+      showUpdateProfileModal();
+    } else if (authStore.isAuthorized) {
+      showThankYouModal();
+    }
+  };
+
+  const handleErrors = (errors: any) => {
+    const { addNotification, t, form, GoogleTagManager } = props;
+
+    if (Array.isArray(errors)) {
+      const details: string[] = [];
+      errors.forEach((error: any) => {
+        if (error.detail) {
+          details.push(error.detail);
+        }
+        if (error.status === '500') {
+          addNotification({
+            message: t('modals:offerRequest.saveDataFailed'),
+            level: 'error'
+          });
+          return;
+        }
+        const pointer = _get(error, 'source.pointer', '').split('/');
+        const fieldName = pointer.length ? pointer[pointer.length - 1] : '';
+        const errorDetail = _get(error, 'detail', '');
+        if (form.has(fieldName)) {
+          addNotification({
+            message: `Error in field "${fieldName}": ${errorDetail}`,
+            level: 'error'
+          });
+          const field = form.$(fieldName);
+          if (field.hasNestedFields) {
+            field.each((item: any) => {
+              item.invalidate();
+            });
+          } else {
+            field.invalidate(errorDetail);
+          }
+        }
+      });
+      GoogleTagManager.pushFailureCustomerRegistration(details.join(' | '));
+    }
+  };
+
+  // const onCaptchaChange = (captcha: string) => {
+  //   const { carStore } = props;
+  //   carStore.setCaptcha(captcha);
+  // };
+
+  const handleErrorWithID = (id: string, reason: any) => {
+    const { addNotification, t } = props;
+
+    addNotification({
+      message: t('modals:offerRequest.mailAlreadyInUse'),
+      level: 'error'
+    });
+    sendRequestOffer(id);
+    showLoginRegistrationModal();
+    throw reason;
+  };
+
+  const sendInvalidDataContactForm = (form: any, subCategory: string, needValidation: boolean = true, isValid?: boolean) => {
+    const {
+      profileStore: { userProfile, submitInvalidContactFormInformation },
+      authStore: { isAuthorized, userId },
+      carStore, CookieUtils
+    } = props;
+    const carId = _get(carStore, 'car._id', null);
+    const category = 'offerRequest';
+    const requestUserId = isAuthorized ? userId : null;
+    const cookieId = CookieUtils.resolveCookieId() || null;
+    const dealerId = _get(carStore, 'car.metaData.ownerId', null);
+    const formData: any = {};
+
+    if (form) {
+      if (needValidation) {
+        form.validate();
+      }
+
+      form.each((field: any) => {
+        if (!field.hasNestedFields) {
+          const value = field.values();
+
+          if (field.isValid) {
+            formData[field.name] = value;
+          } else if (field.isEmpty) {
+            formData[field.name] = 'invalid';
+          } else {
+            formData[field.name] = `invalidValue - ${value}`;
+          }
+        }
+      });
+    }
+
+    const submitData = {
+      carId,
+      cookieId,
+      dealerId,
+      category,
+      subCategory,
+      requestUserId,
+      ...formData
+    };
+
+    if (isValid) {
+      submitData.success = true;
+    }
+
+    if (!submitData.email) {
+      submitData.email = userProfile.email;
+    }
+
+    submitInvalidContactFormInformation(submitData);
+  };
+
+  const hideUpdateProfileModal = () => {
+    const { hideModal } = props;
+    hideModal('UPDATE_PROFILE_MODAL');
+  };
+
+  const hideLoginRegistrationModal = () => {
+    const { hideModal } = props;
+    hideModal('LOGIN_REGISTRATION_MODAL');
+  };
+
+  const hideResetPasswordModal = () => {
+    const { hideModal } = props;
+    hideModal('PASSWORD_RESET_MODAL');
+  };
+
+  const hideResetPasswordConfirmModal = () => {
+    const { hideModal } = props;
+    hideModal('PASSWORD_RESET_CONFIRM_MODAL');
+  };
+
+  const showUpdateProfileModal = () => {
+    const {
+      t,
+      authStore: { isAuthorized },
+      profileStore: { tempPassword, userProfile, clearTempPassword },
+      showModal, updateProfileForm
+    } = props;
+
+    showModal('UPDATE_PROFILE_MODAL', {
+      t,
+      isAuthorized,
+      tempPassword,
+      userProfile,
+      onSuccess: () => {
+        clearTempPassword();
+        hideUpdateProfileModal();
+        showThankYouModal();
+      },
+      onError: () => {
+        sendInvalidDataContactForm(updateProfileForm, 'updateProfile', false);
+      },
+      onClose: () => {
+        sendInvalidDataContactForm(updateProfileForm, 'updateProfile');
+        hideUpdateProfileModal();
+        showThankYouModal();
+      }
+    });
+  };
+
+  const showThankYouModal = () => {
+    const { t, carStore, showModal, hideModal, requestedOffers } = props;
+    const carId = _get(carStore, 'car._id');
+
+    if (requestedOffers.has(carId)) {
+      showModal('OFFER_REQUEST_THANKS_MODAL', { t, hideModal, showModal });
+    }
+  };
+
+  const showResetPasswordConfirmModal = () => {
+    const { t, showModal } = props;
+
+    showModal('PASSWORD_RESET_CONFIRM_MODAL', {
+      t,
+      onSuccess: () => {
+        hideResetPasswordConfirmModal();
+        showLoginRegistrationModal();
+      },
+      onClose: () => {
+        hideResetPasswordConfirmModal();
+      }
+    });
+  };
+
+  const showResetPasswordModal = () => {
+    const { t, showModal } = props;
+
+    showModal('PASSWORD_RESET_MODAL', {
+      t,
+      onSuccess: () => {
+        hideResetPasswordModal();
+        showResetPasswordConfirmModal();
+      },
+      onClose: () => {
+        hideResetPasswordModal();
+      }
+    });
+  };
+
+  const showLoginRegistrationModal = () => {
+    const { t, authStore, profileStore, showModal, registerForm, loginForm } = props;
+
+    showModal('LOGIN_REGISTRATION_MODAL', {
+      t,
+      currentTab: 1,
+      onSuccessRegistration: () => {
+        sendInvalidDataContactForm(registerForm, 'register', false, true);
+        sendRequestOffer()
+          .then(() => {
+            hideLoginRegistrationModal();
+            showUpdateProfileModal();
+          });
+      },
+      onSuccessLogin: () => {
+        sendRequestOffer()
+          .then(() => {
+            hideLoginRegistrationModal();
+            if (!profileStore.hasProfileCompleted && !authStore.isDealer) {
+              showUpdateProfileModal();
+            } else {
+              showThankYouModal();
+            }
+          });
+      },
+      onErrorRegistration: (reason?: any) => {
+        if (reason && reason.id) {
+          sendInvalidDataContactForm(registerForm, 'register', false, true);
+          sendRequestOffer(reason.id);
+        } else {
+          sendInvalidDataContactForm(registerForm, 'register', false);
+        }
+      },
+      onErrorLogin: () => {
+        sendInvalidDataContactForm(loginForm, 'login', false);
+      },
+      onCloseRegistration: () => {
+        sendInvalidDataContactForm(registerForm, 'register');
+        hideLoginRegistrationModal();
+        showThankYouModal();
+      },
+      onCloseLogin: () => {
+        sendInvalidDataContactForm(loginForm, 'login');
+        hideLoginRegistrationModal();
+        showThankYouModal();
+      },
+      onResetPassword: () => {
+        hideLoginRegistrationModal();
+        showResetPasswordModal();
+      }
+    });
+  };
+
+  const sendRequestOffer = async (userID?: string) => {
+    const { carStore, filterStore, getUserConfig, setRequestedOffer, getComputedFinancing, form , Cookies, toJS, GoogleTagManager } = props;
+    // const { getUserConfig, setRequestedOffer } = financingStore;
+    const { email, firstName, lastName, phoneMain, agreement, message } = form.values();
+
+    const carId = _get(carStore, 'car._id');
+    const financingConfig = getUserConfig(carId);
+    const calculatedInputs = getComputedFinancing(financingConfig);
+    const historyCalculatedInputs = getComputedFinancing({ ...financingConfig, isStrike: true });
+    const carPrice = _get(carStore, 'car.price.currentSalesPrice');
+    const marketingCookies = Cookies.get('marketing');
+
+    const contactFormData: any = {
+      firstName,
+      lastName,
+      email,
+      message,
+      phoneMain,
+      carId,
+      terms: agreement,
+      category: 'car_contactForm',
+      historyFinancingInfo: {
+        ...historyCalculatedInputs
+      },
+      financingInfo: {
+        ...calculatedInputs
+      },
+      financingConfig: {
+        ...calculatedInputs
+      }
+    };
+
+    if (!!userID) {
+      contactFormData.userId = userID;
+    }
+
+    const lastSearchString = toJS(filterStore.lastSearchString);
+
+    if (lastSearchString) {
+      contactFormData.lastSearchString = lastSearchString;
+    }
+
+    if (marketingCookies) {
+      contactFormData.marketing = JSON.parse(Cookies.get('marketing'));
+    }
+
+    await carStore.submitContactForm(contactFormData);
+    setRequestedOffer(carId);
+
+    GoogleTagManager.pushOfferRequestEvent(carId, carPrice);
+    GoogleTagManager.pushOfferRequestPurchaseEvent(toJS(carStore.car), contactFormData.financingInfo);
+    filterStore.clearLastSearchString();
+
+    return Promise.resolve();
+  };
+
+  const renderCaptcha = () => {
+    const lazyLoadProps = {
+      once: true,
+      offset: 500
+    };
+    const captchaProps = {
+      sitekey: config.recaptchaSiteKey,
+      size: 'invisible'
+    };
+    return (
+      <div className={styles.recaptcha}>
+        <LazyLoad {...lazyLoadProps}>
+          <ReCAPTCHA ref={_reCaptchaRef} {...captchaProps} />
+        </LazyLoad>
+      </div>
+    );
+  };
+
+  const renderThankYou = () => {
+    return (
+      <div className={styles.contentWrap}>
+        <h4 className={styles.heading}>{t('contactForm.thanks')}</h4>
+        <div className={styles.text}>{t('contactForm.thanksMessage')}</div>
+      </div>
+    );
+  };
+
+  const renderForm = () => {
+    const { t, carStore: { formStatus }, authStore, profileStore } = props;
+    const isLoadingCurrent = authStore.isAuthFetching || profileStore.profileLoading || isLoading;
+    return (
+      <form className={styles.form}>
+        <MaterialField
+          onChange={value => onChangeFieldValue(value , 'firstName')}
+          label={t('contactForm.firstName')}
+          size='custom'
+          value={contactFormValues.firstName.value}
+          // classNameInputLabel={styles.labelForm}
+          type={contactFormValues.firstName.type}
+          error={contactFormValues.firstName.hasError && !!contactFormValues.firstName.error}
+          required={contactFormValues.firstName.value === '' ? true : false}
+          className={styles[contactFormValues.firstName.name]}
+          // helperText={contactFormValues.firstName.error}
+        />
+        <MaterialField
+          onChange={value => onChangeFieldValue(value , 'lastName')}
+          label={t('contactForm.lastName')}
+          size='custom'
+          value={contactFormValues.lastName.value}
+          // classNameInputLabel={styles.labelForm}
+          type={contactFormValues.lastName.type}
+          error={contactFormValues.lastName.hasError && !!contactFormValues.lastName.error}
+          required={contactFormValues.lastName.value === '' ? true : false}
+          className={styles[contactFormValues.lastName.name]}
+          // helperText={contactFormValues.lastName.error}
+        />
+        <MaterialField
+          onChange={value => onChangeFieldValue(value , 'email')}
+          label={t('contactForm.email')}
+          value={contactFormValues.email.value}
+          size='custom'
+          // classNameInputLabel={styles.labelForm}
+          type={contactFormValues.email.type}
+          error={contactFormValues.email.hasError && !!contactFormValues.email.error}
+          required={contactFormValues.email.value === '' ? true : false}
+          className={styles[contactFormValues.email.name]}
+          // helperText={contactFormValues.email.error}
+        />
+        <MaterialSelect
+          className={styles[contactFormValues.countryCode.name]}
+          label={t('contactForm.countryCodePlaceholder')}
+          size='custom'
+          value={typeof contactFormValues.countryCode.value === 'string' ? contactFormValues.countryCode.value : contactFormValues.countryCode.value.value}
+          onChange={value => onChangeFieldValue(value , 'phoneMain.countryCode')}
+          error={contactFormValues.countryCode.hasError && !!contactFormValues.countryCode.error}
+          required={contactFormValues.countryCode.value === '' ? true : false}
+          classNameIcon={styles.selectIcon}
+        >
+          {contactFormValues.countryCode.extra.map(({ value, label } : { value: string, label: string }) => (
+            <MenuItem key={label} value={value}>{label}</MenuItem>
+          ))}
+        </MaterialSelect>
+        <MaterialField
+          onChange={value => onChangeFieldValue(value , 'phoneMain.areaCode')}
+          label={t('contactForm.areaCodePlaceholder')}
+          value={contactFormValues.areaCode.value}
+          size='custom'
+          // classNameInputLabel={styles.labelForm}
+          type={contactFormValues.areaCode.type}
+          error={contactFormValues.areaCode.hasError && !!contactFormValues.areaCode.error}
+          required={contactFormValues.areaCode.value === '' ? true : false}
+          className={styles[contactFormValues.areaCode.name]}
+          // helperText={contactFormValues.areaCode.error}
+        />
+         <MaterialField
+          onChange={value => onChangeFieldValue(value , 'phoneMain.phoneNumber')}
+          label={t('contactForm.phoneNumberPlaceholder')}
+          size='custom'
+          value={contactFormValues.phoneNumber.value}
+          // classNameInputLabel={styles.labelForm}
+          type={contactFormValues.phoneNumber.type}
+          error={contactFormValues.phoneNumber.hasError && !!contactFormValues.phoneNumber.error}
+          required={contactFormValues.phoneNumber.value === '' ? true : false}
+          className={styles[contactFormValues.phoneNumber.name]}
+          // helperText={contactFormValues.phoneNumber.error}
+        />
+        <TextAreaField
+          showPlaceholder={true}
+          name={contactFormValues.message.name}
+          value={contactFormValues.message.value}
+          fieldClassName={styles.messageField}
+          label={t(`${contactFormValues.message.placeHolder}`)}
+          className={styles[contactFormValues.message.name]}
+          onChange={textAreaChange}
+        />
+
+        <div className={styles.confirmBlock}>
+          <span className={styles.termsConditionsLabel}>
+            <Translate i18nKey='contactForm.termsConditions'>
+              <a href={userUrl} target='_blank' className={styles.link}>Nutzungsbedingungen</a>
+            </Translate>
+          </span>
+          <FormCheckbox checkboxClassName={styles.checkboxField} field={contactFormValues.checkBox} label={renderTermsLabel()} />
+        </div>
+        {renderCaptcha()}
+        <Button
+          disabled={formStatus === 'pending' || !contactFormValues.formIsValid}
+          onClick={handleFormSubmit}
+          color='primary'
+          className={styles.formSubmit}
+          loading={isLoadingCurrent}
+        >
+          {formStatus === 'pending' && <span className={styles.spinnerWait} /> || t('contactForm.send')}
+        </Button>
+      </form>
+    );
+  };
+  return (
+      <InfoBlockWrapper containerClassName={styles.container} title={t('contactForm.title')}>
+        <div className={styles.contentWrap}>
+          <p>{t('contactForm.topText1')}</p>
+          <p>{t('contactForm.topText2')} <a className={styles.link} href={dataUrl} target='_blank'>{t('contactForm.topTextLink')}</a></p>
+          <p>{t('contactForm.topText3')}</p>
+        </div>
+        {!isRequested ? renderForm() : renderThankYou()}
+      </InfoBlockWrapper>
+  );
+};
+
+export default ContactForm;