mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
.github
.vscode
packages
site
assets
components
auth
cart
checkout
CheckoutSidebarView
PaymentMethodView
PaymentWidget
ShippingView
ShippingWidget
context.tsx
common
icons
product
ui
wishlist
search.tsx
config
lib
pages
public
.env.template
.eslintrc
.gitignore
.npmrc
.prettierignore
.prettierrc
commerce-config.js
commerce.config.json
global.d.ts
next-env.d.ts
next.config.js
package.json
postcss.config.js
tailwind.config.js
tsconfig.json
.editorconfig
.gitignore
.prettierignore
.prettierrc
README.md
license.md
package-lock.json
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
turbo.json
* Updated log * Updates to root * Updates to pnpm * successfully moved to pnpm * type issue * Local as the default provider * Upgrade dependencies * Revert to local * Upgrade React * Update node-fetch deps * Fix types * Ignore warnings * Fix missing dependency * Update pnpm-lock.yaml * Add missing @types/cookie * Upgrade dependencies * Fix missing dependencies * Update README.md Co-authored-by: Bel Curcio <curciobel@gmail.com>
122 lines
2.7 KiB
TypeScript
122 lines
2.7 KiB
TypeScript
import React, {
|
|
FC,
|
|
useCallback,
|
|
useMemo,
|
|
useReducer,
|
|
useContext,
|
|
createContext,
|
|
ReactNode,
|
|
} from 'react'
|
|
import type { CardFields } from '@commerce/types/customer/card'
|
|
import type { AddressFields } from '@commerce/types/customer/address'
|
|
|
|
export type State = {
|
|
cardFields: CardFields
|
|
addressFields: AddressFields
|
|
}
|
|
|
|
type CheckoutContextType = State & {
|
|
setCardFields: (cardFields: CardFields) => void
|
|
setAddressFields: (addressFields: AddressFields) => void
|
|
clearCheckoutFields: () => void
|
|
}
|
|
|
|
type Action =
|
|
| {
|
|
type: 'SET_CARD_FIELDS'
|
|
card: CardFields
|
|
}
|
|
| {
|
|
type: 'SET_ADDRESS_FIELDS'
|
|
address: AddressFields
|
|
}
|
|
| {
|
|
type: 'CLEAR_CHECKOUT_FIELDS'
|
|
}
|
|
|
|
const initialState: State = {
|
|
cardFields: {} as CardFields,
|
|
addressFields: {} as AddressFields,
|
|
}
|
|
|
|
export const CheckoutContext = createContext<State | any>(initialState)
|
|
|
|
CheckoutContext.displayName = 'CheckoutContext'
|
|
|
|
const checkoutReducer = (state: State, action: Action): State => {
|
|
switch (action.type) {
|
|
case 'SET_CARD_FIELDS':
|
|
return {
|
|
...state,
|
|
cardFields: action.card,
|
|
}
|
|
case 'SET_ADDRESS_FIELDS':
|
|
return {
|
|
...state,
|
|
addressFields: action.address,
|
|
}
|
|
case 'CLEAR_CHECKOUT_FIELDS':
|
|
return {
|
|
...state,
|
|
cardFields: initialState.cardFields,
|
|
addressFields: initialState.addressFields,
|
|
}
|
|
default:
|
|
return state
|
|
}
|
|
}
|
|
|
|
export const CheckoutProvider: FC<{ children?: ReactNode }> = (props) => {
|
|
const [state, dispatch] = useReducer(checkoutReducer, initialState)
|
|
|
|
const setCardFields = useCallback(
|
|
(card: CardFields) => dispatch({ type: 'SET_CARD_FIELDS', card }),
|
|
[dispatch]
|
|
)
|
|
|
|
const setAddressFields = useCallback(
|
|
(address: AddressFields) =>
|
|
dispatch({ type: 'SET_ADDRESS_FIELDS', address }),
|
|
[dispatch]
|
|
)
|
|
|
|
const clearCheckoutFields = useCallback(
|
|
() => dispatch({ type: 'CLEAR_CHECKOUT_FIELDS' }),
|
|
[dispatch]
|
|
)
|
|
|
|
const cardFields = useMemo(() => state.cardFields, [state.cardFields])
|
|
|
|
const addressFields = useMemo(
|
|
() => state.addressFields,
|
|
[state.addressFields]
|
|
)
|
|
|
|
const value = useMemo(
|
|
() => ({
|
|
cardFields,
|
|
addressFields,
|
|
setCardFields,
|
|
setAddressFields,
|
|
clearCheckoutFields,
|
|
}),
|
|
[
|
|
cardFields,
|
|
addressFields,
|
|
setCardFields,
|
|
setAddressFields,
|
|
clearCheckoutFields,
|
|
]
|
|
)
|
|
|
|
return <CheckoutContext.Provider value={value} {...props} />
|
|
}
|
|
|
|
export const useCheckoutContext = () => {
|
|
const context = useContext<CheckoutContextType>(CheckoutContext)
|
|
if (context === undefined) {
|
|
throw new Error(`useCheckoutContext must be used within a CheckoutProvider`)
|
|
}
|
|
return context
|
|
}
|