94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
import { Cart } from '@/components/orders/Cart'
|
|
import { TenantForm } from '@/components/orders/TenantForm'
|
|
import { APP_NAME } from '@/constants/app.constant'
|
|
import { CustomTenantDto } from '@/proxy/config/models'
|
|
import { ROUTES_ENUM } from '@/routes/route.constant'
|
|
import {
|
|
CartState,
|
|
clearCart,
|
|
initialCartState,
|
|
removeItemFromCart,
|
|
updateCartItemQuantity,
|
|
} from '@/utils/cartUtils'
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
|
import React, { useState, useEffect } from 'react'
|
|
import { Helmet } from 'react-helmet'
|
|
import { useNavigate } from 'react-router-dom'
|
|
|
|
const Checkout: React.FC = () => {
|
|
const navigate = useNavigate()
|
|
const [isCartOpen, setIsCartOpen] = useState(false)
|
|
const { translate } = useLocalization()
|
|
|
|
const [cartState, setCartState] = useState<CartState>(() => {
|
|
const savedCart = localStorage.getItem('cartState')
|
|
return savedCart ? JSON.parse(savedCart) : initialCartState
|
|
})
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('cartState', JSON.stringify(cartState))
|
|
}, [cartState])
|
|
|
|
const handleTenantSubmit = (tenantData: CustomTenantDto) => {
|
|
localStorage.setItem('tenantData', JSON.stringify(tenantData))
|
|
navigate(ROUTES_ENUM.public.payment)
|
|
}
|
|
|
|
const handleBackToCatalog = () => {
|
|
navigate(ROUTES_ENUM.public.home)
|
|
}
|
|
|
|
const handleCheckout = () => {
|
|
setIsCartOpen(false)
|
|
navigate(ROUTES_ENUM.public.checkout)
|
|
}
|
|
|
|
const handleUpdateQuantity = (id: string, quantity: number) => {
|
|
setCartState((currentState) => updateCartItemQuantity(currentState, id, quantity))
|
|
}
|
|
|
|
const handleRemoveItem = (id: string) => {
|
|
setCartState((currentState) => removeItemFromCart(currentState, id))
|
|
}
|
|
|
|
const handleClearCart = () => {
|
|
setCartState(clearCart())
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<Helmet
|
|
titleTemplate={`%s | ${APP_NAME}`}
|
|
title={translate('::' + 'Public.nav.checkout')}
|
|
defaultTitle={APP_NAME}
|
|
></Helmet>
|
|
|
|
{/* Hero Section */}
|
|
<div className="relative bg-blue-900 text-white py-12">
|
|
<div
|
|
className="absolute inset-0 opacity-20"
|
|
style={{
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
></div>
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4 pt-12">
|
|
<TenantForm onSubmit={handleTenantSubmit} onBack={handleBackToCatalog} />
|
|
|
|
<Cart
|
|
isOpen={isCartOpen}
|
|
onClose={() => setIsCartOpen(false)}
|
|
onCheckout={handleCheckout}
|
|
cartState={cartState}
|
|
updateQuantity={handleUpdateQuantity}
|
|
removeItem={handleRemoveItem}
|
|
clearCart={handleClearCart}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Checkout
|