[HOLD for payment 2022-03-22] The delete/remove popup is not consistent in the app - Reported by @adeel0202

[mvtglobally]

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

---

Action Performed:

1. Open app
2. Navigate to Settings > Workspace > Manage members and try to delete any member
3. Navigate to Settings > Payments and try to delete any payment
4. Navigate to Settings > Workspace and try to delete the workspace

Expected Result:

Delete pages/Buttons should be unified

Actual Result:

The delete/remove popup is not consistent in the app

Context from design team
https://expensify.slack.com/archives/C01GTK53T8Q/p1643754904503449?thread_ts=1643214475.008700&cid=C01GTK53T8Q

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.35-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Upwork job linkhttps://www.upwork.com/jobs/~019179b568a001d2fc
Issue reported by: @adeel0202
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1643214475008700

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @Beamanator (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

Triggered auto assignment to @michaelhaxhiu (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[Beamanator]

Should be workable externally 👍

[thesahindia]

Proposal

There are some other places where we are using ConfirmModal we need to pass danger to them. The below one for example.

App/src/pages/workspace/WorkspaceInitialPage.js

Lines 207 to 210 in e996efe

	<ConfirmModal
	title={this.props.translate('workspace.common.delete')}
	isVisible={this.state.isDeleteModalOpen}
	onConfirm={this.confirmDeleteAndHideModal}

On Payments page we are using ConfirmPopover we can pass a prompt to it and in ConfirmPopover we can use it like we do in ConfirmModal

App/src/pages/settings/Payments/PaymentsPage.js

Lines 353 to 355 in e996efe

	<ConfirmPopover
	isVisible={this.state.shouldShowConfirmPopover}
	title={this.props.translate('paymentsPage.deleteConfirmation')}

To show Delete Account header we can pass it as title and we can use it like below inside ConfirmPopover

<View style={[styles.flexRow, styles.mb4]}>
                <Header title={props.title} />
            </View>

[Beamanator]

@michaelhaxhiu would you mind making an Upwork job for this when you get the chance? :D

[michaelhaxhiu]

Yep, done. Upwork job link - https://www.upwork.com/jobs/~019179b568a001d2fc