Source code
Revision control
Copy as Markdown
Other Tools
/* 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,
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 =
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}
onLinkClick={() => {
handleClick("link-click");
}}
>
{messageData.content.linkText}
</SafeAnchor>
</div>
</aside>
);
};