feature: roland search redesign

manifest.json

@@ -71,7 +71,8 @@
     "vtex.modal-layout": "0.x",
     "vtex.condition-layout": "2.x",
     "vtex.product-highlights": "2.x",
-    "vtex.catalog-graphql": "1.x"
+    "vtex.catalog-graphql": "1.x",
+    "roland.m3-custom": "0.x"
   },
   "peerDependencies": {
     "vtex.wish-list": "1.x",

react/StickyLayoutObserver.ts

@@ -0,0 +1,3 @@
+import StickyLayoutObserver from './components/StickyLayoutObserver'
+
+export default StickyLayoutObserver

react/components/CollapsibleContent/index.tsx

@@ -1,5 +1,6 @@
 // Dependencies
 import React, { useState } from 'react'
+import { useDevice } from 'vtex.device-detector'
 import classNames from 'classnames'
 
 // Styles
@@ -10,30 +11,55 @@ import type { ReactNode } from 'react'
 
 interface CollapsibleContentProps {
   children: ReactNode
+  origin?: string
+  shouldCollapsed?: boolean
 }
 
-const CollapsibleContent = ({ children }: CollapsibleContentProps) => {
+const CollapsibleContent = ({
+  children,
+  origin,
+  shouldCollapsed = true,
+}: CollapsibleContentProps) => {
   const [isCollapsed, setIsCollapsed] = useState(true)
+  const { isMobile } = useDevice()
 
   const handleToggle = () => {
     setIsCollapsed(!isCollapsed)
   }
 
-  const containerClasses = classNames(styles.collapsibleContentContainer, {
-    [styles.collapsibleContentContainerOpen]: isCollapsed,
-  })
+  const containerClasses = classNames(
+    styles.collapsibleContentContainer,
+    {
+      [styles.collapsibleContentContainerOpen]: isCollapsed,
+    },
+    origin === 'search-seo' && styles['collapsible-content--search-seo']
+  )
 
   return (
     <div className={containerClasses}>
       {children}
-      <button
-        onClick={handleToggle}
-        className={styles.collapsibleContentButton}
-      >
-        {isCollapsed ? 'Ver mais' : 'Ver menos'}
-      </button>
+      {shouldCollapsed || isMobile ? (
+        <button
+          onClick={handleToggle}
+          className={styles.collapsibleContentButton}
+        >
+          {isCollapsed ? 'Ver mais' : 'Ver menos'}
+        </button>
+      ) : null}
     </div>
   )
 }
 
+CollapsibleContent.schema = {
+  title: 'Configuração - SEO',
+  type: 'object',
+  properties: {
+    shouldCollapsed: {
+      title: 'Exibir Ver mais',
+      type: 'boolean',
+      description: 'O texto possue mais que 4 linhas?',
+    },
+  },
+}
+
 export default CollapsibleContent

react/components/CollapsibleContent/styles.css

@@ -2,6 +2,17 @@
   max-width: 720px;
   width: 100%;
 }
+.collapsible-content--collection-seo.collapsibleContentContainer {
+  max-width: 90rem;
+  margin: 0 auto 3rem;
+  padding: 0 2rem;
+}
+.collapsible-content--search-seo.collapsibleContentContainer {
+  max-width: 90rem;
+  margin: 0 auto 3rem;
+  padding: 0;
+  width: 100%;
+}
 
 .collapsibleContentContainer p {
   overflow: hidden;
@@ -13,17 +24,16 @@
 
 .collapsibleContentContainerOpen p {
   -webkit-line-clamp: 4;
-
 }
 
 .collapsibleContentButton {
-  border-radius: var(--radius-rounded-sm, 2px);
-  border: 1.25px solid var(--border-neutral-subtle, #D4D4D8);
-  background: #FFF;
+  border-radius: 2px;
+  border: 1.25px solid #d4d4d8;
+  background: #fff;
   padding: 12px 20px;
   margin-top: 24px;
-  color: var(--text-neutral-subtle, #3F3F46);
-  font-family: "Proxima Nova";
+  color: #3f3f46;
+  font-family: 'Proxima Nova';
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
@@ -33,9 +43,16 @@
   cursor: pointer;
 }
 
-.collapsibleContentButton:hover {
-  border-color: var(--border-brand-primary-base, #EE8146);
-  background: var(--bg-brand-primary-subtlest-hover, #FDF2EC);
-  color: var(--text-brand-primary-base, #FF5A00);
-
-}
+@media screen and (min-width: 64rem) {
+  .collapsibleContentButton:hover {
+    border-color: #ee8146;
+    background: #fdf2ec;
+    color: #ff5a00;
+  }
+}
+@media screen and (max-width: 64rem) {
+  .collapsible-content--collection-seo.collapsibleContentContainer {
+    padding: 0 1rem;
+    margin-bottom: 1rem;
+  }
+}

react/components/StickyLayoutObserver/index.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useRef, useState } from 'react'
+
+interface StickyLayoutObserverProps {
+  elementObserver: string
+  elementSticky: string
+}
+
+const StickyLayoutObserver = ({
+  elementObserver,
+  elementSticky,
+}: StickyLayoutObserverProps) => {
+  console.log(elementObserver, elementSticky, 'here aqui')
+  const [isVisible, setIsVisible] = useState(false)
+  const observerRef = useRef<IntersectionObserver | null>(null)
+
+  useEffect(() => {
+    const target = document.querySelector(elementObserver)
+    const stickyElement = document.querySelector(elementSticky) as HTMLElement
+
+    console.log('target, sticky here aqui', target, stickyElement)
+
+    if (!target || !stickyElement) return
+
+    observerRef.current = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting)
+      },
+      { root: null, threshold: 0.1 }
+    )
+
+    observerRef.current.observe(target)
+
+    return () => {
+      observerRef.current?.disconnect()
+    }
+  }, [])
+
+  useEffect(() => {
+    const stickyElement = document.querySelector(elementSticky) as HTMLElement
+
+    if (stickyElement) {
+      stickyElement.style.display = isVisible ? 'none' : ''
+    }
+  }, [isVisible])
+
+  return null
+}
+
+export default StickyLayoutObserver

react/package.json

@@ -49,7 +49,8 @@
     "apollo-cache-inmemory": "^1.6.5",
     "apollo-client": "^2.5.1",
     "graphql": "^14.6.0",
-    "roland.store-theme": "http://roland.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/roland.store-theme",
+    "roland.m3-custom": "http://roland.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/roland.m3-custom",
+    "roland.store-theme": "https://sel3331--roland.myvtex.com/_v/private/typings/linked/v1/[email protected]+build1733505170/public/@types/roland.store-theme",
     "typescript": "3.9.7",
     "vtex.add-to-cart-button": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.add-to-cart-button",
     "vtex.breadcrumb": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.breadcrumb",
@@ -63,10 +64,11 @@
     "vtex.flex-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.flex-layout",
     "vtex.format-currency": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.format-currency",
     "vtex.iframe": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.iframe",
+    "vtex.info-card-list": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.info-card-list",
     "vtex.list-context": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.list-context",
     "vtex.locale-switcher": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.locale-switcher",
     "vtex.login": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.login",
-    "vtex.menu": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].1/public/@types/vtex.menu",
+    "vtex.menu": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].3/public/@types/vtex.menu",
     "vtex.minicart": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.minicart",
     "vtex.modal-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.modal-layout",
     "vtex.my-account": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.my-account",
@@ -85,7 +87,7 @@
     "vtex.product-quantity": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.product-quantity",
     "vtex.product-review-interfaces": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react",
     "vtex.product-specification-badges": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.product-specification-badges",
-    "vtex.product-summary": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].1/public/@types/vtex.product-summary",
+    "vtex.product-summary": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].2/public/@types/vtex.product-summary",
     "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime",
     "vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.responsive-layout",
     "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.rich-text",
@@ -99,7 +101,7 @@
     "vtex.sticky-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.sticky-layout",
     "vtex.store": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store",
     "vtex.store-components": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-components",
-    "vtex.store-drawer": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].0/public/@types/vtex.store-drawer",
+    "vtex.store-drawer": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].1/public/@types/vtex.store-drawer",
     "vtex.store-footer": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-footer",
     "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-graphql",
     "vtex.store-header": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-header",

store/blocks/components/breadcrumb/custom.jsonc

@@ -0,0 +1,15 @@
+{
+  "flex-layout.row#searchbread": {
+    "children": ["breadcrumb.search#custom"],
+    "props": {
+      "blockClass": "search-breadcrumb",
+      "preserveLayoutOnMobile": true,
+      "fullWidth": true
+    }
+  },
+  "breadcrumb.search#custom": {
+    "props": {
+      "showOnMobile": true
+    }
+  }
+}

store/blocks/components/product-summary/product-summary-list.jsonc

@@ -4,9 +4,7 @@
     "props": {
       "blockClass": ["product-summary-list-layout"]
     },
-    "children": [
-      "flex-layout.row#product-card-list-layout"
-    ]
+    "children": ["flex-layout.row#product-card-list-layout"]
   },
   "flex-layout.row#product-card-list-layout": {
     "props": {
@@ -20,7 +18,10 @@
   },
   "flex-layout.row#product-card-list-layout-image": {
     "props": {
-      "blockClass": ["product-summary-image", "product-summary-list-layout-image"],
+      "blockClass": [
+        "product-summary-image",
+        "product-summary-list-layout-image"
+      ],
       "preventHorizontalStretch": true
     },
     "children": [
@@ -30,16 +31,18 @@
   },
   "flex-layout.col#product-card-list-layout-info": {
     "props": {
-      "blockClass": ["product-summary-info", "product-summary-list-layout-info"],
+      "blockClass": [
+        "product-summary-info",
+        "product-summary-list-layout-info"
+      ],
       "preventVerticalStretch": true
     },
     "children": [
       "product-summary-brand#product-card",
       "product-summary-name#product-card",
       "flex-layout.row#product-card-stars",
-      "product-list-price#product-card",
       "flex-layout.row#product-card-price",
       "condition-layout.product#availability"
     ]
   }
-}
+}

store/blocks/components/talk-to-us/index.jsonc

@@ -0,0 +1,33 @@
+{
+  "m3-custom-fale-conosco": {
+    "props": {
+      "lojaBoss": false,
+      "links": [
+        {
+          "nome": "Fale conosco",
+          "openNewTab": true,
+          "url": "/central-de-ajuda",
+          "icon": "/arquivos/faleConosco--central-de-ajuda.png"
+        },
+        {
+          "nome": "Perguntas frequentes",
+          "openNewTab": false,
+          "url": "/institucional-central-faq",
+          "icon": "/arquivos/faleConosco--perguntas-frequentes.png"
+        },
+        {
+          "nome": "Status do Pedido",
+          "openNewTab": false,
+          "url": "/account#/orders",
+          "icon": "/arquivos/faleConosco--status-do-pedido.png"
+        },
+        {
+          "nome": "Backstage",
+          "openNewTab": true,
+          "url": "/central-de-ajuda",
+          "icon": "/arquivos/faleConosco--backstage.png"
+        }
+      ]
+    }
+  }
+}

store/blocks/pages/black-friday/components/black-friday-breadcrumb.jsonc

@@ -8,14 +8,6 @@
     },
     "children": ["link#breadcrumb.home", "link#black-friday-breadcrumb"]
   },
-  "link#breadcrumb.home": {
-    "title": "Link para Home",
-    "props": {
-      "href": "/",
-      "label": "Home",
-      "blockClass": ["breadcrumb--home"]
-    }
-  },
   "link#black-friday-breadcrumb": {
     "title": "Link para black friday",
     "props": {
@@ -24,4 +16,4 @@
       "blockClass": ["breadcrumb--pre-owned", "breadcrumb--black-friday"]
     }
   }
-}
+}