[Workspace Feeds] Double header on the Expensify Card

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number:
Reproducible in staging?:
Reproducible in production?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:

Action Performed:

Add account to workspaceFeeds beta
Sign in with test account
Select Manage my team’s expenses
Enter any business name / personal name
Navigate to the workspace editor of the newly created workspace
Navigate to More features tab
Toggle on the feature
Navigate to the Expensify Card page
Select Issue new card, give the user a $2 limit
Follow the steps for an OPEN bank account (option 3) of this SO
Finish the setup process
Issue a card
Navigate back to the Expensify Card page

Expected Result:

Only see one Expensify Card header.

Actual Result:

Two Expensify Card headers are shown.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

View all open jobs on GitHub

@dylanexpensify

Triggered auto assignment to @dylanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Double header on the Expensify Card

What is the root cause of that problem?

A regression from this PR where here

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx

Lines 46 to 60 in 0a56250

    
           <WorkspacePageWithSections 
        
               shouldUseScrollView 
        
               icon={Illustrations.HandCard} 
        
               headerText={translate('workspace.common.expensifyCard')} 
        
               route={route} 
        
               guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_EXPENSIFY_CARD} 
        
               shouldShowOfflineIndicatorInWideScreen 
        
               isLoading={isLoading} 
        
           > 
        
               {!!paymentBankAccountID && !isLoading && ( 
        
                   <WorkspaceExpensifyCardListPage 
        
                       cardsList={cardsList} 
        
                       route={route} 
        
                   /> 
        
               )}

both the WorkspacePageWithSectionsand the WorkspaceExpensifyCardListPage have the header component

What changes do you think we should make in order to solve the problem?

we should move the WorkspaceExpensifyCardListPage outside the WorkspacePageWithSections

            {!!paymentBankAccountID && !isLoading && (
                <WorkspaceExpensifyCardListPage
                    cardsList={cardsList}
                    route={route}
                />
            )}

            {!paymentBankAccountID && !isLoading && (
                <WorkspacePageWithSections
                    shouldUseScrollView
                    icon={Illustrations.HandCard}
                    headerText={translate('workspace.common.expensifyCard')}
                    route={route}
                    guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_EXPENSIFY_CARD}
                    shouldShowOfflineIndicatorInWideScreen
                    isLoading={isLoading}
                >
                    <WorkspaceExpensifyCardPageEmptyState route={route} />
                </WorkspacePageWithSections>
            )}

POC

Proposal

Please re-state the problem that we are trying to solve in this issue.

Double header on the Expensify Card

What is the root cause of that problem?

We are adding headerContent twice once here in WorkspaceExpensifyCardPage.tsx and then again in WorkspaceExpensifyCardListPage.tsx

What changes do you think we should make in order to solve the problem?

We can remove HeaderWithBackButton and ScreenWrapper from here

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx

Lines 108 to 119 in 488d5ff

    
           <ScreenWrapper 
        
               shouldEnablePickerAvoiding={false} 
        
               shouldShowOfflineIndicatorInWideScreen 
        
               shouldEnableMaxHeight 
        
               testID={WorkspaceExpensifyCardListPage.displayName} 
        
           > 
        
               <HeaderWithBackButton 
        
                   icon={Illustrations.HandCard} 
        
                   title={translate('workspace.common.expensifyCard')} 
        
                   shouldShowBackButton={shouldUseNarrowLayout} 
        
                   onBackButtonPress={() => Navigation.goBack()} 
        
               >

Optional: We can move headerButtons in WorkspaceExpensifyCardPage.tsx

What alternative solutions did you explore? (Optional)

@No_action

Hey, I'm Viktoryia from Callstack, I've been working on this page, so I can take a look.

Lets close this issue, PR was deployed

Navigation Menu

Repository navigation

[Workspace Feeds] Double header on the Expensify Card #48944

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

POC

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<WorkspacePageWithSections
	shouldUseScrollView
	icon={Illustrations.HandCard}
	headerText={translate('workspace.common.expensifyCard')}
	route={route}
	guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_EXPENSIFY_CARD}
	shouldShowOfflineIndicatorInWideScreen
	isLoading={isLoading}
	>
	{!!paymentBankAccountID && !isLoading && (
	<WorkspaceExpensifyCardListPage
	cardsList={cardsList}
	route={route}
	/>
	)}

	<ScreenWrapper
	shouldEnablePickerAvoiding={false}
	shouldShowOfflineIndicatorInWideScreen
	shouldEnableMaxHeight
	testID={WorkspaceExpensifyCardListPage.displayName}
	>
	<HeaderWithBackButton
	icon={Illustrations.HandCard}
	title={translate('workspace.common.expensifyCard')}
	shouldShowBackButton={shouldUseNarrowLayout}
	onBackButtonPress={() => Navigation.goBack()}
	>

[Workspace Feeds] Double header on the Expensify Card #48944

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Sep 10, 2024

abzokhattab commented on Sep 10, 2024

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

POC

Nodebrute commented on Sep 10, 2024

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

github-actions commented on Sep 10, 2024

VickyStash commented on Sep 11, 2024

allgandalf commented on Sep 13, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions