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

Ameerul / P2PS-4384 Some Payment method is not showing on Sell order modal #394

Merged
merged 2 commits into from
Nov 8, 2024
Merged

Ameerul / P2PS-4384 Some Payment method is not showing on Sell order modal #394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
caffc68
fix: filtered out non available pm cards and mapped out advertisers pms
ameerul-deriv Nov 6, 2024
00e02f4
fix: filter out payment methods that are not assigned to the advert
ameerul-deriv Nov 7, 2024
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
6 changes: 5 additions & 1 deletion src/components/BuySellForm/BuySellForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,10 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
};
});

const filteredAdvertiserPaymentMethods = advertiserPaymentMethods?.filter(method =>
paymentMethodNames?.includes(method.display_name || '')
);

const history = useHistory();
const { isDesktop } = useDevice();
const isBuy = type === BUY_SELL.BUY;
Expand Down Expand Up @@ -343,7 +347,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
<LightDivider />
{isBuy && paymentMethodNames && paymentMethodNames?.length > 0 && (
<BuySellPaymentSection
advertiserPaymentMethods={advertiserPaymentMethods as TPaymentMethod[]}
advertiserPaymentMethods={filteredAdvertiserPaymentMethods as TPaymentMethod[]}
availablePaymentMethods={availablePaymentMethods as TPaymentMethod[]}
isDisabled={shouldDisableField}
onSelectPaymentMethodCard={onSelectPaymentMethodCard}
Expand Down
17 changes: 16 additions & 1 deletion src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ const BuySellPaymentSection = ({
setIsHidden,
}: TBuySellPaymentSectionProps) => {
const { isDesktop } = useDevice();
const sortedList = sortPaymentMethodsWithAvailability(availablePaymentMethods);
const sortedList = sortPaymentMethodsWithAvailability(availablePaymentMethods).filter(p => !p.isAvailable);
const disableAdvertiserPaymentMethods = selectedPaymentMethodIds.length === 3;
Comment on lines +29 to +30
Copy link
Contributor Author

Choose a reason for hiding this comment

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

sorted list will only display the non available payment methods so users can Add that payment method

const { localize } = useTranslations();

const [formState, dispatch] = useReducer(
Expand Down Expand Up @@ -67,6 +68,20 @@ const BuySellPaymentSection = ({
)}
</Text>
<div className='flex gap-[0.8rem] flex-wrap'>
{advertiserPaymentMethods?.map((paymentMethod, index) => {
const isSelected = selectedPaymentMethodIds.includes(Number(paymentMethod.id));

return (
<PaymentMethodCard
isDisabled={isDisabled || (disableAdvertiserPaymentMethods && !isSelected)}
key={index}
medium
onSelectPaymentMethodCard={onSelectPaymentMethodCard}
paymentMethod={paymentMethod}
selectedPaymentMethodIds={selectedPaymentMethodIds}
/>
);
})}
Comment on lines +71 to +84
Copy link
Contributor Author

Choose a reason for hiding this comment

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

to guarantee all payment methods are shown, map over advertiserPaymentMethods since they should be able to select any of their created payment methods

{sortedList?.map((paymentMethod, index) => (
<PaymentMethodCard
isDisabled={isDisabled}
Expand Down
8 changes: 3 additions & 5 deletions src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,12 +61,10 @@ describe('<BuySellPaymentSection />', () => {
render(<BuySellPaymentSection {...mockProps} />);
expect(screen.getByText('Receive payment to')).toBeInTheDocument();
});
it('should render the payment method cards when there are available payment methods', async () => {
render(<BuySellPaymentSection {...mockProps} availablePaymentMethods={[mockAvailablePaymentMethods]} />);
it('should render the payment method cards when there are advertiser payment methods', async () => {
render(<BuySellPaymentSection {...mockProps} advertiserPaymentMethods={[mockAvailablePaymentMethods]} />);
expect(screen.getByText('Receive payment to')).toBeInTheDocument();
expect(
screen.getByText('To place an order, add one of the advertiser’s preferred payment methods:')
).toBeInTheDocument();
expect(screen.getByText('You may choose up to 3.')).toBeInTheDocument();
expect(screen.getByText('Other')).toBeInTheDocument();
const checkbox = screen.getByRole('checkbox');
await userEvent.click(checkbox);
Expand Down
Loading