Ref: modification components in selfcheckout
This commit is contained in:
Luis Felipe Cadavid
parent
251a6a2a6a
commit
ab7a02bcca
40 changed files with 1315 additions and 557 deletions
|
|
@ -1,6 +1,7 @@
|
|||
"use client"
|
||||
import { Box, Card, CardContent } from "@mui/material"
|
||||
import Grid from "@mui/material/Grid2"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import Button from "@atoms/Button"
|
||||
import Label from "@atoms/Label"
|
||||
import Title from "@atoms/Title"
|
||||
|
|
@ -10,6 +11,9 @@ interface AskForAffiliationProps {
|
|||
}
|
||||
|
||||
const AskForAffiliation: React.FC<AskForAffiliationProps> = ({ onAffiliationSelect }) => {
|
||||
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleYesClick = () => {
|
||||
onAffiliationSelect(true)
|
||||
}
|
||||
|
|
@ -31,14 +35,14 @@ const AskForAffiliation: React.FC<AskForAffiliationProps> = ({ onAffiliationSele
|
|||
p: 2,
|
||||
}}
|
||||
>
|
||||
<Title text="Se requiere Información" size="h3" />
|
||||
<Label htmlFor="loyalty" text="¿Está registrado como afiliado?" />
|
||||
<Title text={t("lbl_information_required")} size="h3" />
|
||||
<Label htmlFor="loyalty" text= {t("msj_are_you_registered_as_affiliate")} />
|
||||
<Box sx={{ mt: 3, display: "flex", gap: 3 }}>
|
||||
<Grid size={{ xs: 6 }} sx={{ minWidth: "200px" }}>
|
||||
<Button label="Sí" onClick={handleYesClick} variant="primary" className="h-16 w-full" />
|
||||
<Button label={t("lbl_yes")} onClick={handleYesClick} variant="primary" className="h-16 w-full" />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 6 }} sx={{ minWidth: "200px" }}>
|
||||
<Button label="No" onClick={handleNoClick} variant="primary" className="h-16 w-full" />
|
||||
<Button label={t('lbl_no')} onClick={handleNoClick} variant="primary" className="h-16 w-full" />
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { Box, Card, CardContent } from "@mui/material"
|
||||
import Grid from "@mui/material/Grid2"
|
||||
import React, { useEffect, useState } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import Button from "@atoms/Button"
|
||||
import Input from "@atoms/Input"
|
||||
import Title from "@atoms/Title"
|
||||
|
|
@ -15,9 +16,11 @@ const IdentityDocumentNumber: React.FC<IdentityDocumentNumberProps> = ({ documen
|
|||
const [inputValue, setInputValue] = useState<string>("")
|
||||
const [keyboardMode, setKeyboardMode] = useState<"numeric" | "alpha">("numeric")
|
||||
const [isAlphaEnabled, setIsAlphaEnabled] = useState<boolean>(false)
|
||||
const { t } = useTranslation()
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const alphaDocuments = ["PASAPORTE", "CURP", "RFC", "NIE", "RUT"] // Documentos que contienen letras
|
||||
const alphaDocuments = ["PASAPORTE", "CURP", "RFC", "NIE", "RUT"]
|
||||
setIsAlphaEnabled(alphaDocuments.includes(documentType.toUpperCase()))
|
||||
setKeyboardMode(isAlphaEnabled ? "alpha" : "numeric")
|
||||
}, [documentType, isAlphaEnabled])
|
||||
|
|
@ -30,7 +33,6 @@ const IdentityDocumentNumber: React.FC<IdentityDocumentNumberProps> = ({ documen
|
|||
setInputValue((prev) => prev.slice(0, -1))
|
||||
}
|
||||
|
||||
// Renderiza el teclado basado en el modo seleccionado
|
||||
const renderKeyboard = () => {
|
||||
if (keyboardMode === "numeric") {
|
||||
return (
|
||||
|
|
@ -69,33 +71,32 @@ const IdentityDocumentNumber: React.FC<IdentityDocumentNumberProps> = ({ documen
|
|||
}}
|
||||
>
|
||||
{/* Título */}
|
||||
<Title text={`Ingrese el número de ${documentType}`} size="h4" />
|
||||
<Title text={`${t('msj_enter_number_of')} ${documentType}`} size="h4" />
|
||||
|
||||
{/* Input que muestra el valor actual */}
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Ingrese el número de documento"
|
||||
placeholder= {t('msj_enter_document_number')}
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
/>
|
||||
|
||||
<Grid container spacing={2} justifyContent="center" alignItems="center" sx={{ mt: 3 }}>
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Button label="Borrar" onClick={handleDelete} variant="danger" className="h-16 w-full" />
|
||||
<Button label= {t('lbl_delete')} onClick={handleDelete} variant="danger" className="h-16 w-full" />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Button label="Cancelar" onClick={() => setInputValue("")} variant="danger" className="h-16 w-full" />
|
||||
<Button label={t('lbl_cancel')} onClick={() => setInputValue("")} variant="danger" className="h-16 w-full" />
|
||||
</Grid>
|
||||
{renderKeyboard()}
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Button label="Ingresar" onClick={() => onSubmit(inputValue)} variant="success" className="h-16 w-full" />
|
||||
<Button label={t('lbl_enter')} onClick={() => onSubmit(inputValue)} variant="success" className="h-16 w-full" />
|
||||
</Grid>
|
||||
{isAlphaEnabled && (
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Button
|
||||
label={`Cambiar a ${keyboardMode === "numeric" ? "Alfabético" : "Numérico"}`}
|
||||
label={`${t('msj_change_to')} ${keyboardMode === "numeric" ? t('lbl_alphabetical') : t('lbl_numeric')}`}
|
||||
onClick={() => setKeyboardMode(keyboardMode === "numeric" ? "alpha" : "numeric")}
|
||||
variant="secondary"
|
||||
variant="info"
|
||||
className="h-16 w-full"
|
||||
/>
|
||||
</Grid>
|
||||
|
|
|
|||
55
package/components/layouts/MainLayout.tsx
Normal file
55
package/components/layouts/MainLayout.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
"use client";
|
||||
|
||||
import { Box, Container, Paper } from '@mui/material';
|
||||
import Grid from '@mui/material/Grid2';
|
||||
import React from 'react';
|
||||
import ControlPanel from '@organisms/Checkout/ControlPanel';
|
||||
import ProductTable from '@organisms/Checkout/ProductTable';
|
||||
|
||||
const products = [
|
||||
{ id: 1, amount: 2, name: "Product X", unitValue: 2500, tax: 110, discount: 0, total: 5220 },
|
||||
{ id: 2, amount: 1, name: "Product Y", unitValue: 3500, tax: 230, discount: 0, total: 3730 },
|
||||
{ id: 3, amount: 3, name: "Product Z", unitValue: 1000, tax: 100, discount: 0, total: 3300 },
|
||||
];
|
||||
|
||||
const MainLayout: React.FC = () => {
|
||||
const handleVoidOrder = () => console.log("Void Order");
|
||||
const handleVoidLast = () => console.log("Void Last");
|
||||
const handleResume = () => console.log("Resume");
|
||||
const handleSearchPLU = (plu: string) => console.log("Search PLU:", plu);
|
||||
|
||||
const subtotal = products.reduce((acc, product) => acc + product.unitValue * product.amount, 0);
|
||||
const discount = products.reduce((acc, product) => acc + product.discount, 0);
|
||||
const tax = products.reduce((acc, product) => acc + product.tax, 0);
|
||||
const total = products.reduce((acc, product) => acc + product.total, 0);
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', bgcolor: 'background.default', boxShadow: '4' }}>
|
||||
<Container maxWidth={false} sx={{ flexGrow: 1, display: 'flex', py: 2 }}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid size={{xs:12, md:8}}>
|
||||
<Paper elevation={3} sx={{ height: '100%', p: 2}}>
|
||||
<ProductTable products={products} />
|
||||
</Paper>
|
||||
</Grid>
|
||||
<Grid size={{xs:12, md:4}}>
|
||||
<Paper elevation={3} sx={{ height: '100%', p: 2 }}>
|
||||
<ControlPanel
|
||||
onVoidOrder={handleVoidOrder}
|
||||
onVoidLast={handleVoidLast}
|
||||
onResume={handleResume}
|
||||
onSearchPLU={handleSearchPLU}
|
||||
subtotal={subtotal}
|
||||
discount={discount}
|
||||
tax={tax}
|
||||
total={total}
|
||||
/>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainLayout;
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
"use client"
|
||||
import { Box, Card, CardContent } from "@mui/material"
|
||||
import Grid from "@mui/material/Grid2"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import Button from "@atoms/Button"
|
||||
import Label from "@atoms/Label"
|
||||
import Title from "@atoms/Title"
|
||||
|
|
@ -11,6 +12,8 @@ interface TypesDocumentProps {
|
|||
}
|
||||
|
||||
const TypeIdentityDocument: React.FC<TypesDocumentProps> = ({ typesDocument, onDocumentSelect }) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleDocumentClick = (documentType: string) => {
|
||||
onDocumentSelect(documentType)
|
||||
}
|
||||
|
|
@ -25,15 +28,15 @@ const TypeIdentityDocument: React.FC<TypesDocumentProps> = ({ typesDocument, onD
|
|||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
p: 2,
|
||||
p: 1,
|
||||
}}
|
||||
>
|
||||
<Title text="Se requiere Información" size="h4" />
|
||||
<Label htmlFor="loyalty" text="Seleccione el tipo de documento de identidad" />
|
||||
<Title text= {t("lbl_information_required")} size="h4" />
|
||||
<Label htmlFor="loyalty" text={t('msj_select_type_identity_document')} />
|
||||
|
||||
<Grid container spacing={2} justifyContent="center" sx={{ mt: 3 }}>
|
||||
<Grid container spacing={1} justifyContent="center" sx={{ mt: 2 }}>
|
||||
{typesDocument.map((documentType, index) => (
|
||||
<Grid key={index} size={{ xs: 6, md: 4 }} sx={{ minWidth: "200px" }}>
|
||||
<Grid key={index} size={{ xs: 4, md: 6 }} sx={{ minWidth: "100px" }}>
|
||||
<Button
|
||||
label={documentType}
|
||||
onClick={() => handleDocumentClick(documentType)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue