99 lines
2.7 KiB
TypeScript
99 lines
2.7 KiB
TypeScript
import type { PickupPoint } from '~/server/shared/types/yandex_pvz'
|
|
import { createSharedComposable, useMediaQuery, useStorage } from '@vueuse/core'
|
|
|
|
export const useCheckout = createSharedComposable(() => {
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const isMobile = useMediaQuery('(max-width: 1280px)')
|
|
|
|
const checkoutPickupPoint = useStorage<PickupPoint | undefined>(
|
|
'checkout-pickupPoint',
|
|
undefined,
|
|
undefined,
|
|
{
|
|
serializer: {
|
|
read: (v: string) => v ? JSON.parse(v) : undefined,
|
|
write: (v: PickupPoint | undefined) => JSON.stringify(v),
|
|
},
|
|
},
|
|
)
|
|
|
|
const setCheckoutPickupPoint = (point: PickupPoint | undefined) => {
|
|
checkoutPickupPoint.value = point
|
|
}
|
|
|
|
const isPickupPointSelected = computed(() => !!checkoutPickupPoint.value)
|
|
|
|
const checkoutContacts = useStorage('checkout-contacts', { name: '', surname: '', phone: '', email: '' })
|
|
|
|
const setCheckoutContacts = (data: { name: string, surname: string, phone: string, email: string }) => {
|
|
checkoutContacts.value = data
|
|
}
|
|
|
|
const checkoutSteps = [
|
|
{
|
|
step: 1,
|
|
title: isMobile.value ? 'mobileDelivery' : 'delivery',
|
|
route: 'delivery',
|
|
},
|
|
{
|
|
step: 2,
|
|
title: isMobile.value ? 'mobileContacts' : 'contacts',
|
|
route: 'contacts',
|
|
},
|
|
{
|
|
step: 3,
|
|
title: isMobile.value ? 'mobileSummary' : 'summary',
|
|
route: 'summary',
|
|
},
|
|
]
|
|
|
|
const currentCheckoutStep
|
|
= ref(checkoutSteps.find(value => value.route === route.path.split('/').pop()) || checkoutSteps[0])
|
|
|
|
function previewStep() {
|
|
if (isPickupPointSelected.value && !isMobile.value) {
|
|
setCheckoutPickupPoint(undefined)
|
|
return
|
|
}
|
|
|
|
const findIndex = checkoutSteps.findIndex(value => value.step === currentCheckoutStep.value.step)
|
|
if (findIndex !== 0) {
|
|
currentCheckoutStep.value = checkoutSteps[findIndex - 1]
|
|
router.push(`/checkout/${currentCheckoutStep?.value.route}`)
|
|
}
|
|
else {
|
|
router.push(`/cart`)
|
|
}
|
|
}
|
|
|
|
function nextStep() {
|
|
const findIndex = checkoutSteps.findIndex(value => value.step === currentCheckoutStep.value.step)
|
|
if (findIndex + 1 !== checkoutSteps.length) {
|
|
currentCheckoutStep.value = checkoutSteps[findIndex + 1]
|
|
router.push(`/checkout/${currentCheckoutStep?.value.route}`)
|
|
}
|
|
}
|
|
|
|
function setStep(pathName: string) {
|
|
currentCheckoutStep.value = checkoutSteps.find(value => value.route === pathName) || checkoutSteps[0]
|
|
router.push(`/checkout/${pathName}`)
|
|
}
|
|
|
|
return {
|
|
isPickupPointSelected,
|
|
checkoutPickupPoint,
|
|
setCheckoutPickupPoint,
|
|
|
|
checkoutContacts,
|
|
setCheckoutContacts,
|
|
|
|
checkoutSteps,
|
|
currentCheckoutStep,
|
|
|
|
previewStep,
|
|
nextStep,
|
|
setStep,
|
|
}
|
|
})
|