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

machine.js

Machine({
  id: "booking",
  context: {
    newsletterIndex: null,
    placementId: null,
    availabilityId: null,
  },
  type: "parallel",
  states: {
    booking: {
      initial: "step1",
      states: {
        step1: {
          type: "parallel",
          states: {
            site: {
              initial: "loading",
              states: {
                loading: {
                  invoke: {
                    src: "fetchSite",
                    onDone: "success",
                    failure: "failure"
                  }
                },
                success: {
                  type: "final"
                },
                failure: {
                  on: {
                    RETRY: {
                      target: "loading"
                    }
                  }
                }
              }
            },
            newsletterSample: {
              initial: "loading",
              states: {
                loading: {
                  invoke: {
                    src: "fetchNewsletterSample",
                    onDone: "success",
                    failure: "failure"
                  }
                },
                success: {
                  type: "final"
                },
                failure: {
                  on: {
                    RETRY: {
                      target: "loading"
                    }
                  }
                }
              }
            },
            placements: {
              initial: "loading",
              states: {
                loading: {
                  invoke: {
                    src: "fetchPlacements",
                    onDone: "success",
                    failure: "failure"
                  }
                },
                success: {
                  type: "final"
                },
                failure: {
                  on: {
                    RETRY: {
                      target: "loading"
                    }
                  }
                }
              }
            },
            ready: {
              initial: "awaiting",
              states: {
                awaiting: {
                  on: {
                    CONTINUE: {
                      target: "done"
                    }
                  }
                },
                done: {
                  type: "final"
                }
              }
            }
          },
          on: {
            SELECT_NEWSLETTER: {
              actions: "setNewsletterIndex",
            },
            DISMISS_NEWSLETTER: {
              actions: "resetNewsletterIndex",
            }
          },
          onDone: {
            target: "step2"
          }
        },
        step2: {
          initial: "idle",
          states: {
            idle: {},
            reserveDate: {
              initial: "loading",
              states: {
                loading: {
                  invoke: {
                    src: "reserveDate",
                    onDone: "success",
                    failure: "failure"
                  }
                },
                success: {
                  type: "final"
                },
                failure: {
                  on: {
                    RETRY: {
                      target: "loading"
                    }
                  }
                }
              },
              onDone: {
                target: "availabilities"
              }
            },
            availabilities: {
              initial: "loading",
              states: {
                loading: {
                  invoke: {
                    src: "fetchAvailabilities",
                    onDone: "success",
                    failure: "failure"
                  }
                },
                success: {},
                failure: {
                  on: {
                    RETRY: {
                      target: "loading"
                    }
                  }
                }
              }
            }
          },
          on: {
            SELECT_PLACEMENT: {
              target: ".reserveDate",
              actions: "setPlacementId",
            },
            CONTINUE: {
              target: "step3",
              in: "#booking.step2.loadingAvailabilities.success"
            },
          },
        },
        step3: {
          on: {
            SELECT_AVAILABILITY: {
              actions: "setAvailabilityId",
            },
            CONTINUE: {
              target: "step4",
            },
            STEP_1: {
              target: "step1",
            },
            STEP_2: {
              target: "step2",
            },
          },
        },
        step4: {
          initial: "idle",
          states: {
            idle: {},
            registeringAdvertiser: {
              initial: "loading",
              states: {
                loading: {
                  invoke: {
                    src: "registerAdvertiser",
                    onDone: "success",
                    failure: "failure"
                  }
                },
                success: {
                  type: "final"
                },
                failure: {
                  on: {
                    RETRY: {
                      target: "loading"
                    }
                  }
                }
              }
            }
          },
          on: {
            CONTINUE: {
              target: "step5",
            },
            STEP_1: {
              target: "step1",
            },
            STEP_2: {
              target: "step2",
            },
            STEP_3: {
              target: "step3",
            },
          },
        },
        step5: {
          type: "parallel",
          states: {
            idle: {},
            settingAdUp: {
              initial: "idle",
              states: {
                idle: {},
                loading: {
                  invoke: {
                    src: "setupAd",
                    onDone: "success",
                    failure: "failure"
                  }
                },
                success: {
                  type: "final"
                },
                failure: {
                  on: {
                    RETRY: {
                      target: "loading"
                    }
                  }
                }
              }
            },
            uploadingImage: {
              initial: "idle",
              states: {
                idle: {},
                loading: {
                  invoke: {
                    src: "uploadImage",
                    onDone: "success",
                    failure: "failure"
                  }
                },
                success: {},
                failure: {
                  on: {
                    RETRY: {
                      target: "loading"
                    }
                  }
                }
              }
            }
          },
          on: {
            CONTINUE: {
              target: "step6",
            },
            STEP_1: {
              target: "step1",
            },
            STEP_2: {
              target: "step2",
            },
            STEP_3: {
              target: "step3",
            },
            STEP_4: {
              target: "step4",
            },
          },
        },
        step6: {
          initial: "idle",
          states: {
            idle: {},
            fetchingPaymentInfo: {
              initial: "loading",
              states: {
                loading: {
                  invoke: {
                    src: "fetchPaymentInfo",
                    onDone: "success",
                    failure: "failure"
                  }
                },
                success: {
                  type: "final"
                },
                failure: {
                  on: {
                    RETRY: {
                      target: "loading"
                    }
                  }
                }
              },
              onDone: {
                target: "confirmingPayment"
              }
            },
            confirmingPayment: {
              initial: "loading",
              states: {
                loading: {
                  invoke: {
                    src: "confirmPayment",
                    onDone: "success",
                    failure: "failure"
                  }
                },
                success: {
                  type: "final"
                },
                failure: {
                  on: {
                    RETRY: {
                      target: "loading"
                    }
                  }
                }
              }
            },
            processingPayment: {
              initial: "loading",
              states: {
                loading: {
                  invoke: {
                    src: "processPayment",
                    onDone: "success",
                    failure: "failure"
                  }
                },
                success: {
                  type: "final"
                },
                failure: {
                  on: {
                    RETRY: {
                      target: "loading"
                    }
                  }
                }
              }
            }
          },
          on: {
            STEP_1: {
              target: "step1",
            },
            STEP_2: {
              target: "step2",
            },
            STEP_3: {
              target: "step3",
            },
            STEP_4: {
              target: "step4",
            },
            STEP_5: {
              target: "step5",
            },
          },
          onDone: {
            target: "step7"
          }
        },
        step7: {},
      },
    },
    reservation: {
      type: "parallel",
      states: {
        extending: {
         initial: "idle",
         states: {
            idle: {
              on: {
                EXTEND_RESERVTION: {
                  target: "loading"
                }
              }
            },
            loading: {
              invoke: {
                src: "extendReservation",
                onDone: "success",
                failure: "failure"
              }
            },
            success: {},
            failure: {
              on: {
                RETRY: {
                  target: "loading"
                }
              }
            }
          }
        },
        releasing: {
         initial: "idle",
         states: {
            idle: {
              on: {
                RELEASE_RESERVATION: {
                  target: "loading"
                }
              }
            },
            loading: {
              invoke: {
                src: "releaseReservation",
                onDone: "success",
                failure: "failure"
              }
            },
            success: {},
            failure: {
              on: {
                RETRY: {
                  target: "loading"
                }
              }
            }
          }
        }
      }
    }
  }
})