@alphasquad/saleor-template-advance 0.1.0

package/src/graphql/queries/productInquiry.ts

@@ -0,0 +1,115 @@
+import { gql } from "@apollo/client";
+import createApolloServerClient from "../server-client";
+
+export const GET_PRODUCT_INQUIRY_FORM = gql`
+  query Contact($first: Int = 1) {
+    pages(first: $first, filter: { slugs: "item-inquiry" }) {
+      edges {
+        node {
+          id
+          title
+          content
+          metadata {
+            key
+            value
+          }
+        }
+      }
+    }
+  }
+`;
+
+export type InquiryMetadata = {
+  key: string;
+  value: string;
+};
+
+export type ProductInquiryNode = {
+  id: string;
+  title: string;
+  content: string | null;
+  metadata: InquiryMetadata[];
+};
+
+export type InquiryPageEdge = {
+  node: ProductInquiryNode;
+};
+
+export type ProductInquiryPageResponse = {
+  pages: {
+    edges: InquiryPageEdge[];
+  };
+};
+
+export type InquiryPageData = {
+  id: string;
+  title: string;
+  contactFormEnabled: boolean;
+  productInquiryFormEnabled: boolean;
+  recaptchaEnabled: boolean;
+  fields: string[];
+  description: string | null;
+  emailTo: string | null;
+  emailCc: string | null;
+  emailBcc: string | null;
+  emailSubject: string | null;
+  successMessage: string | null;
+};
+
+export function parseContactPageMetadata(node: ProductInquiryNode): InquiryPageData {
+  const metadata = node.metadata.reduce((acc, item) => {
+    acc[item.key] = item.value;
+    return acc;
+  }, {} as Record<string, string>);
+
+  return {
+    id: node.id,
+    title: node.title,
+    contactFormEnabled: metadata.contact_form === "true",
+    productInquiryFormEnabled: metadata.product_inquiry_form === "true",
+    recaptchaEnabled: metadata.reCAPTCHA === "true",
+    fields: metadata.fields ? metadata.fields.split(",").map((f) => f.trim()) : [],
+    description: metadata.description || null,
+    emailTo: metadata.email_to || null,
+    emailCc: metadata.email_cc || null,
+    emailBcc: metadata.email_bcc || null,
+    emailSubject: metadata.email_subject || null,
+    successMessage: metadata.success_message || null,
+  };
+}
+
+export async function fetchInquiryPage(): Promise<InquiryPageData | null> {
+  if (!process.env.NEXT_PUBLIC_API_URL) {
+    console.warn("API URL not configured, skipping inquiry page fetch");
+    return null;
+  }
+
+  try {
+    const client = createApolloServerClient();
+    const timeoutPromise = new Promise<never>((_, reject) =>
+      setTimeout(() => reject(new Error("Inquiry page fetch timeout")), 5000)
+    );
+
+    const queryPromise = client.query<ProductInquiryPageResponse>({
+      query: GET_PRODUCT_INQUIRY_FORM,
+      variables: { first: 1 },
+      fetchPolicy: "network-only",
+      errorPolicy: "ignore",
+    });
+
+    const result = await Promise.race([queryPromise, timeoutPromise]);
+    const edges = result?.data?.pages?.edges;
+
+    if (edges && edges.length > 0) {
+      return parseContactPageMetadata(edges[0].node);
+    }
+
+    return null;
+  } catch (err) {
+    console.warn(
+      "Failed to fetch inquiry page:",
+      err instanceof Error ? err.message : "Unknown error"
+    );
+    return null;
+  }
+}

package/src/graphql/queries/productsByCategoriesAndCollections.ts

@@ -0,0 +1,39 @@
+export const PRODUCTS_BY_CATEGORIES_AND_COLLECTIONS = `
+  query ProductsByCategoriesAndCollections(
+    $categoryIds: [ID!],
+    $collectionIds: [ID!],
+    $channel: String!,
+    $first: Int!,
+    $sortField: ProductOrderField!,
+    $sortDirection: OrderDirection!,
+    $after: String
+  ) {
+    products(
+      filter: { categories: $categoryIds, collections: $collectionIds },
+      channel: $channel,
+      first: $first,
+      after: $after,
+      sortBy: { field: $sortField, direction: $sortDirection }
+    ) {
+      totalCount
+      pageInfo { hasNextPage hasPreviousPage startCursor endCursor }
+      edges {
+        node {
+          id
+          name
+          slug
+          description
+          category { id name }
+          collections { id name }
+          media { id url alt }
+          pricing {
+            priceRange {
+              start { gross { amount currency } }
+              stop { gross { amount currency } }
+            }
+          }
+        }
+      }
+    }
+  }
+`;

package/src/graphql/queries/willCallCollectionPoints.ts

@@ -0,0 +1,55 @@
+import { gql } from "@apollo/client";
+
+export const GET_CHECKOUT_COLLECTION_POINTS = gql`
+  query GetCheckoutCollectionPoints($checkoutId: ID!) {
+    checkout(id: $checkoutId) {
+      id
+      availableCollectionPoints {
+        id
+        name
+        clickAndCollectOption
+        isPrivate
+        address {
+          streetAddress1
+          city
+          postalCode
+          countryArea
+          country {
+            code
+            country
+          }
+        }
+      }
+    }
+  }
+`;
+
+export interface CollectionPointAddress {
+  streetAddress1: string;
+  city: string;
+  postalCode: string;
+  countryArea: string;
+  country: {
+    code: string;
+    country: string;
+  };
+}
+
+export interface CollectionPoint {
+  id: string;
+  name: string;
+  clickAndCollectOption: string;
+  isPrivate: boolean;
+  address: CollectionPointAddress;
+}
+
+export interface GetCheckoutCollectionPointsData {
+  checkout: {
+    id: string;
+    availableCollectionPoints: CollectionPoint[];
+  };
+}
+
+export interface GetCheckoutCollectionPointsVars {
+  checkoutId: string;
+}

package/src/graphql/server-client.ts

@@ -0,0 +1,54 @@
+import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";
+
+function normalizeGraphqlUrl(input: string) {
+  let url = input.trim();
+  const lower = url.toLowerCase();
+  const hasGraphql = lower.endsWith("/graphql") || lower.endsWith("/graphql/");
+  if (!hasGraphql) {
+    url = url.replace(/\/+$/, "") + "/graphql/";
+  }
+  return url;
+}
+
+function fetchWithTimeout(
+  uri: RequestInfo | URL,
+  options?: RequestInit & { next?: { revalidate?: number } }
+) {
+  const controller = new AbortController();
+  const t = setTimeout(() => controller.abort(), 5000);
+  return fetch(uri, { ...options, signal: controller.signal }).finally(() =>
+    clearTimeout(t)
+  );
+}
+
+const createApolloServerClient = () => {
+  const raw = process.env.NEXT_PUBLIC_API_URL;
+  if (!raw) {
+    throw new Error("NEXT_PUBLIC_API_URL is not configured");
+  }
+
+  const apiUrl = normalizeGraphqlUrl(raw);
+  const httpLink = createHttpLink({
+    uri: apiUrl,
+    fetch: (uri, options) => {
+      return fetchWithTimeout(uri, {
+        ...options,
+        next: { revalidate: 300 },
+      });
+    },
+  });
+
+  return new ApolloClient({
+    link: httpLink,
+    cache: new InMemoryCache(),
+    ssrMode: true,
+    defaultOptions: {
+      query: {
+        errorPolicy: "ignore",
+        fetchPolicy: "cache-first",
+      },
+    },
+  });
+};
+
+export default createApolloServerClient;

package/src/graphql/types/categories.ts

@@ -0,0 +1,9 @@
+export type Category = {
+  id: string;
+  name: string;
+  description: string;
+  slug: string;
+  backgroundImage: {
+    url: string;
+  } | null;
+};

package/src/graphql/types/checkout.ts

@@ -0,0 +1,168 @@
+export type PaymentProcessingState = {
+  isModalOpen: boolean;
+  paymentProcessingLoading: boolean;
+  error: boolean;
+  success: boolean;
+};
+
+export type AddressForm = {
+  id?: string;
+  firstName: string;
+  lastName: string;
+  phone?: string;
+  companyName?: string;
+  streetAddress1: string;
+  streetAddress2?: string;
+  city: string;
+  postalCode: string;
+  country: string; // ISO code, e.g., 'US'
+  countryArea?: string;
+};
+
+export type KountConfiguration = {
+  blockCheckout: boolean;
+  blockedCheckoutMessage: string;
+  activePaymentMethods: string[];
+  ipExclusions: string[];
+};
+
+export type KountConfigResponse = {
+  appConfiguration: KountConfiguration;
+};
+
+export type KountFraudCheckRequest = {
+  merchantOrderId: string;
+  deviceSessionId: string;
+  userIp: string;
+  account: {
+    id: string;
+    type: "REGISTERED";
+    creationDateTime: string;
+    username: string;
+    accountIsActive: boolean;
+  };
+  items: Array<{
+    id: string;
+    price: number;
+    description: string;
+    name: string;
+    quantity: number;
+    category: string;
+    subCategory: string;
+    isDigital: boolean;
+    sku: string;
+  }>;
+  fulfillment: Array<{
+    merchantFulfillmentId: string;
+    type: "LOCAL_DELIVERY" | "STORE_PICK_UP";
+    status: "UNFULFILLED";
+    items: Array<{
+      id: string;
+      quantity: number;
+    }>;
+    shipping: {
+      amount: number;
+      provider: string;
+      method: string;
+    };
+    recipientPerson: {
+      name: {
+        first: string;
+        family: string;
+      };
+      emailAddress: string;
+      phoneNumber: string;
+      address: {
+        line1: string;
+        line2?: string;
+        city: string;
+        region: string;
+        postalCode: string;
+        countryCode: string;
+      };
+    };
+  }>;
+  transactions: Array<{
+    merchantTransactionId: string;
+    subtotal: number;
+    orderTotal: number;
+    currency: string;
+    transactionStatus: "PENDING";
+    billedPerson: {
+      name: {
+        first: string;
+        family: string;
+      };
+      emailAddress: string;
+      phoneNumber: string;
+      address: {
+        line1: string;
+        line2?: string;
+        city: string;
+        region: string;
+        postalCode: string;
+        countryCode: string;
+      };
+    };
+    items: Array<{
+      id: string;
+      quantity: number;
+    }>;
+    tax: {
+      isTaxable: boolean;
+      taxableCountryCode: string;
+      taxAmount: number;
+    };
+  }>;
+};
+
+export type KountFraudCheckResponse = {
+  version: string;
+  order: {
+    orderId: string;
+    merchantOrderId: string;
+    channel: string;
+    deviceSessionId: string;
+    creationDateTime: string;
+    riskInquiry: {
+      decision: string;
+      omniscore: number;
+      persona: {
+        uniqueCards: number;
+        uniqueDevices: number;
+        uniqueEmails: number;
+        riskiestCountry: string;
+        totalBankApprovedOrders: number;
+        totalBankDeclinedOrders: number;
+        maxVelocity: number;
+        riskiestRegion: string;
+      };
+      device: Record<string, unknown>;
+      segmentExecuted: {
+        segment: {
+          id: string;
+          name: string;
+          priority: number;
+        };
+        policiesExecuted: Record<string, unknown>[];
+        tags: Record<string, unknown>[];
+      };
+      email: Record<string, unknown>;
+      policyManagement: Record<string, unknown>;
+      reasonCode: string;
+    };
+    transactions: Array<{
+      transactionId: string;
+      merchantTransactionId: string;
+      payment: Array<{
+        cardBrand: string;
+      }>;
+      processorMerchantId: string;
+    }>;
+    fulfillment: Array<{
+      fulfillmentId: string;
+      merchantFulfillmentId: string;
+    }>;
+  };
+  warnings: Record<string, unknown>[];
+};

package/src/graphql/types/offer.ts

@@ -0,0 +1,12 @@
+export type Offer = {
+  id: string;
+  name: string;
+  description: {
+    time: number;
+    blocks: string; // other possible type
+    version: string;
+  };
+  endDate: string | null;
+  startDate: string;
+  type: "CATALOGUE" | "ORDER"; // other possible values if applicable
+};

package/src/graphql/types/product.ts

@@ -0,0 +1,44 @@
+export type Product = {
+  id: string;
+  name: string;
+  slug: string;
+  rating: number;
+  pricing: {
+    onSale: boolean;
+    priceRange: {
+      start: {
+        gross: {
+          amount: number;
+          currency: string;
+        };
+      };
+      stop: {
+        gross: {
+          amount: number;
+          currency: string;
+        };
+      };
+    };
+    discount: {
+      gross: {
+        amount: number;
+        currency: string;
+      };
+    };
+  };
+  media: [
+    {
+      url: string;
+    },
+    {
+      url: string;
+    },
+    {
+      url: string;
+    }
+  ];
+  category: {
+    id: string;
+    name: string;
+  };
+};

package/src/hooks/scrollPageTop.ts

@@ -0,0 +1,9 @@
+export const handleScrollToTop = () => {
+  const scrollPosition = window.scrollY || document.documentElement.scrollTop;
+  if (scrollPosition > 700) {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  }
+};

package/src/hooks/serverNavbarData.ts

@@ -0,0 +1,79 @@
+import { shopApi, type GraphQLCategory } from "@/lib/api/shop";
+import { fetchMenuBySlug } from "@/graphql/queries/getMenuBySlug";
+import { normalizeInternalUrl } from "@/lib/urls/normalizeInternalUrl";
+
+export type CategoryNode = {
+  id: string;
+  name: string;
+  slug?: string;
+  children?: CategoryNode[];
+};
+
+export type MenuItem = {
+  id: string;
+  name: string;
+  url: string;
+  level: number;
+  metadata?: Array<{
+    key: string;
+    value: string;
+  }>;
+  children?: MenuItem[];
+};
+
+export const fetchCategories = async (): Promise<CategoryNode[]> => {
+  try {
+    // Fetch categories from GraphQL API (same as shop page)
+    const channel =
+      process.env.NEXT_PUBLIC_SALEOR_CHANNEL?.trim() || "default-channel";
+    const categoriesResponse = await shopApi.getGraphQLCategories({ channel });
+    
+    // Transform GraphQL categories to match expected format
+    const buildHierarchy = (categories: GraphQLCategory[], parentId: string | null = null): CategoryNode[] => {
+      return categories
+        .filter(cat => {
+          if (parentId === null) {
+            return !cat.parent; // Root categories
+          }
+          return cat.parent?.id === parentId;
+        })
+        .map(category => ({
+          id: category.id,
+          name: category.name,
+          slug: category.slug, // Use Saleor's slug field
+          children: buildHierarchy(categories, category.id)
+        }))
+        .sort((a, b) => a.name.localeCompare(b.name));
+    };
+
+    const categoryNodes = categoriesResponse.categories.edges.map(edge => edge.node);
+    return buildHierarchy(categoryNodes);
+  } catch (error) {
+    console.error('Failed to fetch categories from GraphQL API:', error);
+    return [];
+  }
+};
+
+export const fetchMenuData = async (): Promise<MenuItem[]> => {
+  try {
+    const menuData = await fetchMenuBySlug("navbar");
+    if (
+      menuData &&
+      typeof menuData === "object" &&
+      "items" in menuData &&
+      Array.isArray(menuData.items)
+    ) {
+      const normalize = (items: MenuItem[]): MenuItem[] =>
+        items.map((i) => ({
+          ...i,
+          url: i.url ? normalizeInternalUrl(i.url) : i.url,
+          children: i.children ? normalize(i.children) : i.children,
+        }));
+      return normalize(menuData.items as MenuItem[]);
+    }
+    return [];
+  } catch (error) {
+    console.error('Failed to fetch menu data:', error);
+    return [];
+  }
+};

package/src/hooks/useCartSync.ts

@@ -0,0 +1,24 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useGlobalStore } from '@/store/useGlobalStore';
+
+/**
+ * Hook to handle cart synchronization with Saleor
+ * Automatically loads cart from Saleor when user logs in
+ * Returns syncing state for UI feedback
+ */
+export function useCartSync() {
+  const { isLoggedIn, syncingCart, loadCartFromSaleor } = useGlobalStore();
+
+  useEffect(() => {
+    if (isLoggedIn) {
+      // Load cart from Saleor when component mounts and user is logged in
+      loadCartFromSaleor().catch(console.error);
+    }
+  }, [isLoggedIn, loadCartFromSaleor]);
+
+  return {
+    syncingCart,
+  };
+}

package/src/hooks/useRecaptcha.ts

@@ -0,0 +1,33 @@
+import { useRef, useCallback } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+
+export const useRecaptcha = () => {
+  const recaptchaRef = useRef<ReCAPTCHA>(null);
+
+  const getRecaptchaToken = useCallback(async (): Promise<string | null> => {
+    if (!recaptchaRef.current) {
+      console.warn('reCAPTCHA ref not available');
+      return null;
+    }
+
+    try {
+      const token = await recaptchaRef.current.executeAsync();
+      return token;
+    } catch (error) {
+      console.error('reCAPTCHA execution failed:', error);
+      return null;
+    }
+  }, []);
+
+  const resetRecaptcha = useCallback(() => {
+    if (recaptchaRef.current) {
+      recaptchaRef.current.reset();
+    }
+  }, []);
+
+  return { 
+    recaptchaRef, 
+    getRecaptchaToken, 
+    resetRecaptcha 
+  };
+};