[CIAB] Open bookable products in WebView #14765

hichamboushaba · 2025-10-15T21:37:02Z

Description

This PR updates the product navigation to make sure we open bookable products in a WebView.
The URL we use for the products is temporary now.

Note

I tried to simplify the navigation logic to product details by combining the various flows in a single function, and removing the extra navigation action action_global_productDetailFragment_popUpTo_product_list, please review commit by commit to better follow the changes.
Loading the product details is super slow, I assume it's just because of the test site

Steps to reproduce

Use the test CIAB site shared here p1758030630245249-slack-C03L1NF1EA3
Sign in using site credentials from the above site
Open a bookable product from the product list
Open a regular product from the product list
Open a bookable product from the top performers card in the dashboard
Open a regular product from the top performers card in the dashboard

Testing information

Confirm that bookable products are opened in a WebView.
Confirm that other products are not affected.

The tests that have been performed

The above.

Images/gif

Screen_recording_20251015_222927.mp4

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.

We removed the duplicated navigation action

dangermattic · 2025-10-15T21:38:05Z

	1 Warning
⚠️	This PR is assigned to the milestone 23.5. The due date for this milestone has already passed. Please assign it to a milestone with a later deadline or check whether the release for this milestone has already been finished.

Generated by 🚫 Danger

hichamboushaba · 2025-10-15T21:39:39Z

...erce/src/main/kotlin/com/woocommerce/android/ui/dashboard/stock/DashboardProductStockCard.kt

-                        mode = ShowProduct(event.productId),
-                    )
-                )
+                is OpenProductDetail -> (context.findActivity() as? MainActivity)?.showProductDetail(event.productId)


One other approach instead of getting the activity would be to use a custom Hilt EntryPoint and injecting ProductDetailNavigator here, I don't have a strong opinion about either approach, I just went for the simplest here.

wpmobilebot · 2025-10-15T21:42:30Z

📲 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	`cbccd3f`
	Direct Download	`woocommerce-wear-prototype-build-pr14765-cbccd3f.apk`

wpmobilebot · 2025-10-15T21:54:36Z

📲 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	`cbccd3f`
	Direct Download	`woocommerce-prototype-build-pr14765-cbccd3f.apk`

AdamGrzybkowski

The navigation on the phone works as described, but... it doesn't in the Split Pane layout on the Product List.

Screen_recording_20251016_130629.mp4

I guess, it's something that we want to support as well?

…products

… modes

This reverts commit: 73c7cea, and f4adca4, and 7ea36dd.

hichamboushaba · 2025-10-17T09:10:16Z

Thanks @AdamGrzybkowski for the test and for catching the issue.

To have better tablet support, I worked on an alternative solution, please check the last commits. The main parts of the new solution are:

This logic here where we identify Bookable products in ProductDetailViewModel and then switch to the WebView.
This logic for the navigation back from the WebView.

Given the navigation is handled now inside ProductDetailFragment, we don't need to change any other parts of the app, so I reverted the previous commits that introduced ProductDetailNavigator.

The result for tablets now is:

Screen_recording_20251017_100101.mp4

and for phones:

Screen_recording_20251017_101853.mp4

Ready for another round.

There is an issue about displaying the CIAB nav bar inside the WebView in tablets, I'll start a thread about it and decide if it's something that we want to hide, anyway this is outside of the scope of this PR anyway.

hichamboushaba · 2025-10-17T09:24:30Z

I forgot to share, there is one additional advantage of this solution, in case the product wasn't cached before, the solution would still work well, we'll show a shimmer loading effect until the product is loaded, then we'll open the WebView:

Screen_recording_20251017_102338.mp4

This wouldn't have worked with the previous solution.

AdamGrzybkowski

I like the new approach! The shimmer is a great bonus 👍

AdamGrzybkowski · 2025-10-17T09:47:23Z

One nitpick:

The webView has an extra entry animation in the split pane compared to the non-webView fragment

Screen_recording_20251017_114633.mp4

hichamboushaba · 2025-10-17T10:09:56Z

One nitpick:

The webView has an extra entry animation in the split pane compared to the non-webView fragment

I took a quick look at this, and couldn't find an easy solution, I tried disabling the animation, but I think it's not better, as this causes the ProdudctDetailFragment content to blink a bit before showing the WebView:

Screen_recording_20251017_110702.mp4

If you have some ideas we can try please let me know, otherwise I think what we have here is fine, especially given all this sould be a temporary solution until we have a native editor, WDYT?

codecov-commenter · 2025-10-17T10:24:26Z

Codecov Report

❌ Patch coverage is 92.30769% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 38.29%. Comparing base (8956252) to head (cbccd3f).
⚠️ Report is 48 commits behind head on trunk.

Files with missing lines	Patch %	Lines
...oocommerce/android/ui/main/MainNavigationRouter.kt	0.00%	3 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##              trunk   #14765      +/-   ##
============================================
+ Coverage     38.27%   38.29%   +0.01%     
- Complexity    10010    10017       +7     
============================================
  Files          2118     2119       +1     
  Lines        118488   118527      +39     
  Branches      15824    15826       +2     
============================================
+ Hits          45357    45394      +37     
- Misses        68917    68919       +2     
  Partials       4214     4214

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

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

AdamGrzybkowski · 2025-10-17T10:24:54Z

hmm you're right... The only thing that comes to my mind is to handle switching to WebView within the ProductDetailFragment instead of showing a new fragment. That should preserve the animation and the Toolbar. Only the content would switch.

Not sure if it's worth it.

hichamboushaba · 2025-10-17T10:56:49Z

hmm you're right... The only thing that comes to my mind is to handle switching to WebView within the ProductDetailFragment instead of showing a new fragment. That should preserve the animation and the Toolbar. Only the content would switch.

Not sure if it's worth it.

Yes, that would be a good alternative, but given how the ProductDetailFragment is already pretty complicated, I think the simplicity and separation of concerns of the current solution is better.
Let's merge this as is, if we have time post Alpha, we can revisit the solution.

sentry-io · 2025-10-18T05:07:02Z

Issues attributed to commits in this pull request

This pull request was merged and Sentry observed the following issues:

‼️ ApplicationNotResponding: ANR in release

hichamboushaba added 5 commits October 15, 2025 18:33

Simplify logic of product navigation

d2dc27a

We removed the duplicated navigation action

Simplify product navigation logic with shared transition

4bc17fe

Introduce product detail navigation to handle opening product detail

73c7cea

Handle opening bookable products in WebView

f4adca4

Update product navigation in the dashboard cards

7ea36dd

hichamboushaba added Enhancement feature: CIAB Mobile Bookings MVP labels Oct 15, 2025

hichamboushaba commented Oct 15, 2025

View reviewed changes

hichamboushaba requested a review from AdamGrzybkowski October 15, 2025 21:40

hichamboushaba marked this pull request as ready for review October 15, 2025 21:40

hichamboushaba added this to the 23.5 milestone Oct 15, 2025

AdamGrzybkowski reviewed Oct 16, 2025

View reviewed changes

hichamboushaba added 5 commits October 17, 2025 10:03

Start working on alternative solution for using WebView for bookable …

218cc37

…products

Build view state for the webview

097ab0a

Make sure navigation back works correctly in both single and two pane…

1e3ec03

… modes

Handle displaying back navigation icon

f940a63

Revert ProductDetailNavigation changes

5384012

This reverts commit: 73c7cea, and f4adca4, and 7ea36dd.

hichamboushaba force-pushed the issue/WOOMOB-1320-bookable-product-webview branch from cebd15a to 5384012 Compare October 17, 2025 09:03

hichamboushaba requested a review from AdamGrzybkowski October 17, 2025 09:15

hichamboushaba force-pushed the issue/WOOMOB-1320-bookable-product-webview branch from e82fb0d to ca725ef Compare October 17, 2025 09:45

AdamGrzybkowski approved these changes Oct 17, 2025

View reviewed changes

Add unit tests

cbccd3f

hichamboushaba force-pushed the issue/WOOMOB-1320-bookable-product-webview branch from ca725ef to cbccd3f Compare October 17, 2025 10:10

hichamboushaba merged commit a12ca21 into trunk Oct 17, 2025
16 checks passed

hichamboushaba deleted the issue/WOOMOB-1320-bookable-product-webview branch October 17, 2025 10:56

[CIAB] Open bookable products in WebView #14765

[CIAB] Open bookable products in WebView #14765

Uh oh!

Conversation

hichamboushaba commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Steps to reproduce

Testing information

The tests that have been performed

Images/gif

Uh oh!

dangermattic commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hichamboushaba Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

wpmobilebot commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wpmobilebot commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AdamGrzybkowski left a comment

Choose a reason for hiding this comment

Uh oh!

hichamboushaba commented Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hichamboushaba commented Oct 17, 2025

Uh oh!

AdamGrzybkowski left a comment

Choose a reason for hiding this comment

Uh oh!

AdamGrzybkowski commented Oct 17, 2025

Uh oh!

hichamboushaba commented Oct 17, 2025

Uh oh!

codecov-commenter commented Oct 17, 2025

Codecov Report

Uh oh!

AdamGrzybkowski commented Oct 17, 2025

Uh oh!

hichamboushaba commented Oct 17, 2025

Uh oh!

Uh oh!

sentry-io bot commented Oct 18, 2025

Issues attributed to commits in this pull request

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

hichamboushaba commented Oct 15, 2025 •

edited

Loading

dangermattic commented Oct 15, 2025 •

edited

Loading

wpmobilebot commented Oct 15, 2025 •

edited

Loading

wpmobilebot commented Oct 15, 2025 •

edited

Loading

hichamboushaba commented Oct 17, 2025 •

edited

Loading