@alphasquad/saleor-template-advance 0.1.0

package/src/app/components/account/AccountTabs.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export default function AccountTabs() {
+  const pathname = usePathname();
+  return (
+    <div className="flex w-full text-sm md:text-lg lg:text-xl font-semibold text-center tracking-[-0.05px] font-secondary">
+      <Link
+        href="/account/login"
+        style={
+          pathname === "/account/login"
+            ? {
+                color: "var(--color-primary-700)",
+                borderBottom: "1px solid var(--color-primary-600)",
+              }
+            : {}
+        }
+        className="w-1/2 py-2"
+      >
+        SIGN IN
+      </Link>
+       <Link
+              href="/account/register"
+              style={
+                pathname === "/account/register"
+                  ? {
+                      color: "var(--color-primary-700)",
+                      borderBottom: "1px solid var(--color-primary-600)",
+                    }
+                  : {}
+              }
+              className="w-1/2 py-2"
+            >
+              CREATE ACCOUNT
+            </Link>
+    </div>
+  );
+}

package/src/app/components/ads/GoogleAdSense.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useAppConfiguration } from "../providers/ServerAppConfigurationProvider";
+
+declare global {
+  interface Window {
+    adsbygoogle: unknown[];
+  }
+}
+
+interface GoogleAdSenseProps {
+  adSlot?: string;
+  adFormat?: string;
+  fullWidthResponsive?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+  autoAds?: boolean;
+}
+
+export default function GoogleAdSense({
+  adSlot,
+  adFormat = "auto",
+  fullWidthResponsive = true,
+  style = { display: "block" },
+  className = "",
+  autoAds = false,
+}: GoogleAdSenseProps) {
+  const adRef = useRef<HTMLModElement>(null);
+  const isInitialized = useRef(false);
+  const { getGoogleAdSenseConfig } = useAppConfiguration();
+  const adSenseConfig = getGoogleAdSenseConfig();
+  const adSenseClientId = adSenseConfig?.publisher_id;
+
+  useEffect(() => {
+    if (autoAds || isInitialized.current) return;
+
+    try {
+      if (typeof window !== "undefined" && adRef.current) {
+        // Check if this specific ad element has already been processed
+        if (!adRef.current.getAttribute('data-adsbygoogle-status')) {
+          (window.adsbygoogle = window.adsbygoogle || []).push({});
+          isInitialized.current = true;
+        }
+      }
+    } catch (error) {
+      console.error("AdSense error:", error);
+    }
+  }, [autoAds]);
+
+  // For Auto ads, just return a placeholder div
+  if (autoAds) {
+    return (
+      <div 
+        className={`adsense-auto ${className}`} 
+        style={style}
+        data-ad-client={adSenseClientId}
+      />
+    );
+  }
+
+  // For manual ad units
+  return (
+    <ins
+      ref={adRef}
+      className={`adsbygoogle ${className}`}
+      style={style}
+      data-ad-client={adSenseClientId}
+      data-ad-slot={adSlot}
+      data-ad-format={adFormat}
+      data-full-width-responsive={fullWidthResponsive.toString()}
+    />
+  );
+}

package/src/app/components/analytics/AnalyticsScripts.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect } from "react";
+import { useAppConfiguration } from "../providers/ServerAppConfigurationProvider";
+
+export default function AnalyticsScripts() {
+  const { getGoogleTagManagerConfig, getGoogleAdSenseConfig } = useAppConfiguration();
+  
+  useEffect(() => {
+    // Only run on client side
+    if (typeof window === "undefined") return;
+
+    const gtmConfig = getGoogleTagManagerConfig();
+    const adSenseConfig = getGoogleAdSenseConfig();
+
+    const GTM_ID = gtmConfig?.container_id;
+    const ADSENSE_CLIENT_ID = adSenseConfig?.publisher_id;
+
+    // Load Authorize.Net Accept.js for payment tokenization FIRST
+    // This loads synchronously (without async) to ensure it's available immediately
+    // when users click on the credit/debit card payment option
+    const acceptJsUrl = 'https://jstest.authorize.net/v1/Accept.js';
+
+    // Check if Accept.js is already loaded
+    if (!document.querySelector(`script[src="${acceptJsUrl}"]`)) {
+      const acceptScript = document.createElement("script");
+      acceptScript.src = acceptJsUrl;
+      // Removed async to load synchronously for faster availability
+      document.head.appendChild(acceptScript);
+    }
+
+    // Load Google Tag Manager
+    if (GTM_ID) {
+      // Initialize dataLayer
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        "gtm.start": new Date().getTime(),
+        event: "gtm.js",
+      });
+
+      // Load GTM script
+      const gtmScript = document.createElement("script");
+      gtmScript.async = true;
+      gtmScript.src = `https://www.googletagmanager.com/gtm.js?id=${GTM_ID}`;
+      document.head.appendChild(gtmScript);
+    }
+
+    // Load Google AdSense
+    if (ADSENSE_CLIENT_ID) {
+      const adSenseScript = document.createElement("script");
+      adSenseScript.async = true;
+      adSenseScript.src = `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${ADSENSE_CLIENT_ID}`;
+      adSenseScript.crossOrigin = "anonymous";
+      document.head.appendChild(adSenseScript);
+    }
+
+  }, [getGoogleTagManagerConfig, getGoogleAdSenseConfig]);
+
+  return null;
+}
+
+interface AuthorizeNetResponse {
+  messages: {
+    resultCode: string;
+    message?: Array<{ text: string }>;
+  };
+  opaqueData?: {
+    dataValue: string;
+  };
+}
+
+declare global {
+  interface Window {
+    Accept: {
+      dispatchData: (secureData: Record<string, unknown>, callback: (response: AuthorizeNetResponse) => void) => void;
+    };
+  }
+}

package/src/app/components/analytics/ConditionalGTMNoscript.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useAppConfiguration } from "../providers/ServerAppConfigurationProvider";
+
+export default function ConditionalGTMNoscript() {
+  const { getGoogleTagManagerConfig } = useAppConfiguration();
+  
+  const gtmConfig = getGoogleTagManagerConfig();
+  
+  if (!gtmConfig?.container_id) {
+    return null;
+  }
+
+  return (
+    <noscript>
+      <iframe
+        src={`https://www.googletagmanager.com/ns.html?id=${gtmConfig.container_id}`}
+        height="0"
+        width="0"
+        style={{ display: "none", visibility: "hidden" }}
+      ></iframe>
+    </noscript>
+  );
+}

package/src/app/components/analytics/ConditionalGoogleAnalytics.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { GoogleAnalytics } from "@next/third-parties/google";
+import { useAppConfiguration } from "../providers/ServerAppConfigurationProvider";
+
+export default function ConditionalGoogleAnalytics() {
+  const { getGoogleAnalyticsConfig } = useAppConfiguration();
+  
+  const analyticsConfig = getGoogleAnalyticsConfig();
+  
+  if (!analyticsConfig?.measurement_id) {
+    return null;
+  }
+
+  return <GoogleAnalytics gaId={analyticsConfig.measurement_id} />;
+}

package/src/app/components/ancillary/AncillaryContent.tsx

@@ -0,0 +1,7 @@
+import EditorRenderer from "@/app/components/richText/EditorRenderer"
+import { fetchPageBySlug } from "@/graphql/queries/getPageBySlug"
+
+export default async function AncillaryContent({ slug }: { slug: string }) {
+  const page = await fetchPageBySlug(slug)
+  return <EditorRenderer content={page?.content ?? null} />
+}

package/src/app/components/auth/TokenExpirationHandler.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { useTokenExpiration } from '@/hooks/useTokenExpiration';
+
+export function TokenExpirationHandler() {
+  useTokenExpiration();
+  return null;
+}

package/src/app/components/blog/BlogList.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import React, { useState } from "react";
+import { BlogCard } from "../reuseableUI/blogCard";
+import ReactPaginate from "react-paginate";
+import { ChevronDownIcon } from "@/app/utils/svgs/chevronDownIcon";
+
+interface BlogPost {
+  id: string;
+  title: string;
+  slug: string;
+  excerpt?: string;
+  date?: string;
+  metadata?: Array<{
+    key?: string | null;
+    value?: string | null;
+  } | null>;
+}
+
+interface BlogListProps {
+  blogs: BlogPost[];
+  pageSize?: number;
+  pageRoute?: string;
+}
+
+export default function BlogList({
+  blogs,
+  pageSize = 9,
+  pageRoute,
+}: BlogListProps) {
+  const [currentPage, setCurrentPage] = useState(0);
+  const totalPages = Math.ceil(blogs.length / pageSize);
+  // Get current page blogs
+  const startIndex = currentPage * pageSize;
+  const endIndex = startIndex + pageSize;
+  const currentBlogs = blogs.slice(startIndex, endIndex);
+
+  const handlePageChange = ({ selected }: { selected: number }) => {
+    setCurrentPage(selected);
+    // Scroll to top of blog grid
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  if (blogs.length === 0) {
+    return (
+      <div className="w-full rounded-md border border-[var(--color-secondary-800)]/20 bg-[var(--color-secondary-900)]/20 p-6">
+        <h2 className="text-xl font-semibold mb-2">No blogs available</h2>
+        <p className="text-sm text-[var(--color-secondary-400)]">
+          Check back later for new blog posts.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
+        {currentBlogs.map((blog) => (
+          <BlogCard
+            pageRoute={pageRoute}
+            key={blog.id}
+            id={blog.id}
+            title={blog.title}
+            slug={blog.slug}
+            excerpt={blog.excerpt}
+            date={blog.date}
+            metadata={blog.metadata}
+          />
+        ))}
+      </div>
+
+      {totalPages > 1 && (
+        <div className="flex justify-center items-center w-full">
+          <ReactPaginate
+            pageCount={totalPages}
+            forcePage={currentPage}
+            onPageChange={handlePageChange}
+            marginPagesDisplayed={1}
+            pageRangeDisplayed={2}
+            previousLabel={
+              <p className="flex items-center gap-1">
+                <span className="size-5 text-black rotate-90">
+                  {ChevronDownIcon}
+                </span>
+                Prev
+              </p>
+            }
+            nextLabel={
+              <p className="flex items-center gap-1 !text-[var(--color-secondary-600)] font-semibold">
+                Next
+                <span className="size-5 -rotate-90">{ChevronDownIcon}</span>
+              </p>
+            }
+            renderOnZeroPageCount={undefined}
+            containerClassName="flex items-center justify-center gap-2 font-secondary"
+            pageClassName="list-none"
+            pageLinkClassName="px-3 py-2 !text-base cursor-pointer bg-[var(--color-secondary-200)] text-gray-900 hover:opacity-80"
+            previousClassName="list-none"
+            previousLinkClassName="px-3 py-2 !text-base cursor-pointer bg-[var(--color-secondary-200)] text-gray-700 hover:opacity-80 flex items-center gap-1"
+            nextClassName="list-none"
+            nextLinkClassName="px-3 py-2 !text-base cursor-pointer bg-[var(--color-secondary-200)] text-gray-700 hover:opacity-80 flex items-center gap-1"
+            activeClassName="list-none"
+            activeLinkClassName="px-3 py-2 !text-base !bg-[var(--color-primary-600)] text-white border border-[var(--color-primary-600)]"
+            disabledClassName="opacity-50 pointer-events-none"
+            breakLabel={"..."}
+            breakLinkClassName="px-2 !text-base text-gray-500"
+          />
+        </div>
+      )}
+    </>
+  );
+}

package/src/app/components/checkout/AddressInformationSection.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useQuery } from "@apollo/client";
+import {
+  GET_ADDRESS_INFORMATION,
+  type AddressInformationResponse,
+} from "@/graphql/queries/getAddressInformation";
+import EditorJsRenderer from "@/app/components/reuseableUI/EditorJsRenderer";
+
+export default function AddressInformationSection() {
+  const { data, loading } = useQuery<AddressInformationResponse>(
+    GET_ADDRESS_INFORMATION,
+    {
+      variables: { first: 1 },
+      fetchPolicy: "cache-first",
+    }
+  );
+
+  const pageNode = data?.pages?.edges?.[0]?.node;
+  const content = pageNode?.content;
+
+  // Don't render anything while loading or if no content
+  if (loading || !content) {
+    return null;
+  }
+
+  return (
+    <div className="bg-[var(--color-secondary-50)] border border-[var(--color-secondary-200)] rounded-lg p-4">
+      <div className="text-sm text-[var(--color-secondary-700)] [&_p]:m-0 [&_p]:mb-2 [&_p:last-child]:mb-0 [&_a]:text-[var(--color-primary-600)] [&_a]:underline [&_a:hover]:text-[var(--color-primary-700)] [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5">
+        <EditorJsRenderer content={content} />
+      </div>
+    </div>
+  );
+}