From 2d61300074c111637250d7a28a797fcac3497217 Mon Sep 17 00:00:00 2001 From: Mavis Ou Date: Thu, 25 Jan 2024 15:27:27 -0800 Subject: [PATCH] Allow newsletter signup module to have two optional name fields & update newsletter module on Bannered Campaign Page (#11761) * removed a styling class that's not needed * improvement of the existing code * repurposed the existing input-email.jsx to a general input-text.jsx * Allow newsletter module to show two optional fields (first name and last name) & replaced the newsletter module on Bannered Campaign Page to use to new implementation approach. * allow options to show country field and language field by default --- .../wagtailpages/bannered_campaign_page.html | 7 +- .../templates/wagtailpages/tags/cta.html | 2 - .../atoms/{input-email.jsx => input-text.jsx} | 12 +- .../organisms/default-layout-signup.jsx | 166 +++++++++++++----- .../organisms/form-specific-style.js | 8 + .../organisms/with-submission-logic.jsx | 4 +- 6 files changed, 142 insertions(+), 57 deletions(-) rename source/js/components/newsletter-signup/atoms/{input-email.jsx => input-text.jsx} (92%) diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html index eec975add0b..ee046230cdc 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html @@ -63,7 +63,12 @@ {% if page.signup %} {% with localized_signup=page.signup.localized %}
{ let inputField = ( ({ formData: { @@ -90,21 +87,46 @@ class DefaultSignupForm extends Component { } } + handleInputFocus() { + ReactGA.event({ + category: `signup`, + action: `form focus`, + label: `Signup form input focused`, + }); + } + + handleFirstNameChange(event) { + this.updateFormFieldValue(event.target.name, event.target.value); + } + + handleLastNameChange(event) { + this.updateFormFieldValue(event.target.name, event.target.value); + } + + handleEmailFocusAndInput() { + this.handleInputFocus(); + + this.setState({ showCountryField: true, showLanguageField: true }); + } + handleEmailChange(event) { - this.updateFormFieldValue("email", event.target.value); + this.updateFormFieldValue(event.target.name, event.target.value); this.toggleSubmitButton(event.target.value === ""); } handleCountryChange(event) { - this.updateFormFieldValue("country", event.target.value); + this.updateFormFieldValue(event.target.name, event.target.value); } handleLanguageChange(event) { - this.updateFormFieldValue("language", event.target.value); + this.updateFormFieldValue(event.target.name, event.target.value); } handlePrivacyChange(event) { - this.updateFormFieldValue("privacy", event.target.checked.toString()); + this.updateFormFieldValue( + event.target.name, + event.target.checked.toString() + ); } renderHeader() { @@ -131,18 +153,59 @@ class DefaultSignupForm extends Component { ); } + renderFirstNameField() { + const name = "firstName"; + + return ( + this.handleInputFocus()} + onChange={(event) => this.handleFirstNameChange(event)} + required={false} + outerMarginClasses={FIELD_MARGIN_CLASSES} + errorMessage={this.props.errors[name]} + fieldStyle={this.style.fieldStyle} + /> + ); + } + + renderLastNameField() { + const name = "lastName"; + + return ( + this.handleInputFocus()} + onChange={(event) => this.handleLastNameChange(event)} + required={false} + outerMarginClasses={FIELD_MARGIN_CLASSES} + errorMessage={this.props.errors[name]} + fieldStyle={this.style.fieldStyle} + /> + ); + } + renderEmailField() { const name = "email"; return ( - this.showAllFields()} - onInput={() => this.showAllFields()} + onFocus={() => this.handleEmailFocusAndInput()} + onInput={() => this.handleEmailFocusAndInput()} onChange={(event) => this.handleEmailChange(event)} required={true} outerMarginClasses={FIELD_MARGIN_CLASSES} @@ -152,33 +215,37 @@ class DefaultSignupForm extends Component { ); } - renderAdditionalFields() { - const nameCountry = "country"; - const nameLanguage = "language"; + renderCountryField() { + const name = "country"; return ( - <> - this.handleLanguageChange(event)} - required={false} - outerMarginClasses={FIELD_MARGIN_CLASSES} - fieldStyle={this.style.fieldStyle} - /> - + this.handleLanguageChange(event)} + required={false} + outerMarginClasses={FIELD_MARGIN_CLASSES} + fieldStyle={this.style.fieldStyle} + /> ); } @@ -187,7 +254,7 @@ class DefaultSignupForm extends Component { return (
+ {this.props.askName === "True" && this.renderFirstNameField()} + {this.props.askName === "True" && this.renderLastNameField()} {this.renderEmailField()} - {this.state.showAllFields && this.renderAdditionalFields()} + {this.state.showCountryField && this.renderCountryField()} + {this.state.showLanguageField && this.renderLanguageField()}
{this.renderPrivacyCheckbox()}
diff --git a/source/js/components/newsletter-signup/organisms/form-specific-style.js b/source/js/components/newsletter-signup/organisms/form-specific-style.js index 6518833c940..a32bd48165a 100644 --- a/source/js/components/newsletter-signup/organisms/form-specific-style.js +++ b/source/js/components/newsletter-signup/organisms/form-specific-style.js @@ -27,6 +27,14 @@ */ export const FORM_STYLE = { + "bannered-campaign-body": { + buttonPosition: "bottom", + buttonStyle: "primary", + buttonWidthClasses: "tw-w-full", + fieldStyle: "filled", + headingLevel: 3, + headingClass: "tw-h5-heading", + }, "blog-body": { fieldStyle: "outlined", headingLevel: 2, diff --git a/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx b/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx index 2914aa46d74..068ac250ee5 100644 --- a/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx +++ b/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx @@ -167,6 +167,8 @@ function withSubmissionLogic(WrappedComponent) { }); let payload = { + givenNames: formData.firstName, + surname: formData.lastName, email: formData.email, country: formData.country, lang: formData.language, @@ -269,7 +271,7 @@ function withSubmissionLogic(WrappedComponent) { apiUrl: PropTypes.string.isRequired, ctaHeader: PropTypes.string.isRequired, ctaDescription: PropTypes.string.isRequired, - formPosition: PropTypes.string.isRequired, + formPosition: PropTypes.string, whenLoaded: PropTypes.func, };