diff --git a/graphql/directives.graphql b/graphql/directives.graphql new file mode 100644 index 0000000..813a76b --- /dev/null +++ b/graphql/directives.graphql @@ -0,0 +1 @@ +directive @withSegment on FIELD_DEFINITION diff --git a/graphql/schema.graphql b/graphql/schema.graphql index 302053e..6b5b19e 100644 --- a/graphql/schema.graphql +++ b/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 } diff --git a/manifest.json b/manifest.json index 694fede..a1205a3 100644 --- a/manifest.json +++ b/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": [ { diff --git a/node/package.json b/node/package.json index d0b15c1..e408559 100644 --- a/node/package.json +++ b/node/package.json @@ -15,7 +15,6 @@ "typescript": "3.9.7", "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles", "vtex.device-detector": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.device-detector@0.2.6/public/@types/vtex.device-detector", - "vtex.mega-menu": "https://megamenubugs--vtexlatam.myvtex.com/_v/private/typings/linked/v1/vtex.mega-menu@2.7.0+build1660276857/public/@types/vtex.mega-menu", "vtex.native-types": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.native-types@0.8.0/public/@types/vtex.native-types", "vtex.store-drawer": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-drawer@0.16.2/public/@types/vtex.store-drawer", "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons", diff --git a/react/FormComponent.tsx b/react/FormComponent.tsx index 4ae0996..80fb1b3 100644 --- a/react/FormComponent.tsx +++ b/react/FormComponent.tsx @@ -90,6 +90,7 @@ const FormComponent: FC = (props) => { id: responseForm.firstLevel ? responseForm.firstLevel : responseForm.id, }, fetchPolicy: 'no-cache', + ssr: true, }) const btnSave = formatIOMessage({ diff --git a/react/MegaMenu/State.ts b/react/MegaMenu/State.ts index 858cd77..7ff9dcd 100644 --- a/react/MegaMenu/State.ts +++ b/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 } diff --git a/react/MegaMenu/components/HorizontalMenu.tsx b/react/MegaMenu/components/HorizontalMenu.tsx index 149c6ab..3e087bb 100644 --- a/react/MegaMenu/components/HorizontalMenu.tsx +++ b/react/MegaMenu/components/HorizontalMenu.tsx @@ -138,49 +138,62 @@ const HorizontalMenu: FC< return blocks }, []) - return isOpenMenu && openOnly === orientation ? ( - + + ) : null }) diff --git a/react/MegaMenu/components/Item.tsx b/react/MegaMenu/components/Item.tsx index 5df57e5..2b36e20 100644 --- a/react/MegaMenu/components/Item.tsx +++ b/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 = 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 = observer((props) => { ) - console.info(rootPath) - console.info({ ...rest }) - return ( // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
= observer((props) => { {content} ) ) : ( - + {content} )} diff --git a/react/MegaMenu/components/Submenu.tsx b/react/MegaMenu/components/Submenu.tsx index 2c3bd14..0bd467e 100644 --- a/react/MegaMenu/components/Submenu.tsx +++ b/react/MegaMenu/components/Submenu.tsx @@ -53,31 +53,29 @@ const Submenu: FC = observer((props) => { const [showBtnCat, setShowBtnCat] = useState(false) - const seeAllLink = (to: string, level = 1, className?: string) => { - return ( -
( +
1 && 'mt4 mb6 t-body', + className + )} + > + 1 && 'mt4 mb6 t-body', - className + handles.seeAllLink, + 'link underline fw7 c-on-base' )} + onClick={() => { + if (closeMenu) closeMenu(false) + }} > - { - if (closeMenu) closeMenu(false) - }} - > - {formatIOMessage({ id: messages.seeAllTitle.id, intl })} - -
- ) - } + {formatIOMessage({ id: messages.seeAllTitle.id, intl })} + +
+ ) const subCategories = (items: MenuItem[]) => { return items @@ -100,10 +98,8 @@ const Submenu: FC = observer((props) => { const items = useMemo( () => { - if (!departmentActive) return - - if (departmentActive.menu) { - if (departmentActive.menu.length > 1) { + if (departmentActive?.menu) { + if (departmentActive?.menu.length > 1) { setShowBtnCat(true) } else { setShowBtnCat(false) @@ -124,6 +120,12 @@ const Submenu: FC = observer((props) => { return (
0 + ? 'block' + : 'none', + }} className={classNames( applyModifiers( orientation === 'horizontal' && openOnly === 'horizontal' @@ -131,11 +133,9 @@ const Submenu: FC = observer((props) => { : handles.submenuItemVertical, collapsibleStates[category.id] ? 'isOpen' : 'isClosed' ), - (orientation === 'vertical' || openOnly === 'vertical') && + orientation === 'vertical' && 'c-on-base bb b--light-gray mv0 ph5', - (orientation === 'vertical' || openOnly === 'vertical') && - i === 0 && - 'bt', + orientation === 'vertical' && i === 0 && 'bt', collapsibleStates[category.id] && 'bg-near-white' )} > @@ -219,54 +219,42 @@ const Submenu: FC = observer((props) => { ) return ( - <> - {departmentActive && ( - <> -

- {departmentActive.name} - {orientation === 'horizontal' && - openOnly === 'horizontal' && - showBtnCat ? ( - seeAllLink(departmentActive.slug, 1, 't-small ml7') - ) : ( -
- )} -

- -
- {orientation === 'horizontal' && openOnly === 'horizontal' ? ( - <> - {items}{' '} - - - ) : ( - <> - {items} - {/* showBtnCat ? seeAllLink(departmentActive.slug) :
*/} - - )} +
+

+ {departmentActive?.name} + {orientation === 'horizontal' && ( +
+ {seeAllLink(departmentActive?.slug, 1, 't-small ml7')}
- - )} - + )} +

+ +
+ {orientation === 'horizontal' ? ( + <> + {items}{' '} + + + ) : ( + <> + {items} + {showBtnCat ? seeAllLink(departmentActive?.slug) :
} + + )} +
+
) }) diff --git a/react/MegaMenu/components/TriggerButton.tsx b/react/MegaMenu/components/TriggerButton.tsx index 9838b01..5eddc9e 100644 --- a/react/MegaMenu/components/TriggerButton.tsx +++ b/react/MegaMenu/components/TriggerButton.tsx @@ -64,6 +64,7 @@ const TriggerButton: FC = observer((props) => { data-id={BUTTON_ID} className={classNames(styles.triggerContainer, 'pointer')} onClick={() => openMenu((v) => !v)} + onMouseEnter={() => openMenu((v) => !v)} > = observer((props) => { )}
- {departmentActive && departmentActiveHasCategories && ( -
- -
- )} +
+ +
) : null }) diff --git a/react/MegaMenu/wrapper.tsx b/react/MegaMenu/wrapper.tsx index a266b03..0fbc7b4 100644 --- a/react/MegaMenu/wrapper.tsx +++ b/react/MegaMenu/wrapper.tsx @@ -1,6 +1,8 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import React, { useEffect, useState } from 'react' import { useQuery } from 'react-apollo' import { useDevice } from 'vtex.device-detector' +import { canUseDOM } from 'vtex.render-runtime' import GET_MENUS from '../graphql/queries/getMenus.graphql' import GET_SETTINGS from '../graphql/queries/getSettings.graphql' @@ -13,10 +15,7 @@ const Wrapper: StorefrontFunctionComponent = (props) => { const { openOnly } = props const { isMobile } = useDevice() const { data } = useQuery(GET_MENUS, { - fetchPolicy: 'no-cache', - variables: { - isMobile, - }, + ssr: true, }) const { data: dataSettings } = useQuery(GET_SETTINGS, { @@ -29,8 +28,7 @@ const Wrapper: StorefrontFunctionComponent = (props) => { const currentOrientation: Orientation = isMobile ? 'vertical' : 'horizontal' - useEffect(() => { - // eslint-disable-next-line vtex/prefer-early-return + const initMenu = () => { if (data?.menus.length) { setConfig({ ...props, @@ -38,7 +36,14 @@ const Wrapper: StorefrontFunctionComponent = (props) => { }) setDepartments(data.menus) } - // eslint-disable-next-line react-hooks/exhaustive-deps + } + + if (!canUseDOM) { + initMenu() + } + + useEffect(() => { + initMenu() }, [data]) useEffect(() => {