feat: support to update call queue presence (#1004)

* feat: support to update call queue presence

* misc: add track events

* misc: update i18n

* misc: show empty message

* misc: fetch data only after module ready

Author: embbnux

src/components/CallQueueSettingsPanel/index.tsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Virtuoso,
+  RcListItem,
+  RcListItemText,
+  RcListItemAvatar,
+  RcListItemSecondaryAction,
+  RcSwitch,
+  RcTooltip,
+  RcAvatar,
+  RcTypography,
+  styled,
+} from '@ringcentral/juno';
+import { CallQueue } from '@ringcentral/juno-icon';
+import { BackHeaderView } from '../BackHeaderView';
+
+function CallQueuePresenceItem({
+  presence,
+  updatePresence,
+}) {
+  const [acceptCalls, setAcceptCalls] = useState(presence.acceptCalls);
+  useEffect(() => {
+    setAcceptCalls(presence.acceptCalls);
+  }, [presence]);
+
+  let tooltipTitle = '';
+  if (!presence.callQueue.editableMemberStatus) {
+    tooltipTitle = "This queue does not allow members to change their availability";
+  }
+  return (
+    <RcListItem>
+      <RcListItemAvatar>
+        <RcAvatar
+          iconSymbol={CallQueue}
+          color="avatar.global"
+          size="xsmall"
+        />
+      </RcListItemAvatar>
+      <RcListItemText
+        primary={presence.callQueue.name}
+        secondary={`Ext. ${presence.callQueue.extensionNumber}`}
+        primaryTypographyProps={{
+          title: presence.callQueue.name,
+        }}
+      />
+      <RcListItemSecondaryAction>
+        <RcTooltip title={tooltipTitle}>
+          <span>
+            <RcSwitch
+              checked={acceptCalls}
+              disabled={!presence.callQueue.editableMemberStatus}
+              onChange={(_, checked) => {
+                setAcceptCalls(checked);
+                updatePresence(checked);
+              }}
+            />
+          </span>
+        </RcTooltip>
+      </RcListItemSecondaryAction>
+    </RcListItem>
+  );
+}
+
+const StyledText = styled(RcTypography)`
+  padding: 32px 16px;
+`;
+
+export function CallQueueSettingsPanel({
+  onBackButtonClick,
+  presences,
+  updatePresence,
+  sync,
+}) {
+  useEffect(() => {
+    sync();
+  }, []);
+
+  const content = presences && presences.length > 0 ? (
+    <Virtuoso
+      style={{
+        height: '100%',
+        width: '100%',
+      }}
+      totalCount={presences.length}
+      data={presences}
+      itemContent={(index, presence) => (
+        <CallQueuePresenceItem
+          presence={presence}
+          updatePresence={
+            (acceptCalls: boolean) => updatePresence(presence.callQueue.id, acceptCalls)
+          }
+        />
+      )}
+    />
+  ) : (
+    <StyledText variant="body1" color="neutral.f06">
+      You are not a member of any call queues.
+    </StyledText>
+  );
+
+  return (
+    <BackHeaderView
+      onBack={onBackButtonClick}
+      title="Manage call queue presence"
+    >
+      {content}
+    </BackHeaderView>
+  );
+}

src/components/SettingsPanel/PresenceSettingSection.tsx

@@ -19,9 +19,9 @@ import React, { useState } from 'react';
 import { getPresenceStatusName } from '@ringcentral-integration/widgets/lib/getPresenceStatusName';
 import { usePresenceItems } from '@ringcentral-integration/widgets/components/PresenceDropdown/usePresenceItems';
 
-import i18n from '@ringcentral-integration/widgets/components/PresenceSettingSection/i18n';
+import i18n from './i18n';
 
-import { SwitchLineItem, StyledSettingItem } from './SettingItem';
+import { SwitchLineItem, StyledSettingItem, LinkLineItem } from './SettingItem';
 
 const StyledList = styled(RcList)`
   background-color: ${palette2('neutral', 'elevation')};
@@ -52,6 +52,8 @@ type PresenceSettingSectionProps = {
   setInvisible: (...args: any[]) => any;
   toggleAcceptCallQueueCalls: (...args: any[]) => any;
   showPresenceSettings: boolean;
+  gotoCallQueuePresenceSettings: () => void;
+  showCallQueuePresenceSettings: boolean;
 };
 
 const StyledPresenceIcon = styled(RcPresence)`
@@ -69,6 +71,10 @@ const StyledCallQueueSwitch = styled(SwitchLineItem)`
   min-height: 40px;
 `;
 
+const StyledLinkLineItem = styled(LinkLineItem)`
+  min-height: 40px;
+`;
+
 export const PresenceSettingSection: FunctionComponent<
   PresenceSettingSectionProps
 > = ({
@@ -82,6 +88,8 @@ export const PresenceSettingSection: FunctionComponent<
   setBusy,
   setDoNotDisturb,
   setInvisible,
+  gotoCallQueuePresenceSettings,
+  showCallQueuePresenceSettings,
 }) => {
   const [showSelects, setShowSelects] = useState(showPresenceSettings);
 
@@ -103,6 +111,23 @@ export const PresenceSettingSection: FunctionComponent<
       onChange={onCallQueueChange}
     />
   );
+
+  const callQueuePresenceSetting = (
+    <StyledLinkLineItem
+      show={
+        showCallQueuePresenceSettings &&
+        isCallQueueMember && (
+          dndStatusProp === dndStatus.takeAllCalls ||
+          dndStatusProp === dndStatus.takeDepartmentCallsOnly
+        )
+      }
+      currentLocale={currentLocale}
+      dataSign="callQueuePresenceSetting"
+      name="callQueuePresenceSetting"
+      onClick={gotoCallQueuePresenceSettings}
+    />
+  );
+
   const currentStatus = getPresenceStatusName(
     userStatus as any,
     dndStatusProp as any,
@@ -157,6 +182,7 @@ export const PresenceSettingSection: FunctionComponent<
           <StyledList>
             {presenceElements}
             {acceptQueueCalls}
+            {callQueuePresenceSetting}
           </StyledList>
         ) : (
           null

src/components/SettingsPanel/SettingItem.tsx

@@ -39,6 +39,7 @@ export const StyledSettingItem = styled(RcListItem)<{ $noBorder?: boolean }>`
 
 interface NewLinkLineItemProps extends LinkLineItemProps {
   description?: string;
+  className?: string;
 }
 
 export const LinkLineItem: FunctionComponent<NewLinkLineItemProps> = ({
@@ -50,6 +51,7 @@ export const LinkLineItem: FunctionComponent<NewLinkLineItemProps> = ({
   dataSign = undefined,
   pendoSignName = undefined,
   description = undefined,
+  className = undefined,
 }) => {
   if (!show) {
     return null;
@@ -59,6 +61,7 @@ export const LinkLineItem: FunctionComponent<NewLinkLineItemProps> = ({
       onClick={onClick}
       data-sign={dataSign}
       data-pendo={pendoSignName}
+      className={className}
     >
       <RcListItemText
         primary={customTitle || i18n.getString(name, currentLocale)}

src/components/SettingsPanel/SettingsPanel.tsx

@@ -97,6 +97,8 @@ interface NewSettingsPanelProps extends SettingsPanelProps {
   smartNoteAutoStartEnabledReadOnly?: boolean;
   smartNoteEnabledReadOnlyReason?: string;
   smartNoteAutoStartEnabledReadOnlyReason?: string;
+  gotoCallQueuePresenceSettings: () => void;
+  showCallQueuePresenceSettings: boolean;
 }
 
 function ItemRenderer({ item, currentLocale }: {
@@ -361,6 +363,8 @@ export const SettingsPanel: FunctionComponent<NewSettingsPanelProps> = ({
   smartNoteAutoStartEnabledReadOnlyReason = '',
   onSmartNoteToggle,
   onSmartNoteAutoStartToggle,
+  gotoCallQueuePresenceSettings,
+  showCallQueuePresenceSettings,
 }) => {
   let settingsItems: SettingItem[] = [{
     type: 'group',
@@ -581,6 +585,8 @@ export const SettingsPanel: FunctionComponent<NewSettingsPanelProps> = ({
                 setInvisible={setInvisible}
                 toggleAcceptCallQueueCalls={toggleAcceptCallQueueCalls}
                 showPresenceSettings={openPresenceSettings}
+                showCallQueuePresenceSettings={showCallQueuePresenceSettings}
+                gotoCallQueuePresenceSettings={gotoCallQueuePresenceSettings}
               />
             );
           }

src/components/SettingsPanel/i18n/de-DE.ts

@@ -21,7 +21,9 @@ export default {
   quickAccess: "Einstellung für Schnellzugriff",
   report: "Analysebericht",
   shareIdea: "Idee teilen",
-  reportIssue: "Problem melden"
+  reportIssue: "Problem melden",
+  status: "Status",
+  acceptQueueCalls: "Warteschlangenanrufe annehmen"
 };
 
 // @key: @#@"region"@#@ @source: @#@"Region"@#@

src/components/SettingsPanel/i18n/en-AU.ts

@@ -23,6 +23,9 @@ export default {
   shareIdea: "Share idea",
   reportIssue: "Report issue",
   advanced: 'Advanced',
+  callQueuePresenceSetting: 'Manage call queue presence',
+  status: "Status",
+  acceptQueueCalls: "Accept calls from call queue"
 };
 
 // @key: @#@"region"@#@ @source: @#@"Region"@#@

src/components/SettingsPanel/i18n/en-GB.ts

@@ -24,6 +24,9 @@ export default {
   shareIdea: "Share idea",
   reportIssue: "Report issue",
   advanced: 'Advanced',
+  callQueuePresenceSetting: 'Manage call queue presence',
+  status: "Status",
+  acceptQueueCalls: "Accept calls from call queue"
 };
 
 // @key: @#@"region"@#@ @source: @#@"Region"@#@

src/components/SettingsPanel/i18n/en-US.ts

@@ -26,4 +26,7 @@ export default {
   advanced: 'Advanced',
   aiAssistant: 'AI Assistant (Beta)',
   autoStartAiAssistant: 'Auto-start AI Assistant (Beta)',
+  callQueuePresenceSetting: 'Manage call queue presence',
+  status: 'Status',
+  acceptQueueCalls: 'Accept calls from call queue',
 };

src/components/SettingsPanel/i18n/es-419.ts

@@ -20,7 +20,9 @@ export default {
   quickAccess: "Configuración de acceso rápido",
   report: "Informe de análisis",
   shareIdea: "Compartir una idea",
-  reportIssue: "Informar problema"
+  reportIssue: "Informar problema",
+  status: "Estado",
+  acceptQueueCalls: "Aceptar las llamadas en lista de espera"
 };
 
 // @key: @#@"region"@#@ @source: @#@"Region"@#@

src/components/SettingsPanel/i18n/es-ES.ts

@@ -20,7 +20,9 @@ export default {
   quickAccess: "Configuración de acceso rápido",
   report: "Informe de análisis",
   shareIdea: "Compartir idea",
-  reportIssue: "Comunicar problema"
+  reportIssue: "Comunicar problema",
+  status: "Estado",
+  acceptQueueCalls: "Aceptar llamadas en cola"
 };
 
 // @key: @#@"region"@#@ @source: @#@"Region"@#@