diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableHeaderButtons.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableHeaderButtons.tsx index 6ea2263a442a..f66ffe56e5fb 100644 --- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableHeaderButtons.tsx +++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableHeaderButtons.tsx @@ -42,11 +42,14 @@ type WorkspaceCompanyCardsTableHeaderButtonsProps = { /** Whether to show the table controls */ showTableControls: boolean; + /** Whether the current member can edit company cards */ + canWriteCompanyCards: boolean; + /** Card feed icon */ CardFeedIcon: React.ReactNode; }; -function WorkspaceCompanyCardsTableHeaderButtons({policyID, feedName, isLoading, showTableControls, CardFeedIcon}: WorkspaceCompanyCardsTableHeaderButtonsProps) { +function WorkspaceCompanyCardsTableHeaderButtons({policyID, feedName, isLoading, showTableControls, canWriteCompanyCards, CardFeedIcon}: WorkspaceCompanyCardsTableHeaderButtonsProps) { const styles = useThemeStyles(); const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout(); @@ -162,22 +165,24 @@ function WorkspaceCompanyCardsTableHeaderButtons({policyID, feedName, isLoading, {!isLoading && ( <> {showTableControls && } - {}} - shouldUseOptionIcon - customText={translate('common.more')} - options={secondaryActions} - isSplitButton={false} - wrapperStyle={shouldShowNarrowLayout ? styles.flex1 : styles.flexGrow0} - sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.MORE_DROPDOWN} - /> + {canWriteCompanyCards && ( + {}} + shouldUseOptionIcon + customText={translate('common.more')} + options={secondaryActions} + isSplitButton={false} + wrapperStyle={shouldShowNarrowLayout ? styles.flex1 : styles.flexGrow0} + sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.MORE_DROPDOWN} + /> + )} )} - {!isLoading && (isFeedConnectionBroken || hasFeedErrors) && ( + {!isLoading && canWriteCompanyCards && (isFeedConnectionBroken || hasFeedErrors) && ( void; }; -function WorkspaceCompanyCardTableRow({item, policyID, CardFeedIcon, shouldUseNarrowTableLayout, rowIndex, isAssigningCardDisabled, onAssignCard}: WorkspaceCompanyCardTableRowProps) { +function WorkspaceCompanyCardTableRow({ + item, + policyID, + CardFeedIcon, + shouldUseNarrowTableLayout, + rowIndex, + isAssigningCardDisabled, + canWriteCompanyCards, + onAssignCard, +}: WorkspaceCompanyCardTableRowProps) { const theme = useTheme(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); @@ -94,14 +106,21 @@ function WorkspaceCompanyCardTableRow({item, policyID, CardFeedIcon, shouldUseNa ? {width: variables.cardAvatarWidth, height: variables.cardAvatarHeight} : {width: variables.cardAvatarWidthSmall, height: variables.cardAvatarHeightSmall}; + const canOpenCardDetails = !!assignedCard?.accountID && !!assignedCard?.fundID && assignedCard?.cardID !== undefined; + const canAssignCard = !isAssigned && canWriteCompanyCards && !isAssigningCardDisabled; + const canPressRow = canOpenCardDetails || canAssignCard; + const handleRowPress = () => { if (!assignedCard) { + if (!canAssignCard) { + return; + } onAssignCard(cardName, encryptedCardNumber); return; } - if (!assignedCard?.accountID || !assignedCard?.fundID) { + if (!canOpenCardDetails || assignedCard.cardID === undefined) { return; } @@ -115,7 +134,7 @@ function WorkspaceCompanyCardTableRow({item, policyID, CardFeedIcon, shouldUseNa interactive rowIndex={rowIndex} isLoading={isDeleting} - disabled={isCardDeleted || isAssigningCardDisabled} + disabled={isCardDeleted || !canPressRow} skeletonReasonAttributes={reasonAttributes} sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.TABLE_ITEM} LoadingComponent={WorkspaceCompanyCardsTableSkeleton} @@ -175,7 +194,7 @@ function WorkspaceCompanyCardTableRow({item, policyID, CardFeedIcon, shouldUseNa )} - {!isAssigned && ( + {!isAssigned && canWriteCompanyCards && (