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 { getSession } from '../../Services/Others';
|
||||
import Headerimg from '../../Images/cate-h.png';
|
||||
import { FaLocationDot } from 'react-icons/fa6';
|
||||
import { FaWhatsapp } from 'react-icons/fa';
|
||||
import {
|
||||
GlobalCataloguedata,
|
||||
Branchname,
|
||||
|
|
@ -15,7 +13,9 @@ const CatalogueTemplate4 = (props) => {
|
|||
const BrId = getSession('BranchId');
|
||||
const Globalcataloguedata1 = useSelector(GlobalCataloguedata);
|
||||
const [Branchdatas, setBranchdatas] = useState();
|
||||
const [base64Image, setBase64Image] = useState(null);
|
||||
console.log(Branchdatas, 'BranchdatasBranchdatas');
|
||||
|
||||
const ITEMS_PER_PAGE = 25; // 5x5 grid
|
||||
|
||||
useEffect(() => {
|
||||
Branchdata();
|
||||
|
|
@ -31,239 +31,123 @@ const CatalogueTemplate4 = (props) => {
|
|||
|
||||
function 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
|
||||
return isNaN(num) ? '0.00' : num.toFixed(2);
|
||||
}
|
||||
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;
|
||||
// Split products into pages of 25 items each
|
||||
const paginateProducts = (products) => {
|
||||
const pages = [];
|
||||
for (let i = 0; i < products.length; i += ITEMS_PER_PAGE) {
|
||||
pages.push(products.slice(i, i + ITEMS_PER_PAGE));
|
||||
}
|
||||
return pages;
|
||||
};
|
||||
const pages = paginateProducts(Globalcataloguedata1 || []);
|
||||
console.log(pages, 'pages574754783');
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="CTemplate4MasterDiv" id="CatLog4">
|
||||
{/* Header Section */}
|
||||
<div
|
||||
className="page-header"
|
||||
style={{
|
||||
width: '100%',
|
||||
backgroundColor: '#1b2570',
|
||||
padding: '1rem',
|
||||
textAlign: 'center',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{Branchdatas?.map((item) => (
|
||||
<div
|
||||
key={item?.BrId}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '1rem',
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
// Header Component
|
||||
const PageHeader = () => (
|
||||
<div className="page-header">
|
||||
<img src={Headerimg} alt="Header" className="header-image" />
|
||||
{props?.cat === 'Catalogue 4' && (
|
||||
<div className="header-offer-text">
|
||||
{/* FLAT <span className="offer-percentage">SPECIAL SAVINGS</span> OFF */}
|
||||
<span className="offer-percentagea">SPECIAL SAVINGS</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
// Footer Component
|
||||
const PageFooter = () => (
|
||||
<div className="page-footer">
|
||||
<div className="footer-content">
|
||||
<p className="footer-branch-name">{Branchdatas?.[0]?.BrName}</p>
|
||||
<div className="footer-info-container">
|
||||
{Branchdatas?.[0]?.Address1 && (
|
||||
<div className="footer-address">
|
||||
{Branchdatas?.[0]?.Address1}, {Branchdatas?.[0]?.Dist},{' '}
|
||||
{Branchdatas?.[0]?.State}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content Section */}
|
||||
<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>
|
||||
)}
|
||||
{/* {Branchdatas?.[0]?.BrMobile && (
|
||||
<div className="footer-phone">
|
||||
FREE HOME DELIVERY: {Branchdatas?.[0]?.BrMobile}
|
||||
</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