browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx
author Punam Dahiya <punamdahiya@yahoo.com>
Sat, 23 May 2020 20:11:34 +0000
changeset 2913080 37589d46631054e814a39fe6e1762ba151fc1521
parent 2912300 42591468b4b83fe6d98e6df75acd29edf2b15754
child 2917826 bb8ed83db776f4c1205ce8ec0ba1929797c549ca
child 2918634 2f8a63f490dad54c49badfdd2f2939172ae87ee6
child 2921670 e5dfda4835e1d1d6a674f62c8f9324c693c1bcda
child 2923852 9cfcfc0172fc9f8a700a9a7624212567b7c2aea9
child 2924540 333f036c6f4a253ff9e1b6a34084672e4b03703a
permissions -rw-r--r--
Bug 1619694 - Send Impression telemetry for respective multistage welcome screen r=Mardak Differential Revision: https://phabricator.services.mozilla.com/D76552

/* 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, { useState, useCallback, useEffect } from "react";
import { Localized } from "./MSLocalized";
import { AboutWelcomeUtils } from "../../lib/aboutwelcome-utils";

export const MultiStageAboutWelcome = props => {
  const [index, setScreenIndex] = useState(0);

  useEffect(() => {
    // Send impression ping when respective screen first renders
    props.screens.forEach(screen => {
      if (index === screen.order) {
        AboutWelcomeUtils.sendImpressionTelemetry(
          `${props.message_id}_${screen.id}`
        );
      }
    });
  }, [index]);
  // Transition to next screen, opening about:home on last screen button CTA
  const handleTransition =
    index < props.screens.length
      ? useCallback(() => setScreenIndex(prevState => prevState + 1), [])
      : AboutWelcomeUtils.handleUserAction({
          type: "OPEN_ABOUT_PAGE",
          data: { args: "home", where: "current" },
        });

  const [topSites] = useState([
    "resource://activity-stream/data/content/tippytop/images/youtube-com@2x.png",
    "resource://activity-stream/data/content/tippytop/images/facebook-com@2x.png",
    "resource://activity-stream/data/content/tippytop/images/amazon@2x.png",
    "resource://activity-stream/data/content/tippytop/images/reddit-com@2x.png",
    "resource://activity-stream/data/content/tippytop/images/wikipedia-org@2x.png",
    "resource://activity-stream/data/content/tippytop/images/twitter-com@2x.png",
  ]);

  return (
    <React.Fragment>
      <div className={`multistageContainer`}>
        {props.screens.map(screen => {
          return index === screen.order ? (
            <WelcomeScreen
              id={screen.id}
              totalNumberOfScreens={props.screens.length}
              order={screen.order}
              content={screen.content}
              navigate={handleTransition}
              topSites={topSites}
            />
          ) : null;
        })}
      </div>
    </React.Fragment>
  );
};

export class WelcomeScreen extends React.PureComponent {
  constructor(props) {
    super(props);
    this.handleAction = this.handleAction.bind(this);
  }

  handleAction(event) {
    let targetContent = this.props.content[event.target.value];
    if (!(targetContent && targetContent.action)) {
      return;
    }
    if (targetContent.action.type) {
      AboutWelcomeUtils.handleUserAction(targetContent.action);
    }
    if (targetContent.action.navigate) {
      this.props.navigate();
    }
  }

  renderSecondaryCTA(className) {
    return (
      <div className={`secondary-cta ${className}`}>
        <Localized text={this.props.content.secondary_button.text}>
          <span />
        </Localized>
        <Localized text={this.props.content.secondary_button.label}>
          <button
            className="secondary"
            value="secondary_button"
            onClick={this.handleAction}
          />
        </Localized>
      </div>
    );
  }

  renderTiles() {
    return this.props.content.tiles && this.props.topSites ? (
      <div className="tiles-section">
        {this.props.topSites.slice(0, 5).map(icon => (
          <div
            className="icon"
            key={icon}
            style={{ backgroundImage: `url(${icon})` }}
          />
        ))}
      </div>
    ) : null;
  }

  renderStepsIndicator() {
    let steps = [];
    for (let i = 0; i < this.props.totalNumberOfScreens; i++) {
      let className = i === this.props.order ? "current" : "";
      steps.push(<div key={i} className={`indicator ${className}`} />);
    }
    return steps;
  }

  render() {
    const { content } = this.props;
    return (
      <main className={`screen ${this.props.id}`}>
        {content.secondary_button && content.secondary_button.position === "top"
          ? this.renderSecondaryCTA("top")
          : null}
        <div className="brand-logo" />
        <div className="welcome-text">
          <Localized text={content.title}>
            <h1 />
          </Localized>
          <Localized text={content.subtitle}>
            <h2 />
          </Localized>
        </div>
        {content.tiles ? this.renderTiles() : null}
        <div>
          <Localized
            text={content.primary_button ? content.primary_button.label : null}
          >
            <button
              className="primary"
              value="primary_button"
              onClick={this.handleAction}
            />
          </Localized>
        </div>
        {content.secondary_button && content.secondary_button.position !== "top"
          ? this.renderSecondaryCTA()
          : null}
        <div className="steps">{this.renderStepsIndicator()}</div>
      </main>
    );
  }
}