Bug 1601878 - Report click metrics for EOYSnippets r=nanj

Differential Revision: https://phabricator.services.mozilla.com/D64393

--HG--
extra : moz-landing-system : lando

browser/components/newtab/content-src/asrouter/templates/EOYSnippet/EOYSnippet.jsx

@@ -24,11 +24,12 @@ class EOYSnippetBase extends React.PureComponent {
 
   handleSubmit(event) {
     event.preventDefault();
+    this.props.sendClick(event);
     this.setFrequencyValue();
-    this.refs.form.submit();
     if (!this.props.content.do_not_autoblock) {
       this.props.onBlock();
     }
+    this.refs.form.submit();
   }
 
   renderDonations() {
@@ -61,6 +62,7 @@ class EOYSnippetBase extends React.PureComponent {
         action={this.props.content.donation_form_url}
         method={this.props.form_method}
         onSubmit={this.handleSubmit}
+        data-metric="EOYSnippetForm"
         ref="form"
       >
         {donationURLParams.map(([key, value], idx) => (

browser/components/newtab/data/content/activity-stream.bundle.js

@@ -12067,12 +12067,14 @@ class EOYSnippet_EOYSnippetBase extends external_React_default.a.PureComponent {
 
   handleSubmit(event) {
     event.preventDefault();
+    this.props.sendClick(event);
     this.setFrequencyValue();
-    this.refs.form.submit();
 
     if (!this.props.content.do_not_autoblock) {
       this.props.onBlock();
     }
+
+    this.refs.form.submit();
   }
 
   renderDonations() {
@@ -12102,6 +12104,7 @@ class EOYSnippet_EOYSnippetBase extends external_React_default.a.PureComponent {
       action: this.props.content.donation_form_url,
       method: this.props.form_method,
       onSubmit: this.handleSubmit,
+      "data-metric": "EOYSnippetForm",
       ref: "form"
     }, donationURLParams.map(([key, value], idx) => external_React_default.a.createElement("input", {
       type: "hidden",

browser/components/newtab/test/unit/asrouter/templates/EOYSnippet.test.jsx

@@ -30,6 +30,7 @@ describe("EOYSnippet", () => {
       provider,
       onAction: sandbox.stub(),
       onBlock: sandbox.stub(),
+      sendClick: sandbox.stub(),
     };
     const comp = mount(<EOYSnippet {...props} />);
     // Check schema with the final props the component receives (including defaults)
@@ -64,6 +65,10 @@ describe("EOYSnippet", () => {
     assert.lengthOf(wrapper.find("input[type='radio']"), 4);
   });
 
+  it("should have a data-metric field", () => {
+    assert.ok(wrapper.find("form[data-metric='EOYSnippetForm']"));
+  });
+
   it("should select the second donation option", () => {
     wrapper = mountAndCheckProps({ selected_button: "donation_amount_second" });
 
@@ -103,6 +108,19 @@ describe("EOYSnippet", () => {
     assert.notCalled(onBlockStub);
   });
 
+  it("should report form submissions", () => {
+    wrapper = mountAndCheckProps();
+    const { sendClick } = wrapper.props();
+
+    wrapper.find("form").simulate("submit");
+
+    assert.calledOnce(sendClick);
+    assert.equal(
+      sendClick.firstCall.args[0].target.dataset.metric,
+      "EOYSnippetForm"
+    );
+  });
+
   it("it should preserve URL GET params as hidden inputs", () => {
     wrapper = mountAndCheckProps({
       donation_form_url: