tee3apps-cms-sdk-react 0.0.15 → 0.0.17

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.
Files changed (9) hide show
  1. package/dist/index.js +2 -2
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +2 -2
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/PageComponents/Visual-Components/GroupProductComponent.tsx +616 -534
  7. package/src/PageComponents/Visual-Components/Styles/ProductListViewOne.tsx +162 -101
  8. package/src/PageComponents/Visual-Components/Styles/ProductListViewTwo.tsx +164 -103
  9. package/src/PageComponents/Visual-Components/TabComponent.tsx +132 -48
package/src/PageComponents/Visual-Components/Styles/ProductListViewOne.tsx CHANGED
@@ -1,102 +1,163 @@
1
- import React from "react";
2
- import "./product-list-view-one.css";
3
- import { Linodeurl } from '../../../const';
4
-
5
- const ProductListViewOne = (props: any) => {
6
- const [target, setTarget] = React.useState("_blank");
7
- console.warn(props)
8
- React.useEffect(() => {
9
- if (typeof window !== "undefined") {
10
- if (window.matchMedia("(display-mode: standalone)").matches) {
11
- setTarget("_self");
12
- }
13
- if (
14
- /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
15
- navigator.userAgent
16
- )
17
- ) {
18
- setTarget("_self");
19
- }
20
- }
21
- }, []);
22
-
23
- const data = props.props || props;
24
- const slug = data?.code; // Using code instead of slug
25
-
26
- // Updated price extraction to match your JSON structure
27
- const sellingPrice = Number(data?.price?.SP?.$numberDecimal || 0);
28
- const mrpPrice = Number(data?.price?.MRP?.$numberDecimal || 0);
29
-
30
- const calculateDiscount = (): number | null => {
31
- if (!sellingPrice || !mrpPrice || mrpPrice <= sellingPrice) return null;
32
- return Math.round(100 - (sellingPrice / mrpPrice) * 100);
33
- };
34
-
35
- const discount = calculateDiscount();
36
-
37
- // Extract variant options for display
38
- const getVariantOptions = () => {
39
- if (!data?.variant) return "";
40
- return data.variant
41
- .map((v: any) => v.valueId?.name?.displayName || v.valueId?.name?.all || "")
42
- .filter(Boolean)
43
- .join(" • ");
44
- };
45
-
46
- const variantOptions = getVariantOptions();
47
-
48
- return (
49
- <div className="card">
50
- <a href={`/${slug}`} target={target}>
51
- <div className="card_grid">
52
- <div className="card_top">
53
- <img
54
- src={`${Linodeurl}${data?.image?.all?.url || data?.image?.url}`}
55
- alt={data?.name?.all || data?.name}
56
- className="product_image"
57
- />
58
- </div>
59
- <div className="card_bottom">
60
- <div className="cardname">
61
- <h3>{data?.name?.all || data?.name}</h3>
62
- <h5>{variantOptions}</h5>
63
- </div>
64
- <div className="card_value">
65
- {sellingPrice !== 0 && (
66
- <div className="card_price">
67
- <h4>₹{sellingPrice.toLocaleString("en-IN")}</h4>
68
- <div className="card_right_grid">
69
- {mrpPrice > sellingPrice && (
70
- <p >₹{mrpPrice.toLocaleString("en-IN")}</p>
71
- )}
72
- {discount !== null && discount > 0 && (
73
- <span>({discount}% OFF)</span>
74
- )}
75
- </div>
76
- </div>
77
- )}
78
- <div className="review_counts">
79
- <svg
80
- xmlns="http://www.w3.org/2000/svg"
81
- viewBox="0 0 20 20"
82
- fill="#f46b27"
83
- width="13"
84
- height="13"
85
- >
86
- <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" />
87
- </svg>
88
- <p>{data?.starrating}</p>
89
- <span>({data?.startRatingCount} Reviews)</span>
90
- </div>
91
- {/* {Number(data?.starrating) && Number(data?.startRatingCount) && (
92
-
93
- )} */}
94
- </div>
95
- </div>
96
- </div>
97
- </a>
98
- </div>
99
- );
100
- };
101
-
1
+ import React from "react";
2
+ import "./product-list-view-one.css";
3
+ import { Linodeurl } from '../../../const';
4
+
5
+ // Utility function to extract price value from different formats
6
+ const getPriceValue = (price: any): number => {
7
+ if (price === null || price === undefined) return 0;
8
+
9
+ // If it's already a number
10
+ if (typeof price === 'number') {
11
+ return isNaN(price) ? 0 : price;
12
+ }
13
+
14
+ // If it's an object with $numberDecimal (but not an array)
15
+ if (typeof price === 'object' && price !== null && !Array.isArray(price)) {
16
+ if (price.$numberDecimal !== undefined && price.$numberDecimal !== null) {
17
+ const value = parseFloat(String(price.$numberDecimal));
18
+ return isNaN(value) ? 0 : value;
19
+ }
20
+ }
21
+
22
+ // If it's a string, try to parse it
23
+ if (typeof price === 'string') {
24
+ const value = parseFloat(price);
25
+ return isNaN(value) ? 0 : value;
26
+ }
27
+
28
+ return 0;
29
+ };
30
+
31
+ // Utility function to get price from pricing array (mrp, costPrice, nlcPrice)
32
+ const getPriceFromPricingArray = (pricingArray: any[]): number => {
33
+ if (!Array.isArray(pricingArray) || pricingArray.length === 0) return 0;
34
+
35
+ // First, try to find the default price with default currency
36
+ const defaultPrice = pricingArray.find(
37
+ (item: any) => item.isDefault === true && item.isDefaultCurrency === true
38
+ );
39
+
40
+ if (defaultPrice && defaultPrice.price) {
41
+ return getPriceValue(defaultPrice.price);
42
+ }
43
+
44
+ // Fallback: find any default price
45
+ const anyDefault = pricingArray.find((item: any) => item.isDefault === true);
46
+ if (anyDefault && anyDefault.price) {
47
+ return getPriceValue(anyDefault.price);
48
+ }
49
+
50
+ // Fallback: use first item
51
+ if (pricingArray[0] && pricingArray[0].price) {
52
+ return getPriceValue(pricingArray[0].price);
53
+ }
54
+
55
+ return 0;
56
+ };
57
+
58
+ const ProductListViewOne = (props: any) => {
59
+ const [target, setTarget] = React.useState("_blank");
60
+ console.warn(props)
61
+ React.useEffect(() => {
62
+ if (typeof window !== "undefined") {
63
+ if (window.matchMedia("(display-mode: standalone)").matches) {
64
+ setTarget("_self");
65
+ }
66
+ if (
67
+ /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
68
+ navigator.userAgent
69
+ )
70
+ ) {
71
+ setTarget("_self");
72
+ }
73
+ }
74
+ }, []);
75
+
76
+ const data = props.props || props;
77
+ const slug = data?.code; // Using code instead of slug
78
+
79
+ // Updated price extraction to use pricing object
80
+ const mrp = data.pricing?.mrp ? getPriceFromPricingArray(data.pricing.mrp) : 0;
81
+ const sellingPrice = data.pricing?.nlcPrice
82
+ ? getPriceFromPricingArray(data.pricing.nlcPrice)
83
+ : data.pricing?.costPrice
84
+ ? getPriceFromPricingArray(data.pricing.costPrice)
85
+ : 0;
86
+
87
+ // Fallback to old price structure if pricing is not available
88
+ const mrpPrice = mrp || (data.price?.MRP ? getPriceValue(data.price.MRP) : 0);
89
+ const finalSellingPrice = sellingPrice || (data.price?.SP ? getPriceValue(data.price.SP) : 0);
90
+
91
+ const calculateDiscount = (): number | null => {
92
+ if (!finalSellingPrice || !mrpPrice || mrpPrice <= finalSellingPrice) return null;
93
+ return Math.round(100 - (finalSellingPrice / mrpPrice) * 100);
94
+ };
95
+
96
+ const discount = calculateDiscount();
97
+
98
+ // Extract variant options for display
99
+ const getVariantOptions = () => {
100
+ if (!data?.variant) return "";
101
+ return data.variant
102
+ .map((v: any) => v.valueId?.name?.displayName || v.valueId?.name?.all || "")
103
+ .filter(Boolean)
104
+ .join(" • ");
105
+ };
106
+
107
+ const variantOptions = getVariantOptions();
108
+
109
+ return (
110
+ <div className="card">
111
+ <a href={`/${slug}`} target={target}>
112
+ <div className="card_grid">
113
+ <div className="card_top">
114
+ <img
115
+ src={`${Linodeurl}${data?.image?.all?.url || data?.image?.url}`}
116
+ alt={data?.name?.all || data?.name}
117
+ className="product_image"
118
+ />
119
+ </div>
120
+ <div className="card_bottom">
121
+ <div className="cardname">
122
+ <h3>{data?.name?.all || data?.name}</h3>
123
+ <h5>{variantOptions}</h5>
124
+ </div>
125
+ <div className="card_value">
126
+ {finalSellingPrice !== 0 && (
127
+ <div className="card_price">
128
+ <h4>₹{finalSellingPrice.toLocaleString("en-IN")}</h4>
129
+ <div className="card_right_grid">
130
+ {mrpPrice > finalSellingPrice && (
131
+ <p >₹{mrpPrice.toLocaleString("en-IN")}</p>
132
+ )}
133
+ {discount !== null && discount > 0 && (
134
+ <span>({discount}% OFF)</span>
135
+ )}
136
+ </div>
137
+ </div>
138
+ )}
139
+ <div className="review_counts">
140
+ <svg
141
+ xmlns="http://www.w3.org/2000/svg"
142
+ viewBox="0 0 20 20"
143
+ fill="#f46b27"
144
+ width="13"
145
+ height="13"
146
+ >
147
+ <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" />
148
+ </svg>
149
+ <p>{data?.starrating}</p>
150
+ <span>({data?.startRatingCount} Reviews)</span>
151
+ </div>
152
+ {/* {Number(data?.starrating) && Number(data?.startRatingCount) && (
153
+
154
+ )} */}
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </a>
159
+ </div>
160
+ );
161
+ };
162
+
102
163
  export default ProductListViewOne;
package/src/PageComponents/Visual-Components/Styles/ProductListViewTwo.tsx CHANGED
@@ -1,104 +1,165 @@
1
- import React from "react";
2
- import "./product-list-view-two.css";
3
- import { Linodeurl } from '../../../const';
4
-
5
- const ProductListViewTwo = (props: any) => {
6
- console.warn(props);
7
- const [target, setTarget] = React.useState("_blank");
8
-
9
- React.useEffect(() => {
10
- if (typeof window !== "undefined") {
11
- if (window.matchMedia("(display-mode: standalone)").matches) {
12
- setTarget("_self");
13
- }
14
- if (
15
- /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
16
- navigator.userAgent
17
- )
18
- ) {
19
- setTarget("_self");
20
- }
21
- }
22
- }, []);
23
-
24
- const data = props.props || props;
25
- const slug = data?.code; // Using code instead of slug since slug doesn't exist in your data
26
-
27
- // Updated price extraction to match your JSON structure
28
- const sellingPrice = Number(data?.price?.SP?.$numberDecimal || 0);
29
- const mrpPrice = Number(data?.price?.MRP?.$numberDecimal || 0);
30
-
31
- const calculateDiscount = () => {
32
- if (!sellingPrice || !mrpPrice || mrpPrice <= sellingPrice) return null;
33
- return Math.round(100 - (sellingPrice / mrpPrice) * 100);
34
- };
35
-
36
- const discount = calculateDiscount();
37
-
38
- // Extract variant options for display
39
- // const getVariantOptions = () => {
40
- // if (!data?.variant) return "";
41
- // return data.variant
42
- // .map((v: any) => v.valueId?.name || v.valueId?.name || "")
43
- // .filter(Boolean)
44
- // .join(" • ");
45
- // };
46
-
47
- // const variantOptions = getVariantOptions();
48
-
49
- return (
50
- <div className="card">
51
- <a href={`/${slug}`} target={target} rel="noopener noreferrer">
52
- <div className="card_content">
53
-
54
-
55
- <div className="card_middle">
56
- <img
57
- src={`${Linodeurl}${data?.image?.all?.url || data?.image?.url}`}
58
- alt={data?.name?.all || data?.name}
59
- className="product_image"
60
- />
61
-
62
- </div>
63
- <div className="card_top">
64
- <h3 className="product_name">{data?.name?.all || data?.name}</h3>
65
- <h5 className="product_option">{data?.code}</h5>
66
- </div>
67
- <div className="card_bottom">
68
- <div className="price_container">
69
- {sellingPrice !== 0 && (
70
- <>
71
- <div className="price_row">
72
- <h4 className="selling_price">₹{sellingPrice.toLocaleString("en-IN")}</h4>
73
- {discount !== null && discount > 0 && (
74
- <span className="discounts">{discount}% OFF</span>
75
- )}
76
- </div>
77
- {mrpPrice > sellingPrice && (
78
- <p className="save_amount">Save ₹{(mrpPrice - sellingPrice).toLocaleString("en-IN")}</p>
79
- )}
80
- </>
81
- )}
82
- </div>
83
-
84
- <div className="review_container">
85
- <div className="rating">
86
- <svg
87
- xmlns="http://www.w3.org/2000/svg"
88
- viewBox="0 0 20 20"
89
- width="14"
90
- height="14"
91
- >
92
- <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" />
93
- </svg>
94
- <span className="rating_value">{data?.starrating}</span>
95
- </div>
96
- </div>
97
- </div>
98
- </div>
99
- </a>
100
- </div>
101
- );
102
- };
103
-
1
+ import React from "react";
2
+ import "./product-list-view-two.css";
3
+ import { Linodeurl } from '../../../const';
4
+
5
+ // Utility function to extract price value from different formats
6
+ const getPriceValue = (price: any): number => {
7
+ if (price === null || price === undefined) return 0;
8
+
9
+ // If it's already a number
10
+ if (typeof price === 'number') {
11
+ return isNaN(price) ? 0 : price;
12
+ }
13
+
14
+ // If it's an object with $numberDecimal (but not an array)
15
+ if (typeof price === 'object' && price !== null && !Array.isArray(price)) {
16
+ if (price.$numberDecimal !== undefined && price.$numberDecimal !== null) {
17
+ const value = parseFloat(String(price.$numberDecimal));
18
+ return isNaN(value) ? 0 : value;
19
+ }
20
+ }
21
+
22
+ // If it's a string, try to parse it
23
+ if (typeof price === 'string') {
24
+ const value = parseFloat(price);
25
+ return isNaN(value) ? 0 : value;
26
+ }
27
+
28
+ return 0;
29
+ };
30
+
31
+ // Utility function to get price from pricing array (mrp, costPrice, nlcPrice)
32
+ const getPriceFromPricingArray = (pricingArray: any[]): number => {
33
+ if (!Array.isArray(pricingArray) || pricingArray.length === 0) return 0;
34
+
35
+ // First, try to find the default price with default currency
36
+ const defaultPrice = pricingArray.find(
37
+ (item: any) => item.isDefault === true && item.isDefaultCurrency === true
38
+ );
39
+
40
+ if (defaultPrice && defaultPrice.price) {
41
+ return getPriceValue(defaultPrice.price);
42
+ }
43
+
44
+ // Fallback: find any default price
45
+ const anyDefault = pricingArray.find((item: any) => item.isDefault === true);
46
+ if (anyDefault && anyDefault.price) {
47
+ return getPriceValue(anyDefault.price);
48
+ }
49
+
50
+ // Fallback: use first item
51
+ if (pricingArray[0] && pricingArray[0].price) {
52
+ return getPriceValue(pricingArray[0].price);
53
+ }
54
+
55
+ return 0;
56
+ };
57
+
58
+ const ProductListViewTwo = (props: any) => {
59
+ console.warn(props);
60
+ const [target, setTarget] = React.useState("_blank");
61
+
62
+ React.useEffect(() => {
63
+ if (typeof window !== "undefined") {
64
+ if (window.matchMedia("(display-mode: standalone)").matches) {
65
+ setTarget("_self");
66
+ }
67
+ if (
68
+ /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
69
+ navigator.userAgent
70
+ )
71
+ ) {
72
+ setTarget("_self");
73
+ }
74
+ }
75
+ }, []);
76
+
77
+ const data = props.props || props;
78
+ const slug = data?.code; // Using code instead of slug since slug doesn't exist in your data
79
+
80
+ // Updated price extraction to use pricing object
81
+ const mrp = data.pricing?.mrp ? getPriceFromPricingArray(data.pricing.mrp) : 0;
82
+ const sellingPrice = data.pricing?.nlcPrice
83
+ ? getPriceFromPricingArray(data.pricing.nlcPrice)
84
+ : data.pricing?.costPrice
85
+ ? getPriceFromPricingArray(data.pricing.costPrice)
86
+ : 0;
87
+
88
+ // Fallback to old price structure if pricing is not available
89
+ const mrpPrice = mrp || (data.price?.MRP ? getPriceValue(data.price.MRP) : 0);
90
+ const finalSellingPrice = sellingPrice || (data.price?.SP ? getPriceValue(data.price.SP) : 0);
91
+
92
+ const calculateDiscount = () => {
93
+ if (!finalSellingPrice || !mrpPrice || mrpPrice <= finalSellingPrice) return null;
94
+ return Math.round(100 - (finalSellingPrice / mrpPrice) * 100);
95
+ };
96
+
97
+ const discount = calculateDiscount();
98
+
99
+ // Extract variant options for display
100
+ // const getVariantOptions = () => {
101
+ // if (!data?.variant) return "";
102
+ // return data.variant
103
+ // .map((v: any) => v.valueId?.name || v.valueId?.name || "")
104
+ // .filter(Boolean)
105
+ // .join(" • ");
106
+ // };
107
+
108
+ // const variantOptions = getVariantOptions();
109
+
110
+ return (
111
+ <div className="card">
112
+ <a href={`/${slug}`} target={target} rel="noopener noreferrer">
113
+ <div className="card_content">
114
+
115
+
116
+ <div className="card_middle">
117
+ <img
118
+ src={`${Linodeurl}${data?.image?.all?.url || data?.image?.url}`}
119
+ alt={data?.name?.all || data?.name}
120
+ className="product_image"
121
+ />
122
+
123
+ </div>
124
+ <div className="card_top">
125
+ <h3 className="product_name">{data?.name?.all || data?.name}</h3>
126
+ <h5 className="product_option">{data?.code}</h5>
127
+ </div>
128
+ <div className="card_bottom">
129
+ <div className="price_container">
130
+ {finalSellingPrice !== 0 && (
131
+ <>
132
+ <div className="price_row">
133
+ <h4 className="selling_price">₹{finalSellingPrice.toLocaleString("en-IN")}</h4>
134
+ {discount !== null && discount > 0 && (
135
+ <span className="discounts">{discount}% OFF</span>
136
+ )}
137
+ </div>
138
+ {mrpPrice > finalSellingPrice && (
139
+ <p className="save_amount">Save ₹{(mrpPrice - finalSellingPrice).toLocaleString("en-IN")}</p>
140
+ )}
141
+ </>
142
+ )}
143
+ </div>
144
+
145
+ <div className="review_container">
146
+ <div className="rating">
147
+ <svg
148
+ xmlns="http://www.w3.org/2000/svg"
149
+ viewBox="0 0 20 20"
150
+ width="14"
151
+ height="14"
152
+ >
153
+ <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" />
154
+ </svg>
155
+ <span className="rating_value">{data?.starrating}</span>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </a>
161
+ </div>
162
+ );
163
+ };
164
+
104
165
  export default ProductListViewTwo;