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

package/components/theme-editor/sections/installment-options-section.tsx

@@ -0,0 +1,1065 @@
+'use client';
+
+import { Image } from '@akinon/next/components/image';
+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';
+
+import { LoaderSpinner } from '../../loader-spinner';
+import { Price } from '../../price';
+import ThemeBlock, { Block } from '../theme-block';
+import { WithDesignerFeatures } from '../components/with-designer-features';
+import { useThemeSettingsContext } from '../theme-settings-context';
+import { Section } from '../theme-section';
+import {
+  getCSSStyles,
+  getResponsiveValue,
+  resolveThemeCssVariables
+} from '../utils';
+
+interface InstallmentOptionsSectionProps {
+  section: Section;
+  currentBreakpoint?: string;
+  placeholderId?: string;
+  isDesigner?: boolean;
+  selectedBlockId?: string | null;
+}
+
+interface InstallmentPlan {
+  installment_count: number;
+  single_installment_amount: string;
+  total_amount: string;
+}
+
+interface InstallmentCard {
+  pk: number;
+  slug: string;
+  name: string;
+  card_type?: {
+    logo?: string;
+  };
+  installments: InstallmentPlan[];
+}
+
+interface InstallmentResponse {
+  results: InstallmentCard[];
+}
+
+type ProductLike = Record<string, unknown>;
+
+const PLACEHOLDER_PRODUCT = {
+  name: 'Premium Running Sneaker',
+  price: '4.999 TL',
+  retail_price: '5.699 TL',
+  currency_type: 'TRY',
+  absolute_url: '#'
+};
+
+const PLACEHOLDER_INSTALLMENTS: InstallmentCard[] = [
+  {
+    pk: 1,
+    slug: 'visa',
+    name: 'Visa',
+    installments: [
+      {
+        installment_count: 1,
+        single_installment_amount: '4.999',
+        total_amount: '4.999'
+      },
+      {
+        installment_count: 3,
+        single_installment_amount: '1.716,33',
+        total_amount: '5.149'
+      },
+      {
+        installment_count: 6,
+        single_installment_amount: '899,83',
+        total_amount: '5.399'
+      }
+    ]
+  },
+  {
+    pk: 2,
+    slug: 'mastercard',
+    name: 'Mastercard',
+    installments: [
+      {
+        installment_count: 1,
+        single_installment_amount: '4.999',
+        total_amount: '4.999'
+      },
+      {
+        installment_count: 4,
+        single_installment_amount: '1.337,25',
+        total_amount: '5.349'
+      },
+      {
+        installment_count: 8,
+        single_installment_amount: '706,12',
+        total_amount: '5.649'
+      }
+    ]
+  },
+  {
+    pk: 3,
+    slug: 'amex',
+    name: 'Amex',
+    installments: [
+      {
+        installment_count: 1,
+        single_installment_amount: '4.999',
+        total_amount: '4.999'
+      },
+      {
+        installment_count: 2,
+        single_installment_amount: '2.599,50',
+        total_amount: '5.199'
+      },
+      {
+        installment_count: 5,
+        single_installment_amount: '1.119,80',
+        total_amount: '5.599'
+      }
+    ]
+  }
+];
+
+const customStyleKeys = [
+  'max-width',
+  'panel-background-color',
+  'panel-border-color',
+  'panel-border-radius',
+  'product-card-background-color',
+  'product-card-border-color',
+  'logo-card-background-color',
+  'logo-card-border-color',
+  'logo-card-active-background-color',
+  'logo-card-active-border-color',
+  'table-header-color',
+  'table-row-border-color',
+  'highlight-row-background-color',
+  'highlight-row-text-color'
+];
+
+const readStringProperty = (
+  properties: Record<string, unknown> | undefined,
+  key: string,
+  fallback: string,
+  breakpoint: string
+): string => {
+  const value = getResponsiveValue(properties?.[key], breakpoint, fallback);
+  if (value == null) return fallback;
+  return String(value);
+};
+
+const readBooleanProperty = (
+  properties: Record<string, unknown> | undefined,
+  key: string,
+  fallback: boolean,
+  breakpoint: string
+): boolean => {
+  const value = getResponsiveValue(properties?.[key], breakpoint, fallback);
+  if (typeof value === 'boolean') return value;
+  if (typeof value === 'string') {
+    const normalized = value.trim().toLowerCase();
+    if (normalized === 'true') return true;
+    if (normalized === 'false') return false;
+  }
+  return fallback;
+};
+
+const readStyleValue = (
+  styles: Record<string, unknown> | undefined,
+  key: string,
+  fallback: string,
+  breakpoint: string,
+  themeSettings: Record<string, unknown>
+): string => {
+  return resolveThemeCssVariables(
+    String(getResponsiveValue(styles?.[key], breakpoint, fallback)),
+    themeSettings
+  );
+};
+
+const parsePriceValue = (value: unknown): number | null => {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+
+  if (typeof value !== 'string') return null;
+  const cleaned = value.trim().replace(/[^\d,.-]/g, '');
+  if (!cleaned) return null;
+
+  let normalized = cleaned;
+  const hasComma = normalized.includes(',');
+  const hasDot = normalized.includes('.');
+
+  if (hasComma && hasDot) {
+    const lastComma = normalized.lastIndexOf(',');
+    const lastDot = normalized.lastIndexOf('.');
+    normalized =
+      lastComma > lastDot
+        ? normalized.replace(/\./g, '').replace(',', '.')
+        : normalized.replace(/,/g, '');
+  } else if (hasComma) {
+    const unsigned = normalized.replace(/^-/, '');
+    const isThousandsPattern = /^\d{1,3}(,\d{3})+$/.test(unsigned);
+    normalized = isThousandsPattern
+      ? normalized.replace(/,/g, '')
+      : normalized.replace(/,/g, '.');
+  }
+
+  const parsed = Number(normalized);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+const normalizeCurrencyLabel = (currency: unknown): string => {
+  const raw = String(currency || '').trim().toUpperCase();
+  if (!raw) return 'TL';
+
+  const map: Record<string, string> = {
+    TRY: 'TL',
+    TL: 'TL',
+    USD: 'USD',
+    EUR: 'EUR',
+    GBP: 'GBP'
+  };
+
+  return map[raw] || raw;
+};
+
+const formatPriceWithCurrency = (
+  value: unknown,
+  currency: unknown
+): string | null => {
+  if (value == null || value === '') return null;
+
+  const price = parsePriceValue(value);
+  if (price === null) {
+    const text = String(value).trim();
+    return text || null;
+  }
+
+  const hasDecimals = Math.abs(price % 1) > 0.00001;
+  const formatted = price.toLocaleString('tr-TR', {
+    minimumFractionDigits: hasDecimals ? 2 : 0,
+    maximumFractionDigits: 2
+  });
+
+  return `${formatted} ${normalizeCurrencyLabel(currency)}`;
+};
+
+const getCollectionProducts = (
+  section: Section,
+  isDesigner: boolean
+): ProductLike[] => {
+  const collectionDetails = section.dataSource?.details?.collection;
+  const staticData = section.dataSource?.details?.static?.data;
+  const isEditorMode =
+    typeof window !== 'undefined' && isDesigner && window.parent !== window;
+
+  const collectionPayload = isEditorMode
+    ? collectionDetails?.products || collectionDetails?.data
+    : collectionDetails?.data || collectionDetails?.products;
+
+  if (Array.isArray(collectionPayload)) {
+    return collectionPayload as ProductLike[];
+  }
+
+  if (Array.isArray((collectionPayload as ProductLike | undefined)?.products)) {
+    return (collectionPayload as ProductLike).products as ProductLike[];
+  }
+
+  if (Array.isArray((collectionPayload as ProductLike | undefined)?.items)) {
+    return (collectionPayload as ProductLike).items as ProductLike[];
+  }
+
+  if (Array.isArray(staticData)) {
+    return staticData as ProductLike[];
+  }
+
+  return [];
+};
+
+const parseProductPk = (value: unknown): number | null => {
+  const raw = String(value ?? '').trim();
+  if (!raw) return null;
+  const parsed = Number.parseInt(raw, 10);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+const getProductImage = (product: ProductLike | null): string | null => {
+  if (!product) return null;
+
+  if (typeof product.image === 'string' && product.image) {
+    return product.image;
+  }
+
+  const imageSet = product.productimage_set;
+  if (Array.isArray(imageSet)) {
+    const firstImage = imageSet[0] as ProductLike | undefined;
+    if (typeof firstImage?.image === 'string' && firstImage.image) {
+      return firstImage.image;
+    }
+  }
+
+  return null;
+};
+
+const getProductPrice = (product: ProductLike | null): string | null => {
+  if (!product) return null;
+  const activePrice = (product.active_price as ProductLike | undefined) || {};
+  return formatPriceWithCurrency(
+    activePrice.price ?? product.price,
+    activePrice.currency_type ?? product.currency_type
+  );
+};
+
+const getProductRetailPrice = (product: ProductLike | null): string | null => {
+  if (!product) return null;
+  const activePrice = (product.active_price as ProductLike | undefined) || {};
+  const retailValue = activePrice.retail_price ?? product.retail_price;
+  const currentValue = activePrice.price ?? product.price;
+  const retailPrice = parsePriceValue(retailValue);
+  const currentPrice = parsePriceValue(currentValue);
+
+  if (
+    retailPrice === null ||
+    currentPrice === null ||
+    retailPrice <= currentPrice
+  ) {
+    return null;
+  }
+
+  return formatPriceWithCurrency(
+    retailValue,
+    activePrice.currency_type ?? product.currency_type
+  );
+};
+
+const getFallbackCardLabel = (name: string): string => {
+  const words = name
+    .split(/\s+/)
+    .map((part) => part.trim())
+    .filter(Boolean);
+
+  if (words.length === 0) return 'CARD';
+  if (words.length === 1) return words[0].slice(0, 4).toUpperCase();
+
+  return words
+    .slice(0, 2)
+    .map((word) => word[0])
+    .join('')
+    .toUpperCase();
+};
+
+const resolveResponsiveString = (
+  value: unknown,
+  breakpoint: string
+): string => {
+  if (typeof value === 'string') return value;
+
+  if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+    const responsiveValue = getResponsiveValue(value, breakpoint, '');
+    if (typeof responsiveValue === 'string') {
+      return responsiveValue;
+    }
+  }
+
+  return '';
+};
+
+const getInstallmentRole = (
+  block: Pick<Block, 'properties'>,
+  breakpoint: string
+): string =>
+  resolveResponsiveString(block.properties?.installmentRole, breakpoint);
+
+const findInstallmentRoleBlock = (
+  blocks: Block[],
+  role: string,
+  breakpoint: string
+): Block | null => {
+  for (const block of blocks) {
+    if (getInstallmentRole(block, breakpoint) === role) {
+      return block;
+    }
+
+    if (block.blocks?.length) {
+      const nestedMatch = findInstallmentRoleBlock(
+        block.blocks,
+        role,
+        breakpoint
+      );
+      if (nestedMatch) {
+        return nestedMatch;
+      }
+    }
+  }
+
+  return null;
+};
+
+export default function InstallmentOptionsSection({
+  section,
+  currentBreakpoint = 'desktop',
+  placeholderId = '',
+  isDesigner = false,
+  selectedBlockId = null
+}: InstallmentOptionsSectionProps) {
+  const themeSettings = useThemeSettingsContext();
+  const { t } = useLocalization();
+  const isMobile = currentBreakpoint === 'mobile';
+
+  const maxWidth = getResponsiveValue(
+    section.styles?.['max-width'],
+    currentBreakpoint,
+    'normal'
+  );
+  const maxWidthClass =
+    maxWidth === 'narrow'
+      ? 'max-w-4xl'
+      : maxWidth === 'normal'
+        ? 'max-w-7xl'
+        : '';
+  const hasMaxWidth = maxWidth !== 'none';
+
+  const filteredStyles = Object.fromEntries(
+    Object.entries(section.styles || {}).filter(
+      ([key]) => !customStyleKeys.includes(key)
+    )
+  );
+
+  const sectionStyles = getCSSStyles(
+    filteredStyles,
+    themeSettings,
+    currentBreakpoint
+  );
+
+  const showProductCard = readBooleanProperty(
+    section.properties,
+    'show-product-card',
+    true,
+    currentBreakpoint
+  );
+  const showCardLogos = readBooleanProperty(
+    section.properties,
+    'show-card-logos',
+    true,
+    currentBreakpoint
+  );
+  const highlightBestOption = readBooleanProperty(
+    section.properties,
+    'highlight-best-option',
+    true,
+    currentBreakpoint
+  );
+  const emptyStateText = readStringProperty(
+    section.properties,
+    'empty-state-text',
+    'Installment options not available for this product.',
+    currentBreakpoint
+  );
+
+  const panelBackground = readStyleValue(
+    section.styles,
+    'panel-background-color',
+    '#ffffff',
+    currentBreakpoint,
+    themeSettings
+  );
+  const panelBorder = readStyleValue(
+    section.styles,
+    'panel-border-color',
+    '#e2e8f0',
+    currentBreakpoint,
+    themeSettings
+  );
+  const panelRadius = readStyleValue(
+    section.styles,
+    'panel-border-radius',
+    '16px',
+    currentBreakpoint,
+    themeSettings
+  );
+  const productCardBackground = readStyleValue(
+    section.styles,
+    'product-card-background-color',
+    '#f8fafc',
+    currentBreakpoint,
+    themeSettings
+  );
+  const productCardBorder = readStyleValue(
+    section.styles,
+    'product-card-border-color',
+    '#e2e8f0',
+    currentBreakpoint,
+    themeSettings
+  );
+  const logoCardBackground = readStyleValue(
+    section.styles,
+    'logo-card-background-color',
+    '#ffffff',
+    currentBreakpoint,
+    themeSettings
+  );
+  const logoCardBorder = readStyleValue(
+    section.styles,
+    'logo-card-border-color',
+    '#e2e8f0',
+    currentBreakpoint,
+    themeSettings
+  );
+  const logoCardActiveBackground = readStyleValue(
+    section.styles,
+    'logo-card-active-background-color',
+    '#eff6ff',
+    currentBreakpoint,
+    themeSettings
+  );
+  const logoCardActiveBorder = readStyleValue(
+    section.styles,
+    'logo-card-active-border-color',
+    '#0f172a',
+    currentBreakpoint,
+    themeSettings
+  );
+  const tableHeaderColor = readStyleValue(
+    section.styles,
+    'table-header-color',
+    '#64748b',
+    currentBreakpoint,
+    themeSettings
+  );
+  const tableRowBorderColor = readStyleValue(
+    section.styles,
+    'table-row-border-color',
+    '#e2e8f0',
+    currentBreakpoint,
+    themeSettings
+  );
+  const highlightRowBackground = readStyleValue(
+    section.styles,
+    'highlight-row-background-color',
+    '#ecfdf5',
+    currentBreakpoint,
+    themeSettings
+  );
+  const highlightRowText = readStyleValue(
+    section.styles,
+    'highlight-row-text-color',
+    '#166534',
+    currentBreakpoint,
+    themeSettings
+  );
+
+  const sectionProducts = useMemo(
+    () => getCollectionProducts(section, isDesigner),
+    [section, isDesigner]
+  );
+  const collectionProduct = (sectionProducts[0] as ProductLike | undefined) || null;
+  const propertyProductPk = parseProductPk(
+    readStringProperty(section.properties, 'product-pk', '', currentBreakpoint)
+  );
+  const resolvedProductPk = parseProductPk(collectionProduct?.pk) ?? propertyProductPk;
+
+  const shouldFetchProduct = !collectionProduct && resolvedProductPk !== null;
+  const { data: productResponse } = useGetProductByPkQuery(
+    resolvedProductPk as number,
+    {
+      skip: !shouldFetchProduct
+    }
+  );
+  const { data: installmentsData, isLoading } = useGetInstallmentsQuery(
+    resolvedProductPk as number,
+    {
+      skip: resolvedProductPk === null
+    }
+  );
+
+  const product = useMemo<ProductLike | null>((): ProductLike | null => {
+    if (collectionProduct) return collectionProduct;
+    const fetchedProduct = (
+      productResponse as { product?: ProductLike } | undefined
+    )?.product;
+    return fetchedProduct ?? null;
+  }, [collectionProduct, productResponse]);
+
+  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))
+    );
+  }, [installmentsData, usePlaceholderData]);
+
+  const [activeCardSlug, setActiveCardSlug] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (installmentCards.length === 0) {
+      setActiveCardSlug(null);
+      return;
+    }
+
+    const hasCurrentCard = installmentCards.some(
+      (card) => card.slug === activeCardSlug
+    );
+
+    if (!hasCurrentCard) {
+      setActiveCardSlug(installmentCards[0].slug);
+    }
+  }, [activeCardSlug, installmentCards]);
+
+  const activeCard =
+    installmentCards.find((card) => card.slug === activeCardSlug) ||
+    installmentCards[0] ||
+    null;
+
+  const sortedBlocks = [...(section.blocks || [])]
+    .sort((a, b) => (a.order || 0) - (b.order || 0))
+    .filter((block) => (isDesigner ? true : !block.hidden));
+
+  const contentBlocks = sortedBlocks.filter(
+    (block) => !getInstallmentRole(block, currentBreakpoint)
+  );
+  const productCardWrapperBlock = findInstallmentRoleBlock(
+    sortedBlocks,
+    'product-card-wrapper',
+    currentBreakpoint
+  );
+  const installmentPanelWrapperBlock = findInstallmentRoleBlock(
+    sortedBlocks,
+    'installment-panel-wrapper',
+    currentBreakpoint
+  );
+  const logoCardWrapperBlock = findInstallmentRoleBlock(
+    sortedBlocks,
+    'logo-card-wrapper',
+    currentBreakpoint
+  );
+  const tableWrapperBlock = findInstallmentRoleBlock(
+    sortedBlocks,
+    'table-wrapper',
+    currentBreakpoint
+  );
+
+  const productName = String(
+    product?.name || PLACEHOLDER_PRODUCT.name
+  ).trim();
+  const productUrl = String(
+    product?.absolute_url || PLACEHOLDER_PRODUCT.absolute_url
+  ).trim();
+  const productImage = getProductImage(product);
+  const productPrice = getProductPrice(product) || PLACEHOLDER_PRODUCT.price;
+  const productRetailPrice = getProductRetailPrice(product);
+
+  const renderBlock = (block: Block) => (
+    <ThemeBlock
+      key={block.id}
+      block={block}
+      placeholderId={placeholderId}
+      sectionId={section.id}
+      isDesigner={isDesigner}
+      isSelected={selectedBlockId === block.id}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+      onMoveUp={() => {
+        if (window.parent) {
+          window.parent.postMessage(
+            {
+              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 }
+            },
+            '*'
+          );
+        }
+      }}
+      onDuplicate={() => {
+        if (window.parent) {
+          window.parent.postMessage(
+            {
+              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 }
+            },
+            '*'
+          );
+        }
+      }}
+      onDelete={() => {
+        if (window.parent) {
+          window.parent.postMessage(
+            {
+              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
+              }
+            },
+            '*'
+          );
+        }
+      }}
+    />
+  );
+
+  const postBlockAction = (type: string, blockId: string, label?: string) => {
+    if (!window.parent) return;
+    window.parent.postMessage(
+      {
+        type,
+        data: {
+          placeholderId,
+          sectionId: section.id,
+          blockId,
+          ...(label ? { label } : {})
+        }
+      },
+      '*'
+    );
+  };
+
+  const renderSelectableWrapper = (
+    block: Block | null,
+    children: React.ReactNode,
+    options: {
+      className?: string;
+      style?: React.CSSProperties;
+      keyOverride?: string;
+    } = {}
+  ) => {
+    if (!block) {
+      return (
+        <div
+          key={options.keyOverride}
+          className={options.className}
+          style={options.style}
+        >
+          {children}
+        </div>
+      );
+    }
+
+    const actionBlockId = block.styleSourceId || block.id;
+    const wrapperStyle = {
+      ...getCSSStyles(block.styles || {}, themeSettings, currentBreakpoint),
+      ...(options.style || {})
+    } as React.CSSProperties;
+
+    return (
+      <WithDesignerFeatures
+        key={options.keyOverride || block.id}
+        block={block}
+        placeholderId={placeholderId}
+        sectionId={section.id}
+        isDesigner={isDesigner}
+        isSelected={
+          selectedBlockId === actionBlockId || selectedBlockId === block.id
+        }
+        currentBreakpoint={currentBreakpoint}
+        className={options.className}
+        style={wrapperStyle}
+        onMoveUp={() => postBlockAction('MOVE_BLOCK_UP', actionBlockId)}
+        onMoveDown={() => postBlockAction('MOVE_BLOCK_DOWN', actionBlockId)}
+        onDuplicate={() => postBlockAction('DUPLICATE_BLOCK', actionBlockId)}
+        onToggleVisibility={() =>
+          postBlockAction('TOGGLE_BLOCK_VISIBILITY', actionBlockId)
+        }
+        onDelete={() => postBlockAction('DELETE_BLOCK', actionBlockId)}
+        onRename={(newLabel) =>
+          postBlockAction('RENAME_BLOCK', actionBlockId, newLabel)
+        }
+      >
+        {children}
+      </WithDesignerFeatures>
+    );
+  };
+
+  return (
+    <div
+      className={hasMaxWidth ? `mx-auto ${maxWidthClass}` : undefined}
+      style={sectionStyles}
+    >
+      <div className="flex flex-col gap-4">
+        {contentBlocks.map(renderBlock)}
+
+        <div
+          className={clsx(
+            'grid gap-4',
+            !showProductCard || isMobile
+              ? 'grid-cols-1'
+              : 'grid-cols-[300px_1fr]'
+          )}
+        >
+          {showProductCard &&
+            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>
+
+                <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>
+                  </div>
+                </div>
+              </div>
+              </>,
+              {
+                className: 'min-w-0 border p-4',
+                style: {
+                  backgroundColor: productCardBackground,
+                  borderColor: productCardBorder,
+                  borderRadius: panelRadius
+                },
+                keyOverride: 'installment-product-card-wrapper'
+              }
+            )}
+
+          {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
+                                ? logoCardActiveBackground
+                                : logoCardBackground,
+                            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>
+
+                  <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',
+              style: {
+                backgroundColor: panelBackground,
+                borderColor: panelBorder,
+                borderRadius: panelRadius
+              },
+              keyOverride: 'installment-panel-wrapper'
+            }
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}