Fix Bug 1506838 - Update Send To Device snippet to better match old template (#4565)

content-src/asrouter/components/Button/_Button.scss

@@ -1,7 +1,7 @@
 .ASRouterButton {
   font-weight: bold;
   white-space: nowrap;
-  border-radius: 4px;
+  border-radius: 2px;
   border: 1px solid var(--newtab-border-secondary-color);
   background-color: var(--newtab-button-secondary-color);
   font-family: inherit;

content-src/asrouter/components/SnippetBase/_SnippetBase.scss

@@ -5,8 +5,8 @@
   right: 0;
   background-color: var(--newtab-snippets-background-color);
   color: var(--newtab-text-primary-color);
-  font-size: 12px;
-  line-height: 16px;
+  font-size: 14px;
+  line-height: 20px;
   border-top: 1px solid var(--newtab-snippets-hairline-color);
   box-shadow: $shadow-secondary;
   display: flex;
@@ -22,6 +22,14 @@
     }
   }
 
+  input {
+    &[type='checkbox'] {
+      margin-inline-start: 0;
+      height: 16px;
+      width: 16px;
+    }
+  }
+
   .innerWrapper {
     margin: 0 auto;
     display: flex;

content-src/asrouter/rich-text-strings.js

@@ -7,6 +7,7 @@ import {MessageContext} from "fluent";
  */
 const RICH_TEXT_CONFIG = {
   "text": ["text", "scene1_text"],
+  "scene2_text": "scene2_text",
   "privacy_html": "scene2_privacy_html",
   "disclaimer_html": "scene2_disclaimer_html",
 };

content-src/asrouter/templates/EOYSnippet/_EOYSnippet.scss

@@ -1,7 +1,7 @@
 .EOYSnippetForm {
-  margin-top: 12px;
+  margin: 10px 0 8px;
   align-self: start;
-  font-size: 12px;
+  font-size: 14px;
   display: flex;
   align-items: center;
 
@@ -9,7 +9,7 @@
   .donation-form-url {
     white-space: nowrap;
     font-size: 14px;
-    padding: 5px 14px;
+    padding: 8px 20px;
     border-radius: 2px;
   }
 
@@ -17,6 +17,7 @@
     color: $grey-90;
     margin-inline-end: 18px;
     border: 1px solid $grey-40;
+    padding: 5px 14px;
     background: $grey-10;
     cursor: pointer;
   }
@@ -36,11 +37,22 @@
 
   .monthly-checkbox-container {
     width: 100%;
+
+    input {
+      &[type='checkbox'] {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    label {
+      vertical-align: super;
+    }
   }
 
   .donation-form-url {
     margin-inline-start: 18px;
-    background-color: $snippets-donation-button-bg;
+    background-color: var(--newtab-button-primary-color);
     border: 0;
     color: $white;
     align-self: flex-end;

content-src/asrouter/templates/FXASignupSnippet/FXASignupSnippet.jsx

@@ -6,6 +6,9 @@ export const FXASignupSnippet = props => {
   const firefox_version = userAgent ? parseInt(userAgent[1], 10) : 0;
   const extendedContent = {
     form_action: "https://accounts.firefox.com/",
+    scene1_button_label: "Learn More",
+    scene2_button_label: "Sign Me Up",
+    scene2_email_placeholder_text: "Your Email Here",
     ...props.content,
     hidden_inputs: {
       action: "email",

content-src/asrouter/templates/SendToDeviceSnippet/SendToDeviceSnippet.jsx

@@ -27,11 +27,30 @@ function processFormData(input, message) {
   return {formData, url};
 }
 
-export const SendToDeviceSnippet = props => (
-  <SubmitFormSnippet {...props}
+function addDefaultValues(props) {
+  return {
+    ...props,
+    content: {
+      scene1_button_label: "Learn More",
+      scene2_dismiss_button_text: "Dismiss",
+      scene2_button_label: "Send",
+      scene2_input_placeholder: "YOUR EMAIL HERE",
+      locale: "en-US",
+      country: "us",
+      message_id_email: "",
+      include_sms: false,
+      ...props.content,
+    },
+  };
+}
+
+export const SendToDeviceSnippet = props => {
+  const propsWithDefaults = addDefaultValues(props);
+
+  return (<SubmitFormSnippet {...propsWithDefaults}
     form_method="POST"
     className="send_to_device_snippet"
-    inputType={props.content.include_sms ? "text" : "email"}
-    validateInput={props.content.include_sms ? validateInput : null}
-    processFormData={processFormData} />
-);
+    inputType={propsWithDefaults.content.include_sms ? "text" : "email"}
+    validateInput={propsWithDefaults.content.include_sms ? validateInput : null}
+    processFormData={processFormData} />);
+};

content-src/asrouter/templates/SubmitFormSnippet/SubmitFormSnippet.jsx

@@ -102,13 +102,12 @@ export class SubmitFormSnippet extends React.PureComponent {
     return (<label className="privacyNotice" htmlFor="id_privacy">
         <p>
           <input type="checkbox" id="id_privacy" name="privacy" required="required" />
-          <span><RichText text={content.scene2_privacy_html}
+          <RichText text={content.scene2_privacy_html}
             localization_id="privacy_html"
             links={content.links}
             doNotAutoBlock={true}
             openNewWindow={true}
             sendClick={this.props.sendClick} />
-          </span>
         </p>
       </label>);
   }
@@ -152,7 +151,11 @@ export class SubmitFormSnippet extends React.PureComponent {
     return (<SnippetBase {...this.props} className={containerClass} footerDismiss={true}>
         {content.scene2_icon ? <div className="scene2Icon"><img src={content.scene2_icon} /></div> : null}
         <div className="message">
-          <p>{content.scene2_title ? <h3 className="scene2Title">{content.scene2_title}</h3> : null} {content.scene2_text}</p>
+          <p>
+            {content.scene2_title ? <h3 className="scene2Title">{content.scene2_title}</h3> : null}
+            {" "}
+            <RichText scene2_text={content.scene2_text} localization_id="scene2_text" />
+          </p>
         </div>
         <form action={content.form_action} method={this.props.form_method} onSubmit={this.handleSubmit} ref="form">
           {this.renderHiddenFormInputs()}

content-src/asrouter/templates/SubmitFormSnippet/_SubmitFormSnippet.scss

@@ -3,22 +3,37 @@
   flex: 1 1 100%;
   width: 100%;
 
+  .disclaimerText {
+    margin: 20px 0 0;
+    font-size: 12px;
+  }
+
+  p {
+    margin: 0;
+  }
+
   &.send_to_device_snippet {
     text-align: center;
 
     .message {
       font-size: 16px;
+      margin-bottom: 20px;
     }
   }
 
   .ASRouterButton {
     &.primary {
       flex: 1 1 0;
+
+      &[type='submit'] {
+        font-weight: normal;
+      }
     }
   }
 
   .scene2Icon {
     width: 100%;
+    margin-bottom: 20px;
 
     img {
       width: 98px;
@@ -43,18 +58,17 @@
     font-size: 14px;
     align-self: stretch;
     flex: 0 0 100%;
-
-    p {
-      margin-top: 0;
-    }
+    margin-bottom: 10px;
   }
 
   .privacyNotice {
+    font-size: 12px;
     color: var(--newtab-text-secondary-color);
+    margin-top: 10px;
     flex: 0 0 100%;
 
-    p {
-      margin-bottom: 0;
+    span {
+      vertical-align: top;
     }
   }
 
@@ -83,12 +97,12 @@
 
   input {
     &.mainInput {
-      border-radius: 3px;
+      border-radius: 2px;
       background-color: var(--newtab-textbox-background-color);
       border: $input-border;
       padding: 0 8px;
       height: 100%;
-      font-size: 15px;
+      font-size: 14px;
       width: 50%;
 
       &:focus {

content-src/styles/_variables.scss

@@ -128,7 +128,6 @@ $error-fallback-line-height: 1.5;
 $image-path: '../data/content/assets/';
 
 $snippets-container-height: 120px;
-$snippets-donation-button-bg: #0C99D5;
 
 $textbox-shadow-size: 4px;
 

test/unit/asrouter/templates/FXASignupSnippet.test.jsx

@@ -0,0 +1,65 @@
+import {FXASignupSnippet} from "content-src/asrouter/templates/FXASignupSnippet/FXASignupSnippet";
+import {mount} from "enzyme";
+import React from "react";
+import schema from "content-src/asrouter/templates/SubmitFormSnippet/SubmitFormSnippet.schema.json";
+import {SnippetsTestMessageProvider} from "lib/SnippetsTestMessageProvider.jsm";
+
+const DEFAULT_CONTENT = SnippetsTestMessageProvider.getMessages().find(msg => msg.template === "fxa_signup_snippet").content;
+
+describe("FXASignupSnippet", () => {
+  let sandbox;
+
+  function mountAndCheckProps(content = {}) {
+    const props = {
+      id: "foo123",
+      content: Object.assign({}, DEFAULT_CONTENT, content),
+      onBlock() {},
+      onDismiss: sandbox.stub(),
+      sendUserActionTelemetry: sandbox.stub(),
+      onAction: sandbox.stub(),
+    };
+    const comp = mount(<FXASignupSnippet {...props} />);
+    // Check schema with the final props the component receives (including defaults)
+    assert.jsonSchema(comp.children().get(0).props.content, schema);
+    return comp;
+  }
+
+  beforeEach(() => {
+    sandbox = sinon.sandbox.create();
+  });
+  afterEach(() => {
+    sandbox.restore();
+  });
+
+  it("should have the correct defaults", () => {
+    const defaults = {
+      id: "foo123",
+      onBlock() {},
+      content: {},
+      onDismiss: sandbox.stub(),
+      sendUserActionTelemetry: sandbox.stub(),
+      onAction: sandbox.stub(),
+    };
+    const wrapper = mount(<FXASignupSnippet {...defaults} />);
+    // SendToDeviceSnippet is a wrapper around SubmitFormSnippet
+    const {props} = wrapper.children().get(0);
+
+    assert.propertyVal(props.content, "form_action", "https://accounts.firefox.com/");
+    assert.propertyVal(props.content, "scene1_button_label", "Learn More");
+    assert.propertyVal(props.content, "scene2_button_label", "Sign Me Up");
+    assert.propertyVal(props.content, "scene2_email_placeholder_text", "Your Email Here");
+    assert.propertyVal(props.content.hidden_inputs, "action", "email");
+    assert.propertyVal(props.content.hidden_inputs, "context", "fx_desktop_v3");
+    assert.propertyVal(props.content.hidden_inputs, "entrypoint", "snippets");
+    assert.propertyVal(props.content.hidden_inputs, "service", "sync");
+    assert.propertyVal(props.content.hidden_inputs, "utm_source", "snippet");
+  });
+
+  it("should navigate to scene2", () => {
+    const wrapper = mountAndCheckProps({});
+
+    wrapper.find(".ASRouterButton").simulate("click");
+
+    assert.lengthOf(wrapper.find(".mainInput"), 1);
+  });
+});

test/unit/asrouter/templates/SendToDeviceSnippet.test.jsx

@@ -43,8 +43,10 @@ describe("SendToDeviceSnippet", () => {
       onAction: sandbox.stub(),
       form_method: "POST",
     };
-    assert.jsonSchema(props.content, schema);
-    return mount(<SendToDeviceSnippet {...props} />);
+    const comp = mount(<SendToDeviceSnippet {...props} />);
+    // Check schema with the final props the component receives (including defaults)
+    assert.jsonSchema(comp.children().get(0).props.content, schema);
+    return comp;
   }
 
   beforeEach(() => {
@@ -57,6 +59,30 @@ describe("SendToDeviceSnippet", () => {
     sandbox.restore();
   });
 
+  it("should have the correct defaults", () => {
+    const defaults = {
+      id: "foo123",
+      onBlock() {},
+      content: {},
+      onDismiss: sandbox.stub(),
+      sendUserActionTelemetry: sandbox.stub(),
+      onAction: sandbox.stub(),
+      form_method: "POST",
+    };
+    const wrapper = mount(<SendToDeviceSnippet {...defaults} />);
+    // SendToDeviceSnippet is a wrapper around SubmitFormSnippet
+    const {props} = wrapper.children().get(0);
+
+    assert.propertyVal(props.content, "scene1_button_label", "Learn More");
+    assert.propertyVal(props.content, "scene2_dismiss_button_text", "Dismiss");
+    assert.propertyVal(props.content, "scene2_button_label", "Send");
+    assert.propertyVal(props.content, "scene2_input_placeholder", "YOUR EMAIL HERE");
+    assert.propertyVal(props.content, "locale", "en-US");
+    assert.propertyVal(props.content, "country", "us");
+    assert.propertyVal(props.content, "include_sms", false);
+    assert.propertyVal(props.content, "message_id_email", "");
+  });
+
   describe("form input", () => {
     it("should set the input type to text if content.include_sms is true", () => {
       const wrapper = mountAndCheckProps({include_sms: true});