Skip to content

Commit 8209632

Browse files
grgiagrgia
authored
Merge pull request Expensify#66087 from getusha/revert-feat-standardize-pay-button
[CP Staging][No QA] Revert feat standardize pay button
2 parents d42bc14 + d7f4494 commit 8209632

57 files changed

Lines changed: 328 additions & 1561 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/CONST/index.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6865,9 +6865,9 @@ const CONST = {
68656865
},
68666866
LAST_PAYMENT_METHOD: {
68676867
LAST_USED: 'lastUsed',
6868-
IOU: 'iou',
6869-
EXPENSE: 'expense',
6870-
INVOICE: 'invoice',
6868+
IOU: 'Iou',
6869+
EXPENSE: 'Expense',
6870+
INVOICE: 'Invoice',
68716871
},
68726872
SKIPPABLE_COLLECTION_MEMBER_IDS: [String(DEFAULT_NUMBER_ID), '-1', 'undefined', 'null', 'NaN'] as string[],
68736873
SETUP_SPECIALIST_LOGIN: 'Setup Specialist',

‎src/components/Button/index.tsx‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -310,19 +310,7 @@ function Button(
310310
const textComponent = secondLineText ? (
311311
<View style={[styles.alignItemsCenter, styles.flexColumn, styles.flexShrink1]}>
312312
{primaryText}
313-
<Text
314-
style={[
315-
isLoading && styles.opacity0,
316-
styles.pointerEventsNone,
317-
styles.fontWeightNormal,
318-
styles.textDoubleDecker,
319-
!!secondLineText && styles.textExtraSmallSupporting,
320-
styles.textWhite,
321-
styles.textBold,
322-
]}
323-
>
324-
{secondLineText}
325-
</Text>
313+
<Text style={[isLoading && styles.opacity0, styles.pointerEventsNone, styles.fontWeightNormal, styles.textDoubleDecker]}>{secondLineText}</Text>
326314
</View>
327315
) : (
328316
primaryText

‎src/components/ButtonWithDropdownMenu/index.tsx‎

Lines changed: 8 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import useTheme from '@hooks/useTheme';
1313
import useThemeStyles from '@hooks/useThemeStyles';
1414
import useWindowDimensions from '@hooks/useWindowDimensions';
1515
import mergeRefs from '@libs/mergeRefs';
16-
import variables from '@styles/variables';
1716
import CONST from '@src/CONST';
1817
import type {AnchorPosition} from '@src/styles';
1918
import type {ButtonWithDropdownMenuProps} from './types';
@@ -51,10 +50,7 @@ function ButtonWithDropdownMenu<IValueType>({
5150
testID,
5251
secondLineText = '',
5352
icon,
54-
shouldPopoverUseScrollView = false,
55-
containerStyles,
5653
shouldUseModalPaddingStyle = true,
57-
shouldUseShortForm = false,
5854
shouldUseOptionIcon = false,
5955
}: ButtonWithDropdownMenuProps<IValueType>) {
6056
const theme = useTheme();
@@ -76,14 +72,9 @@ function ButtonWithDropdownMenu<IValueType>({
7672
const areAllOptionsDisabled = options.every((option) => option.disabled);
7773
const innerStyleDropButton = StyleUtils.getDropDownButtonHeight(buttonSize);
7874
const isButtonSizeLarge = buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE;
79-
const isButtonSizeSmall = buttonSize === CONST.DROPDOWN_BUTTON_SIZE.SMALL;
8075
const nullCheckRef = (ref: RefObject<View | null>) => ref ?? null;
8176
const shouldShowButtonRightIcon = !!options.at(0)?.shouldShowButtonRightIcon;
8277

83-
useEffect(() => {
84-
setSelectedItemIndex(defaultSelectedIndex);
85-
}, [defaultSelectedIndex]);
86-
8778
useEffect(() => {
8879
if (!dropdownAnchor.current) {
8980
return;
@@ -137,7 +128,6 @@ function ButtonWithDropdownMenu<IValueType>({
137128
},
138129
);
139130
const splitButtonWrapperStyle = isSplitButton ? [styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter] : {};
140-
const isTextTooLong = customText && customText?.length > 6;
141131

142132
const handlePress = useCallback(
143133
(event?: GestureResponderEvent | KeyboardEvent) => {
@@ -167,13 +157,12 @@ function ButtonWithDropdownMenu<IValueType>({
167157
large={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE}
168158
medium={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
169159
small={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.SMALL}
170-
innerStyles={[innerStyleDropButton, !isSplitButton && styles.dropDownButtonCartIconView, isTextTooLong && shouldUseShortForm && {...styles.pl2, ...styles.pr1}]}
160+
innerStyles={[innerStyleDropButton, !isSplitButton && styles.dropDownButtonCartIconView]}
171161
enterKeyEventListenerPriority={enterKeyEventListenerPriority}
172162
iconRight={Expensicons.DownArrow}
173163
shouldShowRightIcon={!isSplitButton}
174164
isSplitButton={isSplitButton}
175165
testID={testID}
176-
textStyles={[isTextTooLong && shouldUseShortForm ? {...styles.textExtraSmall, ...styles.textBold} : {}]}
177166
secondLineText={secondLineText}
178167
icon={icon}
179168
/>
@@ -189,25 +178,16 @@ function ButtonWithDropdownMenu<IValueType>({
189178
large={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE}
190179
medium={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
191180
small={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.SMALL}
192-
innerStyles={[styles.dropDownButtonCartIconContainerPadding, innerStyleDropButton, isButtonSizeSmall && styles.dropDownButtonCartIcon]}
181+
innerStyles={[styles.dropDownButtonCartIconContainerPadding, innerStyleDropButton]}
193182
enterKeyEventListenerPriority={enterKeyEventListenerPriority}
194183
>
195184
<View style={[styles.dropDownButtonCartIconView, innerStyleDropButton]}>
196185
<View style={[success ? styles.buttonSuccessDivider : styles.buttonDivider]} />
197-
<View
198-
style={[
199-
isButtonSizeLarge && styles.dropDownLargeButtonArrowContain,
200-
isButtonSizeSmall && shouldUseShortForm ? styles.dropDownSmallButtonArrowContain : styles.dropDownMediumButtonArrowContain,
201-
]}
202-
>
186+
<View style={[isButtonSizeLarge ? styles.dropDownLargeButtonArrowContain : styles.dropDownMediumButtonArrowContain]}>
203187
<Icon
204188
medium={isButtonSizeLarge}
205-
small={!isButtonSizeLarge && !shouldUseShortForm}
206-
inline={shouldUseShortForm}
207-
width={shouldUseShortForm ? variables.iconSizeExtraSmall : undefined}
208-
height={shouldUseShortForm ? variables.iconSizeExtraSmall : undefined}
189+
small={!isButtonSizeLarge}
209190
src={Expensicons.DownArrow}
210-
additionalStyles={shouldUseShortForm ? [styles.pRelative, styles.t0] : undefined}
211191
fill={success ? theme.buttonSuccessText : theme.icon}
212192
/>
213193
</View>
@@ -257,27 +237,18 @@ function ButtonWithDropdownMenu<IValueType>({
257237
shouldShowSelectedItemCheck={shouldShowSelectedItemCheck}
258238
// eslint-disable-next-line react-compiler/react-compiler
259239
anchorRef={nullCheckRef(dropdownAnchor)}
240+
withoutOverlay
241+
shouldUseScrollView
260242
scrollContainerStyle={!shouldUseModalPaddingStyle && isSmallScreenWidth && styles.pv4}
261-
anchorAlignment={anchorAlignment}
262243
shouldUseModalPaddingStyle={shouldUseModalPaddingStyle}
244+
anchorAlignment={anchorAlignment}
263245
headerText={menuHeaderText}
264-
shouldUseScrollView={shouldPopoverUseScrollView}
265-
containerStyles={containerStyles}
266246
menuItems={options.map((item, index) => ({
267247
...item,
268248
onSelected: item.onSelected
269-
? () => {
270-
item.onSelected?.();
271-
if (item.shouldUpdateSelectedIndex) {
272-
setSelectedItemIndex(index);
273-
}
274-
}
249+
? () => item.onSelected?.()
275250
: () => {
276251
onOptionSelected?.(item);
277-
if (item.shouldUpdateSelectedIndex === false) {
278-
return;
279-
}
280-
281252
setSelectedItemIndex(index);
282253
},
283254
shouldCallAfterModalHide: true,

‎src/components/ButtonWithDropdownMenu/types.ts‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,6 @@ type DropdownOption<TValueType> = {
4141
descriptionTextStyle?: StyleProp<TextStyle>;
4242
wrapperStyle?: StyleProp<ViewStyle>;
4343
displayInDefaultIconColor?: boolean;
44-
/** Whether the selected index should be updated when the option is selected even if we have onSelected callback */
45-
shouldUpdateSelectedIndex?: boolean;
4644
subMenuItems?: PopoverMenuItem[];
4745
backButtonText?: string;
4846
avatarSize?: ValueOf<typeof CONST.AVATAR_SIZE>;
@@ -143,18 +141,9 @@ type ButtonWithDropdownMenuProps<TValueType> = {
143141
/** Icon for main button */
144142
icon?: IconAsset;
145143

146-
/** Whether the popover content should be scrollable */
147-
shouldPopoverUseScrollView?: boolean;
148-
149-
/** Container style to be applied to the popover of the dropdown menu */
150-
containerStyles?: StyleProp<ViewStyle>;
151-
152144
/** Whether to use modal padding style for the popover menu */
153145
shouldUseModalPaddingStyle?: boolean;
154146

155-
/** Whether to use short form for the button */
156-
shouldUseShortForm?: boolean;
157-
158147
/** Whether to display the option icon when only one option is available */
159148
shouldUseOptionIcon?: boolean;
160149
};

‎src/components/KYCWall/BaseKYCWall.tsx‎

Lines changed: 9 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,19 @@ import type {EmitterSubscription, GestureResponderEvent, View} from 'react-nativ
55
import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu';
66
import useOnyx from '@hooks/useOnyx';
77
import {openPersonalBankAccountSetupView} from '@libs/actions/BankAccounts';
8-
import {completePaymentOnboarding, savePreferredPaymentMethod} from '@libs/actions/IOU';
9-
import {moveIOUReportToPolicy, moveIOUReportToPolicyAndInviteSubmitter} from '@libs/actions/Report';
8+
import {completePaymentOnboarding} from '@libs/actions/IOU';
109
import getClickedTargetLocation from '@libs/getClickedTargetLocation';
1110
import Log from '@libs/Log';
1211
import Navigation from '@libs/Navigation/Navigation';
1312
import {hasExpensifyPaymentMethod} from '@libs/PaymentUtils';
14-
import {getPolicyExpenseChat, isExpenseReport as isExpenseReportReportUtils, isIOUReport} from '@libs/ReportUtils';
13+
import {isExpenseReport as isExpenseReportReportUtils, isIOUReport} from '@libs/ReportUtils';
1514
import {kycWallRef} from '@userActions/PaymentMethods';
1615
import {createWorkspaceFromIOUPayment} from '@userActions/Policy/Policy';
1716
import {setKYCWallSource} from '@userActions/Wallet';
1817
import CONST from '@src/CONST';
1918
import ONYXKEYS from '@src/ONYXKEYS';
2019
import ROUTES from '@src/ROUTES';
21-
import type {BankAccountList, Policy} from '@src/types/onyx';
20+
import type {BankAccountList} from '@src/types/onyx';
2221
import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
2322
import {getEmptyObject} from '@src/types/utils/EmptyObject';
2423
import viewRef from '@src/types/utils/viewRef';
@@ -103,48 +102,24 @@ function KYCWall({
103102
}, [getAnchorPosition]);
104103

105104
const selectPaymentMethod = useCallback(
106-
(paymentMethod?: PaymentMethod, policy?: Policy) => {
107-
if (paymentMethod) {
108-
onSelectPaymentMethod(paymentMethod);
109-
}
105+
(paymentMethod: PaymentMethod) => {
106+
onSelectPaymentMethod(paymentMethod);
110107

111108
if (paymentMethod === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) {
112109
openPersonalBankAccountSetupView({shouldSetUpUSBankAccount: isIOUReport(iouReport)});
113110
} else if (paymentMethod === CONST.PAYMENT_METHODS.DEBIT_CARD) {
114111
Navigation.navigate(addDebitCardRoute ?? ROUTES.HOME);
115-
} else if (paymentMethod === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT || policy) {
112+
} else if (paymentMethod === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT) {
116113
if (iouReport && isIOUReport(iouReport)) {
117-
if (policy) {
118-
const policyExpenseChatReportID = getPolicyExpenseChat(iouReport.ownerAccountID, policy.id)?.reportID;
119-
if (!policyExpenseChatReportID) {
120-
const {policyExpenseChatReportID: newPolicyExpenseChatReportID} = moveIOUReportToPolicyAndInviteSubmitter(iouReport.reportID, policy.id) ?? {};
121-
savePreferredPaymentMethod(iouReport.policyID, policy.id, CONST.LAST_PAYMENT_METHOD.IOU);
122-
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(newPolicyExpenseChatReportID));
123-
} else {
124-
moveIOUReportToPolicy(iouReport.reportID, policy.id, true);
125-
savePreferredPaymentMethod(iouReport.policyID, policy.id, CONST.LAST_PAYMENT_METHOD.IOU);
126-
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(policyExpenseChatReportID));
127-
}
128-
129-
if (policy?.achAccount) {
130-
return;
131-
}
132-
// Navigate to the bank account set up flow for this specific policy
133-
Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(policy.id));
134-
return;
135-
}
136-
137114
const {policyID, workspaceChatReportID, reportPreviewReportActionID, adminsChatReportID} = createWorkspaceFromIOUPayment(iouReport) ?? {};
138-
if (policyID) {
139-
savePreferredPaymentMethod(iouReport.policyID, policyID, CONST.LAST_PAYMENT_METHOD.IOU);
140-
}
141115
completePaymentOnboarding(CONST.PAYMENT_SELECTED.BBA, adminsChatReportID, policyID);
142116
if (workspaceChatReportID) {
143117
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(workspaceChatReportID, reportPreviewReportActionID));
144118
}
145119

146120
// Navigate to the bank account set up flow for this specific policy
147121
Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(policyID));
122+
148123
return;
149124
}
150125
Navigation.navigate(addBankAccountRoute);
@@ -160,7 +135,7 @@ function KYCWall({
160135
*
161136
*/
162137
const continueAction = useCallback(
163-
(event?: GestureResponderEvent | KeyboardEvent, iouPaymentType?: PaymentMethodType, paymentMethod?: PaymentMethod, policy?: Policy) => {
138+
(event?: GestureResponderEvent | KeyboardEvent, iouPaymentType?: PaymentMethodType) => {
164139
const currentSource = walletTerms?.source ?? source;
165140

166141
/**
@@ -194,19 +169,6 @@ function KYCWall({
194169
return;
195170
}
196171

197-
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
198-
if (paymentMethod || policy) {
199-
setShouldShowAddPaymentMenu(false);
200-
selectPaymentMethod(paymentMethod, policy);
201-
return;
202-
}
203-
204-
if (iouPaymentType && isExpenseReport) {
205-
setShouldShowAddPaymentMenu(false);
206-
selectPaymentMethod(CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT);
207-
return;
208-
}
209-
210172
const clickedElementLocation = getClickedTargetLocation(targetElement as HTMLDivElement);
211173
const position = getAnchorPosition(clickedElementLocation);
212174

@@ -219,20 +181,13 @@ function KYCWall({
219181
// Ask the user to upgrade to a gold wallet as this means they have not yet gone through our Know Your Customer (KYC) checks
220182
const hasActivatedWallet = userWallet?.tierName && [CONST.WALLET.TIER_NAME.GOLD, CONST.WALLET.TIER_NAME.PLATINUM].some((name) => name === userWallet.tierName);
221183

222-
if (!hasActivatedWallet && !policy) {
184+
if (!hasActivatedWallet) {
223185
Log.info('[KYC Wallet] User does not have active wallet');
224186

225187
Navigation.navigate(enablePaymentsRoute);
226188

227189
return;
228190
}
229-
230-
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
231-
if ((paymentMethod || policy) && !hasActivatedWallet) {
232-
setShouldShowAddPaymentMenu(false);
233-
selectPaymentMethod(paymentMethod, policy);
234-
return;
235-
}
236191
}
237192

238193
Log.info('[KYC Wallet] User has valid payment method and passed KYC checks or did not need them');

‎src/components/KYCWall/types.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type {OnyxEntry} from 'react-native-onyx';
44
import type {ValueOf} from 'type-fest';
55
import type CONST from '@src/CONST';
66
import type {Route} from '@src/ROUTES';
7-
import type {Policy, Report} from '@src/types/onyx';
7+
import type {Report} from '@src/types/onyx';
88
import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
99
import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
1010

@@ -63,9 +63,6 @@ type KYCWallProps = {
6363

6464
/** Children to build the KYC */
6565
children: (continueAction: (event: GestureResponderEvent | KeyboardEvent | undefined, method?: PaymentMethodType) => void, anchorRef: RefObject<View | null>) => void;
66-
67-
/** The policy used for payment */
68-
policy?: Policy;
6966
};
7067

7168
export type {AnchorPosition, KYCWallProps, PaymentMethod, DomRect, PaymentMethodType, Source};

‎src/components/MoneyReportHeader.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,7 @@ function MoneyReportHeader({
338338
payInvoice(type, chatReport, moneyRequestReport, payAsBusiness, methodID, paymentMethod);
339339
} else {
340340
startAnimation();
341-
payMoneyRequest(type, chatReport, moneyRequestReport, undefined, true);
341+
payMoneyRequest(type, chatReport, moneyRequestReport, true);
342342
}
343343
},
344344
[chatReport, isAnyTransactionOnHold, isDelegateAccessRestricted, showDelegateNoAccessModal, isInvoiceReport, moneyRequestReport, startAnimation],
@@ -549,7 +549,6 @@ function MoneyReportHeader({
549549
isPaidAnimationRunning={isPaidAnimationRunning}
550550
isApprovedAnimationRunning={isApprovedAnimationRunning}
551551
onAnimationFinish={stopAnimation}
552-
formattedAmount={totalAmount}
553552
canIOUBePaid
554553
onlyShowPayElsewhere={onlyShowPayElsewhere}
555554
currency={moneyRequestReport?.currency}

‎src/components/PopoverMenu.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -312,10 +312,13 @@ function PopoverMenu({
312312
}
313313
setFocusedIndex(menuIndex);
314314
}}
315-
wrapperStyle={[
316-
StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, focusedIndex === menuIndex, item.disabled ?? false, theme.activeComponentBG, theme.hoverComponentBG),
317-
shouldUseScrollView && StyleUtils.getOptionMargin(menuIndex, currentMenuItems.length - 1),
318-
]}
315+
wrapperStyle={StyleUtils.getItemBackgroundColorStyle(
316+
!!item.isSelected,
317+
focusedIndex === menuIndex,
318+
item.disabled ?? false,
319+
theme.activeComponentBG,
320+
theme.hoverComponentBG,
321+
)}
319322
shouldRemoveHoverBackground={item.isSelected}
320323
titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])}
321324
// Spread other props dynamically

‎src/components/ProcessMoneyReportHoldMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ function ProcessMoneyReportHoldMenu({
7777
if (startAnimation) {
7878
startAnimation();
7979
}
80-
payMoneyRequest(paymentType, chatReport, moneyRequestReport, undefined, full);
80+
payMoneyRequest(paymentType, chatReport, moneyRequestReport, full);
8181
}
8282
onClose();
8383
};

0 commit comments

Comments
 (0)