@alphasquad/saleor-template-advance 0.1.0

package/src/app/utils/editorJsUtils.tsx

@@ -0,0 +1,249 @@
+import React from "react";
+
+export type EditorJsParagraphBlock = { id?: string; type: "paragraph"; data: { text?: string } };
+export type EditorJsHeaderBlock = { id?: string; type: "header"; data: { text?: string; level?: number } };
+export type EditorJsListBlock = { id?: string; type: "list"; data: { style?: "ordered" | "unordered"; items?: string[] } };
+export type EditorJsQuoteBlock = { id?: string; type: "quote"; data: { text?: string; caption?: string; alignment?: string } };
+export type EditorJsLinkBlock = { id?: string; type: "linkTool"; data: { link?: string; meta?: { title?: string; description?: string; image?: { url?: string } } } };
+export type EditorJsImageBlock = { id?: string; type: "image"; data: { file?: { url?: string }; caption?: string; withBorder?: boolean; withBackground?: boolean; stretched?: boolean } };
+export type EditorJsDelimiterBlock = { id?: string; type: "delimiter"; data?: Record<string, unknown> };
+export type EditorJsTableBlock = { id?: string; type: "table"; data: { withHeadings?: boolean; content?: string[][] } };
+export type EditorJsCodeBlock = { id?: string; type: "code"; data: { code?: string } };
+export type EditorJsGenericBlock = { id?: string; type: string; data?: Record<string, unknown> | null };
+export type EditorJsBlock =
+  | EditorJsParagraphBlock
+  | EditorJsHeaderBlock
+  | EditorJsListBlock
+  | EditorJsQuoteBlock
+  | EditorJsLinkBlock
+  | EditorJsImageBlock
+  | EditorJsDelimiterBlock
+  | EditorJsTableBlock
+  | EditorJsCodeBlock
+  | EditorJsGenericBlock;
+export type EditorJsDoc = { time?: number; blocks?: EditorJsBlock[]; version?: string };
+
+export function parseEditorJsToSections(content: string | null | undefined) {
+  if (!content) return null;
+  try {
+    const parsed = JSON.parse(content) as EditorJsDoc;
+    const blocks = parsed.blocks || [];
+    if (!blocks.length) return null;
+
+    const sections: Array<{ title: string; description: React.ReactNode }> = [];
+    let currentTitle = "";
+    let currentContent: React.ReactNode[] = [];
+
+    const flushCurrentSection = () => {
+      if (currentTitle && currentContent.length > 0) {
+        sections.push({
+          title: currentTitle,
+          description: (
+            <div className="space-y-4 [&_a]:text-blue-600 [&_a]:underline [&_a]:font-medium [&_a:hover]:text-blue-800 [&_a:hover]:no-underline [&_a]:transition-colors [&_a]:duration-200">
+              {currentContent.map((content, idx) => (
+                <div key={idx}>{content}</div>
+              ))}
+            </div>
+          )
+        });
+        currentContent = [];
+      }
+    };
+
+    blocks.forEach((b: EditorJsBlock, idx: number) => {
+      const key = b.id || String(idx);
+      
+      if (b.type === "header") {
+        const headerData = (b as EditorJsHeaderBlock).data;
+        const level = Math.min(6, Math.max(1, Number(headerData?.level) || 2));
+        const html = String(headerData?.text || "");
+        
+        // H3 starts a new section
+        if (level === 3) {
+          flushCurrentSection();
+          // Strip HTML tags for the title, but keep the HTML for rendering
+          currentTitle = html.replace(/<[^>]*>/g, "");
+        } else if (level === 1) {
+          // H1 is the main title, skip it as it's already in the page heading
+          return;
+        } else {
+          // Other headers become content
+          if (level === 2) {
+            currentContent.push(<h2 key={key} dangerouslySetInnerHTML={{ __html: html }} />);
+          } else if (level === 4) {
+            currentContent.push(<h4 key={key} dangerouslySetInnerHTML={{ __html: html }} />);
+          } else if (level === 5) {
+            currentContent.push(<h5 key={key} dangerouslySetInnerHTML={{ __html: html }} />);
+          } else {
+            currentContent.push(<h6 key={key} dangerouslySetInnerHTML={{ __html: html }} />);
+          }
+        }
+      } else if (b.type === "paragraph") {
+        const paragraphData = (b as EditorJsParagraphBlock).data;
+        const html = String(paragraphData?.text || "");
+        currentContent.push(<p key={key} dangerouslySetInnerHTML={{ __html: html }} />);
+      } else if (b.type === "list") {
+        const listData = (b as EditorJsListBlock).data || {};
+        const style = listData.style === "ordered" ? "ol" : "ul";
+        const items: string[] = Array.isArray(listData.items) ? listData.items : [];
+        if (style === "ol") {
+          currentContent.push(
+            <ol key={key} className="list-inside list-decimal">
+              {items.map((it, i) => (
+                <li key={i} dangerouslySetInnerHTML={{ __html: String(it) }} />
+              ))}
+            </ol>
+          );
+        } else {
+          currentContent.push(
+            <ul key={key} className="list-inside list-disc">
+              {items.map((it, i) => (
+                <li key={i} dangerouslySetInnerHTML={{ __html: String(it) }} />
+              ))}
+            </ul>
+          );
+        }
+      } else if (b.type === "quote") {
+        const quoteData = (b as EditorJsQuoteBlock).data || {};
+        const text = String(quoteData.text || "");
+        const caption = String(quoteData.caption || "");
+        const alignment = quoteData.alignment || "left";
+        currentContent.push(
+          <blockquote 
+            key={key} 
+            className={`border-l-4 border-gray-300 pl-4 py-2 ${alignment === "center" ? "text-center" : ""} italic text-gray-700`}
+          >
+            <div dangerouslySetInnerHTML={{ __html: text }} />
+            {caption ? (
+              <cite
+                className="block mt-2 text-sm text-gray-500 not-italic"
+                dangerouslySetInnerHTML={{ __html: caption }}
+              />
+            ) : null}
+          </blockquote>
+        );
+      } else if (b.type === "linkTool") {
+        const linkData = (b as EditorJsLinkBlock).data || {};
+        const link = linkData.link || "";
+        const title = linkData.meta?.title || link;
+        const description = linkData.meta?.description || "";
+        const image = linkData.meta?.image?.url || "";
+        currentContent.push(
+          <div key={key} className="border-2 border-blue-200 bg-blue-50 rounded-lg p-4 hover:border-blue-300 hover:bg-blue-100 transition-all duration-200">
+            <a href={link} target="_blank" rel="noopener noreferrer" className="block group">
+              <div className="flex gap-4">
+                {image && (
+                  <img 
+                    src={image} 
+                    alt={title} 
+                    className="w-16 h-16 object-cover rounded flex-shrink-0 border border-blue-200"
+                  />
+                )}
+                <div className="flex-1">
+                  <h4 className="font-bold text-blue-700 group-hover:text-blue-900 line-clamp-2 text-lg">{title}</h4>
+                  {description && (
+                    <p className="text-sm text-gray-700 mt-1 line-clamp-2 font-medium">{description}</p>
+                  )}
+                  <div className="flex items-center mt-2">
+                    <svg className="w-4 h-4 text-blue-500 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                    </svg>
+                    <p className="text-xs text-blue-600 font-medium">{new URL(link).hostname}</p>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </div>
+        );
+      } else if (b.type === "image") {
+        const imageData = (b as EditorJsImageBlock).data || {};
+        const url = imageData.file?.url || "";
+        const caption = imageData.caption || "";
+        const withBorder = imageData.withBorder;
+        const withBackground = imageData.withBackground;
+        const stretched = imageData.stretched;
+        if (url) {
+          currentContent.push(
+            <figure key={key} className={`${stretched ? "w-full" : "max-w-2xl mx-auto"}`}>
+              <img
+                src={url}
+                alt={caption || "Image"}
+                className={`w-full h-auto rounded-lg ${withBorder ? "border border-gray-200" : ""} ${withBackground ? "bg-gray-50 p-4" : ""}`}
+              />
+              {caption && (
+                <figcaption className="text-sm text-gray-600 text-center mt-2 italic">
+                  {caption}
+                </figcaption>
+              )}
+            </figure>
+          );
+        }
+      } else if (b.type === "delimiter") {
+        currentContent.push(
+          <div key={key} className="flex justify-center py-6">
+            <div className="flex space-x-1">
+              <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
+              <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
+              <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
+            </div>
+          </div>
+        );
+      } else if (b.type === "table") {
+        const tableData = (b as EditorJsTableBlock).data || {};
+        const withHeadings = tableData.withHeadings || false;
+        const content = tableData.content || [];
+        if (content.length > 0) {
+          currentContent.push(
+            <div key={key} className="overflow-x-auto">
+              <table className="min-w-full border-collapse border border-gray-200">
+                {withHeadings && content[0] && (
+                  <thead>
+                    <tr className="bg-gray-50">
+                      {content[0].map((cell, cellIdx) => (
+                        <th 
+                          key={cellIdx} 
+                          className="border border-gray-200 px-4 py-2 text-left font-semibold text-gray-900"
+                        >
+                          {cell}
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                )}
+                <tbody>
+                  {content.slice(withHeadings ? 1 : 0).map((row, rowIdx) => (
+                    <tr key={rowIdx} className={rowIdx % 2 === 0 ? "bg-white" : "bg-gray-50"}>
+                      {row.map((cell, cellIdx) => (
+                        <td 
+                          key={cellIdx} 
+                          className="border border-gray-200 px-4 py-2 text-gray-700"
+                        >
+                          {cell}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          );
+        }
+      } else if (b.type === "code") {
+        const codeData = (b as EditorJsCodeBlock).data || {};
+        const code = codeData.code || "";
+        currentContent.push(
+          <pre key={key} className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
+            <code className="text-sm">{code}</code>
+          </pre>
+        );
+      }
+    });
+
+    // Flush the last section
+    flushCurrentSection();
+
+    return sections;
+  } catch {
+    return null;
+  }
+}

package/src/app/utils/functions.ts

@@ -0,0 +1,146 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export type Theme = "asphalt";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// utils/function.ts
+
+export const EXTENSIONS = ["webp", "png", "jpeg", "jpg"] as const;
+
+/** Remove trailing slashes */
+export function trimSlash(s?: string | null): string {
+  return (s || "").replace(/\/+$/, "");
+}
+
+/** Strip known image extensions from a URL */
+export function stripImageExt(url: string): string {
+  return url.replace(/\.(webp|png|jpe?g)$/i, "");
+}
+
+export type SrcRoot =
+  | string
+  | {
+      basePath: string;
+      fileName: string; // without extension
+    };
+
+/**
+ * Build candidate URLs in preferred extension order.
+ */
+export function getImageCandidates(
+  input: SrcRoot,
+  extensions: readonly string[] = EXTENSIONS
+): string[] {
+  if (typeof input === "string") {
+    const root = stripImageExt(input);
+    return extensions.map((ext) => `${root}.${ext}`);
+  }
+
+  const basePath = trimSlash(input.basePath);
+  const fileRoot = `${basePath}/${input.fileName}`;
+  return extensions.map((ext) => `${fileRoot}.${ext}`);
+}
+
+/**
+ * Normalize a Saleor product slug for URL display by replacing multiple consecutive dashes with single dash.
+ *
+ * Saleor often generates slugs with multiple dashes (e.g., --- or --) that should be
+ * displayed as single dashes in URLs for better readability.
+ *
+ * @example normalizeSlugForUrl("aero-exhaust---blue-flame-dual-tip---30")
+ * // Returns: "aero-exhaust-blue-flame-dual-tip-30"
+ */
+export function normalizeSlugForUrl(slug: string): string {
+  if (!slug) return "";
+
+  // Replace 2 or more consecutive dashes with a single dash
+  return slug.replace(/-{2,}/g, "-");
+}
+
+/**
+ * Denormalize a URL slug back to Saleor's format for API queries.
+ *
+ * Since we normalized the slug by replacing multiple consecutive dashes with single dashes,
+ * we simply return the slug as-is because Saleor should be able to match it.
+ *
+ * If Saleor can't match the normalized slug, consider using product ID for queries instead.
+ *
+ * @example denormalizeSlugForApi("aero-exhaust-blue-flame-dual-tip-30-outlet-30497695")
+ * // Returns: "aero-exhaust-blue-flame-dual-tip-30-outlet-30497695" (as-is)
+ */
+export function denormalizeSlugForApi(urlSlug: string): string {
+  if (!urlSlug) return "";
+
+  // Return the slug as-is. Saleor's GraphQL API should handle slug matching
+  // flexibly enough to match both normalized and non-normalized formats.
+  return urlSlug;
+}
+
+/**
+ * Create an SEO-friendly product URL with normalized slug + product ID.
+ * Format: /product/{normalized-slug}-{product-id}
+ * @example createProductUrl("aero-exhaust---turbine", "UHJvZHVjdDozMDQ5NzYwNg==")
+ * Returns: "aero-exhaust-turbine-UHJvZHVjdDozMDQ5NzYwNg"
+ */
+export function createProductUrl(slug: string, productId: string): string {
+  const normalizedSlug = normalizeSlugForUrl(slug);
+  // Append product ID to the end for reliable querying
+  return `${normalizedSlug}-${productId}`;
+}
+
+/**
+ * Extract product ID from a Saleor slug that has numeric ID at the end.
+ * Saleor slugs often end with the product ID number.
+ * @example extractProductIdFromSlug("aero-exhaust---turbine-30497612")
+ * Returns: "30497612"
+ */
+export function extractProductIdFromSlug(slug: string): string | null {
+  if (!slug) return null;
+
+  // Match numeric ID at the end of the slug
+  const match = slug.match(/-(\d+)$/);
+
+  if (match && match[1]) {
+    return match[1];
+  }
+
+  return null;
+}
+
+/**
+ * Remove the product ID from the end of a Saleor slug.
+ * @example removeProductIdFromSlug("aero-exhaust---turbine-30497612")
+ * Returns: "aero-exhaust---turbine"
+ */
+export function removeProductIdFromSlug(slug: string): string {
+  if (!slug) return "";
+
+  // Remove numeric ID from the end
+  return slug.replace(/-\d+$/, "");
+}
+
+/**
+ * Ensures image URL has the S3 base URL if it's a relative path
+ * @param imageUrl - The image URL (can be relative or absolute)
+ * @returns Full image URL with S3 base if needed
+ */
+export function getFullImageUrl(imageUrl: string | null | undefined): string {
+  if (!imageUrl) return "";
+
+  // If already has protocol (http:// or https://), return as is
+  if (imageUrl.startsWith("http://") || imageUrl.startsWith("https://")) {
+    return imageUrl;
+  }
+  if (imageUrl.endsWith("/no-image-avail-large.png")) {
+    return imageUrl;
+  }
+
+  // If it's a relative path, prepend S3 base URL
+  const S3_BASE_URL = "https://wsm-saleor-assets.s3.us-west-2.amazonaws.com";
+  const cleanPath = imageUrl.startsWith("/") ? imageUrl.slice(1) : imageUrl;
+  return `${S3_BASE_URL}/${cleanPath}`;
+}

package/src/app/utils/googleAnalytics.ts

@@ -0,0 +1,168 @@
+"use client";
+
+import { sendGAEvent } from '@next/third-parties/google';
+
+// GA_MEASUREMENT_ID is now obtained from app configuration service, not process.env
+let GA_MEASUREMENT_ID: string | null = null;
+
+// Function to get GA Measurement ID from app configuration
+export const getGAMeasurementId = async (): Promise<string | null> => {
+  if (GA_MEASUREMENT_ID) return GA_MEASUREMENT_ID;
+  
+  try {
+    // Import app config service dynamically to avoid circular dependencies
+    const { appConfigService } = await import('./appConfiguration');
+    await appConfigService.fetchConfiguration();
+    const gaConfig = appConfigService.getGoogleAnalyticsConfig();
+    GA_MEASUREMENT_ID = gaConfig?.measurement_id || null;
+    return GA_MEASUREMENT_ID;
+  } catch (error) {
+    console.error('Failed to get GA configuration:', error);
+    return null;
+  }
+};
+
+// For client-side components that use useAppConfiguration hook
+export const getGAMeasurementIdFromContext = (gaConfig: { measurement_id: string } | null): string | null => {
+  return gaConfig?.measurement_id || null;
+};
+
+// Legacy support - will be deprecated
+export { GA_MEASUREMENT_ID };
+
+export const gtag = (...args: unknown[]) => {
+  if (typeof window !== "undefined" && window.gtag) {
+    window.gtag(...args);
+  }
+};
+
+
+export const trackPageView = (url: string, title?: string, measurementId?: string | null) => {
+  // Use provided measurementId or fall back to legacy GA_MEASUREMENT_ID
+  const activeMeasurementId = measurementId !== undefined ? measurementId : GA_MEASUREMENT_ID;
+  if (!activeMeasurementId) return;
+  
+  sendGAEvent({
+    event: 'page_view',
+    page_title: title || document.title,
+    page_location: url,
+  });
+};
+
+export const trackEvent = (action: string, parameters?: Record<string, unknown>, measurementId?: string | null) => {
+  const activeMeasurementId = measurementId !== undefined ? measurementId : GA_MEASUREMENT_ID;
+  if (!activeMeasurementId) return;
+  
+  sendGAEvent({
+    event: action,
+    ...parameters,
+  });
+};
+
+export const trackCustomEvent = (eventName: string, parameters?: Record<string, unknown>, measurementId?: string | null) => {
+  const activeMeasurementId = measurementId !== undefined ? measurementId : GA_MEASUREMENT_ID;
+  if (!activeMeasurementId) return;
+  
+  sendGAEvent({
+    event: eventName,
+    custom_parameter: true,
+    ...parameters,
+  });
+};
+
+export const trackUserEngagement = (engagementTimeMs: number, measurementId?: string | null) => {
+  const activeMeasurementId = measurementId !== undefined ? measurementId : GA_MEASUREMENT_ID;
+  if (!activeMeasurementId) return;
+  
+  sendGAEvent({
+    event: 'user_engagement',
+    engagement_time_msec: engagementTimeMs,
+  });
+};
+
+export const trackScrollDepth = (scrollPercent: number, measurementId?: string | null) => {
+  const activeMeasurementId = measurementId !== undefined ? measurementId : GA_MEASUREMENT_ID;
+  if (!activeMeasurementId) return;
+  
+  sendGAEvent({
+    event: 'scroll',
+    percent_scrolled: scrollPercent,
+  });
+};
+
+export const trackOutboundClick = (url: string, linkText?: string, measurementId?: string | null) => {
+  const activeMeasurementId = measurementId !== undefined ? measurementId : GA_MEASUREMENT_ID;
+  if (!activeMeasurementId) return;
+  
+  sendGAEvent({
+    event: 'click',
+    event_category: 'outbound',
+    event_label: url,
+    link_text: linkText,
+    transport_type: 'beacon',
+  });
+};
+
+export const trackFileDownload = (fileName: string, fileType?: string, measurementId?: string | null) => {
+  const activeMeasurementId = measurementId !== undefined ? measurementId : GA_MEASUREMENT_ID;
+  if (!activeMeasurementId) return;
+  
+  sendGAEvent({
+    event: 'file_download',
+    file_name: fileName,
+    file_extension: fileType,
+  });
+};
+
+export const trackSiteSearch = (searchTerm: string, resultCount?: number, measurementId?: string | null) => {
+  const activeMeasurementId = measurementId !== undefined ? measurementId : GA_MEASUREMENT_ID;
+  if (!activeMeasurementId) return;
+  
+  sendGAEvent({
+    event: 'search',
+    search_term: searchTerm,
+    number_of_results: resultCount,
+  });
+};
+
+export const trackTimingEvent = (name: string, value: number, category?: string, measurementId?: string | null) => {
+  const activeMeasurementId = measurementId !== undefined ? measurementId : GA_MEASUREMENT_ID;
+  if (!activeMeasurementId) return;
+  
+  sendGAEvent({
+    event: 'timing_complete',
+    name: name,
+    value: value,
+    event_category: category || 'performance',
+  });
+};
+
+export const trackEcommerce = (action: string, parameters: Record<string, unknown>, measurementId?: string | null) => {
+  const activeMeasurementId = measurementId !== undefined ? measurementId : GA_MEASUREMENT_ID;
+  if (!activeMeasurementId) return;
+  
+  sendGAEvent({
+    event: action,
+    ...parameters,
+  });
+};
+
+export const setUserProperties = (properties: Record<string, unknown>, measurementId?: string | null) => {
+  const activeMeasurementId = measurementId !== undefined ? measurementId : GA_MEASUREMENT_ID;
+  if (!activeMeasurementId) return;
+  
+  gtag("config", activeMeasurementId, {
+    user_properties: properties,
+  });
+};
+
+export const trackException = (description: string, fatal = false, measurementId?: string | null) => {
+  const activeMeasurementId = measurementId !== undefined ? measurementId : GA_MEASUREMENT_ID;
+  if (!activeMeasurementId) return;
+  
+  sendGAEvent({
+    event: 'exception',
+    description: description,
+    fatal: fatal,
+  });
+};