Addes style and offter amt
This commit is contained in:
Srinath
parent
6506ce3622
commit
438ec6d757
|
|
@ -2,8 +2,6 @@ import React, { useEffect, useState } from 'react';
|
||||||
import { useSelector, useDispatch } from 'react-redux';
|
import { useSelector, useDispatch } from 'react-redux';
|
||||||
import { getSession } from '../../Services/Others';
|
import { getSession } from '../../Services/Others';
|
||||||
import Headerimg from '../../Images/cate-h.png';
|
import Headerimg from '../../Images/cate-h.png';
|
||||||
import { FaLocationDot } from 'react-icons/fa6';
|
|
||||||
import { FaWhatsapp } from 'react-icons/fa';
|
|
||||||
import {
|
import {
|
||||||
GlobalCataloguedata,
|
GlobalCataloguedata,
|
||||||
Branchname,
|
Branchname,
|
||||||
|
|
@ -15,7 +13,9 @@ const CatalogueTemplate4 = (props) => {
|
||||||
const BrId = getSession('BranchId');
|
const BrId = getSession('BranchId');
|
||||||
const Globalcataloguedata1 = useSelector(GlobalCataloguedata);
|
const Globalcataloguedata1 = useSelector(GlobalCataloguedata);
|
||||||
const [Branchdatas, setBranchdatas] = useState();
|
const [Branchdatas, setBranchdatas] = useState();
|
||||||
const [base64Image, setBase64Image] = useState(null);
|
console.log(Branchdatas, 'BranchdatasBranchdatas');
|
||||||
|
|
||||||
|
const ITEMS_PER_PAGE = 25; // 5x5 grid
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
Branchdata();
|
Branchdata();
|
||||||
|
|
@ -31,239 +31,123 @@ const CatalogueTemplate4 = (props) => {
|
||||||
|
|
||||||
function safeRound(amountStr) {
|
function safeRound(amountStr) {
|
||||||
if (amountStr == null) return '0.00';
|
if (amountStr == null) return '0.00';
|
||||||
|
|
||||||
const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
|
const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
|
||||||
const num = Number(cleaned);
|
const num = Number(cleaned);
|
||||||
|
return isNaN(num) ? '0.00' : num.toFixed(2);
|
||||||
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) => {
|
// Split products into pages of 25 items each
|
||||||
try {
|
const paginateProducts = (products) => {
|
||||||
const response = await fetch(url);
|
const pages = [];
|
||||||
const blob = await response.blob();
|
for (let i = 0; i < products.length; i += ITEMS_PER_PAGE) {
|
||||||
return new Promise((resolve, reject) => {
|
pages.push(products.slice(i, i + ITEMS_PER_PAGE));
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
return pages;
|
||||||
};
|
};
|
||||||
|
const pages = paginateProducts(Globalcataloguedata1 || []);
|
||||||
|
console.log(pages, 'pages574754783');
|
||||||
|
|
||||||
return (
|
// Header Component
|
||||||
<>
|
const PageHeader = () => (
|
||||||
<div className="CTemplate4MasterDiv" id="CatLog4">
|
<div className="page-header">
|
||||||
{/* Header Section */}
|
<img src={Headerimg} alt="Header" className="header-image" />
|
||||||
<div
|
{props?.cat === 'Catalogue 4' && (
|
||||||
className="page-header"
|
<div className="header-offer-text">
|
||||||
style={{
|
{/* FLAT <span className="offer-percentage">SPECIAL SAVINGS</span> OFF */}
|
||||||
width: '100%',
|
<span className="offer-percentagea">SPECIAL SAVINGS</span>
|
||||||
backgroundColor: '#1b2570',
|
</div>
|
||||||
padding: '1rem',
|
)}
|
||||||
textAlign: 'center',
|
</div>
|
||||||
position: 'relative',
|
);
|
||||||
}}
|
|
||||||
>
|
// Footer Component
|
||||||
{Branchdatas?.map((item) => (
|
const PageFooter = () => (
|
||||||
<div
|
<div className="page-footer">
|
||||||
key={item?.BrId}
|
<div className="footer-content">
|
||||||
style={{
|
<p className="footer-branch-name">{Branchdatas?.[0]?.BrName}</p>
|
||||||
display: 'flex',
|
<div className="footer-info-container">
|
||||||
alignItems: 'center',
|
{Branchdatas?.[0]?.Address1 && (
|
||||||
justifyContent: 'center',
|
<div className="footer-address">
|
||||||
gap: '1rem',
|
{Branchdatas?.[0]?.Address1}, {Branchdatas?.[0]?.Dist},{' '}
|
||||||
}}
|
{Branchdatas?.[0]?.State}
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={Headerimg}
|
|
||||||
style={{ width: '100%', height: 'auto' }}
|
|
||||||
alt="Header"
|
|
||||||
/>
|
|
||||||
{props?.cat === 'Catalogue 4' && (
|
|
||||||
<div
|
|
||||||
className="CTemplate4HeaderText2"
|
|
||||||
style={{
|
|
||||||
color: '#fce400',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '600',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
FLAT <span className="CTemplate4persent">50%</span> OFF
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
)}
|
||||||
</div>
|
{/* {Branchdatas?.[0]?.BrMobile && (
|
||||||
|
<div className="footer-phone">
|
||||||
{/* Content Section */}
|
FREE HOME DELIVERY: {Branchdatas?.[0]?.BrMobile}
|
||||||
<div
|
</div>
|
||||||
className="content-section"
|
)} */}
|
||||||
style={{ padding: '2rem', minHeight: '75vh' }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="container-main"
|
|
||||||
style={{
|
|
||||||
display: 'grid',
|
|
||||||
gridTemplateColumns: 'repeat(5, 1fr)',
|
|
||||||
gridAutoRows: '140px',
|
|
||||||
justifyContent: 'center',
|
|
||||||
gap: '1.8rem',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{Globalcataloguedata1?.map((item) => (
|
|
||||||
<div
|
|
||||||
key={item?.ProdName}
|
|
||||||
style={{
|
|
||||||
position: 'relative',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
width: '100px',
|
|
||||||
maxWidth: '100px',
|
|
||||||
height: '140px',
|
|
||||||
backgroundColor: '#fff',
|
|
||||||
justifyContent: 'center',
|
|
||||||
borderRadius: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={item?.ProdLogo}
|
|
||||||
style={{ width: '50px', height: '40px', objectFit: 'cover' }}
|
|
||||||
alt={item?.ProdName}
|
|
||||||
/>
|
|
||||||
<a
|
|
||||||
style={{
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '600',
|
|
||||||
textAlign: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{item?.ProdName} {item?.UomName}
|
|
||||||
</a>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'yellow',
|
|
||||||
width: '100%',
|
|
||||||
height: '2rem',
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: '0px',
|
|
||||||
borderRadius: '0 0px 8px 8px',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: '12px', fontWeight: '500' }}>
|
|
||||||
{props?.cat === 'Catalogue 4' &&
|
|
||||||
`MRP:₹${safeRound(item?.SellPrice)}`}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
borderRadius: '50%',
|
|
||||||
backgroundColor: 'red',
|
|
||||||
padding: '3px',
|
|
||||||
width: '3rem',
|
|
||||||
height: '3rem',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
position: 'absolute',
|
|
||||||
top: '-7px',
|
|
||||||
right: '-7px',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
fontSize: props?.cat === 'Catalogue 6' ? '12px' : '10px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: '#fff',
|
|
||||||
textAlign: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{props?.cat === 'Catalogue 6'
|
|
||||||
? ` ₹${safeRound(item?.SellPrice)} only`
|
|
||||||
: '15% off on MRP'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer Section */}
|
|
||||||
<div
|
|
||||||
className="page-footer"
|
|
||||||
style={{
|
|
||||||
width: '100%',
|
|
||||||
backgroundColor: '#fff',
|
|
||||||
borderTop: '1px solid #1292EE',
|
|
||||||
padding: '1rem',
|
|
||||||
position: 'relative',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: '16px', fontWeight: '700', color: '#fff' }}>
|
|
||||||
{Branchdatas?.[0]?.BrName}
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
gap: '1rem',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'flex-end',
|
|
||||||
width: '96%',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{Branchdatas?.[0]?.Address1 && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '9px',
|
|
||||||
backgroundColor: '#252a69',
|
|
||||||
color: '#fff',
|
|
||||||
padding: '0.5rem',
|
|
||||||
textAlign: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{Branchdatas?.[0]?.Address1}, {Branchdatas?.[0]?.Dist},{' '}
|
|
||||||
{Branchdatas?.[0]?.State}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{Branchdatas?.[0]?.BrMobile && (
|
|
||||||
<div
|
|
||||||
className="CTemplate5Fotterphone"
|
|
||||||
style={{
|
|
||||||
fontSize: '9px',
|
|
||||||
backgroundColor: '#252a69',
|
|
||||||
color: '#fff',
|
|
||||||
padding: '0.5rem',
|
|
||||||
textAlign: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
FREE HOME DELIVERY: {Branchdatas?.[0]?.BrMobile}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Product Card Component
|
||||||
|
const getOfferText = (item, cat) => {
|
||||||
|
if (cat === 'Catalogue 6') {
|
||||||
|
return `₹${safeRound(item.SellPrice)} only`;
|
||||||
|
}
|
||||||
|
const offer = item?.OfferDtl?.[0];
|
||||||
|
if (!offer) return null;
|
||||||
|
|
||||||
|
if (offer.OfferName === 'Product offer') {
|
||||||
|
if (offer.ValueType === 'P') {
|
||||||
|
return `${offer.OfferAmt}% OFF`;
|
||||||
|
}
|
||||||
|
if (offer.ValueType === 'F') {
|
||||||
|
return `₹${offer.OfferAmt} OFF`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return offer.OfferName;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ProductCard = ({ item }) => (
|
||||||
|
<div className="product-card">
|
||||||
|
<img
|
||||||
|
src={item?.ProdLogo}
|
||||||
|
alt={item?.ProdName}
|
||||||
|
className="product-image"
|
||||||
|
/>
|
||||||
|
<div className="product-name">
|
||||||
|
{item?.ProdName} {item?.UomName}
|
||||||
|
</div>
|
||||||
|
<div className="product-price">
|
||||||
|
{props?.cat === 'Catalogue 4'
|
||||||
|
? `MRP: ₹${safeRound(item?.SellPrice)}`
|
||||||
|
: item?.OfferDtl?.[0]?.OfferName ? (
|
||||||
|
<div className="product-original-price">{item?.OfferDtl?.[0]?.OfferName}</div>) : 'No Offer'
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
{(
|
||||||
|
props?.cat === 'Catalogue 6' ||
|
||||||
|
item?.OfferDtl?.length > 0
|
||||||
|
) && (
|
||||||
|
<div className="product-offer">
|
||||||
|
{getOfferText(item, props?.cat)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="catalogue-template-4" id="CatLog4">
|
||||||
|
{pages.map((pageProducts, pageIndex) => (
|
||||||
|
<div key={pageIndex} className="catalogue-page">
|
||||||
|
<PageHeader />
|
||||||
|
<div className="content-section-4">
|
||||||
|
<div className="product-grid">
|
||||||
|
{pageProducts.map((item, index) => (
|
||||||
|
<ProductCard key={index} item={item} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<PageFooter />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default CatalogueTemplate4;
|
export default CatalogueTemplate4;
|
||||||
Loading…
Reference in New Issue