66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
|
import { OrderSuccess } from '@/components/orders/OrderSuccess'
|
||
|
|
import { Loading } from '@/components/shared'
|
||
|
|
import { APP_NAME } from '@/constants/app.constant'
|
||
|
|
import { ROUTES_ENUM } from '@/routes/route.constant'
|
||
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||
|
|
import React, { useState, useEffect } from 'react'
|
||
|
|
import { Helmet } from 'react-helmet'
|
||
|
|
import { useNavigate } from 'react-router-dom'
|
||
|
|
|
||
|
|
const Success: React.FC = () => {
|
||
|
|
const navigate = useNavigate()
|
||
|
|
const [orderId, setOrderId] = useState<string>('')
|
||
|
|
const { translate } = useLocalization()
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
// Get order ID from local storage
|
||
|
|
const orderIdData = localStorage.getItem('orderId')
|
||
|
|
if (orderIdData) {
|
||
|
|
setOrderId(orderIdData)
|
||
|
|
// Clear order ID from local storage
|
||
|
|
localStorage.removeItem('orderId')
|
||
|
|
} else {
|
||
|
|
navigate(ROUTES_ENUM.public.home)
|
||
|
|
}
|
||
|
|
}, [navigate])
|
||
|
|
|
||
|
|
const handleBackToShop = () => {
|
||
|
|
navigate(ROUTES_ENUM.public.home)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!orderId) {
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-center min-h-screen bg-gray-50">
|
||
|
|
<div className="text-center">
|
||
|
|
<Loading loading={!orderId} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gray-50">
|
||
|
|
<Helmet
|
||
|
|
titleTemplate={`%s | ${APP_NAME}`}
|
||
|
|
title={translate('::' + 'Public.nav.success')}
|
||
|
|
defaultTitle={APP_NAME}
|
||
|
|
></Helmet>
|
||
|
|
<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">
|
||
|
|
<OrderSuccess orderId={orderId} onBackToShop={handleBackToShop} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Success
|