@faststore/core 3.2.1 → 3.4.0

package/.turbo/turbo-build.log

@@ -46,33 +46,33 @@ Warning: Dynamic Content not found for the page: home. Refer to the Dynamic Cont
    Collecting build traces ...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      3.21 kB         121 kB
+┌ ● /                                      3.21 kB         122 kB
 ├   └ css/b1806cbafd0c1f81.css             3.06 kB
-├   /_app                                  0 B            91.7 kB
-├ ● /[...slug]                             2 kB            137 kB
-├ ● /[slug]/p                              30.3 kB         148 kB
+├   /_app                                  0 B            91.8 kB
+├ ● /[...slug]                             2 kB            132 kB
+├ ● /[slug]/p                              30.5 kB         149 kB
 ├   ├ css/bf1560439df2c1a1.css             5.66 kB
 ├   ├ css/e3ff5d95518a5c79.css             6.01 kB
 ├   └ css/9718991cd57978e9.css             14.8 kB
 ├ ○ /404                                   1.46 kB         120 kB
 ├ ● /500                                   1.46 kB         120 kB
 ├ ● /account                               712 B           119 kB
-├ λ /api/graphql                           0 B            91.7 kB
-├ λ /api/health/live                       0 B            91.7 kB
-├ λ /api/health/ready                      0 B            91.7 kB
-├ λ /api/preview                           0 B            91.7 kB
+├ λ /api/graphql                           0 B            91.8 kB
+├ λ /api/health/live                       0 B            91.8 kB
+├ λ /api/health/ready                      0 B            91.8 kB
+├ λ /api/preview                           0 B            91.8 kB
 ├ ● /checkout                              694 B           119 kB
 ├ ● /login                                 1.57 kB         120 kB
-└ ● /s                                     2.44 kB         137 kB
-+ First Load JS shared by all              94.7 kB
+└ ● /s                                     2.63 kB         132 kB
++ First Load JS shared by all              94.9 kB
   ├ chunks/framework-12a146e94cfcf7c4.js   45.4 kB
   ├ chunks/main-209ac4974b020af1.js        33.1 kB
-  ├ chunks/pages/_app-7d970aad41a57338.js  9.84 kB
-  ├ chunks/webpack-fcd6fda2fae47824.js     3.39 kB
+  ├ chunks/pages/_app-9d791333b87e7c18.js  9.9 kB
+  ├ chunks/webpack-114d9639b5990b7f.js     3.5 kB
   └ css/ee0556daedda6306.css               3.07 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
 ○  (Static)  automatically rendered as static HTML (uses no initial props)
 ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
 
-Done in 70.31s.
+Done in 69.28s.

package/.turbo/turbo-lint.log

@@ -1,4 +1,4 @@
 yarn run v1.22.22
 $ next lint
 ✔ No ESLint warnings or errors
-Done in 5.88s.
+Done in 6.22s.

package/.turbo/turbo-test.log

@@ -1,12 +1,12 @@
 yarn run v1.22.22
 $ jest
-PASS test/utils/multipleTemplates.test.ts (35.749 s)
-PASS test/server/cms/index.test.ts (36.923 s)
-PASS test/server/index.test.ts (40.444 s)
+PASS test/utils/multipleTemplates.test.ts (36.84 s)
+PASS test/server/cms/index.test.ts (37.45 s)
+PASS test/server/index.test.ts (39.531 s)
 
 Test Suites: 3 passed, 3 total
 Tests:       19 passed, 19 total
 Snapshots:   0 total
-Time:        41.653 s
+Time:        40.737 s
 Ran all test suites.
-Done in 43.25s.
+Done in 42.44s.

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.
 
+# [3.4.0](https://github.com/vtex/faststore/compare/v3.3.0...v3.4.0) (2024-12-19)
+
+### Features
+
+- handle RC Events ([#2567](https://github.com/vtex/faststore/issues/2567)) ([486563d](https://github.com/vtex/faststore/commit/486563dd6e15a04686c99bcfaea6f216520255c9))
+
+# [3.3.0](https://github.com/vtex/faststore/compare/v3.2.1...v3.3.0) (2024-12-18)
+
+### Features
+
+- `Filter` with next/dynamic and lazy import ([#2596](https://github.com/vtex/faststore/issues/2596)) ([73e5496](https://github.com/vtex/faststore/commit/73e54965e656f848c20865cd2760158d634bb0c0))
+
 ## [3.2.1](https://github.com/vtex/faststore/compare/v3.2.0...v3.2.1) (2024-12-16)
 
 **Note:** Version bump only for package @faststore/core

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.2.1",
+  "version": "3.4.0",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -47,7 +47,7 @@
     "@faststore/components": "^3.1.3",
     "@faststore/graphql-utils": "^3.1.3",
     "@faststore/lighthouse": "^3.1.3",
-    "@faststore/sdk": "^3.1.3",
+    "@faststore/sdk": "^3.4.0",
     "@faststore/ui": "^3.1.4",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/client-preset": "4.2.6",
@@ -128,5 +128,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "3b311ad0a99db4cf44c396bde2aa4a01c30a3646"
+  "gitHead": "49e9dcacf82f062a09309f68e537d032f674b5cc"
 }

package/src/Layout.tsx

@@ -1,9 +1,9 @@
-import { type PropsWithChildren } from 'react'
+import type { PropsWithChildren, ReactElement } from 'react'
 
 import { usePageViewEvent } from './sdk/analytics/hooks/usePageViewEvent'
 
 function Layout({ children }: PropsWithChildren) {
-  usePageViewEvent()
+  usePageViewEvent((children as ReactElement)?.props)
 
   return <>{children}</>
 }

package/src/components/search/Filter/FilterDesktop.tsx

@@ -7,6 +7,7 @@ import {
   FilterFacetRange as UIFilterFacetRange,
   FilterFacets as UIFilterFacets,
 } from '@faststore/ui'
+import { gql } from '@generated/gql'
 import type { Filter_FacetsFragment } from '@generated/graphql'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import { useFilter } from 'src/sdk/search/useFilter'
@@ -110,4 +111,37 @@ function FilterDesktop({
   )
 }
 
+export const fragment = gql(`
+  fragment Filter_facets on StoreFacet {
+    ... on StoreFacetRange {
+      key
+      label
+
+      min {
+        selected
+        absolute
+      }
+
+      max {
+        selected
+        absolute
+      }
+
+      __typename
+    }
+    ... on StoreFacetBoolean {
+      key
+      label
+      values {
+        label
+        value
+        selected
+        quantity
+      }
+
+      __typename
+    }
+  }
+`)
+
 export default FilterDesktop

package/src/components/search/Filter/FilterSlider.tsx

@@ -1,14 +1,43 @@
+import dynamic from 'next/dynamic'
+
 import { useSearch } from '@faststore/sdk'
-import {
-  Filter as UIFilter,
-  FilterFacetBoolean as UIFilterFacetBoolean,
-  FilterFacetBooleanItem as UIFilterFacetBooleanItem,
-  FilterFacetRange as UIFilterFacetRange,
-  FilterFacets as UIFilterFacets,
-  FilterSlider as UIFilterSlider,
-} from '@faststore/ui'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 
+import type {
+  FilterFacetBooleanItemProps as UIFilterFacetBooleanItemProps,
+  FilterFacetRangeProps as UIFilterFacetRangeProps,
+  FilterFacetsProps as UIFilterFacetsProps,
+  FilterProps as UIFilterProps,
+  FilterSliderProps as UIFilterSliderProps,
+} from '@faststore/ui'
+
+const UIFilter = dynamic<{ children: React.ReactNode } & UIFilterProps>(() =>
+  /* webpackChunkName: "UIFilter" */
+  import('@faststore/ui').then((mod) => mod.Filter)
+)
+const UIFilterFacetBoolean = dynamic<{ children: React.ReactNode }>(() =>
+  /* webpackChunkName: "UIFilterFacetBoolean" */
+  import('@faststore/ui').then((mod) => mod.FilterFacetBoolean)
+)
+const UIFilterFacetBooleanItem = dynamic<UIFilterFacetBooleanItemProps>(() =>
+  /* webpackChunkName: "UIFilterFacetBooleanItem" */
+  import('@faststore/ui').then((mod) => mod.FilterFacetBooleanItem)
+)
+const UIFilterFacetRange = dynamic<UIFilterFacetRangeProps>(() =>
+  /* webpackChunkName: "UIFilterFacetRange" */
+  import('@faststore/ui').then((mod) => mod.FilterFacetRange)
+)
+const UIFilterFacets = dynamic<
+  { children: React.ReactNode } & UIFilterFacetsProps
+>(() =>
+  /* webpackChunkName: "UIFilterFacets" */
+  import('@faststore/ui').then((mod) => mod.FilterFacets)
+)
+const UIFilterSlider = dynamic<UIFilterSliderProps>(() =>
+  /* webpackChunkName: "UIFilterSlider" */
+  import('@faststore/ui').then((mod) => mod.FilterSlider)
+)
+
 import type { Filter_FacetsFragment } from '@generated/graphql'
 
 import type { useFilter } from 'src/sdk/search/useFilter'
@@ -87,7 +116,7 @@ function FilterSlider({
       <UIFilter
         testId={`mobile-${testId}`}
         indicesExpanded={expanded}
-        onAccordionChange={(index) =>
+        onAccordionChange={(index: number) =>
           dispatch({ type: 'toggleExpanded', payload: index })
         }
       >

package/src/components/search/Filter/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Filter'
+export { default as FilterDesktop } from './FilterDesktop'
 export { default as FilterSlider } from './FilterSlider'

package/src/components/sections/ProductGallery/DefaultComponents.ts

@@ -1,18 +1,34 @@
-import { lazy } from 'react'
 import {
   Button as UIButton,
+  Icon as UIIcon,
   LinkButton as UILinkButton,
   Skeleton as UISkeleton,
-  Icon as UIIcon,
 } from '@faststore/ui'
 
-import ProductCard from 'src/components/product/ProductCard'
-import FilterDesktop from 'src/components/search/Filter/FilterDesktop'
-import EmptyGallery from './EmptyGallery'
+import dynamic from 'next/dynamic'
 
-const FilterSlider = lazy(
-  () => import('src/components/search/Filter/FilterSlider')
+const ProductCard = dynamic(
+  () =>
+    /* webpackChunkName: "ProductCard" */
+    import('src/components/product/ProductCard')
 )
+const EmptyGallery = dynamic(
+  () =>
+    /* webpackChunkName: "EmptyGallery" */
+    import('./EmptyGallery')
+)
+
+const FilterDesktop = dynamic(
+  () =>
+    /* webpackChunkName: "FilterDesktop" */
+    import('src/components/search/Filter/FilterDesktop')
+)
+const FilterSlider = dynamic(
+  () =>
+    /* webpackChunkName: "FilterSlider" */
+    import('src/components/search/Filter/FilterSlider')
+)
+
 export const ProductGalleryDefaultComponents = {
   MobileFilterButton: UIButton,
   FilterIcon: UIIcon,

package/src/components/ui/ProductGallery/ProductGallery.tsx

@@ -4,11 +4,11 @@ import type { MouseEvent } from 'react'
 import { Suspense, lazy } from 'react'
 
 import { useUI } from '@faststore/ui'
-import Filter from 'src/components/search/Filter'
 import Sort from 'src/components/search/Sort'
-import FilterSkeleton from 'src/components/skeletons/FilterSkeleton'
 import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 
+import dynamic from 'next/dynamic'
+
 import { ProductCardProps } from 'src/components/product/ProductCard'
 import { FilterSliderProps } from 'src/components/search/Filter/FilterSlider'
 import { SortProps } from 'src/components/search/Sort/Sort'
@@ -21,8 +21,18 @@ import {
 import { useProductsPrefetch } from 'src/sdk/product/useProductsPrefetch'
 import { useDelayedFacets } from 'src/sdk/search/useDelayedFacets'
 import { useDelayedPagination } from 'src/sdk/search/useDelayedPagination'
+import { useFilter } from 'src/sdk/search/useFilter'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 const ProductGalleryPage = lazy(() => import('./ProductGalleryPage'))
+const FilterSkeleton = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "FilterSkeleton" */
+      'src/components/skeletons/FilterSkeleton'
+    )
+)
+
 const GalleryPageSkeleton = <ProductGridSkeleton loading />
 
 export interface ProductGalleryProps {
@@ -69,7 +79,7 @@ function ProductGallery({
   totalCount,
   searchTermLabel,
   totalCountLabel,
-  filter,
+  filter: filterCmsData,
   previousPageButton,
   loadMorePageButton,
   sortBySelector,
@@ -84,20 +94,25 @@ function ProductGallery({
     PrevIcon,
     ResultsCountSkeleton,
     SortSkeleton,
+    __experimentalFilterDesktop: FilterDesktop,
+    __experimentalFilterSlider: FilterSlider,
   } = useOverrideComponents<'ProductGallery'>()
 
-  const { openFilter } = useUI()
+  const { openFilter, filter: displayFilter } = useUI()
   const { pages, addNextPage, addPrevPage, itemsPerPage } = useSearch()
   const context = usePage<SearchPageContext | PLPContext>()
   const data = context?.data
   const facets = useDelayedFacets(data) ?? []
   const { next, prev } = useDelayedPagination(totalCount)
 
+  const { isDesktop } = useScreenResize()
+
   useProductsPrefetch(prev ? prev.cursor : null)
   useProductsPrefetch(next ? next.cursor : null)
 
   const hasFacetsLoaded = Boolean(data?.search?.facets)
   const hasProductsLoaded = Boolean(data?.search?.products)
+  const filter = useFilter(facets)
 
   return (
     <section data-testid="product-gallery" data-fs-product-listing>
@@ -115,13 +130,32 @@ function ProductGallery({
         data-fs-product-listing-content-grid
         data-fs-content="product-gallery"
       >
-        <div data-fs-product-listing-filters>
-          <FilterSkeleton loading={!hasFacetsLoaded}>
-            {hasFacetsLoaded && facets?.length > 0 && (
-              <Filter facets={facets} filter={filter} />
-            )}
-          </FilterSkeleton>
-        </div>
+        {isDesktop && (
+          <div data-fs-product-listing-filters>
+            <FilterSkeleton loading={!hasFacetsLoaded}>
+              {hasFacetsLoaded && facets?.length > 0 && (
+                <div className="hidden-mobile">
+                  <FilterDesktop.Component
+                    {...FilterDesktop.props}
+                    {...filter}
+                    title={filterCmsData?.title}
+                  />
+                </div>
+              )}
+            </FilterSkeleton>
+          </div>
+        )}
+        {!isDesktop && displayFilter && (
+          <div data-fs-product-listing-filters>
+            <FilterSlider.Component
+              {...FilterSlider.props}
+              {...filter}
+              title={filterCmsData?.title}
+              clearButtonLabel={filterCmsData?.mobileOnly?.clearButtonLabel}
+              applyButtonLabel={filterCmsData?.mobileOnly?.applyButtonLabel}
+            />
+          </div>
+        )}
         <div data-fs-product-listing-results-count data-count={totalCount}>
           <ResultsCountSkeleton.Component
             data-fs-product-listing-results-count-skeleton
@@ -168,11 +202,11 @@ function ProductGallery({
                     height={16}
                     {...FilterIcon.props}
                     name={
-                      filter?.mobileOnly?.filterButton?.icon?.icon ??
+                      filterCmsData?.mobileOnly?.filterButton?.icon?.icon ??
                       FilterIcon.props.name
                     }
                     aria-label={
-                      filter?.mobileOnly?.filterButton?.icon?.alt ??
+                      filterCmsData?.mobileOnly?.filterButton?.icon?.alt ??
                       FilterIcon.props['aria-label']
                     }
                   />
@@ -183,7 +217,7 @@ function ProductGallery({
                 // This decision can be reviewed later if needed
                 onClick={openFilter}
               >
-                {filter?.mobileOnly?.filterButton?.label}
+                {filterCmsData?.mobileOnly?.filterButton?.label}
               </MobileFilterButton.Component>
             )}
           </FilterButtonSkeleton.Component>

package/src/sdk/analytics/hooks/usePageViewEvent.ts

@@ -2,7 +2,7 @@ import type { PageViewEvent } from '@faststore/sdk'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect } from 'react'
 
-export const usePageViewEvent = () => {
+export const usePageViewEvent = (props?: any) => {
   const sendPageViewEvent = useCallback(() => {
     import('@faststore/sdk').then(({ sendAnalyticsEvent }) => {
       sendAnalyticsEvent<PageViewEvent>({
@@ -11,10 +11,11 @@ export const usePageViewEvent = () => {
           page_title: document.title,
           page_location: location.href,
           send_page_view: true,
+          ...props,
         },
       })
     })
-  }, [])
+  }, [props])
 
   const router = useRouter()
 

package/src/sdk/analytics/platform/vtex/index.ts

@@ -1,10 +1,11 @@
 import type { AnalyticsEvent } from '@faststore/sdk'
 
+import handleRCEvent from './rc'
 import handleSearchEvent from './search'
 
 export default function sendEvent(event: AnalyticsEvent) {
   // VTEX RC
-  window?.sendrc?.(event.name, event.params)
+  handleRCEvent(event)
 
   // VTEX Intelligent Search
   handleSearchEvent(event)

package/src/sdk/analytics/platform/vtex/rc.ts

@@ -0,0 +1,128 @@
+import { AnalyticsEvent, PageViewEvent } from '@faststore/sdk'
+import { ServerProductQueryQuery } from '@generated/graphql'
+import {
+  CategoryView,
+  DepartmentView,
+  HomeView,
+  IntelligentSearchQueryEvent,
+  InternalSiteSearchView,
+  OtherView,
+  ProductView,
+  SearchEvents,
+} from '../../types'
+
+const EventNames = {
+  OTHER_VIEW: 'otherView',
+  HOME_VIEW: 'homeView',
+  CATEGORY_VIEW: 'categoryView',
+  DEPARTMENT_VIEW: 'departmentView',
+  INTERNAL_SITE_SEARCH_VIEW: 'internalSiteSearchView',
+  PRODUCT_VIEW: 'productView',
+} as const
+
+type RequestCaptureEventNames = (typeof EventNames)[keyof typeof EventNames]
+type RequestCaptureEvent =
+  | HomeView
+  | CategoryView
+  | DepartmentView
+  | InternalSiteSearchView
+  | ProductView
+  | OtherView
+
+const sendEvent = (
+  eventName: RequestCaptureEventNames,
+  eventParams: RequestCaptureEvent
+) => {
+  window?.sendrc?.(eventName, eventParams)
+}
+
+const handleEvent = (event: AnalyticsEvent | SearchEvents) => {
+  let eventParams
+  switch (event.name) {
+    case 'page_view':
+      eventParams = (event as PageViewEvent).params
+      const pageType = eventParams?.page?.type ?? eventParams?.type
+
+      switch (pageType) {
+        case 'plp':
+          if (!eventParams?.page_location?.includes('fuzzy')) {
+            // Skip when there is no fuzzy parameters on the URL,
+            // otherwise it'll be sent twice (once without fuzzy and once with fuzzy)
+            break
+          }
+          const collection = eventParams?.data?.collection
+          const collectionCategoryList =
+            collection?.breadcrumbList?.itemListElement
+          if (collectionCategoryList.length > 1) {
+            sendEvent(EventNames.CATEGORY_VIEW, {
+              departmentName: collectionCategoryList[0]?.name,
+              categoryId: collection?.id,
+              categoryName:
+                collectionCategoryList[collectionCategoryList.length - 1]?.name,
+            })
+          } else {
+            sendEvent(EventNames.DEPARTMENT_VIEW, {
+              departmentId: collection?.id,
+              departmentName: collectionCategoryList[0]?.name,
+            })
+          }
+
+          break
+
+        case 'pdp':
+          const product = eventParams?.data
+            ?.product as ServerProductQueryQuery['product']
+          const productCategoryList = product?.breadcrumbList?.itemListElement
+          const offers = product?.offers?.offers
+          const sellerIds = offers.map((offer) => offer.seller.identifier)
+          const skusOutOfStock = offers.filter(
+            (offer) => offer.availability === 'https://schema.org/OutOfStock'
+          )
+
+          sendEvent(EventNames.PRODUCT_VIEW, {
+            skuStockOutFromProductDetail: skusOutOfStock,
+            productId: product?.isVariantOf?.productGroupID,
+            productName: product?.isVariantOf?.name,
+            productBrandName: product?.brand?.name,
+            productDepartmentName: productCategoryList
+              ? productCategoryList[0]?.name
+              : '',
+            productCategoryName:
+              productCategoryList.length > 1
+                ? productCategoryList[productCategoryList.length - 2]?.name
+                : '',
+            productPrice: offers[0]?.price,
+            productListPrice: offers[0]?.listPrice,
+            sellerId: offers[0]?.seller?.identifier,
+            sellerIds: sellerIds.join(','),
+          })
+          break
+
+        case 'home':
+          sendEvent(EventNames.HOME_VIEW, {})
+          break
+
+        case 'search':
+          // This one is skipped because the event related to search view is being
+          // sent using the intelligent_search_query event due to its parameters
+          break
+
+        default:
+          sendEvent(EventNames.OTHER_VIEW, {})
+      }
+      break
+
+    case 'intelligent_search_query':
+      eventParams = (event as IntelligentSearchQueryEvent).params
+      sendEvent(EventNames.INTERNAL_SITE_SEARCH_VIEW, {
+        siteSearchTerm: eventParams.term,
+        siteSearchForm: eventParams.url,
+        siteSearchResults: eventParams.totalCount,
+      })
+      break
+
+    default:
+  }
+}
+
+export default handleEvent

package/src/sdk/analytics/platform/vtex/search.ts

@@ -2,12 +2,7 @@
  * More info at: https://developers.vtex.com/docs/api-reference/intelligent-search-events-api-headless
  */
 import type { AnalyticsEvent } from '@faststore/sdk'
-import type {
-  IntelligentSearchAutocompleteClickEvent,
-  IntelligentSearchAutocompleteQueryEvent,
-  IntelligentSearchQueryEvent,
-  SearchSelectItemEvent,
-} from '../../types'
+import type { SearchEvents } from '../../types'
 
 import config from '../../../../../discovery.config'
 import { getCookie } from '../../../../utils/getCookie'
@@ -103,14 +98,7 @@ const isFullTextSearch = (url: URL) =>
   typeof url.searchParams.get('q') === 'string' &&
   /^\/s(\/)?$/g.test(url.pathname)
 
-const handleEvent = (
-  event:
-    | AnalyticsEvent
-    | SearchSelectItemEvent
-    | IntelligentSearchQueryEvent
-    | IntelligentSearchAutocompleteQueryEvent
-    | IntelligentSearchAutocompleteClickEvent
-) => {
+const handleEvent = (event: AnalyticsEvent | SearchEvents) => {
   switch (event.name) {
     case 'search_select_item': {
       const url = new URL(event.params.url)

package/src/sdk/analytics/types.ts

@@ -60,3 +60,58 @@ export interface IntelligentSearchAutocompleteClickEvent {
   name: 'intelligent_search_autocomplete_click'
   params: IntelligentSearchAutocompleteClickParams
 }
+
+export type SearchEvents =
+  | SearchSelectItemEvent
+  | IntelligentSearchQueryEvent
+  | IntelligentSearchAutocompleteQueryEvent
+  | IntelligentSearchAutocompleteClickEvent
+
+/**
+ * RC event types
+ * Types copied from Request Capture App: https://github.com/vtex/request-capture-app/blob/1becac32c002cb03a57bf36c8a7f9400eab8b933/react/typings/rcevents.d.ts
+ */
+
+export interface HomeView {}
+
+export interface CategoryView {
+  departmentId?: string
+  departmentName?: string
+  categoryId?: string
+  categoryName?: string
+}
+
+export interface DepartmentView {
+  departmentId?: string
+  departmentName?: string
+}
+
+export interface InternalSiteSearchView {
+  siteSearchTerm?: string // e.g.: "areia"
+  siteSearchForm?: string // e.g.: "/gatos/ambiente--gatos/caixa-de-areia/areia?PS=20"
+  siteSearchCategory?: string // e.g.: "10000283"
+  siteSearchResults?: number // e.g.: 26
+}
+
+type SkuId = string
+
+export interface ProductView {
+  skuStockOutFromProductDetail: string[]
+  productId: string
+  productReferenceId: string
+  productEans: string[]
+  skuStocks: Record<SkuId, number>
+  productName: string
+  productBrandId: string
+  productBrandName: string
+  productDepartmentId: string
+  productDepartmentName: string
+  productCategoryId: string
+  productCategoryName: string
+  productListPrice: number
+  productPrice: number
+  sellerId: string
+  sellerIds: string // e.g.: "00443713,04412311,1"
+}
+
+export interface OtherView {}