@alphasquad/saleor-template-advance 0.1.0

package/src/app/(auth)/account/reset-password/page.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import { Suspense, useState } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import { useMutation } from "@apollo/client";
+import {
+  SET_PASSWORD_MUTATION,
+  type SetPasswordData,
+  type SetPasswordVariables,
+} from "@/graphql/mutations/setPassword";
+import { useGlobalStore } from "@/store/useGlobalStore";
+import Input from "@/app/components/reuseableUI/input";
+import PrimaryButton from "@/app/components/reuseableUI/primaryButton";
+import { SpinnerIcon } from "@/app/utils/svgs/spinnerIcon";
+import { PasswordRules } from "@/app/components/reuseableUI/passwordRules/passwordRules";
+import { ErrorTag } from "@/app/components/reuseableUI/errorTag";
+
+function ResetPasswordInner() {
+  const searchParams = useSearchParams();
+  const prefilledEmail = searchParams.get("email") || "";
+  const prefilledToken = searchParams.get("token") || "";
+
+  const [formData, setFormData] = useState({
+    password: "",
+    confirmPassword: "",
+  });
+  const [apiError, setApiError] = useState<string | null>(null);
+  const [fieldErrors, setFieldErrors] = useState({
+    password: "",
+    confirmPassword: "",
+  });
+  const [message, setMessage] = useState<string | null>(null);
+  const [setPassword, { loading }] = useMutation<
+    SetPasswordData,
+    SetPasswordVariables
+  >(SET_PASSWORD_MUTATION);
+  const [email] = useState<string>(prefilledEmail);
+  const [token] = useState<string>(prefilledToken);
+  const router = useRouter();
+  const { login } = useGlobalStore();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setApiError(null);
+    setMessage(null);
+    setFieldErrors({ password: "", confirmPassword: "" });
+
+    const passwordRegex = {
+      length: /^.{8,}$/,
+      uppercase: /[A-Z]/,
+      lowercase: /[a-z]/,
+      number: /[0-9]/,
+      specialChar: /[^A-Za-z0-9]/,
+    };
+    const errors = { password: "", confirmPassword: "" };
+    let hasError = false;
+
+    if (
+      !passwordRegex.length.test(formData.password) ||
+      !passwordRegex.uppercase.test(formData.password) ||
+      !passwordRegex.lowercase.test(formData.password) ||
+      !passwordRegex.number.test(formData.password) ||
+      !passwordRegex.specialChar.test(formData.password)
+    ) {
+      errors.password = "Password Validation Failed";
+      hasError = true;
+    }
+
+    if (formData.password !== formData.confirmPassword) {
+      errors.confirmPassword = "Passwords do not match.";
+      hasError = true;
+    }
+
+    // if (!email || !token) {
+    //   setFieldErrors({ email: 'Invalid or missing reset link. Please request a new one.', token: '' });
+    //   return;
+    // }
+
+    if (hasError) {
+      setFieldErrors(errors);
+      return;
+    }
+
+    try {
+      const { data } = await setPassword({
+        variables: {
+          email,
+          token,
+          password: formData.password,
+        },
+      });
+
+      const result = data?.setPassword;
+      const errs = result?.errors || [];
+      if (!result || errs.length) {
+        setApiError(errs[0]?.message || "Unable to reset password.");
+        return;
+      }
+
+      // Save tokens (auto-login after reset if provided)
+      if (result.token) localStorage.setItem("token", result.token);
+      if (result.refreshToken)
+        localStorage.setItem("refreshToken", result.refreshToken);
+      try {
+        await fetch("/api/auth/set", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            token: result.token,
+            refreshToken: result.refreshToken,
+          }),
+        });
+      } catch {}
+
+      if (result.user) {
+        const { id, email: uEmail, firstName, lastName } = result.user;
+        const displayName =
+          [firstName, lastName].filter(Boolean).join(" ") || uEmail;
+        login({ id, email: uEmail, name: displayName });
+      }
+
+      setMessage("Password has been reset successfully. Redirecting...");
+      // Redirect to account or login based on whether token exists
+      setTimeout(() => {
+        if (result.token) router.push("/account");
+        else router.push("/account/login");
+      }, 1000);
+    } catch (err) {
+      console.error("Set password error", err);
+      setApiError("Unable to reset password. Please try again.");
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen w-full px-4 md:px-6 py-12 md:py-16 lg:py-24px-4 sm:px-6">
+      <div className="flex w-full max-w-[756px] flex-col justify-center items-start gap-6">
+        <div className="flex flex-col items-start gap-1 md:gap-2 self-stretch">
+          <p
+            style={{ color: "var(--color-secondary-800)" }}
+            className="text-lg md:text-xl font-semibold tracking-[-0.05px] uppercase"
+          >
+            Reset Password
+          </p>
+          <p className="text-sm leading-5 tracking-[-0.035px]">
+            Please choose a new password for your account.
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="w-full flex flex-col gap-6">
+          {message && (
+            <div
+              style={{ color: "var(--color-secondary-800)" }}
+              className="mb-4 text-sm"
+              role="status"
+            >
+              {message}
+            </div>
+          )}
+          <div className="w-full">
+            <Input
+              label="NEW PASSWORD"
+              type="password"
+              name="password"
+              placeholder="Aero@1234"
+              value={formData.password}
+              hasError={!!fieldErrors.password}
+              onChange={handleChange}
+              className="mt-1.5 py-3 px-4 text-sm leading-5 tracking-[-0.035px]"
+            />
+            <PasswordRules value={formData.password} />
+          </div>
+          <div className="w-full relative">
+            <Input
+              label="RE-ENTER NEW PASSWORD"
+              type="password"
+              name="confirmPassword"
+              placeholder="*******"
+              value={formData.confirmPassword}
+              onChange={handleChange}
+              className="mt-1.5 py-3 px-4 text-sm leading-5 tracking-[-0.035px]"
+              hasError={!!fieldErrors.confirmPassword}
+              errorMessage={fieldErrors.confirmPassword}
+            />
+          </div>
+          {apiError && <ErrorTag message={apiError} />}
+
+          <PrimaryButton
+            type="submit"
+            disabled={loading}
+            content={
+              loading ? (
+                <span className="flex items-center justify-center w-full">
+                  {SpinnerIcon}
+                </span>
+              ) : (
+                "Reset Password"
+              )
+            }
+            className="w-full text-sm lg:text-base font-semibold tracking-[-0.04px] py-2 md:py-3 px-4 "
+          />
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense
+      fallback={<div className="max-w-7xl mx-auto px-4 py-8">Loading...</div>}
+    >
+      <ResetPasswordInner />
+    </Suspense>
+  );
+}

package/src/app/[slug]/page.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import DynamicPageRenderer from "../components/dynamicPage/DynamicPageRenderer";
+import { fetchDynamicPageBySlug } from "@/graphql/queries/getDynamicPageBySlug";
+import { getStoreName } from "@/app/utils/branding";
+
+export const dynamic = "force-dynamic";
+export const dynamicParams = true;
+export const revalidate = 300;
+
+interface PageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateMetadata({
+  params,
+}: PageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const page = await fetchDynamicPageBySlug(slug);
+
+  if (!page) {
+    return {
+      title: `Page Not Found - ${getStoreName()}`,
+      robots: { index: false, follow: false },
+    };
+  }
+
+  return {
+    title: page.seoTitle || `${page.title} - ${getStoreName()}`,
+    description: page.seoDescription || page.excerpt || undefined,
+    alternates: {
+      canonical: `/${encodeURIComponent(slug)}`,
+    },
+  };
+}
+
+export default async function DynamicPage({ params }: PageProps) {
+  const { slug } = await params;
+  const page = await fetchDynamicPageBySlug(slug);
+  if (!page) notFound();
+  return <DynamicPageRenderer pageData={page} />;
+}

package/src/app/about/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/about/page.tsx

@@ -0,0 +1,61 @@
+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: `About Us - ${getStoreName()}`,
+  description:
+    "Learn about our mission, values, and commitment to providing high-quality products and exceptional customer service.",
+  alternates: {
+    canonical: "/about",
+  },
+  openGraph: {
+    title: `About Us - ${getStoreName()}`,
+    description:
+      "Learn about our mission, values, and commitment to providing high-quality products and exceptional customer service.",
+    type: "website",
+    url: "/about",
+    images: [{ url: "/Logo.png" }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `About Us - ${getStoreName()}`,
+    description:
+      "Learn about our mission, values, and commitment to providing high-quality products and exceptional customer service.",
+    images: ["/Logo.png"],
+  },
+};
+
+export default function AboutUsPage() {
+  const pageTitle = "About Us";
+
+  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: "About Us", link: "/about" },
+              ]}
+            />
+            <Heading as="h1" content={pageTitle} />
+          </div>
+
+          <section className="w-full">
+            <Suspense fallback={<ContentSkeleton />}>
+              {/* Async content fetch and render */}
+              <AncillaryContent slug="about" />
+            </Suspense>
+          </section>
+        </div>
+      </div>
+    </main>
+  );
+}

package/src/app/account/address/layout.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from "next"
+import { getStoreName } from "@/app/utils/branding"
+
+export const metadata: Metadata = {
+  title: `Address Book - ${getStoreName()}`,
+  description: "Manage your shipping and billing addresses. Add, edit, or remove addresses for faster checkout.",
+}
+
+export default function AddressLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+}

package/src/app/account/address/page.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { ME_ADDRESSES_QUERY, type MeAddressesData } from '@/graphql/queries/meAddresses';
+import { useMutation, useQuery } from '@apollo/client';
+
+import AddNewAddressModal from '@/app/checkout/components/addNewAddressModal';
+import CommonButton from '@/app/components/reuseableUI/commonButton';
+import EmptyState from '@/app/components/reuseableUI/emptyState';
+import LoadingUI from '@/app/components/reuseableUI/loadingUI';
+import { PlusIcon } from '@/app/utils/svgs/plusIcon';
+import { ACCOUNT_ADDRESS_DELETE, AccountAddressDeleteData, AccountAddressDeleteVars } from '@/graphql/mutations/accountAddressDelete';
+import { AddressForm } from '@/graphql/types/checkout';
+import { useEffect, useState } from 'react';
+export default function AddressBookPage() {
+  const { data, loading, refetch } = useQuery<MeAddressesData>(ME_ADDRESSES_QUERY, { fetchPolicy: 'cache-and-network' });
+  const [deleteAddress] = useMutation<AccountAddressDeleteData, AccountAddressDeleteVars>(ACCOUNT_ADDRESS_DELETE);
+  const me = data?.me;
+  const defaultShippingId = me?.defaultShippingAddress?.id;
+  const defaultBillingId = me?.defaultBillingAddress?.id;
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [getMethods, setGetMethods] = useState({
+    defaultShippingId: defaultShippingId || null,
+    defaultBillingId: defaultBillingId || null
+  })
+  useEffect(() => {
+    setGetMethods({
+      defaultShippingId: defaultShippingId || null,
+      defaultBillingId: defaultBillingId || null
+    })
+  }, [defaultShippingId, defaultBillingId])
+  const [formData, setFormData] = useState<AddressForm>({
+    firstName: '',
+    lastName: '',
+    phone: '',
+    companyName: '',
+    streetAddress1: '',
+    streetAddress2: '',
+    city: '',
+    postalCode: '',
+    country: 'US',
+    countryArea: '',
+  });
+  const handleEdit = (addr: NonNullable<MeAddressesData['me']>['addresses'][number]) => {
+    setEditingId(addr.id);
+    setFormData({
+      id: addr.id,
+      firstName: addr.firstName,
+      lastName: addr.lastName,
+      phone: addr.phone || '',
+      companyName: addr.companyName || '',
+      streetAddress1: addr.streetAddress1,
+      streetAddress2: addr.streetAddress2 || '',
+      city: addr.city,
+      postalCode: addr.postalCode,
+      country: addr.country.code,
+      countryArea: addr.countryArea || '',
+    });
+    setIsModalOpen(true);
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      const { data } = await deleteAddress({ variables: { id } });
+      const errs = data?.accountAddressDelete.errors || [];
+      if (errs.length) {
+        // Avoid noisy logs in templates/production.
+      } else {
+        await refetch();
+      }
+    } catch {
+      // Avoid noisy logs in templates/production.
+    }
+  };
+  const handleAddNewAddress = () => {
+    setIsModalOpen(true);
+    setEditingId(null);
+    setFormData({
+      firstName: '',
+      lastName: '',
+      phone: '',
+      companyName: '',
+      streetAddress1: '',
+      streetAddress2: '',
+      city: '',
+      postalCode: '',
+      country: 'US',
+      countryArea: '',
+    });
+  };
+  return (
+    <>
+      <div>
+        <div className='flex items-center justify-between w-full'>
+          <h2 className="text-lg lg:text-xl text-[var(--color-secondary-800)] font-secondary font-semibold">MY ADDRESSES</h2>
+          <div className="uppercase cursor-pointer flex items-center gap-2" onClick={handleAddNewAddress}>
+            <span className="size-5 text-[var(--color-primary-600)]">{PlusIcon}</span>
+            <CommonButton variant='tertiary' content="Add New Address" className="p-0 text-sm lg:text-base " />
+          </div>
+        </div>
+
+        <div className="mt-4">
+          {
+            loading ? <LoadingUI /> :
+              !loading && me?.addresses?.length === 0
+                ? <EmptyState text='No Address yet.' className='h-[50vh]' /> :
+                <div className='flex flex-col space-y-4 w-full'>
+                  {me?.addresses?.map((address) => (
+                    <div key={address.id} className=" w-full border-b border-[var(--color-secondary-200)] pb-4 flex flex-col md:flex-row gap-4 justify-between md:items-center ">
+
+                      <div>
+
+                        <div className="absolute top-4 right-4 space-x-2">
+                          {defaultShippingId === address.id && (
+                            <span className="px-2 py-1 bg-amber-100 text-amber-800 text-xs font-semibold rounded">Default Shipping</span>
+                          )}
+                          {defaultBillingId === address.id && (
+                            <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded">Default Billing</span>
+                          )}
+                        </div>
+
+                        <div className='space-y-1'>
+                          <div className='flex items-center gap-2 text-medium text-lg lg:text-xl font-secondary text-[var(--color-secondary-800)]'>
+                            {address.streetAddress1}{address.streetAddress2 ? `, ${address.streetAddress2}` : ''} {" "}
+                            {address.city}{address.countryArea ? `, ${address.countryArea}` : ''} {" "}
+                            {address.country.country}
+                          </div>
+                          {address.phone && <p className='text-medium text-lg font-secondary text-[var(--color-secondary-500)]'>{address.phone}</p>}
+                        </div>
+                        <div className="flex flex-wrap gap-3 pt-2">
+                          {defaultShippingId === address.id && (
+                            <p className="font-medium text-sm text-[var(--color-secondary-800)] font-secondary bg-[var(--color-secondary-600)]/10 px-2 py-0.5 border border-[var(--color-secondary-600)]/60 h-fit">
+                              Default Shipping Address
+                            </p>
+                          )}
+                          {defaultBillingId === address.id && (
+                            <p className="font-medium text-sm text-[var(--color-secondary-800)] font-secondary bg-[var(--color-secondary-600)]/10 px-2 py-0.5 border border-[var(--color-secondary-600)]/60 h-fit">
+                              Default Billing Address
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                      <div className='flex ml-auto items-center gap-5 [&>button]:p-0'>
+                        <CommonButton
+                          onClick={() => handleEdit(address)}
+                          className='text-sm md:text-base py-3 px-4'
+                          variant='tertiary'
+                          content="Edit"
+                        />
+                        <CommonButton
+                          onClick={() => handleDelete(address.id)}
+                          className='text-sm md:text-base py-3 px-4'
+                          variant='tertiarySecondary'
+                          content="Delete"
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+          }
+        </div>
+      </div>
+        <AddNewAddressModal isModalOpen={isModalOpen} onClose={() => setIsModalOpen(false)} formData={formData} setFormData={setFormData} editingId={editingId} getMethods={getMethods} />
+    </>
+  );
+}

package/src/app/account/head.tsx

@@ -0,0 +1,4 @@
+export default function AccountHead() {
+  return <meta name="robots" content="noindex,nofollow" />;
+}
+

package/src/app/account/layout.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useQuery } from '@apollo/client';
+import { GET_MY_PROFILE, type GetMyProfileData } from '@/graphql/queries/getMyProfile';
+import Breadcrumb from '../components/reuseableUI/breadcrumb';
+const breadcrumbItems = [
+  { text: 'HOME', link: '/' },
+  { text: 'MY ACCOUNT' },
+];
+export default function AccountLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  useQuery<GetMyProfileData>(GET_MY_PROFILE, {
+    fetchPolicy: 'no-cache',
+  });
+
+  const navigationItems = [
+    {
+      name: 'My Profile',
+      href: '/account/settings',
+    },
+    {
+      name: 'Order History',
+      href: '/account/orders',
+    },
+    {
+      name: 'Address Book',
+      href: '/account/address',
+    },
+  ];
+
+
+  return (
+    <div className="max-w-7xl mx-auto py-12 px-4 md:px-6 md:py-16 lg:py-24  space-y-8 lg:space-y-16">
+      <div className='space-y-5'>
+        <Breadcrumb items={breadcrumbItems} />
+        <h1 className="text-2xl md:text-3xl lg:text-5xl font-normal font-primary text-[var(--color-secondary-800)]">MY ACCOUNT</h1>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 lg:gap-16">
+        <div className="lg:col-span-1 flex lg:flex-col border-r border-[var(--color-secondary-200)] gap-4 md:gap-3">
+          {navigationItems.map((item) => (
+            <Link
+              key={item.name}
+              href={item.href}
+              className={`uppercase block font-bold font-secondary text-sm md:text-lg ${pathname === item.href ? 'text-[var(--color-primary)]' : 'text-[var(--color-secondary-400)] hover:text-[var(--color-primary)]'}`}
+            >
+              {item.name}
+            </Link>
+          ))}
+        </div>
+        <div className="lg:col-span-3">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/account/orders/[id]/layout.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from "next"
+import { getStoreName } from "@/app/utils/branding"
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: `Order Details - ${getStoreName()}`,
+    description: `View detailed information about your order including tracking, items ordered, and shipping information.`,
+  }
+}
+
+export default function OrderDetailLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+}