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

package/components/theme-editor/theme-placeholder.tsx

@@ -0,0 +1,288 @@
+import 'server-only';
+
+import { getCollectionWidgetData, getWidgetData, getWidgetSchemaData } from '@akinon/next/data/server';
+import ThemePlaceholderWrapper from './theme-placeholder-wrapper';
+import { Section } from './theme-section';
+import { generateThemeCSS } from './utils';
+
+type ThemePlaceholderData = {
+  theme_editor_placeholder: Array<{
+    section_slug: string;
+    order: number;
+  }>;
+};
+
+interface ThemePlaceholderProps {
+  slug: string;
+}
+
+export default async function ThemePlaceholder({
+  slug
+}: ThemePlaceholderProps) {
+  try {
+    let dataSources: any[] = [];
+    let themeSettings: Record<string, unknown> | null = null;
+    try {
+      const themeConfigData = await getWidgetData<any>({
+        slug: 'theme-config'
+      });
+
+      if (themeConfigData?.attributes?.theme_dataSources) {
+        try {
+          const raw = themeConfigData.attributes.theme_dataSources;
+          // Handle both plain string/array and { value: "..." } attribute format
+          const resolved =
+            typeof raw === 'string'
+              ? raw
+              : typeof raw === 'object' && raw !== null && !Array.isArray(raw)
+              ? (raw as { value?: any }).value ?? raw
+              : raw;
+
+          if (typeof resolved === 'string') {
+            dataSources = JSON.parse(resolved);
+          } else if (Array.isArray(resolved)) {
+            dataSources = resolved;
+          }
+        } catch (e) {
+          console.error('Failed to parse theme_dataSources:', e);
+        }
+      }
+
+      if (themeConfigData?.attributes?.theme_settings) {
+        try {
+          const rawSettings = themeConfigData.attributes.theme_settings;
+          const resolvedValue =
+            typeof rawSettings === 'string'
+              ? rawSettings
+              : typeof rawSettings === 'object' && rawSettings !== null
+              ? (rawSettings as { value?: string }).value ?? rawSettings
+              : null;
+
+          if (resolvedValue) {
+            if (typeof resolvedValue === 'string') {
+              themeSettings = JSON.parse(resolvedValue);
+            } else if (typeof resolvedValue === 'object') {
+              themeSettings = resolvedValue as Record<string, unknown>;
+            }
+          }
+        } catch (e) {
+          console.error('Failed to parse theme_settings:', e);
+        }
+      }
+    } catch (configError) {}
+
+    const data = await getWidgetData<ThemePlaceholderData>({
+      slug
+    });
+
+    const sections: Section[] = [];
+
+    if (data?.attributes?.theme_editor_placeholder) {
+      let placeholderData = data.attributes.theme_editor_placeholder;
+
+      if (
+        typeof placeholderData === 'object' &&
+        placeholderData !== null &&
+        'value' in placeholderData
+      ) {
+        placeholderData = (
+          placeholderData as {
+            value: { section_slug: string; order: number }[];
+          }
+        ).value;
+      }
+
+      if (typeof placeholderData === 'string') {
+        try {
+          placeholderData = JSON.parse(placeholderData);
+        } catch {
+          placeholderData = [];
+        }
+      }
+
+      if (!Array.isArray(placeholderData)) {
+        placeholderData = [];
+      }
+
+      const sectionPromises = placeholderData.map(async (item: any) => {
+        try {
+          const sectionSlug = item.value?.section_slug || item.section_slug;
+          const sectionOrder = item.value?.order ?? item.order ?? 0;
+
+          if (!sectionSlug) {
+            return null;
+          }
+
+          const [regularSectionData, sectionSchema] = await Promise.all([
+            getWidgetData<any>({
+              slug: sectionSlug
+            }),
+            getWidgetSchemaData<any>({
+              widgetSlug: sectionSlug
+            })
+          ]);
+
+          let sectionData = regularSectionData;
+          if (!sectionData) {
+            try {
+              sectionData = await getCollectionWidgetData<any>({
+                slug: sectionSlug
+              });
+            } catch {
+              // Not a collection widget either; sectionData stays null
+            }
+          }
+
+          const sectionSchemaEntry = sectionSchema?.schema?.[sectionSlug];
+          const sectionMetadata = sectionSchemaEntry?.metadata || {};
+
+          const getBlockValue = (blockId: string): unknown => {
+            const attrData = sectionData?.attributes?.[blockId];
+            if (attrData === undefined || attrData === null) return undefined;
+
+            if (typeof attrData === 'string') {
+              try {
+                return JSON.parse(attrData);
+              } catch {
+                return attrData;
+              }
+            } else if (typeof attrData === 'object' && 'value' in attrData) {
+              return attrData.value;
+            }
+            return attrData;
+          };
+
+          const reconstructBlock = (blockSchema: any): any => {
+            return {
+              id: blockSchema.id,
+              type: blockSchema.type || 'text',
+              label: blockSchema.label || blockSchema.id,
+              order: blockSchema.order || 0,
+              isIterator: blockSchema.isIterator,
+              iteratorDataPath: blockSchema.iteratorDataPath,
+              value: getBlockValue(blockSchema.id),
+              styles: blockSchema.styles || {},
+              properties: blockSchema.properties || {},
+              hidden: blockSchema.hidden || false,
+              blocks: (blockSchema.blocks || []).map((b: any) =>
+                reconstructBlock(b)
+              )
+            };
+          };
+
+          const blocks: any[] = [];
+          if (sectionMetadata.blocks && Array.isArray(sectionMetadata.blocks)) {
+            sectionMetadata.blocks.forEach((blockSchema: any) => {
+              blocks.push(reconstructBlock(blockSchema));
+            });
+          }
+
+          blocks.sort((a, b) => a.order - b.order);
+
+          // dataSourceId may be stored in schema metadata OR in widget data attributes
+          // (theme editor saves it as a widget attribute when user selects a data source)
+          const dataSourceId =
+            sectionMetadata.dataSourceId ||
+            (getBlockValue('dataSourceId') as string | undefined) ||
+            (getBlockValue('selectedDataSourceId') as string | undefined);
+
+          const dataSource = dataSourceId
+            ? dataSources.find((ds) => ds.id === dataSourceId)
+            : undefined;
+
+          let dataSourceWithData = dataSource;
+          if (dataSource && dataSource.details) {
+            // Only fetch collection data if we have a valid widget slug
+            // (not the section's own slug which contains config, not products)
+            const collectionSlug = dataSource.details.collection?.slug;
+            if (collectionSlug) {
+              try {
+                let collectionData = await getWidgetData<{
+                  [key: string]: unknown;
+                }>({
+                  slug: collectionSlug
+                });
+
+                if (!collectionData) {
+                  collectionData = await getCollectionWidgetData<{
+                    [key: string]: unknown;
+                  }>({
+                    slug: collectionSlug
+                  });
+                }
+
+                if (collectionData) {
+                  dataSourceWithData = {
+                    ...dataSource,
+                    details: {
+                      ...dataSource.details,
+                      collection: {
+                        ...dataSource.details.collection,
+                        data: collectionData
+                      }
+                    }
+                  };
+                }
+              } catch (error) {
+                console.error(
+                  `Error fetching widget data for section ${sectionSlug}:`,
+                  error
+                );
+              }
+            }
+            // If no collection slug, the saved products from editor
+            // (details.collection.products) will be used as fallback
+          }
+
+          const section: Section = {
+            id: sectionSlug,
+            type: sectionMetadata.type || 'default',
+            name: sectionMetadata.name || sectionSlug,
+            label: sectionMetadata.label || sectionSlug,
+            properties: sectionMetadata.properties || {},
+            styles: sectionMetadata.styles || {},
+            blocks,
+            order: sectionOrder,
+            hidden: sectionMetadata.hidden || false,
+            dataSourceId,
+            dataSource: dataSourceWithData
+          };
+
+          return section;
+        } catch (error) {
+          const errorSlug =
+            item.value?.section_slug || item.section_slug || 'unknown';
+          console.error(
+            `Error parsing section metadata for ${errorSlug}:`,
+            error
+          );
+          return null;
+        }
+      });
+
+      const resolvedSections = await Promise.all(sectionPromises);
+      sections.push(
+        ...resolvedSections.filter((s): s is Section => s !== null)
+      );
+    }
+
+    const themeCSS = generateThemeCSS(sections);
+
+    return (
+      <>
+        {themeCSS && <style dangerouslySetInnerHTML={{ __html: themeCSS }} />}
+        <ThemePlaceholderWrapper
+          slug={slug}
+          initialSections={sections}
+          initialPlaceholderId={data?.slug?.toString() || ''}
+          isDesignMode={false}
+          dataSources={dataSources}
+          initialThemeSettings={themeSettings}
+        />
+      </>
+    );
+  } catch (error) {
+    console.error(`Error fetching theme placeholder data for ${slug}:`, error);
+    return null;
+  }
+}