@faststore/core 2.0.88-alpha.0 → 2.0.90-alpha.0

package/.turbo/turbo-build.log

@@ -17,6 +17,7 @@ info  - Generating static pages (0/13)
 info  - Generating static pages (3/13)
 info  - Generating static pages (6/13)
 info  - Generating static pages (9/13)
+warn - CallToAction not found. Add a new component for this section or remove it from the CMS
 info  - Generating static pages (13/13)
 info  - Finalizing page optimization...
 
@@ -24,10 +25,10 @@ Route (pages)                              Size     First Load JS
 ┌ ● /                                      2.83 kB         127 kB
 ├   └ css/43d61b402f41569b.css             1.84 kB
 ├   /_app                                  0 B             105 kB
-├ ● /[...slug]                             9.99 kB         131 kB
-├   └ css/430b8cafbf7c23c1.css             2.53 kB
-├ ● /[slug]/p                              11.5 kB         135 kB
-├   └ css/a3aac8b785a9dfe2.css             3.22 kB
+├ ● /[...slug]                             9.98 kB         131 kB
+├   └ css/8ea129ea90e49e98.css             1.83 kB
+├ ● /[slug]/p                              11.7 kB         135 kB
+├   └ css/59446068ab594e58.css             3 kB
 ├ ○ /404                                   431 B           110 kB
 ├ ○ /500                                   439 B           110 kB
 ├ ○ /account                               369 B           110 kB
@@ -35,14 +36,14 @@ Route (pages)                              Size     First Load JS
 ├ λ /api/preview                           0 B             105 kB
 ├ ○ /checkout                              371 B           110 kB
 ├ ○ /login                                 368 B           110 kB
-└ ○ /s                                     895 B           121 kB
-    └ css/9dd1d1084d254c66.css             2.33 kB
-+ First Load JS shared by all              125 kB
+└ ○ /s                                     896 B           122 kB
+    └ css/db63ea05e98cb7e8.css             1.63 kB
++ First Load JS shared by all              126 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-9746772201fe3ac1.js        23.9 kB
-  ├ chunks/pages/_app-256a3d53cde1dece.js  33.2 kB
-  ├ chunks/webpack-432485347f98ee3c.js     2.18 kB
-  └ css/4ac2b0d468ca74dc.css               20.9 kB
+  ├ chunks/pages/_app-0bf8e95d55047056.js  33.2 kB
+  ├ chunks/webpack-e8365cb80353190c.js     2.18 kB
+  └ css/e848206ea71282d6.css               21.8 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.90-alpha.0](https://github.com/vtex/faststore/compare/v2.0.89-alpha.0...v2.0.90-alpha.0) (2023-03-29)
+
+### Features
+
+- Adds `Filter` and `FilterSlider` Components. ([#1687](https://github.com/vtex/faststore/issues/1687)) ([a18e1af](https://github.com/vtex/faststore/commit/a18e1af9fe6037f19a558f2c49e52ba01e50e95a))
+
+## [2.0.89-alpha.0](https://github.com/vtex/faststore/compare/v2.0.88-alpha.0...v2.0.89-alpha.0) (2023-03-29)
+
+### Features
+
+- Add `OutOfStock` components ([#1685](https://github.com/vtex/faststore/issues/1685)) ([25f4442](https://github.com/vtex/faststore/commit/25f444214e234f5f0f9287ef8bc403231b2eac2b))
+
 ## [2.0.88-alpha.0](https://github.com/vtex/faststore/compare/v2.0.87-alpha.0...v2.0.88-alpha.0) (2023-03-29)
 
 ### Features

package/cypress/integration/plp.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable cypress/no-unnecessary-waiting */
 // eslint-disable-next-line spaced-comment
 /// <reference types="cypress" />
 /**
@@ -23,11 +22,11 @@ describe('Search page Filters and Sorting options', () => {
     cy.getById('open-filter-button')
       .click()
       .get(
-        `[data-testid=mobile-store-filter-accordion][data-type=StoreFacetBoolean]>[data-testid=mobile-store-filter-accordion-button]`
+        `[data-testid=mobile-fs-filter-accordion][data-type=StoreFacetBoolean]>[data-testid=mobile-fs-filter-accordion-button]`
       )
       .first()
       .click()
-      .getById('mobile-store-filter-accordion-panel-checkbox')
+      .getById('mobile-fs-filter-accordion-panel-checkbox')
       .should('exist')
       .first()
       .click()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.88-alpha.0",
+  "version": "2.0.90-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.3-alpha.0",
-    "@faststore/components": "^2.0.88-alpha.0",
+    "@faststore/components": "^2.0.90-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.3-alpha.0",
-    "@faststore/ui": "^2.0.88-alpha.0",
+    "@faststore/ui": "^2.0.90-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": "a9aa7a6572c08e0bd26e384bb66464e633f1ad84"
+  "gitHead": "8382d02bffb1fcf8c517df11221b228ecb1a38bd"
 }

package/src/components/product/OutOfStock/OutOfStock.tsx

@@ -1,133 +1,51 @@
-import {
-  OutOfStock as UIOutOfStock,
-  OutOfStockTitle as UIOutOfStockTitle,
-  OutOfStockMessage as UIOutOfStockMessage,
-  Button as UIButton,
-  InputField as UIInputField,
-} from '@faststore/ui'
+import { OutOfStock as UIOutOfStock, useUI } from '@faststore/ui'
 import { useState } from 'react'
-import type { ReactElement, FormEvent } from 'react'
+import type { FormEvent } from 'react'
 
-import Icon from 'src/components/ui/Icon'
-import styles from 'src/components/product/OutOfStock/out-of-stock.module.scss'
 import { useSession } from 'src/sdk/session'
+import Icon from 'src/components/ui/Icon'
 
-export interface OutOfStockProps {
-  /**
-   * The Out of Stock Section's title.
-   */
-  title?: string
-  /**
-   * The button text.
-   */
-  buttonText?: string
-  /**
-   * Message describing when the user will be notified.
-   */
-  notificationMsg?: string
-  /**
-   * Icon displayed inside the button.
-   * @default <Icon name="BellRinging" />
-   */
-  buttonIcon?: ReactElement
-  /**
-   * Icon displayed inside the notification message.
-   * @default <Icon name="BellRinging" />
-   */
-  notificationMsgIcon?: ReactElement
-  /**
-   * ID to find this component in testing tools (e.g.: cypress,
-   * testing-library, and jest).
-   */
-  testId?: string
-  /**
-   * Event emitted when form is submitted.
-   */
-  onSubmit: (value: string) => void
-}
-
-function OutOfStock(props: OutOfStockProps) {
+function OutOfStock() {
   const { postalCode } = useSession()
 
-  const defaultButtonText = 'Notify me'
-  const defaultIconName = 'BellRinging'
-
-  const [btnText, setBtnText] = useState(defaultButtonText)
-  const [buttonIconName, setButtonIconName] = useState(defaultIconName)
-  const [disabled, setDisabled] = useState(false)
-  const [email, setEmail] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState('')
-
-  const {
-    title = postalCode ? 'Unavailable in Your Location' : 'Out of Stock',
-    notificationMsg = 'Notify me when available',
-    buttonText = btnText,
-    buttonIcon = <Icon name={buttonIconName} width={16} height={16} />,
-    notificationMsgIcon = (
-      <Icon name={defaultIconName} width={16} height={16} />
-    ),
-    onSubmit,
-  } = props
-
-  const reset = () => {
-    setButtonIconName(defaultIconName)
-    setBtnText(defaultButtonText)
-    setDisabled(false)
-
-    setEmail('')
-    setError('')
-  }
+  const { pushToast } = useUI()
 
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault()
+    setIsLoading(true)
 
-    setDisabled(true)
-    setButtonIconName('Ellipsis')
+    // TODO: Missing integration
 
     try {
-      onSubmit(email)
-      setButtonIconName('Checked')
-      setBtnText('Subscribed successfully')
+      // Return to original state after 2s mockup
+      setTimeout(() => setIsLoading(false), 2000)
+
+      const formElement = event.currentTarget as HTMLFormElement
+      formElement.reset()
+
+      pushToast({
+        title: 'Subscribed successfully!',
+        message: "You'll be notified when this product is back to stock.",
+        status: 'INFO',
+        icon: <Icon name="CircleWavyCheck" width={30} height={30} />,
+      })
     } catch (err) {
       setError(err.message)
     } finally {
-      // Return to original state after 2s
-      setTimeout(reset, 2000)
     }
   }
 
   return (
     <UIOutOfStock
-      data-fs-out-of-stock
-      className={styles.fsOutOfStock}
+      title={postalCode ? 'Unavailable in Your Location' : 'Out of Stock'}
+      inputLabel="Email"
+      subtitle="Notify me when available"
       onSubmit={handleSubmit}
-    >
-      <UIOutOfStockTitle data-fs-out-of-stock-title>{title}</UIOutOfStockTitle>
-      <UIOutOfStockMessage data-fs-out-of-stock-message>
-        {notificationMsgIcon} {notificationMsg}
-      </UIOutOfStockMessage>
-      <UIInputField
-        id="out-of-stock-email"
-        value={email}
-        label="Email"
-        aria-label="Email"
-        error={error}
-        onChange={(e) => {
-          setError('')
-          setEmail(e.target.value)
-        }}
-      />
-      <UIButton
-        data-fs-out-of-stock-button
-        type="submit"
-        disabled={disabled}
-        variant="primary"
-        icon={buttonIcon}
-        iconPosition="left"
-      >
-        {buttonText}
-      </UIButton>
-    </UIOutOfStock>
+      disabled={isLoading}
+      errorMessage={error}
+    />
   )
 }
 

package/src/components/product/OutOfStock/index.ts

@@ -1,2 +1 @@
 export { default } from './OutOfStock'
-export type { OutOfStockProps } from './OutOfStock'

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

@@ -1,10 +1,8 @@
 import { gql } from '@faststore/graphql-utils'
-import { setFacet, toggleFacet, useSearch } from '@faststore/sdk'
 
-import type { Filter_FacetsFragment } from '@generated/graphql'
 import { useUI } from '@faststore/ui'
-
-import Facets from './Facets'
+import type { Filter_FacetsFragment } from '@generated/graphql'
+import FilterDesktop from './FilterDesktop'
 import FilterSlider from './FilterSlider'
 import { useFilter } from './useFilter'
 
@@ -20,37 +18,19 @@ interface Props {
   testId?: string
 }
 
-function Filter({ facets: allFacets, testId = 'store-filter' }: Props) {
+function Filter({ facets: allFacets, testId = 'fs-filter' }: Props) {
   const filter = useFilter(allFacets)
-  const { resetInfiniteScroll, state, setState } = useSearch()
   const { filter: displayFilter } = useUI()
-  const { facets, expanded, dispatch } = filter
 
   return (
     <>
       <div className="hidden-mobile">
-        <Facets
-          facets={facets}
-          testId={`desktop-${testId}`}
-          indicesExpanded={expanded}
-          onFacetChange={(facet, type) => {
-            setState({
-              ...state,
-              selectedFacets:
-                type === 'BOOLEAN'
-                  ? toggleFacet(state.selectedFacets, facet)
-                  : setFacet(state.selectedFacets, facet, true),
-              page: 0,
-            })
-            resetInfiniteScroll(0)
-          }}
-          onAccordionChange={(index) =>
-            dispatch({ type: 'toggleExpanded', payload: index })
-          }
-        />
+        <FilterDesktop {...filter} testId={testId} title="Filters" />
       </div>
 
-      {displayFilter && <FilterSlider {...filter} testId={testId} />}
+      {displayFilter && (
+        <FilterSlider {...filter} testId={testId} title="Filters" />
+      )}
     </>
   )
 }

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

@@ -0,0 +1,109 @@
+import { setFacet, toggleFacet, useSearch } from '@faststore/sdk'
+
+import {
+  Filter as UIFilter,
+  FilterFacetBoolean as UIFilterFacetBoolean,
+  FilterFacetBooleanItem as UIFilterFacetBooleanItem,
+  FilterFacetRange as UIFilterFacetRange,
+  FilterFacets as UIFilterFacets,
+} from '@faststore/ui'
+import type { Filter_FacetsFragment } from '@generated/graphql'
+import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
+import { useFilter } from './useFilter'
+
+interface Props {
+  /**
+   * The array that represents the details of every facet.
+   */
+  facets: Filter_FacetsFragment[]
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * Title for the `FilterDesktop` component.
+   */
+  title?: string
+}
+
+function FilterDesktop({
+  facets,
+  testId,
+  dispatch,
+  expanded,
+  title,
+}: Props & ReturnType<typeof useFilter>) {
+  const { resetInfiniteScroll, state, setState } = useSearch()
+
+  return (
+    <UIFilter
+      testId={`desktop-${testId}`}
+      title={title}
+      indicesExpanded={expanded}
+      onAccordionChange={(idx) =>
+        dispatch({ type: 'toggleExpanded', payload: idx })
+      }
+    >
+      {facets.map((facet, index) => {
+        const { __typename: type, label } = facet
+        const isExpanded = expanded.has(index)
+        return (
+          <UIFilterFacets
+            key={`${testId}-${label}-${index}`}
+            testId={testId}
+            index={index}
+            type={type}
+            label={label}
+          >
+            {type === 'StoreFacetBoolean' && isExpanded && (
+              <UIFilterFacetBoolean>
+                {facet.values.map((item) => (
+                  <UIFilterFacetBooleanItem
+                    key={`${testId}-${facet.label}-${item.label}`}
+                    id={`${testId}-${facet.label}-${item.label}`}
+                    testId={testId}
+                    onFacetChange={(facet) => {
+                      setState({
+                        ...state,
+                        selectedFacets: toggleFacet(
+                          state.selectedFacets,
+                          facet
+                        ),
+                        page: 0,
+                      })
+                      resetInfiniteScroll(0)
+                    }}
+                    selected={item.selected}
+                    value={item.value}
+                    quantity={item.quantity}
+                    facetKey={facet.key}
+                    label={item.label}
+                  />
+                ))}
+              </UIFilterFacetBoolean>
+            )}
+            {type === 'StoreFacetRange' && isExpanded && (
+              <UIFilterFacetRange
+                facetKey={facet.key}
+                min={facet.min}
+                max={facet.max}
+                formatter={useFormattedPrice}
+                onFacetChange={(facet) => {
+                  setState({
+                    ...state,
+                    selectedFacets: setFacet(state.selectedFacets, facet, true),
+                    page: 0,
+                  })
+                  resetInfiniteScroll(0)
+                }}
+              />
+            )}
+          </UIFilterFacets>
+        )
+      })}
+    </UIFilter>
+  )
+}
+
+export default FilterDesktop

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

@@ -1,28 +1,32 @@
 import { useSearch } from '@faststore/sdk'
 import {
-  Button as UIButton,
-  SlideOver as UISlideOver,
-  SlideOverHeader as UISlideOverHeader,
+  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 { Filter_FacetsFragment } from '@generated/graphql'
-import { useUI } from '@faststore/ui'
-import { useFadeEffect } from '@faststore/ui'
 
-import Facets from './Facets'
-import styles from './filter-slider.module.scss'
 import type { useFilter } from './useFilter'
 
 interface Props {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
   /**
    * The array that represents the details of every facet.
    */
   facets: Filter_FacetsFragment[]
   /**
-   * ID to find this component in testing tools (e.g.: cypress,
-   * testing-library, and jest).
+   * Title for the `Filter` component.
    */
-  testId?: string
+  title?: string
 }
 
 function FilterSlider({
@@ -31,76 +35,96 @@ function FilterSlider({
   dispatch,
   expanded,
   selected,
+  title,
 }: Props & ReturnType<typeof useFilter>) {
-  const { closeFilter } = useUI()
-  const { fade, fadeOut } = useFadeEffect()
-
   const { resetInfiniteScroll, setState, state } = useSearch()
 
   return (
-    <UISlideOver
-      isOpen
-      fade={fade}
-      onDismiss={fadeOut}
+    <UIFilterSlider
+      title={title}
       size="partial"
       direction="rightSide"
-      className={styles.fsFilterSlider}
-      onTransitionEnd={() => fade === 'out' && closeFilter()}
-    >
-      <div data-fs-filter-slider-content>
-        <UISlideOverHeader
-          onClose={() => {
-            dispatch({
-              type: 'selectFacets',
-              payload: state.selectedFacets,
-            })
-
-            fadeOut()
-          }}
-        >
-          <h2 className="text__lead">Filters</h2>
-        </UISlideOverHeader>
-        <Facets
-          facets={facets}
-          testId={`mobile-${testId}`}
-          indicesExpanded={expanded}
-          onFacetChange={(facet, type) =>
-            type === 'BOOLEAN'
-              ? dispatch({ type: 'toggleFacet', payload: facet })
-              : dispatch({ type: 'setFacet', payload: { facet, unique: true } })
-          }
-          onAccordionChange={(index) =>
-            dispatch({ type: 'toggleExpanded', payload: index })
-          }
-        />
-      </div>
-      <footer data-fs-filter-slider-footer>
-        <UIButton
-          data-fs-filter-slider-footer-button-clear
-          variant="secondary"
-          onClick={() => dispatch({ type: 'selectFacets', payload: [] })}
-        >
-          Clear All
-        </UIButton>
-        <UIButton
-          data-fs-filter-slider-footer-button-apply
-          variant="primary"
-          data-testid="filter-slider-button-apply"
-          onClick={() => {
-            resetInfiniteScroll(0)
+      clearBtnProps={{
+        variant: 'secondary',
+        onClick: () => dispatch({ type: 'selectFacets', payload: [] }),
+        children: 'Clear All',
+      }}
+      applyBtnProps={{
+        variant: 'primary',
+        onClick: () => {
+          resetInfiniteScroll(0)
 
-            setState({
-              ...state,
-              selectedFacets: selected,
-              page: 0,
-            })
-            fadeOut()
-          }}
-        >
-          Apply
-        </UIButton>
-      </footer>
-    </UISlideOver>
+          setState({
+            ...state,
+            selectedFacets: selected,
+            page: 0,
+          })
+        },
+        children: 'Apply',
+      }}
+      onClose={() => {
+        dispatch({
+          type: 'selectFacets',
+          payload: state.selectedFacets,
+        })
+      }}
+    >
+      <UIFilter
+        testId={`mobile-${testId}`}
+        indicesExpanded={expanded}
+        onAccordionChange={(index) =>
+          dispatch({ type: 'toggleExpanded', payload: index })
+        }
+      >
+        {facets.map((facet, index) => {
+          const { __typename: type, label } = facet
+          const isExpanded = expanded.has(index)
+          return (
+            <UIFilterFacets
+              key={`${testId}-${label}-${index}`}
+              testId={testId}
+              index={index}
+              type={type}
+              label={label}
+            >
+              {type === 'StoreFacetBoolean' && isExpanded && (
+                <UIFilterFacetBoolean>
+                  {facet.values.map((item) => (
+                    <UIFilterFacetBooleanItem
+                      key={`${testId}-${facet.label}-${item.label}`}
+                      id={`${testId}-${facet.label}-${item.label}`}
+                      testId={testId}
+                      onFacetChange={(facet) =>
+                        dispatch({ type: 'toggleFacet', payload: facet })
+                      }
+                      selected={item.selected}
+                      value={item.value}
+                      quantity={item.quantity}
+                      facetKey={facet.key}
+                      label={item.label}
+                    />
+                  ))}
+                </UIFilterFacetBoolean>
+              )}
+              {type === 'StoreFacetRange' && isExpanded && (
+                <UIFilterFacetRange
+                  facetKey={facet.key}
+                  min={facet.min}
+                  max={facet.max}
+                  formatter={useFormattedPrice}
+                  onFacetChange={(facet) =>
+                    dispatch({
+                      type: 'setFacet',
+                      payload: { facet, unique: true },
+                    })
+                  }
+                />
+              )}
+            </UIFilterFacets>
+          )
+        })}
+      </UIFilter>
+    </UIFilterSlider>
   )
 }