Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improvement BasePaymentPage #9622

Merged
merged 18 commits into from
Sep 21, 2022
Merged

Improvement BasePaymentPage #9622

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
75e4731
Use quotation marks
JosueEchandiaAsto Jun 28, 2022
db74810
Requested small changes
JosueEchandiaAsto Jul 4, 2022
2285d07
dimensionsSubscription Removed
JosueEchandiaAsto Jul 7, 2022
a6bc7c6
Rollback remove bounce in PaymentMethodList
JosueEchandiaAsto Jul 7, 2022
f6d98c6
Merge branch 'main' into Fix-Issue8929
JosueEchandiaAsto Jul 11, 2022
6e72f30
FormAlertWrapper in PaymentMethodList
JosueEchandiaAsto Jul 11, 2022
f58e3f4
Lint fix
JosueEchandiaAsto Jul 11, 2022
4637443
Resolve conflicts
JosueEchandiaAsto Jul 22, 2022
59edb3e
Merge improvement
JosueEchandiaAsto Jul 22, 2022
8d06f00
Merge improvement
JosueEchandiaAsto Jul 22, 2022
8b74821
Resolve conflicts
JosueEchandiaAsto Aug 1, 2022
a9c0385
Merge improvement
JosueEchandiaAsto Aug 1, 2022
251213a
Resolve conflicts
JosueEchandiaAsto Sep 15, 2022
99a4f6a
Improve PaymentMethodList
JosueEchandiaAsto Sep 15, 2022
1bf2aa1
Requested changes
JosueEchandiaAsto Sep 15, 2022
2863784
Missing styles
JosueEchandiaAsto Sep 15, 2022
86a7fca
Merge from main
JosueEchandiaAsto Sep 16, 2022
5af7f36
Requested changes
JosueEchandiaAsto Sep 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 23 additions & 38 deletions src/pages/settings/Payments/PaymentMethodList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import bankAccountPropTypes from '../../../components/bankAccountPropTypes';
import * as PaymentUtils from '../../../libs/PaymentUtils';

const MENU_ITEM = 'menuItem';
const BUTTON = 'button';

const propTypes = {
/** What to do when a menu item is pressed */
Expand Down Expand Up @@ -151,23 +150,6 @@ class PaymentMethodList extends Component {
});
}

if (!this.props.shouldShowAddPaymentMethodButton) {
return combinedPaymentMethods;
}

combinedPaymentMethods.push({
JosueEchandiaAsto marked this conversation as resolved.
Show resolved Hide resolved
type: BUTTON,
text: this.props.translate('paymentMethodList.addPaymentMethod'),
icon: Expensicons.CreditCard,
style: [styles.mh4],
iconStyles: [styles.mr4],
onPress: e => this.props.onPress(e),
isDisabled: this.props.isLoadingPayments,
shouldShowRightIcon: true,
success: true,
key: 'addPaymentMethodButton',
});

return combinedPaymentMethods;
}

Expand Down Expand Up @@ -208,21 +190,6 @@ class PaymentMethodList extends Component {
/>
);
}
if (item.type === BUTTON) {
return (
<Button
text={item.text}
icon={item.icon}
onPress={item.onPress}
isDisabled={item.isDisabled}
style={item.style}
iconStyles={item.iconStyles}
success={item.success}
shouldShowRightIcon={item.shouldShowRightIcon}
extraLarge
/>
);
}

return (
<Text
Expand All @@ -235,11 +202,29 @@ class PaymentMethodList extends Component {

render() {
return (
<FlatList
data={this.createPaymentMethodList()}
renderItem={this.renderItem}
keyExtractor={item => item.key}
/>
<>
<FlatList
bounces={false}
JosueEchandiaAsto marked this conversation as resolved.
Show resolved Hide resolved
data={this.createPaymentMethodList()}
JosueEchandiaAsto marked this conversation as resolved.
Show resolved Hide resolved
renderItem={this.renderItem}
keyExtractor={item => item.key}
/>
{
this.props.shouldShowAddPaymentMethodButton
&& (
<Button
text={this.props.translate('paymentMethodList.addPaymentMethod')}
icon={Expensicons.CreditCard}
onPress={e => this.props.onPress(e)}
isDisabled={this.props.isLoadingPayments}
style={[styles.mb4, styles.mh4]}
success
shouldShowRightIcon
extraLarge
/>
)
}
</>
);
}
}
Expand Down
37 changes: 28 additions & 9 deletions src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ class BasePaymentsPage extends React.Component {
selectedPaymentMethod: {},
formattedSelectedPaymentMethod: {},
anchorPositionTop: 0,
anchorPositionLeft: 0,
anchorPositionBottom: 0,
anchorPositionRight: 0,
addPaymentMethodButton: null,
};

Expand Down Expand Up @@ -109,10 +110,24 @@ class BasePaymentsPage extends React.Component {
*/
setPositionAddPaymentMenu(position) {
this.setState({
anchorPositionTop: position.bottom,
anchorPositionTop: position.top + position.height,

// We want the position to be 13px to the right of the left border
anchorPositionLeft: position.left + 13,
anchorPositionRight: (window.innerWidth - position.right) + 13,
});
}

/**
* Set position of the payment method menu
*
* @param {Object} position
*/
setPositionAddPaymentMethod(position) {
this.setState({
anchorPositionBottom: window.innerHeight - position.top,
JosueEchandiaAsto marked this conversation as resolved.
Show resolved Hide resolved

// We want the position to be 5px to the right of the left border
anchorPositionRight: (window.innerWidth - position.right) + 5,
});
}

Expand All @@ -129,6 +144,8 @@ class BasePaymentsPage extends React.Component {
this.setState({
addPaymentMethodButton: nativeEvent,
});

// The delete/default menu
if (accountType) {
let formattedSelectedPaymentMethod;
if (accountType === CONST.PAYMENT_METHODS.PAYPAL) {
Expand Down Expand Up @@ -166,7 +183,9 @@ class BasePaymentsPage extends React.Component {
this.setState({
shouldShowAddPaymentMenu: true,
});
this.setPositionAddPaymentMenu(position);

// Add payment method menu
this.setPositionAddPaymentMethod(position);
}

/**
Expand Down Expand Up @@ -305,8 +324,8 @@ class BasePaymentsPage extends React.Component {
isVisible={this.state.shouldShowAddPaymentMenu}
onClose={this.hideAddPaymentMenu}
anchorPosition={{
top: this.state.anchorPositionTop,
left: this.state.anchorPositionLeft,
bottom: this.state.anchorPositionBottom,
right: this.state.anchorPositionRight,
}}
onItemSelected={method => this.addPaymentMethodTypePressed(method)}
/>
Expand All @@ -315,7 +334,7 @@ class BasePaymentsPage extends React.Component {
onClose={this.hideDefaultDeleteMenu}
anchorPosition={{
top: this.state.anchorPositionTop,
left: this.state.anchorPositionLeft,
right: this.state.anchorPositionRight,
}}
>
<View
Expand Down Expand Up @@ -388,7 +407,7 @@ class BasePaymentsPage extends React.Component {
onClose={this.hidePasswordPrompt}
anchorPosition={{
top: this.state.anchorPositionTop,
left: this.state.anchorPositionLeft,
right: this.state.anchorPositionRight,
}}
onSubmit={(password) => {
this.hidePasswordPrompt();
Expand All @@ -406,7 +425,7 @@ class BasePaymentsPage extends React.Component {
cancelText={this.props.translate('common.cancel')}
anchorPosition={{
top: this.state.anchorPositionTop,
left: this.state.anchorPositionLeft,
right: this.state.anchorPositionRight,
}}
onConfirm={() => {
this.setState({
Expand Down