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

package/src/sections/installment-options-section.tsx

@@ -1,7 +1,10 @@
 'use client';
 
 import { Image } from '@akinon/next/components/image';
-import { useGetInstallmentsQuery, useGetProductByPkQuery } from '@akinon/next/data/client/product';
+import {
+  useGetInstallmentsQuery,
+  useGetProductByPkQuery
+} from '@akinon/next/data/client/product';
 import { useLocalization } from '@akinon/next/hooks';
 import clsx from 'clsx';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -18,6 +21,8 @@ import {
   resolveThemeCssVariables
 } from '../utils';
 
+import { postToEditor } from '../editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 interface InstallmentOptionsSectionProps {
   section: Section;
   currentBreakpoint?: string;
@@ -215,7 +220,9 @@ const parsePriceValue = (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> = {
@@ -421,8 +428,8 @@ export default function InstallmentOptionsSection({
     maxWidth === 'narrow'
       ? 'max-w-4xl'
       : maxWidth === 'normal'
-        ? 'max-w-7xl'
-        : '';
+      ? 'max-w-7xl'
+      : '';
   const hasMaxWidth = maxWidth !== 'none';
 
   const filteredStyles = Object.fromEntries(
@@ -558,11 +565,13 @@ export default function InstallmentOptionsSection({
     () => getCollectionProducts(section, isDesigner),
     [section, isDesigner]
   );
-  const collectionProduct = (sectionProducts[0] as ProductLike | undefined) || null;
+  const collectionProduct =
+    (sectionProducts[0] as ProductLike | undefined) || null;
   const propertyProductPk = parseProductPk(
     readStringProperty(section.properties, 'product-pk', '', currentBreakpoint)
   );
-  const resolvedProductPk = parseProductPk(collectionProduct?.pk) ?? propertyProductPk;
+  const resolvedProductPk =
+    parseProductPk(collectionProduct?.pk) ?? propertyProductPk;
 
   const shouldFetchProduct = !collectionProduct && resolvedProductPk !== null;
   // currentData (not data): data is sticky across args, so a cleared
@@ -588,15 +597,17 @@ export default function InstallmentOptionsSection({
     return fetchedProduct ?? null;
   }, [collectionProduct, productResponse]);
 
-  const usePlaceholderData = isDesigner && resolvedProductPk === null && !product;
+  const usePlaceholderData =
+    isDesigner && resolvedProductPk === null && !product;
 
   const installmentCards = useMemo<InstallmentCard[]>(() => {
     if (usePlaceholderData) {
       return PLACEHOLDER_INSTALLMENTS;
     }
-    return ((installmentsData as InstallmentResponse | undefined)?.results || []).filter(
-      (card): card is InstallmentCard =>
-        Boolean(card && card.slug && Array.isArray(card.installments))
+    return (
+      (installmentsData as InstallmentResponse | undefined)?.results || []
+    ).filter((card): card is InstallmentCard =>
+      Boolean(card && card.slug && Array.isArray(card.installments))
     );
   }, [installmentsData, usePlaceholderData]);
 
@@ -650,9 +661,7 @@ export default function InstallmentOptionsSection({
     currentBreakpoint
   );
 
-  const productName = String(
-    product?.name || PLACEHOLDER_PRODUCT.name
-  ).trim();
+  const productName = String(product?.name || PLACEHOLDER_PRODUCT.name).trim();
   const productUrl = String(
     product?.absolute_url || PLACEHOLDER_PRODUCT.absolute_url
   ).trim();
@@ -672,92 +681,75 @@ export default function InstallmentOptionsSection({
       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
+            }
+          });
         }
       }}
     />
   );
 
-  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 renderSelectableWrapper = (
@@ -836,67 +828,67 @@ export default function InstallmentOptionsSection({
             renderSelectableWrapper(
               productCardWrapperBlock,
               <>
-              <div className="mb-4 flex items-center justify-between gap-3">
-                <p className="m-0 text-xs font-bold uppercase tracking-[0.16em] text-[#64748b]">
-                  Selected Product
-                </p>
-                {productUrl && productUrl !== '#' && (
-                  <a
-                    href={productUrl}
-                    className="text-xs font-semibold text-[#0f172a] underline underline-offset-4"
-                  >
-                    View product
-                  </a>
-                )}
-              </div>
-
-              <div
-                className="rounded-[14px] border bg-white p-3"
-                style={{
-                  borderColor: productCardBorder
-                }}
-              >
-                <div className="relative mb-3 aspect-square w-full overflow-hidden rounded-[12px] bg-[#f8fafc]">
-                  {productImage ? (
-                    <Image
-                      src={productImage}
-                      alt={productName}
-                      fill
-                      sizes="280px"
-                      aspectRatio={1}
-                      imageClassName="object-cover"
-                    />
-                  ) : (
-                    <div className="flex h-full w-full items-center justify-center bg-[#e2e8f0] text-sm font-semibold tracking-wide text-[#64748b]">
-                      Product Preview
-                    </div>
+                <div className="mb-4 flex items-center justify-between gap-3">
+                  <p className="m-0 text-xs font-bold uppercase tracking-[0.16em] text-[#64748b]">
+                    Selected Product
+                  </p>
+                  {productUrl && productUrl !== '#' && (
+                    <a
+                      href={productUrl}
+                      className="text-xs font-semibold text-[#0f172a] underline underline-offset-4"
+                    >
+                      View product
+                    </a>
                   )}
                 </div>
 
-                <div className="flex min-w-0 flex-col gap-2">
-                  <p
-                    className="m-0 overflow-hidden text-[15px] font-medium leading-[1.45] text-[#0f172a]"
-                    style={{
-                      display: '-webkit-box',
-                      WebkitLineClamp: isMobile ? 3 : 2,
-                      WebkitBoxOrient: 'vertical'
-                    }}
-                  >
-                    {productName}
-                  </p>
+                <div
+                  className="rounded-[14px] border bg-white p-3"
+                  style={{
+                    borderColor: productCardBorder
+                  }}
+                >
+                  <div className="relative mb-3 aspect-square w-full overflow-hidden rounded-[12px] bg-[#f8fafc]">
+                    {productImage ? (
+                      <Image
+                        src={productImage}
+                        alt={productName}
+                        fill
+                        sizes="280px"
+                        aspectRatio={1}
+                        imageClassName="object-cover"
+                      />
+                    ) : (
+                      <div className="flex h-full w-full items-center justify-center bg-[#e2e8f0] text-sm font-semibold tracking-wide text-[#64748b]">
+                        Product Preview
+                      </div>
+                    )}
+                  </div>
 
-                  <div className="flex flex-wrap items-center gap-2">
-                    {productRetailPrice && (
-                      <span className="text-sm font-normal text-[#94a3b8] line-through">
-                        {productRetailPrice}
+                  <div className="flex min-w-0 flex-col gap-2">
+                    <p
+                      className="m-0 overflow-hidden text-[15px] font-medium leading-[1.45] text-[#0f172a]"
+                      style={{
+                        display: '-webkit-box',
+                        WebkitLineClamp: isMobile ? 3 : 2,
+                        WebkitBoxOrient: 'vertical'
+                      }}
+                    >
+                      {productName}
+                    </p>
+
+                    <div className="flex flex-wrap items-center gap-2">
+                      {productRetailPrice && (
+                        <span className="text-sm font-normal text-[#94a3b8] line-through">
+                          {productRetailPrice}
+                        </span>
+                      )}
+                      <span className="text-[17px] font-semibold text-[#0f172a]">
+                        {productPrice}
                       </span>
-                    )}
-                    <span className="text-[17px] font-semibold text-[#0f172a]">
-                      {productPrice}
-                    </span>
+                    </div>
                   </div>
                 </div>
-              </div>
               </>,
               {
                 className: 'min-w-0 border p-4',
@@ -912,143 +904,160 @@ export default function InstallmentOptionsSection({
           {renderSelectableWrapper(
             installmentPanelWrapperBlock,
             <>
-            {isLoading && !usePlaceholderData ? (
-              <div className="flex min-h-[220px] items-center justify-center">
-                <LoaderSpinner />
-              </div>
-            ) : installmentCards.length > 0 ? (
-              <>
-                {showCardLogos && (
-                  <div className="flex flex-wrap gap-2">
-                    {installmentCards.map((card) => {
-                      const isActive = activeCard?.slug === card.slug;
-                      return renderSelectableWrapper(
-                        logoCardWrapperBlock
-                          ? {
-                              ...logoCardWrapperBlock,
-                              id: `${logoCardWrapperBlock.id}-clone-${card.pk}`,
-                              styleSourceId:
-                                logoCardWrapperBlock.styleSourceId ||
-                                logoCardWrapperBlock.id
-                            }
-                          : null,
-                        (
-                        <button
-                          key={card.pk}
-                          type="button"
-                          onClick={() => setActiveCardSlug(card.slug)}
-                          className={clsx(
-                            'flex min-w-[72px] flex-1 items-center justify-center px-3 py-2 transition-colors lg:min-w-[96px] lg:flex-none',
-                            !logoCardWrapperBlock && 'border'
-                          )}
-                          style={{
-                            backgroundColor: logoCardWrapperBlock
-                              ? 'transparent'
-                              : isActive
+              {isLoading && !usePlaceholderData ? (
+                <div className="flex min-h-[220px] items-center justify-center">
+                  <LoaderSpinner />
+                </div>
+              ) : installmentCards.length > 0 ? (
+                <>
+                  {showCardLogos && (
+                    <div className="flex flex-wrap gap-2">
+                      {installmentCards.map((card) => {
+                        const isActive = activeCard?.slug === card.slug;
+                        return renderSelectableWrapper(
+                          logoCardWrapperBlock
+                            ? {
+                                ...logoCardWrapperBlock,
+                                id: `${logoCardWrapperBlock.id}-clone-${card.pk}`,
+                                styleSourceId:
+                                  logoCardWrapperBlock.styleSourceId ||
+                                  logoCardWrapperBlock.id
+                              }
+                            : null,
+                          <button
+                            key={card.pk}
+                            type="button"
+                            onClick={() => setActiveCardSlug(card.slug)}
+                            className={clsx(
+                              'flex min-w-[72px] flex-1 items-center justify-center px-3 py-2 transition-colors lg:min-w-[96px] lg:flex-none',
+                              !logoCardWrapperBlock && 'border'
+                            )}
+                            style={{
+                              backgroundColor: logoCardWrapperBlock
+                                ? 'transparent'
+                                : isActive
                                 ? logoCardActiveBackground
                                 : logoCardBackground,
-                            borderColor: logoCardWrapperBlock
-                              ? 'transparent'
-                              : isActive
+                              borderColor: logoCardWrapperBlock
+                                ? 'transparent'
+                                : isActive
                                 ? logoCardActiveBorder
                                 : logoCardBorder,
-                            borderRadius: logoCardWrapperBlock ? '0px' : '12px'
-                          }}
-                        >
-                          {card.card_type?.logo ? (
-                            <Image
-                              src={card.card_type.logo}
-                              alt={card.name}
-                              width={56}
-                              height={20}
-                              imageClassName={clsx(
-                                'h-auto max-h-5 w-auto max-w-full object-contain',
-                                !isActive && 'grayscale'
-                              )}
-                            />
-                          ) : (
-                            <span className="text-xs font-bold uppercase tracking-[0.16em] text-[#0f172a]">
-                              {getFallbackCardLabel(card.name)}
-                            </span>
-                          )}
-                        </button>
-                        ),
-                        {
-                          keyOverride: `installment-logo-card-${card.pk}`
-                        }
-                      );
-                    })}
-                  </div>
-                )}
-
-                {renderSelectableWrapper(
-                  tableWrapperBlock,
-                  <div
-                    className={clsx(
-                      'overflow-hidden rounded-[12px]',
-                      !tableWrapperBlock && 'border'
-                    )}
-                    style={{
-                      borderColor: tableRowBorderColor
-                    }}
-                  >
-                  <div
-                    className="grid grid-cols-3 gap-4 border-b px-4 py-3 text-xs font-bold uppercase tracking-[0.14em]"
-                    style={{
-                      borderColor: tableRowBorderColor,
-                      color: tableHeaderColor,
-                      backgroundColor: '#f8fafc'
-                    }}
-                  >
-                    <span>{t('product.number_of_installments')}</span>
-                    <span className="text-right">{t('product.monthly_amount')}</span>
-                    <span className="text-right">{t('product.total_amount')}</span>
-                  </div>
+                              borderRadius: logoCardWrapperBlock
+                                ? '0px'
+                                : '12px'
+                            }}
+                          >
+                            {card.card_type?.logo ? (
+                              <Image
+                                src={card.card_type.logo}
+                                alt={card.name}
+                                width={56}
+                                height={20}
+                                imageClassName={clsx(
+                                  'h-auto max-h-5 w-auto max-w-full object-contain',
+                                  !isActive && 'grayscale'
+                                )}
+                              />
+                            ) : (
+                              <span className="text-xs font-bold uppercase tracking-[0.16em] text-[#0f172a]">
+                                {getFallbackCardLabel(card.name)}
+                              </span>
+                            )}
+                          </button>,
+                          {
+                            keyOverride: `installment-logo-card-${card.pk}`
+                          }
+                        );
+                      })}
+                    </div>
+                  )}
 
-                  <div className="overflow-x-auto">
-                    {(activeCard?.installments || []).map((installment, index) => {
-                      const isHighlighted = highlightBestOption && index === 0;
-                      return (
-                        <div
-                          key={`${activeCard?.slug || 'card'}-${installment.installment_count}`}
-                          className="grid grid-cols-3 gap-4 border-b px-4 py-3 last:border-b-0"
-                          style={{
-                            borderColor: tableRowBorderColor,
-                            backgroundColor: isHighlighted
-                              ? highlightRowBackground
-                              : panelBackground,
-                            color: isHighlighted ? highlightRowText : '#0f172a'
-                          }}
-                        >
-                          <div className="min-w-0 text-sm font-semibold">
-                            {installment.installment_count === 1
-                              ? t('product.cash')
-                              : `${installment.installment_count} ${t('product.installment')}`}
-                          </div>
-                          <div className="text-right text-sm font-semibold">
-                            <Price value={installment.single_installment_amount} />
-                          </div>
-                          <div className="text-right text-sm font-semibold">
-                            <Price value={installment.total_amount} />
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                  </div>,
-                  {
-                    keyOverride: 'installment-table-wrapper'
-                  }
-                )}
-              </>
-            ) : (
-              <div
-                className="flex min-h-[220px] items-center justify-center rounded-[12px] border border-dashed px-6 text-center text-sm font-medium text-[#64748b]"
-                style={{ borderColor: panelBorder }}
-              >
-                {emptyStateText}
-              </div>
-            )}
+                  {renderSelectableWrapper(
+                    tableWrapperBlock,
+                    <div
+                      className={clsx(
+                        'overflow-hidden rounded-[12px]',
+                        !tableWrapperBlock && 'border'
+                      )}
+                      style={{
+                        borderColor: tableRowBorderColor
+                      }}
+                    >
+                      <div
+                        className="grid grid-cols-3 gap-4 border-b px-4 py-3 text-xs font-bold uppercase tracking-[0.14em]"
+                        style={{
+                          borderColor: tableRowBorderColor,
+                          color: tableHeaderColor,
+                          backgroundColor: '#f8fafc'
+                        }}
+                      >
+                        <span>{t('product.number_of_installments')}</span>
+                        <span className="text-right">
+                          {t('product.monthly_amount')}
+                        </span>
+                        <span className="text-right">
+                          {t('product.total_amount')}
+                        </span>
+                      </div>
+
+                      <div className="overflow-x-auto">
+                        {(activeCard?.installments || []).map(
+                          (installment, index) => {
+                            const isHighlighted =
+                              highlightBestOption && index === 0;
+                            return (
+                              <div
+                                key={`${activeCard?.slug || 'card'}-${
+                                  installment.installment_count
+                                }`}
+                                className="grid grid-cols-3 gap-4 border-b px-4 py-3 last:border-b-0"
+                                style={{
+                                  borderColor: tableRowBorderColor,
+                                  backgroundColor: isHighlighted
+                                    ? highlightRowBackground
+                                    : panelBackground,
+                                  color: isHighlighted
+                                    ? highlightRowText
+                                    : '#0f172a'
+                                }}
+                              >
+                                <div className="min-w-0 text-sm font-semibold">
+                                  {installment.installment_count === 1
+                                    ? t('product.cash')
+                                    : `${installment.installment_count} ${t(
+                                        'product.installment'
+                                      )}`}
+                                </div>
+                                <div className="text-right text-sm font-semibold">
+                                  <Price
+                                    value={
+                                      installment.single_installment_amount
+                                    }
+                                  />
+                                </div>
+                                <div className="text-right text-sm font-semibold">
+                                  <Price value={installment.total_amount} />
+                                </div>
+                              </div>
+                            );
+                          }
+                        )}
+                      </div>
+                    </div>,
+                    {
+                      keyOverride: 'installment-table-wrapper'
+                    }
+                  )}
+                </>
+              ) : (
+                <div
+                  className="flex min-h-[220px] items-center justify-center rounded-[12px] border border-dashed px-6 text-center text-sm font-medium text-[#64748b]"
+                  style={{ borderColor: panelBorder }}
+                >
+                  {emptyStateText}
+                </div>
+              )}
             </>,
             {
               className: 'flex min-w-0 flex-col gap-4 border p-4 lg:p-5',