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

package/app-template/src/views/category/native-widget-context.tsx

@@ -1,257 +0,0 @@
-'use client';
-
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useState,
-  PropsWithChildren
-} from 'react';
-import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
-
-// Constants
-export const PLACEHOLDER_ID = 'product-list-page';
-export const FILTERS_SECTION_ID = 'filters-section';
-export const PRODUCTS_SECTION_ID = 'products-section';
-export const PRODUCT_ITEM_SECTION_ID = 'product-item-section';
-export const PAGINATION_SECTION_ID = 'pagination-section';
-export const WIDGET_SLUG = 'product-list-page-styles';
-
-interface NativeWidgetContextValue {
-  filterStyles: Record<string, unknown>;
-  filterProperties: Record<string, unknown>;
-  productsProperties: Record<string, unknown>;
-  productsStyles: Record<string, unknown>;
-  productItemProperties: Record<string, unknown>;
-  productItemStyles: Record<string, unknown>;
-  paginationProperties: Record<string, unknown>;
-  paginationStyles: Record<string, unknown>;
-}
-
-const NativeWidgetContext = createContext<NativeWidgetContextValue>({
-  filterStyles: {},
-  filterProperties: {
-    layout: 'top',
-    'item-padding-y': 6,
-    'item-padding-x': 0,
-    'item-margin-bottom': 0
-  },
-  productsProperties: {
-    'show-layout-buttons': true,
-    'available-layouts': ['2', '3', '4']
-  },
-  productsStyles: {},
-  productItemProperties: {
-    'show-fav-button': true,
-    'fav-button-position': 'top-right'
-  },
-  productItemStyles: {},
-  paginationProperties: {
-    type: 'list'
-  },
-  paginationStyles: {}
-});
-
-export function NativeWidgetProvider({ children }: PropsWithChildren) {
-  const [filterStyles, setFilterStyles] = useState<Record<string, unknown>>({});
-  const [filterProperties, setFilterProperties] = useState<
-    Record<string, unknown>
-  >({
-    layout: 'top',
-    'item-padding-y': 6,
-    'item-padding-x': 0,
-    'item-margin-bottom': 0
-  });
-  const [productsProperties, setProductsProperties] = useState<
-    Record<string, unknown>
-  >({
-    'show-layout-buttons': true,
-    'available-layouts': ['2', '3', '4']
-  });
-  const [productsStyles, setProductsStyles] = useState<Record<string, unknown>>(
-    {}
-  );
-  const [productItemProperties, setProductItemProperties] = useState<
-    Record<string, unknown>
-  >({
-    'show-fav-button': true,
-    'fav-button-position': 'top-right'
-  });
-  const [productItemStyles, setProductItemStyles] = useState<
-    Record<string, unknown>
-  >({});
-  const [paginationProperties, setPaginationProperties] = useState<
-    Record<string, unknown>
-  >({
-    type: 'list'
-  });
-  const [paginationStyles, setPaginationStyles] = useState<
-    Record<string, unknown>
-  >({});
-
-  // Fetch styles from widget
-  const { data: widgetData } = useGetWidgetQuery(WIDGET_SLUG);
-
-  // Load styles from widget (initial load)
-  useEffect(() => {
-    if (!widgetData) return;
-
-    const attributes = widgetData.attributes || {};
-
-    // Load filters section
-    const filtersData = attributes[FILTERS_SECTION_ID];
-    if (filtersData) {
-      let parsedData: unknown;
-      if (typeof filtersData === 'string') {
-        try {
-          parsedData = JSON.parse(filtersData);
-        } catch {
-          // ignore
-        }
-      } else if (typeof filtersData === 'object' && 'value' in filtersData) {
-        try {
-          parsedData = JSON.parse((filtersData as { value: string }).value);
-        } catch {
-          // ignore
-        }
-      } else {
-        parsedData = filtersData;
-      }
-
-      if (parsedData && typeof parsedData === 'object') {
-        const data = parsedData as Record<string, unknown>;
-        setFilterStyles((data.styles as Record<string, string>) || {});
-        setFilterProperties(
-          (data.properties as Record<string, unknown>) || {
-            layout: 'top',
-            'item-padding-y': 6,
-            'item-padding-x': 0,
-            'item-margin-bottom': 0
-          }
-        );
-      }
-    }
-
-    // Load products section
-    const productsData = attributes[PRODUCTS_SECTION_ID];
-    if (productsData) {
-      let parsedData: unknown;
-      if (typeof productsData === 'string') {
-        try {
-          parsedData = JSON.parse(productsData);
-        } catch {
-          // ignore
-        }
-      } else if (typeof productsData === 'object' && 'value' in productsData) {
-        try {
-          parsedData = JSON.parse((productsData as { value: string }).value);
-        } catch {
-          // ignore
-        }
-      } else {
-        parsedData = productsData;
-      }
-
-      if (parsedData && typeof parsedData === 'object') {
-        const data = parsedData as Record<string, unknown>;
-        setProductsStyles((data.styles as Record<string, string>) || {});
-        setProductsProperties(
-          (data.properties as Record<string, unknown>) || {
-            'show-layout-buttons': true,
-            'available-layouts': ['2', '3', '4']
-          }
-        );
-      }
-    }
-
-    // Load product-item section
-    const productItemData = attributes[PRODUCT_ITEM_SECTION_ID];
-    if (productItemData) {
-      let parsedData: unknown;
-      if (typeof productItemData === 'string') {
-        try {
-          parsedData = JSON.parse(productItemData);
-        } catch {
-          // ignore
-        }
-      } else if (
-        typeof productItemData === 'object' &&
-        'value' in productItemData
-      ) {
-        try {
-          parsedData = JSON.parse((productItemData as { value: string }).value);
-        } catch {
-          // ignore
-        }
-      } else {
-        parsedData = productItemData;
-      }
-
-      if (parsedData && typeof parsedData === 'object') {
-        const data = parsedData as Record<string, unknown>;
-        setProductItemStyles((data.styles as Record<string, string>) || {});
-        setProductItemProperties(
-          (data.properties as Record<string, unknown>) || {
-            'show-fav-button': true,
-            'fav-button-position': 'top-right'
-          }
-        );
-      }
-    }
-
-    // Load pagination section
-    const paginationData = attributes[PAGINATION_SECTION_ID];
-    if (paginationData) {
-      let parsedData: unknown;
-      if (typeof paginationData === 'string') {
-        try {
-          parsedData = JSON.parse(paginationData);
-        } catch {
-          // ignore
-        }
-      } else if (
-        typeof paginationData === 'object' &&
-        'value' in paginationData
-      ) {
-        try {
-          parsedData = JSON.parse((paginationData as { value: string }).value);
-        } catch {
-          // ignore
-        }
-      } else {
-        parsedData = paginationData;
-      }
-
-      if (parsedData && typeof parsedData === 'object') {
-        const data = parsedData as Record<string, unknown>;
-        setPaginationStyles((data.styles as Record<string, string>) || {});
-        setPaginationProperties(
-          (data.properties as Record<string, unknown>) || {
-            type: 'list'
-          }
-        );
-      }
-    }
-  }, [widgetData]);
-
-  const value: NativeWidgetContextValue = {
-    filterStyles,
-    filterProperties,
-    productsProperties,
-    productsStyles,
-    productItemProperties,
-    productItemStyles,
-    paginationProperties,
-    paginationStyles
-  };
-
-  return (
-    <NativeWidgetContext.Provider value={value}>
-      {children}
-    </NativeWidgetContext.Provider>
-  );
-}
-
-export function useNativeWidget() {
-  return useContext(NativeWidgetContext);
-}