feat: APP-364 order summary card #2498

blushi · 2024-10-09T11:32:22Z

Description

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

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-2498--regen-marketplace.netlify.app/project/C01-001/buy
Update the credits amount from the order summary card from different steps in the flow and verify the resulting amount to pay updates accordingly.

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)

web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.stories.tsx

web-marketplace/src/clients/regen/Regen.Routes.tsx

web-marketplace/src/components/molecules/OrderSummaryCard/OrderSummaryCard.Content.tsx

netlify · 2024-10-16T08:41:02Z

✅ Deploy Preview for regen-website ready!

Name	Link
🔨 Latest commit	`d3efc66`
🔍 Latest deploy log	https://app.netlify.com/sites/regen-website/deploys/6718d1fd35e1560008b93207
😎 Deploy Preview	https://deploy-preview-2498--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.

blushi · 2024-10-16T09:52:37Z

@erikalogie see testing instructions

erikalogie · 2024-10-16T17:09:25Z

Order summary looks good. Maybe as a separate bug, when I click on tradable credits after choosing the max number of retirable credits, I get this error:

blushi · 2024-10-16T19:43:35Z

Order summary looks good. Maybe as a separate bug, when I click on tradable credits after choosing the max number of retirable credits, I get this error:

Just a missing translation, I just need to re-run our i18n extraction script to fix this so I don't think we need a separate task

erikalogie · 2024-10-16T20:08:31Z

Wdyt if we make the field wider for the number of credits when you go to edit it? When I went to update it, I couldn't see the whole number because of all the decimals.

blushi · 2024-10-17T07:50:51Z

Wdyt if we make the field wider for the number of credits when you go to edit it? When I went to update it, I couldn't see the whole number because of all the decimals.

@erikalogie updated

erikalogie · 2024-10-17T11:18:46Z

Wdyt if we make the field wider for the number of credits when you go to edit it? When I went to update it, I couldn't see the whole number because of all the decimals.

@erikalogie updated

Looks good!

erikalogie · 2024-10-17T11:51:02Z

@blushi Christian found this bug while testing on this branch: "Cannot change dollar amount of credits to purchase. When I do, I get an error page with an n.toFixed is not a Function message. "

He tried to change the dollar amount when trying to buy fiat credits with a web 2.0 only account

See this video at 12:23: https://us02web.zoom.us/rec/share/t30QW8KPjkaqmm6N3_ZLQyZMd6lhp6zgKxmoT2ct8Kfu-J4D_XYo2obx_71creby.z-JaUieYQqpeH0GX
Passcode: Y^qUb8AY

If this should be a separate bug, let me know and I can file it.

erikalogie · 2024-10-17T11:54:21Z

@blushi another bug that Christian found:
"When I logged with my KEPLR address, there was a message that said something about this REGEN address being associated with the e-mail address that I logged in with. But, I do not believe that I logged in with an e-mail address, just web 3, so I’ve left confused. "

You'll find the issue at 18:48 in the video above.

blushi · 2024-10-17T11:56:50Z

@blushi Christian found this bug while testing on this branch: "Cannot change dollar amount of credits to purchase. When I do, I get an error page with an n.toFixed is not a Function message. "

He tried to change the dollar amount when trying to buy fiat credits with a web 2.0 only account

See this video at 12:23: https://us02web.zoom.us/rec/share/t30QW8KPjkaqmm6N3_ZLQyZMd6lhp6zgKxmoT2ct8Kfu-J4D_XYo2obx_71creby.z-JaUieYQqpeH0GX Passcode: Y^qUb8AY

If this should be a separate bug, let me know and I can file it.

Yeah let's file a separate bug please

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

@blushi another bug that Christian found: "When I logged with my KEPLR address, there was a message that said something about this REGEN address being associated with the e-mail address that I logged in with. But, I do not believe that I logged in with an e-mail address, just web 3, so I’ve left confused. "

You'll find the issue at 18:48 in the video above.

It doesn't seem related to the buy flow itself but rather some issues related to the app state not being updated correctly immediately after logging in, since it works after reloading. Unfortunately I can't reproduce it but we should file a bug nevertheless.

erikalogie · 2024-10-17T14:22:24Z

Ok I filed separate bugs for the above: https://regennetwork.atlassian.net/browse/APP-404 and https://regennetwork.atlassian.net/browse/APP-405

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

r41ph · 2024-10-22T10:24:27Z

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

+ const currency = data?.[CURRENCY];
+ const creditsAmount = data?.[CREDITS_AMOUNT];
+ const currencyAmount = data?.[CURRENCY_AMOUNT];
+ const creditTypePrecision = creditTypeData?.creditType?.precision;


@blushi Shouldn't we memoize this as well? It is used as a dependency for creating creditsAvailable and also passed as prop to ChooseCreditsForm. Actually, ChooseCreditsForm should be wrap with React.memo() too to prevent unnecessary re-renders.

we use useMemo to wrap creditsAvailable
but we can use React.memo for ChooseCreditsForm too
I was also thinking about potentially creating a BuyCreditsContext, instead of having to pass all those props to the child components, wdyt? But maybe can be refactored later.

My thinking is that since creditTypePrecision is recreated on every render, it will cause creditsAvailable to recalculate each time. Memoizing creditTypePrecision could prevent that, as well as unnecessary re-renders of ChooseCreditsForm .

I like your idea about a BuyCreditsContext, it will help simplify things.

but creditTypePrecision doesn't change on every render, the actual value will only change once we get the correspond query response so this should only cause creditsAvailable to recalcule this time (if we exclude other dependencies)

I believe the issue is that the variable is recreated and it's reference changes when react re-executes the component - even if its value remains the same - and that is what can trigger a creditsAvailable recalculation and a ChooseCreditsForm re-render

but creditTypePrecision is a copy using some react query data which is cached and stable across re-renders (unless the data changes) so I don't think we need useMemo in this particular case
if that was another type of variable, then this would be useful indeed.

You are right about the data being cached and stable across re-renders. However, my concern is that if the component re-renders for any reason, creditTypePrecision will be recreated, even if the value hasn't changed, which may lead to unnecessary recalculations for dependent variables or components. If we repeat this pattern throughout the app it might impact performance.

That said, I’ll go ahead and approve the PR so we can move forward. Perhaps we can chat about this another time?

r41ph

See comments please

blushi mentioned this pull request Oct 9, 2024

feat: APP-364 summary card #2497

Closed

10 tasks

blushi force-pushed the feat-APP-364-order-summary-card branch from b0d8f9f to 30bd970 Compare October 10, 2024 14:10

blushi requested a review from r41ph October 10, 2024 15:37

blushi marked this pull request as ready for review October 10, 2024 15:37

blushi force-pushed the feat-APP-204-buy-credits branch from 9dbd532 to 0746206 Compare October 15, 2024 12:27

r41ph reviewed Oct 15, 2024

View reviewed changes

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

Base automatically changed from feat-APP-204-buy-credits to dev October 15, 2024 14:38

blushi force-pushed the feat-APP-364-order-summary-card branch from 757e5f6 to 6627fea Compare October 16, 2024 08:40

blushi requested a review from r41ph October 16, 2024 09:52

r41ph reviewed Oct 21, 2024

View reviewed changes

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

r41ph reviewed Oct 21, 2024

View reviewed changes

r41ph requested changes Oct 21, 2024

View reviewed changes

blushi requested a review from r41ph October 22, 2024 08:24

blushi force-pushed the feat-APP-364-order-summary-card branch from e21959c to 77088c0 Compare October 23, 2024 06:21

r41ph approved these changes Oct 23, 2024

View reviewed changes

blushi added 2 commits October 23, 2024 12:35

feat: add OrderSummaryCard to ChooseCreditsForm and some refactor

4d5e8e1

test: fix EditableInput tests

b747c96

blushi added 11 commits October 23, 2024 12:35

feat: add OrderSummaryCard to other step wip

9278fac

fix: stripe promise and capitalize

a6fcd28

feat: set max credits amount from summary card

6f43121

fix: test

fefefef

fix: EditableInput style and add min

f589a54

chore: useMemo

b1989b5

chore: run i18n extrac

365635f

chore: make EditableInput wider

2646599

chore: address review comments

f25140a

chore: use memo ChooseCreditsForm

c92fea7

chore: i18n extract

d3efc66

blushi force-pushed the feat-APP-364-order-summary-card branch from 77088c0 to d3efc66 Compare October 23, 2024 10:37

blushi merged commit 01f2590 into dev Oct 23, 2024
14 checks passed

blushi deleted the feat-APP-364-order-summary-card branch October 23, 2024 10:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: APP-364 order summary card #2498

feat: APP-364 order summary card #2498

blushi commented Oct 9, 2024 •

edited

Loading

netlify bot commented Oct 16, 2024 •

edited

Loading

blushi commented Oct 16, 2024

erikalogie commented Oct 16, 2024

blushi commented Oct 16, 2024 •

edited

Loading

erikalogie commented Oct 16, 2024

blushi commented Oct 17, 2024

erikalogie commented Oct 17, 2024

erikalogie commented Oct 17, 2024

erikalogie commented Oct 17, 2024

blushi commented Oct 17, 2024

blushi commented Oct 17, 2024

erikalogie commented Oct 17, 2024

r41ph Oct 22, 2024 •

edited

Loading

blushi Oct 23, 2024

r41ph Oct 23, 2024

blushi Oct 23, 2024 •

edited

Loading

r41ph Oct 23, 2024

blushi Oct 23, 2024

r41ph Oct 23, 2024

r41ph left a comment

feat: APP-364 order summary card #2498

feat: APP-364 order summary card #2498

Conversation

blushi commented Oct 9, 2024 • edited Loading

Description

Author Checklist

How to test

Reviewers Checklist

netlify bot commented Oct 16, 2024 • edited Loading

✅ Deploy Preview for regen-website ready!

blushi commented Oct 16, 2024

erikalogie commented Oct 16, 2024

blushi commented Oct 16, 2024 • edited Loading

erikalogie commented Oct 16, 2024

blushi commented Oct 17, 2024

erikalogie commented Oct 17, 2024

erikalogie commented Oct 17, 2024

erikalogie commented Oct 17, 2024

blushi commented Oct 17, 2024

blushi commented Oct 17, 2024

erikalogie commented Oct 17, 2024

r41ph Oct 22, 2024 • edited Loading

Choose a reason for hiding this comment

blushi Oct 23, 2024

Choose a reason for hiding this comment

r41ph Oct 23, 2024

Choose a reason for hiding this comment

blushi Oct 23, 2024 • edited Loading

Choose a reason for hiding this comment

r41ph Oct 23, 2024

Choose a reason for hiding this comment

blushi Oct 23, 2024

Choose a reason for hiding this comment

r41ph Oct 23, 2024

Choose a reason for hiding this comment

r41ph left a comment

Choose a reason for hiding this comment

blushi commented Oct 9, 2024 •

edited

Loading

netlify bot commented Oct 16, 2024 •

edited

Loading

blushi commented Oct 16, 2024 •

edited

Loading

r41ph Oct 22, 2024 •

edited

Loading

blushi Oct 23, 2024 •

edited

Loading