components/Modals/ConfirmationModal.js

import React from 'react';
import SVGComponent from '../SVG/SVGComponent';
import { SVG_ICONS } from '../../constants';

/**
 * @module Modals/ConfirmationModal
 */
/**
 * @typedef {object} props
 * @property {object} modalData
 * @property {string} modalData.heading
 * @property {string} modalData.title
 * @property {Array} modalData.subHeading
 * @property {Array} modalData.additionalMessages
 * @property {Function} cancel
 * @property {Function} confirmation
 * @property {string} cancelBtnText
 * @property {string} confirmBtnText
 * @property {boolean} logo
 */

/**
 * @param {props} props
 * @returns {view}
 */
const ConfirmationModal = (props) => (
  <div className="dialog open position-fixed">
    <div className="p-20">
      <div className="dialog__heading">
        <span className="dialog-title">{props.modalData.heading}</span>
        <SVGComponent onClick={props.cancel} className="icon-xxs  dialog__close" src={`${SVG_ICONS.utility}#close`} />
      </div>
    </div>
    {props.modalData.title ? (
      <div className="dialog__info">
        <div className="dialog__info-title">{props.modalData.title}</div>
      </div>
    ) : null}
    <div className={`p-20 text-center ${props.modalData.subHeading ? '' : 'password-reset'}`}>
      {props.logo && <span className="icon-warning mb-20" />}
      {props.modalData.subHeading && <h3 className="m-t-10">{props.modalData.subHeading}</h3>}
      {props.modalData.additionalMessages &&
        props.modalData.additionalMessages.map((msg) => <p key={`msg-${msg}`}>{msg}</p>)}
    </div>

    {props?.showChildren && <div>{props.children}</div>}

    <div className="p-20">
      <div className="dialog__button-wrapper">
        <button id="no_confirmationModal" type="button" className="btn btn-secondary" onClick={props.cancel}>
          {props.cancelBtnText || 'No'}
        </button>
        <button id="yes_confirmationModal" type="button" className="btn btn-primary ml-10" onClick={props.confirmation}>
          {props.confirmBtnText || 'Yes'}
        </button>
      </div>
    </div>
  </div>
);

export default ConfirmationModal;