@akinon/projectzero 2.0.0-beta.19 → 2.0.0-beta.20

package/app-template/src/views/basket/basket-item.tsx

@@ -4,8 +4,15 @@ import {
 } from '@akinon/next/data/client/basket';
 import { useAppDispatch } from '@akinon/next/redux/hooks';
 import { BasketItem as BasketItemType } from '@akinon/next/types';
-import { Price, Button, Icon, Modal, Select, Link } from '@theme/components';
-import { useState } from 'react';
+import {
+  Price,
+  Button,
+  Icon,
+  LoaderSpinner,
+  Modal,
+  Link
+} from '@theme/components';
+import { ComponentProps, useState } from 'react';
 import { useAddFavoriteMutation } from '@akinon/next/data/client/wishlist';
 import {
   useCommonProductAttributes,
@@ -13,14 +20,89 @@ import {
 } from '@akinon/next/hooks';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { Image } from '@akinon/next/components/image';
-import clsx from 'clsx';
 import { pushRemoveFromCart } from '@theme/utils/gtm';
+import { WithDesignerFeatures } from '@akinon/next/components/theme-editor/components/with-designer-features';
+import {
+  BASKET_ITEM_BLOCKS,
+  BASKET_ITEMS_SECTION_ID,
+  BASKET_PLACEHOLDER_ID,
+  useBasketDesigner
+} from './designer-context';
 
 interface Props {
   basketItem?: BasketItemType;
   namespace?: string;
 }
 
+const convertStylesToCSS = (
+  styles: Record<string, unknown> | undefined
+): React.CSSProperties => {
+  if (!styles) return {};
+
+  const cssStyles: React.CSSProperties = {};
+
+  Object.entries(styles).forEach(([key, value]) => {
+    const rawValue =
+      typeof value === 'object' && value !== null && 'desktop' in value
+        ? (value as Record<string, unknown>).desktop
+        : value;
+
+    const cssValue =
+      typeof rawValue === 'number'
+        ? rawValue
+        : typeof rawValue === 'string'
+        ? rawValue
+        : '';
+
+    if (cssValue !== '' && cssValue !== null && cssValue !== undefined) {
+      const camelKey = key.replace(/-([a-z])/g, (_, letter) =>
+        letter.toUpperCase()
+      );
+      (cssStyles as Record<string, unknown>)[camelKey] = cssValue;
+    }
+  });
+
+  return cssStyles;
+};
+
+const pickStyles = (
+  styles: React.CSSProperties,
+  keys: Array<keyof React.CSSProperties>
+): React.CSSProperties => {
+  const picked: React.CSSProperties = {};
+
+  keys.forEach((key) => {
+    const value = styles[key];
+
+    if (value !== undefined && value !== null && value !== '') {
+      (picked as Record<string, unknown>)[key as string] = value;
+    }
+  });
+
+  return picked;
+};
+
+const omitStyles = (
+  styles: React.CSSProperties,
+  keys: Array<keyof React.CSSProperties>
+): React.CSSProperties => {
+  const omitted = { ...styles };
+
+  keys.forEach((key) => {
+    delete omitted[key];
+  });
+
+  return omitted;
+};
+
+const getResponsiveValue = (value: unknown) => {
+  if (typeof value === 'object' && value !== null && 'desktop' in value) {
+    return (value as Record<string, unknown>).desktop;
+  }
+
+  return value;
+};
+
 export const BasketItem = (props: Props) => {
   const { t } = useLocalization();
   const { basketItem, namespace } = props;
@@ -29,15 +111,228 @@ export const BasketItem = (props: Props) => {
   const [isRemoveBasketModalOpen, setRemoveBasketModalOpen] = useState(false);
   const [addFavorite, { isLoading: addFavoriteLoading }] =
     useAddFavoriteMutation();
-  const [updateQuantityLoading, setUpdateQuantityLoading] = useState(false);
   const commonProductAttributes = useCommonProductAttributes({
     attributes: basketItem.product.attributes_kwargs
   });
+  const [updateQuantityLoading, setUpdateQuantityLoading] = useState(false);
+  const { isDesigner, selectedBlockId, getBlockStyles, getBlockProperties } =
+    useBasketDesigner();
+  const rowStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.ITEM_ROW.id)
+  );
+  const imageStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.IMAGE.id)
+  );
+  const nameStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.NAME.id)
+  );
+  const attributesStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.ATTRIBUTES.id)
+  );
+  const attributeLabelStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.ATTRIBUTE_LABEL.id)
+  );
+  const attributeValueStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.ATTRIBUTE_VALUE.id)
+  );
+  const quantityStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.QUANTITY.id)
+  );
+  const quantityWrapperStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.QUANTITY_WRAPPER.id)
+  );
+  const quantityMinusButtonStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.QUANTITY_MINUS_BUTTON.id)
+  );
+  const quantityMinusIconStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.QUANTITY_MINUS_ICON.id)
+  );
+  const quantityValueStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.QUANTITY_VALUE.id)
+  );
+  const quantityPlusButtonStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.QUANTITY_PLUS_BUTTON.id)
+  );
+  const quantityPlusIconStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.QUANTITY_PLUS_ICON.id)
+  );
+
+  const quantityMinusIconProps =
+    getBlockProperties(BASKET_ITEM_BLOCKS.QUANTITY_MINUS_ICON.id) || {};
+  const quantityPlusIconProps =
+    getBlockProperties(BASKET_ITEM_BLOCKS.QUANTITY_PLUS_ICON.id) || {};
+  const priceStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.PRICE.id)
+  );
+  const priceTextBlockStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.PRICE_TEXT.id)
+  );
+  const removeStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.REMOVE.id)
+  );
+  const removeProperties = getBlockProperties(BASKET_ITEM_BLOCKS.REMOVE.id);
+  const removeIconRaw = getResponsiveValue(removeProperties?.icon);
+  const removeIconValue = removeIconRaw;
+  const hasCustomRemoveSvgIcon =
+    typeof removeIconValue === 'string' && removeIconValue.includes('<svg');
+  const removeIconName = (
+    typeof removeIconValue === 'string' ? removeIconValue : 'close'
+  ) as ComponentProps<typeof Icon>['name'];
+  const giftPackStyles = convertStylesToCSS(
+    getBlockStyles(BASKET_ITEM_BLOCKS.GIFT_PACK.id)
+  );
+
+  const imageWrapperKeys: Array<keyof React.CSSProperties> = [
+    'width',
+    'height',
+    'marginRight',
+    'marginLeft',
+    'marginTop',
+    'marginBottom',
+    'alignSelf',
+    'justifySelf',
+    'flexGrow',
+    'flexShrink'
+  ];
+  const priceWrapperKeys: Array<keyof React.CSSProperties> = [
+    'gap',
+    'marginRight',
+    'marginLeft',
+    'marginTop',
+    'marginBottom',
+    'alignSelf',
+    'justifySelf',
+    'justifyContent',
+    'alignItems'
+  ];
+  const attributesWrapperKeys: Array<keyof React.CSSProperties> = [
+    'gap',
+    'marginRight',
+    'marginLeft',
+    'marginTop',
+    'marginBottom',
+    'alignSelf',
+    'justifySelf',
+    'justifyContent',
+    'alignItems'
+  ];
+  const quantityContainerKeys: Array<keyof React.CSSProperties> = [
+    'gap',
+    'marginRight',
+    'marginLeft',
+    'marginTop',
+    'marginBottom',
+    'alignSelf',
+    'justifySelf',
+    'justifyContent',
+    'alignItems'
+  ];
+
+  const imageWrapperStyles = pickStyles(imageStyles, imageWrapperKeys);
+  const imageElementStyles = {
+    ...omitStyles(imageStyles, [
+      'marginRight',
+      'marginLeft',
+      'marginTop',
+      'marginBottom',
+      'alignSelf',
+      'justifySelf',
+      'flexGrow',
+      'flexShrink'
+    ]),
+    width: imageStyles.width || undefined,
+    height: imageStyles.height || undefined
+  };
+  const priceWrapperStyles = pickStyles(priceStyles, priceWrapperKeys);
+  const priceTextStyles = priceTextBlockStyles;
+  const attributesWrapperStyles = pickStyles(
+    attributesStyles,
+    attributesWrapperKeys
+  );
+  const attributesTextStyles = omitStyles(
+    attributesStyles,
+    attributesWrapperKeys
+  );
+  const finalAttributeLabelStyles = {
+    ...attributesTextStyles,
+    ...attributeLabelStyles
+  };
+  const finalAttributeValueStyles = {
+    ...attributesTextStyles,
+    ...attributeValueStyles
+  };
+  const quantityContainerStyles = pickStyles(
+    quantityStyles,
+    quantityContainerKeys
+  );
+  const minusIconRaw = getResponsiveValue(quantityMinusIconProps.icon);
+  const plusIconRaw = getResponsiveValue(quantityPlusIconProps.icon);
+  const minusIcon = typeof minusIconRaw === 'string' ? minusIconRaw : 'minus';
+  const plusIcon = typeof plusIconRaw === 'string' ? plusIconRaw : 'plus';
+
+  const toNumber = (value: unknown, fallback = 12) => {
+    if (typeof value === 'number') return value;
+    if (typeof value === 'string') {
+      const parsed = parseInt(value, 10);
+      return Number.isNaN(parsed) ? fallback : parsed;
+    }
+
+    return fallback;
+  };
+
+  const minusIconSize = toNumber(
+    quantityMinusIconStyles.width ||
+      quantityMinusIconStyles.height ||
+      quantityMinusIconStyles.fontSize,
+    12
+  );
+  const plusIconSize = toNumber(
+    quantityPlusIconStyles.width ||
+      quantityPlusIconStyles.height ||
+      quantityPlusIconStyles.fontSize,
+    12
+  );
+
+  const isCustomMinusSvg =
+    typeof minusIcon === 'string' && minusIcon.includes('<svg');
+  const isCustomPlusSvg =
+    typeof plusIcon === 'string' && plusIcon.includes('<svg');
+
+  const handleDesignerClick = (event: React.MouseEvent) => {
+    if (isDesigner) {
+      event.preventDefault();
+    }
+  };
+
+  // Check if any instance of this block type is selected
+  const isBlockSelected = (
+    block: typeof BASKET_ITEM_BLOCKS[keyof typeof BASKET_ITEM_BLOCKS]
+  ) => {
+    if (selectedBlockId === block.id) return true;
+    // Match only numbered instances (e.g., basket-item-price-1), not sibling blocks
+    if (selectedBlockId?.match(new RegExp(`^${block.id}-\\d+$`))) return true;
+    return false;
+  };
+
+  // Block instance - uses base ID for styles (shared across all items)
+  const getBlockInstance = (
+    block: typeof BASKET_ITEM_BLOCKS[keyof typeof BASKET_ITEM_BLOCKS]
+  ) => {
+    // Always get styles from base block ID (shared across all items)
+    const styles = getBlockStyles(block.id);
+    return {
+      ...block,
+      // Use base ID so all items share the same block in theme editor
+      id: block.id,
+      styles
+    };
+  };
 
   const updateQuantity = async (
     productPk: number,
     quantity: number,
-    attributes: object = {}
+    attributes: object = {},
+    namespace?: string
   ) => {
     const requestParams: {
       product: number;
@@ -54,9 +349,11 @@ export const BasketItem = (props: Props) => {
       requestParams.namespace = namespace;
     }
 
+    setUpdateQuantityLoading(true);
+
     await updateQuantityMutation(requestParams)
       .unwrap()
-      .then((data) =>
+      .then((data) => {
         dispatch(
           basketApi.util.updateQueryData(
             'getBasket',
@@ -65,15 +362,34 @@ export const BasketItem = (props: Props) => {
               Object.assign(draftBasket, data.basket);
             }
           )
-        )
-      );
+        );
+      })
+      .catch((err) => {
+        const formattedError =
+          err?.data?.non_field_errors ||
+          Object.keys(err?.data || {}).map(
+            (key) => `${key}: ${err?.data[key].join(', ')}`
+          );
+
+        console.error('Error in operation:', formattedError);
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setUpdateQuantityLoading(false);
+        }, 200);
+      });
   };
 
   const deleteProduct = async (productPk?: number) => {
     setUpdateQuantityLoading(true);
 
     try {
-      await updateQuantity(basketItem.product.pk, 0, basketItem.attributes);
+      await updateQuantity(
+        basketItem.product.pk,
+        0,
+        basketItem.attributes,
+        namespace
+      );
       pushRemoveFromCart(basketItem?.product);
 
       if (productPk) {
@@ -87,117 +403,385 @@ export const BasketItem = (props: Props) => {
     }
   };
 
+  const handleQuantityChange = (newQuantity: number) => {
+    if (newQuantity === 0) {
+      setRemoveBasketModalOpen(true);
+    } else {
+      updateQuantity(
+        basketItem.product.pk,
+        newQuantity,
+        basketItem.attributes,
+        namespace
+      );
+    }
+  };
+
+  const handleDecrease = () => {
+    if (isDesigner) return;
+    if (updateQuantityLoading) return;
+    handleQuantityChange(basketItem.quantity - 1);
+  };
+
+  const handleIncrease = () => {
+    if (isDesigner) return;
+    if (updateQuantityLoading) return;
+    if (basketItem.quantity >= 999) return;
+    handleQuantityChange(basketItem.quantity + 1);
+  };
+
   return (
     <>
-      <li
-        key={basketItem.id}
-        className="flex border-b border-gray-200 py-3 relative"
-        data-testid="basket-item"
-      >
-        <div className="w-20 lg:w-[105px] mr-4 shrink-0">
-          <Link href={basketItem.product.absolute_url} passHref>
-            <Image
-              src={basketItem.product.productimage_set[0]?.image}
-              alt={basketItem.product.name}
-              width={80}
-              height={128}
-              className="md:hidden"
-            />
-
-            <Image
-              src={basketItem.product.productimage_set[0]?.image}
-              alt={basketItem.product.name}
-              width={105}
-              height={158}
-              className="hidden md:block"
-            />
-          </Link>
-        </div>
-        <div className="w-full flex flex-col justify-between">
-          <div className="flex h-full">
-            <div className="flex flex-1 flex-col gap-3 sm:flex-row sm:gap-1">
-              <div className="flex-1">
-                <Link
-                  href={basketItem.product.absolute_url}
-                  data-testid="basket-product-name"
-                  passHref
-                >
-                  <span className="text-xs">{basketItem.product.name}</span>
-                </Link>
-                <div className="flex flex-col gap-1">
-                  {commonProductAttributes.map((attribute, index) => (
-                    <span className="text-xs" key={index}>
-                      <span>{attribute.name}</span>:{' '}
-                      <span
-                        data-testid={`basket-item-${attribute.name.toLowerCase()}`}
+      <li key={basketItem.id} data-testid="basket-item">
+        <WithDesignerFeatures
+          block={getBlockInstance(BASKET_ITEM_BLOCKS.ITEM_ROW)}
+          placeholderId={BASKET_PLACEHOLDER_ID}
+          sectionId={BASKET_ITEMS_SECTION_ID}
+          isDesigner={isDesigner}
+          isSelected={isBlockSelected(BASKET_ITEM_BLOCKS.ITEM_ROW)}
+          className="flex border-b border-gray-200 py-3 relative flex-col gap-4 sm:flex-row"
+          style={rowStyles}
+        >
+          <WithDesignerFeatures
+            block={getBlockInstance(BASKET_ITEM_BLOCKS.IMAGE)}
+            placeholderId={BASKET_PLACEHOLDER_ID}
+            sectionId={BASKET_ITEMS_SECTION_ID}
+            isDesigner={isDesigner}
+            isSelected={isBlockSelected(BASKET_ITEM_BLOCKS.IMAGE)}
+            className="mr-4 shrink-0"
+            style={imageWrapperStyles}
+          >
+            <Link
+              href={basketItem.product.absolute_url}
+              passHref
+              onClick={handleDesignerClick}
+            >
+              <Image
+                src={basketItem.product.productimage_set[0]?.image}
+                alt={basketItem.product.name}
+                width={80}
+                height={128}
+                className="md:hidden"
+                style={imageElementStyles}
+              />
+
+              <Image
+                src={basketItem.product.productimage_set[0]?.image}
+                alt={basketItem.product.name}
+                width={105}
+                height={158}
+                className="hidden md:block"
+                style={imageElementStyles}
+              />
+            </Link>
+          </WithDesignerFeatures>
+          <div className="w-full flex flex-col justify-between">
+            <div className="flex h-full gap-4">
+              <div className="flex flex-1 flex-col gap-3 sm:flex-row sm:gap-4">
+                <div className="flex-1 space-y-2">
+                  <WithDesignerFeatures
+                    block={getBlockInstance(BASKET_ITEM_BLOCKS.NAME)}
+                    placeholderId={BASKET_PLACEHOLDER_ID}
+                    sectionId={BASKET_ITEMS_SECTION_ID}
+                    isDesigner={isDesigner}
+                    isSelected={isBlockSelected(BASKET_ITEM_BLOCKS.NAME)}
+                    className="inline-block w-full text-xs"
+                    style={nameStyles}
+                  >
+                    <Link
+                      href={basketItem.product.absolute_url}
+                      data-testid="basket-product-name"
+                      passHref
+                      onClick={handleDesignerClick}
+                    >
+                      <span>{basketItem.product.name}</span>
+                    </Link>
+                  </WithDesignerFeatures>
+                  <WithDesignerFeatures
+                    block={getBlockInstance(BASKET_ITEM_BLOCKS.ATTRIBUTES)}
+                    placeholderId={BASKET_PLACEHOLDER_ID}
+                    sectionId={BASKET_ITEMS_SECTION_ID}
+                    isDesigner={isDesigner}
+                    isSelected={isBlockSelected(BASKET_ITEM_BLOCKS.ATTRIBUTES)}
+                    className="flex flex-col gap-1"
+                    style={attributesWrapperStyles}
+                  >
+                    {commonProductAttributes.map((attribute, index) => (
+                      <div
+                        className="text-xs"
+                        key={index}
+                        style={attributesTextStyles}
                       >
-                        {attribute.value}
-                      </span>
-                    </span>
-                  ))}
+                        <WithDesignerFeatures
+                          block={getBlockInstance(
+                            BASKET_ITEM_BLOCKS.ATTRIBUTE_LABEL
+                          )}
+                          placeholderId={BASKET_PLACEHOLDER_ID}
+                          sectionId={BASKET_ITEMS_SECTION_ID}
+                          isDesigner={isDesigner}
+                          isSelected={isBlockSelected(
+                            BASKET_ITEM_BLOCKS.ATTRIBUTE_LABEL
+                          )}
+                          className="inline-block"
+                        >
+                          <span style={finalAttributeLabelStyles}>
+                            {attribute.name}
+                          </span>
+                        </WithDesignerFeatures>
+                        :{' '}
+                        <WithDesignerFeatures
+                          block={getBlockInstance(
+                            BASKET_ITEM_BLOCKS.ATTRIBUTE_VALUE
+                          )}
+                          placeholderId={BASKET_PLACEHOLDER_ID}
+                          sectionId={BASKET_ITEMS_SECTION_ID}
+                          isDesigner={isDesigner}
+                          isSelected={isBlockSelected(
+                            BASKET_ITEM_BLOCKS.ATTRIBUTE_VALUE
+                          )}
+                          className="inline-block"
+                        >
+                          <span
+                            style={finalAttributeValueStyles}
+                            data-testid={`basket-item-${attribute.name.toLowerCase()}`}
+                          >
+                            {attribute.value}
+                          </span>
+                        </WithDesignerFeatures>
+                      </div>
+                    ))}
+                  </WithDesignerFeatures>
                 </div>
+                <WithDesignerFeatures
+                  block={getBlockInstance(BASKET_ITEM_BLOCKS.QUANTITY)}
+                  placeholderId={BASKET_PLACEHOLDER_ID}
+                  sectionId={BASKET_ITEMS_SECTION_ID}
+                  isDesigner={isDesigner}
+                  isSelected={isBlockSelected(BASKET_ITEM_BLOCKS.QUANTITY)}
+                  className="flex flex-col justify-center md:flex-row md:items-center"
+                  style={quantityContainerStyles}
+                >
+                  <WithDesignerFeatures
+                    block={getBlockInstance(
+                      BASKET_ITEM_BLOCKS.QUANTITY_WRAPPER
+                    )}
+                    placeholderId={BASKET_PLACEHOLDER_ID}
+                    sectionId={BASKET_ITEMS_SECTION_ID}
+                    isDesigner={isDesigner}
+                    isSelected={isBlockSelected(
+                      BASKET_ITEM_BLOCKS.QUANTITY_WRAPPER
+                    )}
+                    className="w-[138px] h-11 flex items-center justify-between border p-4"
+                    style={quantityWrapperStyles}
+                  >
+                    <WithDesignerFeatures
+                      block={getBlockInstance(
+                        BASKET_ITEM_BLOCKS.QUANTITY_MINUS_BUTTON
+                      )}
+                      placeholderId={BASKET_PLACEHOLDER_ID}
+                      sectionId={BASKET_ITEMS_SECTION_ID}
+                      isDesigner={isDesigner}
+                      isSelected={isBlockSelected(
+                        BASKET_ITEM_BLOCKS.QUANTITY_MINUS_BUTTON
+                      )}
+                      className="inline-flex"
+                    >
+                      <Button
+                        className="h-auto p-0 hover:bg-transparent hover:text-black"
+                        appearance="ghost"
+                        onClick={handleDecrease}
+                        disabled={
+                          updateQuantityLoading || basketItem.quantity <= 0
+                        }
+                        style={quantityMinusButtonStyles}
+                      >
+                        <WithDesignerFeatures
+                          block={getBlockInstance(
+                            BASKET_ITEM_BLOCKS.QUANTITY_MINUS_ICON
+                          )}
+                          placeholderId={BASKET_PLACEHOLDER_ID}
+                          sectionId={BASKET_ITEMS_SECTION_ID}
+                          isDesigner={isDesigner}
+                          isSelected={isBlockSelected(
+                            BASKET_ITEM_BLOCKS.QUANTITY_MINUS_ICON
+                          )}
+                          className="inline-flex"
+                          style={quantityMinusIconStyles}
+                        >
+                          {isCustomMinusSvg ? (
+                            <div
+                              style={{
+                                width: minusIconSize,
+                                height: minusIconSize
+                              }}
+                              dangerouslySetInnerHTML={{ __html: minusIcon }}
+                            />
+                          ) : (
+                            <Icon
+                              name={
+                                minusIcon as ComponentProps<typeof Icon>['name']
+                              }
+                              size={minusIconSize}
+                              style={quantityMinusIconStyles}
+                            />
+                          )}
+                        </WithDesignerFeatures>
+                      </Button>
+                    </WithDesignerFeatures>
+
+                    <WithDesignerFeatures
+                      block={getBlockInstance(
+                        BASKET_ITEM_BLOCKS.QUANTITY_VALUE
+                      )}
+                      placeholderId={BASKET_PLACEHOLDER_ID}
+                      sectionId={BASKET_ITEMS_SECTION_ID}
+                      isDesigner={isDesigner}
+                      isSelected={isBlockSelected(
+                        BASKET_ITEM_BLOCKS.QUANTITY_VALUE
+                      )}
+                      className="inline-flex"
+                      style={quantityValueStyles}
+                    >
+                      {updateQuantityLoading ? (
+                        <LoaderSpinner className="w-4 h-4" />
+                      ) : (
+                        <span style={quantityValueStyles}>
+                          {basketItem.quantity}
+                        </span>
+                      )}
+                    </WithDesignerFeatures>
+
+                    <WithDesignerFeatures
+                      block={getBlockInstance(
+                        BASKET_ITEM_BLOCKS.QUANTITY_PLUS_BUTTON
+                      )}
+                      placeholderId={BASKET_PLACEHOLDER_ID}
+                      sectionId={BASKET_ITEMS_SECTION_ID}
+                      isDesigner={isDesigner}
+                      isSelected={isBlockSelected(
+                        BASKET_ITEM_BLOCKS.QUANTITY_PLUS_BUTTON
+                      )}
+                      className="inline-flex"
+                    >
+                      <Button
+                        className="h-auto p-0 hover:bg-transparent hover:text-black"
+                        appearance="ghost"
+                        onClick={handleIncrease}
+                        disabled={
+                          updateQuantityLoading || basketItem.quantity >= 999
+                        }
+                        style={quantityPlusButtonStyles}
+                      >
+                        <WithDesignerFeatures
+                          block={getBlockInstance(
+                            BASKET_ITEM_BLOCKS.QUANTITY_PLUS_ICON
+                          )}
+                          placeholderId={BASKET_PLACEHOLDER_ID}
+                          sectionId={BASKET_ITEMS_SECTION_ID}
+                          isDesigner={isDesigner}
+                          isSelected={isBlockSelected(
+                            BASKET_ITEM_BLOCKS.QUANTITY_PLUS_ICON
+                          )}
+                          className="inline-flex"
+                          style={quantityPlusIconStyles}
+                        >
+                          {isCustomPlusSvg ? (
+                            <div
+                              style={{
+                                width: plusIconSize,
+                                height: plusIconSize
+                              }}
+                              dangerouslySetInnerHTML={{ __html: plusIcon }}
+                            />
+                          ) : (
+                            <Icon
+                              name={
+                                plusIcon as ComponentProps<typeof Icon>['name']
+                              }
+                              size={plusIconSize}
+                              style={quantityPlusIconStyles}
+                            />
+                          )}
+                        </WithDesignerFeatures>
+                      </Button>
+                    </WithDesignerFeatures>
+                  </WithDesignerFeatures>
+                </WithDesignerFeatures>
+                <WithDesignerFeatures
+                  block={getBlockInstance(BASKET_ITEM_BLOCKS.PRICE)}
+                  placeholderId={BASKET_PLACEHOLDER_ID}
+                  sectionId={BASKET_ITEMS_SECTION_ID}
+                  isDesigner={isDesigner}
+                  isSelected={isBlockSelected(BASKET_ITEM_BLOCKS.PRICE)}
+                  className="flex flex-col shrink-0 text-sm gap-2 items-start justify-center lg:flex-row lg:mr-6 lg:gap-6 sm:items-center lg:justify-start"
+                  style={priceWrapperStyles}
+                >
+                  <WithDesignerFeatures
+                    block={getBlockInstance(BASKET_ITEM_BLOCKS.PRICE_TEXT)}
+                    placeholderId={BASKET_PLACEHOLDER_ID}
+                    sectionId={BASKET_ITEMS_SECTION_ID}
+                    isDesigner={isDesigner}
+                    isSelected={isBlockSelected(BASKET_ITEM_BLOCKS.PRICE_TEXT)}
+                    className="inline-block"
+                  >
+                    <Price
+                      value={basketItem.product.price}
+                      data-testid="basket-product-price"
+                      style={priceTextStyles}
+                    />
+                  </WithDesignerFeatures>
+                </WithDesignerFeatures>
               </div>
-              <div className="flex flex-col justify-center md:flex-row md:items-center lg:w-52">
-                <Select
-                  className="px-2"
-                  defaultValue={basketItem.quantity}
-                  onChange={(event) => {
-                    updateQuantity(
-                      basketItem.product.pk,
-                      Number(event.currentTarget.value)
-                    );
-                  }}
-                  options={[
-                    ...Array.from({ length: 10 }, (_, i) => i + 1),
-                    basketItem.quantity > 10 && basketItem.quantity
-                  ]
-                    .filter((i) => i)
-                    .map((i) => ({
-                      label: `${t('basket.card.qty')} ${i}`,
-                      value: `${i}`
-                    }))}
-                  data-testid="basket-product-quantity"
-                ></Select>
-              </div>
-              <div className="flex flex-col shrink-0 text-sm gap-2 items-start justify-center w-48 lg:flex-row lg:mr-6 lg:gap-6 sm:items-center lg:justify-start">
-                {parseFloat(basketItem.product.retail_price) >
-                  parseFloat(basketItem.product.price) && (
-                  <Price
-                    className="line-through"
-                    value={basketItem.product.retail_price}
+              <WithDesignerFeatures
+                block={getBlockInstance(BASKET_ITEM_BLOCKS.REMOVE)}
+                placeholderId={BASKET_PLACEHOLDER_ID}
+                sectionId={BASKET_ITEMS_SECTION_ID}
+                isDesigner={isDesigner}
+                isSelected={isBlockSelected(BASKET_ITEM_BLOCKS.REMOVE)}
+                className="self-center"
+                style={removeStyles}
+              >
+                {hasCustomRemoveSvgIcon ? (
+                  <div
+                    className="cursor-pointer"
+                    style={{ width: 16, height: 16, ...removeStyles }}
+                    dangerouslySetInnerHTML={{ __html: removeIconValue }}
+                    onClick={() => setRemoveBasketModalOpen(true)}
+                    data-testid="basket-product-remove"
+                  />
+                ) : (
+                  <Icon
+                    name={removeIconName}
+                    size={16}
+                    className="cursor-pointer hover:fill-secondary-500"
+                    style={removeStyles}
+                    onClick={() => setRemoveBasketModalOpen(true)}
+                    data-testid="basket-product-remove"
                   />
                 )}
-                <Price
-                  className={clsx(
-                    parseFloat(basketItem.product.retail_price) >
-                      parseFloat(basketItem.product.price)
-                      ? 'text-secondary-500'
-                      : 'text-primary'
-                  )}
-                  value={basketItem.product.price}
-                  data-testid="basket-product-price"
-                />
-              </div>
+              </WithDesignerFeatures>
             </div>
-            <Icon
-              name="close"
-              size={16}
-              className="self-center cursor-pointer hover:fill-secondary-500" // TODO: Add hover color. Fill not working
-              onClick={() => setRemoveBasketModalOpen(true)}
-              data-testid="basket-product-remove"
-            />
-          </div>
 
-          <PluginModule
-            component={Component.BasketGiftPack}
-            props={{ basketItem }}
-          />
-        </div>
+            <WithDesignerFeatures
+              block={getBlockInstance(BASKET_ITEM_BLOCKS.GIFT_PACK)}
+              placeholderId={BASKET_PLACEHOLDER_ID}
+              sectionId={BASKET_ITEMS_SECTION_ID}
+              isDesigner={isDesigner}
+              isSelected={isBlockSelected(BASKET_ITEM_BLOCKS.GIFT_PACK)}
+              className="mt-3"
+              style={giftPackStyles}
+            >
+              <PluginModule
+                component={Component.BasketGiftPack}
+                props={{ basketItem }}
+              />
+            </WithDesignerFeatures>
+          </div>
+        </WithDesignerFeatures>
       </li>
       <Modal
         portalId="remove-basket-item"
         title={t('basket.card.modal.title')}
-        className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
+        className="w-full md:w-[28rem] max-h-[90vh] overflow-y-auto"
         open={isRemoveBasketModalOpen}
         setOpen={setRemoveBasketModalOpen}
       >