tee3apps-cms-sdk-react 0.0.27 → 0.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tee3apps-cms-sdk-react",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "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

@@ -63,7 +63,7 @@ const Page = ({data}:any) => {
           key={boxIndex} 
           props={box.props} 
           deviceMode={deviceMode}
-          autoAdjustForImages={false}
+          autoAdjustForImages={true}
         >
           {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 = () => {

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

@@ -335,6 +335,11 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
             e.currentTarget.style.transform = 'translateY(0)';
             e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
           }}
+          onClick={() => {
+            if (product.code) {
+              window.location.href = `/${product.code}`;
+            }
+          }}
         >
           <div style={{ 
             height: imageHeight, 

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

@@ -548,8 +548,8 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 				{/* Product Image */}
 				<div className="product-image-container">
 					<img
-						src={getImageUrl(product.image?.url || '')}
-						alt={getDisplayText(product.name) || getDisplayText(product.image?.alt) || ''}
+						src={getImageUrl(product.image?.url || product?.image?.all?.url || '')}
+						alt={getDisplayText(product.name) || getDisplayText(product.image?.alt) || getDisplayText(product.image?.all?.alt) || getDisplayText(product.image?.alt) || ''}
 						className="product-image"
 					/>
 				</div>
@@ -627,10 +627,11 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 			</>
 		);
 		
+		const productCode = typeof product.code === 'string' ? product.code : getDisplayText(product.code) || product.sku || '';
 		return (
-			<div className={`product-card ${cardMode}`}>
+			<a href={productCode ? `/${productCode}` : '#'} className={`product-card ${cardMode}`} style={{ textDecoration: 'none', color: 'inherit' }}>
 				{cardContent}
-			</div>
+			</a>
 		);
 	};