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

machine.js

const validateJobRequest = (jobRequest) => {
  const missing = [];

  if (!jobRequest.industry) missing.push("industry");
  if (!jobRequest.title) missing.push("title");
  if (!jobRequest.email) missing.push("email");
  if (!jobRequest.date) missing.push("date");
  if (!jobRequest.location) missing.push("location");

  if (missing.length > 1) {
    const last = missing.pop();
    return `Please provide us with a ${missing.join(", ")}, and ${last}`;
  } else if (missing.length === 1) {
    return `Please provide us with a ${missing[0]}`;
  }
};

const showToast = () => {}

const machine = Machine(
  {
    initial: "whatTypeOfWork",
    context: {
      data: {
        industry: "Landscaping"
      }
    },
    on: {
      UPDATE: {
        actions: "updateContext"
      }
    },
    states: {
      whatTypeOfWork: {
        on: {
          NEXT: "whoAreYou"
        }
      },
      whoAreYou: {
        on: {
          NEXT: "whereAreYou",
          PREVIOUS: "whatTypeOfWork"
        }
      },
      whereAreYou: {
        on: {
          NEXT: "whenIsTheJob",
          PREVIOUS: "whoAreYou"
        }
      },
      whenIsTheJob: {
        on: {
          NEXT: "summary",
          PREVIOUS: "whereAreYou"
        }
      },
      summary: {
        on: {
          PREVIOUS: "whenIsTheJob",
          SUBMIT: [
            {
              target: "submitting",
              cond: "isValid"
            },
            {
              actions: "toastValidationError"
            }
          ]
        }
      },
      submitting: {
        invoke: {
          id: "submitRequest",
          src: "submitRequest",
          onDone: "success",
          onError: {
            target: "summary",
            actions: "toastErrors"
          }
        }
      },
      success: {
        entry: ["reset", "toastSuccess"],
        always: "whatTypeOfWork"
      }
    }
  },
  {
    guards: {
      isValid: (ctx) => {
        const error = validateJobRequest(ctx.data);

        return !error;
      }
    },
    actions: {
      toastValidationError: (ctx) => {
        const error = validateJobRequest(ctx.data);

        if (error)
          showToast({
            message: error,
            variation: "error"
          });
      },
      toastErrors: (ctx, evt) => {
        showToast({
          message: evt.data
        });
      },
      toastSuccess: () => {
        showToast({
          message: "Your request has been posted!"
        });
      },
      reset: assign({ data: (_) => ({}) }),
      updateContext: assign({
        data: (ctx, event) => {
          return {
            ...ctx.data,
            ...event.data
          };
        }
      })
    },
    services: {
      submitRequest: (ctx, event) => {
        return Promise.reject("Not yet implemented")
      }
    }
  }
);