feat: APP-267 accounts orders page #2483

r41ph · 2024-09-25T14:12:51Z

Description

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

Author Checklist

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

See stories in Storybook: https://deploy-preview-2483--regen-storybook.netlify.app/?path=/story/marketplace-organisms-order--default
See the Orders page in the marketplace: https://deploy-preview-2483--regen-marketplace.netlify.app/profile/orders

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-25T14:13:08Z

✅ Deploy Preview for regen-website ready!

Name	Link
🔨 Latest commit	`d235204`
🔍 Latest deploy log	https://app.netlify.com/sites/regen-website/deploys/670663bf01e19100080b8a5d
😎 Deploy Preview	https://deploy-preview-2483--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-25T14:33:25Z

@erikalogie see testing instructions

erikalogie · 2024-09-25T18:52:06Z

https://deploy-preview-2483--regen-storybook.netlify.app/?path=/story/marketplace-organisms-order--default

@r41ph you did an awesome job with this! It really looks great, just a few little tiny details.

Monosnap Marketplace : Organisms : Order - Pending Order ⋅ Storybook 2024-09-25 14-43-10

Monosnap Marketplace : Organisms : Order - Prefinance ⋅ Storybook 2024-09-25 14-41-37

Monosnap Marketplace : Organisms : Order - Tradable Order ⋅ Storybook 2024-09-25 14-49-56

Monosnap Regen Marketplace 2024-09-25 14-46-27

r41ph · 2024-09-26T10:52:42Z

@r41ph you did an awesome job with this! It really looks great, just a few little tiny details.

@erikalogie thanks! Please review the style updates addressing your comments.

erikalogie · 2024-09-26T15:43:13Z

@r41ph looks awesome!

One final small thing, and otherwise LGTM!

r41ph · 2024-09-30T08:12:28Z

@erikalogie have another look when you get a chance please

tailwind.css

web-components/src/components/icons/BlockchainIcon.tsx

web-components/src/components/icons/ReceiptIcon.tsx

web-components/src/components/inputs/new/EditableInput/EditableInput.test.tsx

web-components/src/theme/muiTheme.ts

blushi · 2024-09-30T08:02:09Z

web-marketplace/src/components/organisms/Order/Order.Credits.tsx

+ const { credits, price, denom } = data as CreditsData;
+ const totalPrice = +credits * +price;
+ return (
+ <section className="flex gap-20">


instead of always repeating this same structure we could have a reusable component for all these sections that could take a title, icon and some row items as props

In this case, I think creating a reusable component for these sections may add unnecessary complexity because the logic for each component is slightly different. While they share some structure (title, icon, rows), combining them into a single component would require a few conditional checks that would make them harder to work with. I believe that keeping them separated while using shared internal components allows each component to be simple to maintain and update.

then what about just having a reusable component with title, icon and children, which makes it more flexible?

web-marketplace/src/components/organisms/Order/Order.MakeAnonymous.tsx

web-marketplace/src/components/organisms/Order/Order.SummaryRow.tsx

web-marketplace/src/components/organisms/Order/Order.mock.tsx

erikalogie · 2024-09-30T12:14:32Z

@r41ph looks great except now the left-alignment got messed up a bit:

r41ph · 2024-09-30T12:32:24Z

@erikalogie please have another look

erikalogie · 2024-09-30T15:58:50Z

so nice! LGTM

blushi

I think the font for those labels is supposed to be Muli, not Lato, see https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=3234-100679&node-type=instance&m=dev

I believe we could potentially reuse our TextButton component (getting rid of the hovering changing color) and this is how it's defined in figma as well

web-marketplace/src/components/organisms/Order/Order.Summary.tsx

web-marketplace/src/components/organisms/Order/Order.MakeAnonymous.tsx

web-marketplace/src/components/organisms/Order/Order.Summary.tsx

web-marketplace/src/components/organisms/Order/Order.SummaryRow.tsx

web-marketplace/src/components/organisms/Order/Order.Summary.tsx

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

web-marketplace/src/components/organisms/Order/Order.Summary.tsx

clevinson · 2024-10-02T23:52:03Z

Nice work! just QA'd the flows and looks good to me!

One small on text is that I think it looks better if it says "Credit issuance pending" instead of "Credits issuance pending".

r41ph · 2024-10-03T08:57:28Z

One small on text is that I think it looks better if it says "Credit issuance pending" instead of "Credits issuance pending".

And the other one: "Credits delivered", is this alright in plural?

erikalogie · 2024-10-03T13:08:41Z

One small on text is that I think it looks better if it says "Credit issuance pending" instead of "Credits issuance pending".

And the other one: "Credits delivered", is this alright in plural?

Yes this is good

blushi

LGTM pre-approving
Pending small UI issue to be fixed for the transaction hash, the ellipsis is not underlined as it's shown on figma:

blushi · 2024-10-08T10:34:26Z

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

 name: 'editable-credits',
 });
- fireEvent.change(editInput, { target: { value: 7 } });
+ if (editInput) {


looks like editInput is always null

nice catch, thanks

…position

…enom'

…nd icon as props

…er updating findDisplayDenom based on APP-204

r41ph requested a review from blushi September 25, 2024 14:33

r41ph force-pushed the feat-APP-267-accounts-orders-oage branch from da00326 to a6b6ece Compare September 26, 2024 10:37

blushi requested changes Sep 30, 2024

View reviewed changes

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

r41ph requested a review from erikalogie September 30, 2024 16:49

blushi reviewed Oct 1, 2024

View reviewed changes

r41ph force-pushed the feat-APP-267-accounts-orders-oage branch from 4d6e3f3 to c04c4c6 Compare October 1, 2024 10:19

r41ph requested a review from blushi October 1, 2024 10:25

blushi reviewed Oct 2, 2024

View reviewed changes

r41ph force-pushed the feat-APP-267-accounts-orders-oage branch 2 times, most recently from d4238ef to 16d5609 Compare October 2, 2024 14:44

r41ph requested a review from blushi October 3, 2024 14:00

blushi approved these changes Oct 7, 2024

View reviewed changes

blushi reviewed Oct 8, 2024

View reviewed changes

r41ph and others added 4 commits October 9, 2024 11:40

feat: Add ReceiptIcon component and stories

a0ce686

feat: add OrderLabel component

3413444

feat: Add Orders page component

604a714

feat: Add BlockchainIcon and PaymentInfoIcon components

8e5f9e1

r41ph added 27 commits October 9, 2024 11:41

fix: OrderSummaryCard and EditableInput tests after rebase

81b5536

chore: update .po files

67b7776

chore: add new dark green color to Tailwind and MUI themes

d401155

refactor: update PaymentInfoData cardInfo type to cardLast4

2a64472

style: small layout updates

315eb0a

chore: make new dark green color optional

15b037d

chore: update .po files

8009c6f

style: update OrderCredits component to adjust DenomIconWithCurrency …

c3dc3fe

…position

feat: address PR feedback

5f3da31

chore: update .po files

7c8051d

refactor: update OrderCredits stories to use 'askDenom' instead of 'd…

87c4655

…enom'

feat: more PR feedback

e81fa67

refactor: remove unused class

a0ccfba

refactor: remove unused class

84b88a0

refactor: update Order sections to share wrapper component

484d1de

refactor: update order summary sections to use static content title a…

7817ee3

…nd icon as props

fix: tests and stories after order summary sections update

6aaa857

refactor: update font family in Order.SummaryRow component Title

00944cf

chore: update .po files

180fe08

feat: address PR feedback

9be669e

fix: revert deletion of DenomIconWithCurrecy and fix build errors aft…

0ba3624

…er updating findDisplayDenom based on APP-204

chore: update .po files

5378240

fix: typo

0ac0557

chore: update .po files

a8b7ae5

fix: Order tests

66117c7

style: underline ellipsis

0c858e2

fix: test case in OrderSummaryCard

d235204

r41ph force-pushed the feat-APP-267-accounts-orders-oage branch from d0ec96e to d235204 Compare October 9, 2024 11:06

r41ph merged commit 4a295a8 into dev Oct 9, 2024
14 checks passed

r41ph deleted the feat-APP-267-accounts-orders-oage branch October 9, 2024 11:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: APP-267 accounts orders page #2483

feat: APP-267 accounts orders page #2483

r41ph commented Sep 25, 2024 •

edited

Loading

netlify bot commented Sep 25, 2024 •

edited

Loading

r41ph commented Sep 25, 2024

erikalogie commented Sep 25, 2024

r41ph commented Sep 26, 2024

erikalogie commented Sep 26, 2024

r41ph commented Sep 30, 2024

blushi Sep 30, 2024

r41ph Sep 30, 2024

blushi Sep 30, 2024

erikalogie commented Sep 30, 2024

r41ph commented Sep 30, 2024

erikalogie commented Sep 30, 2024

blushi left a comment

clevinson commented Oct 2, 2024

r41ph commented Oct 3, 2024 •

edited

Loading

erikalogie commented Oct 3, 2024

blushi left a comment

blushi Oct 8, 2024

r41ph Oct 9, 2024

feat: APP-267 accounts orders page #2483

feat: APP-267 accounts orders page #2483

Conversation

r41ph commented Sep 25, 2024 • edited Loading

Description

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

Author Checklist

How to test

Reviewers Checklist

netlify bot commented Sep 25, 2024 • edited Loading

✅ Deploy Preview for regen-website ready!

r41ph commented Sep 25, 2024

erikalogie commented Sep 25, 2024

r41ph commented Sep 26, 2024

erikalogie commented Sep 26, 2024

r41ph commented Sep 30, 2024

blushi Sep 30, 2024

Choose a reason for hiding this comment

r41ph Sep 30, 2024

Choose a reason for hiding this comment

blushi Sep 30, 2024

Choose a reason for hiding this comment

erikalogie commented Sep 30, 2024

r41ph commented Sep 30, 2024

erikalogie commented Sep 30, 2024

blushi left a comment

Choose a reason for hiding this comment

clevinson commented Oct 2, 2024

r41ph commented Oct 3, 2024 • edited Loading

erikalogie commented Oct 3, 2024

blushi left a comment

Choose a reason for hiding this comment

blushi Oct 8, 2024

Choose a reason for hiding this comment

r41ph Oct 9, 2024

Choose a reason for hiding this comment

r41ph commented Sep 25, 2024 •

edited

Loading

netlify bot commented Sep 25, 2024 •

edited

Loading

r41ph commented Oct 3, 2024 •

edited

Loading