Generated by XState Viz: https://xstate.js.org/viz

machine.js

const fetchMachine = Machine({
    id: 'Create SSL Quote',
    initial: 'Home',
    states: {
      Home: {
        on: {
          'Create SSL Quote Button Click': 'Opportunities'
        }
      },
      Opportunities: {
        on: {
          'Clear selected account': 'Opportunities.Next button.disabled',
          'Search account': {
            target:  'Opportunities.Accounts list.visible',
            actions: ['Fetch accounts list']
          },
          'Select account': {
            target:  'Opportunities.Opportunities table.visible',
            actions: ['Fetch opportunities']
          },
          'Next button click': 'Contract'
        },
        initial: "Account search box",
        states: {
          'Account search box': {
            on: {
              'Clear selected account': 'Account search box.Placeholder text',
               'Select account': 'Account search box.Selected account details'
            },
             initial: "Placeholder text",
              states: {
                "Placeholder text": {},
                "Selected account details": {}
              }
          },
            'Accounts list': {
              on: {
                 'Clear selected account': 'Accounts list.hidden',
                 'Select account': 'Accounts list.hidden'
              },
              initial: "hidden",
              states: {
                visible: {},
                hidden: {}
              }
            },
            'Opportunities table': {
              on: {
                "Select opportunity": "Next button.enabled",
                'Clear selected account': 'Opportunities table.hidden',
                  'Select account': 'Opportunities table.visible'
              },
              initial: "hidden",
              states: {
                visible: {},
                hidden: {}
              }
            },
            'Next button': {
              initial: "disabled",
              states: {
                enabled: {
         
                },
                disabled: {}
              }
            },
            'Back button': {
              initial: "hidden",
              states: {
                hidden: {}
              }
            }
        }
      },
      Contract: {
        on: {
             'Next button click': 'Quote details'
        },
       type: 'parallel',
       states: {
         "Contracts accordian": {
           on: {
             select: {
               target:  'Products list.No product selected',
               actions: "Load contract products"
             }
           },
           initial: 'collapsed',
           states: {
             expanded: {},
             collapsed: {}
           }
         },
         "Products list": {
           on: {
             'Product selection': 'Next button.enabled'
           },
           initial: 'No product selected',
           states: {
             'Product(s) selected': {},
             'No product selected': {}
           }
         },
         'Next button': {
              initial: "disabled",
              states: {
                enabled: {
         
                },
                disabled: {
                  
                }
              }
            }
       }
      },
      'Quote details': {}
    }
  });