feat(task): Create CampaginErrorDialog Component

packages/contact-center/cc-components/src/components/task/CampaignErrorDialog/campaign-error-dialog.style.scss

@@ -0,0 +1,26 @@
+.campaign-error-dialog {
+  width: 25rem;
+  border-radius: 0.5rem;
+  border-color: transparent;
+  padding: 1rem;
+  box-shadow: 0rem 0.25rem 0.5rem 0rem rgba(0, 0, 0, 0.16), 0rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.16);
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .campaign-error-dialog-title {
+    margin: 0;
+    flex: 1;
+  }
+
+  .campaign-error-dialog-message {
+    margin-bottom: 1.5rem;
+  }
+
+  .campaign-error-dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+}

packages/contact-center/cc-components/src/components/task/CampaignErrorDialog/campaign-error-dialog.tsx

@@ -0,0 +1,70 @@
+import React, {useEffect, useRef} from 'react';
+import {Button, Text} from '@momentum-design/components/dist/react';
+import {CampaignErrorDialogProps, ERROR_TITLES, ERROR_MESSAGE} from './campaign-error-dialog.types';
+import {withMetrics} from '@webex/cc-ui-logging';
+import './campaign-error-dialog.style.scss';
+
+const CampaignErrorDialog: React.FunctionComponent<CampaignErrorDialogProps> = ({errorType, isOpen, onClose}) => {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    if (isOpen && !dialog.open) {
+      dialog.showModal();
+    } else if (!isOpen && dialog.open) {
+      dialog.close();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    const handleClose = () => {
+      if (isOpen) {
+        onClose();
+      }
+    };
+
+    dialog.addEventListener('close', handleClose);
+    return () => dialog.removeEventListener('close', handleClose);
+  }, [isOpen, onClose]);
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className="campaign-error-dialog"
+      data-testid="campaign-error-dialog"
+      aria-labelledby="campaign-error-dialog-title"
+    >
+      <Text
+        id="campaign-error-dialog-title"
+        tagname="h2"
+        type="body-large-bold"
+        className="campaign-error-dialog-title"
+        data-testid="campaign-error-dialog-title"
+      >
+        {ERROR_TITLES[errorType]}
+      </Text>
+      <Text
+        id="campaign-error-dialog-message"
+        tagname="p"
+        type="body-midsize-regular"
+        className="campaign-error-dialog-message"
+        data-testid="campaign-error-dialog-message"
+      >
+        {ERROR_MESSAGE}
+      </Text>
+      <div className="campaign-error-dialog-actions">
+        <Button onClick={onClose} data-testid="campaign-error-dialog-ok-button">
+          OK
+        </Button>
+      </div>
+    </dialog>
+  );
+};
+
+const CampaignErrorDialogWithMetrics = withMetrics(CampaignErrorDialog, 'CampaignErrorDialog');
+export default CampaignErrorDialogWithMetrics;

packages/contact-center/cc-components/src/components/task/CampaignErrorDialog/campaign-error-dialog.types.ts

@@ -0,0 +1,16 @@
+export type CampaignErrorType = 'ACCEPT_FAILED' | 'SKIP_FAILED' | 'REMOVE_FAILED';
+
+export interface CampaignErrorDialogProps {
+  errorType: CampaignErrorType;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const ERROR_TITLES: Record<CampaignErrorType, string> = {
+  ACCEPT_FAILED: "Can't accept contact",
+  SKIP_FAILED: "Can't skip contact",
+  REMOVE_FAILED: "Can't remove contact",
+};
+
+export const ERROR_MESSAGE =
+  'We ran into an issue connecting you with this contact. Check your network connection and try again.';

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

@@ -5,6 +5,7 @@ import CallControlCADComponent from './components/task/CallControlCAD/call-contr
 import IncomingTaskComponent from './components/task/IncomingTask/incoming-task';
 import TaskListComponent from './components/task/TaskList/task-list';
 import OutdialCallComponent from './components/task/OutdialCall/outdial-call';
+import CampaignErrorDialogComponent from './components/task/CampaignErrorDialog/campaign-error-dialog';
 import RealTimeTranscriptComponent from './components/task/RealTimeTranscript/real-time-transcript';
 
 export {
@@ -15,9 +16,11 @@ export {
   IncomingTaskComponent,
   TaskListComponent,
   OutdialCallComponent,
+  CampaignErrorDialogComponent,
   RealTimeTranscriptComponent,
 };
 export * from './components/StationLogin/constants';
 export * from './components/StationLogin/station-login.types';
 export * from './components/UserState/user-state.types';
 export * from './components/task/task.types';
+export * from './components/task/CampaignErrorDialog/campaign-error-dialog.types';

packages/contact-center/cc-components/tests/components/task/CampaignErrorDialog/__snapshots__/campaign-error-dialog.snapshot.tsx.snap

@@ -0,0 +1,137 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CampaignErrorDialog Snapshots Rendering should match snapshot for ACCEPT_FAILED error type 1`] = `
+<div>
+  <dialog
+    aria-labelledby="campaign-error-dialog-title"
+    class="campaign-error-dialog"
+    data-testid="campaign-error-dialog"
+  >
+    <mdc-text
+      class="campaign-error-dialog-title"
+      data-testid="campaign-error-dialog-title"
+      id="campaign-error-dialog-title"
+    >
+      Can't accept contact
+    </mdc-text>
+    <mdc-text
+      class="campaign-error-dialog-message"
+      data-testid="campaign-error-dialog-message"
+      id="campaign-error-dialog-message"
+    >
+      We ran into an issue connecting you with this contact. Check your network connection and try again.
+    </mdc-text>
+    <div
+      class="campaign-error-dialog-actions"
+    >
+      <mdc-button
+        data-testid="campaign-error-dialog-ok-button"
+      >
+        OK
+      </mdc-button>
+    </div>
+  </dialog>
+</div>
+`;
+
+exports[`CampaignErrorDialog Snapshots Rendering should match snapshot for REMOVE_FAILED error type 1`] = `
+<div>
+  <dialog
+    aria-labelledby="campaign-error-dialog-title"
+    class="campaign-error-dialog"
+    data-testid="campaign-error-dialog"
+  >
+    <mdc-text
+      class="campaign-error-dialog-title"
+      data-testid="campaign-error-dialog-title"
+      id="campaign-error-dialog-title"
+    >
+      Can't remove contact
+    </mdc-text>
+    <mdc-text
+      class="campaign-error-dialog-message"
+      data-testid="campaign-error-dialog-message"
+      id="campaign-error-dialog-message"
+    >
+      We ran into an issue connecting you with this contact. Check your network connection and try again.
+    </mdc-text>
+    <div
+      class="campaign-error-dialog-actions"
+    >
+      <mdc-button
+        data-testid="campaign-error-dialog-ok-button"
+      >
+        OK
+      </mdc-button>
+    </div>
+  </dialog>
+</div>
+`;
+
+exports[`CampaignErrorDialog Snapshots Rendering should match snapshot for SKIP_FAILED error type 1`] = `
+<div>
+  <dialog
+    aria-labelledby="campaign-error-dialog-title"
+    class="campaign-error-dialog"
+    data-testid="campaign-error-dialog"
+  >
+    <mdc-text
+      class="campaign-error-dialog-title"
+      data-testid="campaign-error-dialog-title"
+      id="campaign-error-dialog-title"
+    >
+      Can't skip contact
+    </mdc-text>
+    <mdc-text
+      class="campaign-error-dialog-message"
+      data-testid="campaign-error-dialog-message"
+      id="campaign-error-dialog-message"
+    >
+      We ran into an issue connecting you with this contact. Check your network connection and try again.
+    </mdc-text>
+    <div
+      class="campaign-error-dialog-actions"
+    >
+      <mdc-button
+        data-testid="campaign-error-dialog-ok-button"
+      >
+        OK
+      </mdc-button>
+    </div>
+  </dialog>
+</div>
+`;
+
+exports[`CampaignErrorDialog Snapshots Rendering should match snapshot when dialog is closed 1`] = `
+<div>
+  <dialog
+    aria-labelledby="campaign-error-dialog-title"
+    class="campaign-error-dialog"
+    data-testid="campaign-error-dialog"
+  >
+    <mdc-text
+      class="campaign-error-dialog-title"
+      data-testid="campaign-error-dialog-title"
+      id="campaign-error-dialog-title"
+    >
+      Can't accept contact
+    </mdc-text>
+    <mdc-text
+      class="campaign-error-dialog-message"
+      data-testid="campaign-error-dialog-message"
+      id="campaign-error-dialog-message"
+    >
+      We ran into an issue connecting you with this contact. Check your network connection and try again.
+    </mdc-text>
+    <div
+      class="campaign-error-dialog-actions"
+    >
+      <mdc-button
+        data-testid="campaign-error-dialog-ok-button"
+      >
+        OK
+      </mdc-button>
+    </div>
+  </dialog>
+</div>
+`;

packages/contact-center/cc-components/tests/components/task/CampaignErrorDialog/campaign-error-dialog.snapshot.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import {render} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CampaignErrorDialogComponent from '../../../../src/components/task/CampaignErrorDialog/campaign-error-dialog';
+import {CampaignErrorDialogProps} from '../../../../src/components/task/CampaignErrorDialog/campaign-error-dialog.types';
+
+// Mock HTMLDialogElement methods
+HTMLDialogElement.prototype.showModal = jest.fn();
+HTMLDialogElement.prototype.close = jest.fn();
+
+describe('CampaignErrorDialog Snapshots', () => {
+  const mockOnClose = jest.fn();
+
+  const defaultProps: CampaignErrorDialogProps = {
+    errorType: 'ACCEPT_FAILED',
+    isOpen: false,
+    onClose: mockOnClose,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (HTMLDialogElement.prototype.showModal as jest.Mock).mockClear();
+    (HTMLDialogElement.prototype.close as jest.Mock).mockClear();
+  });
+
+  describe('Rendering', () => {
+    it('should match snapshot for ACCEPT_FAILED error type', () => {
+      const {container} = render(
+        <CampaignErrorDialogComponent {...defaultProps} errorType="ACCEPT_FAILED" isOpen={true} />
+      );
+      expect(container).toMatchSnapshot();
+    });
+
+    it('should match snapshot for SKIP_FAILED error type', () => {
+      const {container} = render(
+        <CampaignErrorDialogComponent {...defaultProps} errorType="SKIP_FAILED" isOpen={true} />
+      );
+      expect(container).toMatchSnapshot();
+    });
+
+    it('should match snapshot for REMOVE_FAILED error type', () => {
+      const {container} = render(
+        <CampaignErrorDialogComponent {...defaultProps} errorType="REMOVE_FAILED" isOpen={true} />
+      );
+      expect(container).toMatchSnapshot();
+    });
+
+    it('should match snapshot when dialog is closed', () => {
+      const {container} = render(<CampaignErrorDialogComponent {...defaultProps} isOpen={false} />);
+      expect(container).toMatchSnapshot();
+    });
+  });
+});