@alphasquad/saleor-template-advance 0.1.0

package/src/app/components/providers/AppConfigurationProvider.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+/**
+ * DEPRECATED: This provider is no longer used.
+ * Use ServerAppConfigurationProvider instead, which handles configuration server-side
+ * to prevent exposing sensitive configuration data to the client.
+ * 
+ * This file is kept for backward compatibility but should not be used in new code.
+ */
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { 
+  AppConfigurationResponse, 
+  appConfigService,
+  GoogleRecaptchaConfig,
+  GoogleTagManagerConfig,
+  GoogleMapsConfig,
+  GoogleAnalyticsConfig,
+  GoogleAdSenseConfig
+} from '@/app/utils/appConfiguration';
+
+interface AppConfigurationContextType {
+  configuration: AppConfigurationResponse | null;
+  loading: boolean;
+  error: string | null;
+  isAppActive: (appName: string) => boolean;
+  isDealerLocatorEnabled: () => boolean;
+  getGoogleRecaptchaConfig: () => GoogleRecaptchaConfig | null;
+  getGoogleTagManagerConfig: () => GoogleTagManagerConfig | null;
+  getGoogleMapsConfig: () => GoogleMapsConfig | null;
+  getGoogleAnalyticsConfig: () => GoogleAnalyticsConfig | null;
+  getGoogleAdSenseConfig: () => GoogleAdSenseConfig | null;
+}
+
+const AppConfigurationContext = createContext<AppConfigurationContextType | undefined>(undefined);
+
+interface AppConfigurationProviderProps {
+  children: React.ReactNode;
+}
+
+export const AppConfigurationProvider = ({ children }: AppConfigurationProviderProps) => {
+  const [configuration, setConfiguration] = useState<AppConfigurationResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadConfiguration = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        
+        const config = await appConfigService.fetchConfiguration();
+        
+        if (isMounted) {
+          setConfiguration(config);
+          
+          const lastError = appConfigService.getLastError();
+          if (lastError) {
+            setError(lastError);
+          }
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err instanceof Error ? err.message : 'Failed to load configuration');
+        }
+      } finally {
+        if (isMounted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    loadConfiguration();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  const contextValue: AppConfigurationContextType = {
+    configuration,
+    loading,
+    error,
+    isAppActive: (appName: string) => appConfigService.isAppActive(appName),
+    isDealerLocatorEnabled: () => appConfigService.isDealerLocatorEnabled(),
+    getGoogleRecaptchaConfig: () => appConfigService.getGoogleRecaptchaConfig(),
+    getGoogleTagManagerConfig: () => appConfigService.getGoogleTagManagerConfig(),
+    getGoogleMapsConfig: () => appConfigService.getGoogleMapsConfig(),
+    getGoogleAnalyticsConfig: () => appConfigService.getGoogleAnalyticsConfig(),
+    getGoogleAdSenseConfig: () => appConfigService.getGoogleAdSenseConfig(),
+  };
+
+  return (
+    <AppConfigurationContext.Provider value={contextValue}>
+      {children}
+    </AppConfigurationContext.Provider>
+  );
+};
+
+export const useAppConfiguration = () => {
+  const context = useContext(AppConfigurationContext);
+  if (context === undefined) {
+    throw new Error('useAppConfiguration must be used within an AppConfigurationProvider');
+  }
+  return context;
+};

package/src/app/components/providers/GoogleAnalyticsProvider.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { useEffect } from "react";
+import { useGoogleAnalytics, useTrackEntrance, useTrackExit } from "@/app/hooks/useGoogleAnalytics";
+import { setUserProperties } from "@/app/utils/googleAnalytics";
+import { sendGAEvent } from '@next/third-parties/google';
+import { useAppConfiguration } from "./ServerAppConfigurationProvider";
+
+
+interface GoogleAnalyticsProviderProps {
+  children: React.ReactNode;
+}
+
+export default function GoogleAnalyticsProvider({ children }: GoogleAnalyticsProviderProps) {
+  const { isAppActive, getGoogleAnalyticsConfig } = useAppConfiguration();
+  
+  const isGoogleAnalyticsEnabled = isAppActive('google_analytics');
+  const gaConfig = getGoogleAnalyticsConfig();
+  
+  useGoogleAnalytics(isGoogleAnalyticsEnabled ? gaConfig?.measurement_id : null);
+  
+  useTrackEntrance(isGoogleAnalyticsEnabled ? gaConfig?.measurement_id : null);
+  useTrackExit(isGoogleAnalyticsEnabled ? gaConfig?.measurement_id : null);
+
+  useEffect(() => {
+    if (!isGoogleAnalyticsEnabled) return;
+    const userAgent = navigator.userAgent;
+    const platform = (navigator as { userAgentData?: { platform?: string } }).userAgentData?.platform || navigator.platform;
+    const language = navigator.language;
+    const screenResolution = `${screen.width}x${screen.height}`;
+    const viewportSize = `${window.innerWidth}x${window.innerHeight}`;
+
+    const userProperties = {
+      user_agent: userAgent,
+      platform: platform,
+      language: language,
+      screen_resolution: screenResolution,
+      viewport_size: viewportSize,
+      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    };
+
+    setUserProperties(userProperties, gaConfig?.measurement_id);
+
+    // Bounce detection variables
+    let interactionOccurred = false;
+    let bounceTimer: NodeJS.Timeout | null = null;
+    const startTime = Date.now();
+
+    const trackInteraction = () => {
+      if (!interactionOccurred) {
+        interactionOccurred = true;
+        
+        // Clear the bounce timer since user interacted
+        if (bounceTimer) {
+          clearTimeout(bounceTimer);
+        }
+      }
+    };
+
+    const sendBounceEvent = (timeOnSite: number, trigger: string) => {
+      if (!interactionOccurred) {
+        const eventData = {
+          event: 'bounce_detected',
+          time_on_page: timeOnSite,
+          interaction_occurred: false,
+          trigger: trigger
+        };
+        
+        // Send via Next.js third-parties
+        sendGAEvent(eventData);
+        
+        // Also send via direct gtag as fallback
+        if (typeof window !== 'undefined' && (window as { gtag?: (command: string, action: string, parameters?: object) => void }).gtag) {
+          (window as { gtag: (command: string, action: string, parameters?: object) => void }).gtag('event', 'bounce_detected', {
+            time_on_page: timeOnSite,
+            interaction_occurred: false,
+            trigger: trigger,
+            custom_parameter_1: 'bounce_tracking'
+          });
+        }
+        
+        // Mark that bounce was detected to prevent duplicate events
+        interactionOccurred = true;
+      }
+    };
+
+    const handleBeforeUnload = () => {
+      const timeOnSite = Date.now() - startTime;
+      sendBounceEvent(timeOnSite, 'beforeunload');
+    };
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'hidden') {
+        const timeOnSite = Date.now() - startTime;
+        sendBounceEvent(timeOnSite, 'visibility_change');
+      }
+    };
+
+    // Set up interaction tracking
+    const events = ["click", "scroll", "keydown", "mousemove", "touchstart"];
+    events.forEach(event => {
+      document.addEventListener(event, trackInteraction, { once: true, passive: true });
+    });
+
+    // Set up exit tracking
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    // Set up bounce timer (10 seconds for faster testing, can be changed to 30000 for production)
+    const BOUNCE_TIMEOUT = process.env.NODE_ENV === 'development' ? 10000 : 30000;
+    bounceTimer = setTimeout(() => {
+      const timeOnSite = Date.now() - startTime;
+      sendBounceEvent(timeOnSite, `${BOUNCE_TIMEOUT/1000}_second_timeout`);
+    }, BOUNCE_TIMEOUT);
+
+    // Development helper: expose bounce testing to window
+    if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
+      (window as { testBounceDetection?: () => void }).testBounceDetection = () => {
+        const timeOnSite = Date.now() - startTime;
+        sendBounceEvent(timeOnSite, 'manual_test');
+      };
+      
+      (window as { getBounceStatus?: () => object }).getBounceStatus = () => {
+        const timeOnSite = Date.now() - startTime;
+        return {
+          timeOnSite: timeOnSite,
+          interactionOccurred: interactionOccurred,
+          bounceTimerActive: !!bounceTimer
+        };
+      };
+    }
+
+    // Cleanup function
+    return () => {
+      if (bounceTimer) {
+        clearTimeout(bounceTimer);
+      }
+      
+      events.forEach(event => {
+        document.removeEventListener(event, trackInteraction);
+      });
+      
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [isGoogleAnalyticsEnabled]);
+
+  return <>{children}</>;
+}

package/src/app/components/providers/GoogleTagManagerProvider.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect } from "react";
+import { usePathname } from "next/navigation";
+import { gtmPageView } from "@/app/utils/googleTagManager";
+import { useGTMEngagement } from "@/app/hooks/useGTMEngagement";
+import { useAppConfiguration } from "./ServerAppConfigurationProvider";
+
+interface GoogleTagManagerProviderProps {
+  children: React.ReactNode;
+}
+
+export default function GoogleTagManagerProvider({ children }: GoogleTagManagerProviderProps) {
+  const pathname = usePathname();
+  const { isAppActive, getGoogleTagManagerConfig } = useAppConfiguration();
+  
+  const isGTMEnabled = isAppActive('google_tag_manager');
+  const gtmConfig = getGoogleTagManagerConfig();
+  
+  // Track user engagement (scroll depth, time on page) - only if GTM is enabled
+  useGTMEngagement(isGTMEnabled ? gtmConfig?.container_id : null);
+
+  useEffect(() => {
+    if (!isGTMEnabled || !gtmConfig?.container_id) return;
+    if (typeof window !== "undefined") {
+      gtmPageView(window.location.href, undefined, gtmConfig.container_id);
+    }
+  }, [pathname, isGTMEnabled, gtmConfig]);
+
+  return <>{children}</>;
+}

package/src/app/components/providers/RecaptchaProvider.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import type React from 'react';
+import { useAppConfiguration } from "./ServerAppConfigurationProvider";
+
+interface RecaptchaProviderProps {
+  children: React.ReactNode;
+}
+
+export default function RecaptchaProvider({ children }: RecaptchaProviderProps) {
+  const { getGoogleRecaptchaConfig } = useAppConfiguration();
+  
+  const recaptchaConfig = getGoogleRecaptchaConfig();
+  
+  // For now, just return children. In the future, this could inject reCAPTCHA scripts
+  // based on the dynamic configuration
+  return <>{children}</>;
+}

package/src/app/components/providers/ServerAppConfigurationProvider.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import type { ClientSafeConfiguration } from '@/app/utils/serverConfigurationService';
+import React, { createContext, useContext } from 'react';
+
+interface ServerAppConfigurationContextType {
+  // Feature flags
+  isDealerLocatorEnabled: () => boolean;
+  isTieredPricingEnabled: () => boolean;
+  isWillCallEnabled: () => boolean;
+  
+  // Dealer locator configuration
+  getDealerLocatorToken: () => string | null;
+  
+  // Google services configurations (only what's needed client-side)
+  getGoogleRecaptchaSiteKey: () => string | null;
+  getGoogleTagManagerContainerId: () => string | null;
+  getGoogleMapsApiKey: () => string | null;
+  getGoogleAnalyticsMeasurementId: () => string | null;
+  getGoogleAdSensePublisherId: () => string | null;
+  
+  // reCAPTCHA location-based checks
+  isRecaptchaEnabledFor: (location: 'login' | 'signup' | 'checkout') => boolean;
+  
+  // Legacy compatibility methods
+  isAppActive: (appName: string) => boolean;
+  getGoogleRecaptchaConfig: () => { site_key: string; locations?: { login?: boolean; signup?: boolean; checkout?: boolean } } | null;
+  getGoogleTagManagerConfig: () => { container_id: string } | null;
+  getGoogleMapsConfig: () => { api_key: string } | null;
+  getGoogleAnalyticsConfig: () => { measurement_id: string } | null;
+  getGoogleAdSenseConfig: () => { publisher_id: string } | null;
+}
+
+const ServerAppConfigurationContext = createContext<ServerAppConfigurationContextType | undefined>(undefined);
+
+interface ServerAppConfigurationProviderProps {
+  children: React.ReactNode;
+  configuration: ClientSafeConfiguration;
+}
+
+export const ServerAppConfigurationProvider = ({ 
+  children, 
+  configuration 
+}: ServerAppConfigurationProviderProps) => {
+  const contextValue: ServerAppConfigurationContextType = {
+    // Feature flags
+    isDealerLocatorEnabled: () => configuration.features.dealer_locator,
+    isTieredPricingEnabled: () => configuration.features.tiered_pricing,
+    isWillCallEnabled: () => configuration.features.will_call,
+    
+    // Dealer locator
+    getDealerLocatorToken: () => configuration.dealer_locator.token,
+    
+    // Google services
+    getGoogleRecaptchaSiteKey: () => configuration.google.recaptcha_site_key,
+    getGoogleTagManagerContainerId: () => configuration.google.tag_manager_container_id,
+    getGoogleMapsApiKey: () => configuration.google.maps_api_key,
+    getGoogleAnalyticsMeasurementId: () => configuration.google.analytics_measurement_id,
+    getGoogleAdSensePublisherId: () => configuration.google.adsense_publisher_id,
+    
+    // reCAPTCHA location-based checks
+    isRecaptchaEnabledFor: (location: 'login' | 'signup' | 'checkout') => {
+      if (!configuration.google.recaptcha_site_key) return false;
+      return configuration.google.recaptcha_locations[location] ?? false;
+    },
+    
+    // Legacy compatibility methods
+    isAppActive: (appName: string) => {
+      switch (appName) {
+        case 'dealer_locator':
+          return configuration.features.dealer_locator;
+        case 'tiered-pricing':
+          return configuration.features.tiered_pricing;
+        case 'will-call':
+          return configuration.features.will_call;
+        case 'google_recaptcha':
+          return !!configuration.google.recaptcha_site_key;
+        case 'google_tag_manager':
+          return !!configuration.google.tag_manager_container_id;
+        case 'google_maps':
+          return !!configuration.google.maps_api_key;
+        case 'google_analytics':
+          return !!configuration.google.analytics_measurement_id;
+        case 'google_adsense':
+          return !!configuration.google.adsense_publisher_id;
+        default:
+          return false;
+      }
+    },
+    
+    getGoogleRecaptchaConfig: () => 
+      configuration.google.recaptcha_site_key 
+        ? { 
+            site_key: configuration.google.recaptcha_site_key,
+            locations: configuration.google.recaptcha_locations
+          }
+        : null,
+        
+    getGoogleTagManagerConfig: () => 
+      configuration.google.tag_manager_container_id 
+        ? { container_id: configuration.google.tag_manager_container_id }
+        : null,
+        
+    getGoogleMapsConfig: () => 
+      configuration.google.maps_api_key 
+        ? { api_key: configuration.google.maps_api_key }
+        : null,
+        
+    getGoogleAnalyticsConfig: () => 
+      configuration.google.analytics_measurement_id 
+        ? { measurement_id: configuration.google.analytics_measurement_id }
+        : null,
+        
+    getGoogleAdSenseConfig: () => 
+      configuration.google.adsense_publisher_id 
+        ? { publisher_id: configuration.google.adsense_publisher_id }
+        : null,
+  };
+
+  return (
+    <ServerAppConfigurationContext.Provider value={contextValue}>
+      {children}
+    </ServerAppConfigurationContext.Provider>
+  );
+};
+
+export const useAppConfiguration = () => {
+  const context = useContext(ServerAppConfigurationContext);
+  if (context === undefined) {
+    throw new Error('useAppConfiguration must be used within a ServerAppConfigurationProvider');
+  }
+  return context;
+};

package/src/app/components/providers/YMMStatusProvider.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { useEffect } from "react";
+import { useGlobalStore } from "@/store/useGlobalStore";
+
+export default function YMMStatusProvider() {
+  const checkYMMStatus = useGlobalStore((state) => state.checkYMMStatus);
+
+  useEffect(() => {
+    // Check YMM API status on app load
+    checkYMMStatus();
+  }, [checkYMMStatus]);
+
+  return null;
+}

package/src/app/components/reuseableUI/AboutUs.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import Link from "next/link";
+import createApolloServerClient from "@/graphql/server-client";
+import {
+  AboutUsResponse,
+  GET_ABOUT_US_PAGE,
+} from "@/graphql/queries/getAboutUs";
+import { EditorJsBlock } from "../richText/EditorRenderer";
+
+function parseEditorJsContent(raw?: string | null): string {
+  if (!raw) return "";
+  try {
+    const json = JSON.parse(raw) as { blocks?: EditorJsBlock[] };
+    const blocks = Array.isArray(json?.blocks)
+      ? (json.blocks as EditorJsBlock[])
+      : [];
+
+    // Extract all paragraph text and join them
+    const paragraphs = blocks
+      .filter((b) => b?.type === "paragraph" && b?.data?.text)
+      .map((b) => b.data.text?.trim())
+      .filter(Boolean);
+
+    return paragraphs.join(" ");
+  } catch {
+    return "";
+  }
+}
+
+export const AboutUsSection = async () => {
+  // Default values (fallback)
+  let title = "";
+  let description =
+    "";
+  const buttonText = "CONTACT US TODAY";
+  const buttonLink = "/contact";
+  const videoUrl = "/brand-video.mp4";
+
+  try {
+    const client = createApolloServerClient();
+    const resp = await client.query<AboutUsResponse>({
+      query: GET_ABOUT_US_PAGE,
+      variables: { first: 1 },
+      fetchPolicy: "cache-first",
+      errorPolicy: "all",
+      context: {
+        fetchOptions: {
+          next: { revalidate: 600 }, // Cache for 10 minutes
+        },
+      },
+    });
+
+    const node = resp.data?.pages?.edges?.[0]?.node || null;
+    if (node) {
+      // Use CMS title if available
+      if (node.title?.trim()) {
+        title = node.title;
+      }
+
+      // Parse content for description
+      const parsedContent = parseEditorJsContent(node.content);
+      if (parsedContent) {
+        description = parsedContent;
+      }
+
+    }
+  } catch {
+    // fall back to defaults silently
+  }
+
+  // Avoid noisy logs during build/SSR.
+
+  return (
+    <section
+      aria-labelledby="about-us-heading"
+      className="relative w-full h-[500px] md:h-[600px] overflow-hidden"
+    >
+      {/* Video Background */}
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute inset-0 w-full h-full object-cover"
+      >
+        <source src={videoUrl} type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+
+      {/* Overlay */}
+      <div className="absolute inset-0 bg-black/40" />
+
+      {/* Content Overlay */}
+      <div className="relative h-full container mx-auto px-6 flex flex-col items-center justify-center text-center text-white z-10">
+        <h2
+          id="about-us-heading"
+          className="font-primary italic font-black uppercase text-3xl md:text-5xl lg:text-6xl mb-6 tracking-tight"
+        >
+          {title}
+        </h2>
+
+        <p className="font-secondary text-sm md:text-lg lg:text-xl max-w-3xl mb-10 leading-relaxed font-medium">
+          {description}
+        </p>
+
+        <Link
+          href={buttonLink}
+          className="bg-white text-black font-secondary font-bold uppercase py-3 px-8 rounded-sm hover:bg-gray-200 transition-colors text-sm md:text-base"
+        >
+          {buttonText}
+        </Link>
+      </div>
+    </section>
+  );
+};