%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.4cc3a2e1590a4463a5f392ddcc26929e/static/js/components/SignUpBusiness/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.4cc3a2e1590a4463a5f392ddcc26929e/static/js/components/SignUpBusiness/index.jsx |
import React from "react"; import PropTypes from "prop-types"; import { withTranslation } from "react-i18next"; import { Grid, MenuList, MenuItem } from "@material-ui/core"; import { withStyles } from "@material-ui/core/styles"; // import { v4 as uuidv4 } from "uuid"; import Typography from "@material-ui/core/Typography"; import { Field, reduxForm } from "redux-form"; import { normalizePhoneNumber } from "utils/normalize"; import { Modal } from "common/components/Modal/Modal"; import { Box, Button, styles, RenderField, LoadingIndicator, Password, } from "common/components"; import configFunc from "config/config"; import MIXPANEL_ACTIONS from "constants/mixpanel_actions"; import Agree from "components/Agree"; import CountryDropdownContainer from "containers/CountryDropdownContainer"; import addUserIcon from "assets/images/user-add.svg"; import infoIcon from "assets/images/check-circle-green.svg"; import { trackMixpanelActions, capitalizeFirstLetter, formDataForMixPanel, } from "utils"; import { emailPattern, maxLength, minPasswordLength, minLength, namePattern, phonePattern, required, numbersOnlyPattern, } from "utils/fieldValidations"; import { getLanguage } from "utils/getLanguage"; import { setDropOffables, clearDropOffables } from "../DropOff"; import Packages from "./Packages"; import ChoosePaymentMethod from "./ChoosePaymentMethod"; import Adyen from "./Adyen"; import BrainTree from "./BrainTree"; import DirectDebit from "./DirectDebit/DirectDebit"; import DirectDebitTerms from "./DirectDebit/DirectDebitTerms"; const { businessUrl, ipqsScriptUrl } = configFunc(); const minLength2 = minLength(2); const minLength7 = minLength(7); const maxLength45 = maxLength(45); const minLength8 = minLength(8); const maxLength8 = maxLength(8); const minLength10 = minLength(10); const maxLength10 = maxLength(10); const pecEmailValidator = (value) => (!value ? undefined : emailPattern(value)); class SignUpBusinessV2 extends React.Component { constructor(props) { super(props); this.state = { paymentMethodId: 0, paymentMethod: {}, signUpForm: { userId: "", requestId: "", deviceId: "", email: "", firstName: "", lastName: "", organisation: "", organizationnumber: "", packageId: "0", password: "", phone: "", city: "", street: "", postalCode: "", sdiRecipientCode: "", pecEmailAddress: "", }, sepa: { sepaFirstName: "", sepaLastName: "", sepaEmail: "", sepaBic: "", sepaIban: "", countryCode: this.props.countryCode, }, directDebit: { companyName: "", companyNumber: "", firstName: "", lastName: "", countryCode: "", mobilePhone: "", paymentConfigurationId: "", email: "", street: "", streetNumber: "", postalCode: "", city: "", }, directDebitModalOpen: false, termsModalOpen: false, language: getLanguage(), }; // this.preselectedPaymentMethod = false; this.intervalId = null; this.intervalId2 = null; this.intervalId3 = null; window.IPQ = { setUserId: (v) => { const userId = v; window.Startup.Init(); window.Startup.Store("userID", userId); window.Startup.AfterResult((result) => { this.setState((prevState) => ({ signUpForm: { ...prevState.signUpForm, requestId: result.request_id, userId, deviceId: result.device_id, }, })); }); window.Startup.Resume(); }, Callback: () => { window.Startup.Pause(); }, }; const script = document.createElement("script"); script.src = ipqsScriptUrl; script.async = true; document.body.appendChild(script); } componentDidMount() { // otherwise check exist comes from private flow if (this.props.currentStep === 3) { const searchParams = new URLSearchParams(window.location.search); if (searchParams.get("params")) { const parts = searchParams.get("params").split(":"); if (parts.length === 2) { const paymentMethod = { "Payment Method": parts[1].replace(/_/g, " "), "Card Type": parts[0], }; const mpEvent = searchParams.get("cancel") ? MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_PAYMENT_METHOD_ERROR : MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_PAYMENT_METHOD_SUCCESS; trackMixpanelActions(mpEvent, paymentMethod); } } if (searchParams.get("billingAccountId")) { this.props.checkDirectDebitStatus(searchParams.get("billingAccountId")); } } else { this.props.checkExistingUser(""); trackMixpanelActions(MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_START, { category: "Selfservice", channel: "DesktopWeb", eventType: "click", label: MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_START, }); } this.setState((prevState) => ({ signUpForm: { ...prevState.signUpForm, packageId: `${this.props.packageId}`, }, })); const keys = this.getKeys(); this.props.getProductPackageInfo(keys); } componentDidUpdate(prevProps) { const { language } = prevProps.i18n; if (this.state.language !== language) { // eslint-disable-next-line react/no-did-update-set-state this.setState({ language }); const { paymentMethodId } = this.state; const paymentMethod = this.props.signUpBusinessState.paymentMethods.filter( (el) => paymentMethodId === el.id, )[0]; if (paymentMethod) { this.props.setBusinessPaymentMethod({ billingAccountId: this.props.signUpBusinessState.billingAccount.id, customerId: this.props.signUpBusinessState.customer.id, paymentMethodId, paymentMethod, language: getLanguage(), }); } } if ( this.props.company !== prevProps.company && this.props.getCompanyInfoState.fillCompanyFields === true ) { this.handleCompanyChange(); } if (this.props.signUpBusinessState.paymentMethodStatus === 1) { // credit card ok trackMixpanelActions( MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_PAYMENT_METHOD_SUCCESS, { category: "Selfservice", channel: "DesktopWeb", eventType: "click", label: MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_PAYMENT_METHOD_SUCCESS, formData: this.props.signUpBusinessState.requestedPaymentMethod, }, ); this.props.handleNext(); } if ( this.props.signUpBusinessState.userIsRegistered !== prevProps.signUpBusinessState.userIsRegistered && this.props.signUpBusinessState.userIsRegistered === 1 ) { /* SUCCESSFULLY registered user */ this.props.handleNext(); } if (this.props.countryCode !== prevProps.countryCode) { const keys = this.getKeys(); this.props.getProductPackageInfo(keys); } if ( this.props.signUpBusinessState.userIsRegistered !== prevProps.signUpBusinessState.userIsRegistered && this.props.signUpBusinessState.userIsRegistered === 2 ) { /* ERROR registered user */ } if ( prevProps.signUpBusinessState.sepaIsRegistered !== 1 && this.props.signUpBusinessState.sepaIsRegistered === 1 ) { /* SUCCESSFULLY registered SEPA MoP */ trackMixpanelActions( MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_PAYMENT_METHOD_SUCCESS, { category: "Selfservice", channel: "DesktopWeb", eventType: "click", label: MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_PAYMENT_METHOD_SUCCESS, formData: this.props.signUpBusinessState.requestedPaymentMethod, }, ); this.props.handleNext(); } } getKeys = () => { const { countryData, countryCode, environment } = this.props; const { productPackages } = countryData[countryCode]; const environmentProductPackages = productPackages ? productPackages[environment] : []; return environmentProductPackages.map(({ key }) => key); }; handleCompanyChange = () => { const { company, change, checkExistingUser } = this.props; change("organisation", company.name); change("street", company.postalAddress.address); change("city", capitalizeFirstLetter(company.postalAddress.city)); change("postalCode", company.postalAddress.zipcode); change("organizationnumber", company.company.nationalRegistrationNumber); this.getCompanyVatInfo(company.company.nationalRegistrationNumber); if (company.internet.emails && company.internet.emails.length > 0) { change("email", company.internet.emails[0]); } else { change("email", ""); } if (company.phones && company.phones.length > 0) { const phone = company.phones[0].replace(/ /g, ""); const phoneNr = `${ this.props.countryData[this.props.countryCode].code }${phone}`; change("phone", phoneNr); checkExistingUser(phoneNr); } else { change("phone", ""); } }; /** * */ pecRequired = (value) => (this.props.isPecFieldsVisible === true ? required(value) : undefined); /** * * @param {String} v - Company Name */ getCompaniesInfo = (v) => { clearTimeout(this.intervalId); this.intervalId = setTimeout(() => { this.props.getCompaniesInfo({ companyName: v, countryCode: this.props.countryCode, }); }, 1000); }; /** * @param {String} v - Phone number */ checkExistingUser = (v) => { clearTimeout(this.intervalId2); this.intervalId2 = setTimeout(() => { this.props.checkExistingUser(v); }, 1200); }; /** * @param {String} v - organization number */ getCompanyVatInfo = (v) => { clearTimeout(this.intervalId3); this.intervalId3 = setTimeout(() => { this.props.getCompanyVatInfo( { countrycode: this.props.countryCode, organizationnumber: v, }, this.props.isCountryHaveServerVatValidation, ); }, 1000); }; handleSubmit1 = () => { this.setState((prevState) => ({ signUpForm: { ...prevState.signUpForm, email: this.props.signUpForm.values.email, firstName: this.props.signUpForm.values.firstName, lastName: this.props.signUpForm.values.lastName, city: this.props.signUpForm.values.city || "", street: this.props.signUpForm.values.street || "", postalCode: this.props.signUpForm.values.postalCode || "", organisation: this.props.signUpForm.values.organisation, organizationnumber: this.props.signUpForm.values.organizationnumber, password: this.props.signUpForm.values.password, phone: this.props.signUpForm.values.phone, /* TODO null if not ITALY */ sdiRecipientCode: this.props.signUpForm.values.sdiRecipientCode ? this.props.signUpForm.values.sdiRecipientCode : "", pecEmailAddress: this.props.signUpForm.values.pecEmailAddress ? this.props.signUpForm.values.pecEmailAddress : "", }, })); this.props.handleNext(); const mpData = this.state.signUpForm; trackMixpanelActions( MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_FORM_SUBMIT, { category: "Selfservice", channel: "DesktopWeb", eventType: "click", label: MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_FORM_SUBMIT, formData: formDataForMixPanel(mpData), }, ); }; /** * */ handleSubmit2 = () => { clearDropOffables(); this.props.signUpCorporateLogin( this.state.signUpForm, this.props.selectedCode, ); }; handleSubmitSepa = () => { this.props.registerSepa({ sepa: this.state.sepa, customer: this.props.signUpBusinessState.customer, billingAccount: this.props.signUpBusinessState.billingAccount, paymentMethodId: this.state.paymentMethodId, }); }; handleFillDirectDebitForm = (formData) => { this.setState((prevState) => ({ directDebit: { companyName: prevState.signUpForm.organisation, firstName: prevState.signUpForm.firstName, lastName: prevState.signUpForm.lastName, countryCode: this.props.countryCode, mobilePhone: prevState.signUpForm.phone, paymentConfigurationId: prevState.paymentMethodId, email: formData.email, street: formData.street, streetNumber: formData.streetNumber, postalCode: formData.postalCode, city: formData.city, companyNumber: prevState.signUpForm.organizationnumber, }, directDebitModalOpen: false, termsModalOpen: true, })); }; handleSubmitDirectDebitForm = () => { this.setState({ termsModalOpen: false }); this.props.registerDirectDebit({ data: this.state.directDebit, billingAccountId: this.props.signUpBusinessState.billingAccount.id, }); }; /* cantSubmitSepa = () => { if ( this.props.signUpForm && this.props.signUpForm.syncErrors && (this.props.signUpForm.syncErrors.sepaFirstName || this.props.signUpForm.syncErrors.sepaLastName || this.props.signUpForm.syncErrors.sepaBic || this.props.signUpForm.syncErrors.sepaEmail || this.props.signUpForm.syncErrors.sepaIban) ) { return true; } return false; }; */ /** * */ selectPackage = (id) => { if (!id) { id = "0"; } this.setState( (prevState) => ({ signUpForm: { ...prevState.signUpForm, packageId: `${id}`, }, }), this.handleSubmit2, ); const mpData = this.state.signUpForm; trackMixpanelActions(MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_PACKAGE, { category: "Selfservice", channel: "DesktopWeb", eventType: "click", label: MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_PACKAGE, formData: formDataForMixPanel(mpData), }); }; /** * * @param {Object} event */ receiveMessage = (event) => { const response = event.data; if (response === "accept") { window.removeEventListener("message", this.receiveMessage); this.props.setBusinessIframeSuccess({}); } else { this.props.setBusinessIframeError({}); window.removeEventListener("message", this.receiveMessage); } }; selectPaymentMethod = (v) => { const paymentMethodId = parseInt(v, 10); const paymentMethod = this.props.signUpBusinessState.paymentMethods.filter( (el) => paymentMethodId === el.id, )[0]; if (paymentMethod && paymentMethod.paymentMethod) { this.setState({ paymentMethodId, paymentMethod, }); this.props.setBusinessPaymentMethod({ billingAccountId: this.props.signUpBusinessState.billingAccount.id, customerId: this.props.signUpBusinessState.customer.id, paymentMethodId, paymentMethod, language: getLanguage(), }); if (paymentMethod.paymentMethod === "AFTER_PAY_DIRECT_DEBIT") { this.setState({ directDebitModalOpen: true }); } trackMixpanelActions( MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_PAYMENT_METHOD, { category: "Selfservice", channel: "DesktopWeb", eventType: "click", label: MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_PAYMENT_METHOD, formData: paymentMethod, }, ); } else { console.error("NO paymentMethod"); } }; showPaymentMethod = (paymentMethodName) => { const { showPaymentMethodContainer, requestedPaymentMethod } = this.props.signUpBusinessState; return ( this.state.paymentMethod?.paymentMethod === paymentMethodName && showPaymentMethodContainer && requestedPaymentMethod !== "" ); }; isLoading() { return ( this.props.signUpBusinessState.isLoading || this.props.userIsLoading || this.props.getCompanyInfoState.isLoading || (this.state.signUpForm.userId === "" && this.props.currentStep === 1) ); } /** * */ renderSepa() { const { t } = this.props; return ( <Grid container spacing={2}> <Grid item xs={12}> <Field skipTouched={false} component={RenderField} type="text" t={t} triggerOnBlur name="sepaFirstName" id="sepaFirstName" errorClass="" placeholder={t("sepaFirstName")} validate={[required, minLength2]} onChange={(e, v) => { this.setState((prevState) => ({ sepa: { ...prevState.sepa, sepaFirstName: v, }, })); }} /> </Grid> <Grid item xs={12}> <Field component={RenderField} errorClass="" id="sepaLastName" name="sepaLastName" placeholder={t("sepaLastName")} t={t} triggerOnBlur type="text" validate={[required, minLength2]} onChange={(e, v) => { this.setState((prevState) => ({ sepa: { ...prevState.sepa, sepaLastName: v, }, })); }} /> </Grid> <Grid item xs={12}> <Field skipTouched={false} component={RenderField} type="text" t={t} triggerOnBlur name="sepaEmail" id="sepaEmail" errorClass="" placeholder={t("sepaEmail")} validate={[required, emailPattern]} onChange={(e, v) => { this.setState((prevState) => ({ sepa: { ...prevState.sepa, sepaEmail: v, }, })); }} /> </Grid> <Grid item xs={12}> <Field skipTouched={false} component={RenderField} type="text" t={t} triggerOnBlur name="sepaIban" id="sepaIban" errorClass="" placeholder={t("sepaIban")} validate={[required, minLength2]} onChange={(e, v) => { this.setState((prevState) => ({ sepa: { ...prevState.sepa, sepaIban: v, }, })); }} /> </Grid> <Grid item xs={12}> <Field skipTouched={false} component={RenderField} type="text" t={t} triggerOnBlur name="sepaBic" id="sepaBic" errorClass="" placeholder={t("sepaBic")} validate={[required, minLength2]} onChange={(e, v) => { this.setState((prevState) => ({ sepa: { ...prevState.sepa, sepaBic: v, }, })); }} /> </Grid> <Grid item xs={12}> <Button primary fullWidth type="submit" onClick={this.props.handleSubmit((e) => { this.handleSubmitSepa(e); })} > {t("general-confirm")} </Button> </Grid> </Grid> ); } /** * */ renderNextButtons() { const { t } = this.props; const { classes } = this.props; if ( this.props.currentStep === 2 && (this.state.paymentMethod.paymentMethod === "ADYEN" || this.state.paymentMethod.paymentMethod === "BRAINTREE" || this.state.paymentMethod.paymentMethod === "AFTER_PAY_DIRECT_DEBIT" || this.state.paymentMethod.paymentMethod === "PAYPAL") ) { return ( <Grid container spacing={2} className={classes.narrowedForm}> {/** ******************************************************* */} {this.props.signUpBusinessState.requestedPaymentMethod !== "" ? ( <Grid item xs={12}> <a className={this.props.classes.link} onClick={() => { trackMixpanelActions( MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_PAYMENT_METHOD_SKIP, { category: "Selfservice", channel: "DesktopWeb", eventType: "click", label: MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_PAYMENT_METHOD_SKIP, }, ); this.props.handleNext(); }} > {t("signup.paymentMethodSelection.skip")} </a> </Grid> ) : null} </Grid> ); } return null; } /** * */ renderPayPal() { if ( this.state.paymentMethod && this.state.paymentMethod.paymentMethod && this.state.paymentMethod.paymentMethod === "PAYPAL" && this.props.signUpBusinessState.showPaymentMethodContainer === true && this.props.signUpBusinessState.requestedPaymentMethod !== "" ) { window.location.href = this.props.signUpBusinessState.requestedPaymentMethod; return null; } return null; } renderSuggestionList() { let suggestionsListComponent; if ( this.props.getCompanyInfoState.suggestionWindowIsOpen === true && this.props.getCompanyInfoState.companies.length > 0 ) { suggestionsListComponent = ( <Grid item xs={12}> <MenuList> <MenuItem className={this.props.classes.justifyContentRight} onClick={this.props.getCompaniesInfoReset} > <Typography color="secondary" component="span"> × </Typography> </MenuItem> {this.props.getCompanyInfoState.companies.map((suggestion) => { let className; // Flag the active suggestion with a class if (suggestion.id === this.state.selectedSuggestionId) { className = "suggestion-active"; } return ( <MenuItem key={suggestion.id} className={className} onClick={() => { this.props.loadCompany({ companyId: suggestion.id }); }} > {suggestion.company.legalName} </MenuItem> ); })} </MenuList> </Grid> ); } return suggestionsListComponent; } /** * */ render() { const handleFieldActionEvent = (e) => { // Send Mixpanel event for field focus out events const fieldValue = e.target.name === "password" ? "*".repeat(e.target.value.length) : e.target.value; trackMixpanelActions( MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_FIELD_INTERACTION, { category: "Selfservice", channel: "DesktopWeb", eventType: "click", label: MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_FIELD_INTERACTION, interactionData: { fieldName: e.target.name, fieldValue, eventType: e._reactName, }, }, ); }; const { classes, config, t, i18n, countryCode, handleSubmit, } = this.props; const vatErrorClass = this.props.getCompanyInfoState && this.props.isCountryHaveServerVatValidation && this.props.getCompanyInfoState.vat && this.props.getCompanyInfoState.vat.status ? this.props.getCompanyInfoState.vat.status.replaceAll(".", "-") : ""; const addressValidation = this.props.countryCode === "IT" ? [required, minLength2] : false; const { currentStep } = this.props; return ( <> <LoadingIndicator loading={this.isLoading()} /> <form id="signUpBusinessForm" name="signUpBusinessForm" onSubmit={handleSubmit((values) => { window.IPQ.setUserId(`${values.phone.substring(1)}`); this.handleSubmit1(values); })} className={classes.signUpBusinessForm} > {currentStep === 0 ? ( <Grid container spacing={2} className={classes.narrowedForm}> {/** ******************************************************* */} <Grid item xs={12}> <CountryDropdownContainer withBorder fullWidthDropdown /> </Grid> <Grid item xs={12}> <Field component={RenderField} errorClass="" id="user.organisation" name="organisation" placeholder={t("organizationName")} skipTouched={false} t={t} triggerOnBlur type="text" validate={[required, minLength2]} onChange={(e) => { this.getCompaniesInfo(e.target.value); }} onBlur={(e) => handleFieldActionEvent(e)} /> </Grid> {this.renderSuggestionList()} <Grid item xs={12}> <Field component={RenderField} errorClass={vatErrorClass} id="vatNumber" name="organizationnumber" placeholder={t("vatNumber")} skipTouched t={t} triggerOnBlur type="text" validate={[ ...(this.props.isCountryHaveServerVatValidation === true ? [required] : []), ...(this.props.countryCode === "NL" ? [numbersOnlyPattern, minLength8, maxLength8] : []), ...(this.props.countryCode === "BE" ? [numbersOnlyPattern, minLength10, maxLength10] : []), ]} onChange={(e) => { this.getCompanyVatInfo(e.target.value); }} onFocus={() => { this.props.getCompaniesInfoReset(); }} onBlur={(e) => handleFieldActionEvent(e)} /> </Grid> {/* ********* PEC ************** */} {this.props.isPecFieldsVisible === true ? ( <Grid item xs={12} sm={6}> <Field skipTouched={false} component={RenderField} type="text" t={t} triggerOnBlur name="pecEmailAddress" id="pecEmailAddress" errorClass="" placeholder={t("general-pec-email")} validate={[pecEmailValidator]} onFocus={this.props.getCompaniesInfoReset} onBlur={(e) => handleFieldActionEvent(e)} /> </Grid> ) : null} {this.props.isPecFieldsVisible === true ? ( <Grid item xs={12} sm={6}> <Field skipTouched={false} component={RenderField} type="text" t={t} triggerOnBlur name="sdiRecipientCode" id="sdiRecipientCode" errorClass="" placeholder={t("general-sdi-code")} validate={[this.pecRequired]} onFocus={this.props.getCompaniesInfoReset} onBlur={(e) => handleFieldActionEvent(e)} /> </Grid> ) : null} {/* ********* PEC end ************** */} <Grid item xs={12}> <Field component={RenderField} type="tel" t={t} skipTouched triggerOnBlur name="phone" id="user.phone" placeholder={t("signInUsernameRegflow")} defaultCountry={countryCode} errorClass={ this.props.checkExistingUserState && this.props.checkExistingUserState.isKnownUser && this.props.checkExistingUserState.isKnownUser === true ? "exists" : undefined } validate={[required, minLength7, phonePattern]} onChange={(value) => { this.checkExistingUser(value); }} normalize={(v) => normalizePhoneNumber( v, this.props.countryData[this.props.countryCode].code, )} onFocus={this.props.getCompaniesInfoReset} onBlur={(e) => handleFieldActionEvent(e)} /> </Grid> <Grid item xs={12}> <Field skipTouched={false} component={RenderField} type="text" t={t} triggerOnBlur name="street" id="user.street" errorClass="" placeholder={t("street")} validate={addressValidation} onFocus={this.props.getCompaniesInfoReset} onBlur={(e) => handleFieldActionEvent(e)} /> </Grid> <Grid item xs={12} sm={6}> <Field skipTouched={false} component={RenderField} type="text" t={t} triggerOnBlur name="postalCode" id="user.postalCode" errorClass="" placeholder={t("postalCode")} validate={addressValidation} onFocus={this.props.getCompaniesInfoReset} onBlur={(e) => handleFieldActionEvent(e)} /> </Grid> <Grid item xs={12} sm={6}> <Field skipTouched={false} component={RenderField} type="text" t={t} triggerOnBlur name="city" id="city" errorClass="" placeholder={t("city")} validate={addressValidation} onFocus={this.props.getCompaniesInfoReset} onBlur={(e) => handleFieldActionEvent(e)} /> </Grid> <Grid item xs={12}> <Field skipTouched={false} component={RenderField} type="text" t={t} triggerOnBlur name="email" id="user.email" errorClass="" placeholder={t("email")} validate={[required, emailPattern]} onFocus={this.props.getCompaniesInfoReset} onBlur={(e) => handleFieldActionEvent(e)} /> </Grid> <Grid item xs={12} sm={6}> <Field skipTouched={false} component={RenderField} type="text" t={t} triggerOnBlur name="firstName" id="user.firstName" errorClass="" placeholder={t("general-firstname")} validate={[required, minLength2, namePattern]} onFocus={this.props.getCompaniesInfoReset} onBlur={(e) => handleFieldActionEvent(e)} /> </Grid> <Grid item xs={12} sm={6}> <Field skipTouched={false} component={RenderField} type="text" t={t} triggerOnBlur name="lastName" id="user.lastName" errorClass="" placeholder={t("general-lastname")} validate={[required, minLength2, namePattern]} onFocus={this.props.getCompaniesInfoReset} onBlur={(e) => handleFieldActionEvent(e)} /> </Grid> <Grid item xs={12}> <Password> <Field autoComplete="new-password" component={RenderField} type="password" t={t} triggerOnBlur name="password" id="user.password" errorClass="" placeholder={t("password")} validate={[required, minPasswordLength, maxLength45]} onFocus={this.props.getCompaniesInfoReset} onBlur={(e) => handleFieldActionEvent(e)} /> </Password> </Grid> <Agree t={t} config={config} language={i18n.language} /> <Grid item xs={12}> <Button primary fullWidth type="submit" onClick={() => { const mpData = this.state.signUpForm; trackMixpanelActions( MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_FORM_SUBMIT_BUTTON, { formData: formDataForMixPanel(mpData), }, ); }} > {t("general-next")} </Button> </Grid> </Grid> ) : null} {/** ******************************************************* */} {/** ******************************************************* */} {/** ******************************************************* */} {currentStep === 1 ? ( <Grid container spacing={2} alignItems="stretch"> {this.state.signUpForm.userId !== "" ? ( <> <Grid item xs={12}> <h2 className="h1">{t("signup.packageSelection.title")}</h2> </Grid> <Packages countryCode={this.props.countryCode} countryData={this.props.countryData} productPackagesInfo={this.props.productPackagesInfo} packageId={this.state.signUpForm.packageId} onClick={this.selectPackage} /> <Grid item xs={12} className={classes.vatExclusionDisclaimer}> {t("signup.packageSelection.vatExcluded")} {" "} {t("signup.packageSelection.parkingCostExcluded")} </Grid> {this.props.signUpBusinessState.userIsRegistered === 2 ? ( <Grid item xs={12}> <Button color="primary" fullWidth variant="contained" size="large" type="button" classes={{ root: classes.button, selected: classes.buttonSelected, }} onClick={this.props.handlePrev} > {t("general-back")} </Button> </Grid> ) : null} </> ) : ( <Grid item xs={12}> <h2 className="h1">{t("signup.packageSelection.title")}</h2> </Grid> )} </Grid> ) : null} {/** ******************************************************* */} {/** ******************************************************* */} {/** ******************************************************* */} {currentStep === 2 && ( <> {this.props.signUpBusinessState.isLoading === false && ( <ChoosePaymentMethod paymentMethods={this.props.signUpBusinessState.paymentMethods} paymentMethodId={this.state.paymentMethodId} selectPaymentMethod={this.selectPaymentMethod} subtitle={t("signup.paymentMethodSelection.description")} /> )} {this.showPaymentMethod("ADYEN") && ( <Box className={classes.narrowedForm}> <Adyen requestedPaymentMethod={ this.props.signUpBusinessState.requestedPaymentMethod } receiveMessage={this.receiveMessage} /> </Box> )} {this.showPaymentMethod("BRAINTREE") && ( <Box className={classes.narrowedForm}> <BrainTree requestedPaymentMethod={ this.props.signUpBusinessState.requestedPaymentMethod } receiveMessage={this.receiveMessage} /> </Box> )} {this.renderPayPal()} {this.showPaymentMethod("SEPA") && this.renderSepa()} {this.renderNextButtons()} <Modal isOpen={this.state.directDebitModalOpen} onClose={() => { this.setState({ directDebitModalOpen: false }); }} title={t("directDebit.setUp")} onConfirm={this.handleFillDirectDebitForm} Component={DirectDebit} componentDefaultValue={this.state.signUpForm} /> <Modal isOpen={this.state.termsModalOpen} onClose={() => this.setState({ termsModalOpen: false })} title={t("directDebit.setUp")} onConfirm={this.handleSubmitDirectDebitForm} Component={DirectDebitTerms} componentDefaultValue={false} onBack={() => this.setState({ termsModalOpen: false, directDebitModalOpen: true, })} /> </> )} {/** ******************************************************* */} {/** ******************************************************* */} {/** ******************************************************* */} {currentStep === 3 ? ( <Grid container spacing={2} className={`${classes.registrationFinishedWrapper} ${classes.narrowedForm}`} > <Grid item xs={12}> <img src={infoIcon} className="text-center" alt="thumbs-up" style={{ margin: "20px" }} /> <h2 className={classes.finishedRegistrationHeader}> {t("signupBusinessRegistrationCompleteHeader")} </h2> <p style={{ margin: "7px", whiteSpace: "pre-wrap" }}> {t("signupBusinessRegistrationCompleteText").replace( ".", ".\n\n", )} </p> <hr className={classes.horizontalLine} /> <h2 className={classes.finishedRegistrationHeader}> {t("signupBusinessInviteHeader")} </h2> <p className={classes.finishedRegistrationParagraph}> {t("signupBusinessInviteText")} </p> <br /> </Grid> <Grid item xs={12} sm={6}> <Button classes={{ root: classes.buttonRoot, }} className={this.props.classes.buttonWhite} fullWidth color="default" variant="contained" size="large" type="button" onClick={() => { trackMixpanelActions( MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_END, { category: "Selfservice", channel: "DesktopWeb", eventType: "click", label: MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_END, formData: { link: "/business/admin/", }, }, ); window.location.href = `${businessUrl}`; }} > {t("general-not-now")} {" "} </Button> </Grid> <Grid item xs={12} sm={6}> <Button classes={{ root: classes.buttonRoot, }} color="primary" fullWidth variant="contained" size="large" type="button" onClick={() => { trackMixpanelActions( MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_END, { category: "Selfservice", channel: "DesktopWeb", eventType: "click", label: MIXPANEL_ACTIONS.BUSINESS_REGISTRATION_V2_END, formData: { link: "/business/admin/users/", }, }, ); window.location.href = `${businessUrl}/users/${i18n.language}`.toLowerCase(); }} > <img src={addUserIcon} style={{ margin: "0px 10px 0px 0px" }} alt="user-add" /> {t("general-add-users")} </Button> </Grid> </Grid> ) : null} </form> </> ); } } SignUpBusinessV2.propTypes = { change: PropTypes.func.isRequired, checkDirectDebitStatus: PropTypes.func.isRequired, checkExistingUser: PropTypes.func.isRequired, checkExistingUserState: PropTypes.instanceOf(Object), company: PropTypes.object.isRequired, classes: PropTypes.instanceOf(Object).isRequired, config: PropTypes.instanceOf(Object), countryCode: PropTypes.string, countryData: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.instanceOf(Object)), PropTypes.instanceOf(Object), ]), currentStep: PropTypes.number, environment: PropTypes.string, getCompaniesInfo: PropTypes.func.isRequired, getCompaniesInfoReset: PropTypes.func.isRequired, getCompanyInfoState: PropTypes.instanceOf(Object), getCompanyVatInfo: PropTypes.func.isRequired, getProductPackageInfo: PropTypes.func.isRequired, handleNext: PropTypes.func.isRequired, handlePrev: PropTypes.func.isRequired, handleSubmit: PropTypes.func.isRequired, i18n: PropTypes.instanceOf(Object).isRequired, isCountryHaveServerVatValidation: PropTypes.bool, isPecFieldsVisible: PropTypes.bool, loadCompany: PropTypes.func.isRequired, packageId: PropTypes.string, productPackagesInfo: PropTypes.arrayOf(PropTypes.instanceOf(Object)), registerSepa: PropTypes.func.isRequired, registerDirectDebit: PropTypes.func.isRequired, selectedCode: PropTypes.string, setBusinessIframeError: PropTypes.func.isRequired, setBusinessIframeSuccess: PropTypes.func.isRequired, setBusinessPaymentMethod: PropTypes.func.isRequired, signUpBusinessState: PropTypes.instanceOf(Object).isRequired, signUpCorporateLogin: PropTypes.func.isRequired, signUpForm: PropTypes.instanceOf(Object), t: PropTypes.func.isRequired, userIsLoading: PropTypes.bool, }; SignUpBusinessV2.defaultProps = { userIsLoading: false, getCompanyInfoState: {}, checkExistingUserState: {}, selectedCode: "", config: {}, countryData: {}, countryCode: "", signUpForm: {}, currentStep: 0, productPackagesInfo: [], packageId: `${0}`, environment: "", isCountryHaveServerVatValidation: false, isPecFieldsVisible: false, }; export default withTranslation()( reduxForm({ form: "signUpBusinessForm", enableReinitialize: true, onChange: setDropOffables, })(withStyles(styles)(SignUpBusinessV2)), );