[Woo POS][Design System] Updates from design review: skeleton item card view, cash view

[jaclync]

Parts of #15234

Description

This pull request includes several changes to the presentation and layout of views in the WooCommerce POS module. The updates focus on improving the visual appearance and responsiveness of the user interface.

GhostItemCardView Improvements:

This addresses the design review feedback qJpoXnTMMBPsgHBedaBWGv-fi-20_4288#1143087383.

• Added a @State property to track the view width and adjusted the layout to use this width for better scaling of elements.
• Updated the layout constants, including reducing the placeholder height to improve the visual design.

PointOfSaleCollectCashView Enhancements:

It took me some time to figure out why there's extra padding as in the design review qJpoXnTMMBPsgHBedaBWGv-fi-18_4220#1143096631. It was because:

• TotalsView is applying a padding that shouldn't be for the cash view, this was now disabled in TotalsViewHelper.
• PointOfSaleCollectCashView's bottom padding was using the keyboard height, which is observed correctly. However, the cash view is shown outside the safe area and the bottom safe area inset contributes to the final extra padding. This is now fixed within PointOfSaleCollectCashView to set the bottom padding that accounts for keyboard height, safe area bottom inset, and floating control height.

Changes:

• Introduced GeometryReader (despite the issues GeometryReader has like taking up remaining space, I'd still use it for one single view in the same view hierarchy level whose geometry is being read) to dynamically adjust the layout based on the available space and safe area insets. Spacer's don't always work in scroll view when the content view height doesn't have a contstraint. Now the scroll view content height has a minimum of the scroll view height so that the button can be pinned to the bottom. [1] [2]
• Added a new constant for bottom padding and adjusted the padding logic to account for the floating control area size.
• Changed the background color to posSurfaceBright for better visual consistency.

TotalsView Adjustments:

• Modified the background to ignore safe area insets for a more seamless appearance.
• Updated the background color for the cash payment state to posSurfaceBright.

TotalsViewHelper Update:

• Adjusted the padding logic to ensure no padding is applied when collecting cash, aligning with other payment success states.

Steps to reproduce

GhostItemCardView Improvements

• Enter POS with at least one variable product
• Tap on a variable product --> the skeleton view should match the design 1qcjzXitBHU7xPnpCOWnNM-fi-47_19437 (the width of the placeholder rectangles is based on the same fraction to the row width as in the design, instead of a hard-coded width for better scaling)

Cash view improvements

• Enter POS
• Add item(s) to cart and check out
• Tap Cash payment --> the cash view should have the same background color as in design (surface bright)
• Toggle keyboard appearance to bring it up and down --> when the keyboard is present, the CTA should be pinned to the bottom with 16px padding above the keyboard. when the keyboard is not present, the CTA should be pinned to the bottom with 16px padding above the floating control.

Testing information

Screenshots

Skeleton item card view:

smaller font size	largest font size

Cash view:

Simulator.Screen.Recording.-.iPad.Pro.11-inch.M4.-.2025-02-24.at.11.11.39.mp4

---

• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

• The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
• Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
• Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on all devices (phone/tablet) and no regressions are added.

[wpmobilebot]

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

	App Name	WooCommerce iOS
	Build Number	pr15244-01118d6
	Version	21.8
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	01118d6
	App Center Build	WooCommerce - Prototype Builds #13121

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[joshheald]

Works well. One question inline, but I think the answer is "it would just make everything more complicated" so no worries!

[jaclync]

One question inline, but I think the answer is "it would just make everything more complicated" so no worries!

Hey @joshheald I didn't see any other comments in this PR, maybe it wasn't published? Would like to hear it anyway 😄