67 lines
2 KiB
JavaScript
67 lines
2 KiB
JavaScript
/* 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, { useCallback } from "react";
|
|
import { SafeAnchor } from "../SafeAnchor/SafeAnchor";
|
|
import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
|
|
|
|
export const PersonalizedCard = ({
|
|
dispatch,
|
|
handleDismiss,
|
|
handleClick,
|
|
handleBlock,
|
|
messageData,
|
|
}) => {
|
|
const wavingFox =
|
|
"chrome://newtab/content/data/content/assets/waving-fox.svg";
|
|
|
|
const onDismiss = useCallback(() => {
|
|
handleDismiss();
|
|
handleBlock();
|
|
}, [handleDismiss, handleBlock]);
|
|
|
|
const onToggleClick = useCallback(
|
|
elementId => {
|
|
dispatch({ type: at.SHOW_PERSONALIZE });
|
|
dispatch(ac.UserEvent({ event: "SHOW_PERSONALIZE" }));
|
|
handleClick(elementId);
|
|
},
|
|
[dispatch, handleClick]
|
|
);
|
|
|
|
return (
|
|
<aside className="personalized-card-wrapper">
|
|
<div className="personalized-card-dismiss">
|
|
<moz-button
|
|
type="icon ghost"
|
|
iconSrc="chrome://global/skin/icons/close.svg"
|
|
onClick={onDismiss}
|
|
data-l10n-id="newtab-toast-dismiss-button"
|
|
></moz-button>
|
|
</div>
|
|
<div className="personalized-card-inner">
|
|
<img src={wavingFox} alt="" />
|
|
<h2>{messageData.content.cardTitle}</h2>
|
|
<p>{messageData.content.cardMessage}</p>
|
|
<moz-button
|
|
type="primary"
|
|
class="personalized-card-cta"
|
|
onClick={() => onToggleClick("open-personalization-panel")}
|
|
>
|
|
{messageData.content.ctaText}
|
|
</moz-button>
|
|
<SafeAnchor
|
|
className="personalized-card-link"
|
|
dispatch={dispatch}
|
|
url="https://www.mozilla.org/en-US/privacy/firefox/#notice"
|
|
onLinkClick={() => {
|
|
handleClick("link-click");
|
|
}}
|
|
>
|
|
{messageData.content.linkText}
|
|
</SafeAnchor>
|
|
</div>
|
|
</aside>
|
|
);
|
|
};
|