removed obsolete code in join.jsx & made sure data-cta-event attribut…

…e is added to submit button
MozillaFoundation · Jan 30, 2024 · 3831f8a · 3831f8a
1 parent 300d02a
commit 3831f8a
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 21 deletions.
diff --git a/...etworkapi/mozfest/templates/fragments/blocks/newsletter_signup_with_background_block.html b/...etworkapi/mozfest/templates/fragments/blocks/newsletter_signup_with_background_block.html
@@ -16,7 +16,8 @@
                             data-signup-id="{{ snippet_localized.id }}"
                             data-cta-header="{{ snippet_localized.header | escape }}"
                             data-cta-description="{{ snippet_localized.description | escape }}"
-                            data-ask-name="{{ snippet_localized.ask_name }}">
+                            data-ask-name="{{ snippet_localized.ask_name }}"
+                            data-button-cta-event="newsletter-signup">
                         </div>
                     </div>
                     {% image snippet_localized.background_image fill-475x475 as background_image %}

diff --git a/...rk-api/networkapi/wagtailpages/templates/wagtailpages/blocks/newsletter_signup_block.html b/...rk-api/networkapi/wagtailpages/templates/wagtailpages/blocks/newsletter_signup_block.html
@@ -15,6 +15,7 @@
             data-cta-header="{{ self.signup.header | escape }}"
             data-cta-description="{{ self.signup.description | escape }}"
             data-ask-name="{{ self.signup.ask_name }}"
+            data-button-cta-event="newsletter-signup"
         ></div>
     </div>
 {% endblock %}
diff --git a/source/js/components/join/join.jsx b/source/js/components/join/join.jsx
@@ -314,8 +314,6 @@ class JoinUs extends Component {
           ? "tw-h1-heading large:tw-pr-24"
           : this.props.formStyle == "pni"
           ? "tw-text-3xl tw-font-zilla tw-mb-4 medium:tw-w-4/5"
-          : this.props.formStyle == "mozfest"
-          ? "tw-h3-heading"
           : "tw-h5-heading"
       }`
     );
@@ -390,8 +388,7 @@ class JoinUs extends Component {
     let inputClasses = classNames(`${FORM_CONTROL_CLASS} tw-pr-18`, {
       "tw-border-1 tw-border-black placeholder:tw-text-gray-40 focus:tw-border-blue-40 focus:tw-shadow-none focus-visible:tw-drop-shadow-none tw-mt-8":
         this.props.formStyle == `pop`,
-      "tw-h-24":
-        this.props.formStyle == `pni` || this.props.formStyle == `mozfest`,
+      "tw-h-24": this.props.formStyle == `pni`,
     });
 
     let errorWrapperClasses = classNames("glyph-container", {
@@ -558,21 +555,13 @@ class JoinUs extends Component {
   renderSubmitButton() {
     let classnames;
     let buttonText;
-    let dataAttributes = {};
-
-    if (this.props.formStyle == "mozfest") {
-      dataAttributes["data-cta-event"] = "newsletter-signup";
-    }
 
     if (this.props.formStyle == "pop") {
       classnames = classNames(
         "tw-border-1 tw-btn-secondary tw-mt-24 medium:-tw-mb-16 medium:tw-mt-12"
       );
       buttonText = getText("Subscribe");
-    } else if (
-      this.props.formStyle == "pni" ||
-      this.props.formStyle == "mozfest"
-    ) {
+    } else if (this.props.formStyle == "pni") {
       classnames = classNames(
         "tw-btn",
         "tw-btn-primary",
@@ -589,11 +578,7 @@ class JoinUs extends Component {
     }
 
     return (
-      <button
-        className={classnames}
-        disabled={this.state.submitButtonDisabled}
-        {...dataAttributes}
-      >
+      <button className={classnames} disabled={this.state.submitButtonDisabled}>
         {buttonText}
       </button>
     );
@@ -628,7 +613,7 @@ class JoinUs extends Component {
       buttonsWrapperClass = `w-auto tw-text-right`;
     }
 
-    if (this.props.formStyle === "pni" || this.props.formStyle === "mozfest") {
+    if (this.props.formStyle === "pni") {
       formClass = `tw-w-full tw-flex tw-flex-row`;
       buttonsWrapperClass = `w-auto`;
     }

diff --git a/source/js/components/newsletter-signup/atoms/button-submit.jsx b/source/js/components/newsletter-signup/atoms/button-submit.jsx
@@ -7,6 +7,7 @@ const ButtonSubmit = ({
   children,
   buttonStyle = "primary",
   widthClasses = `tw-w-full`,
+  buttonCtaEvent,
 }) => {
   // [TODO]
   // Ideally styling for this "atom" component should be pre-defined in a Tailwind config file.
@@ -15,7 +16,12 @@ const ButtonSubmit = ({
   let classes = classNames(`tw-btn tw-btn-${buttonStyle}`, widthClasses);
 
   return (
-    <button type="submit" className={classes} disabled={disabled}>
+    <button
+      type="submit"
+      className={classes}
+      disabled={disabled}
+      data-cta-event={buttonCtaEvent}
+    >
       {children}
     </button>
   );

diff --git a/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx b/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx
@@ -304,6 +304,7 @@ class DefaultSignupForm extends Component {
               buttonStyle={this.style.buttonStyle}
               widthClasses={this.style.buttonWidthClasses}
               disabled={this.state.submitButtonDisabled}
+              buttonCtaEvent={this.props.buttonCtaEvent}
             >
               {this.buttonText}
             </ButtonSubmit>