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
311
package/components/organisms/Checkout/ButtonPanel.tsx
Normal file
311
package/components/organisms/Checkout/ButtonPanel.tsx
Normal file
|
|
@ -0,0 +1,311 @@
|
|||
import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet"
|
||||
import BackspaceIcon from "@mui/icons-material/Backspace"
|
||||
import CreditCardIcon from "@mui/icons-material/CreditCard"
|
||||
import DeleteIcon from "@mui/icons-material/Delete"
|
||||
import DiscountIcon from "@mui/icons-material/Discount"
|
||||
import LockIcon from "@mui/icons-material/Lock"
|
||||
import PercentIcon from "@mui/icons-material/Percent"
|
||||
import PlayArrowIcon from "@mui/icons-material/PlayArrow"
|
||||
import ReceiptIcon from "@mui/icons-material/Receipt"
|
||||
import RedeemIcon from "@mui/icons-material/Redeem"
|
||||
import ReplayIcon from "@mui/icons-material/Replay"
|
||||
import SearchIcon from "@mui/icons-material/Search"
|
||||
import SettingsIcon from "@mui/icons-material/Settings"
|
||||
import ShoppingBagIcon from "@mui/icons-material/ShoppingBag"
|
||||
import ShoppingBasketIcon from "@mui/icons-material/ShoppingBasket"
|
||||
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart"
|
||||
import StorefrontIcon from "@mui/icons-material/Storefront"
|
||||
import TransferWithinAStationIcon from "@mui/icons-material/TransferWithinAStation"
|
||||
import { Box, Card, CardContent } from "@mui/material"
|
||||
import Grid from "@mui/material/Grid2"
|
||||
import React from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import Button from "@atoms/Button"
|
||||
import { Tooltip } from "@atoms/Tooltip"
|
||||
import ThemeToggle from "@styles/ThemeToggle"
|
||||
|
||||
|
||||
const ButtonPanel: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<Card sx={{ height: "100%" }}>
|
||||
<CardContent>
|
||||
<ThemeToggle />
|
||||
|
||||
<Grid container spacing={1}>
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer="Anula la orden actual" side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label="Void Order"
|
||||
onClick={() => {}}
|
||||
variant="danger"
|
||||
className="full-size-button"
|
||||
startIcon={<ShoppingCartIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer="Void Last" side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label="Void Last"
|
||||
onClick={() => {}}
|
||||
variant="danger"
|
||||
className="full-size-button"
|
||||
startIcon={<BackspaceIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_resume_previously_suspended_order")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label="Resume"
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<PlayArrowIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_transfer_Order_another_station")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_transfer_order")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<TransferWithinAStationIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_generate_resale")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_resale")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<StorefrontIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_generate_refund")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_returns")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<ReplayIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_add_receipt")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_add_receipt")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<ReceiptIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_manage_coupons")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_coupons")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<RedeemIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_manage_discount_percentage")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_discount_percentage")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<PercentIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_manage_amount_discount")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_amount_discount")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<DiscountIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_bag_fee")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label= {t("lbl_bag_fee")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<ShoppingBagIcon />}
|
||||
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_bag_credit_management")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_bag_credit")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<ShoppingBasketIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_bottle_refund_management")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_bottle_refund")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<DeleteIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_tax_exemption_management")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_tax_exempt")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<CreditCardIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_delete_tax_exception")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_clear_exempt")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<CreditCardIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_query_search_article")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_item_inquiry")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<SearchIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12 }} container spacing={1} justifyContent="center">
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label=""
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<SettingsIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label=""
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<AccountBalanceWalletIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label=""
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<SearchIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label=""
|
||||
onClick={() => {}}
|
||||
variant="warning"
|
||||
className="full-size-button"
|
||||
startIcon={<LockIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default ButtonPanel
|
||||
47
package/components/organisms/Checkout/ControlPanel.tsx
Normal file
47
package/components/organisms/Checkout/ControlPanel.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
"use client";
|
||||
|
||||
import Grid2 from '@mui/material/Grid2';
|
||||
import React from 'react';
|
||||
import ActionButtons from '@molecules/ActionButtons';
|
||||
import ProductSearch from '@molecules/ProductSearch';
|
||||
import SaleSummary from '@molecules/SaleSummary';
|
||||
|
||||
interface ControlPanelProps {
|
||||
onVoidOrder: () => void;
|
||||
onVoidLast: () => void;
|
||||
onResume: () => void;
|
||||
onSearchPLU: (plu: string) => void;
|
||||
subtotal: number;
|
||||
discount: number;
|
||||
tax: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
const ControlPanel: React.FC<ControlPanelProps> = ({
|
||||
onVoidOrder,
|
||||
onVoidLast,
|
||||
onResume,
|
||||
onSearchPLU,
|
||||
subtotal,
|
||||
discount,
|
||||
tax,
|
||||
total
|
||||
}) => {
|
||||
return (
|
||||
<Grid2 container spacing={4}>
|
||||
<Grid2 size={{xs:12}}>
|
||||
<ActionButtons onVoidOrder={onVoidOrder} onVoidLast={onVoidLast} onResume={onResume} />
|
||||
</Grid2>
|
||||
|
||||
<Grid2 size={{xs:12}}>
|
||||
<ProductSearch onSearch={onSearchPLU} />
|
||||
</Grid2>
|
||||
|
||||
<Grid2 size={{xs:12}}>
|
||||
<SaleSummary subtotal={subtotal} discount={discount} tax={tax} total={total} />
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
);
|
||||
};
|
||||
|
||||
export default ControlPanel;
|
||||
92
package/components/organisms/Checkout/ProductTable.tsx
Normal file
92
package/components/organisms/Checkout/ProductTable.tsx
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
"use client";
|
||||
|
||||
import { Box, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import CustomCard from '@molecules/CustomCard';
|
||||
import UserHeader from '@molecules/UserHeader';
|
||||
|
||||
interface Product {
|
||||
id: number;
|
||||
amount: number;
|
||||
name: string;
|
||||
unitValue: number;
|
||||
tax: number;
|
||||
discount: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
interface ProductTableProps {
|
||||
products: Product[];
|
||||
}
|
||||
|
||||
const ProductTable: React.FC<ProductTableProps> = ({ products }) => {
|
||||
const totalAmount = products.reduce((acc, product) => acc + product.amount, 0);
|
||||
const totalUnitValue = products.reduce((acc, product) => acc + product.unitValue * product.amount, 0);
|
||||
const totalTax = products.reduce((acc, product) => acc + product.tax, 0);
|
||||
const totalDiscount = products.reduce((acc, product) => acc + product.discount, 0);
|
||||
const grandTotal = products.reduce((acc, product) => acc + product.total, 0);
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||
<UserHeader />
|
||||
<Box sx={{ flexGrow: 1, overflow: 'auto', p: 2, boxShadow: '2'}}>
|
||||
<Table stickyHeader sx={{
|
||||
'& .MuiTableCell-root': {
|
||||
padding: '8px 16px',
|
||||
}
|
||||
}}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>{t("tle_amount")}</TableCell>
|
||||
<TableCell>{t("tle_product")}</TableCell>
|
||||
<TableCell>{t("tle_unit_value")}</TableCell>
|
||||
<TableCell>{t("tle_tax")}</TableCell>
|
||||
<TableCell>{t("tle_discount")}</TableCell>
|
||||
<TableCell>{t("tle_total")}</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{products.map((product) => (
|
||||
<TableRow key={product.id}>
|
||||
<TableCell>{product.amount}</TableCell>
|
||||
<TableCell>{product.name}</TableCell>
|
||||
<TableCell>${product.unitValue.toFixed(2)}</TableCell>
|
||||
<TableCell>${product.tax.toFixed(2)}</TableCell>
|
||||
<TableCell>${product.discount.toFixed(2)}</TableCell>
|
||||
<TableCell>${product.total.toFixed(2)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Box>
|
||||
<Box sx={{ p:0.2, boxShadow: '2', }}>
|
||||
<CustomCard className="bg-gray-700 text-white">
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell sx={{ color: 'RGB(255,255,255)', borderColor: 'with', fontWeight: 'bold', width: '20%' }}>{t("tle_item_count")}</TableCell>
|
||||
<TableCell sx={{ color: 'RGB(255,255,255)', borderColor: 'with', fontWeight: 'bold', width: '20%' }}>{t("tle_total_unit")}</TableCell>
|
||||
<TableCell sx={{ color: 'RGB(255,255,255)', borderColor: 'with', fontWeight: 'bold', width: '20%' }}>{t("tle_total_taxes")}</TableCell>
|
||||
<TableCell sx={{ color: 'RGB(255,255,255)', borderColor: 'with', fontWeight: 'bold', width: '20%' }}>{t("tle_total_discount")}</TableCell>
|
||||
<TableCell sx={{ color: 'RGB(255,255,255)', borderColor: 'with', fontWeight: 'bold', width: '20%' }}>{t("tle_total")}</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell sx={{ color: 'RGB(255,255,255)', borderColor: 'with' }}>{totalAmount}</TableCell>
|
||||
<TableCell sx={{ color: 'RGB(255,255,255)', borderColor: 'with' }}>${totalUnitValue.toFixed(2)}</TableCell>
|
||||
<TableCell sx={{ color: 'RGB(255,255,255)', borderColor: 'with' }}>${totalTax.toFixed(2)}</TableCell>
|
||||
<TableCell sx={{ color: 'RGB(255,255,255)', borderColor: 'with' }}>${totalDiscount.toFixed(2)}</TableCell>
|
||||
<TableCell sx={{ color: 'RGB(255,255,255)', borderColor: 'with' }}>${grandTotal.toFixed(2)}</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CustomCard>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductTable;
|
||||
Loading…
Add table
Add a link
Reference in a new issue