@faststore/core 2.1.95 → 2.1.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.1.95",
+  "version": "2.1.96",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -60,7 +60,7 @@
     "typescript": "4.7.3"
   },
   "devDependencies": {
-    "@cypress/code-coverage": "^3.9.10",
+    "@cypress/code-coverage": "^3.12.1",
     "@faststore/eslint-config": "^2.1.82",
     "@faststore/lighthouse": "^1.12.32",
     "@graphql-codegen/cli": "^2.6.2",
@@ -74,13 +74,13 @@
     "@storybook/builder-webpack5": "^6.5.9",
     "@storybook/manager-webpack5": "^6.5.9",
     "@storybook/react": "^6.5.9",
-    "@testing-library/cypress": "^8.0.0",
+    "@testing-library/cypress": "^10.0.1",
     "@types/cypress": "^1.1.3",
     "@vtex/prettier-config": "1.0.0",
-    "axe-core": "^4.3.3",
-    "cypress": "9.6.0",
-    "cypress-axe": "^0.13.0",
-    "cypress-wait-until": "^1.7.2",
+    "axe-core": "^4.8.1",
+    "cypress": "12.17.4",
+    "cypress-axe": "^1.5.0",
+    "cypress-wait-until": "^2.0.1",
     "dotenv": "^8.2.0",
     "eslint": "^7.32.0",
     "husky": "^5.2.0",
@@ -110,5 +110,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "9447859539b322b297c940c7a8a4769c5097f2ac"
+  "gitHead": "7a9d3f22a02b6c882cda586da99a7b073a458ee9"
 }

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

@@ -10,7 +10,7 @@ import type { CartSidebarProps as UICartSidebarProps } from '@faststore/ui'
 
 import type { CurrencyCode, ViewCartEvent } from '@faststore/sdk'
 import { Icon, useFadeEffect, useUI } from '@faststore/ui'
-import { Suspense, useEffect } from 'react'
+import { Suspense, useCallback, useEffect, useMemo } from 'react'
 import { useCart } from 'src/sdk/cart'
 import { useCheckoutButton } from 'src/sdk/cart/useCheckoutButton'
 import { useSession } from 'src/sdk/session'
@@ -21,6 +21,37 @@ import EmptyCart from '../EmptyCart'
 import OrderSummary from '../OrderSummary'
 import styles from './section.module.scss'
 
+function useViewCartEvent() {
+  const {
+    currency: { code },
+  } = useSession()
+  const { items, gifts, total } = useCart()
+
+  const sendViewCartEvent = useCallback(() => {
+    return sendAnalyticsEvent<ViewCartEvent>({
+      name: 'view_cart',
+      params: {
+        currency: code as CurrencyCode,
+        value: total,
+        items: items.concat(gifts).map((item) => ({
+          item_id: item.itemOffered.isVariantOf.productGroupID,
+          item_name: item.itemOffered.isVariantOf.name,
+          item_brand: item.itemOffered.brand.name,
+          item_variant: item.itemOffered.sku,
+          quantity: item.quantity,
+          price: item.price,
+          discount: item.listPrice - item.price,
+          currency: code as CurrencyCode,
+          item_variant_name: item.itemOffered.name,
+          product_reference_id: item.itemOffered.gtin,
+        })),
+      },
+    })
+  }, [code, gifts, items, total])
+
+  return useMemo(() => ({ sendViewCartEvent }), [sendViewCartEvent])
+}
+
 export interface CartSidebarProps {
   title: UICartSidebarProps['title']
   alert?: {
@@ -52,38 +83,21 @@ function CartSidebar({
     icon: { icon: checkoutButtonIcon, alt: checkoutButtonIconAlt },
   },
 }: CartSidebarProps) {
-  const { currency } = useSession()
   const btnProps = useCheckoutButton()
-  const cart = useCart()
+  const { items, gifts, totalItems, isValidating, subTotal, total } = useCart()
   const { cart: displayCart, closeCart } = useUI()
   const { fadeOut } = useFadeEffect()
+  const { sendViewCartEvent } = useViewCartEvent()
 
-  const { items, gifts, totalItems, isValidating, subTotal, total } = cart
-
-  const isEmpty = items.length === 0
+  const isEmpty = useMemo(() => items.length === 0, [items])
 
   useEffect(() => {
-    sendAnalyticsEvent<ViewCartEvent>({
-      name: 'view_cart',
-      params: {
-        currency: currency.code as CurrencyCode,
-        value: total,
-        items: items.concat(gifts).map((item) => ({
-          item_id: item.itemOffered.isVariantOf.productGroupID,
-          item_name: item.itemOffered.isVariantOf.name,
-          item_brand: item.itemOffered.brand.name,
-          item_variant: item.itemOffered.sku,
-          quantity: item.quantity,
-          price: item.price,
-          discount: item.listPrice - item.price,
-          currency: currency.code as CurrencyCode,
-          item_variant_name: item.itemOffered.name,
-          product_reference_id: item.itemOffered.gtin,
-        })),
-      },
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    if (!displayCart) {
+      return
+    }
+
+    sendViewCartEvent()
+  }, [displayCart, sendViewCartEvent])
 
   return (
     <>

package/cypress.json

@@ -1,9 +0,0 @@
-{
-  "baseUrl": "http://localhost:3000/",
-  "retries": 0,
-  "video": true,
-  "trashAssetsBeforeRuns": true,
-  "screenshotOnRunFailure": true,
-  "viewportWidth": 1000,
-  "viewportHeight": 600
-}