Skip to content

Ameerul /Bug 68819 Design mismatch in Quick add PM Pop up on existing ads in My ads page #8112

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

Merged
merged 16 commits into from
Sep 18, 2023
Merged

Ameerul /Bug 68819 Design mismatch in Quick add PM Pop up on existing ads in My ads page #8112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
588102d
chore: fixed design changes for quick add modal
ameerul-deriv Apr 3, 2023
e39c0d8
chore: added TODO
ameerul-deriv Apr 3, 2023
04344aa
chore: fixed logic issue for dropdown
ameerul-deriv Apr 3, 2023
94e0d48
chore: fixed logic issues for input
ameerul-deriv Apr 3, 2023
300e335
Merge branch 'master' into bug-68819-design-mismatch-quick-add-issues
ameerul-deriv May 11, 2023
59232ab
Merge branch 'master' into bug-68819-design-mismatch-quick-add-issues
ameerul-deriv Jul 11, 2023
137b5dd
chore: fixed conflicts
ameerul-deriv Jul 13, 2023
c6c3db8
chore: fixed merge conflicts
ameerul-deriv Jul 13, 2023
ebfe138
chore: renamed add payment method with plural methods
ameerul-deriv Jul 13, 2023
9a01203
chore: reordered imports
ameerul-deriv Jul 13, 2023
af1e35e
Merge branch 'master' of github.com:binary-com/deriv-app into bug-688…
ameerul-deriv Jul 20, 2023
1281b2f
chore: fixed console error and logic for searching payment methods
ameerul-deriv Jul 20, 2023
e1b8e4e
chore: replaced observer imports
ameerul-deriv Jul 20, 2023
7547385
Merge branch 'master' into bug-68819-design-mismatch-quick-add-issues
ameerul-deriv Jul 20, 2023
5d0ec6a
fix: fixed conflicts with master
ameerul-deriv Sep 14, 2023
3ecb304
Merge branch 'bug-68819-design-mismatch-quick-add-issues' of github.c…
ameerul-deriv Sep 14, 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
123 changes: 77 additions & 46 deletions packages/p2p/src/components/modal-manager/modals/quick-add-modal/quick-add-modal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import React from 'react';
import classNames from 'classnames';
import * as React from 'react';
import { Button, Icon, MobileFullPageModal, Modal, Text } from '@deriv/components';
import { useP2PAdvertiserPaymentMethods } from '@deriv/hooks';
import { isMobile } from '@deriv/shared';
import { observer } from 'mobx-react-lite';
import { observer } from '@deriv/stores';
import { localize, Localize } from 'Components/i18next';
import { buy_sell } from 'Constants/buy-sell';
import { useStores } from 'Stores';
import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
import AddPaymentMethod from 'Components/my-profile/payment-methods/add-payment-method/add-payment-method.jsx';
import SellAdPaymentMethodsList from 'Components/my-ads/sell-ad-payment-methods-list.jsx';
import BuyAdPaymentMethodsList from 'Components/my-ads/buy-ad-payment-methods-list.jsx';
import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
import FilterPaymentMethods from 'Components/my-ads/filter-payment-methods';
import SellAdPaymentMethodsList from 'Components/my-ads/sell-ad-payment-methods-list.jsx';
import { buy_sell } from 'Constants/buy-sell';
import { useStores } from 'Stores';

const QuickAddModal = ({ advert }) => {
const { is_modal_open, showModal, useSavedState } = useModalManagerContext();
Expand All @@ -28,6 +29,17 @@ 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 @@ -43,7 +55,12 @@ const QuickAddModal = ({ advert }) => {
};

const setShouldCloseAllModals = should_close_all_modals => {
if (is_payment_methods_selected) {
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));
showModal({
key: 'CancelAddPaymentMethodModal',
props: {
Expand Down Expand Up @@ -80,44 +97,58 @@ 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={() => (
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}
/>
) : (
<>
<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}
/>
</>
)}
>
<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 @@ -129,6 +160,9 @@ 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 @@ -162,7 +196,7 @@ const QuickAddModal = ({ advert }) => {
) : (
<>
<Text color='prominent' size='xxs'>
<Localize i18n_default_text='You may choose up to 3 payment methods for this ad.' />
<Localize i18n_default_text='You may add up to 3 payment methods.' />
</Text>
<SellAdPaymentMethodsList
onClickPaymentMethodCard={onClickPaymentMethodCard}
Expand All @@ -183,7 +217,7 @@ const QuickAddModal = ({ advert }) => {
has_close_icon
height='452px'
is_open={is_modal_open}
title={localize('Add payment method')}
title={localize('Add payment methods')}
toggleModal={() => setShouldCloseAllModals(true)}
>
<Modal.Body>
Expand All @@ -209,7 +243,6 @@ 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 @@ -261,23 +294,21 @@ const QuickAddModal = ({ advert }) => {
) : (
<>
<Text color='prominent' size='xs'>
<Localize i18n_default_text='You may choose up to 3 payment methods for this ad.' />
<Localize i18n_default_text='You may add up to 3 payment methods.' />
</Text>
<SellAdPaymentMethodsList
is_only_horizontal
is_scrollable
onClickPaymentMethodCard={onClickPaymentMethodCard}
onClickAdd={() => my_ads_store.setShouldShowAddPaymentMethod(true)}
p2p_advertiser_payment_methods={p2p_advertiser_payment_methods}
selected_methods={selected_methods}
onClickAdd={() => my_ads_store.setShouldShowAddPaymentMethod(true)}
/>
</>
)}
</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
4 changes: 4 additions & 0 deletions packages/p2p/src/components/modal-manager/modals/quick-add-modal/quick-add-modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@
}
}

&--footer {
display: none;
}

&--text {
display: flex;
}
Expand Down
Loading