Add basic acknolwedgmenet to notifications.

src/components/molecules/notification-display/notification-display.molecule.jsx

@@ -0,0 +1,70 @@
+import { useMutation } from "@apollo/client";
+import { Button, Card, Form, Input, Space } from "antd";
+import React from "react";
+import { useState } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { ACCEPT_NOTIFICATION } from "../../../graphql/notification.queries";
+import { checkForNotification } from "../../../redux/user/user.actions";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+  checkForNotification: () => dispatch(checkForNotification()),
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(NotificationDisplayMolecule);
+
+export function NotificationDisplayMolecule({
+  notification,
+  checkForNotification,
+}) {
+  const [acceptNotification] = useMutation(ACCEPT_NOTIFICATION);
+  const [loading, setLoading] = useState(false);
+  const handleConfirm = async (values) => {
+    console.log("form submit", notification, values);
+    setLoading(true);
+    await acceptNotification({
+      variables: {
+        id: notification.id,
+        notification: { acceptedby: values.acceptedby, acceptedat: new Date() },
+      },
+    });
+    checkForNotification();
+    setLoading(false);
+  };
+  const handleDismiss = async () => {};
+  const [form] = Form.useForm();
+  return (
+    <Card>
+      <div dangerouslySetInnerHTML={{ __html: notification.html }} />
+      {notification.requiresconfirmation ? (
+        <Form form={form} onFinish={handleConfirm}>
+          <Space align="baseline">
+            <Form.Item
+              label="Acknowledged by"
+              name="acceptedby"
+              rules={[
+                {
+                  required: true,
+                  message:
+                    "Please enter your name to acknowledge and agree to the notice above.",
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Button loading={loading} onClick={() => form.submit()}>
+              Acknowledge
+            </Button>
+          </Space>
+        </Form>
+      ) : (
+        <Button onClick={handleDismiss}>Dismiss</Button>
+      )}
+    </Card>
+  );
+}

src/components/organisms/notification-modal/notification-modal.organism.jsx

@@ -0,0 +1,30 @@
+import { Modal } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectNotifications } from "../../../redux/user/user.selectors";
+import NotificationDisplayMolecule from "../../molecules/notification-display/notification-display.molecule";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  notifications: selectNotifications,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(NotificationModal);
+
+export function NotificationModal({ notifications }) {
+  if (!notifications || notifications.length === 0) return null;
+  return (
+    <Modal
+      open={notifications && notifications.length > 0}
+      closable={false}
+      footer={null}
+    >
+      {notifications &&
+        notifications.map((n) => (
+          <NotificationDisplayMolecule key={n.id} notification={n} />
+        ))}
+    </Modal>
+  );
+}

src/components/pages/routes/routes.page.jsx

@@ -7,6 +7,7 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../../redux/user/user.selectors";
 import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
 import ReleaseNotes from "../../molecules/release-notes/release-notes.molecule";
+import NotificationModalOrganism from "../../organisms/notification-modal/notification-modal.organism";
 import SiderMenuOrganism from "../../organisms/sider-menu/sider-menu.organism";
 import UpdateManagerOrganism from "../../organisms/update-manager/update-manager.organism";
 import JobsPage from "../jobs/jobs.page";
@@ -37,6 +38,7 @@ export function RoutesPage({ bodyshop }) {
       </Layout.Sider>
       <Layout style={{ background: "#fff" }}>
         <Layout.Content style={{ marginLeft: "1rem", height: "100%" }}>
+        <NotificationModalOrganism />
           <Routes>
             <Route exact path="/settings" element={<SettingsPage />} />
             <Route exact path="/reporting" element={<ReportingPage />} />