[HOLD for payment 2022-05-02] [$250] Close account - Unnecessary extra vertical margin above the pop up message when tapping close account

[kavimuru]

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. Launch the app
2. Log in with account kbecciv+2002@gmail.com/Feya86Katya
   on New dot.
3. Go to Settings - Security - Close account.
4. Enter the message in input box.
5. Enter email which you are going to close.
6. Click close account.

Expected Result:

Normal space between border and message in popup after tap close account

Actual Result:

Too much space in popup message after tap close account

Workaround:

Visual

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.1.49.0

Reproducible in staging?: Y

Reproducible in production?: Y

Email or phone of affected tester (no customers): kbecciv+2002@gmail.com / Feya86Katya

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos:

Expensify/Expensify Issue URL:

Issue reported by: Applause @Tushu17

Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1648072472591519

View all open jobs on GitHub

[melvin-bot]

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

[Tushu17]

Hi @kavimuru I had reported this on slack, is this eligible for the reporting bonus.

[sobitneupane]

Proposal:
Reason: The Confirm Modal in CloseAccountPage has space as title so extra space appears at the top.
There are two ways to deal with this issue.

1. Add title to Confirm Modal in CloseAccountPage. All Confirm Modal except in CloseAccountPage has title so we might be tempted to add title to this confirm modal as well. We can use "Unable to Close Your Account" or similar title.
   

   App/src/pages/settings/Security/CloseAccountPage.js

   Lines 113 to 115 in 50496a0

   	<ConfirmModal
   	title=""
   	success

2. Show the header section only if title is present.
   

   App/src/components/ConfirmContent.js

   Lines 58 to 60 in 50496a0

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

        {props.title.length > 0 && (
            <View style={[styles.flexRow, styles.mb4]}>
                <Header title={props.title} />
            </View>
        )}

[Puneet-here]

Proposal

We aren't using any title for this modal and we have some margin at bottom for the title that's why there's extra space.

App/src/pages/settings/Security/CloseAccountPage.js

Lines 113 to 114 in 50496a0

	<ConfirmModal
	title=""

if we use this code there won't be any extra space when there's no title.

 {!_.isEmpty(props.title) && (
        <View style={[styles.flexRow, styles.mb4]}>
            <Header title={props.title} />
        </View>
        )}

Also the title is required here -

App/src/components/ConfirmContent.js

Lines 11 to 13 in 50496a0

	const propTypes = {
	/** Title of the modal */
	title: PropTypes.string.isRequired,

There can be other modals in future that won't need a title so if we want we can make it optional by removing isRequired and we can add title: '' in default props we also need to make the title optional ConfirmModal as it passes the title to ConfirmContent

And also if we want we can add a title in this modal -

[melvin-bot]

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