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

feat: 3rd party payment dispute reason added #8464

Merged
merged 15 commits into from
Sep 14, 2023
Merged

feat: 3rd party payment dispute reason added #8464

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
34a4c3b
feat: 3rd party payment dispute reason added
nada-deriv May 4, 2023
a0b75cf
fix: replace map with condition to use filter
nada-deriv May 5, 2023
15c265e
fix: removed condition duplication
nada-deriv May 8, 2023
faa2883
Merge branch 'master' into nada/P2PS-216/dispute-reason
nada-deriv Jul 10, 2023
44294c3
Merge branch 'master' into nada/P2PS-216/dispute-reason
nada-deriv Jul 18, 2023
7ec7ffb
feat: added test case for new radio button
nada-deriv Jul 19, 2023
88fb14d
Merge branch 'master' into nada/P2PS-216/dispute-reason
nada-deriv Jul 20, 2023
d3aea73
Merge branch 'master' into nada/P2PS-216/dispute-reason
nada-deriv Jul 20, 2023
465c7fc
Merge branch 'master' into nada/P2PS-216/dispute-reason
nada-deriv Jul 24, 2023
d8302ab
Merge branch 'master' into nada/P2PS-216/dispute-reason
nada-deriv Jul 24, 2023
42e4bb8
Merge branch 'master' into nada/P2PS-216/dispute-reason
nada-deriv Jul 25, 2023
9865503
feat: updated with latest master
nada-deriv Jul 31, 2023
708b35a
feat: merged with latest master
nada-deriv Aug 15, 2023
3968601
fix: pr review comment
nada-deriv Aug 16, 2023
dffc60b
fix: updated test
nada-deriv Aug 16, 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
82 changes: 47 additions & 35 deletions packages/components/src/components/radio-group/radio-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@ import React, { ChangeEvent } from 'react';
import classNames from 'classnames';
import Text from '../text';

type TItem = React.HTMLAttributes<HTMLDivElement> & { id?: string; value: string; label: string; disabled: boolean };
type TItem = React.HTMLAttributes<HTMLDivElement> & {
id?: string;
value: string;
label: string;
disabled: boolean;
hidden?: boolean;
};
type TItemWrapper = {
should_wrap_items?: boolean;
};
Expand Down Expand Up @@ -45,46 +51,52 @@ const RadioGroup = ({
return (
<div className={classNames('dc-radio-group', className)}>
{Array.isArray(children) &&
children.map(item => (
<ItemWrapper key={item.props.value} should_wrap_items={should_wrap_items}>
<label
className={classNames('dc-radio-group__item', className, {
'dc-radio-group__item--selected': selected_option === item.props.value,
})}
>
<input
id={item.props.id}
name={name}
className='dc-radio-group__input'
type='radio'
value={item.props.value}
checked={selected_option === item.props.value}
onChange={onChange}
disabled={item.props.disabled}
required={required}
/>
<span
className={classNames('dc-radio-group__circle', {
'dc-radio-group__circle--selected': selected_option === item.props.value,
'dc-radio-group__circle--disabled': item.props.disabled,
})}
/>
<Text
size='xs'
className={classNames('dc-radio-group__label', {
'dc-radio-group__label--disabled': item.props.disabled,
children
.filter(item => !item.props.hidden)
.map(item => (
<ItemWrapper key={item.props.value} should_wrap_items={should_wrap_items}>
<label
className={classNames('dc-radio-group__item', className, {
'dc-radio-group__item--selected': selected_option === item.props.value,
})}
>
{item.props.label}
</Text>
</label>
</ItemWrapper>
))}
<input
id={item.props.id}
name={name}
className='dc-radio-group__input'
type='radio'
value={item.props.value}
checked={selected_option === item.props.value}
onChange={onChange}
disabled={item.props.disabled}
required={required}
/>
<span
className={classNames('dc-radio-group__circle', {
'dc-radio-group__circle--selected': selected_option === item.props.value,
'dc-radio-group__circle--disabled': item.props.disabled,
})}
/>
<Text
size='xs'
className={classNames('dc-radio-group__label', {
'dc-radio-group__label--disabled': item.props.disabled,
})}
>
{item.props.label}
</Text>
</label>
</ItemWrapper>
))}
</div>
);
};

const Item = ({ children, ...props }: React.PropsWithChildren<TItem>) => <div {...props}>{children}</div>;
const Item = ({ children, hidden = false, ...props }: React.PropsWithChildren<TItem>) => (
<div hidden={hidden} {...props}>
{children}
</div>
);

RadioGroup.Item = Item;

Expand Down
18 changes: 13 additions & 5 deletions ...etails-complain-modal-radio-group.spec.js → ...etails-complain-modal-radio-group.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,30 @@ import { fireEvent, render, screen } from '@testing-library/react';
import OrderDetailsComplainModalRadioGroup from '../order-details-complain-modal-radio-group.jsx';

describe('<OrderDetailsComplainModalRadioGroup/>', () => {
it('should render component with 3 radio buttons', () => {
it('should render component with 4 radio buttons for sell order', () => {
render(<OrderDetailsComplainModalRadioGroup />);

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(<OrderDetailsComplainModalRadioGroup onCheckboxChange={mockFn} />);
fireEvent.click(screen.getAllByRole('radio')[1]);

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(<OrderDetailsComplainModalRadioGroup />);

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(<OrderDetailsComplainModalRadioGroup is_buy_order_for_user />);

expect(
Expand All @@ -34,4 +35,11 @@ describe('<OrderDetailsComplainModalRadioGroup/>', () => {
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(<OrderDetailsComplainModalRadioGroup onCheckboxChange={mockFn} />);
fireEvent.click(screen.getAllByRole('radio')[3]);

expect(mockFn).toHaveBeenCalledWith('buyer_third_party_payment_method');
});
});
5 changes: 5 additions & 0 deletions packages/p2p/src/components/order-details/order-details-complain-modal-radio-group.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,11 @@ const OrderDetailsComplainModalRadioGroup = ({ dispute_reason, onCheckboxChange,
: localize('I’ve received more than the agreed amount.')
}
/>
<RadioGroup.Item
value='buyer_third_party_payment_method'
label={localize('I’ve received payment from 3rd party.')}
hidden={is_buy_order_for_user}
/>
</RadioGroup>
);

Expand Down