Ameerul /P2PS-1305 access the share ad link #11

ameerul-deriv · 2023-08-24T05:57:06Z

Changes:

Please provide a summary of the change.

Added routing to the shared advert by adding advert_id in the url with the advertiser's id
Updated custom message for buy/sell advert and fixed/floating rates
removed react-qrcode-logo library, used qrcode-react instead as there were issues when downloading or scanning the qrcode.
Handled all edge case scenarios for desktop and responsive: (user not logged in, non-verified p2p users, demo account, real non usd, country of residence does not offer p2p, block users, temp barred users, not enough balance sell advert, inactive, paused,deleted, hidden ads)
Removed margin-top from dialog scss as it was affecting all dialogs
Handled edge cases for navigating to advertiser page without advert_id
Fixed console error from advertiser-page-store.js regarding error is null
updated test case

Screenshots:

Please provide some screenshots of the change.

Short demo of navigation:

94dd136f-461b-4131-82a0-b1ce4731721d.mp4

…are-file

…igating

…ustom_message

ameerul-deriv · 2023-08-25T03:18:01Z

packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.jsx

@@ -21,6 +21,7 @@ const ErrorModal = ({
            has_close_icon={has_close_icon}
            is_open={is_modal_open}
            title={error_modal_title}
+            toggleModal={onClose ?? hideModal}


for some reason the error modals in p2p can have the x icon but then we can't press them since it was missing the toggleModal function here so i decided to add it

packages/p2p/src/stores/advertiser-page-store.js

farrah-deriv · 2023-08-25T05:03:59Z

packages/p2p/src/stores/general-store.js

+    setCounterpartyAdvertId(counterparty_advert_id) {
+        this.counterparty_advert_id = counterparty_advert_id;
+    }
+


Can this be handled in the component? Let's not add more logic to stores.

ideally it would be best, let me try and see if we can move it to the component buttt i added this because i needed to track if there was an advert id, and when the user navigates to the shared ad, the advert_id in search param disappears and reappears, so it kept causing issues when trying to show the advert... hence why i needed this observable... it was a similar issue for the advertiser id and the order id when niloofar and I changed the routing

so i tried to handle everything in app.jsx where i used useState to track the advert_id in search params. This did work, but the modal couldn't close because it still had a value within the state. And because that state is only handled in the app, i can't change the value... You can see that i had set `counterparty_advert_id' to an empty string so it wont show the modal.

i did try to reset the state in app, but then the modal wouldn't show

packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.tsx

...onents/modal-manager/modals/share-my-ads-modal/share-my-ads-socials/share-my-ads-socials.tsx

packages/p2p/src/stores/advertiser-page-store.js

packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.tsx

packages/components/src/components/vertical-tab/vertical-tab.tsx

farrah-deriv · 2023-08-28T02:39:21Z

packages/components/src/components/dialog/dialog.scss

@@ -73,7 +73,6 @@
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
-            margin-top: 1.4rem;


Please add this to QA checklist.

… use hook, added suggestions

adrienne-deriv

LGTM

packages/hooks/src/__tests__/useP2PAdvertInfo.spec.tsx

packages/cashier/src/components/error-dialog/error-dialog.tsx

yashim-deriv · 2023-08-29T02:48:59Z

packages/p2p/src/stores/advertiser-page-store.js

+                    if (response.error) {
+                        this.setErrorMessage(response.error);
+                    } else {
+                        const { list } = response.p2p_advert_list;


Suggested change

const { list } = response.p2p_advert_list;

const { list = [] } = response.p2p_advert_list;

Can the list (returned by BE) be undefined?

just checked, the list wont be undefined, and there will always be an array returned *unless theres an error

just that the above error couldn't recognise response.error, so we needed to check for response first

packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.tsx

packages/hooks/src/useP2PAdvertInfo.ts

…tom_message

packages/account/package.json

packages/cashier/src/components/error-dialog/error-dialog.tsx

packages/p2p/src/components/advertiser-page/advertiser-page.jsx

* refactor: ts migration of chart loader * refactor: ts migration of screen large form and started purchase * refactor: add types in store and refcator contract * refactor: ts migaration of purchase field * refactor: ts migration of cancel deal info * refactor: ts migration of the purchase btn * refactor: cancel deal info * refactor: remove simular types * refactor: create file for types * chore: cover return value with react fragment * refactor: apply suggestions * refactor: update imports * refactor: type returned value * refactor: left an explanation of expecting ts error * Akmal / feat: migrate EmptyPortfolioMessage, ErrorComponent and Page404 in Trader package (#5) * feat: migrate Page404 to Typescript * feat: migrate EmptyPortfolioMessage to Typescript * feat: migrate ErrorComponent to Typescript * fix: dialog prop * fix: dialog type * chore: remove React.FC * maryia/WEBREL-321/feat: migrate Actions files to TS (#4) * feat: migrate /contract-type.js to ts & remove barrier.js * feat: migrate duration to ts + remove unused currency.js * feat: migrate actions/purchase to ts * feat: migrate actions/symbol to ts * feat: migrate start-date.js to ts * feat: migrate actions/test.js to ts * chore: improve types in start-date and duration * fix: address review comments * revert: unnecessary line deletion * fix: address reviews * refactor: remove some code smells * refactor: remove code smells * refactor: update types in stores * Akmal / feat: migrate utils in Trader package (#9) * feat: migrate MarketUnderlying to Typescript * feat: migrate errors to Typescript * feat: migrate error spec to Typescript * feat: migrate index to Typescript * feat: migrate validator to Typescript * feat: trigger vercel * chore: sort options alphabetically * fix: TValidationResult type * chore: prettier formatting * refactor: reduce code smells * chore: validator type improvements (binary-com#12) * Kate / DTRA-249 / Code refactoring and removing duplicated files (binary-com#13) * refactor: remove duplicated file * refactor: test improvements * fix: removed forgotten import * chore: empty commit to retrigger checks * refactor: apply suggestion * maryia/DTRA-260/TS migration of /Constants files & SmartChart/Helpers files in Trader (#6) * feat: validation-rules and ui.js to ts * chore: squash merge maryia/WEBREL-321/actions-to-TS changes * chore: added types to validation-rules.ts * chore: remove unused ui.js, migrate used ui.js and index.js to ts * chore: remove unused ui.js * chore: remove unused markers.js, and migrate barriers.js to ts * chore: added types to barriers.js and its test * test: add missing test for removeBarrier to barriers * Revert "chore: squash merge maryia/WEBREL-321/actions-to-TS changes" * feat: migrated chart-barrier-store.js to ts * feat: remove unused ChartMarkerStore * build: trigger build * fix: address review comments * henry/webrel-319/ts-migration-modules-trading-helpers-folder (#11) * fix: merge conflicts * fix: resolve comments * fix: remove comment * fix: add loadash types dependency * refactor: move error type to common props file * fix: circle CI * fix: resolve comment * fix: bug * fix: convert returntype to use ttradestore * empty commit * fix: type change * fix: resolve comments * fix: comments * maryia/861n17c54/fix: sonarcloud warnings (binary-com#14) * fix: sonarcloud warnings * fix: types * fix: resolve conflicts * refactor: apply suggestions * refactor: add last suggestion * refactor: tests * refactor: update function * refactor: add ts migration of exist tests * fix: tests * fix: test case --------- Co-authored-by: Akmal Djumakhodjaev <akmal@binary.com> Co-authored-by: Maryia <103177211+maryia-deriv@users.noreply.github.com> Co-authored-by: henry-deriv <118344354+henry-deriv@users.noreply.github.com> Co-authored-by: Matin shafiei <matin@deriv.com>

ameerul-deriv and others added 30 commits August 1, 2023 11:41

chore: added functions for sharing image

c75faef

chore: converted file to blob instead

41f25e6

chore: added if check if they can share the file

e1ccfc6

chore: check if canshare file

b79c25a

chore: added custom message

12fa4cb

chore: added emoji

ab2be88

chore: added routing to advert modal

4631886

chore: check if qr code has loaded

c497f5b

chore: fixed imports

75856d4

chore: use toBlob from html-to-image library

04c2c20

chore: use qrcode.react library

be439e0

chore: fixed sharing qr code

834619f

chore: fixed qr code styling

41cf2fd

chore: fixed logo size

dbb974b

chore: added loader for when sharing image

b428936

chore: fixed setting the loading if is mobile

c6d56ed

Merge branch 'master' of github.com:binary-com/deriv-app into test-sh…

978a510

…are-file

chore: added navigation to advert and checked for edge cases when nav…

514b98c

…igating

chore: updated stores

58a5bc2

chore: fixed getting advertiser list error issue, update styles and c…

845cfd4

…ustom_message

chore: changed meta tags for link preview

53ba66f

Merge branch 'master' into test-share-file

d57feaf

chore: fixed custom ad message

6f0c0b7

chore: added const for localize message values

7efce05

chore: fixed failing test cases

2ddefb0

chore: changed width of modal

09936d0

chore: updated relative path

a5a89e5

chore: fixed switching to demo error and added base64 image

9847778

chore: fixed rounded blurry logo for whatsapp preview

63fca7f

chore: fixed base64 image

2ebbe4e

ameerul-deriv commented Aug 25, 2023

View reviewed changes

farrah-deriv reviewed Aug 25, 2023

View reviewed changes

farhan-nurzi-deriv reviewed Aug 25, 2023

View reviewed changes

nada-deriv reviewed Aug 25, 2023

View reviewed changes

packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.tsx Outdated Show resolved Hide resolved

farrah-deriv reviewed Aug 28, 2023

View reviewed changes

ameerul-deriv added 5 commits August 28, 2023 11:35

chore: added custom hook for p2p advert info, refactored component to…

32ff17f

… use hook, added suggestions

chore: fixed merge conflicts

9b357f2

chore: set counterparty_advert_id to empty string instead of null

9ff571e

chore: fixed failing test cases

a2246fc

chore: added test case for useP2PAdvertInfo

69d1595

adrienne-deriv approved these changes Aug 28, 2023

View reviewed changes

farhan-nurzi-deriv approved these changes Aug 28, 2023

View reviewed changes

nada-deriv approved these changes Aug 28, 2023

View reviewed changes

niloofar-deriv reviewed Aug 28, 2023

View reviewed changes

packages/hooks/src/__tests__/useP2PAdvertInfo.spec.tsx Outdated Show resolved Hide resolved

chore: updated test case

873b69a

yashim-deriv reviewed Aug 29, 2023

View reviewed changes

farhan-nurzi-deriv reviewed Aug 29, 2023

View reviewed changes

packages/hooks/src/useP2PAdvertInfo.ts Outdated Show resolved Hide resolved

chore: removed eslint, removed props for error dialog, refactored cus…

bfc195b

…tom_message

amina-deriv reviewed Aug 29, 2023

View reviewed changes

packages/account/package.json Show resolved Hide resolved

ali-hosseini-deriv reviewed Aug 29, 2023

View reviewed changes

packages/account/package.json Show resolved Hide resolved

packages/cashier/src/components/error-dialog/error-dialog.tsx Outdated Show resolved Hide resolved

packages/cashier/src/components/error-dialog/error-dialog.tsx Outdated Show resolved Hide resolved

chore: added package-lock.json and updated error-dialog

4457cab

ali-hosseini-deriv approved these changes Aug 29, 2023

View reviewed changes

niloofar-deriv reviewed Aug 29, 2023

View reviewed changes

chore: destructured values from general_store

1953d9f

niloofar-deriv approved these changes Aug 30, 2023

View reviewed changes

amina-deriv approved these changes Aug 30, 2023

View reviewed changes

farrah-deriv approved these changes Aug 30, 2023

View reviewed changes

likhith-deriv approved these changes Aug 30, 2023

View reviewed changes

ameerul-deriv merged commit fd08ecd into P2PS-675-share-my-posted-ads Sep 1, 2023
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ameerul /P2PS-1305 access the share ad link #11

Ameerul /P2PS-1305 access the share ad link #11

ameerul-deriv commented Aug 24, 2023 •

edited

Loading

ameerul-deriv Aug 25, 2023

farrah-deriv Aug 25, 2023

ameerul-deriv Aug 25, 2023

ameerul-deriv Aug 28, 2023

farrah-deriv Aug 28, 2023

adrienne-deriv left a comment

yashim-deriv Aug 29, 2023

ameerul-deriv Aug 29, 2023

ameerul-deriv Aug 29, 2023

	const { list } = response.p2p_advert_list;
	const { list = [] } = response.p2p_advert_list;

Ameerul /P2PS-1305 access the share ad link #11

Ameerul /P2PS-1305 access the share ad link #11

Conversation

ameerul-deriv commented Aug 24, 2023 • edited Loading

Changes:

Screenshots:

Short demo of navigation:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adrienne-deriv left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ameerul-deriv commented Aug 24, 2023 •

edited

Loading