tee3apps-cms-sdk-react 0.0.34 → 0.0.35

package/package.json

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

package/src/Page.tsx

@@ -8,7 +8,7 @@ import GroupProductComponent, { GroupProductComponentProps } from './PageCompone
 import VideoComponent, { VideoComponentProps } from './PageComponents/Visual-Components/VideoComponent';
 import GroupBrandComponent, { GroupBrandComponentProps } from './PageComponents/Visual-Components/GroupBrandComponent';
 import LottieComponent, { LottieComponentProps } from './PageComponents/Visual-Components/LottieComponent';
-import {  ImageComponentProps, LinkProps, TextProps } from './common.interface';
+import { ImageComponentProps, LinkProps, TextProps } from './common.interface';
 import CarouselComponent, { CarouselProps } from './PageComponents/Visual-Components/CarouselComponent';
 import NavigationComponent, { NavigationProps } from './PageComponents/Visual-Components/NavigationComponent';
 import './index.css'
@@ -18,9 +18,9 @@ import GroupImageList, { GroupImageListProps } from './PageComponents/Visual-Com
 import TabComponent, { TabComponentProps } from './PageComponents/Visual-Components/TabComponent';
 import ErrorBoundary from './ErrorBoundary';
 import RichTextComponent, { RichTextComponentProps } from './PageComponents/Visual-Components/RichTextComponent';
-const Page = ({data}:any) => {
-    const [deviceMode, setDeviceMode] = useState<string>('web');
-   const [screenSize, setScreenSize] = useState({
+const Page = ({ data, showsp = true, showdiscount = true }: any) => {
+  const [deviceMode, setDeviceMode] = useState<string>('web');
+  const [screenSize, setScreenSize] = useState({
     width: 0,
     height: 0
   });
@@ -53,73 +53,93 @@ const Page = ({data}:any) => {
   return (
     <>
       <div className=''>
- <div className=''>
-     
-        <ErrorBoundary>
-  {data.map((row: { props: any; columns: any[]; }, rowIndex: React.Key | null | undefined) => (
-    <RowComponent key={rowIndex} props={row.props} deviceMode={deviceMode}>
-      {row.columns.map((box, boxIndex) => (
-        <BoxComponent 
-          key={boxIndex} 
-          props={box.props} 
-          deviceMode={deviceMode}
-          autoAdjustForImages={false}
-        >
-          {box.components.map((component: { name: string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined; props: TextProps | LinkProps | ImageComponentProps | GroupProductComponentProps | VideoComponentProps | GroupBrandComponentProps | LottieComponentProps | CarouselProps | NavigationProps | GroupVideoListProps | GroupCategoryComponentProps | GroupImageListProps | TabComponentProps | RichTextComponentProps; }, compIndex: React.Key | null | undefined) => {
-            const getCurrentBoxHeight = () => {
-            const validModes = ['web', 'mobileweb', 'mobileapp', 'tablet'] as const;
-            const safeDeviceMode = validModes.includes(deviceMode as any) 
-              ? deviceMode as keyof typeof box.props.mode 
-              : 'web';
-              if(component.name==='ImageComponent') return 'auto' // add this line
-            return box.props.mode[safeDeviceMode]?.height || 'auto';
-            };
+        <div className=''>
 
-            try {
-              switch (component.name) {
-                case 'TextComponent':
-                  return <TextComponent key={compIndex} props={component.props as TextProps} />;
-                case 'LinkComponent':
-                  return <LinkComponent key={compIndex} props={component.props as LinkProps} />;
-                case 'ImageComponent':
-                  return <ImageComponent key={compIndex} props={component.props as ImageComponentProps} deviceMode={deviceMode} boxHeight={getCurrentBoxHeight()} />;
-                case 'GroupProductComponent':
-                  return <GroupProductComponent key={compIndex} props={component.props as GroupProductComponentProps} deviceMode={deviceMode} />;
-                case 'VideoComponent':
-                  return <VideoComponent key={compIndex} props={component.props as VideoComponentProps} deviceMode={deviceMode} boxHeight={getCurrentBoxHeight()} />;
-                case 'GroupBrandComponent':
-                  return <GroupBrandComponent key={compIndex} props={component.props as GroupBrandComponentProps} deviceMode={deviceMode} />;
-                case 'LottieComponent':
-                  return <LottieComponent key={compIndex} props={component.props as LottieComponentProps} />;
-                case 'CarouselComponent':
-                  return <CarouselComponent key={compIndex} props={component.props as CarouselProps} deviceMode={deviceMode} />;
-                case 'NavigationComponent':
-                  return <NavigationComponent key={compIndex} props={component.props as NavigationProps} boxHeight={getCurrentBoxHeight()} />;
-                case 'GroupVideoComponent':
-                  return <GroupVideoList key={compIndex} props={component.props as GroupVideoListProps} boxHeight={getCurrentBoxHeight()} />;
-                case 'GroupCategoryComponent':
-                  return <GroupCategoryComponent key={compIndex} props={component.props as GroupCategoryComponentProps} deviceMode={deviceMode} />;
-                case 'GroupImageComponent':
-                  return <GroupImageList key={compIndex} props={component.props as GroupImageListProps} deviceMode={deviceMode} />;
-                case 'TabComponent':
-                  return <TabComponent key={compIndex} props={component.props as TabComponentProps} deviceMode={deviceMode} />;
-                case 'RichTextBoxComponent':
-                  return <RichTextComponent key={compIndex} props={component.props as RichTextComponentProps} />;
-                  default:
-                  return null;
-              }
-            } catch (err) {
-              console.error(`Error rendering component: ${component.name}`, err);
-              return <div key={compIndex} style={{ color: 'red' }}>Failed to load component: {component.name}</div>;
-            }
-          })}
-        </BoxComponent>
-      ))}
-    </RowComponent>
-  ))}
-</ErrorBoundary>
-    </div>
+          <ErrorBoundary>
+            {data.map((row: { props: any; columns: any[]; }, rowIndex: React.Key | null | undefined) => (
+              <RowComponent key={rowIndex} props={row.props} deviceMode={deviceMode}>
+                {row.columns.map((box, boxIndex) => (
+                  <BoxComponent
+                    key={boxIndex}
+                    props={box.props}
+                    deviceMode={deviceMode}
+                    autoAdjustForImages={false}
+                  >
+                    {box.components.map((component: { name: string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined; props: TextProps | LinkProps | ImageComponentProps | GroupProductComponentProps | VideoComponentProps | GroupBrandComponentProps | LottieComponentProps | CarouselProps | NavigationProps | GroupVideoListProps | GroupCategoryComponentProps | GroupImageListProps | TabComponentProps | RichTextComponentProps; }, compIndex: React.Key | null | undefined) => {
+                      const getCurrentBoxHeight = () => {
+                        const validModes = ['web', 'mobileweb', 'mobileapp', 'tablet'] as const;
+                        const safeDeviceMode = validModes.includes(deviceMode as any)
+                          ? deviceMode as keyof typeof box.props.mode
+                          : 'web';
+                        if (component.name === 'ImageComponent') return 'auto' // add this line
+                        return box.props.mode[safeDeviceMode]?.height || 'auto';
+                      };
+
+                      try {
+                        switch (component.name) {
+                          case 'TextComponent':
+                            return <TextComponent key={compIndex} props={component.props as TextProps} />;
+                          case 'LinkComponent':
+                            return <LinkComponent key={compIndex} props={component.props as LinkProps} />;
+                          case 'ImageComponent':
+                            return <ImageComponent key={compIndex} props={component.props as ImageComponentProps} deviceMode={deviceMode} boxHeight={getCurrentBoxHeight()} />;
+                          case 'GroupProductComponent':
+                            {
+                              const gpProps = component.props as GroupProductComponentProps;
+                              return <GroupProductComponent
+                                key={compIndex}
+                                props={{
+                                  ...gpProps,
+                                  showsp: gpProps.showsp ?? showsp,
+                                  showdiscount: gpProps.showdiscount ?? showdiscount
+                                }}
+                                deviceMode={deviceMode} />;
+                            }
+                          case 'VideoComponent':
+                            return <VideoComponent key={compIndex} props={component.props as VideoComponentProps} deviceMode={deviceMode} boxHeight={getCurrentBoxHeight()} />;
+                          case 'GroupBrandComponent':
+                            return <GroupBrandComponent key={compIndex} props={component.props as GroupBrandComponentProps} deviceMode={deviceMode} />;
+                          case 'LottieComponent':
+                            return <LottieComponent key={compIndex} props={component.props as LottieComponentProps} />;
+                          case 'CarouselComponent':
+                            return <CarouselComponent key={compIndex} props={component.props as CarouselProps} deviceMode={deviceMode} />;
+                          case 'NavigationComponent':
+                            return <NavigationComponent key={compIndex} props={component.props as NavigationProps} boxHeight={getCurrentBoxHeight()} />;
+                          case 'GroupVideoComponent':
+                            return <GroupVideoList key={compIndex} props={component.props as GroupVideoListProps} boxHeight={getCurrentBoxHeight()} />;
+                          case 'GroupCategoryComponent':
+                            return <GroupCategoryComponent key={compIndex} props={component.props as GroupCategoryComponentProps} deviceMode={deviceMode} />;
+                          case 'GroupImageComponent':
+                            return <GroupImageList key={compIndex} props={component.props as GroupImageListProps} deviceMode={deviceMode} />;
+                          case 'TabComponent':
+                            {
+                              const tabProps = component.props as TabComponentProps;
+                              return <TabComponent
+                                key={compIndex}
+                                props={{
+                                  ...tabProps,
+                                  showsp: tabProps.showsp ?? showsp,
+                                  showdiscount: tabProps.showdiscount ?? showdiscount
+                                }}
+                                deviceMode={deviceMode} />;
+                            }
+                          case 'RichTextBoxComponent':
+                            return <RichTextComponent key={compIndex} props={component.props as RichTextComponentProps} />;
+                          default:
+                            return null;
+                        }
+                      } catch (err) {
+                        console.error(`Error rendering component: ${component.name}`, err);
+                        return <div key={compIndex} style={{ color: 'red' }}>Failed to load component: {component.name}</div>;
+                      }
+                    })}
+                  </BoxComponent>
+                ))}
+              </RowComponent>
+            ))}
+          </ErrorBoundary>
         </div>
+      </div>
     </>
   )
 }

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

@@ -151,6 +151,8 @@ export interface GroupProductComponentProps {
   isHorizontalScroll: DeviceBooleanProps;
   headerBackground: string;
   viewAllLink?: string;
+  showsp?: boolean;
+  showdiscount?: boolean;
 }
 
 interface GroupProductComponentMainProps {
@@ -209,13 +211,13 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
     if (currentstyle === 'STYLE1') {
       return (
         <div key={key}>
-          <ProductListViewOne props={product} cardColor={props.cardColor} layout={currentLayout} />
+          <ProductListViewOne props={product} cardColor={props.cardColor} layout={currentLayout} showsp={props.showsp} showdiscount={props.showdiscount} />
         </div>
       );
     } else if (currentstyle === 'STYLE2') {
       return (
         <div key={key}>
-          <ProductListViewTwo props={product} cardColor={props.cardColor} layout={currentLayout} />
+          <ProductListViewTwo props={product} cardColor={props.cardColor} layout={currentLayout} showsp={props.showsp} showdiscount={props.showdiscount} />
         </div>
       );
     } else {
@@ -313,16 +315,16 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
 
             {(() => {
               const prices = getProductPrices(product);
-              return prices.sellingPrice > 0 ? (
+              return props.showsp !== false && prices.sellingPrice > 0 ? (
                 <div style={{ marginTop: '8px', textAlign: 'center' }}>
-                  <p style={{ fontSize: '14px', fontWeight: '700', color: '#333', margin: 0 }}>
-                    SP: {prices.sellingPrice.toLocaleString("en-IN")}
+                  <p style={{ fontSize: '14px', fontWeight: '700', color: '#333', margin: 0, display: 'flex', alignItems: 'center', gap: '4px', flexWrap: 'wrap', justifyContent: 'center' }}>
+                    <span>SP: {prices.sellingPrice.toLocaleString("en-IN")} (incl of all tax)</span>
+                    {props.showdiscount !== false && prices.mrp > prices.sellingPrice && (
+                      <span style={{ fontSize: '11px', color: '#666', textDecoration: 'line-through', fontWeight: 'normal' }}>
+                        MRP: {prices.mrp.toLocaleString("en-IN")}
+                      </span>
+                    )}
                   </p>
-                  {prices.mrp > prices.sellingPrice && (
-                    <p style={{ fontSize: '11px', color: '#666', textDecoration: 'line-through', margin: '1px 0' }}>
-                      MRP: {prices.mrp.toLocaleString("en-IN")}
-                    </p>
-                  )}
                 </div>
               ) : null;
             })()}
@@ -337,13 +339,13 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
     if (currentstyle === 'STYLE1') {
       return (
         <div key={key}>
-          <ProductListViewOne props={product} cardColor={props.cardColor} layout={currentLayout} />
+          <ProductListViewOne props={product} cardColor={props.cardColor} layout={currentLayout} showsp={props.showsp} showdiscount={props.showdiscount} />
         </div>
       );
     } else if (currentstyle === 'STYLE2') {
       return (
         <div key={key}>
-          <ProductListViewTwo props={product} cardColor={props.cardColor} layout={currentLayout} />
+          <ProductListViewTwo props={product} cardColor={props.cardColor} layout={currentLayout} showsp={props.showsp} showdiscount={props.showdiscount} />
         </div>
       );
     } else {
@@ -439,10 +441,15 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
 
           {(() => {
             const prices = getProductPrices(product);
-            return prices.sellingPrice > 0 ? (
+            return props.showsp !== false && prices.sellingPrice > 0 ? (
               <div style={{ marginTop: '5px', textAlign: 'center' }}>
-                <p style={{ fontSize: '13px', fontWeight: '700', color: '#333', margin: 0 }}>
-                  SP: {prices.sellingPrice.toLocaleString("en-IN")}
+                <p style={{ fontSize: '13px', fontWeight: '700', color: '#333', margin: 0, display: 'flex', alignItems: 'center', gap: '3px', flexWrap: 'wrap', justifyContent: 'center' }}>
+                  <span>SP: {prices.sellingPrice.toLocaleString("en-IN")} (incl of all tax)</span>
+                  {props.showdiscount !== false && prices.mrp > prices.sellingPrice && (
+                    <span style={{ fontSize: '11px', color: '#666', textDecoration: 'line-through', fontWeight: 'normal' }}>
+                      MRP: {prices.mrp.toLocaleString("en-IN")}
+                    </span>
+                  )}
                 </p>
               </div>
             ) : null;

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

@@ -157,17 +157,17 @@ const ProductListViewOne = (props: any) => {
               <h5 style={{ margin: 0, fontWeight: '400', color: '#666' }}>{variantOptions}</h5>
             </div>
             <div className="card_value" style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
-              {finalSellingPrice !== 0 && (
+              {props.showsp !== false && finalSellingPrice !== 0 && (
                 <div className="card_price" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                  <h4 style={{ margin: 0, fontSize: '16px', fontWeight: '700' }}>SP: {finalSellingPrice.toLocaleString("en-IN")}</h4>
-                  <div className="card_right_grid" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '4px', justifyContent: 'center' }}>
-                    {mrpPrice > finalSellingPrice && (
-                      <p style={{ margin: 0, fontSize: '12px', color: '#666', textDecoration: 'line-through' }}>MRP: {mrpPrice.toLocaleString("en-IN")}</p>
+                  <h4 style={{ margin: 0, fontSize: '15px', fontWeight: '700', display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap', justifyContent: 'center' }}>
+                    <span>SP: {finalSellingPrice.toLocaleString("en-IN")} (incl of all tax)</span>
+                    {props.showdiscount !== false && mrpPrice > finalSellingPrice && (
+                      <span style={{ fontSize: '12px', color: '#666', textDecoration: 'line-through', fontWeight: 'normal' }}>MRP: {mrpPrice.toLocaleString("en-IN")}</span>
                     )}
-                    {discount !== null && discount > 0 && (
-                      <span style={{ fontSize: '11px', color: '#28a745', fontWeight: 'bold' }}>({discount}% OFF)</span>
-                    )}
-                  </div>
+                  </h4>
+                  {props.showdiscount !== false && mrpPrice > finalSellingPrice && discount !== null && discount > 0 && (
+                    <span style={{ fontSize: '11px', color: '#555a56ff', fontWeight: 'bold' }}>({discount}% OFF)</span>
+                  )}
                 </div>
               )}
             </div>

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

@@ -159,22 +159,24 @@ const ProductListViewTwo = (props: any) => {
           </div>
           <div className="card_bottom" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%' }}>
             <div className="price_container">
-              {finalSellingPrice !== 0 && (
+              {props.showsp !== false && finalSellingPrice !== 0 && (
                 <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
                   <div className="price_row" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                    <h4 className="selling_price" style={{ margin: 0 }}>SP: {finalSellingPrice.toLocaleString("en-IN")}</h4>
-                    {mrpPrice > finalSellingPrice && (
-                      <p className="mrp_price" style={{ fontSize: '11px', color: '#666', textDecoration: 'line-through', margin: '2px 0' }}>
-                        MRP: {mrpPrice.toLocaleString("en-IN")}
-                      </p>
-                    )}
-                    {discount !== null && discount > 0 && (
-                      <span className="discounts" style={{ fontSize: '11px', color: '#28a745', fontWeight: 'bold' }}>{discount}% OFF</span>
+                    <h4 className="selling_price" style={{ margin: 0, fontSize: '15px', fontWeight: '700', display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap', justifyContent: 'center' }}>
+                      <span>SP: {finalSellingPrice.toLocaleString("en-IN")} (incl of all tax)</span>
+                      {props.showdiscount !== false && mrpPrice > finalSellingPrice && (
+                        <span style={{ fontSize: '12px', color: '#666', textDecoration: 'line-through', fontWeight: 'normal' }}>MRP: {mrpPrice.toLocaleString("en-IN")}</span>
+                      )}
+                    </h4>
+                    {props.showdiscount !== false && mrpPrice > finalSellingPrice && (
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginTop: '2px' }}>
+                        {discount !== null && discount > 0 && (
+                          <span className="discounts" style={{ fontSize: '11px', color: '#28a745', fontWeight: 'bold' }}>{discount}% OFF</span>
+                        )}
+                        <p className="save_amount" style={{ margin: 0, fontSize: '11px', fontWeight: '500' }}>Save {(mrpPrice - finalSellingPrice).toLocaleString("en-IN")}</p>
+                      </div>
                     )}
                   </div>
-                  {mrpPrice > finalSellingPrice && (
-                    <p className="save_amount" style={{ margin: '2px 0 0 0', fontSize: '11px', fontWeight: '500' }}>Save {(mrpPrice - finalSellingPrice).toLocaleString("en-IN")}</p>
-                  )}
                 </div>
               )}
             </div>