feat: APP-204 buy credits #2477

blushi · 2024-09-18T11:46:49Z

Description

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

This large PR has been initially code reviewed as part of separate smaller PRs:
#2480
#2482
#2484

Not implemented yet:

Since this PR was already too big, I've decided to have follow-ups for the following items (mapped to tasks on Jira):

Order summary card
Buy flow from project card (only available from project page in this work)
Success page/modal (for fiat we need our fiat payment microservice to be implemented first, but for crypto you should see our existing tx successful modal, which will need to be reworked)
Buying from prefinance project
Redirect to buy flow after logging in with google from the buy flow
Show error message on Choose Credits form (crypto) if not enough coins to pay for the credits

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

Please have a look at the list above of what's not implemented yet before testing.

Project with fiat credits available: https://deploy-preview-2477--regen-marketplace.netlify.app/project/C01-001
- click on buy button
- test card purchase flow with/without a logged in account, saving card info and then trying to reuse it later. You can also check in stripe dashboard (using test mode) that the payment has been successful, with the right amount. Here are some int testing cards: https://docs.stripe.com/testing?testing-method=card-numbers#international-cards
- test crypto purchase flow: retiring and not retiring
Project without fiat credits available: https://deploy-preview-2477--regen-marketplace.netlify.app/project/KSH01-001

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-09-18T11:47:05Z

✅ Deploy Preview for regen-website ready!

Name	Link
🔨 Latest commit	`35ed494`
🔍 Latest deploy log	https://app.netlify.com/sites/regen-website/deploys/670e7dd85bc6ae00086fdd9e
😎 Deploy Preview	https://deploy-preview-2477--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-09-18T12:18:14Z

web-components/src/components/fixed-footer/SaveFooter.tsx

- variant="determinate"
- value={props.percentComplete}
- />
+ {!hideProgress && typeof percentComplete !== 'undefined' && (


Couldn't this be percentComplete !== undefined instead of using typeof?

I usually prefer using typeof because this is safer if the variable hasn't already been declared, it won't throw an error, but I agree in this case, we could also use percentComplete !== undefined I don't have a strong preference

r41ph · 2024-09-18T12:37:33Z

web-components/src/components/molecules/PrevNextButtons/PrevNextButtons.tsx

+
+type Props = {
+ onPrev?: () => void;
+ onSave?: () => void;


It looks like the "Save" button is always rendered but onSave is optional. Since the button is visible, maybe onSave should be required to avoid cases where the button has no functionality? Without onSave, the button could still be enabled and not function properly when clicked. An option could be to disable it if onSave is not present disabled={saveDisabled || !onSave}

if you look at the code for the SaveFooter you'll see the button has type="submit" which means that if it's within a Form it will just use onSubmit from this form on click so no need to provide onSave in this case

web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.test.tsx

web-marketplace/src/components/molecules/CreditsAmount/CreditsInput.tsx

web-marketplace/src/components/organisms/BuyCreditsModal/BuyCreditsModal.utils.tsx

web-marketplace/src/components/templates/ProjectDetails/hooks/useGetProject.ts

...s/react-query/ecocredit/marketplace/getSellOrdersExtendedQuery/getSellOrdersExtendedQuery.ts

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

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

blushi · 2024-09-26T11:30:58Z

@erikalogie @clevinson see testing instructions

erikalogie · 2024-09-26T15:32:49Z

This PR is looking absolutely awesome @blushi. Amazing work!

One thing I'm wondering is, when I'm buying with crypto, if I have "retire credits now" selected and have an amount in the fields above, if I then select "buy tradable ecocredits" then the amount resets. Does it need to be this way? If not, could we change this in a follow-up issue?

blushi · 2024-09-30T12:14:56Z

This PR is looking absolutely awesome @blushi. Amazing work!

One thing I'm wondering is, when I'm buying with crypto, if I have "retire credits now" selected and have an amount in the fields above, if I then select "buy tradable ecocredits" then the amount resets. Does it need to be this way? If not, could we change this in a follow-up issue?

You're right, it doesn't always need to be reseted.
As an improvement we could:

keep the amount if all credits are tradable
set amount to min(current amount, amount credits tradable) if not all credits are tradable, like here: https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=174-102754&node-type=frame&m=dev?

r41ph · 2024-09-30T15:16:43Z

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

+ projectId: string;
+};
+export const getFormModel = ({
+ _,


Another way that I think would be more efficient would be that instead of passing around _ we can use i18n from import { i18n } from '@lingui/core';

That way we could directly do: i18n._(msg`Choose credits`)

Reading https://lingui.dev/ref/react#uselingui, I believe this might cause some issues when the user switches languages

You're right that there could be issues when switching languages. However, what I understand is that it can cause issues when i18n._() is used in memoized functions or components. As long as we avoid using it in those contexts it seems that it should work fine.

erikalogie · 2024-09-30T16:01:12Z

This PR is looking absolutely awesome @blushi. Amazing work!
One thing I'm wondering is, when I'm buying with crypto, if I have "retire credits now" selected and have an amount in the fields above, if I then select "buy tradable ecocredits" then the amount resets. Does it need to be this way? If not, could we change this in a follow-up issue?

You're right, it doesn't always need to be reseted. As an improvement we could:

keep the amount if all credits are tradable

set amount to min(current amount, amount credits tradable) if not all credits are tradable, like here: https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=174-102754&node-type=frame&m=dev?

Yes, that would be great. Do you want to open a follow-up task for this? Otherwise everything LGTM

blushi · 2024-10-01T10:29:02Z

This PR is looking absolutely awesome @blushi. Amazing work!
One thing I'm wondering is, when I'm buying with crypto, if I have "retire credits now" selected and have an amount in the fields above, if I then select "buy tradable ecocredits" then the amount resets. Does it need to be this way? If not, could we change this in a follow-up issue?

You're right, it doesn't always need to be reseted. As an improvement we could:

keep the amount if all credits are tradable

set amount to min(current amount, amount credits tradable) if not all credits are tradable, like here: https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=174-102754&node-type=frame&m=dev?

Yes, that would be great. Do you want to open a follow-up task for this? Otherwise everything LGTM

Just added it here

blushi · 2024-10-02T09:43:30Z

This PR is looking absolutely awesome @blushi. Amazing work!
One thing I'm wondering is, when I'm buying with crypto, if I have "retire credits now" selected and have an amount in the fields above, if I then select "buy tradable ecocredits" then the amount resets. Does it need to be this way? If not, could we change this in a follow-up issue?

You're right, it doesn't always need to be reseted. As an improvement we could:

keep the amount if all credits are tradable

set amount to min(current amount, amount credits tradable) if not all credits are tradable, like here: https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=174-102754&node-type=frame&m=dev?

Yes, that would be great. Do you want to open a follow-up task for this? Otherwise everything LGTM

Just added it here

@erikalogie

erikalogie · 2024-10-02T13:43:06Z

@blushi
I'm getting this nonsense error when clicking the "tradable credits" tab after entering a number greater than the amount of tradable credits that are available. I assume this is meant to be this error? https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=174-102754&t=KznaoTIxXgotIAZ2-1

I'm also realizing that the same issue that I identified with switching between retired and tradable also applies to switching between fiat and crypto or switching between the different crypto currencies. If the user enters a certain number of credits, and then change switches between fiat and crypto, then number of credits should stick rather than reset to 0, and same with the different crypto currencies. If there isn't enough credits in that particular denom, then we should show this error: https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=174-102754&t=KznaoTIxXgotIAZ2-1.

Also, can we move the error messages to be left-aligned with the field?

We also want to make sure that this doesn't happen by having the italicized text move down to make room for the error:

Can we make the default number of credits when the flow first loads be 1 rather than 0?

I'm noticing that if I go through the flow and enter some number of credits and then exit out, and re-enter into it I come to the email part of the form. If I click the back button, then the number of credits is again 0, which shouldn't happen. It should store whatever the number of credits was that the user previously entered if we are taking them to where they left off in the form, and a number of 0 should not be possible.

Screen.Recording.2024-10-02.at.9.40.27.AM.mov

blushi · 2024-10-02T13:45:14Z

Can we make the default number of credits when the flow first loads be 1 rather than 0?

it could be that there are less than 1 credit available, ie 0.5

erikalogie · 2024-10-02T13:47:15Z

Can we make the default number of credits when the flow first loads be 1 rather than 0?

it could be that there are less than 1 credit available, ie 0.5

Could we make it 1 or the highest number available under 1?

clevinson · 2024-10-02T23:41:32Z

Nice work!

Few bugs I want to highlight here as I'm going through QA-

Input forms

On the dollar / credit input forms we allow for several 0s to be typed such that a number is 0 padded. I think this shouldn't be allowed, and the moment a user enters a non-zero number, all 0 digits should be removed from the input field. This likely will get addressed by @erikalogie's comment above to have a non-zero default, but I wanted to highlight this issue explicitly incase it doesn't get resolved already by changing to non-zero defaults.

Fiat Pathway

No bugs!

Crypto Pathway

When I:

select a quantity of credits to purchase (with "retired credits now" selected)
change the purchase option to "Buy tradable ecocredits"

Then:

the quantity does not update
the purchase fails with an error on "auto retire" (see screenshot)

Separate from the above issue, when successfully purchasing tradable credits, the success modal at the end says "View retirement certificate", instead of something like "View ecocredits". I know that we haven't implemented the entire buy flow yet, and there are still follow-ups remaining, but just wanted to make sure this particular issue was being tracked.

blushi · 2024-10-03T05:46:30Z

Separate from the above issue, when successfully purchasing tradable credits, the success modal at the end says "View retirement certificate", instead of something like "View ecocredits". I know that we haven't implemented the entire buy flow yet, and there are still follow-ups remaining, but just wanted to make sure this particular issue was being tracked.

There's indeed a follow up issue for the confirmation step: https://regennetwork.atlassian.net/browse/APP-361
But when looking at the figma designs, I don't see how the confirmation screen is supposed to look like when buying tradable credits @erikalogie looks like there's always the retirement certificate on the background of the confirmation modal.

blushi · 2024-10-03T12:02:03Z

web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.utils.tsx

+ orderedSellOrders: UISellOrderInfo[];
+ creditTypePrecision?: number | null;
+};
+export const getCreditsAmount = ({


@r41ph just wanted to mention that those functions getCreditsAmount and getCurrencyAmount are one of the most important stuff to review in this PR, since it infers the sell orders (by the cheapest) based on the credits or currency amount provided

@blushi this looks great! I've tested it and it seems to work as expected. Just a few minor suggestions.

blushi · 2024-10-03T12:02:38Z

@erikalogie @clevinson could you have another look?

erikalogie · 2024-10-03T14:08:27Z

LGTM

erikalogie · 2024-10-03T14:10:52Z

Separate from the above issue, when successfully purchasing tradable credits, the success modal at the end says "View retirement certificate", instead of something like "View ecocredits". I know that we haven't implemented the entire buy flow yet, and there are still follow-ups remaining, but just wanted to make sure this particular issue was being tracked.

There's indeed a follow up issue for the confirmation step: https://regennetwork.atlassian.net/browse/APP-361 But when looking at the figma designs, I don't see how the confirmation screen is supposed to look like when buying tradable credits @erikalogie looks like there's always the retirement certificate on the background of the confirmation modal.

You are 100% correct. I just made a version here, wdyt? https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=5075-76841&t=lKYcqtNVA7T8TxHW-1

blushi · 2024-10-03T14:42:43Z

Separate from the above issue, when successfully purchasing tradable credits, the success modal at the end says "View retirement certificate", instead of something like "View ecocredits". I know that we haven't implemented the entire buy flow yet, and there are still follow-ups remaining, but just wanted to make sure this particular issue was being tracked.

There's indeed a follow up issue for the confirmation step: https://regennetwork.atlassian.net/browse/APP-361 But when looking at the figma designs, I don't see how the confirmation screen is supposed to look like when buying tradable credits @erikalogie looks like there's always the retirement certificate on the background of the confirmation modal.

You are 100% correct. I just made a version here, wdyt? https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=5075-76841&t=lKYcqtNVA7T8TxHW-1

Looks good, just left a comment.

web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.tsx

web-marketplace/src/components/templates/ProjectDetails/hooks/useGetProject.ts

web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.utils.tsx

…cted

blushi requested a review from r41ph September 18, 2024 13:16

r41ph requested changes Sep 18, 2024

View reviewed changes

blushi changed the title ~~feat: APP-204 buy credits~~ feat: APP-204 buy credits (step 1 refactor) Sep 23, 2024

blushi changed the title ~~feat: APP-204 buy credits (step 1 refactor)~~ feat: APP-204 buy credits (step 1 refactor+integration) Sep 25, 2024

blushi changed the title ~~feat: APP-204 buy credits (step 1 refactor+integration)~~ feat: APP-204 buy credits Sep 26, 2024

blushi force-pushed the feat-APP-204-buy-credits branch from 9c490bf to d85f997 Compare September 26, 2024 09:56

blushi requested a review from r41ph September 26, 2024 11:30

blushi marked this pull request as ready for review September 26, 2024 11:31

r41ph reviewed Sep 30, 2024

View reviewed changes

blushi commented Oct 3, 2024

View reviewed changes

r41ph mentioned this pull request Oct 3, 2024

feat: APP-360 redirect to project buy after google login #2494

Merged

10 tasks

blushi requested a review from r41ph October 7, 2024 07:28

r41ph reviewed Oct 7, 2024

View reviewed changes

r41ph approved these changes Oct 7, 2024

View reviewed changes

blushi added 26 commits October 15, 2024 16:36

feat: default to fiat if any or redirect to project page if not conne…

0aff960

…cted

feat: logic for buy button on ProjectDetails page

a6cafab

feat: only show wallets

a366c5c

fix: handle case where sell order id in sanity not available anymore

de5e2f6

fix: redirect to project page if buy disabled

9051bbc

feat: show modal when clicking buy with crypto

3cce4b1

chore: i18n

66842c1

chore: use find

1cf0f48

chore: clean up

16a2255

fix: validation in ChooseCreditsForm

8b2e1a5

fix: filter seller sell orders

94f45f7

feat: set amounts when choosing tradable credits

f47029a

chore: use formatted number

334e535

feat: add retirement info to /create-payment-intent

d81be5d

chore: i18n:extract

3f582e6

fix: update fields on currency/payment option change

235e1c7

fix: error msg UI

524cdb8

feat: set initial credits amount to min(1,available)

3475456

fix: choose credits form initial values

6b2859a

chore: remove leading 0 from input

cd96173

fix: initialization and validation choose credits form

e82943c

fix: update GET_PAYMENT_METHODS_QUERY_KEY

d17b40f

chore: address reviewcomments

290e480

fix: entering decimal values

596044f

fix: setting max unneeded microToDenom

b24ec41

fix: error with 0 credits available and paymentOptionCryptoClicked

35ed494

blushi force-pushed the feat-APP-204-buy-credits branch from 0746206 to 35ed494 Compare October 15, 2024 14:36

blushi enabled auto-merge (squash) October 15, 2024 14:36

blushi merged commit 9a5fb65 into dev Oct 15, 2024
12 of 14 checks passed

blushi deleted the feat-APP-204-buy-credits branch October 15, 2024 14:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: APP-204 buy credits #2477

feat: APP-204 buy credits #2477

blushi commented Sep 18, 2024 •

edited

Loading

netlify bot commented Sep 18, 2024 •

edited

Loading

r41ph Sep 18, 2024

blushi Sep 19, 2024 •

edited

Loading

r41ph Sep 18, 2024

blushi Sep 19, 2024

blushi commented Sep 26, 2024

erikalogie commented Sep 26, 2024

blushi commented Sep 30, 2024

r41ph Sep 30, 2024

blushi Oct 1, 2024

r41ph Oct 1, 2024

erikalogie commented Sep 30, 2024

blushi commented Oct 1, 2024

blushi commented Oct 2, 2024

erikalogie commented Oct 2, 2024

blushi commented Oct 2, 2024

erikalogie commented Oct 2, 2024

clevinson commented Oct 2, 2024

blushi commented Oct 3, 2024 •

edited

Loading

blushi Oct 3, 2024

r41ph Oct 7, 2024

blushi commented Oct 3, 2024

erikalogie commented Oct 3, 2024

erikalogie commented Oct 3, 2024

blushi commented Oct 3, 2024

feat: APP-204 buy credits #2477

feat: APP-204 buy credits #2477

Conversation

blushi commented Sep 18, 2024 • edited Loading

Description

Author Checklist

How to test

Reviewers Checklist

netlify bot commented Sep 18, 2024 • edited Loading

✅ Deploy Preview for regen-website ready!

Choose a reason for hiding this comment

blushi Sep 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blushi commented Sep 26, 2024

erikalogie commented Sep 26, 2024

blushi commented Sep 30, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

erikalogie commented Sep 30, 2024

blushi commented Oct 1, 2024

blushi commented Oct 2, 2024

erikalogie commented Oct 2, 2024

blushi commented Oct 2, 2024

erikalogie commented Oct 2, 2024

clevinson commented Oct 2, 2024

Input forms

Fiat Pathway

Crypto Pathway

blushi commented Oct 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blushi commented Oct 3, 2024

erikalogie commented Oct 3, 2024

erikalogie commented Oct 3, 2024

blushi commented Oct 3, 2024

blushi commented Sep 18, 2024 •

edited

Loading

netlify bot commented Sep 18, 2024 •

edited

Loading

blushi Sep 19, 2024 •

edited

Loading

blushi commented Oct 3, 2024 •

edited

Loading