[Woo POS] Small updates to checkout screen per M2 Design

[backwardstruck]

Closes:

#11861

Description

Adds a compose card underneath both totals and cart screens in the POS feature. Currently, totals and cart are shown as two separate cards when in the checkout state. This enhancement ensures a unified card appearance that adheres to the Figma design.

Changes include modifications to WooPosHomeScreen to integrate the compose card that envelops both the totals and cart sections.

New Design:

Old Design:

Steps to reproduce

To test the changes made in this PR, follow the steps outlined below:

1. Navigate to the POS screen
2. Add items to the cart and proceed to checkout.
3. Ensure the design specifications are met, focusing on layout and style consistency.

Testing information

• Devices Used: Tested on tablet emulator.
• Alternate Workflows:
  • Verify edge cases where the cart has numerous items or is empty.
• Affected Areas:
  • Cart screen
  • Totals screen
• Critical Flows:
  • Ensure no functional regressions occur in the checkout process.

Release Notes

• I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

[dangermattic]

	1 Warning
⚠️	PR is not assigned to a milestone.

Generated by 🚫 Danger

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce-Wear Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce-Wear Android
	Platform	⌚️ Wear OS
	Flavor	Jalapeno
	Build Type	Debug
	Commit	cc8dc7c
	Direct Download	woocommerce-wear-prototype-build-pr11892-cc8dc7c.apk

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce Android
	Platform	📱 Mobile
	Flavor	Jalapeno
	Build Type	Debug
	Commit	cc8dc7c
	Direct Download	woocommerce-prototype-build-pr11892-cc8dc7c.apk

[backwardstruck]

@kidinov I think it's pretty close to the design now (although not quite). Should I try to make further changes in this PR or ticket out the remaining modifications?

[kidinov]

@backwardstruck 👋

I noticed that the margin is not correct now (weirdly that on your screenshot it's ok 🤔 ). The loading state also has an incorrect margin. The success screen lost it's margin too

Having said that, now that we are getting m2 designs, which do not contain this at all, I am wondering if it makes sense to make these changes at all, wdyt?

[backwardstruck]

@backwardstruck 👋

I noticed that the margin is not correct now (weirdly that on your screenshot it's ok 🤔 ). The loading state also has an incorrect margin. The success screen lost it's margin too

Having said that, now that we are getting m2 designs, which do not contain this at all, I am wondering if it makes sense to make these changes at all, wdyt?

Ah, that screenshot is from the design, not the app. So that's why it's 100% correct.

You're right, about the margins.

I didn't realize the M2 designs were so different. Let me check and potentially close this PR then.

[backwardstruck]

Final decision on this pending Slack discussion:

https://a8c.slack.com/archives/C070SJRA8DP/p1720190008512919?thread_ts=1720104580.663059&cid=C070SJRA8DP

[backwardstruck]

@kidinov this is updated to simply remove the cards from cart and totals screens. I made a separate ticket to finish updating both cart and totals screens for the M2 design (e.g. replacing the Collect Card Payment button):
#11933

[kidinov]

@backwardstruck 👋

Looks good! I just noticed the margins may be a bit too big on the cart. And the margin between products and the cart a bit too small. Also, maybe changes from that PR can be used to avoid merge conflicts and reuse the method that adapts margins for smaller screens. It should be merged to the trunk soon)

[backwardstruck]

Thanks for the additional review @kidinov It should be closer to the design now:

• Fixed the margins may be a bit too big on the cart.

• Fixed the margin between products and the cart a bit too small.

• Reused the new toAdaptivePadding method that adapts margins for smaller screens.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 40.01%. Comparing base (9f2048d) to head (cbf4362).
Report is 8 commits behind head on trunk.

Additional details and impacted files

@@             Coverage Diff              @@
##              trunk   #11892      +/-   ##
============================================
- Coverage     40.01%   40.01%   -0.01%     
  Complexity     5432     5432              
============================================
  Files          1184     1184              
  Lines         67012    67012              
  Branches       9335     9335              
============================================
- Hits          26815    26814       -1     
- Misses        37707    37708       +1     
  Partials       2490     2490              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[kidinov]

I think start/end padding are different now on the totals and on the cart screens, but I think it's fine to move on with this, as we anyway will have to redo those screens as they changed in m2