100 lines
3.3 KiB
TypeScript
100 lines
3.3 KiB
TypeScript
|
"use client"
|
||
|
|
import CheckoutScreen from "@app/selfcheckout/CheckoutScreen"
|
||
|
|
import AskForAffiliation from "@layouts/AskForAffiliation"
|
||
|
|
import IdentityDocumentNumber from "@layouts/IdentityDocumentNumber"
|
||
|
|
import TypeIdentityDocument from "@layouts/TypeIdentityDocument"
|
||
|
|
import { Box, Card, CardContent, Container } from "@mui/material"
|
||
|
|
import Grid from "@mui/material/Grid2"
|
||
|
|
import Header from "@organisms/Header"
|
||
|
|
import { getDocumentsByCountry } from "@package/utils/getDocumentsByCountry"
|
||
|
|
import { useEffect, useState } from "react"
|
||
|
|
|
||
|
|
const LoyaltyProgramScreen: React.FC = () => {
|
||
|
|
const [isAffiliated, setIsAffiliated] = useState<boolean | null>(null)
|
||
|
|
const [documentType, setDocumentType] = useState<string | null>(null)
|
||
|
|
const [documentNumber, setDocumentNumber] = useState<string | null>(null)
|
||
|
|
const [goToCheckout, setGoToCheckout] = useState<boolean>(false)
|
||
|
|
const [countryDocumentTypes, setCountryDocumentTypes] = useState<string[]>([])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const documents = getDocumentsByCountry()
|
||
|
|
setCountryDocumentTypes(documents)
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const handleAffiliationSelect = (isAffiliated: boolean) => {
|
||
|
|
setIsAffiliated(isAffiliated)
|
||
|
|
if (!isAffiliated) {
|
||
|
|
setDocumentType("13")
|
||
|
|
setDocumentNumber("222222222222")
|
||
|
|
setGoToCheckout(true)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleDocumentSelect = (selectedDocumentType: string) => {
|
||
|
|
setDocumentType(selectedDocumentType)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleDocumentNumberSubmit = (enteredDocumentNumber: string) => {
|
||
|
|
setDocumentNumber(enteredDocumentNumber)
|
||
|
|
setGoToCheckout(true)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (goToCheckout) {
|
||
|
|
return <CheckoutScreen />
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Container
|
||
|
|
maxWidth={false}
|
||
|
|
sx={{
|
||
|
|
height: "100hv",
|
||
|
|
display: "flex",
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
padding: 0,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Card sx={{ width: "100%", p: 2 }}>
|
||
|
|
<Header sx={{ minHeight: "32px", marginBottom: 1 }} />
|
||
|
|
|
||
|
|
<CardContent sx={{ padding: "4px", height: "100%" }}>
|
||
|
|
<Grid container spacing={2} sx={{ height: "100%" }} alignItems="center">
|
||
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
height: "100%",
|
||
|
|
bgcolor: "#f5f5f5",
|
||
|
|
p: 5,
|
||
|
|
borderRadius: 5,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Box
|
||
|
|
component="img"
|
||
|
|
src="/img/logo.png"
|
||
|
|
alt="Rhiscom Logo"
|
||
|
|
sx={{ width: "600px", height: "auto", mb: 15 }}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
</Grid>
|
||
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
||
|
|
{isAffiliated === null && <AskForAffiliation onAffiliationSelect={handleAffiliationSelect} />}
|
||
|
|
{isAffiliated && !documentType && (
|
||
|
|
<TypeIdentityDocument typesDocument={countryDocumentTypes} onDocumentSelect={handleDocumentSelect} />
|
||
|
|
)}
|
||
|
|
{isAffiliated && documentType && (
|
||
|
|
<IdentityDocumentNumber documentType={documentType} onSubmit={handleDocumentNumberSubmit} />
|
||
|
|
)}
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</Container>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default LoyaltyProgramScreen
|