Andal.LND/frontend-app-communications
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: [MICROBA-1506] refactor message modal (#41)

Browse Source 
This pr extracts out the message modal so that it can be reused
elsewhere in the app. Specifically so we can reuse it for the "view"
button in the scheduled emails table.
This commit is contained in:
Thomas Tracy
2022-05-17 12:05:27 -04:00
committed by GitHub
parent ffa0361c22
commit 6dd09451a3
2 changed files with 84 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx
View File

@@ -1,15 +1,16 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { useParams } from 'react-router-dom';
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import {
Button, Icon, Modal, StatefulButton,
Button, Icon, StatefulButton,
} from '@edx/paragon';
import { SpinnerSimple } from '@edx/paragon/icons';
import messages from './messages';
import { getSentEmailHistory } from './data/api';
import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';
import ViewEmailModal from './ViewEmailModal';
function BulkEmailContentHistory({ intl, copyTextToEditor }) {
const { courseId } = useParams();
@@ -78,58 +79,6 @@ function BulkEmailContentHistory({ intl, copyTextToEditor }) {
setIsMessageModalOpen(true);
};
/**
* Renders a modal that will display the contents of a single historical email message sent via the bulk course email
* tool to a user.
*/
const renderMessageModal = () => (
<div>
<Modal
open={isMessageModalOpen}
title=""
body={(
<div>
<div className="d-flex flex-row">
<p>{intl.formatMessage(messages.modalMessageSubject)}</p>
<p className="pl-2">{messageContent.subject}</p>
</div>
<div className="d-flex flex-row">
<p>{intl.formatMessage(messages.modalMessageSentBy)}</p>
<p className="pl-2">{messageContent.requester}</p>
</div>
<div className="d-flex flex-row">
<p>{intl.formatMessage(messages.modalMessageTimeSent)}</p>
<p className="pl-2">{messageContent.created}</p>
</div>
<div className="d-flex flex-row">
<p>{intl.formatMessage(messages.modalMessageSentTo)}</p>
<p className="pl-2">{messageContent.sent_to}</p>
</div>
<hr className="py-2" />
<div>
<p>{intl.formatMessage(messages.modalMessageBody)}</p>
{/* eslint-disable-next-line react/no-danger */}
<div dangerouslySetInnerHTML={{ __html: messageContent.email.html_message }} />
</div>
</div>
)}
onClose={() => setIsMessageModalOpen(false)}
buttons={[
<Button onClick={() => {
copyTextToEditor(messageContent.email.html_message);
setIsMessageModalOpen(false);
}}
>
<FormattedMessage
id="bulk.email.tool.copy.message.button"
defaultMessage="Copy to editor"
/>
</Button>,
]}
/>
</div>
);
const tableColumns = [
{
Header: `${intl.formatMessage(messages.emailHistoryTableColumnHeaderSubject)}`,
@@ -176,7 +125,14 @@ function BulkEmailContentHistory({ intl, copyTextToEditor }) {
return (
<div>
<div>{messageContent && renderMessageModal()}</div>
{messageContent && (
<ViewEmailModal
messageContent={messageContent}
isOpen={isMessageModalOpen}
setModalOpen={setIsMessageModalOpen}
copyTextToEditor={copyTextToEditor}
/>
)}
<div>
<p>{intl.formatMessage(messages.emailHistoryTableSectionButtonHeader)}</p>
<StatefulButton

73
src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx Normal file
View File

@@ -0,0 +1,73 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Modal } from '@edx/paragon';
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import messages from './messages';
function ViewEmailModal({
intl, messageContent, isOpen, setModalOpen, copyTextToEditor,
}) {
return (
<div>
<Modal
open={isOpen}
title=""
body={(
<div>
<div className="d-flex flex-row">
<p>{intl.formatMessage(messages.modalMessageSubject)}</p>
<p className="pl-2">{messageContent.subject}</p>
</div>
<div className="d-flex flex-row">
<p>{intl.formatMessage(messages.modalMessageSentBy)}</p>
<p className="pl-2">{messageContent.requester}</p>
</div>
<div className="d-flex flex-row">
<p>{intl.formatMessage(messages.modalMessageTimeSent)}</p>
<p className="pl-2">{messageContent.created}</p>
</div>
<div className="d-flex flex-row">
<p>{intl.formatMessage(messages.modalMessageSentTo)}</p>
<p className="pl-2">{messageContent.sent_to}</p>
</div>
<hr className="py-2" />
<div>
<p>{intl.formatMessage(messages.modalMessageBody)}</p>
{/* eslint-disable-next-line react/no-danger */}
<div dangerouslySetInnerHTML={{ __html: messageContent.email.html_message }} />
</div>
</div>
)}
onClose={() => setModalOpen(false)}
buttons={[
<Button
onClick={() => {
copyTextToEditor(messageContent.email.html_message);
setModalOpen(false);
}}
>
<FormattedMessage id="bulk.email.tool.copy.message.button" defaultMessage="Copy to editor" />
</Button>,
]}
/>
</div>
);
}
ViewEmailModal.propTypes = {
intl: intlShape.isRequired,
messageContent: PropTypes.shape({
subject: PropTypes.string,
requester: PropTypes.string,
created: PropTypes.string,
email: PropTypes.shape({
html_message: PropTypes.string,
}).isRequired,
sent_to: PropTypes.arrayOf(PropTypes.string),
}).isRequired,
isOpen: PropTypes.bool.isRequired,
setModalOpen: PropTypes.func.isRequired,
copyTextToEditor: PropTypes.func.isRequired,
};
export default injectIntl(ViewEmailModal);