[HACK week] Product list - Add Favorites section

[selanthiraiyan]

Part of: #12274

Description

List favorite products under a new section in product list table view.

Changes

• Limit the max number of products that can be marked as favorite to avoid taking too much space in product list screen. In future, we can consider making "Favorites" section collapsible to make space for the "All" section.
• Load the favorites product IDs from remote and show the products under "Favorites" section.
• Observe to user defaults and reload when a product is marked/removed as favorite.

Testing instructions

• Login into the app
• Navigate to Products tab
• Open any product
• Tap "…" from the action sheet tap "Mark as favorite"
• Navigate back to the product list screen.
• You should see the product under "Favorites" section
• Open the same product again
• Tap "…" -> "Remove from a favourite" on it to remove the product from the favourite list.
• Navigate back to the product list screen and validate that the "Favorites" section is updated.
• Mark a few products to the favorites section.
• Switch stores and ensure that the products marked as favorite are still marked as favorite.
• Log out and log into the same store again. Validate that the favorite products list is cleared after logout.

Screenshots

---

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

[wpmobilebot]

📲 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	pr12287-b8bff6a
	Version	19.0
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	b8bff6a
	App Center Build	WooCommerce - Prototype Builds #9625

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

[itsmeichigo]

This works as described in the PR description 👍 I have a few concerns:

• Regarding the logic of the previous PR, I wonder if we should switch to saving favorite products in a local file with GeneralAppSettings rather than user defaults. IMO we should keep only simpler checks in user defaults, especially those that require synchronous requests. Favorite products might fit better with local file storage.
• I'm unsure about the limit of the favorite items, as it's unclear to users when their older items are removed. We should keep all items and if that's too clustering, we can keep the feature under a feature flag before adding the view more option.

[itsmeichigo]

Setting this limit would remove the older items from the favorite list right? I don't think this is easy for users to understand, they might question where the other items go. Should we keep the list under the feature flag and add the view more option when we have time?

[selanthiraiyan]

I have removed this limit now as we added a way to expand/collapse the favorites section.

[selanthiraiyan]

Thanks for the review, Huong! I am marking the PR as a draft until I get time to address the feedback.

[selanthiraiyan]

Made this method async and the rest are just indentation changes.

[selanthiraiyan]

👋 @itsmeichigo , Thank you for the review and input. 🙇

I have pushed the necessary changes to make the favorites section collapse/expand. The PR is ready for another round of review.

Please note that I don't check for feature flag anywhere because,

• The favorites section will be displayed only if there are favorite products.
• The action buttons are enabled only if the feature flag is turned on. [HACK week] Product form - Action buttons to mark/remove as favorite #12284 This means that users can mark a product favorite only if the feature flag is turned on.
• Checking feature flag inside ProductsViewController further complicates the code and might create edge case issues.

Changes include

• Two sections in products table view. "Favorites" and "All"
• "Favorites" section can be collapsed and expanded by the user.
• Custom section header view with a button to collapse/expand section.
• Remove background from PlainTextSectionHeaderView for using this in products table view. This isn't used anywhere else.
• Callback when a product is marked or removed as favorite. We reload the tableview from this callback to update favorites section.

Known scrolling issue

When you select a product from the "Favorites" section and navigate back, the product will be selected in the "All" section

• The selection and scrolling is added as part of the split view controller work. [Tablet Products] Fix product list scrolled to the selected product when loading new products from infinite scroll #12060 I don't fully understand the reasons, though.
• I preferred to keep that untouched to avoid creating undesirable effects. (Product creation, editing, deletion, split view etc)
• I am tracking this issue at [Products] Favorite section in product list #12274, and we can revisit it when we find the time. (Maybe next HACK week)

@jaclync 👋 Kindly share if you have any ideas or input about this issue. Thank you!

Demo

iPhone

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-06-14.at.17.31.20.mp4

iPad

Rotated.mov

[itsmeichigo]

This works as described (again). I appreciate your efforts, but I have some suggestions for improvements:

• Having the favorite list as a section comes with a few complications like the selection state you mentioned. I also see that when selecting a filter, showing the favorite section can be misleading as the section is not filtered.
• Some minor UI issues: the product list has a divider at the top, while there's no divider between the Favorites and All sections, which looks odd. There should be a divider between the sections for better clarity:

For a simpler UX, we can remove the Favorite section and update the product rows with an additional star icon for favorite items instead. Then, we can add an option to see only favorite items in the Filter list.

[selanthiraiyan]

Thanks again for the review, Huong!

For a simpler UX, we can remove the Favorite section and update the product rows with an additional star icon for favorite items instead. Then, we can add an option to see only favorite items in the Filter list.

This is a good suggestion. I will try to address this when I find time. I will mark the PR as a draft until then.

[dangermattic]

	1 Message
📖	This PR is still a Draft: some checks will be skipped.

Generated by 🚫 Danger