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 product = {
    variants: {
      values: [
        {
          articleNumber: 'blah'
        },
        {
          articleNumber: 'two'
        }]
    }
  }
  
  const selectedVariant = null
  
  const fetchMachine = Machine({
    id: 'variant',
    initial: 'unknown',
    context: {product, selectedVariant},
    states: {
      unknown: {
        on: {
          '': [
            {target: 'valid', cond: hasOneValue},
            {target: 'invalid.incomplete'}
            ]
        }
      },
      
      invalid: {
        initial: 'incomplete',
        on: {SELECTION: {
          
          target: 'validating',
          actions: assign({
            selectedVariant: (context, event) => event.selectedVariant
          })
        }},
        states: {
          outOfStock: {},
          incomplete: {}
        }
      },
      validating: {
        on: {
          '': [
            { target: 'valid', cond: variantIsValid },
            { target: 'invalid.outOfStock', cond: variantIsOOS },
            { target: 'invalid.incomplete' }
            
            ]
        }
      },
      
      valid: {}
    }
  });
  
  function hasOneValue(ctx) {
    
    return ctx.product.variants.values.length === 1
  }
  
  function variantIsValid(ctx) {
    console.log(ctx)
    return ctx.selectedVariant && ctx.selectedVariant.stockStatus.buyable
  }
  
  function variantIsOOS(ctx) {
    return ctx.selectedVariant && !ctx.selectedVariant.stockStatus.buyable
  }