CHI-2916 switchboarding

lambdas/account-scoped/src/router.ts

@@ -20,6 +20,7 @@ import { validateRequestMethod } from './validation/method';
 import { isAccountSID } from './twilioTypes';
 import { handleTaskRouterEvent } from './taskrouter';
 import { handleGetProfileFlagsForIdentifier } from './hrm/getProfileFlagsForIdentifier';
+import { handleToggleSwitchboardQueue } from './hrm/toggleSwitchboardQueue';
 import {
   handleCaptureChannelWithBot,
   handleChatbotCallback,
@@ -85,6 +86,10 @@ const ROUTES: Record<string, FunctionRoute> = {
     requestPipeline: [validateWebhookRequest],
     handler: statusCallbackHandler,
   },
+  toggleSwitchboardQueue: {
+    requestPipeline: [validateFlexTokenRequest],
+    handler: handleToggleSwitchboardQueue,
+  },
 };
 
 export const lookupRoute = (event: HttpRequest): AccountScopedRoute | undefined => {

plugin-hrm-form/src/HrmFormPlugin.tsx

@@ -31,9 +31,10 @@ import * as Channels from './channels/setUpChannels';
 import setUpMonitoring from './utils/setUpMonitoring';
 import { changeLanguage } from './states/configuration/actions';
 import { getAseloFeatureFlags, getHrmConfig, initializeConfig, subscribeToConfigUpdates } from './hrmConfig';
-import { setUpSharedStateClient } from './utils/sharedState';
+import { setUpSyncClient } from './utils/sharedState';
 import { FeatureFlags } from './types/types';
 import { setUpReferrableResources } from './components/resources/setUpReferrableResources';
+import QueuesView from './components/queuesView';
 import TeamsView from './components/teamsView';
 import { setUpCounselorToolkits } from './components/toolkits/setUpCounselorToolkits';
 import { setUpTransferComponents } from './components/transfer/setUpTransferComponents';
@@ -123,6 +124,9 @@ const setUpComponents = (featureFlags: FeatureFlags, setupObject: ReturnType<typ
   TeamsView.setUpTeamsViewFilters();
   TeamsView.setUpWorkerDirectoryFilters();
 
+  // if (featureFlags.enable_switchboarding)
+  QueuesView.setUpSwitchboard();
+
   if (featureFlags.enable_conferencing) setupConferenceComponents();
 
   if (featureFlags.enable_language_selector) Components.setupWorkerLanguageSelect();
@@ -188,7 +192,7 @@ export default class HrmFormPlugin extends FlexPlugin {
     await validateAndSetPermissionRules();
     await ActionFunctions.loadCurrentDefinitionVersion();
 
-    setUpSharedStateClient();
+    setUpSyncClient();
 
     /*
      * localization setup (translates the UI if necessary)

plugin-hrm-form/src/components/common/icons/SwitchboardIcon.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (C) 2021-2023 Technology Matters
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/.
+ */
+
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+type Props = {
+  width: string;
+  height: string;
+};
+
+const SwitchboardIcon: React.FC<Props> = ({ width, height }) => {
+  return (
+    <svg width="35" height="35" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8.74967 10.7186H6.66634V8.24493H8.74967V6.18353H11.2497V8.24493H13.333V10.7186H11.2497V12.78H8.74967V10.7186ZM9.99967 1.64844L3.33301 4.12212V9.1437C3.33301 13.3077 6.17467 17.1914 9.99967 18.1397C13.8247 17.1914 16.6663 13.3077 16.6663 9.1437V4.12212L9.99967 1.64844ZM14.9997 9.1437C14.9997 12.4419 12.8747 15.4928 9.99967 16.4246C7.12467 15.4928 4.99967 12.4502 4.99967 9.1437V5.26826L9.99967 3.413L14.9997 5.26826V9.1437Z"
+        fill="black"
+      />
+    </svg>
+  );
+};
+
+SwitchboardIcon.displayName = 'SwitchboardIcon';
+
+export default SwitchboardIcon;

plugin-hrm-form/src/components/queuesView/QueueSelectionModals.tsx

@@ -0,0 +1,258 @@
+/**
+ * Copyright (C) 2021-2023 Technology Matters
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/.
+ */
+
+import React from 'react';
+import { Modal, Paper, FormControl, FormControlLabel } from '@material-ui/core';
+
+import { Box, SaveAndEndButton, StyledNextStepButton, TertiaryButton, FormLabel } from '../../styles';
+import { CloseButton, NonDataCallTypeDialogContainer, CloseTaskDialog } from '../callTypeButtons/styles';
+import TabPressWrapper from '../TabPressWrapper';
+
+type Queue = {
+  key: string;
+  // eslint-disable-next-line camelcase
+  friendly_name: string;
+};
+
+type SelectQueueModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelect: (queue: string) => void;
+  selectedQueue: string | null;
+  setSelectedQueue: (queue: string) => void;
+  queueRef: React.MutableRefObject<string | null>;
+  queues: Queue[];
+};
+
+export const SelectQueueModal: React.FC<SelectQueueModalProps> = ({
+  isOpen,
+  onClose,
+  onSelect,
+  selectedQueue,
+  setSelectedQueue,
+  queueRef,
+  queues,
+}) => {
+  // Define custom radio button handler
+  const handleRadioChange = (value: string) => {
+    setSelectedQueue(value);
+    queueRef.current = value;
+  };
+
+  return (
+    <Modal open={isOpen} onClose={onClose} aria-labelledby="queue-selection-modal-title">
+      <Paper
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          maxWidth: '700px',
+          width: '90%',
+          backgroundColor: 'white',
+          padding: '20px',
+          outline: 'none',
+          borderRadius: '4px',
+        }}
+      >
+        <Box style={{ position: 'absolute', top: '10px', right: '10px' }}>
+          <CloseButton tabIndex={3} aria-label="CloseButton" onClick={onClose} />
+        </Box>
+
+        <Box style={{ marginBottom: '20px' }}>
+          <h2 id="queue-selection-modal-title" style={{ fontSize: '18px', fontWeight: 'bold', margin: '0' }}>
+            Select queue to switchboard
+          </h2>
+        </Box>
+
+        <FormControl component="fieldset" style={{ width: '100%' }}>
+          <Box
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '1fr 1fr',
+              gap: '2px 30px',
+              margin: '0 10px',
+              padding: '10px 0',
+              width: '100%',
+            }}
+          >
+            {queues &&
+              [...queues]
+                .sort((a, b) => a.friendly_name.localeCompare(b.friendly_name))
+                .map(queue => (
+                  <div
+                    key={queue.key}
+                    onClick={() => handleRadioChange(queue.key)}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        handleRadioChange(queue.key);
+                      }
+                    }}
+                    role="radio"
+                    aria-checked={selectedQueue === queue.key}
+                    tabIndex={0}
+                    style={{
+                      marginBottom: '10px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      cursor: 'pointer',
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: '16px',
+                        height: '16px',
+                        borderRadius: '50%',
+                        border: '2px solid #000',
+                        marginRight: '8px',
+                        position: 'relative',
+                        backgroundColor: 'white',
+                      }}
+                    >
+                      {selectedQueue === queue.key && (
+                        <div
+                          style={{
+                            width: '8px',
+                            height: '8px',
+                            borderRadius: '50%',
+                            backgroundColor: '#000',
+                            position: 'absolute',
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                          }}
+                        />
+                      )}
+                    </div>
+                    <label
+                      id={`queue-label-${queue.key}`}
+                      htmlFor={`queue-radio-${queue.key}`}
+                      style={{ cursor: 'pointer' }}
+                    >
+                      {queue.friendly_name}
+                    </label>
+                    <input
+                      type="radio"
+                      id={`queue-radio-${queue.key}`}
+                      name="queue-selection"
+                      value={queue.key}
+                      checked={selectedQueue === queue.key}
+                      onChange={() => handleRadioChange(queue.key)}
+                      style={{ position: 'absolute', opacity: 0 }}
+                      aria-labelledby={`queue-label-${queue.key}`}
+                    />
+                  </div>
+                ))}
+          </Box>
+        </FormControl>
+
+        <Box
+          style={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            marginTop: '20px',
+            gap: '10px',
+          }}
+        >
+          <TertiaryButton
+            type="button"
+            onClick={onClose}
+            style={{
+              background: '#EEEEEE',
+              border: 'none',
+              borderRadius: '3px',
+            }}
+          >
+            Cancel
+          </TertiaryButton>
+          <StyledNextStepButton
+            onClick={() => {
+              const currentQueue = selectedQueue || queueRef.current;
+              if (currentQueue) {
+                onSelect(currentQueue);
+              } else {
+                alert('Please select a queue first');
+              }
+            }}
+          >
+            Activate Switchboarding
+          </StyledNextStepButton>
+        </Box>
+      </Paper>
+    </Modal>
+  );
+};
+
+type TurnOffSwitchboardDialogProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  selectedQueue: string | null;
+  renderStatusText: (queueKey: string, startTime: string | null) => React.ReactNode;
+  switchboardingStartTime: string | null;
+};
+
+export const TurnOffSwitchboardDialog: React.FC<TurnOffSwitchboardDialogProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  selectedQueue,
+  renderStatusText,
+  switchboardingStartTime,
+}) => {
+  return (
+    <CloseTaskDialog open={isOpen} onClose={onClose} width={500}>
+      <TabPressWrapper>
+        <NonDataCallTypeDialogContainer style={{ position: 'relative', maxWidth: '500px', padding: '20px' }}>
+          <Box style={{ position: 'absolute', top: '10px', right: '10px' }}>
+            <CloseButton tabIndex={3} aria-label="CloseButton" onClick={onClose} />
+          </Box>
+          <Box style={{ marginBottom: '20px' }}>
+            <h2
+              id="turn-off-switchboard-title"
+              style={{ fontSize: '18px', fontWeight: 'bold', margin: '0', maxWidth: '80%', textAlign: 'center' }}
+            >
+              Are you sure you want to turn off switchboarding?
+            </h2>
+          </Box>
+          <Box style={{ margin: '20px' }}>{renderStatusText(selectedQueue || '', switchboardingStartTime)}</Box>
+          <Box
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              marginTop: '20px',
+              gap: '10px',
+              alignSelf: 'flex-end',
+            }}
+          >
+            <TertiaryButton
+              type="button"
+              onClick={onClose}
+              style={{
+                background: '#EEEEEE',
+                border: 'none',
+                borderRadius: '3px',
+              }}
+            >
+              Cancel
+            </TertiaryButton>
+            <SaveAndEndButton onClick={onConfirm}>Turn Off Switchboarding</SaveAndEndButton>
+          </Box>
+        </NonDataCallTypeDialogContainer>
+      </TabPressWrapper>
+    </CloseTaskDialog>
+  );
+};