@akinon/pz-theme 2.0.35-beta.0 → 2.0.35

package/src/sections/coupon-banner-section.tsx

@@ -15,6 +15,8 @@ import {
 } from '../utils';
 import { Section } from '../theme-section';
 
+import { postToEditor } from '../editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 interface CouponBannerSectionProps {
   section: Section;
   currentBreakpoint?: string;
@@ -98,7 +100,11 @@ const resolveCouponBannerRole = (
   block: Pick<Block, 'properties'>,
   breakpoint: string
 ): string => {
-  const value = getResponsiveValue(block.properties?.couponBannerRole, breakpoint, '');
+  const value = getResponsiveValue(
+    block.properties?.couponBannerRole,
+    breakpoint,
+    ''
+  );
   return typeof value === 'string' ? value : '';
 };
 
@@ -204,22 +210,29 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
     (block) => !resolveCouponBannerRole(block, currentBreakpoint)
   );
   const couponLabelBlock = foregroundBlocks.find(
-    (block) => resolveCouponBannerRole(block, currentBreakpoint) === 'coupon-label'
+    (block) =>
+      resolveCouponBannerRole(block, currentBreakpoint) === 'coupon-label'
   );
   const couponCodeBoxBlock = foregroundBlocks.find(
-    (block) => resolveCouponBannerRole(block, currentBreakpoint) === 'coupon-code-box'
+    (block) =>
+      resolveCouponBannerRole(block, currentBreakpoint) === 'coupon-code-box'
   );
   const couponCodeTextBlock = foregroundBlocks.find(
-    (block) => resolveCouponBannerRole(block, currentBreakpoint) === 'coupon-code-text'
+    (block) =>
+      resolveCouponBannerRole(block, currentBreakpoint) === 'coupon-code-text'
   );
   const couponCopyButtonBlock = foregroundBlocks.find(
-    (block) => resolveCouponBannerRole(block, currentBreakpoint) === 'coupon-copy-button'
+    (block) =>
+      resolveCouponBannerRole(block, currentBreakpoint) === 'coupon-copy-button'
   );
   const couponNoteBlock = foregroundBlocks.find(
-    (block) => resolveCouponBannerRole(block, currentBreakpoint) === 'coupon-note-text'
+    (block) =>
+      resolveCouponBannerRole(block, currentBreakpoint) === 'coupon-note-text'
   );
 
-  const firstButtonIndex = contentBlocks.findIndex((block) => block.type === 'button');
+  const firstButtonIndex = contentBlocks.findIndex(
+    (block) => block.type === 'button'
+  );
 
   const leadingBlocks =
     firstButtonIndex >= 0
@@ -229,8 +242,11 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
     firstButtonIndex >= 0 ? contentBlocks.slice(firstButtonIndex) : [];
 
   const couponCode = String(
-    getResponsiveValue(section.properties?.['coupon-code'], currentBreakpoint, 'SAVE20') ||
+    getResponsiveValue(
+      section.properties?.['coupon-code'],
+      currentBreakpoint,
       'SAVE20'
+    ) || 'SAVE20'
   ).trim();
   const couponNote = String(
     getResponsiveValue(
@@ -270,7 +286,10 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
 
   useEffect(() => {
     if (!isCopied) return;
-    const timer = window.setTimeout(() => setIsCopied(false), copiedStateDuration);
+    const timer = window.setTimeout(
+      () => setIsCopied(false),
+      copiedStateDuration
+    );
     return () => window.clearTimeout(timer);
   }, [isCopied, copiedStateDuration]);
 
@@ -283,8 +302,8 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
     maxWidth === 'narrow'
       ? 'max-w-4xl'
       : maxWidth === 'none'
-        ? ''
-        : 'max-w-7xl';
+      ? ''
+      : 'max-w-7xl';
   const hasMaxWidth = maxWidth !== 'none';
   const rawSectionBorderRadius = getResponsiveValue(
     section.styles?.['border-radius'],
@@ -321,7 +340,11 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
     )
   );
 
-  const sectionStyles = getCSSStyles(filteredStyles, themeSettings, currentBreakpoint);
+  const sectionStyles = getCSSStyles(
+    filteredStyles,
+    themeSettings,
+    currentBreakpoint
+  );
 
   const backgroundImageSrc = useMemo(() => {
     if (!backgroundBlock) return '';
@@ -333,14 +356,22 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
 
   const overlayColor = resolveThemeCssVariables(
     String(
-      getResponsiveValue(section.styles?.['overlay-color'], currentBreakpoint, '#0f172a')
+      getResponsiveValue(
+        section.styles?.['overlay-color'],
+        currentBreakpoint,
+        '#0f172a'
+      )
     ),
     themeSettings
   );
   const overlayOpacity =
     clampNumber(
       parseNumber(
-        getResponsiveValue(section.styles?.['overlay-opacity'], currentBreakpoint, 12),
+        getResponsiveValue(
+          section.styles?.['overlay-opacity'],
+          currentBreakpoint,
+          12
+        ),
         12
       ),
       0,
@@ -349,27 +380,54 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
   const overlayBackground = applyAlphaToColor(overlayColor, overlayOpacity);
 
   const copyRowGap = clampNumber(
-    parseNumber(getResponsiveValue(section.styles?.['copy-row-gap'], currentBreakpoint, 10), 10),
+    parseNumber(
+      getResponsiveValue(
+        section.styles?.['copy-row-gap'],
+        currentBreakpoint,
+        10
+      ),
+      10
+    ),
     0,
     32
   );
 
   const codeBackgroundColor = resolveThemeCssVariables(
     String(
-      getResponsiveValue(section.styles?.['code-background-color'], currentBreakpoint, '#ffffff')
+      getResponsiveValue(
+        section.styles?.['code-background-color'],
+        currentBreakpoint,
+        '#ffffff'
+      )
     ),
     themeSettings
   );
   const codeTextColor = resolveThemeCssVariables(
-    String(getResponsiveValue(section.styles?.['code-text-color'], currentBreakpoint, '#0f172a')),
+    String(
+      getResponsiveValue(
+        section.styles?.['code-text-color'],
+        currentBreakpoint,
+        '#0f172a'
+      )
+    ),
     themeSettings
   );
   const codeBorderColor = resolveThemeCssVariables(
-    String(getResponsiveValue(section.styles?.['code-border-color'], currentBreakpoint, '#cbd5e1')),
+    String(
+      getResponsiveValue(
+        section.styles?.['code-border-color'],
+        currentBreakpoint,
+        '#cbd5e1'
+      )
+    ),
     themeSettings
   );
   const codeBorderRadius = String(
-    getResponsiveValue(section.styles?.['code-border-radius'], currentBreakpoint, '10px')
+    getResponsiveValue(
+      section.styles?.['code-border-radius'],
+      currentBreakpoint,
+      '10px'
+    )
   );
 
   const copyButtonBackgroundColor = resolveThemeCssVariables(
@@ -384,7 +442,11 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
   );
   const copyButtonTextColor = resolveThemeCssVariables(
     String(
-      getResponsiveValue(section.styles?.['copy-button-text-color'], currentBreakpoint, '#ffffff')
+      getResponsiveValue(
+        section.styles?.['copy-button-text-color'],
+        currentBreakpoint,
+        '#ffffff'
+      )
     ),
     themeSettings
   );
@@ -399,23 +461,28 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
     themeSettings
   );
   const copyButtonBorderRadius = String(
-    getResponsiveValue(section.styles?.['copy-button-border-radius'], currentBreakpoint, '10px')
+    getResponsiveValue(
+      section.styles?.['copy-button-border-radius'],
+      currentBreakpoint,
+      '10px'
+    )
   );
 
-  const postBlockAction = (type: string, blockId: string, label?: string) => {
+  const postBlockAction = (
+    type: PreviewToEditorMessageType,
+    blockId: string,
+    label?: string
+  ) => {
     if (!window.parent) return;
-    window.parent.postMessage(
-      {
-        type,
-        data: {
-          placeholderId,
-          sectionId: section.id,
-          blockId,
-          ...(label ? { label } : {})
-        }
-      },
-      '*'
-    );
+    postToEditor({
+      type,
+      data: {
+        placeholderId,
+        sectionId: section.id,
+        blockId,
+        ...(label ? { label } : {})
+      }
+    });
   };
 
   const renderBlock = (block: Block, keyOverride?: React.Key) => {
@@ -482,15 +549,30 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
           ...(options.style || {}),
           ...getCSSStyles(block.styles || {}, themeSettings, currentBreakpoint)
         }}
-        onMoveUp={() => postBlockAction('MOVE_BLOCK_UP', block.styleSourceId || block.id)}
-        onMoveDown={() => postBlockAction('MOVE_BLOCK_DOWN', block.styleSourceId || block.id)}
-        onDuplicate={() => postBlockAction('DUPLICATE_BLOCK', block.styleSourceId || block.id)}
+        onMoveUp={() =>
+          postBlockAction('MOVE_BLOCK_UP', block.styleSourceId || block.id)
+        }
+        onMoveDown={() =>
+          postBlockAction('MOVE_BLOCK_DOWN', block.styleSourceId || block.id)
+        }
+        onDuplicate={() =>
+          postBlockAction('DUPLICATE_BLOCK', block.styleSourceId || block.id)
+        }
         onToggleVisibility={() =>
-          postBlockAction('TOGGLE_BLOCK_VISIBILITY', block.styleSourceId || block.id)
+          postBlockAction(
+            'TOGGLE_BLOCK_VISIBILITY',
+            block.styleSourceId || block.id
+          )
+        }
+        onDelete={() =>
+          postBlockAction('DELETE_BLOCK', block.styleSourceId || block.id)
         }
-        onDelete={() => postBlockAction('DELETE_BLOCK', block.styleSourceId || block.id)}
         onRename={(newLabel) =>
-          postBlockAction('RENAME_BLOCK', block.styleSourceId || block.id, newLabel)
+          postBlockAction(
+            'RENAME_BLOCK',
+            block.styleSourceId || block.id,
+            newLabel
+          )
         }
       >
         {children}
@@ -530,15 +612,30 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
         currentBreakpoint={currentBreakpoint}
         className={options.wrapperClassName}
         style={options.wrapperStyle}
-        onMoveUp={() => postBlockAction('MOVE_BLOCK_UP', block.styleSourceId || block.id)}
-        onMoveDown={() => postBlockAction('MOVE_BLOCK_DOWN', block.styleSourceId || block.id)}
-        onDuplicate={() => postBlockAction('DUPLICATE_BLOCK', block.styleSourceId || block.id)}
+        onMoveUp={() =>
+          postBlockAction('MOVE_BLOCK_UP', block.styleSourceId || block.id)
+        }
+        onMoveDown={() =>
+          postBlockAction('MOVE_BLOCK_DOWN', block.styleSourceId || block.id)
+        }
+        onDuplicate={() =>
+          postBlockAction('DUPLICATE_BLOCK', block.styleSourceId || block.id)
+        }
         onToggleVisibility={() =>
-          postBlockAction('TOGGLE_BLOCK_VISIBILITY', block.styleSourceId || block.id)
+          postBlockAction(
+            'TOGGLE_BLOCK_VISIBILITY',
+            block.styleSourceId || block.id
+          )
+        }
+        onDelete={() =>
+          postBlockAction('DELETE_BLOCK', block.styleSourceId || block.id)
         }
-        onDelete={() => postBlockAction('DELETE_BLOCK', block.styleSourceId || block.id)}
         onRename={(newLabel) =>
-          postBlockAction('RENAME_BLOCK', block.styleSourceId || block.id, newLabel)
+          postBlockAction(
+            'RENAME_BLOCK',
+            block.styleSourceId || block.id,
+            newLabel
+          )
         }
       >
         {children}
@@ -601,7 +698,9 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
       }}
     >
       {hasBackgroundImage ? (
-        <div className="absolute inset-0 z-0">{renderBlock(backgroundBlock)}</div>
+        <div className="absolute inset-0 z-0">
+          {renderBlock(backgroundBlock)}
+        </div>
       ) : (
         <div
           className="absolute inset-0 z-0"
@@ -622,7 +721,12 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
           isMobileLayout ? 'flex-col' : 'items-end justify-between'
         )}
       >
-        <div className={clsx('flex min-w-0 flex-col gap-4', !isMobileLayout && 'max-w-3xl')}>
+        <div
+          className={clsx(
+            'flex min-w-0 flex-col gap-4',
+            !isMobileLayout && 'max-w-3xl'
+          )}
+        >
           {leadingBlocks.map(renderBlock)}
           {trailingBlocks.map(renderBlock)}
         </div>

package/src/sections/featured-product-spotlight-section.tsx

@@ -9,6 +9,7 @@ import { Section } from '../theme-section';
 import { safeDeepClone } from '../utils/safe-clone';
 import { getCSSStyles, getResponsiveValue } from '../utils';
 
+import { postToEditor } from '../editor-bridge';
 interface FeaturedProductSpotlightSectionProps {
   section: Section;
   currentBreakpoint?: string;
@@ -106,7 +107,9 @@ const parsePositiveInt = (value: unknown): number | null => {
 };
 
 const normalizeCurrencyLabel = (currency: unknown): string => {
-  const raw = String(currency || '').trim().toUpperCase();
+  const raw = String(currency || '')
+    .trim()
+    .toUpperCase();
   if (!raw) return 'TL';
 
   const map: Record<string, string> = {
@@ -192,7 +195,9 @@ const getDiscountBadgeText = (
     return null;
   }
 
-  const percentage = Math.round(((retailPrice - currentPrice) / retailPrice) * 100);
+  const percentage = Math.round(
+    ((retailPrice - currentPrice) / retailPrice) * 100
+  );
   if (percentage <= 0) return null;
   return `Save ${percentage}%`;
 };
@@ -215,10 +220,10 @@ export default function FeaturedProductSpotlightSection({
     maxWidth === 'narrow'
       ? 'max-w-4xl'
       : maxWidth === 'normal'
-        ? 'max-w-7xl'
-        : maxWidth === 'full'
-          ? 'w-full'
-          : '';
+      ? 'max-w-7xl'
+      : maxWidth === 'full'
+      ? 'w-full'
+      : '';
   const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
 
   const filteredStyles = Object.fromEntries(
@@ -242,7 +247,10 @@ export default function FeaturedProductSpotlightSection({
 
     return {
       ...baseStyles,
-      flexDirection: currentBreakpoint === 'mobile' ? 'column-reverse' as const : 'row-reverse' as const
+      flexDirection:
+        currentBreakpoint === 'mobile'
+          ? ('column-reverse' as const)
+          : ('row-reverse' as const)
     };
   }, [
     currentBreakpoint,
@@ -256,7 +264,11 @@ export default function FeaturedProductSpotlightSection({
     [section, isDesigner]
   );
   const fallbackProductPk = parsePositiveInt(
-    getResponsiveValue(section.properties?.['product-pk'], currentBreakpoint, '')
+    getResponsiveValue(
+      section.properties?.['product-pk'],
+      currentBreakpoint,
+      ''
+    )
   );
   // currentData (not data): data is sticky across args, so a cleared
   // product-pk would keep rendering the previously fetched product.
@@ -268,11 +280,13 @@ export default function FeaturedProductSpotlightSection({
   );
   const product =
     products[0] ||
-    ((fallbackProductResponse?.product as Record<string, unknown> | undefined) ??
+    ((fallbackProductResponse?.product as
+      | Record<string, unknown>
+      | undefined) ??
       undefined);
 
   const activePrice =
-    ((product?.active_price as Record<string, unknown> | undefined) || {});
+    (product?.active_price as Record<string, unknown> | undefined) || {};
   const currentPriceRaw = activePrice?.price ?? product?.price;
   const retailPriceRaw = activePrice?.retail_price ?? product?.retail_price;
   const currency =
@@ -290,7 +304,11 @@ export default function FeaturedProductSpotlightSection({
     retailPrice > currentPrice;
 
   const showBadge = parseBoolean(
-    getResponsiveValue(section.properties?.['show-badge'], currentBreakpoint, true),
+    getResponsiveValue(
+      section.properties?.['show-badge'],
+      currentBreakpoint,
+      true
+    ),
     true
   );
   const showOldPrice = parseBoolean(
@@ -334,10 +352,10 @@ export default function FeaturedProductSpotlightSection({
 
       const nextBlock: Block = {
         ...block,
-        properties: block.properties ? { ...block.properties } : block.properties,
-        styles: block.styles
-          ? safeDeepClone(block.styles)
-          : block.styles,
+        properties: block.properties
+          ? { ...block.properties }
+          : block.properties,
+        styles: block.styles ? safeDeepClone(block.styles) : block.styles,
         blocks: undefined
       };
 
@@ -377,7 +395,10 @@ export default function FeaturedProductSpotlightSection({
           nextBlock.type === 'image' &&
           normalizedLabel.includes('thumbnail')
         ) {
-          const fallbackImage = resolvePath(product, 'productimage_set[0].image');
+          const fallbackImage = resolvePath(
+            product,
+            'productimage_set[0].image'
+          );
           if (fallbackImage !== undefined) {
             nextBlock.value = fallbackImage;
           }
@@ -421,73 +442,55 @@ export default function FeaturedProductSpotlightSection({
       currentBreakpoint={currentBreakpoint}
       onMoveUp={() => {
         if (window.parent) {
-          window.parent.postMessage(
-            {
-              type: 'MOVE_BLOCK_UP',
-              data: { placeholderId, sectionId: section.id, blockId: block.id }
-            },
-            '*'
-          );
+          postToEditor({
+            type: 'MOVE_BLOCK_UP',
+            data: { placeholderId, sectionId: section.id, blockId: block.id }
+          });
         }
       }}
       onMoveDown={() => {
         if (window.parent) {
-          window.parent.postMessage(
-            {
-              type: 'MOVE_BLOCK_DOWN',
-              data: { placeholderId, sectionId: section.id, blockId: block.id }
-            },
-            '*'
-          );
+          postToEditor({
+            type: 'MOVE_BLOCK_DOWN',
+            data: { placeholderId, sectionId: section.id, blockId: block.id }
+          });
         }
       }}
       onDuplicate={() => {
         if (window.parent) {
-          window.parent.postMessage(
-            {
-              type: 'DUPLICATE_BLOCK',
-              data: { placeholderId, sectionId: section.id, blockId: block.id }
-            },
-            '*'
-          );
+          postToEditor({
+            type: 'DUPLICATE_BLOCK',
+            data: { placeholderId, sectionId: section.id, blockId: block.id }
+          });
         }
       }}
       onToggleVisibility={() => {
         if (window.parent) {
-          window.parent.postMessage(
-            {
-              type: 'TOGGLE_BLOCK_VISIBILITY',
-              data: { placeholderId, sectionId: section.id, blockId: block.id }
-            },
-            '*'
-          );
+          postToEditor({
+            type: 'TOGGLE_BLOCK_VISIBILITY',
+            data: { placeholderId, sectionId: section.id, blockId: block.id }
+          });
         }
       }}
       onDelete={() => {
         if (window.parent) {
-          window.parent.postMessage(
-            {
-              type: 'DELETE_BLOCK',
-              data: { placeholderId, sectionId: section.id, blockId: block.id }
-            },
-            '*'
-          );
+          postToEditor({
+            type: 'DELETE_BLOCK',
+            data: { placeholderId, sectionId: section.id, blockId: block.id }
+          });
         }
       }}
       onRename={(newLabel) => {
         if (window.parent) {
-          window.parent.postMessage(
-            {
-              type: 'RENAME_BLOCK',
-              data: {
-                placeholderId,
-                sectionId: section.id,
-                blockId: block.id,
-                label: newLabel
-              }
-            },
-            '*'
-          );
+          postToEditor({
+            type: 'RENAME_BLOCK',
+            data: {
+              placeholderId,
+              sectionId: section.id,
+              blockId: block.id,
+              label: newLabel
+            }
+          });
         }
       }}
     />
@@ -496,9 +499,7 @@ export default function FeaturedProductSpotlightSection({
   return (
     <div
       className={
-        hasMaxWidth
-          ? `mx-auto ${maxWidthClass}`
-          : maxWidthClass || undefined
+        hasMaxWidth ? `mx-auto ${maxWidthClass}` : maxWidthClass || undefined
       }
       style={sectionStyles}
     >