✨(front) add new SaleTunnel 😎 #2355

NathanVss · 2024-04-05T15:42:45Z

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: openfun/cunningham#315

320059683-2fcfa982-f0bb-4009-8bc3-9cc4c559949f

V1 Todo List

V2 Todo List

jbpenrath · 2024-04-23T14:42:16Z

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

jbpenrath · 2024-04-23T14:42:37Z

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

src/frontend/scss/components/_content.scss

src/frontend/js/hooks/useMatchMedia.ts

src/frontend/js/components/PaymentScheduleGrid/_styles.scss

src/frontend/js/components/SaleTunnel/CreditCardSelector/_styles.scss

src/frontend/js/components/SaleTunnel/ProductPath/_styles.scss

src/frontend/js/components/PaymentInterfaces/Dummy.tsx

jbpenrath · 2024-04-23T15:18:16Z

Nice work, reviewable with ease 👏

rlecellier

I had a first look and i'll go back on it tomorow
next commit:
🧑‍💻(front) add Cunningham test utils

src/frontend/js/widgets/SyllabusCourseRunsList/index.tsx

rlecellier · 2024-04-23T14:59:15Z

src/frontend/scss/components/_content.scss

+
+.c__modal__backdrop {
+  // Make sure the overlay is above any random 0-1-2 z-indexes in content and 200 z-index to the top bar
+  z-index:300;


Should we use variable for z-index ?

We could but here it is a special case only because richie uses different z-indexes

src/frontend/js/hooks/useMatchMedia.ts

src/frontend/js/components/PaymentScheduleGrid/index.tsx

src/frontend/js/components/SaleTunnel/CreditCardSelector/index.spec.tsx

src/frontend/js/components/SaleTunnel/CreditCardSelector/index.tsx

src/frontend/js/components/SaleTunnel/ProductPath/_styles.scss

rlecellier

It's pretty and yes easy to review.
it's quite big so i'm sure i missed some things tho.

src/frontend/js/components/PaymentInterfaces/PayplugLightbox.tsx

src/frontend/js/components/PaymentInterfaces/__mocks__/index.tsx

src/frontend/js/components/SaleTunnel/GenericSaleTunnel.tsx

src/frontend/js/components/SaleTunnel/SaleTunnelInformation/index.tsx

rlecellier · 2024-04-24T13:34:19Z

src/frontend/js/components/SaleTunnel/GenericPaymentButton/index.tsx

+  // This pattern is ugly but I couldn't find a better way to achieve it in a nicer way.
+  // Without this, when we call onPaymentSuccess() directly from the after polling function,
+  // it is not the latest version of the function, so the value of `order` inside the context function (defined in GenericSaleTunnel.tsx)
+  // will be undefined, then calling onFinish(order) with an undefined order.
+  const onPaymentSuccessRef = useRef(onPaymentSuccess);
+  onPaymentSuccessRef.current = onPaymentSuccess;


What about moving most part of onPaymentSuccess here ?
We could have this function define here with :

WebAnalyticsAPIHandler()?.sendCourseProductEvent( CourseProductEvent.PAYMENT_SUCCEED, props.eventKey, ); // Once the user has completed the purchase, we need to refetch the orders // to update the ordersQuery cache invalidateOrders(); refetchOmniscientOrders(); queryClient.invalidateQueries({ queryKey: ['user', 'enrollments'] }); props.onFinish?.(order!);

GenericSaleTunnel would just keep the step change.

Then you already retrieve the new order in this component(GenericPaymentButton), it could be used for onFinish()

I understand your point. My approach is to make sure that this button can be generic, in the V2 we will have different buttons based on which type of sale tunnel we're in so I think having this logic inside the generic sale tunnel for know better split the SRPs

src/frontend/js/components/SaleTunnel/hooks/useTerms.tsx

src/frontend/js/components/SaleTunnel/GenericSaleTunnel.tsx

src/frontend/scss/components/_content.scss

jbpenrath · 2024-05-07T13:29:19Z

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 ?

src/frontend/js/components/SaleTunnel/CreditCardSelector/index.tsx

src/frontend/js/components/SaleTunnel/AddressSelector/CreateAddressFormModal.tsx

src/frontend/js/components/SaleTunnel/AddressSelector/EditAddressFormModal.tsx

src/frontend/js/components/SaleTunnel/AddressSelector/index.spec.tsx

jbpenrath · 2024-05-07T15:23:22Z

src/frontend/js/components/SaleTunnel/AddressSelector/index.tsx

+export function getAddressLabel(address: Address) {
+  const part = [
+    address.first_name,
+    address.last_name,
+    address.address,
+    address.postcode,
+    address.city,
+    address.country,
+  ].join(' ');
+  if (address.title) {
+    return `${address.title} - ${part}`;
+  }
+  return part;
+}


Yup, it could be cool on two lines, but I think we will have to use a custom component to use a smaller font-size.

Work
13 quai des anglais, 75000 Paris - FR

Home
11 rue stine, 75000 Paris - FR

src/frontend/js/components/SaleTunnel/GenericSaleTunnel.tsx

src/frontend/js/components/SaleTunnel/Sponsors/SaleTunnelSponsors.tsx

src/frontend/js/components/SaleTunnel/_styles.scss

src/frontend/js/components/SaleTunnel/index.full-process.spec.tsx

NathanVss · 2024-05-10T12:54:18Z

@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.

jbpenrath

I miss that, but you must not use color token directly in sass files. Instead you must create a dedicated scheme for a component then use r-theme-val to set the color in the component sass file.

e.g:

richie/src/frontend/js/pages/DashboardCreditCardsManagement/_styles.scss

Line 8 in ef6efb5

color: r-theme-val(dashboard-credit-cards, empty-color);

richie/src/frontend/scss/colors/_theme.scss

Lines 250 to 252 in 72653ad

    
           dashboard-credit-cards: ( 
        
             empty-color: r-color(slate-grey), 
        
           ),

src/frontend/js/components/SaleTunnel/AddressSelector/_styles.scss

src/frontend/js/components/SaleTunnel/AddressSelector/index.tsx

src/frontend/js/components/SaleTunnel/_styles.scss

src/frontend/js/components/SaleTunnel/SaleTunnelInformation/index.tsx

src/frontend/js/components/SaleTunnel/Sponsors/SaleTunnelSponsors.tsx

src/frontend/js/components/SaleTunnel/_styles.scss

jbpenrath

And finally it looks good to me. Well done ! 🚀

src/frontend/scss/colors/_theme.scss

The existing script was not generating all the files.

We will need this color in the PaymentSchedule component.

This in needed in order to be able to use Cunningham components in its children. We also define the modal parent selector.

This helper is currently needed to change the button fullWidth flags based on the size of the screen.

This component will be used to display upcoming and paid transactions.

For the address forms used in the sale tunnel we need to be able to reset its values.

This component is used to select / create or edit addresses.

The credit card logo used in the CreditCardSelector have a different style than the existing ones.

This component is used to select an existing credit card or to choose to register a new one during payment.

These components will be used by different sale tunnels to display informations for each product. There are generic components. It is mainly used to display target courses of the matching product course.

Those mainly focus on Select test utils that are really handy.

This one will be replaced with the new SaleTunnel, it is not longer needed.

The sale tunnel will be replaced by a new one that is able to handle numerous new features.

This new SaleTunnel is a one page components providing a versatile generic component that can be used to create various versions of sale tunnels. At the moment there are two main variants which are CertificateSaleTunnel and CredentialSaleTunnel.

We now want to use the new sale tunnel to buy product.

By adding this full name form we extract the responsability to save the form up to the sale tunnel via submitCallbacks. Under the hood it stays the same.

Previously we were using an input to render a read only field, which was not indeal. Here is the new design based on sketches.

It was lacking a11y, giving initials to a title is great, but it's better to give the full title via aria label.

When the avatar was used standalone the initials positionned with absolute we not contextualized via their own container, so they were positionned based on the nearest relative/absolute parent.

Previously the credit card logos were rendered on top of a blue background, but as it is not the case in the sale tunnel, we got white logos on top of white background, which was not ideal. Now the approach is to make sure logos are self-visible on their own.

NathanVss self-assigned this Apr 5, 2024

NathanVss force-pushed the feat/saletunnel-onepage branch from 281dbb7 to 8fac024 Compare April 22, 2024 14:36

NathanVss changed the title ~~WIP: One-page SaleTunnel~~ ✨(front) add new SaleTunnel 😎 Apr 22, 2024

NathanVss requested review from jbpenrath and rlecellier and removed request for jbpenrath April 22, 2024 15:36

jbpenrath added the improvement label Apr 23, 2024

NathanVss force-pushed the feat/saletunnel-onepage branch from 8fac024 to f7bb135 Compare April 23, 2024 09:17

jbpenrath reviewed Apr 23, 2024

View reviewed changes

rlecellier reviewed Apr 23, 2024

View reviewed changes

rlecellier reviewed Apr 24, 2024

View reviewed changes

NathanVss force-pushed the feat/saletunnel-onepage branch from 0d03ccd to 0ef4c66 Compare April 24, 2024 15:48

NathanVss requested review from rlecellier and jbpenrath April 24, 2024 15:48

jbpenrath reviewed Apr 24, 2024

View reviewed changes

src/frontend/js/components/SaleTunnel/GenericSaleTunnel.tsx Outdated Show resolved Hide resolved

src/frontend/scss/components/_content.scss Outdated Show resolved Hide resolved

NathanVss force-pushed the feat/saletunnel-onepage branch from 0ef4c66 to 1eaa2f8 Compare April 26, 2024 15:38

NathanVss force-pushed the feat/saletunnel-onepage branch 4 times, most recently from e7cd02d to 97bcb0a Compare May 7, 2024 12:35

NathanVss requested a review from jbpenrath May 7, 2024 12:37

jbpenrath reviewed May 7, 2024

View reviewed changes

NathanVss requested a review from jbpenrath May 13, 2024 13:34

jbpenrath reviewed May 14, 2024

View reviewed changes

NathanVss requested a review from jbpenrath May 15, 2024 09:31

jbpenrath approved these changes May 15, 2024

View reviewed changes

src/frontend/scss/colors/_theme.scss Outdated Show resolved Hide resolved

NathanVss force-pushed the feat/saletunnel-onepage branch from db976ea to a81aee6 Compare May 15, 2024 13:24

NathanVss added 20 commits May 15, 2024 15:36

🐛(front) fix Cunningham tokens generation

2805d53

The existing script was not generating all the files.

🔧(front) add mantis darken color to tokens

20c84b5

We will need this color in the PaymentSchedule component.

♻️(front) add CunninghamProvider to SyllabusCourseRunsList

099af6e

This in needed in order to be able to use Cunningham components in its children. We also define the modal parent selector.

✨(front) add useMatchMediaLg helper

b5a993f

This helper is currently needed to change the button fullWidth flags based on the size of the screen.

✨(front) add PaymentScheduleGrid component

02c36ab

This component will be used to display upcoming and paid transactions.

♻️(front) add reset function to DashboardAddressForm

e44e161

For the address forms used in the sale tunnel we need to be able to reset its values.

✨(front) add AddressSelector component

43cbc4a

This component is used to select / create or edit addresses.

✨(front) add variant for credit card logo

a1ff2a0

The credit card logo used in the CreditCardSelector have a different style than the existing ones.

✨(front) add CreditCardSelector component

4db2591

This component is used to select an existing credit card or to choose to register a new one during payment.

✨(front) add ProductPath components

1ebbcde

These components will be used by different sale tunnels to display informations for each product. There are generic components. It is mainly used to display target courses of the matching product course.

🧑‍💻(front) add Cunningham test utils

af22a6d

Those mainly focus on Select test utils that are really handy.

🔥(front) delete PaymentButton

503fd9e

This one will be replaced with the new SaleTunnel, it is not longer needed.

🔥(front) delete SaleTunnel

cc750e8

The sale tunnel will be replaced by a new one that is able to handle numerous new features.

✨(front) add SaleTunnel components

3a6bc29

This new SaleTunnel is a one page components providing a versatile generic component that can be used to create various versions of sale tunnels. At the moment there are two main variants which are CertificateSaleTunnel and CredentialSaleTunnel.

✨(front) use new SaleTunnel in PurchaseButton

e15f36b

We now want to use the new sale tunnel to buy product.

✨(front) adding full name form to sale tunnel

9268e83

By adding this full name form we extract the responsability to save the form up to the sale tunnel via submitCallbacks. Under the hood it stays the same.

✨(front) add plain email info in sale tunnel

327dbb1

Previously we were using an input to render a read only field, which was not indeal. Here is the new design based on sketches.

✨(front) add aria label to dashboard avatar

4e12dfb

It was lacking a11y, giving initials to a title is great, but it's better to give the full title via aria label.

🐛(front) fix position of dashboard avatar

28c0fe0

When the avatar was used standalone the initials positionned with absolute we not contextualized via their own container, so they were positionned based on the nearest relative/absolute parent.

NathanVss force-pushed the feat/saletunnel-onepage branch from a81aee6 to 32a29b4 Compare May 15, 2024 13:36

NathanVss enabled auto-merge (rebase) May 15, 2024 13:56

NathanVss merged commit 890ce08 into master May 15, 2024
20 checks passed

NathanVss deleted the feat/saletunnel-onepage branch May 15, 2024 13:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨(front) add new SaleTunnel 😎 #2355

✨(front) add new SaleTunnel 😎 #2355

NathanVss commented Apr 5, 2024 •

edited

jbpenrath commented Apr 23, 2024

jbpenrath commented Apr 23, 2024

jbpenrath commented Apr 23, 2024

rlecellier left a comment

rlecellier Apr 23, 2024

NathanVss Apr 24, 2024

rlecellier left a comment

rlecellier Apr 24, 2024

NathanVss Apr 24, 2024

jbpenrath commented May 7, 2024 •

edited

jbpenrath May 7, 2024

NathanVss commented May 10, 2024

jbpenrath left a comment

jbpenrath left a comment

	dashboard-credit-cards: (
	empty-color: r-color(slate-grey),
	),

✨(front) add new SaleTunnel 😎 #2355

✨(front) add new SaleTunnel 😎 #2355

Conversation

NathanVss commented Apr 5, 2024 • edited

Sketches

Help for reviewers

V1 Todo List

V2 Todo List

jbpenrath commented Apr 23, 2024

jbpenrath commented Apr 23, 2024

jbpenrath commented Apr 23, 2024

rlecellier left a comment

Choose a reason for hiding this comment

rlecellier Apr 23, 2024

Choose a reason for hiding this comment

NathanVss Apr 24, 2024

Choose a reason for hiding this comment

rlecellier left a comment

Choose a reason for hiding this comment

rlecellier Apr 24, 2024

Choose a reason for hiding this comment

NathanVss Apr 24, 2024

Choose a reason for hiding this comment

jbpenrath commented May 7, 2024 • edited

jbpenrath May 7, 2024

Choose a reason for hiding this comment

NathanVss commented May 10, 2024

jbpenrath left a comment

Choose a reason for hiding this comment

jbpenrath left a comment

Choose a reason for hiding this comment

NathanVss commented Apr 5, 2024 •

edited

jbpenrath commented May 7, 2024 •

edited