redux-beacon index.ts example for pio

index.ts

import {applyMiddleware, combineReducers, createStore} from 'redux'
import { createMiddleware } from 'redux-beacon'
import GoogleTagManager from '@redux-beacon/google-tag-manager'
import {reducer as formReducer} from 'redux-form'
import {createLogger} from 'redux-logger'
import reduxThunk, {ThunkMiddleware} from 'redux-thunk'

import {reducer as appState} from '~/store/appState'
import {reducer as healthHistoryState} from '~/store/healthHistoryState'
import {reducer as kitState} from '~/store/kitState'
import {reducer as orderState} from '~/store/orderState'
import {actionTypes as orderActionTypes} from '~/store/orderState'

const gtm = GoogleTagManager()
const gtmEventMap = {
    [orderActionTypes.placeAnOrderDone]: (action, prevState, nextState) => {
        console.log('====== AQUI ESTA USTED ========')
        return {
            'TESTY_VARIABLE': 'TESTY_VALUE',
            'ANOTHER_TESTY_VARIABLE': 'ANOTHER_TESTY_VALUE'
        }
    }
}
const gtmMiddleware = createMiddleware(gtmEventMap, gtm)
console.log('orderActionTypes = ' + JSON.stringify(orderActionTypes, null, 2))
console.log(orderActionTypes.placeAnOrderDone)
console.log(gtmEventMap)

const reducers = combineReducers({
  appState,
  orderState,
  healthHistoryState,
  kitState,
  form: formReducer
} as any)

const middlewares = [reduxThunk as ThunkMiddleware, gtmMiddleware]

if (process.env.NODE_ENV === 'development') {
  middlewares.push(createLogger())
}

const store = createStore(reducers, applyMiddleware(...middlewares))

if (window.Cypress) {
  window.store = store
}

export default store

orderState.ts

import {Action, createAction, handleActions, ReducerMap} from 'redux-actions'

import {DISCOUNT_MESSAGE} from '~/constants/constants'
import {IOrder, IOrderResponse} from '~/models/appState'
import {ICarrierPartnerData, IOrderState, OrderTypes, TestIds} from '~/models/orderState'
import {client} from '~/services/clientService'
import history from '~/services/historyService'
import {formatRQ} from '~/utils/requisition'

const orderStateDefault: IOrderState = {
  orderType: OrderTypes.none,
  testId: TestIds.none,
  paymentData: {
    tokenId: '',
    last4: '',
    expMonth: '',
    expYear: ''
  },
  shippingFilled: false,
  billingAddress: false,
  acknowledgment: false,
  paymentFilled: false,
  submitting: false,
  address: '',
  apt: '',
  city: '',
  state: '',
  zipcode: '',
  phone: '',
  priceWithDiscount: null,
  partnerRequisition: {}
}

enum actionTypes {
  update = 'ORDER_STATE/UPDATE',
  load = 'ORDER_STATE/LOAD',
  reset = 'ORDER_STATE/RESET',
  placeAnOrderStart = 'ORDER_STATE/PLACE_AN_ORDER/START',
  placeAnOrderDone = 'ORDER_STATE/PLACE_AN_ORDER/DONE',
  placeAnOrderFailed = 'ORDER_STATE/PLACE_AN_ORDER/FAILED',
  checkPartnerDiscountStart = 'ORDER_STATE/CHECK_PARTNER_DISCOUNT/START',
  checkPartnerDiscountDone = 'ORDER_STATE/CHECK_PARTNER_DISCOUNT/DONE',
  checkPartnerDiscountFailed = 'ORDER_STATE/CHECK_PARTNER_DISCOUNT/FAILED'
}

const actions = {
  update: createAction(actionTypes.update),
  placeAnOrder: {
    start: createAction(actionTypes.placeAnOrderStart),
    done: createAction(actionTypes.placeAnOrderDone),
    failed: createAction(actionTypes.placeAnOrderFailed)
  },
  checkPatientDiscount: {
    start: createAction(actionTypes.checkPartnerDiscountStart),
    done: createAction(actionTypes.checkPartnerDiscountDone),
    failed: createAction(actionTypes.checkPartnerDiscountFailed)
  }
}

type UpdatePayload = Action<Partial<IOrderState>>

const reducer = handleActions(
  {
    [actionTypes.update]: (state, action: UpdatePayload) => {
      return {...state, ...action.payload}
    },
    [actionTypes.placeAnOrderStart]: state => ({...state, submitting: true}),
    [actionTypes.placeAnOrderDone]: state => ({...state, submitting: false}),
    [actionTypes.placeAnOrderFailed]: (state, action) => ({...state, error: action.payload, submitting: false}),
    [actionTypes.checkPartnerDiscountStart]: state => ({...state, submitting: true}),
    [actionTypes.checkPartnerDiscountDone]: (state, action) => ({
      ...state,
      priceWithDiscount: action.payload,
      submitting: false
    }),
    [actionTypes.checkPartnerDiscountFailed]: state => ({...state, submitting: false})
  } as ReducerMap<IOrderState, Action<any>>,
  orderStateDefault
)

const placeAnOrder = (order: IOrder) => dispatch => {
  dispatch(actions.placeAnOrder.start())

  if ('requisition' in order.partnerRequisition) {
    const formattedRQ = formatRQ(order.partnerRequisition.requisition)
    order = {...order, partnerRequisition: {...order.partnerRequisition, requisition: formattedRQ}}
  }

  return client
    .placeAnOrder(order)
    .then((response: IOrderResponse) => {
      console.log('====== WE PLACED THE ORDER =====')
      console.log(response)
      console.log('===== END PLACE ORDER BLOCK =====')
      console.log(actions.placeAnOrder.done(response))
      console.log('=== Hello hello got something called vertigo ====')

      dispatch(actions.placeAnOrder.done(response))
      history.push(`/complete/${response.reqid}`)
    })
    .catch(error => {
      dispatch(actions.placeAnOrder.failed(error.fields.error))
    })
}

const checkPartnerDiscount = (data: ICarrierPartnerData) => async dispatch => {
  dispatch(actions.checkPatientDiscount.start())

  return client.checkPartnerDiscount({...data, requisition: formatRQ(data.requisition)}).then(
    response => {
      if (response.success) {
        dispatch(actions.checkPatientDiscount.done(response.price))
        dispatch(actions.update({partnerRequisition: data}))
        return Promise.resolve()
      } else {
        dispatch(actions.checkPatientDiscount.failed())
        return Promise.reject(DISCOUNT_MESSAGE.NOT_APPLIED)
      }
    },
    error => {
      dispatch(actions.checkPatientDiscount.failed())
      return Promise.reject(error.fields.error)
    }
  )
}

const thunks = {
  placeAnOrder,
  checkPartnerDiscount
}

export {actionTypes, actions, reducer, thunks}