WidgetsFeatureHighlight.jsx

Enable keyboard shortcuts

/* 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 https://mozilla.org/MPL/2.0/. */

import { useSelector } from "react-redux";

import { FeatureHighlight } from "./FeatureHighlight";

function WidgetsFeatureHighlight({ handleDismiss, handleBlock, dispatch }) {

  // Extract the strings and feature ID from OMC

  const { messageData } = useSelector(state => state.Messages);

  return (

    <FeatureHighlight

      position="inset-inline-end inset-block-end"

      arrowPosition="arrow-top-start"

      openedOverride={true}

      showButtonIcon={false}

      feature={messageData?.content?.feature}

      modalClassName={`widget-highlight-wrapper${messageData.content?.hideImage ? " no-image" : ""}`}

      message={

        <div className="widget-highlight">

          {!messageData.content?.hideImage && (

            <img

              src={

                messageData.content?.imageURL ||

                "chrome://newtab/content/data/content/assets/widget-message.png"

              alt=""

/>

)}

          {messageData.content?.cardTitle ? (

            <h3 className="title">{messageData.content.cardTitle}</h3>

          ) : (

<h3

              className="title"

              data-l10n-id={

                messageData.content.title || "newtab-widget-message-title"

/>

)}

          {messageData.content?.cardMessage ? (

            <p className="subtitle">{messageData.content.cardMessage}</p>

          ) : (

<p

              className="subtitle"

              data-l10n-id={

                messageData.content.subtitle || "newtab-widget-message-copy"

/>

)}

        </div>

      dispatch={dispatch}

      dismissCallback={() => {

        handleDismiss();

        handleBlock();

}}

      outsideClickCallback={handleDismiss}

/>

);

export { WidgetsFeatureHighlight };