Skip to content

Commit ad61376

Browse files
mountinymountiny
authored
Merge pull request #52357 from callstack-internal/fix/51876-change-offline-pattern-for-unassigning-cards-v2
2 parents 8a1052a + 72861ec commit ad61376

File tree

4 files changed

+60
-23
lines changed

4 files changed

+60
-23
lines changed

‎src/libs/actions/CompanyCards.ts

+23-2
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,27 @@ function unassignWorkspaceCompanyCard(workspaceAccountID: number, bankName: stri
240240

241241
const onyxData: OnyxData = {
242242
optimisticData: [
243+
{
244+
onyxMethod: Onyx.METHOD.MERGE,
245+
key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bankName}`,
246+
value: {
247+
[cardID]: {
248+
pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
249+
},
250+
},
251+
},
252+
{
253+
onyxMethod: Onyx.METHOD.MERGE,
254+
key: ONYXKEYS.CARD_LIST,
255+
value: {
256+
[cardID]: {
257+
pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
258+
},
259+
},
260+
},
261+
],
262+
263+
successData: [
243264
{
244265
onyxMethod: Onyx.METHOD.MERGE,
245266
key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bankName}`,
@@ -262,7 +283,7 @@ function unassignWorkspaceCompanyCard(workspaceAccountID: number, bankName: stri
262283
key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bankName}`,
263284
value: {
264285
[cardID]: {
265-
...card,
286+
pendingAction: null,
266287
errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
267288
},
268289
},
@@ -272,7 +293,7 @@ function unassignWorkspaceCompanyCard(workspaceAccountID: number, bankName: stri
272293
key: ONYXKEYS.CARD_LIST,
273294
value: {
274295
[cardID]: {
275-
...card,
296+
pendingAction: null,
276297
errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
277298
},
278299
},

‎src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,20 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL
3737
({item, index}: ListRenderItemInfo<Card>) => {
3838
const cardID = Object.keys(cardsList ?? {}).find((id) => cardsList?.[id].cardID === item.cardID);
3939
const cardName = CardUtils.getCompanyCardNumber(cardsList?.cardList ?? {}, item.lastFourPAN);
40+
const isCardDeleted = item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
4041
return (
4142
<OfflineWithFeedback
4243
key={`${item.nameValuePairs?.cardTitle}_${index}`}
4344
errorRowStyles={styles.ph5}
4445
errors={item.errors}
46+
pendingAction={item.pendingAction}
4547
>
4648
<PressableWithFeedback
4749
role={CONST.ROLE.BUTTON}
4850
style={[styles.mh5, styles.br3, styles.mb3, styles.highlightBG]}
4951
accessibilityLabel="row"
5052
hoverStyle={styles.hoveredComponentBG}
53+
disabled={isCardDeleted}
5154
onPress={() => {
5255
if (!cardID || !item?.accountID) {
5356
return;

‎src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function WorkspaceCompanyCardsListRow({cardholder, name, cardNumber}: WorkspaceC
2727
<View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.br3, styles.p4]}>
2828
<View style={[styles.flexRow, styles.gap3, styles.alignItemsCenter]}>
2929
<Avatar
30-
source={getDefaultAvatarURL(cardholder?.accountID)}
30+
source={cardholder?.avatar ?? getDefaultAvatarURL(cardholder?.accountID)}
3131
avatarID={cardholder?.accountID}
3232
type={CONST.ICON_TYPE_AVATAR}
3333
size={CONST.AVATAR_SIZE.DEFAULT}

‎src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx

+33-20
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
219219
return <NotFoundPage />;
220220
}
221221

222-
const shouldShowCardsSection = (!!policy?.areExpensifyCardsEnabled && !!paymentAccountID) ?? (!!policy?.areCompanyCardsEnabled && hasMultipleFeeds);
222+
const shouldShowCardsSection = (!!policy?.areExpensifyCardsEnabled && !!paymentAccountID) || (!!policy?.areCompanyCardsEnabled && hasMultipleFeeds);
223223

224224
return (
225225
<AccessOrNotFoundWrapper
@@ -315,25 +315,38 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
315315
{translate('walletPage.assignedCards')}
316316
</Text>
317317
</View>
318-
{(memberCards as MemberCard[]).map((memberCard) => (
319-
<MenuItem
320-
key={memberCard.cardID}
321-
title={memberCard.nameValuePairs?.cardTitle ?? memberCard?.cardName}
322-
badgeText={
323-
memberCard.bank === CONST.EXPENSIFY_CARD.BANK
324-
? CurrencyUtils.convertToDisplayString(memberCard.nameValuePairs?.unapprovedExpenseLimit)
325-
: ''
326-
}
327-
icon={CardUtils.getCardFeedIcon(memberCard.bank as CompanyCardFeed)}
328-
displayInDefaultIconColor
329-
iconStyles={styles.cardIcon}
330-
contentFit="contain"
331-
iconWidth={variables.iconSizeExtraLarge}
332-
iconHeight={variables.iconSizeExtraLarge}
333-
onPress={() => navigateToDetails(memberCard)}
334-
shouldShowRightIcon
335-
/>
336-
))}
318+
{(memberCards as MemberCard[]).map((memberCard) => {
319+
const isCardDeleted = memberCard.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
320+
return (
321+
<OfflineWithFeedback
322+
key={`${memberCard.nameValuePairs?.cardTitle}_${memberCard.cardID}`}
323+
errorRowStyles={styles.ph5}
324+
errors={memberCard.errors}
325+
pendingAction={memberCard.pendingAction}
326+
>
327+
<MenuItem
328+
key={memberCard.cardID}
329+
title={memberCard.nameValuePairs?.cardTitle ?? memberCard?.cardName}
330+
badgeText={
331+
memberCard.bank === CONST.EXPENSIFY_CARD.BANK
332+
? CurrencyUtils.convertToDisplayString(memberCard.nameValuePairs?.unapprovedExpenseLimit)
333+
: ''
334+
}
335+
icon={CardUtils.getCardFeedIcon(memberCard.bank as CompanyCardFeed)}
336+
displayInDefaultIconColor
337+
iconStyles={styles.cardIcon}
338+
contentFit="contain"
339+
iconWidth={variables.iconSizeExtraLarge}
340+
iconHeight={variables.iconSizeExtraLarge}
341+
onPress={() => navigateToDetails(memberCard)}
342+
shouldRemoveHoverBackground={isCardDeleted}
343+
disabled={isCardDeleted}
344+
shouldShowRightIcon={!isCardDeleted}
345+
style={[isCardDeleted ? styles.offlineFeedback.deleted : {}]}
346+
/>
347+
</OfflineWithFeedback>
348+
);
349+
})}
337350
<MenuItem
338351
title={translate('workspace.expensifyCard.newCard')}
339352
icon={Expensicons.Plus}

0 commit comments

Comments
 (0)