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

package/src/sections/order-tracking-lookup-section.tsx

@@ -23,6 +23,8 @@ import {
   resolveThemeCssVariables
 } from '../utils';
 
+import { postToEditor } from '../editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 interface OrderTrackingLookupSectionProps {
   section: Section;
   currentBreakpoint?: string;
@@ -225,7 +227,9 @@ const resolveTrackingNumber = (order: Order | null): string => {
   }
 
   const trackedItem = order.orderitem_set?.find(
-    (item) => typeof (item as OrderItem & { tracking_number?: string }).tracking_number === 'string'
+    (item) =>
+      typeof (item as OrderItem & { tracking_number?: string })
+        .tracking_number === 'string'
   ) as (OrderItem & { tracking_number?: string }) | undefined;
 
   return trackedItem?.tracking_number || '';
@@ -240,7 +244,10 @@ const formatAmount = (value: unknown, currency: unknown): string => {
     (currency as { label?: string; value?: string } | undefined)?.value ||
     '';
 
-  if (!currencyLabel || amount.toUpperCase().includes(currencyLabel.toUpperCase())) {
+  if (
+    !currencyLabel ||
+    amount.toUpperCase().includes(currencyLabel.toUpperCase())
+  ) {
     return amount;
   }
 
@@ -293,10 +300,7 @@ const getStatusTone = (
   return { background: '#fef3c7', color: '#92400e' };
 };
 
-const extractErrorMessage = (
-  error: unknown,
-  fallback: string
-): string => {
+const extractErrorMessage = (error: unknown, fallback: string): string => {
   if (!error || typeof error !== 'object') return fallback;
 
   const errorData = (error as { data?: Record<string, unknown> }).data;
@@ -375,7 +379,10 @@ const findAuthenticatedOrder = async (
     buildClientRequestUrl(account.getOldOrders({ page, limit: 100 }));
 
   return (
-    (await findMatchingOrderInPagedResponse(buildCurrentOrdersUrl, orderNumber)) ||
+    (await findMatchingOrderInPagedResponse(
+      buildCurrentOrdersUrl,
+      orderNumber
+    )) ||
     (await findMatchingOrderInPagedResponse(buildOldOrdersUrl, orderNumber))
   );
 };
@@ -495,10 +502,10 @@ export default function OrderTrackingLookupSection({
     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 inputBg = resolveThemeCssVariables(
@@ -748,20 +755,21 @@ export default function OrderTrackingLookupSection({
     currentBreakpoint
   );
 
-  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) => {
@@ -1033,7 +1041,10 @@ export default function OrderTrackingLookupSection({
   const groupedPackageCount = lookupOrder
     ? new Set(
         lookupOrder.orderitem_set
-          .map((item) => (item as OrderItem & { tracking_number?: string }).tracking_number)
+          .map(
+            (item) =>
+              (item as OrderItem & { tracking_number?: string }).tracking_number
+          )
           .filter(Boolean)
       ).size || 1
     : 0;
@@ -1055,14 +1066,15 @@ export default function OrderTrackingLookupSection({
           isMobile ? 'grid-cols-1' : 'md:grid-cols-[0.9fr_1.1fr]'
         )}
       >
-        <div className="flex flex-col gap-4">
-          {textBlocks.map(renderBlock)}
-        </div>
+        <div className="flex flex-col gap-4">{textBlocks.map(renderBlock)}</div>
 
         <div className="flex flex-col gap-4" style={{ gap: `${formGap}px` }}>
           {renderSelectableWrapper(
             formPanelWrapperBlock,
-            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-3">
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="flex flex-col gap-3"
+            >
               {renderSelectableElement(
                 orderInputBlock,
                 <input
@@ -1137,243 +1149,256 @@ export default function OrderTrackingLookupSection({
             }
           )}
 
-          {lookupError ? (
-            renderSelectableWrapper(
-              errorWrapperBlock,
-              errorTextBlock ? (
-                renderBlock(
-                  cloneOrderTrackingBlock(errorTextBlock, {
-                    value: toHtmlText(lookupError)
-                  }),
-                  'error-text'
-                )
-              ) : (
-                <div className="text-sm text-[#b91c1c]">{lookupError}</div>
-              ),
-              {
-                className:
-                  'rounded-[12px] border border-[#fecaca] bg-[#fff1f2] px-4 py-3',
-                keyOverride: 'lookup-error'
-              }
-            )
-          ) : null}
-        </div>
-      </div>
-
-      {lookupOrder ? (
-        renderSelectableWrapper(
-          resultWrapperBlock,
-          <div className="flex flex-col gap-4">
-          <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-            <div className="flex flex-col gap-1">
-              <span className="text-xs font-semibold uppercase tracking-[0.12em] text-[#64748b]">
-                {t('account.my_orders.detail.title')}
-              </span>
-              <h3 className="m-0 text-2xl font-bold text-[#0f172a]">
-                #{lookupOrder.number}
-              </h3>
-            </div>
-
-            {showStatusBadge && statusLabel ? (
-              renderSelectableElement(
-                statusBadgeBlock,
-                <span
-                  className="inline-flex w-fit items-center px-3 py-2 text-xs font-semibold uppercase tracking-[0.08em]"
-                  style={statusBadgeStyle}
-                >
-                  {statusLabel}
-                </span>,
-                {
-                  keyOverride: 'status-badge'
-                }
-              )
-            ) : null}
-          </div>
-
-          <div
-            className={clsx(
-              'grid gap-3',
-              isMobile ? 'grid-cols-2' : 'md:grid-cols-4'
-            )}
-          >
-            {[
-              {
-                key: 'summary-order-number',
-                label: t('account.my_orders.detail.order_number'),
-                value: `#${lookupOrder.number}`
-              },
-              {
-                key: 'summary-order-date',
-                label: t('account.my_orders.detail.order_date'),
-                value: formatDate(lookupOrder.created_date, localeCode)
-              },
-              {
-                key: 'summary-order-total',
-                label: t('account.my_orders.detail.total'),
-                value: formatAmount(lookupOrder.amount, lookupOrder.currency)
-              },
-              {
-                key: 'summary-order-products',
-                label: t('account.my_orders.detail.products'),
-                value: `${lookupOrder.orderitem_set?.length || 0} / ${groupedPackageCount} ${t(
-                  'account.my_orders.detail.packages'
-                )}`
-              }
-            ].map((summaryItem) =>
-              renderSelectableWrapper(
-                summaryCardWrapperBlock,
-                <>
-                  <div className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[#64748b]">
-                    {summaryItem.label}
-                  </div>
-                  <div className="mt-2 text-sm font-semibold text-[#0f172a]">
-                    {summaryItem.value}
-                  </div>
-                </>,
+          {lookupError
+            ? renderSelectableWrapper(
+                errorWrapperBlock,
+                errorTextBlock ? (
+                  renderBlock(
+                    cloneOrderTrackingBlock(errorTextBlock, {
+                      value: toHtmlText(lookupError)
+                    }),
+                    'error-text'
+                  )
+                ) : (
+                  <div className="text-sm text-[#b91c1c]">{lookupError}</div>
+                ),
                 {
-                  className: 'rounded-[10px] bg-[#f8fafc] p-3',
-                  keyOverride: summaryItem.key
+                  className:
+                    'rounded-[12px] border border-[#fecaca] bg-[#fff1f2] px-4 py-3',
+                  keyOverride: 'lookup-error'
                 }
               )
-            )}
-          </div>
+            : null}
+        </div>
+      </div>
 
-          {showTrackingCard && (trackingUrl || trackingNumber) ? (
-            renderSelectableWrapper(
-              trackingCardWrapperBlock,
-              <>
+      {lookupOrder
+        ? renderSelectableWrapper(
+            resultWrapperBlock,
+            <div className="flex flex-col gap-4">
+              <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                 <div className="flex flex-col gap-1">
-                  <span className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[#1d4ed8]">
-                    {localeCode === 'tr' ? 'Kargo Bilgisi' : 'Shipment Details'}
+                  <span className="text-xs font-semibold uppercase tracking-[0.12em] text-[#64748b]">
+                    {t('account.my_orders.detail.title')}
                   </span>
-                  <span className="text-sm font-semibold text-[#0f172a]">
-                    {trackingNumber || statusLabel}
-                  </span>
-                </div>
-
-                {trackingUrl ? (
-                  <a
-                    href={trackingUrl}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="inline-flex w-fit items-center justify-center rounded-[10px] bg-[#0f172a] px-5 py-3 text-sm font-semibold text-white no-underline"
-                  >
-                    {trackShipmentText}
-                  </a>
-                ) : null}
-              </>,
-              {
-                className:
-                  'flex flex-col gap-3 rounded-[12px] border border-[#dbeafe] bg-[#eff6ff] p-4 md:flex-row md:items-center md:justify-between',
-                keyOverride: 'tracking-card'
-              }
-            )
-          ) : null}
-
-          {showShippingAddress && lookupOrder.shipping_address?.line ? (
-            renderSelectableWrapper(
-              shippingAddressWrapperBlock,
-              <>
-                <div className="mb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[#64748b]">
-                  {t('account.my_orders.detail.delivery_address')}
+                  <h3 className="m-0 text-2xl font-bold text-[#0f172a]">
+                    #{lookupOrder.number}
+                  </h3>
                 </div>
-                <div>
-                  {lookupOrder.shipping_address.line}{' '}
-                  {lookupOrder.shipping_address.district?.name}{' '}
-                  {lookupOrder.shipping_address.township?.name}{' '}
-                  {lookupOrder.shipping_address.city?.name}
-                </div>
-              </>,
-              {
-                className: 'rounded-[12px] bg-[#f8fafc] p-4 text-sm leading-6 text-[#334155]',
-                keyOverride: 'shipping-address'
-              }
-            )
-          ) : null}
 
-          {showOrderItems ? (
-            <div className="flex flex-col gap-3">
-              <div className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[#64748b]">
-                {t('account.my_orders.detail.products')}
+                {showStatusBadge && statusLabel
+                  ? renderSelectableElement(
+                      statusBadgeBlock,
+                      <span
+                        className="inline-flex w-fit items-center px-3 py-2 text-xs font-semibold uppercase tracking-[0.08em]"
+                        style={statusBadgeStyle}
+                      >
+                        {statusLabel}
+                      </span>,
+                      {
+                        keyOverride: 'status-badge'
+                      }
+                    )
+                  : null}
               </div>
-              {renderSelectableWrapper(
-                itemsListWrapperBlock,
-                visibleItems.map((item, index) =>
+
+              <div
+                className={clsx(
+                  'grid gap-3',
+                  isMobile ? 'grid-cols-2' : 'md:grid-cols-4'
+                )}
+              >
+                {[
+                  {
+                    key: 'summary-order-number',
+                    label: t('account.my_orders.detail.order_number'),
+                    value: `#${lookupOrder.number}`
+                  },
+                  {
+                    key: 'summary-order-date',
+                    label: t('account.my_orders.detail.order_date'),
+                    value: formatDate(lookupOrder.created_date, localeCode)
+                  },
+                  {
+                    key: 'summary-order-total',
+                    label: t('account.my_orders.detail.total'),
+                    value: formatAmount(
+                      lookupOrder.amount,
+                      lookupOrder.currency
+                    )
+                  },
+                  {
+                    key: 'summary-order-products',
+                    label: t('account.my_orders.detail.products'),
+                    value: `${
+                      lookupOrder.orderitem_set?.length || 0
+                    } / ${groupedPackageCount} ${t(
+                      'account.my_orders.detail.packages'
+                    )}`
+                  }
+                ].map((summaryItem) =>
                   renderSelectableWrapper(
-                    orderItemWrapperBlock,
+                    summaryCardWrapperBlock,
                     <>
-                      <div className="flex min-w-0 items-center gap-3">
-                        <div className="relative h-16 w-16 shrink-0 overflow-hidden rounded-[8px] bg-[#f1f5f9]">
-                          <Image
-                            src={item.product?.image || '/noimage.jpg'}
-                            alt={item.product?.name || ''}
-                            fill
-                            sizes="64px"
-                            aspectRatio={1}
-                            imageClassName="object-cover"
-                          />
-                        </div>
-                        <div className="min-w-0">
-                          <div className="truncate text-sm font-semibold text-[#0f172a]">
-                            {item.product?.name}
-                          </div>
-                          <div className="mt-1 text-xs text-[#64748b]">
-                            {t('account.my_orders.detail.items')}: {item.quantity}
-                            {' · '}
-                            {item.status?.label}
-                          </div>
-                        </div>
+                      <div className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[#64748b]">
+                        {summaryItem.label}
+                      </div>
+                      <div className="mt-2 text-sm font-semibold text-[#0f172a]">
+                        {summaryItem.value}
                       </div>
-                      <div className="flex shrink-0 flex-col items-start text-sm md:items-end">
-                        {parseFloat(item.retail_price) > parseFloat(item.price) ? (
-                          <span className="text-xs text-[#94a3b8] line-through">
-                            {formatAmount(item.retail_price, item.price_currency)}
-                          </span>
-                        ) : null}
-                        <span className="font-semibold text-[#0f172a]">
-                          {formatAmount(item.price, item.price_currency)}
+                    </>,
+                    {
+                      className: 'rounded-[10px] bg-[#f8fafc] p-3',
+                      keyOverride: summaryItem.key
+                    }
+                  )
+                )}
+              </div>
+
+              {showTrackingCard && (trackingUrl || trackingNumber)
+                ? renderSelectableWrapper(
+                    trackingCardWrapperBlock,
+                    <>
+                      <div className="flex flex-col gap-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[#1d4ed8]">
+                          {localeCode === 'tr'
+                            ? 'Kargo Bilgisi'
+                            : 'Shipment Details'}
+                        </span>
+                        <span className="text-sm font-semibold text-[#0f172a]">
+                          {trackingNumber || statusLabel}
                         </span>
                       </div>
+
+                      {trackingUrl ? (
+                        <a
+                          href={trackingUrl}
+                          target="_blank"
+                          rel="noreferrer"
+                          className="inline-flex w-fit items-center justify-center rounded-[10px] bg-[#0f172a] px-5 py-3 text-sm font-semibold text-white no-underline"
+                        >
+                          {trackShipmentText}
+                        </a>
+                      ) : null}
                     </>,
                     {
                       className:
-                        'flex flex-col gap-3 p-4 md:flex-row md:items-center md:justify-between',
-                      keyOverride: `order-item-${item.id}-${index}`
+                        'flex flex-col gap-3 rounded-[12px] border border-[#dbeafe] bg-[#eff6ff] p-4 md:flex-row md:items-center md:justify-between',
+                      keyOverride: 'tracking-card'
                     }
                   )
-                ),
-                {
-                  className:
-                    'flex flex-col divide-y divide-[#e2e8f0] overflow-hidden rounded-[12px] border border-[#e2e8f0] bg-white',
-                  keyOverride: 'items-list-wrapper'
-                }
-              )}
-            </div>
-          ) : null}
-
-          <div className="pt-2">
-            {renderSelectableElement(
-              resetButtonBlock,
-              <button
-                type="button"
-                onClick={handleReset}
-                style={resetButtonStyle}
-              >
-                {resetButtonText}
-              </button>,
-              {
-                keyOverride: 'reset-button'
-              }
-            )}
-          </div>
-        </div>,
-          {
-            className: 'mt-6 flex flex-col gap-4 p-5 md:p-6',
-            style: panelStyle,
-            keyOverride: 'result-wrapper'
-          }
-        )
-      ) : null}
+                : null}
+
+              {showShippingAddress && lookupOrder.shipping_address?.line
+                ? renderSelectableWrapper(
+                    shippingAddressWrapperBlock,
+                    <>
+                      <div className="mb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[#64748b]">
+                        {t('account.my_orders.detail.delivery_address')}
+                      </div>
+                      <div>
+                        {lookupOrder.shipping_address.line}{' '}
+                        {lookupOrder.shipping_address.district?.name}{' '}
+                        {lookupOrder.shipping_address.township?.name}{' '}
+                        {lookupOrder.shipping_address.city?.name}
+                      </div>
+                    </>,
+                    {
+                      className:
+                        'rounded-[12px] bg-[#f8fafc] p-4 text-sm leading-6 text-[#334155]',
+                      keyOverride: 'shipping-address'
+                    }
+                  )
+                : null}
+
+              {showOrderItems ? (
+                <div className="flex flex-col gap-3">
+                  <div className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[#64748b]">
+                    {t('account.my_orders.detail.products')}
+                  </div>
+                  {renderSelectableWrapper(
+                    itemsListWrapperBlock,
+                    visibleItems.map((item, index) =>
+                      renderSelectableWrapper(
+                        orderItemWrapperBlock,
+                        <>
+                          <div className="flex min-w-0 items-center gap-3">
+                            <div className="relative h-16 w-16 shrink-0 overflow-hidden rounded-[8px] bg-[#f1f5f9]">
+                              <Image
+                                src={item.product?.image || '/noimage.jpg'}
+                                alt={item.product?.name || ''}
+                                fill
+                                sizes="64px"
+                                aspectRatio={1}
+                                imageClassName="object-cover"
+                              />
+                            </div>
+                            <div className="min-w-0">
+                              <div className="truncate text-sm font-semibold text-[#0f172a]">
+                                {item.product?.name}
+                              </div>
+                              <div className="mt-1 text-xs text-[#64748b]">
+                                {t('account.my_orders.detail.items')}:{' '}
+                                {item.quantity}
+                                {' · '}
+                                {item.status?.label}
+                              </div>
+                            </div>
+                          </div>
+                          <div className="flex shrink-0 flex-col items-start text-sm md:items-end">
+                            {parseFloat(item.retail_price) >
+                            parseFloat(item.price) ? (
+                              <span className="text-xs text-[#94a3b8] line-through">
+                                {formatAmount(
+                                  item.retail_price,
+                                  item.price_currency
+                                )}
+                              </span>
+                            ) : null}
+                            <span className="font-semibold text-[#0f172a]">
+                              {formatAmount(item.price, item.price_currency)}
+                            </span>
+                          </div>
+                        </>,
+                        {
+                          className:
+                            'flex flex-col gap-3 p-4 md:flex-row md:items-center md:justify-between',
+                          keyOverride: `order-item-${item.id}-${index}`
+                        }
+                      )
+                    ),
+                    {
+                      className:
+                        'flex flex-col divide-y divide-[#e2e8f0] overflow-hidden rounded-[12px] border border-[#e2e8f0] bg-white',
+                      keyOverride: 'items-list-wrapper'
+                    }
+                  )}
+                </div>
+              ) : null}
+
+              <div className="pt-2">
+                {renderSelectableElement(
+                  resetButtonBlock,
+                  <button
+                    type="button"
+                    onClick={handleReset}
+                    style={resetButtonStyle}
+                  >
+                    {resetButtonText}
+                  </button>,
+                  {
+                    keyOverride: 'reset-button'
+                  }
+                )}
+              </div>
+            </div>,
+            {
+              className: 'mt-6 flex flex-col gap-4 p-5 md:p-6',
+              style: panelStyle,
+              keyOverride: 'result-wrapper'
+            }
+          )
+        : null}
     </div>
   );
 }

package/src/sections/posts-slider-section.tsx

@@ -13,6 +13,8 @@ import {
   getResponsiveValue
 } from '../utils';
 
+import { postToEditor } from '../editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 interface PostsSliderSectionProps {
   section: any;
   currentBreakpoint?: string;
@@ -55,9 +57,7 @@ const getNestedValue = (source: unknown, path: string): unknown => {
 const cloneBlock = (block: any): any => ({
   ...block,
   properties: block.properties ? { ...block.properties } : block.properties,
-  styles: block.styles
-    ? safeDeepClone(block.styles)
-    : block.styles,
+  styles: block.styles ? safeDeepClone(block.styles) : block.styles,
   blocks: block.blocks
     ? block.blocks.map((child: any) => cloneBlock(child))
     : undefined
@@ -378,20 +378,21 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
   const useInfinite = infinite && hasMultipleSlides;
   const useAutoPlay = autoPlay && hasMultipleSlides;
 
-  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 } : {})
+      }
+    });
   };
 
   if (expandedBlocks.length === 0) {