From 6a845558c5a7e3dc96c09d6ef4fdc35a2e8412f0 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 21 Jan 2025 00:22:12 +0530 Subject: [PATCH 1/9] use named imports --- .../workspace/WorkspaceMoreFeaturesPage.tsx | 65 +++++++++++-------- 1 file changed, 38 insertions(+), 27 deletions(-) diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx index 6c6e70b8cc28..8d4f4ee9e44c 100644 --- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx +++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx @@ -15,18 +15,29 @@ import usePermissions from '@hooks/usePermissions'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as CardUtils from '@libs/CardUtils'; -import * as ErrorUtils from '@libs/ErrorUtils'; +import {getCompanyFeeds} from '@libs/CardUtils'; +import {getLatestErrorField} from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import {getPerDiemCustomUnit, isControlPolicy} from '@libs/PolicyUtils'; -import * as Category from '@userActions/Policy/Category'; -import * as DistanceRate from '@userActions/Policy/DistanceRate'; -import * as PerDiem from '@userActions/Policy/PerDiem'; -import * as Policy from '@userActions/Policy/Policy'; -import * as Tag from '@userActions/Policy/Tag'; -import * as Report from '@userActions/Report'; +import {enablePolicyCategories} from '@userActions/Policy/Category'; +import {enablePolicyDistanceRates} from '@userActions/Policy/DistanceRate'; +import {enablePerDiem} from '@userActions/Policy/PerDiem'; +import { + clearPolicyErrorField, + enableCompanyCards, + enableExpensifyCard, + enablePolicyConnections, + enablePolicyInvoicing, + enablePolicyReportFields, + enablePolicyRules, + enablePolicyTaxes, + enablePolicyWorkflows, + openPolicyMoreFeaturesPage, +} from '@userActions/Policy/Policy'; +import {enablePolicyTags} from '@userActions/Policy/Tag'; +import {navigateToConciergeChat} from '@userActions/Report'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -103,7 +114,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro if (!policyID) { return; } - DistanceRate.enablePolicyDistanceRates(policyID, isEnabled); + enablePolicyDistanceRates(policyID, isEnabled); }, }, { @@ -117,7 +128,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro if (!policyID) { return; } - Policy.enableExpensifyCard(policyID, isEnabled); + enableExpensifyCard(policyID, isEnabled); }, disabledAction: () => { setIsDisableExpensifyCardWarningModalOpen(true); @@ -131,7 +142,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro subtitleTranslationKey: 'workspace.moreFeatures.companyCards.subtitle', isActive: policy?.areCompanyCardsEnabled ?? false, pendingAction: policy?.pendingFields?.areCompanyCardsEnabled, - disabled: !isEmptyObject(CardUtils.getCompanyFeeds(cardFeeds)), + disabled: !isEmptyObject(getCompanyFeeds(cardFeeds)), action: (isEnabled: boolean) => { if (!policyID) { return; @@ -140,7 +151,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro Navigation.navigate(ROUTES.WORKSPACE_UPGRADE.getRoute(policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.companyCards.alias, ROUTES.WORKSPACE_MORE_FEATURES.getRoute(policyID))); return; } - Policy.enableCompanyCards(policyID, isEnabled); + enableCompanyCards(policyID, isEnabled); }, disabledAction: () => { setIsDisableCompanyCardsWarningModalOpen(true); @@ -162,7 +173,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro Navigation.navigate(ROUTES.WORKSPACE_UPGRADE.getRoute(policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.perDiem.alias, ROUTES.WORKSPACE_MORE_FEATURES.getRoute(policyID))); return; } - PerDiem.enablePerDiem(policyID, isEnabled, perDiemCustomUnit?.customUnitID); + enablePerDiem(policyID, isEnabled, perDiemCustomUnit?.customUnitID); }, }); } @@ -178,7 +189,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro if (!policyID) { return; } - Policy.enablePolicyWorkflows(policyID, isEnabled); + enablePolicyWorkflows(policyID, isEnabled); }, }, { @@ -196,7 +207,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro Navigation.navigate(ROUTES.WORKSPACE_UPGRADE.getRoute(policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.rules.alias, ROUTES.WORKSPACE_MORE_FEATURES.getRoute(policyID))); return; } - Policy.enablePolicyRules(policyID, isEnabled); + enablePolicyRules(policyID, isEnabled); }, }, ]; @@ -212,7 +223,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro if (!policyID) { return; } - Policy.enablePolicyInvoicing(policyID, isEnabled); + enablePolicyInvoicing(policyID, isEnabled); }, }, ]; @@ -230,7 +241,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro if (!policyID) { return; } - Category.enablePolicyCategories(policyID, isEnabled); + enablePolicyCategories(policyID, isEnabled); }, }, { @@ -245,7 +256,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro if (!policyID) { return; } - Tag.enablePolicyTags(policyID, isEnabled); + enablePolicyTags(policyID, isEnabled); }, }, { @@ -260,7 +271,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro if (!policyID) { return; } - Policy.enablePolicyTaxes(policyID, isEnabled); + enablePolicyTaxes(policyID, isEnabled); }, }, { @@ -283,7 +294,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro return; } - Policy.enablePolicyReportFields(policyID, true); + enablePolicyReportFields(policyID, true); return; } setIsReportFieldsWarningModalOpen(true); @@ -308,15 +319,15 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro if (!policyID) { return; } - Policy.enablePolicyConnections(policyID, isEnabled); + enablePolicyConnections(policyID, isEnabled); }, disabled: hasAccountingConnection, - errors: ErrorUtils.getLatestErrorField(policy ?? {}, CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED), + errors: getLatestErrorField(policy ?? {}, CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED), onCloseError: () => { if (!policyID) { return; } - Policy.clearPolicyErrorField(policyID, CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED); + clearPolicyErrorField(policyID, CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED); }, }, ]; @@ -396,7 +407,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro ); const fetchFeatures = useCallback(() => { - Policy.openPolicyMoreFeaturesPage(route.params.policyID); + openPolicyMoreFeaturesPage(route.params.policyID); }, [route.params.policyID]); useNetwork({onReconnect: fetchFeatures}); @@ -470,7 +481,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro return; } setIsReportFieldsWarningModalOpen(false); - Policy.enablePolicyReportFields(policyID, false); + enablePolicyReportFields(policyID, false); }} onCancel={() => setIsReportFieldsWarningModalOpen(false)} prompt={translate('workspace.reportFields.disableReportFieldsConfirmation')} @@ -483,7 +494,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro isVisible={isDisableExpensifyCardWarningModalOpen} onConfirm={() => { setIsDisableExpensifyCardWarningModalOpen(false); - Report.navigateToConciergeChat(true); + navigateToConciergeChat(true); }} onCancel={() => setIsDisableExpensifyCardWarningModalOpen(false)} prompt={translate('workspace.moreFeatures.expensifyCard.disableCardPrompt')} @@ -495,7 +506,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro isVisible={isDisableCompanyCardsWarningModalOpen} onConfirm={() => { setIsDisableCompanyCardsWarningModalOpen(false); - Report.navigateToConciergeChat(true); + navigateToConciergeChat(true); }} onCancel={() => setIsDisableCompanyCardsWarningModalOpen(false)} prompt={translate('workspace.moreFeatures.companyCards.disableCardPrompt')} From e3e033f08b1ae35bfef204957c726869f1d51860 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 21 Jan 2025 23:36:46 +0530 Subject: [PATCH 2/9] New WorkspaceMore features page design --- .../workspace/WorkspaceMoreFeaturesPage.tsx | 36 ++++++++++++++----- src/styles/index.ts | 13 +++++++ src/styles/utils/spacing.ts | 4 +++ 3 files changed, 45 insertions(+), 8 deletions(-) diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx index 8d4f4ee9e44c..80b33d962c40 100644 --- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx +++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx @@ -14,6 +14,7 @@ import useNetwork from '@hooks/useNetwork'; import usePermissions from '@hooks/usePermissions'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {getCompanyFeeds} from '@libs/CardUtils'; import {getLatestErrorField} from '@libs/ErrorUtils'; @@ -73,6 +74,7 @@ type SectionObject = { }; function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPageProps) { + const theme = useTheme(); const styles = useThemeStyles(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const {safeAreaPaddingBottomStyle} = useStyledSafeAreaInsets(); @@ -364,7 +366,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro (item: Item) => ( { + if (section.items.length % 2 === 0) { + return null; + } + + return ( + + ); + }, + [styles], + ); + const renderSection = useCallback( (section: SectionObject) => (
{section.items.map(renderItem)} + {sectionRowFillerItem(section)}
), - [shouldUseNarrowLayout, styles, renderItem, translate], + [shouldUseNarrowLayout, styles, renderItem, translate, sectionRowFillerItem], ); const fetchFeatures = useCallback(() => { @@ -437,9 +459,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro /> - - {translate('workspace.moreFeatures.subtitle')} - + {translate('workspace.moreFeatures.subtitle')} {sections.map(renderSection)} diff --git a/src/styles/index.ts b/src/styles/index.ts index dbae34f440af..69aed39645a5 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4918,6 +4918,19 @@ const styles = (theme: ThemeColors) => alignSelf: 'center', }, + workspaceSectionMoreFeaturesItem: { + backgroundColor: theme.cardBG, + borderRadius: variables.componentBorderRadiusLarge, + paddingHorizontal: 16, + paddingVertical: 20, + minWidth: 350, + flexGrow: 1, + flexShrink: 1, + // Choosing a lowest value just above the threshold for the items to adjust width against the various screens. Only 2 items are shown 35 * 2 = 70 thus third item of 35% width can't fit forcing a two column layout. + flexBasis: '35%', + marginTop: 20, + }, + aspectRatioLottie: (animation: DotLottieAnimation) => ({aspectRatio: animation.w / animation.h}), receiptDropHeaderGap: { diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts index fd0a3a3cabc7..faf8df756378 100644 --- a/src/styles/utils/spacing.ts +++ b/src/styles/utils/spacing.ts @@ -717,6 +717,10 @@ export default { rowGap: 16, }, + columnGap5: { + columnGap: 20, + }, + minHeight5: { minHeight: 20, }, From 37ce87f8447022b2a32c44edf826fd4d3758a010 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 21 Jan 2025 23:38:13 +0530 Subject: [PATCH 3/9] More design changes --- src/pages/workspace/WorkspaceMoreFeaturesPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx index 80b33d962c40..5d589e16a452 100644 --- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx +++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx @@ -400,7 +400,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro key="section-filler-col" aria-hidden accessibilityElementsHidden - style={[styles.workspaceSectionMoreFeaturesItem, styles.p0, styles.m0, styles.visibilityHidden, styles.bgTransparent]} + style={[styles.workspaceSectionMoreFeaturesItem, styles.p0, styles.mt0, styles.visibilityHidden, styles.bgTransparent]} /> ); }, From 741b176d516a15cc84c84a3245ce1e032125c42d Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 21 Jan 2025 23:40:34 +0530 Subject: [PATCH 4/9] change position of sections --- .../workspace/WorkspaceMoreFeaturesPage.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx index 5d589e16a452..195ae7f5e8db 100644 --- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx +++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx @@ -340,6 +340,16 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro subtitleTranslationKey: 'workspace.moreFeatures.spendSection.subtitle', items: spendItems, }, + { + titleTranslationKey: 'workspace.moreFeatures.integrateSection.title', + subtitleTranslationKey: 'workspace.moreFeatures.integrateSection.subtitle', + items: integrateItems, + }, + { + titleTranslationKey: 'workspace.moreFeatures.organizeSection.title', + subtitleTranslationKey: 'workspace.moreFeatures.organizeSection.subtitle', + items: organizeItems, + }, { titleTranslationKey: 'workspace.moreFeatures.manageSection.title', subtitleTranslationKey: 'workspace.moreFeatures.manageSection.subtitle', @@ -350,16 +360,6 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro subtitleTranslationKey: 'workspace.moreFeatures.earnSection.subtitle', items: earnItems, }, - { - titleTranslationKey: 'workspace.moreFeatures.organizeSection.title', - subtitleTranslationKey: 'workspace.moreFeatures.organizeSection.subtitle', - items: organizeItems, - }, - { - titleTranslationKey: 'workspace.moreFeatures.integrateSection.title', - subtitleTranslationKey: 'workspace.moreFeatures.integrateSection.subtitle', - items: integrateItems, - }, ]; const renderItem = useCallback( From 5d41dbda3e69216d8da121862f67c8e802112694 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 21 Jan 2025 23:41:09 +0530 Subject: [PATCH 5/9] Remove extra import --- src/pages/workspace/WorkspaceMoreFeaturesPage.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx index 195ae7f5e8db..a0fa446370c6 100644 --- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx +++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx @@ -14,7 +14,6 @@ import useNetwork from '@hooks/useNetwork'; import usePermissions from '@hooks/usePermissions'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {getCompanyFeeds} from '@libs/CardUtils'; import {getLatestErrorField} from '@libs/ErrorUtils'; @@ -74,7 +73,6 @@ type SectionObject = { }; function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPageProps) { - const theme = useTheme(); const styles = useThemeStyles(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const {safeAreaPaddingBottomStyle} = useStyledSafeAreaInsets(); From 30a5c845f1d009dd824fe6d1a033c3d1293de214 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 22 Jan 2025 01:39:14 +0530 Subject: [PATCH 6/9] Fix Spacing --- src/pages/workspace/WorkspaceMoreFeaturesPage.tsx | 4 ++-- src/styles/index.ts | 4 ++-- src/styles/utils/spacing.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx index a0fa446370c6..2752ecd09470 100644 --- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx +++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx @@ -413,7 +413,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro >
- {translate('workspace.moreFeatures.subtitle')} + {translate('workspace.moreFeatures.subtitle')} {sections.map(renderSection)} diff --git a/src/styles/index.ts b/src/styles/index.ts index 69aed39645a5..85aae20a18a2 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4920,7 +4920,7 @@ const styles = (theme: ThemeColors) => workspaceSectionMoreFeaturesItem: { backgroundColor: theme.cardBG, - borderRadius: variables.componentBorderRadiusLarge, + borderRadius: variables.componentBorderRadiusNormal, paddingHorizontal: 16, paddingVertical: 20, minWidth: 350, @@ -4928,7 +4928,7 @@ const styles = (theme: ThemeColors) => flexShrink: 1, // Choosing a lowest value just above the threshold for the items to adjust width against the various screens. Only 2 items are shown 35 * 2 = 70 thus third item of 35% width can't fit forcing a two column layout. flexBasis: '35%', - marginTop: 20, + marginTop: 12, }, aspectRatioLottie: (animation: DotLottieAnimation) => ({aspectRatio: animation.w / animation.h}), diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts index faf8df756378..894542fcae0c 100644 --- a/src/styles/utils/spacing.ts +++ b/src/styles/utils/spacing.ts @@ -717,8 +717,8 @@ export default { rowGap: 16, }, - columnGap5: { - columnGap: 20, + columnGap3: { + columnGap: 12, }, minHeight5: { From 73a998c650a5caa288befc3d83d3d89c5da21b97 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 22 Jan 2025 14:21:04 +0530 Subject: [PATCH 7/9] Force single column layout on Narrow screens --- src/pages/workspace/WorkspaceMoreFeaturesPage.tsx | 4 ++-- src/styles/utils/flex.ts | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx index 2752ecd09470..27fca65728a9 100644 --- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx +++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx @@ -364,7 +364,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro (item: Item) => ( ), - [styles, translate], + [styles, shouldUseNarrowLayout, translate], ); /** Used to fill row space in the Section items when there are odd number of items to create equal margins for last odd item. */ diff --git a/src/styles/utils/flex.ts b/src/styles/utils/flex.ts index 4db09f138535..f5df6eef8739 100644 --- a/src/styles/utils/flex.ts +++ b/src/styles/utils/flex.ts @@ -137,6 +137,10 @@ export default { flexBasis: 'auto', }, + flexBasis100: { + flexBasis: '100%', + }, + flexBasis0: { flexBasis: 0, }, From e88b0fd9b55be743232cc5a754b349275c3edff6 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 22 Jan 2025 14:30:55 +0530 Subject: [PATCH 8/9] Update section title styles --- src/pages/workspace/WorkspaceMoreFeaturesPage.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx index 27fca65728a9..c2e8baf93a96 100644 --- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx +++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx @@ -412,10 +412,9 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : {}]} >
{translate(section.titleTranslationKey)}} subtitleMuted > {section.items.map(renderItem)} From a90e93158c62229ffd530f6f205d3e966f9c7d4f Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 22 Jan 2025 19:02:08 +0530 Subject: [PATCH 9/9] MinWidth issue fix for small screen devices --- .../workspace/WorkspaceMoreFeaturesPage.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx index c2e8baf93a96..c9836a31f7b8 100644 --- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx +++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx @@ -14,6 +14,7 @@ import useNetwork from '@hooks/useNetwork'; import usePermissions from '@hooks/usePermissions'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; +import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import {getCompanyFeeds} from '@libs/CardUtils'; import {getLatestErrorField} from '@libs/ErrorUtils'; @@ -74,6 +75,7 @@ type SectionObject = { function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPageProps) { const styles = useThemeStyles(); + const stylesutils = useStyleUtils(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const {safeAreaPaddingBottomStyle} = useStyledSafeAreaInsets(); const {translate} = useLocalize(); @@ -364,7 +366,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro (item: Item) => ( ), - [styles, shouldUseNarrowLayout, translate], + [styles, stylesutils, shouldUseNarrowLayout, translate], ); /** Used to fill row space in the Section items when there are odd number of items to create equal margins for last odd item. */ @@ -398,11 +400,18 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro key="section-filler-col" aria-hidden accessibilityElementsHidden - style={[styles.workspaceSectionMoreFeaturesItem, styles.p0, styles.mt0, styles.visibilityHidden, styles.bgTransparent]} + style={[ + styles.workspaceSectionMoreFeaturesItem, + shouldUseNarrowLayout && stylesutils.getMinimumWidth(0), + styles.p0, + styles.mt0, + styles.visibilityHidden, + styles.bgTransparent, + ]} /> ); }, - [styles], + [styles, stylesutils, shouldUseNarrowLayout], ); const renderSection = useCallback(