Skip to content

[WOOMOB-3739] Cut Product Detail over to Compose (3/3) - #16395

Open
hichamboushaba wants to merge 6 commits into
issue/woomob-3739-product-detail-compose-screenfrom
issue/woomob-3739-product-detail-compose-cutover
Open

[WOOMOB-3739] Cut Product Detail over to Compose (3/3)#16395
hichamboushaba wants to merge 6 commits into
issue/woomob-3739-product-detail-compose-screenfrom
issue/woomob-3739-product-detail-compose-cutover

Conversation

@hichamboushaba

@hichamboushaba hichamboushaba commented Aug 8, 2026

Copy link
Copy Markdown
Member

Description

Stack: #16393#16394 → this PR. Review after #16394; part 3 of 3.

Note

The important thing for now is to get the screen to Compose, as this would make aligning any small changes later easier. And because of this please note two things:

  • We are keeping all the old icons for now, I'm discussing using new icons with the designer, and will update them in a follow up PR.
  • The screen is not fully migrated to Compose, I will migrate the gallery header to Compose in a follow up PR.

Fixes WOOMOB-3739.

This is part 3 of 3 in the Product Detail Compose migration stack. It cuts both Add and Edit Product Detail over to the shared renderer while retaining the Fragment-owned XML shell for navigation, dialogs, results, analytics, the toolbar/menu, two-pane coordination, and the collapsing image gallery.

The Compose body owns image-state presentation and property cards. Add More remains fixed outside Coordinator scrolling. Clean public products show icon-only outlined Share and overflow actions; Save or Publish keeps runtime priority and moves Share into the titled overflow row. The XML menu intentionally declares Share as never promoted so reinflation is safe, while ProductDetailsToolbarHelper remains the runtime authority.

The final commit removes the superseded Product Detail promo renderer and skeleton layout. No release-note entry is added because this stack targets the migration feature branch rather than the release branch.

Test Steps

  1. Open a clean public product and verify the centered toolbar, outlined Share and overflow actions, fixed Add More footer, and gallery collapse/expand behavior.
  2. Scroll through the cards and verify row ordering, inset dividers, Description/Write with AI grouping, neutral AI attribution text, inline review rating, and accessibility labels.
  3. Edit the title and verify Save takes priority while Share moves into overflow; discard the edit and confirm direct Share returns.
  4. Open Add Product and verify the same Compose renderer handles empty image/title/description/price states, the footer stays fixed, Share is hidden, and exiting does not create a product.
  5. Repeat the core flow in landscape and confirm there is no crash, ANR, or Product Detail exception.

Images/gif

Flow Top Scrolled
Existing product existing-top existing-scrolled
Add product add-top add-scrolled
  • 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

dangermattic commented Aug 8, 2026

Copy link
Copy Markdown
Collaborator
1 Error
🚫 This PR is tagged with status: do not merge label(s).
1 Warning
⚠️ This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.
1 Message
📖

This PR contains changes to Tracks-related logic. Please ensure (author and reviewer) the following are completed:

  • The tracks events must be validated in the Tracks system.
  • Verify the internal Tracks spreadsheet has also been updated.
  • Please consider registering any new events.
  • The PR must be assigned the category: tracks label.

Generated by 🚫 Danger

@hichamboushaba hichamboushaba added type: enhancement A request for an enhancement. feature: product details Related to adding or editing products, includes product settings. labels Aug 8, 2026
@hichamboushaba hichamboushaba added this to the 25.5 milestone Aug 8, 2026
@hichamboushaba hichamboushaba added category: design Layout and style elements in the UI or user interface, including color and animations. category: parity Match what's supported by the other platform. category: accessibility Related to accessibility. category: tracks Related to analytics, including Tracks Events. category: ui tests Related to UI testing. compose Uses Jetpack Compose framework labels Aug 8, 2026
@wpmobilebot

wpmobilebot commented Aug 8, 2026

Copy link
Copy Markdown
Collaborator

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

App NameWooCommerce Android
Platform📱 Mobile
FlavorJalapeno
Build TypeDebug
Build Number778
Version25.4-rc-1
Application IDcom.woocommerce.android.prealpha
Commit99f586c
Installation URL2vpg9g3e92r90
Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

@hichamboushaba
hichamboushaba force-pushed the issue/woomob-3739-product-detail-compose-cutover branch from bf5900d to 0255a21 Compare August 9, 2026 12:41
@hichamboushaba
hichamboushaba force-pushed the issue/woomob-3739-product-detail-compose-screen branch from 3076aa3 to 0571e01 Compare August 9, 2026 12:41
@hichamboushaba
hichamboushaba force-pushed the issue/woomob-3739-product-detail-compose-cutover branch from 0255a21 to abac131 Compare August 9, 2026 12:53
@hichamboushaba
hichamboushaba force-pushed the issue/woomob-3739-product-detail-compose-screen branch 2 times, most recently from 220a0e4 to 8b1bdac Compare August 9, 2026 13:26
@hichamboushaba
hichamboushaba force-pushed the issue/woomob-3739-product-detail-compose-cutover branch from abac131 to 97fa247 Compare August 9, 2026 13:30
@hichamboushaba
hichamboushaba force-pushed the issue/woomob-3739-product-detail-compose-screen branch from 8b1bdac to 47493da Compare August 9, 2026 14:46
@hichamboushaba
hichamboushaba force-pushed the issue/woomob-3739-product-detail-compose-cutover branch from 97fa247 to b7b6740 Compare August 9, 2026 14:48
Retain the XML toolbar and gallery shell while moving detail sections and footer rendering into the shared Compose screen.
Keep the existing placement and analytics predicates while adding the design system icon and clarifying the action-state name.
Delete the legacy linked-product banner wrapper and Product Detail skeleton layout after the Compose cutover removes their final consumers.
@hichamboushaba
hichamboushaba force-pushed the issue/woomob-3739-product-detail-compose-cutover branch from 11d7e79 to 99f586c Compare August 10, 2026 16:30
@hichamboushaba
hichamboushaba marked this pull request as ready for review August 14, 2026 15:17
@hichamboushaba
hichamboushaba requested a review from a team as a code owner August 14, 2026 15:17

@claude claude Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AI Code Review - No issues found. The changes look good.

This migrates Product Detail from XML/RecyclerView to Compose (ComposeView hosts for the header, footer, cards list, and upload-error). The state wiring in ProductDetailFragment is consistent across the observers and the updateImagePresentation() / updateProductDetailScreen() derivations, the showShareOptionAsActionWithText -> showShareOptionAsAction rename is confined to the internal MenuButtonsState (no public/backwards-compat surface), and the toolbar navigation refactor adds a proper accessibility content description with a test that verifies stale labels are cleared when navigation is removed. Nice test coverage for the share-as-action vs overflow analytics source.

I checked the one thing that looked like a possible regression — removing the manual LIST_STATE_KEY / onSaveInstanceState scroll restoration — and it is safe: ProductDetailScreen uses rememberLazyListState(), which is Saver-backed, so scroll position is still preserved across configuration changes.

PR housekeeping
  • Behaviour-preserving UI refactor (XML -> Compose); no test-plan readiness flag required.
  • Applied repo AGENTS.md / CLAUDE.md guidance (store-management MVVM + Compose-in-Fragment patterns) when reviewing.

Automatic review · claude-opus-4-8 · Workflow run

How to reply to a finding

Reply on this review (or inline at the line the finding refers to) with one of:

  • @claude addressed - I made the change. Bot verifies against the next diff before marking resolved.
  • @claude rejected: <reason> - Will not fix; reason gets quoted on the next review.
  • @claude not-applicable - Finding does not apply (wrong file, already covered elsewhere, etc.).

The bot honours these on the next review pass.

@hichamboushaba hichamboushaba added the status: do not merge Dependent on another PR, ready for review but not ready for merge. label Aug 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

category: accessibility Related to accessibility. category: design Layout and style elements in the UI or user interface, including color and animations. category: parity Match what's supported by the other platform. category: tracks Related to analytics, including Tracks Events. category: ui tests Related to UI testing. compose Uses Jetpack Compose framework feature: product details Related to adding or editing products, includes product settings. status: do not merge Dependent on another PR, ready for review but not ready for merge. type: enhancement A request for an enhancement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants