Android_Retail/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/OtherServicePrintStyle1.jsx

import { useDispatch, useSelector } from "react-redux";
import {
  dateFormatChange1
} from "../../../../Services/Others";
import {
  GlobalPritdummyData,
  changeReprintDataFound,
} from "../../../../Features/ThemeChange/ThemeChange";
import "../../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.scss";
import QRCode from "react-qr-code";
import { ApplicationPreferences } from "../../../../Features/BrachLogin/BranchLogin";

const OtherServicePrintStyle1 = ({

  table2Data,
  PaymentStatus,
  printDatas,
}) => {



  const dispatch = useDispatch();

  const GlobaldummyData = useSelector(GlobalPritdummyData);

  const appPreferences = useSelector(ApplicationPreferences);
  const bookingTypePreference = appPreferences?.find((preference) => preference?.PreferredCatName === 'Booking Type')?.PreferenceCatDetails
  
  const takeAwayPreference = bookingTypePreference?.find((type) => type?.PreferredSubCatName?.toLowerCase() === "take away" && type?.PreferredStatus === 'Y')
  const keysLength = Object.keys(table2Data ?? {}).length;

  let FormatTheme = printDatas?.PrintType == "S" ? true : false
  let PageSize = printDatas?.PageSize


console.log("table2Datatable2Datatable2Datatable2Data", table2Data,table2Data?.[0]?.BranchName );

  if (keysLength > 0) {
    dispatch(changeReprintDataFound(true));
  }




  const formattedDate =dateFormatChange1(table2Data?.[0]?.CreatedDate);
  //  `${day}-${monthNames[monthIndex]}-${year}`;

  const TakeawayData = table2Data?.productDetails?.filter(
    (item) => item.BookingTypeName?.toLowerCase() === "takeaway"
  );
  const DineInData = table2Data?.productDetails?.filter(
    (item) => item.BookingTypeName?.toLowerCase() === "dine in"
  );



 
  const offers = table2Data?.OrderOfferDetails || [];



  // Calculate SalesWiseOffers total amount
  offers.forEach(offer => {
    if (offer.TableName === 'SalesWiseOffers') {
      TotalOfferAmount += offer.OfferAmount;
    }
  });
 

  

  
  const products = [
    {
      ProdName: "ITEM 1",
      Rate: 88.0,
      SalesQty: 2,
      MRP: 100,
      TotalAmt: 176,
      discount: 0,
      HSN: "01",
    },
    {
      ProdName: "ITEM 2",
      Rate: 300.0,
      SalesQty: 1,
      MRP: 350,
      TotalAmt: 300,
      discount: 0,
      HSN: "02",
    },
    {
      ProdName: "ITEM 3",
      Rate: 200.0,
      SalesQty: 1,
      MRP: 250,
      TotalAmt: 200,
      discount: 0,
      HSN: "03",
    },
    {
      ProdName: "ITEM 4",
      Rate: 30.0,
      SalesQty: 1,
      MRP: 50,
      TotalAmt: 30,
      discount: 0,
      HSN: "04",
    },
    {
      ProdName: "ITEM 5",
      Rate: 30.0,
      SalesQty: 1,
      MRP: 50,
      TotalAmt: 30,
      discount: 0,
      HSN: "05",
    },
    {
      ProdName: "ITEM 6",
      Rate: 130.0,
      SalesQty: 1,
      MRP: 150,
      TotalAmt: 130,
      discount: 0,
      HSN: "06",
    },
    {
      ProdName: "ITEM 7",
      Rate: 230.0,
      SalesQty: 1,
      MRP: 250,
      TotalAmt: 230,
      discount: 0,
      HSN: "08",
    },
  ];

  const chunkSize = PageSize == "A5" ? 8 : 11;
  let dataSource = [];

  if (GlobaldummyData || TakeawayData?.length > 0) {
    dataSource = GlobaldummyData ? products : TakeawayData;
  } else if (DineInData?.length > 0) {
    dataSource = DineInData;
  }

  // Paginate the data
  const paginatedChunks = [];
  for (let i = 0; i < dataSource.length; i += chunkSize) {
    paginatedChunks.push(dataSource.slice(i, i + chunkSize));
  }
  const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
  const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10);

console.log(paginatedChunks,"paginatedChunkspaginatedChunkspaginatedChunks");

  return (


    <>
  

        <div
          className="PrintStyle1MasterDiv"
          id={`OtherServices1`}
          style={{ fontFamily: "'Courier New', Courier, monospace", position: "relative", width: "100%", height: "auto" }}
        >

            <div className={`container print-chunk`} style={{ display: "flex", flexDirection: "column", justifyContent: ( (!shouldFooterBeOnNewPage)) && FormatTheme ? "" : "", height : "auto" }} >


              <div className="header" style={{ position: GlobaldummyData ? "absolute" : "fixed", top: 0, width: "100%" }}>
                <div className="PrintStyle1-print" >

                  <div
                    style={{ fontSize: "clamp(2rem, 2.5vw, 2rem)", fontWeight: "600" }}
                  >
                    {" "}
                    {table2Data?.[0]?.BranchName ? table2Data?.[0].BranchName : "" }
                  </div>

                  <div style={{ fontWeight: "600" }}>
                    { (table2Data?.[0]?.Address1 || "") +
                      (table2Data?.[0]?.City
                        ? (table2Data?.[0]?.Address1 &&
                          table2Data?.[0]?.City
                          ? "-"
                          : "") + table2Data?.[0]?.City
                        : "") +
                      (table2Data?.[0]?.Zip
                        ? (table2Data?.[0]?.City &&
                          table2Data?.[0]?.Zip
                          ? "-"
                          : "") + table2Data?.[0]?.Zip
                        : "")}
                  </div>

                  <div style={{ fontWeight: "600" }}>
                    {" "}
                    Mobile : +91 {GlobaldummyData ? "986XXXXXXX" : table2Data?.[0]?.BrMobileNo}
                  </div>
                  
                </div>

                <hr className="PrintStyle1-print-dottline" />

                {/* orderdetails  */}

                <div className="PrintStyle1-print-ordr-dtls">
                  <div>
                   
                    <div style={{ fontWeight: "600", fontSize: "14px" }}>
                      {" "}
                      BillNo:
                      {table2Data?.[0]?.TicketNo  ? table2Data?.[0]?.TicketNo  :" "}  
                       
                    </div>
                  </div>

                  <div>
                    <div style={{ fontWeight: "600" }}>
                      {" "}
                      Date : {table2Data?.[0]?.CreatedDate ? formattedDate : table2Data?.[0]?.CreatedDate }{" "}
                    </div>
                  </div>
                </div>

                {/* orderdetails  */}

                <hr className="PrintStyle1-print-dottline" />

                {/* itemdata  (loop) */}

              </div>

              <div style={{ marginTop: GlobaldummyData ? "9rem" : "0rem" }} className="print-body">

                {/* {(TakeawayData?.length > 0 || GlobaldummyData) && ( */}
                  <>
                    {takeAwayPreference && <div
                      style={{
                        display: "flex",
                        width: "100%",
                        justifyContent: "center",
                        alignItems: "center",
                        fontSize: "12px",
                        fontWeight: "600",
                      }}
                    >
                     Other Services
                    </div>}

                    <div className="PrintStyle1-print-tableMaster">

                      <table className="PrintStyle1-print-table">

                        <thead>
                          <tr>

                             <th style={{ width: "10px" }}>S.No</th>
                             <th style={{ width: "10px" }}>Name</th>
                            <th style={{ width: "10px" }}>Qty</th>
                            <th style={{ width: "10px" }}>Rate</th>                    
                            <th style={{ width: "10px" }}>Tax</th>                    
                            <th style={{ width: "10px", textAlign: "right" }}>Amt</th>
                             
                          </tr>
                        </thead>

                        <tbody>
                          {table2Data?.[0]?.OtherServicesTicketDetails?.map(
                            (item, index) => (
                              <tr key={index}>
                              
                                    <td style={{ textAlign: "center" }}>
                                      {index + 1}
                                    </td>
                                    <td style={{ textAlign: "center" }}>
                                      {item?.ServiceName}
                                    </td>
                                    <td style={{ textAlign: "center" }}>
                                      {item?.Qty}
                                    </td>
                                    <td style={{ textAlign: "center" }}>
                                      {item?.Rate}
                                    </td>
                                    <td style={{ textAlign: "center" }}>
                                      {item?.TaxAmount}
                                    </td>
                                    <td style={{ textAlign: "center" }}>
                                      {item?.TotalAmount}
                                    </td>
                              </tr>
                            )
                          )} 
                        </tbody>

                      </table>
                    </div>

                  </>
            
              </div>

                <>
                  <hr className="PrintStyle1-print-dottline" />

                  <div
                    style={{
                      display: "flex",
                      flexDirection: "column",
                      justifyContent:"center",
                      width: "95%",
                      whiteSpace: "nowrap",
                      fontSize: "10px",
                      flexWrap: "wrap",
                      gap: "2px"
                    }}
                  >
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "flex-end",
                        margin: 0,
                        padding: 0,
                        fontSize: "10px",
                        fontWeight: "600",
                      }}
                    >
                      {" "}
                      BillAmount:₹{table2Data?.[0]?.BillAmount}
                    </div>
                      {table2Data?.[0]?.TaxAmount > 0 && 
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "flex-end",
                        margin: 0,
                        padding: 0,
                        fontSize: "10px",
                        fontWeight: "600",
                      }}
                    >
                      TaxAmount :₹
                      {(table2Data?.[0]?.TaxAmount?table2Data?.[0]?.TaxAmount:"")}
                    </div>
              }
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "flex-end",
                        margin: 0,
                        padding: 0,
                        fontSize: "10px",
                        fontWeight: "600",
                      }}
                    >
                      Amount :₹
                      {(table2Data?.[0]?.NetAmount?table2Data?.[0]?.NetAmount:"")}
                    </div>

                  </div>

                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-evenly",
                      marginTop: "5px",
                    }}
                  >
                
                    <div
                      style={{
                          marginTop: "5px",
                        padding: 0,
                        fontSize: "17px",
                        fontWeight: "600",
                      }}
                    >
                      Payment Type :
                      {(table2Data?.[0]?.PaymentTypeName?table2Data?.[0]?.PaymentTypeName:"")}
                    </div>

                  </div>


                    <div
                    style={{
                      display: "flex",
                      justifyContent: "center",
                      alignItems: "center",
                      fontWeight: "600",
                    }}
                  >
                    Thank You Visit Again
                    </div>

                  {/* QR CODE */}
                      <div
                        style={{
                          display: "flex",
                          flexDirection: "column",
                          justifyContent: "center",
                          alignItems: "center",
                        }}
                      >
                        {/* <img style={{ width: '75px', height: '75px' }} src={QRcode} alt='QRcode' /> */}
                        <QRCode
                          value={`${table2Data?.[0]?.TicketNo}`}
                          size={80}
                        />
                        
                      </div>
                   
                </>

            

            </div>


        </div >

    </>
  );
};

export default OtherServicePrintStyle1;