all cart

2025-06-30 00:38:29 +03:00
parent a879e5e5e7
commit 215853e8c7
9 changed files with 310 additions and 136 deletions
--- a/src/components/CartItem.tsx
+++ b/src/components/CartItem.tsx
@ -16,6 +16,8 @@ interface CartItemProps {
  onComment: (comment: string) => void;
  onCountChange?: (count: number) => void;
  onRemove?: () => void;
+  isSummaryStep?: boolean;
+  itemNumber?: number;
 }

 const CartItem: React.FC<CartItemProps> = ({
@ -34,9 +36,14 @@ const CartItem: React.FC<CartItemProps> = ({
  onComment,
  onCountChange,
  onRemove,
+  isSummaryStep = false,
+  itemNumber,
 }) => (
  <div className="w-layout-hflex cart-item">
    <div className="w-layout-hflex info-block-search-copy">
+      {isSummaryStep ? (
+        <div style={{ marginRight: 12, minWidth: 24, textAlign: 'center', fontWeight: 600, fontSize: 14 }}>{itemNumber}</div>
+      ) : (
      <div
        className={"div-block-7" + (selected ? " active" : "")}
        onClick={onSelect}
@ -48,9 +55,22 @@ const CartItem: React.FC<CartItemProps> = ({
          </svg>
        )}
      </div>
+      )}
      <div className="w-layout-hflex block-name">
        <h4 className="heading-9-copy">{name}</h4>
-        <div className="text-block-21-copy">{description}</div>
+        <div
+          className={
+            "text-block-21-copy" +
+            (isSummaryStep && itemNumber === 1 ? " border-t-0" : "")
+          }
+          style={
+            isSummaryStep && itemNumber === 1
+              ? { borderTop: 'none' }
+              : undefined
+          }
+        >
+          {description}
+        </div>
      </div>
      <div className="form-block-copy w-form">
        <form className="form-copy" onSubmit={e => e.preventDefault()}>
@ -64,6 +84,7 @@ const CartItem: React.FC<CartItemProps> = ({
            id="Search-5"
            value={comment}
            onChange={e => onComment(e.target.value)}
+            disabled={isSummaryStep}
          />
        </form>
        <div className="success-message w-form-done">
@ -80,87 +101,95 @@ const CartItem: React.FC<CartItemProps> = ({
        <div className="text-block-21-copy-copy">{deliveryDate}</div>
      </div>
      <div className="w-layout-hflex pcs-cart-s1">
-        <div
-          className="minus-plus"
-          onClick={() => onCountChange && onCountChange(count - 1)}
-          style={{ cursor: 'pointer' }}
-          aria-label="Уменьшить количество"
-          tabIndex={0}
-          onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onCountChange && onCountChange(count - 1)}
-          role="button"
-        >
-          <div className="pluspcs w-embed">
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M6 10.5V9.5H14V10.5H6Z" fill="currentColor"/>
-            </svg>
-          </div>
+        {isSummaryStep ? (
+          <div className="text-block-26" style={{ fontWeight: 600, fontSize: 14 }}>{count} шт.</div>
+        ) : (
+          <>
+            <div
+              className="minus-plus"
+              onClick={() => onCountChange && onCountChange(count - 1)}
+              style={{ cursor: 'pointer' }}
+              aria-label="Уменьшить количество"
+              tabIndex={0}
+              onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onCountChange && onCountChange(count - 1)}
+              role="button"
+            >
+              <div className="pluspcs w-embed">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M6 10.5V9.5H14V10.5H6Z" fill="currentColor"/>
+                </svg>
+              </div>
        </div>
        <div className="input-pcs">
-          <input
-            type="number"
-            min={1}
-            value={count}
-            onChange={e => {
-              const value = Math.max(1, parseInt(e.target.value, 10) || 1);
-              onCountChange && onCountChange(value);
-            }}
-            className="text-block-26 w-full text-center outline-none"
-            aria-label="Количество"
-            style={{ width: 40 }}
-          />
+              <input
+                type="number"
+                min={1}
+                value={count}
+                onChange={e => {
+                  const value = Math.max(1, parseInt(e.target.value, 10) || 1);
+                  onCountChange && onCountChange(value);
+                }}
+                className="text-block-26 w-full text-center outline-none"
+                aria-label="Количество"
+                style={{ width: 40 }}
+              />
+            </div>
+            <div
+              className="minus-plus"
+              onClick={() => onCountChange && onCountChange(count + 1)}
+              style={{ cursor: 'pointer' }}
+              aria-label="Увеличить количество"
+              tabIndex={0}
+              onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onCountChange && onCountChange(count + 1)}
+              role="button"
+            >
+              <div className="pluspcs w-embed">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M6 10.5V9.5H14V10.5H6ZM9.5 6H10.5V14H9.5V6Z" fill="currentColor"/>
+                </svg>
        </div>
-        <div
-          className="minus-plus"
-          onClick={() => onCountChange && onCountChange(count + 1)}
-          style={{ cursor: 'pointer' }}
-          aria-label="Увеличить количество"
-          tabIndex={0}
-          onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onCountChange && onCountChange(count + 1)}
-          role="button"
-        >
-          <div className="pluspcs w-embed">
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M6 10.5V9.5H14V10.5H6ZM9.5 6H10.5V14H9.5V6Z" fill="currentColor"/>
-            </svg>
-          </div>
        </div>
+          </>
+        )}
      </div>
      <div className="w-layout-hflex flex-block-39-copy-copy">
        <h4 className="price-in-cart-s1">{price}</h4>
        <div className="price-1-pcs-cart-s1">{pricePerItem}</div>
      </div>
+      {!isSummaryStep && (
      <div className="w-layout-hflex control-element">
        <div className="favorite-icon w-embed" onClick={onFavorite} style={{ cursor: 'pointer', color: favorite ? '#e53935' : undefined }}>
          <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 16.5L7.84 15.4929C3.72 11.93 1 9.57248 1 6.69619C1 4.33869 2.936 2.5 5.4 2.5C6.792 2.5 8.128 3.11798 9 4.08692C9.872 3.11798 11.208 2.5 12.6 2.5C15.064 2.5 17 4.33869 17 6.69619C17 9.57248 14.28 11.93 10.16 15.4929L9 16.5Z" fill={favorite ? "#e53935" : "currentColor"} />
          </svg>
        </div>
-        <div
-          className="bdel"
-          role="button"
-          tabIndex={0}
-          aria-label="Удалить из корзины"
-          onClick={onRemove}
-          onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onRemove && onRemove()}
-          style={{ display: 'inline-flex', cursor: 'pointer', transition: 'color 0.2s' }}
-          onMouseEnter={e => {
-            const path = e.currentTarget.querySelector('path');
-            if (path) path.setAttribute('fill', '#ec1c24');
-          }}
-          onMouseLeave={e => {
-            const path = e.currentTarget.querySelector('path');
-            if (path) path.setAttribute('fill', '#D0D0D0');
-          }}
-        >
-          <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M4.625 17.5C4.14375 17.5 3.73192 17.3261 3.3895 16.9782C3.04708 16.6304 2.87558 16.2117 2.875 15.7222V4.16667H2V2.38889H6.375V1.5H11.625V2.38889H16V4.16667H15.125V15.7222C15.125 16.2111 14.9538 16.6298 14.6114 16.9782C14.269 17.3267 13.8568 17.5006 13.375 17.5H4.625ZM6.375 13.9444H8.125V5.94444H6.375V13.9444ZM9.875 13.9444H11.625V5.94444H9.875V13.9444Z"
-              fill="#D0D0D0"
-              style={{ transition: 'fill 0.2s' }}
-            />
-          </svg>
-        </div>
+          <div
+            className="bdel"
+            role="button"
+            tabIndex={0}
+            aria-label="Удалить из корзины"
+            onClick={onRemove}
+            onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onRemove && onRemove()}
+            style={{ display: 'inline-flex', cursor: 'pointer', transition: 'color 0.2s' }}
+            onMouseEnter={e => {
+              const path = e.currentTarget.querySelector('path');
+              if (path) path.setAttribute('fill', '#ec1c24');
+            }}
+            onMouseLeave={e => {
+              const path = e.currentTarget.querySelector('path');
+              if (path) path.setAttribute('fill', '#D0D0D0');
+            }}
+          >
+            <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M4.625 17.5C4.14375 17.5 3.73192 17.3261 3.3895 16.9782C3.04708 16.6304 2.87558 16.2117 2.875 15.7222V4.16667H2V2.38889H6.375V1.5H11.625V2.38889H16V4.16667H15.125V15.7222C15.125 16.2111 14.9538 16.6298 14.6114 16.9782C14.269 17.3267 13.8568 17.5006 13.375 17.5H4.625ZM6.375 13.9444H8.125V5.94444H6.375V13.9444ZM9.875 13.9444H11.625V5.94444H9.875V13.9444Z"
+                fill="#D0D0D0"
+                style={{ transition: 'fill 0.2s' }}
+              />
+            </svg>
+          </div>
      </div>
+      )}
    </div>
  </div>
 );