Fixed : UI related chagnes

Author: anikesh-webkul

app/(public)/layout.tsx

@@ -10,7 +10,7 @@ export default async function RootLayout({
   return (
     <main>
       <Navbar />
-      <div className="mx-auto min-h-[calc(100vh-450px)] w-full max-w-screen-2xl px-[15px] xss:px-7.5">
+      <div className="mx-auto min-h-[calc(100vh-580px)] w-full max-w-screen-2xl px-[15px] xss:px-7.5">
         {children}
       </div>
       <Footer />

app/(public)/search/page.tsx

@@ -9,6 +9,7 @@ import { getFilterAttributes, getProducts } from "@/lib/bagisto";
 import MobileFilter from "@/components/layout/search/filter/modile-filter";
 import { isArray } from "@/lib/type-guards";
 import Pagination from "@/components/elements/pagination";
+import CategoryDetail from "@/components/layout/search/category-detail.tsx";
 const ProductGridItems = dynamic(
   () => import("@/components/layout/product-grid-items"),
   {
@@ -62,6 +63,12 @@ export default async function SearchPage({
 
   return (
     <>
+      <CategoryDetail
+        categoryItem={{
+          description: `<h1>All Top Products</h1> <p>${searchValue ? searchValue : ""}</p>`,
+        }}
+      />
+
       <div className="my-10 hidden gap-4 md:flex md:items-baseline md:justify-between">
         <Suspense fallback={<FilterListSkeleton />}>
           <FilterList filterAttributes={filterAttributes} />

app/api/cart-detail/route.ts

@@ -1,19 +1,33 @@
 import { bagistoFetch } from "@/lib/bagisto";
 import { getCartQuery } from "@/lib/bagisto/queries/cart";
 import { BagistoCartOperation } from "@/lib/bagisto/types";
-import { TAGS } from "@/lib/constants";
+import { BAGISTO_SESSION, TAGS } from "@/lib/constants";
 import { isObject } from "@/lib/type-guards";
+import { generateCookieValue } from "@/lib/utils";
+import { cookies } from "next/headers";
 
 export async function GET() {
   try {
+    const store = await cookies();
+    let cartId = store.get(BAGISTO_SESSION)?.value;
+    if (!cartId) {
+      // Generate new session ID
+      cartId = generateCookieValue(40);
+      // Set cookie
+      store.set({
+        name: BAGISTO_SESSION,
+        value: cartId,
+        secure: false,
+      });
+      return Response.json({ cartDetail: null }, { status: 200 });
+    }
+
     const response = await bagistoFetch<BagistoCartOperation>({
       query: getCartQuery,
       tags: [TAGS.cart],
       cache: "no-store",
     });
-
     const res = response.body.data;
-
     // Old carts becomes `null` when you checkout.
     if (!isObject(res?.cartDetail)) {
       return Response.json({ cartDetail: null }, { status: 200 });

changelog.md

@@ -1,5 +1,38 @@
 # Change Log
 
+## [2.2.0] - 2025-09-09
+
+### Added
+
+- Added `BAGISTO_SESSION` key.
+- Added `NEXTAUTH_URL` key.
+- Added `NEXTAUTH_SECRET` key.
+- Added `REVALIDATION_DURATION` key.
+- Added `IMAGE_DOMAIN` key.
+- Added the new the query field.
+- Added the Authentication pages (Sign Up, Sign In and Forget Password).
+- Added Customer Checkout.
+- Added more banner on the home page.
+- Added the pagination and Product Attributes.
+
+
+### Removed
+
+- Removed `BAGISTO_PROTOCOL` key.
+- Removed `BAGISTO_STOREFRONT_ACCESS_TOKEN` key.
+- Removed `BAGISTO_REVALIDATION_SECRET` key.
+
+### Changed
+
+- Updated the latest changes of the UI.
+- Manged the state with Redux.
+
+### Fixed
+
+- Resolved the UI issues.
+- Improved performance.
+- Made compatible with the latest Bagisto APIs (version 2.3.0).
+
 ## [2.1.0] - 2025-02-24
 
 ### Added

components/cart/edit-item-quantity-button.tsx

@@ -25,11 +25,11 @@ function SubmitButton({
         type === "plus" ? "Increase item quantity" : "Reduce item quantity"
       }
       className={clsx(
-        "ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80",
+        "ease flex h-full cursor-pointer min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80",
         {
           "cursor-wait": pending,
           "ml-auto": type === "minus",
-        },
+        }
       )}
       type="button"
       onClick={() => handleUpdateCart(type)}

components/cart/open-cart.tsx

@@ -9,13 +9,8 @@ export default function OpenCart({
   quantity?: number | string;
 }) {
   return (
-    <div className="relative flex h-9 w-9 items-center justify-center rounded-md border border-solid border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white md:h-9 md:w-9 lg:h-11 lg:w-11">
-      <ShoppingCartIcon
-        className={clsx(
-          "h-4 transition-all ease-in-out hover:scale-110 ",
-          className
-        )}
-      />
+    <div className="relative flex h-9 w-9 items-center justify-center rounded-md border border-solid border-neutral-200 text-black dark:border-neutral-700 dark:text-white md:h-9 md:w-9 lg:h-11 lg:w-11">
+      <ShoppingCartIcon className={clsx("h-4.5 ", className)} />
 
       {quantity ? (
         <div className="absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded bg-blue-600 text-[11px] font-medium text-white">

components/checkout/cart/cart-item-accordian.tsx

@@ -3,7 +3,7 @@ import ShoppingCartIcon from "@/components/icons/shopping-cart";
 import Price from "@/components/price";
 // import { Disclosure, Transition } from "@headlessui/react";
 
-import type { Cart } from "@/lib/bagisto/types";
+import type { BagistoCart, Cart } from "@/lib/bagisto/types";
 import { DEFAULT_OPTION } from "@/lib/constants";
 import { isObject } from "@/lib/type-guards";
 import { createUrl } from "@/lib/utils";
@@ -19,7 +19,7 @@ type MerchandiseSearchParams = {
 export default function CartItemAccordion({
   cartItem,
 }: {
-  cartItem: Cart | undefined;
+  cartItem: BagistoCart;
 }) {
   return (
     <div className="mobile-heading mx-auto block w-full dark:bg-transparent lg:hidden">

components/checkout/cart/cart.tsx

@@ -10,10 +10,20 @@ import Prose from "@/components/prose";
 import { DEFAULT_OPTION } from "@/lib/constants";
 import { isObject } from "@/lib/type-guards";
 import { createUrl } from "@/lib/utils";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { BagistoCart } from "@/lib/bagisto/types";
 type MerchandiseSearchParams = {
   [key: string]: string;
 };
-export default function Cart({ cart }: { cart: any }) {
+export default function Cart({ cart }: { cart: BagistoCart }) {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isObject(cart)) {
+      router.replace("/");
+    }
+  }, []);
   return (
     <>
       <CartItemAccordion cartItem={cart} />

components/checkout/information/checkout.tsx

@@ -4,8 +4,11 @@ import { CartSkeleton } from "../product-cart-skeleton";
 import Stepper from "../stepper";
 import { useCartDetail } from "@/components/hooks/use-cart-detail";
 import { useAppSelector } from "@/store/hooks";
-import { CountryArrayDataType } from "@/lib/bagisto/types";
+import { BagistoCart, CountryArrayDataType } from "@/lib/bagisto/types";
 import CheckoutSkeleton from "../place-holder";
+import { useEffect } from "react";
+import { isObject } from "@/lib/type-guards";
+import { useRouter } from "next/navigation";
 interface CheckOutProps {
   countries: CountryArrayDataType[];
   step: string;
@@ -15,22 +18,7 @@ const CheckOut = ({ countries, step }: CheckOutProps) => {
   const { isLoading } = useCartDetail();
   const cartDetail = useAppSelector((state) => state.cartDetail);
 
-  if (isLoading) {
-    return (
-      <section className="flex flex-col-reverse items-start justify-between lg:flex-row lg:justify-between">
-        <div className="w-full px-0 py-2 sm:px-4 sm:py-4 lg:w-1/2 xl:px-16">
-          <CheckoutSkeleton />
-        </div>
-
-        <div className="h-full w-full justify-self-start border-0 border-l border-none border-black/[10%] dark:border-neutral-700 lg:w-1/2 lg:border-solid">
-          <CartSkeleton className="w-full" />
-        </div>
-      </section>
-    );
-  }
-
   const cartItems = cartDetail?.cart;
-
   const billingAddress = cartItems?.billingAddress;
   const shippingAddress = cartItems?.shippingAddress;
   const userEmail = cartItems?.customerEmail;
@@ -43,22 +31,30 @@ const CheckOut = ({ countries, step }: CheckOutProps) => {
     <>
       <section className="flex flex-col-reverse items-start justify-between lg:flex-row lg:justify-between">
         <div className="w-full px-0 py-2 sm:px-4 sm:py-4 lg:w-1/2 xl:px-16">
-          <Stepper
-            billingAddress={billingAddress}
-            countries={countries}
-            currentStep={step}
-            isGuest={isGuest}
-            selectedPayment={selectedPayment}
-            selectedShippingRate={selectedShippingRate}
-            shippingAddress={shippingAddress}
-            userEmail={userEmail}
-          />
+          {isLoading ? (
+            <CheckoutSkeleton />
+          ) : (
+            <Stepper
+              billingAddress={billingAddress}
+              countries={countries}
+              currentStep={step}
+              isGuest={isGuest}
+              selectedPayment={selectedPayment}
+              selectedShippingRate={selectedShippingRate}
+              shippingAddress={shippingAddress}
+              userEmail={userEmail}
+            />
+          )}
         </div>
 
         <div className="h-full w-full justify-self-start border-0 border-l border-none border-black/[10%] dark:border-neutral-700 lg:w-1/2 lg:border-solid">
-          <div className="max-h-auto w-full flex-initial flex-shrink-0 flex-grow-0 lg:sticky lg:top-0">
-            <Cart cart={cartItems} />
-          </div>
+          {isLoading ? (
+            <CartSkeleton className="w-full" />
+          ) : (
+            <div className="max-h-auto w-full flex-initial flex-shrink-0 flex-grow-0 lg:sticky lg:top-0">
+              <Cart cart={cartItems as BagistoCart} />
+            </div>
+          )}
         </div>
       </section>
     </>

components/customer/modal.tsx

@@ -160,7 +160,10 @@ export default function CredentialModal() {
       placement="bottom-end"
     >
       <PopoverTrigger>
-        <button aria-label="Open cart" className="cursor-pointer">
+        <button
+          aria-label="Open cart"
+          className="cursor-pointer bg-transparent"
+        >
           <OpenAuth />
         </button>
       </PopoverTrigger>