tee3apps-cms-sdk-react 0.0.33 → 0.0.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3 -3
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/Page.tsx +89 -69
- package/src/PageComponents/Visual-Components/CarouselComponent.tsx +39 -31
- package/src/PageComponents/Visual-Components/GroupBrandComponent.tsx +176 -163
- package/src/PageComponents/Visual-Components/GroupCategoryComponent.tsx +235 -222
- package/src/PageComponents/Visual-Components/GroupImageList.tsx +216 -203
- package/src/PageComponents/Visual-Components/GroupProductComponent.tsx +107 -32
- package/src/PageComponents/Visual-Components/GroupVideoList.tsx +207 -215
- package/src/PageComponents/Visual-Components/Styles/ProductListViewOne.tsx +59 -38
- package/src/PageComponents/Visual-Components/Styles/ProductListViewTwo.tsx +63 -36
- package/src/PageComponents/Visual-Components/TabComponent.tsx +1541 -1529
- package/src/PageComponents/Visual-Components/TextComponent.tsx +2 -3
|
@@ -76,13 +76,17 @@ const ProductListViewOne = (props: any) => {
|
|
|
76
76
|
const data = props.props || props;
|
|
77
77
|
const slug = data?.code; // Using code instead of slug
|
|
78
78
|
|
|
79
|
+
const resolvePrice = (priceData: any): number => {
|
|
80
|
+
if (!priceData) return 0;
|
|
81
|
+
if (Array.isArray(priceData)) {
|
|
82
|
+
return getPriceFromPricingArray(priceData);
|
|
83
|
+
}
|
|
84
|
+
return getPriceValue(priceData);
|
|
85
|
+
};
|
|
86
|
+
|
|
79
87
|
// Updated price extraction to use pricing object only - same logic as GroupProductComponent
|
|
80
|
-
const mrpPrice = data.pricing?.mrp
|
|
81
|
-
const finalSellingPrice = data.pricing?.
|
|
82
|
-
? getPriceFromPricingArray(data.pricing.nlcPrice)
|
|
83
|
-
: data.pricing?.costPrice
|
|
84
|
-
? getPriceFromPricingArray(data.pricing.costPrice)
|
|
85
|
-
: 0;
|
|
88
|
+
const mrpPrice = resolvePrice(data.pricing?.mrp);
|
|
89
|
+
const finalSellingPrice = resolvePrice(data.pricing?.costPrice);
|
|
86
90
|
|
|
87
91
|
const calculateDiscount = (): number | null => {
|
|
88
92
|
if (!finalSellingPrice || !mrpPrice || mrpPrice <= finalSellingPrice) return null;
|
|
@@ -104,9 +108,42 @@ const ProductListViewOne = (props: any) => {
|
|
|
104
108
|
const cardColor = props.cardColor;
|
|
105
109
|
|
|
106
110
|
return (
|
|
107
|
-
<div className="card" style={{
|
|
111
|
+
<div className="card" style={{
|
|
112
|
+
backgroundColor: cardColor,
|
|
113
|
+
position: 'relative',
|
|
114
|
+
width: props.layout === 'NONE' ? '400px' : '100%',
|
|
115
|
+
minWidth: props.layout === 'NONE' ? '400px' : 'unset',
|
|
116
|
+
maxWidth: props.layout === 'NONE' ? '420px' : '100%'
|
|
117
|
+
}}>
|
|
108
118
|
<a href={`/${slug}`} target={target}>
|
|
109
119
|
<div className="card_grid">
|
|
120
|
+
{(Number(data?.starrating) > 0 || Number(data?.startRatingCount) > 0) && (
|
|
121
|
+
<div className="review_counts" style={{
|
|
122
|
+
position: 'absolute',
|
|
123
|
+
top: '10px',
|
|
124
|
+
right: '10px',
|
|
125
|
+
zIndex: 2,
|
|
126
|
+
backgroundColor: 'rgba(255,255,255,0.8)',
|
|
127
|
+
padding: '4px 8px',
|
|
128
|
+
borderRadius: '20px',
|
|
129
|
+
display: 'flex',
|
|
130
|
+
alignItems: 'center',
|
|
131
|
+
gap: '3px',
|
|
132
|
+
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
|
|
133
|
+
}}>
|
|
134
|
+
<svg
|
|
135
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
136
|
+
viewBox="0 0 20 20"
|
|
137
|
+
fill="#f46b27"
|
|
138
|
+
width="12"
|
|
139
|
+
height="12"
|
|
140
|
+
>
|
|
141
|
+
<path d="M10 15l-5.878 3.09 1.122-6.545L.488 6.91l6.562-.955L10 0l2.95 5.955 6.562.955-4.756 4.635 1.122 6.545z" />
|
|
142
|
+
</svg>
|
|
143
|
+
<p style={{ margin: 0, fontSize: '11px', fontWeight: '600' }}>{data?.starrating}</p>
|
|
144
|
+
<span style={{ fontSize: '10px', color: '#666' }}>({data?.startRatingCount})</span>
|
|
145
|
+
</div>
|
|
146
|
+
)}
|
|
110
147
|
<div className="card_top">
|
|
111
148
|
<img
|
|
112
149
|
src={`${Linodeurl}${data?.image?.all?.url || data?.image?.url}`}
|
|
@@ -114,41 +151,25 @@ const ProductListViewOne = (props: any) => {
|
|
|
114
151
|
className="product_image"
|
|
115
152
|
/>
|
|
116
153
|
</div>
|
|
117
|
-
<div className="card_bottom">
|
|
118
|
-
<div className="cardname">
|
|
119
|
-
<h3>{data?.name?.all || data?.name}</h3>
|
|
120
|
-
<h5>{variantOptions}</h5>
|
|
154
|
+
<div className="card_bottom" style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '100%' }}>
|
|
155
|
+
<div className="cardname" style={{ textAlign: 'center', width: '100%' }}>
|
|
156
|
+
<h3 style={{ margin: '0 0 4px 0', fontSize: '15px' }}>{data?.name?.all || data?.name}</h3>
|
|
157
|
+
<h5 style={{ margin: 0, fontWeight: '400', color: '#666' }}>{variantOptions}</h5>
|
|
121
158
|
</div>
|
|
122
|
-
<div className="card_value">
|
|
123
|
-
{finalSellingPrice !== 0 && (
|
|
124
|
-
<div className="card_price">
|
|
125
|
-
<h4
|
|
126
|
-
|
|
127
|
-
{mrpPrice > finalSellingPrice && (
|
|
128
|
-
<
|
|
129
|
-
)}
|
|
130
|
-
{discount !== null && discount > 0 && (
|
|
131
|
-
<span>({discount}% OFF)</span>
|
|
159
|
+
<div className="card_value" style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
|
|
160
|
+
{props.showsp !== false && finalSellingPrice !== 0 && (
|
|
161
|
+
<div className="card_price" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
162
|
+
<h4 style={{ margin: 0, fontSize: '15px', fontWeight: '700', display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap', justifyContent: 'center' }}>
|
|
163
|
+
<span>SP: {finalSellingPrice.toLocaleString("en-IN")} (incl of all tax)</span>
|
|
164
|
+
{props.showdiscount !== false && mrpPrice > finalSellingPrice && (
|
|
165
|
+
<span style={{ fontSize: '12px', color: '#666', textDecoration: 'line-through', fontWeight: 'normal' }}>MRP: {mrpPrice.toLocaleString("en-IN")}</span>
|
|
132
166
|
)}
|
|
133
|
-
</
|
|
167
|
+
</h4>
|
|
168
|
+
{props.showdiscount !== false && mrpPrice > finalSellingPrice && discount !== null && discount > 0 && (
|
|
169
|
+
<span style={{ fontSize: '11px', color: '#555a56ff', fontWeight: 'bold' }}>({discount}% OFF)</span>
|
|
170
|
+
)}
|
|
134
171
|
</div>
|
|
135
172
|
)}
|
|
136
|
-
<div className="review_counts">
|
|
137
|
-
<svg
|
|
138
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
139
|
-
viewBox="0 0 20 20"
|
|
140
|
-
fill="#f46b27"
|
|
141
|
-
width="13"
|
|
142
|
-
height="13"
|
|
143
|
-
>
|
|
144
|
-
<path d="M10 15l-5.878 3.09 1.122-6.545L.488 6.91l6.562-.955L10 0l2.95 5.955 6.562.955-4.756 4.635 1.122 6.545z" />
|
|
145
|
-
</svg>
|
|
146
|
-
<p>{data?.starrating}</p>
|
|
147
|
-
<span>({data?.startRatingCount} Reviews)</span>
|
|
148
|
-
</div>
|
|
149
|
-
{/* {Number(data?.starrating) && Number(data?.startRatingCount) && (
|
|
150
|
-
|
|
151
|
-
)} */}
|
|
152
173
|
</div>
|
|
153
174
|
</div>
|
|
154
175
|
</div>
|
|
@@ -77,13 +77,17 @@ const ProductListViewTwo = (props: any) => {
|
|
|
77
77
|
const data = props.props || props;
|
|
78
78
|
const slug = data?.code; // Using code instead of slug since slug doesn't exist in your data
|
|
79
79
|
|
|
80
|
+
const resolvePrice = (priceData: any): number => {
|
|
81
|
+
if (!priceData) return 0;
|
|
82
|
+
if (Array.isArray(priceData)) {
|
|
83
|
+
return getPriceFromPricingArray(priceData);
|
|
84
|
+
}
|
|
85
|
+
return getPriceValue(priceData);
|
|
86
|
+
};
|
|
87
|
+
|
|
80
88
|
// Updated price extraction to use pricing object only - same logic as GroupProductComponent
|
|
81
|
-
const mrpPrice = data.pricing?.mrp
|
|
82
|
-
const finalSellingPrice = data.pricing?.
|
|
83
|
-
? getPriceFromPricingArray(data.pricing.nlcPrice)
|
|
84
|
-
: data.pricing?.costPrice
|
|
85
|
-
? getPriceFromPricingArray(data.pricing.costPrice)
|
|
86
|
-
: 0;
|
|
89
|
+
const mrpPrice = resolvePrice(data.pricing?.mrp);
|
|
90
|
+
const finalSellingPrice = resolvePrice(data.pricing?.costPrice);
|
|
87
91
|
|
|
88
92
|
const calculateDiscount = () => {
|
|
89
93
|
if (!finalSellingPrice || !mrpPrice || mrpPrice <= finalSellingPrice) return null;
|
|
@@ -106,10 +110,40 @@ const ProductListViewTwo = (props: any) => {
|
|
|
106
110
|
const cardColor = props.cardColor;
|
|
107
111
|
|
|
108
112
|
return (
|
|
109
|
-
<div className="card" style={{
|
|
113
|
+
<div className="card" style={{
|
|
114
|
+
backgroundColor: cardColor,
|
|
115
|
+
position: 'relative',
|
|
116
|
+
width: props.layout === 'NONE' ? '400px' : '100%',
|
|
117
|
+
minWidth: props.layout === 'NONE' ? '400px' : 'unset',
|
|
118
|
+
maxWidth: props.layout === 'NONE' ? '420px' : '100%'
|
|
119
|
+
}}>
|
|
110
120
|
<a href={`/${slug}`} target={target} rel="noopener noreferrer">
|
|
111
121
|
<div className="card_content">
|
|
112
|
-
|
|
122
|
+
{(Number(data?.starrating) > 0 || Number(data?.startRatingCount) > 0) && (
|
|
123
|
+
<div className="review_container" style={{
|
|
124
|
+
position: 'absolute',
|
|
125
|
+
top: '10px',
|
|
126
|
+
right: '10px',
|
|
127
|
+
zIndex: 2,
|
|
128
|
+
backgroundColor: 'rgba(255,255,255,0.8)',
|
|
129
|
+
padding: '4px 8px',
|
|
130
|
+
borderRadius: '20px',
|
|
131
|
+
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
|
|
132
|
+
}}>
|
|
133
|
+
<div className="rating" style={{ display: 'flex', alignItems: 'center', gap: '3px' }}>
|
|
134
|
+
<svg
|
|
135
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
136
|
+
viewBox="0 0 20 20"
|
|
137
|
+
width="12"
|
|
138
|
+
height="12"
|
|
139
|
+
fill="#f46b27"
|
|
140
|
+
>
|
|
141
|
+
<path d="M10 15l-5.878 3.09 1.122-6.545L.488 6.91l6.562-.955L10 0l2.95 5.955 6.562.955-4.756 4.635 1.122 6.545z" />
|
|
142
|
+
</svg>
|
|
143
|
+
<span className="rating_value" style={{ fontSize: '11px', fontWeight: '600' }}>{data?.starrating}</span>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
)}
|
|
113
147
|
|
|
114
148
|
<div className="card_middle">
|
|
115
149
|
<img
|
|
@@ -119,40 +153,33 @@ const ProductListViewTwo = (props: any) => {
|
|
|
119
153
|
/>
|
|
120
154
|
|
|
121
155
|
</div>
|
|
122
|
-
<div className="card_top">
|
|
123
|
-
<h3 className="product_name">{data?.name?.all || data?.name}</h3>
|
|
124
|
-
<h5 className="product_option">{data?.code}</h5>
|
|
156
|
+
<div className="card_top" style={{ textAlign: 'center', width: '100%', marginBottom: '8px' }}>
|
|
157
|
+
<h3 className="product_name" style={{ margin: 0 }}>{data?.name?.all || data?.name}</h3>
|
|
158
|
+
<h5 className="product_option" style={{ margin: '4px 0 0 0' }}>{data?.code}</h5>
|
|
125
159
|
</div>
|
|
126
|
-
<div className="card_bottom">
|
|
160
|
+
<div className="card_bottom" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%' }}>
|
|
127
161
|
<div className="price_container">
|
|
128
|
-
{finalSellingPrice !== 0 && (
|
|
129
|
-
|
|
130
|
-
<div className="price_row">
|
|
131
|
-
<h4 className="selling_price"
|
|
132
|
-
|
|
133
|
-
|
|
162
|
+
{props.showsp !== false && finalSellingPrice !== 0 && (
|
|
163
|
+
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
|
|
164
|
+
<div className="price_row" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
165
|
+
<h4 className="selling_price" style={{ margin: 0, fontSize: '15px', fontWeight: '700', display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap', justifyContent: 'center' }}>
|
|
166
|
+
<span>SP: {finalSellingPrice.toLocaleString("en-IN")} (incl of all tax)</span>
|
|
167
|
+
{props.showdiscount !== false && mrpPrice > finalSellingPrice && (
|
|
168
|
+
<span style={{ fontSize: '12px', color: '#666', textDecoration: 'line-through', fontWeight: 'normal' }}>MRP: {mrpPrice.toLocaleString("en-IN")}</span>
|
|
169
|
+
)}
|
|
170
|
+
</h4>
|
|
171
|
+
{props.showdiscount !== false && mrpPrice > finalSellingPrice && (
|
|
172
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginTop: '2px' }}>
|
|
173
|
+
{discount !== null && discount > 0 && (
|
|
174
|
+
<span className="discounts" style={{ fontSize: '11px', color: '#28a745', fontWeight: 'bold' }}>{discount}% OFF</span>
|
|
175
|
+
)}
|
|
176
|
+
<p className="save_amount" style={{ margin: 0, fontSize: '11px', fontWeight: '500' }}>Save {(mrpPrice - finalSellingPrice).toLocaleString("en-IN")}</p>
|
|
177
|
+
</div>
|
|
134
178
|
)}
|
|
135
179
|
</div>
|
|
136
|
-
|
|
137
|
-
<p className="save_amount">Save {(mrpPrice - finalSellingPrice).toLocaleString("en-IN")}</p>
|
|
138
|
-
)}
|
|
139
|
-
</>
|
|
180
|
+
</div>
|
|
140
181
|
)}
|
|
141
182
|
</div>
|
|
142
|
-
|
|
143
|
-
<div className="review_container">
|
|
144
|
-
<div className="rating">
|
|
145
|
-
<svg
|
|
146
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
147
|
-
viewBox="0 0 20 20"
|
|
148
|
-
width="14"
|
|
149
|
-
height="14"
|
|
150
|
-
>
|
|
151
|
-
<path d="M10 15l-5.878 3.09 1.122-6.545L.488 6.91l6.562-.955L10 0l2.95 5.955 6.562.955-4.756 4.635 1.122 6.545z" />
|
|
152
|
-
</svg>
|
|
153
|
-
<span className="rating_value">{data?.starrating}</span>
|
|
154
|
-
</div>
|
|
155
|
-
</div>
|
|
156
183
|
</div>
|
|
157
184
|
</div>
|
|
158
185
|
</a>
|