✨(front) add new SaleTunnel 😎

[NathanVss]

Sketches

https://www.figma.com/file/TZi5QztVxCxIaiH2kGDzm8/Untitled?type=design&node-id=63-2&mode=design&t=pO3rMuirTe10eCxP-0

Help for reviewers

In order to be able to compile and test this PR you need to build your project with the following line in your package.json

"@openfun/cunningham-react": "file:/Users/<UserName>/cunningham/packages/react",

You need to checkout and yarn install your local Cunningham project on this PR: https://github.com/openfun/cunningham/pull/315

V1 Todo List

• [x] sketches
• [x] Mocked dev
• [x] Responsive
• [x] a11y labels
• [x] Translations
• [x] Credit Card Selector
  • [x] Dev
  • [x] Allow to create a new credit card
  • [x] Test
• [x] Address Selector
  • [x] Dev
  • [x] Test
• [x] Selecting an existing payment method should use one click payment
• [x] Order handling
• [x] Payment box
• [x] Handle order groups
• [x] CredentialSaleTunnel
• [x] CertificateSaleTunnel
• [x] Implement multiple Sale Tunnels ( modular component )
• [x] Handle events
• [x] Handle sponsors
• [x] Full journey test
• [x] Delete old Sale Tunnel
• [x] Migrate PaymentInterface mocks
• [x] Implement full name field
• [x] Include email field
• [x] Fix mono select edit selected item
• [ ] Fix cunningham modal select menu overflow hidden

V2 Todo List

• [ ] Payment Schedule
  • [x] Mocked dev
  • [ ] Backend dev
  • [ ] Test
• [ ] Contract signing

[jbpenrath]

I'm not able to close the modal on the validation step.

[jbpenrath]

I'll add right now the total section with the info banner.

[jbpenrath]

Nice work, reviewable with ease 👏

[jbpenrath]

Few feedbacks on UI/UX :

1. Email address IMO it's hard to see the email here as the helper text has the same font size, the same color. Maybe just using a lighter color for the helper text could help to structure information ?

2. Address creation When a user has a registered address, this one is selected by default. As this one is selected, there is a button to edit this address. I'm afraid that the ux of that is weird as to use a new address, I feel most user will click on edit button to change address instead of unselect the address then click on the create button.

3. Default credit card icon is white The default credit icon is white so it is not visible.

4. Credit card selection I wonder if the pencil without label to switch credit card cannot be confusing? I'm still wonder if it would be not better to display the list of credit card with a radio button directly ?

[NathanVss]

@jbpenrath I can't reply to your comment about having address title on top (why?)

Here is the result. We can only render the custom content in the dropdown, inside the field it break the height of the select which has a hard-defined height, so I used the option to display the label instead.