Sync from monorepo

jie-dai_sfemu · jie-dai_sfemu · commit 05eeb4a6f98f · 2026-04-30T21:55:12.000Z
Template version: 0.4.0-alpha.2

Uses NPM packages @salesforce/storefront-next-* v0.4.0-alpha.2

Synced by: jie-dai_sfemu

Monorepo SHA: 7ddb8bd04fee34318f7fb32a0e5e133cf9b4e59e

Latest change: 7ddb8bd04 - @W-22264655 add back edit button (#1580)
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## v0.4.0-dev (Apr 30, 2026)
+
+- **Cart line item:** Restore the edit button for non-standard, non-bonus products alongside the newly added wishlist toggle and remove action.
+
 ## v0.4.0-dev (Apr 28, 2026)
 
 - **Cart line item:** Removed the edit action from the line card, added an inline wishlist add/remove toggle, removed the product description block, and removed the delivery pill so the row focuses on image, title, attributes, price, and quantity.
diff --git a/lighthouserc.cjs b/lighthouserc.cjs
@@ -120,7 +120,7 @@ module.exports = {
                         'categories:best-practices': ['error', { minScore: 0.96, aggregationMethod: 'median' }],
                         'resource-summary:script:size': [
                             'error',
-                            { maxNumericValue: 455000, aggregationMethod: 'median' },
+                            { maxNumericValue: 460000, aggregationMethod: 'median' },
                         ],
                         'resource-summary:document:size': [
                             'error',
diff --git a/src/components/cart/cart-content.test.tsx b/src/components/cart/cart-content.test.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { describe, test, expect, vi, beforeEach } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { getTranslation } from '@salesforce/storefront-next-runtime/i18n';
 
 const { t } = getTranslation();
@@ -168,7 +168,7 @@ describe('CartContent', () => {
     });
 
     describe('Line item secondary actions', () => {
-        test('renders remove and wishlist controls for each cart item with itemId', async () => {
+        test('renders remove, edit, and wishlist controls for each cart item with itemId', async () => {
             renderCartContent({
                 basket: mockBasket,
                 productsByItemId: mockProductMap,
@@ -177,6 +177,8 @@ describe('CartContent', () => {
 
             expect(screen.getByTestId('remove-item-item-1')).toBeInTheDocument();
             expect(screen.getByTestId('remove-item-item-2')).toBeInTheDocument();
+            expect(screen.getByTestId('edit-item-item-1')).toBeInTheDocument();
+            expect(screen.getByTestId('edit-item-item-2')).toBeInTheDocument();
             expect(await screen.findByTestId('cart-add-wishlist-item-1')).toBeInTheDocument();
             expect(await screen.findByTestId('cart-add-wishlist-item-2')).toBeInTheDocument();
         });
@@ -197,8 +199,10 @@ describe('CartContent', () => {
             });
 
             expect(screen.queryByTestId('remove-item-item-1')).not.toBeInTheDocument();
+            expect(screen.queryByTestId('edit-item-item-1')).not.toBeInTheDocument();
             expect(screen.queryByTestId('cart-add-wishlist-item-1')).not.toBeInTheDocument();
             expect(screen.getByTestId('remove-item-item-2')).toBeInTheDocument();
+            expect(screen.getByTestId('edit-item-item-2')).toBeInTheDocument();
             expect(await screen.findByTestId('cart-add-wishlist-item-2')).toBeInTheDocument();
         });
 
@@ -269,4 +273,191 @@ describe('CartContent', () => {
             expect(screen.queryByTestId('cart-add-wishlist-item-1')).not.toBeInTheDocument();
         });
     });
+
+    describe('CartItemEditButton Integration', () => {
+        test('renders edit buttons for each cart item', () => {
+            renderCartContent({
+                basket: mockBasket,
+                productsByItemId: mockProductMap,
+                bonusProductsById: mockBonusProductsById,
+            });
+
+            expect(screen.getByTestId('edit-item-item-1')).toBeInTheDocument();
+            expect(screen.getByTestId('edit-item-item-2')).toBeInTheDocument();
+
+            const editButtons = screen.getAllByText(t('actionCard:edit'));
+            expect(editButtons).toHaveLength(2);
+        });
+
+        test('applies correct className to edit buttons', () => {
+            renderCartContent({
+                basket: mockBasket,
+                productsByItemId: mockProductMap,
+                bonusProductsById: mockBonusProductsById,
+            });
+
+            const editButton1 = screen.getByTestId('edit-item-item-1');
+            const editButton2 = screen.getByTestId('edit-item-item-2');
+
+            expect(editButton1).toHaveClass('pl-0');
+            expect(editButton2).toHaveClass('pl-0');
+        });
+
+        test('opens product modal when edit button is clicked', () => {
+            renderCartContent({
+                basket: mockBasket,
+                productsByItemId: mockProductMap,
+                bonusProductsById: mockBonusProductsById,
+            });
+
+            expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+
+            const editButton = screen.getByTestId('edit-item-item-1');
+            fireEvent.click(editButton);
+
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+            expect(screen.getByText(t('editItem:title'))).toBeInTheDocument();
+        });
+
+        test('can close modal using close button', () => {
+            renderCartContent({
+                basket: mockBasket,
+                productsByItemId: mockProductMap,
+                bonusProductsById: mockBonusProductsById,
+            });
+
+            const editButton = screen.getByTestId('edit-item-item-1');
+            fireEvent.click(editButton);
+
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+            const closeButton = screen.getByRole('button', { name: /close/i });
+            fireEvent.click(closeButton);
+
+            expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+        });
+
+        test('does not render edit buttons when product has no itemId', () => {
+            const basketWithoutItemIds = {
+                ...mockBasket,
+                productItems: [
+                    { quantity: 2, productId: 'product-1' },
+                    { itemId: 'item-2', quantity: 1, productId: 'product-2' },
+                ],
+            };
+
+            renderCartContent({
+                basket: basketWithoutItemIds,
+                productsByItemId: mockProductMap,
+                bonusProductsById: mockBonusProductsById,
+            });
+
+            expect(screen.queryByTestId('edit-item-item-1')).not.toBeInTheDocument();
+            expect(screen.getByTestId('edit-item-item-2')).toBeInTheDocument();
+        });
+    });
+
+    describe('Edit button visibility (CartItemEditButton presence)', () => {
+        function renderWith(productsByItemId: Record<string, any>) {
+            const basket = {
+                basketId: 'b1',
+                productItems: [{ itemId: 'item-1', quantity: 1, productId: 'p1' }],
+            };
+            return renderCartContent({ basket, productsByItemId, bonusProductsById: mockBonusProductsById });
+        }
+
+        const editBtn = () => screen.queryByTestId('edit-item-item-1');
+
+        test('standard product does not show CartItemEditButton', () => {
+            renderWith({ 'item-1': { id: 'p1', type: { item: true } } } as any);
+            expect(editBtn()).not.toBeInTheDocument();
+        });
+
+        test('product with variants shows CartItemEditButton', () => {
+            renderWith({ 'item-1': { id: 'p1', variants: [{} as any] } } as any);
+            expect(editBtn()).toBeInTheDocument();
+        });
+
+        test('missing product details mapping shows CartItemEditButton', () => {
+            const basket = { basketId: 'b1', productItems: [{ itemId: 'item-1', quantity: 1, productId: 'p1' }] };
+            renderCartContent({
+                basket,
+                productsByItemId: {} as any,
+                bonusProductsById: mockBonusProductsById,
+            });
+            expect(editBtn()).toBeInTheDocument();
+        });
+
+        test('bundle product shows CartItemEditButton', () => {
+            renderWith({ 'item-1': { id: 'p1', type: { bundle: true } } } as any);
+            expect(editBtn()).toBeInTheDocument();
+        });
+
+        test('parent product shows CartItemEditButton', () => {
+            renderWith({ 'item-1': { id: 'p1', type: { master: true } } } as any);
+            expect(editBtn()).toBeInTheDocument();
+        });
+
+        test('choice-based bonus product does not show CartItemEditButton', () => {
+            const basket = {
+                basketId: 'b1',
+                productItems: [
+                    {
+                        itemId: 'item-1',
+                        quantity: 1,
+                        productId: 'p1',
+                        bonusProductLineItem: true,
+                        bonusDiscountLineItemId: 'bonus-discount-choice-1',
+                    },
+                ],
+                bonusDiscountLineItems: [
+                    {
+                        id: 'bonus-discount-choice-1',
+                        promotionId: 'promo-choice-1',
+                        maxBonusItems: 3,
+                        bonusProducts: [{ productId: 'p1', productName: 'Choice Bonus Product 1' }],
+                    },
+                ],
+            };
+
+            renderCartContent({
+                basket: basket as any,
+                productsByItemId: { 'item-1': { id: 'p1', variants: [{} as any] } } as any,
+                bonusProductsById: { p1: { id: 'p1', name: 'Choice Bonus Product 1' } } as any,
+            });
+
+            expect(editBtn()).not.toBeInTheDocument();
+            expect(screen.getByTestId('remove-item-item-1')).toBeInTheDocument();
+        });
+
+        test('auto bonus product does not show CartItemEditButton', () => {
+            const basket = {
+                basketId: 'b1',
+                productItems: [
+                    {
+                        itemId: 'item-1',
+                        quantity: 1,
+                        productId: 'p1',
+                        bonusProductLineItem: true,
+                        bonusDiscountLineItemId: 'bonus-discount-auto-1',
+                    },
+                ],
+                bonusDiscountLineItems: [
+                    {
+                        id: 'bonus-discount-auto-1',
+                        promotionId: 'promo-auto-1',
+                        maxBonusItems: 1,
+                    },
+                ],
+            };
+
+            renderCartContent({
+                basket: basket as any,
+                productsByItemId: { 'item-1': { id: 'p1', variants: [{} as any] } } as any,
+                bonusProductsById: mockBonusProductsById,
+            });
+
+            expect(editBtn()).not.toBeInTheDocument();
+        });
+    });
 });
diff --git a/src/components/cart/cart-content.tsx b/src/components/cart/cart-content.tsx
@@ -21,6 +21,7 @@ import type { ShopperBasketsV2, ShopperProducts, ShopperPromotions } from '@sale
 // Components
 import ProductItemsList from '@/components/product-items-list';
 import { RemoveItemButtonWithConfirmation } from '@/components/buttons/remove-item-button-with-confirmation';
+import { CartItemEditButton } from '@/components/cart/cart-item-edit-button';
 import CartEmpty from './cart-empty';
 import CartTitle from './cart-title';
 import OrderSummary from '@/components/order-summary';
@@ -39,7 +40,7 @@ import CartDeliveryOption from '@/extensions/bopis/components/delivery-options/c
 import { UITarget } from '@/targets/ui-target';
 
 // utils
-import { isBonusProduct, isRuleBasedPromotion, type EnrichedProductItem } from '@/lib/product-utils';
+import { isStandardProduct, isBonusProduct, isRuleBasedPromotion, type EnrichedProductItem } from '@/lib/product-utils';
 
 const LazyBonusProductSelection = lazy(() => import('@/components/cart/bonus-product-selection'));
 const LazyBonusProductModal = lazy(() =>
@@ -160,11 +161,14 @@ export default function CartContent({
         }
 
         const isBonusProd = isBonusProduct(product);
+        const isStandardProd = isStandardProduct(product);
+        const shouldShowEditButton = !isStandardProd && !isBonusProd;
         const shouldShowWishlist = !isBonusProd;
 
         return (
             <div className="flex gap-2">
                 <RemoveItemButtonWithConfirmation itemId={product.itemId} className="pl-0" />
+                {shouldShowEditButton && <CartItemEditButton product={product} className="pl-0" />}
                 {shouldShowWishlist && (
                     <Suspense fallback={null}>
                         <LazyCartItemAddToWishlistButton
diff --git a/src/components/cart/cart-item-edit-button.tsx b/src/components/cart/cart-item-edit-button.tsx
@@ -24,6 +24,7 @@ import type { ShopperBasketsV2, ShopperProducts } from '@salesforce/storefront-n
 import { CartItemModal } from '@/components/cart-item-modal';
 import { Button } from '@/components/ui/button';
 import { useTranslation } from 'react-i18next';
+import { cn } from '@/lib/utils';
 
 // Constants
 
@@ -45,7 +46,7 @@ interface CartItemEditButtonProps {
  * @param props - Component props
  * @returns JSX element with edit button and product modal
  */
-export function CartItemEditButton({ product, className = '' }: CartItemEditButtonProps): ReactElement {
+export function CartItemEditButton({ product, className }: CartItemEditButtonProps): ReactElement {
     // Modal state management
     const { t } = useTranslation('actionCard');
     const [isOpen, setIsOpen] = useState(false);
@@ -54,7 +55,8 @@ export function CartItemEditButton({ product, className = '' }: CartItemEditButt
         <>
             <Button
                 variant="link"
-                className={`text-xs cursor-pointer hover:no-underline h-auto p-0 ${className ?? ''}`}
+                size="sm"
+                className={cn('text-xs cursor-pointer hover:no-underline', className)}
                 aria-label={`${t('edit')} ${product.productName ?? ''}`}
                 data-testid={`edit-item-${product.itemId}`}
                 onClick={() => setIsOpen(true)}>
diff --git a/src/components/cart/stories/__snapshots__/cart-content-snapshot.tsx.snap b/src/components/cart/stories/__snapshots__/cart-content-snapshot.tsx.snap
