tee3apps-cms-sdk-react 0.0.14 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tee3apps-cms-sdk-react",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "Uses JSON to dynamically generate and render UI pages in a website",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/PageComponents/Visual-Components/GroupProductComponent.tsx

@@ -3,6 +3,83 @@ import ProductListViewOne from '../Visual-Components/Styles/ProductListViewOne';
 import ProductListViewTwo from '../Visual-Components/Styles/ProductListViewTwo';
 import { Linodeurl } from '../../const';
 
+// Utility function to extract price value from different formats
+const getPriceValue = (price: any): number => {
+  if (price === null || price === undefined) return 0;
+  
+  // If it's already a number
+  if (typeof price === 'number') {
+    return isNaN(price) ? 0 : price;
+  }
+  
+  // If it's an object with $numberDecimal (but not an array)
+  if (typeof price === 'object' && price !== null && !Array.isArray(price)) {
+    if (price.$numberDecimal !== undefined && price.$numberDecimal !== null) {
+      const value = parseFloat(String(price.$numberDecimal));
+      return isNaN(value) ? 0 : value;
+    }
+  }
+  
+  // If it's a string, try to parse it
+  if (typeof price === 'string') {
+    const value = parseFloat(price);
+    return isNaN(value) ? 0 : value;
+  }
+  
+  return 0;
+};
+
+// Utility function to get price from pricing array (mrp, costPrice, nlcPrice)
+const getPriceFromPricingArray = (pricingArray: any[]): number => {
+  if (!Array.isArray(pricingArray) || pricingArray.length === 0) return 0;
+  
+  // First, try to find the default price with default currency
+  const defaultPrice = pricingArray.find(
+    (item: any) => item.isDefault === true && item.isDefaultCurrency === true
+  );
+  
+  if (defaultPrice && defaultPrice.price) {
+    return getPriceValue(defaultPrice.price);
+  }
+  
+  // Fallback: find any default price
+  const anyDefault = pricingArray.find((item: any) => item.isDefault === true);
+  if (anyDefault && anyDefault.price) {
+    return getPriceValue(anyDefault.price);
+  }
+  
+  // Fallback: use first item
+  if (pricingArray[0] && pricingArray[0].price) {
+    return getPriceValue(pricingArray[0].price);
+  }
+  
+  return 0;
+};
+
+// Utility function to get MRP and Selling Price from product pricing object
+const getProductPrices = (product: any) => {
+  // Use pricing object first, fallback to price for backward compatibility
+  const mrp = product.pricing?.mrp ? getPriceFromPricingArray(product.pricing.mrp) : 0;
+  const sellingPrice = product.pricing?.nlcPrice 
+    ? getPriceFromPricingArray(product.pricing.nlcPrice) 
+    : product.pricing?.costPrice 
+    ? getPriceFromPricingArray(product.pricing.costPrice) 
+    : 0;
+  
+  // Fallback to old price structure if pricing is not available
+  const fallbackMRP = product.price?.MRP 
+    ? getPriceValue(product.price.MRP) 
+    : 0;
+  const fallbackSP = product.price?.SP 
+    ? getPriceValue(product.price.SP) 
+    : 0;
+  
+  return {
+    mrp: mrp || fallbackMRP,
+    sellingPrice: sellingPrice || fallbackSP
+  };
+};
+
 
 interface Product {
   _id: string;
@@ -127,7 +204,7 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
   };
 
   const products = getProducts();
-
+  
   // Helper function to render product based on style
   const renderProduct = (product: Product, key: string) => {
     if (currentstyle === 'STYLE1') {
@@ -207,9 +284,14 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
                 }}
               >
                 {typeof product.name === 'object' ? product.name.all : product.name}
-                <h1 style={{ fontSize: '16px', fontWeight: '700', color: '#333' }}>
-                  {product?.price?.SP?.$numberDecimal}
-                </h1>
+                {(() => {
+                  const prices = getProductPrices(product);
+                  return prices.sellingPrice > 0 ? (
+                    <h1 style={{ fontSize: '16px', fontWeight: '700', color: '#333' }}>
+                      ₹{prices.sellingPrice.toLocaleString("en-IN")}
+                    </h1>
+                  ) : null;
+                })()}
               </div>
             )}
           </div>

package/src/PageComponents/Visual-Components/Styles/ProductListViewOne.tsx

@@ -2,6 +2,59 @@ import React from "react";
 import "./product-list-view-one.css";
 import { Linodeurl } from '../../../const';
 
+// Utility function to extract price value from different formats
+const getPriceValue = (price: any): number => {
+  if (price === null || price === undefined) return 0;
+  
+  // If it's already a number
+  if (typeof price === 'number') {
+    return isNaN(price) ? 0 : price;
+  }
+  
+  // If it's an object with $numberDecimal (but not an array)
+  if (typeof price === 'object' && price !== null && !Array.isArray(price)) {
+    if (price.$numberDecimal !== undefined && price.$numberDecimal !== null) {
+      const value = parseFloat(String(price.$numberDecimal));
+      return isNaN(value) ? 0 : value;
+    }
+  }
+  
+  // If it's a string, try to parse it
+  if (typeof price === 'string') {
+    const value = parseFloat(price);
+    return isNaN(value) ? 0 : value;
+  }
+  
+  return 0;
+};
+
+// Utility function to get price from pricing array (mrp, costPrice, nlcPrice)
+const getPriceFromPricingArray = (pricingArray: any[]): number => {
+  if (!Array.isArray(pricingArray) || pricingArray.length === 0) return 0;
+  
+  // First, try to find the default price with default currency
+  const defaultPrice = pricingArray.find(
+    (item: any) => item.isDefault === true && item.isDefaultCurrency === true
+  );
+  
+  if (defaultPrice && defaultPrice.price) {
+    return getPriceValue(defaultPrice.price);
+  }
+  
+  // Fallback: find any default price
+  const anyDefault = pricingArray.find((item: any) => item.isDefault === true);
+  if (anyDefault && anyDefault.price) {
+    return getPriceValue(anyDefault.price);
+  }
+  
+  // Fallback: use first item
+  if (pricingArray[0] && pricingArray[0].price) {
+    return getPriceValue(pricingArray[0].price);
+  }
+  
+  return 0;
+};
+
 const ProductListViewOne = (props: any) => {
   const [target, setTarget] = React.useState("_blank");
   console.warn(props)
@@ -23,13 +76,21 @@ const ProductListViewOne = (props: any) => {
   const data = props.props || props;
   const slug = data?.code; // Using code instead of slug
 
-  // Updated price extraction to match your JSON structure
-  const sellingPrice = Number(data?.price?.SP?.$numberDecimal || 0);
-  const mrpPrice = Number(data?.price?.MRP?.$numberDecimal || 0);
+  // Updated price extraction to use pricing object
+  const mrp = data.pricing?.mrp ? getPriceFromPricingArray(data.pricing.mrp) : 0;
+  const sellingPrice = data.pricing?.nlcPrice 
+    ? getPriceFromPricingArray(data.pricing.nlcPrice) 
+    : data.pricing?.costPrice 
+    ? getPriceFromPricingArray(data.pricing.costPrice) 
+    : 0;
+  
+  // Fallback to old price structure if pricing is not available
+  const mrpPrice = mrp || (data.price?.MRP ? getPriceValue(data.price.MRP) : 0);
+  const finalSellingPrice = sellingPrice || (data.price?.SP ? getPriceValue(data.price.SP) : 0);
 
   const calculateDiscount = (): number | null => {
-    if (!sellingPrice || !mrpPrice || mrpPrice <= sellingPrice) return null;
-    return Math.round(100 - (sellingPrice / mrpPrice) * 100);
+    if (!finalSellingPrice || !mrpPrice || mrpPrice <= finalSellingPrice) return null;
+    return Math.round(100 - (finalSellingPrice / mrpPrice) * 100);
   };
 
   const discount = calculateDiscount();
@@ -62,11 +123,11 @@ const ProductListViewOne = (props: any) => {
             <h5>{variantOptions}</h5>
             </div>
             <div className="card_value">
-              {sellingPrice !== 0 && (
+              {finalSellingPrice !== 0 && (
                 <div className="card_price">
-                  <h4>₹{sellingPrice.toLocaleString("en-IN")}</h4>
+                  <h4>₹{finalSellingPrice.toLocaleString("en-IN")}</h4>
                   <div className="card_right_grid">
-                    {mrpPrice > sellingPrice && (
+                    {mrpPrice > finalSellingPrice && (
                       <p >₹{mrpPrice.toLocaleString("en-IN")}</p>
                     )}
                     {discount !== null && discount > 0 && (

package/src/PageComponents/Visual-Components/Styles/ProductListViewTwo.tsx

@@ -2,6 +2,59 @@ import React from "react";
 import "./product-list-view-two.css";
 import { Linodeurl } from '../../../const';
 
+// Utility function to extract price value from different formats
+const getPriceValue = (price: any): number => {
+  if (price === null || price === undefined) return 0;
+  
+  // If it's already a number
+  if (typeof price === 'number') {
+    return isNaN(price) ? 0 : price;
+  }
+  
+  // If it's an object with $numberDecimal (but not an array)
+  if (typeof price === 'object' && price !== null && !Array.isArray(price)) {
+    if (price.$numberDecimal !== undefined && price.$numberDecimal !== null) {
+      const value = parseFloat(String(price.$numberDecimal));
+      return isNaN(value) ? 0 : value;
+    }
+  }
+  
+  // If it's a string, try to parse it
+  if (typeof price === 'string') {
+    const value = parseFloat(price);
+    return isNaN(value) ? 0 : value;
+  }
+  
+  return 0;
+};
+
+// Utility function to get price from pricing array (mrp, costPrice, nlcPrice)
+const getPriceFromPricingArray = (pricingArray: any[]): number => {
+  if (!Array.isArray(pricingArray) || pricingArray.length === 0) return 0;
+  
+  // First, try to find the default price with default currency
+  const defaultPrice = pricingArray.find(
+    (item: any) => item.isDefault === true && item.isDefaultCurrency === true
+  );
+  
+  if (defaultPrice && defaultPrice.price) {
+    return getPriceValue(defaultPrice.price);
+  }
+  
+  // Fallback: find any default price
+  const anyDefault = pricingArray.find((item: any) => item.isDefault === true);
+  if (anyDefault && anyDefault.price) {
+    return getPriceValue(anyDefault.price);
+  }
+  
+  // Fallback: use first item
+  if (pricingArray[0] && pricingArray[0].price) {
+    return getPriceValue(pricingArray[0].price);
+  }
+  
+  return 0;
+};
+
 const ProductListViewTwo = (props: any) => {
   console.warn(props);
   const [target, setTarget] = React.useState("_blank");
@@ -24,13 +77,21 @@ const ProductListViewTwo = (props: any) => {
   const data = props.props || props;
   const slug = data?.code; // Using code instead of slug since slug doesn't exist in your data
 
-  // Updated price extraction to match your JSON structure
-  const sellingPrice = Number(data?.price?.SP?.$numberDecimal || 0);
-  const mrpPrice = Number(data?.price?.MRP?.$numberDecimal || 0);
+  // Updated price extraction to use pricing object
+  const mrp = data.pricing?.mrp ? getPriceFromPricingArray(data.pricing.mrp) : 0;
+  const sellingPrice = data.pricing?.nlcPrice 
+    ? getPriceFromPricingArray(data.pricing.nlcPrice) 
+    : data.pricing?.costPrice 
+    ? getPriceFromPricingArray(data.pricing.costPrice) 
+    : 0;
+  
+  // Fallback to old price structure if pricing is not available
+  const mrpPrice = mrp || (data.price?.MRP ? getPriceValue(data.price.MRP) : 0);
+  const finalSellingPrice = sellingPrice || (data.price?.SP ? getPriceValue(data.price.SP) : 0);
 
   const calculateDiscount = () => {
-    if (!sellingPrice || !mrpPrice || mrpPrice <= sellingPrice) return null;
-    return Math.round(100 - (sellingPrice / mrpPrice) * 100);
+    if (!finalSellingPrice || !mrpPrice || mrpPrice <= finalSellingPrice) return null;
+    return Math.round(100 - (finalSellingPrice / mrpPrice) * 100);
   };
 
   const discount = calculateDiscount();
@@ -66,16 +127,16 @@ const ProductListViewTwo = (props: any) => {
           </div>
           <div className="card_bottom">
             <div className="price_container">
-              {sellingPrice !== 0 && (
+              {finalSellingPrice !== 0 && (
                 <>
                   <div className="price_row">
-                    <h4 className="selling_price">₹{sellingPrice.toLocaleString("en-IN")}</h4>
+                    <h4 className="selling_price">₹{finalSellingPrice.toLocaleString("en-IN")}</h4>
                     {discount !== null && discount > 0 && (
                       <span className="discounts">{discount}% OFF</span>
                     )}
                   </div>
-                  {mrpPrice > sellingPrice && (
-                    <p className="save_amount">Save ₹{(mrpPrice - sellingPrice).toLocaleString("en-IN")}</p>
+                  {mrpPrice > finalSellingPrice && (
+                    <p className="save_amount">Save ₹{(mrpPrice - finalSellingPrice).toLocaleString("en-IN")}</p>
                   )}
                 </>
               )}