search

woocommerce / woocommerce-ios

WooCommerce iOS app
https://www.woocommerce.com/mobile
GNU General Public License v2.0
257 stars 108 forks source link

[SiOC - customer creation] Extract the shared collapsible card UI in the product card for future reuse in the customer card #12627

Closed jaclync closed 2 weeks ago

jaclync commented 2 weeks ago

Closes: #12623

Why

In the new design for the order form customer section Q9tkFMtymZz0yhfLLbKhig-fi-2180_77133, the customer UI will share the same collapsible card UI as in the existing product cards in the order form. In order to not duplicate the UI code for the customer card and for easier design updates for this card component, the shared collapsible card view is extracted to a separate SwiftUI component CollapsibleOrderFormCard in this PR for future reuse in the customer card implementation. No user-facing changes are expected from this refactoring.

How

The foundation card UI in CollapsibleProductCard is extracted to a separate SwiftUI component CollapsibleOrderFormCard, and the product card now uses this component.

Testing instructions

No user-facing changes are expected, but it's worth doing a confidence test on the order creation/editing flow and make sure the product card(s) look and behave as before. For testing, I compared the screenshots before and after the PR changes.

Screenshots

🗒️ In dark mode, there's a pre-existing visual issue where the quantity badge is hard to read. I created a separate issue in https://github.com/woocommerce/woocommerce-ios/issues/12628.

dark light
Simulator Screenshot - iPad Air (5th generation) - 2024-05-02 at 12 51 25 Simulator Screenshot - iPad Air (5th generation) - 2024-05-02 at 12 51 42
wpmobilebot commented 2 weeks ago

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

App NameWooCommerce iOS WooCommerce iOS
Build Numberpr12627-69b68ac
Version18.4
Bundle IDcom.automattic.alpha.woocommerce
Commit69b68aceadfd1925745c6e7b4ba318c97cba4740
App Center BuildWooCommerce - Prototype Builds #8918

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

bozidarsevo commented 2 weeks ago

In dark mode, there's a pre-existing visual issue where the quantity badge is hard to read. I created a separate issue in #12628.

Created a PR https://github.com/woocommerce/woocommerce-ios/pull/12630