%PDF-
%PDF-
Mini Shell
Mini Shell
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)),
);
Zerion Mini Shell 1.0