Product Preview: Add "Preview" button to product details #7960

ealeksandrov · 2022-10-27T14:25:54Z

Closes: #7944

Description

This PR adds button on product details to show a preview. Button should appear:

for new product flow (when it's possible to create a draft, but not for a completely blank product)
for existing drafts (unchanged and modified).

It triggers draft saving (if needed) before opening webview with preview URL (unauthenticated at this stage).
The whole new feature is hidden behind new feature flag.

Testing

Open products tab.
Open any existing published product.
1. Confirm that there is no "Preview" button in navbar.
2. Update any product property.
3. Confirm that "Save" button appears, but there is still no "Preview" button.
Start the flow to create new product ("+" button in navbar on product list)
1. Edit the title (or anything else) to have non-blank product.
2. Confirm that "Preview" button appears in navbar.
3. Tap it and check that draft is saved before WebView opens (ignore web content).
Open any existing draft product (you can continue with product from last step).
1. Confirm that "Preview" button appears in navbar.
2. Tap it and check that WebView immediately opens (ignore web content).
3. Update any product property.
4. Confirm that "Preview" button still available and tap it.
5. Confirm that draft is saved before WebView opens.

Screenshots

before	after

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

# Conflicts: # Experiments/Experiments/DefaultFeatureFlagService.swift # Experiments/Experiments/FeatureFlag.swift

223297d

ealeksandrov · 2022-10-27T17:09:29Z

Reverted unit tests on actionButtons because they are failing on CI due to disabled feature flag.
Will consider adding FeatureFlagService dependency injection later.

wpmobilebot · 2022-10-27T18:43:24Z

You can test the changes from this Pull Request by:

Clicking here or scanning the QR code below to access App Center
Then installing the build number pr7960-dad2691 on your iPhone

If you need access to App Center, please ask a maintainer to add you.

Ecarrion

The looks good, my main worry is one suggestion to make sure all cases are covered and tested!

Also I think we need to update some test cases.

I went through the test cases and have a couple of concerns/questions

If you change a published product status to draft (using the products settings screen) you get the preview button, should that be the case? or should we wait until the product is actually saved as a draft before showing the preview button?

change-product.mov

If you start creating a new product, you get immediately the preview button. Is that ok or should we wait for at least one change?

Ecarrion · 2022-10-27T20:32:29Z

Experiments/Experiments/DefaultFeatureFlagService.swift

+        case .productsPreview:
+            return buildConfig == .localDeveloper || buildConfig == .alpha


I think we could use the same .productsOnboarding feature flag right?
When the other deliverables are done, we can just take them out of the feature flag check.

Right, updated in edf3702

Ecarrion · 2022-10-27T20:34:30Z

WooCommerce/Classes/ViewRelated/Products/Edit Product/ProductFormViewController.swift

+        updatedQueryItems.append(.init(name: "preview", value: "true"))
+        permalink?.queryItems = updatedQueryItems
+        guard let url = permalink?.url else {
+            return


Can this fail? if it can, should we show some kind of toast?

The source string, product.permalink is non-optional property. But all URL manipulation tools in iOS SDK return optional URL result.
So I consider this one is safe and never reachable.

Ecarrion · 2022-10-27T20:38:53Z

WooCommerce/Classes/ViewRelated/Products/Edit Product/ProductFormViewModel.swift

+        if ServiceLocator.featureFlagService.isFeatureFlagEnabled(.productsPreview),
+           (canSaveAsDraft() || productModel.status == .draft) {
+            buttons.insert(.preview, at: 0)
+        }


Do you think we could move this logic to the switch above, or would things get more complicated? The switch is useful for us to not miss any case or combination.

Also, do you think this is worth unit testing?

This logic doesn't really fit in switch cases + it requires FeatureFlag check. If we add it to switch above, it'll explode into more cases and it'll be hard to understand when "preview" flow is applied.
I've updated it with comments in b6ea899, c1e812f.

Unit tests added in d69489c.

ealeksandrov · 2022-10-28T14:48:09Z

Thanks @Ecarrion for useful feedback and suggestions!

Also I think we need to update some test cases.

Agree! I've added test initially, but rolled them back because of feature flag conflict.
Fixed it properly by:

adding feature flag DI (6281f5b)
forcing older tests to disabled flag state, so they behave in same way on CI and locally (9401ad1)
adding .productsOnboarding support to MockFeatureFlagService (ac52d2d)
adding set of tests covering preview logic under enabled feature flag (d69489c)

If you change a published product status to draft (using the products settings screen) you get the preview button, should that be the case? or should we wait until the product is actually saved as a draft before showing the preview button?

I agree that we shouldn't allow preview here. Because it will trigger "unpublishing" of a product before user actually tap "save" to confirm a change.
Changed in 9867928.

If you start creating a new product, you get immediately the preview button. Is that ok or should we wait for at least one change?

I don't see much issue in that, but also there is no value :)
Changed in b6ea899.

# Conflicts: # Experiments/Experiments/FeatureFlag.swift # WooCommerce/WooCommerceTests/Mocks/MockFeatureFlagService.swift

Ecarrion

Looks great! Thanks for the changes! 🚀

ealeksandrov added 8 commits October 27, 2022 11:12

Add products preview feature flag

ca41149

Add completion closures to saveProduct

d239cb3

Add a preview button in product details

0e48db9

Hide product preview behind feature flag

7fb78a3

Open product URL with preview parameter

0b7e974

Update tests for actionButtons

223297d

Merge branch 'trunk' into issue/7944-product-preview-flow

386cfe2

# Conflicts: # Experiments/Experiments/DefaultFeatureFlagService.swift # Experiments/Experiments/FeatureFlag.swift

Fix save trigger condition for preview drafts

c289b55

ealeksandrov added feature: product details Related to adding or editing products, including Product Settings. status: feature-flagged Behind a feature flag. Milestone is not strongly held. labels Oct 27, 2022

ealeksandrov added this to the 11.0 milestone Oct 27, 2022

ealeksandrov requested review from Ecarrion and rachelmcr October 27, 2022 14:25

Revert "Update tests for actionButtons"

a525828

223297d

Ecarrion reviewed Oct 27, 2022

View reviewed changes

ealeksandrov added 8 commits October 28, 2022 13:28

Use productsPreview feature flag

edf3702

Do not preview new blank products without any changes

b6ea899

Move comment

c1e812f

Do not preview published products with changed status

9867928

Inject FeatureFlagService dependency in ProductFormViewModel

6281f5b

Fix ProductFormViewModelTests to use mocks with disabled feature flags

9401ad1

Add productsOnboarding support to MockFeatureFlagService

ac52d2d

Add unit tests for preview button logic in ProductFormViewModel

d69489c

Merge branch 'trunk' into issue/7944-product-preview-flow

dad2691

# Conflicts: # Experiments/Experiments/FeatureFlag.swift # WooCommerce/WooCommerceTests/Mocks/MockFeatureFlagService.swift

ealeksandrov modified the milestones: 11.0, 11.1 Oct 28, 2022

ealeksandrov requested a review from Ecarrion October 28, 2022 15:27

ealeksandrov mentioned this pull request Oct 28, 2022

Products: Draft product preview (WIP) #7878

Closed

1 task

Ecarrion self-assigned this Oct 31, 2022

Ecarrion approved these changes Oct 31, 2022

View reviewed changes

ealeksandrov merged commit a7e296c into trunk Oct 31, 2022

ealeksandrov deleted the issue/7944-product-preview-flow branch October 31, 2022 16:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Product Preview: Add "Preview" button to product details #7960

Product Preview: Add "Preview" button to product details #7960

Uh oh!

ealeksandrov commented Oct 27, 2022 •

edited

Loading

Uh oh!

ealeksandrov commented Oct 27, 2022

Uh oh!

wpmobilebot commented Oct 27, 2022 •

edited

Loading

Uh oh!

Ecarrion left a comment •

edited

Loading

Uh oh!

Ecarrion Oct 27, 2022

Uh oh!

ealeksandrov Oct 28, 2022

Uh oh!

Ecarrion Oct 27, 2022

Uh oh!

ealeksandrov Oct 28, 2022

Uh oh!

Ecarrion Oct 27, 2022

Uh oh!

ealeksandrov Oct 28, 2022

Uh oh!

ealeksandrov commented Oct 28, 2022

Uh oh!

Ecarrion left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		case .productsPreview:
		return buildConfig == .localDeveloper \|\| buildConfig == .alpha

Product Preview: Add "Preview" button to product details #7960

Product Preview: Add "Preview" button to product details #7960

Uh oh!

Conversation

ealeksandrov commented Oct 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Testing

Screenshots

Uh oh!

ealeksandrov commented Oct 27, 2022

Uh oh!

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

Uh oh!

Uh oh!

Ecarrion left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Ecarrion Oct 27, 2022

Choose a reason for hiding this comment

Uh oh!

ealeksandrov Oct 28, 2022

Choose a reason for hiding this comment

Uh oh!

Ecarrion Oct 27, 2022

Choose a reason for hiding this comment

Uh oh!

ealeksandrov Oct 28, 2022

Choose a reason for hiding this comment

Uh oh!

Ecarrion Oct 27, 2022

Choose a reason for hiding this comment

Uh oh!

ealeksandrov Oct 28, 2022

Choose a reason for hiding this comment

Uh oh!

ealeksandrov commented Oct 28, 2022

Uh oh!

Ecarrion left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ealeksandrov commented Oct 27, 2022 •

edited

Loading

wpmobilebot commented Oct 27, 2022 •

edited

Loading

Ecarrion left a comment •

edited

Loading