import React , { createContext , useMemo } from 'react' ; import type { FC } from 'react' ; import { useStorage } from '../storage/useStorage' ; export interface Currency { code : string ; symbol : string ; } export interface User { id : string ; } export interface Session { locale : string ; currency : Currency ; country : string ; channel : string | null ; postalCode : string | null ; user : User | null ; } export interface ContextValue extends Session { setSession : ( session : Session ) => void ; } export const Context = createContext < ContextValue | undefined > ( undefined ) ; Context . displayName = 'StoreSessionContext' ; const baseInitialState = { currency : { code : 'USD' , symbol : '$' , } , country : 'USA' , locale : 'en' , postalCode : null , channel : null , user : null , } ; interface Props { initialState ? : Partial < Session > ; namespace ? : string ; } export const Provider = ( { children , initialState , namespace = 'main' , } ) => { const [ session , setSession ] = useStorage < Session > ( `${ namespace }::store::session` , ( ) => ( { ... baseInitialState , ... initialState , } ) ) ; const value = useMemo ( ( ) => ( { ... session , setSession : ( data ) => setSession ( { ... session , ... data } ) , } ) , [ session , setSession ] ) ; return < Context . Provider value = { value } > { children } < /Context.Provider>; } ;