/* 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, { useEffect, useState } from "react";
import { Localized } from "./MSLocalized";
import { Colorways } from "./MRColorways";
import { MobileDownloads } from "./MobileDownloads";
import { MultiSelect } from "./MultiSelect";
import { Themes } from "./Themes";
import {
SecondaryCTA,
StepsIndicator,
ProgressBar,
} from "./MultiStageAboutWelcome";
import { LanguageSwitcher } from "./LanguageSwitcher";
import { CTAParagraph } from "./CTAParagraph";
import { HeroImage } from "./HeroImage";
import { OnboardingVideo } from "./OnboardingVideo";
import { AdditionalCTA } from "./AdditionalCTA";
import { EmbeddedMigrationWizard } from "./EmbeddedMigrationWizard";
export const MultiStageProtonScreen = props => {
const { autoAdvance, handleAction, order } = props;
useEffect(() => {
if (autoAdvance) {
const timer = setTimeout(() => {
handleAction({
currentTarget: {
value: autoAdvance,
},
name: "AUTO_ADVANCE",
});
}, 20000);
return () => clearTimeout(timer);
}
return () => {};
}, [autoAdvance, handleAction, order]);
return (
);
};
export const ProtonScreenActionButtons = props => {
const { content, addonName } = props;
const defaultValue = content.checkbox?.defaultValue;
const [isChecked, setIsChecked] = useState(defaultValue || false);
if (
!content.primary_button &&
!content.secondary_button &&
!content.additional_button
) {
return null;
}
return (
{content.additional_button ? (
) : null}
{content.checkbox ? (
{
setIsChecked(!isChecked);
}}
>
) : null}
{content.secondary_button ? (
) : null}
);
};
export class ProtonScreen extends React.PureComponent {
componentDidMount() {
this.mainContentHeader.focus();
}
getScreenClassName(
isFirstScreen,
isLastScreen,
includeNoodles,
isVideoOnboarding
) {
const screenClass = `screen-${this.props.order % 2 !== 0 ? 1 : 2}`;
if (isVideoOnboarding) return "with-video";
return `${isFirstScreen ? `dialog-initial` : ``} ${
isLastScreen ? `dialog-last` : ``
} ${includeNoodles ? `with-noodles` : ``} ${screenClass}`;
}
renderLogo({
imageURL = "chrome://branding/content/about-logo.svg",
darkModeImageURL,
reducedMotionImageURL,
darkModeReducedMotionImageURL,
alt = "",
height,
}) {
return (
);
}
renderContentTiles() {
const { content } = this.props;
return (
{content.tiles &&
content.tiles.type === "colorway" &&
content.tiles.colorways ? (
) : null}
{content.tiles &&
content.tiles.type === "theme" &&
content.tiles.data ? (
) : null}
{content.tiles &&
content.tiles.type === "mobile_downloads" &&
content.tiles.data ? (
) : null}
{content.tiles &&
content.tiles.type === "multiselect" &&
content.tiles.data ? (
) : null}
{content.tiles && content.tiles.type === "migration-wizard" ? (
) : null}
);
}
renderNoodles() {
return (
);
}
renderLanguageSwitcher() {
return this.props.content.languageSwitcher ? (
) : null;
}
renderDismissButton() {
return (
);
}
renderStepsIndicator() {
const currentStep = (this.props.order ?? 0) + 1;
const previousStep = (this.props.previousOrder ?? -1) + 1;
const { content, totalNumberOfScreens: total } = this.props;
return (
{content.progress_bar ? (
) : (
)}
);
}
renderSecondarySection(content) {
return (
{content.hero_image ? (
) : (
)}
);
}
render() {
const {
autoAdvance,
content,
isRtamo,
isTheme,
isFirstScreen,
isLastScreen,
isSingleScreen,
} = this.props;
const includeNoodles = content.has_noodles;
// The default screen position is "center"
const isCenterPosition = content.position === "center" || !content.position;
const hideStepsIndicator =
autoAdvance || content?.video_container || isSingleScreen;
const textColorClass = content.text_color
? `${content.text_color}-text`
: "";
// Assign proton screen style 'screen-1' or 'screen-2' to centered screens
// by checking if screen order is even or odd.
const screenClassName = isCenterPosition
? this.getScreenClassName(
isFirstScreen,
isLastScreen,
includeNoodles,
content?.video_container
)
: "";
const isEmbeddedMigration = content.tiles?.type === "migration-wizard";
return (
{
this.mainContentHeader = input;
}}
>
{isCenterPosition ? null : this.renderSecondarySection(content)}
{content.secondary_button_top ? (
) : null}
{includeNoodles ? this.renderNoodles() : null}
{content.logo ? this.renderLogo(content.logo) : null}
{isRtamo ? (
) : null}
{content.title ? (
) : null}
{content.subtitle ? (
) : null}
{content.cta_paragraph ? (
) : null}
{content.video_container ? (
) : null}
{this.renderContentTiles()}
{this.renderLanguageSwitcher()}
{!hideStepsIndicator ? this.renderStepsIndicator() : null}
{content.dismiss_button ? this.renderDismissButton() : null}
);
}
}