Add a New Step Group and Step in checkout flow

Description:

addStepsGroup() is a function that is often used to customize and modify the checkout process by adding new step groups to the checkout flow. Step groups are used to organize the different stages of the checkout process, such as cart review, shipping information, payment, and order confirmation. Now i added a new stepgroup in checkout flow . Inside that step group i added step .

Solution:
Firstly we need to Add a New Module to Checkout Step:
In your extensions developer workspace, create a new extension using gulp extension:create.
Create the Entry Point File
We’re going to need two JS files for this extension: one to act as an entry point file, and the other to be the view that’s going to render the input field.

define('Example.PreferredDelivery.PreferredDelivery'
, [
    'Example.PreferredDelivery.PreferredDelivery.View'
  ]
,   function
  (
    PreferredDeliveryContainerView
  )
{
  'use strict';

  return  {
    mountToApp: function mountToApp (container)
    {
      var checkout = container.getComponent('Checkout');

      checkout.addModuleToStep(
      {
        step_url: 'opc' // if you're using a non-OPC checkout, then you will need to put the specific step URL in instead
      , module: {
          id: 'PreferredDeliveryView'
        , index: 6
        , classname: 'Example.PreferredDelivery.PreferredDelivery.View'
        }
      });

      checkout.addModuleToStep(
      {
        step_url: 'review'
      , module: {
          id: 'PreferredDeliveryView'
        , index: 99
        , classname: 'Example.PreferredDelivery.PreferredDelivery.View'
        }
      });
    }
  };
});

Create the View
In JavaScript, create Example.PreferredDelivery.PreferreDelivery.View.js and in it put:

define('Example.PreferredDelivery.PreferredDelivery.View'
, [
    'Wizard.Module'

  , 'example_preferreddelivery_preferreddelivery.tpl'
  ]
, function (
    WizardModule

  , example_preferreddelivery_preferreddelivery_tpl
  )
{
  'use strict';

  return WizardModule.extend({

    template: example_preferreddelivery_preferreddelivery_tpl

  , getContext: function getContext()
    {
      return {
        isReview: this.step.step_url == 'review'
      };
    }
  });
});

Create the Template
We’re going to re-use the same template for both the editable and read-only parts of its journey. Therefore, we need to do add in a couple of conditionals to make sure we render the correct content at the right time.

In Templates, create example_preferreddelivery_preferreddelivery.tpl and in it put:

<h2 class="preferreddelivery-title">{{translate 'Preferred Delivery Date'}}</h2>
<div id="preferreddelivery-container" class="preferreddelivery-container">
    {{#if isReview}}
        {{#if model.options.custbody_preferred_date}}
            <p>{{model.options.custbody_preferred_date}}</p>
        {{else}}
            <p>{{translate 'No date selected'}}</p>
        {{/if}}
    {{else}}
        <input class="preferreddelivery-input" type="date" name="custbody_preferred_date" data-todayhighlight="true" value="{{model.options.custbody_preferred_date}}">
    {{/if}}
</div>

Test and Deploy:
And that’s it. Now we can run gulp extension:local and test out our extension.
Add a New Step Group and Step:
In the above customization, we added the field to an existing step and step group. However, if your customization requires its own space then you can create your own step group and step to add it to.

define('Example.PreferredDelivery.PreferredDelivery', [
    'Example.PreferredDelivery.PreferredDelivery.View'
], function (
    PreferredDeliveryContainerView
){
    'use strict';

    return  {
        mountToApp: function mountToApp (container) {
            var checkout = container.getComponent('Checkout');

            checkout.addStepsGroup({group: {
                index: 3, 
                name: 'Preferred Delivery', 
                url: 'preferred-delivery' 
            }})

            .done(function () {
                checkout.addStep({step: {
                    group_name: 'Preferred Delivery', 
                    index: 3, // suggested match the step group index if you're adding them at the same time
                    isActive: function () {}, // yes, an empty function
                    name: 'Preferred Delivery', 
                    showStep: function () {return true}, // can obviously be more complicated than this
                    url: 'preferred-delivery/date' 
                }})

                .done(function () {
                    checkout.addModuleToStep({
                        step_url: 'preferred-delivery/date', 
                        module: { 
                            id: 'PreferredDeliveryView', 
                            index: 0, 
                            classname: 'Example.PreferredDelivery.PreferredDelivery.View', 
                            options: {container: '#wizard-step-content'}
                        }
                    })
                });
            });

            checkout.addModuleToStep({
                step_url: 'review',
                module: {
                    id: 'PreferredDeliveryView',
                    index: 99,
                    classname: 'Example.PreferredDelivery.PreferredDelivery.View'
                }
            });
        }
    };
});

Output: