/* 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, }, } );