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

package/components/theme-editor/sections/find-in-store-section.tsx

@@ -1,1995 +0,0 @@
-'use client';
-
-import { useLocalization } from '@akinon/next/hooks';
-import { buildClientRequestUrl } from '@akinon/next/utils';
-import Settings from 'settings';
-import clsx from 'clsx';
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { useGetRetailStoreQuery } from '../../../data/client/address';
-import {
-  useGetProductByPkQuery,
-  useGetRetailStoreStockMutation
-} from '../../../data/client/product';
-import {
-  Product,
-  ProductResult,
-  StockResultType,
-  VariantType
-} from '../../../types';
-import { Image } from '../../image';
-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 FindInStoreSectionProps {
-  section: Section;
-  currentBreakpoint?: string;
-  placeholderId?: string;
-  isDesigner?: boolean;
-  selectedBlockId?: string | null;
-}
-
-type ProductRecord = Product & Record<string, unknown>;
-
-type StoreOption = {
-  pk: number | string;
-  name: string;
-};
-
-type StoreStockItem = StockResultType[number];
-
-const readString = (
-  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 readBoolean = (
-  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 readNumber = (
-  properties: Record<string, unknown> | undefined,
-  key: string,
-  fallback: number,
-  breakpoint: string
-): number => {
-  const value = getResponsiveValue(properties?.[key], breakpoint, fallback);
-  const numeric =
-    typeof value === 'number' ? value : Number.parseInt(String(value), 10);
-  return Number.isFinite(numeric) ? numeric : fallback;
-};
-
-const parsePositiveInt = (value: unknown): number | null => {
-  const parsed =
-    typeof value === 'number'
-      ? value
-      : Number.parseInt(String(value || ''), 10);
-
-  if (!Number.isFinite(parsed) || parsed <= 0) {
-    return null;
-  }
-
-  return parsed;
-};
-
-const getProductImage = (product: Partial<ProductRecord> | null): string => {
-  if (!product) return '';
-  if (typeof product.image === 'string' && product.image) return product.image;
-
-  const imageSet = product.productimage_set;
-  if (Array.isArray(imageSet) && imageSet[0]?.image) {
-    return String(imageSet[0].image);
-  }
-
-  return '';
-};
-
-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 getDiscountState = (
-  currentPrice: unknown,
-  retailPrice: unknown
-): { current: string | null; retail: string | null; hasDiscount: boolean } => {
-  const currentNumeric = parsePriceValue(currentPrice);
-  const retailNumeric = parsePriceValue(retailPrice);
-
-  return {
-    current: String(currentPrice || '').trim() ? String(currentPrice) : null,
-    retail: String(retailPrice || '').trim() ? String(retailPrice) : null,
-    hasDiscount:
-      currentNumeric !== null &&
-      retailNumeric !== null &&
-      retailNumeric > currentNumeric
-  };
-};
-
-const findSizeAttributeKey = (): string => {
-  const match = Settings.commonProductAttributes.find(
-    (item) => item.translationKey === 'size'
-  );
-
-  return String(match?.key || 'size').toLowerCase();
-};
-
-const getSizeOptions = (variants: VariantType[] | undefined) => {
-  const sizeKey = findSizeAttributeKey();
-
-  if (!variants?.length) return [];
-
-  const seen = new Set<string>();
-
-  return variants
-    .filter((variant) => {
-      const attributeName = String(variant.attribute_name || '').toLowerCase();
-      const attributeKey = String(variant.attribute_key || '').toLowerCase();
-
-      return (
-        attributeName === sizeKey ||
-        attributeKey === sizeKey ||
-        attributeName.includes('size') ||
-        attributeName.includes('beden') ||
-        attributeKey.includes('size') ||
-        attributeKey.includes('beden')
-      );
-    })
-    .flatMap((variant) => variant.options || [])
-    .filter((option) => {
-      if (!option?.value || seen.has(String(option.value))) {
-        return false;
-      }
-      seen.add(String(option.value));
-      return true;
-    })
-    .map((option) => ({
-      value: String(option.value),
-      label: option.label || String(option.value)
-    }));
-};
-
-const getStockTone = (
-  t: (key: string) => string,
-  stock: string | number
-): { label: string; background: string; color: string } => {
-  const numeric = Number.parseInt(String(stock || 0), 10);
-
-  if (!numeric) {
-    return {
-      label: t('product.find_in_store.out_of_stock'),
-      background: '#fee2e2',
-      color: '#b91c1c'
-    };
-  }
-
-  if (numeric < 5) {
-    return {
-      label: t('product.find_in_store.limited_stock'),
-      background: '#fef3c7',
-      color: '#92400e'
-    };
-  }
-
-  return {
-    label: t('product.find_in_store.available'),
-    background: '#dcfce7',
-    color: '#166534'
-  };
-};
-
-const createStoreHours = (
-  hours: StoreStockItem['store_hours'],
-  t: (key: string) => string
-): string => {
-  if (!Array.isArray(hours) || !hours.length) {
-    return t('product.find_in_store.unknown');
-  }
-
-  const firstEntry = Array.isArray(hours[0]) ? hours[0] : hours;
-  if (!Array.isArray(firstEntry) || firstEntry.length < 2) {
-    return t('product.find_in_store.unknown');
-  }
-
-  const start =
-    typeof firstEntry[0] === 'string' ? firstEntry[0].slice(0, 5) : '';
-  const end =
-    typeof firstEntry[1] === 'string' ? firstEntry[1].slice(0, 5) : '';
-
-  return start && end
-    ? `${start} - ${end}`
-    : t('product.find_in_store.unknown');
-};
-
-const replaceTokens = (
-  input: string,
-  tokens: Record<string, string>
-): string => {
-  let output = input;
-
-  Object.entries(tokens).forEach(([key, value]) => {
-    output = output.split(`{{${key}}}`).join(value);
-  });
-
-  return output;
-};
-
-const replaceTokensInUnknown = (
-  value: unknown,
-  tokens: Record<string, string>
-): unknown => {
-  if (typeof value === 'string') {
-    return replaceTokens(value, tokens);
-  }
-
-  if (Array.isArray(value)) {
-    return value.map((item) => replaceTokensInUnknown(item, tokens));
-  }
-
-  if (typeof value === 'object' && value !== null) {
-    return Object.fromEntries(
-      Object.entries(value).map(([key, nestedValue]) => [
-        key,
-        replaceTokensInUnknown(nestedValue, tokens)
-      ])
-    );
-  }
-
-  return value;
-};
-
-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 getFindInStoreRole = (
-  block: Pick<Block, 'properties'>,
-  breakpoint: string
-): string =>
-  resolveResponsiveString(block.properties?.findInStoreRole, breakpoint);
-
-const CONTROL_LAYOUT_STYLE_KEYS = new Set([
-  'display',
-  'width',
-  'height',
-  'min-width',
-  'min-height',
-  'max-width',
-  'max-height',
-  'padding-top',
-  'padding-right',
-  'padding-bottom',
-  'padding-left',
-  'font-size',
-  'font-weight',
-  'line-height',
-  'align-items',
-  'justify-content'
-]);
-
-const cloneFindInStoreBlock = (
-  block: Block,
-  tokens: Record<string, string>,
-  overrides?: {
-    properties?: Record<string, unknown>;
-    value?: unknown;
-  }
-): Block => ({
-  ...block,
-  styleSourceId: block.styleSourceId || block.id,
-  value:
-    overrides && Object.prototype.hasOwnProperty.call(overrides, 'value')
-      ? overrides.value
-      : (replaceTokensInUnknown(block.value, tokens) as Block['value']),
-  properties: {
-    ...(replaceTokensInUnknown(block.properties || {}, tokens) as Record<
-      string,
-      unknown
-    >),
-    ...(overrides?.properties || {})
-  },
-  styles: replaceTokensInUnknown(block.styles || {}, tokens) as Block['styles'],
-  blocks: block.blocks?.map((childBlock) =>
-    cloneFindInStoreBlock(childBlock, tokens)
-  )
-});
-
-const findFindInStoreRoleBlock = (
-  blocks: Block[],
-  role: string,
-  breakpoint: string
-): Block | null => {
-  for (const block of blocks) {
-    if (getFindInStoreRole(block, breakpoint) === role) {
-      return block;
-    }
-
-    if (block.blocks?.length) {
-      const nestedMatch = findFindInStoreRoleBlock(
-        block.blocks,
-        role,
-        breakpoint
-      );
-
-      if (nestedMatch) {
-        return nestedMatch;
-      }
-    }
-  }
-
-  return null;
-};
-
-const buildPrettyUrlCandidates = (rawInput: string): string[] => {
-  const trimmed = rawInput.trim();
-  if (!trimmed) return [];
-
-  let pathname = trimmed;
-
-  try {
-    pathname = new URL(trimmed, window.location.origin).pathname;
-  } catch (_error) {
-    pathname = trimmed;
-  }
-
-  pathname = pathname.split('?')[0]?.split('#')[0]?.trim() || '';
-  if (!pathname) return [];
-
-  if (!pathname.startsWith('/')) {
-    pathname = `/${pathname}`;
-  }
-
-  pathname = pathname.replace(/\/{2,}/g, '/').replace(/\/+$/, '');
-  const pathSegments = pathname.split('/').filter(Boolean);
-  if (!pathSegments.length) return [];
-
-  const candidates = new Set<string>();
-  const addCandidate = (segments: string[]) => {
-    if (!segments.length) return;
-    candidates.add(`/${segments.join('/')}/`);
-  };
-
-  addCandidate(pathSegments);
-
-  const currentSegments = window.location.pathname.split('/').filter(Boolean);
-  const currentPrefix = currentSegments.slice(0, 3);
-  const hasCurrentPrefix =
-    currentPrefix.length > 0 &&
-    pathSegments.length > currentPrefix.length &&
-    currentPrefix.every((segment, index) => pathSegments[index] === segment);
-
-  if (hasCurrentPrefix) {
-    addCandidate(pathSegments.slice(currentPrefix.length));
-  }
-
-  for (let cut = 1; cut <= Math.min(3, pathSegments.length - 1); cut += 1) {
-    addCandidate(pathSegments.slice(cut));
-  }
-
-  return Array.from(candidates);
-};
-
-const resolveProductPkFromInput = async (
-  rawInput: string
-): Promise<number | null> => {
-  const directPk = parsePositiveInt(rawInput.trim());
-  if (directPk) {
-    return directPk;
-  }
-
-  const candidates = buildPrettyUrlCandidates(rawInput);
-
-  for (const candidate of candidates) {
-    const requestUrl = buildClientRequestUrl(
-      `/pretty_urls/?new_path__exact=${encodeURIComponent(candidate)}`,
-      {
-        cache: false
-      }
-    );
-
-    const response = await fetch(requestUrl);
-
-    if (!response.ok) {
-      continue;
-    }
-
-    const data = await response.json();
-    const firstResult = Array.isArray(data?.results) ? data.results[0] : null;
-    const oldPath =
-      firstResult && typeof firstResult.old_path === 'string'
-        ? firstResult.old_path
-        : '';
-    const kwargsProductId = parsePositiveInt(firstResult?.kwargs?.product_id);
-    const kwargsPk = parsePositiveInt(firstResult?.kwargs?.pk);
-
-    const productMatch = oldPath.match(/^\/product\/(\d+)\/$/);
-
-    if (productMatch) {
-      return Number.parseInt(productMatch[1], 10);
-    }
-
-    if (kwargsProductId) {
-      return kwargsProductId;
-    }
-
-    if (kwargsPk) {
-      return kwargsPk;
-    }
-  }
-
-  return null;
-};
-
-export default function FindInStoreSection({
-  section,
-  currentBreakpoint = 'desktop',
-  placeholderId = '',
-  isDesigner = false,
-  selectedBlockId = null
-}: FindInStoreSectionProps) {
-  const { t } = useLocalization();
-  const themeSettings = useThemeSettingsContext();
-
-  const [productUrlInput, setProductUrlInput] = useState('');
-  const [resolvedProductPk, setResolvedProductPk] = useState<number | null>(
-    null
-  );
-  const [selectedCityId, setSelectedCityId] = useState('');
-  const [selectedSize, setSelectedSize] = useState('');
-  const [formError, setFormError] = useState('');
-  const [searchError, setSearchError] = useState('');
-  const [hasSubmitted, setHasSubmitted] = useState(false);
-  const [isResolvingProduct, setIsResolvingProduct] = useState(false);
-
-  const setupText = readString(
-    section.properties,
-    'setup-text',
-    'Paste a product detail URL or enter a product PK to load the product before checking pickup availability.',
-    currentBreakpoint
-  );
-  const urlPlaceholder = readString(
-    section.properties,
-    'product-url-placeholder',
-    'Paste a product URL or enter a product PK',
-    currentBreakpoint
-  );
-  const searchButtonText = readString(
-    section.properties,
-    'search-button-text',
-    'SEARCH PRODUCT',
-    currentBreakpoint
-  );
-  const urlRequiredText = readString(
-    section.properties,
-    'url-required-text',
-    'Please enter a product URL or product PK.',
-    currentBreakpoint
-  );
-  const invalidProductText = readString(
-    section.properties,
-    'invalid-product-text',
-    'We could not find a product for this URL or PK. Please try a valid product detail link or numeric product ID.',
-    currentBreakpoint
-  );
-  const initialProductInput = readString(
-    section.properties,
-    'initial-product-input',
-    '',
-    currentBreakpoint
-  );
-  const buttonText = readString(
-    section.properties,
-    'button-text',
-    t('product.find_in_store.submit'),
-    currentBreakpoint
-  );
-  const emptyStateText = readString(
-    section.properties,
-    'empty-state-text',
-    t('product.find_in_store.store_not_found'),
-    currentBreakpoint
-  );
-
-  const { data: productResponse, isLoading: productLoading } =
-    useGetProductByPkQuery(resolvedProductPk as number, {
-      skip: !resolvedProductPk
-    });
-
-  const fullProduct = (productResponse as ProductResult | undefined)?.product;
-  const variants = (productResponse as ProductResult | undefined)?.variants;
-  const product = fullProduct as ProductRecord | null;
-  const activeProductPk =
-    parsePositiveInt(fullProduct?.pk) ?? resolvedProductPk;
-
-  const { data: retailStore } = useGetRetailStoreQuery();
-  const [
-    getRetailStock,
-    {
-      data: stockResponse,
-      isLoading: stockLoading,
-      isError: isStockError,
-      reset: resetStock
-    }
-  ] = useGetRetailStoreStockMutation();
-
-  const cityOptions = useMemo(
-    () =>
-      ((retailStore?.results || []) as StoreOption[]).map((item) => ({
-        value: String(item.pk),
-        label: item.name
-      })),
-    [retailStore?.results]
-  );
-
-  const sizeOptions = useMemo(() => getSizeOptions(variants), [variants]);
-
-  useEffect(() => {
-    setSelectedCityId('');
-    setSelectedSize('');
-    setFormError('');
-    setHasSubmitted(false);
-    resetStock();
-  }, [resolvedProductPk]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  useEffect(() => {
-    if (sizeOptions.length === 1 && !selectedSize) {
-      setSelectedSize(sizeOptions[0].value);
-    }
-  }, [selectedSize, sizeOptions]);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    const preloadInitialProduct = async () => {
-      const trimmedInitialProduct = initialProductInput.trim();
-      if (!trimmedInitialProduct) return;
-
-      setProductUrlInput(currentValue => currentValue || trimmedInitialProduct);
-      setIsResolvingProduct(true);
-
-      try {
-        const resolvedPk = await resolveProductPkFromInput(trimmedInitialProduct);
-        if (!cancelled && resolvedPk) {
-          setResolvedProductPk(resolvedPk);
-          setSearchError('');
-        }
-      } catch {
-        if (!cancelled) {
-          setSearchError('');
-        }
-      } finally {
-        if (!cancelled) {
-          setIsResolvingProduct(false);
-        }
-      }
-    };
-
-    preloadInitialProduct();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [initialProductInput]);
-
-  const showProductCard = readBoolean(
-    section.properties,
-    'show-product-card',
-    true,
-    currentBreakpoint
-  );
-  const showWorkingHours = readBoolean(
-    section.properties,
-    'show-working-hours',
-    true,
-    currentBreakpoint
-  );
-  const showDirections = readBoolean(
-    section.properties,
-    'show-directions',
-    true,
-    currentBreakpoint
-  );
-  const maxResults = readNumber(
-    section.properties,
-    'max-results',
-    6,
-    currentBreakpoint
-  );
-
-  const maxWidth = getResponsiveValue(
-    section.styles?.['max-width'],
-    currentBreakpoint,
-    'normal'
-  ) as string;
-  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]) =>
-        ![
-          'max-width',
-          'form-gap',
-          'input-background-color',
-          'input-text-color',
-          'input-border-color',
-          'input-border-radius',
-          'input-padding',
-          'button-background-color',
-          'button-text-color',
-          'button-hover-background-color',
-          'button-border-radius',
-          'button-padding',
-          'panel-background-color',
-          'panel-border-color',
-          'panel-border-radius',
-          'product-card-background-color',
-          'product-card-border-color',
-          'result-card-background-color',
-          'result-card-border-color',
-          'result-card-border-radius'
-        ].includes(key)
-    )
-  );
-
-  const sectionStyles = getCSSStyles(
-    filteredStyles,
-    themeSettings,
-    currentBreakpoint
-  );
-
-  const formGap = Number(
-    getResponsiveValue(section.styles?.['form-gap'], currentBreakpoint, 16)
-  );
-  const inputBg = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['input-background-color'],
-        currentBreakpoint,
-        '#ffffff'
-      )
-    ),
-    themeSettings
-  );
-  const inputTextColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['input-text-color'],
-        currentBreakpoint,
-        '#0f172a'
-      )
-    ),
-    themeSettings
-  );
-  const inputBorderColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['input-border-color'],
-        currentBreakpoint,
-        '#cbd5e1'
-      )
-    ),
-    themeSettings
-  );
-  const inputBorderRadius = String(
-    getResponsiveValue(
-      section.styles?.['input-border-radius'],
-      currentBreakpoint,
-      '10px'
-    )
-  );
-  const inputPadding = String(
-    getResponsiveValue(
-      section.styles?.['input-padding'],
-      currentBreakpoint,
-      '14px 16px'
-    )
-  );
-  const buttonBg = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['button-background-color'],
-        currentBreakpoint,
-        '#0f172a'
-      )
-    ),
-    themeSettings
-  );
-  const buttonTextColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['button-text-color'],
-        currentBreakpoint,
-        '#ffffff'
-      )
-    ),
-    themeSettings
-  );
-  const buttonHoverBg = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['button-hover-background-color'],
-        currentBreakpoint,
-        '#1e293b'
-      )
-    ),
-    themeSettings
-  );
-  const buttonBorderRadius = String(
-    getResponsiveValue(
-      section.styles?.['button-border-radius'],
-      currentBreakpoint,
-      '10px'
-    )
-  );
-  const buttonPadding = String(
-    getResponsiveValue(
-      section.styles?.['button-padding'],
-      currentBreakpoint,
-      '14px 28px'
-    )
-  );
-  const panelBackground = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['panel-background-color'],
-        currentBreakpoint,
-        '#ffffff'
-      )
-    ),
-    themeSettings
-  );
-  const panelBorderColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['panel-border-color'],
-        currentBreakpoint,
-        '#e2e8f0'
-      )
-    ),
-    themeSettings
-  );
-  const panelBorderRadius = String(
-    getResponsiveValue(
-      section.styles?.['panel-border-radius'],
-      currentBreakpoint,
-      '20px'
-    )
-  );
-  const productCardBackground = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['product-card-background-color'],
-        currentBreakpoint,
-        '#ffffff'
-      )
-    ),
-    themeSettings
-  );
-  const productCardBorderColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['product-card-border-color'],
-        currentBreakpoint,
-        '#e2e8f0'
-      )
-    ),
-    themeSettings
-  );
-  const resultCardBackground = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['result-card-background-color'],
-        currentBreakpoint,
-        '#ffffff'
-      )
-    ),
-    themeSettings
-  );
-  const resultCardBorderColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['result-card-border-color'],
-        currentBreakpoint,
-        '#e2e8f0'
-      )
-    ),
-    themeSettings
-  );
-  const resultCardBorderRadius = String(
-    getResponsiveValue(
-      section.styles?.['result-card-border-radius'],
-      currentBreakpoint,
-      '16px'
-    )
-  );
-
-  const sortedBlocks = [...(section.blocks || [])]
-    .sort((a, b) => (a.order || 0) - (b.order || 0))
-    .filter((block) => (isDesigner ? true : !block.hidden));
-
-  const contentBlocks = sortedBlocks.filter(
-    (block) => !getFindInStoreRole(block, currentBreakpoint)
-  );
-
-  const productEyebrowBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'product-eyebrow',
-    currentBreakpoint
-  );
-  const productLinkBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'product-link',
-    currentBreakpoint
-  );
-  const productImageBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'product-image',
-    currentBreakpoint
-  );
-  const productNameBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'product-name',
-    currentBreakpoint
-  );
-  const productPriceBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'product-price',
-    currentBreakpoint
-  );
-  const productCardWrapperBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'product-card-wrapper',
-    currentBreakpoint
-  );
-  const searchPanelWrapperBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'search-panel-wrapper',
-    currentBreakpoint
-  );
-  const availabilityPanelWrapperBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'availability-panel-wrapper',
-    currentBreakpoint
-  );
-  const resultCardWrapperBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'result-card-wrapper',
-    currentBreakpoint
-  );
-  const searchHeadingBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'search-heading',
-    currentBreakpoint
-  );
-  const searchDescriptionBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'search-description',
-    currentBreakpoint
-  );
-  const searchInputBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'search-input',
-    currentBreakpoint
-  );
-  const searchButtonBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'search-button',
-    currentBreakpoint
-  );
-  const availabilityHeadingBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'availability-heading',
-    currentBreakpoint
-  );
-  const availabilityDescriptionBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'availability-description',
-    currentBreakpoint
-  );
-  const citySelectBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'city-select',
-    currentBreakpoint
-  );
-  const sizeSelectBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'size-select',
-    currentBreakpoint
-  );
-  const availabilityButtonBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'availability-button',
-    currentBreakpoint
-  );
-  const storeNameBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'store-name',
-    currentBreakpoint
-  );
-  const storeAddressBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'store-address',
-    currentBreakpoint
-  );
-  const storeStatusBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'store-status',
-    currentBreakpoint
-  );
-  const storeHoursBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'store-hours',
-    currentBreakpoint
-  );
-  const storeStockBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'store-stock',
-    currentBreakpoint
-  );
-  const storeDirectionsBlock = findFindInStoreRoleBlock(
-    sortedBlocks,
-    'store-directions',
-    currentBreakpoint
-  );
-
-  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 renderBlock = (block: Block, keyOverride?: string) => {
-    const actionBlockId = block.styleSourceId || block.id;
-
-    return (
-      <ThemeBlock
-        key={keyOverride || block.id}
-        block={block}
-        placeholderId={placeholderId}
-        sectionId={section.id}
-        isDesigner={isDesigner}
-        isSelected={
-          selectedBlockId === actionBlockId || selectedBlockId === block.id
-        }
-        selectedBlockId={selectedBlockId}
-        currentBreakpoint={currentBreakpoint}
-        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)
-        }
-      />
-    );
-  };
-
-  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 = {
-      ...(options.style || {}),
-      ...getCSSStyles(block.styles || {}, themeSettings, currentBreakpoint)
-    } 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>
-    );
-  };
-
-  const renderSelectableElement = (
-    block: Block | null,
-    children: React.ReactNode,
-    options: {
-      wrapperClassName?: string;
-      wrapperStyle?: React.CSSProperties;
-      keyOverride?: string;
-    } = {}
-  ) => {
-    if (!block) {
-      return (
-        <div
-          key={options.keyOverride}
-          className={options.wrapperClassName}
-          style={options.wrapperStyle}
-        >
-          {children}
-        </div>
-      );
-    }
-
-    const actionBlockId = block.styleSourceId || block.id;
-
-    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.wrapperClassName}
-        style={options.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>
-    );
-  };
-
-  const productName = product?.name || 'Selected product';
-  const productUrl =
-    typeof product?.absolute_url === 'string' ? product.absolute_url : '';
-  const productImage = getProductImage(product);
-  const activePrice = (product?.active_price || {}) as Record<string, unknown>;
-  const priceValue = activePrice.price ?? product?.price;
-  const retailPriceValue = activePrice.retail_price ?? product?.retail_price;
-  const currency =
-    activePrice.currency_type ?? product?.currency_type ?? product?.currency;
-  const priceText = formatPriceWithCurrency(priceValue, currency);
-  const retailPriceText = formatPriceWithCurrency(retailPriceValue, currency);
-  const priceState = getDiscountState(priceValue, retailPriceValue);
-
-  const results = useMemo(
-    () => ((stockResponse || []) as StoreStockItem[]).slice(0, maxResults),
-    [maxResults, stockResponse]
-  );
-  const isMobile = currentBreakpoint === 'mobile';
-  const isProductResolved = !!activeProductPk && !!product;
-
-  const displayProductName = isProductResolved
-    ? productName
-    : 'Yellow Gold Bell-Shaped Necklace';
-  const displayProductPrice = isProductResolved
-    ? priceText || '249,90 USD'
-    : '249,90 USD';
-  const displayProductImage = isProductResolved ? productImage || '' : '';
-  const productCardTokens = {
-    product_name: displayProductName,
-    product_price: displayProductPrice
-  };
-
-  const handleResolveProduct = async () => {
-    if (!productUrlInput.trim()) {
-      setSearchError(urlRequiredText);
-      setResolvedProductPk(null);
-      return;
-    }
-
-    setIsResolvingProduct(true);
-    setSearchError('');
-    setFormError('');
-    setHasSubmitted(false);
-
-    try {
-      const resolvedPk = await resolveProductPkFromInput(productUrlInput);
-
-      if (!resolvedPk) {
-        setResolvedProductPk(null);
-        setSearchError(invalidProductText);
-        return;
-      }
-
-      setResolvedProductPk(resolvedPk);
-    } catch (_error) {
-      setResolvedProductPk(null);
-      setSearchError(invalidProductText);
-    } finally {
-      setIsResolvingProduct(false);
-    }
-  };
-
-  const handleSubmit = async () => {
-    if (!activeProductPk) {
-      setFormError(setupText);
-      return;
-    }
-
-    if (!selectedCityId) {
-      setFormError(t('product.find_in_store.required'));
-      return;
-    }
-
-    const resolvedSize =
-      selectedSize || (sizeOptions.length === 1 ? sizeOptions[0].value : '');
-
-    if (sizeOptions.length > 1 && !resolvedSize) {
-      setFormError(t('product.find_in_store.required'));
-      return;
-    }
-
-    setFormError('');
-    setHasSubmitted(true);
-
-    const params = new URLSearchParams();
-    params.set('city_id', selectedCityId);
-    if (resolvedSize) {
-      params.set('size', resolvedSize);
-    }
-
-    await getRetailStock({
-      productPk: String(activeProductPk),
-      queryString: params.toString()
-    });
-  };
-
-  const inputStyle: React.CSSProperties = {
-    width: '100%',
-    backgroundColor: inputBg,
-    color: inputTextColor,
-    border: `1px solid ${inputBorderColor}`,
-    borderRadius: inputBorderRadius,
-    padding: inputPadding,
-    fontSize: '15px',
-    outline: 'none',
-    fontFamily: 'inherit'
-  };
-
-  const buttonStyle: React.CSSProperties = {
-    width: '100%',
-    backgroundColor: buttonBg,
-    color: buttonTextColor,
-    border: 'none',
-    borderRadius: buttonBorderRadius,
-    padding: buttonPadding,
-    fontSize: '14px',
-    fontWeight: 700,
-    cursor: stockLoading || isResolvingProduct ? 'default' : 'pointer',
-    opacity: stockLoading || isResolvingProduct ? 0.7 : 1,
-    transition: 'all 0.2s ease',
-    fontFamily: 'inherit',
-    whiteSpace: 'nowrap',
-    lineHeight: 1.2
-  };
-
-  const secondaryButtonStyle: React.CSSProperties = {
-    backgroundColor: 'transparent',
-    color: buttonBg,
-    border: `1px solid ${panelBorderColor}`,
-    borderRadius: buttonBorderRadius,
-    padding: '10px 16px',
-    fontSize: '13px',
-    fontWeight: 700,
-    transition: 'all 0.2s ease',
-    fontFamily: 'inherit',
-    textDecoration: 'none',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  };
-
-  const panelStyle: React.CSSProperties = {
-    backgroundColor: panelBackground,
-    border: `1px solid ${panelBorderColor}`,
-    borderRadius: panelBorderRadius
-  };
-
-  const productCardStyle: React.CSSProperties = {
-    backgroundColor: productCardBackground,
-    border: `1px solid ${productCardBorderColor}`,
-    borderRadius: panelBorderRadius
-  };
-
-  const resultCardStyle: React.CSSProperties = {
-    backgroundColor: resultCardBackground,
-    border: `1px solid ${resultCardBorderColor}`,
-    borderRadius: resultCardBorderRadius
-  };
-  const mergeControlStyles = (
-    baseStyle: React.CSSProperties,
-    block: Block | null
-  ): React.CSSProperties => ({
-    ...baseStyle,
-    ...(block
-      ? getCSSStyles(
-          Object.fromEntries(
-            Object.entries(block.styles || {}).filter(
-              ([styleKey]) => !CONTROL_LAYOUT_STYLE_KEYS.has(styleKey)
-            )
-          ),
-          themeSettings,
-          currentBreakpoint
-        )
-      : {})
-  });
-  const searchInputStyle = mergeControlStyles(inputStyle, searchInputBlock);
-  const citySelectStyle = mergeControlStyles(inputStyle, citySelectBlock);
-  const sizeSelectStyle = mergeControlStyles(inputStyle, sizeSelectBlock);
-  const searchButtonControlStyle = mergeControlStyles(buttonStyle, searchButtonBlock);
-  const availabilityButtonControlStyle = mergeControlStyles(
-    buttonStyle,
-    availabilityButtonBlock
-  );
-  const searchButtonBaseBackground =
-    typeof searchButtonControlStyle.backgroundColor === 'string'
-      ? searchButtonControlStyle.backgroundColor
-      : buttonBg;
-  const availabilityButtonBaseBackground =
-    typeof availabilityButtonControlStyle.backgroundColor === 'string'
-      ? availabilityButtonControlStyle.backgroundColor
-      : buttonBg;
-  const availabilityDescriptionText = isProductResolved
-    ? t('product.find_in_store.description')
-    : 'Search for a product URL first, then select a city and size to check store stock.';
-  const shouldRenderProductCard =
-    showProductCard && (isProductResolved || isDesigner);
-
-  return (
-    <div
-      className={clsx('w-full', hasMaxWidth && 'mx-auto', maxWidthClass)}
-      style={sectionStyles}
-    >
-      <div className="flex flex-col gap-6">
-        {contentBlocks.length > 0 && (
-          <div className="flex flex-col gap-4">
-            {contentBlocks.map((block) =>
-              renderBlock(block, `content-${block.id}`)
-            )}
-          </div>
-        )}
-
-        <div
-          className={clsx(
-            'grid gap-6 items-stretch',
-            shouldRenderProductCard && !isMobile
-              ? 'grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]'
-              : 'grid-cols-1'
-          )}
-        >
-          {shouldRenderProductCard &&
-            renderSelectableWrapper(
-              productCardWrapperBlock,
-              <div className="flex h-full flex-col gap-5">
-                <div className="flex items-center justify-between gap-3">
-                  {productEyebrowBlock ? (
-                    renderBlock(
-                      cloneFindInStoreBlock(
-                        productEyebrowBlock,
-                        productCardTokens
-                      ),
-                      'product-eyebrow'
-                    )
-                  ) : (
-                    <span className="text-[12px] font-semibold uppercase tracking-[0.18em] text-slate-500">
-                      Selected product
-                    </span>
-                  )}
-
-                  {productLinkBlock && (productUrl || isDesigner) ? (
-                    renderBlock(
-                      cloneFindInStoreBlock(
-                        productLinkBlock,
-                        productCardTokens,
-                        {
-                          properties: {
-                            href: productUrl || '#'
-                          }
-                        }
-                      ),
-                      'product-link'
-                    )
-                  ) : productUrl ? (
-                    <a
-                      href={productUrl}
-                      className="text-[13px] font-semibold text-slate-800 underline underline-offset-4"
-                    >
-                      View product
-                    </a>
-                  ) : null}
-                </div>
-
-                <div
-                  className={clsx(
-                    'flex h-full flex-col rounded-[24px] border border-slate-200 bg-white',
-                    isMobile ? 'p-5' : 'p-4 xl:p-5'
-                  )}
-                >
-                  <div
-                    className={clsx(
-                      'w-full',
-                      isMobile
-                        ? 'max-w-[320px]'
-                        : 'max-w-[240px] xl:max-w-[260px]'
-                    )}
-                  >
-                    {productImageBlock ? (
-                      renderBlock(
-                        cloneFindInStoreBlock(
-                          productImageBlock,
-                          productCardTokens,
-                          {
-                            value: displayProductImage
-                          }
-                        ),
-                        'product-image'
-                      )
-                    ) : productImage ? (
-                      <div className="relative aspect-square w-full overflow-hidden rounded-[22px] bg-slate-100">
-                        <Image
-                          src={productImage}
-                          alt={productName}
-                          fill
-                          sizes="(min-width: 1280px) 260px, (min-width: 768px) 240px, 100vw"
-                          aspectRatio={1}
-                          imageClassName="object-contain"
-                        />
-                      </div>
-                    ) : (
-                      <div className="flex aspect-square items-center justify-center rounded-[22px] bg-slate-100 text-sm font-medium text-slate-400">
-                        No image
-                      </div>
-                    )}
-                  </div>
-
-                  <div
-                    className={clsx(
-                      'flex min-w-0 flex-1 flex-col gap-3',
-                      isMobile ? 'mt-5' : 'mt-4'
-                    )}
-                  >
-                    {productNameBlock ? (
-                      renderBlock(
-                        cloneFindInStoreBlock(
-                          productNameBlock,
-                          productCardTokens
-                        ),
-                        'product-name'
-                      )
-                    ) : (
-                      <h3
-                        className={clsx(
-                          'font-bold leading-[1.2] text-slate-950',
-                          isMobile ? 'text-[22px]' : 'text-[20px]'
-                        )}
-                        style={{
-                          display: '-webkit-box',
-                          WebkitLineClamp: isMobile ? 3 : 2,
-                          WebkitBoxOrient: 'vertical',
-                          overflow: 'hidden'
-                        }}
-                      >
-                        {displayProductName}
-                      </h3>
-                    )}
-
-                    {productPriceBlock ? (
-                      renderBlock(
-                        cloneFindInStoreBlock(
-                          productPriceBlock,
-                          productCardTokens
-                        ),
-                        'product-price'
-                      )
-                    ) : priceText ? (
-                      <div className="flex flex-wrap items-center gap-2">
-                        {priceState.hasDiscount && retailPriceText ? (
-                          <span className="text-[15px] font-medium text-slate-400 line-through">
-                            {retailPriceText}
-                          </span>
-                        ) : null}
-                        <span
-                          className={clsx(
-                            'font-bold leading-none text-slate-950',
-                            isMobile ? 'text-[28px]' : 'text-[24px]'
-                          )}
-                        >
-                          {priceText}
-                        </span>
-                      </div>
-                    ) : null}
-                  </div>
-                </div>
-              </div>,
-              {
-                className: 'h-full overflow-hidden',
-                style: productCardStyle,
-                keyOverride: 'product-card-wrapper'
-              }
-            )}
-
-          <div className="flex h-full flex-col gap-4">
-            {renderSelectableWrapper(
-              searchPanelWrapperBlock,
-              <div className="flex flex-col" style={{ gap: `${formGap}px` }}>
-                <div className="flex flex-col gap-2">
-                  {searchHeadingBlock ? (
-                    renderBlock(
-                      cloneFindInStoreBlock(searchHeadingBlock, {}),
-                      'search-heading'
-                    )
-                  ) : (
-                    <h3 className="text-[22px] font-bold leading-tight text-slate-950">
-                      Find a product first
-                    </h3>
-                  )}
-                  {searchDescriptionBlock ? (
-                    renderBlock(
-                      cloneFindInStoreBlock(searchDescriptionBlock, {
-                        setup_text: setupText
-                      }),
-                      'search-description'
-                    )
-                  ) : (
-                    <p className="text-[15px] leading-7 text-slate-600">
-                      {setupText}
-                    </p>
-                  )}
-                </div>
-
-                <div
-                  className={clsx(
-                    'grid gap-3',
-                    isMobile ? 'grid-cols-1' : 'grid-cols-[minmax(0,1fr)_190px]'
-                  )}
-                >
-                  {renderSelectableElement(
-                    searchInputBlock,
-                    <input
-                      type="text"
-                      value={productUrlInput}
-                      onChange={(event) => setProductUrlInput(event.target.value)}
-                      placeholder={urlPlaceholder}
-                      inputMode="text"
-                      style={searchInputStyle}
-                    />,
-                    {
-                      keyOverride: 'search-input'
-                    }
-                  )}
-
-                  {renderSelectableElement(
-                    searchButtonBlock,
-                    <button
-                      type="button"
-                      style={searchButtonControlStyle}
-                      disabled={isResolvingProduct}
-                      onClick={handleResolveProduct}
-                      onMouseEnter={(event) => {
-                        if (!isResolvingProduct) {
-                          event.currentTarget.style.backgroundColor =
-                            buttonHoverBg;
-                        }
-                      }}
-                      onMouseLeave={(event) => {
-                        if (!isResolvingProduct) {
-                          event.currentTarget.style.backgroundColor =
-                            searchButtonBaseBackground;
-                        }
-                      }}
-                    >
-                      {isResolvingProduct ? 'Searching...' : searchButtonText}
-                    </button>,
-                    {
-                      keyOverride: 'search-button'
-                    }
-                  )}
-                </div>
-
-                {searchError ? (
-                  <p className="rounded-[12px] border border-red-200 bg-red-50 px-4 py-3 text-sm leading-6 text-red-600">
-                    {searchError}
-                  </p>
-                ) : null}
-
-                {!searchError && !isProductResolved && !isResolvingProduct ? (
-                  <p className="text-sm leading-6 text-slate-500">
-                    {setupText}
-                  </p>
-                ) : null}
-
-                {resolvedProductPk && productLoading ? (
-                  <p className="text-sm leading-6 text-slate-500">
-                    Loading product details...
-                  </p>
-                ) : null}
-              </div>,
-              {
-                className: 'p-4 sm:p-5',
-                style: panelStyle,
-                keyOverride: 'search-panel-wrapper'
-              }
-            )}
-
-            {renderSelectableWrapper(
-              availabilityPanelWrapperBlock,
-              <div className="flex flex-col" style={{ gap: `${formGap}px` }}>
-                <div className="flex flex-col gap-2">
-                  {availabilityHeadingBlock ? (
-                    renderBlock(
-                      cloneFindInStoreBlock(availabilityHeadingBlock, {}),
-                      'availability-heading'
-                    )
-                  ) : (
-                    <h3 className="text-[22px] font-bold leading-tight text-slate-950">
-                      Pickup availability
-                    </h3>
-                  )}
-                  {availabilityDescriptionBlock ? (
-                    renderBlock(
-                      cloneFindInStoreBlock(availabilityDescriptionBlock, {
-                        availability_description: availabilityDescriptionText
-                      }),
-                      'availability-description'
-                    )
-                  ) : (
-                    <p className="text-[15px] leading-7 text-slate-600">
-                      {availabilityDescriptionText}
-                    </p>
-                  )}
-                </div>
-
-                <div
-                  className={clsx(
-                    'grid gap-3',
-                    sizeOptions.length > 0 && !isMobile
-                      ? 'grid-cols-2'
-                      : 'grid-cols-1'
-                  )}
-                >
-                  {renderSelectableElement(
-                    citySelectBlock,
-                    <select
-                      value={selectedCityId}
-                      onChange={(event) => {
-                        setSelectedCityId(event.target.value);
-                        setFormError('');
-                      }}
-                      style={citySelectStyle}
-                      disabled={!isProductResolved}
-                    >
-                      <option value="">
-                        {t('product.find_in_store.select_an_option')}
-                      </option>
-                      {cityOptions.map((option) => (
-                        <option key={option.value} value={option.value}>
-                          {option.label}
-                        </option>
-                      ))}
-                    </select>,
-                    {
-                      keyOverride: 'city-select'
-                    }
-                  )}
-
-                  {sizeOptions.length > 0 && (
-                    renderSelectableElement(
-                      sizeSelectBlock,
-                      <select
-                        value={selectedSize}
-                        onChange={(event) => {
-                          setSelectedSize(event.target.value);
-                          setFormError('');
-                        }}
-                        style={sizeSelectStyle}
-                        disabled={!isProductResolved}
-                      >
-                        <option value="">
-                          {t('product.find_in_store.select_an_option')}
-                        </option>
-                        {sizeOptions.map((option) => (
-                          <option key={option.value} value={option.value}>
-                            {option.label}
-                          </option>
-                        ))}
-                      </select>,
-                      {
-                        keyOverride: 'size-select'
-                      }
-                    )
-                  )}
-                </div>
-
-                {renderSelectableElement(
-                  availabilityButtonBlock,
-                  <button
-                    type="button"
-                    style={availabilityButtonControlStyle}
-                    disabled={stockLoading || !isProductResolved}
-                    onClick={handleSubmit}
-                    onMouseEnter={(event) => {
-                      if (!stockLoading && isProductResolved) {
-                        event.currentTarget.style.backgroundColor = buttonHoverBg;
-                      }
-                    }}
-                    onMouseLeave={(event) => {
-                      if (!stockLoading && isProductResolved) {
-                        event.currentTarget.style.backgroundColor =
-                          availabilityButtonBaseBackground;
-                      }
-                    }}
-                  >
-                    {stockLoading ? 'Checking...' : buttonText}
-                  </button>,
-                  {
-                    keyOverride: 'availability-button'
-                  }
-                )}
-
-                {formError ? (
-                  <p className="rounded-[12px] border border-red-200 bg-red-50 px-4 py-3 text-sm leading-6 text-red-600">
-                    {formError}
-                  </p>
-                ) : null}
-              </div>,
-              {
-                className: 'p-4 sm:p-5',
-                style: panelStyle,
-                keyOverride: 'availability-panel-wrapper'
-              }
-            )}
-          </div>
-        </div>
-
-        {(stockLoading || hasSubmitted) && (
-          <div className="flex flex-col gap-3">
-            {stockLoading &&
-              renderSelectableWrapper(
-                resultCardWrapperBlock,
-                <div className="flex min-h-[120px] items-center justify-center">
-                  <div className="text-sm font-medium text-slate-500">
-                    Checking stores...
-                  </div>
-                </div>,
-                {
-                  className: 'p-4',
-                  style: resultCardStyle,
-                  keyOverride: 'result-card-loading'
-                }
-              )}
-
-            {!stockLoading &&
-              results.map((store, index) => {
-                const tone = getStockTone(t, store.stock);
-                const directionsUrl =
-                  store.latitude && store.longitude
-                    ? `https://maps.google.com/?q=${store.latitude},${store.longitude}`
-                    : '';
-                const storeTokens = {
-                  store_name: store.name || 'Store',
-                  store_address: store.address || '',
-                  store_status: tone.label,
-                  store_hours: createStoreHours(store.store_hours, t),
-                  store_stock: `Stock: ${store.stock}`
-                };
-
-                return renderSelectableWrapper(
-                  resultCardWrapperBlock
-                    ? {
-                        ...cloneFindInStoreBlock(
-                          resultCardWrapperBlock,
-                          storeTokens
-                        ),
-                        id: `${resultCardWrapperBlock.id}-clone-${index}`,
-                        styleSourceId:
-                          resultCardWrapperBlock.styleSourceId ||
-                          resultCardWrapperBlock.id
-                      }
-                    : null,
-                  <div className="flex flex-col gap-4">
-                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                      <div className="min-w-0">
-                        {storeNameBlock ? (
-                          renderBlock(
-                            cloneFindInStoreBlock(storeNameBlock, storeTokens),
-                            `store-name-${index}`
-                          )
-                        ) : (
-                          <h4 className="text-lg font-bold leading-tight text-slate-950">
-                            {store.name}
-                          </h4>
-                        )}
-                        {storeAddressBlock ? (
-                          renderBlock(
-                            cloneFindInStoreBlock(
-                              storeAddressBlock,
-                              storeTokens
-                            ),
-                            `store-address-${index}`
-                          )
-                        ) : (
-                          <p className="mt-2 text-sm leading-6 text-slate-600">
-                            {store.address}
-                          </p>
-                        )}
-                      </div>
-
-                      <div
-                        className="inline-flex w-fit items-center rounded-full px-3 py-1"
-                        style={{
-                          backgroundColor: tone.background,
-                          color: tone.color
-                        }}
-                      >
-                        {storeStatusBlock ? (
-                          renderBlock(
-                            cloneFindInStoreBlock(
-                              storeStatusBlock,
-                              storeTokens
-                            ),
-                            `store-status-${index}`
-                          )
-                        ) : (
-                          <span className="text-xs font-semibold">
-                            {tone.label}
-                          </span>
-                        )}
-                      </div>
-                    </div>
-
-                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                      <div className="flex flex-col gap-1">
-                        {showWorkingHours &&
-                          (storeHoursBlock ? (
-                            renderBlock(
-                              cloneFindInStoreBlock(
-                                storeHoursBlock,
-                                storeTokens
-                              ),
-                              `store-hours-${index}`
-                            )
-                          ) : (
-                            <p className="text-sm leading-6 text-slate-500">
-                              <span className="font-semibold text-slate-700">
-                                {t('product.find_in_store.working_hours')}:
-                              </span>{' '}
-                              {createStoreHours(store.store_hours, t)}
-                            </p>
-                          ))}
-                        {storeStockBlock ? (
-                          renderBlock(
-                            cloneFindInStoreBlock(storeStockBlock, storeTokens),
-                            `store-stock-${index}`
-                          )
-                        ) : (
-                          <p className="text-sm leading-6 text-slate-500">
-                            <span className="font-semibold text-slate-700">
-                              Stock:
-                            </span>{' '}
-                            {store.stock}
-                          </p>
-                        )}
-                      </div>
-
-                      {showDirections && directionsUrl ? (
-                        storeDirectionsBlock ? (
-                          renderBlock(
-                            cloneFindInStoreBlock(
-                              storeDirectionsBlock,
-                              storeTokens,
-                              {
-                                properties: {
-                                  href: directionsUrl
-                                }
-                              }
-                            ),
-                            `store-directions-${index}`
-                          )
-                        ) : (
-                          <a
-                            href={directionsUrl}
-                            target="_blank"
-                            rel="noreferrer"
-                            style={secondaryButtonStyle}
-                            onMouseEnter={(event) => {
-                              event.currentTarget.style.backgroundColor =
-                                panelBackground;
-                            }}
-                            onMouseLeave={(event) => {
-                              event.currentTarget.style.backgroundColor =
-                                'transparent';
-                            }}
-                          >
-                            {t('product.find_in_store.directions')}
-                          </a>
-                        )
-                      ) : null}
-                    </div>
-                  </div>,
-                  {
-                    className: 'p-4',
-                    style: resultCardStyle,
-                    keyOverride: `result-card-wrapper-${index}`
-                  }
-                );
-              })}
-
-            {!stockLoading &&
-              !results.length &&
-              renderSelectableWrapper(
-                resultCardWrapperBlock,
-                <div className="text-sm leading-6 text-slate-500">
-                  {isStockError
-                    ? t('product.find_in_store.store_not_found')
-                    : emptyStateText}
-                </div>,
-                {
-                  className: 'p-5',
-                  style: resultCardStyle,
-                  keyOverride: 'result-card-empty'
-                }
-              )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}