added Offer catelogue
This commit is contained in:
Srinath
parent
b592923f5f
commit
d94188656e
|
|
@ -1,426 +1,51 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { printDiv, getSession } from '../../Services/Others';
|
||||
import shopico from '../../Images/Assets/shop.png';
|
||||
|
||||
import {
|
||||
GlobalCataloguedata,
|
||||
Branchname,
|
||||
} from '../../Features/ProductCatlog/ProductCatlogue';
|
||||
import Footerimg from '../../Images/cate-f.png';
|
||||
import { GlobalCataloguedata, Branchname } from '../../Features/ProductCatlog/ProductCatlogue';
|
||||
import best from '../../Images/Assets/Cateloge3HeaderImage.svg';
|
||||
import '../../Styles/ProductCatalogue/CatalogueTemplate3.scss';
|
||||
// import "../../Fonts/OtherFonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf"
|
||||
import { FaPhoneVolume } from 'react-icons/fa';
|
||||
import { FaLocationDot } from 'react-icons/fa6';
|
||||
import { getSession } from '../../Services/Others';
|
||||
|
||||
const CatelogueTemplate5 = () => {
|
||||
const CatelogueTemplate3 = () => {
|
||||
const dispatch = useDispatch();
|
||||
const BrId = getSession('BranchId');
|
||||
const Globalcataloguedata1 = useSelector(GlobalCataloguedata);
|
||||
const [Branchdatas, setBranchdatas] = useState();
|
||||
const [base64Image, setBase64Image] = useState(null);
|
||||
|
||||
const printDocument = () => {
|
||||
window.print();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
Branchdata();
|
||||
}, []);
|
||||
|
||||
const Branchdata = async () => {
|
||||
let data = { BrId: BrId };
|
||||
|
||||
const response = await dispatch(Branchname(data)).unwrap();
|
||||
if (response?.data?.statusCode == 1) {
|
||||
const response = await dispatch(Branchname({ BrId })).unwrap();
|
||||
if (response?.data?.statusCode === 1) {
|
||||
setBranchdatas(response?.data?.data);
|
||||
}
|
||||
};
|
||||
Branchdata();
|
||||
}, [BrId, dispatch]);
|
||||
|
||||
function safeRound(amountStr) {
|
||||
const safeRound = (amountStr) => {
|
||||
if (amountStr == null) return '0.00';
|
||||
|
||||
const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
|
||||
const num = Number(cleaned);
|
||||
|
||||
return isNaN(num) ? '0.00' : num.toFixed(2); // return as string with 2 decimals
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchImage() {
|
||||
try {
|
||||
const base64 = await imageUrlToBase64(Branchdatas?.[0]?.CompLogo);
|
||||
setBase64Image(base64);
|
||||
} catch (error) {
|
||||
console.log('Error converting image', error.message);
|
||||
}
|
||||
}
|
||||
if (Branchdatas?.[0]?.CompLogo) {
|
||||
fetchImage();
|
||||
}
|
||||
}, [Branchdatas?.[0]?.CompLogo]);
|
||||
|
||||
const imageUrlToBase64 = async (url) => {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const blob = await response.blob();
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => resolve(reader.result);
|
||||
reader.onerror = reject;
|
||||
reader.readAsDataURL(blob);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error fetching or converting image:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const style = `<style>
|
||||
|
||||
|
||||
|
||||
|
||||
.CatelogueTemp3-MasterDiv {
|
||||
font-family: 'Inconsolata', monospace;
|
||||
width: inherit;
|
||||
background: radial-gradient(circle at center, #1A0001, #320000);
|
||||
}
|
||||
|
||||
.headerFooterStyle {
|
||||
display: block;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
background-color: #f0f0f0;
|
||||
font-size: 14px;
|
||||
};
|
||||
|
||||
.CatelogueTemp3-MasterDiv .page-header, .page-header-space {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.CatelogueTemp3-MasterDiv .page-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
border-top: #1292EE solid 1px;
|
||||
width: inherit;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.CatelogueTemp3-MasterDiv .page-header {
|
||||
position: fixed;
|
||||
top: 0mm;
|
||||
width: inherit;
|
||||
border-bottom: #1292EE solid 1px;
|
||||
color: #ffffff;
|
||||
background-image: radial-gradient(circle,);
|
||||
}
|
||||
.ItemCard{
|
||||
width: inherit;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.CatelogueTemp3-MasterDiv .img {
|
||||
height: 51px;
|
||||
left: 6px;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
width: 76px;
|
||||
}
|
||||
|
||||
.CatelogueTemp3-MasterDiv .img1 {
|
||||
height: 40px;
|
||||
left: 30px;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 71px;
|
||||
width: 47px;
|
||||
}
|
||||
|
||||
.CatelogueTemp3-MasterDiv .text-wrapper1 {
|
||||
color: black;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-size: 7px;
|
||||
font-weight: 800;
|
||||
left: 42px;
|
||||
letter-spacing: 0;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
top: 97px;
|
||||
}
|
||||
.CatelogueTemp3-MasterDiv .itemcardGroup {
|
||||
left: 1px;
|
||||
position: relative;
|
||||
top: 210px;
|
||||
width: 570px;
|
||||
height: inherit;
|
||||
border-radius: 17px;
|
||||
background-color: maroon;
|
||||
}
|
||||
|
||||
.itemcardGroup {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
column-gap: 0.5rem;
|
||||
row-gap: 0.5rem;
|
||||
padding: 1rem 0rem;
|
||||
}
|
||||
|
||||
.CatelogueTemp3-MasterDiv .div1 {
|
||||
background-color: maroon;
|
||||
overflow: scroll;
|
||||
position: relative;
|
||||
width: 595px;
|
||||
}
|
||||
|
||||
.CatelogueTemp3-MasterDiv .overlap-group {
|
||||
background-color: #ececec;
|
||||
border-radius: 19.5px;
|
||||
height: 104px;
|
||||
left: 7px;
|
||||
// position:relative
|
||||
width: 95px;
|
||||
}
|
||||
.CatelogueTemp3-MasterDiv .text-wrapper {
|
||||
color: white;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
left: 20px;
|
||||
letter-spacing: 0;
|
||||
line-height: normal;
|
||||
top: 80px;
|
||||
border-radius: 60px;
|
||||
height: 51px;
|
||||
width: 51px;
|
||||
background: red;
|
||||
text-align: right;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.textDesign {
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
font-family: "fantasy";
|
||||
font-size: 18px;
|
||||
width: 173px;
|
||||
transform: rotate(-15deg);
|
||||
text-transform: uppercase;
|
||||
text-shadow: 6px 6px 4px rgba(0, 0, 1, 0.5);
|
||||
}
|
||||
.CatelogueTemp3-MasterDiv .text-wrapper-4 {
|
||||
color: #000000;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-size: 8.1px;
|
||||
font-weight: 700;
|
||||
left: 12px;
|
||||
letter-spacing: 0;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
width: 84px;
|
||||
height: 34px;
|
||||
}
|
||||
.text-wrapper-10{
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
}
|
||||
.text-wrapper-12{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tableContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 30px;
|
||||
row-gap: 31px;
|
||||
}
|
||||
.Table {
|
||||
width: 712px;
|
||||
background-color: #8b181a;
|
||||
height: 100vh;
|
||||
border-radius: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>`;
|
||||
|
||||
const PrintA4 = async () => {
|
||||
await printDiv('CatelogueTemplate5', style);
|
||||
return isNaN(num) ? '0.00' : num.toFixed(2);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
id="CatLog3"
|
||||
style={{ display: 'flex', justifyContent: 'center', height: '100vh' }}
|
||||
>
|
||||
{/* <div
|
||||
className="CatelogueTemp3-MasterDiv1"
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{Branchdatas?.map((item) => (
|
||||
<div
|
||||
className="page-header1"
|
||||
style={{
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
backgroundColor: "maroon",
|
||||
height: "150px",
|
||||
border: "none",
|
||||
position: "fixed",
|
||||
top: "0",
|
||||
width: "inherit",
|
||||
}}
|
||||
>
|
||||
<div className="CatelogueTemp3Branchdetails1">
|
||||
<div className="group-61">
|
||||
<div
|
||||
style={{ fontSize: "20px", textAlign: "left",fontWeight: '700' }}
|
||||
>
|
||||
{item.BrName}
|
||||
</div>
|
||||
<div style={{ fontSize: "13.2px", fontWeight: '700' }}>
|
||||
<div style={{textAlign:'left'}}>{item.BrMobile}</div>
|
||||
<div style={{ textAlign: "left" }}>
|
||||
{item.Address1 != null && item.Address1 + ','}{item.City != null && item.City + ','}{item.Dist != null && item.Dist + ','}{item.State != null && item.State}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
className="imgCentre1"
|
||||
src={best}
|
||||
style={{ width: "170px" }}
|
||||
/>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '52px',
|
||||
fontFamily: "fantasy",
|
||||
fontSize: '18px',
|
||||
width: '173px',
|
||||
transform: 'rotate(-15deg)',
|
||||
textTransform: 'uppercase',
|
||||
textShadow: '6px 6px 4px rgba(0, 0, 1, 0.5)'
|
||||
}}>BEST DEALS</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<table
|
||||
className="CatelogueTemp3-MasterDiv1"
|
||||
style={{ width: '100%', height: "100vh", backgroundColor: "maroon" }}
|
||||
>
|
||||
<thead style={{ width: '100%', height: "150px" }}>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="page-header-space1"> </div>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody style={{ width: '100%', display: "flex" }}>
|
||||
<tr>
|
||||
<td style={{ width: "100%", padding: "0rem 1rem" }}>
|
||||
<div
|
||||
className="page1"
|
||||
style={{ lineHeight: "1", width: "inherit", display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '1rem 0rem' }}
|
||||
>
|
||||
<br />
|
||||
|
||||
<table className="CatelogueTemp3Table1">
|
||||
<tbody>
|
||||
<div className="CatelogueTemp3tableBody1">
|
||||
{Globalcataloguedata1?.map((item) => (
|
||||
<div className="overlap-group1">
|
||||
<div className="overlap-21">
|
||||
<img
|
||||
className="img1"
|
||||
src={item?.ProdLogo}
|
||||
alt=''
|
||||
/>
|
||||
</div>
|
||||
<div className="text-wrapper-41">
|
||||
{item?.ProdName} {item?.UomName}
|
||||
</div>
|
||||
<div className="text-wrapper1" >
|
||||
<span style={{ fontSize: '10px' }}>₹</span>
|
||||
<span>{item?.SellPrice}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div> */}
|
||||
|
||||
<div
|
||||
onClick={PrintA4}
|
||||
style={{
|
||||
width: '100%',
|
||||
backgroundColor: '#310000',
|
||||
fontFamily: 'Montserrat,sans-serif',
|
||||
height: 'auto',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
borderBottom: '#fff',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
backgroundColor: '#800000',
|
||||
color: '#fff',
|
||||
}}
|
||||
>
|
||||
{Branchdatas?.map((item) => (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
zIndex: '2',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
padding: '0rem 1rem',
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: 'left' }}>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: 'Montserrat,sans-serif',
|
||||
fontSize: '22px',
|
||||
fontWeight: '600',
|
||||
}}
|
||||
>
|
||||
{item.BrName}
|
||||
</div>
|
||||
{/* <div style={{ fontSize: '16px' }}> <FaPhoneVolume /> {item.BrMobile}</div> */}
|
||||
<div id="CatLog3" className="catlog3">
|
||||
<div className="catlog-container">
|
||||
{/* Branch Header */}
|
||||
<div className="branch-header">
|
||||
{Branchdatas?.map((item, index) => (
|
||||
<div className="branch-item" key={index}>
|
||||
<div className="branch-info">
|
||||
<div className="branch-name">{item.BrName}</div>
|
||||
{item.BrMobile && (
|
||||
<div style={{ fontSize: '16px' }}>
|
||||
<div className="branch-mobile">
|
||||
<FaPhoneVolume /> {item.BrMobile}
|
||||
</div>
|
||||
)}
|
||||
<div style={{ fontSize: '12px' }}>
|
||||
{/* <FaLocationDot /> {item.Address1 != null && item.Address1 + ','}{item.City != null && item.City + ','}{item.Dist != null && item.Dist + ','}{item.State != null && item.State} */}
|
||||
{(item.Address1 ||
|
||||
item.City ||
|
||||
item.Dist ||
|
||||
item.State) && (
|
||||
<div>
|
||||
{(item.Address1 || item.City || item.Dist || item.State) && (
|
||||
<div className="branch-address">
|
||||
<FaLocationDot />
|
||||
{item.Address1 && item.Address1 + ', '}
|
||||
{item.City && item.City + ', '}
|
||||
|
|
@ -429,167 +54,35 @@ const CatelogueTemplate5 = () => {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
className=""
|
||||
style={{ width: '170px', position: 'relative' }}
|
||||
src={best}
|
||||
/>
|
||||
<img className="branch-logo" src={best} alt="logo" />
|
||||
|
||||
<a
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
fontFamily: 'Montserrat,sans-serif',
|
||||
fontSize: '26px',
|
||||
width: '173px',
|
||||
fontWeight: '700',
|
||||
transform: 'rotate(-10deg)',
|
||||
textTransform: 'uppercase',
|
||||
textShadow: '6px 6px 4px rgba(0, 0, 1, 0.5)',
|
||||
}}
|
||||
>
|
||||
<div className="fresh-deals">
|
||||
FRESH <br /> DEALS
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* <div className="page-footer" style={{backgroundColor:'#800000', color:'#fff'}}>
|
||||
<div className=' '>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
|
||||
<p style={{ marginLeft: '2rem', fontSize: '16px', fontWeight: '700' }}>{Branchdatas?.[0]?.BrName}</p>
|
||||
{/* Catalogue Grid */}
|
||||
<div className="catalogue-grid-wrapper">
|
||||
{Globalcataloguedata1?.map((item, index) => (
|
||||
<div className="catalogue-item" key={index}>
|
||||
<div className="product-name">
|
||||
{item?.ProdName} {item?.UomName}
|
||||
</div>
|
||||
|
||||
{item?.ProdLogo && (
|
||||
<img className="product-logo" src={item?.ProdLogo} alt={item?.ProdName} />
|
||||
)}
|
||||
|
||||
<div className='CTemplate5Fotterinfo' >
|
||||
|
||||
<div className='CTemplate5Fotterphone'>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', fontSize: '9px' }}>
|
||||
<div>FREE HOME</div>
|
||||
<div>DELEVERY</div>
|
||||
<div className="product-price">₹{safeRound(item?.SellPrice)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<table className="" style={{ width: '100%' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<td style={{ width: '100%' }}>
|
||||
<div
|
||||
className=""
|
||||
style={{ height: '20px', backgroundColor: '#310000' }}
|
||||
>
|
||||
{' '}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: '100%' }}>
|
||||
<div style={{ lineHeight: '1.5', padding: '0rem 0.5rem' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns:
|
||||
'repeat(auto-fit, minmax(100px, 1fr))',
|
||||
gridAutoRows: '123px',
|
||||
justifyContent: 'center',
|
||||
gap: '0.3rem',
|
||||
backgroundColor: '#800000',
|
||||
padding: '0.1rem 0.1rem',
|
||||
}}
|
||||
>
|
||||
{Globalcataloguedata1?.map((item) => (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
width: '100px',
|
||||
maxWidth: '100px',
|
||||
height: '110px',
|
||||
padding: '5px',
|
||||
maxHeight: '140px',
|
||||
backgroundColor: '#fff',
|
||||
justifyContent: 'space-evenly',
|
||||
borderRadius: '16px',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<a
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
textAlign: 'center',
|
||||
fontFamily: 'Montserrat,sans-serif',
|
||||
}}
|
||||
>
|
||||
{item?.ProdName} {item?.UomName}{' '}
|
||||
</a>
|
||||
|
||||
<div>
|
||||
<img
|
||||
// className="Cateimg"
|
||||
style={{
|
||||
width: '50px',
|
||||
objectFit: 'cover',
|
||||
height: '40px',
|
||||
}}
|
||||
src={item?.ProdLogo}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<a
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
position: 'absolute',
|
||||
bottom: '5px',
|
||||
right: '5px',
|
||||
minWidth: '35px',
|
||||
width: 'max-content',
|
||||
height: '35px',
|
||||
backgroundColor: 'red',
|
||||
borderRadius: '20px',
|
||||
color: '#fff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '0rem 0.3rem',
|
||||
}}
|
||||
>
|
||||
₹{safeRound(item?.SellPrice)}
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>
|
||||
<div style={{ height: '80px' }}></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CatelogueTemplate5;
|
||||
export default CatelogueTemplate3;
|
||||
|
|
|
|||
Loading…
Reference in New Issue