diff --git a/src/CONST.ts b/src/CONST.ts index f32087a856e5..01776326ddda 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -777,6 +777,7 @@ const CONST = { NSQS: 'nsqs', CUSTOM_RULES: 'customRules', TABLE_REPORT_VIEW: 'tableReportView', + HELP_SIDE_PANEL: 'newDotHelpSidePanel', RECEIPT_LINE_ITEMS: 'receiptLineItems', }, BUTTON_STATES: { diff --git a/src/hooks/useSidePane.ts b/src/hooks/useSidePane.ts index d0d579086bd6..1cf4807e7e9e 100644 --- a/src/hooks/useSidePane.ts +++ b/src/hooks/useSidePane.ts @@ -20,6 +20,7 @@ function useSidePaneDisplayStatus() { const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const [sidePaneNVP] = useOnyx(ONYXKEYS.NVP_SIDE_PANE); const [language] = useOnyx(ONYXKEYS.NVP_PREFERRED_LOCALE); + const [canUseHelpSidePanel = false] = useOnyx(ONYXKEYS.BETAS, {selector: (betas) => !!betas?.includes(CONST.BETAS.HELP_SIDE_PANEL)}); const [isModalCenteredVisible = false] = useOnyx(ONYXKEYS.MODAL, { selector: (modal) => modal?.type === CONST.MODAL.MODAL_TYPE.CENTERED_SWIPABLE_TO_RIGHT || @@ -35,14 +36,14 @@ function useSidePaneDisplayStatus() { // - NVP is not set or it is false // - language is unsupported // - modal centered is visible - const shouldHideSidePane = !isSidePaneVisible || isLanguageUnsupported || isModalCenteredVisible; - const isSidePaneHiddenOrLargeScreen = !isSidePaneVisible || isLanguageUnsupported || isExtraLargeScreenWidth; + const shouldHideSidePane = !isSidePaneVisible || isLanguageUnsupported || isModalCenteredVisible || !canUseHelpSidePanel; + const isSidePaneHiddenOrLargeScreen = !isSidePaneVisible || isLanguageUnsupported || isExtraLargeScreenWidth || !canUseHelpSidePanel; // The help button is hidden when: - // - side pane nvp is not set + // - the user is not part of the corresponding beta // - side pane is displayed currently // - language is unsupported - const shouldHideHelpButton = !sidePaneNVP || !shouldHideSidePane || isLanguageUnsupported; + const shouldHideHelpButton = !canUseHelpSidePanel || !shouldHideSidePane || isLanguageUnsupported; const shouldHideSidePaneBackdrop = shouldHideSidePane || isExtraLargeScreenWidth || shouldUseNarrowLayout; return {shouldHideSidePane, isSidePaneHiddenOrLargeScreen, shouldHideHelpButton, shouldHideSidePaneBackdrop, sidePaneNVP}; @@ -82,10 +83,6 @@ function useSidePane() { }, [shouldHideSidePane, shouldApplySidePaneOffset, sidePaneWidth]); const openSidePane = useCallback(() => { - if (!sidePaneNVP) { - return; - } - setIsSidePaneTransitionEnded(false); KeyboardUtils.dismiss(); @@ -93,14 +90,10 @@ function useSidePane() { isOpen: true, isOpenNarrowScreen: isExtraLargeScreenWidth ? undefined : true, }); - }, [isExtraLargeScreenWidth, sidePaneNVP]); + }, [isExtraLargeScreenWidth]); const closeSidePane = useCallback( (shouldUpdateNarrow = false) => { - if (!sidePaneNVP) { - return; - } - setIsSidePaneTransitionEnded(false); const shouldOnlyUpdateNarrowLayout = !isExtraLargeScreenWidth || shouldUpdateNarrow; triggerSidePane({ @@ -111,7 +104,7 @@ function useSidePane() { // Focus the composer after closing the side pane focusComposerWithDelay(ReportActionComposeFocusManager.composerRef.current, CONST.ANIMATED_TRANSITION + CONST.COMPOSER_FOCUS_DELAY)(true); }, - [isExtraLargeScreenWidth, sidePaneNVP], + [isExtraLargeScreenWidth], ); return { diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts index c708518d584d..d1295ab93414 100644 --- a/src/libs/Permissions.ts +++ b/src/libs/Permissions.ts @@ -58,6 +58,10 @@ function canUseTableReportView(betas: OnyxEntry): boolean { return !!betas?.includes(CONST.BETAS.TABLE_REPORT_VIEW) || canUseAllBetas(betas); } +function canUseHelpSidePanel(betas: OnyxEntry): boolean { + return !!betas?.includes(CONST.BETAS.HELP_SIDE_PANEL) || canUseAllBetas(betas); +} + function canUseTalkToAISales(betas: OnyxEntry): boolean { return !!betas?.includes(CONST.BETAS.NEW_DOT_TALK_TO_AI_SALES) || canUseAllBetas(betas); } @@ -79,6 +83,7 @@ export default { canUseNSQS, canUseCustomRules, canUseTableReportView, + canUseHelpSidePanel, canUseTalkToAISales, canUseProhibitedExpenses, };