1436 lines
68 KiB
JavaScript
1436 lines
68 KiB
JavaScript
import { Form, Empty } from 'antd';
|
|
import { GiHorizontalFlip, GiVerticalFlip } from 'react-icons/gi';
|
|
import { FaPlus } from 'react-icons/fa6';
|
|
import { InputField } from '../../Components/Forms/InputField.jsx';
|
|
import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
|
|
import Buttons from '../../Components/Forms/Buttons';
|
|
import { validateSafeInput } from '../../Services/Others';
|
|
import { useEffect } from 'react';
|
|
|
|
const StickerPrintModel = ({
|
|
open,
|
|
handleCancel,
|
|
formRef,
|
|
onFinish,
|
|
MultiCode,
|
|
activeTab,
|
|
setActiveTab,
|
|
selectedRecords,
|
|
coresdata,
|
|
dropdownValue,
|
|
CoresOnChange,
|
|
barcodeTemplateDetails,
|
|
detail,
|
|
proName,
|
|
nickName,
|
|
ProdId,
|
|
size,
|
|
CopiesOnChange,
|
|
printProductName,
|
|
totalCopies,
|
|
setstockWiseQrcode,
|
|
setProductWiseQrcode,
|
|
setNickName,
|
|
templateOptions,
|
|
}) => {
|
|
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 barCodeImage =
|
|
'https://cdn.pixabay.com/photo/2014/04/02/16/19/barcode-306926_1280.png';
|
|
const qrCodeImage =
|
|
'https://cdn.pixabay.com/photo/2015/03/21/09/34/qr-683354_640.png';
|
|
const previewText = 'Barcode Preview';
|
|
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';
|
|
const handleImageTag = (w, h = '40px', barcodeOrQr) => {
|
|
return (
|
|
<img
|
|
src={barcodeOrQr ? barCodeImage : qrCodeImage}
|
|
alt={previewText}
|
|
width={w}
|
|
height={h}
|
|
/>
|
|
);
|
|
};
|
|
useEffect(() => {
|
|
if (coresdata?.length > 0 && open) {
|
|
CoresOnChange(coresdata?.[0].ConfigName);
|
|
}
|
|
}, [open, coresdata]);
|
|
return (
|
|
<DefaultModal
|
|
width={1000}
|
|
open={open}
|
|
title="Sticker Print"
|
|
handleCancel={handleCancel}
|
|
footer={false}
|
|
children={
|
|
<Form ref={formRef} onFinish={onFinish}>
|
|
{MultiCode && (
|
|
<div className="printtabs">
|
|
<div
|
|
className={`tab-item ${activeTab === 'stock' ? 'active' : ''}`}
|
|
onClick={() => setActiveTab('stock')}
|
|
>
|
|
Stock Wise{' '}
|
|
<span className="count">({selectedRecords?.length})</span>
|
|
<div>
|
|
<div
|
|
className="AddStockMinatain"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setstockWiseQrcode(true);
|
|
}}
|
|
style={{
|
|
animation:
|
|
activeTab === 'stock' ? 'blink 1s infinite' : 'none',
|
|
}}
|
|
>
|
|
<FaPlus /> Add
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`tab-item ${activeTab === 'product' ? 'active' : ''}`}
|
|
onClick={() => setActiveTab('product')}
|
|
>
|
|
Product Wise{' '}
|
|
<span className="count">({selectedRecords?.length})</span>
|
|
<div
|
|
className="AddStockMinatain"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setProductWiseQrcode(true);
|
|
}}
|
|
style={{
|
|
animation:
|
|
activeTab === 'product' ? 'blink 1s infinite' : 'none',
|
|
}}
|
|
>
|
|
<FaPlus /> Add
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
|
|
<Form.Item
|
|
name="Cross"
|
|
className="size-selection"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: 'Please Select Cross',
|
|
},
|
|
]}
|
|
>
|
|
<div>
|
|
<label
|
|
className="required"
|
|
style={{ marginBottom: '8px', display: 'block' }}
|
|
>
|
|
Cross
|
|
</label>
|
|
<div className="barcode-qr-preview">
|
|
<div className="radio-sidebar-container">
|
|
{coresdata?.map((option) => (
|
|
<div
|
|
key={option.ConfigName}
|
|
onClick={() => CoresOnChange(option.ConfigName)}
|
|
className={`radio-sidebar-item ${dropdownValue === option.ConfigName ? 'selected' : ''}`}
|
|
>
|
|
<div className="radio-sidebar-title">
|
|
{option.ConfigName}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="BarcodeTemplateSetup-Master">
|
|
<div
|
|
className={`CustomisedBSPS ${dropdownValue === '100X150' ? 'height-max' : ''}`}
|
|
>
|
|
<div className="headerPreview">PREVIEW</div>
|
|
{(() => {
|
|
const template = barcodeTemplateDetails?.find(
|
|
(find) => find.SessionName === dropdownValue
|
|
);
|
|
const templateAvailable =
|
|
template === undefined ? false : true;
|
|
const checkComponent = (name) =>
|
|
template?.OptionDetails?.some(
|
|
(some) => some.OptionName === name
|
|
);
|
|
|
|
const mrp = checkComponent('MRP');
|
|
const qrcode = checkComponent('Qrcode');
|
|
const barcode = checkComponent('Barcode');
|
|
const color = checkComponent('Color');
|
|
const eDate = checkComponent('E Date');
|
|
const mDate = checkComponent('M Date');
|
|
const sellingPrice = checkComponent('Selling Price');
|
|
const productName = checkComponent('Product Name');
|
|
const barcodeOrQr = template?.CodeType
|
|
? template?.CodeType === 'B'
|
|
: true;
|
|
const templateValue =
|
|
template?.Position !== '' ? template?.Position : '';
|
|
switch (dropdownValue) {
|
|
case '15X15 6cross':
|
|
return templateAvailable ? (
|
|
!(productName || barcode || qrcode || mrp) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div className="SixCross15x">
|
|
{[...Array(6)].map((_, index) => (
|
|
<div key={index} className="BarQrprint5">
|
|
<div className="BarQrprint1details BarQrprint5Details alignCenterFlexDirectionColumn">
|
|
{(barcode || qrcode) &&
|
|
templateValue === 'T' &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 50 : 20,
|
|
20,
|
|
barcodeOrQr
|
|
)}
|
|
{productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{(barcode || qrcode) &&
|
|
templateValue === 'C' &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 50 : 20,
|
|
20,
|
|
barcodeOrQr
|
|
)}
|
|
{mrp && (
|
|
<div className="MRPBQ">
|
|
{'₹:' +
|
|
(detail?.MRP
|
|
? detail?.MRP
|
|
: 0.0)}
|
|
</div>
|
|
)}
|
|
{(barcode || qrcode) &&
|
|
templateValue === 'B' &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 50 : 20,
|
|
20,
|
|
barcodeOrQr
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'15mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'15mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="default-15x15-6cross">
|
|
{Array.from({ length: 6 }).map((_, index) => (
|
|
<div
|
|
className="Sticker0"
|
|
key={`sticker0-${index}`}
|
|
>
|
|
<img
|
|
src={qrCodeImage}
|
|
alt={`QR Code ${index + 1}`}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'15mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'15mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
case '22X35 3cross':
|
|
return templateAvailable ? (
|
|
!(barcode || qrcode || mrp) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div className="Cross32235">
|
|
{[...Array(3)].map((_, index) => (
|
|
<div className="BarQrprint4" key={index}>
|
|
<div
|
|
className="BarQrprint1details"
|
|
style={{
|
|
alignItems: 'center',
|
|
flexDirection:
|
|
templateValue === 'T'
|
|
? 'column'
|
|
: 'column-reverse',
|
|
}}
|
|
>
|
|
{(barcode || qrcode) &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 100 : 35,
|
|
35,
|
|
barcodeOrQr
|
|
)}
|
|
{(productName || mrp) && (
|
|
<div
|
|
style={{
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
{productName && (
|
|
<div
|
|
className={`MRPBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName || 'Product Name'}
|
|
</div>
|
|
)}
|
|
{mrp && (
|
|
<div className="MRPBQ">
|
|
{'₹:' +
|
|
(detail?.MRP
|
|
? detail?.MRP
|
|
: 10.0)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'22mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'35mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="grid22x35_3cross">
|
|
{Array?.from({ length: 3 })?.map(
|
|
(_, index) => (
|
|
<div
|
|
className="Sticker1 bg-white"
|
|
key={`sticker1-${index}`}
|
|
>
|
|
<div style={{ width: '60%' }}>
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 8 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName || 'Product Name'} (
|
|
{size || '1 PCS'})
|
|
</p>
|
|
<p>{ProdId || 'QR579890770'}</p>
|
|
</div>
|
|
<img
|
|
src={qrCodeImage}
|
|
style={{
|
|
width: '12mm',
|
|
height: '12mm',
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'22mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'35mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
case '25X25 4cross':
|
|
return templateAvailable ? (
|
|
!(
|
|
productName ||
|
|
mDate ||
|
|
eDate ||
|
|
barcode ||
|
|
qrcode ||
|
|
mrp
|
|
) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div className="Cross4Print">
|
|
{[...Array(4)].map((_, index) => (
|
|
<div key={index} className="BarQrprint3">
|
|
<div className="BarQrprint1details alignCenterFlexDirectionColumn">
|
|
{(barcode || qrcode) &&
|
|
templateValue === 'T' &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 60 : 35,
|
|
35,
|
|
barcodeOrQr
|
|
)}
|
|
{productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{mrp && (
|
|
<div className="MRPBQ">
|
|
{'₹:' +
|
|
(detail?.MRP
|
|
? detail?.MRP
|
|
: 10.0)}
|
|
</div>
|
|
)}
|
|
{(barcode || qrcode) &&
|
|
templateValue === 'C' &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 60 : 35,
|
|
35,
|
|
barcodeOrQr
|
|
)}
|
|
{mDate && (
|
|
<div className="MandateBQ"></div>
|
|
)}
|
|
{eDate && (
|
|
<div className="ExpdateBQ">
|
|
DD-MM-YYYY
|
|
</div>
|
|
)}
|
|
{(barcode || qrcode) &&
|
|
templateValue === 'B' &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 60 : 35,
|
|
35,
|
|
barcodeOrQr
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'25mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'25mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="grid25x25_4cross dummy4cross">
|
|
{Array.from({ length: 4 })?.map(
|
|
(_, index) => (
|
|
<div
|
|
className="sticker25x25 bg-white"
|
|
key={`sticker2-${index}`}
|
|
>
|
|
<p
|
|
className={`sticker25x25-name ${nickName ? '' : (proName + '(' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
<span
|
|
className={
|
|
(proName + '(' + size + ')')
|
|
?.length <= 14
|
|
? 'product-name2'
|
|
: 'product-nameSmall2'
|
|
}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</span>
|
|
<span
|
|
className={
|
|
(proName + '(' + size + ')')
|
|
?.length <= 14
|
|
? 'product-size2'
|
|
: 'product-sizeSmall2'
|
|
}
|
|
>
|
|
({size || '1 PCS'})
|
|
</span>
|
|
</p>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<img
|
|
src={qrCodeImage}
|
|
className="sticker25-img"
|
|
alt="barcode"
|
|
/>
|
|
<p className="product-id2">
|
|
{ProdId || 'QR8575956'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'25mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'25mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
case '25X50 2cross':
|
|
return templateAvailable ? (
|
|
!(productName || barcode || qrcode || mrp) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div className="TwoCrosssmain">
|
|
{[...Array(2)].map((_, index) => (
|
|
<div key={index} className="BarQrprint8">
|
|
<div
|
|
className="Barcodeimage"
|
|
style={valueStyleColumn}
|
|
>
|
|
{(barcode || qrcode) &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 140 : 30,
|
|
30,
|
|
barcodeOrQr
|
|
)}
|
|
{productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{mrp && (
|
|
<div className="MRPBQ">
|
|
{'₹:' +
|
|
(detail?.MRP
|
|
? detail?.MRP
|
|
: 10.0)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'25mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'50mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="grid25x50_2cross">
|
|
{Array.from({ length: 2 })?.map(
|
|
(_, index) => (
|
|
<div
|
|
className="Sticker3 bg-white"
|
|
key={`sticker3-${index}`}
|
|
>
|
|
<div style={{ width: '60%' }}>
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName || 'Product Name'} (
|
|
{size || '1 PCS'})
|
|
</p>
|
|
<p>{ProdId || 'QR74478578'}</p>
|
|
</div>
|
|
<img
|
|
src={qrCodeImage}
|
|
style={{
|
|
width: '75px',
|
|
height: '75px',
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'25mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'50mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
case '50X30 Single':
|
|
return templateAvailable ? (
|
|
!(
|
|
productName ||
|
|
mDate ||
|
|
eDate ||
|
|
barcode ||
|
|
qrcode ||
|
|
mrp
|
|
) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div
|
|
className="BarQrprint6"
|
|
style={secondValueStyle}
|
|
>
|
|
<div className="BarQrprint1details flexDirection">
|
|
{productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{mDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]
|
|
?.ManufDate && (
|
|
<div className="MandateBQ">
|
|
{formatDate(
|
|
detail
|
|
?.ProdVariantPriceDetails?.[0]
|
|
?.ManufDate
|
|
)}
|
|
</div>
|
|
)}
|
|
{eDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]
|
|
?.ExpDate && (
|
|
<div className="ExpdateBQ">
|
|
{formatDate(
|
|
detail
|
|
?.ProdVariantPriceDetails?.[0]
|
|
?.ExpDate
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage flexDirection"
|
|
style={valueStyleColumn}
|
|
>
|
|
{(barcode || qrcode) &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 70 : 35,
|
|
35,
|
|
barcodeOrQr
|
|
)}
|
|
{mrp && (
|
|
<div className="MRPBQ">
|
|
{'MRP : ' + (detail?.MRP || 10.0)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'30mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'50mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="grid50x30_1cross">
|
|
<div className="Sticker4 bg-white">
|
|
<div className="Sticker4-name">
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName || 'Product Name'} (
|
|
{size || '1 PCS'})
|
|
</p>
|
|
<p>{ProdId || 'QR987968'}</p>
|
|
</div>
|
|
<img
|
|
src={qrCodeImage}
|
|
style={{
|
|
width: '15mm',
|
|
height: '15mm',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'30mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'50mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
case '50X25 Single':
|
|
return templateAvailable ? (
|
|
!(
|
|
productName ||
|
|
mDate ||
|
|
barcode ||
|
|
qrcode ||
|
|
mrp
|
|
) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div
|
|
className="BarQrprint2"
|
|
style={secondValueStyle}
|
|
>
|
|
<div className="BarQrprint1details flexDirection">
|
|
{productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{mDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]
|
|
?.ManufDate && (
|
|
<div className="MandateBQ">
|
|
{formatDate(
|
|
detail
|
|
?.ProdVariantPriceDetails?.[0]
|
|
?.ManufDate
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage"
|
|
style={valueStyleColumn}
|
|
>
|
|
{(barcode || qrcode) &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 70 : 35,
|
|
35,
|
|
barcodeOrQr
|
|
)}
|
|
{mrp && (
|
|
<div className="MRPBQ">
|
|
{'MRP : ' + (detail?.MRP || '10.0')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'25mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'50mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="grid50x25_1cross">
|
|
<div className="Sticker5 bg-white">
|
|
<div className="Sticker5-name">
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName || 'Product Name'} (
|
|
{size || '1 PCS'})
|
|
</p>
|
|
<p>{ProdId || 'QR8798639'}</p>
|
|
</div>
|
|
<img
|
|
src={qrCodeImage}
|
|
style={{
|
|
width: '13mm',
|
|
height: '13mm',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'25mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'50mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
case '100X13 (55MM Printable)':
|
|
return templateAvailable ? (
|
|
!(
|
|
productName ||
|
|
sellingPrice ||
|
|
barcode ||
|
|
qrcode
|
|
) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div
|
|
className="BarQrprint9"
|
|
style={valueStyleRow}
|
|
>
|
|
{(barcode || qrcode) &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 140 : 35,
|
|
35,
|
|
barcodeOrQr
|
|
)}
|
|
<div className="BarQrprint1details1">
|
|
{productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{sellingPrice && (
|
|
<div className="SellingpriceBQ">
|
|
{`Selling Price : ` +
|
|
(detail?.SellPrice || '10.0')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'13mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'100mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="grid100x13_1cross">
|
|
<div className="Sticker6 bg-white">
|
|
<div className={`text-section6`}>
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName || 'Product Name'} (
|
|
{size || '1 PCS'})
|
|
</p>
|
|
<p>{ProdId || 'QR0970970'}</p>
|
|
</div>
|
|
<img
|
|
src={qrCodeImage}
|
|
style={{
|
|
width: '11mm',
|
|
height: '11mm',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'13mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'100mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
case '100X15 (70MM Printable)':
|
|
return templateAvailable ? (
|
|
!(
|
|
productName ||
|
|
sellingPrice ||
|
|
barcode ||
|
|
qrcode ||
|
|
mrp
|
|
) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div
|
|
className="BarQrprint1"
|
|
style={valueStyleRow}
|
|
>
|
|
<div className="BarQrprint1details flexDirection">
|
|
{productName && (
|
|
<div
|
|
style={{ textAlign: 'left' }}
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{mrp && (
|
|
<div className="MRPBQ">
|
|
{'MRP : ' + (detail?.MRP || '10.0')}
|
|
</div>
|
|
)}
|
|
{sellingPrice && (
|
|
<div className="SellingpriceBQ">
|
|
{`Selling Price : ` +
|
|
(detail?.SellPrice || '10.0')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="Qrcodeimage">
|
|
{(barcode || qrcode) &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 90 : 40,
|
|
null,
|
|
barcodeOrQr
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'15mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'100mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="grid100x15_1cross">
|
|
<div className="Sticker7 bg-white">
|
|
<div className="text-section7">
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName || 'Product Name'} (
|
|
{size || '1 PCS'})
|
|
</p>
|
|
<p>{ProdId || 'QR858755'}</p>
|
|
</div>
|
|
<img
|
|
src={qrCodeImage}
|
|
style={{
|
|
width: '12mm',
|
|
height: '12mm',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'15mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'100mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
case '100X150':
|
|
return templateAvailable ? (
|
|
!(
|
|
productName ||
|
|
sellingPrice ||
|
|
mDate ||
|
|
eDate ||
|
|
color ||
|
|
barcode ||
|
|
qrcode ||
|
|
mrp
|
|
) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div
|
|
className="BarQrprint7"
|
|
style={secondValueStyle}
|
|
>
|
|
<div className="BarQrprint1details1">
|
|
{productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{sellingPrice && (
|
|
<div className="SellingpriceBQ">
|
|
{`Selling Price : ` +
|
|
detail?.SellPrice}
|
|
</div>
|
|
)}
|
|
{mDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]
|
|
?.ManufDate && (
|
|
<div className="MandateBQ">
|
|
{formatDate(
|
|
detail
|
|
?.ProdVariantPriceDetails?.[0]
|
|
?.ManufDate
|
|
)}
|
|
</div>
|
|
)}
|
|
{eDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]
|
|
?.ExpDate && (
|
|
<div className="ExpdateBQ">
|
|
{formatDate(
|
|
detail
|
|
?.ProdVariantPriceDetails?.[0]
|
|
?.ExpDate
|
|
)}
|
|
</div>
|
|
)}
|
|
{color && (
|
|
<div className="ColorBQ">
|
|
{colorText}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage"
|
|
style={valueStyleColumn}
|
|
>
|
|
{(barcode || qrcode) &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 140 : 35,
|
|
35,
|
|
barcodeOrQr
|
|
)}
|
|
{mrp && (
|
|
<div className="MRPBQ">
|
|
{'MRP : ' + (detail?.MRP || '10.0')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'150mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'100mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="grid100x150_1cross bg-white">
|
|
<div className="OverAllSticker8">
|
|
<div className="StikerBr8">
|
|
<p>{detail?.BrName}</p>
|
|
</div>
|
|
<div className="Sticker8">
|
|
<div className="text-section8">
|
|
<p>
|
|
Product Name:{' '}
|
|
<p
|
|
className={`field-value ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</p>
|
|
</p>
|
|
<p>
|
|
SIZE:{' '}
|
|
<span className="field-value">
|
|
{size || '1 PCS'}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
Id:{' '}
|
|
<span className="field-value">
|
|
{ProdId || 'QR86868'}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
MRP:{' '}
|
|
<span className="field-value">
|
|
{'MRP : ' + (detail?.MRP || '10.0')}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
Selling Price:{' '}
|
|
<span className="field-value">
|
|
{detail?.SellPrice || '10.0'}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<img
|
|
src={qrCodeImage}
|
|
style={{
|
|
width: '50mm',
|
|
height: '50mm',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'150mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'100mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
default:
|
|
return <Empty />;
|
|
}
|
|
})()}
|
|
<p>{dropdownValue}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Form.Item>
|
|
{!MultiCode && (
|
|
<Form.Item
|
|
name="Copies"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
pattern: /^[1-9]\d*(\.\d+)?$/,
|
|
message: 'Please Enter Copies',
|
|
},
|
|
{
|
|
validator: async (_, value) => {
|
|
await validateSafeInput(value);
|
|
return Promise.resolve();
|
|
},
|
|
},
|
|
]}
|
|
>
|
|
<InputField
|
|
autoComplete="off"
|
|
label={<label className="required">Copies</label>}
|
|
isOnChange={false}
|
|
onChange={(e) => {
|
|
CopiesOnChange(e?.target?.value);
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
)}
|
|
{proName?.length > 12 && printProductName && !MultiCode && (
|
|
<>
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
fontSize: '12px',
|
|
marginTop: '-10px',
|
|
fontFamily: 'Poppins',
|
|
fontStyle: 'italic',
|
|
color: '#ff4d4f',
|
|
}}
|
|
>
|
|
Note: Product name is very long. Please add a short/nick name
|
|
to proceed print.
|
|
</div>
|
|
<Form.Item
|
|
name="NickName"
|
|
rules={[
|
|
{
|
|
message: 'Please Enter Product Short / Nick Name',
|
|
},
|
|
{
|
|
max: 12,
|
|
message:
|
|
'Product Short / Nick Name cannot be greater than 12 characters',
|
|
},
|
|
]}
|
|
>
|
|
<InputField
|
|
autoComplete="off"
|
|
label={`Product Short / Nick Name`}
|
|
onChange={(e) => {
|
|
setNickName(e?.target?.value);
|
|
}}
|
|
maxLength={12}
|
|
/>
|
|
</Form.Item>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
justifyContent: 'flex-end',
|
|
}}
|
|
>
|
|
{(!MultiCode || totalCopies > 0) && (
|
|
<Buttons buttonText="Submit" color="901D77" />
|
|
)}
|
|
{MultiCode && totalCopies === 0 && (
|
|
<button
|
|
type="button"
|
|
className="product_primary_Button"
|
|
onClick={() => setstockWiseQrcode(true)}
|
|
>
|
|
Submit
|
|
</button>
|
|
)}
|
|
</div>
|
|
</Form>
|
|
}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default StickerPrintModel;
|