@alphasquad/saleor-template-advance 0.1.0

package/src/app/shipping-returns/page.tsx

@@ -0,0 +1,60 @@
+import { Suspense } from "react";
+import type { Metadata } from "next";
+import Link from "next/link";
+import AncillaryContent from "@/app/components/ancillary/AncillaryContent";
+import ContentSkeleton from "@/app/components/skeletons/ContentSkeleton";
+import { getStoreName } from "@/app/utils/branding";
+import Breadcrumb from "../components/reuseableUI/breadcrumb";
+import Heading from "../components/reuseableUI/heading";
+
+export const metadata: Metadata = {
+  title: `Shipping & Returns - ${getStoreName()}`,
+  description:
+    "Learn about our shipping options, delivery times, return policy, and how to process returns for your products.",
+  alternates: {
+    canonical: "/shipping-returns",
+  },
+  openGraph: {
+    title: `Shipping & Returns - ${getStoreName()}`,
+    description:
+      "Learn about our shipping options, delivery times, return policy, and how to process returns for your products.",
+    type: "website",
+    url: "/shipping-returns",
+    images: [{ url: "/Logo.png" }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `Shipping & Returns - ${getStoreName()}`,
+    description:
+      "Learn about our shipping options, delivery times, return policy, and how to process returns for your products.",
+    images: ["/Logo.png"],
+  },
+};
+
+export default function ShippingAndReturnsPage() {
+  const pageTitle = "Shipping & Returns";
+
+  return (
+    <main className="h-full w-full">
+      <div className="container mx-auto max-w-[1276px]">
+        <div className="flex flex-col items-start w-full px-4 md:px-6 py-12 md:py-16 lg:py-24">
+          <div className="flex flex-col items-start gap-5 mb-6 w-full">
+            <Breadcrumb
+              items={[
+                { text: "Home", link: "/" },
+                { text: "Shipping & Returns", link: "/shipping-returns" },
+              ]}
+            />
+            <Heading as="h1" content={pageTitle} />
+          </div>
+
+          <section className="w-full">
+            <Suspense fallback={<ContentSkeleton />}>
+              <AncillaryContent slug="shipping-returns" />
+            </Suspense>
+          </section>
+        </div>
+      </div>
+    </main>
+  );
+}

package/src/app/site-map/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { getStoreName } from "@/app/utils/branding";
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: `Site Map - ${getStoreName()}`,
+    description: `Explore the comprehensive site map of ${getStoreName()} to easily navigate through all sections and find what you're looking for quickly.`,
+    alternates: {
+      canonical: "/site-map",
+    },
+    openGraph: {
+      title: `Site Map - ${getStoreName()}`,
+      description: `Explore the comprehensive site map of ${getStoreName()} to easily navigate through all sections and find what you're looking for quickly.`,
+      type: "website",
+      url: "/site-map",
+      images: [{ url: "/Logo.png" }],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: `Site Map - ${getStoreName()}`,
+      description: `Explore the comprehensive site map of ${getStoreName()} to easily navigate through all sections and find what you're looking for quickly.`,
+      images: ["/Logo.png"],
+    },
+  };
+}
+
+export default function SiteMapPostLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

package/src/app/site-map/page.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import type { Metadata } from "next";
+import Link from "next/link";
+import Breadcrumb from "@/app/components/reuseableUI/breadcrumb";
+import Heading from "@/app/components/reuseableUI/heading";
+import EditorRenderer from "@/app/components/richText/EditorRenderer";
+import { fetchBlogBySlug } from "@/graphql/queries/getBlogs";
+import { getStoreName } from "@/app/utils/branding";
+import {
+  generateBlogPostingSchema,
+  generateBreadcrumbSchema,
+} from "@/lib/schema";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const post = await fetchBlogBySlug("site-map");
+
+  if (!post || !post.title) {
+    return {
+      title: `Site Map - ${getStoreName()}`,
+      description: `Explore the comprehensive site map of ${getStoreName()} to easily navigate through all sections and find what you're looking for quickly.`,
+      alternates: {
+        canonical: "/site-map",
+      },
+    };
+  }
+
+  return {
+    title: `${post.title} - ${getStoreName()}`,
+    description:
+      post.title ||
+      `Explore the comprehensive site map of ${getStoreName()} to easily navigate through all sections and find what you're looking for quickly.`,
+    alternates: {
+      canonical: "/site-map",
+    },
+  };
+}
+
+export default async function SiteMapPage() {
+  const post = await fetchBlogBySlug("site-map");
+
+  if (!post || !post.title) {
+    return (
+      <main className="container mx-auto px-4 md:px-6 py-12 text-center">
+        <h1 className="text-3xl font-bold mb-4">Content Not Found</h1>
+        <p className="mb-6">The requested site map could not be found.</p>
+        <Link
+          href="/"
+          className="text-[var(--color-primary-600)] hover:underline"
+        >
+          ← Back to Home
+        </Link>
+      </main>
+    );
+  }
+
+  // Generate schema.org structured data
+  const blogSchema = generateBlogPostingSchema(
+    post.title,
+    post.title,
+    "/site-map",
+    post.created || new Date().toISOString(),
+    post.created || new Date().toISOString()
+  );
+
+  const breadcrumbSchema = generateBreadcrumbSchema([
+    { name: "Home", url: "/" },
+    { name: post.title, url: "/site-map" },
+  ]);
+
+  return (
+    <main className="h-full w-full">
+      {/* Schema.org structured data */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(blogSchema) }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+      />
+      <div className="container mx-auto max-w-[1276px]">
+        <div className="flex flex-col items-start w-full gap-8 px-4 md:px-6 py-12 md:py-16 lg:py-24">
+          <div className="flex flex-col items-start gap-5 w-full">
+            <Breadcrumb
+              items={[
+                { text: "Home", link: "/" },
+                { text: post.title, link: "/site-map" },
+              ]}
+            />
+            <Heading as="h1" content={post.title} />
+          </div>
+
+          <div className="w-full flex flex-col items-start gap-6">
+            {/* Site Map Content */}
+            <div className="w-full">
+              <EditorRenderer content={post.content} />
+            </div>
+
+            {/* Back to Home Link */}
+            <div className="w-full pt-8 border-t border-[var(--color-secondary-200)]">
+              <Link
+                href="/"
+                className="text-[var(--color-primary-600)] hover:underline inline-flex items-center gap-2"
+              >
+                ← Back to Home
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

package/src/app/sitemap-index.xml/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server'
+
+export async function GET() {
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
+  
+  const sitemapIndex = `<?xml version="1.0" encoding="UTF-8"?>
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <sitemap>
+    <loc>${baseUrl}/sitemap.xml</loc>
+    <lastmod>${new Date().toISOString()}</lastmod>
+  </sitemap>
+</sitemapindex>`
+
+  return new NextResponse(sitemapIndex, {
+    headers: {
+      'Content-Type': 'application/xml',
+      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
+    },
+  })
+}

package/src/app/sitemap.ts

@@ -0,0 +1,10 @@
+import { MetadataRoute } from 'next'
+import { generateStaticPagesSitemap } from '../sitemaps/static-pages-sitemap'
+import { generateDynamicPagesSitemap } from '../sitemaps/dynamic-pages-sitemap'
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const staticPages = generateStaticPagesSitemap()
+  const dynamicPages = await generateDynamicPagesSitemap()
+  
+  return [...staticPages, ...dynamicPages]
+}

package/src/app/terms-and-conditions/loading.tsx

@@ -0,0 +1,17 @@
+import ContentSkeleton from "@/app/components/skeletons/ContentSkeleton"
+
+export default function Loading() {
+  return (
+    <main className="h-full w-full">
+      <div className="container mx-auto max-w-[1276px]">
+        <div className="flex flex-col items-start w-full py-24">
+          <div className="flex flex-col items-start gap-5 mb-6 w-full">
+            <div className="h-5 w-24 bg-[var(--color-secondary-800)]/30 rounded" />
+            <div className="h-9 w-64 bg-[var(--color-secondary-800)]/30 rounded" />
+          </div>
+          <ContentSkeleton />
+        </div>
+      </div>
+    </main>
+  )
+}

package/src/app/terms-and-conditions/page.tsx

@@ -0,0 +1,56 @@
+import AncillaryContent from "@/app/components/ancillary/AncillaryContent";
+import ContentSkeleton from "@/app/components/skeletons/ContentSkeleton";
+import { getStoreName } from "@/app/utils/branding";
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import Breadcrumb from "../components/reuseableUI/breadcrumb";
+import Heading from "../components/reuseableUI/heading";
+
+export const metadata: Metadata = {
+  title: `Terms & Conditions - ${getStoreName()}`,
+  description: `Read our terms and conditions for purchasing products and using ${getStoreName()} services.`,
+  alternates: {
+    canonical: "/terms-and-conditions",
+  },
+  openGraph: {
+    title: `Terms & Conditions - ${getStoreName()}`,
+    description: `Read our terms and conditions for purchasing products and using ${getStoreName()} services.`,
+    type: "website",
+    url: "/terms-and-conditions",
+    images: [{ url: "/Logo.png" }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `Terms & Conditions - ${getStoreName()}`,
+    description: `Read our terms and conditions for purchasing products and using ${getStoreName()} services.`,
+    images: ["/Logo.png"],
+  },
+};
+
+export default function TermsAndConditionsPage() {
+  const derivedTitle = "Terms & Conditions";
+
+  return (
+    <main className="h-full w-full">
+      <div className="container mx-auto max-w-[1276px]">
+        <div className="flex flex-col items-start w-full px-4 md:px-6 py-12 md:py-16 lg:py-24">
+          <div className="flex flex-col items-start gap-5 mb-6 w-full">
+            <Breadcrumb
+              items={[
+                { text: "Home", link: "/" },
+                { text: "Terms & Conditions", link: "/terms-and-conditions" },
+              ]}
+            />
+            <Heading as="h1" content="Terms & Conditions" />
+          </div>
+
+          <section className="w-full">
+            <Suspense fallback={<ContentSkeleton />}>
+              <AncillaryContent slug="terms-and-conditions" />
+            </Suspense>
+          </section>
+        </div>
+      </div>
+    </main>
+  );
+}

package/src/app/utils/appConfiguration.ts

@@ -0,0 +1,327 @@
+export interface GoogleRecaptchaConfig {
+  site_key: string;
+  locations?: {
+    login?: boolean;
+    signup?: boolean;
+    checkout?: boolean;
+  };
+}
+
+export interface GoogleTagManagerConfig {
+  container_id: string;
+}
+
+export interface GoogleMapsConfig {
+  api_key: string;
+}
+
+export interface GoogleAnalyticsConfig {
+  measurement_id: string;
+}
+
+export interface GoogleAdSenseConfig {
+  publisher_id: string;
+}
+
+export interface GoogleSearchConsoleConfig {
+  verification_meta_tag: string;
+}
+
+export interface DealerLocatorConfig {
+  token: string;
+}
+
+export interface WillCallConfig {
+  // Will call doesn't need any configurations for now, but we maintain this for consistency
+  enabled?: boolean;
+}
+
+export interface AppConfig {
+  app_name: string; // Allow any app name since API can return unknown apps
+  configurations?: DealerLocatorConfig | GoogleRecaptchaConfig | GoogleTagManagerConfig | GoogleMapsConfig | GoogleAnalyticsConfig | GoogleAdSenseConfig | GoogleSearchConsoleConfig | WillCallConfig | Record<string, unknown>;
+  is_active: boolean;
+}
+
+export interface ExternalAppConfig {
+  app_name: 'dealer_locator' | 'google_recaptcha' | 'google_tag_manager' | 'google_maps' | 'google_analytics' | 'google_adsense' | 'google_search_console' | 'will-call';
+  configurations: DealerLocatorConfig | GoogleRecaptchaConfig | GoogleTagManagerConfig | GoogleMapsConfig | GoogleAnalyticsConfig | GoogleAdSenseConfig | GoogleSearchConsoleConfig | WillCallConfig;
+  is_active: boolean;
+}
+
+export interface InternalAppConfig {
+  app_name: 'tiered_pricing';
+  is_active: boolean;
+}
+
+export interface AppConfigurationResponse {
+  internal?: InternalAppConfig[];
+  external?: ExternalAppConfig[];
+}
+
+class AppConfigurationService {
+  private configuration: AppConfigurationResponse | null = null;
+  private loading = false;
+  private error: string | null = null;
+  private lastFetch: number = 0;
+  private cacheTimeout: number = 10000; // 10 seconds cache timeout
+
+  async fetchConfiguration(): Promise<AppConfigurationResponse> {
+    if (this.configuration && !this.shouldRefetch()) {
+      return this.configuration;
+    }
+
+    if (this.loading) {
+      while (this.loading) {
+        await new Promise(resolve => setTimeout(resolve, 100));
+      }
+      return this.configuration!;
+    }
+
+    try {
+      this.loading = true;
+      this.error = null;
+
+      // Use the API proxy route instead of direct external API call
+      const configUrl = '/api/configuration';
+      
+      const response = await fetch(configUrl, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch configuration: ${response.status}`);
+      }
+
+      const rawData = await response.json();
+      
+      // Handle flat array format or empty array
+      let data: AppConfigurationResponse;
+      if (rawData.length === 0) {
+        data = this.getFallbackConfiguration();
+      } else {
+        data = this.transformFlatArrayToStructured(rawData);
+      }
+      
+      this.configuration = data;
+      this.lastFetch = Date.now();
+      
+      return data;
+    } catch (error) {
+      this.error = error instanceof Error ? error.message : 'Unknown error';
+      console.error('Failed to fetch app configuration:', error);
+      
+      return this.getFallbackConfiguration();
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  private shouldRefetch(): boolean {
+    const now = Date.now();
+    return (now - this.lastFetch) > this.cacheTimeout;
+  }
+
+  private getFallbackConfiguration(): AppConfigurationResponse {
+    // Return minimal fallback - all features disabled when API fails
+    return {
+      internal: [
+        {
+          app_name: 'tiered_pricing',
+          is_active: false
+        }
+      ],
+      external: [
+        {
+          app_name: 'dealer_locator',
+          configurations: {
+            token: ''
+          },
+          is_active: false
+        },
+        {
+          app_name: 'google_recaptcha',
+          configurations: {
+            site_key: '',
+            locations: {
+              login: false,
+              signup: false,
+              checkout: false
+            }
+          },
+          is_active: false
+        },
+        {
+          app_name: 'google_tag_manager',
+          configurations: {
+            container_id: ''
+          },
+          is_active: false
+        },
+        {
+          app_name: 'google_maps',
+          configurations: {
+            api_key: ''
+          },
+          is_active: false
+        },
+        {
+          app_name: 'google_analytics',
+          configurations: {
+            measurement_id: ''
+          },
+          is_active: false
+        },
+        {
+          app_name: 'google_adsense',
+          configurations: {
+            publisher_id: ''
+          },
+          is_active: false
+        },
+        {
+          app_name: 'google_search_console',
+          configurations: {
+            verification_meta_tag: ''
+          },
+          is_active: false
+        }
+      ]
+    };
+  }
+
+  private transformFlatArrayToStructured(flatArray: AppConfig[]): AppConfigurationResponse {
+    const internalApps: InternalAppConfig[] = [];
+    const externalApps: ExternalAppConfig[] = [];
+    
+    flatArray.forEach(app => {
+      // Only apps without configurations go to internal
+      if (!app.configurations && app.app_name === 'tiered_pricing') {
+        internalApps.push({
+          app_name: app.app_name as 'tiered_pricing',
+          is_active: app.is_active
+        });
+      } else {
+        // Apps with configurations go to external (including dealer_locator)
+        const knownExternalApps = [
+          'dealer_locator', 'google_recaptcha', 'google_tag_manager', 
+          'google_maps', 'google_analytics', 'google_adsense', 'google_search_console', 'will-call'
+        ];
+        
+        if (knownExternalApps.includes(app.app_name)) {
+          externalApps.push({
+            app_name: app.app_name as 'dealer_locator' | 'google_recaptcha' | 'google_tag_manager' | 'google_maps' | 'google_analytics' | 'google_adsense' | 'google_search_console' | 'will-call',
+            configurations: app.configurations || {},
+            is_active: app.is_active
+          } as ExternalAppConfig);
+        }
+      }
+    });
+    
+    return {
+      internal: internalApps,
+      external: externalApps
+    };
+  }
+
+  getExternalConfig<T>(appName: string): T | null {
+    if (!this.configuration) return null;
+    
+    const app = this.configuration.external?.find(app => app.app_name === appName);
+    return app?.is_active ? (app.configurations as T) : null;
+  }
+
+  getInternalConfig(appName: string): boolean {
+    if (!this.configuration) return false;
+    
+    const app = this.configuration.internal?.find(app => app.app_name === appName);
+    return app?.is_active ?? false;
+  }
+
+  isAppActive(appName: string): boolean {
+    if (!this.configuration) return false;
+    
+    const externalApp = this.configuration.external?.find(app => app.app_name === appName);
+    if (externalApp) return externalApp.is_active;
+    
+    const internalApp = this.configuration.internal?.find(app => app.app_name === appName);
+    return internalApp?.is_active ?? false;
+  }
+
+  getGoogleRecaptchaConfig(): GoogleRecaptchaConfig | null {
+    return this.getExternalConfig<GoogleRecaptchaConfig>('google_recaptcha');
+  }
+
+  isRecaptchaEnabledFor(location: 'login' | 'signup' | 'checkout'): boolean {
+    if (!this.isAppActive('google_recaptcha')) return false;
+    
+    const config = this.getGoogleRecaptchaConfig();
+    return config?.locations?.[location] ?? false;
+  }
+
+  getGoogleTagManagerConfig(): GoogleTagManagerConfig | null {
+    return this.getExternalConfig<GoogleTagManagerConfig>('google_tag_manager');
+  }
+
+  getGoogleMapsConfig(): GoogleMapsConfig | null {
+    return this.getExternalConfig<GoogleMapsConfig>('google_maps');
+  }
+
+  getGoogleAnalyticsConfig(): GoogleAnalyticsConfig | null {
+    return this.getExternalConfig<GoogleAnalyticsConfig>('google_analytics');
+  }
+
+  getGoogleAdSenseConfig(): GoogleAdSenseConfig | null {
+    return this.getExternalConfig<GoogleAdSenseConfig>('google_adsense');
+  }
+
+  getGoogleSearchConsoleConfig(): GoogleSearchConsoleConfig | null {
+    return this.getExternalConfig<GoogleSearchConsoleConfig>('google_search_console');
+  }
+
+  isDealerLocatorEnabled(): boolean {
+    return this.getInternalConfig('dealer_locator');
+  }
+
+  isWillCallEnabled(): boolean {
+    return this.isAppActive('will-call');
+  }
+
+  getLastError(): string | null {
+    return this.error;
+  }
+
+  // Force refresh configuration (useful for development)
+  clearCache(): void {
+    this.configuration = null;
+    this.lastFetch = 0;
+    this.error = null;
+  }
+
+  // Reduce cache timeout for development
+  setCacheTimeout(timeoutMs: number): void {
+    this.cacheTimeout = timeoutMs;
+  }
+}
+
+export const appConfigService = new AppConfigurationService();
+
+// Development helper: expose cache clearing functions to window for easy access
+if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
+  (window as Record<string, unknown>).clearAppConfigCache = () => {
+    appConfigService.clearCache();
+  };
+  
+  (window as Record<string, unknown>).refreshAppConfig = async () => {
+    appConfigService.clearCache();
+    const config = await appConfigService.fetchConfiguration();
+    return config;
+  };
+  
+  (window as Record<string, unknown>).setAppConfigCacheTimeout = (timeoutMs: number) => {
+    appConfigService.setCacheTimeout(timeoutMs);
+
+  };
+}

package/src/app/utils/branding.ts

@@ -0,0 +1,52 @@
+export function getTenantName() {
+  return process.env.NEXT_PUBLIC_TENANT_NAME || "default";
+}
+
+export function getStoreName() {
+  const tenantName = getTenantName();
+  return tenantName.charAt(0).toUpperCase() + tenantName.slice(1).replace(/-/g, ' ') + " Store";
+}
+
+export function getAssetsBaseUrl() {
+  // e.g. https://zgnluljrtbddtwugakuf.supabase.co
+  return process.env.NEXT_PUBLIC_ASSETS_BASE_URL || "";
+}
+
+function joinUrl(...parts: string[]) {
+  return parts
+    .filter(Boolean)
+    .map((p, i) => (i === 0 ? p.replace(/\/$/, "") : p.replace(/^\/+|\/+$/g, "")))
+    .join("/");
+}
+
+// Helpers to sanitize env inputs
+function pickFirstUrlToken(input?: string) {
+  if (!input) return undefined;
+  const trimmed = input.trim();
+  // If there are accidental extra tokens (e.g., ".../favicon.png favicon.png"), take the first token
+  const firstToken = trimmed.split(/\s+/)[0];
+  return firstToken.replace(/^\"|\"$/g, "");
+}
+
+function cleanPathToken(input?: string, fallback = "") {
+  const v = (input ?? fallback).trim();
+  return v.replace(/^\"|\"$/g, "");
+}
+
+export function getAppIconUrl() {
+  const explicit = pickFirstUrlToken(process.env.NEXT_PUBLIC_APP_ICON);
+  if (explicit && /^https?:\/\//i.test(explicit)) return explicit;
+
+  const base = getAssetsBaseUrl();
+  const tenant = getTenantName();
+  const file = cleanPathToken(process.env.NEXT_PUBLIC_APP_ICON_FILENAME, "favicon.ico");
+  const dir = cleanPathToken(process.env.NEXT_PUBLIC_APP_ICON_DIR, ""); // optional subfolder
+  if (!base) return explicit || "/icons/appIcon.png";
+  const pathParts = file.includes("/") ? [file] : (dir ? [dir, file] : [file]);
+  return joinUrl(
+    base,
+    "storage/v1/object/public/storefront-assets",
+    tenant,
+    ...pathParts
+  );
+}