sync features and bugfixs from 94b20ac (#1656)

Author: embbnux

.sync

@@ -1 +1 @@
-1fc429fc05d35d58ca7af09292ec641530ff066f
+94b20ac373f4b4b2b76a4023a3f2e369eb193d91

packages/engage-voice-widget/components/ActivityCallLogPanel/ActivityCallLogPanel.spec.tsx

@@ -69,6 +69,7 @@ function setup(
     onActive = () => {},
     showMuteButton = false,
     ivrAlertData = defaultIVRAlertData,
+    showSmallCallControl = true,
   }: Partial<ActivityCallLogPanelProps> = {} as any,
 ) {
   return mount(
@@ -107,6 +108,7 @@ function setup(
         showMuteButton={showMuteButton}
         ivrAlertData={ivrAlertData}
         onCopySuccess={() => {}}
+        showSmallCallControl={showSmallCallControl}
       />
     </RcThemeProvider>,
   );
@@ -135,12 +137,7 @@ const getControlButton = (type) => {
     click: () => isExist && button.find('button').simulate('click'),
     title: isExist && button.find('CircleIconButton').prop('title'),
     isActive: isExist && button.find('button').hasClass('buttonActive'),
-    isDisabled:
-      isExist &&
-      !!button
-        .find('button')
-        .render()
-        .attr('disabled'),
+    isDisabled: isExist && !!button.find('button').render().attr('disabled'),
   };
 };
 
@@ -371,16 +368,10 @@ describe('<ActivityCallLogPanel />', async () => {
     expect(wrapper.find('ActiveCallButton')).toHaveLength(1);
     expect(getControlButton('HandUpButton').isExist).toBe(false);
     expect(
-      wrapper
-        .find('ActiveCallButton')
-        .find('button')
-        .hasClass('buttonActive'),
+      wrapper.find('ActiveCallButton').find('button').hasClass('buttonActive'),
     ).toBe(true);
 
-    wrapper
-      .find('ActiveCallButton')
-      .find('button')
-      .simulate('click');
+    wrapper.find('ActiveCallButton').find('button').simulate('click');
     expect(onActive).toBeCalled();
   });
 
@@ -438,12 +429,7 @@ describe('<ActivityCallLogPanel />', async () => {
         isOnActive: disableControl === 'disableActive',
         showMuteButton: true,
       });
-      expect(
-        wrapper
-          .find(domTag)
-          .find('button')
-          .prop('disabled'),
-      ).toBe(true);
+      expect(wrapper.find(domTag).find('button').prop('disabled')).toBe(true);
     }),
   );
 
@@ -477,25 +463,12 @@ describe('<ActivityCallLogPanel />', async () => {
         const item = wrapper.find('.item');
         for (let i = 0; i < ivrAlertData.length; i++) {
           if (i !== 0) {
-            expect(
-              item
-                .at(i)
-                .find('.subject')
-                .text(),
-            ).toBe(ivrAlertData[i].subject);
-            expect(
-              item
-                .at(i)
-                .find('.body')
-                .text(),
-            ).toBe(ivrAlertData[i].body);
+            expect(item.at(i).find('.subject').text()).toBe(
+              ivrAlertData[i].subject,
+            );
+            expect(item.at(i).find('.body').text()).toBe(ivrAlertData[i].body);
           } else {
-            expect(
-              item
-                .at(0)
-                .find('.body')
-                .text(),
-            ).toBe(ivrAlertData[0].body);
+            expect(item.at(0).find('.body').text()).toBe(ivrAlertData[0].body);
           }
         }
         expect(wrapper.find(RcExpansionPanelSummary).text()).toBe(subject);
@@ -506,26 +479,17 @@ describe('<ActivityCallLogPanel />', async () => {
       wrapper = setup({
         status: 'active',
       });
-      wrapper
-        .find(RcExpansionPanelSummary)
-        .find('RcIcon')
-        .simulate('click');
+      wrapper.find(RcExpansionPanelSummary).find('RcIcon').simulate('click');
       wrapper.update();
       expect(
-        wrapper
-          .find(RcExpansionPanel)
-          .find('.expanded')
-          .exists(),
+        wrapper.find(RcExpansionPanel).find('.expanded').exists(),
       ).toBeTruthy();
       wrapper = setup({
         status: 'callEnd',
       });
       wrapper.update();
       expect(
-        wrapper
-          .find(RcExpansionPanel)
-          .find('.expanded')
-          .exists(),
+        wrapper.find(RcExpansionPanel).find('.expanded').exists(),
       ).toBeFalsy();
     });
     return null;

packages/engage-voice-widget/components/ActivityCallLogPanel/ActivityCallLogPanel.tsx

@@ -56,6 +56,7 @@ export const ActivityCallLogPanel: FunctionComponent<ActivityCallLogPanelProps>
   ivrAlertData,
   onCopySuccess,
   scrollTo,
+  referenceFieldOptions,
   ...rest
 }) => {
   const transferRef = useRef(null);
@@ -79,12 +80,14 @@ export const ActivityCallLogPanel: FunctionComponent<ActivityCallLogPanelProps>
   const editLogSection = useCallback(
     (props) => (
       <EditLogSection
+        isWide={isWide}
         {...props}
         scrollTo={scrollTo}
         rootRef={rootRef.current?.editSectionRef}
+        referenceFieldOptions={referenceFieldOptions}
       />
     ),
-    [scrollTo],
+    [isWide, scrollTo, referenceFieldOptions],
   );
 
   return (
@@ -136,7 +139,78 @@ export const ActivityCallLogPanel: FunctionComponent<ActivityCallLogPanelProps>
       }}
       renderCallLogCallControl={() => {
         const isOnTransfer = Boolean(transferEl);
-        return isCallEnd ? (
+        return (
+          !isCallEnd && (
+            <>
+              <RcMenu
+                classes={{ paper: styles.paper }}
+                anchorEl={transferEl}
+                open={isOnTransfer}
+                onClose={handleTransferClose}
+                data-sign="transferMenu"
+              >
+                <RcMenuItem
+                  onClick={() => goToTransferCallPage(transferTypes.internal)}
+                  disabled={!allowTransferCall || disableInternalTransfer}
+                  data-sign="transferItem-internalTransfer"
+                >
+                  {i18n.getString('internalTransfer', currentLocale)}
+                </RcMenuItem>
+                <RcMenuItem
+                  onClick={() => goToTransferCallPage(transferTypes.phoneBook)}
+                  disabled={!allowTransferCall}
+                  data-sign="transferItem-phoneBookTransfer"
+                >
+                  {i18n.getString('phoneBookTransfer', currentLocale)}
+                </RcMenuItem>
+                <RcMenuItem
+                  onClick={() => goToRequeueCallPage()}
+                  disabled={!allowRequeueCall}
+                  data-sign="transferItem-queueTransfer"
+                >
+                  {i18n.getString('queueTransfer', currentLocale)}
+                </RcMenuItem>
+                <RcMenuItem
+                  onClick={() =>
+                    goToTransferCallPage(transferTypes.manualEntry)
+                  }
+                  disabled={!allowTransferCall}
+                  data-sign="transferItem-enterANumber"
+                >
+                  {i18n.getString('enterANumber', currentLocale)}
+                </RcMenuItem>
+              </RcMenu>
+              <EvSmallCallControl
+                onMute={onMute}
+                onUnmute={onUnmute}
+                onHangup={onHangup}
+                onReject={onReject}
+                onHold={onHold}
+                onTransfer={onTransfer}
+                onUnHold={onUnHold}
+                onActive={onActive}
+                isOnMute={isOnMute}
+                currentLocale={currentLocale}
+                isOnTransfer={isOnActive || isOnTransfer}
+                isOnHold={isOnHold}
+                transferRef={transferRef}
+                size={smallCallControlSize}
+                isInComingCall={isInComingCall}
+                disableTransfer={disableTransfer}
+                disableHold={disableHold}
+                disableHangup={disableHangup}
+                disableMute={disableMute}
+                disableActive={disableActive}
+                isOnActive={isOnActive}
+                showMuteButton={showMuteButton}
+              />
+            </>
+          )
+        );
+      }}
+    >
+      {isCallEnd && (
+        <div className={classNames(styles.submitButton)}>
           <RcButton
             data-sign="submit"
             size="large"
@@ -147,72 +221,9 @@ export const ActivityCallLogPanel: FunctionComponent<ActivityCallLogPanelProps>
           >
             {getButtonText(saveStatus, currentLocale)}
           </RcButton>
-        ) : (
-          <>
-            <RcMenu
-              classes={{ paper: styles.paper }}
-              anchorEl={transferEl}
-              open={isOnTransfer}
-              onClose={handleTransferClose}
-              data-sign="transferMenu"
-            >
-              <RcMenuItem
-                onClick={() => goToTransferCallPage(transferTypes.internal)}
-                disabled={!allowTransferCall || disableInternalTransfer}
-                data-sign="transferItem-internalTransfer"
-              >
-                {i18n.getString('internalTransfer', currentLocale)}
-              </RcMenuItem>
-              <RcMenuItem
-                onClick={() => goToTransferCallPage(transferTypes.phoneBook)}
-                disabled={!allowTransferCall}
-                data-sign="transferItem-phoneBookTransfer"
-              >
-                {i18n.getString('phoneBookTransfer', currentLocale)}
-              </RcMenuItem>
-              <RcMenuItem
-                onClick={() => goToRequeueCallPage()}
-                disabled={!allowRequeueCall}
-                data-sign="transferItem-queueTransfer"
-              >
-                {i18n.getString('queueTransfer', currentLocale)}
-              </RcMenuItem>
-              <RcMenuItem
-                onClick={() => goToTransferCallPage(transferTypes.manualEntry)}
-                disabled={!allowTransferCall}
-                data-sign="transferItem-enterANumber"
-              >
-                {i18n.getString('enterANumber', currentLocale)}
-              </RcMenuItem>
-            </RcMenu>
-            <EvSmallCallControl
-              onMute={onMute}
-              onUnmute={onUnmute}
-              onHangup={onHangup}
-              onReject={onReject}
-              onHold={onHold}
-              onTransfer={onTransfer}
-              onUnHold={onUnHold}
-              onActive={onActive}
-              isOnMute={isOnMute}
-              currentLocale={currentLocale}
-              isOnTransfer={isOnActive || isOnTransfer}
-              isOnHold={isOnHold}
-              transferRef={transferRef}
-              size={smallCallControlSize}
-              isInComingCall={isInComingCall}
-              disableTransfer={disableTransfer}
-              disableHold={disableHold}
-              disableHangup={disableHangup}
-              disableMute={disableMute}
-              disableActive={disableActive}
-              isOnActive={isOnActive}
-              showMuteButton={showMuteButton}
-            />
-          </>
-        );
-      }}
-    />
+        </div>
+      )}
+    </CallLogPanel>
   );
 };
 

packages/engage-voice-widget/components/ActivityCallLogPanel/ActivityCallLogPanel.ut.tsx

@@ -0,0 +1,47 @@
+import { StepFunction } from 'crius-test';
+
+import { getCurrentRouteId } from '../../../salesforce-engage-voice/test/utils/getCurrentRouteId';
+import { ActivityCallLogPage } from '../../containers/ActivityCallLogPage';
+import { moduleUIPageMount } from '../../test/utils';
+
+export const UTActivityCallLogPanel: StepFunction<any, any> = async (
+  props,
+  context,
+) => {
+  const id = getCurrentRouteId(context.phone.routerInteraction.currentPath);
+
+  const wrapper = moduleUIPageMount(ActivityCallLogPage, { id });
+
+  let index = 0;
+
+  if (props.menuType === 'whatid') {
+    index = 1;
+  }
+
+  const getSelectList = () => {
+    return wrapper
+      .find('EditLogSection')
+      .find('CallLogFields')
+      .find('FieldItem')
+      .find('SelectList')
+      .at(index);
+  };
+
+  const openField = getSelectList()
+    .find('[data-sign="select-list-open"]')
+    .at(0);
+
+  openField.simulate('click');
+
+  const addMenuIcon = getSelectList().find(
+    'RcIconButton[data-sign="addEntityMenu"]',
+  );
+
+  addMenuIcon.simulate('click');
+
+  const menuItems = getSelectList().find('RcMenuItem');
+
+  const entityName = props.entityName.toLowerCase();
+  menuItems.find(`[title="Create ${entityName}"]`).simulate('click');
+  wrapper.unmount();
+};

packages/engage-voice-widget/components/ActivityCallLogPanel/IvrInfo/IvrInfo.tsx

@@ -5,7 +5,7 @@ import {
   RcIcon,
   RcLink,
 } from '@ringcentral/juno';
-import arrowDownSvg from '@ringcentral/juno/icons/icon-arrow_down.svg';
+import arrowDownSvg from '@ringcentral/juno/icon/ArrowDown2';
 import classNames from 'classnames';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 

packages/engage-voice-widget/components/ActivityCallLogPanel/i18n/en-US.ts

@@ -1,13 +1,6 @@
 export default {
-  none: 'None',
   submit: 'Submit',
-  name: 'Name',
-  relatedTo: 'Related to',
   disposition: 'Disposition',
-  multipleNameMatch: 'Multiple name matches',
-  multipleRelatedToMatch: 'Multiple related matches',
-  namePlaceholder: 'Search contact/lead',
-  relatedToPlaceholder: 'Search account/opportunity...',
   internalTransfer: 'Internal transfer',
   phoneBookTransfer: 'Phone book transfer',
   queueTransfer: 'Queue transfer',

packages/engage-voice-widget/components/ActivityCallLogPanel/styles.scss

@@ -38,4 +38,10 @@ $classic-content-width: 144px;
     left: 48px !important;
   }
 }
-
+.submitButton {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  padding: 0 $lightning-page-space;
+  box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.15);
+}