@lmnto/h-mall-shared 1.0.1

package/shared/components/ProductNotFoundComponent.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { Typography } from "@material-tailwind/react";
+import Image from "next/image";
+
+import emptyBox from "../../public/img/empty-box.png";
+import { ROUTES } from "../constants/routes";
+import useCustomRouter from "../hooks/useCustomRouter";
+import { _useScopedI18n } from "../i18n/client";
+import ButtonCustom from "./Button";
+
+export default function ProductNotFoundComponent() {
+  //
+  const scopeT = _useScopedI18n("sharedComponents.productNotFoundComponent");
+
+  const { push } = useCustomRouter();
+
+  return (
+    <>
+      <div className="px-3 md:px-5 mr-1 flex cartAutoHeight">
+        <div className="">
+          <ul className="flex flex-col gap-y-6">{}</ul>
+        </div>
+        <div className="flex items-center justify-center flex-col w-full">
+          <Image
+            src={emptyBox.src}
+            alt="emptyBox"
+            width={100}
+            height={100}
+            className="mb-5"
+          />
+          <Typography
+            variant="h6"
+            className="text-center md:text-lg font-semibold text-black-500 mb-5"
+          >
+            {scopeT("title")}
+          </Typography>
+          <Typography
+            variant="h6"
+            className="text-center font-medium text-slate-400"
+          >
+            {scopeT("message")}
+          </Typography>
+
+          <ButtonCustom
+            onClick={() => push(ROUTES.dashboard.products)}
+            className="font-normal mt-7"
+            icon={undefined}
+          >
+            {scopeT("redirectBtn")}
+          </ButtonCustom>
+        </div>
+      </div>
+    </>
+  );
+}

package/shared/components/ProductPriceComponent.tsx

@@ -0,0 +1,32 @@
+import { DEFAULT_CURRENCY, EURO_CURRENCY } from "../constants/app";
+
+export type ProductPriceComponentProps = {
+  amount: string | number;
+  useEuroCurrency?: boolean;
+};
+
+export default function ProductPriceComponent({
+  amount,
+  useEuroCurrency,
+}: ProductPriceComponentProps) {
+  if (amount == null || amount === undefined) {
+    return <></>;
+  }
+
+  const numAmount = Number(amount);
+
+  // Check if the number has decimals
+  const hasDecimals = numAmount % 1 !== 0;
+
+  // Format: show decimals only if they exist, max 2 decimal places
+  const formattedAmount = hasDecimals
+    ? numAmount.toFixed(2).replace(/\.?0+$/, "")
+    : numAmount.toString();
+
+  return (
+    <>
+      {useEuroCurrency ? EURO_CURRENCY : DEFAULT_CURRENCY}
+      {formattedAmount}
+    </>
+  );
+}

package/shared/components/ProfileMenu.tsx

@@ -0,0 +1,120 @@
+import {
+  Avatar,
+  Button,
+  IconButton,
+  Menu,
+  MenuHandler,
+  MenuList,
+  Typography,
+} from "@material-tailwind/react";
+import { useState } from "react";
+import { IoChevronDownOutline } from "react-icons/io5";
+import { MdContentCopy, MdOutlineLogout } from "react-icons/md";
+import { TbExternalLink } from "react-icons/tb";
+
+import { PROFILE_PLACEHOLDER_IMAGE } from "../constants/app";
+import { ROUTES } from "../constants/routes";
+import useCopy from "../hooks/useCopy";
+import { _useScopedI18n } from "../i18n/client";
+import ButtonCustom from "./Button";
+
+export type ProfileMenuProps = {
+  bidNumber?: string;
+  userName?: string;
+  logout: () => void;
+};
+
+export default function ProfileMenu({
+  bidNumber = "",
+  userName = "",
+  logout,
+}: ProfileMenuProps) {
+  const scopeT = _useScopedI18n("sharedComponents.profileMenuComponent");
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const { handleCopy } = useCopy();
+
+  return (
+    <>
+      <div className="hidden lg:block">
+        <Menu open={isMenuOpen} handler={setIsMenuOpen} placement="bottom-end">
+          <MenuHandler>
+            <Button
+              variant="text"
+              color="blue-gray"
+              className="flex items-center gap-2 rounded-full p-1"
+            >
+              <Avatar
+                variant="circular"
+                alt="tania andrew"
+                className="border border-slate-50 w-9 h-9"
+                src={PROFILE_PLACEHOLDER_IMAGE}
+              />
+              <Typography
+                as="a"
+                href="#"
+                className="text-sm font-medium text-black-500 capitalize"
+              >
+                {userName}
+              </Typography>
+              <IoChevronDownOutline className="h-4 w-4 text-black-500" />
+            </Button>
+          </MenuHandler>
+          <MenuList className="p-3 w-48">
+            <div
+              className="flex items-center justify-start gap-1 rounded pb-2
+                                    hover:bg-white active:bg-white focus:bg-white 
+                                    outline-none"
+            >
+              <IconButton
+                variant="outlined"
+                className="p-0 rounded-full  border-none h-9 w-9"
+                onClick={() => handleCopy(bidNumber)}
+              >
+                <MdContentCopy className="h-4 w-4" />
+              </IconButton>
+              <Typography
+                variant="h6"
+                className="text-black-500 text-sm font-semibold"
+              >
+                Nid : {bidNumber}
+              </Typography>
+            </div>
+
+            <div
+              className="flex items-center justify-start gap-1 rounded
+                                    hover:bg-white active:bg-white focus:bg-white 
+                                    outline-none"
+            >
+              <IconButton
+                variant="outlined"
+                className="p-0 rounded-full  border-none h-9 w-9"
+                onClick={() => window.open(ROUTES.dashboard.nodeLinkProfile)}
+              >
+                <TbExternalLink className="h-4 w-4" />
+              </IconButton>
+
+              <Typography
+                variant="h6"
+                className="text-black-500 text-sm font-semibold"
+              >
+                {scopeT("nodeLinkRedirectionLink")}
+              </Typography>
+            </div>
+            <hr className="my-3 block border-slate-50" />
+            <div className="flex justify-start items-center rounded p-0 outline-none">
+              <ButtonCustom
+                icon={<MdOutlineLogout className="h-5 w-5" />}
+                className="!justify-start gap-2 font-normal !text-base !px-4  py-2.5 !text-start"
+                onClick={logout}
+                fullWidth={true}
+              >
+                {scopeT("logout")}
+              </ButtonCustom>
+            </div>
+          </MenuList>
+        </Menu>
+      </div>
+    </>
+  );
+}

package/shared/components/RequestCreditNoteInvoiceDialog.tsx

@@ -0,0 +1,214 @@
+import {
+  Dialog,
+  DialogBody,
+  DialogHeader,
+  IconButton,
+  Typography,
+} from "@material-tailwind/react";
+import React, { useEffect, useState } from "react";
+
+import { useInvoice } from "../hooks/useInvoice";
+import { _useScopedI18n } from "../i18n/client";
+import { handleDownload } from "../utils/app.util";
+import { notification } from "../utils/notifications.util";
+import AppLoadingComponent from "./AppLoadingComponent";
+
+type CreditNote = {
+  id: number;
+  identifier: string;
+  creditNoteInvoiceUrl?: string;
+  type?: string;
+};
+
+type RequestCreditNoteInvoiceDialogProps = {
+  open: boolean;
+  creditNotes: CreditNote[];
+  setOpen: (value: boolean) => void;
+};
+
+export function RequestCreditNoteInvoiceDialog({
+  open,
+  creditNotes,
+  setOpen,
+}: RequestCreditNoteInvoiceDialogProps) {
+  const scopeT = _useScopedI18n("invoice.requestProcessingDialog");
+  const { generateCreditNoteInvoiceAPI } = useInvoice();
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [, setAttemptCount] = useState(0);
+  const [allAttemptsFailed, setAllAttemptsFailed] = useState(false);
+
+  useEffect(() => {
+    let timeoutIds: NodeJS.Timeout[] = [];
+
+    if (creditNotes[currentIndex]) {
+      const firstCallTimeout = setTimeout(() => {
+        generateCreditNoteInvoiceAPI.mutate({
+          creditNote: creditNotes[currentIndex].identifier,
+          type: creditNotes[currentIndex].type,
+        });
+        setAttemptCount(1);
+      }, 2000);
+      timeoutIds.push(firstCallTimeout);
+
+      const secondCallTimeout = setTimeout(() => {
+        generateCreditNoteInvoiceAPI.mutate({
+          creditNote: creditNotes[currentIndex].identifier,
+          type: creditNotes[currentIndex].type,
+        });
+        setAttemptCount(2);
+      }, 5000);
+      timeoutIds.push(secondCallTimeout);
+
+      const thirdCallTimeout = setTimeout(() => {
+        generateCreditNoteInvoiceAPI.mutate({
+          creditNote: creditNotes[currentIndex].identifier,
+          type: creditNotes[currentIndex].type,
+        });
+        setAttemptCount(3);
+      }, 7000);
+      timeoutIds.push(thirdCallTimeout);
+
+      const checkAttemptsTimeout = setTimeout(() => {
+        if (
+          !generateCreditNoteInvoiceAPI.isSuccess ||
+          !generateCreditNoteInvoiceAPI.data?.data?.invoiceUrl
+        ) {
+          setAllAttemptsFailed(true);
+        }
+      }, 8000);
+      timeoutIds.push(checkAttemptsTimeout);
+    }
+
+    return () => {
+      timeoutIds.forEach((id) => clearTimeout(id));
+    };
+  }, [currentIndex, creditNotes, generateCreditNoteInvoiceAPI]);
+
+  useEffect(() => {
+    if (
+      generateCreditNoteInvoiceAPI?.isSuccess &&
+      generateCreditNoteInvoiceAPI.data?.link
+    ) {
+      handleDownload(
+        generateCreditNoteInvoiceAPI.data?.link,
+        creditNotes[currentIndex]?.identifier?.toString() || "",
+      );
+
+      // Move to next credit note if available
+      if (currentIndex < creditNotes.length - 1) {
+        setCurrentIndex(currentIndex + 1);
+        setAllAttemptsFailed(false);
+        setAttemptCount(0);
+      } else {
+        setOpen(false);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [generateCreditNoteInvoiceAPI?.isSuccess]);
+
+  useEffect(() => {
+    if (generateCreditNoteInvoiceAPI?.isError) {
+      notification.notifyError("something went wrong.");
+      setOpen(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [generateCreditNoteInvoiceAPI?.isError]);
+
+  return (
+    <>
+      <Dialog open={open} size="xs" handler={() => {}} className="p-2 md:p-5">
+        <DialogHeader className="p-0">
+          <div className="text-right size-full">
+            <IconButton
+              color="blue-gray"
+              size="sm"
+              variant="text"
+              onClick={() => setOpen(false)}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+                className="h-5 w-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </IconButton>
+          </div>
+        </DialogHeader>
+        <DialogBody className="flex flex-col items-center gap-8 text-center">
+          {allAttemptsFailed ? (
+            <>
+              <div>
+                <Typography
+                  variant="h3"
+                  className="text-xl text-black-500 mb-4"
+                >
+                  {scopeT("failedTitle") ||
+                    "Unable to Generate Credit Note Invoice"}
+                </Typography>
+                <Typography
+                  variant="lead"
+                  className="text-sm font-medium text-slate-500 mb-6"
+                >
+                  {scopeT("failedMessage") ||
+                    "We couldn't generate your credit note invoice at this time. Please try again."}
+                </Typography>
+              </div>
+
+              <div className="bg-gray-50 py-4 px-9 border border-slate-100 rounded-lg">
+                <Typography
+                  variant="h6"
+                  className="text-xs leading-5 font-medium text-black-500"
+                >
+                  Credit Note ID: {creditNotes[currentIndex]?.identifier}
+                </Typography>
+              </div>
+            </>
+          ) : (
+            <>
+              <div>
+                <AppLoadingComponent />
+                <Typography variant="h3" className="text-xl text-black-500">
+                  Generating Credit Note Invoice {currentIndex + 1} of{" "}
+                  {creditNotes.length}...
+                </Typography>
+              </div>
+
+              <div className="bg-gray-50 py-4 px-9 border border-slate-100 rounded-lg">
+                <Typography
+                  variant="h6"
+                  className="text-xs leading-5 font-medium text-black-500"
+                >
+                  Credit Note ID: {creditNotes[currentIndex]?.identifier}
+                </Typography>
+              </div>
+
+              <div>
+                <Typography
+                  variant="lead"
+                  className="text-sm font-medium text-slate-500 mb-3"
+                >
+                  {scopeT("subTitle")}
+                </Typography>
+
+                <Typography
+                  variant="lead"
+                  className="text-sm font-medium text-slate-500"
+                >
+                  {scopeT("message")}
+                </Typography>
+              </div>
+            </>
+          )}
+        </DialogBody>
+      </Dialog>
+    </>
+  );
+}

package/shared/components/RequestInvoiceDialog.tsx

@@ -0,0 +1,194 @@
+import {
+  Dialog,
+  DialogBody,
+  DialogHeader,
+  IconButton,
+  Typography,
+} from "@material-tailwind/react";
+import React, { useEffect, useState } from "react";
+
+import { useInvoice } from "../hooks/useInvoice";
+import { _useScopedI18n } from "../i18n/client";
+import { handleDownload } from "../utils/app.util";
+import { notification } from "../utils/notifications.util";
+import AppLoadingComponent from "./AppLoadingComponent";
+
+type RequestInvoiceDialogProps = {
+  open: boolean;
+  isShipping: boolean;
+  orderId: string;
+  setOpen: (value: boolean) => void;
+};
+
+export function RequestInvoiceDialog({
+  open,
+  isShipping = false,
+  setOpen,
+  orderId,
+}: RequestInvoiceDialogProps) {
+  const scopeT = _useScopedI18n("invoice.requestProcessingDialog");
+  const { generateOrderInvoiceAPI, generateShippingOrderInvoiceAPI } =
+    useInvoice();
+  const [, setAttemptCount] = useState(0);
+  const [allAttemptsFailed, setAllAttemptsFailed] = useState(false);
+
+  const invoiceAPI = isShipping
+    ? generateShippingOrderInvoiceAPI
+    : generateOrderInvoiceAPI;
+
+  useEffect(() => {
+    let timeoutIds: NodeJS.Timeout[] = [];
+
+    if (orderId) {
+      const firstCallTimeout = setTimeout(() => {
+        invoiceAPI.mutate({
+          orderId: orderId,
+        });
+        setAttemptCount(1);
+      }, 2000);
+      timeoutIds.push(firstCallTimeout);
+
+      const secondCallTimeout = setTimeout(() => {
+        invoiceAPI.mutate({
+          orderId: orderId,
+        });
+        setAttemptCount(2);
+      }, 5000);
+      timeoutIds.push(secondCallTimeout);
+
+      const thirdCallTimeout = setTimeout(() => {
+        invoiceAPI.mutate({
+          orderId: orderId,
+        });
+        setAttemptCount(3);
+      }, 7000);
+      timeoutIds.push(thirdCallTimeout);
+
+      const checkAttemptsTimeout = setTimeout(() => {
+        if (!invoiceAPI.isSuccess || !invoiceAPI.data?.data?.invoiceUrl) {
+          setAllAttemptsFailed(true);
+        }
+      }, 8000);
+      timeoutIds.push(checkAttemptsTimeout);
+    }
+
+    return () => {
+      timeoutIds.forEach((id) => clearTimeout(id));
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [orderId]);
+
+  useEffect(() => {
+    if (invoiceAPI?.isSuccess && invoiceAPI.data?.link) {
+      handleDownload(invoiceAPI.data?.link, orderId.toString());
+      setOpen(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [invoiceAPI?.isSuccess]);
+
+  useEffect(() => {
+    if (generateOrderInvoiceAPI?.isError) {
+      notification.notifyError("something went wrong.");
+      setOpen(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [generateOrderInvoiceAPI?.isError]);
+
+  return (
+    <>
+      <Dialog open={open} size="xs" handler={() => {}} className="p-2 md:p-5">
+        <DialogHeader className="p-0">
+          <div className="text-right size-full">
+            <IconButton
+              color="blue-gray"
+              size="sm"
+              variant="text"
+              onClick={() => {
+                setOpen(false);
+              }}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+                className="h-5 w-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </IconButton>
+          </div>
+        </DialogHeader>
+        <DialogBody className="flex flex-col items-center gap-8 text-center">
+          {allAttemptsFailed ? (
+            <>
+              <div>
+                <Typography
+                  variant="h3"
+                  className="text-xl text-black-500 mb-4"
+                >
+                  {scopeT("failedTitle") || "Unable to Generate Invoice"}
+                </Typography>
+                <Typography
+                  variant="lead"
+                  className="text-sm font-medium text-slate-500 mb-6"
+                >
+                  {scopeT("failedMessage") ||
+                    "We couldn't generate your invoice at this time. Please try again."}
+                </Typography>
+              </div>
+
+              <div className="bg-gray-50 py-4 px-9 border border-slate-100 rounded-lg">
+                <Typography
+                  variant="h6"
+                  className="text-xs leading-5 font-medium text-black-500"
+                >
+                  {scopeT("orderId")} : {orderId}
+                </Typography>
+              </div>
+            </>
+          ) : (
+            <>
+              <div>
+                <AppLoadingComponent />
+                <Typography variant="h3" className="text-xl text-black-500">
+                  {scopeT("title")}...
+                </Typography>
+              </div>
+
+              <div className="bg-gray-50 py-4 px-9 border border-slate-100 rounded-lg">
+                <Typography
+                  variant="h6"
+                  className="text-xs leading-5 font-medium text-black-500"
+                >
+                  {scopeT("orderId")} : {orderId}
+                </Typography>
+              </div>
+
+              <div>
+                <Typography
+                  variant="lead"
+                  className="text-sm font-medium text-slate-500 mb-3"
+                >
+                  {scopeT("subTitle")}
+                </Typography>
+
+                <Typography
+                  variant="lead"
+                  className="text-sm font-medium text-slate-500"
+                >
+                  {scopeT("message")}
+                </Typography>
+              </div>
+            </>
+          )}
+        </DialogBody>
+      </Dialog>
+    </>
+  );
+}