[HOLD for payment 2022-05-20][$250] Android/IOS - Link is not aligned vertically in pay bills section on public domain @thesahindia

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. launch the app
2. Log in with gmail account
3. Go to any Workspace - Bills

Expected Result:

Link is aligned vertically in pay bills section on public domain

Actual Result:

Link is not aligned vertically in pay bills section on public domain

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Android

Version Number: 1.1.55.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any public account

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

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: @thesahindia

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

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @sakluger (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[thesahindia]

Proposal

App/src/pages/workspace/bills/WorkspaceBillsFirstSection.js

Lines 57 to 59 in 6c53be1

	<TouchableOpacity
	onPress={() => Link.openExternalLink('https://community.expensify.com/discussion/7500/how-to-pay-your-company-bills-in-expensify/')}
	>

Using Text instead of TouchableOpacity will fix this.

    <Text
      style={[styles.link]}
      onPress={() => Link.openExternalLink('https://community.expensify.com/discussion/7500/how-to-pay-your-company-bills-in-expensify/')}
    >
      [email protected]
    </Text>

Shouldn't we add a NewWindow icon here because it's a hyperlink?

[sakluger]

This is working fine for me on iOS. I'm going to see if I can find someone with Android who can reproduce the issue.

[thesahindia]

@sakluger, to repro this you need an account made with public domain email.

[strepanier03]

@sakluger -- I was able to repro on Android:

1. Open New Expensify app,
2. Login with a public domain email (ex: I used [email protected])
3. Go to Workspace
4. Pay Bills

[sakluger]

Thanks @strepanier03 for verifying! I think this is limited to Android since I couldn't reproduce on iOS. I'll update the original description and pass along to engineering triage.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (Exported)

[parasharrajat]

Yes

[parasharrajat]

Can you share the screenshot? I have seen a few places where this icon is used. Let's see what others have to say. cc: @stitesExpensify @NicMendonca

[thesahindia]

Yeah sure.

Screenshots

[Justicea83]

Proposal

TouchableOpacity doesn't work well in android according to this issue.

A work around it is

1. Refactor the codes in components/CopyTextToClipboard.js.

Update the PropTypes

const propTypes = {
    /** The text to display and copy to the clipboard */
    text: PropTypes.string.isRequired,

    /** Styles to apply to the text */
    textStyles: PropTypes.arrayOf(PropTypes.object),

    /** The default icon to show */
    icon: PropTypes.func,

    /* Whether to show the text or not */
    showText: PropTypes.bool,

    ...withLocalizePropTypes,
}; 

Update Default Prop Types

const defaultProps = {
    textStyles: [],
    icon: Expensicons.Clipboard,
    showText: true,
};

Update the render function to this

render() {
        return (
            <Text
                onPress={this.copyToClipboard}
                style={[styles.flexRow, styles.cursorPointer]}
            >
                {this.props.showText && <Text style={this.props.textStyles}>{this.props.text}</Text>}
                <Tooltip text={this.props.translate('reportActionContextMenu.copyToClipboard')}>
                    <Icon
                        src={this.state.showCheckmark ? Expensicons.Checkmark : this.props.icon}
                        fill={this.state.showCheckmark ? themeColors.iconSuccessFill : themeColors.icon}
                        width={variables.iconSizeSmall}
                        height={variables.iconSizeSmall}
                        inline
                    />
                </Tooltip>
            </Text>
        );
    }

2.Refactor the codes in workspace/bills/WorkspaceBillsFirstSection.js.

Replace https://github.com/Expensify/App/blob/main/src/pages/workspace/bills/WorkspaceBillsFirstSection.js#L2 with

import {View, TouchableOpacity, TouchableNativeFeedback, Platform} from 'react-native';

Replace the codes in https://github.com/Expensify/App/blob/main/src/pages/workspace/bills/WorkspaceBillsFirstSection.js#L56-L61 with

               {
                                Platform.OS === 'android'
                                    ? (
                                        <TouchableNativeFeedback
                                            onPress={() => Link.openExternalLink('https://community.expensify.com/discussion/7500/how-to-pay-your-company-bills-in-expensify/')}
                                        >
                                            <Text style={[styles.textBlue]}>[email protected]</Text>
                                        </TouchableNativeFeedback>
                                    )
                                    : (
                                        <TouchableOpacity
                                            onPress={() => Link.openExternalLink('https://community.expensify.com/discussion/7500/how-to-pay-your-company-bills-in-expensify/')}
                                        >
                                            <Text style={[styles.textBlue]}>[email protected]</Text>
                                        </TouchableOpacity>
                                    )
                            }

So were are rendering TouchableNativeFeedback if the platform is android otherwise the TouchableOpacity is rendered.

That should work fine, thats the output in android. Everything shows the same in the other platforms.

[parasharrajat]

Asking on Slack... https://expensify.slack.com/archives/C01GTK53T8Q/p1650988386373059

[parasharrajat]

Based on slack, the final expected behavior is Link is aligned vertically in pay bills section on public domain.

[Justicea83]

Assigning myself since my proposal was accepted

[melvin-bot]

📣 @Justicea83 You have been assigned to this job by @Justicea83!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[thesahindia]

I think we can go with the approach that I had proposed earlier instead of using two different Touchable

Proposal

App/src/pages/workspace/bills/WorkspaceBillsFirstSection.js

Lines 57 to 59 in 6c53be1

	<TouchableOpacity
	onPress={() => Link.openExternalLink('https://community.expensify.com/discussion/7500/how-to-pay-your-company-bills-in-expensify/')}
	>

Using Text instead of TouchableOpacity will fix this.

    <Text
      style={[styles.link]}
      onPress={() => Link.openExternalLink('https://community.expensify.com/discussion/7500/how-to-pay-your-company-bills-in-expensify/')}
    >
      [email protected]
    </Text>

What you think @parasharrajat, @stitesExpensify ?

[parasharrajat]

Sorry, @thesahindia but this is already being worked on.

[NicMendonca]

@thesahindia @parasharrajat don't forget to apply for the job for reporting/ reviewing payment, thank you!

[thesahindia]

Done ✅

[melvin-bot]

This issue has not been updated in over 15 days. @parasharrajat, @NicMendonca, @Justicea83, @stitesExpensify eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[NicMendonca]

@parasharrajat @thesahindia I am so sorry, this job post expired before I could issue payment 😞 Can you please accept my offer?

[thesahindia]

No prob. Accepted the offer ✅

[NicMendonca]

paid - sorry for the delay!