feat: init project SelfChckout

2024-09-19 19:22:43 -05:00 · 2024-09-19 19:22:43 -05:00 · 9d31ea245c
commit 9d31ea245c
parent 765cc0c7cf
62 changed files with 8869 additions and 7149 deletions
--- a/app/selfcheckout/LoyaltyProgramScreen.tsx
+++ b/app/selfcheckout/LoyaltyProgramScreen.tsx
@ -0,0 +1,99 @@
+"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