WIP - Checkout redesign

[ClementChaumel]

Done

• Turned the modal into a checkout "page"
• got rid of the duplicated buy button component

QA

• go to https://ubuntu-com-12013.demos.haus/advantage
• make a logged in UA purchase
• make a logged in Blender purchase
• make a logged in Offer purchase
• make a logged out UA purchase
• make a logged out Blender purchase

Missing

• Free trial
• Renewals

[webteam-app]

Demo starting at https://ubuntu-com-12013.demos.haus/advantage

[albertkol]

Initial feedback:

• [x] VAT is not immediately calculated on country/VAT number input (details for the endpoint: https://github.com/canonical/ubuntu.com/pull/11687)
• [x] Step 3 is not in edit on page load for guest user:
• [x] scrolling in the checkout overlay is a bit weird; also it covers the menu, not sure if it's intended @wgx ?
• state of the form is not storing the input; also refreshing the page takes me back to product selection, not sure if it's intended @wgx ?
• [ ] I recommend moving the captcha field at the end of the from, getting any errors de-selects the captcha and you have re-check it every time @wgx thoughts?
• [ ] as a guest with an UO account after signing in I am taken back to the product selector rather than checkout
• [x] we had intentions to move to this endpoint for the purchase (details: https://github.com/canonical/ubuntu.com/pull/11367) which can be used for shop, renewals and offer purchases; additionally it ensures user accounts (if missing) and updates account info; but I suppose that can be achieved as a separate step
• [x] renewal purchase overlay is weirdly positioned

[codecov[bot]]

Codecov Report

Merging #12013 (d56680b) into main (103971d) will decrease coverage by 63.46%. The diff coverage is n/a.

:exclamation: Current head d56680b differs from pull request most recent head 3513d04. Consider uploading reports for the commit 3513d04 to get more accurate results

@@             Coverage Diff             @@
##             main   #12013       +/-   ##
===========================================
- Coverage   63.46%        0   -63.47%     
===========================================
  Files         117        0      -117     
  Lines        2704        0     -2704     
  Branches      798        0      -798     
===========================================
- Hits         1716        0     -1716     
+ Misses        946        0      -946     
+ Partials       42        0       -42     

Impacted Files	Coverage Δ
static/js/src/PurchaseModal/PurchaseModal.tsx
static/js/src/PurchaseModal/utils/utils.ts
...js/src/advantage/offers/components/Offer/Offer.tsx
...js/src/advantage/offers/hooks/usePurchaseOffer.tsx
...e/subscribe/blender/components/Summary/Summary.tsx
...age/subscribe/react/components/Summary/Summary.tsx
...ic/js/src/advantage/subscribe/react/utils/utils.ts
static/js/src/advantage/tests/utils.tsx
...criptions/SubscriptionList/ListGroup/ListGroup.tsx
...etails/DetailsTabs/components/FeaturesTab/utils.ts
... and 103 more

[albertkol]

• [x] scrolling in the checkout overlay is a bit weird; also it covers the menu, not sure if it's intended?
• [x] title of the checkout says Ubuntu Advantage
• [ ] Adding the VAT does immediately update the price of the purchase. Removing it does not decrease it again. Even if I switch to a non-VAT country same behaviour.
• [x] Confirm and buy is missing the new checkbox added by Min last week
• [x] Scrolling hides the checkout
• [x] guest trial purchase fails. it seems to not pass any products data with the response
• [ ] logged in trial purchase fails. it seems to not pass any products data with the response
• [ ] Do we no longer store the state of the checkout anymore? Including status that it's open/closed and the data stored inside?
• [x] Success redirect should be to /pro/dashboard

Still need to QA Renewal purchases, Offer purchases. And everything with stripe failing credit card journeys.

[ClementChaumel]

Can't reproduce the VAT behaviour you're describing @albertkol

[albertkol]

Can't reproduce the VAT behaviour you're describing @albertkol

• be logged out
• select a product and reach a the checkout
• insert VAT
• save
• price will be updated to add tax
• edit step 1 and remove VAT
• price will not update

@ClementChaumel

[albertkol]

Docs with issues I find from the QA: https://docs.google.com/document/d/1uCC1Q-vSb6j3FfNjNgzO7zqquQgtHvT1zu6gzIIbSBc/edit#