tee3apps-cms-sdk-react 0.0.34 → 0.0.36

package/package.json

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

package/rollup.config-1772797822233.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var resolve = require('@rollup/plugin-node-resolve');
+var commonjs = require('@rollup/plugin-commonjs');
+var typescript = require('@rollup/plugin-typescript');
+var dts = require('rollup-plugin-dts');
+var terser = require('@rollup/plugin-terser');
+var peerDepsExternal = require('rollup-plugin-peer-deps-external');
+var postcss = require('rollup-plugin-postcss');
+
+const packageJson = require("./package.json");
+
+var rollup_config = [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      terser(),
+      postcss(),
+    ],
+    external: ["react", "react-dom"],
+  },
+  {
+    input: "src/index.ts",
+    output: [{ file: packageJson.types }],
+    plugins: [dts.default()],
+    external: [/\.css$/],
+  },
+];
+
+exports.default = rollup_config;

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} deviceMode={deviceMode} />;
+                          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/RowComponent.tsx

@@ -30,6 +30,7 @@ interface RowProps {
   nowrap: boolean;
   bgsize: React.CSSProperties['backgroundSize'];
   mode: DeviceModes;
+  idname:string;
 }
 
 interface RowComponentProps {
@@ -132,7 +133,8 @@ const getJustifyContent = (): React.CSSProperties['justifyContent'] => {
 };
 
   return (
-    <div 
+    <section 
+     id={props.idname}
       style={{
         minHeight: getRowMinHeight(),
         backgroundColor: props.bgColor,
@@ -159,7 +161,7 @@ const getJustifyContent = (): React.CSSProperties['justifyContent'] => {
       }}
     >
       {children}
-    </div>
+    </section>
   );
 };
 

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/RichTextComponent.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
 
 export interface RichTextComponentProps {
-  content: {
-    all: string;
+  content?: {
+    all?: string;
+  } | string;
+  mode?: {
+    [key: string]: {
+      content: string;
+    };
   };
 }
 
-const RichTextComponent: React.FC<{ props: RichTextComponentProps }> = ({ props }) => {
-  const htmlContent = props?.content?.all || props?.content;
+const RichTextComponent: React.FC<{ props: RichTextComponentProps; deviceMode?: string }> = ({ props, deviceMode = 'web' }) => {
+  const modeData = props?.mode?.[deviceMode] as { content?: string } | undefined;
+  const contentAll = typeof props?.content === 'string' ? props?.content : props?.content?.all;
+
+  const htmlContent = modeData?.content || contentAll || '';
 
   return (
     <div

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>