Improve the initial setup experience

We need to implement a setup wizard that creates currencies, stores, tax types, and then product/variation & order types.

Great! Keep in mind that we can choose the currency and tax types based on the customer's country.
That's why the Console command asked you for the store country (a web page can ask for an entire address), then preselected a currency, and when confirmed, created the currency and the store.

For products I'm not sure what makes sense yet, I dislike the fact that we start with a "Default" type that means nothing, would be nicer to ask for a title and for attributes, so that you can say T-Shirt, with Sizes: Small, Medium, large and Colors: Red, Green, Blue, and have the types and attributes created. However, I'm worried people might confuse this with a product creation flow, or that they wouldn't care about this in this stage of the setup.

I would be fine with initially committing a wizard that's about stores/currencies/tax types only, leaving the order/product parts to a followup.

We might need to split 3) into three steps, to make it easier to hide the tax rate part if commerce_tax is disabled or there's no tax type plugin matching the store address.

The general idea will be to make this pluggable, allowing submodules (and even contrib) to add their own steps.

Very interesting module, and great work!
I reviewed patch #17 on a vanilla install but somehow could not get the store up neither the currency was set up. Probably because there is no textfield/input fields where i can enter the new store's information.

Found that the #type used is 'stepper' :

        /*
	 * 1. Store Details
	 */
	$form['commerce_details'] = array(
	  '#type' => 'stepper',
	  '#title' => t('1. Add Store Details'),
//	  '#open' => TRUE,
	  '#button_text' => t('Next, location'),
	);

Is the stepper #type is something provided by default in Form API D8, if not, there is a need to mention a dependency on a contrib module in info.yml file.

As a PoC, I like the direction. Some small nits here and there, but overall, the look/feel is good. It would help with the PoC if we could surface at least one of the sub-forms to see how that would look in the overall flow.

I'm also going to bikeshed a little on the module name. commerce_setup seems better, or if this is planned to merge into core, then we can stop bikeshedding now.

1. +++ b/modules/contrib/commerce/modules/wizard/commerce_wizard.info.yml
   @@ -0,0 +1,14 @@
   +
   +
   +
   +
   +
   +
   

   Nit: Whitespace

2. +++ b/modules/contrib/commerce/modules/wizard/commerce_wizard.links.menu.yml
   @@ -0,0 +1,6 @@
   +  title: 'Wizard Setup'
   

   I see what we are trying to do by calling this 'Wizard Setup', but I feel like 'Commerce Setup' or 'Initial Setup' in the menu is better. Wizard is too technical and tied to implementation. No matter how it is done, this is a setup feature.

   I installed this patch on an already setup Commerce site, so to see Wizard, etc was a little odd feeling.

3. +++ b/modules/contrib/commerce/modules/wizard/commerce_wizard.links.menu.yml
   @@ -0,0 +1,6 @@
   \ No newline at end of file
   

   Nit: new line missing.

4. +++ b/modules/contrib/commerce/modules/wizard/commerce_wizard.module
   @@ -0,0 +1,70 @@
   +	$variables = array(
   

   Nit: 2 spaces and short array syntax.

5. +++ b/modules/contrib/commerce/modules/wizard/commerce_wizard.module
   @@ -0,0 +1,70 @@
   \ No newline at end of file
   

   Nit: missing new line.

6. +++ b/modules/contrib/commerce/modules/wizard/commerce_wizard.routing.yml
   @@ -0,0 +1,15 @@
   \ No newline at end of file
   

   Nit: missing new line.

7. +++ b/modules/contrib/commerce/modules/wizard/css/commerce_wizard.component.css
   @@ -0,0 +1,69 @@
   \ No newline at end of file
   

   Nit: missing new line.

8. +++ b/modules/contrib/commerce/modules/wizard/css/commerce_wizard.layout.css
   @@ -0,0 +1,10 @@
   \ No newline at end of file
   
   +++ b/modules/contrib/commerce/modules/wizard/images/check.svg
   @@ -0,0 +1 @@
   \ No newline at end of file
   
   +++ b/modules/contrib/commerce/modules/wizard/src/Controller/WizardController.php
   @@ -0,0 +1,23 @@
   \ No newline at end of file
   
   +++ b/modules/contrib/commerce/modules/wizard/src/Element/Stepper.php
   @@ -0,0 +1,81 @@
   \ No newline at end of file
   
   +++ b/modules/contrib/commerce/modules/wizard/src/Form/WizardForm.php
   @@ -0,0 +1,131 @@
   \ No newline at end of file
   
   +++ b/modules/contrib/commerce/modules/wizard/templates/commerce-wizard.html.twig
   @@ -0,0 +1,52 @@
   \ No newline at end of file
   

   Nit: missing new line.

9. +++ b/modules/contrib/commerce/modules/wizard/js/commerce_wizard.js
   @@ -0,0 +1,126 @@
   +            // enable/disabled the main form submit
   +            // depending on if were on the last step or not
   ...
   +            // close the current step and set it to complete state
   ...
   +            // open the next step, and perform the ajax submit in the step we're closing
   

   Nit: 80 characters for comments and begin with a capital letter and end with a period.

10. +++ b/modules/contrib/commerce/modules/wizard/src/Controller/WizardController.php
    @@ -0,0 +1,23 @@
    +	public function content() {
    

    Nit: 2 spaces instead of 4.

11. +++ b/modules/contrib/commerce/modules/wizard/src/Controller/WizardController.php
    @@ -0,0 +1,23 @@
    +			'#title' => $this->t('Commerce: Quick Install'),
    +			'#intro_title' => $this->t('Hey! It looks like this is your first time using drupal commerce.'),
    

    This shows up, even after commerce is fully installed. Maybe 'Hey! It looks like you want help setting up and configuring Drupal Commerce!' Or something better.

12. +++ b/modules/contrib/commerce/modules/wizard/src/Controller/WizardController.php
    @@ -0,0 +1,23 @@
    +			'#intro_text' => $this->t('Lets take a few minutes to get your store setup and configured, or <a href="@url">skip the setup wizard</a> if you plan to configure your store manually.', array('@url' => '#')),
    

    What is envisioned as the action if someone selects 'skip'? Would a config option be switched so that the menu option goes away or would the form list a success message saying everything is now setup?

13. +++ b/modules/contrib/commerce/modules/wizard/src/Element/Stepper.php
    @@ -0,0 +1,81 @@
    +        // The .js-form-wrapper class is required for #states to treat details like
    

    Nit: 80 characters for comments.

14. +++ b/modules/contrib/commerce/modules/wizard/src/Form/WizardForm.php
    @@ -0,0 +1,131 @@
    +	/**
    +	 * {@inheritdoc}
    +	 */
    +	public function getFormId() {
    

    Nit: 2 spaces instead of 4, and on through this class.

15. +++ b/modules/contrib/commerce/modules/wizard/src/Form/WizardForm.php
    @@ -0,0 +1,131 @@
    +//			'#open' => TRUE,
    

    Nit: remove commented code.

16. +++ b/modules/contrib/commerce/modules/wizard/src/Form/WizardForm.php
    @@ -0,0 +1,131 @@
    +			'#button_text' => t('Next, location'),
    

    This is jarring to see 'Next, location'. I thought I was setting up a store. What's with Location showing up. It might be less of an issue once the actual store details surface. However, we do need to consider how this will look when someone has already done partial setup where maybe the store and location are setup, but the currency is done at a later date.

    Ah, I see later these buttons are changed to a 'Confirm'. I think I like that better.

    Another note, if I re-edit the store, it resets status on /all/ of the later options. Actually, if I do that with any of the options, it resets the status for all up to that point. Forcing me to re-walk through the entire wizard. I didn't necessarily expect/want that.

17. +++ b/modules/contrib/commerce/modules/wizard/templates/commerce-wizard.html.twig
    @@ -0,0 +1,52 @@
    +    {% trans %}
    +    <ol>
    +        <li>
    +            <strong>Add store details</strong><br/>
    +            Enter a name for your store, and an email to receive notifications from it.
    +        </li>
    +        <li>
    +            <strong>Enter the stores location</strong><br/>
    +            Add the store physical address, or choose one closest to its' location.
    +        </li>
    +        <li>
    +            <strong>Confirm the stores primary currency </strong><br/>
    +            We’ll try to determine your stores currency based on the location you've entered.
    +        </li>
    +        <li>
    +            <strong>Confirm the stores primary tax rate(s)</strong><br/>
    +            We’ll try to determine your stores tax rate(s) based on the location you’ve entered.
    +        </li>
    +        <li>
    +            <strong>Place your cart block in a region</strong><br/>
    +            Next, choose where your customers will see the number of items they've added to their cart on your site.
    +        </li>
    +        <li>
    +            <strong>Add a payment processor</strong><br/>
    +            Start accepting payments by choosing from over 30 supported payment processors.
    +        </li>
    +    </ol>
    +
    +    <div class="form-actions">
    +        <a href="wizard/install" class="button button--primary">Begin Setup</a>
    +        <a href="#" class="button button--danger">No, thanks</a>
    +    </div>
    +
    +    {% endtrans %}
    

    This much to translate with all that markup is going to be hard. Shorter strings are better.

The wizard will live in the commerce base module, so we don't need to bikeshed the patch module name.

Created a patch for #20

Re-rolled patch

re #24: can I see an interdiff? And usually when something is ready to be looked at again, we change the status to Needs Review. Is this ready for review or are you still working on things.

Update to .patch file with changes:
- Added fields to steps 1 and 2 of the setup

Next tasks:
- Pull those fields from the /store/add form instead of having them free form
- Add functionality to create a store entity when the 'Create Store'
button is clicked in the wizard

Can we see some updated screenshots of step 1/2?

Updated Step 1 and 2 screen shots

Generally speaking, I like this. I don't like the wording of the buttons. Maybe 'Proceed to Next Step'.

Previous patch was failing. So fixed it, and changed the labels of stepper buttons as per #29. Create Store button is disabled, how can I activate it when all steppers are done.

Hi, I suggest changing country field with select-list, like we have in store add form.

Also, I think we should have user reference field for Owner instead of a plain text-field.

1. +++ a/README.md
   @@ -0,0 +1,2 @@
   +# D-comm_setup_wiz
   

   Stray comment.

2. +++ b/modules/contrib/commerce/modules/wizard/src/Form/WizardForm.php
   @@ -31,7 +31,7 @@
   +            '#button_text' => t('Proceed to Next Step'),
   

   I think I see a trend towards lower case for all but the first word for buttons in the wild. So, "Proceed to the next step" is preferred.

3. +++ b/modules/contrib/commerce/modules/wizard/src/Form/WizardForm.php
   @@ -119,7 +119,7 @@
                '#markup' => t('<p>As a default, the cart block consists of; the number of items added to the users cart, their total, and a link to proceed to their cart for review & checkout.</p>
   -											<p>Select a region on your site where you’d like customers to view this block.</p>'),
   +<p>Select a region on your site where you’d like customers to view this block.</p>'),
   

   This much markup interspersed with translatable text is not really good for i18n. Let's just do the t() on the wording and concatenate the p tags, etc.

.

So, after we add the create forms to the wizard, we need to make some decisions. I think there are two possible paths. I prefer one over the other. We need to decide what to do when a site is already configured, or partially configured. No need to add store details and location if we've already added those.

Path #1:
If something exists, state it already exists and provide a link to the admin page where the thing can be edited. By providing a link, we can direct folks to the listing page for stores and blocks. And we don't have to decide which is the "primary" block or payment gateway.

Path #2:
Arbitrarily or deterministicly elect a "primary" store of payment gateway and display it in the edit form; instead of the normal create store form, payment gateway form, etc.

I prefer option #1. But I've listed #2 for completeness sake.

@heddn I have created SubformState for the stepper in the form. I have also made changes suggested above. Request you to review.

Thanks

New patch uploading.

This patch contains code for split 'store add' form for 'store details' and 'store location'.

Now, need to get location details upon click of stepper button so that currency suggestion can be made based on store location. Need some guidance on how I can get form details upon clicking stepper button.

Thanks

Uploading correct patch and interdiff.

We'll probably need to do the location => currency via AJAX. See https://api.drupal.org/api/drupal/core%21core.api.php/group/ajax/8.2.x.

I applied ajax to location submit button and created a callback function. But control doesn't enter the callback function, and throws error in the below screenshot.

Please suggest a solution.

I suggest using InlineFormManager for this since it is in commerce 2.13 already. Also I think it should not be a separate module, because the core commerce module is enabled anyway, this should be there. It is only needed to restrict the access to wizard after it was configured.

Hi, the setup wizard looks a very good idea. Has it be abandoned?