@faststore/core 3.0.5 → 3.0.7

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 $ yarn partytown & yarn generate && next build
-$ partytown copylib ./public/~partytown
 $ faststore generate-graphql -c
+$ partytown copylib ./public/~partytown
 Partytown lib copied to: /home/runner/work/faststore/faststore/packages/core/public/~partytown
 success - GraphQL schema, types, and optimizations successfully generated 🎉
 ⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
@@ -50,11 +50,11 @@ Route (pages)                              Size     First Load JS
 ├ ● /checkout                              662 B           126 kB
 ├ ● /login                                 1.58 kB         127 kB
 └ ● /s                                     4.66 kB         141 kB
-+ First Load JS shared by all              96.4 kB
++ First Load JS shared by all              96.5 kB
   ├ chunks/framework-8e279965036b6169.js   45.4 kB
   ├ chunks/main-6f63f6746cc029db.js        33.1 kB
   ├ chunks/pages/_app-6516d0c2c7e0e686.js  12.5 kB
-  ├ chunks/webpack-1c08d77cfe1b8585.js     2.45 kB
+  ├ chunks/webpack-b4a2fdf4ef127bb7.js     2.45 kB
   └ css/5d1f64b61ea581f4.css               3.05 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,23 +1,23 @@
 $ jest
-PASS test/server/index.test.ts (21.702 s)
+PASS test/server/index.test.ts (21.317 s)
   FastStore GraphQL Layer
     @faststore/api
-      ✓ should return a valid GraphQL schema (8 ms)
-      ✓ should return a valid GraphQL schema contain all expected types (6 ms)
+      ✓ should return a valid GraphQL schema (9 ms)
+      ✓ should return a valid GraphQL schema contain all expected types (24 ms)
       ✓ should return a valid GraphQL schema contain all expected queries (1 ms)
-      ✓ should return a valid GraphQL schema contain all expected mutations
+      ✓ should return a valid GraphQL schema contain all expected mutations (2 ms)
     VTEX API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (8 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (10 ms)
     Third Party API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (18 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (17 ms)
     Final Schema after merging
-      ✓ should return a valid merged GraphQL schema (43 ms)
+      ✓ should return a valid merged GraphQL schema (55 ms)
     Envelop
-      ✓ should exist with its plugins (48 ms)
-      ✓ should handle options and execute (257 ms)
+      ✓ should exist with its plugins (54 ms)
+      ✓ should handle options and execute (528 ms)
 
 Test Suites: 1 passed, 1 total
 Tests:       9 passed, 9 total
 Snapshots:   0 total
-Time:        21.784 s
+Time:        21.377 s
 Ran all test suites.

package/README.md

@@ -7,58 +7,20 @@
   A starter powered by FastStore and NextJS
 </h1>
 
-Kickoff your store with this boilerplate. This starter ships with the main FastStore configuration files you might need to get up and running blazing fast with the blazing-fast store for React.
-
-## ⚠️ Before you start
-
-As of Sep, 2022, this starter is still far from covering most basic cases found on VTEX. To summarize what we still do not support that is considered basic on the VTEX commerce platform, we prepared the list below. If the feature you want is listed, you can either wait for us to add support to the feature, or fork the repo and implement on your own. Note that, by forking the repo, you will miss new features and improvements we do in this repo and you will need a developer to backport the feature to your store. Finally, this list is a work in progress, so some features may be missing from both base.store starter and this list.
-
-1. Multiple CMS Previews. Only one user is allowed to preview content from the CMS at a time. If two users preview any content from any page at the CMS, the previews are not consistent and one user may see data from the other.
-2. Price Table
-3. Internationalization
-4. Shared Cart (Carrinho compartilhado)
-5. Clear products that are our of stock from cart
-6. GDPR (LGDP)
-7. Shipping simulation
-8. Sitemap
-9. Promotions via utm
+Kick off your store with this boilerplate.
+This starter ships the main FastStore configuration files to get your store up and running blazing-fast. This source code is the base for FastStore projects starter.
 
 ## 🚀 Quick start
 
-0. **Clone this repo**
-
-   Get up and running by cloning this repo.
-
-   ```shell
-   # Clone this repo into your machine
-   npx degit vtex-sites/nextjs.store awesome.store
-   ```
-
 1. **Install dependencies**
 
    Install dependencies with yarn
 
    ```shell
-   cd awesome.store/
    yarn
    ```
 
-2. **Setup faststore.config.js**
-
-   Choose the ecommerce platform provider of your choice in the `store.config` file and set the corresponding options. For instance, to connect to the VTEX platform on the store `fashioneurope`:
-
-   ```js
-   module.exports = {
-     platform: 'vtex',
-
-     api: {
-       storeId: 'fashioneurope'
-       environment: 'vtexcommercestable'
-     }
-   }
-   ```
-
-3. **Start developing**
+2. **Start developing**
 
    Navigate into your new site’s directory and start it up.
 
@@ -66,45 +28,49 @@ As of Sep, 2022, this starter is still far from covering most basic cases found
    yarn dev
    ```
 
-4. **Open the source code and start editing!**
+3. **Open the source code and start editing!**
 
    Your site is now running at `http://localhost:3000`!
 
-   Open the `awesome.store` directory in your code editor of choice and edit `src/pages/index.tsx`. Save your changes and the browser will update in real-time!
-
-## :technologist: Contributing
-
-1. **Keep the CHANGELOG updated**
-   We use a CHANGELOG to keep the history of all notable changes made to this repository.
-   Each PR must have at least one entry on the `[UNRELEASED]` section of the `CHANGELOG.md` file.
-
 ## 🧐 What's inside?
 
-A quick look at the top-level files and directories you'll see in a NextJS project.
+A quick look at the top-level files and directories you'll see in a this NextJS project.
 
     ./
     ├── node_modules
+    ├── @generated
+    ├── cms
+    ├── public
     ├── src
-    ├── .gitignore
-    ├── .eslintignore
+    ├── test
+    ├── .babelrc.js
+    ├── .editorconfig
     ├── .prettierignore
     ├── .prettierrrc
-    ├── .eslintrc
-    ├── LICENSE
-    └── yarn.lock
-    ├── package.json
-    ├── tsconfig.json
-    ├── faststore.config.js
-    ├── README.md
+    ├── .stylelintignore
+    ├── .gitignore
+    ├── .eslintignore
     ├── CHANGELOG.md
-    ├── __generated__
-    ├── babel.config.js
+    ├── codegen.ts
     ├── cypress
     ├── cypress.config.ts
+    ├── faststore.config.default.js
+    ├── faststore.config.js
+    ├── index.ts
+    ├── jest.config.js
+    ├── LICENSE
     ├── lighthouserc.js
-    ├── public
+    ├── next-env.d.ts
+    ├── next.config.ts
+    ├── package.json
+    ├── tsconfig.json
+    ├── postcss.config.js
+    ├── postinstall.js
     ├── pull_request_template.md
-    ├── renovate.json
+    ├── README.md
+    ├── stylelint.config.js
+    ├── tsconfig.json
+    ├── vtex.env
 
 1.  **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
 
@@ -114,39 +80,27 @@ A quick look at the top-level files and directories you'll see in a NextJS proje
 
 4.  **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
 
-5.  **`.eslintrc.js`**: This is a configuration file for [ESLint](https://eslint.org/). ESlint is a tool to find and fix problems in your JavaScript code.
-
-6.  **`LICENSE`**: NextJS is licensed under the MIT license.
-
-7.  **`yarn.lock`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
-
-8.  **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
-
-9.  **`tsconfig.json`**: The configuration file for the typescript compiler. This will statically analyze your code for errors and bugs before releasing them into production
-
-10. **`faststore.config.js`**: Configure your e-commerce platform, default sales channel etc.
-
-11. **`README.md`**: A text file containing useful reference information about your project.
+5.  **`LICENSE`**: NextJS is licensed under the MIT license.
 
-12. **`CHANGELOG.md`**: A text file containing all notable changes to the project.
+6.  **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
 
-13. **`__generated__`**: Where TypeScript typings are generated for your GraphQL queries. You can use these files for strongly typing your App
+7.  **`tsconfig.json`**: The configuration file for the typescript compiler. This will statically analyze your code for errors and bugs before releasing them into production
 
-14. **`babel.config.js`**: [Babel configurations](https://babeljs.io/docs/en/configuration#babelrcjson) for you app. This is where you can change the targeted browsers.
+8.  **`faststore.config.default.js`**: Configure your e-commerce platform, default sales channel etc.
 
-15. **`cypress`**: End to End(e2e) tests using Cypress. Most of the scenarios are covered here. Add your custom flows to avoid regressions
+9.  **`@generated`**: Where TypeScript typings are generated for your GraphQL queries. You can use these files for strongly typing your App
 
-16. **`cypress.config.ts`**: [Cypress configuration file](https://docs.cypress.io/guides/references/configuration)
+10. **`cypress`**: End to End(e2e) tests using Cypress. Most of the scenarios are covered here. Add your custom flows to avoid regressions
 
-17. **`lighthouserc.js`**: Configures [Google Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci). This is where you can turn on/off lighthouse assertions to be used by Lighthouse CI Bot/hook
+11. **`cypress.config.ts`**: [Cypress configuration file](https://docs.cypress.io/guides/references/configuration)
 
-18. **`pull_request_template.md`**: Template used when creating your Pull Requests
+12. **`lighthouserc.js`**: Configures [Google Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci). This is where you can turn on/off lighthouse assertions to be used by Lighthouse CI Bot/hook
 
-19. **`renovate.json`**: Renovate configuration file to keep your store always fresh with FastStore's latest versions
+13. **`pull_request_template.md`**: Template used when creating your Pull Requests
 
-20. **`.prettierignore`**: Ignore listed files when applying prettier rules
+14. **`.prettierignore`**: Ignore listed files when applying prettier rules
 
-21. **`.eslintignore`**: Ignore listed files when applying eslint rules
+15. **`.eslintignore`**: Ignore listed files when applying eslint rules
 
 ## 💻 Code Structure
 
@@ -154,8 +108,8 @@ All code is inside the `src` folder. The code is split into folders that impleme
 
 The `controller` is inside the `src/sdk` folder. This is where you will find most logic for the application. This folder contains hooks for adding items to cart, making graphql queries, resizing images, etc. If you need to write a custom business logic this is probably the place to put this logic.
 
-The `views` are written in the `src/components` folder and are subdivided into domain-specific components. Cart related items are inside the `src/components/cart` folder. Search and Product related components like facets, product summary, and search results are in their respective folders. Basic building blocks components are inside the UI folder. Components like button, checkbox, and modal are good candidates for the UI folder.
-Section components are those components that occupy a whole slice on the webpage and are desirable to be changed by a CMS. Section components are Product Gallery, Carousel, Shelf and Product description.
+The `views` are written in the `src/components` folder and are subdivided into domain-specific components. Cart related items are inside the `src/components/cart` folder. Search and Product related components like facets, product summary, and search results are in their respective folders. Basic building blocks components used in the sections are inside the UI folder.
+Section components are those components that occupy a whole slice on the webpage and are desirable to be changed by a CMS. Section components are Product Gallery, Product Shelf and Hero and BannerText.
 
 The `model`, in a website, is where the data fetching occurs. Since this project uses Jamstack, a crucial design decision was made to explicitly split where Static and Dynamic data are fetched. The files inside the `src/pages` folder use [NextJS's File System Route API](https://nextjs.org/docs/routing/introduction) to declare routes and fetch static data.
 
@@ -165,136 +119,12 @@ To summarize:
 2. `src/views`: Receives static data from `src/pages`, enriches this data with dynamic attributes, and render section components along with SEO tags.
 3. `src/components/sections`: Receives necessary data and use domain-specific components (cart/product/search/ui) for rendering a slice on the web page.
 
-## ✏️ Adding Components
-
-What better than an example for learning the best practices while adding components? In this example, we will add a button component.
-Components live on the `src/components` folder. Each component may have, at most, 3 files: a component file, an export file, and a styling file.
-First, let's create a folder and the files.
-
-```sh
-mkdir src/components/ui/Button
-touch src/components/ui/Button/Button.tsx
-touch src/components/ui/Button/index.tsx
-```
-
-The `index.tsx` is just an export file, so its content is simple:
-
-```tsx
-export { default } from './Button'
-```
-
-The real thing happens on `Button.tsx`. On this file let's define the component like:
-
-```tsx
-interface Props {}
-
-function Button(props: Props) {
-  return <button {...props} />
-}
-
-export default Button
-```
-
-And, that's it! Now you have a working button that you can use anywhere on your project. FastStore, however, brings a handy library called `@faststore/ui` with built-in components to help you speed up your development. To use it, just change `Button.tsx` to:
-
-```tsx
-import { Button as UIButton } from '@faststore/ui'
-import type { ButtonProps } from '@faststore/ui'
-
-interface Props extends ButtonProps {}
-
-function Button(props: Props) {
-  return <UIButton {...props} />
-}
-
-export default Button
-```
-
-Now, your Button component is powered by Store UI. However, if you try to use this on your app you will see that the button is lacking styles. To add styles, we will use CSS modules because they allow us to target data attributes. On your terminal, type:
-
-```sh
-touch src/components/ui/Button/button.scss
-```
-
-Now, on `button.scss`:
-
-```css
-[data-fs-button] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-```
-
-This `data-fs-button` is a CSS data attribute selector. To know which selectors are available, check [FastStore UI docs](https://faststoreui.netlify.app/).
-
-Now, include the component's CSS into the Store's CSS. Open `src/styles/global/components.scss` and import this CSS with:
-
-```scss
-// ...
-@import 'src/components/ui/Button/button.scss';
-// ...
-```
-
-For most components, you would stop here. However, buttons can have different variants. For instance, suppose you want to have a button component with primary and secondary variants. To add variants to the component, update `Button.tsx`:
-
-```tsx
-import { Button as UIButton } from '@faststore/ui'
-import type { ButtonProps } from '@faststore/ui'
-
-interface Props extends ButtonProps {
-  variant: 'secondary' | 'primary'
-}
-
-function Button({ variant, ...props }: Props) {
-  return <UIButton data-button-variant={variant} {...props} />
-}
-
-export default Button
-```
-
-and then, on `button.scss`:
-
-```css
-[data-fs-button][data-button-variant='primary'] {
-  background: blue;
-}
-
-[data-fs-button][data-button-variant='secondary'] {
-  background: pink;
-}
-```
-
-You can also use classes, if you wanted to:
-
-```tsx
-function Button({ variant, ...props }: Props) {
-  return <UIButton className={variant} {...props} />
-}
-```
-
-```css
-.primary[data-fs-button] {
-  background: blue;
-}
-
-.secondary[data-fs-button] {
-  background: pink;
-}
-```
-
-Now we have a styled Button component that accepts different variants!! 🎉
-
 ### Managing SVG Icons
 
 Icons help build web pages by illustrating concepts and improving website navigation. However, using icons can decrease the page's performance. One option to avoid the decrease of the page's performance is to use SVGs from a single SVG file, located in `/static/icons.svg`, and load them with the `ui/Icon` component.
 
 In the following steps, learn how to add and use a new SVG icon and avoid decreasing page performance while using an icon.
 
-> ⚠️ Warning
->
-> This is a recommendation while using icons on a web page. Evaluate if this fits in your project.
-
 #### Adding an SVG icon
 
 1. In the SVG file, change the `svg` tag to `symbol`.
@@ -316,7 +146,7 @@ An example adding Bell icon:
 
 ```tsx
 // src/components/ui/MyIconButton/MyIconButton.tsx
-import Icon from 'src/components/ui/Icon' // this path can be outdated.
+import Icon from '@faststore/ui'
 
 function ButtonIcon() {
   return (
@@ -330,55 +160,16 @@ export default ButtonIcon
 ```
 
 This project uses SVGs from [Phosphor icons](https://phosphoricons.com/).
+More details, please refer to this [doc](https://www.faststore.dev/docs/icons).
 
 ## 🖊️ Styling Components
 
-Our customized themes are based on [Design Tokens](https://css-tricks.com/what-are-design-tokens/) using [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) or a CSS class for each token. Today, we have the following files in the `src/styles` folder:
-
-### `tokens.scss`
-
-Here you'll find the basic structure to build your theme (font base, color palette, spacing, color-text, body background color...), feel free to update it with your brand guidelines.
-
-#### <b>Colors</b>
-
-We suggest using a color palette of 3 colors and its gradation: `primary`, `secondary` and `neutral`.
-
-We also listed a couple of customizable tokens so you can easily change your body background, for example.
-
-If you feel the need to edit some of the color decisions, you can enter `tokens.scss` and update the semantical tokens. E.g.:
-
-```scss
---fs-border-color: var(--fs-color-neutral-4); // Current
---fs-border-color: var(--fs-color-neutral-5); // Updated
-```
-
-#### <b>Typography</b>
-
-We use the [Modular Scale](https://www.modularscale.com/) setting to create our text-sizes. If you want to change it, just set the `--fs-text-size-base` and the `scale` ratio.
-
-#### <b>Spacing</b>
-
-The spacing scale is based on `rem` sizes, so it will remain consistent if you change the `--fs-text-size-base`.
-
-### `layout.scss`
-
-List of classes used to create default page grid.
-
-```scss
-.layout__content // Should be used for sections that fit centered on the grid.
-.layout__section // This class only adds default vertical margins for page sections.
-```
-
-![grid-example-image](https://user-images.githubusercontent.com/3356699/150801221-4027dc6a-1cc4-40a7-a323-8be7a148458d.png)
-
-### `typography.scss`
-
-For the typography-related styles, we decided to use classes to add extra stylings like `font-weight` and `line-height`. In this file, you'll see all the classes for titles, paragraphs, and default settings on the body. You can create new ones here if needed.
+Our customized themes are based on [Design Tokens](https://css-tricks.com/what-are-design-tokens/) using [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) or a CSS class for each token. We utilize the styles from the `@faststore/ui` package, which are imported into the `src/styles` directory. Additionally, each component's styles are imported directly into the section where they are being used. Refer to [Theming overview](https://www.faststore.dev/docs/theming-overview) for more details.
 
 ## 🍒 Adding queries
 
 We use [graphql-codegen](https://www.graphql-code-generator.com/) to pre-process GraphQL queries. This compilation generates TypeScript typings and configurations for our graphql server under the folder `@generated/graphql`.
-This means we can statically analyse your code in search of bugs and secure your graphql server before each deploy. If, however you need to change any GraphQL Fragment, Query or Mutation, you will need to regenerate the whole thing. To do this, open your terminal and type
+This means we can statically analyze your code in search of bugs and secure your graphql server before each deploy. If, however you need to change any GraphQL Fragment, Query or Mutation, you will need to regenerate the whole thing. To do this, open your terminal and type
 
 ```sh
 $ yarn dev
@@ -396,15 +187,14 @@ That's it! you have just regenerated all graphql queries/fragments for your appl
 
 ## CMS Integration
 
-This store is integrated with [VTEX headless CMS](https://www.faststore.dev/tutorials/cms/0).
-
-The page rendered with CMS is:
+This store is integrated with [VTEX headless CMS](https://v1.faststore.dev/tutorials/cms/0).
 
-- index page: `pages/index.tsx`
+The page rendered with CMS is the index page: `pages/index.tsx`
+The `cms/faststore` contains the `content-types.json` and `sections.json` files.
 
 ### CMS configs
 
-It's possible to change the CMS tenant and workspace at `faststore.config.js`.
+It's possible to change the CMS tenant and workspace at `faststore.config.default.js`.
 
 ## 🎓 Learning the Frameworks
 

package/cypress/integration/seo.test.js

@@ -177,7 +177,7 @@ describe('Collection Page Seo', () => {
       .should('exist')
       .should(($link) => {
         expect($link.attr('href')).to.eq(
-          `${storeUrl}${pages.collection}?sort=score_desc`
+          `${storeUrl}${pages.collection}`
         )
       })
   })
@@ -234,7 +234,7 @@ describe('Filtered Collection Page Seo', () => {
       .should('exist')
       .should(($link) => {
         expect($link.attr('href')).to.eq(
-          `${storeUrl}${pages.collection}?sort=score_desc`
+          `${storeUrl}${pages.collection}`
         )
       })
   })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -39,11 +39,11 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^3.0.4",
-    "@faststore/components": "^3.0.3",
-    "@faststore/graphql-utils": "^3.0.3",
-    "@faststore/sdk": "^3.0.3",
-    "@faststore/ui": "^3.0.3",
+    "@faststore/api": "^3.0.7",
+    "@faststore/components": "^3.0.7",
+    "@faststore/graphql-utils": "^3.0.7",
+    "@faststore/sdk": "^3.0.7",
+    "@faststore/ui": "^3.0.7",
     "@graphql-codegen/cli": "^3.3.1",
     "@graphql-codegen/client-preset": "^4.1.0",
     "@graphql-codegen/typescript": "^3.0.4",
@@ -83,8 +83,8 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",
     "@envelop/testing": "^6.0.0",
-    "@faststore/cli": "^3.0.3",
-    "@faststore/eslint-config": "^3.0.3",
+    "@faststore/cli": "^3.0.7",
+    "@faststore/eslint-config": "^3.0.7",
     "@faststore/lighthouse": "^1.12.32",
     "@lhci/cli": "^0.9.0",
     "@testing-library/cypress": "^10.0.1",
@@ -128,5 +128,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "59c6ea9340a7f793d79be21b87e30712b2280450"
+  "gitHead": "1672bc9ba921b70b5f9acfa2845c8f566d29be16"
 }

package/src/sdk/cart/useCheckoutButton.ts

@@ -2,13 +2,20 @@ import storeConfig from '../../../faststore.config'
 import { useCart } from './index'
 
 export const useCheckoutButton = () => {
-  const { isValidating } = useCart()
+  const { isValidating, id } = useCart()
 
   const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
+    const isDevEnv =
+      window.location.host.includes('.vtex.app') ||
+      window.location.host.includes('localhost')
 
     if (!isValidating) {
-      window.location.href = `${storeConfig.checkoutUrl}`
+      if (!isDevEnv) {
+        window.location.href = `${storeConfig.checkoutUrl}`
+      } else if (id) {
+        window.location.href = `${storeConfig.checkoutUrl}?orderFormId=${id}`
+      }
     }
   }
 

package/.next/static/chunks/247.52b3924429a474c6.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[247],{9767:function(e,t,a){"use strict";var r=a(2784),i=a(5450);let n=(0,r.forwardRef)(function({value:e,as:t="span",variant:a="selling",testId:n="fs-price",formatter:c=e=>e,SRText:s,...l},o){let u=c(e,a);return r.createElement(t,{ref:o,"data-fs-price":!0,"data-fs-price-variant":a,"data-testid":n,...l},s&&r.createElement(i.Z,{text:s}),u)});t.Z=n},9088:function(e,t,a){"use strict";var r=a(2784),i=a(9767);let n=(0,r.forwardRef)(function({testId:e="fs-product-price",value:t,listPrice:a,formatter:n,...c},s){let l=a??0,o=t??0;return r.createElement("div",{ref:s,"data-fs-product-price":!0,"data-testid":e,...c},o!==l&&0!==l?r.createElement(r.Fragment,null,r.createElement(i.Z,{value:l,formatter:n,testId:"list-price","data-value":l,variant:"listing",SRText:"Original price:"}),r.createElement(i.Z,{value:o,formatter:n,testId:"price","data-value":o,variant:"spot",SRText:"Price:"})):r.createElement(i.Z,{value:o,formatter:n,testId:"price","data-value":o,variant:"spot",SRText:"Price:"}))});t.Z=n},6693:function(e,t,a){"use strict";var r=a(2784),i=a(7041),n=a(2614),c=a(2256);t.Z=({max:e,min:t=1,initial:a,disabled:s=!1,onChange:l,testId:o="fs-quantity-selector",...u})=>{let[d,m]=(0,r.useState)(a??t),f=d===t,p=d===e,changeQuantity=e=>{let t=validateQuantityBounds(d+e);l?.(t),m(t)};function validateQuantityBounds(a){let r=t?Math.max(a,t):a;return e?Math.min(r,e):r}return(0,r.useEffect)(()=>{a&&m(a)},[a]),r.createElement("div",{"data-fs-quantity-selector":s?"disabled":"true","data-testid":o,...u},r.createElement(i.Z,{"data-quantity-selector-button":"left",icon:r.createElement(n.Z,{name:"Minus",width:16,height:16,weight:"bold"}),"aria-label":"Decrement Quantity","aria-controls":"quantity-selector-input",disabled:f||s,onClick:()=>changeQuantity(-1),testId:`${o}-left-button`,size:"small"}),r.createElement(c.Z,{"data-quantity-selector-input":!0,id:"quantity-selector-input","aria-label":"Quantity",value:d,onChange:function(e){let t=e.currentTarget.value;Number.isNaN(Number(t))||m(()=>{let e=validateQuantityBounds(Number(t));return l?.(e),e})},disabled:s}),r.createElement(i.Z,{"data-quantity-selector-button":"right","aria-controls":"quantity-selector-input","aria-label":"Increment Quantity",disabled:p||s,icon:r.createElement(n.Z,{name:"Plus",width:16,height:16,weight:"bold"}),onClick:()=>changeQuantity(1),testId:`${o}-right-button`,size:"small"}))}},6133:function(e,t,a){"use strict";var r=a(2784);t.Z=function({testId:e="fs-empty-state",title:t,titleIcon:a,variant:i="default",bkgColor:n="default",children:c,...s}){return r.createElement("section",{"data-fs-empty-state":!0,"data-fs-empty-state-variant":i,"data-fs-empty-state-bkg-color":n,"data-fs-content":"empty-state","data-testid":e,...s},t&&r.createElement("header",{"data-fs-empty-state-title":!0},a&&r.createElement(r.Fragment,null,a),r.createElement("p",null,t)),c)}},6247:function(e,t,a){"use strict";a.r(t),a.d(t,{default:function(){return cart_CartSidebar_CartSidebar}});var r=a(9499),i=a(1072),n=a(2784),c=a(3666),s=a(6652),l=a(7215),o=a(5049),u=a(276),d=a(8138),CartSidebar_CartSidebar=function({testId:e="fs-cart-sidebar",title:t="Your Cart",size:a="partial",direction:r="rightSide",totalItems:i,children:m,alertIcon:f,alertText:p,overlayProps:b,onClose:v,...y}){let{fade:h,fadeOut:O}=(0,c.b)(),{closeCart:g}=(0,s.l)();return n.createElement(l.Z,{"data-fs-cart-sidebar":!0,isOpen:!0,fade:h,onDismiss:O,size:a,direction:r,onTransitionEnd:()=>"out"===h&&g(),testId:e,overlayProps:b,...y},n.createElement(o.Z,{closeBtnProps:{testId:"fs-cart-sidebar-button-close"},onClose:()=>{v(),O()}},n.createElement("h2",{"data-fs-cart-sidebar-title":!0},t,n.createElement(u.Z,{variant:"info"},i))),p&&n.createElement(d.Z,{icon:f},p),m)},m=a(4564),CartSidebar_CartSidebarList=function({children:e}){return n.createElement(m.Z,{"data-fs-cart-sidebar-list":!0},e)},CartSidebar_CartSidebarFooter=function({children:e}){return n.createElement("footer",{"data-fs-cart-sidebar-footer":!0},e)},f=a(3339),p=a(2614),b=a(3218),v=a(7997),y=a.n(v),useCheckoutButton=()=>{var{isValidating:e}=(0,b.jD)();return{onClick:t=>{t.preventDefault(),e||(window.location.href="".concat(y().checkoutUrl))},disabled:e,"data-testid":"checkout-button"}},h=a(1868),O=a(4730);let g=(0,n.forwardRef)(function({icon:e,testId:t="fs-gift",children:a,...r},i){return n.createElement("div",{ref:i,"data-fs-gift":!0,"data-testid":t,...r},!!e&&n.createElement("span",{"data-fs-gift-icon":!0},e),n.createElement("div",{"data-fs-gift-wrapper":!0},a))}),_=(0,n.forwardRef)(function({testId:e="fs-gift-image",children:t,...a},r){return n.createElement("div",{ref:r,"data-fs-gift-image":!0,"data-testid":e,...a},t)});var E=a(9767);let j=(0,n.forwardRef)(function({price:e,productName:t,titleMessage:a="Get a",badgeLabel:r="Free",testId:i="fs-gift-content",...c},s){return n.createElement("section",{ref:s,"data-fs-gift-content":!0,"data-testid":i,...c},n.createElement("h3",{"data-fs-gift-product-title":!0},a," ",t),n.createElement("span",{"data-fs-gift-product-summary":!0},n.createElement(E.Z,{value:e?.listPrice?e.listPrice:0,formatter:e?.formatter,testId:"list-price","data-value":e?.listPrice,variant:"listing",SRText:"Original price:"}),n.createElement(u.Z,null,r)))});var C=a(8918),P=a(113),S=a(2322),w=["item"];function ownKeys(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),a.push.apply(a,r)}return a}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(a),!0).forEach(function(t){(0,r.Z)(e,t,a[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):ownKeys(Object(a)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))})}return e}var ui_Gift_Gift=function(e){var{item:t}=e,a=(0,O.Z)(e,w);return(0,S.jsxs)(g,_objectSpread(_objectSpread({icon:(0,S.jsx)(p.Z,{name:"Tag",width:18,height:18})},a),{},{children:[(0,S.jsx)(_,{children:(0,S.jsx)(C.Z,{src:t.itemOffered.image[0].url,alt:t.itemOffered.image[0].alternateName,width:89,height:89})}),(0,S.jsx)(j,{productName:t.itemOffered.isVariantOf.name,price:{value:t.price,listPrice:t.listPrice,formatter:P.P}})]}))},k=a(7041),x=a(6693),Z=a(9088);let I=(0,n.forwardRef)(function({testId:e="fs-cart-item",price:t,quantity:a,unavailable:r,onQuantityChange:i,children:c,removeBtnProps:s,...l},o){return n.createElement("article",{ref:o,"data-fs-cart-item":r?"unavailable":"true","data-testid":e,...l},n.createElement("div",{"data-fs-cart-item-content":!0},c),n.createElement(k.Z,{"data-fs-cart-item-remove-button":!0,icon:n.createElement(p.Z,{name:"XCircle"}),"aria-label":"Remove",...s}),n.createElement("div",{"data-fs-cart-item-actions":!0},n.createElement(x.Z,{min:1,initial:a,onChange:i}),n.createElement(Z.Z,{"data-fs-cart-item-prices":!0,listPrice:t?.listPrice?t.listPrice:0,value:t?.value?t.value:0,formatter:t?.formatter})))}),D=(0,n.forwardRef)(function({testId:e="fs-cart-item-image",children:t,...a},r){return n.createElement("div",{ref:r,"data-fs-cart-item-image":!0,"data-testid":e,...a},t)}),q=(0,n.forwardRef)(function({testId:e="fs-cart-item-summary",title:t,activeVariations:a=[],children:r,...i},c){return n.createElement("div",{ref:c,"data-fs-cart-item-summary":!0,"data-testid":e,...i},n.createElement("div",{"data-fs-cart-item-title":!0},t),a.length>0&&n.createElement("div",{"data-fs-cart-item-skus":!0},a.map(({label:e,option:t})=>n.createElement("p",{key:e},e,": ",n.createElement("span",null,t)))),r)});var useRemoveButton=e=>{var{currency:{code:t}}=(0,h.kP)();return{onClick:(0,n.useCallback)(a=>{a.preventDefault(),e&&((0,i._)({name:"remove_from_cart",params:{currency:t,value:e.price*e.quantity,items:[{item_id:e.itemOffered.isVariantOf.productGroupID,item_name:e.itemOffered.isVariantOf.name,item_brand:e.itemOffered.brand.name,item_variant:e.itemOffered.sku,quantity:e.quantity,price:e.price,discount:e.listPrice-e.price,currency:t,item_variant_name:e.itemOffered.name,product_reference_id:e.itemOffered.gtin}]}}),b.i8.removeItem(e.id))},[t,e]),"data-testid":"remove-from-cart-button","data-sku":null==e?void 0:e.itemOffered.sku}},cart_CartItem_CartItem=function(e){var{item:t}=e,a=useRemoveButton(t),{sendCartItemEvent:r}=function(){var{currency:{code:e}}=(0,h.kP)(),t=(0,n.useCallback)((t,a)=>{var r=a-t.quantity;return(0,i._)({name:r>0?"add_to_cart":"remove_from_cart",params:{currency:e,value:t.price*Math.abs(r),items:[{item_id:t.itemOffered.isVariantOf.productGroupID,item_name:t.itemOffered.isVariantOf.name,item_brand:t.itemOffered.brand.name,item_variant:t.itemOffered.sku,quantity:Math.abs(r),price:t.price,discount:t.listPrice-t.price,currency:e,item_variant_name:t.itemOffered.name,product_reference_id:t.itemOffered.gtin}]}})},[e]);return(0,n.useMemo)(()=>({sendCartItemEvent:t}),[t])}(),c=(0,n.useCallback)(e=>{r(t,e),b.i8.updateItemQuantity(t.id,e)},[t,r]),s=t.itemOffered.isVariantOf.skuVariants.activeVariations,l=Object.keys(s).map(e=>({label:e,option:s[e]}));return(0,S.jsxs)(I,{price:{value:t.price,listPrice:t.listPrice,formatter:P.P},quantity:t.quantity,onQuantityChange:c,removeBtnProps:a,"data-sku":t.itemOffered.sku,"data-seller":t.seller.identifier,children:[(0,S.jsx)(D,{children:(0,S.jsx)(C.Z,{src:t.itemOffered.image[0].url,alt:t.itemOffered.image[0].alternateName,width:56,height:56})}),(0,S.jsx)(q,{title:t.itemOffered.isVariantOf.name,activeVariations:l})]})},F=a(6133),EmptyCart_EmptyCart=function(e){var{onDismiss:t}=e;return(0,S.jsx)(F.Z,{title:"Your Cart is empty",titleIcon:(0,S.jsx)(p.Z,{name:"ShoppingCart",width:56,height:56,weight:"thin"}),children:(0,S.jsx)(f.Z,{onClick:t,variant:"secondary",children:"Start Shopping"})})};let R=(0,n.forwardRef)(function({testId:e="fs-order-summary",subtotalLabel:t,subtotalValue:a,discountLabel:r="Discount",discountValue:i,totalLabel:c="Total",totalValue:s,...l},o){return n.createElement(m.Z,{ref:o,"data-fs-order-summary":!0,"data-testid":e,...l},a?n.createElement("li",{"data-fs-order-summary-subtotal":!0},n.createElement("span",{"data-fs-order-summary-subtotal-label":!0,"data-testid":`${e}-subtotal-label`},t),n.createElement("span",{"data-fs-order-summary-subtotal-value":!0,"data-testid":`${e}-subtotal-value`},a)):null,i?n.createElement("li",{"data-fs-order-summary-discount":!0},n.createElement("span",{"data-fs-order-summary-discount-label":!0,"data-testid":`${e}-discount-label`},r),n.createElement("span",{"data-fs-order-summary-discount-value":!0,"data-testid":`${e}-discount-value`},i)):null,n.createElement("li",{"data-fs-order-summary-total":!0},n.createElement("span",{"data-fs-order-summary-total-label":!0,"data-testid":`${e}-total-label`},c),n.createElement("span",{"data-fs-order-summary-total-value":!0,"data-testid":`${e}-total-value`},s)))});var cart_OrderSummary_OrderSummary=function(e){var{subTotal:t,total:a,numberOfItems:r,checkoutButton:i}=e,n=t-a,c=(0,P.P)(n);return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(R,{subtotalLabel:"Subtotal (".concat(r," products)"),subtotalValue:(0,P.P)(t),discountValue:n>0?"-".concat(c):void 0,totalValue:(0,P.P)(a)}),i]})},V=a(6222),N=a.n(V);function CartSidebar_ownKeys(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),a.push.apply(a,r)}return a}function CartSidebar_objectSpread(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?CartSidebar_ownKeys(Object(a),!0).forEach(function(t){(0,r.Z)(e,t,a[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):CartSidebar_ownKeys(Object(a)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))})}return e}var cart_CartSidebar_CartSidebar=function(e){var{title:t,alert:{icon:{icon:a,alt:r},text:l},checkoutButton:{label:o,loadingLabel:u,icon:{icon:d,alt:m}}}=e,v=useCheckoutButton(),{items:y,gifts:O,totalItems:g,isValidating:_,subTotal:E,total:j}=(0,b.jD)(),{cart:C,closeCart:P}=(0,s.l)(),{fadeOut:w}=(0,c.b)(),{sendViewCartEvent:k}=function(){var{currency:{code:e}}=(0,h.kP)(),{items:t,gifts:a,total:r}=(0,b.jD)(),c=(0,n.useCallback)(()=>(0,i._)({name:"view_cart",params:{currency:e,value:r,items:t.concat(a).map(t=>({item_id:t.itemOffered.isVariantOf.productGroupID,item_name:t.itemOffered.isVariantOf.name,item_brand:t.itemOffered.brand.name,item_variant:t.itemOffered.sku,quantity:t.quantity,price:t.price,discount:t.listPrice-t.price,currency:e,item_variant_name:t.itemOffered.name,product_reference_id:t.itemOffered.gtin}))}}),[e,a,t,r]);return(0,n.useMemo)(()=>({sendViewCartEvent:c}),[c])}(),x=(0,n.useMemo)(()=>0===y.length,[y]);return(0,n.useEffect)(()=>{C&&k()},[C,k]),(0,S.jsx)(S.Fragment,{children:C&&(0,S.jsx)(n.Suspense,{fallback:null,children:(0,S.jsx)(CartSidebar_CartSidebar,{overlayProps:{className:"section ".concat(N().section," section-cart-sidebar")},title:t,totalItems:g,alertIcon:(0,S.jsx)(p.Z,{name:a,"aria-label":r}),alertText:l,onClose:w,children:x?(0,S.jsx)(EmptyCart_EmptyCart,{onDismiss:P}):(0,S.jsxs)(S.Fragment,{children:[(0,S.jsxs)(CartSidebar_CartSidebarList,{children:[y.map(e=>(0,S.jsx)("li",{children:(0,S.jsx)(cart_CartItem_CartItem,{item:e})},e.id)),O.length>0&&(0,S.jsx)(S.Fragment,{children:O.map(e=>(0,S.jsx)("li",{children:(0,S.jsx)(ui_Gift_Gift,{item:e})},e.id))})]}),(0,S.jsx)(CartSidebar_CartSidebarFooter,{children:(0,S.jsx)(cart_OrderSummary_OrderSummary,{subTotal:E,total:j,numberOfItems:g,checkoutButton:(0,S.jsx)(f.Z,CartSidebar_objectSpread(CartSidebar_objectSpread({variant:"primary",icon:!_&&(0,S.jsx)(p.Z,{name:d,"aria-label":m,width:18,height:18}),iconPosition:"right"},v),{},{children:_?u:o}))})})]})})})})}},113:function(e,t,a){"use strict";a.d(t,{P:function(){return useFormattedPrice}});var r=a(2784),i=a(1868),usePriceFormatter=function(){var{decimals:e}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{currency:t,locale:a}=(0,i.kP)();return(0,r.useCallback)(r=>Intl.NumberFormat(a,{style:"currency",currency:t.code,minimumFractionDigits:e?2:0}).format(r),[t.code,a,e])},useFormattedPrice=e=>{var t=usePriceFormatter();return(0,r.useMemo)(()=>t(e),[t,e])}},6222:function(e){e.exports={section:"section_section__yzDFp"}}}]);