@shopgate/engage/push-opt-in/components/PushOptInModal/index.js

Shopgate's ENGAGE library.

import React, { useMemo, useEffect } from 'react';
import PropTypes from 'prop-types';
import throttle from 'lodash/throttle';
import classNames from 'classnames';
import { Grid, I18n, Button, Modal } from '@shopgate/engage/components';
import { appConfig } from '@shopgate/engage';
import pushImage from "./push-opt-in.svg";
import styles from "./style";
import connect from "./connector";
import { svgToDataUrl } from "../../../core";

/**
 * The Push opt-in modal component.
 * @param {Object} props The component props.
 * @returns {JSX.Element}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const PushOptInModal = ({
  isPushOptInModalVisible,
  allowPushOptIn,
  denyPushOptIn
}) => {
  const {
    pushOptIn: {
      modalMessage,
      modalTitle,
      modalButtonDeny,
      modalButtonAllow,
      modalImageURL,
      modalImageSVG
    } = {}
  } = appConfig;
  const imageSRC = useMemo(() => {
    if (!modalImageURL && !modalImageSVG) {
      return pushImage;
    }
    if (modalImageURL) {
      return modalImageURL;
    }
    return svgToDataUrl(modalImageSVG, pushImage);
  }, [modalImageSVG, modalImageURL]);

  // Button event handlers are throttled to prevent multiple clicks
  const handleAllowPushOptIn = useMemo(() => throttle(allowPushOptIn, 1000, {
    leading: true,
    trailing: false
  }), [allowPushOptIn]);
  const handleDenyPushOptIn = useMemo(() => throttle(denyPushOptIn, 1000, {
    leading: true,
    trailing: false
  }), [denyPushOptIn]);
  useEffect(() => () => {
    handleAllowPushOptIn.cancel();
    handleDenyPushOptIn.cancel();
  }, [handleAllowPushOptIn, handleDenyPushOptIn]);
  if (!isPushOptInModalVisible) {
    return null;
  }
  return /*#__PURE__*/_jsx(Modal, {
    classes: {
      content: styles.modalContent,
      layout: styles.modalLayout
    },
    children: /*#__PURE__*/_jsx(Grid, {
      className: classNames(styles.container, 'push-opt-in-modal__container'),
      role: "alertdialog",
      "aria-modal": true,
      "aria-labelledby": "pushOptInDialogTitle",
      "aria-describedby": "pushOptInDialogMessage",
      children: /*#__PURE__*/_jsxs(Grid.Item, {
        className: styles.item,
        children: [/*#__PURE__*/_jsx("img", {
          src: imageSRC,
          className: classNames(styles.image, 'push-opt-in-modal__image'),
          alt: "",
          "aria-hidden": "true"
        }), /*#__PURE__*/_jsx(I18n.Text, {
          className: classNames(styles.title, 'push-opt-in-modal__title'),
          string: modalTitle || 'pushOptInModal.title',
          id: "pushOptInDialogTitle"
        }), /*#__PURE__*/_jsx(I18n.Text, {
          className: classNames('push-opt-in-modal__message'),
          string: modalMessage || 'pushOptInModal.message',
          id: "pushOptInDialogMessage"
        }), /*#__PURE__*/_jsx(Button, {
          onClick: handleAllowPushOptIn,
          type: "primary",
          className: classNames(styles.button, 'push-opt-in-modal__button-allow'),
          children: /*#__PURE__*/_jsx(I18n.Text, {
            string: modalButtonAllow || 'pushOptInModal.buttonAllow'
          })
        }), /*#__PURE__*/_jsx(Button, {
          onClick: handleDenyPushOptIn,
          type: "plain",
          className: classNames(styles.button, 'push-opt-in-modal__button-deny'),
          children: /*#__PURE__*/_jsx(I18n.Text, {
            string: modalButtonDeny || 'pushOptInModal.buttonDeny',
            className: styles.buttonText
          })
        })]
      })
    })
  });
};
export default connect(PushOptInModal);