fix(saleor): Fix remaining WooCommerce references and configuration

- Fix syntax error in Checkout.ts (extra semicolon)
- Update NewHero.tsx to use Saleor types and store
- Update page.tsx to use Saleor getProducts
- Add Saleor API domain to next.config.ts images config

next.config.ts

@@ -17,6 +17,16 @@ const nextConfig: NextConfig = {
         hostname: "minio-api.nodecrew.me",
         pathname: "/**",
       },
+      {
+        protocol: "https",
+        hostname: "api.manoonoils.com",
+        pathname: "/**",
+      },
+      {
+        protocol: "https",
+        hostname: "**.saleor.cloud",
+        pathname: "/**",
+      },
     ],
   },
 };

src/app/page.tsx

@@ -1,4 +1,4 @@
-import { getProducts } from "@/lib/woocommerce";
+import { getProducts } from "@/lib/saleor";
 import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
 import AnnouncementBar from "@/components/home/AnnouncementBar";
@@ -7,6 +7,7 @@ import StatsSection from "@/components/home/StatsSection";
 import FeaturesSection from "@/components/home/FeaturesSection";
 import TestimonialsSection from "@/components/home/TestimonialsSection";
 import NewsletterSection from "@/components/home/NewsletterSection";
+import ProductCard from "@/components/product/ProductCard";
 
 export const metadata = {
   title: "ManoonOils - Premium Natural Oils for Hair & Skin",
@@ -17,15 +18,14 @@ export const metadata = {
 export default async function Homepage() {
   let products: any[] = [];
   try {
-    products = await getProducts();
+    products = await getProducts("SR");
   } catch (e) {
     // Fallback for build time when API is unavailable
     console.log('Failed to fetch products during build');
   }
-  const featuredProduct = products.find((p) => p.status === "publish");
+  
-  const publishedProducts = products
+  const featuredProduct = products[0];
-    .filter((p) => p.status === "publish")
+  const publishedProducts = products.slice(0, 4);
-    .slice(0, 4);
 
   return (
     <main className="min-h-screen bg-white">
@@ -61,7 +61,7 @@ export default async function Homepage() {
             </p>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
               {publishedProducts.map((product, index) => (
-                <ProductCard key={product.id} product={product} index={index} />
+                <ProductCard key={product.id} product={product} index={index} locale="SR" />
               ))}
             </div>
           </div>
@@ -72,6 +72,3 @@ export default async function Homepage() {
     </main>
   );
 }
-
-// Import ProductCard here to avoid circular dependency
-import ProductCard from "@/components/product/ProductCard";

src/components/home/NewHero.tsx

@@ -4,30 +4,28 @@ import { motion } from "framer-motion";
 import { Star, ShoppingBag } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
-import { useCartStore } from "@/stores/cartStore";
+import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
-import { WooProduct, formatPrice, getProductImage } from "@/lib/woocommerce";
+import type { Product } from "@/types/saleor";
+import { getProductPrice, getProductImage, formatPrice } from "@/lib/saleor";
 
 interface NewHeroProps {
-  featuredProduct?: WooProduct;
+  featuredProduct?: Product;
 }
 
 export default function NewHero({ featuredProduct }: NewHeroProps) {
-  const { addItem, openCart } = useCartStore();
+  const { addLine, openCart } = useSaleorCheckoutStore();
 
-  const handleAddToCart = () => {
+  const handleAddToCart = async () => {
-    if (featuredProduct) {
+    const variant = featuredProduct?.variants?.[0];
-      addItem({
+    if (variant?.id) {
-        id: featuredProduct.id,
+      await addLine(variant.id, 1);
-        name: featuredProduct.name,
-        price: featuredProduct.price,
-        quantity: 1,
-        image: getProductImage(featuredProduct),
-        sku: featuredProduct.sku,
-      });
       openCart();
     }
   };
 
+  const price = featuredProduct ? getProductPrice(featuredProduct) : "";
+  const image = featuredProduct ? getProductImage(featuredProduct) : "";
+
   return (
     <section className="relative h-screen min-h-[700px] flex flex-col overflow-hidden pt-10">
       {/* Background Image */}
@@ -63,7 +61,7 @@ export default function NewHero({ featuredProduct }: NewHeroProps) {
               {/* Product Image */}
               <div className="relative aspect-square bg-[#E8F4F8]">
                 <Image
-                  src={getProductImage(featuredProduct)}
+                  src={image}
                   alt={featuredProduct.name}
                   fill
                   className="object-cover"
@@ -89,7 +87,7 @@ export default function NewHero({ featuredProduct }: NewHeroProps) {
 
                 {/* Description */}
                 <p className="text-sm text-[#4A4A4A]/70 mt-1 line-clamp-2">
-                  {featuredProduct.short_description?.replace(/<[^>]*>/g, "") ||
+                  {featuredProduct.description?.replace(/<[^>]*>/g, "").slice(0, 100) ||
                     "Premium natural oil for hair and skin care"}
                 </p>
 
@@ -107,7 +105,7 @@ export default function NewHero({ featuredProduct }: NewHeroProps) {
                 <div className="flex items-center justify-between mt-4 pt-4 border-t border-[#1A1A1A]/6">
                   <div>
                     <span className="text-lg font-medium text-[#1A1A1A]">
-                      {formatPrice(featuredProduct.price)}
+                      {price}
                     </span>
                     <span className="text-xs text-[#4A4A4A]/60 ml-2">50ml</span>
                   </div>

src/lib/saleor/queries/Checkout.ts

@@ -18,4 +18,3 @@ export const GET_CHECKOUT_BY_ID = gql`
   }
   ${CHECKOUT_FRAGMENT}
 `;
-`;