@akinon/pz-theme 2.0.0-beta.21

package/src/sections/pre-order-launch-banner-section.tsx

@@ -0,0 +1,687 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { useGetProductByPkQuery } from '@akinon/next/data/client/product';
+
+import ThemeBlock, { Block } from '../theme-block';
+import { useThemeSettingsContext } from '../theme-settings-context';
+import { Section } from '../theme-section';
+import { getCSSStyles, getResponsiveValue } from '../utils';
+
+interface PreOrderLaunchBannerSectionProps {
+  section: Section;
+  currentBreakpoint?: string;
+  placeholderId?: string;
+  isDesigner?: boolean;
+  selectedBlockId?: string | null;
+}
+
+type CountdownUnit = 'days' | 'hours' | 'minutes' | 'seconds';
+
+type CountdownValues = Record<CountdownUnit, string>;
+
+const parseBoolean = (value: unknown, fallback: boolean): boolean => {
+  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;
+  }
+  if (typeof value === 'number') return value !== 0;
+  return fallback;
+};
+
+const resolvePath = (
+  source: Record<string, unknown> | undefined,
+  path: string
+): unknown => {
+  if (!source || !path) return undefined;
+
+  const normalizedPath = path.replace(/^item\./, '');
+  const pathParts = normalizedPath.split('.');
+  let value: unknown = source;
+
+  for (const part of pathParts) {
+    const arrayMatch = part.match(/^(.+)\[(\d+)\]$/);
+    if (arrayMatch) {
+      const [, arrayKey, indexText] = arrayMatch;
+      const arrayValue = (value as Record<string, unknown>)?.[arrayKey];
+      value = Array.isArray(arrayValue)
+        ? arrayValue[Number(indexText)]
+        : undefined;
+    } else {
+      value = (value as Record<string, unknown>)?.[part];
+    }
+
+    if (value === undefined || value === null) {
+      return undefined;
+    }
+  }
+
+  return value;
+};
+
+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 parsePositiveInt = (value: unknown): number | null => {
+  if (typeof value === 'number' && Number.isFinite(value) && value > 0) {
+    return value;
+  }
+
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (!/^\d+$/.test(trimmed)) return null;
+    const parsed = Number.parseInt(trimmed, 10);
+    return parsed > 0 ? parsed : null;
+  }
+
+  return 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 parseDateValue = (value: unknown): Date | null => {
+  if (value === undefined || value === null || value === '') return null;
+
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? null : value;
+  }
+
+  if (typeof value === 'number') {
+    const timestamp = value < 10_000_000_000 ? value * 1000 : value;
+    const date = new Date(timestamp);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  if (typeof value !== 'string') return null;
+
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+
+  if (/^\d+$/.test(trimmed)) {
+    const numeric = Number(trimmed);
+    if (!Number.isFinite(numeric)) return null;
+    const timestamp = numeric < 10_000_000_000 ? numeric * 1000 : numeric;
+    const date = new Date(timestamp);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  const parsed = new Date(trimmed);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+};
+
+const formatTwoDigits = (value: number) =>
+  String(Math.max(0, value)).padStart(2, '0');
+
+const getRemainingTime = (
+  launchDate: Date | null
+): { isLaunched: boolean; values: CountdownValues } => {
+  const emptyValues = {
+    days: '00',
+    hours: '00',
+    minutes: '00',
+    seconds: '00'
+  };
+
+  if (!launchDate) {
+    return { isLaunched: false, values: emptyValues };
+  }
+
+  const diffMs = launchDate.getTime() - Date.now();
+  if (diffMs <= 0) {
+    return { isLaunched: true, values: emptyValues };
+  }
+
+  const totalSeconds = Math.floor(diffMs / 1000);
+  const days = Math.floor(totalSeconds / (60 * 60 * 24));
+  const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60));
+  const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
+  const seconds = totalSeconds % 60;
+
+  return {
+    isLaunched: false,
+    values: {
+      days: formatTwoDigits(days),
+      hours: formatTwoDigits(hours),
+      minutes: formatTwoDigits(minutes),
+      seconds: formatTwoDigits(seconds)
+    }
+  };
+};
+
+const formatLaunchDate = (value: Date | null): string | null => {
+  if (!value) return null;
+
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric'
+  }).format(value);
+};
+
+const getCollectionProducts = (
+  section: Section,
+  isDesigner: boolean
+): Record<string, unknown>[] => {
+  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 Record<string, unknown>[];
+  }
+
+  if (Array.isArray((collectionPayload as Record<string, unknown>)?.products)) {
+    return (collectionPayload as Record<string, unknown>).products as Record<
+      string,
+      unknown
+    >[];
+  }
+
+  if (Array.isArray((collectionPayload as Record<string, unknown>)?.items)) {
+    return (collectionPayload as Record<string, unknown>).items as Record<
+      string,
+      unknown
+    >[];
+  }
+
+  if (Array.isArray(staticData)) {
+    return staticData as Record<string, unknown>[];
+  }
+
+  return [];
+};
+
+const getProductLaunchDate = (
+  product: Record<string, unknown> | undefined
+): Date | null => {
+  if (!product) return null;
+
+  const candidatePaths = [
+    'pre_order.launch_date',
+    'pre_order.release_date',
+    'launch_date',
+    'release_date',
+    'expected_release_date',
+    'expected_ship_date',
+    'available_at',
+    'extra_attributes.launch_date',
+    'extra_attributes.release_date',
+    'extra_attributes.expected_release_date',
+    'extra_data.launch_date',
+    'extra_data.release_date',
+    'extra_data.expected_release_date'
+  ];
+
+  for (const path of candidatePaths) {
+    const resolved = resolvePath(product, path);
+    const parsed = parseDateValue(resolved);
+    if (parsed) {
+      return parsed;
+    }
+  }
+
+  return null;
+};
+
+export default function PreOrderLaunchBannerSection({
+  section,
+  currentBreakpoint = 'desktop',
+  placeholderId = '',
+  isDesigner = false,
+  selectedBlockId = null
+}: PreOrderLaunchBannerSectionProps) {
+  const themeSettings = useThemeSettingsContext();
+
+  const maxWidth = getResponsiveValue(
+    section.styles?.['max-width'],
+    currentBreakpoint,
+    'normal'
+  );
+  const maxWidthClass =
+    maxWidth === 'narrow'
+      ? 'max-w-4xl'
+      : maxWidth === 'normal'
+      ? 'max-w-7xl'
+      : maxWidth === 'full'
+      ? 'w-full'
+      : '';
+  const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
+
+  const filteredStyles = Object.fromEntries(
+    Object.entries(section.styles || {}).filter(([key]) => key !== 'max-width')
+  );
+
+  const sectionStyles = useMemo<React.CSSProperties>(() => {
+    const baseStyles = getCSSStyles(
+      filteredStyles,
+      themeSettings,
+      currentBreakpoint
+    );
+    const reverseLayout = parseBoolean(
+      getResponsiveValue(section.properties?.reverse, currentBreakpoint, false),
+      false
+    );
+
+    if (!reverseLayout) {
+      return baseStyles;
+    }
+
+    return {
+      ...baseStyles,
+      flexDirection:
+        currentBreakpoint === 'mobile' ? 'column-reverse' : 'row-reverse'
+    };
+  }, [
+    currentBreakpoint,
+    filteredStyles,
+    section.properties?.reverse,
+    themeSettings
+  ]);
+
+  const products = useMemo(
+    () => getCollectionProducts(section, isDesigner),
+    [section, isDesigner]
+  );
+  const fallbackProductPk = parsePositiveInt(
+    getResponsiveValue(
+      section.properties?.['product-pk'],
+      currentBreakpoint,
+      ''
+    )
+  );
+  const { data: fallbackProductResponse } = useGetProductByPkQuery(
+    fallbackProductPk as number,
+    {
+      skip: products.length > 0 || !fallbackProductPk
+    }
+  );
+  const product =
+    products[0] ||
+    ((fallbackProductResponse?.product as
+      | Record<string, unknown>
+      | undefined) ??
+      undefined);
+
+  const propertyLaunchDate = getResponsiveValue(
+    section.properties?.['launch-date'],
+    currentBreakpoint,
+    ''
+  );
+  const launchDate = useMemo(
+    () => parseDateValue(propertyLaunchDate) || getProductLaunchDate(product),
+    [product, propertyLaunchDate]
+  );
+  const launchDateText = useMemo(
+    () => formatLaunchDate(launchDate),
+    [launchDate]
+  );
+
+  const showCountdown = parseBoolean(
+    getResponsiveValue(
+      section.properties?.['show-countdown'],
+      currentBreakpoint,
+      true
+    ),
+    true
+  );
+  const showPrice = parseBoolean(
+    getResponsiveValue(
+      section.properties?.['show-price'],
+      currentBreakpoint,
+      true
+    ),
+    true
+  );
+  const showOldPrice = parseBoolean(
+    getResponsiveValue(
+      section.properties?.['show-old-price'],
+      currentBreakpoint,
+      true
+    ),
+    true
+  );
+
+  const upcomingStatusText = String(
+    getResponsiveValue(
+      section.properties?.['upcoming-status-text'],
+      currentBreakpoint,
+      'Pre-order open'
+    ) || 'Pre-order open'
+  );
+  const launchedStatusText = String(
+    getResponsiveValue(
+      section.properties?.['launched-status-text'],
+      currentBreakpoint,
+      'Now shipping'
+    ) || 'Now shipping'
+  );
+
+  const [countdown, setCountdown] = useState(() =>
+    getRemainingTime(launchDate)
+  );
+
+  useEffect(() => {
+    const tick = () => setCountdown(getRemainingTime(launchDate));
+    tick();
+
+    if (!launchDate || !showCountdown) return;
+
+    const intervalId = window.setInterval(tick, 1000);
+    return () => window.clearInterval(intervalId);
+  }, [launchDate, showCountdown]);
+
+  const activePrice =
+    (product?.active_price as Record<string, unknown> | undefined) || {};
+  const currentPriceRaw = activePrice?.price ?? product?.price;
+  const retailPriceRaw = activePrice?.retail_price ?? product?.retail_price;
+  const currency =
+    activePrice?.currency_type ?? product?.currency_type ?? product?.currency;
+  const currentPrice = parsePriceValue(currentPriceRaw);
+  const retailPrice = parsePriceValue(retailPriceRaw);
+  const currentPriceText = formatPriceWithCurrency(currentPriceRaw, currency);
+  const retailPriceText = formatPriceWithCurrency(retailPriceRaw, currency);
+  const hasRetailPrice =
+    Boolean(retailPriceText) &&
+    retailPrice !== null &&
+    currentPrice !== null &&
+    retailPrice > currentPrice;
+
+  const normalizedBlocks = useMemo(() => {
+    const cloneWithProduct = (block: Block): Block | null => {
+      const normalizedLabel = String(block.label || '').toLowerCase();
+
+      if (
+        normalizedLabel === 'countdown group' &&
+        (!showCountdown || !launchDate)
+      ) {
+        return null;
+      }
+
+      if (normalizedLabel === 'price group' && !showPrice) {
+        return null;
+      }
+
+      if (
+        normalizedLabel === 'product old price' &&
+        (!showOldPrice || !hasRetailPrice)
+      ) {
+        return null;
+      }
+
+      const nextBlock: Block = {
+        ...block,
+        properties: block.properties
+          ? { ...block.properties }
+          : block.properties,
+        styles: block.styles
+          ? JSON.parse(JSON.stringify(block.styles))
+          : block.styles,
+        blocks: undefined
+      };
+
+      if (normalizedLabel === 'launch status badge') {
+        nextBlock.value = countdown.isLaunched
+          ? launchedStatusText
+          : upcomingStatusText;
+      } else if (normalizedLabel === 'launch date value' && launchDateText) {
+        nextBlock.value = launchDateText;
+      } else if (normalizedLabel === 'days value' && launchDate) {
+        nextBlock.value = countdown.values.days;
+      } else if (normalizedLabel === 'hours value' && launchDate) {
+        nextBlock.value = countdown.values.hours;
+      } else if (normalizedLabel === 'minutes value' && launchDate) {
+        nextBlock.value = countdown.values.minutes;
+      } else if (normalizedLabel === 'seconds value' && launchDate) {
+        nextBlock.value = countdown.values.seconds;
+      } else if (normalizedLabel === 'product price' && currentPriceText) {
+        nextBlock.value = currentPriceText;
+      } else if (normalizedLabel === 'product old price' && retailPriceText) {
+        nextBlock.value = retailPriceText;
+      } else if (normalizedLabel === 'primary cta' && product?.absolute_url) {
+        nextBlock.properties = {
+          ...(nextBlock.properties || {}),
+          url: product.absolute_url
+        };
+      }
+
+      const bindingPath = nextBlock.properties?.dataBinding;
+      if (bindingPath && product) {
+        const boundValue = resolvePath(product, String(bindingPath));
+
+        if (boundValue !== undefined) {
+          if (nextBlock.type === 'button') {
+            nextBlock.properties = {
+              ...(nextBlock.properties || {}),
+              url: boundValue
+            };
+          } else if (
+            nextBlock.type === 'text' &&
+            ![
+              'launch date value',
+              'launch status badge',
+              'days value',
+              'hours value',
+              'minutes value',
+              'seconds value',
+              'product price',
+              'product old price'
+            ].includes(normalizedLabel)
+          ) {
+            nextBlock.value = boundValue;
+          } else if (nextBlock.type === 'image') {
+            nextBlock.value = boundValue;
+          }
+        } else if (nextBlock.type === 'image') {
+          const fallbackImage = resolvePath(
+            product,
+            'productimage_set[0].image'
+          );
+          if (fallbackImage !== undefined) {
+            nextBlock.value = fallbackImage;
+          }
+        }
+      }
+
+      if (block.blocks?.length) {
+        nextBlock.blocks = block.blocks
+          .map(cloneWithProduct)
+          .filter(Boolean) as Block[];
+      }
+
+      return nextBlock;
+    };
+
+    return (section.blocks || [])
+      .sort((a, b) => (a.order || 0) - (b.order || 0))
+      .map(cloneWithProduct)
+      .filter(Boolean) as Block[];
+  }, [
+    countdown.isLaunched,
+    countdown.values.days,
+    countdown.values.hours,
+    countdown.values.minutes,
+    countdown.values.seconds,
+    currentPriceText,
+    hasRetailPrice,
+    launchDate,
+    launchDateText,
+    launchedStatusText,
+    product,
+    retailPriceText,
+    section.blocks,
+    showCountdown,
+    showOldPrice,
+    showPrice,
+    upcomingStatusText
+  ]);
+
+  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
+              }
+            },
+            '*'
+          );
+        }
+      }}
+    />
+  );
+
+  return (
+    <div
+      className={`w-full ${
+        hasMaxWidth ? `mx-auto ${maxWidthClass}` : maxWidthClass || ''
+      }`.trim()}
+      style={sectionStyles}
+    >
+      {normalizedBlocks
+        .filter((block) => (isDesigner ? true : !block.hidden))
+        .map(renderBlock)}
+    </div>
+  );
+}