Add validation components to cart/checkout, add redemption

[weronika-kurczyna]

What

• Added information about applied promotions, coupons and grand price to cart-drawer-summary, order-summary

• Added information about all discounts to bag-summary-mobile (mobile version of checkout)

• Created a new commerce-wrapper for create-order so that the order has information about discounts and reduced price

• If it exists, send to Stripe grandPrice, then use totalPrice

• Fixed some typos in functions/files naming

• Added stackable redemption to checkout

• Prevent values from being reset when an invalid coupon has been used, do not allow adding an invalid coupon to cart

In progress

(another branch: wk/commerce-wrapper-unit-discount)

• Add unit type discounts (add free product to cart)

Next steps

• Use Qualification API
• try to fix the errors that appear in the PR checks pnpm jest --ci --coverage --coverageReporters json-summary
• Improve error handling
• Find out how to use Storybook (whether we should have access to this site - https://storybook.composable.com)
  • parts of the documentation that mention Storybook are commented out
  • the readme of the storybook says: "Coming soon"
  • following the steps of the Storybook instruction, there is no way to run it
  • we may need to contact support about this
• refactor as much as possible, use more appropriate names, create more directories etc.
• if agreed, consider how to separate the ComposableUI frontend and components typical for Voucherify

Bugs

• When you try to add the same coupon for the second time you will get a runtime error

[marcin-slezak]

I miss the consistency in UI components (drawer vs cart summary vs order summary):

• order of presented information
  • cart compontent: subtotal, delivery, taxes, order total, promotions, coupons, all discounts, grand total
  • drawer component: promotions, coupons, subtotal, taxes, delivery, estimated total, all discounts, grand total
  • order page: promotions, coupons, subtotal, delivery, taxes, all discounts, grand total
• mixed naming: estimated total vs order total vs grand total
• where we put horizontal line
• promotions badges are not visible on drawer component and order pages
• spacing looks bad between promotions, coupons on drawer and order pages

[weronika-kurczyna]

Cart Drawer

• added grey stacks for promotions and coupon codes (additional appearance changes may still be required, for example the spacing in the coupon codes, appearance of the header and warning message)
• fixed the spacing, padding, the order total, all discounts and grand total are written in a smaller font to match the text above, we can decide together which font size is better
• I did not changed the order to be Subtotal -> Promotions -> Coupons -> Order Total -> All Discounts -> Grand Total because in my opinion this version looks better but we can discuss it

[weronika-kurczyna]

• I'm planning to change the warning a little and make it disappear after 2 seconds (it doesn't look great now)
• fixed the order
  mobile view:

- i'm not sure yet what would be better to display below the "My Cart", whether the order total or grand total 🤔

[weronika-kurczyna]

Checkout page:

Mobile:

the grand total is displayed at the top

[weronika-kurczyna]

order summary:

[weronika-kurczyna]

also, I removed this button in the mobile view: