1 files changed, 105 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/aboutwelcome/components/ReturnToAMO.jsx b/browser/components/newtab/content-src/aboutwelcome/components/ReturnToAMO.jsx
new file mode 100644
index 0000000000..fb5e80c6e4
--- /dev/null
+++ b/browser/components/newtab/content-src/aboutwelcome/components/ReturnToAMO.jsx
@@ -0,0 +1,105 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from "react";
+import {
+  AboutWelcomeUtils,
+  DEFAULT_RTAMO_CONTENT,
+} from "../../lib/aboutwelcome-utils";
+import { MultiStageProtonScreen } from "./MultiStageProtonScreen";
+import { BASE_PARAMS } from "../../asrouter/templates/FirstRun/addUtmParams";
+
+export class ReturnToAMO extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.fetchFlowParams = this.fetchFlowParams.bind(this);
+    this.handleAction = this.handleAction.bind(this);
+  }
+
+  async fetchFlowParams() {
+    if (this.props.metricsFlowUri) {
+      this.setState({
+        flowParams: await AboutWelcomeUtils.fetchFlowParams(
+          this.props.metricsFlowUri
+        ),
+      });
+    }
+  }
+
+  componentDidUpdate() {
+    this.fetchFlowParams();
+  }
+
+  handleAction(event) {
+    const { content, message_id, url, utm_term } = this.props;
+    let { action, source_id } = content[event.currentTarget.value];
+    let { type, data } = action;
+
+    if (type === "INSTALL_ADDON_FROM_URL") {
+      if (!data) {
+        return;
+      }
+      // Set add-on url in action.data.url property from JSON
+      data = { ...data, url };
+    } else if (type === "SHOW_FIREFOX_ACCOUNTS") {
+      let params = {
+        ...BASE_PARAMS,
+        utm_term: `aboutwelcome-${utm_term}-screen`,
+      };
+      if (action.addFlowParams && this.state.flowParams) {
+        params = {
+          ...params,
+          ...this.state.flowParams,
+        };
+      }
+      data = { ...data, extraParams: params };
+    }
+
+    AboutWelcomeUtils.handleUserAction({ type, data });
+    AboutWelcomeUtils.sendActionTelemetry(message_id, source_id);
+  }
+
+  render() {
+    const { content, type } = this.props;
+
+    if (!content) {
+      return null;
+    }
+
+    if (content?.primary_button.label) {
+      content.primary_button.label.string_id = type.includes("theme")
+        ? "return-to-amo-add-theme-label"
+        : "mr1-return-to-amo-add-extension-label";
+    }
+
+    // For experiments, when needed below rendered UI allows settings hard coded strings
+    // directly inside JSON except for ReturnToAMOText which picks add-on name and icon from fluent string
+    return (
+      <div
+        className={"outer-wrapper onboardingContainer proton"}
+        style={content.backdrop ? { background: content.backdrop } : {}}
+      >
+        <MultiStageProtonScreen
+          content={content}
+          isRtamo={true}
+          isTheme={type.includes("theme")}
+          id={this.props.message_id}
+          order={this.props.order || 0}
+          totalNumberOfScreens={1}
+          isSingleScreen={true}
+          autoAdvance={this.props.auto_advance}
+          iconURL={
+            type.includes("theme")
+              ? this.props.themeScreenshots[0]?.url
+              : this.props.iconURL
+          }
+          addonName={this.props.name}
+          handleAction={this.handleAction}
+        />
+      </div>
+    );
+  }
+}
+
+ReturnToAMO.defaultProps = DEFAULT_RTAMO_CONTENT;