Store creation M3: profiler question - optional category selector

[jaclync]

Part of #8376

Description

Why

In order for WooCommerce to provide better customizations for the new store after store creation, we want to add a few questions to the store creation flow to understand more about the store profile. The first question is about the store category, which indicates the store's industry. This question is optional and can be skipped by tapping the Continue CTA without selecting an option or by tapping the Skip CTA.

Changes

This PR only includes the UI part, as the API is still WIP (p1670825052838929/1670823717.177509-slack-C01SFMVEYAK). The profiler question is only shown behind a new feature flag storeCreationM3Profiler, and the selected category is shown in the store summary screen.

In order to share code in the 3 profiler questions (design in HyVloP5FipZzyPVenH2euI-fi-3066%3A144169&t=rYz8R7hZHuYF1IFo-0) where two are optional and one is required, I created a generic StoreCreationProfilerQuestionView for just the main content view that can take in any question content along with shared UI that includes 3 labels at the top. Then, there's OptionalStoreCreationProfilerQuestionView that wraps StoreCreationProfilerQuestionView with 2 navigation CTAs - the Continue and Skip CTAs. When it's time to implement the required question #8378, I plan to create another wrapper RequiredStoreCreationProfilerQuestionView with only a Continue CTA with an observable boolean for whether the CTA is enabled.

StoreCreationCategoryQuestionView is the final category question view with a view model StoreCreationCategoryQuestionViewModel that implements the view model protocol for both StoreCreationProfilerQuestionViewModel and OptionalStoreCreationProfilerQuestionViewModel. Any suggestions on this implementation are welcome!

Testing instructions

Feature flag enabled

• Log in if needed
• Go to the Menu tab, and tap Switch store
• On the store picker, tap + Add a store
• Tap Create a new store --> the store name form should be shown
• Enter a store name and continue --> the category question should be shown with a Skip CTA at the top and a Continue CTA at the bottom
• Tap Skip --> the domain selector should be shown
• Go back to the previous screen
• Select an option and tap Continue --> the domain selector should be shown
• Select a domain and continue --> the selected category name should be displayed on the store summary below the URL

Feature flag disabled

• In code, return false manually for storeCreationM3Profiler feature flag in DefaultFeatureFlagService
• Log in if needed
• Go to the Menu tab, and tap Switch store
• On the store picker, tap + Add a store
• Tap Create a new store --> the store name form should be shown
• Enter a store name and continue --> the domain selector should be shown
• Select a domain and continue --> there should be no store category below the URL on the store summary

Screenshots

dark	light

Screencast:

simulator.mov

---

• 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 by:

• Clicking here or scanning the QR code below to access App Center
• Then installing the build number pr8379-8a9ce6b on your iPhone

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

[itsmeichigo]

Overall this looks good to me! I spot a few minor differences with the design, though:

• The category name on the profiler screen is not capitalized like on the design.
• The title "Site Category" is not displayed when the list is scrolled up. I'm not sure if it's possible to handle it, given that the big title is different.

Design	App

On an unrelated note, I realized that I could drag to dismiss on the summary screen, and there was no dialog to confirm before the view was dismissed. This may be troublesome because I don't think there's an entry point to continue payment after dismissing the flow. Please ignore this if there has already been a subtask for this.

[itsmeichigo]

I see that we're using this style a lot so I added an extension for this here. Maybe we should use it instead?

[jaclync]

Yup thanks for creating that extension, updated in 87be413

[itsmeichigo]

Is this a typo? 😅

[jaclync]

This was in the design and I had the same question, but we're also updating the list and separating it into two sections as the latest design after syncing with the Ghidorah team. There's a subtask to update the design in #8376, where the categories will be updated

[jaclync]

• The category name on the profiler screen is not capitalized like on the design.

Great catch, updated in 7142d88

• The title "Site Category" is not displayed when the list is scrolled up. I'm not sure if it's possible to handle it, given that the big title is different.

As you said, this isn't easily feasible since we aren't using large title as there is another label above the title. I clarified with Ann about this earlier this week, and the design was updated in HyVloP5FipZzyPVenH2euI-fi-3760%3A138977&t=gO7KflHr1ccRB4nZ-0

On an unrelated note, I realized that I could drag to dismiss on the summary screen, and there was no dialog to confirm before the view was dismissed. This may be troublesome because I don't think there's an entry point to continue payment after dismissing the flow. Please ignore this if there has already been a subtask for this.

That's a good observation & suggestion, I disabled the interactive dismissal in 8a9ce6b. The user can still go back to the initial screen and dismiss the screen where a confirmation alert is shown. We could also re-enable interactive dismissal and show a confirmation alert later.

---

Thanks for your feedback, I'll merge this when CI passes to make development easier for other profiler questions.