@lmnto/h-mall-shared 1.0.1

package/shared/components/Sidebar.tsx

@@ -0,0 +1,281 @@
+"use client";
+
+import { IconButton, List, Typography } from "@material-tailwind/react";
+import { usePathname } from "next/navigation";
+import { useMemo } from "react";
+import { BsBoxSeam, BsCart2 } from "react-icons/bs";
+import { FiHeadphones } from "react-icons/fi";
+import { HiOutlineUser } from "react-icons/hi";
+import { IoDocumentTextOutline } from "react-icons/io5";
+import { IoClose } from "react-icons/io5";
+import { LiaWalletSolid } from "react-icons/lia";
+import { MdContentCopy, MdOutlineLogout } from "react-icons/md";
+import { TbHistory } from "react-icons/tb";
+import { toast } from "react-toastify";
+
+import { KYC_STATUS } from "../constants/app";
+import { FeatureCodes } from "../constants/feature-flags";
+import { ROUTES } from "../constants/routes";
+import { useMainContext } from "../contexts/MainWrapperContext";
+import useCopy from "../hooks/useCopy";
+import useCustomRouter from "../hooks/useCustomRouter";
+import useOnlineUser from "../hooks/useOnlineUser";
+import { _useScopedI18n } from "../i18n/client";
+import { useLoadingStore } from "../stores/loadingStore";
+import { useUserStore } from "../stores/userStore";
+import ButtonCustom from "./Button";
+import { BrandIcon } from "./icons/BrandIcon";
+import ListItemComponent from "./ListItemComponent";
+import ServerTime from "./ServerTime";
+
+export type SidebarProps = {
+  bidNumber: string;
+  onClose: () => void;
+  handleLogout: () => void;
+  cartProductsCount: number;
+};
+
+export default function Sidebar({
+  bidNumber,
+  onClose,
+  handleLogout,
+  cartProductsCount,
+}: SidebarProps) {
+  //
+  const { handleCopy } = useCopy();
+  const { getAletaAuth } = useOnlineUser();
+  const { push } = useCustomRouter();
+  const { setLoading: setAppLoading } = useLoadingStore();
+  const { user } = useUserStore();
+
+  const pathname = usePathname();
+
+  const scopeT = _useScopedI18n("sideBarMenu");
+
+  const { featureFlags } = useMainContext();
+
+  const MENU_ITEMS = useMemo(() => {
+    //
+    const iconClassName = `h-5 w-5`;
+
+    return {
+      primary: [
+        {
+          icon: <BsBoxSeam className={iconClassName} />,
+          title: scopeT("products"),
+          href: ROUTES.dashboard.products,
+          badge: null,
+          active: pathname.startsWith(ROUTES.dashboard.products),
+          enable: true,
+          customActionEnable: false,
+          customAction: () => {},
+        },
+        {
+          icon: <BsCart2 className={iconClassName} />,
+          title: scopeT("myCart"),
+          href: ROUTES.dashboard.cart,
+          // badge: cartQty > 0 ? cartQty : null,
+          badge: cartProductsCount,
+          active:
+            pathname.startsWith(ROUTES.dashboard.cart) ||
+            pathname.startsWith(ROUTES.dashboard.checkout) ||
+            pathname.startsWith(ROUTES.dashboard.payment) ||
+            pathname.startsWith(ROUTES.dashboard.payment),
+          enable: true,
+          customActionEnable: false,
+          customAction: () => {},
+        },
+        {
+          icon: <TbHistory className={iconClassName} />,
+          title: scopeT("orderHistory"),
+          href: ROUTES.dashboard.orders,
+          badge: null,
+          active: pathname.startsWith(ROUTES.dashboard.orders),
+          enable: true,
+          customActionEnable: false,
+          customAction: () => {},
+        },
+        {
+          icon: <LiaWalletSolid className={iconClassName} />,
+          title: scopeT("AletaPay"),
+          href: "#",
+          badge:
+            (user &&
+              user?.pgUser?.aletaState === KYC_STATUS.SUBSCRIPTION_REQUIRED) ||
+            user?.pgUser?.aletaState === KYC_STATUS.KYC_REQUIRED ? (
+              <div className="text-xs">Setup Now</div>
+            ) : null,
+          active: pathname.startsWith("aleta"),
+          enable: !featureFlags?.[FeatureCodes.ALETA_PAYMENT]
+            ? false
+            : featureFlags?.[FeatureCodes.ALETA_PAYMENT]?.isActive === true,
+          customActionEnable: true,
+          customAction: async () => {
+            setAppLoading(true);
+            const result = await getAletaAuth();
+            if (result.isSuccess) {
+              push(result.data.authUrl);
+            } else {
+              toast.error(
+                <>
+                  <span>
+                    Failed to fetch aleta auth code, please try again later
+                  </span>
+                </>,
+                {
+                  position: "top-right",
+                  autoClose: 2000,
+                },
+              );
+            }
+            setAppLoading(false);
+          },
+        },
+      ],
+      secondary: [
+        {
+          icon: <HiOutlineUser className={iconClassName} />,
+          title: scopeT("profile"),
+          href: ROUTES.dashboard.profile,
+          badge: null,
+          active: pathname.startsWith(ROUTES.dashboard.profile),
+          enable: true,
+        },
+        {
+          icon: <IoDocumentTextOutline className={iconClassName} />,
+          title: scopeT("wiki"),
+          href: ROUTES.dashboard.wiki,
+          badge: null,
+          active: false,
+          target: "_blank",
+          enable: true,
+        },
+        {
+          icon: <FiHeadphones className={iconClassName} />,
+          title: scopeT("support"),
+          href: ROUTES.dashboard.support,
+          badge: null,
+          active: false,
+          target: "_blank",
+          enable: true,
+        },
+      ],
+    };
+  }, [
+    pathname,
+    cartProductsCount,
+    scopeT,
+    featureFlags,
+    getAletaAuth,
+    push,
+    setAppLoading,
+    user,
+  ]);
+
+  return (
+    <>
+      <div className="bg-white">
+        <div className="md:h-[4.36rem] px-2 py-3 md:p-3 border-b border-b-slate-50 border-r-slate-50 flex justify-between lg:justify-center items-center z-50">
+          <a href="/products" className="w-36 brandIcon">
+            <BrandIcon width={150} height={34} />
+          </a>
+          <IconButton
+            onClick={onClose}
+            className="bg-gray-50 h-10 w-10 !max-h-10 !max-w-10 shadow-none border border-slate-50 lg:hidden"
+          >
+            <IoClose className="h-6 w-6 text-black-500" />
+          </IconButton>
+        </div>
+
+        <div className="sidebar-body p-2">
+          <div className="md:hidden mt-2">
+            <ServerTime />
+          </div>
+
+          {/* <div className="py-4 px-3">
+            <Typography
+              variant="h6"
+              className="text-xs text-gray-500 font-normal"
+            >
+              {scopeT("navigation")}
+            </Typography>
+          </div> */}
+          <List className="p-0 text-gray-500 gap-0 lg:gap-1 w-full min-w-full mt-1">
+            {MENU_ITEMS.primary.map(
+              (
+                {
+                  icon,
+                  title,
+                  href,
+                  badge,
+                  active,
+                  enable,
+                  customAction,
+                  customActionEnable,
+                },
+                index,
+              ) =>
+                enable && (
+                  <ListItemComponent
+                    key={index}
+                    href={href}
+                    prefix={icon}
+                    ListItemName={title}
+                    active={active}
+                    cartProductsCount={badge}
+                    customAction={customAction}
+                    customActionEnable={customActionEnable}
+                    onClick={onClose}
+                  />
+                ),
+            )}
+
+            <hr className="m-3 block border-slate-50" />
+
+            {MENU_ITEMS.secondary.map(
+              ({ icon, title, href, badge, active, target, enable }, index) =>
+                enable && (
+                  <ListItemComponent
+                    key={index}
+                    href={href}
+                    prefix={icon}
+                    ListItemName={title}
+                    active={active}
+                    target={target}
+                    cartProductsCount={badge}
+                    onClick={onClose}
+                  />
+                ),
+            )}
+          </List>
+
+          <div className="p-3 flex justify-between items-center lg:hidden">
+            <Typography
+              as="span"
+              variant="small"
+              className="text-black-500 text-base font-medium"
+            >
+              Bid : {bidNumber}
+            </Typography>
+            <IconButton
+              variant="outlined"
+              className="p-0 rounded-full bg-gray-100/40 border-none"
+              onClick={() => handleCopy(bidNumber)}
+            >
+              <MdContentCopy className="h-4 w-4" />
+            </IconButton>
+          </div>
+          <div className="p-3 mt-5 lg:hidden">
+            <ButtonCustom
+              onClick={handleLogout}
+              icon={<MdOutlineLogout className="h-5 w-5" />}
+              className="gap-2 font-medium text-sm w-full p-3.5"
+            >
+              {scopeT("logout")}
+            </ButtonCustom>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/shared/components/SpecialOfferDialog.tsx

@@ -0,0 +1,193 @@
+import {
+  Badge,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  Typography,
+} from "@material-tailwind/react";
+import React, { useEffect, useState } from "react";
+
+import balloon from "../../public/gif/balloon.gif";
+import gift from "../../public/gif/gift.gif";
+import special from "../../public/img/special.png";
+import { _useScopedI18n } from "../i18n/client";
+import { useUpgradeCartStore } from "../stores/upgradeCartStore";
+import ButtonCustom from "./Button";
+import CustomNextImage from "./CustomNextImage";
+import ProductPriceComponent from "./ProductPriceComponent";
+
+export type SpecialOfferDialogProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+export function SpecialOfferDialog({ open, onClose }: SpecialOfferDialogProps) {
+  // const { upgradeCart, setUpgradeCart } = useUpgradeCartStore();
+  // const {  addShippingCartProductAPI } =
+  //     useShippingOrders();
+
+  const { upgradeCart, loading } = useUpgradeCartStore();
+
+  const scopeT = _useScopedI18n("cart");
+  return (
+    <>
+      <Dialog
+        open={open}
+        handler={onClose}
+        dismiss={{ outsidePress: false }}
+        size="sm"
+        className="
+                max-w-[95%]
+                md:max-w-[90%] md:min-w-[90%] md:w-[90%] 
+                lg:max-w-[60%] lg:min-w-[60%] lg:w-[60%]
+                xl:max-w-[40%] xl:min-w-[40%] xl:w-[40%]
+                specialOfferBG
+                relative
+                "
+      >
+        <CustomNextImage
+          src={balloon.src}
+          alt="Special offer balloon"
+          width={125}
+          height={125}
+          className="absolute top-[-60px] right-0  md:right-[-60px]"
+        />
+        <CustomNextImage
+          src={balloon.src}
+          alt="Special offer balloon"
+          width={125}
+          height={125}
+          className="absolute top-[-60px] left-0  md:left-[-60px]"
+        />
+        <DialogHeader className="w-full rounded-tl-lg rounded-tr-lg p-8 pb-14">
+          <div className="flex flex-col items-center md:w-1/2 mx-auto">
+            <CustomNextImage
+              src={special.src}
+              alt="power icon"
+              width={270}
+              height={98}
+            />
+            <Typography
+              variant="h6"
+              className="text-base md:text-xl font-semibold text-black-500 text-center"
+            >
+              {scopeT("discountApplied")}
+            </Typography>
+          </div>
+        </DialogHeader>
+
+        <ul>
+          <DialogBody className="p-3 mt-5 md:px-4 md:py-0 max-h-[50vh] overflow-y-auto overflow-x-hidden">
+            {loading ? (
+              <div className="flex justify-center items-center">
+                <div
+                  className="inline-block h-4 w-4 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+                  role="status"
+                >
+                  <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
+                    {scopeT("loading")}
+                  </span>
+                </div>
+              </div>
+            ) : (
+              <>
+                {upgradeCart?.cartProducts?.map((item) => (
+                  <li
+                    key={item.id}
+                    className="flex flex-wrap gap-4 justify-between items-center border-b border-b-slate-50 py-4 first-of-type:pt-0"
+                  >
+                    <div className="relative py-5">
+                      <div className="absolute right-1 top-1">
+                        <Badge
+                          content={item?.quantity}
+                          className="text-[0.688rem] min-w-5 min-h-fit py-0.5 px-1.5"
+                        >
+                          {" "}
+                        </Badge>
+                      </div>
+                      <div className="w-[40px] md:w-[55px] border border-slate-50 rounded-md ">
+                        <CustomNextImage
+                          src={item.product.featureImage}
+                          alt={item.product.name}
+                          height={55}
+                          width={55}
+                        />
+                      </div>
+                    </div>
+                    <div className="flex flex-col justify-center flex-1 h-full">
+                      <Typography
+                        variant="h5"
+                        className="text-lg font-medium text-black-500 mb-0 md:mb-2 line-clamp-2 font-box"
+                      >
+                        {item.product.name}
+                      </Typography>
+                    </div>
+                    <PriceDisplayWithGif item={item} />
+                  </li>
+                ))}
+              </>
+            )}
+          </DialogBody>
+          <DialogFooter className="gap-4 flex justify-center">
+            <ButtonCustom
+              variant="filled"
+              className="!py-3 !text-sm"
+              icon={undefined}
+              onClick={() => {
+                onClose();
+              }}
+            >
+              {scopeT("proceed")}
+            </ButtonCustom>
+          </DialogFooter>
+        </ul>
+      </Dialog>
+    </>
+  );
+}
+
+const PriceDisplayWithGif = ({ item }) => {
+  const [showGif, setShowGif] = useState(true);
+
+  useEffect(() => {
+    // Show gif for 3 seconds then switch to price display
+    const timer = setTimeout(() => {
+      setShowGif(false);
+    }, 1500);
+
+    // Cleanup timer on component unmount
+    return () => clearTimeout(timer);
+  }, []); // Empty dependency array means this runs once on mount
+
+  return (
+    <>
+      {showGif ? (
+        <CustomNextImage
+          src={gift.src}
+          alt="Special offer gift"
+          width={100}
+          height={100}
+          className="gift-animation"
+        />
+      ) : (
+        <div className="flex gap-3 items-center">
+          <Typography
+            variant="h5"
+            className="text-2xl font-semibold text-[#9451A0] mb-0 md:mb-3"
+          >
+            <ProductPriceComponent amount={item.price} />
+          </Typography>
+          {item.discount > 0 && (
+            <Typography
+              variant="small"
+              className="text-base font-semibold line-through text-black-500 mb-0 md:mb-3"
+            >
+              <ProductPriceComponent amount={item.originalPrice} />
+            </Typography>
+          )}
+        </div>
+      )}
+    </>
+  );
+};

package/shared/components/StatusComponents.tsx

@@ -0,0 +1,25 @@
+import { Chip } from "@material-tailwind/react";
+import React from "react";
+
+export type StatusComponentsProps = {
+  color: any;
+  value: string;
+  className: string;
+};
+
+export default function StatusComponents({
+  color,
+  value,
+  className,
+}: StatusComponentsProps) {
+  return (
+    <div className="relative w-fit">
+      <Chip
+        variant="ghost"
+        value={value.toUpperCase()}
+        color={color}
+        className={className}
+      />
+    </div>
+  );
+}

package/shared/components/StepperComponent.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { Step, Stepper, Typography } from "@material-tailwind/react";
+import { useEffect, useState } from "react";
+import { FaCircle } from "react-icons/fa";
+import { FaRegCircleCheck } from "react-icons/fa6";
+
+import { CART_STATUS } from "../constants/app";
+import { _useScopedI18n } from "../i18n/client";
+import { ICart } from "../types/cart";
+
+type StepperComponentProb = {
+  cart: ICart;
+};
+
+const stepperStateValues = {
+  [CART_STATUS.shopping]: 0,
+  [CART_STATUS.checkout]: 1,
+  [CART_STATUS.payment]: 2,
+};
+
+export default function StepperComponent({ cart }: StepperComponentProb) {
+  //
+  const scopeT = _useScopedI18n("sharedComponents.cartStepperComponent");
+
+  const steps = [
+    { label: scopeT("first") },
+    { label: scopeT("second") },
+    { label: scopeT("third") },
+    { label: scopeT("four") },
+  ];
+
+  const [activeStep, setActiveStep] = useState(
+    stepperStateValues[cart?.cartState] ?? 0,
+  );
+
+  useEffect(() => {
+    if (cart) {
+      (async () =>
+        await setActiveStep(stepperStateValues[cart?.cartState] ?? 0))();
+    }
+  }, [cart]);
+
+  return (
+    <>
+      <div className="md:flex-1 w-full md:mb-8 py-2 md:px-20 md:py-2 z-0">
+        <Stepper
+          activeStep={activeStep}
+          lineClassName="bg-slate-50 h-1"
+          activeLineClassName="bg-sushiGreen"
+        >
+          {steps.map((step, index) => (
+            <Step
+              key={index}
+              className="h-7 w-7 bg-slate-50 border-4 border-transparent"
+              activeClassName="border-4 border-sushiGreen bg-white text-black"
+              completedClassName="bg-sushiGreen text-black"
+            >
+              {index === activeStep ? (
+                <FaCircle className="h-3 w-3 text-sushiGreen" />
+              ) : index < activeStep ? (
+                <FaRegCircleCheck className="h-4 w-4 text-white" />
+              ) : null}
+
+              <div className="absolute -bottom-8 w-max text-center">
+                <Typography
+                  variant="h6"
+                  className={`${index === activeStep ? "text-black-500" : "text-slate-500"} text-sm font-medium hidden md:block`}
+                >
+                  {step.label}
+                </Typography>
+              </div>
+            </Step>
+          ))}
+        </Stepper>
+      </div>
+    </>
+  );
+}

package/shared/components/StepperSmartPayComponent.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { Step, Stepper, Typography } from "@material-tailwind/react";
+import { useEffect, useState } from "react";
+import { FaCircle } from "react-icons/fa";
+import { FaRegCircleCheck } from "react-icons/fa6";
+
+import { CART_STATUS } from "../constants/app";
+import { _useScopedI18n } from "../i18n/client";
+import { ICart } from "../types/cart";
+
+type StepperSmartPayComponentProb = {
+  cart: ICart;
+};
+
+const stepperStateValues = {
+  [CART_STATUS.shopping]: 0,
+  [CART_STATUS.checkout]: 1,
+  [CART_STATUS.payment]: 2,
+  [CART_STATUS.review]: 3,
+  [CART_STATUS.deliveryPayment]: 4,
+};
+
+export default function StepperSmartPayComponent({
+  cart,
+}: StepperSmartPayComponentProb) {
+  //
+  const scopeT = _useScopedI18n("sharedComponents.cartStepperComponent");
+
+  const steps = [
+    { label: scopeT("first") },
+    { label: scopeT("second") },
+    { label: scopeT("productPayment") },
+    { label: scopeT("review") },
+    { label: scopeT("deliveryPayment") },
+  ];
+
+  const [activeStep, setActiveStep] = useState(
+    stepperStateValues[cart?.cartState] ?? 0,
+  );
+
+  useEffect(() => {
+    if (cart) {
+      (async () =>
+        await setActiveStep(stepperStateValues[cart?.cartState] ?? 0))();
+    }
+  }, [cart]);
+
+  return (
+    <>
+      <div className="flex items-center justify-between gap-4 md:flex-1 w-full md:mb-8 py-2 px-20 md:px-[15%] lg:px-[20%] md:py-2 z-0">
+        <Stepper
+          activeStep={activeStep}
+          lineClassName="bg-slate-50 h-1"
+          activeLineClassName="bg-sushiGreen"
+        >
+          {steps.map((step, index) => (
+            <Step
+              key={index}
+              className="h-7 w-7 bg-slate-50 border-4 border-transparent"
+              activeClassName="border-4 border-sushiGreen bg-white text-black"
+              completedClassName="bg-sushiGreen text-black"
+            >
+              {index === 4 ? (
+                <div className="absolute top-[-10px] left-[-10px] rounded-[8px] bg-[#FCFDFF] border-solid border-[#E3E9F6] border-[5px] py-[15px] px-[20px]">
+                  <Typography
+                    variant="h6"
+                    className={`font-semibold text-xs hidden md:block`}
+                  >
+                    {step.label}
+                  </Typography>
+                </div>
+              ) : (
+                <>
+                  {index === activeStep ? (
+                    <FaCircle className="h-3 w-3 text-sushiGreen" />
+                  ) : index < activeStep ? (
+                    <FaRegCircleCheck className="h-4 w-4 text-white" />
+                  ) : null}
+
+                  <div className="absolute -bottom-8 w-max text-center">
+                    <Typography
+                      variant="h6"
+                      className={`${index === activeStep ? "text-black-500" : "text-slate-500"} text-sm font-medium hidden md:block`}
+                    >
+                      {step.label}
+                    </Typography>
+                  </div>
+                </>
+              )}
+            </Step>
+          ))}
+        </Stepper>
+      </div>
+    </>
+  );
+}