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

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # @akinon/next
 
-## 2.0.0-beta.19
+## 2.0.0-beta.20
+
+### Minor Changes
+
+- cf3a9901: ZERO-3585: Fix cookie handling for widget builder in ClientRoot component
+- 9076e50e: ZERO-3136: Refactor DynamicWidgetContainer and WidgetContent for improved styling and component tagging
+- d0e1ef78: ZERO-3232: Integrate widget styles generation directly in WidgetPlaceholder
+- 1d10dde2: ZERO-3553: Add alignment style for image components
+- 74c6a237: ZERO-3060: Drag and drop functionality on the site implemented
+
+## 1.125.0
 
 ### Minor Changes
 
 - cd68a97a: ZERO-4126: Enhance error handling in appFetch and related data handlers to throw notFound on 404 and 422 errors
 
-## 2.0.0-beta.18
+## 1.124.0
 
 ### Minor Changes
 
@@ -16,7 +26,7 @@
 - bd431e36: ZERO-3278: improve checkout validation error messages for better user guidance
 - 54eac86b: ZERO-3271: add development logger system
 
-## 2.0.0-beta.17
+## 1.123.0
 
 ### Minor Changes
 
@@ -28,7 +38,7 @@
 - 94a86fcc: ZERO-4065: Expand skipSegments array to include additional segments for route generation
 - bcaad120: ZERO-4158: Add logging for OAuth login and callback redirects
 
-## 2.0.0-beta.16
+## 1.122.0
 
 ### Minor Changes
 
@@ -38,7 +48,7 @@
 - 9b7d0de6: ZERO-3393: Improve error handling in checkout middleware to support both object and array error formats
 - 5ec0faf8: ZERO-3355: Refactor Redis client creation to include optional password in configuration
 
-## 2.0.0-beta.15
+## 1.121.0
 
 ### Minor Changes
 
@@ -46,21 +56,18 @@
 - d7e5178b: ZERO-3985: Add query string handling for orders redirection in middleware
 - b59fdd1c: ZERO-4009: Add password reset token validation
 
-## 2.0.0-beta.14
+## 1.120.0
 
 ### Minor Changes
 
+- b12527ec: ZERO-4102: Add support for post-checkout redirect in middleware
 - aef81c5d: ZERO-4034: Refactor checkout API to use dynamic store imports for improved performance
 - 0754c835: ZERO-4063: Add support for optional Redis password in cache handlers
-- c6c5c1cd: ZERO-4128: Use cookies API for pz-pos-error to ensure delivery on 303 redirects
-
-## 2.0.0-beta.13
-
-### Minor Changes
-
-- b12527ec: ZERO-4102: Add support for post-checkout redirect in middleware
 - a9f5cdb1: ZERO-4102: Fix post-checkout condition to additionally check for empty search parameters.
 - 01ee41f1: ZERO-4102: Implement a post-checkout flow by dynamically determining checkout paths and managing a pz-post-checkout-flow cookie.
+- c6c5c1cd: ZERO-4128: Use cookies API for pz-pos-error to ensure delivery on 303 redirects
+
+## 1.119.0
 
 ## 1.118.0
 

package/assets/styles/index.scss

@@ -51,3 +51,87 @@
     z-index: 1001;
   }
 }
+
+.container-droppable {
+  outline: 2px dashed #4482ff !important;
+  outline-offset: -2px;
+  background-color: rgba(96, 165, 250, 0.1) !important;
+}
+
+.container-dragover {
+  background-color: rgba(59, 130, 246, 0.1);
+}
+
+.container-dragover::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 2px solid #4482ff;
+  pointer-events: none;
+}
+
+.dragging * {
+  cursor: default !important;
+}
+
+.dragging [data-component='true'] {
+  cursor: grabbing !important;
+}
+
+.dragging .drop-target {
+  cursor: grab !important;
+  outline: 2px dashed #4482ff !important;
+  outline-offset: -2px;
+}
+
+.dragging .no-drop-target {
+  cursor: no-drop !important;
+  outline: 2px dashed #e63946 !important;
+  outline-offset: -2px;
+}
+
+[data-component='true'] {
+  cursor: pointer;
+}
+
+.carousel-container {
+  li[aria-hidden='false'] {
+    div {
+      display: block;
+    }
+  }
+}
+
+.posts-slider-carousel {
+  width: 100%;
+
+  .react-multi-carousel-track {
+    align-items: stretch;
+  }
+}
+
+.posts-slider-dots {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 16px;
+  padding: 0;
+  list-style: none;
+}
+
+.posts-slider-dots li button {
+  width: 8px;
+  height: 8px;
+  border-radius: 9999px;
+  border: none;
+  background: rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+}
+
+.posts-slider-dots li.react-multi-carousel-dot--active button {
+  background: rgba(0, 0, 0, 0.6);
+}

package/components/client-root.tsx

@@ -1,12 +1,24 @@
 'use client';
 
 import React from 'react';
+import { useCallback, useEffect } from 'react';
 import { useMobileIframeHandler } from '../hooks';
+import { useAppDispatch, useAppSelector } from '../redux/hooks';
+import {
+  setComponents,
+  setDataSources,
+  setDesignMode,
+  setDraggingActive,
+  setPlaceholders,
+  setResponsive,
+  setSelectedComponentId,
+  setSelectedPlaceholder,
+  setSelectedWidget
+} from '../redux/reducers/widget';
 import { LoggerPopup } from './logger-popup';
 import { LoggerProvider } from '../hooks/use-logger-context';
 import * as Sentry from '@sentry/nextjs';
 import { initSentry } from '../sentry';
-import { useEffect } from 'react';
 
 export default function ClientRoot({
   children,
@@ -18,6 +30,100 @@ export default function ClientRoot({
   const { preventPageRender } = useMobileIframeHandler({
     sessionId: sessionId || ''
   });
+  const { components } = useAppSelector((state) => state.widget);
+  const dispatch = useAppDispatch();
+
+  const postMessage = (message: {
+    type: string;
+    data: Record<string, unknown>;
+  }) => {
+    window.parent.postMessage(message, '*');
+  };
+
+  const handleWidgetMessage = useCallback(
+    (event: MessageEvent) => {
+      if (event.data.type === 'UPDATE_COMPONENTS') {
+        const { components } = event.data.data;
+
+        dispatch(setComponents(components));
+      } else if (event.data.type === 'UPDATE_WIDGET_SYSTEM') {
+        const {
+          responsive,
+          designMode,
+          selectedComponentId,
+          placeholders,
+          dataSources
+        } = event.data.data;
+
+        dispatch(setResponsive(responsive));
+        dispatch(setDesignMode(designMode));
+        dispatch(setSelectedComponentId(selectedComponentId));
+        dispatch(setPlaceholders(placeholders));
+        dispatch(setDataSources(dataSources));
+      } else if (event.data.type === 'SELECT_PLACEHOLDER') {
+        const { placeholderSlug } = event.data.data;
+
+        dispatch(setSelectedPlaceholder(placeholderSlug));
+      } else if (event.data.type === 'SELECT_WIDGET') {
+        const { widgetSlug } = event.data.data;
+
+        dispatch(setSelectedWidget(widgetSlug));
+
+        postMessage({
+          type: 'SELECT_COMPONENT',
+          data: {
+            componentId: null
+          }
+        });
+      } else if (event.data.type === 'DRAG_START') {
+        dispatch(setDraggingActive(true));
+      } else if (event.data.type === 'DRAG_END') {
+        dispatch(setDraggingActive(false));
+      } else if (event.data.type === 'GET_DROP_TARGET') {
+        const { x, y, component } = event.data.data;
+        const elements = document.elementsFromPoint(x, y);
+        const dropTargetId = elements
+          .find((element) => element.hasAttribute('data-component'))
+          ?.getAttribute('data-id');
+
+        postMessage({
+          type: 'DROP_TARGET_RESPONSE',
+          data: {
+            targetId: dropTargetId,
+            component
+          }
+        });
+      } else if (event.data.type === 'SET_COOKIE') {
+        const { key, value } = event.data.data.value;
+
+        if (key && value) {
+          let cookieString = '';
+          if (window.parent !== window) {
+            cookieString = `${key}=${value}; path=/; SameSite=None; Secure`;
+          } else if (key === 'widget_builder') {
+            cookieString = `${key}=false; path=/; SameSite=None; Secure`;
+          }
+
+          if (cookieString) {
+            document.cookie = cookieString;
+          }
+        }
+      }
+    },
+    [dispatch, components]
+  );
+
+  useEffect(() => {
+    window.addEventListener('message', handleWidgetMessage);
+
+    if (window.parent === window) {
+      document.cookie = 'widget_builder=false; path=/; SameSite=None; Secure';
+    }
+
+    return () => {
+      window.removeEventListener('message', handleWidgetMessage);
+    };
+  }, [handleWidgetMessage]);
 
   const initializeSentry = async () => {
     const response = await fetch('/api/sentry', { next: { revalidate: 0 } });

package/components/link.tsx

@@ -19,26 +19,56 @@ export const Link = ({ children, href, ...rest }: LinkProps) => {
       return '#';
     }
 
-    if (
-      typeof href !== 'string' ||
-      urlSchemes.some((scheme) => href.startsWith(scheme))
-    ) {
-      return href;
-    }
+    if (typeof href === 'string') {
+      const trimmedHref = href.trim();
+      if (!trimmedHref) {
+        return '#';
+      }
+
+      if (urlSchemes.some((scheme) => trimmedHref.startsWith(scheme))) {
+        if (
+          trimmedHref.startsWith('mailto:') ||
+          trimmedHref.startsWith('tel:')
+        ) {
+          return trimmedHref;
+        }
+
+        try {
+          new URL(trimmedHref);
+          return trimmedHref;
+        } catch {
+          return '#';
+        }
+      }
 
-    const pathnameWithoutLocale = href.replace(urlLocaleMatcherRegex, '');
-    const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
+      try {
+        new URL(trimmedHref, 'http://localhost');
+      } catch {
+        return '#';
+      }
 
-    if (localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales) {
-      return hrefWithLocale;
-    } else if (
-      localeUrlStrategy === LocaleUrlStrategy.HideDefaultLocale &&
-      locale !== defaultLocaleValue
-    ) {
-      return hrefWithLocale;
+      const pathnameWithoutLocale = trimmedHref.replace(
+        urlLocaleMatcherRegex,
+        ''
+      );
+      const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
+
+      if (localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales) {
+        return hrefWithLocale;
+      } else if (
+        localeUrlStrategy === LocaleUrlStrategy.HideDefaultLocale &&
+        locale !== defaultLocaleValue
+      ) {
+        return hrefWithLocale;
+      }
+
+      return trimmedHref || '#';
     }
 
-    return href || '#';
+    if (typeof href !== 'string') {
+      return href;
+    }
+    return '#';
   }, [href, defaultLocaleValue, locale, localeUrlStrategy]);
 
   return (

package/components/theme-editor/blocks/accordion-block.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import { BlockRendererProps } from './block-renderer-registry';
+import ThemeBlock from '../theme-block';
+
+const AccordionBlock: React.FC<BlockRendererProps> = ({
+  block,
+  placeholderId,
+  sectionId,
+  isDesigner,
+  selectedBlockId,
+  currentBreakpoint = 'desktop'
+}) => {
+  const childBlocks = block.blocks || [];
+
+  const defaultOpen = block.properties?.defaultOpen === true;
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  const headingBlock = childBlocks.find((b) => b.label === 'Accordion Heading');
+  const contentBlock = childBlocks.find((b) => b.label === 'Accordion Content');
+
+  if (!headingBlock && !contentBlock) {
+    return (
+      <div className="p-4 text-gray-400 border border-dashed border-gray-300 rounded">
+        No accordion content
+      </div>
+    );
+  }
+
+  const renderHeading = () => {
+    if (!headingBlock) return null;
+
+    return headingBlock.blocks
+      ?.filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+      .sort((a, b) => (a.order || 0) - (b.order || 0))
+      .map((childBlock, index) => {
+        const modifiedBlock =
+          childBlock.type === 'icon'
+            ? {
+                ...childBlock,
+                styles: {
+                  ...childBlock.styles,
+                  transform: {
+                    desktop: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                    mobile: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
+                  },
+                  transition: {
+                    desktop: 'transform 0.3s ease-in-out',
+                    mobile: 'transform 0.3s ease-in-out'
+                  }
+                }
+              }
+            : childBlock;
+
+        return (
+          <ThemeBlock
+            key={childBlock.id || `heading-block-${index}`}
+            block={modifiedBlock}
+            placeholderId={placeholderId}
+            sectionId={sectionId}
+            isDesigner={isDesigner}
+            isSelected={selectedBlockId === childBlock.id}
+            selectedBlockId={selectedBlockId}
+            currentBreakpoint={currentBreakpoint}
+            onMoveUp={undefined}
+            onMoveDown={undefined}
+            onDuplicate={undefined}
+            onToggleVisibility={undefined}
+            onDelete={undefined}
+            onRename={undefined}
+          />
+        );
+      });
+  };
+
+  const renderContent = () => {
+    if (!contentBlock) return null;
+
+    return contentBlock.blocks
+      ?.filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+      .sort((a, b) => (a.order || 0) - (b.order || 0))
+      .map((childBlock, index) => {
+        return (
+          <ThemeBlock
+            key={childBlock.id || `content-block-${index}`}
+            block={childBlock}
+            placeholderId={placeholderId}
+            sectionId={sectionId}
+            isDesigner={isDesigner}
+            isSelected={selectedBlockId === childBlock.id}
+            selectedBlockId={selectedBlockId}
+            currentBreakpoint={currentBreakpoint}
+            onMoveUp={undefined}
+            onMoveDown={undefined}
+            onDuplicate={undefined}
+            onToggleVisibility={undefined}
+            onDelete={undefined}
+            onRename={undefined}
+          />
+        );
+      });
+  };
+
+  const toggleAccordion = (e: React.MouseEvent) => {
+    if (isDesigner) {
+      const target = e.target as HTMLElement;
+      if (
+        target.closest('[data-action-toolbar]') ||
+        target.closest('button') ||
+        target.closest('input')
+      ) {
+        return;
+      }
+    }
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <>
+      <div style={{ cursor: 'pointer' }} onClick={toggleAccordion}>
+        {renderHeading()}
+      </div>
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateRows: isOpen ? '1fr' : '0fr',
+          transition: 'grid-template-rows 0.3s ease-in-out'
+        }}
+      >
+        <div style={{ overflow: 'hidden' }}>{renderContent()}</div>
+      </div>
+    </>
+  );
+};
+
+export default AccordionBlock;

package/components/theme-editor/blocks/block-renderer-registry.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Block } from '../theme-block';
+import TextBlock from './text-block';
+import ImageBlock from './image-block';
+import DividerBlock from './divider-block';
+import GroupBlock from './group-block';
+import ButtonBlock from './button-block';
+import IconBlock from './icon-block';
+import VideoBlock from './video-block';
+import AccordionBlock from './accordion-block';
+import TabBlock from './tab-block';
+import CounterBlock from './counter-block';
+import ImageGalleryBlock from './image-gallery-block';
+import InputBlock from './input-block';
+import SliderBlock from './slider-block';
+import HotspotBlock from './hotspot-block';
+import LinkBlock from './link-block';
+import LottieBlock from './lottie-block';
+import EmbedBlock from './embed-block';
+import MapBlock from './map-block';
+
+export interface BlockRendererProps {
+  block: Block;
+  placeholderId: string;
+  sectionId: string;
+  isDesigner: boolean;
+  isSelected?: boolean;
+  selectedBlockId?: string | null;
+  currentBreakpoint?: string;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+  onDuplicate?: () => void;
+  onToggleVisibility?: () => void;
+  onDelete?: () => void;
+  onRename?: (newLabel: string) => void;
+}
+
+type BlockRenderer = React.ComponentType<BlockRendererProps>;
+
+class BlockRendererRegistry {
+  private renderers: Map<string, BlockRenderer> = new Map();
+
+  register(type: string, renderer: BlockRenderer) {
+    this.renderers.set(type, renderer);
+  }
+
+  getRenderer(type: string): BlockRenderer | undefined {
+    return this.renderers.get(type);
+  }
+
+  hasRenderer(type: string): boolean {
+    return this.renderers.has(type);
+  }
+}
+
+const blockRendererRegistry = new BlockRendererRegistry();
+
+blockRendererRegistry.register('text', TextBlock);
+blockRendererRegistry.register('image', ImageBlock);
+blockRendererRegistry.register('divider', DividerBlock);
+blockRendererRegistry.register('group', GroupBlock);
+blockRendererRegistry.register('button', ButtonBlock);
+blockRendererRegistry.register('icon', IconBlock);
+blockRendererRegistry.register('video', VideoBlock);
+blockRendererRegistry.register('accordion', AccordionBlock);
+blockRendererRegistry.register('tab', TabBlock);
+blockRendererRegistry.register('counter', CounterBlock);
+blockRendererRegistry.register('image-gallery', ImageGalleryBlock);
+blockRendererRegistry.register('input', InputBlock);
+blockRendererRegistry.register('slider', SliderBlock);
+blockRendererRegistry.register('hotspot', HotspotBlock);
+blockRendererRegistry.register('link', LinkBlock);
+blockRendererRegistry.register('lottie', LottieBlock);
+blockRendererRegistry.register('embed', EmbedBlock);
+blockRendererRegistry.register('map', MapBlock);
+
+export default blockRendererRegistry;