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

machine.js

Machine({
  id: "booking",
  context: {
    newsletterIndex: null,
    placementId: null,
    availabilityId: null,
    reservationId: null
  },
  type: "parallel",
  states: {
    site: {
      initial: "loading",
      states: {
        loading: {
          invoke: {
            src: "fetchSite",
            onDone: "success",
            onError: "failure"
          }
        },
        success: {},
        failure: {
          on: {
            RETRY: {
              target: "loading"
            }
          }
        }
      },
    },
    newsletterSample: {
      initial: "loading",
      states: {
        loading: {
          invoke: {
            src: "fetchNewsletterSample",
            onDone: "success",
            onError: "failure"
          }
        },
        success: {},
        failure: {
          on: {
            RETRY: {
              target: "loading"
            }
          }
        }
      },
    },
    placements: {
      initial: "loading",
      states: {
        loading: {
          invoke: {
            src: "fetchPlacements",
            onDone: "success",
            onError: "failure"
          }
        },
        success: {},
        failure: {
          on: {
            RETRY: {
              target: "loading"
            }
          }
        }
      },
    },
    availabilities: {
      initial: "idle",
      states: {
        idle: {},
        loading: {
          invoke: {
            src: "fetchAvailabilities",
            onDone: "success",
            onError: "failure"
          }
        },
        success: {},
        failure: {
          on: {
            RETRY: {
              target: "loading"
            }
          }
        }
      },
      on: {
        SELECT_PLACEMENT: {
          target: ".loading"
        }
      }
    },
    reserveDate: {
      initial: "idle",
      states: {
        idle: {},
        loading: {
          invoke: {
            src: "reserveDate",
            onDone: "success",
            onError: "failure"
          }
        },
        success: {},
        failure: {
          on: {
            RETRY: {
              target: "loading"
            }
          }
        }
      },
      on: {
        SELECT_AVAILABILITY: {
          target: ".loading"
        }
      }
    },
    extendReservation: {
      initial: "idle",
      states: {
        idle: {},
        loading: {
          invoke: {
            src: "extendReservation",
            onDone: "success",
            onError: "failure"
          }
        },
        success: {},
        failure: {
          on: {
            RETRY: {
              target: "loading"
            }
          }
        }
      },
      on: {
        STORE_ADVERTISER: {
          target: ".loading"
        },
        STORE_AD_COPY: {
          target: ".loading"
        },
        SUBMIT_ADVERTISER: {
          target: ".loading"
        },
        SUBMIT_AD_COPY: {
          target: ".loading"
        },
        SUBMIT_PAYMENT: {
          target: ".loading"
        }
      }
    },
    releaseReservation: {
      initial: "idle",
      states: {
        idle: {},
        loading: {
          invoke: {
            src: "releaseReservation",
            onDone: "success",
            onError: "failure"
          }
        },
        success: {},
        failure: {
          on: {
            RETRY: {
              target: "loading"
            }
          }
        }
      },
      on: {
        SELECT_PLACEMENT: {
          target: ".loading"
        },
        SELECT_AVAILABILITY: {
          target: ".loading"
        },
        CANCEL_RESERVATION: {
          target: ".loading"
        }
      }
    },
    steps: {
      initial: "step1",
      states: {
        step1: {
          on: {
            SELECT_NEWSLETTER: {
              actions: "setNewsletterIndex",
            },
            DISMISS_NEWSLETTER: {
              actions: "resetNewsLetterIndex",
            },
            SPONSORSHIP_OPTIONS: {
              target: "step2",
            },
          },
        },
        step2: {
          on: {
            SELECT_PLACEMENT: {
              actions:  "setPlacementId",
            },
            SUBMIT_PLACEMENT: {
              target: "step3",
            },
          },
        },
        step3: {
          on: {
            SELECT_AVAILABILITY: {
              actions: "setAvailabilityId",
            },
            SUBMIT_AVAILABILITY: {
              target: "step4",
            },
            STEP_2: {
              target: "step2",
            },
          },
        },
        step4: {
          type: "parallel",
          states: {
            upsertAdvertiser: {
              initial: "idle",
              states: {
                idle: {
                  on: {
                    SUBMIT_ADVERTISER: {
                      target: "loading"
                    }
                  }
                },
                loading: {
                  invoke: {
                    src: "upsertAdvertiser",
                    onDone: "success",
                    onError: "failure"
                  }
                },
                success: {
                  type: "final"
                },
                failure: {
                  on: {
                    RETRY: {
                      target: "loading"
                    }
                  }
                }
              }
            }
          },
          on: {
            STORE_ADVERTISER: {
              actions: "storeAdvertiser"
            },
            STEP_2: {
              target: "step2",
            },
            STEP_3: {
              target: "step3",
            },
          },
          onDone: {
            target: "step5",
          }
        },
        step5: {
          type: "parallel",
          states: {
            upsertAdCopy: {
              initial: "idle",
              states: {
                idle: {
                  on: {
                    SUBMIT_AD_COPY: {
                      target: "loading"
                    }
                  }
                },
                loading: {
                  invoke: {
                    src: "upsertAdCopy",
                    onDone: "success",
                    onError: "failure"
                  }
                },
                success: {
                  type: "final"
                },
                failure: {
                  on: {
                    RETRY: {
                      target: "loading"
                    }
                  }
                }
              }
            },
            uploadImage: {
              initial: "idle",
              states: {
                idle: {
                  on: {
                    UPLOAD_IMAGE: {
                      target: "loading"
                    }
                  }
                },
                loading: {
                  invoke: {
                    src: "uploadImage",
                    onDone: "success",
                    onError: "failure"
                  }
                },
                success: {
                  type: "final"
                },
                failure: {
                  on: {
                    RETRY: {
                      target: "loading"
                    }
                  }
                }
              },
            }
          },
          on: {
            STORE_AD_COPY: {
              actions: "storeAdCopy"
            },
            STEP_2: {
              target: "step2",
            },
            STEP_3: {
              target: "step3",
            },
            STEP_4: {
              target: "step4",
            },
          },
          onDone: {
            target: "step6",
          },
        },
        step6: {
          type: "parallel",
          states: {
            makePayment: {
              initial: "idle",
              states: {
                idle: {
                  on: {
                    SUBMIT_PAYMENT: {
                      target: "loading"
                    }
                  }
                },
                loading: {
                  invoke: {
                    src: "makePayment",
                    onDone: "success",
                    onError: "failure"
                  }
                },
                success: {
                  type: "final"
                },
                failure: {
                  on: {
                    RETRY: {
                      target: "loading"
                    }
                  }
                }
              },
            }
          },
          on: {
            STEP_2: {
              target: "step2",
            },
            STEP_3: {
              target: "step3",
            },
            STEP_4: {
              target: "step4",
            },
            STEP_5: {
              target: "step5",
            },
          },
          onDone: {
            target: "step7",
          }
        },
        step7: {},
      },
    }
  }
})