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

[Internal QA] Add enable wallet state button if the submitter hasn't completed the kyc #29430

Merged
merged 14 commits into from
Oct 19, 2023
Merged

[Internal QA] Add enable wallet state button if the submitter hasn't completed the kyc #29430

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
67077a8
added enable wallet state
techievivek Oct 12, 2023
d4a4d7b
added enable wallet state
techievivek Oct 12, 2023
c71eedf
Merge branch 'main' into techievivek_add_waiting_wallet_state
techievivek Oct 16, 2023
56b0a7c
continue testing
techievivek Oct 17, 2023
419c505
Merge remote-tracking branch 'origin/main' into techievivek_add_waiti…
MariaHCD Oct 18, 2023
be8a67d
Merge remote-tracking branch 'origin/main' into techievivek_add_waiti…
MariaHCD Oct 18, 2023
8eb2447
DRY logic and check for silver wallet
MariaHCD Oct 18, 2023
88e4ca4
Use the KYCWall
MariaHCD Oct 18, 2023
02f96fa
Show correct messaging to payer
MariaHCD Oct 18, 2023
a4153eb
Rename translation prop
MariaHCD Oct 18, 2023
9b863ab
Default value for userWallet
MariaHCD Oct 18, 2023
c00f14a
show enable wallet button
techievivek Oct 18, 2023
9eb037b
fix the console error
techievivek Oct 19, 2023
3fdc0df
add everything in fragment
techievivek Oct 19, 2023
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
2 changes: 2 additions & 0 deletions src/languages/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -594,6 +594,8 @@ export default {
duplicateWaypointsErrorMessage: 'Please remove duplicate waypoints',
emptyWaypointsErrorMessage: 'Please enter at least two waypoints',
},
waitingOnEnabledWallet: ({submitterDisplayName}: WaitingOnBankAccountParams) => `Started settling up, payment is held until ${submitterDisplayName} enables their Wallet`,
enableWallet: 'Enable Wallet',
},
notificationPreferencesPage: {
header: 'Notification preferences',
Expand Down
2 changes: 2 additions & 0 deletions src/languages/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -588,6 +588,8 @@ export default {
duplicateWaypointsErrorMessage: 'Por favor elimina los puntos de ruta duplicados',
emptyWaypointsErrorMessage: 'Por favor introduce al menos dos puntos de ruta',
},
waitingOnEnabledWallet: ({submitterDisplayName}: WaitingOnBankAccountParams) => `nicio el pago, pero no se procesará hasta que ${submitterDisplayName} active su Billetera`,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@techievivek this should be Inició or inició, can you submit a PR to update please?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cead22 Added here: #30335

enableWallet: 'Habilitar Billetera',
},
notificationPreferencesPage: {
header: 'Preferencias de avisos',
Expand Down
49 changes: 44 additions & 5 deletions src/pages/home/report/ReportActionItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,10 @@ import themeColors from '../../../styles/themes/default';
import ReportActionItemBasicMessage from './ReportActionItemBasicMessage';
import RenderHTML from '../../../components/RenderHTML';
import ReportAttachmentsContext from './ReportAttachmentsContext';
import ROUTES from '../../../ROUTES';
import Navigation from '../../../libs/Navigation/Navigation';
import KYCWall from '../../../components/KYCWall';
import userWalletPropTypes from '../../EnablePayments/userWalletPropTypes';

const propTypes = {
...windowDimensionsPropTypes,
Expand Down Expand Up @@ -114,6 +118,9 @@ const propTypes = {

/** Flag to show, hide the thread divider line */
shouldHideThreadDividerLine: PropTypes.bool,

/** The user's wallet account */
userWallet: userWalletPropTypes,
};

const defaultProps = {
Expand All @@ -125,6 +132,7 @@ const defaultProps = {
hasOutstandingIOU: false,
iouReport: undefined,
shouldHideThreadDividerLine: false,
userWallet: {},
};

function ReportActionItem(props) {
Expand Down Expand Up @@ -345,20 +353,48 @@ function ReportActionItem(props) {
);
} else if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENTQUEUED) {
const submitterDisplayName = PersonalDetailsUtils.getDisplayNameOrDefault(props.personalDetailsList, [props.report.ownerAccountID, 'displayName'], props.report.ownerEmail);
const shouldShowAddCreditBankAccountButton =
ReportUtils.isCurrentUserSubmitter(props.report.reportID) && !store.hasCreditBankAccount() && !ReportUtils.isSettled(props.report.reportID);
const paymentType = lodashGet(props.action, 'originalMessage.paymentType', '');

const isSubmitterOfUnsettledReport = ReportUtils.isCurrentUserSubmitter(props.report.reportID) && !ReportUtils.isSettled(props.report.reportID);
const shouldShowAddCreditBankAccountButton = isSubmitterOfUnsettledReport && !store.hasCreditBankAccount() && paymentType !== CONST.IOU.PAYMENT_TYPE.EXPENSIFY;
const shouldShowEnableWalletButton =
isSubmitterOfUnsettledReport &&
(_.isEmpty(props.userWallet) || props.userWallet.tierName === CONST.WALLET.TIER_NAME.SILVER) &&
paymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY;

children = (
<ReportActionItemBasicMessage message={props.translate('iou.waitingOnBankAccount', {submitterDisplayName})}>
{shouldShowAddCreditBankAccountButton ? (
<ReportActionItemBasicMessage
message={props.translate(paymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY ? 'iou.waitingOnEnabledWallet' : 'iou.waitingOnBankAccount', {submitterDisplayName})}
>
{shouldShowAddCreditBankAccountButton && (
techievivek marked this conversation as resolved.
Show resolved Hide resolved
<Button
success
style={[styles.w100, styles.requestPreviewBox]}
text={props.translate('bankAccount.addBankAccount')}
onPress={() => BankAccounts.openPersonalBankAccountSetupView(props.report.reportID)}
pressOnEnter
/>
) : null}
)}
{shouldShowEnableWalletButton && (
<KYCWall
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe there may be a console error due to using KYCWall in ReportActionItemBasicMessage. IIRC that was the case when I attempted the same change.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you referring to this error? I think wrapping the button inside a fragment should fix this warning. I will suggest the changes.

Screenshot 2023-10-18 at 6 19 25 PM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Testing it, thanks.

Copy link
Contributor Author

@techievivek techievivek Oct 19, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That worked 🎉, but I am curious to learn how it fixed that error? Because there is just a single element right? KYCWall so why do we need a fragment here?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As ReportActionItemBasicMessage expects only one element, it is necessary to wrap both the "Add Bank" button and the KYCWall with a fragment. Without this fragment, React will treat both elements (the first button and the KYCWall) as an array. It's important to note that even if the { bool && <Component /> } condition evaluates to false, it will still be passed to the parent component as a false value. So, in our case, it's passed as [false, KYCWall]. By wrapping them in a single fragment, it ensures that they are always passed as a single element.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, but by just wrapping the KycWall in a fragment it looks like the error is gone, how does that work? Any idea?

Copy link
Contributor Author

@techievivek techievivek Oct 19, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah no, the user is alreadt on the gold wallet that's why this condition is not being called.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The error is still there. What you explained make sense now. Thanks 👍

onSuccessfulKYC={() => Navigation.navigate(ROUTES.ENABLE_PAYMENTS)}
enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
addBankAccountRoute={ROUTES.BANK_ACCOUNT_PERSONAL}
addDebitCardRoute={ROUTES.SETTINGS_ADD_DEBIT_CARD}
chatReportID={props.report.reportID}
iouReport={props.iouReport}
>
{(triggerKYCFlow, buttonRef) => (
<Button
ref={buttonRef}
success
style={[styles.w100, styles.requestPreviewBox]}
text={props.translate('iou.enableWallet')}
onPress={triggerKYCFlow}
/>
)}
</KYCWall>
)}
techievivek marked this conversation as resolved.
Show resolved Hide resolved
</ReportActionItemBasicMessage>
);
} else if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE) {
Expand Down Expand Up @@ -702,6 +738,9 @@ export default compose(
key: ({action}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${action.reportActionID}`,
initialValue: {},
},
userWallet: {
key: ONYXKEYS.USER_WALLET,
},
}),
)(
memo(
Expand Down
Loading