@evenicanpm/storefront-core 1.0.0-alpha → 1.0.1

package/src/api-manager/services/create-mutation.ts

@@ -31,7 +31,11 @@ export const useCreateMutation = <TInput, TOutput>(
         body: JSON.stringify({ input, apiManagerPath }),
       });
       if (!response.ok) {
-        throw new Error("Mutation failed");
+        const error = await response.json();
+        let errorMsg = `${error.error}`;
+        if (error.message) errorMsg += ` - ${error.message}`;
+
+        throw new Error(errorMsg);
       }
       return response.json();
     },

package/src/api-manager/services/create-query.ts

@@ -13,6 +13,7 @@ import { Mutex } from "async-mutex";
 import { manuallyRetrieveSessionCookie } from "@/auth/next-auth-cookie-manager";
 import { getSession } from "next-auth/react";
 import jwt from "jsonwebtoken";
+import signOut from "@/auth/signout";
 
 const QUERY_ROUTE = "/api";
 const mutex = new Mutex();
@@ -79,7 +80,6 @@ export const createQuery = <TInput, TOutput>(
       queryFn,
       enabled,
     };
-
     return data;
   };
 
@@ -105,6 +105,11 @@ export const createQuery = <TInput, TOutput>(
       body: JSON.stringify({ input, apiManagerPath }),
       headers,
     });
+
+    if (result.status === 401) {
+      // If unauthenticated , sign out the user
+      signOut();
+    }
     return await result.json();
   };
 
@@ -192,6 +197,9 @@ export const createQuery = <TInput, TOutput>(
 
     const currentTime = Math.floor(Date.now() / 1000);
 
+    // Use this for testing - expires after 60 seconds (1 min) from issued-at time
+    // const isExpired = !!decoded && typeof decoded.iat === "number" && currentTime > decoded.iat + 60;
+
     const isExpired =
       !!decoded && typeof decoded.exp === "number" && decoded.exp < currentTime;
 
@@ -221,9 +229,7 @@ export const createQuery = <TInput, TOutput>(
         headers.append("should-refresh-token", "true");
       }
       // Call do fetch with the headers
-      const response = await doFetch(input, apiManagerPath, headers);
-
-      return response.json();
+      return await doFetch(input, apiManagerPath, headers);
     } catch (error) {
       // Handle API Error
       console.error("Error fetching data:", error);

package/src/api-manager/services/organization/queries/get-channel-configuration.ts

@@ -6,7 +6,7 @@ const config = {
   queryKey: "channelConfiguration",
 };
 
-const getChannelConfiguration = createQuery<null, ChannelConfiguration[]>(
+const getChannelConfiguration = createQuery<null, ChannelConfiguration>(
   apiPath,
   config,
 );

package/src/api-manager/services/product/queries/get-product-prices.ts

@@ -0,0 +1,16 @@
+import {
+  ProductPriceInput,
+  ProductPrice,
+} from "@/api-manager/schemas/product.schema";
+import { createApiPath, createQuery } from "../../create-query";
+
+const apiPath = createApiPath("product", "getProductPrices");
+
+const getProductPrices = createQuery<ProductPriceInput, ProductPrice[]>(
+  apiPath,
+  {
+    queryKey: "product-prices",
+  },
+);
+
+export default getProductPrices;

package/src/api-manager/services/product/queries/search-products.ts

@@ -5,6 +5,7 @@ import { createApiPath, createQuery } from "../../create-query";
 const apiPath = createApiPath("product", "searchProducts");
 const searchProducts = createQuery<searchProductsInput, ProductSearchResult[]>(
   apiPath,
+  { disableProperties: ["searchText"] },
 );
 
 export default searchProducts;

package/src/api-manager/services/user/mutations/add-to-wishlist.ts

@@ -0,0 +1,24 @@
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  Wishlist,
+  WishlistLinesInput,
+} from "@/api-manager/schemas/user.schema";
+import { createApiPath } from "../../create-query";
+import { useCreateMutation } from "../../create-mutation";
+import { getWishlistsQueryKey } from "../queries/get-wishlists";
+
+const apiPath = createApiPath("user", "addProductsToWishlist");
+
+const useAddToWishlist = () => {
+  const queryClient = useQueryClient();
+
+  return useCreateMutation<WishlistLinesInput, Wishlist>(apiPath, {
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: [getWishlistsQueryKey, variables.Id],
+      });
+    },
+  });
+};
+
+export default useAddToWishlist;

package/src/api-manager/services/user/mutations/copy-cart-to-wishlist.ts

@@ -0,0 +1,23 @@
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  CopyCartToWishlistInput,
+  Wishlist,
+} from "@/api-manager/schemas/user.schema";
+import { createApiPath } from "../../create-query";
+import { useCreateMutation } from "../../create-mutation";
+
+const apiPath = createApiPath("user", "copyCartToWishlist");
+
+const useCopyCartToWishlist = () => {
+  const queryClient = useQueryClient();
+
+  return useCreateMutation<CopyCartToWishlistInput, Wishlist>(apiPath, {
+    onSuccess: (_data, _variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["wishlistDetails", _variables.Id],
+      });
+    },
+  });
+};
+
+export default useCopyCartToWishlist;

package/src/api-manager/services/user/mutations/create-wishlist.ts

@@ -2,16 +2,16 @@ import { useQueryClient } from "@tanstack/react-query";
 import { createApiPath } from "../../create-query";
 import { useCreateMutation } from "../../create-mutation";
 import {
-  CreateWishListInput,
-  WishList,
-} from "../../../datasources/e4/graphqlRequestSdk";
+  Wishlist,
+  WishlistCreateInput,
+} from "@/api-manager/schemas/user.schema";
 
 const apiPath = createApiPath("user", "createWishlist");
 
 const useCreateWishlist = () => {
   const queryClient = useQueryClient();
 
-  return useCreateMutation<CreateWishListInput, WishList>(apiPath, {
+  return useCreateMutation<WishlistCreateInput, Wishlist>(apiPath, {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["wishlists"] });
     },

package/src/api-manager/services/user/mutations/delete-wishlist.ts

@@ -1,17 +1,18 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { createApiPath } from "../../create-query";
 import { useCreateMutation } from "../../create-mutation";
+import { WishlistDetailInput } from "@/api-manager/schemas/user.schema";
+import { getWishlistsQueryKey } from "../queries/get-wishlists";
 
 const apiPath = createApiPath("user", "deleteWishlist");
 
 const useDeleteWishlist = () => {
   const queryClient = useQueryClient();
 
-  return useCreateMutation<string, string>(apiPath, {
+  return useCreateMutation<WishlistDetailInput, void>(apiPath, {
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["wishlists"] });
+      queryClient.invalidateQueries({ queryKey: [getWishlistsQueryKey] });
     },
   });
 };
-
 export default useDeleteWishlist;

package/src/api-manager/services/user/mutations/remove-from-wishlist.ts

@@ -0,0 +1,21 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { WishlistLinesInput } from "@/api-manager/schemas/user.schema";
+import { createApiPath } from "../../create-query";
+import { useCreateMutation } from "../../create-mutation";
+import { getWishlistDetailsQueryKey } from "../queries/get-wishlist-details";
+
+const apiPath = createApiPath("user", "removeProductsFromWishlist");
+
+const useRemoveFromWishlist = () => {
+  const queryClient = useQueryClient();
+
+  return useCreateMutation<WishlistLinesInput, void>(apiPath, {
+    onSuccess: (_data, _variables) => {
+      queryClient.invalidateQueries({
+        queryKey: [getWishlistDetailsQueryKey, { Id: _variables.Id }],
+      });
+    },
+  });
+};
+
+export default useRemoveFromWishlist;

package/src/api-manager/services/user/mutations/update-wishlist.ts

@@ -0,0 +1,23 @@
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  Wishlist,
+  WishlistLinesInput,
+} from "@/api-manager/schemas/user.schema";
+import { useCreateMutation } from "../../create-mutation";
+import { createApiPath } from "../../create-query";
+
+const apiPath = createApiPath("user", "updateWishlist");
+
+const useUpdateWishlist = () => {
+  const queryClient = useQueryClient();
+
+  return useCreateMutation<WishlistLinesInput, Wishlist>(apiPath, {
+    onSuccess: (_data, _variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["wishlistDetails", _variables.Id],
+      });
+    },
+  });
+};
+
+export default useUpdateWishlist;

package/src/api-manager/services/user/queries/get-wishlist-details.ts

@@ -1,10 +1,17 @@
+import {
+  ExtendedWishlist,
+  WishlistDetailInput,
+} from "@/api-manager/schemas/user.schema";
 import { createApiPath, createQuery } from "../../create-query";
-import { WishList } from "../../../datasources/e4/graphqlRequestSdk";
 
+export const getWishlistDetailsQueryKey = "wish-list-details";
 const apiPath = createApiPath("user", "getWishlistDetails");
 
-const getWishListDetails = createQuery<string, WishList>(apiPath, {
-  queryKey: "wish-list-details",
-});
+const getWishListDetails = createQuery<WishlistDetailInput, ExtendedWishlist>(
+  apiPath,
+  {
+    queryKey: getWishlistDetailsQueryKey,
+  },
+);
 
 export default getWishListDetails;

package/src/api-manager/services/user/queries/get-wishlists.ts

@@ -1,10 +1,11 @@
-import { WishList } from "../../../datasources/e4/graphqlRequestSdk";
+import { Wishlist } from "@/api-manager/schemas/user.schema";
 import { createApiPath, createQuery } from "../../create-query";
 
+export const getWishlistsQueryKey = "wishlists";
 const apiPath = createApiPath("user", "getWishlists");
 
-const getWishlists = createQuery<null, WishList[]>(apiPath, {
-  queryKey: "wish-lists",
+const getWishlists = createQuery<null, Wishlist[]>(apiPath, {
+  queryKey: getWishlistsQueryKey,
 });
 
 export default getWishlists;

package/src/api-manager/types/Datasource.ts

@@ -1,5 +1,6 @@
 import * as cartSchemas from "@/api-manager/schemas/cart.schema";
 import * as productSchemas from "@/api-manager/schemas/product.schema";
+import * as userSchemas from "@/api-manager/schemas/user.schema";
 import { User, UserCounts } from "@/api-manager/schemas/user.schema";
 import {
   Session,
@@ -31,6 +32,7 @@ import {
   SimpleProduct,
   StateProvinceInfo,
   ProductWarehouseInventoryAvailability,
+  ProductWarehouseInventoryInformation,
 } from "@msdyn365-commerce/retail-proxy";
 import {
   CategoriesQuery,
@@ -52,16 +54,16 @@ export interface DatasourceApis {
   organization: OrganizationApi;
 }
 
-export abstract class Datasource implements DatasourceApis {
+export abstract class Datasource {
   public name: string;
-  abstract user: UserApi;
-  abstract cart: CartApi;
-  abstract product: ProductApi;
-  abstract categories: CategoryApi;
-  abstract order: OrderApi;
-  abstract address: AddressApi;
-  abstract organization: OrganizationApi;
-  abstract session: SessionApi;
+  abstract user: Partial<UserApi>;
+  abstract cart: Partial<CartApi>;
+  abstract product: Partial<ProductApi>;
+  abstract categories: Partial<CategoryApi>;
+  abstract order: Partial<OrderApi>;
+  abstract address: Partial<AddressApi>;
+  abstract organization: Partial<OrganizationApi>;
+  abstract session: Partial<SessionApi>;
 
   constructor(name: string) {
     this.name = name;
@@ -89,14 +91,34 @@ export interface OrganizationApi {
  * User Data Actions
  */
 export interface UserApi {
+  updateUser(user: userSchemas.User): Promise<userSchemas.User>;
+  getUser(): Promise<userSchemas.User | null>;
+  getUserCounts(userId: string): Promise<UserCounts>;
+  // wishlists
+  getWishlists(): Promise<userSchemas.Wishlist[]>;
+  getWishlistDetails(
+    input: userSchemas.WishlistDetailInput,
+  ): Promise<userSchemas.ExtendedWishlist>;
+  createWishlist(
+    input: userSchemas.WishlistCreateInput,
+  ): Promise<userSchemas.Wishlist>;
+  deleteWishlist(input: userSchemas.WishlistDetailInput): Promise<void>;
+  updateWishlist(
+    // input: userSchemas.UpdateWishlistInput,  // used to change wishlist name
+    input: userSchemas.WishlistLinesInput,
+  ): Promise<userSchemas.Wishlist>;
+  addProductsToWishlist(
+    input: userSchemas.WishlistLinesInput,
+  ): Promise<userSchemas.Wishlist>;
+  removeProductsFromWishlist(
+    input: userSchemas.WishlistLinesInput,
+  ): Promise<void>;
+  copyCartToWishlist(
+    input: userSchemas.CopyCartToWishlistInput,
+  ): Promise<userSchemas.Wishlist>;
   updateUser(user: User): Promise<User>;
   getUser(): Promise<User | null>;
   getUserCounts(userId: string): Promise<UserCounts>;
-  // wishlists
-  getWishlists(): Promise<WishList[]>;
-  getWishlistDetails(id: string): Promise<WishList>;
-  createWishlist(wishlist: CreateWishListInput): Promise<WishList>;
-  deleteWishlist(id: string): Promise<string>;
 }
 
 /**
@@ -142,6 +164,9 @@ export interface CartApi {
     input: cartSchemas.RetrieveCardPaymentAcceptResultInput,
   ): Promise<CardPaymentAcceptResult>;
   checkout(input: cartSchemas.CheckoutInput): Promise<SalesOrder>;
+  getCartLinesInventory(
+    input: cartSchemas.InventorySearchCartLinesCriteriaInput,
+  ): Promise<ProductWarehouseInventoryInformation>;
 }
 
 /**
@@ -167,6 +192,9 @@ export interface ProductApi {
   getInventory(
     input: productSchemas.InventorySearchCriteriaInput,
   ): Promise<ProductWarehouseInventoryAvailability>;
+  getProductPrices(
+    input: productSchemas.ProductPriceInput,
+  ): Promise<productSchemas.ProductPrice[]>;
 }
 
 /**

package/src/auth/auth-options.ts

@@ -8,7 +8,7 @@ import {
 } from "next";
 import { getProviders } from "./providers";
 import { deleteCartCookie } from "@/lib/cart-cookie-handler";
-import { getConfig } from "@config";
+import { getSecret } from "@evenicanpm/common-core/keyvault";
 
 // Split providers into separate array so we can iterate them and match the provider ID
 export type ExtendedJwtToken = JWT & {
@@ -20,7 +20,7 @@ export type ExtendedSession = Session & { token?: JWT };
 
 const createAuthOptions = (): NextAuthOptions => {
   const providers = getProviders();
-  const secret = getConfig().NEXTAUTH_SECRET;
+  const secret = getSecret("NEXTAUTH_SECRET");
   return {
     providers,
     secret,

package/src/auth/msal.ts

@@ -1,15 +1,15 @@
 import { PublicClientApplication, Configuration } from "@azure/msal-browser";
-import { getConfig } from "@config";
 
 const createMsalConfig = (): Configuration => {
   return {
     auth: {
-      clientId: getConfig().AZURE_AD_B2C_CLIENTID, //process.env.NEXT_PUBLIC_AZURE_AD_B2C_CLIENTID || "",
-      authority: getConfig().AZURE_AD_B2C_LOGIN_AUTHORITY, //process.env.NEXT_PUBLIC_AZURE_AD_B2C_LOGIN_AUTHORITY || "",
-      redirectUri: "/", //process.env.NEXT_PUBLIC_AZURE_AD_B2C_REDIRECT || "/",
-      postLogoutRedirectUri: getConfig().AZURE_AD_B2C_POST_LOGOUT_REDIRECT, //process.env.NEXT_PUBLIC_AZURE_AD_B2C_POST_LOGOUT_REDIRECT || "/",
+      clientId: process.env.NEXT_PUBLIC_AZURE_AD_B2C_CLIENTID || "",
+      authority: process.env.NEXT_PUBLIC_AZURE_AD_B2C_LOGIN_AUTHORITY || "",
+      redirectUri: process.env.NEXT_PUBLIC_AZURE_AD_B2C_REDIRECT || "/",
+      postLogoutRedirectUri:
+        process.env.NEXT_PUBLIC_AZURE_AD_B2C_POST_LOGOUT_REDIRECT || "/",
       knownAuthorities: [
-        getConfig().AZURE_AD_B2C_KNOWN_AUTHORITY, //process.env.NEXT_PUBLIC_AZURE_AD_B2C_KNOWN_AUTHORITY || "",
+        process.env.NEXT_PUBLIC_AZURE_AD_B2C_KNOWN_AUTHORITY || "",
       ],
       navigateToLoginRequestUrl: true,
     },
@@ -44,11 +44,11 @@ const getMsalInstance = () => {
 };
 
 const getRequestConfig = (requestType?: string) => {
-  const editAuthority = getConfig().AZURE_AD_B2C_EDIT_AUTHORITY;
-  const resetAuthority = getConfig().AZURE_AD_B2C_RESET_AUTHORITY;
+  const editAuthority = process.env.NEXT_PUBLIC_AZURE_AD_B2C_EDIT_AUTHORITY;
+  const resetAuthority = process.env.NEXT_PUBLIC_AZURE_AD_B2C_RESET_AUTHORITY;
 
   const baseRequest = {
-    scopes: [getConfig().AZURE_AD_B2C_API_PERMISSION],
+    scopes: [process.env.NEXT_PUBLIC_AZURE_AD_B2C_API_PERMISSION],
     authority: createMsalConfig().auth.authority,
   };
 

package/src/auth/next-auth-cookie-manager.ts

@@ -6,6 +6,8 @@ import { ExtendedJwtToken } from "@/auth/auth-options";
 const NEXT_AUTH_COOKIE_NAME = "next-auth.session-token";
 const SECURE_COOKIE_PREFIX = "__Secure-";
 
+import { getSecret } from "@evenicanpm/common-core/keyvault";
+
 /**
  * Retrieves and decodes the NextAuth session cookie from the request.
  *
@@ -28,7 +30,7 @@ const manuallyRetrieveSessionCookie = async () => {
   if (cookie) {
     return decode({
       token: cookie.value,
-      secret: process.env.NEXTAUTH_SECRET || "",
+      secret: getSecret("NEXTAUTH_SECRET") || "",
     });
   }
   //If the cookie is not found, we need to see if there is a chunked cookie
@@ -49,7 +51,7 @@ const manuallyRetrieveSessionCookie = async () => {
   if (cookieValues.length) {
     return decode({
       token: cookieValues.join(""),
-      secret: process.env.NEXTAUTH_SECRET || "",
+      secret: getSecret("NEXTAUTH_SECRET") || "",
     });
   }
 
@@ -73,7 +75,7 @@ const manuallySetSessionCookie = async (token: JWT | ExtendedJwtToken) => {
   // Set the cookie with the name __Secure-next-auth.session-token
   const value = await encode({
     token,
-    secret: process.env.NEXTAUTH_SECRET || "",
+    secret: getSecret("NEXTAUTH_SECRET") || "",
   });
   cookieStore.set({
     name: `${SECURE_COOKIE_PREFIX}${NEXT_AUTH_COOKIE_NAME}`,

package/src/auth/providers/aadb2c-provider.ts

@@ -1,4 +1,3 @@
-import { getConfig } from "@config";
 import AzureADB2CProvider from "next-auth/providers/azure-ad-b2c";
 
 // By default, NextAuth tries to use either PKCE or Client Secret-based authentication, depending on how the provider is configured.
@@ -6,9 +5,9 @@ import AzureADB2CProvider from "next-auth/providers/azure-ad-b2c";
 // If clientSecret is missing, it assumes PKCE.
 // But Azure AD B2C sometimes requires PKCE explicitly, so NextAuth needs to be told to always use PKCE.
 const azureADB2CProvider = () => {
-  const CLIENT_ID = getConfig().AZURE_AD_B2C_CLIENTID;
-  const SCOPE = `${getConfig().AZURE_AD_B2C_API_PERMISSION} offline_access openid`;
-  const LOGIN_AUTHORITY = getConfig().AZURE_AD_B2C_LOGIN_AUTHORITY;
+  const CLIENT_ID = process.env.NEXT_PUBLIC_AZURE_AD_B2C_CLIENTID || "";
+  const SCOPE = `${process.env.NEXT_PUBLIC_AZURE_AD_B2C_API_PERMISSION} offline_access openid`;
+  const LOGIN_AUTHORITY = process.env.NEXT_PUBLIC_AZURE_AD_B2C_LOGIN_AUTHORITY;
 
   return AzureADB2CProvider({
     clientId: CLIENT_ID,

package/src/cms/endpoints.ts

@@ -1,5 +1,4 @@
 import { Formats } from "./interfaces/productData";
-import { getConfig } from "@config";
 
 const apiKeys = {
   pages: "/cms/pages",
@@ -17,12 +16,12 @@ type ApiKeysType = typeof apiKeys;
 type ApiKey = keyof ApiKeysType;
 
 const getCmsApiUrl = (apiKey: ApiKey) => {
-  const cmsApiEndpoint = getConfig().E4_API_ENDPOINT;
+  const cmsApiEndpoint = process.env.NEXT_PUBLIC_E4_API_ENDPOINT;
   return `${cmsApiEndpoint}${apiKeys[apiKey]}`;
 };
 
 const buildCmsMediaUrl = (mediaUrl: string) => {
-  const cmsEndpoint = getConfig().CMS_ENDPOINT;
+  const cmsEndpoint = process.env.NEXT_PUBLIC_CMS_ENDPOINT;
 
   if (mediaUrl === undefined || mediaUrl === null) {
     return "";

package/src/components/Blocks/Components/ProductCarousel/index.tsx

@@ -1,23 +1,22 @@
 // Template: Market1
 import React from "react";
 
-// Custom Icon Component
+// ICONS
 import { Light } from "../../Icons/index";
 import { Box } from "@mui/system";
 
-// Global Custom Components
+// GLOBAL COMPONENTS
 import { Carousel } from "@/components/_components/carousel/index";
 import { SectionCreator } from "@/components/_components/section-header/index";
-import ProductCard1 from "@/components/_components/product-cards/product-card-1/index";
+import ProductCard1Wrapper from "@/components/_components/product-cards/product-card-1/product-card-1-wrapper";
 
-// @/cms
+// CMS
 import { getImageUrl } from "@/cms/endpoints";
 
 // API
 import getProductByIds from "@/services/product/queries/get-product-by-ids";
 import { getQueryClient } from "@/services/get-query-client";
 import { SimpleProduct } from "@msdyn365-commerce/retail-proxy";
-
 import { Product, ProductCarouselBlock } from "../../interfaces";
 
 type CombinedProduct = Product & SimpleProduct;
@@ -63,7 +62,7 @@ export default async function ProductCarousel(data: ProductCarouselBlock) {
         <Carousel responsive={responsive} height={445} autoplay={true}>
           {combinedData?.map((item: CombinedProduct) => (
             <Box pb={0.6} key={item.id}>
-              <ProductCard1
+              <ProductCard1Wrapper
                 id={item?.RecordId}
                 slug={item?.ItemId ?? ""}
                 title={item?.Name ?? ""}
@@ -71,6 +70,7 @@ export default async function ProductCarousel(data: ProductCarouselBlock) {
                 rating={0}
                 imgUrl={getImageUrl(item?.image?.[0]?.formats ?? {})}
                 discount={0}
+                mode="PLP"
                 //uom={item?.uom?.nodes[0].id}
               />
             </Box>

package/src/components/_components/LazyImage.tsx

@@ -1,9 +1,12 @@
 "use client";
 
-import NextImage from "next/image";
+import NextImage, { ImageProps } from "next/image";
 import styled from "@mui/material/styles/styled";
+import { ComponentType } from "react";
 
-export default styled(NextImage)({
+const LazyImage: ComponentType<ImageProps> = styled(NextImage)({
   width: "100%",
   height: "auto", //If we use CSS to change the size of image, we should include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.
 });
+
+export default LazyImage;

package/src/components/_components/header/components/user.tsx

@@ -42,7 +42,6 @@ const MENU_ITEMS = [
 interface Props {
   mobile?: boolean;
 }
-
 const User = ({ mobile = false }: Props) => {
   const { data: session, status } = useSession();
 
@@ -115,7 +114,7 @@ const User = ({ mobile = false }: Props) => {
 
   const setAnchorElNull = () => setAnchorEl(null);
 
-  if (status === "loading") return <>Loading...</>;
+  if (status === "loading") return <></>;
 
   if (mobile) {
     return (

package/src/components/_components/navbar/category-based-menu/components/categories.tsx

@@ -1,6 +1,6 @@
 import ChevronRight from "@mui/icons-material/ChevronRight";
 // GLOBAL CUSTOM HOOK
-import useSettings from "@/components/_components/hooks/useSettings";
+import useSettings from "@/hooks/use-settings";
 // STYLED COMPONENTS
 import { CategoryList, CategoryListItem } from "../styles";
 

package/src/components/_components/navbar/mega-menu/mega-menu.tsx

@@ -5,7 +5,7 @@ import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 // GLOBAL CUSTOM COMPONENTS
 import FlexRowCenter from "@/components/_components/flex-box/flex-row-center";
 // GLOBAL CUSTOM HOOKS
-import useOverflowDetect from "@/components/_components/hooks/useOverflowDetect";
+import useOverflowDetect from "@/hooks/use-overflow-detect";
 // LOCAL CUSTOM COMPONENT
 import CategoryList from "./category-list";
 // STYLED COMPONENTS

package/src/components/_components/navbar/nav-list/nav-item-child.tsx

@@ -7,8 +7,8 @@ import MenuItem from "@mui/material/MenuItem";
 import ArrowLeft from "@mui/icons-material/ArrowLeft";
 import ArrowRight from "@mui/icons-material/ArrowRight";
 // GLOBAL CUSTOM HOOKS
-import useOverflowDetect from "@/components/_components/hooks/useOverflowDetect";
-import useSettings from "@/components/_components/hooks/useSettings";
+import useOverflowDetect from "@/hooks/use-overflow-detect";
+import useSettings from "@/hooks/use-settings";
 // GLOBAL CUSTOM COMPONENTS
 import { Span } from "@/components/_components/Typography";
 import BazaarCard from "@/components/_components/BazaarCard";