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

machine.js

/* eslint-disable no-unused-vars*/
function amountIsNotZero(context, event) {
  return context.selectedAmount > 0;
}

// actions
const updateCountry = assign({
  selectedCountry: (context, event) => event.selectedCountry,
});

const updateFund = assign({
  selectedFund: (context, event) => event.selectedFund,
});

const updateAmount = assign({
  selectedAmount: (context, event) => event.selectedAmount,
});

// validators
const countryIsNotEmpty = (context, event) => context.selectedCountry !== null;
const fundIsNotEmpty = (context, event) => context.selectedFund !== null;

const donationForm = Machine(
  {
    id: "form",
    initial: "selectCountry",
    context: {
      selectedCountry: null,
      selectedFund: null,
      selectedAmount: null,
      currentTab: "selectCountry",
    },
    states: {
      selectCountry: {
        on: {
          CONTINUE: [
            {
              target: "selectFund",
              cond: countryIsNotEmpty,
            },
            { target: ".invalid" },
          ],
          SELECT: {
            actions: "updateCountry",
          },
        },
        initial: "normal",
        states: {
          normal: {},
          invalid: {
            meta: {
              message: "Please select a country to continue",
            },
          },
        },
      },
      selectFund: {
        on: {
          CONTINUE: [
            {
              target: "selectAmount",
              cond: fundIsNotEmpty,
            },
            { target: ".invalid" },
          ],
          SELECT: {
            actions: "updateFund",
          },
        },
        initial: "normal",
        states: {
          normal: {},
          invalid: {
            meta: {
              message: "Please select a fund to continue",
            },
          },
        },
      },
      selectAmount: {
        on: {
          CONTINUE: "enterDetails",
          SELECT: {
            actions: "updateAmount",
            cond: amountIsNotZero,
          },
        },
        initial: "normal",
        states: {
          normal: {},
          invalid: {
            meta: {
              message: "Please select an amount to continue",
            },
          },
        },
      },
      enterDetails: {
        on: {
          CONTINUE: "enterPayment",
        },
      },
      enterPayment: {
        on: {
          CONFIRM: "processingPayment",
        },
      },
      processingPayment: {
        onEntry: ["SHOW_ACTIVITY", "SUBMIT_DATA"],
        on: {
          SUCCESS: "paymentComplete",
          FAILURE: "paymentFailure",
        },
        onExit: ["HIDE_ACTIVITY"],
      },
      paymentComplete: {
        on: {
          RESET: "selectCountry",
        },
      },
      paymentFailure: {
        on: {
          RETRY: "enterPayment",
        },
      },
      generalError: {},
    },
    on: {
      SWITCH: [
        {
          target: "selectCountry",
          cond: (context, event) => event.tab == "selectCountry",
        },
        {
          target: "selectFund",
          cond: (context, event) => event.tab == "selectFund",
        },
        {
          target: "selectAmount",
          cond: (context, event) => event.tab == "selectAmount",
        },
        {
          target: "enterDetails",
          cond: (context, event) => event.tab == "enterDetails",
        },
        {
          target: "enterPayment",
          cond: (context, event) => event.tab == "enterPayment",
        },
      ],
    },
  },
  {
    actions: {
      updateCountry,
      updateFund,
      updateAmount,
    },
    guards: {
      countryIsNotEmpty,
      fundIsNotEmpty,
    },
  }
);