feat: update incoming call ui (#881)

* feat: update incoming call ui

* feat: hide forward/voicemail buttons for call queue

* feat: show caller ID icon

* feat: show caller id icon

* misc: ignore for call queue call

* misc: call id icon for call ctrl page

Author: embbnux

package.json

@@ -88,7 +88,7 @@
     "@ringcentral-integration/utils": "^0.14.0",
     "@ringcentral-integration/widgets": "^0.14.0",
     "@ringcentral/juno": "^2.41.0",
-    "@ringcentral/juno-icon": "^1.74.0",
+    "@ringcentral/juno-icon": "^1.77.0",
     "@ringcentral/mfe-react": "^0.3.7",
     "@ringcentral/sdk": "^4.7.2",
     "@ringcentral/subscriptions": "^4.7.2",

src/components/CallCtrlPanel/ActiveCallPanel/CallInfo.tsx

@@ -6,9 +6,10 @@ import {
   RcListItemAvatar,
   RcAvatar,
   RcIcon,
+  RcTooltip,
   styled,
 } from '@ringcentral/juno';
-import { People } from '@ringcentral/juno-icon';
+import { People, IdBorder } from '@ringcentral/juno-icon';
 import ContactDisplay from '@ringcentral-integration/widgets/components/ContactDisplay';
 
 const StyledItem = styled(RcListItem)`
@@ -27,7 +28,6 @@ const StyledItem = styled(RcListItem)`
   .ContactDisplay_root {
     vertical-align: bottom;
     font-family: Lato, Helvetica, Arial, sans-serif;
-    flex: 1;
     overflow: hidden;
   
     > div {
@@ -42,6 +42,10 @@ const StyledItem = styled(RcListItem)`
   margin-right: auto;
 `;
 
+const StyledCallerIDIcon = styled(RcIcon)`
+  margin-left: 5px;
+`;
+
 type CallInfoProps = {
   phoneNumber?: string;
   formatPhone: (...args: any[]) => any;
@@ -59,6 +63,7 @@ type CallInfoProps = {
   phoneTypeRenderer?: (...args: any[]) => any;
   phoneSourceNameRenderer?: (...args: any[]) => any;
   callQueueName?: string;
+  showCallerIdName: boolean;
 };
 const CallInfo: FunctionComponent<CallInfoProps> = ({
   nameMatches = [],
@@ -77,6 +82,7 @@ const CallInfo: FunctionComponent<CallInfoProps> = ({
   areaCode,
   countryCode,
   onSelectMatcherName,
+  showCallerIdName,
 }) => {
   return (
     <StyledItem
@@ -103,27 +109,49 @@ const CallInfo: FunctionComponent<CallInfoProps> = ({
       <RcListItemText
         primary={
           <>
-            {callQueueName}
-            <ContactDisplay
-              formatPhone={formatPhone}
-              contactMatches={nameMatches}
-              phoneNumber={phoneNumber}
-              fallBackName={fallBackName}
-              currentLocale={currentLocale}
-              areaCode={areaCode}
-              countryCode={countryCode}
-              showType={false}
-              selected={selectedMatcherIndex}
-              onSelectContact={onSelectMatcherName}
-              isLogging={false}
-              enableContactFallback
-              brand={brand}
-              showPlaceholder={showContactDisplayPlaceholder}
-              // @ts-expect-error TS(2322): Type 'object | undefined' is not assignable to typ... Remove this comment to see the full error message
-              sourceIcons={sourceIcons}
-              phoneTypeRenderer={phoneTypeRenderer}
-              phoneSourceNameRenderer={phoneSourceNameRenderer}
-            />
+            {
+              callQueueName && !showCallerIdName && (
+                <span data-sign="callQueueName">
+                  {callQueueName}
+                </span>
+              )
+            }
+            {
+              showCallerIdName ? (
+                <>
+                  <span data-sign="callerId" title={fallBackName}>
+                    {fallBackName}
+                  </span>
+                  <RcTooltip title="Caller ID">
+                    <StyledCallerIDIcon
+                      symbol={IdBorder}
+                      size="medium"
+                    />
+                  </RcTooltip>
+                </>
+              ) : (
+                <ContactDisplay
+                  formatPhone={formatPhone}
+                  contactMatches={nameMatches}
+                  phoneNumber={phoneNumber}
+                  fallBackName={fallBackName}
+                  currentLocale={currentLocale}
+                  areaCode={areaCode}
+                  countryCode={countryCode}
+                  showType={false}
+                  selected={selectedMatcherIndex}
+                  onSelectContact={onSelectMatcherName}
+                  isLogging={false}
+                  enableContactFallback
+                  brand={brand}
+                  showPlaceholder={showContactDisplayPlaceholder}
+                  // @ts-expect-error TS(2322): Type 'object | undefined' is not assignable to typ... Remove this comment to see the full error message
+                  sourceIcons={sourceIcons}
+                  phoneTypeRenderer={phoneTypeRenderer}
+                  phoneSourceNameRenderer={phoneSourceNameRenderer}
+                />
+              )
+            }
           </>
         }
         primaryTypographyProps={{

src/components/CallCtrlPanel/ActiveCallPanel/index.tsx

@@ -4,6 +4,7 @@ import { styled, palette2, RcText } from '@ringcentral/juno';
 import callCtrlLayouts from '@ringcentral-integration/widgets/enums/callCtrlLayouts';
 
 import DurationCounter from '@ringcentral-integration/widgets/components/DurationCounter';
+import i18n from '@ringcentral-integration/widgets/components/CallCtrlContainer/i18n';
 
 import { BackHeaderView } from '../../BackHeaderView';
 import CallInfo from './CallInfo';
@@ -164,6 +165,11 @@ const ActiveCallPanel: React.SFC<ActiveCallPanelProps> = ({
   const currentCallTitle = nameMatches?.length
     ? nameMatches[0].name
     : formatPhone(phoneNumber);
+  const showCallerIdName =
+    (!nameMatches || nameMatches.length === 0) &&
+    fallBackName &&
+    fallBackName.length > 0 &&
+    phoneNumber !== 'anonymous';
   let callInfo;
   switch (layout) {
     case callCtrlLayouts.completeTransferCtrl:
@@ -174,7 +180,7 @@ const ActiveCallPanel: React.SFC<ActiveCallPanelProps> = ({
           timeCounter={timeCounter}
           lastCallInfo={lastCallInfo}
           currentCallAvatarUrl={avatarUrl}
-          currentCallTitle={currentCallTitle || fallBackName}
+          currentCallTitle={currentCallTitle || fallBackName || i18n.getString('unknown', currentLocale)}
           formatPhone={formatPhone}
           getAvatarUrl={getAvatarUrl}
         />
@@ -194,11 +200,9 @@ const ActiveCallPanel: React.SFC<ActiveCallPanelProps> = ({
         <CallInfo
           currentLocale={currentLocale}
           nameMatches={nameMatches}
-          fallBackName={fallBackName}
+          fallBackName={fallBackName || i18n.getString('unknown', currentLocale)}
           phoneNumber={phoneNumber}
           formatPhone={formatPhone}
-          // @ts-expect-error TS(2322): Type '{ currentLocale: string; nameMatches: { name... Remove this comment to see the full error message
-          startTime={startTime}
           areaCode={areaCode}
           countryCode={countryCode}
           selectedMatcherIndex={selectedMatcherIndex}
@@ -210,6 +214,7 @@ const ActiveCallPanel: React.SFC<ActiveCallPanelProps> = ({
           phoneTypeRenderer={phoneTypeRenderer}
           phoneSourceNameRenderer={phoneSourceNameRenderer}
           callQueueName={callQueueName}
+          showCallerIdName={showCallerIdName}
         />
       );
       break;