tee3apps-cms-sdk-react 0.0.20 → 0.0.22

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

@@ -2,11 +2,21 @@ import React from 'react';
 import type { ComponentProps } from '../../types';
 
 const TextComponent: React.FC<{ props: ComponentProps }> = ({ props }) => {
-  const { text, style } = props;
+  const { text, style, linktype, link, product, page, height, mode } = props;
+
+  // Extract text content - handle both old and new structure
+  const textContent = typeof text === 'string' ? text : text?.all || '';
 
   const tagName = style?.headingTag ?? 'p';
 
- 
+  // Get current device mode (default to web)
+  const currentMode = mode?.web || {};
+
+  // Check if currentMode has height and width properties (ImageModeProps)
+  const hasDimensions = 'height' in currentMode && 'width' in currentMode;
+
+  // Get text alignment, default to 'left' if not specified
+  const textAlignment: React.CSSProperties['textAlign'] = (style?.textAlign as React.CSSProperties['textAlign']) || 'left';
 
   const textStyle = {
     fontSize: style?.fontSize ? `${style.fontSize}px` : '16px',
@@ -15,16 +25,19 @@ const TextComponent: React.FC<{ props: ComponentProps }> = ({ props }) => {
     textDecoration: style?.fontStyle?.isUnderLine ? 'underline' : 'none',
     textDecorationLine: style?.fontStyle?.isStrikeThrough ? 'line-through' : 'none',
     color: style?.fontColor || '#000',
-    textAlign: style?.textAlign || 'left',
+    textAlign: textAlignment,
     fontFamily: style?.fontFamily || 'inherit',
-    margin: 5,
+    height: height || (hasDimensions ? currentMode.height : 'auto'),
+    width: hasDimensions ? currentMode.width : '100%',
+    margin: 0,
+    // padding: 0,
     wordWrap: "break-word",
     overflowWrap: "break-word",
     maxWidth: "100%",
     whiteSpace: "normal",
-    width: "100%",
     boxSizing: "border-box",
     wordBreak: "break-word",
+    padding: '5px',
   };
 
   // ✅ Build the dynamic link URL
@@ -44,8 +57,8 @@ const TextComponent: React.FC<{ props: ComponentProps }> = ({ props }) => {
         if (!code) return null;
 
         return pdType === 'VARIANT'
-          ? `/variant/${code}`
-          : `model/${code}`;
+          ? `/${code}`
+          : `/model/${code}`;
       case 'TAG':
         return `/tag/${linkData.tag?.code}`;
       case 'PAGE':
@@ -60,7 +73,7 @@ const TextComponent: React.FC<{ props: ComponentProps }> = ({ props }) => {
   const textElement = React.createElement(
     tagName,
     { style: textStyle },
-    text
+    textContent
   );
 
   // ✅ Wrap text in anchor tag if link is present
@@ -73,13 +86,14 @@ const TextComponent: React.FC<{ props: ComponentProps }> = ({ props }) => {
         wordWrap: "break-word",
         overflowWrap: "break-word",
         boxSizing: "border-box",
+        textAlign: textAlignment,
       }}>
         <a
           href={url}
           target={props?.linktype=='EXTERNAL' ? props?.link?.target :'_self'}
           style={{
             textDecoration: 'none',
-            display: "inline-block",
+            display: "block",
             width: "100%",
             maxWidth: "100%",
             boxSizing: "border-box",
@@ -104,7 +118,7 @@ const TextComponent: React.FC<{ props: ComponentProps }> = ({ props }) => {
       wordWrap: "break-word",
       overflowWrap: "break-word",
       boxSizing: "border-box",
-      padding: '20px'
+      textAlign: textAlignment,
     }}>
       {textElement}
     </div>

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

@@ -90,28 +90,50 @@ const VideoComponent: React.FC<VideoComponentMainProps> = ({
   const getCurrentMode = () => {
     switch (deviceMode) {
       case 'mobileweb':
-        return props.mode.mobileweb;
+        return props.mode?.mobileweb;
       case 'mobileapp':
-        return props.mode.mobileapp;
+        return props.mode?.mobileapp;
       case 'tablet':
-        return props.mode.tablet;
+        return props.mode?.tablet;
       case 'web':
       default:
-        return props.mode.web;
+        return props.mode?.web;
     }
   };
 
   const currentMode = getCurrentMode();
   const video = props.videos;
 
-  const containerHeight =  boxHeight;
+  // Don't render if no video data is available
+  if (!video || !video.url || video.url === '') {
+    return (
+      <div
+        className="image-box"
+        style={{
+          borderRadius: `${currentMode?.borderRadius ?? 0}px`,
+          height: boxHeight,
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#f0f0f0',
+          color: '#999',
+          fontSize: '14px'
+        }}
+      >
+        No video available
+      </div>
+    );
+  }
+
+  const containerHeight = boxHeight;
 
   const renderPlayer = () => {
     const commonStyle: React.CSSProperties = {
       width: '100%',
       height: '100%',
       border: 0,
-      borderRadius: `${currentMode.borderRadius}px`,
+      borderRadius: `${currentMode?.borderRadius ?? 0}px`,
       objectFit: 'contain',
     };
 
@@ -120,7 +142,7 @@ const VideoComponent: React.FC<VideoComponentMainProps> = ({
       const src = id ? `https://www.youtube.com/embed/${id}` : video.url;
       return (
         <iframe
-          title={video.alt || 'YouTube video'}
+          title={video.alt ?? 'YouTube video'}
           src={src}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
           allowFullScreen
@@ -134,7 +156,7 @@ const VideoComponent: React.FC<VideoComponentMainProps> = ({
       const src = id ? `https://player.vimeo.com/video/${id}` : video.url;
       return (
         <iframe
-          title={video.alt || 'Vimeo video'}
+          title={video.alt ?? 'Vimeo video'}
           src={src}
           allow="autoplay; fullscreen; picture-in-picture"
           allowFullScreen
@@ -148,7 +170,7 @@ const VideoComponent: React.FC<VideoComponentMainProps> = ({
       const src = id ? `https://www.dailymotion.com/embed/video/${id}` : video.url;
       return (
         <iframe
-          title={video.alt || 'Dailymotion video'}
+          title={video.alt ?? 'Dailymotion video'}
           src={src}
           allow="autoplay; fullscreen; picture-in-picture"
           allowFullScreen
@@ -165,7 +187,7 @@ const VideoComponent: React.FC<VideoComponentMainProps> = ({
         playsInline
         controls={video.controls !== false}
         loop={video.loop === true}
-        style={{ width: '100%', height: '100%', borderRadius: `${currentMode.borderRadius}px` }}
+        style={{ width: '100%', height: '100%', borderRadius: `${currentMode?.borderRadius ?? 0}px` }}
         poster={typeof video.thumbnail === 'string' ? video.thumbnail : undefined}
       >
         <source src={`${Linodeurl}${video.url}`} />
@@ -177,7 +199,7 @@ const VideoComponent: React.FC<VideoComponentMainProps> = ({
     <div
       className="image-box"
       style={{
-        borderRadius: `${currentMode.borderRadius}px`,
+        borderRadius: `${currentMode?.borderRadius ?? 0}px`,
         height: containerHeight,
         objectFit: 'contain',