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

package/components/theme-editor/utils/iterator-utils.ts

@@ -0,0 +1,234 @@
+import { Block } from '../theme-block';
+
+interface IteratorOptions {
+  iteratorBlock: Block;
+  sectionDataSource?: any;
+  isDesigner?: boolean;
+  forceIteratorCount?: number;
+  forceIteratorOffset?: number;
+}
+
+const parsePositiveNumber = (value: unknown, fallback: number): number => {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return Math.max(0, Math.floor(value));
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) {
+      return Math.max(0, Math.floor(parsed));
+    }
+  }
+  return fallback;
+};
+
+const extractProducts = (
+  collectionData: any,
+  dataPath: string | undefined
+): Record<string, unknown>[] | null => {
+  if (!collectionData) return null;
+
+  // Respect explicit iterator path first.
+  if (dataPath) {
+    if (Array.isArray(collectionData)) {
+      if (dataPath === 'products' || dataPath === 'items') {
+        return collectionData as Record<string, unknown>[];
+      }
+    } else if (collectionData && typeof collectionData === 'object') {
+      const pathParts = dataPath.split('.');
+      let value: unknown = collectionData;
+
+      for (const part of pathParts) {
+        value = (value as Record<string, unknown>)?.[part];
+        if (value === undefined) break;
+      }
+
+      if (Array.isArray(value)) {
+        return value as Record<string, unknown>[];
+      }
+    }
+  }
+
+  // Fallback to generic products array for backward compatibility.
+  if (Array.isArray(collectionData)) {
+    return collectionData as Record<string, unknown>[];
+  }
+
+  if (Array.isArray((collectionData as any)?.products)) {
+    return (collectionData as any).products;
+  }
+
+  return null;
+};
+
+const getProductsFromDataSource = (
+  sectionDataSource: any,
+  dataPath: string | undefined,
+  isDesigner: boolean
+): Record<string, unknown>[] => {
+  if (!sectionDataSource?.details) {
+    return [];
+  }
+
+  const isEditorMode =
+    isDesigner && typeof window !== 'undefined' && window.parent !== window;
+
+  const collection = sectionDataSource.details.collection;
+
+  // In editor mode, prefer live products; on storefront, prefer fetched data.
+  // Fall back to the other source if the primary one yields no products.
+  const candidates = isEditorMode
+    ? [collection?.products, collection?.data]
+    : [collection?.data, collection?.products];
+
+  for (const candidate of candidates) {
+    const products = extractProducts(candidate, dataPath);
+    if (products && products.length > 0) {
+      return products;
+    }
+  }
+
+  return [];
+};
+
+const replaceBlockValues = (
+  blockToReplace: Block,
+  productData: Record<string, unknown>,
+  productIndex: number
+): Block => {
+  const newBlock: Block = {
+    ...blockToReplace,
+    properties: blockToReplace.properties
+      ? { ...blockToReplace.properties }
+      : blockToReplace.properties
+  };
+
+  const isPlaceholderMode = !productData || Object.keys(productData).length === 0;
+
+  if (newBlock.properties?.dataBinding && !isPlaceholderMode) {
+    const bindingPath = newBlock.properties.dataBinding.replace('item.', '');
+    const pathParts = bindingPath.split('.');
+
+    let value: unknown = productData;
+    for (const part of pathParts) {
+      const arrayMatch = part.match(/^(.+)\[(\d+)\]$/);
+      if (arrayMatch) {
+        const [, arrayName, indexStr] = arrayMatch;
+        const obj = value as Record<string, unknown>;
+        const arr = obj?.[arrayName];
+        if (Array.isArray(arr)) {
+          value = arr[parseInt(indexStr, 10)];
+        } else {
+          value = undefined;
+        }
+      } else {
+        value = (value as Record<string, unknown>)?.[part];
+      }
+      if (value === undefined) break;
+    }
+
+    if (value !== undefined) {
+      if (newBlock.properties.tag === 'a') {
+        newBlock.properties = {
+          ...newBlock.properties,
+          href: value
+        };
+      } else {
+        newBlock.value = value;
+      }
+    }
+  } else if (isPlaceholderMode && newBlock.type === 'image') {
+    const placeholderImages = [
+      '/assets/images/product-placeholder-1.jpg',
+      '/assets/images/product-placeholder-2.jpg',
+      '/assets/images/product-placeholder-3.jpg',
+      '/assets/images/product-placeholder-4.jpg'
+    ];
+
+    const placeholderIndex = productIndex % placeholderImages.length;
+
+    if (
+      newBlock.value &&
+      typeof newBlock.value === 'string' &&
+      newBlock.value.includes('product-placeholder')
+    ) {
+      newBlock.value = placeholderImages[placeholderIndex];
+    }
+  }
+
+  if (newBlock.blocks && newBlock.blocks.length > 0) {
+    newBlock.blocks = newBlock.blocks.map(childBlock =>
+      replaceBlockValues(childBlock, productData, productIndex)
+    );
+  }
+
+  return newBlock;
+};
+
+export const buildIteratorBlock = ({
+  iteratorBlock,
+  sectionDataSource,
+  isDesigner = false,
+  forceIteratorCount,
+  forceIteratorOffset
+}: IteratorOptions): Block => {
+  if (
+    !iteratorBlock.isIterator ||
+    !iteratorBlock.blocks ||
+    iteratorBlock.blocks.length === 0
+  ) {
+    return iteratorBlock;
+  }
+
+  const template = iteratorBlock.blocks[0];
+  const dataPath =
+    iteratorBlock.iteratorDataPath || iteratorBlock.properties?.iteratorDataPath;
+  const products = getProductsFromDataSource(
+    sectionDataSource,
+    dataPath,
+    isDesigner
+  );
+
+  const useIteratorCount =
+    forceIteratorCount !== undefined
+      ? true
+      : iteratorBlock.properties?.useIteratorCount === true ||
+        iteratorBlock.properties?.useIteratorCount === 'true';
+  const iteratorCount =
+    forceIteratorCount !== undefined
+      ? Math.max(1, Math.floor(forceIteratorCount))
+      : parsePositiveNumber(iteratorBlock.properties?.iteratorCount, 1);
+  const iteratorOffset =
+    forceIteratorOffset !== undefined
+      ? Math.max(0, Math.floor(forceIteratorOffset))
+      : parsePositiveNumber(iteratorBlock.properties?.iteratorOffset, 0);
+
+  const displayProducts =
+    products.length > 0
+      ? useIteratorCount
+        ? products.slice(iteratorOffset, iteratorOffset + iteratorCount)
+        : products
+      : [];
+
+  const actualCount =
+    displayProducts.length > 0 ? displayProducts.length : Math.max(iteratorCount, 1);
+
+  const clonedBlocks = Array.from({ length: actualCount }, (_, index) => {
+    const product = displayProducts[index] || {};
+
+    const templateCopy: Block = {
+      ...template,
+      id: `${template.id}-clone-${index}`,
+      properties: template.properties
+        ? { ...template.properties }
+        : template.properties,
+      blocks: template.blocks ? template.blocks.map(b => ({ ...b })) : undefined
+    };
+
+    return replaceBlockValues(templateCopy, product, index);
+  });
+
+  return {
+    ...iteratorBlock,
+    blocks: clonedBlocks
+  };
+};

package/components/theme-editor/utils/publish-window.ts

@@ -0,0 +1,86 @@
+export interface PublishWindowValue {
+  enabled?: boolean;
+  startAt?: string;
+  endAt?: string;
+}
+
+export type PublishWindowStatus =
+  | 'inactive'
+  | 'scheduled'
+  | 'active'
+  | 'expired';
+
+const isPublishWindowShape = (value: unknown): value is PublishWindowValue => {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return false;
+  }
+
+  const candidate = value as Record<string, unknown>;
+  return (
+    candidate.enabled !== undefined ||
+    candidate.startAt !== undefined ||
+    candidate.endAt !== undefined
+  );
+};
+
+export const normalizePublishWindowValue = (
+  value: unknown
+): PublishWindowValue => {
+  if (isPublishWindowShape(value)) {
+    return {
+      enabled: value.enabled === true,
+      startAt: typeof value.startAt === 'string' ? value.startAt : '',
+      endAt: typeof value.endAt === 'string' ? value.endAt : ''
+    };
+  }
+
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    const responsiveValue = value as Record<string, unknown>;
+    const nestedValue =
+      responsiveValue.desktop ||
+      responsiveValue.mobile ||
+      responsiveValue.tablet;
+
+    if (nestedValue && nestedValue !== value) {
+      return normalizePublishWindowValue(nestedValue);
+    }
+  }
+
+  return {
+    enabled: false,
+    startAt: '',
+    endAt: ''
+  };
+};
+
+const parsePublishTime = (value?: string): number | null => {
+  if (!value) return null;
+  const parsed = Date.parse(value);
+  return Number.isNaN(parsed) ? null : parsed;
+};
+
+export const getPublishWindowStatus = (
+  value: unknown,
+  now: Date = new Date()
+): PublishWindowStatus => {
+  const publishWindow = normalizePublishWindowValue(value);
+
+  if (!publishWindow.enabled) return 'inactive';
+
+  const currentTime = now.getTime();
+  const startAt = parsePublishTime(publishWindow.startAt);
+  const endAt = parsePublishTime(publishWindow.endAt);
+
+  if (startAt !== null && currentTime < startAt) return 'scheduled';
+  if (endAt !== null && currentTime > endAt) return 'expired';
+
+  return 'active';
+};
+
+export const isPublishWindowVisible = (
+  value: unknown,
+  now: Date = new Date()
+): boolean => {
+  const status = getPublishWindowStatus(value, now);
+  return status === 'inactive' || status === 'active';
+};

package/components/theme-editor/utils/visibility-rules.ts

@@ -0,0 +1,188 @@
+import { Block } from '../theme-block';
+import { Section } from '../theme-section';
+
+export type VisibilityAuthState = 'all' | 'authenticated' | 'guest';
+export type VisibilityPathMatchType =
+  | 'any'
+  | 'equals'
+  | 'contains'
+  | 'startsWith';
+
+export interface VisibilityRules {
+  enabled?: boolean;
+  authState?: VisibilityAuthState;
+  allowedBreakpoints?: string[];
+  allowedLocales?: string[];
+  allowedCurrencies?: string[];
+  pathnameMatchType?: VisibilityPathMatchType;
+  pathnameValue?: string;
+  queryParamKey?: string;
+  queryParamValue?: string;
+}
+
+export interface VisibilityRuleContext {
+  authState: 'authenticated' | 'guest' | 'loading';
+  breakpoint: string;
+  locale: string;
+  currency: string;
+  pathname: string;
+  searchParams?: {
+    get: (key: string) => string | null;
+  } | null;
+}
+
+const normalizeStringArray = (value: unknown): string[] => {
+  if (!Array.isArray(value)) return [];
+  return value
+    .map(item => String(item || '').trim())
+    .filter(Boolean);
+};
+
+export const normalizeVisibilityRules = (value: unknown): VisibilityRules => {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return {
+      enabled: false,
+      authState: 'all',
+      allowedBreakpoints: [],
+      allowedLocales: [],
+      allowedCurrencies: [],
+      pathnameMatchType: 'any',
+      pathnameValue: '',
+      queryParamKey: '',
+      queryParamValue: ''
+    };
+  }
+
+  const rules = value as Record<string, unknown>;
+  return {
+    enabled: rules.enabled === true,
+    authState:
+      rules.authState === 'authenticated' || rules.authState === 'guest'
+        ? rules.authState
+        : 'all',
+    allowedBreakpoints: normalizeStringArray(rules.allowedBreakpoints),
+    allowedLocales: normalizeStringArray(rules.allowedLocales),
+    allowedCurrencies: normalizeStringArray(rules.allowedCurrencies).map(item =>
+      item.toUpperCase()
+    ),
+    pathnameMatchType:
+      rules.pathnameMatchType === 'equals' ||
+      rules.pathnameMatchType === 'contains' ||
+      rules.pathnameMatchType === 'startsWith'
+        ? rules.pathnameMatchType
+        : 'any',
+    pathnameValue: String(rules.pathnameValue || '').trim(),
+    queryParamKey: String(rules.queryParamKey || '').trim(),
+    queryParamValue: String(rules.queryParamValue || '').trim()
+  };
+};
+
+export const evaluateVisibilityRules = (
+  rawRules: unknown,
+  context: VisibilityRuleContext
+): boolean => {
+  const rules = normalizeVisibilityRules(rawRules);
+  if (!rules.enabled) return true;
+
+  if (rules.authState && rules.authState !== 'all') {
+    if (context.authState === 'loading') return false;
+    if (rules.authState === 'authenticated') {
+      if (context.authState !== 'authenticated') return false;
+    } else if (context.authState !== 'guest') {
+      return false;
+    }
+  }
+
+  if (
+    rules.allowedBreakpoints &&
+    rules.allowedBreakpoints.length > 0 &&
+    !rules.allowedBreakpoints.includes(context.breakpoint)
+  ) {
+    return false;
+  }
+
+  if (
+    rules.allowedLocales &&
+    rules.allowedLocales.length > 0 &&
+    !rules.allowedLocales.includes(context.locale)
+  ) {
+    return false;
+  }
+
+  if (
+    rules.allowedCurrencies &&
+    rules.allowedCurrencies.length > 0 &&
+    !rules.allowedCurrencies.includes(String(context.currency || '').toUpperCase())
+  ) {
+    return false;
+  }
+
+  const pathname = String(context.pathname || '');
+  if (rules.pathnameMatchType && rules.pathnameMatchType !== 'any') {
+    const ruleValue = String(rules.pathnameValue || '').trim();
+    if (!ruleValue) return false;
+
+    if (rules.pathnameMatchType === 'equals' && pathname !== ruleValue) {
+      return false;
+    }
+
+    if (
+      rules.pathnameMatchType === 'contains' &&
+      !pathname.includes(ruleValue)
+    ) {
+      return false;
+    }
+
+    if (
+      rules.pathnameMatchType === 'startsWith' &&
+      !pathname.startsWith(ruleValue)
+    ) {
+      return false;
+    }
+  }
+
+  if (rules.queryParamKey) {
+    const actualValue = context.searchParams?.get(rules.queryParamKey) ?? null;
+    if (actualValue === null) return false;
+    if (rules.queryParamValue && actualValue !== rules.queryParamValue) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+const applyBlockVisibility = (
+  block: Block,
+  context: VisibilityRuleContext
+): Block => {
+  const blocks = block.blocks?.map(child => applyBlockVisibility(child, context));
+  const isVisibleByRules = evaluateVisibilityRules(
+    block.properties?.visibilityRules,
+    context
+  );
+
+  return {
+    ...block,
+    hidden: Boolean(block.hidden) || !isVisibleByRules,
+    blocks
+  };
+};
+
+export const applyVisibilityRulesToSections = (
+  sections: Section[],
+  context: VisibilityRuleContext
+): Section[] =>
+  sections.map(section => {
+    const blocks = section.blocks.map(block => applyBlockVisibility(block, context));
+    const isVisibleByRules = evaluateVisibilityRules(
+      section.properties?.visibilityRules,
+      context
+    );
+
+    return {
+      ...section,
+      hidden: Boolean(section.hidden) || !isVisibleByRules,
+      blocks
+    };
+  });

package/data/client/misc.ts

@@ -1,7 +1,9 @@
 import {
   EmailSubscriptionType,
   MenuItemType,
-  WidgetResultType
+  WidgetResultType,
+  WidgetSchemaType,
+  DynamicWidgetResultType
 } from '../../types';
 import { buildClientRequestUrl } from '../../utils';
 import { misc, widgets } from '../urls';
@@ -80,11 +82,20 @@ export const miscApi = api.injectEndpoints({
         };
       }
     }),
+    // change any type
     getWidget: builder.query<WidgetResultType<any>, string>({
       query: (slug: string) => ({
         url: buildClientRequestUrl(widgets.getWidget(slug))
       })
     }),
+    getWidgetSchema: builder.query<
+      WidgetSchemaType<DynamicWidgetResultType>,
+      string
+    >({
+      query: (widgetSlug: string) => ({
+        url: buildClientRequestUrl(widgets.getWidgetSchema(widgetSlug))
+      })
+    }),
     getMenu: builder.query<MenuItemType[], GetMenuParams>({
       query: ({ depth, parent }) => ({
         url: buildClientRequestUrl(misc.menus(depth, parent))
@@ -125,6 +136,7 @@ export const {
   useEmailSubscriptionMutation,
   useSetLanguageMutation,
   useGetWidgetQuery,
+  useGetWidgetSchemaQuery,
   useGetMenuQuery,
   useGetBukalemunImageUrlQuery
 } = miscApi;

package/data/server/widget.ts

@@ -1,6 +1,6 @@
 import { Cache, CacheKey } from '../../lib/cache';
 import 'server-only';
-import { CacheOptions, WidgetResultType } from '../../types';
+import { CacheOptions, WidgetResultType, WidgetSchemaType } from '../../types';
 import appFetch from '../../utils/app-fetch';
 import { widgets } from '../urls';
 import { ServerVariables } from '../../utils/server-variables';
@@ -27,6 +27,19 @@ const getWidgetDataHandler =
     });
   };
 
+const getWidgetSchemaDataHandler =
+  (widgetSlug: string, locale: string, currency: string) => async () => {
+    if (!widgetSlug) {
+      return null;
+    }
+
+    return await appFetch({
+      url: widgets.getWidgetSchema(widgetSlug),
+      locale,
+      currency
+    });
+  };
+
 export const getWidgetData = async <T>({
   slug,
   locale = ServerVariables.locale,
@@ -50,3 +63,57 @@ export const getWidgetData = async <T>({
     }
   );
 };
+
+const getCollectionWidgetDataHandler =
+  (slug: string, locale: string, currency: string) => async () => {
+    if (!slug) {
+      return null;
+    }
+
+    return await appFetch({
+      url: widgets.getCollectionWidget(slug),
+      locale,
+      currency
+    });
+  };
+
+export const getCollectionWidgetData = async <T>({
+  slug,
+  locale = ServerVariables.locale,
+  currency = ServerVariables.currency,
+  cacheOptions
+}: {
+  slug: string;
+  locale?: string;
+  currency?: string;
+  cacheOptions?: CacheOptions;
+}): Promise<WidgetResultType<T>> => {
+  return Cache.wrap(
+    CacheKey.Widget(`collection:${slug}`),
+    locale,
+    getCollectionWidgetDataHandler(slug, locale, currency),
+    {
+      compressed: true,
+      ...cacheOptions
+    }
+  );
+};
+
+export const getWidgetSchemaData = async <T>({
+  widgetSlug,
+  locale = ServerVariables.locale,
+  currency = ServerVariables.currency,
+  cacheOptions
+}: {
+  widgetSlug: string;
+  locale?: string;
+  currency?: string;
+  cacheOptions?: CacheOptions;
+}): Promise<WidgetSchemaType<T>> => {
+  return Cache.wrap(
+    CacheKey.WidgetSchema(widgetSlug),
+    locale,
+    getWidgetSchemaDataHandler(widgetSlug, locale, currency),
+    cacheOptions
+  );
+};

package/data/urls.ts

@@ -243,7 +243,9 @@ export const b2b = {
 };
 
 export const widgets = {
-  getWidget: (slug: string) => `/widgets/${slug}/`
+  getWidget: (slug: string) => `/widgets/${slug}/`,
+  getWidgetSchema: (widgetSlug: string) => `/widgets/${widgetSlug}/schema/`,
+  getCollectionWidget: (slug: string) => `/product_collection_widgets/${slug}/`
 };
 
 export const form = {