tee3apps-cms-sdk-react 0.0.19 → 0.0.22

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

@@ -77,33 +77,36 @@ const ImageComponent: React.FC<ImageComponentMainProps> = ({
       case 'PRODUCT': {
         const pdType = element.product?.pd_type;
         const code =
-          element.product?.pd_id?.code ||
-          element.product?.code ||
+          element.product?.pd_id?.code ??
+          element.product?.code ??
           element.product?.product_data?.code;
 
-        if (!code) return null;
+        // Check for empty string as well as null/undefined
+        if (!code || code === '') return null;
 
         return pdType === 'VARIANT'
-        ? `/variant/${code}`
-        : `model/${code}`;
+        ? `/${code}`
+        : `/model/${code}`;
       }
 
       case 'TAG': {
-        const tagCode =  element.tag?.code;
-        if (!tagCode) return null;
+        const tagCode = element.tag?.code;
+        // Check for empty string as well as null/undefined
+        if (!tagCode || tagCode === '') return null;
         // return `/${tagCode}/s?type=tag`;
          return `/tag/${tagCode}`;
       }
 
       case 'PAGE': {
-        const pageId = element.page?._id || element.page?.code;
+        const pageId = element.page?._id ?? element.page?.code;
         const pgType = element.page?.pg_type;
-        if (!pageId || !pgType) return null;
+        // Check for empty string as well as null/undefined
+        if (!pageId || pageId === '' || !pgType || pgType === '') return null;
         return `/page/${pageId}?type=${pgType}`;
       }
 
       default:
-        return element.slug || null;
+        return element.slug ?? null;
     }
   };
 
@@ -122,9 +125,34 @@ const ImageComponent: React.FC<ImageComponentMainProps> = ({
   };
 
   const currentMode = getCurrentMode();
+  const containerHeight = boxHeight === 'auto' ? 'auto' : boxHeight;
   const link = bannerLink(props);
-  const imageUrl = `${Linodeurl}${props.images?.url || props.images?.all?.url}`;
-  const altText = props.images.alt || '';
+  
+  // Use nullish coalescing to safely access image properties
+  const imageUrl = `${Linodeurl}${props.images?.url ?? props.images?.all?.url ?? ''}`;
+  const altText = props.images?.alt ?? props.images?.all?.alt ?? '';
+
+  // Don't render if no image URL is available
+  if (!props.images || (!props.images?.url && !props.images?.all?.url)) {
+    return (
+      <div
+        className="image-box"
+        style={{
+          borderRadius: `${currentMode?.borderRadius ?? 0}px`,
+          height: containerHeight,
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#f0f0f0',
+          color: '#999',
+          fontSize: '14px'
+        }}
+      >
+        No image available
+      </div>
+    );
+  }
 
   const imageElement = (
     <img
@@ -132,7 +160,13 @@ const ImageComponent: React.FC<ImageComponentMainProps> = ({
       alt={altText}
       className="fitted-image"
       style={{ 
-        cursor: link ? 'pointer' : 'default'
+        cursor: link ? 'pointer' : 'default',
+        objectFit: 'fill',
+        width: '100%',
+        height: '100%',
+        display: 'block',
+        minWidth: 0,
+        minHeight: 0
       }}
     />
   );
@@ -141,21 +175,42 @@ const ImageComponent: React.FC<ImageComponentMainProps> = ({
     <div
       className="image-box"
       style={{
-        borderRadius: `${currentMode.borderRadius}px`,
+        borderRadius: `${currentMode?.borderRadius ?? 0}px`,
+        height: containerHeight === 'auto' ? '100%' : containerHeight,
         width: '100%',
         overflow: 'hidden',
+        position: 'relative'
       }}
     >
       {link ? (
         <a
           href={link}
-          target={props?.linktype=='EXTERNAL' ? props?.link?.target :'_self'}
-          style={{ display: 'block', width: '100%' }}
+          target={props?.linktype === 'EXTERNAL' ? props?.link?.target ?? '_blank' : '_self'}
+          style={{ 
+            display: 'block', 
+            width: '100%', 
+            height: '100%',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0
+          }}
         >
           {imageElement}
         </a>
       ) : (
-        imageElement
+        <div style={{ 
+          width: '100%', 
+          height: '100%',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        }}>
+          {imageElement}
+        </div>
       )}
     </div>
   );

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

@@ -73,8 +73,8 @@ const LottieComponent: React.FC<LottieComponentMainProps> = ({ props, deviceMode
         if (!code) return null;
 
         return pdType === 'VARIANT'
-          ? `/${code}/s?type=variant`
-          : `/${code}/s?type=model`;
+          ? `/${code}`
+          : `/model/${code}`;
       }
 
       case 'TAG': {
@@ -155,8 +155,8 @@ const LottieComponent: React.FC<LottieComponentMainProps> = ({ props, deviceMode
    >
      <div
       style={{
-        width: '100%',
-        height: '100%',
+        width: currentMode.width,
+        height: currentMode.height,
         display: 'inline-block',
         backgroundColor: 'white',
         cursor: isClickable ? 'pointer' : 'default',
@@ -168,7 +168,10 @@ const LottieComponent: React.FC<LottieComponentMainProps> = ({ props, deviceMode
           animationData={animationData}
           loop={currentMode.loop}
           autoplay={currentMode.autoplay}
-          style={{ width: '100%', height: '100%' }}
+          style={{ 
+            width: currentMode.width, 
+            height: currentMode.height
+          }}
         />
       )}
       {!animationData && !error && (
@@ -182,8 +185,8 @@ const LottieComponent: React.FC<LottieComponentMainProps> = ({ props, deviceMode
   ):(
        <div
       style={{
-        width: '100%',
-        height: '100%',
+        width: currentMode.width,
+        height: currentMode.height,
         display: 'inline-block',
         backgroundColor: 'white',
         cursor: isClickable ? 'pointer' : 'default',
@@ -195,7 +198,10 @@ const LottieComponent: React.FC<LottieComponentMainProps> = ({ props, deviceMode
           animationData={animationData}
           loop={currentMode.loop}
           autoplay={currentMode.autoplay}
-          style={{ width: '100%', height: '100%' }}
+          style={{ 
+            width: currentMode.width, 
+            height: currentMode.height
+          }}
         />
       )}
       {!animationData && !error && (

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

@@ -1,13 +1,13 @@
 import React from 'react'
 
 interface NavTitle {
-  all: string
+  all?: string
 }
 
 interface NavItem {
   nl_id?: string
   id?: string
-  title: any
+  title: NavTitle | string
   url?: string
   target?: string
   framename?: string
@@ -46,17 +46,66 @@ interface NavigationComponentMainProps {
 
 const NavigationComponent: React.FC<NavigationComponentMainProps> = ({ props, boxHeight }) => {
   const root = props.navData?.[0]
-  const topItems: NavItem[] = root?.children || []
 
   const [openId, setOpenId] = React.useState<string | null>(null)
 
-  const buildHref = (item: NavItem) => item.url || '#'
-
   const Item = ({ item, depth = 0, isRoot = false }: { item: NavItem; depth?: number; isRoot?: boolean }) => {
     const hasChildren = Array.isArray(item.children) && item.children.length > 0
     const isTop = depth === 0 && !isRoot
     const layer = isRoot ? props.styles.primary : (isTop ? props.styles.primary : props.styles.secondary)
 
+    // Get title text - handle both string and object formats
+    const getTitle = () => {
+      if (typeof item.title === 'string') {
+        return item.title
+      }
+      return item.title?.all || ''
+    }
+
+    // Handle navigation/redirecting
+    const handleNavigation = (e: React.MouseEvent) => {
+      if (!item.url) return
+      
+      e.preventDefault()
+      e.stopPropagation()
+
+      const target = item.target || '_self'
+      const framename = item.framename || ''
+
+      if (target === '_framename') {
+        if (framename) {
+          // Navigate to a specific frame by name
+          // Try to find iframe element by name attribute first
+          const frameElement = document.querySelector(`iframe[name="${framename}"]`) as HTMLIFrameElement
+          if (frameElement) {
+            frameElement.src = item.url
+          } else {
+            // Try window.frames (for frameset-based frames)
+            const frames = window.frames as any
+            const frame = frames[framename]
+            if (frame) {
+              frame.location.href = item.url
+            } else {
+              // Fallback to opening in new window with framename
+              window.open(item.url, framename)
+            }
+          }
+        } else {
+          // If framename is empty, fallback to _self
+          window.location.href = item.url
+        }
+      } else if (target === '_blank') {
+        // Open in new tab/window
+        window.open(item.url, '_blank', 'noopener,noreferrer')
+      } else if (target === '_self' || !target) {
+        // Navigate in same window
+        window.location.href = item.url
+      } else {
+        // Custom target (could be a frame name or window name)
+        window.open(item.url, target)
+      }
+    }
+
     const baseStyles: React.CSSProperties = {
       display: 'flex',
       alignItems: 'center',
@@ -70,8 +119,13 @@ const NavigationComponent: React.FC<NavigationComponentMainProps> = ({ props, bo
       fontSize: isRoot ? 16 : (isTop ? 14 : 13),
       borderBottom: layer.isSeparator && !isTop && !isRoot ? `1px solid ${layer.color.separator}` : 'none',
       borderRadius: isRoot ? 8 : (isTop ? 6 : 4),
-      cursor: 'pointer',
-      fontWeight: isRoot ? 'bold' : 'normal'
+      cursor: item.url ? 'pointer' : (hasChildren ? 'pointer' : 'default'),
+      fontWeight: isRoot ? 'bold' : 'normal',
+      ...(isRoot && {
+        border: `1px solid ${layer.color.separator || '#e0e0e0'}`,
+        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+        transition: 'all 0.2s ease-in-out'
+      })
     }
 
     const [hover, setHover] = React.useState(false)
@@ -84,34 +138,35 @@ const NavigationComponent: React.FC<NavigationComponentMainProps> = ({ props, bo
       >
        {isRoot ? (
   <div
+    onClick={item.url ? handleNavigation : undefined}
     style={{
       ...baseStyles,
       background: hover ? layer.colorHover.background : layer.color.background,
       color: hover ? layer.colorHover.text : layer.color.text,
-      cursor: 'default'
+      cursor: item.url || hasChildren ? 'pointer' : 'default',
+      boxShadow: hover ? '0 4px 8px rgba(0,0,0,0.15)' : '0 2px 4px rgba(0,0,0,0.1)'
     }}
   >
-    <span>{item?.title}</span>
+    <span>{getTitle()}</span>
     {hasChildren && (
       <span style={{ color: layer.color.arrow || layer.color.text }}>{'▾'}</span>
     )}
   </div>
 ) : (
-  <a
-    href={buildHref(item)}
-    target={item.target || '_self'}
-    rel={item.target === '_blank' ? 'noopener noreferrer' : undefined}
+  <div
+    onClick={item.url ? handleNavigation : undefined}
     style={{
       ...baseStyles,
       background: hover ? layer.colorHover.background : layer.color.background,
-      color: hover ? layer.colorHover.text : layer.color.text
+      color: hover ? layer.colorHover.text : layer.color.text,
+      cursor: item.url || hasChildren ? 'pointer' : 'default'
     }}
   >
-    <span>{item?.title}</span>
+    <span>{getTitle()}</span>
     {hasChildren && (
       <span style={{ color: layer.color.arrow || layer.color.text }}>{isTop ? '▾' : '›'}</span>
     )}
-  </a>
+  </div>
 )}
 
 
@@ -152,16 +207,11 @@ const NavigationComponent: React.FC<NavigationComponentMainProps> = ({ props, bo
   return (
     <nav
       style={{
-        width: '100%',
-        display: 'flex',
+        display: 'inline-flex',
         alignItems: 'start',
-        paddingTop: '5px',
-        paddingLeft:'10px',
+        padding: '5px 10px',
         margin: '0px',        
-        background: props.styles.primary.color.background,
-        borderRadius: 8,
-        overflow: 'visible',
-        height: boxHeight
+        overflow: 'visible'
       }}
     >
       {/* Render root node first */}
@@ -173,6 +223,3 @@ const NavigationComponent: React.FC<NavigationComponentMainProps> = ({ props, bo
 }
 
 export default NavigationComponent
-
-
-

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

@@ -7,7 +7,7 @@ export interface RichTextComponentProps {
 }
 
 const RichTextComponent: React.FC<{ props: RichTextComponentProps }> = ({ props }) => {
-  const htmlContent = props?.content?.all || '';
+  const htmlContent = props?.content?.all || props?.content;
 
   return (
     <div