Bug 1546165 - Add optional heading/icon to snippets (#5294)

content-src/asrouter/components/ConditionalWrapper/ConditionalWrapper.jsx

@@ -3,5 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 // lifted from https://gist.github.com/kitze/23d82bb9eb0baabfd03a6a720b1d637f
-export const ConditionalWrapper = ({ condition, wrap, children }) =>
+const ConditionalWrapper = ({ condition, wrap, children }) =>
   condition ? wrap(children) : children;
+
+export default ConditionalWrapper;

content-src/asrouter/templates/FXASignupSnippet/FXASignupSnippet.schema.json

@@ -1,7 +1,7 @@
 {
   "title": "FXASignupSnippet",
   "description": "A snippet template for FxA sign up/sign in",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "object",
   "definitions": {
     "plainText": {
@@ -31,6 +31,24 @@
         {"description": "Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}
       ]
     },
+    "scene1_section_title_icon": {
+      "type": "string",
+      "description": "Section title icon for scene 1. 16x16px. SVG or PNG preferred. scene1_section_title_text must also be specified to display."
+    },
+    "scene1_section_title_icon_dark_theme": {
+      "type": "string",
+      "description": "Section title icon for scene 1, dark theme variant. 16x16px. SVG or PNG preferred. scene1_section_title_text must also be specified to display."
+    },
+    "scene1_section_title_text": {
+      "type": "string",
+      "description": "Section title text for scene 1. scene1_section_title_icon must also be specified to display."
+    },
+    "scene1_section_title_url": {
+      "allOf": [
+        {"$ref": "#/definitions/link_url"},
+        {"description": "A url, scene1_section_title_text links to this"}
+      ]
+    },
     "scene2_title": {
       "allOf": [
         {"$ref": "#/definitions/plainText"},

content-src/asrouter/templates/NewsletterSnippet/NewsletterSnippet.schema.json

@@ -1,7 +1,7 @@
 {
   "title": "NewsletterSnippet",
   "description": "A snippet template for send to device mobile download",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "object",
   "definitions": {
     "plainText": {
@@ -36,6 +36,24 @@
         {"description": "Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}
       ]
     },
+    "scene1_section_title_icon": {
+      "type": "string",
+      "description": "Section title icon for scene 1. 16x16px. SVG or PNG preferred. scene1_section_title_text must also be specified to display."
+    },
+    "scene1_section_title_icon_dark_theme": {
+      "type": "string",
+      "description": "Section title icon for scene 1, dark theme variant. 16x16px. SVG or PNG preferred. scene1_section_title_text must also be specified to display."
+    },
+    "scene1_section_title_text": {
+      "type": "string",
+      "description": "Section title text for scene 1. scene1_section_title_icon must also be specified to display."
+    },
+    "scene1_section_title_url": {
+      "allOf": [
+        {"$ref": "#/definitions/link_url"},
+        {"description": "A url, scene1_section_title_text links to this"}
+      ]
+    },
     "scene2_title": {
       "allOf": [
         {"$ref": "#/definitions/plainText"},

content-src/asrouter/templates/SendToDeviceSnippet/SendToDeviceSnippet.schema.json

@@ -1,7 +1,7 @@
 {
   "title": "SendToDeviceSnippet",
   "description": "A snippet template for send to device mobile download",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "object",
   "definitions": {
     "plainText": {
@@ -41,6 +41,24 @@
         {"description": "Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}
       ]
     },
+    "scene1_section_title_icon": {
+      "type": "string",
+      "description": "Section title icon for scene 1. 16x16px. SVG or PNG preferred. scene1_section_title_text must also be specified to display."
+    },
+    "scene1_section_title_icon_dark_theme": {
+      "type": "string",
+      "description": "Section title icon for scene 1, dark theme variant. 16x16px. SVG or PNG preferred. scene1_section_title_text must also be specified to display."
+    },
+    "scene1_section_title_text": {
+      "type": "string",
+      "description": "Section title text for scene 1. scene1_section_title_icon must also be specified to display."
+    },
+    "scene1_section_title_url": {
+      "allOf": [
+        {"$ref": "#/definitions/link_url"},
+        {"description": "A url, scene1_section_title_text links to this"}
+      ]
+    },
     "scene2_title": {
       "allOf": [
         {"$ref": "#/definitions/plainText"},

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

@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { Button } from "../../components/Button/Button";
-import { ConditionalWrapper } from "../../components/ConditionalWrapper/ConditionalWrapper";
+import ConditionalWrapper from "../../components/ConditionalWrapper/ConditionalWrapper";
 import React from "react";
 import { RichText } from "../../components/RichText/RichText";
 import { safeURI } from "../../template-utils";

content-src/asrouter/templates/SubmitFormSnippet/SubmitFormSnippet.schema.json

@@ -1,7 +1,7 @@
 {
   "title": "SubmitFormSnippet",
   "description": "A template with two states: a SimpleSnippet and another that contains a form",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "object",
   "definitions": {
     "plainText": {
@@ -39,6 +39,24 @@
         {"description": "Main body text of snippet. HTML subset allowed: i, b, u, strong, em, br"}
       ]
     },
+    "scene1_section_title_icon": {
+      "type": "string",
+      "description": "Section title icon for scene 1. 16x16px. SVG or PNG preferred. scene1_section_title_text must also be specified to display."
+    },
+    "scene1_section_title_icon_dark_theme": {
+      "type": "string",
+      "description": "Section title icon for scene 1, dark theme variant. 16x16px. SVG or PNG preferred. scene1_section_title_text must also be specified to display."
+    },
+    "scene1_section_title_text": {
+      "type": "string",
+      "description": "Section title text for scene 1. scene1_section_title_icon must also be specified to display."
+    },
+    "scene1_section_title_url": {
+      "allOf": [
+        {"$ref": "#/definitions/link_url"},
+        {"description": "A url, scene1_section_title_text links to this"}
+      ]
+    },
     "scene2_title": {
       "allOf": [
         {"$ref": "#/definitions/plainText"},

contributing.md

@@ -52,7 +52,7 @@ Check out [this guide](docs/v2-system-addon/1.GETTING_STARTED.md) on how to inst
 You have identified the bug, written code and now want to get it into the main repo using a [Pull Request](https://help.github.com/articles/about-pull-requests/).
 
 All code is added using a pull request against the `master` branch of our repo.  Before submitting a PR, please go through this checklist:
-- all [unit tests](#unit-tests) must pass
+- all [unit tests](docs/v2-system-addon/unit_testing_guide.md) must pass
 - if you haven't written unit tests for your patch, eyebrows will be curmudgeonly furrowed (write unit tests!)
 - if your pull request fixes a particular ticket (it does, right?), please use the `fixes #nnn` github annotation to indicate this
 - please add a `PR / Needs review` tag to your PR (if you have permission).  This starts the code review process.  If you cannot add a tag, don't worry, we will add it during triage.

lib/SnippetsTestMessageProvider.jsm

@@ -183,6 +183,43 @@ const MESSAGES = () => [
       },
     },
   },
+  {
+    id: "NEWSLETTER_TEST_SCENE1_SECTION_TITLE_ICON",
+    template: "newsletter_snippet",
+    content: {
+      scene1_icon: TEST_ICON,
+      scene1_icon_dark_theme: TEST_ICON_BW,
+      scene1_title: "Be a part of a movement.",
+      scene1_title_icon: "",
+      scene1_text:
+        "Internet shutdowns, hackers, harassment – the health of the internet is on the line. Sign up and Mozilla will keep you updated on how you can help.",
+      scene1_button_label: "Continue",
+      scene1_button_color: "#712b00",
+      scene1_button_background_color: "#ff9400",
+      scene1_section_title_icon:
+        "resource://activity-stream/data/content/assets/glyph-pocket-16.svg",
+      scene1_section_title_text:
+        "All the Firefox news that's fit to Firefox print!",
+      scene2_title: "Let's do this!",
+      locale: "en-CA",
+      scene2_dismiss_button_text: "Dismiss",
+      scene2_text:
+        "Sign up for the Mozilla newsletter and we will keep you updated on how you can help.",
+      scene2_privacy_html:
+        "I'm okay with Mozilla handling my info as explained in this <privacyLink>Privacy Notice</privacyLink>.",
+      scene2_button_label: "Sign Me up",
+      scene2_email_placeholder_text: "Your email here",
+      scene2_newsletter: "mozilla-foundation",
+      success_text: "Check your inbox for the confirmation!",
+      error_text: "Error!",
+      links: {
+        privacyLink: {
+          url:
+            "https://www.mozilla.org/privacy/websites/?sample_rate=0.001&snippet_name=7894",
+        },
+      },
+    },
+  },
   {
     id: "FXA_SNIPPET_TEST_1",
     template: "fxa_signup_snippet",
@@ -207,6 +244,34 @@ const MESSAGES = () => [
       scene2_dismiss_button_text: "Dismiss",
     },
   },
+  {
+    id: "FXA_SNIPPET_TEST_TITLE_ICON",
+    template: "fxa_signup_snippet",
+    content: {
+      scene1_icon: TEST_ICON,
+      scene1_icon_dark_theme: TEST_ICON_BW,
+      scene1_button_label: "Get connected with sync!",
+      scene1_button_color: "#712b00",
+      scene1_button_background_color: "#ff9400",
+
+      scene1_text:
+        "Connect to Firefox by securely syncing passwords, bookmarks, and open tabs.",
+      scene1_title: "Browser better.",
+      scene1_title_icon: TEST_ICON_16,
+      scene1_title_icon_dark_theme: TEST_ICON_BW,
+
+      scene1_section_title_icon:
+        "resource://activity-stream/data/content/assets/glyph-pocket-16.svg",
+      scene1_section_title_text: "Firefox Accounts: Receivable benefits",
+
+      scene2_text:
+        "Connect to your Firefox account to securely sync passwords, bookmarks, and open tabs.",
+      scene2_title: "Title 123",
+      scene2_email_placeholder_text: "Your email",
+      scene2_button_label: "Continue",
+      scene2_dismiss_button_text: "Dismiss",
+    },
+  },
   {
     id: "SNIPPETS_SEND_TO_DEVICE_TEST",
     template: "send_to_device_snippet",
@@ -291,6 +356,51 @@ const MESSAGES = () => [
       },
     },
   },
+  {
+    id: "SNIPPETS_SEND_TO_DEVICE_TEST_SECTION_TITLE_ICON",
+    template: "send_to_device_snippet",
+    content: {
+      include_sms: true,
+      locale: "en-CA",
+      country: "us",
+      message_id_sms: "ff-mobilesn-download",
+      message_id_email: "download-firefox-mobile",
+
+      scene1_button_background_color: "#6200a4",
+      scene1_button_color: "#FFFFFF",
+      scene1_button_label: "Install now",
+      scene1_icon: TEST_ICON,
+      scene1_icon_dark_theme: TEST_ICON_BW,
+      scene1_text: "Browse without compromise with Firefox Mobile.",
+      scene1_title: "Full-featured. Customizable. Lightning fast",
+      scene1_title_icon: TEST_ICON_16,
+      scene1_title_icon_dark_theme: TEST_ICON_BW,
+      scene1_section_title_icon:
+        "resource://activity-stream/data/content/assets/glyph-pocket-16.svg",
+      scene1_section_title_text: "Send Firefox to your mobile device!",
+
+      scene2_button_label: "Send",
+      scene2_disclaimer_html:
+        "The intended recipient of the email must have consented. <privacyLink>Learn more</privacyLink>.",
+      scene2_dismiss_button_text: "Dismiss",
+      scene2_icon: TEST_ICON,
+      scene2_icon_dark_theme: TEST_ICON_BW,
+      scene2_input_placeholder: "Your email address or phone number",
+      scene2_text:
+        "Send Firefox to your phone and take a powerful independent browser with you.",
+      scene2_title: "Let's do this!",
+
+      error_text: "Oops, there was a problem.",
+      success_title: "Your download link was sent.",
+      success_text: "Check your device for the email message!",
+      links: {
+        privacyLink: {
+          url:
+            "https://www.mozilla.org/privacy/websites/?sample_rate=0.001&snippet_name=7894",
+        },
+      },
+    },
+  },
   {
     id: "EOY_TEST_1",
     template: "eoy_snippet",