/* 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 ReactDOM from "react-dom";
import { AboutWelcomeUtils } from "../lib/aboutwelcome-utils";
import { MultiStageAboutWelcome } from "./components/MultiStageAboutWelcome";
import { ReturnToAMO } from "./components/ReturnToAMO";
class AboutWelcome extends React.PureComponent {
constructor(props) {
super(props);
this.state = { metricsFlowUri: null };
this.fetchFxAFlowUri = this.fetchFxAFlowUri.bind(this);
}
async fetchFxAFlowUri() {
this.setState({ metricsFlowUri: await window.AWGetFxAMetricsFlowURI?.() });
}
componentDidMount() {
if (!this.props.skipFxA) {
this.fetchFxAFlowUri();
}
// Record impression with performance data after allowing the page to load
const recordImpression = domState => {
const { domComplete, domInteractive } = performance
.getEntriesByType("navigation")
.pop();
AboutWelcomeUtils.sendImpressionTelemetry(this.props.messageId, {
domComplete,
domInteractive,
mountStart: performance.getEntriesByName("mount").pop().startTime,
domState,
source: this.props.UTMTerm,
});
};
if (document.readyState === "complete") {
// Page might have already triggered a load event because it waited for async data,
// e.g., attribution, so the dom load timing could be of a empty content
// with domState in telemetry captured as 'complete'
recordImpression(document.readyState);
} else {
window.addEventListener("load", () => recordImpression("load"), {
once: true,
});
}
// Captures user has seen about:welcome by setting
// firstrun.didSeeAboutWelcome pref to true and capturing welcome UI unique messageId
window.AWSendToParent("SET_WELCOME_MESSAGE_SEEN", this.props.messageId);
}
render() {
const { props } = this;
if (props.template === "return_to_amo") {
return (
);
}
return (
);
}
}
// Computes messageId and UTMTerm info used in telemetry
function ComputeTelemetryInfo(welcomeContent, experimentId, branchId) {
let messageId =
welcomeContent.template === "return_to_amo"
? `RTAMO_DEFAULT_WELCOME_${welcomeContent.type.toUpperCase()}`
: "DEFAULT_ID";
let UTMTerm = "default";
if (welcomeContent.id) {
messageId = welcomeContent.id.toUpperCase();
}
if (experimentId && branchId) {
UTMTerm = `${experimentId}-${branchId}`.toLowerCase();
}
return {
messageId,
UTMTerm,
};
}
async function retrieveRenderContent() {
// Feature config includes RTAMO attribution data if exists
// else below data in order specified
// user prefs
// experiment data
// defaults
let featureConfig = await window.AWGetFeatureConfig();
let { messageId, UTMTerm } = ComputeTelemetryInfo(
featureConfig,
featureConfig.slug,
featureConfig.branch && featureConfig.branch.slug
);
return { featureConfig, messageId, UTMTerm };
}
async function mount() {
let {
featureConfig: aboutWelcomeProps,
messageId,
UTMTerm,
} = await retrieveRenderContent();
ReactDOM.render(
,
document.getElementById("root")
);
}
performance.mark("mount");
mount();