@boomerang-io/carbon-addons-boomerang-react
Version:
Carbon Addons for Boomerang apps
107 lines (104 loc) • 6.76 kB
JavaScript
import React from 'react';
import { ComposedModal, ModalHeader, ModalBody, Accordion, AccordionItem, ModalFooter, Button } from '@carbon/react';
import { Locked } from '@carbon/react/icons';
import DOMPurify from 'dompurify';
import Error from '../ErrorMessage/ErrorMessage.js';
import HeaderMenuItem from '../Header/HeaderMenuItem.js';
import ToastNotification from '../Notifications/ToastNotification.js';
import Loading from '../Loading/Loading.js';
import notify from '../Notifications/notify.js';
import { useQuery, useMutation } from '@tanstack/react-query';
import { resolver, serviceUrl } from '../../config/servicesConfig.js';
import { prefix } from '../../internal/settings.js';
/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
function formatDateTimestamp(timestamp) {
return new Date(timestamp).toLocaleDateString("en-us", {
year: "numeric",
month: "long",
day: "numeric",
});
}
function PrivacyStatement({ baseServicesUrl, closeModal, isOpen, organization = "the platform", platformEmail = "isesupp@us.ibm.com", }) {
const [resetKey, setResetKey] = React.useState(0);
const [isConfirmModalOpen, setIsConfirmModalOpen] = React.useState(false);
const statementUrl = serviceUrl.getStatement({ baseServicesUrl });
const statementQuery = useQuery({
queryKey: [statementUrl],
queryFn: resolver.query(statementUrl),
});
const { mutateAsync, error: mutateUserConsentError } = useMutation({ mutationFn: resolver.putUserConsent });
function closeConfirmModal() {
setIsConfirmModalOpen(false);
}
function handleClose() {
closeModal();
closeConfirmModal();
setResetKey(resetKey + 1);
}
async function handleSubmit() {
const body = {
hasConsented: false,
version: statementQuery.data?.version,
};
try {
await mutateAsync({ baseServicesUrl, body });
notify(React.createElement(ToastNotification, { subtitle: "Successfully requested account deletion", title: "Delete Account", kind: "success" }), { containerId: `${prefix}--bmrg-header-notifications` });
closeConfirmModal();
closeModal();
if (window.location) {
window.location.reload();
}
}
catch (e) {
closeConfirmModal();
}
}
return (React.createElement(ComposedModal, { "aria-label": "Privacy Statement", className: `${prefix}--bmrg-privacy-statement-container ${prefix}--bmrg-header-modal`, onClose: handleClose, open: isOpen, preventCloseOnClickOutside: isConfirmModalOpen },
React.createElement(ModalHeader, { closeModal: handleClose, label: `Effective as of ${statementQuery.data ? formatDateTimestamp(statementQuery.data.effectiveDate) : ""}`, title: "Privacy Statement" }),
React.createElement(ModalBody, { key: resetKey },
React.createElement("div", { className: `${prefix}--bmrg-privacy-statement` },
React.createElement(React.Fragment, null,
statementQuery.isLoading ? (React.createElement(Loading, null)) : statementQuery.error ? (React.createElement(Error, { style: { color: "#F2F4F8" } })) : (statementQuery.data &&
statementQuery.data.formContent?.sections?.length > 0 && (React.createElement(React.Fragment, null,
React.createElement(Accordion, null, statementQuery.data.formContent.sections.map((section) => {
return (React.createElement(AccordionItem, { title: section.title, key: section.title },
React.createElement("p", { className: `${prefix}--bmrg-privacy-statement__content`, dangerouslySetInnerHTML: {
__html: DOMPurify.sanitize(section.content),
} })));
})),
React.createElement("p", { className: `${prefix}--bmrg-privacy-statement__message` },
`For any questions or concerns about business and personal information captured on
${organization}, please contact${" "}`,
React.createElement("a", { href: `mailto:${platformEmail}?subject=${organization} Privacy Statement` }, platformEmail),
".")))),
mutateUserConsentError && (React.createElement("p", { className: `${prefix}--bmrg-privacy-statement__error` }, "Failed to receive deletion request. Please try again."))))),
React.createElement(ModalFooter, null,
React.createElement(Button, { "data-modal-primary-focus": true, kind: "secondary", onClick: handleClose }, "Close"),
React.createElement(Button, { kind: "danger", onClick: () => setIsConfirmModalOpen(true) }, "Request account deletion"),
React.createElement("div", { className: `${prefix}--bmrg-privacy-statement-delete` },
React.createElement(ComposedModal, { onClose: closeConfirmModal, open: isConfirmModalOpen },
React.createElement(ModalHeader, { closeModal: closeConfirmModal, label: "Delete Account", title: "Request account deletion" }),
React.createElement(ModalBody, null,
React.createElement("p", { className: `${prefix}--bmrg-privacy-statement-delete__desc` }, "By selecting to delete your account, your account will be deleted along with all of your user data from our system and we will notify your team(s) that you are no longer a memeber of the platform. Are you sure you want to delete your account?")),
React.createElement(ModalFooter, null,
React.createElement(Button, { "data-modal-primary-focus": true, kind: "secondary", onClick: closeConfirmModal }, "No, go back to Privacy Statement"),
React.createElement(Button, { kind: "danger", type: "submit", onClick: handleSubmit }, "Yes, delete my account")))))));
}
function PrivacyStatementMenuItem(props) {
const menuItemRef = React.useRef(null);
const [isOpen, setIsOpen] = React.useState(false);
const handleClose = () => {
setIsOpen(false);
setTimeout(() => {
menuItemRef.current?.focus();
}, 0);
};
return (React.createElement(React.Fragment, null,
React.createElement(HeaderMenuItem, { icon: React.createElement(Locked, null), onClick: () => setIsOpen(!isOpen), ref: menuItemRef, text: "Privacy Statement", type: "button" }),
React.createElement(PrivacyStatement, { isOpen: isOpen, closeModal: handleClose, ...props })));
}
export { PrivacyStatementMenuItem, PrivacyStatement as default };