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

machine.js

const shopifyClient = null
const resumeOrCreateOrder = () => {}
const urlHasDiscountCode = () => {}
const applyDiscountCode = () => {}
const discountedProductFound = () => {}
const addItemOnClient = () => {}
const addItemOnServer = () => {}
const removeItemOnClient = () => {}
const removeItemOnServer = () => {}
const updateQuantityOnClient = () => {}
const updateQuantityOnServer = () => {}
const saveOrderDataUsingNewLocalImages = () => {}
const saveOrderDataUsingExistingLocalImages = () => {}


const orderMachine = Machine(
	{
		id: 'order',
		initial: 'initializing',
		context: {
			client: shopifyClient,
			products: [],
			checkoutId: ``,
			orderData: { lineItems: [] },
			error: null,
		},
		states: {
			initializing: {
				invoke: {
					id: 'resumeOrCreateOrder',
					src: 'resumeOrCreateOrder',
					onDone: [
						{
							target: 'discounting',
							cond: 'urlHasDiscountCode',
							actions: ['saveCheckoutId', 'saveOrderDataUsingNewLocalImages'],
						},
						{
							target: 'idle',
							actions: ['saveCheckoutId', 'saveOrderDataUsingNewLocalImages'],
						},
					],
					onError: {
						target: 'failure',
						actions: 'saveError',
					},
				},
			},

			discounting: {
				invoke: {
					id: 'applyDiscountCode',
					src: 'applyDiscountCode',
					onDone: [
						{
							target: 'adding',
							cond: 'discountedProductFound',
							actions: 'saveOrderDataUsingExistingLocalImages',
						},
						{
							target: 'idle',
							actions: 'saveOrderDataUsingExistingLocalImages',
						},
					],
					onError: {
						target: 'failure',
						actions: 'saveError',
					},
				},
			},

			idle: {
				on: {
					ADD: 'adding',
					REMOVE: 'removing',
					INCREMENT: 'updating_quantity',
					DECREMENT: 'updating_quantity',
				},
			},

			adding: {
				entry: ['addItemOnClient', 'openCart'],
				invoke: {
					id: 'addItemOnServer',
					src: 'addItemOnServer',
					onDone: {
						target: 'idle',
						actions: 'saveOrderDataUsingExistingLocalImages',
					},
					onError: {
						target: 'failure',
						actions: 'saveError',
					},
				},
				on: {
					ADD: 'adding',
				},
			},

			removing: {
				entry: 'removeItemOnClient',
				invoke: {
					id: 'removeItemOnServer',
					src: 'removeItemOnServer',
					onDone: {
						target: 'idle',
						actions: 'saveOrderDataUsingExistingLocalImages',
					},
					onError: {
						target: 'failure',
						actions: 'saveError'
					},
				},
				on: {
					REMOVE: 'removing',
				},
			},

			updating_quantity: {
				entry: 'updateQuantityOnClient',
				invoke: {
					id: 'updateQuantityOnServer',
					src: 'updateQuantityOnServer',
					onDone: {
						target: 'idle',
						actions: 'saveOrderDataUsingExistingLocalImages',
					},
					onError: {
						target: 'failure',
						actions: 'saveError'
					},
				},
				on: {
					INCREMENT: 'updating_quantity',
					DECREMENT: 'updating_quantity',
				},
			},

			failure: {
				on: {
					RETRY: 'idle',
				},
			},
		},
	},
	{
		actions: {
			addItemOnClient,
			removeItemOnClient,
			saveCheckoutId: assign({
				checkoutId: (ctx, ev) => ev.data.checkoutId,
			}),
			saveError: assign({ error: (ctx, ev) => ev.data }),
			saveOrderDataUsingNewLocalImages,
			saveOrderDataUsingExistingLocalImages,
			updateQuantityOnClient,
		},

		guards: {
			urlHasDiscountCode,
			discountedProductFound,
		},

		services: {
			addItemOnServer,
			applyDiscountCode,
			removeItemOnServer,
			resumeOrCreateOrder,
			updateQuantityOnServer,
		},
	}
)