) => {\r\n this.setState({ isPopupOpen: true });\r\n };\r\n // Open popup by clicking on join now button\r\n private _renderPopUp = () => {\r\n return (\r\n \r\n );\r\n };\r\n\r\n // Render Popup title\r\n private _renderPopupTitle = () => {\r\n const { popUpHeading } = this.props.config;\r\n return (\r\n \r\n \r\n {popUpHeading && (\r\n \r\n )}\r\n \r\n );\r\n };\r\n // Render popup footer\r\n private _renderPopupFooter = () => {\r\n return <>;\r\n };\r\n // Render popup body to show input fields\r\n private _renderPopupBody = () => {\r\n const subscribeResponse = this._getSubscribeResponse();\r\n const subscribeForm = this._renderForm();\r\n const { FormWrapper, FormContainer, nameInput, emailInput, checkboxPrivacyPolicy, subscribeButtton } = subscribeForm;\r\n return (\r\n \r\n {subscribeResponse}\r\n \r\n {nameInput}\r\n {emailInput}\r\n {checkboxPrivacyPolicy}\r\n {subscribeButtton}\r\n \r\n \r\n \r\n );\r\n };\r\n // Close popup and reset state\r\n private _closePopup = () => {\r\n this.setState({\r\n isPopupOpen: false,\r\n firstName: '',\r\n lastName: '',\r\n emailAddress: '',\r\n privacyPolicyChecked: false,\r\n firstNameError: false,\r\n lastNameError: false,\r\n emailError: false,\r\n requiredError: false,\r\n emailValidationError: false,\r\n privacyPolicyError: false,\r\n recaptchaError: false,\r\n responseReceived: false,\r\n responseError: false,\r\n reCaptchaChecked: false\r\n });\r\n };\r\n\r\n // Get all input fields and return as form fields\r\n private _renderForm(): ISubscribeNewsletterForm {\r\n return {\r\n FormWrapper: {\r\n className: 'newsletter-subscription',\r\n tag: 'div'\r\n },\r\n FormContainer: {\r\n className: 'newsletter-subscription-div',\r\n tag: 'div'\r\n },\r\n nameInput: this._renderFirstAndLastNameInput(),\r\n emailInput: this._renderEmailInput(),\r\n checkboxPrivacyPolicy: this._renderCheckboxPrivacyPolicy(),\r\n subscribeButtton: this._renderSubscribeButton()\r\n };\r\n }\r\n\r\n private _renderFirstAndLastNameInput(): React.ReactNode {\r\n return (\r\n \r\n
\r\n {this.state.firstNameError ? this._renderAlert('first-name-input') : ''}\r\n {this.state.lastNameError ? this._renderAlert('last-name-input') : ''}\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n {this.state.emailError || this.state.emailValidationError ? this._renderAlert('email-address-input') : ''}\r\n \r\n
\r\n );\r\n }\r\n\r\n private _isEmailValid = (email: string): boolean => {\r\n const regex = /^(([^<>()\\[\\]\\\\.,;:\\s@']+(\\.[^<>()\\[\\]\\\\.,;:\\s@']+)*)|('.+'))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n return regex.test(email);\r\n };\r\n\r\n private _renderCheckboxPrivacyPolicy(): React.ReactNode {\r\n return (\r\n \r\n {this.state.privacyPolicyError ? this._renderAlert('checkbox-privacy-policy') : ''}\r\n
\r\n
\r\n \r\n {this.props.resources.subscribeButtonLabel}\r\n \r\n
\r\n );\r\n }\r\n // Store input fields value to state\r\n private _handleChange = (name: string) => (e: React.ChangeEvent) => {\r\n const value = e.target.value;\r\n switch (name) {\r\n case 'firstName': {\r\n this.setState({\r\n firstName: value,\r\n firstNameError: false,\r\n requiredError: false,\r\n emailValidationError: false,\r\n privacyPolicyError: false\r\n });\r\n break;\r\n }\r\n case 'lastName': {\r\n this.setState({\r\n lastName: value,\r\n lastNameError: false,\r\n requiredError: false,\r\n emailValidationError: false,\r\n privacyPolicyError: false\r\n });\r\n break;\r\n }\r\n case 'emailAddress': {\r\n this.setState({\r\n emailAddress: value,\r\n emailError: false,\r\n requiredError: false,\r\n emailValidationError: false,\r\n privacyPolicyError: false\r\n });\r\n break;\r\n }\r\n case 'privacyPolicy': {\r\n const isChecked =\r\n this._PrivacyPolicyRef.current && this._PrivacyPolicyRef.current.checked\r\n ? this._PrivacyPolicyRef.current.checked\r\n : false;\r\n this.setState({\r\n privacyPolicyChecked: isChecked,\r\n requiredError: false,\r\n emailValidationError: false,\r\n privacyPolicyError: false\r\n });\r\n break;\r\n }\r\n default: {\r\n this.setState({ requiredError: false, emailValidationError: false, privacyPolicyError: false });\r\n }\r\n }\r\n };\r\n // Show error message on invalid email or if checkbox is not checked\r\n private _renderAlert(className: string): JSX.Element {\r\n const inputBoxErrors = this.state.firstNameError || this.state.lastNameError || this.state.emailError;\r\n if (inputBoxErrors) {\r\n this.requiredErrorMessage = this.props.resources.requiredTextErrorMessage;\r\n }\r\n if (this.state.emailAddress !== '' && this.state.emailValidationError) {\r\n this.emailValidationErrorMessage = this.props.resources.emailValidationErrorMessage;\r\n }\r\n if (!this.state.privacyPolicyChecked) {\r\n this.privacyPolicyErrorMessage = this.props.resources.privacyPolicyErrorMessage;\r\n }\r\n const requiredError = this.state.requiredError;\r\n const emailValidationError = this.state.emailValidationError;\r\n const privacyPolicyError = this.state.privacyPolicyError;\r\n return (\r\n <>\r\n {requiredError && (\r\n \r\n {this.requiredErrorMessage && (\r\n <>\r\n \r\n {this.requiredErrorMessage}\r\n \r\n )}\r\n \r\n )}\r\n {emailValidationError && (\r\n \r\n {this.emailValidationErrorMessage && (\r\n <>\r\n \r\n {this.emailValidationErrorMessage}\r\n \r\n )}\r\n \r\n )}\r\n {privacyPolicyError && (\r\n \r\n {this.privacyPolicyErrorMessage && (\r\n <>\r\n \r\n {this.privacyPolicyErrorMessage}\r\n \r\n )}\r\n \r\n )}\r\n \r\n );\r\n }\r\n\r\n // Get API response\r\n private _getSubscribeResponse(): React.ReactNode {\r\n return this.state.responseReceived && this.responseMessage ? (\r\n \r\n
\r\n {this.responseMessage}\r\n
\r\n