-
Notifications
You must be signed in to change notification settings - Fork 300
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.
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
Adrienne / Changed layout for PM cards list in Ads page #5284
Changes from 22 commits
2a88134
ba9e595
f35115c
6ac5ca2
1482240
4e2c62f
c08a1af
53ffd88
5c7b025
ace4852
e6fea1f
c10f4f9
4ba090e
944afc8
a3c1aaa
f584874
398299a
a90aa29
bc75184
930e08c
fedad81
84db6b0
f1f6807
7553421
a8429b2
002a51d
ed5f91e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -199,6 +199,14 @@ | |
flex-direction: column; | ||
padding: 1rem 1.6rem 0; | ||
width: 100vw; | ||
|
||
&--scroll { | ||
overflow: auto; | ||
} | ||
|
||
&--horizontal { | ||
padding-right: 0rem; | ||
} | ||
} | ||
|
||
&__table { | ||
|
@@ -628,11 +636,6 @@ | |
} | ||
} | ||
|
||
&__modal-body--scroll { | ||
overflow: auto; | ||
margin-bottom: 7.5rem; | ||
} | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
.toggle-ads { | ||
align-items: center; | ||
display: flex; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,14 @@ | ||
import classNames from 'classnames'; | ||
import * as React from 'react'; | ||
import { Formik, Field } from 'formik'; | ||
import { | ||
Autocomplete, | ||
Button, | ||
Icon, | ||
Input, | ||
MobileFullPageModal, | ||
Modal, | ||
Text, | ||
ThemedScrollbars, | ||
} from '@deriv/components'; | ||
import { Autocomplete, Button, Icon, Input, MobileFullPageModal, Modal, Text } from '@deriv/components'; | ||
import { isMobile } from '@deriv/shared'; | ||
import { observer } from 'mobx-react-lite'; | ||
import { localize, Localize } from 'Components/i18next'; | ||
import { buy_sell } from 'Constants/buy-sell'; | ||
import { useStores } from 'Stores'; | ||
import PaymentMethodCard from '../my-profile/payment-methods/payment-method-card'; | ||
import AddPaymentMethod from '../my-profile/payment-methods/add-payment-method/add-payment-method.jsx'; | ||
import SellAdPaymentMethodsList from './sell-ad-payment-methods-list'; | ||
import './quick-add-modal.scss'; | ||
|
||
const QuickAddModal = ({ advert }) => { | ||
|
@@ -29,11 +20,6 @@ const QuickAddModal = ({ advert }) => { | |
|
||
const is_buy_advert = type === buy_sell.BUY; | ||
|
||
const style = { | ||
borderColor: 'var(--brand-secondary)', | ||
borderWidth: '2px', | ||
}; | ||
|
||
const onClickDeletePaymentMethodItem = value => { | ||
if (value) { | ||
my_ads_store.payment_method_names = my_ads_store.payment_method_names.filter( | ||
|
@@ -283,22 +269,9 @@ const QuickAddModal = ({ advert }) => { | |
<Text color='prominent' size='xxs'> | ||
<Localize i18n_default_text='You may choose up to 3 payment methods for this ad.' /> | ||
</Text> | ||
{my_profile_store.advertiser_payment_methods_list.map((payment_method, key) => ( | ||
<div key={key}> | ||
<PaymentMethodCard | ||
is_vertical_ellipsis_visible={false} | ||
key={key} | ||
small | ||
onClick={() => onClickPaymentMethodCard(payment_method)} | ||
payment_method={payment_method} | ||
style={selected_methods.includes(payment_method.ID) ? style : {}} | ||
/> | ||
</div> | ||
))} | ||
<PaymentMethodCard | ||
is_add={true} | ||
label={localize('Payment method')} | ||
small | ||
<SellAdPaymentMethodsList | ||
onClickPaymentMethodCard={onClickPaymentMethodCard} | ||
selected_methods={selected_methods} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
onClickAdd={() => my_ads_store.setShouldShowAddPaymentMethod(true)} | ||
/> | ||
</> | ||
|
@@ -457,9 +430,10 @@ const QuickAddModal = ({ advert }) => { | |
<Modal | ||
className='p2p-my-ads__modal-error' | ||
has_close_icon={false} | ||
height='660px' | ||
height={my_ads_store.should_show_add_payment_method ? '660px' : 'auto'} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
is_open={my_ads_store.is_quick_add_modal_open} | ||
title={localize('Add payment method')} | ||
title={localize('Add payment methods')} | ||
width='440px' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should we be using px here? why not use rem instead |
||
> | ||
{my_ads_store.should_show_add_payment_method ? ( | ||
<Modal.Body | ||
|
@@ -470,29 +444,18 @@ const QuickAddModal = ({ advert }) => { | |
<AddPaymentMethod should_show_page_return={false} should_show_separated_footer={true} /> | ||
</Modal.Body> | ||
) : ( | ||
<ThemedScrollbars height='calc(100% - 5.8rem - 7.4rem)'> | ||
<Modal.Body> | ||
<Text color='prominent' size='xxs'> | ||
<Localize i18n_default_text='You may choose up to 3 payment methods for this ad.' /> | ||
</Text> | ||
{my_profile_store.advertiser_payment_methods_list.map((payment_method, key) => ( | ||
<PaymentMethodCard | ||
is_vertical_ellipsis_visible={false} | ||
key={key} | ||
medium | ||
onClick={() => onClickPaymentMethodCard(payment_method)} | ||
payment_method={payment_method} | ||
style={selected_methods.includes(payment_method.ID) ? style : {}} | ||
/> | ||
))} | ||
<PaymentMethodCard | ||
is_add={true} | ||
label={localize('Payment method')} | ||
medium | ||
onClickAdd={() => my_ads_store.setShouldShowAddPaymentMethod(true)} | ||
/> | ||
</Modal.Body> | ||
</ThemedScrollbars> | ||
<Modal.Body className='p2p-my-ads__modal-body--horizontal'> | ||
<Text color='prominent' size='xs'> | ||
<Localize i18n_default_text='You may choose up to 3 payment methods for this ad.' /> | ||
</Text> | ||
<SellAdPaymentMethodsList | ||
is_only_horizontal | ||
is_scrollable | ||
onClickPaymentMethodCard={onClickPaymentMethodCard} | ||
selected_methods={selected_methods} | ||
onClickAdd={() => my_ads_store.setShouldShowAddPaymentMethod(true)} | ||
/> | ||
</Modal.Body> | ||
)} | ||
{!my_ads_store.should_show_add_payment_method && ( | ||
<Modal.Footer has_separator> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
import React from 'react'; | ||
import { useStores } from 'Stores'; | ||
import { ThemedScrollbars } from '@deriv/components'; | ||
import { isMobile } from '@deriv/shared'; | ||
import { observer } from 'mobx-react-lite'; | ||
import { localize } from 'Components/i18next'; | ||
import PropTypes from 'prop-types'; | ||
import classNames from 'classnames'; | ||
import PaymentMethodCard from '../my-profile/payment-methods/payment-method-card'; | ||
import './sell-ad-payment-methods-list.scss'; | ||
|
||
const SellAdPaymentMethodsList = ({ | ||
is_only_horizontal = isMobile(), | ||
is_scrollable = isMobile(), | ||
onClickAdd, | ||
onClickPaymentMethodCard, | ||
selected_methods, | ||
}) => { | ||
const { my_profile_store } = useStores(); | ||
|
||
const style = { | ||
borderColor: 'var(--brand-secondary)', | ||
borderWidth: '2px', | ||
}; | ||
|
||
// payment method order: Bank Transfer -> EWallets -> Others | ||
const payment_method_order = { bank_transfer: 0, other: 2 }; | ||
const getPaymentMethodOrder = method => (!(method in payment_method_order) ? 1 : payment_method_order[method]); | ||
const sortPaymentMethods = payment_methods_list => { | ||
return payment_methods_list.sort((i, j) => getPaymentMethodOrder(i.method) - getPaymentMethodOrder(j.method)); | ||
}; | ||
|
||
return ( | ||
<ThemedScrollbars | ||
className={classNames('sell-ad-payment-methods__container', { | ||
'sell-ad-payment-methods__container--horizontal': is_only_horizontal, | ||
})} | ||
is_scrollbar_hidden | ||
is_scrollable={is_scrollable} | ||
is_only_horizontal={is_only_horizontal} | ||
> | ||
{sortPaymentMethods([...my_profile_store.advertiser_payment_methods_list]).map((payment_method, key) => ( | ||
<PaymentMethodCard | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
is_vertical_ellipsis_visible={false} | ||
key={key} | ||
medium | ||
onClick={() => onClickPaymentMethodCard(payment_method)} | ||
payment_method={payment_method} | ||
style={selected_methods.includes(payment_method.ID) ? style : {}} | ||
/> | ||
))} | ||
<PaymentMethodCard is_add label={localize('Payment method')} medium onClickAdd={onClickAdd} /> | ||
</ThemedScrollbars> | ||
); | ||
}; | ||
|
||
SellAdPaymentMethodsList.propTypes = { | ||
is_only_horizontal: PropTypes.bool, | ||
is_scrollable: PropTypes.bool, | ||
onClickAdd: PropTypes.func, | ||
onClickPaymentMethodCard: PropTypes.func, | ||
selected_methods: PropTypes.array, | ||
}; | ||
|
||
export default observer(SellAdPaymentMethodsList); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
.sell-ad-payment-methods { | ||
&__container { | ||
display: grid; | ||
grid-template-columns: repeat(4, 0.19fr); | ||
|
||
&--horizontal { | ||
grid-auto-flow: column; | ||
& .payment-method-card { | ||
margin: 1rem 1.5rem 1rem auto; | ||
} | ||
|
||
& .payment-method-card--add { | ||
margin: 1rem 1.5rem 1rem 0; | ||
} | ||
} | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Removed
margin-bottom: 7.5rem
as it is a bug added in previous PR which will be fixed in card Task #64742