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

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

@@ -19,44 +19,15 @@ 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,
-    isDesigner = false,
-    selectedBlockId = '',
-    onBlockClick,
-    itemStyles,
-    imageStyles,
-    nameStyles,
-    priceStyles,
-    removeButtonStyles,
-    removeButtonContent,
-    attributeStyles
-  } = props;
+  const { basketItem, highlightedItem, miniBasketListRef } = props;
   const dispatch = useAppDispatch();
   const [updateQuantityMutation] = useUpdateQuantityMutation();
   const commonProductAttributes = useCommonProductAttributes({
@@ -100,63 +71,24 @@ 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',
-        ...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)}
+      style={{ order: isHighlighted ? '-1' : '0' }}
+      className={clsx('flex gap-3 py-4 border-b border-gray-500')}
     >
       <Link
         href={basketItem.product.absolute_url}
         className={clsx(
-          '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'
+          'block shrink-0 transition-all duration-300',
+          isHighlighted ? 'w-24 h-40' : 'w-12 h-20'
         )}
-        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={imageWidth}
-          height={imageHeight}
+          width={isHighlighted ? 96 : 48}
+          height={isHighlighted ? 160 : 80}
           className="transition-all duration-300"
-          style={imageStyles}
         />
       </Link>
       <div className="flex flex-col flex-1">
@@ -175,22 +107,8 @@ function MiniBasketItem(props: MiniBasketItemProps) {
         </div>
         <Link
           href={basketItem.product.absolute_url}
-          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'
-          )}
+          className="block"
           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 */}
@@ -198,19 +116,7 @@ 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>
@@ -223,43 +129,16 @@ function MiniBasketItem(props: MiniBasketItemProps) {
               className="line-through"
             />
           )}
-          <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>
+          <Price value={basketItem.total_amount} />
           <Button
             appearance="ghost"
             className={clsx(
-              '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'
+              'p-0 h-auto text-xs font-semibold underline transition-all duration-300',
+              isHighlighted ? 'invisible' : 'visible'
             )}
-            style={removeButtonStyles}
-            onClick={(e) => {
-              if (isDesigner) {
-                e.stopPropagation();
-                onBlockClick?.('mini-basket-item-remove-button', e);
-              } else {
-                removeItem();
-              }
-            }}
+            onClick={removeItem}
           >
-            {removeButtonContent || t('basket.mini_basket.remove')}
+            {t('basket.mini_basket.remove')}
           </Button>
         </footer>
       </div>
@@ -268,38 +147,10 @@ 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 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,
@@ -308,463 +159,16 @@ export default function MiniBasket() {
     skip: !miniBasketOpen
   });
   const { data: miniBasket } = useGetMiniBasketQuery();
-  const { t, locale } = useLocalization();
+  const { t } = 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 miniBasketList = useRef(null);
+  const miniBasketList = useRef<HTMLUListElement | null>(null);
 
   useEffect(() => {
     if (highlightedItem > 0) {
@@ -801,151 +205,38 @@ 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 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'
+            ? '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'
         )}
-        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={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}
+        <header className="flex items-center gap-2 pb-3 border-b">
+          <h3 className="text-xl font-bold">
+            {t('basket.mini_basket.my_bag')}
           </h3>
-          <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>
+            {totalQuantity}
+            {t('basket.mini_basket.items')}
           </span>
-          {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());
-                }
-              }}
-            />
-          )}
+          <Icon
+            name="close"
+            size={16}
+            className="ml-auto fill-primary hover:cursor-pointer"
+            onClick={() => dispatch(closeMiniBasket())}
+          />
         </header>
-        {isLoading && <LoaderSpinner />}
+        {isLoading && <LoaderSpinner />} {/* TODO: Fix spinner position */}
         {isSuccess && (
           <ul
             ref={miniBasketList}
-            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);
-              }
-            }}
+            className="overflow-y-auto lg:max-h-64 flex flex-col"
           >
             {sortedBasket.map((basketItem) => (
               <MiniBasketItem
@@ -953,98 +244,32 @@ 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={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>
+        <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>
             <Price value={basket?.total_amount} />
           </div>
+          {/* TODO: Fix link styles */}
           <Link
-            onClick={(e) => {
-              if (isDesigner) {
-                e.preventDefault();
-                e.stopPropagation();
-                handleBlockClick('mini-basket-view-bag-button', e);
-              } else {
-                dispatch(closeMiniBasket());
-              }
+            onClick={() => {
+              dispatch(closeMiniBasket());
             }}
             href={ROUTES.BASKET}
             data-testid="mini-basket-view-bag"
-            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}
+            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"
           >
-            {viewBagButtonContent}
+            {t('basket.mini_basket.view_bag')}
           </Link>
           <Link
             href="/"
-            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'
-            )}
+            className="h-auto p-0 font-semibold underline self-center"
             data-testid="mini-basket-continue-shopping"
-            style={finalContinueShoppingButtonStyles}
-            onClick={(e) => {
-              if (isDesigner) {
-                e.preventDefault();
-                e.stopPropagation();
-                handleBlockClick('mini-basket-continue-shopping-button', e);
-              }
-            }}
           >
-            {continueShoppingButtonContent}
+            {t('basket.mini_basket.continue_shopping')}
           </Link>
         </footer>
       </div>