feat(station-login): e911 Modal on Desktop Station Login

packages/contact-center/cc-components/src/components/StationLogin/E911Modal/e911-modal.constants.ts

@@ -0,0 +1,13 @@
+export const E911ModalLabels = {
+  TITLE: 'Emergency Service Notification',
+  WARNING_TITLE: 'Important',
+  WARNING_MESSAGE:
+    'If your address has changed, update it in the Emergency Callback Number (ECBN) section of your profile before making any calls.',
+  HELP_LINK_TEXT: 'See help section',
+  DIALING_TITLE: 'Dialing Emergency Services',
+  DIALING_MESSAGE:
+    'When you dial an emergency number (e.g., 911), your call will be routed to the appropriate emergency services based on your registered address. Ensure your address is always up to date to receive timely assistance.',
+  CHECKBOX_LABEL: 'I have read the notification',
+  CANCEL: 'Cancel',
+  SAVE_AND_CONTINUE: 'Save & Continue',
+};

packages/contact-center/cc-components/src/components/StationLogin/E911Modal/e911-modal.style.scss

@@ -0,0 +1,103 @@
+.e911-modal {
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  max-width: 480px;
+  width: 90%;
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .e911-modal-content {
+    padding: 24px;
+  }
+
+  .e911-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .e911-modal-title {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .e911-close-button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 4px;
+    }
+  }
+
+  .e911-warning-box {
+    background-color: #fff3cd;
+    border: 1px solid #ffc107;
+    border-radius: 4px;
+    padding: 12px;
+    margin-bottom: 16px;
+
+    .e911-warning-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+      font-weight: 600;
+      color: #856404;
+    }
+
+    .e911-warning-message {
+      color: #856404;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    .e911-help-link {
+      color: #0056b3;
+      text-decoration: underline;
+      cursor: pointer;
+      font-size: 14px;
+      margin-top: 8px;
+      display: inline-block;
+    }
+  }
+
+  .e911-dialing-section {
+    margin-bottom: 20px;
+
+    .e911-dialing-title {
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+
+    .e911-dialing-message {
+      font-size: 14px;
+      line-height: 1.5;
+      color: #666;
+    }
+  }
+
+  .e911-checkbox-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 20px;
+
+    .e911-checkbox-label {
+      font-size: 14px;
+      cursor: pointer;
+    }
+  }
+
+  .e911-modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding-top: 16px;
+    border-top: 1px solid #e0e0e0;
+  }
+}

packages/contact-center/cc-components/src/components/StationLogin/E911Modal/e911-modal.tsx

@@ -0,0 +1,121 @@
+import React, {useRef, useEffect, useState} from 'react';
+import {Button, Text, Icon, Checkbox} from '@momentum-design/components/dist/react';
+import {E911ModalProps} from './e911-modal.types';
+import {E911ModalLabels} from './e911-modal.constants';
+import './e911-modal.style.scss';
+
+const E911Modal: React.FC<E911ModalProps> = ({isOpen, onSaveAndContinue, onCancel}) => {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleCheckboxChange = () => {
+    setIsChecked(!isChecked);
+  };
+
+  const handleCancel = () => {
+    setIsChecked(false);
+    onCancel();
+  };
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    if (isOpen) {
+      if (!dialog.open) {
+        dialog.showModal();
+      }
+    } else {
+      if (dialog.open) {
+        dialog.close();
+      }
+      setIsChecked(false);
+    }
+
+    const handleNativeCancel = (event: Event) => {
+      event.preventDefault();
+      handleCancel();
+    };
+
+    dialog.addEventListener('cancel', handleNativeCancel);
+
+    return () => {
+      dialog.removeEventListener('cancel', handleNativeCancel);
+    };
+  }, [isOpen, onCancel]);
+
+  const handleSaveAndContinue = () => {
+    if (isChecked) {
+      onSaveAndContinue();
+    }
+  };
+
+  return (
+    <dialog ref={dialogRef} className="e911-modal" data-testid="e911-modal">
+      <div className="e911-modal-content">
+        <div className="e911-modal-header">
+          <Text tagname="h2" type="body-large-bold" className="e911-modal-title">
+            {E911ModalLabels.TITLE}
+          </Text>
+          <Button
+            size={32}
+            variant="tertiary"
+            color="default"
+            prefix-icon="cancel-bold"
+            type="button"
+            role="button"
+            aria-label="Close"
+            onClick={handleCancel}
+            className="e911-close-button"
+            data-testid="e911-close-button"
+          />
+        </div>
+
+        <div className="e911-warning-box">
+          <div className="e911-warning-title">
+            <Icon name="warning-filled" size={1} />
+            <Text tagname="span" type="body-midsize-bold">
+              {E911ModalLabels.WARNING_TITLE}
+            </Text>
+          </div>
+          <Text tagname="p" type="body-midsize-regular" className="e911-warning-message">
+            {E911ModalLabels.WARNING_MESSAGE}
+          </Text>
+          <a href="#" className="e911-help-link" data-testid="e911-help-link">
+            {E911ModalLabels.HELP_LINK_TEXT}
+          </a>
+        </div>
+
+        <div className="e911-dialing-section">
+          <Text tagname="h3" type="body-midsize-bold" className="e911-dialing-title">
+            {E911ModalLabels.DIALING_TITLE}
+          </Text>
+          <Text tagname="p" type="body-midsize-regular" className="e911-dialing-message">
+            {E911ModalLabels.DIALING_MESSAGE}
+          </Text>
+        </div>
+
+        <div className="e911-checkbox-container">
+          <Checkbox
+            data-testid="e911-checkbox"
+            checked={isChecked}
+            // @ts-expect-error: TODO: https://github.com/momentum-design/momentum-design/pull/1118
+            onchange={handleCheckboxChange}
+            label={E911ModalLabels.CHECKBOX_LABEL}
+          />
+        </div>
+
+        <div className="e911-modal-footer">
+          <Button variant="secondary" onClick={handleCancel} data-testid="e911-cancel-button" className="white-button">
+            {E911ModalLabels.CANCEL}
+          </Button>
+          <Button onClick={handleSaveAndContinue} disabled={!isChecked} data-testid="e911-save-button">
+            {E911ModalLabels.SAVE_AND_CONTINUE}
+          </Button>
+        </div>
+      </div>
+    </dialog>
+  );
+};
+
+export default E911Modal;

packages/contact-center/cc-components/src/components/StationLogin/E911Modal/e911-modal.types.ts

@@ -0,0 +1,5 @@
+export interface E911ModalProps {
+  isOpen: boolean;
+  onSaveAndContinue: () => void;
+  onCancel: () => void;
+}

packages/contact-center/cc-components/src/index.ts

@@ -9,6 +9,7 @@ import CampaignErrorDialogComponent from './components/task/CampaignErrorDialog/
 import CampaignCountdownComponent from './components/task/CampaignCountdown/campaign-countdown';
 import CampaignTaskComponent from './components/task/CampaignTask/campaign-task';
 import RealTimeTranscriptComponent from './components/task/RealTimeTranscript/real-time-transcript';
+import E911Modal from './components/StationLogin/E911Modal/e911-modal';
 
 export {
   UserStateComponent,
@@ -22,8 +23,10 @@ export {
   CampaignCountdownComponent,
   CampaignTaskComponent,
   RealTimeTranscriptComponent,
+  E911Modal,
 };
 export * from './components/StationLogin/constants';
+export * from './components/StationLogin/E911Modal/e911-modal.types';
 export * from './components/StationLogin/station-login.types';
 export * from './components/UserState/user-state.types';
 export * from './components/task/task.types';