Products: Grouping design for product creation type sheet #12273

hafizrahman · 2024-03-13T13:07:19Z

Closes: #11361, #11211

Description

This PR is the second part of the product type creation bottom sheet.

Specifically, it now groups the "Manual product creation" into three categories:

Standard
- Physical product
- Virtual product
- Variable product
Subscription
- Simple subscription
- Variable subscription
Other
- Grouped product
- External product

Testing instructions

Go to Products tab,
Create new product,
Ensure that the bottom sheet demo matches the video below, and with the design video on Products: Improve the bottom sheet for product type selection #11361 (comment)
Additionally, test with a site that doesn't have subscriptions support. Ensure that the subscriptions category and its product types are not shown.

Video

Simulator.Screen.Recording.-.iPhone.15.-.2024-03-14.at.19.46.45.mp4

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

wpmobilebot · 2024-03-13T13:15:29Z

📲 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	pr12273-f1b37ed
	Version	19.0
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	`f1b37ed`
	App Center Build	WooCommerce - Prototype Builds #9549

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

…t's not likely to be reused.

…pes in a category. This can happen if, for example, a store doesn't support subscription products creation.

hafizrahman · 2024-03-14T13:09:40Z

...asses/ViewRelated/Products/Edit Product/BottomSheetListSelector/BottomSheetProductType.swift

@@ -77,13 +76,13 @@ public enum BottomSheetProductType: Hashable, Identifiable {
        case .simple(let isVirtual):
            if isVirtual {
                return NSLocalizedString(
-                    "bottomSheetProductType.simpleVirtual.title",
-                    value: "Simple virtual product",
+                    "bottomSheetProductType.simpleVirtualProduct.title",


Have to also change the key for the string value change to apply. Not completely sure why, but without doing this, the string change doesn't appear in the simulator.

itsmeichigo

The update looks good! I wonder if we should also replace the bottom sheet for the case where AI is not eligible to use the same sheet but without the AI option. Currently, when testing for such sites, I still see the old sheet. Please feel free to file an issue for this as an enhancement separately though.

I left a few suggestions for code improvements below, but I'm pre-approving this PR.

itsmeichigo · 2024-03-18T03:34:22Z

WooCommerce/Classes/ViewRelated/Products/Add Product/ManualProductTypeOptions.swift

+                    .padding(.bottom, Constants.categoryVerticalSpacing)
+                    .padding(.horizontal, Constants.horizontalSpacing)
+
+                ForEach(productTypes, id: \.self) { productType in


Nit: BottomSheetProductType is already conforming to Identifiable, so we can omit the id parameter here.

👍🏼 updated in 34442d1

itsmeichigo · 2024-03-18T03:36:14Z

WooCommerce/Classes/ViewRelated/Products/Add Product/ManualProductTypeOptions.swift

+                Text(category.label)
+                    .subheadlineStyle()
+                    .textCase(.uppercase)


TIL about the .textCase modifier. Normally I would simply use Text(category.label.uppercased) to transform the string directly.

itsmeichigo · 2024-03-18T03:40:13Z

WooCommerce/Classes/ViewRelated/Products/Add Product/ManualProductTypeOptions.swift

+                ForEach(productTypes, id: \.self) { productType in
+                    HStack(alignment: .top, spacing: Constants.margin) {
+                        Image(uiImage: productType.actionSheetImage.withRenderingMode(.alwaysTemplate))
+                            .font(.title3)


The modifier font will work only with system images. With custom assets, you might need to set the size explicitly with theframe modifier. To make it scalable, you'd need to get the scale from ScaleMetric property wrapper.

As you see above, the custom icons are not scaled in large font sizes.

Updated in 34442d1

itsmeichigo · 2024-03-18T03:43:20Z

WooCommerce/Classes/ViewRelated/Products/Add Product/ManualProductTypeOptions.swift

            }
        }
    }
 }

 private extension ManualProductTypeOptions {
    enum Constants {
+        // List of product categories. The ordering dictates how the categories are displayed.
+        static let productCategoriesOrder: [BottomSheetProductType.ProductCreationCategory] = [.standard, .subscription, .other]


Suggestion: You can omit this if you make BottomSheetProductType.ProductCreationCategory conform to CaseIterable. Then you can get the list of cases in the order declared in the enum with BottomSheetProductType.ProductCreationCategory.allCases.

Done in f1b37ed also this comment is related to this #12273 (comment)

itsmeichigo · 2024-03-18T03:48:53Z

...asses/ViewRelated/Products/Edit Product/BottomSheetListSelector/BottomSheetProductType.swift

+    var productCreationCategory: ProductCreationCategory {
+        switch self {
+        case .simple, .blank, .variable:
+            return .standard
+        case .subscription, .variableSubscription:
+            return .subscription
+        case .custom, .grouped, .affiliate:
+            return .other
+        }
+    }


Suggestion: you can avoid having to filter and match the category types if you replace this with a helper variable in ProductCreationCategory instead:

extension ProductCreationCategory { var productTypes: BottomSheetProductType { // return the respective types for each category. } }

Then in ManualProductTypeOptions you can get rid of groupedProductTypes and build the view by directly traversing the categories:

ForEach(BottomSheetProductType.ProductCreationCategory.allCases, id: \.self) { category in ForEach(category.productTypes) { type in // TODO } }

I did some refactor on f1b37ed based on your ideas here, but it doesn't fully implement your suggestion as I understood it.

The main thing is that the ManualProductTypeOptions receives supportedProductTypes that contains only the supported product types (calculated in presentActionSheetWithAI() in AddProductCoordinator), so filtering things based on it is inevitable.

rachelmcr · 2024-04-26T10:20:34Z

@hafizrahman Is this PR being actively worked on? Just checking because it has been moved to a future milestone a handful of times already. (I'll go ahead and move it to the next milestone for now.)

hafizrahman · 2024-04-26T10:36:53Z

@rachelmcr this was a hack week project that I didn't end up having enough time to complete, then got deprioritized over other tasks. Thanks for the reminder, I'll set as draft for now and come back to it next hack week.

itsmeichigo · 2024-06-10T04:57:08Z

@hafizrahman It would be great to wrap this PR for this HACK week as well, it has been around for quite a while.

…clearer.

hafizrahman added 4 commits March 13, 2024 16:33

Add product creation categories.

ec3f94d

Update ManualProductTypeOptions to display product options by category.

fe634fb

Various design updates.

bf90dcb

Localization format updates.

ab6a0e4

hafizrahman added 5 commits March 14, 2024 10:31

Refactor the product categories order into a Constant instead since i…

9b8f99e

…t's not likely to be reused.

More styling updates.

7dc7bdc

Refactor grouped product type to be excluded if there's no product ty…

cc47020

…pes in a category. This can happen if, for example, a store doesn't support subscription products creation.

Refactor placement for ProductCreationCategory

aabb101

Update some product type labels to match design.

f3b1b83

hafizrahman added this to the 17.8 milestone Mar 14, 2024

hafizrahman added the feature: add/edit products Related to adding or editing products. label Mar 14, 2024

Update release notes.

65acb1d

hafizrahman force-pushed the feat/11361-product-creation-grouping branch from 5ce53b1 to 65acb1d Compare March 14, 2024 13:07

hafizrahman commented Mar 14, 2024

View reviewed changes

hafizrahman marked this pull request as ready for review March 14, 2024 13:13

hafizrahman requested review from itsmeichigo and selanthiraiyan March 14, 2024 13:18

iamgabrielma modified the milestones: 17.8, 17.9 Mar 15, 2024

itsmeichigo self-assigned this Mar 18, 2024

itsmeichigo approved these changes Mar 18, 2024

View reviewed changes

bozidarsevo modified the milestones: 17.9, 18.0 Mar 21, 2024

jaclync modified the milestones: 18.0, 18.1 Mar 29, 2024

pmusolino modified the milestones: 18.1, 18.2 Apr 5, 2024

itsmeichigo modified the milestones: 18.2, 18.3 Apr 12, 2024

rachelmcr modified the milestones: 18.3, 18.4 Apr 19, 2024

rachelmcr modified the milestones: 18.4, 18.5 Apr 26, 2024

hafizrahman marked this pull request as draft April 26, 2024 10:37

iamgabrielma modified the milestones: 18.5, 18.6 May 3, 2024

joshheald removed this from the 18.6 milestone May 10, 2024

hafizrahman added 3 commits June 11, 2024 13:59

Merge branch 'trunk'

e690c98

Update image resizable and ForEach usage.

34442d1

Refactor how product categorization and filtering is done to make it …

f1b37ed

…clearer.

hafizrahman marked this pull request as ready for review June 11, 2024 09:32

hafizrahman added this to the 19.1 milestone Jun 11, 2024

hafizrahman enabled auto-merge June 11, 2024 09:39

hafizrahman merged commit 2599216 into trunk Jun 11, 2024
23 checks passed

hafizrahman deleted the feat/11361-product-creation-grouping branch June 11, 2024 09:52

hafizrahman mentioned this pull request Jun 11, 2024

Products: Use the new grouping design for sites not eligible for AI too #13030

Open

itsmeichigo mentioned this pull request Jun 12, 2024

“Add a product” half-sheet has too much white space at the bottom #11211

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Products: Grouping design for product creation type sheet #12273

Products: Grouping design for product creation type sheet #12273

hafizrahman commented Mar 13, 2024 •

edited

wpmobilebot commented Mar 13, 2024 •

edited

hafizrahman Mar 14, 2024

itsmeichigo left a comment

itsmeichigo Mar 18, 2024

hafizrahman Jun 11, 2024

itsmeichigo Mar 18, 2024 •

edited

itsmeichigo Mar 18, 2024

hafizrahman Jun 11, 2024

itsmeichigo Mar 18, 2024

hafizrahman Jun 11, 2024

itsmeichigo Mar 18, 2024

hafizrahman Jun 11, 2024 •

edited

rachelmcr commented Apr 26, 2024

hafizrahman commented Apr 26, 2024

itsmeichigo commented Jun 10, 2024

Products: Grouping design for product creation type sheet #12273

Products: Grouping design for product creation type sheet #12273

Conversation

hafizrahman commented Mar 13, 2024 • edited

Description

Testing instructions

Video

wpmobilebot commented Mar 13, 2024 • edited

Choose a reason for hiding this comment

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

itsmeichigo Mar 18, 2024 • edited

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

hafizrahman Jun 11, 2024 • edited

Choose a reason for hiding this comment

rachelmcr commented Apr 26, 2024

hafizrahman commented Apr 26, 2024

itsmeichigo commented Jun 10, 2024

hafizrahman commented Mar 13, 2024 •

edited

wpmobilebot commented Mar 13, 2024 •

edited

itsmeichigo Mar 18, 2024 •

edited

hafizrahman Jun 11, 2024 •

edited