1827 lines
75 KiB
JavaScript
1827 lines
75 KiB
JavaScript
const StickerPrintTemplates = ({
|
|
selectedRecords,
|
|
copies,
|
|
nickName,
|
|
proName,
|
|
ProdId,
|
|
size,
|
|
detail,
|
|
templateOptions,
|
|
base64Image,
|
|
QrandbarcodeDatas,
|
|
MultiCode,
|
|
generateQRCodeCopy,
|
|
generateCodeImage,
|
|
imageTagBarcodeAndQR,
|
|
dropdownValue,
|
|
barcodeTemplateDetails,
|
|
}) => {
|
|
const template = barcodeTemplateDetails?.find(
|
|
(find) => find.SessionName === dropdownValue
|
|
);
|
|
const templateAvailable = template === undefined ? false : true;
|
|
|
|
function choosenPrintStyle(dropdownValue, templateAvailable) {
|
|
switch (dropdownValue) {
|
|
case '15X15 6cross':
|
|
return templateAvailable ? 'label-15X156cross' : 'StickerPrints0';
|
|
|
|
case '22X35 3cross':
|
|
return templateAvailable ? '22X353cross' : 'StickerPrints1';
|
|
|
|
case '25X25 4cross':
|
|
return templateAvailable ? '25X254cross' : 'StickerPrints2';
|
|
|
|
case '25X50 2cross':
|
|
return templateAvailable ? '25X502cross' : 'StickerPrints3';
|
|
|
|
case '50X30 Single':
|
|
return templateAvailable ? '50X30Single' : 'StickerPrints4';
|
|
|
|
case '50X25 Single':
|
|
return templateAvailable ? '50X25Single' : 'StickerPrints5';
|
|
|
|
case '100X13 (55MM Printable)':
|
|
return templateAvailable ? '100X13(55MMPrintable)' : 'StickerPrints6';
|
|
|
|
case '100X15 (70MM Printable)':
|
|
return templateAvailable ? '100X15(70MMPrintable)' : 'StickerPrints7';
|
|
|
|
case '100X150':
|
|
return templateAvailable ? '100X150' : 'StickerPrints8';
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
const selectStyle = choosenPrintStyle(dropdownValue, templateAvailable);
|
|
const secondValueStyle = {
|
|
flexDirection: templateOptions.secondValue === 'R' ? 'row' : 'row-reverse',
|
|
};
|
|
const valueStyleRow = {
|
|
flexDirection: templateOptions.value === 'R' ? 'row' : 'row-reverse',
|
|
};
|
|
const valueStyleColumn = {
|
|
flexDirection: templateOptions.value === 'T' ? 'column' : 'column-reverse',
|
|
};
|
|
const formatDate = (dateStr) => {
|
|
const d = new Date(dateStr);
|
|
|
|
const day = String(d.getDate()).padStart(2, '0');
|
|
|
|
const months = [
|
|
'JAN',
|
|
'FEB',
|
|
'MAR',
|
|
'APR',
|
|
'MAY',
|
|
'JUN',
|
|
'JUL',
|
|
'AUG',
|
|
'SEP',
|
|
'OCT',
|
|
'NOV',
|
|
'DEC',
|
|
];
|
|
const month = months[d.getMonth()];
|
|
|
|
const year = String(d.getFullYear()).slice(-2);
|
|
|
|
return `${day}-${month}-${year}`;
|
|
};
|
|
const colorText = 'Color : Red';
|
|
console.log(selectStyle, 'selectStyle');
|
|
return (
|
|
<div style={{ display: 'none' }}>
|
|
{selectStyle == 'StickerPrints0' && (
|
|
<div id="StickerPrints0">
|
|
<div className="grid15x15_6cross">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
console.log(copyCount, 'copyCountcopyCountcopyCount');
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="Sticker0"
|
|
key={`sticker0-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
style={{ width: '52px', height: '52px' }}
|
|
/>
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="Sticker0" key={`sticker0-${index}`}>
|
|
<img
|
|
src={base64Image}
|
|
style={{ width: '13mm', height: '13mm' }}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{selectStyle == 'StickerPrints1' && (
|
|
<div id="StickerPrints1">
|
|
<div className="grid22x35_3cross">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
return Array?.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="label-wrapper-22x35"
|
|
key={`sticker1-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div style={{ width: '60%' }}>
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 8 ? 'text-clamp-2' : ''}`}
|
|
>
|
|
{record.ProdName} ({record.Size}
|
|
{record.UomName})
|
|
</p>
|
|
<p>{record.QRCode}</p>
|
|
</div>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
/>
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array?.from({ length: copies })?.map((_, index) => (
|
|
<div
|
|
className="label-wrapper-22x35"
|
|
key={`sticker1-${index}`}
|
|
>
|
|
<div style={{ width: '19mm' }}>
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 8 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName} ({size})
|
|
</p>
|
|
<p>{ProdId}</p>
|
|
</div>
|
|
<img src={base64Image} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{selectStyle == 'StickerPrints2' && (
|
|
<div id="StickerPrints2">
|
|
<div className="grid25x25_4cross">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
console.log(copyCount, 'copyCount2');
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="sticker25x25"
|
|
key={`sticker2-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<p
|
|
className={`sticker25x25-name ${nickName ? '' : (record?.ProdName + '(' + record?.Size + '' + record?.UomName + ')')?.length > 14 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
<span
|
|
class={
|
|
(record?.NickName || record?.ProdName)?.length <=
|
|
14
|
|
? 'product-name2'
|
|
: 'product-nameSmall2'
|
|
}
|
|
>
|
|
{record?.NickName || record?.ProdName}
|
|
</span>
|
|
<span
|
|
class={
|
|
(record?.NickName || record?.ProdName)?.length <=
|
|
14
|
|
? 'product-size2'
|
|
: 'product-sizeSmall2'
|
|
}
|
|
>
|
|
({record?.Size}
|
|
{record?.UomName})
|
|
</span>
|
|
</p>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
className="sticker25-img"
|
|
alt="barcode"
|
|
/>
|
|
<p class="product-id2">
|
|
{record?.QRCode || record?.ProdId}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="sticker25x25" key={`sticker2-${index}`}>
|
|
<p
|
|
className={`sticker25x25-name ${nickName ? '' : (proName + '(' + size + ')')?.length > 14 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
<span
|
|
class={
|
|
proName?.length <= 14
|
|
? 'product-name2'
|
|
: 'product-nameSmall2'
|
|
}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</span>
|
|
<span
|
|
class={
|
|
proName?.length <= 14
|
|
? 'product-size2'
|
|
: 'product-sizeSmall2'
|
|
}
|
|
>
|
|
({size})
|
|
</span>
|
|
</p>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<img
|
|
src={base64Image}
|
|
className="sticker25-img"
|
|
alt="barcode"
|
|
/>
|
|
<p class="product-id2">{ProdId}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{selectStyle == 'StickerPrints3' && (
|
|
<div id="StickerPrints3">
|
|
<div className="grid25x50_2cross">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
console.log(copyCount, 'copyCount3');
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="label-25x50-content"
|
|
key={`sticker3-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div>
|
|
<p
|
|
className={`${nickName ? '' : ((record?.NickName || record?.ProdName) + ' (' + record?.Size + ')')?.length > 12 ? 'text-clamp-2' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName} (
|
|
{record?.Size}
|
|
{record?.UomName})
|
|
</p>
|
|
<p>{record?.QRCode || record?.ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
style={{ width: '75px', height: '75px' }}
|
|
/>
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div
|
|
className="label-25x50-content"
|
|
key={`sticker3-${index}`}
|
|
>
|
|
<div>
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-clamp-2' : ''}`}
|
|
>
|
|
{proName} ({size})
|
|
</p>
|
|
<p>{ProdId}</p>
|
|
</div>
|
|
<img src={base64Image} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{selectStyle == 'StickerPrints4' && (
|
|
<div id="StickerPrints4">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
console.log(copyCount, 'copyCount4');
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="Sticker4"
|
|
key={`sticker4-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div>
|
|
<p
|
|
className={`${nickName ? '' : (record?.ProdName + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName} (
|
|
{record?.Size}
|
|
{record?.UomName})
|
|
</p>
|
|
<p>{record?.QRCode || record?.ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
style={{ width: '75px', height: '75px' }}
|
|
/>
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="Sticker4" key={`sticker4-${index}`}>
|
|
<div>
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName} ({size})
|
|
</p>
|
|
<p>{ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={base64Image}
|
|
style={{ width: '75px', height: '75px' }}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{selectStyle == 'StickerPrints5' && (
|
|
<div id="StickerPrints5">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
console.log(copyCount, 'copyCount5');
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="Sticker5"
|
|
key={`sticker5-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div>
|
|
<p
|
|
className={`${nickName ? '' : (record?.ProdName + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName} (
|
|
{record?.Size}
|
|
{record?.UomName})
|
|
</p>
|
|
<p>{record?.QRCode || record?.ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
style={{ width: '72px', height: '72px' }}
|
|
/>
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="Sticker5" key={`sticker5-${index}`}>
|
|
<div>
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName} ({size})
|
|
</p>
|
|
<p>{ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={base64Image}
|
|
style={{ width: '72px', height: '72px' }}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{selectStyle == 'StickerPrints6' && (
|
|
<div id="StickerPrints6">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
console.log(copyCount, 'copyCount6');
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="Sticker6"
|
|
key={`sticker6-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div className="text-section6">
|
|
<p
|
|
className={`${nickName ? '' : (record?.ProdName + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName} (
|
|
{record?.Size}
|
|
{record?.UomName})
|
|
</p>
|
|
<p>{record?.QRCode || record?.ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
style={{ width: '11mm', height: '11mm' }}
|
|
/>
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="Sticker6" key={`sticker6-${index}`}>
|
|
<div className="text-section6">
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName} ({size})
|
|
</p>
|
|
<p>{ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={base64Image}
|
|
style={{ width: '11mm', height: '11mm' }}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{selectStyle == 'StickerPrints7' && (
|
|
<div id="StickerPrints7">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
console.log(copyCount, 'copyCount7');
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="Sticker7"
|
|
key={`sticker7-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div className="text-section7">
|
|
<p
|
|
className={`${nickName ? '' : (record?.ProdName + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName} (
|
|
{record?.Size}
|
|
{record?.UomName})
|
|
</p>
|
|
<p>{record?.QRCode || record?.ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
style={{ width: '12mm', height: '12mm' }}
|
|
/>
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="Sticker7" key={`sticker7-${index}`}>
|
|
<div className="text-section7">
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName} ({size})
|
|
</p>
|
|
<p>{ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={base64Image}
|
|
style={{ width: '12mm', height: '12mm' }}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{selectStyle == 'StickerPrints8' && (
|
|
<div id="StickerPrints8">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
console.log(copyCount, 'copyCount8');
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="OverAllSticker8"
|
|
key={`sticker8-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div className="StikerBr8">
|
|
<p>{record?.BrName || detail?.BrName}</p>
|
|
</div>
|
|
<div className="Sticker8">
|
|
<div className="text-section8">
|
|
<p>
|
|
Product Name:{' '}
|
|
<p
|
|
className={`field-value ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName}
|
|
</p>
|
|
</p>
|
|
<p>
|
|
SIZE:{' '}
|
|
<span className="field-value">
|
|
{record?.Size}
|
|
{record?.UomName}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
Id:{' '}
|
|
<span className="field-value">
|
|
{record?.QRCode || record?.ProdId}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
MRP:{' '}
|
|
<span className="field-value">
|
|
{'MRP : ' + record?.MRP}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
Selling Price:{' '}
|
|
<span className="field-value">
|
|
{record?.SellPrice}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
style={{ width: '50mm', height: '50mm' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="OverAllSticker8">
|
|
<div className="StikerBr8">
|
|
<p>{detail?.BrName}</p>
|
|
</div>
|
|
<div className="Sticker8" key={`sticker8-${index}`}>
|
|
<div className="text-section8">
|
|
<p>
|
|
Product Name:{' '}
|
|
<p
|
|
className={`field-value ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName}
|
|
</p>
|
|
</p>
|
|
<p>
|
|
SIZE: <span className="field-value">{size}</span>
|
|
</p>
|
|
<p>
|
|
Id: <span className="field-value">{ProdId}</span>
|
|
</p>
|
|
<p>
|
|
MRP:{' '}
|
|
<span className="field-value">
|
|
{'MRP : ' + detail?.MRP}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
Selling Price:{' '}
|
|
<span className="field-value">
|
|
{detail?.SellPrice}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<img
|
|
src={base64Image}
|
|
style={{ width: '50mm', height: '50mm' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{selectStyle == '25X254cross' && (
|
|
<div id="25X254cross">
|
|
<div className="grid25x25_4cross">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => {
|
|
const hasProductName = !!templateOptions.productName;
|
|
const hasMrp = !!templateOptions.mrp;
|
|
|
|
const hasMDate =
|
|
templateOptions.mDate && record?.ManufDate;
|
|
|
|
const hasEDate = templateOptions.eDate && record?.ExpDate;
|
|
|
|
// IMAGE SIZE LOGIC
|
|
let imageSize = 50;
|
|
if (!hasMDate && !hasEDate) {
|
|
imageSize = 52;
|
|
}
|
|
|
|
if (!hasProductName || !hasMrp) {
|
|
imageSize = 60;
|
|
}
|
|
|
|
if (!hasProductName && !hasMrp) {
|
|
imageSize = 80;
|
|
}
|
|
|
|
// FLEX DIRECTION LOGIC
|
|
const forceColumnLayout =
|
|
!hasProductName || !hasMrp || (!hasMDate && !hasEDate);
|
|
return (
|
|
<div
|
|
className="barcode-wrapper-25x25"
|
|
key={`Barcode1-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div className="barcode-container-25x25">
|
|
{templateOptions.value === 'T' && (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: forceColumnLayout
|
|
? 'column'
|
|
: 'row',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '90%'
|
|
: `${imageSize}%`,
|
|
'7px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
</div>
|
|
)}
|
|
{hasProductName && (
|
|
<div
|
|
style={{
|
|
fontSize: '9px',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
className={`productNameBQ ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName}
|
|
</div>
|
|
)}
|
|
{hasMrp && (
|
|
<div
|
|
style={{
|
|
fontSize: '9px',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
className="MRPBQ"
|
|
>
|
|
{'₹' + record?.MRP}
|
|
</div>
|
|
)}
|
|
{templateOptions.value === 'C' && (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: forceColumnLayout
|
|
? 'column'
|
|
: 'row',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '90%'
|
|
: `${imageSize}%`,
|
|
'7px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
</div>
|
|
)}
|
|
{(hasMDate || hasEDate) && (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '3px',
|
|
}}
|
|
>
|
|
{hasMDate && (
|
|
<div
|
|
style={{
|
|
fontSize: '8px',
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
className="MandateBQ"
|
|
>
|
|
{hasMDate && !hasEDate ? 'MFG: ' : ''}
|
|
{formatDate(record?.ManufDate)}
|
|
</div>
|
|
)}
|
|
{hasMDate && hasEDate && (
|
|
<span style={{ fontSize: '8px' }}>|</span>
|
|
)}
|
|
{hasEDate && (
|
|
<div
|
|
style={{
|
|
fontSize: '8px',
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
className="ExpdateBQ"
|
|
>
|
|
{!hasMDate && hasEDate ? 'EXP: ' : ''}
|
|
{formatDate(record?.ExpDate)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{templateOptions.value === 'B' && (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: forceColumnLayout
|
|
? 'column'
|
|
: 'row',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '25mm'
|
|
: `${imageSize}%`,
|
|
'7px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => {
|
|
const hasProductName = !!templateOptions.productName;
|
|
const hasMrp = !!templateOptions.mrp;
|
|
|
|
const hasMDate =
|
|
templateOptions.mDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]?.ManufDate;
|
|
|
|
const hasEDate =
|
|
templateOptions.eDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]?.ExpDate;
|
|
|
|
// IMAGE SIZE LOGIC
|
|
let imageSize = 50;
|
|
if (!hasMDate && !hasEDate) {
|
|
imageSize = 52;
|
|
}
|
|
|
|
if (!hasProductName || !hasMrp) {
|
|
imageSize = 60;
|
|
}
|
|
|
|
if (!hasProductName && !hasMrp) {
|
|
imageSize = 80;
|
|
}
|
|
|
|
// FLEX DIRECTION LOGIC
|
|
const forceColumnLayout =
|
|
!hasProductName || !hasMrp || (!hasMDate && !hasEDate);
|
|
return (
|
|
<div
|
|
className="barcode-wrapper-25x25"
|
|
key={`Barcode1-${index}`}
|
|
>
|
|
<div className="barcode-container-25x25">
|
|
{templateOptions.value === 'T' && (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: forceColumnLayout
|
|
? 'column'
|
|
: 'row',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '90%'
|
|
: `${imageSize}%`,
|
|
'7px'
|
|
)}
|
|
</div>
|
|
)}
|
|
{hasProductName && (
|
|
<div
|
|
style={{
|
|
fontSize: '9px',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{hasMrp && (
|
|
<div
|
|
style={{
|
|
fontSize: '9px',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
className="MRPBQ"
|
|
>
|
|
{'₹' + detail?.MRP}
|
|
</div>
|
|
)}
|
|
{templateOptions.value === 'C' && (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: forceColumnLayout
|
|
? 'column'
|
|
: 'row',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '90%'
|
|
: `${imageSize}%`,
|
|
'7px'
|
|
)}
|
|
</div>
|
|
)}
|
|
{(hasMDate || hasEDate) && (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '3px',
|
|
}}
|
|
>
|
|
{hasMDate && (
|
|
<div
|
|
style={{
|
|
fontSize: '8px',
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
className="MandateBQ"
|
|
>
|
|
{hasMDate && !hasEDate ? 'MFG: ' : ''}
|
|
{formatDate(
|
|
detail?.ProdVariantPriceDetails?.[0]
|
|
?.ManufDate
|
|
)}
|
|
</div>
|
|
)}
|
|
{hasMDate && hasEDate && (
|
|
<span style={{ fontSize: '8px' }}>|</span>
|
|
)}
|
|
{hasEDate && (
|
|
<div
|
|
style={{
|
|
fontSize: '8px',
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
className="ExpdateBQ"
|
|
>
|
|
{!hasMDate && hasEDate ? 'EXP: ' : ''}
|
|
{formatDate(
|
|
detail?.ProdVariantPriceDetails?.[0]?.ExpDate
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{templateOptions.value === 'B' && (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: forceColumnLayout
|
|
? 'column'
|
|
: 'row',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '25mm'
|
|
: `${imageSize}%`,
|
|
'7px'
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{selectStyle == '25X502cross' && (
|
|
<div id="25X502cross">
|
|
<div className="grid25x50_2cross">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="label25x50-wrapper"
|
|
key={`Barcode2-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div
|
|
className="label25x50-container"
|
|
style={valueStyleColumn}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B' ? '45mm' : '16mm',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`label25x50-name ${record?.NickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName}
|
|
</div>
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div className="label25x50-mrp">
|
|
{'MRP : ' + record?.MRP}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="label25x50-wrapper" key={`Barcode2-${index}`}>
|
|
<div
|
|
className="label25x50-container"
|
|
style={valueStyleColumn}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B' ? '45mm' : '16mm'
|
|
)}
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`label25x50-name ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName}
|
|
</div>
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div className="label25x50-mrp">
|
|
{'MRP : ' + detail?.MRP}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{selectStyle == '50X30Single' && (
|
|
<div id="50X30Single">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="BarQrprint6"
|
|
style={secondValueStyle}
|
|
key={`Barcode3-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div className="BarQrprint1details flexDirection">
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${record?.NickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName}
|
|
</div>
|
|
)}
|
|
{templateOptions.mDate && record?.ManufDate && (
|
|
<div
|
|
style={{ fontSize: '8px', whiteSpace: 'nowrap' }}
|
|
className="MandateBQ"
|
|
>
|
|
{record?.ManufDate}
|
|
</div>
|
|
)}
|
|
{templateOptions.eDate && record?.ExpDate && (
|
|
<div
|
|
style={{ fontSize: '8px', whiteSpace: 'nowrap' }}
|
|
className="ExpdateBQ"
|
|
>
|
|
{record?.ExpDate}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage flexDirection"
|
|
style={valueStyleColumn}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
'70%',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">{'MRP : ' + record?.MRP}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div
|
|
className="BarQrprint6"
|
|
style={secondValueStyle}
|
|
key={`Barcode3-${index}`}
|
|
>
|
|
<div className="BarQrprint1details flexDirection">
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{templateOptions.mDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]?.ManufDate && (
|
|
<div
|
|
style={{ fontSize: '8px', whiteSpace: 'nowrap' }}
|
|
className="MandateBQ"
|
|
>
|
|
{detail?.ProdVariantPriceDetails?.[0]?.ManufDate}
|
|
</div>
|
|
)}
|
|
{templateOptions.eDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]?.ExpDate && (
|
|
<div
|
|
style={{ fontSize: '8px', whiteSpace: 'nowrap' }}
|
|
className="ExpdateBQ"
|
|
>
|
|
{detail?.ProdVariantPriceDetails?.[0]?.ExpDate}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage flexDirection"
|
|
style={valueStyleColumn}
|
|
>
|
|
{imageTagBarcodeAndQR('70%')}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{selectStyle == '50X25Single' && (
|
|
<div id="50X25Single">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="BarQrprint2"
|
|
style={secondValueStyle}
|
|
key={`Barcode4-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div
|
|
className="BarQrprint1details flexDirection"
|
|
style={{ width: '80%' }}
|
|
>
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName}
|
|
</div>
|
|
)}
|
|
{templateOptions.mDate && record?.ManufDate && (
|
|
<div
|
|
style={{ fontSize: '10px' }}
|
|
className="MandateBQ"
|
|
>
|
|
{record?.ManufDate}
|
|
</div>
|
|
)}
|
|
{templateOptions.eDate && record?.ExpDate && (
|
|
<div
|
|
style={{ fontSize: '10px' }}
|
|
className="ExpdateBQ"
|
|
>
|
|
{record?.ExpDate}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage"
|
|
style={{
|
|
valueStyleColumn,
|
|
width: '60%',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
'90%',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">
|
|
{'MRP : ' + record?.MRP}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div
|
|
className="BarQrprint2"
|
|
style={secondValueStyle}
|
|
key={`Barcode4-${index}`}
|
|
>
|
|
<div
|
|
className="BarQrprint1details flexDirection"
|
|
style={{ width: '80%' }}
|
|
>
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{templateOptions.mDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]?.ManufDate && (
|
|
<div
|
|
style={{ fontSize: '10px' }}
|
|
className="MandateBQ"
|
|
>
|
|
{detail?.ProdVariantPriceDetails?.[0]?.ManufDate}
|
|
</div>
|
|
)}
|
|
{templateOptions.eDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]?.ExpDate && (
|
|
<div
|
|
style={{ fontSize: '10px' }}
|
|
className="ExpdateBQ"
|
|
>
|
|
{detail?.ProdVariantPriceDetails?.[0]?.ExpDate}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage"
|
|
style={{
|
|
valueStyleColumn,
|
|
width: '60%',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR('90%')}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{selectStyle == '100X13(55MMPrintable)' && (
|
|
<div id="100X13(55MMPrintable)">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="BarQrprint9"
|
|
key={`Barcode5-${recordIndex}-${copyIndex}`}
|
|
style={valueStyleRow}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
'auto',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
<div className="BarQrprint1details1">
|
|
{templateOptions.productName && (
|
|
<div style={{ fontSize: '8px' }}>
|
|
{'Product Name :' +
|
|
(record?.NickName || record?.ProdName)}
|
|
</div>
|
|
)}
|
|
{templateOptions.sellingPrice && (
|
|
<div style={{ fontSize: '8px' }}>
|
|
{'Selling Price :' + record?.SellPrice}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div
|
|
className="BarQrprint9"
|
|
key={`Barcode5-${index}`}
|
|
style={valueStyleRow}
|
|
>
|
|
{imageTagBarcodeAndQR()}
|
|
<div className="BarQrprint1details1">
|
|
{templateOptions.productName && (
|
|
<div style={{ fontSize: '8px' }}>
|
|
{'Product Name :' + proName}
|
|
</div>
|
|
)}
|
|
{templateOptions.sellingPrice && (
|
|
<div style={{ fontSize: '8px' }}>
|
|
{'Selling Price :' + detail?.SellPrice}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{selectStyle == '100X15(70MMPrintable)' && (
|
|
<div id="100X15(70MMPrintable)">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="BarQrprint1"
|
|
style={valueStyleRow}
|
|
key={`Barcode6-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div className="BarQrprint1details flexDirection">
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{'Product Name: ' +
|
|
(record?.NickName || record?.ProdName)}
|
|
</div>
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">
|
|
{'MRP : ' + record?.MRP}
|
|
</div>
|
|
)}
|
|
{templateOptions.sellingPrice && (
|
|
<div className="SellingpriceBQ">
|
|
{'Selling Price :' + record?.SellPrice}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="Qrcodeimage" style={{ width: '50%' }}>
|
|
{imageTagBarcodeAndQR(
|
|
'auto',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div
|
|
className="BarQrprint1"
|
|
style={valueStyleRow}
|
|
key={`Barcode6-${index}`}
|
|
>
|
|
<div className="BarQrprint1details flexDirection">
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{'Product Name' + proName}
|
|
</div>
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
|
|
)}
|
|
{templateOptions.sellingPrice && (
|
|
<div className="SellingpriceBQ">
|
|
{'Selling Price :' + detail?.SellPrice}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="Qrcodeimage" style={{ width: '50%' }}>
|
|
{imageTagBarcodeAndQR()}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{selectStyle == '100X150' && (
|
|
<div id="100X150">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="BarQrprint7"
|
|
style={secondValueStyle}
|
|
key={`Barcode7-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div
|
|
className="BarQrprint1details1"
|
|
style={{ gap: '10px' }}
|
|
>
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{'Product Name: ' +
|
|
(record?.NickName || record?.ProdName)}
|
|
</div>
|
|
)}
|
|
{templateOptions.sellingPrice && (
|
|
<div className="SellingpriceBQ">
|
|
{'Selling Price :' + record?.SellPrice}
|
|
</div>
|
|
)}
|
|
{templateOptions.mDate && record?.ManufDate && (
|
|
<div className="MandateBQ">{record?.ManufDate}</div>
|
|
)}
|
|
{templateOptions.eDate && record?.ExpDate && (
|
|
<div className="ExpdateBQ">{record?.ExpDate}</div>
|
|
)}
|
|
{templateOptions.color && (
|
|
<div className="ColorBQ">
|
|
{record?.Color || colorText}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage"
|
|
style={{
|
|
valueStyleColumn,
|
|
width: '50%',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
{
|
|
<div>
|
|
{imageTagBarcodeAndQR(
|
|
'70%',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
</div>
|
|
}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">
|
|
{'MRP : ' + record?.MRP}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div
|
|
className="BarQrprint7"
|
|
style={secondValueStyle}
|
|
key={`Barcode7-${index}`}
|
|
>
|
|
<div
|
|
className="BarQrprint1details1"
|
|
style={{ gap: '10px' }}
|
|
>
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{'Product Name' + (nickName ? nickName : proName)}
|
|
</div>
|
|
)}
|
|
{templateOptions.sellingPrice && (
|
|
<div className="SellingpriceBQ">
|
|
{'Selling Price :' + detail?.SellPrice}
|
|
</div>
|
|
)}
|
|
{templateOptions.mDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]?.ManufDate && (
|
|
<div className="MandateBQ">
|
|
{detail?.ProdVariantPriceDetails?.[0]?.ManufDate}
|
|
</div>
|
|
)}
|
|
{templateOptions.eDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]?.ExpDate && (
|
|
<div className="ExpdateBQ">
|
|
{detail?.ProdVariantPriceDetails?.[0]?.ExpDate}
|
|
</div>
|
|
)}
|
|
{templateOptions.color && (
|
|
<div className="ColorBQ">{colorText}</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage"
|
|
style={{
|
|
valueStyleColumn,
|
|
width: '50%',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
{<div>{imageTagBarcodeAndQR('70%')}</div>}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{selectStyle == 'label-15X156cross' && (
|
|
<div id="label-15X156cross">
|
|
<div className="label-15x15-container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="label-15x15-content"
|
|
key={`Barcode8-${recordIndex}-${copyIndex}`}
|
|
>
|
|
{templateOptions.value === 'T' &&
|
|
imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B' ? '100%' : '6mm',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`label-15x15-name ${record?.NickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName
|
|
? record?.NickName
|
|
: record?.ProdName}
|
|
</div>
|
|
)}
|
|
{templateOptions.value === 'C' &&
|
|
imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '80%'
|
|
: !templateOptions.productName &&
|
|
!templateOptions.mrp
|
|
? '80%'
|
|
: '35%',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
textAlign: 'center',
|
|
fontSize: '6px',
|
|
}}
|
|
className="MRPBQ"
|
|
>
|
|
{'₹:' + record?.MRP}
|
|
</div>
|
|
)}
|
|
{templateOptions.value === 'B' &&
|
|
imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B' ? '100%' : '50%',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div
|
|
className="label-15x15-content"
|
|
key={`Barcode8-${index}`}
|
|
>
|
|
{templateOptions.value === 'T' &&
|
|
imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B' ? '100%' : '6mm'
|
|
)}
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`label-15x15-name ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{templateOptions.value === 'C' &&
|
|
imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '80%'
|
|
: !templateOptions.productName && !templateOptions.mrp
|
|
? '80%'
|
|
: '7.5mm',
|
|
'5px'
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div className="label-15x15-mrp">
|
|
{'₹:' + (detail?.MRP ? detail?.MRP : 10.0)}
|
|
</div>
|
|
)}
|
|
{templateOptions.value === 'B' &&
|
|
imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B' ? '100%' : '7.5mm'
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{selectStyle == '22X353cross' && (
|
|
<div id="22X353cross">
|
|
<div className="grid22x35_3cross">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
|
|
return Array.from({ length: copyCount })?.map(
|
|
(_, copyIndex) => (
|
|
<div
|
|
className="barcode-wrapper-22x35"
|
|
key={`Barcode9-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div
|
|
className="barcode-container-22x35"
|
|
style={{
|
|
alignItems: 'center',
|
|
flexDirection:
|
|
templateOptions.value === 'T'
|
|
? 'column'
|
|
: 'column-reverse',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '100%'
|
|
: !templateOptions.mrp &&
|
|
!templateOptions.productName
|
|
? '60%'
|
|
: '40%',
|
|
'8px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
{(templateOptions.productName ||
|
|
templateOptions.mrp) && (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${templateOptions.codeType === 'B' ? '' : 'productNameBQSmall'} ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName
|
|
? record?.NickName
|
|
: record?.ProdName}
|
|
</div>
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div
|
|
className={`MRPBQ ${templateOptions.codeType === 'B' ? '' : 'productNameBQSmall'}`}
|
|
>
|
|
{'MRP : ' + record?.MRP}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div
|
|
className="barcode-wrapper-22x35"
|
|
key={`Barcode9-${index}`}
|
|
>
|
|
<div
|
|
className="barcode-container-22x35"
|
|
style={{
|
|
alignItems: 'center',
|
|
flexDirection:
|
|
templateOptions.value === 'T'
|
|
? 'column'
|
|
: 'column-reverse',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '100%'
|
|
: !templateOptions.mrp && !templateOptions.productName
|
|
? '60%'
|
|
: '40%',
|
|
'8px'
|
|
)}
|
|
{(templateOptions.productName || templateOptions.mrp) && (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${templateOptions.codeType === 'B' ? '' : 'productNameBQSmall'} ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div
|
|
className={`MRPBQ ${templateOptions.codeType === 'B' ? '' : 'productNameBQSmall'}`}
|
|
>
|
|
{'MRP : ' + detail?.MRP}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
export default StickerPrintTemplates;
|