feat : APP-363 another user purchased credits modal #2500

r41ph · 2024-10-10T10:07:09Z

Description

https://regennetwork.atlassian.net/browse/APP-363

This PR also addresses https://regennetwork.atlassian.net/browse/APP-409

Author Checklist

All items are required. Please add a note to the item if the item is not applicable and
please add links to any relevant follow up issues.

I have...

provided a link to the relevant issue or specification
provided instructions on how to test
reviewed "Files changed" and left comments if necessary
confirmed all CI checks have passed

How to test

https://deploy-preview-2500--regen-marketplace.netlify.app/projects/1

If a web2 user or a visiting user is trying to buy credits with USD and the selected credits are not available anymore and there is other sell orders with credits, the modal with copy "Sorry, another user has purchased all of the USD credits you selected!" should open -> https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=5596-91315&node-type=instance&m=dev
- When clicking on the 'find another credit card project' button should take the suer to the projects page and filter projects showing credit card projects only (filter to be implemented)
- When clicking on the 'or, buy with crypto' button:
  - If there is no connected wallet address, the connect wallet modal should open.
  - If the user is a web3 user but not connected to the wallet address associated to his/er account the switch wallet modal should open.
When trying to buy credits, if there are no credits available in all the sell orders, the modal with copy "Sorry, another user has purchased all of the available credits from this project" should open. -> https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=360-62730&node-type=instance&m=dev
- When clicking on the 'search for new credits' button the user should be redirected to the projects page
If another user has bought some or all of the credits available to purchase, then the modal with copy "Sorry, another user has purchased some or all of the credits you selected!" should open. -> https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=179-109428&node-type=instance&m=dev
- When clicking “choose new credits” the user should be redirected back to step 1 of the buying flow. If there are still credits available in the denom they selected, then it should still be selected win step 1. Otherwise, it should default again to USD or whatever denom is available.

Reviewers Checklist

All items are required. Please add a note if the item is not applicable and please add
your handle next to the items reviewed if you only reviewed selected items.

I have...

confirmed all author checklist items have been addressed
reviewed code correctness and readability
verified React components follow DRY principles
reviewed documentation is accurate
reviewed tests
manually tested (if applicable)

netlify · 2024-10-10T10:07:36Z

✅ Deploy Preview for regen-website ready!

Name	Link
🔨 Latest commit	`f13e282`
🔍 Latest deploy log	https://app.netlify.com/sites/regen-website/deploys/675b1da7002e6600080f1b67
😎 Deploy Preview	https://deploy-preview-2500--regen-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

r41ph · 2024-10-10T10:27:26Z

@blushi

Relevant files:
web-components/src/components/inputs/new/CustomSelect/CustomSelect.test.tsx
web-components/src/components/modal/index.tsx
web-marketplace/src/components/organisms/BuyFiatModal/BuyFiatModal.test.tsx
web-marketplace/src/components/organisms/BuyFiatModal/BuyFiatModal.tsx
web-marketplace/src/components/organisms/BuyFiatModal/BuyFiatModal.types.ts
web-marketplace/src/pages/BuyCredits/BuyCredits.Form.tsx
web-marketplace/src/pages/BuyCredits/BuyCredits.utils.ts

r41ph · 2024-10-10T10:28:23Z

@blushi I'm not sure how @erikalogie @clevinson can test this, can you help please?

blushi · 2024-10-10T10:35:41Z

@blushi I'm not sure how @erikalogie @clevinson can test this, can you help please?

They need to go through the buy flow with an initial user but then before clicking "purchase", they need to purchase the same credits (with crypto, since fiat microservice PR is not merged yet) with another account in another incognito window or another browser (or with CLI for @clevinson), testing the 2 cases:

purchase a credits amounts above the one entered by the initial user
purchase all credits

r41ph · 2024-10-10T10:52:42Z

Is there any 'testing' user I can use to do this myself too?

erikalogie · 2024-10-16T21:04:06Z

Can I test this with credit card now?

blushi · 2024-10-17T07:56:44Z

Can I test this with credit card now?

yes, but both users should purchase with credit card so the same sell orders get selected

web-marketplace/src/pages/BuyCredits/BuyCredits.Form.tsx

erikalogie · 2024-10-17T11:28:22Z

I am trying to purchase with credit card but the next button is greyed out, not sure what I am doing wrong:

Screen.Recording.2024-10-17.at.7.23.49.AM.mov

blushi · 2024-10-17T11:30:40Z

I am trying to purchase with credit card but the next button is greyed out, not sure what I am doing wrong:

Screen.Recording.2024-10-17.at.7.23.49.AM.mov

are you logged in? with which type of account?

erikalogie · 2024-10-17T11:38:13Z

I am logged in with a web 3.0 account that has no email associated. So in this case, the email field should not be optional, as it shows here. Should this be a separate bug @blushi?

blushi · 2024-10-17T12:38:24Z

I am logged in with a web 3.0 account that has no email associated. So in this case, the email field should not be optional, as it shows here. Should this be a separate bug @blushi?

yes please file a separate bug

erikalogie · 2024-10-17T13:34:42Z

I am logged in with a web 3.0 account that has no email associated. So in this case, the email field should not be optional, as it shows here. Should this be a separate bug @blushi?

yes please file a separate bug

Ok https://regennetwork.atlassian.net/browse/APP-406

erikalogie · 2024-10-17T14:29:01Z

@blushi @r41ph I'm really having a lot of trouble testing this and getting it to work, there seem to be some bugs: https://www.loom.com/share/41b9dfb86ea14b1f8f4d4aac0198f35b

blushi · 2024-10-17T14:58:18Z

@blushi @r41ph I'm really having a lot of trouble testing this and getting it to work, there seem to be some bugs: https://www.loom.com/share/41b9dfb86ea14b1f8f4d4aac0198f35b

could you try clearing your browser cache to see if that helps?

blushi · 2024-10-17T15:08:03Z

@blushi @r41ph I'm really having a lot of trouble testing this and getting it to work, there seem to be some bugs: https://www.loom.com/share/41b9dfb86ea14b1f8f4d4aac0198f35b

could you try clearing your browser cache to see if that helps?

The reason for having tradable credits selected might be that you tested the crypto flow with tradable credits but didn't go through the end so it kept this last step in your local storage. Then you got logged out and you come back to this saved step. We keep retiring state as true or false in local storage and it can only be changed through the radio buttons on the crypto version, but you don't have access to that since you're just a visitor. This is quite an edge case but I guess we should just reset retiring back to true as soon as the card payment option is selected.

erikalogie · 2024-10-17T15:11:33Z

@blushi @r41ph I'm really having a lot of trouble testing this and getting it to work, there seem to be some bugs: https://www.loom.com/share/41b9dfb86ea14b1f8f4d4aac0198f35b

could you try clearing your browser cache to see if that helps?

The reason for having tradable credits selected might be that you tested the crypto flow with tradable credits but didn't go through the end so it kept this last step in your local storage. Then you got logged out and you come back to this saved step. We keep retiring state as true or false in local storage and it can only be changed through the radio buttons on the crypto version, but you don't have access to that since you're just a visitor. This is quite an edge case but I guess we should just reset retiring back to true as soon as the card payment option is selected.

Yes that would be great. Could you open a separate issue if you think it should be separate and put in this sprint?

erikalogie · 2024-10-17T15:11:44Z

Ok here is what is happening for me now: https://www.loom.com/share/ad7c0db6177e4f5fb2ba3db0e46c2798

blushi · 2024-10-17T15:13:41Z

@blushi @r41ph I'm really having a lot of trouble testing this and getting it to work, there seem to be some bugs: https://www.loom.com/share/41b9dfb86ea14b1f8f4d4aac0198f35b

The email login issue is unrelated to this, not sure what's happening, it looks like it doesn't work anymore on prod too. I'll check the server logs.

erikalogie · 2024-10-17T15:15:07Z

@blushi @r41ph I'm really having a lot of trouble testing this and getting it to work, there seem to be some bugs: https://www.loom.com/share/41b9dfb86ea14b1f8f4d4aac0198f35b

could you try clearing your browser cache to see if that helps?

The reason for having tradable credits selected might be that you tested the crypto flow with tradable credits but didn't go through the end so it kept this last step in your local storage. Then you got logged out and you come back to this saved step. We keep retiring state as true or false in local storage and it can only be changed through the radio buttons on the crypto version, but you don't have access to that since you're just a visitor. This is quite an edge case but I guess we should just reset retiring back to true as soon as the card payment option is selected.

Yes that would be great. Could you open a separate issue if you think it should be separate and put in this sprint?

Related to this, I've noticed that if I go back in the flow after selecting the crypto option, choose "credit card" and enter some number, then navigate away and click the "buy" button again on the same project page, I would expect to end up at the last screen I was on, which is actually first screen of the flow with credit card selected, not the last screen. Probably not the most important to address right away as most users won't be toggling between the two flows because very few people will use the keplr option.

blushi · 2024-10-17T15:23:06Z

@blushi @r41ph I'm really having a lot of trouble testing this and getting it to work, there seem to be some bugs: https://www.loom.com/share/41b9dfb86ea14b1f8f4d4aac0198f35b

The email login issue is unrelated to this, not sure what's happening, it looks like it doesn't work anymore on prod too. I'll check the server logs.

Nevermind, got the email on prod, I guess the server took a bit more time to process it or my email client was laggy.
This is an issue on staging only related to some recent changes.

blushi · 2024-10-17T15:24:44Z

@blushi @r41ph I'm really having a lot of trouble testing this and getting it to work, there seem to be some bugs: https://www.loom.com/share/41b9dfb86ea14b1f8f4d4aac0198f35b

could you try clearing your browser cache to see if that helps?

The reason for having tradable credits selected might be that you tested the crypto flow with tradable credits but didn't go through the end so it kept this last step in your local storage. Then you got logged out and you come back to this saved step. We keep retiring state as true or false in local storage and it can only be changed through the radio buttons on the crypto version, but you don't have access to that since you're just a visitor. This is quite an edge case but I guess we should just reset retiring back to true as soon as the card payment option is selected.

Yes that would be great. Could you open a separate issue if you think it should be separate and put in this sprint?

Related to this, I've noticed that if I go back in the flow after selecting the crypto option, choose "credit card" and enter some number, then navigate away and click the "buy" button again on the same project page, I would expect to end up at the last screen I was on, which is actually first screen of the flow with credit card selected, not the last screen. Probably not the most important to address right away as most users won't be toggling between the two flows because very few people will use the keplr option.

I see, right now, we only save the step as soon as the user hits the "next" button so I guess we should upgrade that to change as soon as we visit a given step. Could you create an issue for that?

blushi · 2024-10-17T15:28:03Z

@blushi @r41ph I'm really having a lot of trouble testing this and getting it to work, there seem to be some bugs: https://www.loom.com/share/41b9dfb86ea14b1f8f4d4aac0198f35b

could you try clearing your browser cache to see if that helps?

The reason for having tradable credits selected might be that you tested the crypto flow with tradable credits but didn't go through the end so it kept this last step in your local storage. Then you got logged out and you come back to this saved step. We keep retiring state as true or false in local storage and it can only be changed through the radio buttons on the crypto version, but you don't have access to that since you're just a visitor. This is quite an edge case but I guess we should just reset retiring back to true as soon as the card payment option is selected.

Yes that would be great. Could you open a separate issue if you think it should be separate and put in this sprint?

Yeah this isn't related to this work so should be in a separate issue: https://regennetwork.atlassian.net/browse/APP-409

erikalogie · 2024-10-17T15:34:59Z

@blushi @r41ph I'm really having a lot of trouble testing this and getting it to work, there seem to be some bugs: https://www.loom.com/share/41b9dfb86ea14b1f8f4d4aac0198f35b

could you try clearing your browser cache to see if that helps?

The reason for having tradable credits selected might be that you tested the crypto flow with tradable credits but didn't go through the end so it kept this last step in your local storage. Then you got logged out and you come back to this saved step. We keep retiring state as true or false in local storage and it can only be changed through the radio buttons on the crypto version, but you don't have access to that since you're just a visitor. This is quite an edge case but I guess we should just reset retiring back to true as soon as the card payment option is selected.

Yes that would be great. Could you open a separate issue if you think it should be separate and put in this sprint?

Related to this, I've noticed that if I go back in the flow after selecting the crypto option, choose "credit card" and enter some number, then navigate away and click the "buy" button again on the same project page, I would expect to end up at the last screen I was on, which is actually first screen of the flow with credit card selected, not the last screen. Probably not the most important to address right away as most users won't be toggling between the two flows because very few people will use the keplr option.

I see, right now, we only save the step as soon as the user hits the "next" button so I guess we should upgrade that to change as soon as we visit a given step. Could you create an issue for that?

https://regennetwork.atlassian.net/browse/APP-410?atlOrigin=eyJpIjoiZTBkY2IwZjE2NzZlNDIxYmI0Y2M3NzM0MjRmNjkzN2MiLCJwIjoiaiJ9

r41ph · 2024-12-10T16:27:55Z

@erikalogie I have added the missing translations.

erikalogie · 2024-12-11T13:24:52Z

LGTM

S4mmyb · 2024-12-11T15:18:07Z

LGTM

blushi · 2024-12-12T10:26:52Z

If the user is a web3 user but not connected to the wallet address associated to his/er account the switch wallet modal should open.

This use case in 1. doesn't seem to be handled properly.
I logged in with email to an account with some wallet address associated to it (but the wallet address selected in Keplr is different), tried to buy some sold out USD credits, but then I got this popup: https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=179-109428&node-type=instance&m=dev instead of this one: https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=5596-91315&node-type=instance&m=dev

blushi · 2024-12-12T10:29:38Z

web-marketplace/src/pages/BuyCredits/BuyCredits.utils.tsx

+): BuyWarningModalContent | undefined => {
+  if (
+    currency?.askDenom === USD_DENOM &&
+    (isWeb2UserWithoutWallet || isVisitingUser) &&


I believe this is because of this check, I don't think we should limit this to visiting or web2 users without wallet

~~Do you think we should remove line 79 altogether?~~

I've removed the type of user check

blushi · 2024-12-12T10:46:03Z

When trying to buy credits, if there are no credits available in all the sell orders, the modal with copy "Sorry, another user has purchased all of the available credits from this project" should open. -> https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=360-62730&node-type=instance&m=dev

When clicking on the 'search for new credits' button the user should be redirected to the projects page

Testing this with a web3 user, trying to buy credits for a project with all credits that got sold in the mean time, I get https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=179-109428&node-type=instance&m=dev instead of https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=360-62730&node-type=instance&m=dev

…credits

…ell orders

r41ph · 2024-12-12T17:37:28Z

@blushi this is ready for another look

r41ph requested a review from blushi October 10, 2024 10:27

r41ph changed the base branch from dev to feat-APP-204-buy-credits October 10, 2024 14:55

r41ph changed the base branch from feat-APP-204-buy-credits to dev October 10, 2024 16:02

r41ph force-pushed the feat-APP-363-another-user-purchased-credits-modal branch 2 times, most recently from 6e7c705 to cc6f2a3 Compare October 16, 2024 11:37

blushi requested changes Oct 17, 2024

View reviewed changes

web-marketplace/src/pages/BuyCredits/BuyCredits.Form.tsx Outdated Show resolved Hide resolved

web-marketplace/src/pages/BuyCredits/BuyCredits.Form.tsx Outdated Show resolved Hide resolved

r41ph requested a review from blushi October 17, 2024 10:06

r41ph force-pushed the feat-APP-363-another-user-purchased-credits-modal branch from 0f9ae2c to 0ecdb23 Compare December 10, 2024 16:20

blushi reviewed Dec 12, 2024

View reviewed changes

r41ph added 21 commits December 12, 2024 17:29

fix: add missing key in a map()

d099f35

fix: pagination issue in getSellOrdersExtendedQuery

2b37cfd

feat: add BuyFiatModal to handle purchase issues

3d0623a

feat: update SELL_ORDERS after purchase attempt

67d4ff8

refactor: optimize getting ordered sell orders

9f2ff0c

refactor: BuyFiatModal + web2 users message and check all sellOrders …

6d7583c

…credits

refactor :BuyFiatModal props

e30b234

fix: types error

7a341ff

chore: update .po files

ab40a27

fix: sellCanProceed check

d145b27

fix: revert activeStep change for testing

e14e41d

refactor: rename BuyFiatModal to BuyWarningModal

5ae3610

feat: handle no connected wallet address

9648069

fix: amend merge

2e9c91c

refactor: remove unused getFiatModalContent import

1e5aac4

fix: BuyWarningModal for visiting users and form state when no card s…

e01984b

…ell orders

fix: avoid redirection when BuyWarningModal open

6871ec3

chore: extract .po files

4f81e29

chore: update translation

dfd9164

fix: filter sell orders by project

6e61e1f

fix: remove user constrain for USD case warning modal

f13e282

r41ph force-pushed the feat-APP-363-another-user-purchased-credits-modal branch from 6a4e40c to f13e282 Compare December 12, 2024 17:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat : APP-363 another user purchased credits modal #2500

feat : APP-363 another user purchased credits modal #2500

r41ph commented Oct 10, 2024 •

edited by blushi

Loading

netlify bot commented Oct 10, 2024 •

edited

Loading

r41ph commented Oct 10, 2024

r41ph commented Oct 10, 2024

blushi commented Oct 10, 2024

r41ph commented Oct 10, 2024

erikalogie commented Oct 16, 2024

blushi commented Oct 17, 2024 •

edited

Loading

erikalogie commented Oct 17, 2024

blushi commented Oct 17, 2024 •

edited

Loading

erikalogie commented Oct 17, 2024

blushi commented Oct 17, 2024

erikalogie commented Oct 17, 2024

erikalogie commented Oct 17, 2024

blushi commented Oct 17, 2024 •

edited

Loading

blushi commented Oct 17, 2024 •

edited

Loading

erikalogie commented Oct 17, 2024

erikalogie commented Oct 17, 2024

blushi commented Oct 17, 2024

erikalogie commented Oct 17, 2024

blushi commented Oct 17, 2024 •

edited

Loading

blushi commented Oct 17, 2024

blushi commented Oct 17, 2024

erikalogie commented Oct 17, 2024

r41ph commented Dec 10, 2024

erikalogie commented Dec 11, 2024

S4mmyb commented Dec 11, 2024

blushi commented Dec 12, 2024

blushi Dec 12, 2024 •

edited

Loading

r41ph Dec 12, 2024 •

edited

Loading

blushi commented Dec 12, 2024

r41ph commented Dec 12, 2024

feat : APP-363 another user purchased credits modal #2500

Are you sure you want to change the base?

feat : APP-363 another user purchased credits modal #2500

Conversation

r41ph commented Oct 10, 2024 • edited by blushi Loading

Description

Author Checklist

How to test

Reviewers Checklist

netlify bot commented Oct 10, 2024 • edited Loading

✅ Deploy Preview for regen-website ready!

r41ph commented Oct 10, 2024

r41ph commented Oct 10, 2024

blushi commented Oct 10, 2024

r41ph commented Oct 10, 2024

erikalogie commented Oct 16, 2024

blushi commented Oct 17, 2024 • edited Loading

erikalogie commented Oct 17, 2024

blushi commented Oct 17, 2024 • edited Loading

erikalogie commented Oct 17, 2024

blushi commented Oct 17, 2024

erikalogie commented Oct 17, 2024

erikalogie commented Oct 17, 2024

blushi commented Oct 17, 2024 • edited Loading

blushi commented Oct 17, 2024 • edited Loading

erikalogie commented Oct 17, 2024

erikalogie commented Oct 17, 2024

blushi commented Oct 17, 2024

erikalogie commented Oct 17, 2024

blushi commented Oct 17, 2024 • edited Loading

blushi commented Oct 17, 2024

blushi commented Oct 17, 2024

erikalogie commented Oct 17, 2024

r41ph commented Dec 10, 2024

erikalogie commented Dec 11, 2024

S4mmyb commented Dec 11, 2024

blushi commented Dec 12, 2024

blushi Dec 12, 2024 • edited Loading

Choose a reason for hiding this comment

r41ph Dec 12, 2024 • edited Loading

Choose a reason for hiding this comment

blushi commented Dec 12, 2024

r41ph commented Dec 12, 2024

r41ph commented Oct 10, 2024 •

edited by blushi

Loading

netlify bot commented Oct 10, 2024 •

edited

Loading

blushi commented Oct 17, 2024 •

edited

Loading

blushi commented Oct 17, 2024 •

edited

Loading

blushi commented Oct 17, 2024 •

edited

Loading

blushi commented Oct 17, 2024 •

edited

Loading

blushi commented Oct 17, 2024 •

edited

Loading

blushi Dec 12, 2024 •

edited

Loading

r41ph Dec 12, 2024 •

edited

Loading