@lmnto/h-mall-shared 1.0.1

package/shared/components/Header.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import {
+  Badge,
+  IconButton,
+  Navbar,
+  Typography,
+} from "@material-tailwind/react";
+import { FaBarsStaggered } from "react-icons/fa6";
+import { HiOutlineShoppingCart } from "react-icons/hi";
+
+import { _useScopedI18n } from "../i18n/client";
+import { IUserProfile } from "../types/user";
+import { BrandIcon } from "./icons/BrandIcon";
+import ProfileMenu from "./ProfileMenu";
+import ServerTime from "./ServerTime";
+
+export type HeaderProps = {
+  onMenuClick: () => void;
+  openCartDrawer: () => void;
+  logout: () => void;
+  user: IUserProfile;
+  cartProductsCount: number;
+};
+
+export function Header({
+  user,
+  logout,
+  onMenuClick,
+  openCartDrawer,
+  cartProductsCount,
+}: HeaderProps) {
+  //
+  const scopeT = _useScopedI18n("sharedComponents.headerComponent");
+
+  return (
+    <>
+      <Navbar className="rounded-none px-2 py-3 md:p-3 w-full shadow-none  border-b-slate-50 max-w-full">
+        <div className="flex relative items-center justify-start gap-5 md:justify-between text-blue-gray-900">
+          <div className="flex-1">
+            <div className="hidden lg:block">
+              <Typography className="text-base font-semibold text-black-500 mb-[0.3rem]">
+                {scopeT("title")}, {user?.userName}
+              </Typography>
+              {/* 
+                                <Typography className="text-xs font-normal text-black-300">
+                                    lorem Ipsum text lorem Ipsum text text
+                                </Typography> 
+                            */}
+            </div>
+
+            <a href="/products" className="lg:hidden">
+              <div className="w-36 brandIcon">
+                <BrandIcon width={150} height={34} />
+              </div>
+            </a>
+          </div>
+
+          <div className="flex justify-between items-center gap-5">
+            <ServerTime className="hidden md:flex" />
+
+            <div className="flex items-center">
+              {(() => {
+                const button = (
+                  <IconButton
+                    onClick={openCartDrawer}
+                    className="bg-gray-50 rounded-full h-10 w-10 !max-h-10 !max-w-10 shadow-none border border-slate-50"
+                  >
+                    <HiOutlineShoppingCart className="h-5 w-5 text-black-500" />
+                  </IconButton>
+                );
+
+                return cartProductsCount !== 0 ? (
+                  <Badge
+                    content={cartProductsCount}
+                    className="min-w-5 min-h-fit text-[0.625rem] py-0.5 px-1.5 top-1 right-1 rounded-xl leading-normal bg-blue-300 text-white"
+                  >
+                    {button}
+                  </Badge>
+                ) : (
+                  button
+                );
+              })()}
+            </div>
+
+            <ProfileMenu
+              bidNumber={user?.bid}
+              userName={user?.userName}
+              // profileImage={user?.picture}
+              logout={logout}
+            />
+          </div>
+
+          <div className="lg:hidden">
+            <IconButton
+              onClick={onMenuClick}
+              className="bg-gray-50 h-10 w-10 !max-h-10 !max-w-10 shadow-none border border-slate-50 "
+            >
+              <FaBarsStaggered className="h-5 w-6 text-black-500 bg-white" />
+            </IconButton>
+          </div>
+        </div>
+      </Navbar>
+    </>
+  );
+}

package/shared/components/HoldShippingDialog.tsx

@@ -0,0 +1,165 @@
+import {
+  Dialog,
+  DialogBody,
+  DialogHeader,
+  IconButton,
+  Typography,
+} from "@material-tailwind/react";
+import React from "react";
+import { IoIosCloseCircleOutline } from "react-icons/io";
+
+import stopShippingImage from "../../public/img/stop-shipping-banner.png";
+import {
+  GREETING_DIALOG_STATUS,
+  GREETING_DIALOG_STATUS_KEY,
+} from "../../shared/constants/app";
+import { FeatureCodes } from "../constants/feature-flags";
+import { useMainContext } from "../contexts/MainWrapperContext";
+import CustomNextImage from "./CustomNextImage";
+
+export function HoldShippingDialog({ handleOpen, open }) {
+  const { featureFlags } = useMainContext();
+  return (
+    <>
+      <Dialog
+        size="sm"
+        open={open}
+        handler={handleOpen}
+        className=" px-3 xl:px-5  py-4 boostDialogBg"
+        dismiss={{
+          outsidePress: false,
+          escapeKey: false,
+        }}
+      >
+        <DialogHeader className="justify-center">
+          <IconButton
+            size="sm"
+            variant="text"
+            className="!absolute right-3 top-3 outline-none"
+            onClick={async () => {
+              await localStorage.setItem(
+                GREETING_DIALOG_STATUS_KEY,
+                GREETING_DIALOG_STATUS.seen,
+              );
+              handleOpen(false);
+            }}
+          >
+            <IoIosCloseCircleOutline className="w-6 h-6 text-gray-500 cursor-pointer" />
+          </IconButton>
+        </DialogHeader>
+        <DialogBody className="max-h-[600px] overflow-y-auto">
+          <div className="flex flex-wrap-reverse justify-center xl:justify-between items-center gap-3 mb-4">
+            <div>
+              <Typography
+                variant="paragraph"
+                className="text-lg md:text-4xl font-bold text-[#9451A0] uppercase"
+              >
+                Service Notice
+              </Typography>
+              <Typography
+                variant="paragraph"
+                className="text-base md:text-3xl text-black-900 mb-2 uppercase font-normal max-w-[330px]"
+              >
+                Shipping & Pickup Update
+              </Typography>
+              <Typography
+                variant="paragraph"
+                className="text-sm md:text-lg text-[#E27500] max-w-[200px] font-normal"
+              >
+                Effective July 17, 2025{" "}
+              </Typography>
+            </div>
+            <div>
+              <CustomNextImage
+                src={stopShippingImage.src}
+                alt={"boost image"}
+                width={164}
+                height={163}
+              />
+            </div>
+          </div>
+          <Typography
+            variant="paragraph"
+            className="text-base font-bold text-black-900 mb-4"
+          >
+            Please note the following{" "}
+            <span className="text-[#9451A0]"> important update </span> regarding
+            logistics services.
+          </Typography>
+          <div className="mb-4">
+            <Typography
+              variant="paragraph"
+              className="text-sm text-black-900 mb-1 font-semibold"
+            >
+              🚫 Suspension of Shipping & Pickup
+            </Typography>
+            <Typography
+              variant="paragraph"
+              className="text-sm text-black-900 font-normal"
+            >
+              All shipping and pickup services are temporarily unavailable for:
+            </Typography>
+            <ul className="list-disc ml-6">
+              <li className="decoration-slice">
+                <Typography
+                  variant="paragraph"
+                  className="text-sm text-black-900 font-normal"
+                >
+                  GEN 1 Device Upgrades
+                </Typography>
+              </li>
+              <li>
+                <Typography
+                  variant="paragraph"
+                  className="text-sm text-black-900 font-normal"
+                >
+                  GEN 2 Device Orders
+                </Typography>
+              </li>
+            </ul>
+          </div>
+          {featureFlags?.[FeatureCodes?.SMART_PAY_PLAN]?.isActive && (
+            <div className="mb-4">
+              <Typography
+                variant="paragraph"
+                className="text-sm text-black-900 mb-1 font-semibold"
+              >
+                ✅ SmartPay Machines
+              </Typography>
+              <Typography
+                variant="paragraph"
+                className="text-sm text-black-900 font-normal"
+              >
+                Shipping and pickup remain available for SmartPay device orders.
+              </Typography>
+            </div>
+          )}
+
+          <div className="mb-8">
+            <Typography
+              variant="paragraph"
+              className="text-sm text-black-900 mb-1 font-semibold"
+            >
+              📌 Next Steps
+            </Typography>
+            <Typography
+              variant="paragraph"
+              className="text-sm text-black-900 font-normal"
+            >
+              Further details will be communicated shortly.
+            </Typography>
+          </div>
+
+          <Typography
+            variant="paragraph"
+            className="text-base text-[#E27500] font-semibold"
+          >
+            Please monitor the platform for upcoming updates.
+          </Typography>
+        </DialogBody>
+        {/* <DialogFooter className="justify-center">
+                </DialogFooter> */}
+      </Dialog>
+    </>
+  );
+}

package/shared/components/HomeBanners.tsx

@@ -0,0 +1,298 @@
+"use client";
+
+import { Carousel, Typography } from "@material-tailwind/react";
+
+import SubscriptionBanner from "@/app/[locale]/(dashboard)/products/components/SubscriptionBanner";
+
+import aiX1BannerImage from "../../public/img/ai-x1-banner.png";
+import gen3BannerImage from "../../public/img/gen3-image.png";
+import smartPayChoseIcon from "../../public/img/smart-pay-chose.png";
+import smartPayEasyIcon from "../../public/img/smart-pay-easy.png";
+import smartPayPaymentIcon from "../../public/img/smart-pay-payment.png";
+import { FeatureCodes } from "../constants/feature-flags";
+import { useMainContext } from "../contexts/MainWrapperContext";
+import CustomNextImage from "./CustomNextImage";
+
+export type HomeBannersProps = {
+  isSubscriptionActive: boolean;
+  onCategoryChange: (categoryCode: string) => void;
+};
+
+export default function HomeBanners({
+  isSubscriptionActive,
+  onCategoryChange,
+}) {
+  const { featureFlags } = useMainContext();
+
+  const renderNote = () => {
+    return (
+      <Typography variant="small" className="text-white text-xs">
+        * Check the terms and conditions for details about the offer and timing
+        to keep it active.
+      </Typography>
+    );
+  };
+  const renderNoteGen3 = () => {
+    return (
+      <Typography variant="small" className="text-white text-xs">
+        *Complete your order within the activation period to keep your rewards
+        active.
+      </Typography>
+    );
+  };
+
+  return (
+    <div className="relative mb-5">
+      <Carousel
+        autoplay={true}
+        nextArrow={() => {}}
+        prevArrow={() => {}}
+        loop={true}
+        className="rounded-xl"
+        navigation={({ setActiveIndex, activeIndex, length }) => (
+          <div className="absolute bottom-4 left-2/4 z-50 flex -translate-x-2/4 gap-2">
+            {new Array(length).fill("").map((_, i) => (
+              <span
+                key={i}
+                className={`block h-1 cursor-pointer rounded-2xl transition-all content-[''] ${
+                  activeIndex === i ? "w-8 bg-white" : "w-4 bg-white/50"
+                }`}
+                onClick={() => setActiveIndex(i)}
+              />
+            ))}
+          </div>
+        )}
+      >
+        {featureFlags?.[FeatureCodes?.GEN_3_EXTENSION_HOME_DIALOG]
+          ?.isActive && (
+          <div className="rounded-xl h-[270px] sm:h-[200px] gen3Banner px-4 md:px-8  flex flex-wrap gap-2 md:flex-nowrap   justify-center md:justify-between">
+            <div className="flex flex-col justify-center text-center xl:text-start h-full">
+              <Typography
+                variant="paragraph"
+                className="mb-2 text-white text-lg xl:text-2xl uppercase"
+              >
+                <span className="font-bold">The Wait Is Over -</span>{" "}
+                <span className="font-semibold">
+                  {" "}
+                  Get Your AiX1 Home Station!
+                </span>
+              </Typography>
+              <Typography
+                variant="small"
+                className="text-white  text-xs md:text-sm font-bold"
+              >
+                Step into the new era of decentralized performance.
+              </Typography>
+              <Typography
+                variant="small"
+                className="text-white text-xs md:text-sm"
+              >
+                Order your AiX1 Home Station today and enhance your
+                participation —
+              </Typography>
+              <Typography
+                variant="small"
+                className="text-white text-xs md:text-sm"
+              >
+                boosting your ecosystem rewards by up to 20%.
+              </Typography>
+              <Typography
+                variant="small"
+                className="text-white font-bold text-xs md:text-sm"
+              >
+                Connect. Power. Elevate.
+              </Typography>
+              <div className="md:hidden mt-2 text-center">
+                <div className="flex justify-center ">
+                  <CustomNextImage
+                    src={gen3BannerImage.src}
+                    alt={"gen3BannerImage"}
+                    width={100}
+                    height={40}
+                  />
+                </div>
+
+                {renderNoteGen3()}
+              </div>
+            </div>
+            <div className="h-full hidden  md:flex md:flex-col md:justify-center md:text-center">
+              <CustomNextImage
+                src={gen3BannerImage.src}
+                alt={"gen3BannerImage"}
+              />
+              {renderNoteGen3()}
+            </div>
+          </div>
+        )}
+
+        {featureFlags?.[FeatureCodes?.AI_CATEGORY]?.isActive && (
+          <div className="rounded-xl h-[270px] sm:h-[200px] aiX1Banner px-4 md:px-8  flex flex-wrap gap-2 md:flex-nowrap  justify-between">
+            <div className="flex flex-col justify-center text-center xl:text-start h-full">
+              <Typography
+                variant="paragraph"
+                className="mb-2 text-white text-lg xl:text-4xl uppercase"
+              >
+                <span className="font-bold">Activate the Future</span> with AiX1
+              </Typography>
+              <Typography
+                variant="small"
+                className="text-white xl:w-[60%] text-xs md:text-sm"
+              >
+                Step into the next era of decentralized AI computing.
+              </Typography>
+              <Typography
+                variant="small"
+                className="text-white xl:w-[60%] text-xs md:text-sm"
+              >
+                Buy your AiX1 Server and connect* your AiX1 Home Station to
+                unlock the full ecosystem, rewards, and unstoppable innovation.
+              </Typography>
+              <Typography
+                variant="small"
+                className="text-white font-bold xl:w-[60%] text-xs md:text-sm"
+              >
+                One Server. One Station. One Power.
+              </Typography>
+              <div className="md:hidden mt-2 text-center">
+                <div className="flex justify-center ">
+                  <CustomNextImage
+                    src={aiX1BannerImage.src}
+                    alt={"aiX1BannerImage"}
+                    width={120}
+                    height={50}
+                  />
+                </div>
+
+                {renderNote()}
+              </div>
+            </div>
+            <div className="h-full hidden  md:flex md:flex-col md:justify-center md:text-center">
+              <CustomNextImage
+                src={aiX1BannerImage.src}
+                alt={"aiX1BannerImage"}
+              />
+              {renderNote()}
+            </div>
+          </div>
+        )}
+
+        {featureFlags?.[FeatureCodes?.SMART_PAY_PLAN]?.isActive && (
+          <div className="rounded-xl h-[270px] sm:h-[200px] smartPayBanner px-4 md:px-8 flex flex-col justify-center text-center md:text-start">
+            <Typography
+              variant="paragraph"
+              className="mb-2 text-white text-lg md:text-4xl uppercase"
+            >
+              <span className="font-bold">Own the Future</span> with SmartPay
+            </Typography>
+            <Typography
+              variant="small"
+              className="text-white md:w-[40%] text-xs md:text-sm"
+            >
+              tart Today with Just 20% — No Delays, No Complexity Get instant
+              access to your Homnifi device.
+            </Typography>
+            <Typography
+              variant="small"
+              className="text-white font-bold md:w-[60%] text-xs md:text-sm"
+            >
+              SmartPay makes it simple—no hassle, just seamless participation.
+            </Typography>
+          </div>
+        )}
+        {featureFlags?.[FeatureCodes?.SMART_PAY_PLAN]?.isActive && (
+          <div className="rounded-xl h-[270px] sm:h-[200px] smartPayBannerHow flex flex-wrap justify-between gap-1 px-[5%] py-[2%] xl:items-start ">
+            <div className="flex-col justify-center align-middle text-center md:text-start md:flex-1 my-auto">
+              <Typography
+                variant="paragraph"
+                className="mb-2 text-white text-lg font-bold md:text-2xl"
+              >
+                How Smart Plan Pay Works
+              </Typography>
+              <Typography
+                variant="small"
+                className="text-white md:w-[80%] text-xs md:text-sm"
+              >
+                Our Innovative payment plans makes premium machines accessible
+                with minimal upfront cost.
+              </Typography>
+            </div>
+            <div className="px-0 sm:px-2 flex flex-col justify-center text-center items-center md:flex-2">
+              <CustomNextImage
+                className="mb-2 "
+                width={30}
+                height={30}
+                src={smartPayChoseIcon.src}
+                alt="smart pay chose Icon"
+              />
+              <Typography
+                variant="paragraph"
+                className="text-white text-[10px] font-bold md:text-sm mb-[1px]"
+              >
+                Choose Machine
+              </Typography>
+              <Typography
+                variant="paragraph"
+                className="text-white hidden xl:block font-normal text-sm max-w-[200px]"
+              >
+                Browse our selection of SmartPay eligible machines with reduced
+                upfront pricing and premium features
+              </Typography>
+            </div>
+            <div className="px-0 sm:px-2 flex flex-col justify-center text-center items-center md:flex-2">
+              <CustomNextImage
+                className="mb-2 glassEffect"
+                width={30}
+                height={30}
+                src={smartPayPaymentIcon.src}
+                alt="smart pay chose Icon"
+              />
+              <Typography
+                variant="paragraph"
+                className="text-white text-[10px] font-bold md:text-sm"
+              >
+                Initial Payment
+              </Typography>
+              <Typography
+                variant="paragraph"
+                className="text-white hidden xl:block font-normal text-sm max-w-[200px]"
+              >
+                Pay just 20% of the machine price plus utility token. Get
+                instant access to bonus LYK airdrops.
+              </Typography>
+            </div>
+            <div className="px-0 sm:px-2 flex flex-col justify-center text-center items-center md:flex-2">
+              <CustomNextImage
+                className="mb-2 glassEffect"
+                width={30}
+                height={30}
+                src={smartPayEasyIcon.src}
+                alt="smart pay chose Icon"
+              />
+              <Typography
+                variant="paragraph"
+                className="text-white text-[10px] font-bold md:text-sm"
+              >
+                Easy Repayment
+              </Typography>
+              <Typography
+                variant="paragraph"
+                className="text-white hidden xl:block font-normal text-sm max-w-[220px]"
+              >
+                The remaining balance is automatically deducted from your future
+                daily rewards of purchased machine, making repayments
+                effortless.
+              </Typography>
+            </div>
+          </div>
+        )}
+
+        <SubscriptionBanner
+          callback={() => {
+            onCategoryChange("license");
+          }}
+          isSubscriptionActive={isSubscriptionActive}
+        />
+      </Carousel>
+    </div>
+  );
+}

package/shared/components/InactiveCartDialog.tsx

@@ -0,0 +1,69 @@
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  Typography,
+} from "@material-tailwind/react";
+import React from "react";
+
+import { ROUTES } from "../constants/routes";
+import { useCart } from "../hooks/useCart";
+import useCustomRouter from "../hooks/useCustomRouter";
+import { _useScopedI18n } from "../i18n/client";
+import { useCartStore } from "../stores/cartStore";
+import ButtonCustom from "./Button";
+
+export function InactiveCartDialog({ handleOpen, open }) {
+  const { refreshCart } = useCart();
+  const { loading } = useCartStore();
+  const { push } = useCustomRouter();
+  const scopeT = _useScopedI18n("cart");
+
+  return (
+    <>
+      <Dialog
+        className="md:!w-[27rem] md:!max-w-[27rem] md:!min-w-[27rem]"
+        open={open}
+        handler={() => handleOpen(false)}
+        size="xs"
+        dismiss={{
+          outsidePress: false,
+        }}
+      >
+        <DialogHeader className="p-5 md:p-8 md:pb-0 flex items-center justify-center">
+          <Typography
+            variant="h2"
+            className="text-xl font-semibold text-black-500"
+          >
+            {scopeT("cartInactive")}
+          </Typography>
+        </DialogHeader>
+        <DialogBody className="p-5 md:p-8 flex justify-center">
+          <Typography
+            variant="paragraph"
+            className="text-sm font-medium text-gray-500 text-center"
+          >
+            {scopeT("cartInactiveSummery")}
+          </Typography>
+        </DialogBody>
+        <DialogFooter className="gap-4 justify-center p-5 md:p-8 md:pt-0">
+          <ButtonCustom
+            className="text-sm"
+            icon={undefined}
+            loading={loading}
+            onClick={async () => {
+              const result = await refreshCart.mutateAsync("validate");
+              if (result) {
+                handleOpen(false);
+                push(`${ROUTES.dashboard.cart}?state=refresh`);
+              }
+            }}
+          >
+            {scopeT("cartInactiveAction")}
+          </ButtonCustom>
+        </DialogFooter>
+      </Dialog>
+    </>
+  );
+}