Merge pull request 'print-colors-sq' (#241) from print-colors-sq into main

Reviewed-on: Pozomind/pozo-retail-app#241
This commit is contained in:
karthikalakshmi 2026-03-05 13:54:22 +05:30
commit e059a0e5b5
3 changed files with 148 additions and 101 deletions

View File

@ -16,7 +16,7 @@ const PurchaseOrdInvoice = ({
BranchData,
printDatas,
BankDetails
}) => {
}) => {
const GlobaldummyData = useSelector(GlobalPritdummyData);
let BillName = printDatas?.PrintHdrName
// Function to convert number to words
@ -52,9 +52,9 @@ const PurchaseOrdInvoice = ({
city: BranchData?.City || "",
state: BranchData?.State || "",
zip: BranchData?.Zip || ""
},
},
companyGSTIN: BranchData?.CompGSTIN || BranchData?.BrGSTIN || "",
companyEmail: BranchData?.companyEmail || BranchData?.companyEmail ||"",
companyEmail: BranchData?.companyEmail || BranchData?.companyEmail || "",
companyMobile: BranchData?.BrMobile || "",
companyMobile2: BranchData?.BrMobile2 || "",
@ -67,7 +67,7 @@ const PurchaseOrdInvoice = ({
// Customer Details - mapped from A4Standard CustomerDetails array
customerName: table2Data?.CustomerDetails?.[0]?.CustSuppName || table2Data?.CustSuppName
|| "",
|| "",
customerMobile: table2Data?.CustomerDetails?.[0]?.MobileNo || table2Data?.BrMobile || "",
customerGSTIN: table2Data?.CustomerDetails?.[0]?.CustGSTNo || table2Data?.CustGSTIN || "",
customerAddress: {
@ -82,13 +82,13 @@ const PurchaseOrdInvoice = ({
// Totals - mapped from A4Standard
totalAmount: Number(table2Data?.BillAmount || table2Data?.TotalAmt || 0),
taxAmount: Number(OrderDetailGST),
grandTotal: Number(table2Data?.NetAmount || table2Data?.GrandTotal|| 0),
grandTotal: Number(table2Data?.NetAmount || table2Data?.GrandTotal || 0),
totalBillAmount: Number(table2Data?.BillAmount || table2Data?.NetAmount || 0),
// Bank Details - mapped from A4Standard
bankDetails: BankDetails?.[0] || ""
};
console.log(printDatas, "Date1Date1", invoiceData, )
console.log(printDatas, "Date1Date1", invoiceData,)
let PageSize = printDatas?.PageSize
@ -135,7 +135,7 @@ const PurchaseOrdInvoice = ({
dataSource = [];
}
console.log("Final DataSource:", table2Data, );
console.log("Final DataSource:", table2Data,);
const paginatedChunks = [];
@ -159,6 +159,36 @@ const PurchaseOrdInvoice = ({
paginatedChunks.push([]); // Empty chunk for footer-only page
}
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
return (
<div id={`TaxInvoice`} style={{
@ -205,7 +235,7 @@ const PurchaseOrdInvoice = ({
{/* Header - Only on first page */}
{isFirstPage && (
<>
<div style={{ textAlign: 'center', marginBottom: '10px', display: "flex", justifyContent: "space-between", alignItems: "center", }}>
<div style={{ textAlign: 'center', marginBottom: '10px', display: "flex", justifyContent: "space-between", alignItems: "center", ...headerStyle }}>
<div></div>
<h2 style={{ margin: '0', fontSize: '20px', fontWeight: '700' }}>{table2Data?.OrderType === "E" ? "Estimate" : (BillName ? BillName : "Tax Invoice")}</h2>
<div>
@ -232,7 +262,7 @@ const PurchaseOrdInvoice = ({
textAlign: 'left'
}}>
<div style={{ fontWeight: '700', fontSize: '15px', }}>
<div style={{ fontWeight: '700', fontSize: '15px', color:headerColor?.font||''}}>
{invoiceData.companyName}
</div>
<div style={{ fontWeight: '700', fontSize: '12px', }}>{invoiceData.companyspecname}</div>
@ -375,6 +405,7 @@ const PurchaseOrdInvoice = ({
// borderRight: '1px solid #000',
borderBottom: '1px solid #000',
borderTop: '1px solid #000',
...tableHeaderStyle
}}>
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>SI.No</div>
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Description of Goods</div>
@ -393,6 +424,11 @@ const PurchaseOrdInvoice = ({
display: 'grid',
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
// borderRight: '1px solid #000',
...(index % 2 === 0 && rowtypeStyle === "even"
? tableBodyStyle
: index % 2 === 1 && rowtypeStyle === "odd"
? tableBodyStyle
: {})
}}>
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>{chunkIndex * chunkSize + index + 1}</div>
@ -431,7 +467,7 @@ const PurchaseOrdInvoice = ({
</div>
</div>
{/* CGST */}
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
display: 'grid',
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
// borderRight: '1px solid #000',
@ -446,13 +482,13 @@ const PurchaseOrdInvoice = ({
<div style={{ borderRight: '1px solid #000' }}></div>
<div style={{ borderRight: '1px solid #000' }}></div>
{<div style={{ padding: '6px 6px', textAlign: 'right', }}>
{ OrderDetailGST && OrderDetailGST.length > 0
{OrderDetailGST && OrderDetailGST.length > 0
? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
: "0.00"}
</div>}
</div>}
{/* SGST */}
{ OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
display: 'grid',
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
// borderRight: '1px solid #000',
@ -473,7 +509,7 @@ const PurchaseOrdInvoice = ({
</div>
</div>}
{/* IGST */}
{ OrderDetailGST[0]?.TaxTypeName === "WithTax" && (
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && (
<div style={{
display: 'grid',
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
@ -556,7 +592,7 @@ const PurchaseOrdInvoice = ({
</div>
<div style={{ borderRight: '1px solid #000' }}></div>
<div style={{ borderRight: '1px solid #000' }}></div>
<div style={{ padding: '8px 6px', textAlign: 'right', }}>
<div style={{ padding: '8px 6px', textAlign: 'right',...netAmountStyle }}>
{Number(invoiceData.grandTotal).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
</div>
</div>
@ -803,6 +839,7 @@ const PurchaseOrdInvoice = ({
textAlign: 'center',
fontSize: '10px',
padding: '8px',
...footerColorStyle
}}>
<div>This is a Computer Generated Invoice</div>
</div>

View File

@ -153,7 +153,34 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
const shouldFooterBeOnNewPage = lastChunkRows > 6;
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
return (
@ -169,7 +196,7 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
<div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: FormatTheme ? (isMobile ? "297mm" : "257mm") : "", }} className="print-page" key={chunkIndex}>
<div className="page-headerA4Style11" style={{ textAlign: "center" }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left' }}>
<div style={{...headerStyle, display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left' }}>
<div style={{
display: 'flex',
@ -274,7 +301,7 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
<div className={FormatTheme ? "page" : ""} style={{ lineHeight: "1", fontSize: "13px" }}>
<table style={{ width: "99%", margin: "auto" }} className='A4TableA4Style11'>
<thead>
<tr style={{ background: '#373B44', color: '#fff', }}>
<tr style={{ ...tableHeaderStyle}}>
{GlobaldummyData
? GlobalSlNo && <th style={{ width: '10%', textAlign: "center" }}>S.No</th>
: SLNO == true && <th style={{ width: '10%', textAlign: "center" }}>S.No</th>}
@ -321,7 +348,18 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
<tbody>
{dataChunk?.map((item, index) => (
<tr key={index}>
<tr key={index}
style={
index % 2 !== 1 && rowtypeStyle === "even"
? {
...tableBodyStyle
}
: index % 2 === 1 && rowtypeStyle === "odd"
? {
...tableBodyStyle
}
: {}
}>
{GlobaldummyData
? GlobalSlNo && (
<td style={{ textAlign: "center" }}>
@ -594,19 +632,8 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
}
<div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
{GlobaldummyData ? GlobaltermsAndConditions &&
(<div style={{ margin: "8px 0", padding: "8px", fontFamily: "sans-serif", width: "100%" }}>
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
Terms & Conditions
</p>
<ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
<li>Once goods are sold, they are not exchangeable or refundable.</li>
<li>Please check the product before leaving the counter.</li>
</ol>
</div>)
:
(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
<div style={{...footerColorStyle, display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
{(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
Terms & Conditions
</p>
@ -768,19 +795,8 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
}
<div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
{GlobaldummyData ? GlobaltermsAndConditions &&
(<div style={{ margin: "8px 0", padding: "8px", fontFamily: "sans-serif", width: "100%" }}>
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
Terms & Conditions
</p>
<ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
<li>Once goods are sold, they are not exchangeable or refundable.</li>
<li>Please check the product before leaving the counter.</li>
</ol>
</div>)
:
(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
<div style={{...footerColorStyle, display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
{(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
Terms & Conditions
</p>
@ -932,19 +948,8 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
}
<div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
{GlobaldummyData ? GlobaltermsAndConditions &&
(<div style={{ margin: "8px 0", padding: "8px", fontFamily: "sans-serif", width: "100%" }}>
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
Terms & Conditions
</p>
<ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
<li>Once goods are sold, they are not exchangeable or refundable.</li>
<li>Please check the product before leaving the counter.</li>
</ol>
</div>)
:
(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
<div style={{...footerColorStyle, display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
{(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
Terms & Conditions
</p>

View File

@ -162,6 +162,36 @@ const PurchaseOrdPrintA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
const calculatedTotalQuantity = purchaseData?.reduce((total, item) => {
return total + (Number(item?.SalesQty) || 0);
}, 0);
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
return (
<div style={{ display: "flex", flexDirection: "column", minHeight: "210mm", pageBreakInside: "avoid", }}>
@ -171,7 +201,7 @@ const PurchaseOrdPrintA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
<div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: FormatTheme ? "257mm" : "", }} className="print-page" key={chunkIndex}>
<div className="page-headerA4Style11" style={{ textAlign: "center" }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left' }}>
<div style={{ ...headerStyle, display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left' }}>
<div style={{
display: 'flex',
@ -285,7 +315,7 @@ const PurchaseOrdPrintA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
<div className={FormatTheme ? "page" : ""} style={{ lineHeight: "1", fontSize: "13px" }}>
<table style={{ width: "99%", margin: "auto" }} className='A4TableA4Style11'>
<thead>
<tr style={{ background: '#373B44', color: '#fff', }}>
<tr style={{ ...tableHeaderStyle }}>
{GlobaldummyData
? GlobalSlNo && <th style={{ width: '10%', textAlign: "center" }}>S.No</th>
: SLNO == true && <th style={{ width: '10%', textAlign: "center" }}>S.No</th>}
@ -332,7 +362,18 @@ const PurchaseOrdPrintA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
<tbody>
{dataChunk?.map((item, index) => (
<tr key={index}>
<tr key={index}
style={
index % 2 !== 1 && rowtypeStyle === "even"
? {
...tableBodyStyle
}
: index % 2 === 1 && rowtypeStyle === "odd"
? {
...tableBodyStyle
}
: {}
}>
{GlobaldummyData
? GlobalSlNo && (
<td style={{ textAlign: "center" }}>
@ -556,7 +597,7 @@ const PurchaseOrdPrintA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
}
<div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
<div style={{...footerColorStyle, display: "flex", width: "95%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
{TermsnAdCondition == true && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
Terms & Conditions
@ -621,25 +662,7 @@ const PurchaseOrdPrintA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
}}
>
<>
<div className='PrintA4Style11-print-ThirdDiv'>
<div>
<div style={{ display: 'flex', gap: '1rem', justifyContent: 'right', margin: '0.5rem 0rem', paddingRight: "1rem" }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
<div>ITEMS</div>
<div>Qty</div>
{(TotalOfferAmount > 0 || table2Data?.OverallDisc) ? (<div>OFFER</div>) : ""}
{/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>Amount</div> */}
</div>
<div style={{ textAlign: 'right', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
<div>{GlobaldummyData ? "7" : totalQuantityFilter?.length}</div>
<div>{GlobaldummyData ? "9" : calculatedTotalQuantity}</div>
{(TotalOfferAmount > 0 || table2Data?.OverallDisc) ? (<div>{Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>) : ""}
{/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>{GlobaldummyData ? "1066" : Number(table2Data?.NetAmount).toFixed(2)}</div> */}
</div>
</div>
<div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", backgroundColor: "#fdc716", textAlign: "center" }}>Purchase Order </div>
</div>
</div>
<hr className="PrintA4Style11-print-dottline" />
@ -689,33 +712,15 @@ const PurchaseOrdPrintA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
<div className='PrintA4Style11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div>
</div>
</>
{GlobaldummyData ? GlobalIsnotes &&
(<div>
<p style={{ padding: "0rem 1rem" }}>Notes : 10 days Return policy</p>
<hr className="PrintA4Style11-print-dottline" />
</div>) :
Notestext && (<div>
{Notestext && (<div>
<p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p>
<hr className="PrintA4Style11-print-dottline" />
</div>)
}
<div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
{GlobaldummyData ? GlobaltermsAndConditions &&
(<div style={{ margin: "8px 0", padding: "8px", fontFamily: "sans-serif", width: "100%" }}>
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
Terms & Conditions
</p>
<ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
<li>Once goods are sold, they are not exchangeable or refundable.</li>
<li>Please check the product before leaving the counter.</li>
</ol>
</div>)
:
(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
<div style={{...footerColorStyle, display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
{(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
<p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
Terms & Conditions
</p>