mirror of
https://github.com/vercel/commerce.git
synced 2025-07-23 04:36:49 +00:00
New Release (#371)
* Custom Checkout Progress * Updates to Checkout * Custom Checkout Progress * Adding tabs * Adding Collapse * Adding Collapse * Improving Sidebar Scroll * Modif footer * Changes * More design updates * sidebar cart * More design updates * More design updates * More design updates * More design updates * Types * Types * Design Updates * More changes * More changes * More changes * Changes * Changes * Changes * New tailwind required changes * Sidebar Styling issues with Mobile * Latest changes - Normalizing cart * Styling Fixes * New changes * Changes * latest * Refactor and Renaming some UI Props * Adding Quantity Component * Adding Rating Component * Rating Component * More updates * User Select disabled, plus hidding horizontal scroll bars * Changes * Adding ProductOptions Component and more helpers * Styling updates * Styling updates * Fix for slim tags * Missmatch with RightArrow * Footer updates and some styles * Latest Updates * Latest Updates * Latest Updates * Removing Portal, since it's not needed. We might add it later I'd rather not to. * Removing Portal, since it's not needed. We might add it later I'd rather not to. * Sam backdrop filter * General UI Improvements * General UI Improvements * Search now with Geist Colors * Now with Geist Colors * Changes * Scroll for Mobile on IOs devises * LoadingDots Working (: * Changes * More Changes * Perf changes * More perf changes * Fade to the Nametags in the ProductCard * changes * Search issue ui * Search issue ui * Make sure to only refresh navbar and modals when required * Index revalidate * Fixed image issue * hide album scroll on windows * Fix scrollbar * Changing * Adding 404 with Layout * Removing Toast * Adding Assets * Adding Assets * Progress with LocalProvider * New productTag * Only images for the drop * changes * Empty SWRhooks * Adding Local Provider * Working local * Working view of a LocalProvider * More updates * Changes * Removed react-ticker * default to local if no env available * default to local if no env available * add missing `@` to css import * rewrite search rewrites to multiple pages * allow requests in getStaticProps to execute in parallel * make type import explicit * add a tsconfig.js file * use local provider in tsconfig.js * avoid a circular dependency * Saleor was not in the providers list * avoid circular dependency in bigcommerce * Adding more to the Local Provider (#366) * Adding more data * Adding more data * optimize assets (#370) * Optimize assets (#372) * optimize assets * remove assets * remove assets * cart enabled * Adding saleor * Changes with Webpack * Changes Co-authored-by: Luis Alvarez <luis@vercel.com> Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com> Co-authored-by: Shu Ding <g@shud.in>
This commit is contained in:
B
GitHub
@@ -1,13 +1,12 @@
|
||||
import React, { FC, useMemo } from 'react'
|
||||
import React, { FC, useCallback, useMemo } from 'react'
|
||||
import { ThemeProvider } from 'next-themes'
|
||||
|
||||
export interface State {
|
||||
displaySidebar: boolean
|
||||
displayDropdown: boolean
|
||||
displayModal: boolean
|
||||
displayToast: boolean
|
||||
sidebarView: string
|
||||
modalView: string
|
||||
toastText: string
|
||||
userAvatar: string
|
||||
}
|
||||
|
||||
@@ -16,8 +15,7 @@ const initialState = {
|
||||
displayDropdown: false,
|
||||
displayModal: false,
|
||||
modalView: 'LOGIN_VIEW',
|
||||
displayToast: false,
|
||||
toastText: '',
|
||||
sidebarView: 'CART_VIEW',
|
||||
userAvatar: '',
|
||||
}
|
||||
|
||||
@@ -28,16 +26,6 @@ type Action =
|
||||
| {
|
||||
type: 'CLOSE_SIDEBAR'
|
||||
}
|
||||
| {
|
||||
type: 'OPEN_TOAST'
|
||||
}
|
||||
| {
|
||||
type: 'CLOSE_TOAST'
|
||||
}
|
||||
| {
|
||||
type: 'SET_TOAST_TEXT'
|
||||
text: ToastText
|
||||
}
|
||||
| {
|
||||
type: 'OPEN_DROPDOWN'
|
||||
}
|
||||
@@ -54,6 +42,10 @@ type Action =
|
||||
type: 'SET_MODAL_VIEW'
|
||||
view: MODAL_VIEWS
|
||||
}
|
||||
| {
|
||||
type: 'SET_SIDEBAR_VIEW'
|
||||
view: SIDEBAR_VIEWS
|
||||
}
|
||||
| {
|
||||
type: 'SET_USER_AVATAR'
|
||||
value: string
|
||||
@@ -65,7 +57,8 @@ type MODAL_VIEWS =
|
||||
| 'FORGOT_VIEW'
|
||||
| 'NEW_SHIPPING_ADDRESS'
|
||||
| 'NEW_PAYMENT_METHOD'
|
||||
type ToastText = string
|
||||
|
||||
type SIDEBAR_VIEWS = 'CART_VIEW' | 'CHECKOUT_VIEW' | 'PAYMENT_METHOD_VIEW'
|
||||
|
||||
export const UIContext = React.createContext<State | any>(initialState)
|
||||
|
||||
@@ -110,28 +103,16 @@ function uiReducer(state: State, action: Action) {
|
||||
displayModal: false,
|
||||
}
|
||||
}
|
||||
case 'OPEN_TOAST': {
|
||||
return {
|
||||
...state,
|
||||
displayToast: true,
|
||||
}
|
||||
}
|
||||
case 'CLOSE_TOAST': {
|
||||
return {
|
||||
...state,
|
||||
displayToast: false,
|
||||
}
|
||||
}
|
||||
case 'SET_MODAL_VIEW': {
|
||||
return {
|
||||
...state,
|
||||
modalView: action.view,
|
||||
}
|
||||
}
|
||||
case 'SET_TOAST_TEXT': {
|
||||
case 'SET_SIDEBAR_VIEW': {
|
||||
return {
|
||||
...state,
|
||||
toastText: action.text,
|
||||
sidebarView: action.view,
|
||||
}
|
||||
}
|
||||
case 'SET_USER_AVATAR': {
|
||||
@@ -146,29 +127,58 @@ function uiReducer(state: State, action: Action) {
|
||||
export const UIProvider: FC = (props) => {
|
||||
const [state, dispatch] = React.useReducer(uiReducer, initialState)
|
||||
|
||||
const openSidebar = () => dispatch({ type: 'OPEN_SIDEBAR' })
|
||||
const closeSidebar = () => dispatch({ type: 'CLOSE_SIDEBAR' })
|
||||
const toggleSidebar = () =>
|
||||
state.displaySidebar
|
||||
? dispatch({ type: 'CLOSE_SIDEBAR' })
|
||||
: dispatch({ type: 'OPEN_SIDEBAR' })
|
||||
const closeSidebarIfPresent = () =>
|
||||
state.displaySidebar && dispatch({ type: 'CLOSE_SIDEBAR' })
|
||||
const openSidebar = useCallback(
|
||||
() => dispatch({ type: 'OPEN_SIDEBAR' }),
|
||||
[dispatch]
|
||||
)
|
||||
const closeSidebar = useCallback(
|
||||
() => dispatch({ type: 'CLOSE_SIDEBAR' }),
|
||||
[dispatch]
|
||||
)
|
||||
const toggleSidebar = useCallback(
|
||||
() =>
|
||||
state.displaySidebar
|
||||
? dispatch({ type: 'CLOSE_SIDEBAR' })
|
||||
: dispatch({ type: 'OPEN_SIDEBAR' }),
|
||||
[dispatch, state.displaySidebar]
|
||||
)
|
||||
const closeSidebarIfPresent = useCallback(
|
||||
() => state.displaySidebar && dispatch({ type: 'CLOSE_SIDEBAR' }),
|
||||
[dispatch, state.displaySidebar]
|
||||
)
|
||||
|
||||
const openDropdown = () => dispatch({ type: 'OPEN_DROPDOWN' })
|
||||
const closeDropdown = () => dispatch({ type: 'CLOSE_DROPDOWN' })
|
||||
const openDropdown = useCallback(
|
||||
() => dispatch({ type: 'OPEN_DROPDOWN' }),
|
||||
[dispatch]
|
||||
)
|
||||
const closeDropdown = useCallback(
|
||||
() => dispatch({ type: 'CLOSE_DROPDOWN' }),
|
||||
[dispatch]
|
||||
)
|
||||
|
||||
const openModal = () => dispatch({ type: 'OPEN_MODAL' })
|
||||
const closeModal = () => dispatch({ type: 'CLOSE_MODAL' })
|
||||
const openModal = useCallback(
|
||||
() => dispatch({ type: 'OPEN_MODAL' }),
|
||||
[dispatch]
|
||||
)
|
||||
const closeModal = useCallback(
|
||||
() => dispatch({ type: 'CLOSE_MODAL' }),
|
||||
[dispatch]
|
||||
)
|
||||
|
||||
const openToast = () => dispatch({ type: 'OPEN_TOAST' })
|
||||
const closeToast = () => dispatch({ type: 'CLOSE_TOAST' })
|
||||
const setUserAvatar = useCallback(
|
||||
(value: string) => dispatch({ type: 'SET_USER_AVATAR', value }),
|
||||
[dispatch]
|
||||
)
|
||||
|
||||
const setUserAvatar = (value: string) =>
|
||||
dispatch({ type: 'SET_USER_AVATAR', value })
|
||||
const setModalView = useCallback(
|
||||
(view: MODAL_VIEWS) => dispatch({ type: 'SET_MODAL_VIEW', view }),
|
||||
[dispatch]
|
||||
)
|
||||
|
||||
const setModalView = (view: MODAL_VIEWS) =>
|
||||
dispatch({ type: 'SET_MODAL_VIEW', view })
|
||||
const setSidebarView = useCallback(
|
||||
(view: SIDEBAR_VIEWS) => dispatch({ type: 'SET_SIDEBAR_VIEW', view }),
|
||||
[dispatch]
|
||||
)
|
||||
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
@@ -182,8 +192,7 @@ export const UIProvider: FC = (props) => {
|
||||
openModal,
|
||||
closeModal,
|
||||
setModalView,
|
||||
openToast,
|
||||
closeToast,
|
||||
setSidebarView,
|
||||
setUserAvatar,
|
||||
}),
|
||||
[state]
|
||||
|
||||
Reference in New Issue
Block a user