@spokane-folio/security-incident 1.0.28

package/src/components/incidents/ModalDescribeCustomer.js

@@ -0,0 +1,361 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import DOMPurify from 'dompurify';
+import {
+  AccordionSet,
+  Accordion,
+  Button,
+  Col,
+  Datepicker,
+  Editor,
+  Modal,
+  Pane,
+  Paneset,
+  ModalFooter,
+  Row,
+  TextField,
+} from '@folio/stripes/components';
+import css from './ModalStyle.css';
+import { v4 as uuidv4 } from 'uuid';
+import isValidDateFormat from './helpers/isValidDateFormat';
+import stripHTML from './helpers/stripHTML';
+import { useIncidents } from '../../contexts/IncidentContext';
+
+const ModalDescribeCustomer = () => {
+  const {
+    isModalUnknownCustOpen,
+    closeModalUnknownCust,
+    setSelectedCustomers,
+  } = useIncidents();
+
+  const [formData, setFormData] = useState({
+    firstName: '',
+    lastName: '',
+    description: '',
+    registered: false,
+    id: '',
+    details: {
+      sex: '',
+      race: '',
+      height: '',
+      weight: '',
+      hair: '',
+      eyes: '',
+      dateOfBirth: '',
+      streetAddress: '',
+      city: '',
+      state: '',
+      zipcode: '',
+    }
+  });
+
+  const detailsKeysArray = [
+    'sex', 'race', 'height', 'weight', 'hair', 'eyes', 'dateOfBirth', 'streetAddress', 'city', 'state', 'zipcode',
+  ];
+
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    if (detailsKeysArray.includes(name)) {
+      setFormData((prev) => ({
+        ...prev,
+        details: {
+          ...prev.details,
+          [name]: value,
+        }
+      }));
+    } else {
+      // Otherwise, update the top-level fields
+      setFormData((prev) => ({
+        ...prev,
+        [name]: value,
+      }));
+    }
+  };
+
+  const handleDescriptionChange = (content) => {
+    const sanitizedContent = DOMPurify.sanitize(content);
+    setFormData(prev => ({
+      ...prev,
+      description: sanitizedContent
+    }));
+  };
+
+  const isFormDataValid = () => {
+    const isDateOfBirthValid = formData.details.dateOfBirth === '' || formData.details.dateOfBirth && isValidDateFormat(formData.details.dateOfBirth);
+
+    const isEditorValid =
+      formData.description && stripHTML(formData.description);
+    return isEditorValid && isDateOfBirthValid;
+  };
+
+  const handleSave = () => {
+    setSelectedCustomers((prev) => [
+      ...prev,
+      {
+        id: uuidv4(),
+        firstName: formData.firstName.trim(),
+        lastName: formData.lastName.trim(),
+        description: formData.description.trim(),
+        registered: false,
+        details: {
+          sex: formData.details.sex.trim(),
+          race: formData.details.race.trim(),
+          height: formData.details.height.trim(),
+          weight: formData.details.weight.trim(),
+          hair: formData.details.hair.trim(),
+          eyes: formData.details.eyes.trim(),
+          dateOfBirth: formData.details.dateOfBirth,
+          streetAddress: formData.details.streetAddress.trim(),
+          city: formData.details.city.trim(),
+          state: formData.details.state.trim(),
+          zipcode: formData.details.zipcode.trim(),
+        }
+      },
+    ]);
+    // console.log("@ModalDescribeCustomer - handleSave, formData: ", JSON.stringify(formData, null, 2));
+    setFormData({
+      firstName: '',
+      lastName: '',
+      description: '',
+      registered: false,
+      id: '',
+      details: {
+        sex: '',
+        race: '',
+        height: '',
+        weight: '',
+        hair: '',
+        eyes: '',
+        dateOfBirth: '',
+        streetAddress: '',
+        city: '',
+        state: '',
+        zipcode: '',
+      }
+    })
+    closeModalUnknownCust();
+  };
+
+  if (!isModalUnknownCustOpen) {
+    return null;
+  };
+
+  const editorModules = {
+   toolbar: [
+      [{ 'header': [1, 2, false] }], 
+      ['bold', 'italic', 'underline'], 
+    ],
+  };
+
+  const footer = (
+      <ModalFooter >
+        <Button
+          onClick={handleSave}
+          buttonStyle="primary"
+          disabled={!isFormDataValid()}
+          marginBottom0
+        >
+          <FormattedMessage id="close-continue-button" />
+        </Button>
+        {/* <Button 
+          onClick={closeModalUnknownCust}
+          marginBottom0
+          >
+          <FormattedMessage id="cancel-button" />
+        </Button> */}
+    </ModalFooter>
+  );
+
+  return (
+    <Modal
+      style={{ 
+        minHeight: '250px',
+        height: '80%', // allows modal to grow/shrink based on content
+        maxHeight: '300vh', 
+        maxWidth: '300vw', // modal width responsive to viewport width
+        width: '70%' // modal width adjusts based on content and window size
+      }}
+      open
+      dismissible
+      closeOnBackgroundClick
+      label={<FormattedMessage id="modal-describe-unknown-customer-label" />}
+      size="large"
+      onClose={closeModalUnknownCust}
+      footer={footer}
+      contentClass={css.modalContent}
+    >
+        <Paneset>
+        <Pane
+          defaultWidth='fill'
+        >
+          <AccordionSet>
+            <Accordion 
+              label={
+                <FormattedMessage id="modal-describe-unknown-customer-accordion-desc-cust-label" />
+              }
+            >
+              <Row>
+              <Col xs={3}>
+                <TextField
+                  onChange={handleChange}
+                  value={formData.firstName}
+                  name="firstName"
+                  label={
+                    <FormattedMessage id="modal-describe-unknown-customer.textField-first-name-label" />
+                  }
+                />
+                <TextField
+                  onChange={handleChange}
+                  value={formData.lastName}
+                  name="lastName"
+                  label={
+                    <FormattedMessage id="modal-describe-unknown-customer.textField-last-name-label" />
+                  }
+                />
+              </Col>
+            </Row>
+            <Row>
+              <Col xs={6}>
+                <Editor
+                    required
+                    label={
+                      <FormattedMessage id="modal-describe-unknown-customer.textArea-description-label" />
+                    }
+                    value={formData.description}
+                    onChange={handleDescriptionChange}
+                    modules={editorModules}
+                  />
+              </Col>
+            </Row>
+            </Accordion>
+
+            <Accordion
+              label={
+                <FormattedMessage id="modal-describe-unknown-customer-accordion-identity-details-label" />
+              }
+            >
+              <Row>
+                <Col xs={2}>
+                  <TextField
+                    label={<FormattedMessage id="modal-customer-details-sex" />}
+                    name="sex"
+                    value={formData.details.sex}
+                    onChange={handleChange}
+                  />
+                </Col>
+                <Col xs={2}>
+                  <TextField
+                    label={
+                      <FormattedMessage id="modal-customer-details-race" />
+                    }
+                    name="race"
+                    value={formData.details.race}
+                    onChange={handleChange}
+                  />
+                </Col>
+                <Col xs={2}>
+                  <TextField
+                    label={
+                      <FormattedMessage id="modal-customer-details-height" />
+                    }
+                    name="height"
+                    value={formData.details.height}
+                    onChange={handleChange}
+                  />
+                </Col>
+                <Col xs={2}>
+                  <TextField
+                    label={
+                      <FormattedMessage id="modal-customer-details-weight" />
+                    }
+                    name="weight"
+                    value={formData.details.weight}
+                    onChange={handleChange}
+                  />
+                </Col>
+              </Row>
+
+              <Row>
+                <Col xs={2}>
+                  <TextField
+                    label={
+                      <FormattedMessage id="modal-customer-details-hair" />
+                    }
+                    name="hair"
+                    value={formData.details.hair}
+                    onChange={handleChange}
+                  />
+                </Col>
+                <Col xs={2}>
+                  <TextField
+                    label={
+                      <FormattedMessage id="modal-customer-details-eyes" />
+                    }
+                    name="eyes"
+                    value={formData.details.eyes}
+                    onChange={handleChange}
+                  />
+                </Col>
+                <Col xs={3}>
+                  <Datepicker
+                    label={
+                      <FormattedMessage id="modal-customer-details-date-of-birth" />
+                    }
+                    name="dateOfBirth"
+                    value={formData.details.dateOfBirth}
+                    onChange={handleChange}
+                  />
+                </Col>
+              </Row>
+
+              <Row style={{ marginTop: '25px', marginBottom: '100px' }}>
+                <Col xs={4}>
+                  <TextField
+                    label={
+                      <FormattedMessage id="modal-customer-details-street-address" />
+                    }
+                    name="streetAddress"
+                    value={formData.details.streetAddress}
+                    onChange={handleChange}
+                  />
+                </Col>
+                <Col xs={2}>
+                  <TextField
+                    label={
+                      <FormattedMessage id="modal-customer-details-city" />
+                    }
+                    name="city"
+                    value={formData.details.city}
+                    onChange={handleChange}
+                  />
+                </Col>
+                <Col xs={2}>
+                  <TextField
+                    label={
+                      <FormattedMessage id="modal-customer-details-state" />
+                    }
+                    name="state"
+                    value={formData.details.state}
+                    onChange={handleChange}
+                  />
+                </Col>
+                <Col xs={2}>
+                  <TextField
+                    label={
+                      <FormattedMessage id="modal-customer-details-zipcode" />
+                    }
+                    name="zipcode"
+                    value={formData.details.zipcode}
+                    onChange={handleChange}
+                  />
+                </Col>
+              </Row>
+            </Accordion>
+          </AccordionSet>
+        </Pane>
+      </Paneset>
+    </Modal>
+  );
+};
+
+export default ModalDescribeCustomer;

package/src/components/incidents/ModalDescribeCustomer.test.js

@@ -0,0 +1,156 @@
+
+
+// Mock helper functions so they don’t interfere with rendering.
+jest.mock('./helpers/isValidDateFormat', () => jest.fn(() => true));
+jest.mock('./helpers/stripHTML', () => jest.fn((str) => str));
+
+// Mock DOMPurify to simply return the content.
+jest.mock('dompurify', () => ({
+  sanitize: (content) => content,
+}));
+
+// Define a stable IncidentContext object (name begins with "mock" so Jest allows it).
+const mockIncidentContext = {
+  isModalUnknownCustOpen: true, // default: modal open for tests
+  closeModalUnknownCust: jest.fn(),
+  setSelectedCustomers: jest.fn(),
+};
+
+// Mock the IncidentContext.
+jest.mock('../../contexts/IncidentContext', () => ({
+  useIncidents: () => mockIncidentContext,
+}));
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import ModalDescribeCustomer from './ModalDescribeCustomer';
+
+// --- Suppress known nonfatal warnings ---
+const originalConsoleError = console.error;
+beforeEach(() => {
+  console.error = (...args) => {
+    if (
+      typeof args[0] === 'string' &&
+      (
+        args[0].includes('ReactDOM.render is no longer supported') ||
+        args[0].includes('Invalid hook call') ||
+        args[0].includes('does not recognize the') ||
+        args[0].includes('Unknown event handler property') ||
+        args[0].includes('contentClass') ||
+        args[0].includes('defaultWidth')
+      )
+    ) {
+      return;
+    }
+    originalConsoleError(...args);
+  };
+});
+afterEach(() => {
+  console.error = originalConsoleError;
+});
+
+// --- Mocks for External Dependencies ---
+// react‑intl: FormattedMessage simply renders its id.
+jest.mock('react-intl', () => ({
+  FormattedMessage: (props) => <span>{props.id}</span>,
+}));
+
+// @folio/stripes/components: Minimal implementations.
+jest.mock('@folio/stripes/components', () => {
+  const React = require('react');
+  return {
+    Button: (props) => <button {...props}>{props.children}</button>,
+    Col: (props) => <div {...props}>{props.children}</div>,
+    Modal: (props) => {
+      let labelId = '';
+      // Check if the Modal received a "label" prop that is a Formatted Message with id
+      if (props.label && props.label.props && props.label.props.id) {
+        labelId = props.label.props.id;
+      }
+      return (
+        <div>
+          {/* Render the label text so it shows up in container.textContent */}
+          {labelId && <h2>{labelId}</h2>}
+
+          {/* Then render the modal children */}
+          {props.children}
+        </div>
+      );
+    },
+    Paneset: (props) => <div {...props}>{props.children}</div>,
+    Pane: (props) => <div {...props}>{props.children}</div>,
+    ModalFooter: (props) => <div {...props}>{props.children}</div>,
+    Row: (props) => <div {...props}>{props.children}</div>,
+    TextField: (props) => {
+      let labelText = '';
+      if (props.label) {
+        if (typeof props.label === 'object' && props.label.props && props.label.props.id) {
+          labelText = props.label.props.id;
+        } else {
+          labelText = props.label;
+        }
+      }
+      return (
+        <div>
+          {labelText && <label>{labelText}</label>}
+          <input type="text" {...props} />
+        </div>
+      );
+    },
+    Datepicker: (props) => <input type="date" {...props} />,
+    Editor: (props) => <textarea {...props} />,
+    AccordionSet: (props) => <div {...props}>{props.children}</div>,
+    Accordion: (props) => <div {...props}>{props.children}</div>,
+    MessageBanner: (props) => (props.show ? <div {...props}>{props.children}</div> : null),
+  };
+});
+
+// Mock the CSS module.
+jest.mock('./ModalStyle.css', () => ({}));
+
+// --- Test Setup ---
+let container = null;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+afterEach(() => {
+  ReactDOM.unmountComponentAtNode(container);
+  container.remove();
+  container = null;
+});
+
+// --- Test Cases ---
+describe('ModalDescribeCustomer', () => {
+  test('returns null when modal is closed', () => {
+    // Set the modal flag to false.
+    mockIncidentContext.isModalUnknownCustOpen = false;
+    act(() => {
+      ReactDOM.render(<ModalDescribeCustomer />, container);
+    });
+    expect(container.innerHTML).toBe('');
+  });
+
+  test('renders modal when isModalUnknownCustOpen is true', () => {
+    // Ensure modal is open.
+    mockIncidentContext.isModalUnknownCustOpen = true;
+    act(() => {
+      ReactDOM.render(<ModalDescribeCustomer />, container);
+    });
+    const text = container.textContent;
+    // Expect that the modal's label appears.
+    expect(text).toMatch(/modal-describe-unknown-customer-label/);
+  });
+
+  test('renders first and last name text fields in the description accordion', () => {
+    mockIncidentContext.isModalUnknownCustOpen = true;
+    act(() => {
+      ReactDOM.render(<ModalDescribeCustomer />, container);
+    });
+    const text = container.textContent;
+    // Expect that the TextField labels for first name and last name appear.
+    expect(text).toMatch(/modal-describe-unknown-customer\.textField-first-name-label/);
+    expect(text).toMatch(/modal-describe-unknown-customer\.textField-last-name-label/);
+  });
+});

package/src/components/incidents/ModalDirtyFormWarn.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import {
+  Button,
+  Col,
+  Modal,
+  ModalFooter,
+  Row,
+} from '@folio/stripes/components';
+import css from './ModalStyle.css';
+
+const ModalDirtyFormWarn = ({ handleKeepEditing, handleDismissOnDirty }) => {
+  const footer = (
+    <ModalFooter>
+      <Button 
+        onClick={handleKeepEditing}
+        buttonStyle="primary"
+        >
+        <FormattedMessage id="keep-editing-button" />
+      </Button>
+      <Button
+        onClick={handleDismissOnDirty}
+      >
+        <FormattedMessage id="close-without-saving-button" />
+      </Button>
+    </ModalFooter>
+  );
+
+  return (
+    <Modal
+      style={{ 
+        minHeight: '150px',
+        height: '20%',
+        maxHeight: '100vh',
+        maxWidth: '300vw',
+        width: '60%' 
+      }}
+      open
+      closeOnBackgroundClick
+      label={<FormattedMessage id="modal-dirty-form-warn-label" />}
+      size="large"
+      footer={footer}
+      contentClass={css.modalContent}
+    >
+      <Row style={{ marginTop: '25px' }}>
+        <Col 
+          xs={12}
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            textAlign: 'center'
+          }}
+          >
+          <FormattedMessage id="modal-dirty-form-warn-message" />
+        </Col>
+      </Row>
+    </Modal>
+  );
+};
+
+export default ModalDirtyFormWarn;