Load Mega Menu Items Server-Side

graphql/directives.graphql

@@ -0,0 +1 @@
+directive @withSegment on FIELD_DEFINITION

graphql/schema.graphql

@@ -1,6 +1,8 @@
 type Query {
   menus(isMobile: Boolean): [Menu]
-  menu(id: ID!): Menu
+    @cacheControl(scope: SEGMENT, maxAge: MEDIUM)
+    @withSegment
+  menu(id: ID!): Menu @cacheControl(scope: SEGMENT, maxAge: MEDIUM) @withSegment
   settings: [Settings]
   setting(id: ID!): Settings
 }

manifest.json

@@ -23,14 +23,17 @@
     "vtex.store-icons": "0.x",
     "vtex.device-detector": "0.x",
     "vtex.native-types": "0.x",
-    "vtex.store-drawer": "0.x"
+    "vtex.store-drawer": "0.x",
+    "vtex.render-runtime": "8.x"
   },
   "billingOptions": {
     "type": "free",
     "support": {
       "url": "https://support.vtex.com/hc/requests"
     },
-    "availableCountries": ["*"]
+    "availableCountries": [
+      "*"
+    ]
   },
   "policies": [
     {

node/package.json

@@ -15,7 +15,6 @@
     "typescript": "3.9.7",
     "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.css-handles",
     "vtex.device-detector": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.device-detector",
-    "vtex.mega-menu": "https://megamenubugs--vtexlatam.myvtex.com/_v/private/typings/linked/v1/[email protected]+build1660276857/public/@types/vtex.mega-menu",
     "vtex.native-types": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.native-types",
     "vtex.store-drawer": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-drawer",
     "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-icons",

react/FormComponent.tsx

@@ -90,6 +90,7 @@ const FormComponent: FC<FormComponentProps & InjectedIntlProps> = (props) => {
       id: responseForm.firstLevel ? responseForm.firstLevel : responseForm.id,
     },
     fetchPolicy: 'no-cache',
+    ssr: true,
   })
 
   const btnSave = formatIOMessage({

react/MegaMenu/State.ts

@@ -34,19 +34,18 @@ class MegaMenuState {
     }
   }
 
-  public getCategories = (departmentId?: string) => {
+  public getCategories = () => {
     let categories: DataMenu[] = []
-    let department: DataMenu | null | undefined
 
-    if (departmentId) {
-      department = this.departments.find((x) => x.id === departmentId)
-    } else {
-      department = this.departmentActive
+    if (this.departmentActive?.menu?.length) {
+      return this.departmentActive?.menu
     }
 
-    if (department?.menu?.length) {
-      categories = department.menu
-    }
+    this.departments.forEach((department: any) => {
+      if (department?.menu?.length) {
+        categories = categories.concat(department.menu)
+      }
+    })
 
     return categories
   }

react/MegaMenu/components/HorizontalMenu.tsx

@@ -138,49 +138,62 @@ const HorizontalMenu: FC<
     return blocks
   }, [])
 
-  return isOpenMenu && openOnly === orientation ? (
-    <nav
-      className={classNames(
-        handles.menuContainerNav,
-        'absolute left-0 bg-white bw1 bb b--muted-3 flex'
-      )}
-      ref={navRef}
+  return departmentItems?.length > 0 ? (
+    <div
+      style={{
+        display: isOpenMenu && openOnly === orientation ? 'block' : 'none',
+      }}
     >
-      <ul
+      <nav
         className={classNames(
-          styles.menuContainer,
-          'list ma0 pa0 pb3 br b--muted-4'
+          handles.menuContainerNav,
+          'absolute left-0 bg-white bw1 bb b--muted-3 flex'
         )}
+        ref={navRef}
       >
-        <h3 className="f4 fw7 c-on-base lh-copy ma0 pv5 ph5">
-          {formatIOMessage({ id: title, intl })}
-        </h3>
+        <ul
+          className={classNames(
+            styles.menuContainer,
+            'list ma0 pa0 pb3 br b--muted-4'
+          )}
+        >
+          <h3 className="f4 fw7 c-on-base lh-copy ma0 pv5 ph5">
+            {formatIOMessage({ id: title, intl })}
+          </h3>
+          {departments.length ? (
+            departmentItems
+          ) : (
+            <div className="flex flex-column justify-center ph5 lh-copy">
+              <Skeleton count={3} height={30} />
+            </div>
+          )}
+        </ul>
         {departments.length ? (
-          departmentItems
+          <div
+            className={classNames(styles.submenuContainer, 'pa5 w-100')}
+            style={{
+              display:
+                departments.length &&
+                departmentActive &&
+                departmentActiveHasCategories
+                  ? 'block'
+                  : 'none',
+            }}
+          >
+            <Submenu closeMenu={openMenu} />
+          </div>
         ) : (
-          <div className="flex flex-column justify-center ph5 lh-copy">
-            <Skeleton count={3} height={30} />
+          <div className="w-100" style={{ overflow: 'auto' }}>
+            <div className="w-30 mb4 ml4 mt5">
+              <Skeleton height={30} />
+            </div>
+            <div className={classNames(styles.submenuList, 'mh4 mb5')}>
+              {loaderBlocks}
+            </div>
           </div>
         )}
-      </ul>
-      {departments.length ? (
-        departmentActive &&
-        departmentActiveHasCategories && (
-          <div className={classNames(styles.submenuContainer, 'pa5 w-100')}>
-            <Submenu closeMenu={openMenu ?? 'horizontal'} openOnly={openOnly} />
-          </div>
-        )
-      ) : (
-        <div className="w-100" style={{ overflow: 'auto' }}>
-          <div className="w-30 mb4 ml4 mt5">
-            <Skeleton height={30} />
-          </div>
-          <div className={classNames(styles.submenuList, 'mh4 mb5')}>
-            {loaderBlocks}
-          </div>
-        </div>
-      )}
-    </nav>
+      </nav>
+    </div>
   ) : null
 })
 

react/MegaMenu/components/Item.tsx

@@ -3,7 +3,6 @@ import { observer } from 'mobx-react-lite'
 import React, { useMemo } from 'react'
 import type { FC } from 'react'
 import { useCssHandles } from 'vtex.css-handles'
-import { useRuntime } from 'vtex.render-runtime'
 import { Icon, IconCaret } from 'vtex.store-icons'
 
 import type { IconProps } from '../../shared'
@@ -39,22 +38,17 @@ const Item: FC<ItemProps> = observer((props) => {
     iconProps,
     iconPosition,
     typography = defaultTypography[level],
-    tabIndex,
     className,
     onClick,
     children,
     style,
     enableStyle,
-    closeMenu,
-    ...rest
   } = props
 
   // Only for level 1
   const isOpen = departmentActive?.id === id
   const hasLink = to && to !== '#'
 
-  const { rootPath } = useRuntime()
-
   const linkClassNames = classNames(
     handles.styledLink,
     'no-underline c-on-base w-100 pa0',
@@ -134,9 +128,6 @@ const Item: FC<ItemProps> = observer((props) => {
     </div>
   )
 
-  console.info(rootPath)
-  console.info({ ...rest })
-
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
@@ -150,7 +141,10 @@ const Item: FC<ItemProps> = observer((props) => {
           <span className={linkClassNames}>{content}</span>
         )
       ) : (
-        <a className={linkClassNames} href={`${window.location.origin}/${to}`}>
+        <a
+          className={linkClassNames}
+          href={`${window?.location?.origin}/${to}`}
+        >
           {content}
         </a>
       )}