@alphasquad/saleor-template-advance 0.1.0

package/src/app/components/layout/joinNewsletterForm/index.tsx

@@ -0,0 +1,72 @@
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+import React, { useState } from "react";
+import CommonButton from "../../reuseableUI/commonButton";
+import Input from "../../reuseableUI/input";
+
+type FormData = {
+  email: string;
+};
+
+const JoinNewsletterForm: React.FC = () => {
+  const [formData, setFormData] = useState<FormData>({ email: "" });
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+  };
+  const TENANT_NAME = process.env.NEXT_PUBLIC_TENANT_NAME || "default";
+  const brandName = TENANT_NAME || "WSM";
+  const logo =
+    process.env.NEXT_PUBLIC_LOGO_URL ||
+    "https://webshopmanager.com/files/images/logo.png";
+  return (
+    <div className="w-full lg:max-w-[544px]">
+      <Link className="hidden lg:flex items-center justify-start" href="/">
+        <Image
+          src={logo}
+          alt={brandName}
+          width={133}
+          height={40}
+        />
+      </Link>
+      <p
+        style={{ color: "var(--color-secondary-100)" }}
+        className="font-secondary -tracking-wide text-2xl font-semibold mt-10 mb-5"
+      >
+        JOIN OUR NEWSLETTER
+      </p>
+
+      <form onSubmit={handleSubmit}>
+        <div className="w-full flex gap-3 items-end">
+          <Input
+            label="EMAIL"
+            name="email"
+            type="email"
+            darkTheme={true}
+            disabled
+            placeholder="Enter your Email Address"
+            value={formData.email}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setFormData({ ...formData, email: e.target.value })
+            }
+            autoComplete="email"
+            parentClassName="w-full"
+            required
+          />
+
+          <CommonButton disabled variant="primary" className="py-3" content="SUBMIT" />
+        </div>
+      </form>
+
+      <p
+        style={{ color: "var(--color-secondary-400)" }}
+        className="mt-5 font-secondary text-xs lg:text-base font-semibold -tracking-wide"
+      >
+        By subscribing you agree to the Terms of Services and Privacy Policy.
+      </p>
+    </div>
+  );
+};
+
+export default JoinNewsletterForm;

package/src/app/components/layout/mobileAccordian/index.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { cn, SrcRoot, trimSlash } from "@/app/utils/functions";
+import { ArrowDownIcon } from "@/app/utils/svgs/arrowDownIcon";
+import Link from "next/link";
+import { memo, useState } from "react";
+import ImageWithFallback from "../../reuseableUI/ImageWithFallback";
+
+type MenuItem = {
+  __typename: "MenuItem";
+  id: string;
+  level: number;
+  name: string;
+  url: string;
+  children: MenuItem[];
+};
+
+const AccordionSection = memo(function AccordionSection({ section }: { section: MenuItem }) {
+  const [open, setOpen] = useState(false);
+
+  const isExternal = (href: string) => /^https?:\/\//i.test(href);
+
+  return (
+    <div style={{ borderBottom: "1px solid var(--color-secondary-800)" }}>
+      <button
+        onClick={() => setOpen((prev) => !prev)}
+        className="flex w-full justify-between items-center py-6 lg:py-3 text-left"
+      >
+        <span
+          style={{ color: "var(--color-primary-600)" }}
+          className="font-semibold text-sm lg:text-lg font-secondary"
+        >
+          {section.name}
+        </span>
+        <span className={cn("transition ease-in-out duration-300", open ? "rotate-180" : "")}>
+          {ArrowDownIcon}
+        </span>
+      </button>
+
+      {open && (
+        <div className="flex flex-col gap-2 pb-6">
+          {section.children.map((child) => {
+            const href = child.url || "#";
+            const external = isExternal(href);
+            return (
+              <Link
+                prefetch={false}
+                key={child.id}
+                href={href}
+                rel={external ? "noopener noreferrer" : undefined}
+                style={{ color: "var(--color-secondary-100)" }}
+                className="text-base hover:opacity-80 transition-opacity"
+              >
+                {child.name}
+              </Link>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+});
+
+export const MobileAccordion = ({ sections }: { sections: MenuItem[] }) => {
+  const TENANT_NAME = process.env.NEXT_PUBLIC_TENANT_NAME || "default";
+  const BASE_URL = trimSlash(process.env.NEXT_PUBLIC_ASSETS_BASE_URL);
+  const brandName = TENANT_NAME || "WSM";
+
+  const logoSrcRoot: SrcRoot = {
+    basePath: `${BASE_URL}/storage/v1/object/public/storefront-assets/${TENANT_NAME}`,
+    fileName: "logo",
+  };
+
+  return (
+    <div className="block lg:hidden w-full">
+      <Link className="block lg:hidden items-center justify-start mb-4" href="/">
+        <ImageWithFallback
+          srcRoot={logoSrcRoot}
+          alt={brandName}
+          width={133}
+          height={40}
+          className="object-contain w-auto h-full max-h-10"
+          priority
+        />
+      </Link>
+
+      {sections.map((section) => (
+        <AccordionSection key={section.id} section={section} />
+      ))}
+    </div>
+  );
+};

package/src/app/components/layout/paymentMethods.tsx

@@ -0,0 +1,75 @@
+import Link from "next/link";
+import { fetchPaymentMethods, PaymentMethodFlagKey } from "@/graphql/queries/getPaymentMethods";
+import { paymentProvidersIconsConfig } from "@/app/utils/constant";
+
+export type PaymentIconKey = keyof typeof paymentProvidersIconsConfig;
+
+const apiKeyToIconKey: Record<PaymentMethodFlagKey, PaymentIconKey> = {
+  VISA: "Visa",
+  MasterCard: "Mastercard",
+  Amex: "Americanexpress",
+  PayPal: "Paypal",
+  GooglePay: "Gpay",
+  ApplePay: "Applepay",
+};
+
+const normalizeBool = (v: string | null | undefined) =>
+  String(v).trim().toLowerCase() === "true";
+
+export default async function PaymentMethods({
+  fallback,
+}: {
+  fallback?: { name: string; href: string; icon: PaymentIconKey }[];
+}) {
+  const page = await fetchPaymentMethods();
+
+  let items: { name: string; href: string; icon: PaymentIconKey }[] | null = null;
+
+  if (page?.metadata?.length) {
+    const enabled = page.metadata
+      .filter((m) => normalizeBool(m.value))
+      .map((m) => m.key);
+
+    items = enabled
+      .map((key) => {
+        const icon = apiKeyToIconKey[key as PaymentMethodFlagKey];
+        if (!icon || !(icon in paymentProvidersIconsConfig)) return null;
+        // Use brand websites as generic hrefs; can be refined later per business rules
+        const brandHref: Record<PaymentIconKey, string> = {
+          Visa: "https://visa.com",
+          Mastercard: "https://mastercard.com",
+          Americanexpress: "https://americanexpress.com",
+          Paypal: "https://paypal.com",
+          Gpay: "https://pay.google.com",
+          Applepay: "https://www.apple.com/apple-pay/",
+        };
+        return { name: icon, href: brandHref[icon], icon };
+      })
+      .filter(Boolean) as { name: string; href: string; icon: PaymentIconKey }[];
+  }
+
+  const list = items && items.length > 0 ? items : fallback || [];
+
+  if (!list.length) return null;
+
+  return (
+    <div className="flex gap-2 items-center justify-center lg:justify-start flex-wrap">
+      {list.map((p) => {
+        const Icon = paymentProvidersIconsConfig[p.icon];
+        if (!Icon) return null;
+        return (
+          <Link
+            key={p.name}
+            href={p.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={p.name}
+            className="hover:opacity-80 transition-opacity"
+          >
+            <span className="inline-block size-8">{Icon}</span>
+          </Link>
+        );
+      })}
+    </div>
+  );
+}

package/src/app/components/layout/rootLayout.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import Footer from "./footer";
+import { Header } from "./header/header";
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export default  function RootLayout({ children }: LayoutProps) {
+
+  return (
+    <div className="min-h-screen">
+      {/* Sticky Header */}
+      <div className="sticky top-0 z-[101]">
+        <Header />
+      </div>
+
+      {/* Main Content */}
+      <main className="min-h-screen">{children}</main>
+      <Footer />
+    </div>
+  );
+}

package/src/app/components/layout/siteInfo.tsx

@@ -0,0 +1,103 @@
+import Link from "next/link"
+import { fetchSiteInfo } from "@/graphql/queries/getSiteInfo"
+
+function normalizePhone(raw: string) {
+  const digits = raw.replace(/[^\d+]/g, "")
+  return digits ? `tel:${digits}` : null
+}
+
+function lines(v: string) {
+  return v.split(/\r?\n/).filter(Boolean)
+}
+
+export default async function SiteInfo() {
+  const page = await fetchSiteInfo()
+
+  const get = (k: string) =>
+    page?.metadata
+      ?.find((m) => m.key.toLowerCase() === k.toLowerCase())
+      ?.value?.trim() || ""
+
+  const address = get("Address")
+  const email = get("Email")
+  const phone = get("Phone")
+  const timings = get("Timings")
+
+  const allEmpty = [address, email, phone, timings].every((v) => !v)
+  if (allEmpty) return null
+
+  return (
+    <div className="flex flex-col w-full gap-3">
+      <span
+        style={{ color: "var(--color-primary-600)" }}
+        className="font-bold text-base text-center md:text-left lg:text-right"
+      >
+        SITE INFO
+      </span>
+      <div className="flex flex-col gap-2">
+        {address && (
+          <div
+            className="text-base text-center md:text-left lg:text-right"
+            style={{ color: "var(--color-secondary-100)" }}
+          >
+            {lines(address).map((l, i) => (
+              <div key={i}>{l}</div>
+            ))}
+          </div>
+        )}
+
+        {email && (
+          <Link
+            prefetch={false}
+            href={`mailto:${email}`}
+            className="text-base hover:opacity-80 transition-opacity text-center md:text-left lg:text-right"
+            style={{ color: "var(--color-secondary-100)" }}
+          >
+            {email}
+          </Link>
+        )}
+
+        {phone && (
+          <div
+            className="text-base text-center md:text-left lg:text-right"
+            style={{ color: "var(--color-secondary-100)" }}
+          >
+            {(() => {
+              const phLines = lines(phone)
+              const last = phLines[phLines.length - 1]
+              const telHref = normalizePhone(last || phone)
+              return (
+                <>
+                  {phLines.slice(0, -1).map((l, i) => (
+                    <div key={i}>{l}</div>
+                  ))}
+                  {last && telHref ? (
+                    <Link
+                      prefetch={false}
+                      href={telHref}
+                      className="hover:opacity-80 transition-opacity"
+                      style={{ color: "var(--color-secondary-100)" }}
+                    >
+                      {last}
+                    </Link>
+                  ) : (
+                    last && <div>{last}</div>
+                  )}
+                </>
+              )
+            })()}
+          </div>
+        )}
+
+        {timings && (
+          <div
+            className="text-base text-center md:text-left lg:text-right"
+            style={{ color: "var(--color-secondary-100)" }}
+          >
+            {timings}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/app/components/layout/socialLinks.tsx

@@ -0,0 +1,65 @@
+import Link from "next/link"
+import { fetchSocialLinks, SocialKey } from "@/graphql/queries/getSocialLinks"
+import { socialIconsConfig } from "@/app/utils/constant"
+
+export type SocialIconKey = keyof typeof socialIconsConfig
+
+const apiKeyToIconKey: Partial<Record<SocialKey, SocialIconKey>> = {
+  facebook: "FB",
+  instagram: "IG",
+  twitter: "X",
+  youtube: "YT",
+}
+
+export default async function SocialLinks({
+  fallback,
+}: {
+  fallback?: { name: string; href: string; icon: SocialIconKey }[]
+}) {
+  const page = await fetchSocialLinks()
+
+  let items: { name: string; href: string; icon: SocialIconKey }[] | null = null
+
+  if (page?.metadata?.length) {
+    items = page.metadata
+      .map((m) => {
+        const icon = apiKeyToIconKey[m.key as SocialKey]
+        if (!icon || !(icon in socialIconsConfig)) return null
+        const friendlyName: Record<SocialIconKey, string> = {
+          X: "X",
+          IG: "Instagram",
+          FB: "Facebook",
+          YT: "YouTube",
+        }
+        const href = (m.value || "").trim()
+        if (!href) return null
+        return { name: friendlyName[icon], href, icon }
+      })
+      .filter(Boolean) as { name: string; href: string; icon: SocialIconKey }[]
+  }
+
+  const list = items && items.length > 0 ? items : fallback || []
+  if (!list.length) return null
+
+  return (
+    <div className="flex items-center justify-center lg:justify-start gap-4">
+      {list.map((s) => {
+        const Icon = socialIconsConfig[s.icon]
+        if (!Icon) return null
+        return (
+          <Link
+            key={s.name}
+            href={s.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-gray-400 transition-colors"
+            aria-label={s.name}
+            style={{ color: "var(--color-secondary-50)" }}
+          >
+            <span className="inline-block h-6 w-6">{Icon}</span>
+          </Link>
+        )
+      })}
+    </div>
+  )
+}

package/src/app/components/newsletterSection/emailListSection.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { NewsletterIcon } from "@/app/utils/svgs/newsletterIcon";
+import type { NewsletterPageData } from "@/graphql/queries/getNewsletterPage";
+import React, { useState } from "react";
+import { SpinnerIcon } from "../../utils/svgs/spinnerIcon";
+import { ErrorTag } from "../reuseableUI/errorTag";
+import Input from "../reuseableUI/input";
+import PrimaryButton from "../reuseableUI/primaryButton";
+import Toast from "../reuseableUI/Toast";
+
+interface EmailListSectionProps {
+  newsletterData: NewsletterPageData | null;
+}
+
+const EmailListSection: React.FC<EmailListSectionProps> = ({
+  newsletterData,
+}) => {
+  const [email, setEmail] = useState("");
+  const [emailError, setEmailError] = useState("");
+  const [apiError, setApiError] = useState<string | null>(null);
+  const [showSuccessToast, setShowSuccessToast] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  // Default fallback content
+  const title = newsletterData?.title || "JOIN OUR EMAIL LIST";
+  const description =
+    newsletterData?.description ||
+    "Be the first to know about new products, discounts and special events!";
+
+  const validateEmail = (email: string): boolean => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+    if (emailError) {
+      setEmailError("");
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    setApiError(null);
+    setShowSuccessToast(false);
+    setEmailError("");
+
+    // Validate email
+    if (!email || !email.trim()) {
+      setEmailError("Email is required.");
+      return;
+    }
+
+    if (!validateEmail(email)) {
+      setEmailError("Please enter a valid email address.");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      // Prepare email message
+      const emailMessage: Record<string, string> = {
+        email: email,
+      };
+
+      // Prepare email recipients
+      const recipients: string[] = [];
+      if (newsletterData?.emailTo) {
+        recipients.push(
+          ...newsletterData.emailTo.split(",").map((e) => e.trim())
+        );
+      }
+
+      const ccRecipients: string[] = [];
+      if (newsletterData?.emailCc) {
+        ccRecipients.push(
+          ...newsletterData.emailCc.split(",").map((e) => e.trim())
+        );
+      }
+
+      const bccRecipients: string[] = [];
+      if (newsletterData?.emailBcc) {
+        bccRecipients.push(
+          ...newsletterData.emailBcc.split(",").map((e) => e.trim())
+        );
+      }
+
+      const response = await fetch("/api/form-submission", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          formType: "newsletter",
+          pageSlug: "newsletter-inline",
+          data: {
+            message: emailMessage,
+            to: recipients,
+            cc: ccRecipients,
+            bcc: bccRecipients,
+            subject: newsletterData?.emailSubject || "Newsletter Signup",
+          },
+          metadata: {},
+          timestamp: new Date().toISOString(),
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to send email");
+      }
+
+      setShowSuccessToast(true);
+      setEmail("");
+    } catch (err) {
+      console.error("Newsletter signup error:", err);
+      setApiError("Failed to subscribe. Please try again later.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      {/* Success Toast */}
+      {showSuccessToast && (
+        <>
+          <style jsx global>{`
+            @keyframes slideInRight {
+              from {
+                transform: translateX(100%);
+                opacity: 0;
+              }
+              to {
+                transform: translateX(0);
+                opacity: 1;
+              }
+            }
+            .animate-slide-in {
+              animation: slideInRight 0.3s ease-out;
+            }
+          `}</style>
+          <div className="fixed top-4 right-4 z-50 animate-slide-in">
+            <Toast
+              message="Successfully Subscribed!"
+              subParagraph={
+                newsletterData?.successMessage
+                  ? newsletterData.successMessage.replace(/<[^>]*>/g, "")
+                  : "Thank you for subscribing to our newsletter!"
+              }
+              type="success"
+              duration={5000}
+              onClose={() => setShowSuccessToast(false)}
+            />
+          </div>
+        </>
+      )}
+
+      <div className="bg-[#222325] w-full h-full flex flex-col lg:flex-row gap-4 items-center justify-center py-6 text-center px-4">
+        <div className="max-w-[470px] flex items-center gap-4">
+          <div className="space-y-1 hidden lg:block">
+            <span>{NewsletterIcon}</span>
+          </div>
+          <div className="flex flex-col">
+            <p className="text-xl font-secondary uppercase font-normal text-white">
+              {title}
+            </p>
+            <span className="text-zinc-400 font-secondary text-base uppercase break-words">
+              {description}
+            </span>
+          </div>
+        </div>
+        <form onSubmit={handleSubmit} className="w-full max-w-xl">
+          <div className="flex flex-col items-center gap-2">
+            <div className="flex items-center gap-1 w-full">
+              <Input
+                parentClassName="w-full"
+                name="email"
+                type="email"
+                placeholder="Enter your email"
+                value={email}
+                onChange={handleChange}
+                className="px-4 py-1.5 w-full h-10"
+                disabled={loading}
+              />
+              <PrimaryButton
+                type="submit"
+                disabled={loading}
+                content={
+                  loading ? (
+                    <span className="flex items-center justify-center gap-2">
+                      <span className="animate-spin [&>svg]:size-5">
+                        {SpinnerIcon}
+                      </span>
+                    </span>
+                  ) : (
+                    "Subscribe"
+                  )
+                }
+                className="text-sm font-primary h-10 border-none font-normal min-w-28 capitalize"
+              />
+            </div>
+
+            {emailError && (
+              <div className="text-white text-sm w-full text-left px-1">
+                {emailError}
+              </div>
+            )}
+
+            {apiError && (
+              <div className="w-full">
+                <ErrorTag message={apiError} />
+              </div>
+            )}
+          </div>
+        </form>
+      </div>
+    </>
+  );
+};
+
+export default EmailListSection;

package/src/app/components/newsletterSection/emailSectionServer.tsx

@@ -0,0 +1,8 @@
+import { fetchNewsletterPage } from "@/graphql/queries/getNewsletterPage";
+import EmailListSection from "./emailListSection";
+
+export default async function EmailSectionServer() {
+  const newsletterData = await fetchNewsletterPage();
+
+  return <EmailListSection newsletterData={newsletterData} />;
+}

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

@@ -0,0 +1,12 @@
+'use client';
+
+import { ApolloProvider } from "@apollo/client";
+import client from "@/graphql/client";
+
+export default function ApolloWrapper({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <ApolloProvider client={client}>{children}</ApolloProvider>;
+}