Adrienne / Changed layout for PM cards list in Ads page #5284

adrienne-deriv · 2022-04-20T06:47:30Z

Changes:

Please include a summary of the change and which issue is fixed below:

New component for Ads Payment Methods list to refactor repeated components in Create/Edit Ads form component
Payment Method cards in desktop layout is now displayed as a grid as per design requirements
Payment Method cards in mobile layout is now displayed as scrollable horizontal layout as per design requirements

When you need to add unit test

If this change disrupt current flow
If this change is adding new flow

When you need to add integration test

If components from external libraries are being used to define the flow, e.g. @deriv/components
If it relies on a very specific set of props with no default behavior for the current component.

Test coverage checklist (for reviewer)

Ensure utility / function has a test case
Ensure all the tests are passing

Type of change

…ards layout in Add PM method Ads page is now grid layout

vercel · 2022-04-20T06:47:35Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
deriv-app	✅ Ready (Inspect)	Visit Preview	Jun 30, 2022 at 4:43AM (UTC)

…eriv/deriv-app into bug-57367-alignment-issues-PM

github-actions · 2022-04-21T09:43:17Z

A production App ID was automatically generated for this PR. (log)

PR: Adrienne / Changed layout for PM cards list in Ads page #5284
URLs:
- w/ App ID + Server: https://deriv-app-git-fork-adrienne-deriv-bug-57367-alignment-issues-pm.binary.sx?qa_server=frontend.binaryws.com&app_id=31229
- Original: https://deriv-app-git-fork-adrienne-deriv-bug-57367-alignment-issues-pm.binary.sx
App ID: 31229

Click here to copy & paste above information.

- **PR**: [https://github.com/binary-com/deriv-app/pull/5284](https://github.com/binary-com/deriv-app/pull/5284)
- **URLs**:
    - **w/ App ID + Server**: https://deriv-app-git-fork-adrienne-deriv-bug-57367-alignment-issues-pm.binary.sx?qa_server=frontend.binaryws.com&app_id=31229
    - **Original**: https://deriv-app-git-fork-adrienne-deriv-bug-57367-alignment-issues-pm.binary.sx
- **App ID**: `31229`

Unstage eslint formatted file `icons.js`

carolsachdeva · 2022-04-22T05:19:39Z

packages/p2p/src/components/my-ads/create-ad-form-payment-methods.jsx

@@ -42,6 +38,7 @@ const CreateAdFormPaymentMethods = ({ is_sell_advert, onSelectPaymentMethods })
        }
    };

+    // eslint-disable-next-line no-unused-vars


Why is this added here?

Eslint was commenting on it previously being unused while its being used as a prop in the new component (edit: just ran npm test and now its passed, will remove the comment asap)

packages/p2p/src/components/my-ads/ad-form-payment-methods-list.jsx

adrienne-deriv · 2022-06-08T06:12:52Z

packages/p2p/src/components/my-ads/my-ads.scss

+
+        &--scroll {
+            overflow: auto;
+        }


Removed margin-bottom: 7.5rem as it is a bug added in previous PR which will be fixed in card Task #64742

adrienne-deriv · 2022-06-08T06:21:32Z

.../p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx

@@ -19,6 +19,11 @@ const PaymentMethodsList = () => {

    const independent_categories = ['bank_transfer', 'other'];

+    const sortPaymentMethodsListMethods = payment_methods_list_methods => {
+        const order = ['bank_transfer', 'e_wallet', 'other'];
+        return payment_methods_list_methods.sort((i, j) => order.indexOf(i.method) - order.indexOf(j.method));


Sorted payment method categories as per requirements order (Bank Transfer -> EWallets -> Others):

ameerul-deriv · 2022-06-08T07:13:10Z

packages/p2p/src/components/my-ads/quick-add-modal.jsx

            is_open={my_ads_store.is_quick_add_modal_open}
-            title={localize('Add payment method')}
+            title={localize('Add payment methods')}
+            width='440px'


Should we be using px here? why not use rem instead

…ad modal

adrienne-deriv · 2022-06-13T04:51:25Z

packages/p2p/src/components/buy-sell/buy-sell-form.jsx

-                                            })}
+                                                    );
+                                                })
+                                                .sort(payment_method_card_node =>


Added sorting to sort cards that has is_add to true to be rendered at the end of the list

adrienne-deriv · 2022-06-13T04:53:30Z

packages/p2p/src/components/buy-sell/buy-sell-form.jsx

-                                                    );
-                                                return matching_payment_methods.length > 0 ? (
-                                                    matching_payment_methods.map(payment_method => (
+                                            {payment_method_names


Prettier formatted line 226 to line 260, only added sort() method after map() at the end

ameerul-deriv

LGTM

sonarcloud · 2022-06-30T04:38:27Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
2.3% Duplication

adrienne-deriv added 2 commits April 20, 2022 14:01

PM cards in mobile layout is now horizontal according to design, PM c…

2a88134

…ards layout in Add PM method Ads page is now grid layout

eslint formatted

ba9e595

adrienne-deriv requested review from carolsachdeva and nijil-deriv as code owners April 20, 2022 06:47

boring-cyborg bot added the P2P label Apr 20, 2022

vercel bot deployed to Preview April 20, 2022 06:55 View deployment

adrienne-deriv and others added 4 commits April 21, 2022 17:33

Refactored changes to a new component

f35115c

Merge branch 'binary-com:master' into bug-57367-alignment-issues-PM

6ac5ca2

eslint formatted

1482240

Merge branch 'bug-57367-alignment-issues-PM' of github.com:adrienne-d…

4e2c62f

…eriv/deriv-app into bug-57367-alignment-issues-PM

adrienne-deriv requested review from balakrishna-deriv and matin-deriv as code owners April 21, 2022 09:37

boring-cyborg bot added the Components label Apr 21, 2022

vercel bot deployed to Preview April 21, 2022 09:51 View deployment

Delete icons.js

c08a1af

Unstage eslint formatted file `icons.js`

vercel bot deployed to Preview April 22, 2022 02:39 View deployment

Revert icons.js deletion

53ffd88

vercel bot deployed to Preview April 22, 2022 02:49 View deployment

carolsachdeva reviewed Apr 22, 2022

View reviewed changes

carolsachdeva suggested changes Apr 22, 2022

View reviewed changes

packages/p2p/src/components/my-ads/ad-form-payment-methods-list.jsx Outdated Show resolved Hide resolved

Refactored code

5c7b025

adrienne-deriv requested a review from carolsachdeva April 22, 2022 06:00

vercel bot deployed to Preview April 22, 2022 06:07 View deployment

adrienne-deriv added 2 commits April 22, 2022 14:44

Alphabetize new component props

ace4852

Alphabetize new component props

e6fea1f

vercel bot deployed to Preview April 22, 2022 06:54 View deployment

adrienne-deriv added 2 commits May 9, 2022 17:53

Refactored quick add PM modal to include new PM layout changes

c10f4f9

Refactored quick add PM modal to include new PM layout changes

4ba090e

carolsachdeva previously approved these changes Jun 3, 2022

View reviewed changes

vercel bot deployed to Preview June 3, 2022 09:25 View deployment

Fixed merge conflicts

fedad81

adrienne-deriv dismissed carolsachdeva’s stale review via fedad81 June 8, 2022 02:37

vercel bot deployed to Preview June 8, 2022 02:47 View deployment

Adjusted PM categories order in My Profile PM and Add PM card height

84db6b0

adrienne-deriv commented Jun 8, 2022

View reviewed changes

vercel bot deployed to Preview June 8, 2022 06:17 View deployment

Adjusted PM categories order in My Profile PM and Add PM card height

f1f6807

adrienne-deriv commented Jun 8, 2022

View reviewed changes

vercel bot deployed to Preview June 8, 2022 06:28 View deployment

ameerul-deriv reviewed Jun 8, 2022

View reviewed changes

Adjusted card margin for My Profile page and sorted pm cards in sell …

7553421

…ad modal

adrienne-deriv commented Jun 13, 2022

View reviewed changes

vercel bot deployed to Preview June 13, 2022 04:58 View deployment

ameerul-deriv previously approved these changes Jun 14, 2022

View reviewed changes

nijil-deriv previously approved these changes Jun 15, 2022

View reviewed changes

Adjusted left margin for payment methods list

a8429b2

adrienne-deriv dismissed stale reviews from nijil-deriv and ameerul-deriv via a8429b2 June 22, 2022 05:49

vercel bot deployed to Preview June 22, 2022 05:58 View deployment

nijil-deriv previously approved these changes Jun 23, 2022

View reviewed changes

Fixed merge conflits

002a51d

adrienne-deriv dismissed nijil-deriv’s stale review via 002a51d June 28, 2022 06:16

vercel bot deployed to Preview June 28, 2022 06:25 View deployment

Merge branch 'master' into bug-57367-alignment-issues-PM

ed5f91e

carolsachdeva merged commit 3d8078e into binary-com:master Jun 30, 2022

vercel bot deployed to Preview June 30, 2022 04:43 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adrienne / Changed layout for PM cards list in Ads page #5284

Adrienne / Changed layout for PM cards list in Ads page #5284

adrienne-deriv commented Apr 20, 2022 •

edited

Loading

vercel bot commented Apr 20, 2022 •

edited

Loading

github-actions bot commented Apr 21, 2022 •

edited

Loading

carolsachdeva Apr 22, 2022

adrienne-deriv Apr 22, 2022

adrienne-deriv Jun 8, 2022

adrienne-deriv Jun 8, 2022

ameerul-deriv Jun 8, 2022

adrienne-deriv Jun 13, 2022

adrienne-deriv Jun 13, 2022 •

edited

Loading

ameerul-deriv left a comment

sonarcloud bot commented Jun 30, 2022

Adrienne / Changed layout for PM cards list in Ads page #5284

Adrienne / Changed layout for PM cards list in Ads page #5284

Conversation

adrienne-deriv commented Apr 20, 2022 • edited Loading

Changes:

When you need to add unit test

When you need to add integration test

Test coverage checklist (for reviewer)

Type of change

vercel bot commented Apr 20, 2022 • edited Loading

github-actions bot commented Apr 21, 2022 • edited Loading

carolsachdeva Apr 22, 2022

Choose a reason for hiding this comment

adrienne-deriv Apr 22, 2022

Choose a reason for hiding this comment

adrienne-deriv Jun 8, 2022

Choose a reason for hiding this comment

adrienne-deriv Jun 8, 2022

Choose a reason for hiding this comment

ameerul-deriv Jun 8, 2022

Choose a reason for hiding this comment

adrienne-deriv Jun 13, 2022

Choose a reason for hiding this comment

adrienne-deriv Jun 13, 2022 • edited Loading

Choose a reason for hiding this comment

ameerul-deriv left a comment

Choose a reason for hiding this comment

sonarcloud bot commented Jun 30, 2022

adrienne-deriv commented Apr 20, 2022 •

edited

Loading

vercel bot commented Apr 20, 2022 •

edited

Loading

github-actions bot commented Apr 21, 2022 •

edited

Loading

adrienne-deriv Jun 13, 2022 •

edited

Loading