Merge pull request #55148 from truph01/fix/54775

src/components/Tooltip/BaseGenericTooltip/index.native.tsx

@@ -37,6 +37,7 @@ function BaseGenericTooltip({
     shouldUseOverlay = false,
     onHideTooltip = () => {},
     shouldTeleportPortalToModalLayer = false,
+    isEducationTooltip = false,
 }: BaseGenericTooltipProps) {
     // The width of tooltip's inner content. Has to be undefined in the beginning
     // as a width of 0 will cause the content to be rendered of a width of 0,
@@ -69,6 +70,7 @@ function BaseGenericTooltip({
                 anchorAlignment,
                 wrapperStyle,
                 shouldAddHorizontalPadding: false,
+                isEducationTooltip,
             }),
         [
             StyleUtils,
@@ -85,6 +87,7 @@ function BaseGenericTooltip({
             shouldForceRenderingBelow,
             anchorAlignment,
             wrapperStyle,
+            isEducationTooltip,
         ],
     );
 

src/components/Tooltip/BaseGenericTooltip/index.tsx

@@ -38,6 +38,7 @@ function BaseGenericTooltip({
     },
     shouldUseOverlay = false,
     onHideTooltip = () => {},
+    isEducationTooltip = false,
 }: BaseGenericTooltipProps) {
     // The width of tooltip's inner content. Has to be undefined in the beginning
     // as a width of 0 will cause the content to be rendered of a width of 0,
@@ -83,6 +84,7 @@ function BaseGenericTooltip({
                 shouldForceRenderingBelow,
                 anchorAlignment,
                 wrapperStyle,
+                isEducationTooltip,
             }),
         [
             StyleUtils,
@@ -99,6 +101,7 @@ function BaseGenericTooltip({
             shouldForceRenderingBelow,
             anchorAlignment,
             wrapperStyle,
+            isEducationTooltip,
         ],
     );
 

src/components/Tooltip/BaseGenericTooltip/types.ts

@@ -33,6 +33,9 @@ type BaseGenericTooltipProps = {
 
     /** Whether the tooltip should teleport to the modal layer */
     shouldTeleportPortalToModalLayer?: boolean;
+
+    /** Whether it is education tooltip */
+    isEducationTooltip?: boolean;
 } & Pick<SharedTooltipProps, 'renderTooltipContent' | 'maxWidth' | 'numberOfLines' | 'text' | 'shouldForceRenderingBelow' | 'wrapperStyle' | 'anchorAlignment' | 'shouldUseOverlay'>;
 
 // eslint-disable-next-line import/prefer-default-export

src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

@@ -59,6 +59,7 @@ function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNav
         <GenericTooltip
             shouldForceAnimate
             shouldRender={shouldRender}
+            isEducationTooltip
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
         >

src/components/Tooltip/GenericTooltip.tsx

@@ -36,6 +36,7 @@ function GenericTooltip({
     shouldUseOverlay: shouldUseOverlayProp = false,
     shouldTeleportPortalToModalLayer,
     shouldRender = true,
+    isEducationTooltip = false,
 }: GenericTooltipProps) {
     const {preferredLocale} = useLocalize();
     const {windowWidth} = useWindowDimensions();
@@ -163,6 +164,7 @@ function GenericTooltip({
         <>
             {shouldRender && isRendered && (
                 <BaseGenericTooltip
+                    isEducationTooltip={isEducationTooltip}
                     // eslint-disable-next-line react-compiler/react-compiler
                     animation={animation}
                     windowWidth={windowWidth}

src/components/Tooltip/types.ts

@@ -66,6 +66,9 @@ type GenericTooltipProps = SharedTooltipProps & {
 
     /** Whether to ignore TooltipSense activity and always triger animation */
     shouldForceAnimate?: boolean;
+
+    /** Whether it is education tooltip */
+    isEducationTooltip?: boolean;
 };
 
 type TooltipProps = ChildrenProps &

src/pages/Search/SearchTypeMenu.tsx

@@ -164,9 +164,9 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) {
                         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
                     },
-                    tooltipShiftHorizontal: -32,
-                    tooltipShiftVertical: 15,
-                    tooltipWrapperStyle: [styles.bgPaleGreen, styles.mh4, styles.pv2],
+                    tooltipShiftHorizontal: variables.savedSearchShiftHorizontal,
+                    tooltipShiftVertical: variables.savedSearchShiftVertical,
+                    tooltipWrapperStyle: [styles.mh4, styles.pv2, styles.productTrainingTooltipWrapper],
                     renderTooltipContent: renderProductTrainingTooltip,
                 };
             }
@@ -177,7 +177,6 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) {
             hash,
             getOverflowMenu,
             styles.alignItemsCenter,
-            styles.bgPaleGreen,
             styles.mh4,
             styles.pv2,
             personalDetails,
@@ -186,6 +185,7 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) {
             shouldShowProductTrainingTooltip,
             hideProductTrainingTooltip,
             renderProductTrainingTooltip,
+            styles.productTrainingTooltipWrapper,
         ],
     );
 

src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

@@ -29,22 +29,22 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useViewportOffsetTop from '@hooks/useViewportOffsetTop';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
-import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import DomUtils from '@libs/DomUtils';
 import {getDraftComment} from '@libs/DraftCommentUtils';
 import getModalState from '@libs/getModalState';
 import Performance from '@libs/Performance';
-import * as ReportUtils from '@libs/ReportUtils';
+import {canShowReportRecipientLocalTime, chatIncludesChronos, chatIncludesConcierge, getReportRecipientAccountIDs} from '@libs/ReportUtils';
 import playSound, {SOUNDS} from '@libs/Sound';
 import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutside';
 import ParticipantLocalTime from '@pages/home/report/ParticipantLocalTime';
 import ReportDropUI from '@pages/home/report/ReportDropUI';
 import ReportTypingIndicator from '@pages/home/report/ReportTypingIndicator';
 import variables from '@styles/variables';
-import * as EmojiPickerActions from '@userActions/EmojiPickerAction';
-import * as Report from '@userActions/Report';
+import {hideEmojiPicker, isActive as isActiveEmojiPickerAction} from '@userActions/EmojiPickerAction';
+import {addAttachment as addAttachmentReportActions, setIsComposerFullSize} from '@userActions/Report';
 import Timing from '@userActions/Timing';
-import * as User from '@userActions/User';
+import {isBlockedFromConcierge as isBlockedFromConciergeUserAction} from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
@@ -201,12 +201,12 @@ function ReportActionCompose({
     );
 
     const shouldShowReportRecipientLocalTime = useMemo(
-        () => ReportUtils.canShowReportRecipientLocalTime(personalDetails, report, currentUserPersonalDetails.accountID) && !isComposerFullSize,
+        () => canShowReportRecipientLocalTime(personalDetails, report, currentUserPersonalDetails.accountID) && !isComposerFullSize,
         [personalDetails, report, currentUserPersonalDetails.accountID, isComposerFullSize],
     );
 
-    const includesConcierge = useMemo(() => ReportUtils.chatIncludesConcierge({participants: report?.participants}), [report?.participants]);
-    const userBlockedFromConcierge = useMemo(() => User.isBlockedFromConcierge(blockedFromConcierge), [blockedFromConcierge]);
+    const includesConcierge = useMemo(() => chatIncludesConcierge({participants: report?.participants}), [report?.participants]);
+    const userBlockedFromConcierge = useMemo(() => isBlockedFromConciergeUserAction(blockedFromConcierge), [blockedFromConcierge]);
     const isBlockedFromConcierge = useMemo(() => includesConcierge && userBlockedFromConcierge, [includesConcierge, userBlockedFromConcierge]);
 
     // Placeholder to display in the chat input.
@@ -288,7 +288,7 @@ function ReportActionCompose({
             const newCommentTrimmed = newComment.trim();
 
             if (attachmentFileRef.current) {
-                Report.addAttachment(reportID, attachmentFileRef.current, newCommentTrimmed);
+                addAttachmentReportActions(reportID, attachmentFileRef.current, newCommentTrimmed);
                 attachmentFileRef.current = null;
             } else {
                 Performance.markStart(CONST.TIMING.SEND_MESSAGE, {message: newCommentTrimmed});
@@ -337,18 +337,18 @@ function ReportActionCompose({
     // We are returning a callback here as we want to incoke the method on unmount only
     useEffect(
         () => () => {
-            if (!EmojiPickerActions.isActive(report?.reportID)) {
+            if (!isActiveEmojiPickerAction(report?.reportID)) {
                 return;
             }
-            EmojiPickerActions.hideEmojiPicker();
+            hideEmojiPicker();
         },
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
         [],
     );
 
     // When we invite someone to a room they don't have the policy object, but we still want them to be able to mention other reports they are members of, so we only check if the policyID in the report is from a workspace
     const isGroupPolicyReport = useMemo(() => !!report?.policyID && report.policyID !== CONST.POLICY.ID_FAKE, [report]);
-    const reportRecipientAcountIDs = ReportUtils.getReportRecipientAccountIDs(report, currentUserPersonalDetails.accountID);
+    const reportRecipientAcountIDs = getReportRecipientAccountIDs(report, currentUserPersonalDetails.accountID);
     const reportRecipient = personalDetails?.[reportRecipientAcountIDs[0]];
     const shouldUseFocusedColor = !isBlockedFromConcierge && !disabled && isFocused;
 
@@ -407,7 +407,7 @@ function ReportActionCompose({
     const onValueChange = useCallback(
         (value: string) => {
             if (value.length === 0 && isComposerFullSize) {
-                Report.setIsComposerFullSize(reportID, false);
+                setIsComposerFullSize(reportID, false);
             }
             debouncedValidate(value);
         },
@@ -433,7 +433,7 @@ function ReportActionCompose({
                             horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
                             vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
                         }}
-                        wrapperStyle={styles.reportActionComposeTooltipWrapper}
+                        wrapperStyle={[styles.productTrainingTooltipWrapper, styles.pv2]}
                         shiftHorizontal={variables.composerTooltipShiftHorizontal}
                         shiftVertical={variables.composerTooltipShiftVertical + offsetTop}
                     >
@@ -492,7 +492,7 @@ function ReportActionCompose({
                                             raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered}
                                             reportID={reportID}
                                             policyID={report?.policyID}
-                                            includeChronos={ReportUtils.chatIncludesChronos(report)}
+                                            includeChronos={chatIncludesChronos(report)}
                                             isGroupPolicyReport={isGroupPolicyReport}
                                             lastReportAction={lastReportAction}
                                             isMenuVisible={isMenuVisible}
@@ -528,7 +528,7 @@ function ReportActionCompose({
                                     </>
                                 )}
                             </AttachmentModal>
-                            {DeviceCapabilities.canUseTouchScreen() && isMediumScreenWidth ? null : (
+                            {canUseTouchScreen() && isMediumScreenWidth ? null : (
                                 <EmojiPickerButton
                                     isDisabled={isBlockedFromConcierge || disabled}
                                     onModalHide={(isNavigating) => {