fix: APP-410 save buy flow on last user interaction #2574

r41ph · 2025-01-08T12:19:49Z

Description

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

Now when users interact with the forms the information should be stored in the localstorage automatically even when the next button hasn't been clicked yet, and therefore, on navigating away and back to the same page, users should be in the same step and see the same form data as before navigating away.

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-2574--regen-marketplace.netlify.app/project/mai-ndombe-4/buy
Edit the form and navigate away then come back to the same page and verify the step and the form data is the same as before navigating away.

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 · 2025-01-08T12:20:08Z

✅ Deploy Preview for regen-website ready!

Name	Link
🔨 Latest commit	`662d86f`
🔍 Latest deploy log	https://app.netlify.com/sites/regen-website/deploys/6788e81bd574b30008a2b58a
😎 Deploy Preview	https://deploy-preview-2574--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.

netlify · 2025-01-08T12:20:13Z

✅ Deploy Preview for terrasos ready!

Name	Link
🔨 Latest commit	`662d86f`
🔍 Latest deploy log	https://app.netlify.com/sites/terrasos/deploys/6788e81b81fcbe0008090066
😎 Deploy Preview	https://deploy-preview-2574--terrasos.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 · 2025-01-08T12:31:51Z

@erikalogie see testing instructions

erikalogie · 2025-01-08T12:57:56Z

LGTM

… step 1

… step 2

blushi

Two additional comments:

We don't save values for the last step to local storage
When using credit card, if the user leaves the page while being on the last step, when he comes back, we should go back to step 2 (Payment info) because we need the user to re-enter credit card info since this is something we can't save to local storage of course

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

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

web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.tsx

r41ph · 2025-01-13T13:04:59Z

@erikalogie can you review the changes mentioned in this comment please #2574 (review)

erikalogie · 2025-01-13T20:38:31Z

LGTM

S4mmyb · 2025-01-13T23:14:37Z

LGTM !

blushi

If I set credits or currency amount to 0 then leave the page, now I get this error and I need to reset my buy-credits-... local storage value to make it work again

blushi · 2025-01-15T11:13:48Z

web-marketplace/src/components/organisms/AgreePurchaseForm/AgreePurchaseForm.Retirement.tsx

+    name: 'postalCode',
+  });
+
+  const { anonymousPurchase, followProject, subscribeNewsletter, agreeErpa } =


it would be more appropriate to move that getValues() into the useEffect that uses them, looks like we don't need them at the component top level

this is also going to cause a bug when we enable anonymousPurchase checkbox (commented for now) because we use it in the checked prop and getValues does not subscribe to input change, which will cause the checkbox to be unresponsive, that's why we use useWatch instead, which you commented

I believe this would only cause a bug if we wouldn't update the getValues when we uncomment the anonymousPurchase field. However, it'd probably be better to use useWatch for all fields. I've made the update, please review.

r41ph · 2025-01-15T20:27:57Z

If I set credits or currency amount to 0 then leave the page, now I get this error...

I've changed the way we handle onBlur when a user leaves the credits and currency inputs. Now if a user leaves the input with a value of 0 or empty '' I'm resetting the credits to 1 and then setting the corresponding currency amount. Also, I have updated the stripeOptions so it doesn't initialise with 0 when data.[CURRENCY_AMOUNT] is undefined.

@erikalogie @S4mmyb have a look how the currency and credits fields behave now when a user leaves the inputs with a value of zero or empty, let me know if you want to change anything.

@blushi although the CI shows some failed tests they weren't related with the code updates and a redeploy seems to have been successful: https://app.netlify.com/sites/regen-website/deploys/6788180794db4932a06dce1f

blushi

I've changed the way we handle onBlur when a user leaves the credits and currency inputs. Now if a user leaves the input with a value of 0 or empty '' I'm resetting the credits to 1 and then setting the corresponding currency amount.

We should also reset the SELL_ORDERS value in this case. If I set one of the field to 0, then the currency/amount fields do update but not the selected sell orders

Here's how my local storage looks like after that:

and then when I go through the end of the flow, I cannot purchase because I'm getting an "invalid amount" error from our server endpoint /marketplace/v1/stripe/create-payment-intent since quantity is NaN

blushi · 2025-01-16T09:09:43Z

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

+  const stripeAmount =
+    data?.[CURRENCY_AMOUNT] ||
+    getCurrencyAmount({
+      currentCreditsAmount: 1,
+      card: paymentOption === PAYMENT_OPTIONS.CARD,
+      orderedSellOrders: cardSellOrders,
+      creditTypePrecision: creditTypeData?.creditType?.precision,
+    }).currencyAmount;


should we put this in a useMemo too? getCurrencyAmount is a bit computation heavy

erikalogie · 2025-01-16T14:49:36Z

@erikalogie @S4mmyb have a look how the currency and credits fields behave now when a user leaves the inputs with a value of zero or empty, let me know if you want to change anything.

I think this is fine? @S4mmyb wdyt

r41ph requested a review from blushi January 8, 2025 12:31

r41ph added 2 commits January 8, 2025 13:18

feat: save form state in localstorage on user interaction in buy flow…

7d19bb6

… step 1

feat: save form state in localstorage on user interaction in buy flow…

0b294da

… step 2

r41ph force-pushed the fix-APP-410-save-buy-flow-on-last-user-interaction branch from fef3652 to 0b294da Compare January 8, 2025 13:18

blushi requested changes Jan 9, 2025

View reviewed changes

r41ph added 5 commits January 9, 2025 10:12

fix: get form values instead of watching them

c719088

fix: update sellOrders too when updating multistep data

3da5974

refactor: remove unneeded update to the multistep data

baf09b8

fix: add key prop to payment method mapping in PaymentInfoForm

353c8b3

feat: save step 2 state and return to step 1 when missing card details

fcdc6f4

r41ph requested a review from blushi January 13, 2025 13:03

blushi reviewed Jan 15, 2025

View reviewed changes

r41ph added 3 commits January 15, 2025 15:49

refactor: use useWatch instead of getValues

d5ada46

fix: stripe amount must be greater than 0 error

b53619a

fix: update cardDetailsMissingAtom atom types

741be13

r41ph requested a review from blushi January 15, 2025 20:28

blushi reviewed Jan 16, 2025

View reviewed changes

r41ph added 3 commits January 16, 2025 10:39

fix : update sell orders in onBlur event

3995fb6

feat: memoize stripeAmount

6eceb09

refactor: reset cardDetailsMissing on submit form

662d86f

r41ph requested a review from blushi January 16, 2025 11:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: APP-410 save buy flow on last user interaction #2574

fix: APP-410 save buy flow on last user interaction #2574

r41ph commented Jan 8, 2025 •

edited

Loading

netlify bot commented Jan 8, 2025 •

edited

Loading

netlify bot commented Jan 8, 2025 •

edited

Loading

r41ph commented Jan 8, 2025

erikalogie commented Jan 8, 2025

blushi left a comment

r41ph commented Jan 13, 2025

erikalogie commented Jan 13, 2025

S4mmyb commented Jan 13, 2025

blushi left a comment

blushi Jan 15, 2025

r41ph Jan 15, 2025

r41ph commented Jan 15, 2025

blushi left a comment •

edited

Loading

blushi Jan 16, 2025

erikalogie commented Jan 16, 2025

fix: APP-410 save buy flow on last user interaction #2574

Are you sure you want to change the base?

fix: APP-410 save buy flow on last user interaction #2574

Conversation

r41ph commented Jan 8, 2025 • edited Loading

Description

Author Checklist

How to test

Reviewers Checklist

netlify bot commented Jan 8, 2025 • edited Loading

✅ Deploy Preview for regen-website ready!

netlify bot commented Jan 8, 2025 • edited Loading

✅ Deploy Preview for terrasos ready!

r41ph commented Jan 8, 2025

erikalogie commented Jan 8, 2025

blushi left a comment

Choose a reason for hiding this comment

r41ph commented Jan 13, 2025

erikalogie commented Jan 13, 2025

S4mmyb commented Jan 13, 2025

blushi left a comment

Choose a reason for hiding this comment

blushi Jan 15, 2025

Choose a reason for hiding this comment

r41ph Jan 15, 2025

Choose a reason for hiding this comment

r41ph commented Jan 15, 2025

blushi left a comment • edited Loading

Choose a reason for hiding this comment

blushi Jan 16, 2025

Choose a reason for hiding this comment

erikalogie commented Jan 16, 2025

r41ph commented Jan 8, 2025 •

edited

Loading

netlify bot commented Jan 8, 2025 •

edited

Loading

netlify bot commented Jan 8, 2025 •

edited

Loading

blushi left a comment •

edited

Loading