tor-browser

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

PersonalizedCard.jsx (2138B)

      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 { SafeAnchor } from "../SafeAnchor/SafeAnchor";
      7 import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
      8 
      9 export const PersonalizedCard = ({
     10  dispatch,
     11  handleDismiss,
     12  handleClick,
     13  handleBlock,
     14  messageData,
     15 }) => {
     16  const kitFox = "chrome://newtab/content/data/content/assets/kit.png";
     17 
     18  const onDismiss = useCallback(() => {
     19    handleDismiss();
     20    handleBlock();
     21  }, [handleDismiss, handleBlock]);
     22 
     23  const onToggleClick = useCallback(
     24    elementId => {
     25      dispatch({ type: at.SHOW_PERSONALIZE });
     26      dispatch(ac.UserEvent({ event: "SHOW_PERSONALIZE" }));
     27      handleClick(elementId);
     28    },
     29    [dispatch, handleClick]
     30  );
     31 
     32  return (
     33    <aside className="personalized-card-wrapper">
     34      <div className="personalized-card-dismiss">
     35        <moz-button
     36          type="icon ghost"
     37          iconSrc="chrome://global/skin/icons/close.svg"
     38          onClick={onDismiss}
     39          data-l10n-id="newtab-toast-dismiss-button"
     40        ></moz-button>
     41      </div>
     42      <div className="personalized-card-inner">
     43        <img src={kitFox} alt="" />
     44        <h2>{messageData.content.cardTitle}</h2>
     45        <p>{messageData.content.cardMessage}</p>
     46        <div className="personalized-card-cta-wrapper">
     47          <moz-button
     48            type="primary"
     49            class="personalized-card-cta"
     50            onClick={() => onToggleClick("open-personalization-panel")}
     51          >
     52            {messageData.content.ctaText}
     53          </moz-button>
     54          <SafeAnchor
     55            className="personalized-card-link"
     56            dispatch={dispatch}
     57            url={messageData.content.linkUrl || "https://support.mozilla.org/"}
     58            onLinkClick={() => {
     59              handleClick("link-click");
     60            }}
     61          >
     62            {messageData.content.linkText}
     63          </SafeAnchor>
     64        </div>
     65      </div>
     66    </aside>
     67  );
     68 };