Fake.jsx

/* eslint no-undef: 0*/
/* eslint react/jsx-no-undef: 0*/
import React from "react"

const chart = {
  id: "purchase",
  initial: "fetchingWorkshopData",
  states: {
    fetchingWorkshopData: {
      on: {
        SUCCESS: "tickets",
        ERROR: "fetchingWorkshopDataError"
      }
    },
    fetchingWorkshopDataError: {
      on: {
        TRY_AGAIN: "fetchingWorkshopData"
      }
    },
    tickets: {
      on: {
        SUBMIT: "paymentDetails"
      }
    },
    paymentDetails: {
      initial: "getStripeToken",
      on: {
        REGISTER_STUDENTS: "register",
        CANCEL: "quantity"
      },
      states: {
        getStripeToken: {
          on: {
            SUCCESS: "processingPurchase",
            ERROR: "stripeTokenError"
          }
        },
        stripeTokenError: {
          on: {
            TRY_AGAIN: "getStripeToken"
          }
        },
        processingPurchase: {
          on: {
            SUCCESS: "purchaseComplete",
            ERROR: "processPurchaseError"
          }
        },
        processPurchaseError: {
          on: {
            TRY_AGAIN: "getStripeToken"
          }
        },
        purchaseComplete: {}
      }
    },
    register: {
      initial: "registrationForm",
      on: {
        START_OVER: "tickets"
      },
      states: {
        registrationForm: {
          on: {
            SUBMIT: "reviewRegistration"
          }
        },
        reviewRegistration: {
          on: {
            APPROVE: "processingRegistration",
            CHANGE: "registrationForm"
          }
        },
        processingRegistration: {
          on: {
            SUCCESS: "registrationComplete",
            ERROR: "registrationError"
          }
        },
        registrationComplete: {},
        registrationError: {
          on: {
            TRY_AGAIN: "reviewRegistration"
          }
        }
      }
    }
  }
}

const defaultState = {
  quantity: null,
  stripeToken: null,
  stripeError: null,
  paymentError: null,
  workshopData: null,
  workshopDataError: null,
  studentData: null,
  registrationError: null
}

const reducer = (state = defaultState, action) => {
  const { type, name, data } = action
  console.log(name, type, data)

  if (name === "fetchingWorkshopData.SUCCESS") {
    return { ...state, workshopData: data }
  }

  if (name === "fetchingWorkshopData.ERROR") {
    return { ...state, workshopDataError: data }
  }
  
  if (name === "tickets.SUBMIT") {
    return { ...state, quantity: data }
  }
  
  if (name === "paymentDetails.getStripeToken.ERROR") {
    return { ...state, stripeError: data }
  }
  
  if (name === "paymentDetails.getStripeToken.SUCCESS") {
    return { ...state, stripeToken: data }
  }
  
  if (name === "paymentDetails.processingPurchase.ERROR") {
    return { ...state, paymentError: data }
  }
  
  if (name === "register.registrationForm.SUBMIT") {
    return { ...state, studentData: data }
  }
  
  if (name === "register.processingRegistration.ERROR") {
    return { ...state, registrationError: data }
  }
}

const PurchaseMachine = () => (
  <FiniteMachine
    chart={chart}
    reducer={reducer}
    render={({ state, transition }) => (
      <div>
        <Progress />
        <SwitchMatch>
          <Match
            state="fetchingWorkshopData"
            component={FetchingWorkshopData}
          />
          <Match
            state="fetchingWorkshopDataError"
            component={FetchingWorkshopDataError}
          />
          <Match state="tickets" component={Tickets} />
          <Match
            state="paymentDetails.getStripeToken"
            component={GetStripeToken}
          />
          <Match
            state="paymentDetails.stripeTokenError"
            component={StripeTokenError}
          />
          <Match
            state="paymentDetails.processingPurchase"
            component={ProcessingPurchase}
          />
          <Match
            state="paymentDetails.processPurchaseError"
            component={PurchaseError}
          />
          <Match
            state="paymentDetails.purchaseComplete"
            component={PurchaseComplete}
          />
          <Match state="register.registrationForm" component={Register} />
          <Match
            state="register.reviewRegistration"
            component={ReviewRegistration}
          />
          <Match
            state="register.processingRegistration"
            component={ProcessRegistration}
          />
          <Match
            state="register.registrationError"
            component={RegistrationError}
          />
          <Match
            state="register.registrationComplete"
            component={RegistrationComplete}
          />
        </SwitchMatch>
      </div>
    )}
  />
)

export default PurchaseMachine