Cred customer purchasing

[abhigyanghosh30]

Done

• A page for buying activation keys for CUE0.1 Exam

QA

• Check out this feature branch
• Run the site using the command ./run serve or dotrun
• Visit /credentials/shop
  • Select quantity
  • Pay
  • New activation keys should be visible in /credentials/shop/manage

Issue / Card

Fixes #WD-3821

Help

QA steps - Commit guidelines

[webteam-app]

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

[codecov]

Codecov Report

Merging #12868 (60168cd) into main (6733bbd) will decrease coverage by 0.11%.
The diff coverage is 50.00%.

@@            Coverage Diff             @@
##             main   #12868      +/-   ##
==========================================
- Coverage   74.90%   74.80%   -0.11%     
==========================================
  Files         107      107              
  Lines        2873     2881       +8     
  Branches      928      936       +8     
==========================================
+ Hits         2152     2155       +3     
- Misses        699      704       +5     
  Partials       22       22              

Files Changed	Coverage Δ
.../subscribe/checkout/components/Summary/Summary.tsx	79.68% <50.00%> (-6.03%)	⬇️

[albertkol]

Why do you duplicate the whole Checkout app? You should not do that.

Your credential shop should set the product data in the localstorage and reuse the checkout app. You needed a custom redirect and you added an extra parameter for that. That's all correct.
When you add that parameter you have to make sure on all other places the Checkout component is being used, those would still work.

What else is the Checkout missing that requires you to duplicate this whole logic?

[abhigyanghosh30]

I am not duplicating the Checkout here, I am duplicating the static/js/src/advantage/subscribe/checkout/app.tsx. app.tsx is not an exported component so it won't work outside your application, hence I have to duplicate it. The thing is that you are initializing the product in the base app itself but I have to do it in a separate checkout component which then references your original checkout component. I think the component could be renamed to something like CheckoutWrapper to avoid confusion.

[mrgnr]

Nice work! 🚀

[albertkol]

👍

[abhigyanghosh30]

Revoking the code and QA checks as specs for this have changed

[jpmartinspt]

@abhigyanghosh30 can you please rebase?

[jpmartinspt]

@abhigyanghosh30 prettier and linting are failing, can you fix that?

[abhigyanghosh30]

Yes. But webhook responses have stopped working. Fixing that first

[jpmartinspt]

@abhigyanghosh30 check-prettier still red.