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

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

@@ -4,15 +4,8 @@ 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,
-  LoaderSpinner,
-  Modal,
-  Link
-} from '@theme/components';
-import { ComponentProps, useState } from 'react';
+import { Price, Button, Icon, Modal, Select, Link } from '@theme/components';
+import { useState } from 'react';
 import { useAddFavoriteMutation } from '@akinon/next/data/client/wishlist';
 import {
   useCommonProductAttributes,
@@ -20,89 +13,14 @@ 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;
@@ -111,228 +29,15 @@ 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 = {},
-    namespace?: string
+    attributes: object = {}
   ) => {
     const requestParams: {
       product: number;
@@ -349,11 +54,9 @@ export const BasketItem = (props: Props) => {
       requestParams.namespace = namespace;
     }
 
-    setUpdateQuantityLoading(true);
-
     await updateQuantityMutation(requestParams)
       .unwrap()
-      .then((data) => {
+      .then((data) =>
         dispatch(
           basketApi.util.updateQueryData(
             'getBasket',
@@ -362,34 +65,15 @@ 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,
-        namespace
-      );
+      await updateQuantity(basketItem.product.pk, 0, basketItem.attributes);
       pushRemoveFromCart(basketItem?.product);
 
       if (productPk) {
@@ -403,385 +87,117 @@ 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} 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}
-                      >
-                        <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}
+      <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
                 >
-                  <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}
+                  <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()}`}
                       >
-                        <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>
+                        {attribute.value}
+                      </span>
+                    </span>
+                  ))}
+                </div>
               </div>
-              <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"
+              <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>
+                <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>
             </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>
+            <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>
-        </WithDesignerFeatures>
+
+          <PluginModule
+            component={Component.BasketGiftPack}
+            props={{ basketItem }}
+          />
+        </div>
       </li>
       <Modal
         portalId="remove-basket-item"
         title={t('basket.card.modal.title')}
-        className="w-full md:w-[28rem] max-h-[90vh] overflow-y-auto"
+        className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
         open={isRemoveBasketModalOpen}
         setOpen={setRemoveBasketModalOpen}
       >