[Product Creation AI v2] Select package image #13193

selanthiraiyan · 2024-06-28T06:55:43Z

Part of: #13104

Description

Adds a way to select a package photo for the product creation with AI flow.

Changes

Add coordinator to select package photo.
Show the selected package image.
Add Menu to view, replace and remove selected package photo.

Steps to reproduce

Create a JN site with Jetpack AI plugin
Turn on productCreationAIv2M1 feature flag
Build and run the app
Navigate to the products tab
Tap + button on top right
Tap "Create a product with AI"
Tap "Read text from product photo" button below the text field
Validate that selecting a photo from device/camera/media library works.
The selected photo should be displayed on the button below the text field.
Tap the ellipsis button and validate that the menu with options "View Photo", "Replace Photo" and "Remove Photo"
Tap on "Replace Photo" and validate the image selection flow opens again.
Tap on "Remove Photo", and the selected image is removed, and the button returns to the button with the "Read text from product photo" title.

Screenshots

PackageSelection.mp4

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

wpmobilebot · 2024-06-28T07:05:15Z

📲 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	pr13193-a9c8a49
	Version	19.3
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	`a9c8a49`
	App Center Build	WooCommerce - Prototype Builds #9834

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

…ibrary images from remote.

itsmeichigo

This works as expected 👍 I left some nit-picking comments below.

itsmeichigo · 2024-07-01T10:15:56Z

...wRelated/Products/Add Product/AddProductWithAI/Container/AddProductWithAIContainerView.swift

+        viewModel.startingInfoViewModel.onPickPackagePhoto = { [weak self] source in
+            await self?.presentImageSelectionFlow(source: source)
+        }


❓Could you explain why need to use async here? It seems to me that we're mixing the logic of presenting the selection flow with the selected image.

Would it be possible to separate the logic like what we did previously with the old flow? i.e. We keep the presentation of the image picker flow synchronous; and when an image is selected, we trigger a method in startingInfoViewModel with the selected image. Would that work?

Could you explain why need to use async here? It seems to me that we're mixing the logic of presenting the selection flow with the selected image.

We are using async because we will send the image view into a loading state and wait for the image to be received from this method. Code here

Would it be possible to separate the logic like what we did previously with the old flow? i.e. We keep the presentation of the image picker flow synchronous; and when an image is selected, we trigger a method in startingInfoViewModel with the selected image. Would that work?

I actually followed the pattern from AddProductFromImageCoordinator and made this method async. We use the same pattern in BlazeEditAdHostingController as well. Please correct me if I am misunderstanding things.

I'd prefer a more naive implementation for separation of concerns. I'm also worried about the use of async because it could potentially come with complications when migrating to Swift 6. Please use your own judgement to decide whether to rewrite this.

Thanks for the input, Huong!

After considering this, I prefer to keep the implementation as is.

My thoughts are,

Separation of concerns wise, SelectPackageImageCoordinator takes care of selecting and downloading the image. SelectPackageImageCoordinator also encapsulates the different paths of camera capture, device media library and WP Media library image selection. After initial selection, all those paths require async operations to prepare the MediaPickerImage. i.e. We present the selection flow and wait to get back a MediaPickerImage.

Using await in ProductCreationAIStartingInfoViewModel makes it easy to maintain the previous image state and display a loading indicator until the image is ready.

We can alter this if we find any complications while migrating to Swift 6. SelectPackageImageCoordinator along with BlazeEditAdHostingController (We will remove AddProductFromImageCoordinator while removing package flow code)

Please let me know if you still think we need to change this. I will add a subtask and work on this at the end of the project. 🙏

I'm good with keeping this as-is for now, thanks for the explanation!

itsmeichigo · 2024-07-01T10:30:14Z

...d/Products/Add Product/AddProductWithAI/StartingInfo/ProductCreationAIStartingInfoView.swift

+        enum Localization {
+            static let photoUploaded = NSLocalizedString(
+                "productCreationAIStartingInfoView.packagePhotoView.viewPhoto",
+                value: "Photo uploaded",


Nit: Should we use "Photo selected" instead? "uploaded" sounds like the photo has been uploaded somewhere - it's misleading to me.

Good point. Done in a995988

itsmeichigo · 2024-07-01T10:30:42Z

...d/Products/Add Product/AddProductWithAI/StartingInfo/ProductCreationAIStartingInfoView.swift

+            static let photoUploaded = NSLocalizedString(
+                "productCreationAIStartingInfoView.packagePhotoView.viewPhoto",
+                value: "Photo uploaded",
+                comment: "Button title in starting info screen."


Nit: we should explain clearly what the text is about to make it easier for translators. Same comment for the below strings.

Done in aba6505

selanthiraiyan added 8 commits June 28, 2024 11:55

Add coordinator for selecting package image.

842e465

New source for package image selection.

80f6b58

Property to store package image.

2be7e9b

Helper methods for package photo button.

2bda164

View for package image view.

6f686f9

Show media picker source sheet.

d33b459

Launch image selection coordinator.

5093bac

Merge branch 'trunk' into feat/13104-select-image

39ac968

selanthiraiyan mentioned this pull request Jun 28, 2024

Image selection #13104

Closed

3 tasks

selanthiraiyan added type: task An internally driven task. feature: add/edit products Related to adding or editing products. and removed type: task An internally driven task. labels Jun 28, 2024

selanthiraiyan added this to the 19.4 milestone Jun 28, 2024

selanthiraiyan added 4 commits June 28, 2024 14:05

Merge branch 'trunk' into feat/13104-select-image

224fe8e

Remove unnecessary self usage.

63cdc81

Use async image view to have a loading state while loading WP Media l…

0a1fecc

…ibrary images from remote.

Use async callback to add loading state for image view.

de7df87

selanthiraiyan requested review from pmusolino and itsmeichigo June 28, 2024 13:56

selanthiraiyan marked this pull request as ready for review June 28, 2024 13:56

selanthiraiyan added 2 commits June 28, 2024 19:27

Merge branch 'trunk' into feat/13104-select-image

d0b2c81

Merge branch 'trunk' into feat/13104-select-image

d20df05

itsmeichigo self-assigned this Jul 1, 2024

itsmeichigo approved these changes Jul 1, 2024

View reviewed changes

selanthiraiyan added 3 commits July 1, 2024 16:49

Update localization comments.

aba6505

Update photo selection title.

a995988

Merge branch 'trunk' into feat/13104-select-image

a9c8a49

selanthiraiyan enabled auto-merge July 2, 2024 03:15

selanthiraiyan merged commit 1dcc8f0 into trunk Jul 2, 2024
22 checks passed

selanthiraiyan deleted the feat/13104-select-image branch July 2, 2024 03:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Product Creation AI v2] Select package image #13193

[Product Creation AI v2] Select package image #13193

selanthiraiyan commented Jun 28, 2024 •

edited

Loading

wpmobilebot commented Jun 28, 2024 •

edited

Loading

itsmeichigo left a comment

itsmeichigo Jul 1, 2024

selanthiraiyan Jul 1, 2024

itsmeichigo Jul 2, 2024

selanthiraiyan Jul 2, 2024

itsmeichigo Jul 2, 2024

itsmeichigo Jul 1, 2024

selanthiraiyan Jul 1, 2024

itsmeichigo Jul 1, 2024

selanthiraiyan Jul 1, 2024

[Product Creation AI v2] Select package image #13193

[Product Creation AI v2] Select package image #13193

Conversation

selanthiraiyan commented Jun 28, 2024 • edited Loading

Description

Steps to reproduce

Screenshots

wpmobilebot commented Jun 28, 2024 • edited Loading

itsmeichigo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

selanthiraiyan commented Jun 28, 2024 •

edited

Loading

wpmobilebot commented Jun 28, 2024 •

edited

Loading