@alphasquad/saleor-template-advance 0.1.0

package/src/graphql/queries/getContentPage.ts

@@ -0,0 +1,191 @@
+import { gql } from "@apollo/client";
+import createApolloServerClient from "../server-client";
+
+// Query to get the page type ID for articles-blogs
+export const GET_CONTENT_PAGE_TYPE = gql`
+  query GetBlogPageType {
+    pageTypes(first: 100, filter: { slugs: "pages" }) {
+      edges {
+        node {
+          id
+          name
+          slug
+          metadata {
+            key
+            value
+          }
+        }
+      }
+    }
+  }
+`;
+
+// Query to get all blog pages by page type ID
+export const GET_CONTENT_PAGES = gql`
+  query GetBlogPages($pageTypeId: [ID!], $first: Int = 100) {
+    pages(first: $first, filter: { pageTypes: $pageTypeId }) {
+      edges {
+        node {
+          id
+          title
+          slug
+          content
+          created
+          metadata {
+            key
+            value
+          }
+          pageType {
+            id
+            name
+            slug
+          }
+        }
+      }
+    }
+  }
+`;
+
+export type BlogPage = {
+  id: string;
+  title?: string | null;
+  slug?: string | null;
+  content?: string | null;
+  created?: string | null;
+  metadata?: Array<{
+    key?: string | null;
+    value?: string | null;
+  } | null> | null;
+  pageType?: {
+    id: string;
+    name?: string | null;
+    slug?: string | null;
+  } | null;
+};
+
+export type BlogPageTypeResponse = {
+  pageTypes?: {
+    edges?: Array<{
+      node?: {
+        id: string;
+        name?: string | null;
+        slug?: string | null;
+        metadata?: Array<{
+          key?: string | null;
+          value?: string | null;
+        } | null>;
+      } | null;
+    } | null>;
+  };
+};
+
+export type BlogPagesResponse = {
+  pages?: {
+    edges?: Array<{ node?: BlogPage | null } | null>;
+  };
+};
+
+// Helper function to extract first paragraph or generate excerpt from content
+function getExcerpt(content?: string | null): string {
+  if (!content) return "";
+
+  try {
+    const parsed = JSON.parse(content);
+    const blocks = Array.isArray(parsed?.blocks) ? parsed.blocks : [];
+
+    // Find the first paragraph block
+    const firstParagraph = blocks.find(
+      (block: { type?: string; data?: { text?: string } }) =>
+        block?.type === "paragraph"
+    );
+    if (firstParagraph?.data?.text) {
+      // Strip HTML tags and limit length
+      const text = firstParagraph.data.text.replace(/<[^>]*>/g, "").trim();
+      return text.length > 150 ? text.substring(0, 150) + "..." : text;
+    }
+  } catch {
+    // Ignore parsing errors
+  }
+
+  return "";
+}
+
+// Fetch all blog pages
+export async function fetchContentPages(): Promise<
+  Array<{
+    id: string;
+    title: string;
+    slug: string;
+    excerpt: string;
+    date: string;
+  }>
+> {
+  if (!process.env.NEXT_PUBLIC_API_URL) {
+    console.warn("API URL not configured, skipping blog fetch");
+    return [];
+  }
+
+  try {
+    const client = createApolloServerClient();
+
+    // First, get the page type ID for articles-blogs
+    const pageTypeResponse = await client.query<BlogPageTypeResponse>({
+      query: GET_CONTENT_PAGE_TYPE,
+      fetchPolicy: "cache-first",
+      errorPolicy: "all",
+      context: {
+        fetchOptions: {
+          next: { revalidate: 600 }, // Cache for 10 minutes
+        },
+      },
+    });
+
+    const pageTypeId = pageTypeResponse.data?.pageTypes?.edges?.[0]?.node?.id;
+
+    if (!pageTypeId) {
+      console.warn("Blog page type 'articles-blogs' not found");
+      return [];
+    }
+
+    // Then fetch all pages with this page type
+    const pagesResponse = await client.query<BlogPagesResponse>({
+      query: GET_CONTENT_PAGES,
+      variables: { pageTypeId: [pageTypeId], first: 100 },
+      fetchPolicy: "cache-first",
+      errorPolicy: "all",
+      context: {
+        fetchOptions: {
+          next: { revalidate: 600 }, // Cache for 10 minutes
+        },
+      },
+    });
+
+    const pages = pagesResponse.data?.pages?.edges || [];
+    return pages
+      .map((edge) => {
+        const node = edge?.node;
+        if (!node || !node.slug || !node.title) return null;
+        return {
+          id: node.id,
+          title: node.title,
+          slug: node.slug,
+          excerpt: getExcerpt(node.content),
+          metadata: node.metadata,
+          date: node.created
+            ? new Date(node.created).toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              })
+            : "",
+        };
+      })
+      .filter((blog): blog is NonNullable<typeof blog> => blog !== null);
+  } catch (err) {
+    console.warn(
+      "Failed to fetch blog pages:",
+      err instanceof Error ? err.message : "Unknown error"
+    );
+    return [];
+  }
+}

package/src/graphql/queries/getDiscountOffers.ts

@@ -0,0 +1,18 @@
+import { gql } from "@apollo/client";
+
+export const GET_DISCOUNT_OFFERS = gql`
+  query GetDiscountOffers($first: Int!) {
+      promotions(first: $first) {
+        edges {
+          node {
+            id
+            name
+            description
+            endDate
+            startDate
+            type
+          }
+        }
+      }
+  }
+`;

package/src/graphql/queries/getDynamicPageBySlug.ts

@@ -0,0 +1,251 @@
+import { gql } from "@apollo/client";
+import createApolloServerClient from "../server-client";
+
+export const GET_DYNAMIC_PAGE_BY_SLUG = gql`
+  query DynamicPageBySlug($slug: String!) {
+    page(slug: $slug) {
+      id
+      title
+      seoTitle
+      seoDescription
+      content
+      pageType {
+        id
+        name
+        slug
+      }
+      slug
+      isPublished
+      publicationDate
+      metadata {
+        key
+        value
+      }
+    }
+    shop {
+      id
+      metadata {
+        key
+        value
+      }
+    }
+  }
+`;
+
+export type DynamicPageData = {
+  id: string;
+  title: string;
+  seoTitle: string | null;
+  seoDescription: string | null;
+  content: string | null;
+  pageType: {
+    id: string;
+    name: string;
+    slug: string;
+  } | null;
+  slug: string;
+  isPublished: boolean;
+  publicationDate: string | null;
+  metadata: Array<{
+    key: string;
+    value: string;
+  }>;
+  excerpt?: string; // Computed field for preview
+};
+
+type DynamicPageResponse = { 
+  page: DynamicPageData | null;
+  shop: {
+    id: string;
+    metadata: Array<{
+      key: string;
+      value: string;
+    }>;
+  } | null;
+};
+
+export async function fetchDynamicPageBySlug(slug: string): Promise<DynamicPageData | null> {
+  // Get API URL at runtime
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+  
+  if (!apiUrl) {
+    console.warn("[DYNAMIC PAGES] API URL not configured, skipping dynamic page fetch");
+    return null;
+  }
+
+  try {
+    const client = createApolloServerClient();
+    
+    const timeoutPromise = new Promise<never>((_, reject) =>
+      setTimeout(() => reject(new Error("Dynamic page fetch timeout")), 5000)
+    );
+
+    const queryPromise = client.query<DynamicPageResponse>({
+      query: GET_DYNAMIC_PAGE_BY_SLUG,
+      variables: { slug },
+      fetchPolicy: "network-only",
+      errorPolicy: "ignore",
+    });
+
+    const result = await Promise.race([queryPromise, timeoutPromise]);
+    
+    let pageData = result?.data?.page;
+
+    // If no page found, check for HTML widgets in shop metadata
+    if (!pageData || !pageData.isPublished) {
+      const shopMetadata = result?.data?.shop?.metadata || [];
+      
+      // Find widget with matching slug
+      let matchingWidget = null;
+      for (const metadataItem of shopMetadata) {
+        const widget = parseHtmlWidgetFromMetadata(metadataItem.key, metadataItem.value);
+        if (widget && widget.slug === slug && widget.isActive) {
+          matchingWidget = widget;
+          break;
+        }
+      }
+      
+      if (matchingWidget) {
+        // Convert widget to page data format
+        pageData = convertWidgetToPageData(matchingWidget);
+      } else {
+        return null;
+      }
+    }
+
+    // Add computed excerpt if content exists
+    if (pageData.content) {
+      const textContent = pageData.content.replace(/<[^>]*>/g, ""); // Strip HTML
+      pageData.excerpt = textContent.substring(0, 160) + (textContent.length > 160 ? "..." : "");
+    }
+
+    return pageData;
+  } catch (err) {
+    console.error(
+      `[DYNAMIC PAGES] Failed to fetch dynamic page by slug "${slug}":`,
+      err instanceof Error ? err.message : "Unknown error"
+    );
+    
+    // Don't throw the error - return null to handle gracefully
+    return null;
+  }
+}
+
+// Utility function to get page type from metadata or pageType
+export function getPageTypeFromData(pageData: DynamicPageData): string {
+  // Check pageType first
+  if (pageData.pageType?.slug) {
+    return pageData.pageType.slug;
+  }
+
+  // Check metadata for page type
+  const pageTypeMetadata = pageData.metadata.find(item => item.key === "pageType");
+  if (pageTypeMetadata?.value) {
+    return pageTypeMetadata.value;
+  }
+
+  // Default to landing page
+  return "landing";
+}
+
+// Utility function to parse HTML widget from shop metadata
+function parseHtmlWidgetFromMetadata(key: string, value: string) {
+  const HTML_WIDGET_PREFIX = "html_widget_";
+  
+  if (!key.startsWith(HTML_WIDGET_PREFIX)) {
+    return null;
+  }
+
+  try {
+    const data = JSON.parse(value);
+    const id = key.replace(HTML_WIDGET_PREFIX, "");
+    
+    return {
+      id,
+      name: data.name || "",
+      description: data.description || "",
+      slug: data.slug || "",
+      html: data.html || "",
+      javascript: data.javascript || "",
+      css: data.css || "",
+      type: data.type || "WIDGET",
+      isActive: data.isActive !== false,
+      createdAt: data.createdAt || new Date().toISOString(),
+      updatedAt: data.updatedAt || new Date().toISOString(),
+    };
+  } catch (error) {
+    console.error("Failed to parse HTML widget metadata:", error);
+    return null;
+  }
+}
+
+// Convert HTML widget to DynamicPageData format
+function convertWidgetToPageData(widget: { html?: string; css?: string; js?: string; title?: string; id?: string; type?: string; javascript?: string; name?: string; description?: string; slug?: string; isActive?: boolean; createdAt?: string }): DynamicPageData {
+  // Extract content from HTML if it's a full document
+  let extractedContent = widget.html || '';
+  let extractedStyles = widget.css || '';
+  
+  // If HTML contains full document structure, extract body content
+  if (extractedContent.includes('<!DOCTYPE html>') || extractedContent.includes('<html>')) {
+    // Parse the HTML to extract body content
+    const bodyMatch = extractedContent.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+    if (bodyMatch) {
+      extractedContent = bodyMatch[1];
+    }
+    
+    // Also extract any styles from head if not already in CSS field
+    if (!widget.css || widget.css.trim() === '') {
+      const styleMatches = widget.html?.match(/<style[^>]*>([\s\S]*?)<\/style>/gi);
+      if (styleMatches) {
+        const extractedStylesFromHead = styleMatches.map(match => {
+          const styleContent = match.match(/<style[^>]*>([\s\S]*?)<\/style>/i);
+          return styleContent ? styleContent[1] : '';
+        }).join('\n');
+        
+        extractedStyles = extractedStylesFromHead;
+      }
+    }
+  }
+
+  // Keep original CSS with minimal modifications to preserve dashboard design
+  const scopedStyles = extractedStyles || '';
+
+  // Create clean content structure without interfering with original design
+  const content = `
+${extractedContent}
+
+${scopedStyles ? `<style>
+${scopedStyles}
+</style>` : ''}
+
+${widget.javascript ? `<script>(function() { ${widget.javascript} })();</script>` : ''}
+  `.trim();
+
+  // Map widget type to page type
+  const pageTypeSlug = widget.type === 'CALCULATOR' ? 'calculator' : 
+                      widget.type === 'LANDING_PAGE' ? 'landing' :
+                      'widget';
+
+  return {
+    id: `widget_${widget.id}`,
+    title: widget.name || widget.title || 'Widget',
+    seoTitle: `${widget.name || widget.title || 'Widget'} | Your Site`,
+    seoDescription: widget.description || `${widget.name || widget.title || 'Widget'} - Interactive ${widget.type?.toLowerCase() || 'widget'}`,
+    content,
+    pageType: {
+      id: `type_${widget.type || 'widget'}`,
+      name: widget.type || 'widget',
+      slug: pageTypeSlug,
+    },
+    slug: widget.slug || `widget-${widget.id}`,
+    isPublished: widget.isActive ?? true,
+    publicationDate: widget.createdAt || null,
+    metadata: [
+      { key: 'widgetType', value: widget.type || 'widget' },
+      { key: 'widgetId', value: widget.id || 'unknown' },
+      { key: 'isHtmlWidget', value: 'true' },
+      { key: 'pageType', value: pageTypeSlug },
+    ],
+    excerpt: widget.description || "",
+  };
+}

package/src/graphql/queries/getFeaturedProducts.ts

@@ -0,0 +1,48 @@
+import { gql } from "@apollo/client";
+
+export const GET_FEATURED_PRODUCTS = gql`
+  query GetFeaturedProducts($slug: String!, $first: Int!, $channel: String!) {
+    collection(slug: $slug, channel: $channel) {
+      products(first: $first) {
+        edges {
+          node {
+            id
+            name
+            slug
+            rating
+            pricing {
+              onSale
+              priceRange {
+                start {
+                  gross {
+                    amount
+                    currency
+                  }
+                }
+                stop {
+                  gross {
+                    amount
+                    currency
+                  }
+                }
+              }
+              discount {
+                gross {
+                  amount
+                  currency
+                }
+              }
+            }
+            media {
+              url
+            }
+            category {
+              id
+              name
+            }
+          }
+        }
+      }
+    }
+  }
+`;

package/src/graphql/queries/getHeroMetadata.ts

@@ -0,0 +1,23 @@
+import { gql } from "@apollo/client"
+
+export const GET_PAGE_METADATA_BY_SLUG = gql`
+  query PageMetadataBySlug($slug: String!) {
+    page(slug: $slug) {
+      metadata {
+        key
+        value
+      }
+    }
+  }
+`
+
+export type PageMetadataItem = {
+  key: string
+  value: string | null
+}
+
+export type PageMetadataResponse = {
+  page: {
+    metadata: PageMetadataItem[] | null
+  } | null
+}

package/src/graphql/queries/getMenuBySlug.ts

@@ -0,0 +1,84 @@
+import { gql } from "@apollo/client";
+import createApolloServerClient from "../server-client";
+
+export const GET_MENU_BY_SLUG = gql`
+  query GetMenuBySlug($slug: String!) {
+    menu(slug: $slug) {
+      id
+      name
+      slug
+      items {
+        id
+        level
+        name
+        url
+        metadata {
+          key
+          value
+        }
+        children {
+          id
+          name
+          level
+          url
+          metadata {
+            key
+            value
+          }
+          children {
+            id
+            name
+            level
+            url
+            metadata {
+              key
+              value
+            }
+            children {
+              id
+              name
+              level
+              url
+              metadata {
+                key
+                value
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const fetchMenuBySlug = async (slug: "navbar" | "footer") => {
+  // Check if API URL is configured
+  if (!process.env.NEXT_PUBLIC_API_URL) {
+    console.warn(`API URL not configured, skipping menu fetch for [${slug}]`);
+    return null;
+  }
+
+  try {
+    const client = createApolloServerClient();
+    
+    // Add timeout to prevent hanging requests
+    const timeoutPromise = new Promise((_, reject) => {
+      setTimeout(() => reject(new Error('Menu fetch timeout')), 5000);
+    });
+    
+    const queryPromise = client.query({
+      query: GET_MENU_BY_SLUG,
+      variables: { slug },
+      fetchPolicy: 'network-only', // Don't use cache for menus
+      errorPolicy: 'ignore', // Ignore GraphQL errors and return null
+    });
+
+    const result = await Promise.race([queryPromise, timeoutPromise]) as { data: { menu: unknown } };
+    const { data } = result;
+    return data?.menu || null;
+  } catch (err) {
+    console.warn(`Failed to fetch menu [${slug}]:`, err instanceof Error ? err.message : 'Unknown error');
+    // Return null instead of undefined to prevent destructuring errors
+    return null;
+  }
+};

package/src/graphql/queries/getMyProfile.ts

@@ -0,0 +1,23 @@
+import { gql } from '@apollo/client';
+
+export const GET_MY_PROFILE = gql`
+  query GetMyProfile {
+    me {
+      id
+      firstName
+      lastName
+      email
+      isActive
+    }
+  }
+`;
+
+export type GetMyProfileData = {
+  me: {
+    id: string;
+    firstName: string | null;
+    lastName: string | null;
+    email: string;
+    isActive: boolean;
+  } | null;
+};