Skip to content

Commit

Permalink
Revert Ameerul /Bug 68819 Design mismatch (#10174)
Browse files Browse the repository at this point in the history 
* Revert "Ameerul /Bug 68819 Design mismatch in Quick add PM Pop up on existing ads in My ads page (#8112)"

This reverts commit 821b221.

* chore: fixed imports
  • Loading branch information
@ameerul-deriv
ameerul-deriv authored Sep 19, 2023
1 parent 54dfb36 commit 5f0713a
Show file tree
Hide file tree
Showing 12 changed files with 110 additions and 404 deletions.
111 changes: 40 additions & 71 deletions packages/p2p/src/components/modal-manager/modals/quick-add-modal/quick-add-modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { localize, Localize } from 'Components/i18next';
import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
import AddPaymentMethod from 'Pages/my-profile/payment-methods/add-payment-method/add-payment-method.jsx';
import BuyAdPaymentMethodsList from 'Pages/my-ads/buy-ad-payment-methods-list.jsx';
import FilterPaymentMethods from 'Pages/my-ads/filter-payment-methods';
import SellAdPaymentMethodsList from 'Pages/my-ads/sell-ad-payment-methods-list.jsx';
import { buy_sell } from 'Constants/buy-sell';
import { useStores } from 'Stores';
Expand All @@ -29,17 +28,6 @@ const QuickAddModal = ({ advert }) => {
const is_payment_methods_selected =
is_sell_ad_add_payment_methods_selected || is_buy_ad_add_payment_methods_selected;

React.useEffect(() => {
const saved_selected_methods = localStorage.getItem('selected_methods');
if (saved_selected_methods) {
setSelectedMethods(JSON.parse(saved_selected_methods));
localStorage.removeItem('selected_methods');
}
my_profile_store.getPaymentMethodsList();

// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const onClickPaymentMethodCard = payment_method => {
if (!my_ads_store.payment_method_ids.includes(payment_method.id)) {
if (my_ads_store.payment_method_ids.length < 3) {
Expand All @@ -55,12 +43,7 @@ const QuickAddModal = ({ advert }) => {
};

const setShouldCloseAllModals = should_close_all_modals => {
if (my_ads_store.show_filter_payment_methods) {
my_ads_store.setShowFilterPaymentMethods(false);
my_ads_store.setSearchTerm('');
my_ads_store.setSearchedResults([]);
} else if (is_payment_methods_selected) {
localStorage.setItem('selected_methods', JSON.stringify(selected_methods));
if (is_payment_methods_selected) {
showModal({
key: 'CancelAddPaymentMethodModal',
props: {
Expand Down Expand Up @@ -97,58 +80,44 @@ const QuickAddModal = ({ advert }) => {
is_modal_open={is_modal_open}
page_header_text={localize('Add payment method')}
pageHeaderReturnFn={() => setShouldCloseAllModals(false)}
page_footer_className={classNames({
'quick-add-modal__footer': my_ads_store.show_filter_payment_methods,
})}
secondary
text={localize('Cancel')}
renderPageFooterChildren={() =>
!my_ads_store.show_filter_payment_methods && (
<>
<Button
has_effect
large
onClick={setShouldCloseAllModals}
secondary
text={localize('Cancel')}
/>
<Button
className='quick-add-modal--button'
has_effect
is_disabled={
selected_methods.length === 0 || my_ads_store.payment_method_names.length === 0
}
large
onClick={() => my_ads_store.onClickUpdatePaymentMethods(advert?.id, is_buy_advert)}
primary
text={localize('Add')}
/>
</>
)
}
>
{my_ads_store.show_filter_payment_methods ? (
<FilterPaymentMethods
selected_methods={selected_methods}
setSelectedMethods={setSelectedMethods}
/>
) : (
renderPageFooterChildren={() => (
<>
<div className='quick-add-modal__info'>
<Text color='prominent' size='xxs'>
<Localize i18n_default_text='You may choose up to 3 payment methods for this ad.' />
</Text>
</div>
<BuyAdPaymentMethodsList
is_alignment_top={false}
list_portal_id='popup_root'
should_show_hint
selected_methods={selected_methods}
setSelectedMethods={setSelectedMethods}
should_clear_payment_method_selections={!is_payment_methods_selected}
<Button
has_effect
large
onClick={setShouldCloseAllModals}
secondary
text={localize('Cancel')}
/>
<Button
className='quick-add-modal--button'
has_effect
is_disabled={
selected_methods.length === 0 || my_ads_store.payment_method_names.length === 0
}
large
onClick={() => my_ads_store.onClickUpdatePaymentMethods(advert?.id, is_buy_advert)}
primary
text={localize('Add')}
/>
</>
)}
>
<div className='quick-add-modal--info'>
<Text color='prominent' size='xxs'>
<Localize i18n_default_text='You may choose up to 3 payment methods for this ad.' />
</Text>
</div>
<BuyAdPaymentMethodsList
is_alignment_top={false}
list_portal_id='popup_root'
should_show_hint
selected_methods={selected_methods}
setSelectedMethods={setSelectedMethods}
should_clear_payment_method_selections={!is_payment_methods_selected}
/>
</MobileFullPageModal>
);
}
Expand All @@ -160,9 +129,6 @@ const QuickAddModal = ({ advert }) => {
is_flex
is_modal_open={is_modal_open}
page_header_text={localize('Add payment method')}
page_footer_className={classNames({
'quick-add-modal__footer': my_ads_store.should_show_add_payment_method,
})}
pageHeaderReturnFn={() => setShouldCloseAllModals(false)}
secondary
text={localize('Cancel')}
Expand Down Expand Up @@ -196,7 +162,7 @@ const QuickAddModal = ({ advert }) => {
) : (
<>
<Text color='prominent' size='xxs'>
<Localize i18n_default_text='You may add up to 3 payment methods.' />
<Localize i18n_default_text='You may choose up to 3 payment methods for this ad.' />
</Text>
<SellAdPaymentMethodsList
onClickPaymentMethodCard={onClickPaymentMethodCard}
Expand All @@ -217,7 +183,7 @@ const QuickAddModal = ({ advert }) => {
has_close_icon
height='452px'
is_open={is_modal_open}
title={localize('Add payment methods')}
title={localize('Add payment method')}
toggleModal={() => setShouldCloseAllModals(true)}
>
<Modal.Body>
Expand All @@ -243,6 +209,7 @@ const QuickAddModal = ({ advert }) => {
secondary
text={localize('Cancel')}
/>

<Button
has_effect
is_disabled={selected_methods.length === 0 || my_ads_store.payment_method_names.length === 0}
Expand Down Expand Up @@ -294,21 +261,23 @@ const QuickAddModal = ({ advert }) => {
) : (
<>
<Text color='prominent' size='xs'>
<Localize i18n_default_text='You may add up to 3 payment methods.' />
<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)}
p2p_advertiser_payment_methods={p2p_advertiser_payment_methods}
selected_methods={selected_methods}
/>
</>
)}
</Modal.Body>
{!my_ads_store.should_show_add_payment_method && (
<Modal.Footer has_separator>
<Button has_effect large onClick={setShouldCloseAllModals} secondary text={localize('Cancel')} />

<Button
has_effect
is_disabled={selected_methods.length === 0 || my_ads_store.payment_method_ids.length === 0}
Expand Down
8 changes: 2 additions & 6 deletions packages/p2p/src/components/modal-manager/modals/quick-add-modal/quick-add-modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,8 @@
margin-bottom: 1.3rem;
}

&__footer {
display: none;
}

&__icon {
margin-right: 0.8rem;
&--text {
display: flex;
}

&__scroll {
Expand Down
9 changes: 0 additions & 9 deletions .../p2p/src/components/my-profile/payment-methods/add-payment-method/add-payment-method.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,6 @@
margin-top: auto;
padding: 1.6rem 2.4rem;

@include mobile {
margin: -1.5rem;
}

&-profile {
padding: 0 2.4rem 2rem;
margin-bottom: 4rem;
Expand All @@ -65,11 +61,6 @@
&__form-wrapper {
padding: 1.4rem 2.4rem;

@include mobile {
display: table;
height: 100%;
}

.dc-input {
margin-bottom: 4rem;
}
Expand Down
Loading

1 comment on commit 5f0713a

@vercel
Copy link

@vercel vercel bot commented on 5f0713a Sep 19, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

deriv-app – ./

deriv-app.vercel.app
binary.sx
deriv-app-git-master.binary.sx
deriv-app.binary.sx

Please sign in to comment.