@faststore/core 2.0.100-alpha.0 → 2.0.102-alpha.0

package/.turbo/turbo-build.log

@@ -24,7 +24,7 @@ info  - Finalizing page optimization...
 Route (pages)                              Size     First Load JS
 ┌ ● /                                      8.59 kB         117 kB
 ├   └ css/43d61b402f41569b.css             1.84 kB
-├   /_app                                  0 B            96.6 kB
+├   /_app                                  0 B            96.7 kB
 ├ ● /[...slug]                             9.48 kB         122 kB
 ├   └ css/8ea129ea90e49e98.css             1.83 kB
 ├ ● /[slug]/p                              16.8 kB         125 kB
@@ -32,8 +32,8 @@ Route (pages)                              Size     First Load JS
 ├ ○ /404                                   431 B           102 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                                 385 B           102 kB
 └ ○ /s                                     895 B           113 kB
@@ -41,9 +41,9 @@ Route (pages)                              Size     First Load JS
 + First Load JS shared by all              119 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-9746772201fe3ac1.js        23.9 kB
-  ├ chunks/pages/_app-d757170e632a6003.js  25.3 kB
-  ├ chunks/webpack-65b155971f3eac57.js     2.18 kB
-  └ css/ea60a7e6c07ee644.css               22 kB
+  ├ chunks/pages/_app-b7c1de35514e9970.js  25.3 kB
+  ├ chunks/webpack-6f37e8a1cc679711.js     2.18 kB
+  └ css/3e9574c21348f15a.css               22.3 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.102-alpha.0](https://github.com/vtex/faststore/compare/v2.0.101-alpha.0...v2.0.102-alpha.0) (2023-04-06)
+
+### Features
+
+- Adds `CartSidebar` and `OrderSummary` ([#1704](https://github.com/vtex/faststore/issues/1704)) ([a16e168](https://github.com/vtex/faststore/commit/a16e1683816ef84866de4cd7f8d8a64f951b98c6))
+
+## [2.0.101-alpha.0](https://github.com/vtex/faststore/compare/v2.0.100-alpha.0...v2.0.101-alpha.0) (2023-04-05)
+
+### Bug Fixes
+
+- fix tests ([#1705](https://github.com/vtex/faststore/issues/1705)) ([8990310](https://github.com/vtex/faststore/commit/899031022bf6514797f24895ffb7c97e46726217))
+
 ## [2.0.100-alpha.0](https://github.com/vtex/faststore/compare/v2.0.99-alpha.0...v2.0.100-alpha.0) (2023-04-05)
 
 **Note:** Version bump only for package @faststore/core

package/cypress/integration/analytics.test.js

@@ -75,12 +75,15 @@ describe('add_to_cart event', () => {
       cy.getById('buy-button')
         .should('be.visible')
         .scrollIntoView({ duration: 500 })
-        .click()
-        .then(($btn) => {
-          cy.itemsInCart(1)
-          const skuId = $btn.attr('data-sku')
+        .then(() => {
+          cy.getById('buy-button')
+            .click({ force: true })
+            .then(($btn) => {
+              cy.itemsInCart(1)
+              const skuId = $btn.attr('data-sku')
 
-          testAddToCartEvent({ skuId, numberOfEvents: 1 })
+              testAddToCartEvent({ skuId, numberOfEvents: 1 })
+            })
         })
     })
   })
@@ -96,21 +99,24 @@ describe('add_to_cart event', () => {
       cy.getById('buy-button')
         .should('be.visible')
         .scrollIntoView({ duration: 500 })
-        .click()
-        .then(($btn) => {
-          cy.itemsInCart(1)
-          const skuId = $btn.attr('data-sku')
+        .then(() => {
+          cy.getById('buy-button')
+            .click({ force: true })
+            .then(($btn) => {
+              cy.itemsInCart(1)
+              const skuId = $btn.attr('data-sku')
 
-          testAddToCartEvent({ skuId, numberOfEvents: 1 })
+              testAddToCartEvent({ skuId, numberOfEvents: 1 })
 
-          cy.get(
-            '[data-testid=fs-cart-item] [data-testid=fs-quantity-selector-right-button]'
-          )
-            .click()
-            .then(() => {
-              cy.itemsInCart(2)
+              cy.get(
+                '[data-testid=fs-cart-item] [data-testid=fs-quantity-selector-right-button]'
+              )
+                .click()
+                .then(() => {
+                  cy.itemsInCart(2)
 
-              testAddToCartEvent({ skuId, numberOfEvents: 2 })
+                  testAddToCartEvent({ skuId, numberOfEvents: 2 })
+                })
             })
         })
     })
@@ -160,26 +166,29 @@ describe('remove_from_cart event', () => {
       cy.getById('buy-button')
         .should('be.visible')
         .scrollIntoView({ duration: 500 })
-        .click()
         .then(() => {
-          cy.itemsInCart(1)
-          cy.getById('checkout-button')
-            .should('be.visible')
-            .should('be.enabled')
-          cy.itemsInCart(1)
+          cy.getById('buy-button')
+            .click({ force: true })
+            .then(() => {
+              cy.itemsInCart(1)
+              cy.getById('checkout-button')
+                .should('be.visible')
+                .should('be.enabled')
+              cy.itemsInCart(1)
 
-          // Remove the added item
-          cy.getById('remove-from-cart-button')
-            .click()
-            .then(($btn) => {
-              cy.itemsInCart(0)
-              const skuId = $btn.attr('data-sku')
+              // Remove the added item
+              cy.getById('remove-from-cart-button')
+                .click({ force: true })
+                .then(($btn) => {
+                  cy.itemsInCart(0)
+                  const skuId = $btn.attr('data-sku')
 
-              testRemoveFromCartEvent({
-                skuId,
-                numberOfEvents: 1,
-                quantity: 1,
-              })
+                  testRemoveFromCartEvent({
+                    skuId,
+                    numberOfEvents: 1,
+                    quantity: 1,
+                  })
+                })
             })
         })
     })
@@ -194,13 +203,13 @@ describe('remove_from_cart event', () => {
 
       // Add item to cart
       cy.get('[data-testid=fs-quantity-selector-right-button]')
-        .click()
+        .click({ force: true })
         .then(() => {
           cy.getById('buy-button')
             .should('be.visible')
             .scrollIntoView({ duration: 500 })
-            .click()
             .then(($btn) => {
+              cy.getById('buy-button').click({ force: true })
               cy.itemsInCart(2)
               cy.getById('checkout-button')
                 .should('be.visible')
@@ -211,7 +220,7 @@ describe('remove_from_cart event', () => {
               cy.get(
                 '[data-testid=fs-cart-item] [data-testid=fs-quantity-selector-left-button]'
               )
-                .click()
+                .click({ force: true })
                 .then(() => {
                   cy.itemsInCart(1)
                   cy.getById('checkout-button')
@@ -254,22 +263,26 @@ describe('select_item event', () => {
 
     let skuId
 
-    cy.getById('fs-product-card').first().click()
-    cy.getById('buy-button')
-      .should('be.visible')
-      .scrollIntoView({ duration: 500 })
-      .then(($btn) => {
-        skuId = $btn.attr('data-sku')
-      })
+    cy.getById('fs-product-card')
+      .first()
+      .click()
       .then(() => {
-        cy.window().then((window) => {
-          const event = window.dataLayer.find(
-            ({ event: eventName }) => eventName === 'select_item'
-          )
+        cy.getById('buy-button')
+          .should('be.visible')
+          .scrollIntoView({ duration: 0 })
+          .then(($btn) => {
+            skuId = $btn.attr('data-sku')
+          })
+          .then(() => {
+            cy.window().then((window) => {
+              const event = window.dataLayer.find(
+                ({ event: eventName }) => eventName === 'select_item'
+              )
 
-          expect(event).to.exist
-          expect(skuId).to.equal(event.ecommerce.items[0].item_variant)
-        })
+              expect(event).to.exist
+              expect(skuId).to.equal(event.ecommerce.items[0].item_variant)
+            })
+          })
       })
   })
 })
@@ -347,7 +360,7 @@ describe('search event', () => {
       .click()
       .type('shirt')
       .within(() => {
-        cy.getById('fs-button')
+        cy.getById('store-input-mobile-button')
           .click()
           .then(() => {
             dataLayerHasEvent('search')
@@ -362,7 +375,7 @@ describe('view_cart event', () => {
     cy.waitForHydration()
 
     cy.getById('cart-toggle').click()
-    cy.getById('cart-sidebar').should('be.visible')
+    cy.getById('fs-cart-sidebar').should('be.visible')
 
     dataLayerHasEvent('view_cart')
 
@@ -383,18 +396,20 @@ describe('view_cart event', () => {
     cy.getById('buy-button')
       .should('be.visible')
       .scrollIntoView({ duration: 500 })
-      .click()
-    cy.getById('cart-sidebar').should('be.visible')
+      .then(() => {
+        cy.getById('buy-button').click({ force: true })
+        cy.getById('fs-cart-sidebar').should('be.visible')
 
-    dataLayerHasEvent('view_cart')
+        dataLayerHasEvent('view_cart')
 
-    cy.window().then((window) => {
-      const event = window.dataLayer.find(
-        ({ event: eventName }) => eventName === 'view_cart'
-      )
+        cy.window().then((window) => {
+          const event = window.dataLayer.find(
+            ({ event: eventName }) => eventName === 'view_cart'
+          )
 
-      expect(event.ecommerce.value).to.equal(950)
-      expect(event.ecommerce.items.length).to.equal(1)
-    })
+          expect(event.ecommerce.value).to.equal(950)
+          expect(event.ecommerce.items.length).to.equal(1)
+        })
+      })
   })
 })

package/cypress/integration/cart.test.js

@@ -19,9 +19,9 @@ describe('Cart Sidebar', () => {
     cy.waitForHydration()
 
     cy.getById('cart-toggle').first().click()
-    cy.getById('cart-sidebar').should('exist')
-    cy.getById('cart-sidebar-button-close').first().click()
-    cy.getById('cart-sidebar').should('not.exist')
+    cy.getById('fs-cart-sidebar').should('exist')
+    cy.getById('fs-cart-sidebar-button-close').first().click()
+    cy.getById('fs-cart-sidebar').should('not.exist')
   })
 
   context('when opening the cart sidebar', () => {
@@ -31,7 +31,7 @@ describe('Cart Sidebar', () => {
 
       // window scrolls to keep cart-toggle on the screen initially
       cy.getById('cart-toggle').click()
-      cy.getById('cart-sidebar').should('exist')
+      cy.getById('fs-cart-sidebar').should('exist')
 
       // simulate touch scroll. Do not use window.scrollTo
       cy.get('[data-fs-empty-state]')
@@ -57,8 +57,9 @@ describe('On product description pages', () => {
 
       // Add to cart
       cy.getById('buy-button')
-        .click()
+        .scrollIntoView({ duration: 500 })
         .then(($btn) => {
+          cy.getById('buy-button').click({ force: true })
           const skuId = $btn.attr('data-sku')
           const sellerId = $btn.attr('data-seller')
 
@@ -66,13 +67,13 @@ describe('On product description pages', () => {
           cy.getById('checkout-button')
             .should('be.visible')
             .should('be.enabled')
-
-          cy.getById('fs-cart-item').should(($item) => {
-            expect($item.attr('data-sku')).to.eq(skuId)
-            expect($item.attr('data-seller')).to.eq(sellerId)
-          })
-
-          cy.itemsInCart(1)
+            .then(() => {
+              cy.getById('fs-cart-item').should(($item) => {
+                expect($item.attr('data-sku')).to.eq(skuId)
+                expect($item.attr('data-seller')).to.eq(sellerId)
+              })
+              cy.itemsInCart(1)
+            })
         })
     })
   })

package/cypress/integration/search.test.js

@@ -23,16 +23,16 @@ describe('Search input', () => {
 
       cy.getById('store-input-mobile-button')
         .should('exist')
-        .scrollIntoView({ duration: 500 })
+        .scrollIntoView({ duration: 0 })
         .click({ force: true })
 
       cy.getById('store-input-mobile')
         .should('exist')
-        .scrollIntoView({ duration: 500 })
-        .click()
+        .scrollIntoView({ duration: 0 })
+        .click({ force: true })
         .type(term)
         .within(() => {
-          cy.getById('fs-button').click()
+          cy.getById('store-input-mobile-button').click()
         })
 
       cy.location('search').should((loc) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.100-alpha.0",
+  "version": "2.0.102-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.97-alpha.0",
-    "@faststore/components": "^2.0.99-alpha.0",
+    "@faststore/components": "^2.0.102-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.3-alpha.0",
-    "@faststore/ui": "^2.0.99-alpha.0",
+    "@faststore/ui": "^2.0.102-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": "68d3a8bb6dc397014f6014ffd8223c0e2ef380ed"
+  "gitHead": "c9841c86822020c65161193647edf280cd765efa"
 }

package/src/components/cart/CartSidebar/CartSidebar.tsx

@@ -1,11 +1,9 @@
 import { sendAnalyticsEvent } from '@faststore/sdk'
 import {
-  Alert as UIAlert,
-  Badge as UIBadge,
+  CartSidebar as UICartSidebar,
+  CartSidebarList as UICartSidebarList,
+  CartSidebarFooter as UICartSidebarFooter,
   Button as UIButton,
-  List as UIList,
-  SlideOver as UISlideOver,
-  SlideOverHeader as UISlideOverHeader,
 } from '@faststore/ui'
 
 import type { CurrencyCode, ViewCartEvent } from '@faststore/sdk'
@@ -20,14 +18,13 @@ import Gift from '../../ui/Gift'
 import CartItem from '../CartItem'
 import EmptyCart from '../EmptyCart'
 import OrderSummary from '../OrderSummary'
-import styles from './cart-sidebar.module.scss'
 
 function CartSidebar() {
   const { currency } = useSession()
   const btnProps = useCheckoutButton()
   const cart = useCart()
-  const { cart: displayCart, closeCart } = useUI()
-  const { fade, fadeOut } = useFadeEffect()
+  const { closeCart } = useUI()
+  const { fadeOut } = useFadeEffect()
 
   const { items, gifts, totalItems, isValidating, subTotal, total } = cart
 
@@ -56,38 +53,18 @@ function CartSidebar() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const closeBtnProps = {
-    testId: 'cart-sidebar-button-close',
-  }
-
   return (
-    <UISlideOver
-      fade={fade}
-      isOpen={displayCart}
-      onDismiss={() => fadeOut()}
-      size="partial"
-      direction="rightSide"
-      className={styles.fsCartSidebar}
-      onTransitionEnd={() => fade === 'out' && closeCart()}
-      data-testid="cart-sidebar"
+    <UICartSidebar
+      totalItems={totalItems}
+      alertIcon={<Icon name="Truck" />}
+      alertText="Free shipping starts at $300"
+      onClose={fadeOut}
     >
-      <UISlideOverHeader closeBtnProps={closeBtnProps} onClose={fadeOut}>
-        <div data-fs-cart-sidebar-title>
-          <p data-fs-cart-sidebar-title-text className="text__lead">
-            Your Cart
-          </p>
-          <UIBadge variant="info">{totalItems}</UIBadge>
-        </div>
-      </UISlideOverHeader>
-      <UIAlert icon={<Icon name="Truck" />}>
-        Free shipping starts at $300
-      </UIAlert>
-
       {isEmpty ? (
-        <EmptyCart onDismiss={fadeOut} />
+        <EmptyCart onDismiss={closeCart} />
       ) : (
         <>
-          <UIList data-fs-cart-sidebar-list>
+          <UICartSidebarList>
             {items.map((item) => (
               <li key={item.id}>
                 <CartItem item={item} />
@@ -102,16 +79,15 @@ function CartSidebar() {
                 ))}
               </>
             )}
-          </UIList>
+          </UICartSidebarList>
 
-          <footer data-fs-cart-sidebar-footer>
+          <UICartSidebarFooter>
             <OrderSummary
               subTotal={subTotal}
               total={total}
               numberOfItems={totalItems}
               checkoutButton={
                 <UIButton
-                  data-fs-cart-sidebar-checkout-button
                   variant="primary"
                   icon={
                     !isValidating && (
@@ -125,10 +101,10 @@ function CartSidebar() {
                 </UIButton>
               }
             />
-          </footer>
+          </UICartSidebarFooter>
         </>
       )}
-    </UISlideOver>
+    </UICartSidebar>
   )
 }
 

package/src/components/cart/OrderSummary/OrderSummary.tsx

@@ -3,8 +3,6 @@ import type { ReactNode } from 'react'
 
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 
-import styles from './order-summary.module.scss'
-
 interface OrderSummaryProps {
   subTotal: number
   total: number
@@ -22,17 +20,15 @@ function OrderSummary({
   const formattedDiscount = useFormattedPrice(discount)
 
   return (
-    <div className={styles.fsOrderSummary}>
+    <>
       <UIOrderSummary
         subtotalLabel={`Subtotal (${numberOfItems} products)`}
         subtotalValue={useFormattedPrice(subTotal)}
-        discountLabel="Discount"
         discountValue={discount > 0 ? `-${formattedDiscount}` : undefined}
-        totalLabel="Total"
         totalValue={useFormattedPrice(total)}
       />
       {checkoutButton}
-    </div>
+    </>
   )
 }
 

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

@@ -82,7 +82,7 @@ function FilterSlider({
           return (
             <UIFilterFacets
               key={`${testId}-${label}-${index}`}
-              testId={testId}
+              testId={`mobile-${testId}`}
               index={index}
               type={type}
               label={label}
@@ -93,7 +93,7 @@ function FilterSlider({
                     <UIFilterFacetBooleanItem
                       key={`${testId}-${facet.label}-${item.label}`}
                       id={`${testId}-${facet.label}-${item.label}`}
-                      testId={testId}
+                      testId={`mobile-${testId}`}
                       onFacetChange={(facet) =>
                         dispatch({ type: 'toggleFacet', payload: facet })
                       }

package/.next/BUILD_ID

@@ -1 +0,0 @@
-_W6shnELbnMsH_iBfBVBe

package/.next/build-manifest.json

@@ -1,99 +0,0 @@
-{
-  "polyfillFiles": [
-    "static/chunks/polyfills-c67a75d1b6f99dc8.js"
-  ],
-  "devFiles": [],
-  "ampDevFiles": [],
-  "lowPriorityFiles": [
-    "static/_W6shnELbnMsH_iBfBVBe/_buildManifest.js",
-    "static/_W6shnELbnMsH_iBfBVBe/_ssgManifest.js"
-  ],
-  "rootMainFiles": [],
-  "pages": {
-    "/": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/781-7df372b5b56e3f96.js",
-      "static/css/43d61b402f41569b.css",
-      "static/chunks/pages/index-9ea3f7868f5ed138.js"
-    ],
-    "/404": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/404-ba608a2a9f0c420a.js"
-    ],
-    "/500": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/500-910883c20541d9ce.js"
-    ],
-    "/[...slug]": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/264-25ec99bbaf5d02b4.js",
-      "static/css/8ea129ea90e49e98.css",
-      "static/chunks/pages/[...slug]-417e3b51bda1f5f3.js"
-    ],
-    "/[slug]/p": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/781-7df372b5b56e3f96.js",
-      "static/css/4899c3cc356704f9.css",
-      "static/chunks/pages/[slug]/p-cbb4ca8d57bafa9f.js"
-    ],
-    "/_app": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/css/ea60a7e6c07ee644.css",
-      "static/chunks/pages/_app-d757170e632a6003.js"
-    ],
-    "/_error": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/pages/_error-a7a0c1d9bfbb4f38.js"
-    ],
-    "/account": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/account-b8fc5222ffe89b60.js"
-    ],
-    "/checkout": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/checkout-f8cb7cb22225ef9d.js"
-    ],
-    "/login": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/login-33954810b200eca8.js"
-    ],
-    "/s": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/264-25ec99bbaf5d02b4.js",
-      "static/css/db63ea05e98cb7e8.css",
-      "static/chunks/pages/s-ba2868e14fedb65b.js"
-    ]
-  },
-  "ampFirstPages": []
-}