goobs-frontend 0.7.70 → 0.7.71

package/src/components/Nav/VerticalVariant/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React from 'react'
+import React, { useState, useCallback } from 'react'
 import {
   Drawer,
   Box,
@@ -11,6 +11,7 @@ import {
   AccordionSummary,
   AccordionDetails,
   List,
+  SelectChangeEvent,
 } from '@mui/material'
 import Dropdown from '../../Dropdown'
 import Searchbar from '../../Searchbar'
@@ -26,47 +27,23 @@ import {
 } from '../../../styles/palette'
 import { Typography } from './../../Typography'
 
-/**
- * Props for the VerticalVariant component.
- */
 export interface VerticalVariantProps {
-  /** An array of navigation items, sub-navigation items, or views. */
   items: (NavProps | SubNav | View)[]
-  /** Determines whether to show the search bar. */
   showSearchbar: boolean
-  /** Determines whether to show the dropdown. */
   showDropdown: boolean
-  /** Determines whether to show the title. */
   showTitle: boolean
-  /** Determines whether to show a divider line. */
   showLine: boolean
-  /** The title of the vertical navigation. */
   verticalNavTitle: string
-  /** The label for the dropdown. */
   dropdownLabel: string
-  /** The label for the search bar. */
   searchbarLabel: string
-  /** The anchor position of the drawer ('left' or 'right'). */
   anchor: 'left' | 'right'
-  /** An array of expanded navigation items. */
   expandedNavs: string[]
-  /** Function to set the expanded navigation items. */
   setExpandedNavs: React.Dispatch<React.SetStateAction<string[]>>
-  /** An array of expanded sub-navigation items. */
   expandedSubnavs: string[]
-  /** Function to set the expanded sub-navigation items. */
   setExpandedSubnavs: React.Dispatch<React.SetStateAction<string[]>>
-  /** The width of the vertical navigation drawer. */
   verticalNavWidth: string
 }
 
-/**
- * VerticalVariant component that renders a vertical navigation drawer.
- * It supports nested navigation items, sub-navigation items, and views.
- *
- * @param {VerticalVariantProps} props - The props for the VerticalVariant component.
- * @returns {JSX.Element} The rendered VerticalVariant component.
- */
 function VerticalVariant({
   items,
   showSearchbar,
@@ -84,174 +61,60 @@ function VerticalVariant({
   verticalNavWidth,
 }: VerticalVariantProps) {
   const router = useRouter()
+  const [selectedNav, setSelectedNav] = useState<string | null>(null)
 
-  /**
-   * Extracts navigation options from the items array.
-   */
   const navOptions = items
     .filter((item): item is NavProps => 'title' in item && 'subnavs' in item)
-    .map(nav => nav.title ?? '')
+    .map(nav => ({ value: nav.title ?? '', label: nav.title ?? '' }))
 
-  /**
-   * Handles click events on navigation items.
-   * Supports different trigger types: route and onClick.
-   *
-   * @param {NavProps} nav - The navigation item that was clicked.
-   */
-  const handleNavClick = (nav: NavProps) => {
-    console.log('Clicked Nav:', nav.title)
-    if (nav.trigger === 'route') {
-      if (nav.route) {
-        router.push(nav.route)
+  const handleNavClick = useCallback(
+    (nav: NavProps) => {
+      console.log('Clicked Nav:', nav.title)
+      if (nav.trigger === 'route') {
+        if (nav.route) {
+          router.push(nav.route)
+        }
+      } else if (nav.trigger === 'onClick') {
+        if (nav.onClick) {
+          nav.onClick()
+        }
       }
-    } else if (nav.trigger === 'onClick') {
-      if (nav.onClick) {
-        nav.onClick()
-      }
-    }
-  }
+    },
+    [router]
+  )
 
-  /**
-   * Recursively renders navigation items, sub-navigation items, and views.
-   *
-   * @param {NavProps | SubNav | View} item - The item to render.
-   * @param {number} level - The nesting level of the item.
-   * @param {string} [activeAndHoverColor] - The color to use for active and hover states.
-   * @returns {JSX.Element | null} The rendered item or null if the item type is not recognized.
-   */
-  const renderItem = (
-    item: NavProps | SubNav | View,
-    level: number,
-    activeAndHoverColor = semiTransparentWhite.main
-  ) => {
-    if ('title' in item && 'subnavs' in item) {
-      const nav = item as NavProps
-      const isExpanded = expandedNavs.includes(nav.title ?? '')
-      return (
-        <MuiAccordion
-          key={nav.title}
-          disableGutters
-          elevation={0}
-          square
-          expanded={isExpanded}
-          onChange={() => {
-            if (isExpanded) {
-              setExpandedNavs(expandedNavs.filter(title => title !== nav.title))
-            } else {
-              setExpandedNavs([...expandedNavs, nav.title ?? ''])
-            }
-          }}
-          sx={{
-            pl: 0,
-            backgroundColor: 'transparent',
-            '.MuiAccordionSummary-root': {
-              pl: 0,
-            },
-            '&:before': {
-              display: 'none',
-            },
-          }}
-        >
-          <AccordionSummary
-            expandIcon={
-              nav.subnavs && nav.subnavs.length > 0 ? (
-                <ExpandMoreIcon
-                  sx={{
-                    color: 'transparent',
-                  }}
-                />
-              ) : null
-            }
-            aria-controls="accordion-content"
-            id="accordion-header"
-            sx={{
-              boxSizing: 'border-box',
-              border: 'none',
-              py: '6px',
-              mt: 2,
-              ml: 3,
-              minHeight: 0,
-              height: '32px',
-              '& .MuiAccordionSummary-content': {
-                m: 0,
-              },
-              '&:hover': {
-                '& .MuiSvgIcon-root': {
-                  color: white.main,
-                },
-              },
-              '&.Mui-expanded': {
-                '& .MuiSvgIcon-root': {
-                  color: white.main,
-                },
-              },
-            }}
-            onClick={() => handleNavClick(nav)}
-          >
-            <Typography
-              fontvariant="merrih5"
-              fontcolor={white.main}
-              text={nav.title ?? ''}
-              marginLeft={4 * level}
-            />
-          </AccordionSummary>
-          <AccordionDetails sx={{ border: 'none', p: 0 }}>
-            <List sx={{ py: 0 }}>
-              {nav.subnavs?.map(subnav =>
-                renderItem(subnav, level + 1, activeAndHoverColor)
-              )}
-            </List>
-          </AccordionDetails>
-        </MuiAccordion>
-      )
-    } else if ('title' in item && 'views' in item) {
-      const subnav = item as SubNav
-      const isExpanded = expandedSubnavs.includes(subnav.title ?? '')
-      if (subnav.views?.length === 0) {
-        return (
-          <Link
-            key={subnav.title}
-            style={{
-              textDecoration: 'none',
-              color: 'white',
-            }}
-            href={subnav.route ?? ''}
-          >
-            <MenuItem
-              sx={{
-                color: white.main,
-                ml: '25px',
-                '&:hover': {
-                  backgroundColor: activeAndHoverColor,
-                },
-                '&:active': {
-                  backgroundColor: activeAndHoverColor,
-                },
-              }}
-            >
-              <Typography
-                fontvariant="merrih6"
-                text={subnav.title ?? ''}
-                fontcolor={white.main}
-              />
-            </MenuItem>
-          </Link>
-        )
-      } else {
+  const handleDropdownChange = useCallback(
+    (event: SelectChangeEvent<unknown>) => {
+      const newValue = event.target.value as string
+      setSelectedNav(newValue)
+      console.log('Dropdown selection changed to:', newValue)
+    },
+    []
+  )
+
+  const renderItem = useCallback(
+    (
+      item: NavProps | SubNav | View,
+      level: number,
+      activeAndHoverColor = semiTransparentWhite.main
+    ) => {
+      if ('title' in item && 'subnavs' in item) {
+        const nav = item as NavProps
+        const isExpanded = expandedNavs.includes(nav.title ?? '')
         return (
           <MuiAccordion
-            key={subnav.title}
+            key={nav.title}
             disableGutters
             elevation={0}
             square
             expanded={isExpanded}
             onChange={() => {
               if (isExpanded) {
-                setExpandedSubnavs(
-                  expandedSubnavs.filter(title => title !== subnav.title)
+                setExpandedNavs(
+                  expandedNavs.filter(title => title !== nav.title)
                 )
               } else {
-                setExpandedSubnavs([...expandedSubnavs, subnav.title ?? ''])
+                setExpandedNavs([...expandedNavs, nav.title ?? ''])
               }
             }}
             sx={{
@@ -267,11 +130,13 @@ function VerticalVariant({
           >
             <AccordionSummary
               expandIcon={
-                <ExpandMoreIcon
-                  sx={{
-                    color: 'transparent',
-                  }}
-                />
+                nav.subnavs && nav.subnavs.length > 0 ? (
+                  <ExpandMoreIcon
+                    sx={{
+                      color: 'transparent',
+                    }}
+                  />
+                ) : null
               }
               aria-controls="accordion-content"
               id="accordion-header"
@@ -279,8 +144,8 @@ function VerticalVariant({
                 boxSizing: 'border-box',
                 border: 'none',
                 py: '6px',
-                mt: 0,
-                ml: '8px',
+                mt: 2,
+                ml: 3,
                 minHeight: 0,
                 height: '32px',
                 '& .MuiAccordionSummary-content': {
@@ -297,58 +162,177 @@ function VerticalVariant({
                   },
                 },
               }}
+              onClick={() => handleNavClick(nav)}
             >
               <Typography
-                fontvariant="merrih6"
+                fontvariant="merrih5"
                 fontcolor={white.main}
-                text={subnav.title ?? ''}
-                marginLeft={4}
+                text={nav.title ?? ''}
+                marginLeft={4 * level}
               />
             </AccordionSummary>
             <AccordionDetails sx={{ border: 'none', p: 0 }}>
               <List sx={{ py: 0 }}>
-                {subnav.views?.map(view =>
-                  renderItem(view, level + 1, activeAndHoverColor)
+                {nav.subnavs?.map(subnav =>
+                  renderItem(subnav, level + 1, activeAndHoverColor)
                 )}
               </List>
             </AccordionDetails>
           </MuiAccordion>
         )
-      }
-    } else if ('title' in item && 'route' in item) {
-      const view = item as View
-      return (
-        <Link
-          key={view.title}
-          style={{
-            textDecoration: 'none',
-            color: 'white',
-          }}
-          href={view.route ?? ''}
-        >
-          <MenuItem
-            sx={{
-              color: white.main,
-              pl: level + 6,
-              '&:hover': {
-                backgroundColor: activeAndHoverColor,
-              },
-              '&:active': {
-                backgroundColor: activeAndHoverColor,
-              },
+      } else if ('title' in item && 'views' in item) {
+        const subnav = item as SubNav
+        const isExpanded = expandedSubnavs.includes(subnav.title ?? '')
+        if (subnav.views?.length === 0) {
+          return (
+            <Link
+              key={subnav.title}
+              style={{
+                textDecoration: 'none',
+                color: 'white',
+              }}
+              href={subnav.route ?? ''}
+            >
+              <MenuItem
+                sx={{
+                  color: white.main,
+                  ml: '25px',
+                  '&:hover': {
+                    backgroundColor: activeAndHoverColor,
+                  },
+                  '&:active': {
+                    backgroundColor: activeAndHoverColor,
+                  },
+                }}
+              >
+                <Typography
+                  fontvariant="merrih6"
+                  text={subnav.title ?? ''}
+                  fontcolor={white.main}
+                />
+              </MenuItem>
+            </Link>
+          )
+        } else {
+          return (
+            <MuiAccordion
+              key={subnav.title}
+              disableGutters
+              elevation={0}
+              square
+              expanded={isExpanded}
+              onChange={() => {
+                if (isExpanded) {
+                  setExpandedSubnavs(
+                    expandedSubnavs.filter(title => title !== subnav.title)
+                  )
+                } else {
+                  setExpandedSubnavs([...expandedSubnavs, subnav.title ?? ''])
+                }
+              }}
+              sx={{
+                pl: 0,
+                backgroundColor: 'transparent',
+                '.MuiAccordionSummary-root': {
+                  pl: 0,
+                },
+                '&:before': {
+                  display: 'none',
+                },
+              }}
+            >
+              <AccordionSummary
+                expandIcon={
+                  <ExpandMoreIcon
+                    sx={{
+                      color: 'transparent',
+                    }}
+                  />
+                }
+                aria-controls="accordion-content"
+                id="accordion-header"
+                sx={{
+                  boxSizing: 'border-box',
+                  border: 'none',
+                  py: '6px',
+                  mt: 0,
+                  ml: '8px',
+                  minHeight: 0,
+                  height: '32px',
+                  '& .MuiAccordionSummary-content': {
+                    m: 0,
+                  },
+                  '&:hover': {
+                    '& .MuiSvgIcon-root': {
+                      color: white.main,
+                    },
+                  },
+                  '&.Mui-expanded': {
+                    '& .MuiSvgIcon-root': {
+                      color: white.main,
+                    },
+                  },
+                }}
+              >
+                <Typography
+                  fontvariant="merrih6"
+                  fontcolor={white.main}
+                  text={subnav.title ?? ''}
+                  marginLeft={4}
+                />
+              </AccordionSummary>
+              <AccordionDetails sx={{ border: 'none', p: 0 }}>
+                <List sx={{ py: 0 }}>
+                  {subnav.views?.map(view =>
+                    renderItem(view, level + 1, activeAndHoverColor)
+                  )}
+                </List>
+              </AccordionDetails>
+            </MuiAccordion>
+          )
+        }
+      } else if ('title' in item && 'route' in item) {
+        const view = item as View
+        return (
+          <Link
+            key={view.title}
+            style={{
+              textDecoration: 'none',
+              color: 'white',
             }}
+            href={view.route ?? ''}
           >
-            <Typography
-              fontvariant="merriparagraph"
-              text={view.title ?? ''}
-              fontcolor={white.main}
-            />
-          </MenuItem>
-        </Link>
-      )
-    }
-    return null
-  }
+            <MenuItem
+              sx={{
+                color: white.main,
+                pl: level + 6,
+                '&:hover': {
+                  backgroundColor: activeAndHoverColor,
+                },
+                '&:active': {
+                  backgroundColor: activeAndHoverColor,
+                },
+              }}
+            >
+              <Typography
+                fontvariant="merriparagraph"
+                text={view.title ?? ''}
+                fontcolor={white.main}
+              />
+            </MenuItem>
+          </Link>
+        )
+      }
+      return null
+    },
+    [
+      expandedNavs,
+      setExpandedNavs,
+      expandedSubnavs,
+      setExpandedSubnavs,
+      handleNavClick,
+    ]
+  )
 
   return (
     <Drawer
@@ -369,10 +353,7 @@ function VerticalVariant({
         },
       }}
     >
-      <Box
-        // @ts-ignore
-        px={`15px`}
-      >
+      <Box px={`15px`}>
         {showTitle && (
           <Box pt="0px" pb="0px">
             <Link
@@ -398,9 +379,7 @@ function VerticalVariant({
                 outlinecolor="none"
                 fontcolor={black.main}
                 shrunkfontcolor={white.main}
-                onChange={() => {
-                  console.log('Dropdown selection changed')
-                }}
+                onChange={handleDropdownChange}
               />
             )}
             {showSearchbar && (
@@ -428,7 +407,14 @@ function VerticalVariant({
           }}
         />
       )}
-      {items.map(item => renderItem(item, 0))}
+      {selectedNav
+        ? items
+            .filter(
+              (item): item is NavProps =>
+                'title' in item && item.title === selectedNav
+            )
+            .map(item => renderItem(item, 0))
+        : items.map(item => renderItem(item, 0))}
     </Drawer>
   )
 }

package/src/components/PricingTable/defaultconfig.tsx

@@ -31,6 +31,7 @@ const defaultConfig: PricingProps = {
   },
   // Configuration for package columns
   packagecolumns: {
+    packagenames: ['ThothOS', 'ThothOS Pro', 'ThothOS Enterprise'],
     columnconfig: {
       row: 1,
       column: 2,
@@ -43,7 +44,11 @@ const defaultConfig: PricingProps = {
   },
   // Configuration for monthly pricing
   monthlyprice: {
-    prices: 'Monthly Pricing - $10',
+    prices: [
+      'Monthly Pricing - $10',
+      'Monthly Pricing - $20',
+      'Monthly Pricing - $30',
+    ],
     columnconfig: {
       row: 2,
       column: 1,
@@ -56,7 +61,11 @@ const defaultConfig: PricingProps = {
   },
   // Configuration for annual pricing
   annualprice: {
-    annualprices: 'Annual Pricing - $100',
+    annualprices: [
+      'Annual Pricing - $100',
+      'Annual Pricing - $200',
+      'Annual Pricing - $300',
+    ],
     columnconfig: {
       row: 2,
       column: 2,
@@ -89,7 +98,7 @@ const defaultConfig: PricingProps = {
         alignment: 'left' as Alignment,
       },
       tiedtopackage: {
-        tiedtopackages: 'true',
+        tiedtopackages: ['true', 'true', 'true'],
         columnconfig: {
           row: 1,
           column: 2,
@@ -114,7 +123,7 @@ const defaultConfig: PricingProps = {
             alignment: 'left' as Alignment,
           },
           tiedtopackage: {
-            tiedtopackages: 'true',
+            tiedtopackages: ['true', 'true', 'true'],
             columnconfig: {
               row: 2,
               column: 2,
@@ -140,7 +149,7 @@ const defaultConfig: PricingProps = {
             alignment: 'left' as Alignment,
           },
           tiedtopackage: {
-            tiedtopackages: 'true',
+            tiedtopackages: ['true', 'true', 'true'],
             columnconfig: {
               row: 3,
               column: 2,
@@ -167,7 +176,7 @@ const defaultConfig: PricingProps = {
         alignment: 'left' as Alignment,
       },
       tiedtopackage: {
-        tiedtopackages: 'true',
+        tiedtopackages: ['true', 'true', 'true'],
         columnconfig: {
           row: 4,
           column: 2,
@@ -193,7 +202,7 @@ const defaultConfig: PricingProps = {
             alignment: 'left' as Alignment,
           },
           tiedtopackage: {
-            tiedtopackages: 'true',
+            tiedtopackages: ['true', 'true', 'true'],
             columnconfig: {
               row: 5,
               column: 2,
@@ -219,7 +228,7 @@ const defaultConfig: PricingProps = {
             alignment: 'left' as Alignment,
           },
           tiedtopackage: {
-            tiedtopackages: 'true',
+            tiedtopackages: ['true', 'true', 'true'],
             columnconfig: {
               row: 6,
               column: 2,
@@ -236,8 +245,12 @@ const defaultConfig: PricingProps = {
   ],
   // Configuration for button columns
   buttoncolumns: {
-    buttontexts: 'Learn More',
-    buttonlinks: '#goobs-frontend-unlimited',
+    buttontexts: ['Learn More', 'Learn More', 'Learn More'],
+    buttonlinks: [
+      '#goobs-frontend-unlimited',
+      '#goobs-frontend-unlimited',
+      '#goobs-frontend-unlimited',
+    ],
     columnconfig: {
       row: 7,
       column: 2,