firefox-main/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/WallpaperFeatureHighlight.jsx

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,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
import React, { useCallback } from "react";
import { useSelector } from "react-redux";
import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
import { FeatureHighlight } from "./FeatureHighlight";
export function WallpaperFeatureHighlight({
position,
dispatch,
handleDismiss,
handleClick,
handleBlock,
}) {
const onDismiss = useCallback(() => {
handleDismiss();
handleBlock();
}, [handleDismiss, handleBlock]);
const onToggleClick = useCallback(
elementId => {
dispatch({ type: at.SHOW_PERSONALIZE });
dispatch(ac.UserEvent({ event: "SHOW_PERSONALIZE" }));
handleClick(elementId);
onDismiss();
},
[dispatch, onDismiss, handleClick]
);
// Extract the strings and feature ID from OMC
const { messageData } = useSelector(state => state.Messages);
return (
<div
className={`wallpaper-feature-highlight ${messageData.content?.darkModeDismiss ? "is-inverted-dark-dismiss-button" : ""}`}
>
<FeatureHighlight
position={position}
data-l10n-id="feature-highlight-wallpaper"
feature={messageData.content.feature}
dispatch={dispatch}
message={
<div className="wallpaper-feature-highlight-content">
<picture className="follow-section-button-highlight-image">
<source
srcSet={
messageData.content?.darkModeImageURL ||
}
media="(prefers-color-scheme: dark)"
/>
<source
srcSet={
messageData.content?.imageURL ||
}
media="(prefers-color-scheme: light)"
/>
<img width="320" height="195" alt="" />
</picture>
{messageData.content?.cardTitle ? (
<p className="title">{messageData.content.cardTitle}</p>
) : (
<p
className="title"
data-l10n-id={
messageData.content.title ||
"newtab-new-user-custom-wallpaper-title"
}
/>
)}
{messageData.content?.cardMessage ? (
<p className="subtitle">{messageData.content.cardMessage}</p>
) : (
<p
className="subtitle"
data-l10n-id={
messageData.content.subtitle ||
"newtab-new-user-custom-wallpaper-subtitle"
}
/>
)}
<span className="button-wrapper">
{messageData.content?.cardCta ? (
<moz-button
type="default"
onClick={() => onToggleClick("open-customize-menu")}
label={messageData.content.cardCta}
/>
) : (
<moz-button
type="default"
onClick={() => onToggleClick("open-customize-menu")}
data-l10n-id={
messageData.content.cta ||
"newtab-new-user-custom-wallpaper-cta"
}
/>
)}
</span>
</div>
}
toggle={<div className="icon icon-help"></div>}
openedOverride={true}
showButtonIcon={false}
dismissCallback={onDismiss}
outsideClickCallback={handleDismiss}
/>
</div>
);
}