chore: merge development into main

_codux/boards/components/cart/cart-item.board.tsx

@@ -0,0 +1,24 @@
+import { createBoard } from '@wixc3/react-board';
+import { cartItem, cartItemOutOfStock, cartItemWithDiscount } from '_codux/mocks/cart';
+import { CartItem } from '~/src/components/cart/cart-item/cart-item';
+
+const noop = () => {};
+
+export default createBoard({
+    name: 'Cart Item',
+    Board: () => {
+        return (
+            <div>
+                <CartItem cartItem={cartItem} onQuantityChange={noop} onRemove={noop} />
+                <CartItem cartItem={cartItemOutOfStock} onQuantityChange={noop} onRemove={noop} />
+                <CartItem cartItem={cartItemWithDiscount} onQuantityChange={noop} onRemove={noop} />
+            </div>
+        );
+    },
+    tags: ['Component', 'Cart'],
+    isSnippet: false,
+    environmentProps: {
+        windowWidth: 500,
+        windowHeight: 300,
+    },
+});

_codux/mocks/cart.ts

@@ -56,6 +56,7 @@ function createCartItem(overrides: Partial<CartItemDetails> = {}): CartItemDetai
         fixedQuantity: false,
         priceUndetermined: false,
         customLineItem: false,
+        policies: [],
         ...overrides,
     };
 }

_codux/mocks/order.ts

@@ -5,6 +5,8 @@ export const mockOrder: orders.Order & orders.OrderNonNullableFields = {
     _id: '111111111111',
     lineItems: [
         {
+            priceUndetermined: false,
+            fixedQuantity: false,
             productName: { original: 'Tets Product' },
             price: {
                 amount: '10.00',
@@ -43,6 +45,8 @@ export const mockOrder: orders.Order & orders.OrderNonNullableFields = {
             quantity: 2,
         },
         {
+            priceUndetermined: false,
+            fixedQuantity: false,
             productName: { original: 'Another Product' },
             price: {
                 amount: '75.00',

lib/utils/cart-utils.ts

@@ -1,4 +1,3 @@
-import ecom from '@wix/ecom';
 import deepEqual from 'fast-deep-equal';
 import { AddToCartOptions, Cart, CartItem, CartTotals } from '~/lib/ecom';
 
@@ -17,7 +16,7 @@ export function findItemIdInCart({ lineItems }: Cart, catalogItemId: string, opt
     });
 }
 
-export function calculateCartItemsCount(cart: ecom.cart.Cart): number {
+export function calculateCartItemsCount(cart: Cart): number {
     return cart.lineItems?.reduce((total, item) => total + item.quantity!, 0) ?? 0;
 }
 

lib/utils/use-search-params-optimistic.ts

@@ -0,0 +1,30 @@
+import { useNavigation, useSearchParams } from '@remix-run/react';
+import { useCallback, useEffect, useState } from 'react';
+import type { NavigateOptions } from 'react-router';
+
+/**
+ * Similar to `useSearchParams` from Remix, but allows to update search params optimistically.
+ */
+export function useSearchParamsOptimistic() {
+    const navigation = useNavigation();
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const [optimisticSearchParams, setOptimisticSearchParams] = useState(searchParams);
+
+    const handleSearchParamsChange = useCallback(
+        (params: URLSearchParams | ((prevParams: URLSearchParams) => URLSearchParams), options?: NavigateOptions) => {
+            setOptimisticSearchParams(params);
+            setSearchParams(params, options);
+        },
+        [setSearchParams],
+    );
+
+    // Synchronize search params on back/forward browser button clicks.
+    useEffect(() => {
+        if (navigation.state !== 'loading') {
+            setOptimisticSearchParams(searchParams);
+        }
+    }, [navigation.state, searchParams]);
+
+    return [optimisticSearchParams, handleSearchParamsChange] as const;
+}