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

package/app-template/src/views/header/mini-basket.tsx

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import {
   basketApi,
   useGetBasketQuery,
+  useGetMiniBasketQuery,
   useUpdateQuantityMutation
 } from '@akinon/next/data/client/basket';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
@@ -18,15 +19,44 @@ import {
 } from '@akinon/next/hooks';
 import { Image } from '@akinon/next/components/image';
 import { pushRemoveFromCart } from '@theme/utils/gtm';
+import {
+  useHeaderMiniBasket,
+  HEADER_MINI_BASKET_PLACEHOLDER_ID,
+  HEADER_MINI_BASKET_SECTION_ID
+} from './header-mini-basket-context';
 
 interface MiniBasketItemProps {
   basketItem: BasketItem;
   highlightedItem: number;
   miniBasketListRef: MutableRefObject<HTMLUListElement>;
+  isDesigner?: boolean;
+  selectedBlockId?: string;
+  onBlockClick?: (blockId: string, e?: React.MouseEvent) => void;
+  itemStyles?: React.CSSProperties;
+  imageStyles?: React.CSSProperties;
+  nameStyles?: React.CSSProperties;
+  priceStyles?: React.CSSProperties;
+  removeButtonStyles?: React.CSSProperties;
+  removeButtonContent?: string;
+  attributeStyles?: React.CSSProperties;
 }
 
 function MiniBasketItem(props: MiniBasketItemProps) {
-  const { basketItem, highlightedItem, miniBasketListRef } = props;
+  const {
+    basketItem,
+    highlightedItem,
+    miniBasketListRef,
+    isDesigner = false,
+    selectedBlockId = '',
+    onBlockClick,
+    itemStyles,
+    imageStyles,
+    nameStyles,
+    priceStyles,
+    removeButtonStyles,
+    removeButtonContent,
+    attributeStyles
+  } = props;
   const dispatch = useAppDispatch();
   const [updateQuantityMutation] = useUpdateQuantityMutation();
   const commonProductAttributes = useCommonProductAttributes({
@@ -70,24 +100,63 @@ function MiniBasketItem(props: MiniBasketItemProps) {
       });
   };
 
+  const imageWidth = imageStyles?.width
+    ? parseInt(String(imageStyles.width))
+    : isHighlighted
+    ? 96
+    : 48;
+  const imageHeight = imageStyles?.height
+    ? parseInt(String(imageStyles.height))
+    : isHighlighted
+    ? 160
+    : 80;
+
   return (
     <li
-      style={{ order: isHighlighted ? '-1' : '0' }}
-      className={clsx('flex gap-3 py-4 border-b border-gray-500')}
+      style={{
+        order: isHighlighted ? '-1' : '0',
+        ...itemStyles
+      }}
+      className={clsx(
+        'flex gap-3 py-4 border-b border-gray-500 relative',
+        isDesigner &&
+          selectedBlockId === 'mini-basket-item' &&
+          'ring-2 ring-blue-500 ring-inset',
+        isDesigner &&
+          'cursor-pointer hover:ring-2 hover:ring-blue-300 hover:ring-inset'
+      )}
+      onClick={(e) => isDesigner && onBlockClick?.('mini-basket-item', e)}
     >
       <Link
         href={basketItem.product.absolute_url}
         className={clsx(
-          'block shrink-0 transition-all duration-300',
-          isHighlighted ? 'w-24 h-40' : 'w-12 h-20'
+          'block shrink-0 transition-all duration-300 relative',
+          imageWidth ? `w-[${imageWidth}px] ` : isHighlighted ? 'w-24' : 'w-12',
+          imageHeight
+            ? `h-[${imageHeight}px]`
+            : isHighlighted
+            ? 'h-40'
+            : 'h-20',
+          isDesigner &&
+            selectedBlockId === 'mini-basket-item-image' &&
+            'ring-2 ring-blue-500 ring-inset',
+          isDesigner &&
+            'cursor-pointer hover:ring-2 hover:ring-blue-300 hover:ring-inset'
         )}
+        onClick={(e) => {
+          if (isDesigner) {
+            e.preventDefault();
+            onBlockClick?.('mini-basket-item-image', e);
+          }
+        }}
       >
         <Image
           src={basketItem.product.productimage_set?.[0]?.image ?? ''}
           alt={basketItem.product.name}
-          width={isHighlighted ? 96 : 48}
-          height={isHighlighted ? 160 : 80}
+          width={imageWidth}
+          height={imageHeight}
           className="transition-all duration-300"
+          style={imageStyles}
         />
       </Link>
       <div className="flex flex-col flex-1">
@@ -106,8 +175,22 @@ function MiniBasketItem(props: MiniBasketItemProps) {
         </div>
         <Link
           href={basketItem.product.absolute_url}
-          className="block"
+          className={clsx(
+            'block relative',
+            isDesigner &&
+              selectedBlockId === 'mini-basket-item-name' &&
+              'ring-2 ring-blue-500 ring-inset',
+            isDesigner &&
+              'cursor-pointer hover:ring-2 hover:ring-blue-300 hover:ring-inset'
+          )}
           data-testid="mini-basket-item-name"
+          style={nameStyles}
+          onClick={(e) => {
+            if (isDesigner) {
+              e.preventDefault();
+              onBlockClick?.('mini-basket-item-name', e);
+            }
+          }}
         >
           {basketItem.product.name}
           {/* TODO: Get correct variants */}
@@ -115,7 +198,19 @@ function MiniBasketItem(props: MiniBasketItemProps) {
         {commonProductAttributes.map((attribute, index) => (
           <span
             key={index}
+            className={clsx(
+              'relative',
+              isDesigner &&
+                selectedBlockId === 'mini-basket-item-attribute' &&
+                'ring-2 ring-blue-500 ring-inset',
+              isDesigner &&
+                'cursor-pointer hover:ring-2 hover:ring-blue-300 hover:ring-inset'
+            )}
             data-testid={`mini-basket-item-${attribute.name.toLowerCase()}`}
+            style={attributeStyles}
+            onClick={(e) =>
+              isDesigner && onBlockClick?.('mini-basket-item-attribute', e)
+            }
           >
             {attribute.name}: {attribute.value}
           </span>
@@ -128,16 +223,43 @@ function MiniBasketItem(props: MiniBasketItemProps) {
               className="line-through"
             />
           )}
-          <Price value={basketItem.total_amount} />
+          <div
+            className={clsx(
+              'relative',
+              isDesigner &&
+                selectedBlockId === 'mini-basket-item-price' &&
+                'ring-2 ring-blue-500 ring-inset',
+              isDesigner &&
+                'cursor-pointer hover:ring-2 hover:ring-blue-300 hover:ring-inset'
+            )}
+            onClick={(e) =>
+              isDesigner && onBlockClick?.('mini-basket-item-price', e)
+            }
+          >
+            <Price value={basketItem.total_amount} style={priceStyles} />
+          </div>
           <Button
             appearance="ghost"
             className={clsx(
-              'p-0 h-auto text-xs font-semibold underline transition-all duration-300',
-              isHighlighted ? 'invisible' : 'visible'
+              'transition-all duration-300 relative',
+              isHighlighted ? 'invisible' : 'visible',
+              isDesigner &&
+                selectedBlockId === 'mini-basket-item-remove-button' &&
+                'ring-2 ring-blue-500 ring-inset',
+              isDesigner &&
+                'cursor-pointer hover:ring-2 hover:ring-blue-300 hover:ring-inset'
             )}
-            onClick={removeItem}
+            style={removeButtonStyles}
+            onClick={(e) => {
+              if (isDesigner) {
+                e.stopPropagation();
+                onBlockClick?.('mini-basket-item-remove-button', e);
+              } else {
+                removeItem();
+              }
+            }}
           >
-            {t('basket.mini_basket.remove')}
+            {removeButtonContent || t('basket.mini_basket.remove')}
           </Button>
         </footer>
       </div>
@@ -146,17 +268,502 @@ function MiniBasketItem(props: MiniBasketItemProps) {
 }
 
 export default function MiniBasket() {
+  const {
+    isDesigner,
+    isSectionSelected,
+    selectedBlockId,
+    getSectionStyles,
+    getSectionProperties,
+    getBlockData
+  } = useHeaderMiniBasket();
   const { open: miniBasketOpen } = useAppSelector(
     (state) => state.root.miniBasket
   );
   const dispatch = useAppDispatch();
-  const { data: basket, isLoading, isSuccess } = useGetBasketQuery();
-  const { t } = useLocalization();
+
+  const handleBlockClick = (blockId: string, e?: React.MouseEvent) => {
+    if (!isDesigner) return;
+    e?.stopPropagation();
+
+    if (typeof window !== 'undefined' && window.parent) {
+      window.parent.postMessage(
+        {
+          type: 'SELECT_BLOCK_FROM_PREVIEW',
+          data: {
+            placeholderId: HEADER_MINI_BASKET_PLACEHOLDER_ID,
+            sectionId: HEADER_MINI_BASKET_SECTION_ID,
+            blockId
+          }
+        },
+        '*'
+      );
+    }
+  };
+
+  const {
+    data: basket,
+    isLoading,
+    isSuccess
+  } = useGetBasketQuery(undefined, {
+    skip: !miniBasketOpen
+  });
+  const { data: miniBasket } = useGetMiniBasketQuery();
+  const { t, locale } = useLocalization();
   const { highlightedItem } = useAppSelector((state) => state.root.miniBasket);
   const [highlightedItemPk, setHighlightedItemPk] = useState(0);
   const [sortedBasket, setSortedBasket] = useState([]);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 1024);
+    };
+
+    checkMobile();
+
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  const sectionStyles = getSectionStyles();
+  const sectionProperties = getSectionProperties();
+
+  const positionProp = sectionProperties?.position;
+  const position =
+    typeof positionProp === 'object' && positionProp !== null
+      ? (positionProp as { desktop?: string }).desktop || 'right'
+      : (positionProp as string) || 'right';
+
+  const headerBlock = getBlockData('mini-basket-header');
+  const footerBlock = getBlockData('mini-basket-footer');
+  const titleBlock = getBlockData('mini-basket-title');
+  const itemCountBlock = getBlockData('mini-basket-item-count');
+  const closeIconBlock = getBlockData('mini-basket-close-icon');
+  const listBlock = getBlockData('mini-basket-list');
+  const itemBlock = getBlockData('mini-basket-item');
+  const itemImageBlock = getBlockData('mini-basket-item-image');
+  const itemNameBlock = getBlockData('mini-basket-item-name');
+  const itemPriceBlock = getBlockData('mini-basket-item-price');
+  const itemRemoveButtonBlock = getBlockData('mini-basket-item-remove-button');
+  const itemAttributeBlock = getBlockData('mini-basket-item-attribute');
+  const subtotalBlock = getBlockData('mini-basket-subtotal');
+  const viewBagButtonBlock = getBlockData('mini-basket-view-bag-button');
+  const continueShoppingButtonBlock = getBlockData(
+    'mini-basket-continue-shopping-button'
+  );
+
+  const getBlockContent = (block: any, fallback: string): string => {
+    if (!block) return fallback;
+
+    if (block.value) {
+      if (typeof block.value === 'string') {
+        return block.value;
+      }
+
+      if (typeof block.value === 'object' && block.value[locale]) {
+        return block.value[locale];
+      }
+
+      if (typeof block.value === 'object') {
+        return block.value.en || Object.values(block.value)[0] || fallback;
+      }
+    }
+
+    if (block.properties?.content) {
+      return block.properties.content;
+    }
+
+    return fallback;
+  };
+
+  const getResponsiveValue = (
+    value: any,
+    device: 'mobile' | 'desktop' = 'desktop'
+  ): string => {
+    if (typeof value === 'object' && value !== null) {
+      return String(value[device] || value.desktop || value.mobile || '');
+    }
+    return String(value || '');
+  };
+
+  const convertStylesToCSS = (
+    styles: Record<string, unknown> | undefined,
+    device: 'mobile' | 'desktop' = 'desktop'
+  ): React.CSSProperties => {
+    if (!styles) return {};
+
+    const cssStyles: React.CSSProperties = {};
+    Object.entries(styles).forEach(([key, value]) => {
+      const cssValue = getResponsiveValue(value, device);
+      const camelKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+      if (cssValue) {
+        (cssStyles as any)[camelKey] = cssValue;
+      }
+    });
+    return cssStyles;
+  };
+
+  const sectionCSSStylesMobile = convertStylesToCSS(sectionStyles, 'mobile');
+  const sectionCSSStylesDesktop = convertStylesToCSS(sectionStyles, 'desktop');
+  const headerCSSStylesMobile = convertStylesToCSS(
+    headerBlock?.styles,
+    'mobile'
+  );
+  const headerCSSStylesDesktop = convertStylesToCSS(
+    headerBlock?.styles,
+    'desktop'
+  );
+  const footerCSSStylesMobile = convertStylesToCSS(
+    footerBlock?.styles,
+    'mobile'
+  );
+  const footerCSSStylesDesktop = convertStylesToCSS(
+    footerBlock?.styles,
+    'desktop'
+  );
+  const titleCSSStylesMobile = convertStylesToCSS(titleBlock?.styles, 'mobile');
+  const titleCSSStylesDesktop = convertStylesToCSS(
+    titleBlock?.styles,
+    'desktop'
+  );
+  const itemCountCSSStylesMobile = convertStylesToCSS(
+    itemCountBlock?.styles,
+    'mobile'
+  );
+
+  const itemCountCSSStylesDesktop = convertStylesToCSS(
+    itemCountBlock?.styles,
+    'desktop'
+  );
+
+  const closeIconCSSStylesMobile = convertStylesToCSS(
+    closeIconBlock?.styles,
+    'mobile'
+  );
+  const closeIconCSSStylesDesktop = convertStylesToCSS(
+    closeIconBlock?.styles,
+    'desktop'
+  );
+
+  const listCSSStylesMobile = convertStylesToCSS(listBlock?.styles, 'mobile');
+  const listCSSStylesDesktop = convertStylesToCSS(listBlock?.styles, 'desktop');
+  const itemCSSStylesMobile = convertStylesToCSS(itemBlock?.styles, 'mobile');
+  const itemCSSStylesDesktop = convertStylesToCSS(itemBlock?.styles, 'desktop');
+  const itemImageCSSStylesMobile = convertStylesToCSS(
+    itemImageBlock?.styles,
+    'mobile'
+  );
+  const itemImageCSSStylesDesktop = convertStylesToCSS(
+    itemImageBlock?.styles,
+    'desktop'
+  );
+  const itemNameCSSStylesMobile = convertStylesToCSS(
+    itemNameBlock?.styles,
+    'mobile'
+  );
+  const itemNameCSSStylesDesktop = convertStylesToCSS(
+    itemNameBlock?.styles,
+    'desktop'
+  );
+  const itemPriceCSSStylesMobile = convertStylesToCSS(
+    itemPriceBlock?.styles,
+    'mobile'
+  );
+  const itemPriceCSSStylesDesktop = convertStylesToCSS(
+    itemPriceBlock?.styles,
+    'desktop'
+  );
+  const itemRemoveButtonCSSStylesMobile = convertStylesToCSS(
+    itemRemoveButtonBlock?.styles,
+    'mobile'
+  );
+  const itemRemoveButtonCSSStylesDesktop = convertStylesToCSS(
+    itemRemoveButtonBlock?.styles,
+    'desktop'
+  );
+  const itemAttributeCSSStylesMobile = convertStylesToCSS(
+    itemAttributeBlock?.styles,
+    'mobile'
+  );
+  const itemAttributeCSSStylesDesktop = convertStylesToCSS(
+    itemAttributeBlock?.styles,
+    'desktop'
+  );
+  const subtotalCSSStylesMobile = convertStylesToCSS(
+    subtotalBlock?.styles,
+    'mobile'
+  );
+  const subtotalCSSStylesDesktop = convertStylesToCSS(
+    subtotalBlock?.styles,
+    'desktop'
+  );
+  const viewBagButtonCSSStylesMobile = convertStylesToCSS(
+    viewBagButtonBlock?.styles,
+    'mobile'
+  );
+  const viewBagButtonCSSStylesDesktop = convertStylesToCSS(
+    viewBagButtonBlock?.styles,
+    'desktop'
+  );
+  const continueShoppingButtonCSSStylesMobile = convertStylesToCSS(
+    continueShoppingButtonBlock?.styles,
+    'mobile'
+  );
+  const continueShoppingButtonCSSStylesDesktop = convertStylesToCSS(
+    continueShoppingButtonBlock?.styles,
+    'desktop'
+  );
+
+  // Default styles for mini basket section (mobile)
+  const defaultSectionStylesMobile: React.CSSProperties = {
+    width: '100vw',
+    height: '100vh',
+    backgroundColor: '#ffffff',
+    borderLeftWidth: '0',
+    borderTopWidth: '0',
+    borderRightWidth: '0',
+    borderBottomWidth: '0',
+    borderStyle: 'solid',
+    padding: '20px',
+    zIndex: 50
+  };
+
+  // Default styles for mini basket section (desktop) based on position
+  const getPositionStyles = (): React.CSSProperties => {
+    switch (position) {
+      case 'left':
+        return {
+          position: 'absolute',
+          top: '100%',
+          left: '0',
+          right: 'auto'
+        };
+      case 'bottom':
+        return {
+          position: 'fixed',
+          bottom: '0',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          top: 'auto',
+          right: 'auto',
+          width: '100%',
+          maxWidth: '600px'
+        };
+      case 'right':
+      default:
+        return {
+          position: 'absolute',
+          top: '100%',
+          right: '0',
+          left: 'auto'
+        };
+    }
+  };
+
+  const defaultSectionStylesDesktop: React.CSSProperties = {
+    width: '320px',
+    height: 'max-content',
+    maxHeight: '600px',
+    backgroundColor: '#ffffff',
+    borderLeftWidth: '1px',
+    borderTopWidth: '1px',
+    borderRightWidth: '2px',
+    borderBottomWidth: '2px',
+    borderColor: '#6b7280',
+    borderStyle: 'solid',
+    padding: '20px',
+    zIndex: 50,
+    ...getPositionStyles()
+  };
+
+  // For mobile: merge mobile defaults with mobile theme styles
+  // But don't allow theme editor to override height - we need 100vh for full screen
+  const { height: _mobileHeight, ...sectionCSSStylesMobileWithoutHeight } =
+    sectionCSSStylesMobile;
+  const finalSectionStylesMobile = {
+    ...defaultSectionStylesMobile,
+    ...sectionCSSStylesMobileWithoutHeight
+  };
+  const finalHeaderStylesMobile = { ...headerCSSStylesMobile };
+  const finalFooterStylesMobile = { ...footerCSSStylesMobile };
+  const finalTitleStylesMobile = { ...titleCSSStylesMobile };
+  const finalItemCountStylesMobile = { ...itemCountCSSStylesMobile };
+  const finalCloseIconStylesMobile = { ...closeIconCSSStylesMobile };
+  const finalListStylesMobile = { ...listCSSStylesMobile };
+  const finalItemStylesMobile = { ...itemCSSStylesMobile };
+  const finalItemImageStylesMobile = { ...itemImageCSSStylesMobile };
+  const finalItemNameStylesMobile = { ...itemNameCSSStylesMobile };
+  const finalItemPriceStylesMobile = { ...itemPriceCSSStylesMobile };
+  const finalItemRemoveButtonStylesMobile = {
+    ...itemRemoveButtonCSSStylesMobile
+  };
+  const finalItemAttributeStylesMobile = { ...itemAttributeCSSStylesMobile };
+  const finalSubtotalStylesMobile = { ...subtotalCSSStylesMobile };
+  const finalViewBagButtonStylesMobile = {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'var(--primary)',
+    color: 'var(--primary-foreground)',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'var(--primary)',
+    height: '32px',
+    fontWeight: '600',
+    transition: 'all',
+    ...viewBagButtonCSSStylesMobile
+  };
+  const finalContinueShoppingButtonStylesMobile = {
+    height: 'auto',
+    padding: '0',
+    fontWeight: '600',
+    textDecoration: 'underline',
+    alignSelf: 'center',
+    ...continueShoppingButtonCSSStylesMobile
+  };
+
+  // For desktop: merge desktop defaults with desktop theme styles
+  // But don't allow theme editor to override height - we need max-content for dropdown
+  const { height: _desktopHeight, ...sectionCSSStylesDesktopWithoutHeight } =
+    sectionCSSStylesDesktop;
+  const finalSectionStylesDesktop = {
+    ...defaultSectionStylesDesktop,
+    ...sectionCSSStylesDesktopWithoutHeight
+  };
+  const finalHeaderStylesDesktop = { ...headerCSSStylesDesktop };
+  const finalFooterStylesDesktop = { ...footerCSSStylesDesktop };
+  const finalTitleStylesDesktop = { ...titleCSSStylesDesktop };
+  const finalItemCountStylesDesktop = { ...itemCountCSSStylesDesktop };
+  const finalCloseIconStylesDesktop = { ...closeIconCSSStylesDesktop };
+  const finalListStylesDesktop = { ...listCSSStylesDesktop };
+  const finalItemStylesDesktop = { ...itemCSSStylesDesktop };
+  const finalItemImageStylesDesktop = { ...itemImageCSSStylesDesktop };
+  const finalItemNameStylesDesktop = { ...itemNameCSSStylesDesktop };
+  const finalItemPriceStylesDesktop = { ...itemPriceCSSStylesDesktop };
+  const finalItemRemoveButtonStylesDesktop = {
+    ...itemRemoveButtonCSSStylesDesktop
+  };
+  const finalItemAttributeStylesDesktop = { ...itemAttributeCSSStylesDesktop };
+  const finalSubtotalStylesDesktop = { ...subtotalCSSStylesDesktop };
+  const finalViewBagButtonStylesDesktop = {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'var(--primary)',
+    color: 'var(--primary-foreground)',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'var(--primary)',
+    height: '32px',
+    fontWeight: '600',
+    transition: 'all',
+    ...viewBagButtonCSSStylesDesktop
+  };
+  const finalContinueShoppingButtonStylesDesktop = {
+    height: 'auto',
+    padding: '0',
+    fontWeight: '600',
+    textDecoration: 'underline',
+    alignSelf: 'center',
+    ...continueShoppingButtonCSSStylesDesktop
+  };
+
+  // Use appropriate styles based on viewport
+  const finalSectionStyles = isMobile
+    ? finalSectionStylesMobile
+    : finalSectionStylesDesktop;
+  const finalHeaderStyles = isMobile
+    ? finalHeaderStylesMobile
+    : finalHeaderStylesDesktop;
+  const finalFooterStyles = isMobile
+    ? finalFooterStylesMobile
+    : finalFooterStylesDesktop;
+  const finalTitleStyles = isMobile
+    ? finalTitleStylesMobile
+    : finalTitleStylesDesktop;
+  const finalItemCountStyles = isMobile
+    ? finalItemCountStylesMobile
+    : finalItemCountStylesDesktop;
+  const finalCloseIconStyles = isMobile
+    ? finalCloseIconStylesMobile
+    : finalCloseIconStylesDesktop;
+  const finalListStyles = isMobile
+    ? finalListStylesMobile
+    : finalListStylesDesktop;
+  const finalItemStyles = isMobile
+    ? finalItemStylesMobile
+    : finalItemStylesDesktop;
+  const finalItemImageStyles = isMobile
+    ? finalItemImageStylesMobile
+    : finalItemImageStylesDesktop;
+  const finalItemNameStyles = isMobile
+    ? finalItemNameStylesMobile
+    : finalItemNameStylesDesktop;
+  const finalItemPriceStyles = isMobile
+    ? finalItemPriceStylesMobile
+    : finalItemPriceStylesDesktop;
+  const finalItemRemoveButtonStyles = isMobile
+    ? finalItemRemoveButtonStylesMobile
+    : finalItemRemoveButtonStylesDesktop;
+  const finalItemAttributeStyles = isMobile
+    ? finalItemAttributeStylesMobile
+    : finalItemAttributeStylesDesktop;
+  const finalSubtotalStyles = isMobile
+    ? finalSubtotalStylesMobile
+    : finalSubtotalStylesDesktop;
+  const finalViewBagButtonStyles = isMobile
+    ? finalViewBagButtonStylesMobile
+    : finalViewBagButtonStylesDesktop;
+  const finalContinueShoppingButtonStyles = isMobile
+    ? finalContinueShoppingButtonStylesMobile
+    : finalContinueShoppingButtonStylesDesktop;
+
+  const totalQuantity = useMemo(
+    () => miniBasket?.total_quantity ?? 0,
+    [miniBasket]
+  );
+
+  const titleContent = getBlockContent(
+    titleBlock,
+    t('basket.mini_basket.my_bag')
+  );
+  const itemCountContent = getBlockContent(
+    itemCountBlock,
+    `${totalQuantity} ${t('basket.mini_basket.items')}`
+  );
+  const subtotalContent = getBlockContent(
+    subtotalBlock,
+    t('basket.mini_basket.subtotal')
+  );
+  const viewBagButtonContent = getBlockContent(
+    viewBagButtonBlock,
+    t('basket.mini_basket.view_bag')
+  );
+  const continueShoppingButtonContent = getBlockContent(
+    continueShoppingButtonBlock,
+    t('basket.mini_basket.continue_shopping')
+  );
+  const itemRemoveButtonContent = getBlockContent(
+    itemRemoveButtonBlock,
+    t('basket.mini_basket.remove')
+  );
+
+  // Get custom close icon from block properties (supports SVG)
+  const closeIconProp = closeIconBlock?.properties?.icon;
+  const closeIconValue =
+    typeof closeIconProp === 'object' && closeIconProp !== null
+      ? (closeIconProp as { desktop?: string }).desktop
+      : closeIconProp;
+  const hasCustomSvgIcon =
+    closeIconValue &&
+    typeof closeIconValue === 'string' &&
+    closeIconValue.includes('<svg');
+  // Use custom icon name or default to 'close'
+  const closeIconName: string =
+    hasCustomSvgIcon || !closeIconValue ? 'close' : String(closeIconValue);
 
-  const totalQuantity = useMemo(() => basket?.total_quantity ?? 0, [basket]);
   const miniBasketList = useRef(null);
 
   useEffect(() => {
@@ -194,38 +801,151 @@ export default function MiniBasket() {
             : 'opacity-0 invisible',
           'fixed top-0 left-0 z-50 w-screen h-screen bg-black bg-opacity-80 transition-all duration-300'
         )}
-        onClick={() => {
-          dispatch(closeMiniBasket());
-        }}
+        onClick={() => dispatch(closeMiniBasket())}
       />
       <div
         className={clsx(
+          'flex-col transition-all duration-300',
           miniBasketOpen
-            ? 'flex flex-col opacity-100 visible lg:translate-y-[calc(100%)]'
-            : 'opacity-0 invisible translate-x-full lg:translate-x-0 lg:translate-y-[calc(100%+16px)]',
-          'fixed lg:absolute bottom-0 lg:-bottom-1 right-0 w-80 h-screen lg:h-auto bg-white lg:border-l lg:border-t lg:border-r-2 lg:border-b-2 lg:border-gray-500 p-5 z-50 transition-all duration-300'
+            ? 'flex opacity-100 visible'
+            : 'hidden opacity-0 invisible',
+          'fixed lg:absolute',
+          'bottom-0 lg:top-full right-0',
+          'w-screen h-screen lg:w-auto',
+          isDesigner &&
+            isSectionSelected &&
+            'ring-4 ring-blue-500 ring-offset-2',
+          isDesigner &&
+            'cursor-pointer hover:ring-4 hover:ring-blue-300 hover:ring-offset-2'
         )}
+        style={finalSectionStyles}
+        onClick={(e) => {
+          if (e.target === e.currentTarget && isDesigner) {
+            if (typeof window !== 'undefined' && window.parent) {
+              window.parent.postMessage(
+                {
+                  type: 'SELECT_BLOCK_FROM_PREVIEW',
+                  data: {
+                    placeholderId: HEADER_MINI_BASKET_PLACEHOLDER_ID,
+                    sectionId: HEADER_MINI_BASKET_SECTION_ID,
+                    blockId: ''
+                  }
+                },
+                '*'
+              );
+            }
+          }
+        }}
       >
-        <header className="flex items-center gap-2 pb-3 border-b">
-          <h3 className="text-xl font-bold">
-            {t('basket.mini_basket.my_bag')}
+        <header
+          className={clsx(
+            'flex items-center gap-2 pb-3 border-b relative',
+            isDesigner &&
+              selectedBlockId === 'mini-basket-header' &&
+              'ring-2 ring-blue-500 ring-inset',
+            isDesigner &&
+              'cursor-pointer hover:ring-2 hover:ring-blue-300 hover:ring-inset'
+          )}
+          style={finalHeaderStyles}
+          onClick={(e) =>
+            isDesigner && handleBlockClick('mini-basket-header', e)
+          }
+        >
+          <h3
+            className={clsx(
+              'relative',
+              isDesigner &&
+                selectedBlockId === 'mini-basket-title' &&
+                'ring-2 ring-blue-500 ring-inset',
+              isDesigner &&
+                'cursor-pointer hover:ring-2 hover:ring-blue-300 hover:ring-inset'
+            )}
+            style={finalTitleStyles}
+            onClick={(e) =>
+              isDesigner && handleBlockClick('mini-basket-title', e)
+            }
+          >
+            {titleContent}
           </h3>
-          <span>
-            {totalQuantity}
-            {t('basket.mini_basket.items')}
+          <span
+            className={clsx(
+              'relative',
+              isDesigner &&
+                selectedBlockId === 'mini-basket-item-count' &&
+                'ring-2 ring-blue-500 ring-inset',
+              isDesigner &&
+                'cursor-pointer hover:ring-2 hover:ring-blue-300 hover:ring-inset'
+            )}
+            style={finalItemCountStyles}
+            onClick={(e) =>
+              isDesigner && handleBlockClick('mini-basket-item-count', e)
+            }
+          >
+            {totalQuantity} {t('basket.mini_basket.items')}
           </span>
-          <Icon
-            name="close"
-            size={16}
-            className="ml-auto fill-primary hover:cursor-pointer"
-            onClick={() => dispatch(closeMiniBasket())}
-          />
+          {hasCustomSvgIcon ? (
+            <div
+              className={clsx(
+                'ml-auto hover:cursor-pointer flex items-center justify-center relative',
+                isDesigner &&
+                  selectedBlockId === 'mini-basket-close-icon' &&
+                  'ring-2 ring-blue-500 ring-inset'
+              )}
+              style={{
+                width: 16,
+                height: 16,
+                ...finalCloseIconStyles
+              }}
+              dangerouslySetInnerHTML={{ __html: closeIconValue }}
+              onClick={(e) => {
+                e.stopPropagation();
+                if (isDesigner) {
+                  handleBlockClick('mini-basket-close-icon', e);
+                } else {
+                  dispatch(closeMiniBasket());
+                }
+              }}
+            />
+          ) : (
+            <Icon
+              name={closeIconName}
+              size={16}
+              className={clsx(
+                'ml-auto hover:cursor-pointer relative',
+                isDesigner &&
+                  selectedBlockId === 'mini-basket-close-icon' &&
+                  'ring-2 ring-blue-500 ring-inset'
+              )}
+              style={finalCloseIconStyles}
+              onClick={(e) => {
+                e.stopPropagation();
+                if (isDesigner) {
+                  handleBlockClick('mini-basket-close-icon', e);
+                } else {
+                  dispatch(closeMiniBasket());
+                }
+              }}
+            />
+          )}
         </header>
-        {isLoading && <LoaderSpinner />} {/* TODO: Fix spinner position */}
+        {isLoading && <LoaderSpinner />}
         {isSuccess && (
           <ul
             ref={miniBasketList}
-            className="overflow-y-auto lg:max-h-64 flex flex-col"
+            className={clsx(
+              'overflow-y-auto lg:max-h-64 flex flex-col relative',
+              isDesigner &&
+                selectedBlockId === 'mini-basket-list' &&
+                'ring-2 ring-blue-500 ring-inset',
+              isDesigner &&
+                'cursor-pointer hover:ring-2 hover:ring-blue-300 hover:ring-inset'
+            )}
+            style={finalListStyles}
+            onClick={(e) => {
+              if (e.target === e.currentTarget && isDesigner) {
+                handleBlockClick('mini-basket-list', e);
+              }
+            }}
           >
             {sortedBasket.map((basketItem) => (
               <MiniBasketItem
@@ -233,32 +953,98 @@ export default function MiniBasket() {
                 basketItem={basketItem}
                 highlightedItem={highlightedItem}
                 miniBasketListRef={miniBasketList}
+                isDesigner={isDesigner}
+                selectedBlockId={selectedBlockId}
+                onBlockClick={handleBlockClick}
+                itemStyles={finalItemStyles}
+                imageStyles={finalItemImageStyles}
+                nameStyles={finalItemNameStyles}
+                priceStyles={finalItemPriceStyles}
+                removeButtonStyles={finalItemRemoveButtonStyles}
+                removeButtonContent={itemRemoveButtonContent}
+                attributeStyles={finalItemAttributeStyles}
               />
             ))}
           </ul>
         )}
-        <footer className="flex flex-col gap-3 mt-auto lg:mt-3 lg:flex-1">
-          <div className="flex self-center gap-1 text-xs font-semibold">
-            <span>{t('basket.mini_basket.subtotal')}</span>
+        <footer
+          className={clsx(
+            'flex flex-col gap-3 mt-auto lg:mt-3 lg:flex-1 relative',
+            isDesigner &&
+              selectedBlockId === 'mini-basket-footer' &&
+              'ring-2 ring-blue-500 ring-inset',
+            isDesigner &&
+              'cursor-pointer hover:ring-2 hover:ring-blue-300 hover:ring-inset'
+          )}
+          style={finalFooterStyles}
+          onClick={(e) => {
+            if (e.target === e.currentTarget && isDesigner) {
+              handleBlockClick('mini-basket-footer', e);
+            }
+          }}
+        >
+          <div
+            className={clsx(
+              'flex self-center gap-1 text-xs font-semibold relative',
+              isDesigner &&
+                selectedBlockId === 'mini-basket-subtotal' &&
+                'ring-2 ring-blue-500 ring-inset',
+              isDesigner &&
+                'cursor-pointer hover:ring-2 hover:ring-blue-300 hover:ring-inset'
+            )}
+            style={finalSubtotalStyles}
+            onClick={(e) =>
+              isDesigner && handleBlockClick('mini-basket-subtotal', e)
+            }
+          >
+            <span>{subtotalContent}</span>
             <Price value={basket?.total_amount} />
           </div>
-          {/* TODO: Fix link styles */}
           <Link
-            onClick={() => {
-              dispatch(closeMiniBasket());
+            onClick={(e) => {
+              if (isDesigner) {
+                e.preventDefault();
+                e.stopPropagation();
+                handleBlockClick('mini-basket-view-bag-button', e);
+              } else {
+                dispatch(closeMiniBasket());
+              }
             }}
             href={ROUTES.BASKET}
             data-testid="mini-basket-view-bag"
-            className="w-full flex items-center justify-center bg-primary text-primary-foreground border border-primary h-8 font-semibold transition-all hover:bg-primary-foreground hover:text-primary"
+            className={clsx(
+              'w-full flex items-center justify-center transition-all relative',
+              isDesigner &&
+                selectedBlockId === 'mini-basket-view-bag-button' &&
+                'ring-2 ring-blue-500 ring-inset',
+              isDesigner &&
+                'cursor-pointer hover:ring-2 hover:ring-blue-300 hover:ring-inset'
+            )}
+            style={finalViewBagButtonStyles}
           >
-            {t('basket.mini_basket.view_bag')}
+            {viewBagButtonContent}
           </Link>
           <Link
             href="/"
-            className="h-auto p-0 font-semibold underline self-center"
+            className={clsx(
+              'self-center relative',
+              isDesigner &&
+                selectedBlockId === 'mini-basket-continue-shopping-button' &&
+                'ring-2 ring-blue-500 ring-inset',
+              isDesigner &&
+                'cursor-pointer hover:ring-2 hover:ring-blue-300 hover:ring-inset'
+            )}
             data-testid="mini-basket-continue-shopping"
+            style={finalContinueShoppingButtonStyles}
+            onClick={(e) => {
+              if (isDesigner) {
+                e.preventDefault();
+                e.stopPropagation();
+                handleBlockClick('mini-basket-continue-shopping-button', e);
+              }
+            }}
           >
-            {t('basket.mini_basket.continue_shopping')}
+            {continueShoppingButtonContent}
           </Link>
         </footer>
       </div>