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

package/.turbo/turbo-build.log

@@ -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-6dc7b0c168e15d5c.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,12 @@
 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

package/cypress/integration/analytics.test.js

@@ -375,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')
 
@@ -398,7 +398,7 @@ describe('view_cart event', () => {
       .scrollIntoView({ duration: 500 })
       .then(() => {
         cy.getById('buy-button').click({ force: true })
-        cy.getById('cart-sidebar').should('be.visible')
+        cy.getById('fs-cart-sidebar').should('be.visible')
 
         dataLayerHasEvent('view_cart')
 

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]')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.101-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.101-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": "b7378bff2215b1edab942092e8c4faffbe9b1572"
+  "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/.next/BUILD_ID

@@ -1 +0,0 @@
-V0z729OIqsX7azqcAGJ5Q

package/.next/build-manifest.json

@@ -1,99 +0,0 @@
-{
-  "polyfillFiles": [
-    "static/chunks/polyfills-c67a75d1b6f99dc8.js"
-  ],
-  "devFiles": [],
-  "ampDevFiles": [],
-  "lowPriorityFiles": [
-    "static/V0z729OIqsX7azqcAGJ5Q/_buildManifest.js",
-    "static/V0z729OIqsX7azqcAGJ5Q/_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-6dc2258a751b3d74.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-6dc7b0c168e15d5c.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-6dc2258a751b3d74.js",
-      "static/css/db63ea05e98cb7e8.css",
-      "static/chunks/pages/s-ba2868e14fedb65b.js"
-    ]
-  },
-  "ampFirstPages": []
-}