feat: APP-201 buy credits flow step 1 #2408

r41ph · 2024-07-22T19:21:06Z

Description

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

Implementation in Storybook of the UI for the "buy credits flow step 1"
Migration to Vitest in web-marketplace and web-components
Some components have been refactored to reuse them for this issue.
Remove /web-auth workspace
Fix Buffer is not defined error in Storybook, closes: Fix Buffer issue on some stories rnd-dev-team#1799

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

No wrapper component for the whole step 1 has been implemented for now (will be in a follow-up integration task)

Individual components to review:
https://deploy-preview-2408--regen-storybook.netlify.app/?path=/story/denomiconwithcurrency--icon-and-currency
https://deploy-preview-2408--regen-storybook.netlify.app/?path=/story/cards-ordersummarycard--default
https://deploy-preview-2408--regen-storybook.netlify.app/?path=/story/denomiconwithcurrency--with-tooltip
https://deploy-preview-2408--regen-storybook.netlify.app/?path=/story/supcurrencyandamount--default

Fixed stories
https://deploy-preview-2408--regen-storybook.netlify.app/?path=/story/marketplace-organisms-choosecreditsform--choose-credits
https://deploy-preview-2408--regen-storybook.netlify.app/?path=/story/marketplace-molecules-creditsamount--credits-amount-card
https://deploy-preview-2408--regen-storybook.netlify.app/?path=/story/marketplace-molecules-creditsamount--credits-amount-crypto

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-07-22T19:21:22Z

✅ Deploy Preview for regen-website ready!

Name	Link
🔨 Latest commit	`88997ab`
🔍 Latest deploy log	https://app.netlify.com/sites/regen-website/deploys/66df21aeeee7320008e7e777
😎 Deploy Preview	https://deploy-preview-2408--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

I've went through half of the PR, will continue next week.
Could you add some documentation about the tests setup you added? In the root README

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

tailwind.common.js

tailwind.css

web-components/src/components/PrefinanceTag/PrefinanceTag.tsx

web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.tsx

web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.tsx

web-components/src/components/buttons/EditButtonIcon.tsx

web-components/src/components/buttons/TextButton.tsx

web-components/src/components/form/BuyCreditsForm/BuyCreditsForm.tsx

blushi · 2024-07-25T13:14:53Z

@erikalogie see testing instructions
a fix will be needed before you can test some of the stories as mentioned in the PR description

web-components/src/components/form/BuyCreditsForm/BuyCreditsForm.tsx

blushi

For crypto purchase, when selecting a currency, it should say "1000 credits available in ${selectedCurrency}" because the number of credits available won't be the same based on the selected currency since for each sell order, the seller specifies one "ask denom": https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=67-55906&t=HKrNrjQMGmY10ZLM-0

web-components/src/components/form/BuyCreditsForm/BuyCreditsForm.tsx

erikalogie · 2024-07-25T20:11:08Z

Cards : OrderSummaryCard - With Payment Details ⋅ Storybook 2024-07-25 16-02-24

A few small pieces of feedback, overall looks great

r41ph · 2024-08-01T17:18:10Z

@blushi @erikalogie All requested updates have been implemented, but we are still getting the error in some components in Storybook, so still WIP. For details on this see #2408 (comment)

web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.schema.tsx

erikalogie · 2024-08-05T12:28:45Z

Ok great. This looks good. If it is possible to fix the baselines of the text so they all align, that would be awesome.

Cards : OrderSummaryCard - Default ⋅ Storybook 2024-08-05 08-26-32

r41ph · 2024-08-05T14:25:00Z

@erikalogie the issue with Storybook has been fixed. See links to fixed stories in the description please.

.eslintrc.js

web-components/src/components/PrefinanceTag/PrefinanceTag.tsx

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

web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.types.tsx

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

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

web-storybook/.storybook/preview.jsx

web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.schema.tsx

web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.tsx

erikalogie · 2024-08-06T13:55:43Z

Looks good!

Some small feedback, this is my fault for not providing a mobile view of the crypto view:

Fix this issue with the amount:
.
Make some small tweaks to the sizing of the fonts in the crypto purchase and advanced settings sections on mobile, including the space between the sections I think would look better if it were less.

This is the rollover state for the unselected tab: https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=2874-106112&t=bidt1T6CnWSUAMI3-1

This should get fixed:

erikalogie · 2024-08-07T17:35:36Z

organisms : ChooseCreditsForm - Choose Credits Step 1 ⋅ Storybook 2024-08-07 13-34-32

One last thing, if you could remove the "in USD" from the "buy with credit card" version

blushi

Nice work! Still a few nits.

Thanks for adding all the tests. it'd be nice to give a small presentation of that sometimes during the architecture call so we start using those more widely and decide what's the strategy for adding tests to existing components.

web-storybook/.storybook/main.js

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

web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.Content.tsx

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

web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.CryptoOptions.tsx

blushi

LGTM, pre-approving, pending fixing the TS error in web-marketplace that cause CI to fail and @erikalogie's QA approval

blushi · 2024-08-26T07:18:45Z

@erikalogie could you have a final look at this?

…lace

…ing-library/react'

…rom useFormContext

… in TextField

…ores

r41ph requested a review from blushi July 22, 2024 19:31

blushi changed the title ~~Feat app 201 buy credits flow step 1~~ feat: APP-201 buy credits flow step 1 Jul 25, 2024

blushi reviewed Jul 25, 2024

View reviewed changes

web-components/src/components/form/BuyCreditsForm/BuyCreditsForm.tsx Outdated Show resolved Hide resolved

blushi reviewed Jul 25, 2024

View reviewed changes

web-components/src/components/form/BuyCreditsForm/BuyCreditsForm.tsx Outdated Show resolved Hide resolved

blushi reviewed Jul 25, 2024

View reviewed changes

web-components/src/components/form/BuyCreditsForm/BuyCreditsForm.tsx Outdated Show resolved Hide resolved

blushi reviewed Jul 25, 2024

View reviewed changes

web-components/src/components/form/BuyCreditsForm/BuyCreditsForm.tsx Outdated Show resolved Hide resolved

r41ph force-pushed the feat-APP-201-buy-credits-flow-step-1 branch from 504d17c to b184ab7 Compare August 1, 2024 16:31

blushi reviewed Aug 5, 2024

View reviewed changes

web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.schema.tsx Outdated Show resolved Hide resolved

web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.schema.tsx Outdated Show resolved Hide resolved

r41ph requested a review from blushi August 5, 2024 14:25

blushi requested changes Aug 6, 2024

View reviewed changes

blushi reviewed Aug 6, 2024

View reviewed changes

web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.schema.tsx Outdated Show resolved Hide resolved

blushi reviewed Aug 6, 2024

View reviewed changes

web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.tsx Outdated Show resolved Hide resolved

blushi reviewed Aug 6, 2024

View reviewed changes

web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.tsx Outdated Show resolved Hide resolved

r41ph force-pushed the feat-APP-201-buy-credits-flow-step-1 branch from 43d39ce to 7a61b7c Compare August 8, 2024 08:47

r41ph requested a review from blushi August 8, 2024 09:01

blushi reviewed Aug 8, 2024

View reviewed changes

web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.CryptoOptions.tsx Outdated Show resolved Hide resolved

blushi approved these changes Aug 8, 2024

View reviewed changes

r41ph force-pushed the feat-APP-201-buy-credits-flow-step-1 branch from 69d5a28 to 5596739 Compare August 8, 2024 12:57

Ralph added 29 commits September 9, 2024 17:25

fix: pass missing props to CreditsAmount stories

5f0091e

refactor: update CreditsAmount stories location

4f2c326

fix: revert lingui config back

3db190b

refactor: remove unneeded css classes

cf56ae0

chore: update README file with testing instructions

bcf0074

refactor: have separated test-utils in web-components and web-marketp…

9ea62c4

…lace

refactor: update web-component tests to get render method from '@test…

b29db0b

…ing-library/react'

refactor: update ChooseCreditsForm form to pass retiring as boolean

eb8dbb7

refactor: update AdvanceSettings component to get the form register f…

a0d252b

…rom useFormContext

fix: ts error in CreditsAmount stories

212c31d

fix: merge error

282ea00

refactor: update choose amount functionality + tests

983dea2

feat: handle buy credits form errors + refactor

900562b

refactor: format spendingCap error message

91f4a48

feat: add lingui messages

6b4203f

fix: failing tests

23388c8

fix: lingui errors

bba6811

chore: update lingui catalogs

32ec974

chore: update @netlify/plugin-nextjs to version 5.7.0

506411c

fix: move constants to web-marketplace

d6a1af3

chore: update .po files

af124d1

refactor: update CurrencyInput and CreditsInput use of type attribute…

de24096

… in TextField

fix: file name typo

c58902e

refactor: add StorybookI18nProvider

e281f31

fix: denom icon misalignment

98dc470

feat: sync credit vintage credits with form credits availability + ch…

98167ef

…ores

chore: update .po files

324264e

fix: CreditsAmount tests

b72f993

fix: CreditsAmount Story + move getVintageCredits to utils

88997ab

r41ph force-pushed the feat-APP-201-buy-credits-flow-step-1 branch from 7e3d392 to 88997ab Compare September 9, 2024 16:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: APP-201 buy credits flow step 1 #2408

feat: APP-201 buy credits flow step 1 #2408

r41ph commented Jul 22, 2024 •

edited by blushi

Loading

netlify bot commented Jul 22, 2024 •

edited

Loading

blushi left a comment

blushi commented Jul 25, 2024

blushi left a comment

erikalogie commented Jul 25, 2024

r41ph commented Aug 1, 2024

erikalogie commented Aug 5, 2024

r41ph commented Aug 5, 2024

erikalogie commented Aug 6, 2024 •

edited

Loading

erikalogie commented Aug 7, 2024

blushi left a comment

blushi left a comment •

edited

Loading

blushi commented Aug 26, 2024

feat: APP-201 buy credits flow step 1 #2408

Are you sure you want to change the base?

feat: APP-201 buy credits flow step 1 #2408

Conversation

r41ph commented Jul 22, 2024 • edited by blushi Loading

Description

Author Checklist

How to test

Reviewers Checklist

netlify bot commented Jul 22, 2024 • edited Loading

✅ Deploy Preview for regen-website ready!

blushi left a comment

Choose a reason for hiding this comment

blushi commented Jul 25, 2024

blushi left a comment

Choose a reason for hiding this comment

erikalogie commented Jul 25, 2024

r41ph commented Aug 1, 2024

erikalogie commented Aug 5, 2024

r41ph commented Aug 5, 2024

erikalogie commented Aug 6, 2024 • edited Loading

erikalogie commented Aug 7, 2024

blushi left a comment

Choose a reason for hiding this comment

blushi left a comment • edited Loading

Choose a reason for hiding this comment

blushi commented Aug 26, 2024

r41ph commented Jul 22, 2024 •

edited by blushi

Loading

netlify bot commented Jul 22, 2024 •

edited

Loading

erikalogie commented Aug 6, 2024 •

edited

Loading

blushi left a comment •

edited

Loading