@faststore/core 2.0.110-alpha.0 → 2.0.113-alpha.0

package/.turbo/turbo-build.log

@@ -26,26 +26,26 @@ info  - Finalizing page optimization...
 Route (pages)                              Size     First Load JS
 ┌ ● /                                      8.65 kB         117 kB
 ├   └ css/3a57acf6e411f24d.css             1.69 kB
-├   /_app                                  0 B            96.6 kB
+├   /_app                                  0 B            96.7 kB
 ├ ● /[...slug]                             9.46 kB         122 kB
-├   └ css/70ac3b88af168a4b.css             1.46 kB
+├   └ css/1f987650dd4e39d0.css             1.33 kB
 ├ ● /[slug]/p                              16.8 kB         125 kB
 ├   └ css/4abccf9803c3c356.css             1.82 kB
-├ ○ /404                                   665 B           102 kB
+├ ○ /404                                   665 B           103 kB
 ├ ○ /500                                   439 B           102 kB
 ├ ○ /account                               383 B           102 kB
-├ λ /api/graphql                           0 B            96.6 kB
-├ λ /api/preview                           0 B            96.6 kB
+├ λ /api/graphql                           0 B            96.7 kB
+├ λ /api/preview                           0 B            96.7 kB
 ├ ○ /checkout                              371 B           102 kB
-├ ○ /login                                 577 B           102 kB
+├ ○ /login                                 577 B           103 kB
 └ ○ /s                                     895 B           113 kB
-    └ css/cf4c6e7294227fd7.css             1.42 kB
+    └ css/6f4d3e91f1d161a8.css             1.29 kB
 + First Load JS shared by all              120 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-9746772201fe3ac1.js        23.9 kB
-  ├ chunks/pages/_app-9d067ed89f7a4001.js  25.3 kB
-  ├ chunks/webpack-561abbd401db03bc.js     2.15 kB
-  └ css/117ce6f20b7a2e6c.css               23.5 kB
+  ├ chunks/pages/_app-501ccc46c846c040.js  25.4 kB
+  ├ chunks/webpack-855ba0986bd6023a.js     2.15 kB
+  └ css/231b8c31105a684a.css               23.6 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
 ○  (Static)  automatically rendered as static HTML (uses no initial props)

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.113-alpha.0](https://github.com/vtex/faststore/compare/v2.0.112-alpha.0...v2.0.113-alpha.0) (2023-04-24)
+
+### Features
+
+- Adds `Navbar` component ([#1720](https://github.com/vtex/faststore/issues/1720)) ([58aac03](https://github.com/vtex/faststore/commit/58aac0366f3a5df042cd46ce9525e5f1af7b9a38))
+
+## [2.0.111-alpha.0](https://github.com/vtex/faststore/compare/v2.0.110-alpha.0...v2.0.111-alpha.0) (2023-04-18)
+
+### Features
+
+- Adds `ProductGrid` component ([#1719](https://github.com/vtex/faststore/issues/1719)) ([9cbe71f](https://github.com/vtex/faststore/commit/9cbe71f81395297c14b258efdd336b00f6b71071))
+
 ## [2.0.110-alpha.0](https://github.com/vtex/faststore/compare/v2.0.109-alpha.0...v2.0.110-alpha.0) (2023-04-18)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.110-alpha.0",
+  "version": "2.0.113-alpha.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -30,10 +30,10 @@
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
     "@faststore/api": "^2.0.105-alpha.0",
-    "@faststore/components": "^2.0.110-alpha.0",
+    "@faststore/components": "^2.0.113-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.3-alpha.0",
-    "@faststore/ui": "^2.0.110-alpha.0",
+    "@faststore/ui": "^2.0.113-alpha.0",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -108,5 +108,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "4d3127188c79beaa7f286bc8791f902742110c9b"
+  "gitHead": "d98da992d055d403b4beb5b15f74829a017bb763"
 }

package/src/Layout.tsx

@@ -4,7 +4,7 @@ import { lazy, Suspense } from 'react'
 import { Icon, useUI } from '@faststore/ui'
 import Alert from 'src/components/common/Alert'
 import Footer from 'src/components/common/Footer'
-import Navbar from 'src/components/common/Navbar'
+import Navbar from 'src/components/navigation/Navbar'
 import Toast from 'src/components/common/Toast'
 import RegionBar from 'src/components/region/RegionBar'
 

package/src/components/{common → navigation}/Navbar/Navbar.tsx

@@ -1,18 +1,26 @@
 import { Suspense, useRef, useState } from 'react'
 
-import { Icon, IconButton as UIIconButton, useUI } from '@faststore/ui'
+import {
+  useUI,
+  useScrollDirection,
+  Icon as UIIcon,
+  IconButton as UIIconButton,
+  Navbar as UINavbar,
+  NavbarHeader as UINavbarHeader,
+  NavbarRow as UINavbarRow,
+  NavbarButtons as UINavbarButtons,
+} from '@faststore/ui'
+
 import CartToggle from 'src/components/cart/CartToggle'
-import type { SearchInputRef } from 'src/components/search/SearchInput'
 import SearchInput from 'src/components/search/SearchInput'
-import { ButtonSignIn, ButtonSignInFallback } from 'src/components/ui/Button'
-import Link from 'src/components/ui/Link'
+import type { SearchInputRef } from 'src/components/search/SearchInput'
 import Logo from 'src/components/ui/Logo'
+import Link from 'src/components/ui/Link'
+import { ButtonSignIn, ButtonSignInFallback } from 'src/components/ui/Button'
 import { mark } from 'src/sdk/tests/mark'
-import useScrollDirection from 'src/sdk/ui/useScrollDirection'
 
-import styles from './navbar.module.scss'
-import NavbarSlider from './NavbarSlider'
-import NavLinks from './NavLinks'
+import NavbarSlider from '../NavbarSlider'
+import NavbarLinks from '../NavbarLinks'
 
 function Navbar() {
   const scrollDirection = useScrollDirection()
@@ -26,19 +34,18 @@ function Navbar() {
   }
 
   return (
-    <header
-      data-fs-navbar
-      data-fs-navbar-scroll={scrollDirection}
-      className={`${styles.fsNavbar} layout__content-full`}
+    <UINavbar
+      className="layout__content-full"
+      scrollDirection={scrollDirection}
     >
-      <section data-fs-navbar-header>
-        <div className="layout__content" data-fs-navbar-row>
+      <UINavbarHeader>
+        <UINavbarRow className="layout__content">
           {!searchExpanded && (
             <>
               <UIIconButton
                 data-fs-navbar-button-menu
                 aria-label="Open Menu"
-                icon={<Icon name="List" width={32} height={32} />}
+                icon={<UIIcon name="List" width={32} height={32} />}
                 onClick={openNavbar}
               />
               <Link
@@ -51,22 +58,22 @@ function Navbar() {
               </Link>
             </>
           )}
+
           <SearchInput />
-          <div
-            data-fs-navbar-buttons
-            data-fs-navbar-search-expanded={searchExpanded}
-          >
+
+          <UINavbarButtons searchExpanded={searchExpanded}>
             {searchExpanded && (
               <UIIconButton
                 data-fs-button-collapse
                 aria-label="Collapse search bar"
-                icon={<Icon name="CaretLeft" width={32} height={32} />}
+                icon={<UIIcon name="CaretLeft" width={32} height={32} />}
                 onClick={() => {
                   setSearchExpanded(false)
                   searchMobileRef.current?.resetSearchInput()
                 }}
               />
             )}
+
             <SearchInput
               placeholder=""
               ref={searchMobileRef}
@@ -74,20 +81,22 @@ function Navbar() {
               buttonTestId="store-input-mobile-button"
               onSearchClick={handlerExpandSearch}
             />
+
             <Suspense fallback={<ButtonSignInFallback />}>
               <ButtonSignIn />
             </Suspense>
+
             <CartToggle />
-          </div>
-        </div>
-      </section>
-      <NavLinks classes="hidden-mobile" />
+          </UINavbarButtons>
+        </UINavbarRow>
+      </UINavbarHeader>
+
+      <NavbarLinks className="hidden-mobile" />
 
       {displayNavbar && <NavbarSlider />}
-    </header>
+    </UINavbar>
   )
 }
 
 Navbar.displayName = 'Navbar'
-
 export default mark(Navbar)

package/src/components/navigation/Navbar/index.ts

@@ -0,0 +1 @@
+export { default } from './Navbar'

package/src/components/{common/Navbar/NavLinks.tsx → navigation/NavbarLinks/NavbarLinks.tsx}

@@ -1,15 +1,21 @@
-import { List as UIList } from '@faststore/ui'
 import type { AnchorHTMLAttributes } from 'react'
 
+import type { NavbarLinksProps as UINavbarLinksProps } from '@faststore/ui'
+import { List as UIList, NavbarLinks as UINavbarLinks } from '@faststore/ui'
+
 import RegionButton from 'src/components/region/RegionButton'
 import Link from 'src/components/ui/Link'
 import { mark } from 'src/sdk/tests/mark'
 
-import styles from './navlinks.module.scss'
-
-interface NavLinksProps {
+export interface NavbarLinksProps extends UINavbarLinksProps {
+  /**
+   * Defines the classes to be applied.
+   */
+  className?: string
+  /**
+   * Defines action to be performed when clicking on a link.
+   */
   onClickLink?: AnchorHTMLAttributes<HTMLAnchorElement>['onClick']
-  classes?: string
 }
 
 const collections = [
@@ -31,16 +37,16 @@ const collections = [
   },
 ]
 
-function NavLinks({ onClickLink, classes = '' }: NavLinksProps) {
+function NavbarLinks({ onClickLink, ...otherProps }: NavbarLinksProps) {
   return (
-    <nav className={`${styles.fsNavlinks} ${classes}`}>
+    <UINavbarLinks {...otherProps}>
       <div className="layout__content">
         <RegionButton />
-        <UIList data-fs-navlinks-list>
+        <UIList data-fs-navbar-links-list>
           {collections.map(({ href, name }) => (
-            <li key={name} data-fs-navlinks-list-item>
+            <li key={name} data-fs-navbar-links-list-item>
               <Link
-                data-fs-navlinks-link
+                data-fs-navbar-links-link
                 variant="display"
                 href={href}
                 onClick={onClickLink}
@@ -51,8 +57,8 @@ function NavLinks({ onClickLink, classes = '' }: NavLinksProps) {
           ))}
         </UIList>
       </div>
-    </nav>
+    </UINavbarLinks>
   )
 }
 
-export default mark(NavLinks)
+export default mark(NavbarLinks)

package/src/components/navigation/NavbarLinks/index.ts

@@ -0,0 +1 @@
+export { default } from './NavbarLinks'

package/src/components/{common/Navbar → navigation/NavbarSlider}/NavbarSlider.tsx

@@ -1,34 +1,31 @@
 import { Suspense } from 'react'
 import {
-  SlideOver as UISlideOver,
-  SlideOverHeader as UISlideOverHeader,
+  useUI,
+  useFadeEffect,
+  NavbarSlider as UINavbarSlider,
+  NavbarSliderHeader as UINavbarSliderHeader,
+  NavbarSliderContent as UINavbarSliderContent,
+  NavbarSliderFooter as UINavbarSliderFooter,
 } from '@faststore/ui'
 
-import { ButtonSignIn, ButtonSignInFallback } from 'src/components/ui/Button'
+import { mark } from 'src/sdk/tests/mark'
 import Link from 'src/components/ui/Link'
 import Logo from 'src/components/ui/Logo'
-import { mark } from 'src/sdk/tests/mark'
-import { useUI } from '@faststore/ui'
-import { useFadeEffect } from '@faststore/ui'
+import { ButtonSignIn, ButtonSignInFallback } from 'src/components/ui/Button'
 
-import styles from './navbar-slider.module.scss'
-import NavLinks from './NavLinks'
+import NavbarLinks from '../NavbarLinks'
 
 function NavbarSlider() {
   const { closeNavbar } = useUI()
   const { fade, fadeOut } = useFadeEffect()
 
   return (
-    <UISlideOver
-      isOpen
+    <UINavbarSlider
       fade={fade}
       onDismiss={fadeOut}
-      size="full"
-      direction="leftSide"
-      className={styles.fsNavbarSlider}
       onTransitionEnd={() => fade === 'out' && closeNavbar()}
     >
-      <UISlideOverHeader data-fs-navbar-slider-header onClose={fadeOut}>
+      <UINavbarSliderHeader onClose={fadeOut}>
         <Link
           href="/"
           onClick={fadeOut}
@@ -38,16 +35,16 @@ function NavbarSlider() {
         >
           <Logo />
         </Link>
-      </UISlideOverHeader>
-      <div data-fs-navbar-slider-content>
-        <NavLinks onClickLink={fadeOut} />
-      </div>
-      <footer data-fs-navbar-slider-footer>
+      </UINavbarSliderHeader>
+      <UINavbarSliderContent>
+        <NavbarLinks onClickLink={fadeOut} />
+      </UINavbarSliderContent>
+      <UINavbarSliderFooter>
         <Suspense fallback={<ButtonSignInFallback />}>
           <ButtonSignIn />
         </Suspense>
-      </footer>
-    </UISlideOver>
+      </UINavbarSliderFooter>
+    </UINavbarSlider>
   )
 }
 

package/src/components/navigation/NavbarSlider/index.ts

@@ -0,0 +1 @@
+export { default } from './NavbarSlider'

package/src/components/product/ProductGrid/ProductGrid.tsx

@@ -1,6 +1,9 @@
 import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
-import styles from 'src/components/product/ProductGrid/product-grid.module.scss'
+import {
+  ProductGrid as UIProductGrid,
+  ProductGridItem as UIProductGridItem,
+} from '@faststore/ui'
 
 import ProductCard from '../ProductCard'
 
@@ -19,23 +22,25 @@ interface Props {
 function ProductGrid({ products, page, pageSize }: Props) {
   const aspectRatio = 1
 
+  console.log(products)
+
   return (
     <ProductGridSkeleton
       aspectRatio={aspectRatio}
       loading={products.length === 0}
     >
-      <ul data-fs-product-grid className={styles.fsProductGrid}>
+      <UIProductGrid>
         {products.map(({ node: product }, idx) => (
-          <li key={`${product.id}`}>
+          <UIProductGridItem key={`${product.id}`}>
             <ProductCard
               product={product}
               index={pageSize * page + idx + 1}
               bordered
               aspectRatio={aspectRatio}
             />
-          </li>
+          </UIProductGridItem>
         ))}
-      </ul>
+      </UIProductGrid>
     </ProductGridSkeleton>
   )
 }

package/src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton.tsx

@@ -1,7 +1,6 @@
 import type { PropsWithChildren } from 'react'
 
 import { ITEMS_PER_PAGE } from 'src/constants'
-import styles from 'src/components/product/ProductGrid/product-grid.module.scss'
 
 import ProductCardSkeleton from '../ProductCardSkeleton'
 
@@ -16,7 +15,7 @@ function ProductGridSkeleton({
   loading = true,
 }: PropsWithChildren<ProductGridSkeletonProps>) {
   return loading ? (
-    <ul className={styles.fsProductGrid}>
+    <ul data-fs-product-grid>
       {Array.from({ length: ITEMS_PER_PAGE }, (_, index) => (
         <li key={String(index)}>
           <ProductCardSkeleton aspectRatio={aspectRatio} bordered />

package/.next/static/chunks/686.0136918bcab42e72.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[686],{7704:function(e,t,r){"use strict";r.d(t,{YD:function(){return g},df:function(){return h}});var n=r(2784);function i(){return i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},i.apply(this,arguments)}function a(e,t){return a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},a(e,t)}var o=new Map,s=new WeakMap,c=0,l=void 0;function d(e){return Object.keys(e).sort().filter((function(t){return void 0!==e[t]})).map((function(t){return t+"_"+("root"===t?(r=e.root)?(s.has(r)||(c+=1,s.set(r,c.toString())),s.get(r)):"0":e[t]);var r})).toString()}function u(e,t,r,n){if(void 0===r&&(r={}),void 0===n&&(n=l),"undefined"===typeof window.IntersectionObserver&&void 0!==n){var i=e.getBoundingClientRect();return t(n,{isIntersecting:n,target:e,intersectionRatio:"number"===typeof r.threshold?r.threshold:0,time:0,boundingClientRect:i,intersectionRect:i,rootBounds:i}),function(){}}var a=function(e){var t=d(e),r=o.get(t);if(!r){var n,i=new Map,a=new IntersectionObserver((function(t){t.forEach((function(t){var r,a=t.isIntersecting&&n.some((function(e){return t.intersectionRatio>=e}));e.trackVisibility&&"undefined"===typeof t.isVisible&&(t.isVisible=a),null==(r=i.get(t.target))||r.forEach((function(e){e(a,t)}))}))}),e);n=a.thresholds||(Array.isArray(e.threshold)?e.threshold:[e.threshold||0]),r={id:t,observer:a,elements:i},o.set(t,r)}return r}(r),s=a.id,c=a.observer,u=a.elements,f=u.get(e)||[];return u.has(e)||u.set(e,f),f.push(t),c.observe(e),function(){f.splice(f.indexOf(t),1),0===f.length&&(u.delete(e),c.unobserve(e)),0===u.size&&(c.disconnect(),o.delete(s))}}var f=["children","as","triggerOnce","threshold","root","rootMargin","onChange","skip","trackVisibility","delay","initialInView","fallbackInView"];function p(e){return"function"!==typeof e.children}var h=function(e){var t,r;function o(t){var r;return(r=e.call(this,t)||this).node=null,r._unobserveCb=null,r.handleNode=function(e){r.node&&(r.unobserve(),e||r.props.triggerOnce||r.props.skip||r.setState({inView:!!r.props.initialInView,entry:void 0})),r.node=e||null,r.observeNode()},r.handleChange=function(e,t){e&&r.props.triggerOnce&&r.unobserve(),p(r.props)||r.setState({inView:e,entry:t}),r.props.onChange&&r.props.onChange(e,t)},r.state={inView:!!t.initialInView,entry:void 0},r}r=e,(t=o).prototype=Object.create(r.prototype),t.prototype.constructor=t,a(t,r);var s=o.prototype;return s.componentDidUpdate=function(e){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold&&e.skip===this.props.skip&&e.trackVisibility===this.props.trackVisibility&&e.delay===this.props.delay||(this.unobserve(),this.observeNode())},s.componentWillUnmount=function(){this.unobserve(),this.node=null},s.observeNode=function(){if(this.node&&!this.props.skip){var e=this.props,t=e.threshold,r=e.root,n=e.rootMargin,i=e.trackVisibility,a=e.delay,o=e.fallbackInView;this._unobserveCb=u(this.node,this.handleChange,{threshold:t,root:r,rootMargin:n,trackVisibility:i,delay:a},o)}},s.unobserve=function(){this._unobserveCb&&(this._unobserveCb(),this._unobserveCb=null)},s.render=function(){if(!p(this.props)){var e=this.state,t=e.inView,r=e.entry;return this.props.children({inView:t,entry:r,ref:this.handleNode})}var a=this.props,o=a.children,s=a.as,c=function(e,t){if(null==e)return{};var r,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(a,f);return n.createElement(s||"div",i({ref:this.handleNode},c),o)},o}(n.Component);function g(e){var t=void 0===e?{}:e,r=t.threshold,i=t.delay,a=t.trackVisibility,o=t.rootMargin,s=t.root,c=t.triggerOnce,l=t.skip,d=t.initialInView,f=t.fallbackInView,p=n.useRef(),h=n.useState({inView:!!d}),g=h[0],v=h[1],m=n.useCallback((function(e){void 0!==p.current&&(p.current(),p.current=void 0),l||e&&(p.current=u(e,(function(e,t){v({inView:e,entry:t}),t.isIntersecting&&c&&p.current&&(p.current(),p.current=void 0)}),{root:s,rootMargin:o,threshold:r,trackVisibility:a,delay:i},f))}),[Array.isArray(r)?r.toString():r,s,o,c,l,a,f,i]);(0,n.useEffect)((function(){p.current||!g.entry||c||l||v({inView:!!d})}));var b=[m,g.inView,g.entry];return b.ref=b[0],b.inView=b[1],b.entry=b[2],b}h.displayName="InView",h.defaultProps={threshold:0,triggerOnce:!1,initialInView:!1}},9875:function(e,t,r){"use strict";r.d(t,{Z:function(){return a}});var n=r(2784),i=r(44);var a=({listPrice:e,spotPrice:t,thresholdLow:r=15,thresholdHigh:a=40,size:o,testId:s="fs-discount-badge"})=>{const c=((e,t)=>(0,n.useMemo)((()=>{const r=100*(e-t)/e;return Math.round(r)}),[t,e]))(e,t);if(0===c)return n.createElement(n.Fragment,null);const l=c<=r?"low":c<=a?"medium":"high";return n.createElement(i.Z,{"data-fs-discount-badge":!0,"data-fs-discount-badge-variant":l,size:o,"data-testid":s},c,"% off")}},783:function(e,t,r){"use strict";var n=r(2784),i=r(5045),a=r(2765),o=r(1329);const s=(0,n.forwardRef)((function({children:e,testId:t="fs-rating",length:r=5,value:s=0,icon:c,onChange:l,...d},u){const[f,p]=(0,n.useState)(0),h={"data-fs-rating-icon-outline":!0},g=n.isValidElement(c)?c:n.createElement(i.Z,{name:"Star"});return n.createElement(o.Z,{ref:u,"data-fs-rating":!0,"data-fs-rating-actionable":"function"===typeof l,"data-testid":t,...d},Array.from({length:r}).map(((e,r)=>{const o=r+1;return n.createElement("li",{key:`rating-${r}`,"data-fs-rating-item":o<=(f||s)?"full":o-s>0&&o-s<1?"partial":"empty","data-testid":`${t}-item`},l?n.createElement(a.Z,{"data-fs-rating-button":!0,icon:g,size:"small","aria-label":"rate",onClick:()=>{l(o)},onMouseEnter:()=>p(o),onMouseLeave:()=>p(s)}):n.createElement(n.Fragment,null,n.createElement("div",{"data-fs-rating-icon-wrapper":!0},g),n.isValidElement(c)?n.cloneElement(c,h):n.createElement(i.Z,{name:"Star","data-fs-rating-icon-outline":!0})))})))}));t.Z=s},3432:function(e,t,r){"use strict";r.d(t,{Z:function(){return _}});var n=r(9499),i=r(4730),a=r(2784);var o=(0,a.forwardRef)((function({testId:e="fs-product-card",variant:t="default",bordered:r=!1,outOfStock:n,children:i,...o},s){return a.createElement("article",{ref:s,"data-fs-product-card":n?"out-of-stock":"","data-fs-product-card-variant":t,"data-fs-product-card-bordered":r,"data-testid":e,...o},i)}));var s=(0,a.forwardRef)((function({testId:e="fs-product-card-image",aspectRatio:t=1,children:r,...n},i){return a.createElement("div",{ref:i,"data-fs-product-card-image":!0,"data-testid":e,style:{"--fs-product-card-image-aspect-ratio":t},...n},r)})),c=r(7865),l=r(7549),d=r(783),u=r(5045),f=r(9875),p=r(44),h=r(7578);var g=(0,a.forwardRef)((function({testId:e="fs-product-card-content",title:t,linkProps:r,price:n,outOfStock:i,outOfStockLabel:o="Out of stock",ratingValue:s,showDiscountBadge:g,buttonLabel:v="Add",onButtonClick:m,children:b,...y},O){return a.createElement("section",{ref:O,"data-fs-product-card-content":!0,"data-fs-product-card-badge":g,"data-testid":e,...y},a.createElement("div",{"data-fs-product-card-heading":!0},a.createElement("h3",{"data-fs-product-card-title":!0},a.createElement(c.Z,{...r,title:t},t)),a.createElement("div",{"data-fs-product-card-prices":!0},a.createElement(l.Z,{value:n?.listPrice?n.listPrice:0,formatter:n?.formatter,testId:"list-price","data-value":n?.listPrice,variant:"listing",SRText:"Original price:"}),a.createElement(l.Z,{value:n?.value?n.value:0,formatter:n?.formatter,testId:"price","data-value":n?.value,variant:"spot",SRText:"Sale Price:"})),s&&a.createElement(d.Z,{value:s,icon:a.createElement(u.Z,{name:"Star"})})),g&&!i&&a.createElement(f.Z,{listPrice:n?.listPrice?n.listPrice:0,spotPrice:n?.value?n.value:0}),i&&a.createElement(p.Z,null,o),m&&!i&&a.createElement("div",{"data-fs-product-card-actions":!0},a.createElement(h.Z,{variant:"primary",icon:a.createElement(u.Z,{name:"ShoppingCart"}),iconPosition:"left",size:"small",onClick:m},v)))})),v=r(2154),m=r(5346),b=r(9854),y=r(1664),O=r.n(y),w=r(2322),j=["product","index","bordered","variant","aspectRatio","ratingValue","buttonLabel","onButtonClick","showDiscountBadge"];function k(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function x(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?k(Object(r),!0).forEach((function(t){(0,n.Z)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):k(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function P(e){var{product:t,index:r,bordered:n=!1,variant:a="default",aspectRatio:c=1,ratingValue:l,buttonLabel:d="Add",onButtonClick:u,showDiscountBadge:f=!0}=e,p=(0,i.Z)(e,j),{sku:h,isVariantOf:{name:y},image:[k],offers:{lowPrice:P,offers:[{listPrice:_,availability:E}]}}=t,S=x(x({},(0,b.w)({product:t,selectedOffer:0,index:r})),{},{as:O(),passHref:!0,legacyBehavior:!1}),V="https://schema.org/InStock"!==E;return(0,w.jsxs)(o,x(x({outOfStock:V,bordered:n,variant:a,"data-fs-product-card-sku":h},p),{},{children:[(0,w.jsx)(s,{aspectRatio:c,children:(0,w.jsx)(v.E,{src:k.url,alt:k.alternateName,width:360,height:360/c,sizes:"(max-width: 768px) 25vw, 30vw",loading:"lazy"})}),(0,w.jsx)(g,{title:y,price:{value:P,listPrice:_,formatter:m.P},ratingValue:l,outOfStock:V,onButtonClick:u,linkProps:S,showDiscountBadge:f})]}))}var _=(0,a.memo)(P)},8686:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return m}});var n=r(7794),i=r(9913),a=r(2981),o=r.n(a),s=r(3432),c=r(2322);var l=function(e){var{products:t,page:r,pageSize:n}=e;return(0,c.jsx)(i.Z,{aspectRatio:1,loading:0===t.length,children:(0,c.jsx)("ul",{"data-fs-product-grid":!0,className:o().fsProductGrid,children:t.map(((e,t)=>{var{node:i}=e;return(0,c.jsx)("li",{children:(0,c.jsx)(s.Z,{product:i,index:n*r+t+1,bordered:!0,aspectRatio:1})},"".concat(i.id))}))})})},d=r(2784),u=r(7704),f=r(1163),p=r(5184);var h=function(e){var{page:t,pageSize:r,products:i,title:a}=e,o=(0,d.useRef)(!1),{ref:s,inView:l}=(0,u.YD)(),{pages:h}=(0,n.R)(),g=(0,f.useRouter)(),{sendViewItemListEvent:v}=(0,p.m)({products:i,title:a,page:t,pageSize:r});return(0,d.useEffect)((()=>{l&&h.length>1&&((e,t)=>{var r=new URL(window.location.href);r.searchParams.get("page")!==e&&(r.searchParams.set("page",e),t.replace(r,void 0,{shallow:!0,scroll:!1}))})(t.toString(),g),l&&!o.current&&i.length&&(v(),o.current=!0)}),[h.length,l,t,g,v,i.length]),(0,c.jsx)("div",{ref:s})},g=r(7028),v=r(763);var m=function(e){var t,{page:r,title:i,showSponsoredProducts:a=!0}=e,o=null!==(t=(0,v.r)(r))&&void 0!==t?t:[],{itemsPerPage:s}=(0,n.R)(),d=a?o.slice(0,2):void 0,u=Math.ceil(s/2),f=0===r&&d&&d.length>1;return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(h,{products:o,page:r,pageSize:s,title:i}),f?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(l,{products:o.slice(0,u),page:r,pageSize:u}),(0,c.jsxs)("div",{"data-fs-product-listing-sponsored":!0,children:[(0,c.jsx)("h3",{children:"Sponsored"}),(0,c.jsx)(g.Z,{selectedFacets:[{key:"productClusterIds",value:"141"}],title:""})]}),(0,c.jsx)(l,{products:o.slice(u,s),page:r,pageSize:u})]}):(0,c.jsx)(l,{products:o,page:r,pageSize:s})]})}},7028:function(e,t,r){"use strict";r.d(t,{Z:function(){return E}});var n=r(4730),i=r(2784),a=r(7704),o=r(5184),s=r(9499);var c=(0,i.forwardRef)((function({testId:e="store-tiles",children:t,...r},n){const a=i.Children.count(t);const o=3===a?"expanded-first":2===a?"expanded-first-two":"";return i.createElement("ul",{ref:n,"data-fs-tiles":!0,"data-fs-tiles-variant":o,"data-testid":e,...r},t)})),l=r(2044),d=r.n(l),u=r(2322),f=["children"];function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function h(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach((function(t){(0,s.Z)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var g=e=>{var{children:t}=e,r=(0,n.Z)(e,f);return(0,u.jsx)(c,h(h({className:d().fsTiles},r),{},{children:t}))};var v=(0,i.forwardRef)((function({testId:e="store-tile",children:t,...r},n){return i.createElement("li",{ref:n,"data-fs-tile":!0,"data-testid":e,...r},t)})),m=r(3432);var b=function(e){var{children:t,loading:r=!0}=e;return r?(0,u.jsx)(g,{children:Array.from({length:3},((e,t)=>{return(0,u.jsx)(v,{children:(0,u.jsx)(j,{index:t+1,aspectRatio:(r=3,n=t,3===r&&0===n||2===r&&(0===n||1===n)?5/3:3/4)})},String(t));var r,n}))}):(0,u.jsx)(u.Fragment,{children:t})},y=r(2928),O=r(4106),w=r.n(O);var j=function(e){var{index:t,aspectRatio:r=1}=e;return(0,u.jsxs)("div",{"data-fs-product-tile-skeleton":!0,className:w().fsProductTileSkeleton,"data-fs-product-tile-skeleton-index":t,children:[(0,u.jsx)("div",{"data-fs-product-tile-skeleton-image":!0,"data-fs-product-tile-skeleton-index":t,style:{"--fs-product-tile-skeleton-image-aspect-ratio":r},children:(0,u.jsx)(y.Z,{size:{width:"auto",height:"100%"},loading:!0})}),(0,u.jsxs)("div",{"data-fs-product-tile-skeleton-content":!0,"data-fs-product-tile-skeleton-index":t,children:[(0,u.jsxs)("div",{"data-fs-product-tile-skeleton-heading":!0,children:[(0,u.jsx)("div",{"data-fs-product-tile-skeleton-text":!0,"data-fs-product-tile-skeleton-index":t,children:(0,u.jsx)(y.Z,{size:{width:"70%",height:"1.5rem"}})}),(0,u.jsx)("div",{"data-fs-product-tile-skeleton-price":!0,children:(0,u.jsx)(y.Z,{size:{width:"60%",height:"1.5rem"}})})]}),(0,u.jsx)("div",{"data-fs-product-tile-skeleton-badge":!0,"data-fs-product-tile-skeleton-index":t,children:(0,u.jsx)(y.Z,{size:{width:"6rem",height:"2rem"},border:"pill"})})]})]})},k=r(737),x=r(8879),P=["title"],_=(e,t)=>3===e&&0===t||2===e&&(0===t||1===t)?5/3:3/4,E=e=>{var t,{title:r}=e,s=(0,n.Z)(e,P),c=(0,i.useRef)(!1),{ref:l,inView:d}=(0,a.YD)(),f=(0,k.kN)(s),p=null!==(t=null===f||void 0===f?void 0:f.edges)&&void 0!==t?t:[],{sendViewItemListEvent:h}=(0,o.m)({products:p,title:r,page:0,pageSize:0});return(0,i.useEffect)((()=>{d&&!c.current&&p.length&&(h(),c.current=!0)}),[d,p.length,h]),0===(null===f||void 0===f?void 0:f.edges.length)?null:(0,u.jsxs)(x.Z,{className:"layout__section layout__content",ref:l,children:[(0,u.jsx)("h2",{className:"text__title-section",children:r}),(0,u.jsx)("div",{children:(0,u.jsx)(b,{loading:!f,children:(0,u.jsx)(g,{children:p.map(((e,t)=>(0,u.jsx)(v,{children:(0,u.jsx)(m.Z,{"data-testid":"tile-card",product:e.node,index:t+1,variant:"wide",aspectRatio:_(p.length,t)})},e.node.id)))})})})]})}},2154:function(e,t,r){"use strict";r.d(t,{E:function(){return w}});var n=r(9499),i=r(4730),a=r(2784),o=r(1608),s=r.n(o),c=r(7183),l="https://".concat(r.n(c)().api.storeId,".vtexassets.com");var d=(e,t)=>{var r,n,i=[l,"unsafe"],a=[];t.trim&&i.push("trim"),t.manualCrop&&i.push((e=>{var{left:t,top:r,right:n,bottom:i}=e;return"".concat(t,"x").concat(r,":").concat(n,"x").concat(i)})(t.manualCrop)),t.fitIn&&i.push("fit-in"),a.push(null!==(r=t.horizontalAlign)&&void 0!==r?r:"center"),a.push(null!==(n=t.verticalAlign)&&void 0!==n?n:"middle"),t.smart&&a.push("smart");var{filters:o}=t;return o&&a.push(function(e){var t=["filters"];return Object.keys(e).forEach((r=>{var n,i=e[r];n=Array.isArray(i)?i.join(","):!0===i?"":String(i),t.push("".concat(r,"(").concat(n,")"))})),t.join(":")}(o)),a.push(encodeURIComponent(e)),(e,r)=>{var n="";return t.flipHorizontal&&(n+="-"),n+="".concat(e,"x"),t.flipVertical&&(n+="-"),n+="".concat(r),[...i,n,...a].join("/")}},u=["src","width","height","options"];function f(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}var p=[1,2,3],h=p[p.length-1],g=e=>{var{src:t,width:r,height:o,options:s={}}=e,c=(0,i.Z)(e,u),{srcSet:l,src:g}=(0,a.useMemo)((()=>{var e=d(t,s),n=p.map((t=>{var n=r*t;return"".concat(e(n,o*t)," ").concat(n,"w")}));return{src:e(r*h,o*h),srcSet:n.join(", ")}}),[o,s,t,r]);return function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?f(Object(r),!0).forEach((function(t){(0,n.Z)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):f(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({src:g,srcSet:l,width:"".concat(r,"px"),height:"".concat(o,"px")},c)},v=r(2322),m=["src","width","height","quality"];function b(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function y(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?b(Object(r),!0).forEach((function(t){(0,n.Z)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):b(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function O(e){var{src:t,width:r,height:n,quality:a}=e,o=(0,i.Z)(e,m),{src:c,alt:l}=g(y({src:String(t),width:Number(r),height:Number(n),options:a?{filters:{quality:a}}:void 0},o));return(0,v.jsx)(s(),y({"data-fs-image":!0,unoptimized:!0,src:c,width:r,height:n,alt:l},o))}O.displayName="Image";var w=(0,a.memo)(O)},5184:function(e,t,r){"use strict";r.d(t,{m:function(){return o}});var n=r(8460),i=r(2784),a=r(5914),o=e=>{var{products:t,title:r,page:o,pageSize:s}=e,{currency:{code:c}}=(0,a.kP)();return{sendViewItemListEvent:(0,i.useCallback)((()=>{(0,n._)({name:"view_item_list",params:{item_list_name:r,item_list_id:r,items:t.map(((e,t)=>{var{node:r}=e;return{item_id:r.isVariantOf.productGroupID,item_name:r.isVariantOf.name,item_brand:r.brand.name,item_variant:r.sku,price:r.offers.offers[0].price,index:o*s+t+1,discount:r.offers.offers[0].listPrice-r.offers.offers[0].price,currency:c,item_variant_name:r.name,product_reference_id:r.gtin}}))}})}),[c,t,r,o,s])}}},9854:function(e,t,r){"use strict";r.d(t,{w:function(){return o}});var n=r(8460),i=r(2784),a=r(5914),o=e=>{var{index:t,product:r,selectedOffer:o}=e,{slug:s}=r,{currency:{code:c}}=(0,a.kP)(),l=(0,i.useCallback)((()=>{(0,n._)({name:"select_item",params:{items:[{item_id:r.isVariantOf.productGroupID,item_name:r.isVariantOf.name,item_brand:r.brand.name,item_variant:r.sku,index:t,price:r.offers.offers[o].price,discount:r.offers.offers[o].listPrice-r.offers.offers[o].price,currency:c,item_variant_name:r.name,product_reference_id:r.gtin}]}}),(0,n._)({name:"search_select_item",params:{url:window.location.href,items:[{item_id:r.isVariantOf.productGroupID,item_variant:r.sku,index:t}]}})}),[c,r,t,o]);return{href:"/".concat(s,"/p"),onClick:l,"data-testid":"product-link"}}},4106:function(e){e.exports={"fs-product-tile-skeleton":"product-tile-skeleton_fs-product-tile-skeleton___HloN",fsProductTileSkeleton:"product-tile-skeleton_fs-product-tile-skeleton___HloN"}},2044:function(e){e.exports={"fs-tiles":"tiles_fs-tiles__N15Au",fsTiles:"tiles_fs-tiles__N15Au"}}}]);