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

package/components/theme-editor/sections/order-tracking-lookup-section.tsx

@@ -0,0 +1,1379 @@
+'use client';
+
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useLocalization } from '@akinon/next/hooks';
+import clsx from 'clsx';
+import React, { useMemo, useState } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { twMerge } from 'tailwind-merge';
+import * as yup from 'yup';
+
+import { useGetAnonymousTrackingMutation } from '../../../data/client/user';
+import { account } from '../../../data/urls';
+import { Order, OrderItem } from '../../../types/commerce/order';
+import { buildClientRequestUrl } from '../../../utils';
+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 OrderTrackingLookupSectionProps {
+  section: Section;
+  currentBreakpoint?: string;
+  placeholderId?: string;
+  isDesigner?: boolean;
+  selectedBlockId?: string | null;
+}
+
+interface OrderTrackingLookupFormType {
+  email: string;
+  number: string;
+}
+
+interface OrdersListResponse {
+  count: number;
+  results: Order[];
+}
+
+const readProperty = (
+  properties: Record<string, unknown> | undefined,
+  key: string,
+  fallback: string,
+  breakpoint: string
+): string => {
+  if (!properties) return fallback;
+  const raw = properties[key];
+  if (raw === undefined || raw === null) return fallback;
+  if (typeof raw === 'string') return raw;
+  if (typeof raw === 'object') {
+    const responsive = raw as Record<string, unknown>;
+    const picked =
+      responsive[breakpoint] ??
+      responsive.desktop ??
+      responsive.mobile ??
+      Object.values(responsive)[0];
+    return picked == null ? fallback : String(picked);
+  }
+  return String(raw);
+};
+
+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 escapeHtml = (value: string): string =>
+  value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+
+const toHtmlText = (value: string): string => `<p>${escapeHtml(value)}</p>`;
+
+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 getOrderTrackingRole = (
+  block: Pick<Block, 'properties'>,
+  breakpoint: string
+): string =>
+  resolveResponsiveString(block.properties?.orderTrackingRole, breakpoint);
+
+const cloneOrderTrackingBlock = (
+  block: Block,
+  overrides?: {
+    properties?: Record<string, unknown>;
+    value?: unknown;
+  }
+): Block => ({
+  ...block,
+  styleSourceId: block.styleSourceId || block.id,
+  value:
+    overrides && Object.prototype.hasOwnProperty.call(overrides, 'value')
+      ? overrides.value
+      : block.value,
+  properties: {
+    ...(block.properties || {}),
+    ...(overrides?.properties || {})
+  },
+  styles: { ...(block.styles || {}) },
+  blocks: block.blocks?.map((childBlock) => cloneOrderTrackingBlock(childBlock))
+});
+
+const findOrderTrackingRoleBlock = (
+  blocks: Block[],
+  role: string,
+  breakpoint: string
+): Block | null => {
+  for (const block of blocks) {
+    if (getOrderTrackingRole(block, breakpoint) === role) {
+      return block;
+    }
+
+    if (block.blocks?.length) {
+      const nestedMatch = findOrderTrackingRoleBlock(
+        block.blocks,
+        role,
+        breakpoint
+      );
+
+      if (nestedMatch) {
+        return nestedMatch;
+      }
+    }
+  }
+
+  return null;
+};
+
+const CONTROL_LAYOUT_STYLE_KEYS = new Set([
+  'display',
+  'width',
+  'height',
+  'min-width',
+  'min-height',
+  'max-width',
+  'max-height',
+  'margin',
+  'margin-top',
+  'margin-right',
+  'margin-bottom',
+  'margin-left',
+  'padding',
+  'padding-top',
+  'padding-right',
+  'padding-bottom',
+  'padding-left',
+  'font-size',
+  'font-weight',
+  'line-height',
+  'align-items',
+  'justify-content'
+]);
+
+const normalizeOrderResponse = (response: unknown): Order | null => {
+  if (!response) return null;
+  if (Array.isArray(response)) {
+    return (response[0] as Order | undefined) || null;
+  }
+  return response as Order;
+};
+
+const resolveTrackingUrl = (order: Order | null): string => {
+  if (!order) return '';
+  if (typeof order.tracking_url === 'string' && order.tracking_url) {
+    return order.tracking_url;
+  }
+
+  const trackedItem = order.orderitem_set?.find((item) => {
+    const trackingUrl = (item as OrderItem & { tracking_url?: string })
+      .tracking_url;
+    return typeof trackingUrl === 'string' && trackingUrl.length > 0;
+  }) as (OrderItem & { tracking_url?: string }) | undefined;
+
+  return trackedItem?.tracking_url || '';
+};
+
+const resolveTrackingNumber = (order: Order | null): string => {
+  if (!order) return '';
+  if (typeof order.tracking_number === 'string' && order.tracking_number) {
+    return order.tracking_number;
+  }
+
+  const trackedItem = order.orderitem_set?.find(
+    (item) => typeof (item as OrderItem & { tracking_number?: string }).tracking_number === 'string'
+  ) as (OrderItem & { tracking_number?: string }) | undefined;
+
+  return trackedItem?.tracking_number || '';
+};
+
+const formatAmount = (value: unknown, currency: unknown): string => {
+  const amount = String(value ?? '').trim();
+  if (!amount) return '-';
+
+  const currencyLabel =
+    (currency as { label?: string; value?: string } | undefined)?.label ||
+    (currency as { label?: string; value?: string } | undefined)?.value ||
+    '';
+
+  if (!currencyLabel || amount.toUpperCase().includes(currencyLabel.toUpperCase())) {
+    return amount;
+  }
+
+  return `${amount} ${currencyLabel}`;
+};
+
+const formatDate = (value: string | undefined, locale: string): string => {
+  if (!value) return '-';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '-';
+
+  return new Intl.DateTimeFormat(locale || 'en', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric'
+  }).format(date);
+};
+
+const getStatusTone = (
+  statusText: string
+): { background: string; color: string } => {
+  const normalized = statusText.toLowerCase();
+
+  if (
+    normalized.includes('deliver') ||
+    normalized.includes('teslim') ||
+    normalized.includes('completed')
+  ) {
+    return { background: '#dcfce7', color: '#166534' };
+  }
+
+  if (
+    normalized.includes('ship') ||
+    normalized.includes('kargo') ||
+    normalized.includes('gonder') ||
+    normalized.includes('hazir')
+  ) {
+    return { background: '#dbeafe', color: '#1d4ed8' };
+  }
+
+  if (
+    normalized.includes('cancel') ||
+    normalized.includes('iptal') ||
+    normalized.includes('return') ||
+    normalized.includes('iade')
+  ) {
+    return { background: '#fee2e2', color: '#b91c1c' };
+  }
+
+  return { background: '#fef3c7', color: '#92400e' };
+};
+
+const extractErrorMessage = (
+  error: unknown,
+  fallback: string
+): string => {
+  if (!error || typeof error !== 'object') return fallback;
+
+  const errorData = (error as { data?: Record<string, unknown> }).data;
+  if (!errorData || typeof errorData !== 'object') return fallback;
+
+  const flattenedValues = Object.values(errorData).flatMap((value) => {
+    if (typeof value === 'string') return [value];
+    if (Array.isArray(value)) {
+      return value.filter((item): item is string => typeof item === 'string');
+    }
+    return [];
+  });
+
+  return flattenedValues[0] || fallback;
+};
+
+const fetchJson = async <T,>(url: string): Promise<T | null> => {
+  const response = await fetch(url, {
+    method: 'GET',
+    headers: {
+      Accept: 'application/json'
+    }
+  });
+
+  if (!response.ok) {
+    return null;
+  }
+
+  return (await response.json()) as T;
+};
+
+const findMatchingOrderInPagedResponse = async (
+  buildUrl: (page: number) => string,
+  orderNumber: string
+): Promise<Order | null> => {
+  const firstPage = await fetchJson<OrdersListResponse>(buildUrl(1));
+  if (!firstPage?.results?.length) {
+    return null;
+  }
+
+  const normalize = (value: string | number | undefined | null) =>
+    String(value ?? '').trim();
+
+  const firstMatch = firstPage.results.find(
+    (order) => normalize(order.number) === normalize(orderNumber)
+  );
+  if (firstMatch) {
+    return firstMatch;
+  }
+
+  const totalPages = Math.min(
+    Math.ceil((firstPage.count || firstPage.results.length) / 100),
+    5
+  );
+
+  for (let page = 2; page <= totalPages; page += 1) {
+    const currentPage = await fetchJson<OrdersListResponse>(buildUrl(page));
+    const currentMatch = currentPage?.results?.find(
+      (order) => normalize(order.number) === normalize(orderNumber)
+    );
+
+    if (currentMatch) {
+      return currentMatch;
+    }
+  }
+
+  return null;
+};
+
+const findAuthenticatedOrder = async (
+  orderNumber: string
+): Promise<Order | null> => {
+  const buildCurrentOrdersUrl = (page: number) =>
+    buildClientRequestUrl(account.getOrders({ page, limit: 100 }));
+  const buildOldOrdersUrl = (page: number) =>
+    buildClientRequestUrl(account.getOldOrders({ page, limit: 100 }));
+
+  return (
+    (await findMatchingOrderInPagedResponse(buildCurrentOrdersUrl, orderNumber)) ||
+    (await findMatchingOrderInPagedResponse(buildOldOrdersUrl, orderNumber))
+  );
+};
+
+export default function OrderTrackingLookupSection({
+  section,
+  currentBreakpoint = 'desktop',
+  placeholderId = '',
+  isDesigner = false,
+  selectedBlockId = null
+}: OrderTrackingLookupSectionProps) {
+  const themeSettings = useThemeSettingsContext();
+  const { locale, t } = useLocalization();
+  const [getAnonymousTracking] = useGetAnonymousTrackingMutation();
+  const [lookupOrder, setLookupOrder] = useState<Order | null>(null);
+  const [lookupError, setLookupError] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const props = section.properties || {};
+  const orderNumberPlaceholder = readProperty(
+    props,
+    'order-number-placeholder',
+    t('account.anonymous_order.form.order_id'),
+    currentBreakpoint
+  );
+  const emailPlaceholder = readProperty(
+    props,
+    'email-placeholder',
+    t('account.anonymous_order.form.email'),
+    currentBreakpoint
+  );
+  const buttonText = readProperty(
+    props,
+    'button-text',
+    t('account.anonymous_order.form.submit_button'),
+    currentBreakpoint
+  );
+  const helperText = readProperty(
+    props,
+    'helper-text',
+    'Enter your order number and the e-mail used at checkout to see live shipment details.',
+    currentBreakpoint
+  );
+  const errorMessage = readProperty(
+    props,
+    'error-message',
+    t('account.anonymous_order.not_found.description'),
+    currentBreakpoint
+  );
+  const resetButtonText = readProperty(
+    props,
+    'reset-button-text',
+    locale === 'tr' ? 'Yeni Arama Yap' : 'Search Another Order',
+    currentBreakpoint
+  );
+  const trackShipmentText = readProperty(
+    props,
+    'track-shipment-text',
+    t('account.my_orders.detail.track_shipment'),
+    currentBreakpoint
+  );
+  const showStatusBadge = readBoolean(
+    props,
+    'show-status-badge',
+    true,
+    currentBreakpoint
+  );
+  const showTrackingCard = readBoolean(
+    props,
+    'show-tracking-card',
+    true,
+    currentBreakpoint
+  );
+  const showOrderItems = readBoolean(
+    props,
+    'show-order-items',
+    true,
+    currentBreakpoint
+  );
+  const showShippingAddress = readBoolean(
+    props,
+    'show-shipping-address',
+    true,
+    currentBreakpoint
+  );
+  const maxItems = Math.max(
+    1,
+    Math.min(6, readNumber(props, 'max-items', 3, currentBreakpoint))
+  );
+
+  const requiredMessage = t('account.anonymous_order.error.required');
+  const emailMessage = t('account.anonymous_order.error.email_valid');
+
+  const schema = useMemo(
+    () =>
+      yup.object().shape({
+        number: yup.string().trim().required(requiredMessage),
+        email: yup.string().trim().email(emailMessage).required(requiredMessage)
+      }),
+    [emailMessage, requiredMessage]
+  );
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<OrderTrackingLookupFormType>({
+    resolver: yupResolver(schema)
+  });
+
+  const maxWidth = getResponsiveValue(
+    section.styles?.['max-width'],
+    currentBreakpoint,
+    'normal'
+  );
+  const maxWidthClass =
+    maxWidth === 'narrow'
+      ? 'max-w-4xl'
+      : maxWidth === 'normal'
+        ? 'max-w-7xl'
+        : maxWidth === 'full'
+          ? 'w-full'
+          : '';
+  const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
+
+  const 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 buttonBorderRadius = String(
+    getResponsiveValue(
+      section.styles?.['button-border-radius'],
+      currentBreakpoint,
+      '10px'
+    )
+  );
+  const buttonPadding = String(
+    getResponsiveValue(
+      section.styles?.['button-padding'],
+      currentBreakpoint,
+      '14px 28px'
+    )
+  );
+  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 formGap = getResponsiveValue(
+    section.styles?.['form-gap'],
+    currentBreakpoint,
+    16
+  );
+  const badgeBackground = resolveThemeCssVariables(
+    String(
+      getResponsiveValue(
+        section.styles?.['badge-background-color'],
+        currentBreakpoint,
+        '#dbeafe'
+      )
+    ),
+    themeSettings
+  );
+  const badgeText = resolveThemeCssVariables(
+    String(
+      getResponsiveValue(
+        section.styles?.['badge-text-color'],
+        currentBreakpoint,
+        '#1d4ed8'
+      )
+    ),
+    themeSettings
+  );
+
+  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',
+          'result-card-background-color',
+          'result-card-border-color',
+          'result-card-border-radius',
+          'badge-background-color',
+          'badge-text-color'
+        ].includes(key)
+    )
+  );
+
+  const sectionStyles = getCSSStyles(
+    filteredStyles,
+    themeSettings,
+    currentBreakpoint
+  );
+
+  const sortedBlocks = [...(section.blocks || [])]
+    .sort((a, b) => (a.order || 0) - (b.order || 0))
+    .filter((block) => (isDesigner ? true : !block.hidden));
+
+  const contentGroup = sortedBlocks.find(
+    (block) => block.type === 'group' && block.label === 'Content Container'
+  );
+  const textBlocks =
+    contentGroup?.blocks?.filter((block) => block.type === 'text') || [];
+  const formPanelWrapperBlock = findOrderTrackingRoleBlock(
+    sortedBlocks,
+    'form-panel-wrapper',
+    currentBreakpoint
+  );
+  const orderInputBlock = findOrderTrackingRoleBlock(
+    sortedBlocks,
+    'order-input',
+    currentBreakpoint
+  );
+  const emailInputBlock = findOrderTrackingRoleBlock(
+    sortedBlocks,
+    'email-input',
+    currentBreakpoint
+  );
+  const submitButtonBlock = findOrderTrackingRoleBlock(
+    sortedBlocks,
+    'submit-button',
+    currentBreakpoint
+  );
+  const helperTextBlock = findOrderTrackingRoleBlock(
+    sortedBlocks,
+    'helper-text',
+    currentBreakpoint
+  );
+  const errorWrapperBlock = findOrderTrackingRoleBlock(
+    sortedBlocks,
+    'error-wrapper',
+    currentBreakpoint
+  );
+  const errorTextBlock = findOrderTrackingRoleBlock(
+    sortedBlocks,
+    'error-text',
+    currentBreakpoint
+  );
+  const resultWrapperBlock = findOrderTrackingRoleBlock(
+    sortedBlocks,
+    'result-wrapper',
+    currentBreakpoint
+  );
+  const statusBadgeBlock = findOrderTrackingRoleBlock(
+    sortedBlocks,
+    'status-badge',
+    currentBreakpoint
+  );
+  const summaryCardWrapperBlock = findOrderTrackingRoleBlock(
+    sortedBlocks,
+    'summary-card-wrapper',
+    currentBreakpoint
+  );
+  const trackingCardWrapperBlock = findOrderTrackingRoleBlock(
+    sortedBlocks,
+    'tracking-card-wrapper',
+    currentBreakpoint
+  );
+  const shippingAddressWrapperBlock = findOrderTrackingRoleBlock(
+    sortedBlocks,
+    'shipping-address-wrapper',
+    currentBreakpoint
+  );
+  const itemsListWrapperBlock = findOrderTrackingRoleBlock(
+    sortedBlocks,
+    'items-list-wrapper',
+    currentBreakpoint
+  );
+  const orderItemWrapperBlock = findOrderTrackingRoleBlock(
+    sortedBlocks,
+    'order-item-wrapper',
+    currentBreakpoint
+  );
+  const resetButtonBlock = findOrderTrackingRoleBlock(
+    sortedBlocks,
+    'reset-button',
+    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?: React.Key) => {
+    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 statusLabel = lookupOrder?.status?.label || '';
+  const statusTone = getStatusTone(statusLabel);
+
+  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: isSubmitting ? 'default' : 'pointer',
+    opacity: isSubmitting ? 0.7 : 1,
+    transition: 'all 0.2s ease',
+    fontFamily: 'inherit',
+    whiteSpace: 'nowrap',
+    lineHeight: 1.2
+  };
+
+  const panelStyle: 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 orderInputStyle = mergeControlStyles(inputStyle, orderInputBlock);
+  const emailInputStyle = mergeControlStyles(inputStyle, emailInputBlock);
+  const submitButtonStyle = mergeControlStyles(buttonStyle, submitButtonBlock);
+  const statusBadgeStyle: React.CSSProperties = {
+    backgroundColor: badgeBackground || statusTone.background,
+    color: badgeText || statusTone.color,
+    ...(statusBadgeBlock
+      ? getCSSStyles(
+          statusBadgeBlock.styles || {},
+          themeSettings,
+          currentBreakpoint
+        )
+      : {})
+  };
+  const resetButtonStyle = mergeControlStyles(
+    {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      border: '1px solid #cbd5e1',
+      backgroundColor: '#ffffff',
+      color: '#0f172a',
+      borderRadius: '10px',
+      padding: '12px 20px',
+      fontSize: '14px',
+      fontWeight: 700,
+      fontFamily: 'inherit',
+      cursor: 'pointer',
+      whiteSpace: 'nowrap',
+      lineHeight: 1.2
+    },
+    resetButtonBlock
+  );
+
+  const onSubmit: SubmitHandler<OrderTrackingLookupFormType> = async (data) => {
+    setLookupError('');
+    setLookupOrder(null);
+    setIsSubmitting(true);
+
+    let latestErrorMessage = errorMessage;
+
+    try {
+      const response = await getAnonymousTracking(data).unwrap();
+      const normalizedOrder = normalizeOrderResponse(response);
+
+      if (normalizedOrder) {
+        setLookupOrder(normalizedOrder);
+        setIsSubmitting(false);
+        return;
+      }
+    } catch (error) {
+      latestErrorMessage = extractErrorMessage(error, errorMessage);
+    }
+
+    try {
+      const authenticatedOrder = await findAuthenticatedOrder(data.number);
+      if (authenticatedOrder) {
+        setLookupOrder(authenticatedOrder);
+        return;
+      }
+    } catch {
+      // Ignore authenticated lookup failures and fall back to the latest API error.
+    } finally {
+      setIsSubmitting(false);
+    }
+
+    setLookupError(latestErrorMessage);
+  };
+
+  const handleReset = () => {
+    setLookupOrder(null);
+    setLookupError('');
+  };
+
+  const visibleItems = (lookupOrder?.orderitem_set || []).slice(0, maxItems);
+  const groupedPackageCount = lookupOrder
+    ? new Set(
+        lookupOrder.orderitem_set
+          .map((item) => (item as OrderItem & { tracking_number?: string }).tracking_number)
+          .filter(Boolean)
+      ).size || 1
+    : 0;
+  const trackingUrl = resolveTrackingUrl(lookupOrder);
+  const trackingNumber = resolveTrackingNumber(lookupOrder);
+  const localeCode = locale || 'en';
+  const isMobile = currentBreakpoint === 'mobile';
+
+  return (
+    <div
+      className={twMerge(
+        clsx('w-full relative z-10', hasMaxWidth && 'mx-auto', maxWidthClass)
+      )}
+      style={sectionStyles}
+    >
+      <div
+        className={clsx(
+          'grid items-start gap-6',
+          isMobile ? 'grid-cols-1' : 'md:grid-cols-[0.9fr_1.1fr]'
+        )}
+      >
+        <div className="flex flex-col gap-4">
+          {textBlocks.map(renderBlock)}
+        </div>
+
+        <div className="flex flex-col gap-4" style={{ gap: `${formGap}px` }}>
+          {renderSelectableWrapper(
+            formPanelWrapperBlock,
+            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-3">
+              {renderSelectableElement(
+                orderInputBlock,
+                <input
+                  type="text"
+                  placeholder={orderNumberPlaceholder}
+                  {...register('number')}
+                  style={orderInputStyle}
+                />,
+                {
+                  keyOverride: 'order-input'
+                }
+              )}
+              {errors.number && (
+                <span className="text-xs text-[#ef4444]">
+                  {errors.number.message}
+                </span>
+              )}
+
+              {renderSelectableElement(
+                emailInputBlock,
+                <input
+                  type="email"
+                  placeholder={emailPlaceholder}
+                  {...register('email')}
+                  style={emailInputStyle}
+                />,
+                {
+                  keyOverride: 'email-input'
+                }
+              )}
+              {errors.email && (
+                <span className="text-xs text-[#ef4444]">
+                  {errors.email.message}
+                </span>
+              )}
+
+              {renderSelectableElement(
+                submitButtonBlock,
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  style={submitButtonStyle}
+                >
+                  {isSubmitting
+                    ? localeCode === 'tr'
+                      ? 'Yukleniyor...'
+                      : 'Loading...'
+                    : buttonText}
+                </button>,
+                {
+                  keyOverride: 'submit-button'
+                }
+              )}
+
+              {helperTextBlock ? (
+                renderBlock(
+                  cloneOrderTrackingBlock(helperTextBlock, {
+                    value: toHtmlText(helperText)
+                  }),
+                  'helper-text'
+                )
+              ) : (
+                <p className="m-0 text-sm leading-6 text-[#64748b]">
+                  {helperText}
+                </p>
+              )}
+            </form>,
+            {
+              className: 'p-5 md:p-6',
+              style: panelStyle,
+              keyOverride: 'form-panel-wrapper'
+            }
+          )}
+
+          {lookupError ? (
+            renderSelectableWrapper(
+              errorWrapperBlock,
+              errorTextBlock ? (
+                renderBlock(
+                  cloneOrderTrackingBlock(errorTextBlock, {
+                    value: toHtmlText(lookupError)
+                  }),
+                  'error-text'
+                )
+              ) : (
+                <div className="text-sm text-[#b91c1c]">{lookupError}</div>
+              ),
+              {
+                className:
+                  'rounded-[12px] border border-[#fecaca] bg-[#fff1f2] px-4 py-3',
+                keyOverride: 'lookup-error'
+              }
+            )
+          ) : null}
+        </div>
+      </div>
+
+      {lookupOrder ? (
+        renderSelectableWrapper(
+          resultWrapperBlock,
+          <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+            <div className="flex flex-col gap-1">
+              <span className="text-xs font-semibold uppercase tracking-[0.12em] text-[#64748b]">
+                {t('account.my_orders.detail.title')}
+              </span>
+              <h3 className="m-0 text-2xl font-bold text-[#0f172a]">
+                #{lookupOrder.number}
+              </h3>
+            </div>
+
+            {showStatusBadge && statusLabel ? (
+              renderSelectableElement(
+                statusBadgeBlock,
+                <span
+                  className="inline-flex w-fit items-center px-3 py-2 text-xs font-semibold uppercase tracking-[0.08em]"
+                  style={statusBadgeStyle}
+                >
+                  {statusLabel}
+                </span>,
+                {
+                  keyOverride: 'status-badge'
+                }
+              )
+            ) : null}
+          </div>
+
+          <div
+            className={clsx(
+              'grid gap-3',
+              isMobile ? 'grid-cols-2' : 'md:grid-cols-4'
+            )}
+          >
+            {[
+              {
+                key: 'summary-order-number',
+                label: t('account.my_orders.detail.order_number'),
+                value: `#${lookupOrder.number}`
+              },
+              {
+                key: 'summary-order-date',
+                label: t('account.my_orders.detail.order_date'),
+                value: formatDate(lookupOrder.created_date, localeCode)
+              },
+              {
+                key: 'summary-order-total',
+                label: t('account.my_orders.detail.total'),
+                value: formatAmount(lookupOrder.amount, lookupOrder.currency)
+              },
+              {
+                key: 'summary-order-products',
+                label: t('account.my_orders.detail.products'),
+                value: `${lookupOrder.orderitem_set?.length || 0} / ${groupedPackageCount} ${t(
+                  'account.my_orders.detail.packages'
+                )}`
+              }
+            ].map((summaryItem) =>
+              renderSelectableWrapper(
+                summaryCardWrapperBlock,
+                <>
+                  <div className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[#64748b]">
+                    {summaryItem.label}
+                  </div>
+                  <div className="mt-2 text-sm font-semibold text-[#0f172a]">
+                    {summaryItem.value}
+                  </div>
+                </>,
+                {
+                  className: 'rounded-[10px] bg-[#f8fafc] p-3',
+                  keyOverride: summaryItem.key
+                }
+              )
+            )}
+          </div>
+
+          {showTrackingCard && (trackingUrl || trackingNumber) ? (
+            renderSelectableWrapper(
+              trackingCardWrapperBlock,
+              <>
+                <div className="flex flex-col gap-1">
+                  <span className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[#1d4ed8]">
+                    {localeCode === 'tr' ? 'Kargo Bilgisi' : 'Shipment Details'}
+                  </span>
+                  <span className="text-sm font-semibold text-[#0f172a]">
+                    {trackingNumber || statusLabel}
+                  </span>
+                </div>
+
+                {trackingUrl ? (
+                  <a
+                    href={trackingUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="inline-flex w-fit items-center justify-center rounded-[10px] bg-[#0f172a] px-5 py-3 text-sm font-semibold text-white no-underline"
+                  >
+                    {trackShipmentText}
+                  </a>
+                ) : null}
+              </>,
+              {
+                className:
+                  'flex flex-col gap-3 rounded-[12px] border border-[#dbeafe] bg-[#eff6ff] p-4 md:flex-row md:items-center md:justify-between',
+                keyOverride: 'tracking-card'
+              }
+            )
+          ) : null}
+
+          {showShippingAddress && lookupOrder.shipping_address?.line ? (
+            renderSelectableWrapper(
+              shippingAddressWrapperBlock,
+              <>
+                <div className="mb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[#64748b]">
+                  {t('account.my_orders.detail.delivery_address')}
+                </div>
+                <div>
+                  {lookupOrder.shipping_address.line}{' '}
+                  {lookupOrder.shipping_address.district?.name}{' '}
+                  {lookupOrder.shipping_address.township?.name}{' '}
+                  {lookupOrder.shipping_address.city?.name}
+                </div>
+              </>,
+              {
+                className: 'rounded-[12px] bg-[#f8fafc] p-4 text-sm leading-6 text-[#334155]',
+                keyOverride: 'shipping-address'
+              }
+            )
+          ) : null}
+
+          {showOrderItems ? (
+            <div className="flex flex-col gap-3">
+              <div className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[#64748b]">
+                {t('account.my_orders.detail.products')}
+              </div>
+              {renderSelectableWrapper(
+                itemsListWrapperBlock,
+                visibleItems.map((item, index) =>
+                  renderSelectableWrapper(
+                    orderItemWrapperBlock,
+                    <>
+                      <div className="flex min-w-0 items-center gap-3">
+                        <div className="relative h-16 w-16 shrink-0 overflow-hidden rounded-[8px] bg-[#f1f5f9]">
+                          <Image
+                            src={item.product?.image || '/noimage.jpg'}
+                            alt={item.product?.name || ''}
+                            fill
+                            sizes="64px"
+                            aspectRatio={1}
+                            imageClassName="object-cover"
+                          />
+                        </div>
+                        <div className="min-w-0">
+                          <div className="truncate text-sm font-semibold text-[#0f172a]">
+                            {item.product?.name}
+                          </div>
+                          <div className="mt-1 text-xs text-[#64748b]">
+                            {t('account.my_orders.detail.items')}: {item.quantity}
+                            {' · '}
+                            {item.status?.label}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex shrink-0 flex-col items-start text-sm md:items-end">
+                        {parseFloat(item.retail_price) > parseFloat(item.price) ? (
+                          <span className="text-xs text-[#94a3b8] line-through">
+                            {formatAmount(item.retail_price, item.price_currency)}
+                          </span>
+                        ) : null}
+                        <span className="font-semibold text-[#0f172a]">
+                          {formatAmount(item.price, item.price_currency)}
+                        </span>
+                      </div>
+                    </>,
+                    {
+                      className:
+                        'flex flex-col gap-3 p-4 md:flex-row md:items-center md:justify-between',
+                      keyOverride: `order-item-${item.id}-${index}`
+                    }
+                  )
+                ),
+                {
+                  className:
+                    'flex flex-col divide-y divide-[#e2e8f0] overflow-hidden rounded-[12px] border border-[#e2e8f0] bg-white',
+                  keyOverride: 'items-list-wrapper'
+                }
+              )}
+            </div>
+          ) : null}
+
+          <div className="pt-2">
+            {renderSelectableElement(
+              resetButtonBlock,
+              <button
+                type="button"
+                onClick={handleReset}
+                style={resetButtonStyle}
+              >
+                {resetButtonText}
+              </button>,
+              {
+                keyOverride: 'reset-button'
+              }
+            )}
+          </div>
+        </div>,
+          {
+            className: 'mt-6 flex flex-col gap-4 p-5 md:p-6',
+            style: panelStyle,
+            keyOverride: 'result-wrapper'
+          }
+        )
+      ) : null}
+    </div>
+  );
+}