tor-browser

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

PromoCard.jsx (2533B)

      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 React, { useCallback } from "react";
      6 import { useDispatch } from "react-redux";
      7 import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
      8 import { useIntersectionObserver } from "../../../lib/utils";
      9 
     10 const PREF_PROMO_CARD_DISMISSED = "discoverystream.promoCard.visible";
     11 
     12 /**
     13 * The PromoCard component displays a promotional message.
     14 * It is used next to the AdBanner component in a four-column layout.
     15 */
     16 
     17 const PromoCard = () => {
     18  const dispatch = useDispatch();
     19 
     20  const onCtaClick = useCallback(() => {
     21    dispatch(
     22      ac.AlsoToMain({
     23        type: at.PROMO_CARD_CLICK,
     24      })
     25    );
     26  }, [dispatch]);
     27 
     28  const onDismissClick = useCallback(() => {
     29    dispatch(
     30      ac.AlsoToMain({
     31        type: at.PROMO_CARD_DISMISS,
     32      })
     33    );
     34    dispatch(ac.SetPref(PREF_PROMO_CARD_DISMISSED, false));
     35  }, [dispatch]);
     36 
     37  const handleIntersection = useCallback(() => {
     38    dispatch(
     39      ac.AlsoToMain({
     40        type: at.PROMO_CARD_IMPRESSION,
     41      })
     42    );
     43  }, [dispatch]);
     44 
     45  const ref = useIntersectionObserver(handleIntersection);
     46 
     47  return (
     48    <div
     49      className="promo-card-wrapper"
     50      ref={el => {
     51        ref.current = [el];
     52      }}
     53    >
     54      <div className="promo-card-dismiss-button">
     55        <moz-button
     56          type="icon ghost"
     57          size="small"
     58          data-l10n-id="newtab-promo-card-dismiss-button"
     59          iconsrc="chrome://global/skin/icons/close.svg"
     60          onClick={onDismissClick}
     61          onKeyDown={onDismissClick}
     62        />
     63      </div>
     64      <div className="promo-card-inner">
     65        <div className="img-wrapper">
     66          <img
     67            src="chrome://newtab/content/data/content/assets/puzzle-fox.svg"
     68            alt=""
     69          />
     70        </div>
     71        <span
     72          className="promo-card-title"
     73          data-l10n-id="newtab-promo-card-title"
     74        />
     75        <span
     76          className="promo-card-body"
     77          data-l10n-id="newtab-promo-card-body"
     78        />
     79        <span className="promo-card-cta-wrapper">
     80          <a
     81            href="https://support.mozilla.org/kb/sponsor-privacy"
     82            data-l10n-id="newtab-promo-card-cta"
     83            target="_blank"
     84            rel="noreferrer"
     85            onClick={onCtaClick}
     86          ></a>
     87        </span>
     88      </div>
     89    </div>
     90  );
     91 };
     92 
     93 export { PromoCard };