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

machine.js

// Location Rate Templates - Counter (Machine)
const context = {
  application_config: {
    max_attempts: 5,
    buttons: {
      cancel: {
        name: 'CANCEL',
        display_name: 'Cancel',
        icon: 'close',
        display: true,
        disabled: true
      },
      save: {
        name: 'SAVE',
        display_name: 'Save Changes',
        icon: 'check',
        display: true,
        disabled: true
      }
    }
  },
  application_data: {
    attempts: 0,
    record: {},
    form: {
      information: {
        rate: {
          id: 'rate',
          display: true,
          fields: {
            template_name: {
              id: 'template_name',
              error: false,
              errorText: '',
              label: 'Template Name',
              required: true,
              placeholder: 'Template Name',
              icon: 'help-outline',
              value: '',
            },
            effective_date: {
              id: 'effective_date',
              error: false,
              errorText: '',
              label: 'Effective Date',
              required: true,
              placeholder: 'Effective Date',
              icon: 'help-outline',
              value: ''
            },
            rate_range: {
              id: 'rate_range',
              error: false,
              errorText: '',
              label: 'Rate Range',
              required: true,
              placeholder: 'Rate Range',
              icon: 'help-outline',
              value: ''
            },
          }
        }
      },
      conditions: {
        add_conditions: {
          id: 'add_conditions',
          display: true,
          fields: {
            options: {
              id: 'add_conditions',
              error: false,
              errorText: '',
              label: 'Add Conditions',
              required: false,
              placeholder: 'Add Conditions',
              icon: 'add',
              options: [
                {
                  display_name: 'Location',
                  value: 'location'
                },
                {
                  display_name: 'Vehicle Class',
                  value: 'vehicle_class'
                },
                {
                  display_name: 'Vehicle Details',
                  value: 'vehicle_details'
                },
                {
                  display_name: 'Vehicle Odometer',
                  value: 'vehicle_odometer'
                }
              ],
              value: ''
            }
          }
        },
        location: {
          id: 'location',
          display: false,
          fields: {
            region: {
              id: 'region',
              error: false,
              errorText: '',
              label: 'Region',
              required: true,
              placeholder: 'Region',
              icon: 'help-outline',
              value: '',
              disabled: true
            },
            counter: {
              id: 'counter',
              error: false,
              errorText: '',
              label: 'Counter',
              required: true,
              placeholder: 'Counter',
              icon: 'help-outline',
              value: '',
              disabled: true
            },
            lot: {
              id: 'lot',
              error: false,
              errorText: '',
              label: 'Lot',
              required: true,
              placeholder: 'Lot',
              icon: 'help-outline',
              value: ''
            },
          }
        },
        vehicle_class: {
          id: 'vehicle_class',
          display: false,
          fields: {
            class: {
              id: 'vehicle_class',
              error: false,
              errorText: '',
              label: 'Vehicle Class',
              required: true,
              placeholder: 'Vehicle Class',
              icon: 'help-outline',
              value: '',
            }
          }
        },
        vehicle_details: {
          id: 'vehicle_details',
          display: false,
          fields: {
            vehicle_year: {
              id: 'vehicle_year',
              error: false,
              errorText: '',
              label: 'Vehicle Year',
              required: true,
              placeholder: 'Vehicle Year',
              icon: 'help-outline',
              value: '',
            },
            vehicle_make: {
              id: 'vehicle_make',
              error: false,
              errorText: '',
              label: 'Vehicle Make',
              required: true,
              placeholder: 'Vehicle Make',
              icon: 'help-outline',
              value: '',
            },
            vehicle_model: {
              id: 'vehicle_model',
              error: false,
              errorText: '',
              label: 'Vehicle Model',
              required: true,
              placeholder: 'Vehicle Model',
              icon: 'help-outline',
              value: '',
            },
            vehicle_trim: {
              id: 'vehicle_trim',
              error: false,
              errorText: '',
              label: 'Vehicle Trim',
              required: true,
              placeholder: 'Vehicle Trim',
              icon: 'help-outline',
              value: '',
            }
          }
        },
        vehicle_odometer: {
          id: 'vehicle_odometer',
          display: false,
          fields: {
            operation: {
              id: 'operation',
              error: false,
              errorText: '',
              label: 'Odometer Operation',
              required: false,
              placeholder: 'Odometer Operation',
              icon: 'help-outline',
              value: '',
            },
            odometer_min: {
              id: 'odometer_min',
              error: false,
              errorText: '',
              label: 'Odometer Minimum',
              required: true,
              placeholder: 'Odometer Minimum',
              icon: 'help-outline',
              value: '',
            },
            odometer_max: {
              id: 'odometer_max',
              error: false,
              errorText: '',
              label: 'Odometer Maximum',
              required: true,
              placeholder: 'Odometer Maximum',
              icon: 'help-outline',
              value: '',
            },
          }
        }
      }
    }
  },
  params: {
    id: ''
  },
}

const config = {
  id: 'location-edit-rate-templates-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: 'fetch',
      states: {
        fetch: {
          id: 'fetch',
          after: {
            REQUEST_TIMEOUT: 'error'
          },
          invoke: {
            id: 'fetch-record',
            src: 'fetchRecord'
          },
          on: {
            SUCCESS: {
              actions: ['assignRecord'],
              target: 'fetch_field_options'
            },
            FAILED: {
              actions: ['toastErrorFetchingMessage'],
              target: 'error'
            }
          }
        },
        fetch_field_options: {
          after: {
            REQUEST_TIMEOUT: 'request_timeout'
          },
          invoke: {
            id: 'fetch-field-options',
            src: 'fetchFieldOptions'
          },
          on: {
            SUCCESS: {
              actions: ['assignFieldOptions'],
              target: 'loaded'
            },
            ERROR: {
              actions: ['toastErrorMessage'],
              target: 'error'
            }
          }
        },
        loaded: {
              initial: 'no_pending_change',
              on: {
                ADD_CONDITION: {
                  actions: ['addSelectedConditionForm']
                },
                REMOVE_CONDITION: {
                  actions: ['removeSelectedConditionForm', 'clearSelectedFormFields']
                }
              },
              states: {
                no_pending_change: {
                  id: 'no_pending_change',
                  on: {
                    INPUT_CHANGE: {
                      actions: ['updateFieldInputs'],
                      target: 'has_pending_change'
                    },
                    SUBMIT: {
                      actions: ['sendToastNoChangesMadeMessage']
                    }
                  }
                },
                has_pending_change: {
                  id: 'has_pending_change',
                  on: {
                    INPUT_CHANGE: {
                      actions: ['updateFieldInputs']
                    },
                    SUBMIT: {
                      target: 'validating'
                    }
                  }
                },
                validating: {
                  id: 'validating',
                  invoke: {
                    id: 'validation',
                    src: 'validation'
                  },
                  on: {
                    VALIDATE_ERROR: {
                      actions: ['assignErrorMessageToFields'],
                      target: 'has_pending_change'
                    },
                    SUCCESS: {
                      target: 'submitting'
                    }
                  }
                },
                // server_validation: {
                //   id: 'server-validation',
                //   invoke: {
                //     id: 'server-validations',
                //     src: 'serverValidations'
                //   },
                //   on: {
                //     SERVER_VALIDATE_ERROR: {
                //       actions: ['assignServerValidationErrorMessage'],
                //       target: 'has_pending_change'
                //     },
                //     SUCCESS: {
                //       actions: ['logSave'],
                //       target: 'submitting'
                //     }
                //   }
                // },
                submitting: {
                  id: 'submitting',
                  after: {
                    REQUEST_TIMEOUT: {
                      actions: ['toastUpdateContactTimeoutMessage'],
                      target: 'has_pending_change'
                    }
                  },
                  invoke: [
                    {
                      id: 'save-record',
                      src: 'saveRecord'
                    }
                  ],
                  on: {
                    SUCCESS: {
                      actions: ['assignRecord'],
                      target: 'submitted'
                    },
                    ERROR: {
                      actions: ['toastUpdateContactErrorMessage'],
                      target: 'has_pending_change'
                    }
                  }
                },
                submitted: {
                  entry: [
                    'toastUpdateContactSuccessMessage',
                    'notifyChangesToListener'
                  ],
                  after: {
                    REQUEST_TIMEOUT: 'no_pending_change'
                  }
                }
              }
            },
        error: {
          on: {
            REFRESH: 'fetch'
          }
        }
      }
    },
    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)