tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

DownloadMobilePromoHighlight.jsx (4091B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
      3 * You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 import { actionCreators as ac } from "common/Actions.mjs";
      6 import { FeatureHighlight } from "./FeatureHighlight";
      7 import React, { useCallback, useEffect } from "react";
      8 import { useSelector } from "react-redux";
      9 
     10 const PREF_MOBILE_DOWNLOAD_HIGHLIGHT_VARIANT_A =
     11  "mobileDownloadModal.variant-a";
     12 const PREF_MOBILE_DOWNLOAD_HIGHLIGHT_VARIANT_B =
     13  "mobileDownloadModal.variant-b";
     14 const PREF_MOBILE_DOWNLOAD_HIGHLIGHT_VARIANT_C =
     15  "mobileDownloadModal.variant-c";
     16 
     17 const FEATURE_ID = "FEATURE_DOWNLOAD_MOBILE_PROMO";
     18 
     19 export function DownloadMobilePromoHighlight({
     20  position,
     21  dispatch,
     22  handleDismiss,
     23  handleBlock,
     24  isIntersecting,
     25 }) {
     26  const onDismiss = useCallback(() => {
     27    // This event is emitted manually because the feature may be triggered outside the OMC flow,
     28    // and may not be captured by the messaging-system’s automatic reporting.
     29    dispatch(
     30      ac.DiscoveryStreamUserEvent({
     31        event: "FEATURE_HIGHLIGHT_DISMISS",
     32        source: "FEATURE_HIGHLIGHT",
     33        value: { feature: FEATURE_ID },
     34      })
     35    );
     36 
     37    handleDismiss();
     38    handleBlock();
     39  }, [dispatch, handleDismiss, handleBlock]);
     40 
     41  useEffect(() => {
     42    if (isIntersecting) {
     43      // This event is emitted manually because the feature may be triggered outside the OMC flow,
     44      // and may not be captured by the messaging-system’s automatic reporting.
     45      dispatch(
     46        ac.DiscoveryStreamUserEvent({
     47          event: "FEATURE_HIGHLIGHT_IMPRESSION",
     48          source: "FEATURE_HIGHLIGHT",
     49          value: { feature: FEATURE_ID },
     50        })
     51      );
     52    }
     53  }, [dispatch, isIntersecting]);
     54 
     55  const prefs = useSelector(state => state.Prefs.values);
     56  const mobileDownloadPromoVarA =
     57    prefs[PREF_MOBILE_DOWNLOAD_HIGHLIGHT_VARIANT_A];
     58  const mobileDownloadPromoVarB =
     59    prefs[PREF_MOBILE_DOWNLOAD_HIGHLIGHT_VARIANT_B];
     60  const mobileDownloadPromoVarC =
     61    prefs[PREF_MOBILE_DOWNLOAD_HIGHLIGHT_VARIANT_C];
     62 
     63  function getActiveVariant() {
     64    if (mobileDownloadPromoVarA) {
     65      return "A";
     66    }
     67    if (mobileDownloadPromoVarB) {
     68      return "B";
     69    }
     70    if (mobileDownloadPromoVarC) {
     71      return "C";
     72    }
     73    return null;
     74  }
     75 
     76  function getVariantQRCodeImg() {
     77    const variant = getActiveVariant();
     78    switch (variant) {
     79      case "A":
     80        return "chrome://newtab/content/data/content/assets/download-qr-code-var-a.png";
     81      case "B":
     82        return "chrome://newtab/content/data/content/assets/download-qr-code-var-b.png";
     83      case "C":
     84        return "chrome://newtab/content/data/content/assets/download-qr-code-var-c.png";
     85      default:
     86        return null;
     87    }
     88  }
     89 
     90  function getVariantCopy() {
     91    const variant = getActiveVariant();
     92    switch (variant) {
     93      case "A":
     94        return "newtab-download-mobile-highlight-body-variant-a";
     95      case "B":
     96        return "newtab-download-mobile-highlight-body-variant-b";
     97      case "C":
     98        return "newtab-download-mobile-highlight-body-variant-c";
     99      default:
    100        return null;
    101    }
    102  }
    103 
    104  return (
    105    <div className="download-firefox-feature-highlight">
    106      <FeatureHighlight
    107        position={position}
    108        feature={FEATURE_ID}
    109        dispatch={dispatch}
    110        message={
    111          <div className="download-firefox-feature-highlight-content">
    112            <img
    113              src={getVariantQRCodeImg()}
    114              data-l10n-id="newtab-download-mobile-highlight-image"
    115              width="120"
    116              height="191"
    117              alt=""
    118            />
    119            <p
    120              className="title"
    121              data-l10n-id="newtab-download-mobile-highlight-title"
    122            />
    123            <p className="subtitle" data-l10n-id={getVariantCopy()} />
    124          </div>
    125        }
    126        openedOverride={true}
    127        showButtonIcon={false}
    128        dismissCallback={onDismiss}
    129        outsideClickCallback={handleDismiss}
    130      />
    131    </div>
    132  );
    133 }