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

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

@@ -0,0 +1,1995 @@
+'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>
+  );
+}