\n {video ? (\n \n ):(\n \n \n\n {imageHotspot && (\n \n )}\n
\n )}\n \n \n }\n \n )\n \n\n}\n\n\n\n\nRenderHero.propTypes = {\n backgroundColor: PropTypes.object,\n image: PropTypes.array, \n title: PropTypes.string, \n anchorId: PropTypes.string, \n useGrid: PropTypes.bool, \n paddingX: PropTypes.string,\n paddingY: PropTypes.string,\n marginY: PropTypes.string,\n video: PropTypes.string,\n autoPlay: PropTypes.bool,\n hotspots: PropTypes.arrayOf(PropTypes.shape({\n position: PropTypes.shape({\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired\n }),\n content: PropTypes.node,\n onClick: PropTypes.func\n })),\n}\n\nexport default RenderHero;","/**\n* Global State Manager:\n* - only put things in here that are truly global (e.g. Cart & Customer Data, Theme)\n* otherwise make it a local state or pass it in a prop\n*/\n\n\n// use our initial state as a type of manifest for the Global State\nexport const initialState = {\n user: {\n isLoggedIn: false,\n email: \"\",\n customer_group_id: 5,\n exists: null,\n external_customer_id: 0,\n user_id: 0\n },\n cart: {},\n thirdParty: {\n zendesk: false,\n nostoSession: process.env.NODE_ENV === \"development\" ? \"64d25a2e95be7b70ae573a09\" : null\n },\n dynamicParams: {},\n widget:{\n isOpen: false,\n component: null,\n showBackdrop: true,\n page: {\n component: null,\n }\n }\n}\n\n\nexport const GlobalReducer = (state, action) => {\n switch(action.type){\n\n case \"setDynamicParams\": {\n return {\n ...state,\n dynamicParams: {\n ...state.dynamicParams,\n ...action.data\n }\n }\n }\n\n case \"closeWidget\":\n return{\n ...state,\n widget: {\n ...state.widget,\n isOpen: false,\n component: null,\n page: {\n component: null\n }\n }\n }\n\n case \"setWidgetPage\": \n return{\n ...state,\n widget: {\n ...state.widget,\n page: {\n ...action.data\n }\n }\n }\n\n case \"setWidget\":\n return{\n ...state,\n widget: {\n ...state.widget,\n ...action.data\n }\n }\n\n\n case \"nostoSession\":\n return{\n ...state,\n thirdParty:{\n ...state.thirdParty,\n nostoSession: action.data\n }\n }\n\n case \"zendeskInit\":\n return{\n ...state,\n thirdParty: {\n ...state.thirdParty,\n zendesk: action.data\n }\n }\n\n\n \n case \"login\":\n return{\n ...state,\n user: {\n ...state.user,\n isLoggedIn: true,\n ...action.data\n }\n };\n\n \n\n case \"setEmail\":\n return{\n ...state,\n user: {\n ...state.user,\n ...action.data\n }\n };\n\n\n \n case \"logout\":\n return{\n ...state,\n user: {\n ...state.user,\n isLoggedIn: false,\n data: {}\n }\n };\n \n\n default:\n throw new Error(\"Doh! You did not choose GlobalReducer method type to perform. Please try agin or go to GlobalContext.js for available types.\")\n }\n};\n","\n\n// Global Toast default Options\nexport const toastDefaults = {\n position: \"top-right\",\n autoClose: 5000,\n hideProgressBar: false,\n closeOnClick: true,\n pauseOnHover: true,\n draggable: true,\n progress: undefined,\n newestOnTop: true\n}\n\n","\"use client\"\n\nimport { useReducer, createContext } from 'react';\nimport { GlobalReducer, initialState } from './reducers/GlobalReducer';\nimport { ToastContainer } from 'react-toastify'\nimport { toastDefaults } from 'lib/Constants/toastDefaults';\n\n\nexport const GlobalContext = createContext();\n\n// Create our Provider with our Reducer as our state manager\nexport const GlobalContextProvider = props => {\n const [state, dispatch] = useReducer(GlobalReducer, initialState);\n\n return (\n