@alphasquad/saleor-template-advance 0.1.0

package/src/app/account/page.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import { getStoreName } from "@/app/utils/branding";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: `My Account - ${getStoreName()}`,
+  description: "Manage your account, view order history, update addresses, and track shipments. Your shopping dashboard.",
+  robots: { index: false, follow: false },
+}
+
+export default function AccountIndexPage() {
+  return (
+    <main className="container mx-auto px-4 md:px-6 py-12">
+      <h1 className="text-2xl md:text-3xl font-primary text-[var(--color-secondary-800)]">
+        My Account
+      </h1>
+      <p className="mt-2 text-[var(--color-secondary-600)]">
+        Choose a section:
+      </p>
+      <ul className="mt-6 space-y-2">
+        <li>
+          <Link className="underline" href="/account/settings">
+            Profile Settings
+          </Link>
+        </li>
+        <li>
+          <Link className="underline" href="/account/orders">
+            Order History
+          </Link>
+        </li>
+        <li>
+          <Link className="underline" href="/account/address">
+            Address Book
+          </Link>
+        </li>
+      </ul>
+    </main>
+  );
+}

package/src/app/account/settings/components/editProfileSuccessModal.tsx

@@ -0,0 +1,28 @@
+import CommonButton from '@/app/components/reuseableUI/commonButton';
+import ModalLayout from '@/app/components/reuseableUI/modalLayout'
+import React from 'react'
+
+const EditProfileSuccessModal = ({ isModalOpen, onClose }: { isModalOpen: boolean; onClose: () => void }) => {
+    return (
+        <ModalLayout isModalOpen={isModalOpen} onClose={onClose} className='max-w-[758px] space-y-5' removeCrossIcon>
+            <div className="w-full text-center space-y-1">
+                <p className='text-xl font-semibold font-secondary text-[var(--color-secondary-800)]'>
+                    PROFILE UPDATED
+                </p>
+                <p className='text-sm font-secondary text-[var(--color-secondary-600)]'>
+                    Your profile has been updated successfully.
+                </p>
+            </div>
+            <CommonButton
+                type='button'
+                variant='secondary'
+                onClick={onClose}
+                className='w-full'
+            >
+                Close
+            </CommonButton>
+        </ModalLayout>
+    )
+}
+
+export default EditProfileSuccessModal

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

@@ -0,0 +1,15 @@
+import type { Metadata } from "next"
+import { getStoreName } from "@/app/utils/branding"
+
+export const metadata: Metadata = {
+  title: `Account Settings - ${getStoreName()}`,
+  description: "Update your profile information, change password, and manage account preferences. Keep your account secure and up to date.",
+}
+
+export default function AccountSettingsLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+}

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

@@ -0,0 +1,260 @@
+'use client';
+
+import CommonButton from '@/app/components/reuseableUI/commonButton';
+import EmptyState from '@/app/components/reuseableUI/emptyState';
+import Input from '@/app/components/reuseableUI/input';
+import LoadingUI from '@/app/components/reuseableUI/loadingUI';
+import { PasswordRules } from '@/app/components/reuseableUI/passwordRules/passwordRules';
+import { PencilIcon } from '@/app/utils/svgs/pencilIcon';
+import { CHANGE_PASSWORD, type ChangePasswordData, type ChangePasswordVars } from '@/graphql/mutations/changePassword';
+import { UPDATE_PROFILE, type UpdateProfileData, type UpdateProfileVars } from '@/graphql/mutations/updateProfile';
+import { GET_MY_PROFILE, type GetMyProfileData } from '@/graphql/queries/getMyProfile';
+import { useMutation, useQuery } from '@apollo/client';
+import { useEffect, useState } from 'react';
+import EditProfileSuccessModal from './components/editProfileSuccessModal';
+
+interface ProfileData {
+  firstName: string;
+  lastName: string;
+  email: string;
+}
+
+interface PasswordData {
+  currentPassword: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+
+export default function AccountSettingsPage() {
+  // Load profile
+  const { data, loading, error, refetch } = useQuery<GetMyProfileData>(GET_MY_PROFILE, {
+    fetchPolicy: 'no-cache',
+  });
+  const [isEditing, setIsEditing] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  // Form data states
+  const [profileData, setProfileData] = useState<ProfileData>({
+    firstName: '',
+    lastName: '',
+    email: '',
+  });
+
+  useEffect(() => {
+    if (data?.me) {
+      setProfileData({
+        firstName: data.me.firstName || '',
+        lastName: data.me.lastName || '',
+        email: data.me.email,
+      });
+    }
+  }, [data]);
+
+  const [passwordData, setPasswordData] = useState<PasswordData>({
+    currentPassword: '',
+    newPassword: '',
+    confirmPassword: '',
+  });
+
+  const [updateProfile, { loading: updatingProfile }] = useMutation<UpdateProfileData, UpdateProfileVars>(UPDATE_PROFILE);
+  const [changePassword, { loading: changingPassword }] = useMutation<ChangePasswordData, ChangePasswordVars>(CHANGE_PASSWORD);
+
+  const handleProfileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    let filteredValue = value;
+    if (name === "firstName" || name === "lastName") {
+      filteredValue = value.replace(/[^A-Za-z ]/g, "");
+    } 
+    setProfileData({
+      ...profileData,
+      [name]: filteredValue,
+    });
+  };
+
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setPasswordData({
+      ...passwordData,
+      [name]: value,
+    });
+  };
+
+  const editProfileSubmitHandler = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const res = await updateProfile({ variables: { firstName: profileData.firstName, lastName: profileData.lastName } });
+      const errs = res.data?.accountUpdate?.errors || [];
+      if (errs.length) {
+        setErrorMessage(errs.map(e => e.message).filter(Boolean).join('\n'));
+        setTimeout(() => setErrorMessage(''), 3000);
+        return;
+      }
+    } catch (err) {
+      console.error('UpdateProfile error', err);
+      setErrorMessage('Failed to update profile.');
+      setTimeout(() => setErrorMessage(''), 3000);
+      return;
+    }
+    if (passwordData.currentPassword || passwordData.newPassword || passwordData.confirmPassword) {
+      if (passwordData.newPassword !== passwordData.confirmPassword) {
+        setErrorMessage('New passwords do not match!');
+        setTimeout(() => setErrorMessage(''), 3000);
+        return;
+      }
+      try {
+        const res2 = await changePassword({ variables: { oldPassword: passwordData.currentPassword, newPassword: passwordData.newPassword } });
+        const payload = res2.data?.passwordChange;
+        const errs2 = payload?.errors || [];
+        if (errs2.length) {
+          setErrorMessage(errs2.map(e => e.message).filter(Boolean).join('\n'));
+          setTimeout(() => setErrorMessage(''), 3000);
+          return;
+        }
+        // Password changed successfully
+        setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
+      } catch (err) {
+        console.error('ChangePassword error', err);
+        setErrorMessage('Failed to change password.');
+        setTimeout(() => setErrorMessage(''), 3000);
+        return;
+      }
+    }
+
+    await refetch();
+    setIsModalOpen(true);
+    setIsEditing(false);
+    setTimeout(() => setIsModalOpen(false), 3000);
+  }
+  return (
+    <>
+      <div>
+        {loading ? (
+          <LoadingUI />
+        ) : error ? (
+          <EmptyState className="h-[50vh]" text="Failed to load profile." />
+        ) : (
+          <form
+            onSubmit={editProfileSubmitHandler}
+            className="max-w-4xl space-y-6 lg:space-y-10"
+          >
+            <div>
+              <div className='flex items-center justify-between w-full mb-4 lg:mb-0'>
+                <h3 className="text-lg lg:text-xl text-[var(--color-secondary-800)] font-semibold lg:mb-4 uppercase">Personal Information</h3>
+                {
+                  !isEditing &&
+                  <CommonButton type='button' variant='tertiary' className="p-0 text-sm flex items-center gap-2" onClick={() => setIsEditing(true)}>
+                    <span className='[&>svg]:size-5 text-[var(--color-primary-600)]'>
+                      {PencilIcon}
+                    </span>
+                    EDIT PROFILE
+                  </CommonButton>
+                }
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                <Input
+                  label="First Name"
+                  type="text"
+                  name="firstName"
+                  value={profileData.firstName}
+                  onChange={handleProfileChange}
+                  disabled={!isEditing}
+                />
+                <Input
+                  label="Last Name"
+                  type="text"
+                  name="lastName"
+                  value={profileData.lastName}
+                  onChange={handleProfileChange}
+                  disabled={!isEditing}
+                />
+              </div>
+              <div className="mb-2">
+                <Input
+                  label="Email"
+                  type="email"
+                  name="email"
+                  value={profileData.email}
+                  readOnly
+                  disabled
+                />
+              </div>
+            </div>
+
+            <div className='space-y-5'>
+              <h3 className="text-lg lg:text-xl text-[var(--color-secondary-800)] font-semibold mb-4">Password</h3>
+              <Input
+                label="Current Password"
+                placeholder='********'
+                type="password"
+                name="currentPassword"
+                value={passwordData.currentPassword}
+                onChange={handlePasswordChange}
+                disabled={!isEditing}
+              />
+              {
+                isEditing &&
+                <>
+                  <div className="mb-4 w-full">
+                    <Input
+                      label="New Password"
+                      placeholder='********'
+                      type="password"
+                      name="newPassword"
+                      value={passwordData.newPassword}
+                      onChange={handlePasswordChange}
+                    />
+
+                    <div className="mt-2 text-xs space-y-1 [&>div]:flex [&>div]:items-center [&>div]:gap-1">
+                      <PasswordRules value={passwordData.newPassword} />
+                    </div>
+                  </div>
+                  <Input
+                    label="Re-enter New Password"
+                    type="password"
+                    name="confirmPassword"
+                    placeholder='********'
+                    value={passwordData.confirmPassword}
+                    onChange={handlePasswordChange}
+                  />
+                </>
+              }
+              {errorMessage && <p className="text-red-600 text-sm font-secondary">{errorMessage}</p>}
+            </div>
+            {
+              isEditing &&
+              <div className="flex gap-3">
+                <CommonButton
+                  type='button'
+                  className='min-w-24 text-sm lg:text-base px-4 py-3'
+                  variant='secondary'
+                  onClick={() => {
+                    setIsEditing(false);
+                    if (data?.me) {
+                      setProfileData({
+                        firstName: data.me.firstName || '',
+                        lastName: data.me.lastName || '',
+                        email: data.me.email,
+                      });
+                    }
+                    setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
+                  }}
+                >
+                  Cancel
+                </CommonButton>
+                <CommonButton
+                  className='min-w-24 text-sm lg:text-base px-4 py-3'
+                  variant='primary'
+                  type="submit"
+                  disabled={updatingProfile || changingPassword}
+                >
+                  {(updatingProfile || changingPassword) ? 'Updating...' : 'Save'}
+                </CommonButton>
+              </div>
+            }
+          </form>
+        )}
+      </div>
+        <EditProfileSuccessModal isModalOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
+    </>
+  );
+}

package/src/app/api/affirm/check-status/route.ts

@@ -0,0 +1,94 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const GET_TRANSACTION = `
+  query GetTransaction($id: ID!) {
+    transaction(id: $id) {
+      id
+      order {
+        id
+        number
+        total {
+          gross {
+            amount
+            currency
+          }
+        }
+      }
+      events {
+        type
+        createdAt
+      }
+    }
+  }
+`;
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { checkoutId, transactionId } = body;
+
+    if (!checkoutId) {
+      return NextResponse.json(
+        { error: "Missing checkoutId" },
+        { status: 400 }
+      );
+    }
+
+    // Get Saleor API URL
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+    if (!apiUrl) {
+      throw new Error("NEXT_PUBLIC_API_URL is not configured");
+    }
+
+    // Get auth token from request cookies
+    const token = request.cookies.get("token")?.value;
+
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+    };
+
+    if (token) {
+      headers["Authorization"] = `Bearer ${token}`;
+    }
+
+    // Check transaction status in Saleor
+    const response = await fetch(apiUrl, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({
+        query: GET_TRANSACTION,
+        variables: {
+          id: transactionId || checkoutId,
+        },
+      }),
+    });
+
+    if (!response.ok) {
+      return NextResponse.json({ completed: false });
+    }
+
+    const result = await response.json();
+    const transaction = result.data?.transaction;
+    const order = transaction?.order;
+
+    // Check if order exists (payment completed)
+    if (order) {
+      return NextResponse.json({
+        completed: true,
+        order: {
+          id: order.id,
+          number: order.number,
+          total: order.total.gross.amount,
+          currency: order.total.gross.currency,
+        },
+      });
+    }
+
+    // Payment not completed yet
+    return NextResponse.json({ completed: false });
+
+  } catch (error) {
+    console.error("❌ Error in check-status API:", error);
+    return NextResponse.json({ completed: false });
+  }
+}

package/src/app/api/affirm/create-checkout/route.ts

@@ -0,0 +1,109 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { checkoutId, amount, currency } = body;
+
+    if (!checkoutId || !amount || !currency) {
+      return NextResponse.json({ error: "Missing required parameters" }, { status: 400 });
+    }
+
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+    if (!apiUrl) {
+      return NextResponse.json({ error: "Saleor API URL not configured" }, { status: 500 });
+    }
+
+    const token = request.cookies.get("token")?.value;
+
+    const TRANSACTION_INITIALIZE = `
+      mutation TransactionInitialize(
+        $id: ID!
+        $amount: PositiveDecimal!
+        $paymentGateway: PaymentGatewayToInitialize!
+      ) {
+        transactionInitialize(
+          id: $id
+          amount: $amount
+          paymentGateway: $paymentGateway
+        ) {
+          transaction {
+            id
+            actions
+          }
+          transactionEvent {
+            pspReference
+            amount {
+              amount
+              currency
+            }
+            type
+          }
+          data
+          errors {
+            field
+            message
+            code
+          }
+        }
+      }
+    `;
+
+    const headers: HeadersInit = { "Content-Type": "application/json" };
+    if (token) headers["Authorization"] = `Bearer ${token}`;
+
+    const response = await fetch(apiUrl, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({
+        query: TRANSACTION_INITIALIZE,
+        variables: {
+          id: checkoutId,
+          amount: amount.toString(),
+          paymentGateway: {
+            id: "saleor.app.affirm",
+            data: null,
+          },
+        },
+      }),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      console.error("Saleor API request failed:", response.status, data);
+      return NextResponse.json({ error: "Failed to initialize transaction" }, { status: response.status });
+    }
+
+    if (data.errors) {
+      console.error("GraphQL errors:", data.errors);
+      return NextResponse.json({ error: "GraphQL error", details: data.errors }, { status: 400 });
+    }
+
+    const result = data.data?.transactionInitialize;
+    
+    if (result?.errors && result.errors.length > 0) {
+      console.error("Transaction initialization errors:", result.errors);
+      return NextResponse.json({ error: "Transaction initialization failed", details: result.errors }, { status: 400 });
+    }
+
+    const transactionData = result?.data;
+    
+    if (!transactionData?.checkout_token) {
+      console.error("No checkout token in response:", transactionData);
+      return NextResponse.json({ error: "No checkout token received" }, { status: 500 });
+    }
+
+    return NextResponse.json({
+      checkoutToken: transactionData.checkout_token,
+      checkoutUrl: transactionData.checkout_url,
+      transactionId: result.transaction?.id,
+      publicApiKey: transactionData.public_api_key,
+      scriptUrl: transactionData.script_url,
+      environment: transactionData.environment,
+    });
+  } catch (error) {
+    console.error("Error creating Affirm checkout:", error);
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+  }
+}

package/src/app/api/affirm/get-config/route.ts

@@ -0,0 +1,108 @@
+import { NextRequest, NextResponse } from "next/server";
+
+interface AffirmData {
+  publicApiKey: string;
+  environment: string;
+  scriptUrl: string;
+}
+
+interface GatewayConfig {
+  id: string;
+  data: AffirmData | null;
+  errors: Array<{ field: string | null; message: string; code: string }>;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { checkoutId, amount } = body;
+
+    if (!checkoutId) {
+      return NextResponse.json({ error: "Missing checkoutId parameter" }, { status: 400 });
+    }
+
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+    if (!apiUrl) {
+      return NextResponse.json({ error: "Saleor API URL not configured" }, { status: 500 });
+    }
+
+    const token = request.cookies.get("token")?.value;
+
+    const PAYMENT_GATEWAY_INITIALIZE = `
+      mutation PaymentGatewayInitialize(
+        $checkoutId: ID!
+        $amount: PositiveDecimal!
+        $paymentGateways: [PaymentGatewayToInitialize!]!
+      ) {
+        paymentGatewayInitialize(
+          id: $checkoutId
+          amount: $amount
+          paymentGateways: $paymentGateways
+        ) {
+          gatewayConfigs {
+            id
+            data
+            errors {
+              field
+              message
+              code
+            }
+          }
+          errors {
+            field
+            message
+            code
+          }
+        }
+      }
+    `;
+
+    const headers: HeadersInit = { "Content-Type": "application/json" };
+    if (token) headers["Authorization"] = `Bearer ${token}`;
+
+    const response = await fetch(apiUrl, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({
+        query: PAYMENT_GATEWAY_INITIALIZE,
+        variables: {
+          checkoutId,
+          amount: amount.toString(),
+          paymentGateways: [{ id: "saleor.app.affirm" }],
+        },
+      }),
+    });
+
+    if (!response.ok) {
+      return NextResponse.json({ error: "Failed to fetch payment gateway configuration" }, { status: response.status });
+    }
+    
+    const data = await response.json();
+
+    if (data.errors) {
+      return NextResponse.json({ error: "GraphQL error", details: data.errors }, { status: 400 });
+    }
+
+    const gatewayConfigs = data.data?.paymentGatewayInitialize?.gatewayConfigs;
+    const affirmConfig = gatewayConfigs?.find((config: GatewayConfig) => config.id === "saleor.app.affirm");
+
+    if (!affirmConfig || !affirmConfig.data) {
+      return NextResponse.json({ error: "Affirm payment gateway not available" }, { status: 404 });
+    }
+
+    if (affirmConfig.errors && affirmConfig.errors.length > 0) {
+      return NextResponse.json({ error: "Affirm configuration error", details: affirmConfig.errors }, { status: 400 });
+    }
+
+    const affirmData = affirmConfig.data;
+
+    return NextResponse.json({
+      publicApiKey: affirmData.publicApiKey,
+      environment: affirmData.environment,
+      scriptUrl: affirmData.scriptUrl,
+    });
+  } catch (error) {
+    console.error("Error fetching Affirm config:", error);
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+  }
+}