431 lines
13 KiB
JavaScript
431 lines
13 KiB
JavaScript
|
|
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;
|