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

machine.js

// New Location - Counter (Machine)
const context = {
  application_config: {
    max_attempts: 5,
    buttons: {
        save_close: {
          name: 'SAVE & CLOSE',
          display_name: 'Save & Close',
          icon: 'check',
          display: true,
          disabled: true,
        },
        cancel: {
          name: 'CANCEL',
          display_name: 'Cancel',
          icon: 'close',
          display: true,
          disabled: false,
        },
        option_buttons: [
          {
            primary: true,
            name: 'SAVE & CONTINUE',
            display_name: 'Save & Continue',
            icon: 'check',
            display: true,
            disabled: true,
          },
          {
            primary: false,
            name: 'SAVE & NEW',
            display_name: 'Save & New',
            icon: 'check',
            display: true,
            disabled: true,
          },
        ],
      },
  },
  application_data: {
    attempts: 0,
    record: {},
    submission_type: '', // NEW, CLOSE, CONTINUE
    fields: {
      location_type: {
        id: 'location_type',
        error: false,
        errorText: '',
        label: 'Location Type',
        required: true,
        placeholder: 'Enter Location Type',
        icon: 'help-outline',
        value: 'Counter',
        disabled: true
      },
      counter_name: {
        id: 'counter_name',
        error: false,
        errorText: '',
        label: 'Counter Name',
        required: true,
        placeholder: 'Counter Name',
        icon: 'help-outline',
        value: ''
      },
      address: {
        id: 'address',
        error: false,
        errorText: '',
        label: 'Address',
        required: true,
        placeholder: 'Enter Address',
        icon: 'help-outline',
        value: ''
      },
      region: {
        id: 'region',
        error: false,
        errorText: '',
        label: 'Region',
        required: true,
        placeholder: 'Region',
        icon: 'help-outline',
        value: ''
      },
      location_manager: {
        id: 'location_manager',
        error: false,
        errorText: '',
        label: 'Location Manager',
        required: true,
        placeholder: 'Location Manager',
        icon: 'help-outline',
        value: ''
      },
      email: {
        id: 'email',
        error: false,
        errorText: '',
        label: 'Email',
        required: true,
        placeholder: 'Email',
        icon: 'help-outline',
        value: ''
      },
      phone_number: {
        id: 'phone_number',
        error: false,
        errorText: '',
        label: 'Phone Number',
        required: true,
        placeholder: 'Phone Number',
        icon: 'help-outline',
        value: ''
      },
    }
  },
  params: {
    id: ''
  },
}

const config = {
  id: 'new-location-counter',
  initial: 'loading',
  on: {
    COMPONENT_UNMOUNT: 'done'
  },
  states: {
    loading: {
      id: 'loading',
      initial: 'get_application_config',
      states: {
        get_application_config: {
          after: {
            REQUEST_TIMEOUT: 'request_timeout'
          },
          invoke: {
            id: 'get-application-config',
            src: 'getApplicationConfig'
          },
          on: {
            SUCCESS: {
              actions: ['assignApplicationConfig'],
              target: 'get_application_data'
            },
            ERROR: {
              actions: ['toastGetApplicationConfigErrorMessage'],
              target: '#retry'
            }
          }
        },
        get_application_data: {
          after: {
            REQUEST_TIMEOUT: 'request_timeout'
          },
          invoke: {
            id: 'get-application-data',
            src: 'getApplicationData'
          },
          on: {
            SUCCESS: {
              actions: ['assignApplicationData', 'resetRetry'],
              target: '#ready'
            },
            ERROR: {
              actions: ['toastGetApplicationDataErrorMessage'],
              target: '#retry'
            }
          }
        },
        request_timeout: {
          on: {
            REFRESH: '#loading'
          }
        }
      }
    },
    ready: {
      id: 'ready',
      initial: 'create_record',
      states: {
        create_record: {
          after: {
            REQUEST_TIMEOUT: 'request_timeout'
          },
          invoke: {
            id: 'create-record',
            src: 'createRecord'
          },
          on: {
            SUCCESS: {
              actions: ['assignRecord'],
              target: 'loaded'
            },
            ERROR: {
              actions: ['toastErrorMessage'],
              target: 'error'
            }
          }
        },
        loaded: {
            on: {
                SAVE_NEW: [
                    {
                      // cond: 'hasNoErrorValidaion',
                    actions: ['assignSubmissionType'],
                    target: '#validating',
                    },
                ],
                SAVE_CLOSE: [
                    {
                      // cond: 'hasNoErrorValidaion',
                    actions: ['assignSubmissionType'],
                    target: '#validating',
                    },
                ],
                SAVE_CONTINUE: [
                    {
                      // cond: 'hasNoErrorValidaion',
                    actions: ['assignSubmissionType'],
                    target: '#validating',
                    },
                ],
                CANCEL: {
                  target: '#cancel_confirmation'
                }
            },
            initial: 'no_pending_change',
            states: {
            no_pending_change: {
                id: 'no_pending_change',
                on: {
                INPUT_CHANGE: {
                    actions: ['updateFieldInputs'],
                    target: 'has_pending_change'
                },
                }
            },
            has_pending_change: {
                id: 'has_pending_change',
                on: {
                INPUT_CHANGE: {
                    actions: ['updateFieldInputs']
                },
                }
            },
            validating: {
                id: 'validating',
                invoke: {
                id: 'validation',
                src: 'validation'
                },
                on: {
                VALIDATE_ERROR: {
                    actions: ['assignErrorMessageToFields', 'resetSubmissionType'],
                    target: 'has_pending_change'
                },
                SUCCESS: {
                    actions: ['logSave'],
                    target: 'server_validation'
                }
                }
            },
            cancel_confirmation: {
              id: 'cancel_confirmation',
              on: {
                YES: {
                  actions: ['closeTab'],
                  target: '#done'
                },
                NO: {
                  target: 'has_pending_change'
                }
              }
            },
            server_validation: {
                id: 'server-validation',
                invoke: {
                id: 'server-validations',
                src: 'serverValidations'
                },
                on: {
                SERVER_VALIDATE_ERROR: {
                    actions: ['assignServerValidationErrorMessage', 'resetSubmissionType'],
                    target: 'has_pending_change'
                },
                SAVE_NEW_VALIDATED: {
                    target: '#save_new',
                },
                SAVE_CLOSE_VALIDATED: {
                    target: '#save_close',
                },
                SAVE_CONTINUE_VALIDATED: {
                    target: '#save_continue',
                },
                }
            },
            }
        },
        save_new: {
          id: 'save_new',
           invoke: {
            id: 'save-record',
            src: 'saveRecord'
          },
          on: {
            SUCCESS: {
              actions: ['resetForm' , 'sendToastSuccessMessage', 'resetSubmissionType'],
              target: '#no_pending_change',
            },
            ERROR: {
              actions: ['assignError', 'sendToastErrorMessage', 'resetSubmissionType'],
              target: '#has_pending_change',
            },
          },
          after: {
            20000: {
              actions: ['assignError', 'sendToastErrorMessage', 'resetSubmissionType'],
              target: '#has_pending_change',
            },
          },
        },
        save_close: {
          id: 'save_close',
          invoke: {
            id: 'save-record',
            src: 'saveRecord'
          },
          on: {
            SUCCESS: {
              actions: ['closeTab' , 'sendToastSuccessMessage'],
              target: '#done',
            },
            ERROR: {
              actions: ['assignError', 'sendToastErrorMessage', 'resetSubmissionType'],
              target: '#has_pending_change',
            },
          },
          after: {
            20000: {
              actions: ['assignError', 'sendToastErrorMessage', 'resetSubmissionType'],
              target: '#has_pending_change',
            },
          },
        },
        save_continue: {
          id: 'save_continue',
          invoke: {
            id: 'save-record',
            src: 'saveRecord'
          },
          on: {
            SUCCESS: {
              actions: ['resetForm','sendToastSuccessMessage', 'resetSubmissionType','openRecordTab'],
              target: '#done',
            },
            ERROR: {
              actions: ['assignError', 'sendToastErrorMessage', 'resetSubmissionType'],
              target: '#has_pending_change',
            },
          },
          after: {
            20000: {
              actions: ['assignError', 'sendToastErrorMessage', 'resetSubmissionType'],
              target: '#has_pending_change',
            },
          },
        },
        error: {
          on: {
            REFRESH: 'loaded'
          }
        }
      }
    },
    retry: {
      id: 'retry',
      on: {
        RETRY: [
          {
            cond: 'hasReachedMaxAttempts',
            target: 'error'
          },
          {
            actions: ['incrementRetry'],
            target: 'loading'
          }
        ]
      }
      // always: [
      //   {
      //     cond: 'hasReachedMaxAttempts',
      //     target: 'done'
      //   },
      //   {
      //     actions: ['incrementRetry'],
      //     target: '#loading'
      //   }
      // ]
    },
    timeout: {
      id: 'done',
      type: 'final'
    },
    error: {
      id: 'done',
      type: 'final'
    },
    done: {
      id: 'done',
      type: 'final'
    }
  }
}

const implementations = {
  delays: {
    REQUEST_TIMEOUT: () => 5000
  }
}

Machine(config, implementations)