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

machine.js

// New Contact (Machine)
const context = {
  application_config: {
    max_attempts: 5,
    buttons: {
        save_close: {
          name: 'SAVE & CLOSE',
          display: true,
          disabled: true,
        },
        cancel: {
          name: 'CANCEL',
          display: true,
          disabled: false,
        },
        option_buttons: [
          {
            primary: true,
            name: 'SAVE & CONTINUE',
            display: true,
            disabled: true,
          },
          {
            primary: false,
            name: 'SAVE & NEW',
            display: true,
            disabled: true,
          },
        ],
      },
  },
  application_data: {
    attempts: 0,
    record: {},
    search_address_input: '',
    search_results: [],
    submission_type: '', // NEW, CLOSE, CONTINUE
    fields: {
      first_name: {
        id: 'first_name',
        error: false,
        errorText: '',
        label: 'First Name',
        required: true,
        placeholder: 'Enter First Name',
        icon: 'user',
        value: ''
      },
      last_name: {
        id: 'last_name',
        error: false,
        errorText: '',
        label: 'Last Name',
        required: true,
        placeholder: 'Enter Last Name',
        icon: 'user',
        value: ''
      },
      company_name: {
        id: 'company_name',
        error: false,
        errorText: '',
        label: 'Company',
        required: true,
        placeholder: 'Enter Company Name',
        icon: 'building-types',
        value: ''
      },
      title: {
        id: 'title',
        error: false,
        errorText: '',
        label: 'Job Title',
        required: true,
        placeholder: 'Enter Job Title',
        icon: 'jobs',
        value: ''
      },
      address: {
        id: 'address',
        error: false,
        errorText: '',
        label: 'Address',
        required: false,
        placeholder: 'Enter Address',
        icon: '',
        value: ''
      },
      phone_numbers: {
        value: [
          {
            id: 'phone_number',
            error: false,
            errorText: '',
            label: 'Phone Number',
            required: true,
            placeholder: 'Phone Number',
            icon: 'phone',
            phone_number: '',
            is_primary: true
          }
        ]
      },
      emails: {
        value: [
          {
            id: 'email',
            error: false,
            errorText: '',
            label: 'Email',
            required: true,
            placeholder: 'Enter Email',
            icon: 'envelope',
            email: '',
            is_primary: true
          }
        ]
      },
      preferred_contacted: {
        email: {
          id: 'email',
          is_preferred: true
        },
        phone_number: {
          id: 'phone_number',
          is_preferred: true
        }
      }
    }
  },
  params: {
    id: ''
  },
}

const config = {
  id: 'new-contact',
  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: 'loaded',
      states: {
        loaded: {
          type: 'parallel',
          states: {
            contact: {
              on: {
                ADD_FIELD: {
                  actions: ['assignAddNewInputField'],
                  target: '#has_pending_change'
                },
                REMOVE_FIELD: {
                  actions: ['assignRemoveSelectedInputField'],
                  target: '#has_pending_change'
                },
                SELECT_PRIMARY: {
                  actions: ['assignNewPrimary'],
                  target: '#has_pending_change'
                },
                SAVE_NEW: [
                  {
                    actions: ['hasNoErrorValidaion', 'assignSubmissionType'],
                    target: '#validating',
                  },
                ],
                SAVE_CLOSE: [
                  {
                    actions: ['hasNoErrorValidaion', 'assignSubmissionType'],
                    target: '#validating',
                  },
                ],
                SAVE_CONTINUE: [
                  {
                    actions: ['hasNoErrorValidaion', 'assignSubmissionType'],
                    target: '#validating',
                  },
                ],
              },
              initial: 'no_pending_change',
              states: {
                no_pending_change: {
                  id: 'no_pending_change',
                  on: {
                    INPUT_CHANGE: {
                      actions: ['updateFields'],
                      target: 'has_pending_change'
                    },
                  }
                },
                has_pending_change: {
                  id: 'has_pending_change',
                  on: {
                    INPUT_CHANGE: {
                      actions: ['updateFields']
                    },
                  }
                },
                validating: {
                  id: 'validating',
                  invoke: {
                    id: 'validation',
                    src: 'validation'
                  },
                  on: {
                    VALIDATE_ERROR: {
                      actions: ['assignErrorMessageToFields', 'resetSubmissionType'],
                      target: 'has_pending_change'
                    },
                    SUCCESS: {
                      actions: ['logSave'],
                      target: 'server_validation'
                    }
                  }
                },
                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',
                    },
                  }
                },
              }
            },
            address: {
              id: 'search_mode',
              initial: 'waiting_search_input',
              on: {
                SEARCH_ADDRESS_INPUT: {
                  actions: ['assignSearchAddress'],
                  target: ['#searching', '#has_pending_change']
                }
              },
              states: {
                waiting_search_input: {
                  id: 'waiting_search_input',
                  on: {
                    SELECT_ADDRESS: {
                      actions: ['setAddress'],
                      target: '#has_pending_change'
                    }
                  }
                },
                searched: {
                  on: {
                    SELECT_ADDRESS: {
                      actions: ['setAddress'],
                      target: ['#has_pending_change', 'waiting_search_input']
                    }
                  }
                },
                searching: {
                  id: 'searching',
                  invoke: [
                    {
                      id: 'search-location',
                      src: 'searchLocation'
                    }
                  ],
                  on: {
                    SUCCESS: {
                      actions: ['assignSearchResults'],
                      target: 'searched'
                    },
                    FAILED: {
                      target: 'waiting_search_input'
                    }
                  }
                }
              }
            }
          }
        },
        save_new: {
          id: 'save_new',
           invoke: {
            id: 'save-record',
            src: 'saveRecord'
          },
          on: {
            SUCCESS: {
              actions: ['resetForm' , 'sendToastMessage', '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' , 'sendToastMessage', 'resetSubmissionType'],
              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','sendToastMessage', '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)