feat: add sale flow with Boopos Cloud

package/components/layouts/MainLayout.tsx

@@ -1,55 +1,207 @@
 "use client";
 
-import { Box, Container, Paper } from '@mui/material';
+import { Box, Container, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Paper } from '@mui/material';
 import Grid from '@mui/material/Grid2';
-import React from 'react';
+import { useAtom } from 'jotai';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Button from '@atoms/Button';
+import { storeNumberAtom, storePosAtom } from '@atoms/states/StoreAtom';
+import { EndSaleOutputInterface } from '@interfaces/OutputInterfaces/Sale/EndSaleOutputInterface';
+import { GetSaleOutputInterface } from '@interfaces/OutputInterfaces/Sale/GetSaleOutputInterface';
+import { CustomerInterface } from '@interfaces/ResponseInterfaces/Customer/CustomerResponseInterface';
+import { EndSaleResponseInterface } from '@interfaces/ResponseInterfaces/Sale/EndSaleResponseInterface';
+import { GetSaleResponseInterface, SaleTransactionObjectInterface } from '@interfaces/ResponseInterfaces/Sale/GetSaleResponseInterface';
+import { StartSaleResponseInterface } from '@interfaces/ResponseInterfaces/Sale/StartSaleResponseInterface';
+import ClientSearch from '@organisms/Checkout/ClientSearch';
 import ControlPanel from '@organisms/Checkout/ControlPanel';
 import ProductTable from '@organisms/Checkout/ProductTable';
+import EndSale from '@package/config/api/Sale/Transaction/EndSale/page';
+import GetSale from '@package/config/api/Sale/Transaction/GetSale/page';
+import { getUser } from '@utils/Utilities';
 
-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 },
-];
+interface MainLayoutProps {
+  onEndTransaction: () => void; // Callback para notificar cuando la transacción termine
+}
+
+const MainLayout: React.FC<MainLayoutProps> = ({ onEndTransaction }) => {
+  const [transaction, setTransaction] = useState<StartSaleResponseInterface | null>(null);
+  const [client, setClient] = useState<CustomerInterface | null>(null);
+  const [productsList, setProductsList] = useState<SaleTransactionObjectInterface | null>(null);
+  const [endSaleResponse, setEndSaleResponse] = useState<EndSaleResponseInterface | null>(null); 
+  const [openDialog, setOpenDialog] = useState(false); 
+
+  const [idUser] = useState(getUser() && getUser().id ? getUser().id : '');
+  const { t } = useTranslation();
+
+  const [storeNumber] = useAtom(storeNumberAtom);
+  const [storePos] = useAtom(storePosAtom);
+
+  const handleTransactionComplete = (transaction: StartSaleResponseInterface, client: CustomerInterface) => {
+    setTransaction(transaction);
+    setClient(client);
+  };
+
+  const fetchSaleDetails = useCallback(async () => {
+    if (!transaction || !client) return;
+
+    try {
+      const saleRequest: GetSaleOutputInterface = {
+        idTransaction: transaction.object?.id,
+        storeNumber: storeNumber,
+        idSubsidiary: client.idSubsidiary,
+        idUser: client.idUser,
+        pos: storePos,
+      };
+
+      const saleResponse = await GetSale(saleRequest) as GetSaleResponseInterface;
+
+      if (saleResponse && saleResponse.correct) {
+        setProductsList(saleResponse.object);
+      } else {
+        console.error("Error fetching sale details: ", saleResponse?.message);
+      }
+    } catch (error) {
+      console.error("Error during GetSale API call", error);
+    }
+  }, [client, storeNumber, storePos, transaction]);
+
+  useEffect(() => {
+    fetchSaleDetails();
+  }, [fetchSaleDetails, transaction]);
+
+  const handleProductAdded = () => {
+    fetchSaleDetails();
+  };
 
-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);
+  const handleEndSale = async () => {
+    if (!transaction || !client || !productsList) return;
+
+    if (!transaction.object?.id) {
+      console.error("Transaction ID is missing");
+      return;
+    }
+
+    if (client.idSubsidiary === undefined) {
+      console.error("Client subsidiary ID is missing");
+      return;
+    }
+    const storeAddress = process.env.NEXT_PUBLIC_STORE_ADDRESS || '';
+    const codeMunPos = process.env.NEXT_PUBLIC_STORE_CODE_CITY || '';
+    const nameMunPos = process.env.NEXT_PUBLIC_STORE_CITY || '';
+    const codeDepPos = process.env.NEXT_PUBLIC_STORE_CODE_DEPARTMENT || '';
+    const nameDepPos = process.env.NEXT_PUBLIC_STORE_DEPARTMENT || '';
+
+    if (!storeAddress || !codeMunPos || !nameMunPos || !codeDepPos || !nameDepPos) {
+      console.error("Missing store address information from environment variables");
+      return;
+    }
+  const endSaleRequest: EndSaleOutputInterface = {
+    idTransaction: transaction.object.id,
+    storeNumber: storeNumber,
+    idSubsidiary: client.idSubsidiary,
+    idUser: idUser,
+    localDate: new Date().toISOString(),
+    pos: storePos,
+    comment: 'Test End Sale',
+    payment: [
+      {
+        type: "CASH",
+        approvalCode: "0001",
+        receiptNumber: "10001",
+        value: productsList.totalWithPromotion+ productsList.totalTaxes,
+        cardNumber: "0032",
+        cardType: "DEBIT",
+        comment: "Test"
+      }
+    ],
+    infoPos: {
+      addressPos: storeAddress,
+      codeMunPos: codeMunPos,
+      nameMunPos: nameMunPos,
+      codeDepPos: codeDepPos,
+      nameDepPos: nameDepPos,
+      pos: storePos
+    }
+  };
+    console.log("End Sale Request: ", endSaleRequest);
+    try {
+      const endSaleResponse = await EndSale(endSaleRequest) as EndSaleResponseInterface;
+
+      console.log("End Sale Response: ", endSaleResponse);
+      if (endSaleResponse && endSaleResponse.correct) {
+        setEndSaleResponse(endSaleResponse); 
+        setOpenDialog(true); 
+      } else {
+        console.error("Error ending sale:", endSaleResponse?.message);
+      }
+    } catch (error) {
+      console.error("Error during EndSale API call", error);
+    }
+  };
+
+  const handleDialogClose = () => {
+    setOpenDialog(false);
+    onEndTransaction();
+  };
 
   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} />
+          <Grid size={{ xs: 12, md: 8 }}>
+            <Paper elevation={3} sx={{ height: '100%', p: 2 }}>
+              <ProductTable products={productsList} />
+
             </Paper>
           </Grid>
-          <Grid size={{xs:12, md:4}}>
+          <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}
-              />
+              {!transaction && !client ? (
+                <ClientSearch onTransactionComplete={handleTransactionComplete} />
+              ) : (
+                <ControlPanel
+                  onVoidOrder={handleVoidOrder}
+                  onVoidLast={handleVoidLast}
+                  onResume={handleResume}
+                  transaction={transaction!}
+                  client={client!}
+                  onProductAdded={handleProductAdded}
+                />
+
+              )}
+              {productsList && productsList.list.length > 0 && (
+                  <Button
+                  label={t("lbl_resume")}
+                  variant="primary"
+                  onClick={handleEndSale}
+                  className="full-width-button"
+                  disabled={!productsList || productsList.list.length === 0}
+                />
+              )}
+
             </Paper>
           </Grid>
         </Grid>
       </Container>
+
+      <Dialog open={openDialog} onClose={handleDialogClose}>
+        <DialogTitle>{t("transaction_complete")}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            {endSaleResponse?.object?.description || t("transaction_successful")}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleDialogClose} label="Aceptar" />
+        </DialogActions>
+      </Dialog>
     </Box>
   );
 };
 
-export default MainLayout;
+export default MainLayout;