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

grade.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
const GradeTransitions = {
	REGULAR: "regular",
	PLUS: "plus",
	PREMIUM: "premium"
};


  const fetchMachine =Machine({
	id: "grade",
	initial: "none",
	states: {
		none: {
			on: GradeTransitions
		},
		regular: {
			on: GradeTransitions
		},
		plus: {
			on: GradeTransitions
		},
		premium: {
			on: GradeTransitions
		}
	}
});

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  

const context = {
	credit: 0,
	costPerGallon: 0
};

const fetchMachine = Machine({
	id: "pump",
	initial: "notReady",
	context,
	states: {
		notReady: {
			type: "parallel",
			states: {
				credit: {
					initial: "waiting",
					states: {
						waiting: {
							on: {
								APPLY_CREDIT: "received"
							}
						},
						received: {
							type: "final"
						}
					}
				},
				cost: {
					initial: "waiting",
					states: {
						waiting: {
							on: {
								SET_COST: "received"
							}
						},
						received: {
							type: "final"
						}
					}
				},
				docked: {
					initial: "inCar",
					states: {
						inPump: {
							on: {
								INSERT: "inCar"
							}
						},
						inCar: {
							type: "final",
							on: {
								RETRACT: "inPump"
							}
						}
					}
				}
			},
			onDone: "ready"
		},
		ready: {
			on: {
				PUMP: "pumping"
			}
		},
		pumping: {
			on: { STOP: "done" }
		},
		done: {
			type: "final"
		}
	}
});

payments.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
const context = {
	amount: 0,
	err: ""
};

  const fetchMachine = Machine(
	{
		id: "payment",
		initial: "idle",
		context,
		states: {
			idle: {
				on: { SUBMIT: "processing" }
			},
			processing: {
				invoke: {
					id: "process",
					src: (context, event) => {
						return new Promise((resolve, reject) => {
							console.log("payment => processing", context, event);
							if (!context) return reject("No context provided");
							const { amount } = event;

							if (amount <= 0) {
								return reject("Cannot charge less than $0");
							}

							if (amount <= 10) {
								return resolve(event.amount);
							}

							resolve(0);
						});
					},
					onDone: {
						target: "processed",
						actions: assign({
							amount: (context, event) => {
								console.log("payment => processing, done", context, event);
								return event.data;
							}
						})
					},
					onError: {
						target: "error",
						actions: assign({
							err: (context, event) => {
								console.log("payment => processing, err", context, event);
								return event.data;
							}
						})
					}
				}
			},
			processed: {
				on: { "": [
					{
						target: "accepted",
						cond: "amountIsOver0"
					},
					{
						target: "rejected"
					}
				] }
			},
			accepted: {
				type: "final"
			},
			rejected: {
				type: "final"
			},
			error: {
				on: {
					RETRY: "idle",
					CANCEL: "rejected"
				}
			}
		}
	},
	{
		guards: {
			amountIsOver0: (context, event) => {
				console.log("payment => amountIsOver0", context, event);
				return context.amount > 0;
			},
			amountIs0: (context, event) => {
				console.log("payment => amountIs0", context, event);
				return context.amount === 0;
			}
		}
	}
);