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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const fetchMachine = Machine(
	{
		id: 'buy_anywhere_drawer',
		initial: 'closed',
		context: {
			address: null,
			orderId: 'order-id',
			orderTotalIncVat: null,
			product: null,
			clientId: 0,
			categoryIds: [],
			courierIds: [],
			productType: 'Digital',
			hasAttachment: false,
			isAvailable: false,
			language: 'en',
			priceIncVat: 0,
			catalogueItemId: 0,
			addToBasketUrl: '',
			orderNumber: null,
			email: null,
		},
		states: {
			closed: {
				on: {
					BUY_NOW_OPEN: 'open',
				},
			},
			open: {
				on: {
					BUY_NOW_CLOSE: 'closed',
				},
				initial: 'init',
				states: {
					init: {
						always: [
							{
								cond: 'hasOrderId',
								target: 'loaded',
							},
							{ target: 'loading' },
						],
					},
					loading: {
						invoke: {
							id: 'postOrderDetails',
							src: 'postOrderDetails',
							onError: {
								target: 'nonRecoverableError',
							},
							onDone: {
								target: 'readyForPayment',
								actions: 'assignOrderDetails',
							},
						},
					},
					recoverableError: {},
					nonRecoverableError: {},
					loaded: {
						onDone: 'readyForPayment',
						type: 'parallel',
						states: {
							addressDetails: {
								initial: 'complete',
								states: {
									pending: {
										on: {
											DELIVERY_ADDRESS_UPDATED: {
												target: 'complete',
												actions: ['postAddressDetails'],
											},
										},
									},
									complete: { type: 'final' },
								},
							},
						},
					},
					readyForPayment: {
						on: {
							PAYMENT_PROCESSING: 'paying',
						},
					},
					paying: {
						on: {
							PAYMENT_CONFIRMED: [
								{ cond: 'hasOrderId', target: 'paymentConfirmed' },
							],
							PAYMENT_UNCONFIRMED: 'paymentUnconfirmed',
						},
					},
					paymentConfirmed: {
						invoke: {
							id: 'getPay',
							src: 'getPay',
							onError: { target: 'nonRecoverableError' },
							onDone: { target: 'complete', actions: 'assignPayResponse' },
						},
					},
					paymentUnconfirmed: {},
					complete: {},
				},
			},
			complete: {
				on: {
					BUY_NOW_CLOSE: 'closed',
				},
			},
		},
	},
	{
		actions: {
			assignOrderDetails: assign({
				product: (_, e) => e.data.data.product,
				orderId: (_, e) => e.data.data.orderId,
				orderTotalIncVat: (_, e) => e.data.data.orderTotalIncVat,
			}),
			assignPayResponse: assign({
				orderTotalIncVat: (_, e) => e.data.data.orderTotalIncVat,
				orderNumber: (_, e) => e.data.data.orderNumber,
				email: (_, e) => e.data.data.email,
			}),
			postAddressDetails: () => {},
		},
		guards: {
			hasOrderId: (context) => {
				return !!context.orderId;
			},
		},
		services: {
			getPay: () => {
				return Promise.resolve({
					orderTotalIncVat: 20,
					orderNumber: 'order-id',
					email: 'bob@test.com',
				});
			},
			postOrderDetails: () => {
				return Promise.resolve();
			},
		},
	}
);