From e6fc72e4fa26e7ec20f77a5075c4ae3919971e3b Mon Sep 17 00:00:00 2001 From: nada-deriv <122768621+nada-deriv@users.noreply.github.com> Date: Thu, 14 Sep 2023 10:47:03 +0400 Subject: [PATCH 001/100] feat: 3rd party payment dispute reason added (#8464) * feat: 3rd party payment dispute reason added * fix: replace map with condition to use filter * fix: removed condition duplication * feat: added test case for new radio button * fix: pr review comment * fix: updated test --- .../components/radio-group/radio-group.tsx | 82 +++++++++++-------- ...details-complain-modal-radio-group.spec.js | 18 ++-- ...der-details-complain-modal-radio-group.jsx | 5 ++ 3 files changed, 65 insertions(+), 40 deletions(-) rename packages/p2p/src/components/order-details/{__test__ => __tests__}/order-details-complain-modal-radio-group.spec.js (62%) diff --git a/packages/components/src/components/radio-group/radio-group.tsx b/packages/components/src/components/radio-group/radio-group.tsx index 2c5a312e88b8..04fc50b993cf 100644 --- a/packages/components/src/components/radio-group/radio-group.tsx +++ b/packages/components/src/components/radio-group/radio-group.tsx @@ -2,7 +2,13 @@ import React, { ChangeEvent } from 'react'; import classNames from 'classnames'; import Text from '../text'; -type TItem = React.HTMLAttributes & { id?: string; value: string; label: string; disabled: boolean }; +type TItem = React.HTMLAttributes & { + id?: string; + value: string; + label: string; + disabled: boolean; + hidden?: boolean; +}; type TItemWrapper = { should_wrap_items?: boolean; }; @@ -45,46 +51,52 @@ const RadioGroup = ({ return (
{Array.isArray(children) && - children.map(item => ( - - - - ))} + + + + {item.props.label} + + + + ))}
); }; -const Item = ({ children, ...props }: React.PropsWithChildren) =>
{children}
; +const Item = ({ children, hidden = false, ...props }: React.PropsWithChildren) => ( + +); RadioGroup.Item = Item; diff --git a/packages/p2p/src/components/order-details/__test__/order-details-complain-modal-radio-group.spec.js b/packages/p2p/src/components/order-details/__tests__/order-details-complain-modal-radio-group.spec.js similarity index 62% rename from packages/p2p/src/components/order-details/__test__/order-details-complain-modal-radio-group.spec.js rename to packages/p2p/src/components/order-details/__tests__/order-details-complain-modal-radio-group.spec.js index 66bf874ddb2b..aa6ed9d79f8b 100644 --- a/packages/p2p/src/components/order-details/__test__/order-details-complain-modal-radio-group.spec.js +++ b/packages/p2p/src/components/order-details/__tests__/order-details-complain-modal-radio-group.spec.js @@ -3,13 +3,13 @@ import { fireEvent, render, screen } from '@testing-library/react'; import OrderDetailsComplainModalRadioGroup from '../order-details-complain-modal-radio-group.jsx'; describe('', () => { - it('should render component with 3 radio buttons', () => { + it('should render component with 4 radio buttons for sell order', () => { render(); - expect(screen.getAllByRole('radio').length).toBe(3); + expect(screen.getAllByRole('radio')).toHaveLength(4); }); - it('should select the checkbox when a radio button is selected', () => { + it('should call handler function when checkbox is selected', () => { const mockFn = jest.fn(); render(); fireEvent.click(screen.getAllByRole('radio')[1]); @@ -17,15 +17,16 @@ describe('', () => { expect(mockFn).toHaveBeenCalledWith('buyer_underpaid'); }); - it('should select the checkbox when a radio button is selected', () => { + it('should render all of the 4 options for sell order', () => { render(); expect(screen.getByLabelText('I’ve not received any payment.')).toBeInTheDocument(); expect(screen.getByLabelText('I’ve received less than the agreed amount.')).toBeInTheDocument(); expect(screen.getByLabelText('I’ve received more than the agreed amount.')).toBeInTheDocument(); + expect(screen.getByText('I’ve received payment from 3rd party.')).toBeInTheDocument(); }); - it('should select the checkbox when a radio button is selected', () => { + it('should render all of the 3 options for buy order', () => { render(); expect( @@ -34,4 +35,11 @@ describe('', () => { expect(screen.getByLabelText('I wasn’t able to make full payment.')).toBeInTheDocument(); expect(screen.getByLabelText('I’ve paid more than the agreed amount.')).toBeInTheDocument(); }); + it('should call handler function with buyer_third_party_payment_method when i have received payment is selected for sell order', () => { + const mockFn = jest.fn(); + render(); + fireEvent.click(screen.getAllByRole('radio')[3]); + + expect(mockFn).toHaveBeenCalledWith('buyer_third_party_payment_method'); + }); }); diff --git a/packages/p2p/src/components/order-details/order-details-complain-modal-radio-group.jsx b/packages/p2p/src/components/order-details/order-details-complain-modal-radio-group.jsx index 16bc8fc586cf..41ca978e4e54 100644 --- a/packages/p2p/src/components/order-details/order-details-complain-modal-radio-group.jsx +++ b/packages/p2p/src/components/order-details/order-details-complain-modal-radio-group.jsx @@ -38,6 +38,11 @@ const OrderDetailsComplainModalRadioGroup = ({ dispute_reason, onCheckboxChange, : localize('I’ve received more than the agreed amount.') } /> +