@lmnto/h-mall-shared 1.0.1

package/shared/components/EditAddressFormComponent.tsx

@@ -0,0 +1,254 @@
+import { FormEventHandler, useCallback, useEffect, useState } from "react";
+import { UseFormReturn } from "react-hook-form";
+
+import ButtonCustom from "../components/Button";
+import Inputfield from "../components/Inputfield";
+import { PhoneNumberCountries } from "../components/PhoneNumberCountries";
+import { SelectCountries } from "../components/SelectCountries";
+import { useAddressForm } from "../hooks/useAddressForm";
+import { _useScopedI18n } from "../i18n/client";
+import { countriesStore } from "../stores/countriesStore";
+import { useFormStore } from "../stores/formStore";
+import { UserAddress } from "../types/cart";
+import { SelectCities } from "./SelectCities";
+import { SelectStates } from "./SelectStates";
+
+export type EditAddressFormComponentProps = {
+  formId: string;
+  isLoading: boolean;
+  forShipping?: boolean;
+  proceedSubmit: FormEventHandler<HTMLButtonElement>;
+  selectedAddress?: UserAddress[];
+  onCancel?: () => void;
+};
+
+export default function EditAddressFormComponent({
+  formId,
+  isLoading,
+  proceedSubmit,
+  selectedAddress,
+  forShipping = false,
+}: EditAddressFormComponentProps) {
+  const scopeT = _useScopedI18n("sharedComponents.addressFormComponent");
+
+  const [fieldValue, setFieldValue] = useState(selectedAddress || {});
+
+  const { reactHookUseForm } = useFormStore();
+  const { watch } =
+    (reactHookUseForm as { [key: string]: UseFormReturn<any> })?.[formId] ?? {};
+  const countryIdField = watch?.(`countryId`);
+  const zipCodeExampleField = watch?.(`zipCodeExample`);
+
+  const {
+    states,
+    cities,
+    loading,
+    loadingCities,
+    setLoading,
+    setLoadingCities,
+  } = countriesStore();
+
+  const { getStatesByCountry, getCityByStateAndCountry } = useAddressForm();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFieldValue((prevValue) => ({
+      ...prevValue,
+      [name]: value, // Dynamically update the field based on its name
+    }));
+  };
+
+  // const { countries } = countriesStore();
+  // const selectedCountry = countries.find((country) => country.id === countryIdField);
+
+  const handleGetCities = useCallback(
+    (state: any) => {
+      setLoadingCities(true);
+      getCityByStateAndCountry.mutate(state);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const handleGetState = useCallback(
+    async (country: number) => {
+      setFieldValue((prevValue) => ({
+        ...prevValue,
+        city: null,
+        state: null,
+      }));
+      setLoading(true);
+      setLoadingCities(true);
+
+      const data = await getStatesByCountry.mutateAsync(country);
+      if (data && data?.length > 0) {
+        setLoadingCities(false);
+      } else {
+        handleGetCities({
+          countryId: country,
+        });
+      }
+    },
+    [setLoading, setLoadingCities, handleGetCities, getStatesByCountry],
+  );
+
+  const handleStateFromTheOldAddress = useCallback(
+    async () => {
+      await handleGetState(fieldValue?.["country"]?.id);
+      setLoadingCities(true);
+      await getCityByStateAndCountry.mutateAsync({
+        countryId: fieldValue?.["country"]?.id,
+        stateId: states?.find((item) => item?.name === fieldValue?.["state"])
+          ?.id,
+      });
+      setLoadingCities(false);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  useEffect(() => {
+    handleStateFromTheOldAddress();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <form action="" method="post">
+        <div className="grid grid-cols-12 gap-y-4 md:gap-y-4 md:gap-x-4 mb-5">
+          <div className="col-span-12 md:col-span-6 relative">
+            <Inputfield
+              title={`${scopeT("firstName")} *`}
+              placeholder={scopeT("firstName")}
+              name="firstName"
+              formId={formId}
+              value={fieldValue["firstName"] || ""}
+              onChange={handleChange}
+            />
+          </div>
+          <div className="col-span-12 md:col-span-6 relative">
+            <Inputfield
+              title={`${scopeT("lastName")} *`}
+              placeholder={scopeT("lastName")}
+              name="lastName"
+              formId={formId}
+              value={fieldValue["lastName"] || ""}
+              onChange={handleChange}
+            />
+          </div>
+          <div className="col-span-12 relative">
+            <Inputfield
+              title={`${scopeT("address")} *`}
+              placeholder={scopeT("address")}
+              name="address"
+              formId={formId}
+              value={fieldValue["address"] || ""}
+              onChange={handleChange}
+            />
+          </div>
+          <div className="col-span-12 relative">
+            <Inputfield
+              title={`${scopeT("flatHouseBuilding")}`}
+              placeholder={`${scopeT("flatHouseBuilding")}`}
+              name="buildingInfo"
+              formId={formId}
+              value={fieldValue["buildingInfo"] || ""}
+              onChange={handleChange}
+            />
+          </div>
+          <div className="col-span-12 md:col-span-6 relative">
+            <SelectCountries
+              title={`${scopeT("selectCountry")} *`}
+              placeholder={scopeT("selectCountry")}
+              name="countryId"
+              formId={formId}
+              onCountrySelected={handleGetState}
+              className={undefined}
+              forShipping={forShipping}
+            />
+          </div>
+          <div className="col-span-12 md:col-span-6 relative">
+            {states?.length > 0 && countryIdField ? (
+              <SelectStates
+                title={`${scopeT("state")} *`}
+                className={undefined}
+                placeholder={scopeT("state")}
+                name="state"
+                formId={formId}
+                onStateSelected={handleGetCities}
+              />
+            ) : (
+              <Inputfield
+                title={`${scopeT("state")} *`}
+                className={undefined}
+                placeholder={scopeT("state")}
+                name="state"
+                formId={formId}
+                disabled={loading}
+                value={fieldValue["state"] || ""}
+                onChange={handleChange}
+              />
+            )}
+          </div>
+          <div className="col-span-12 md:col-span-6 relative">
+            {cities?.length > 0 && countryIdField ? (
+              <SelectCities
+                title={`${scopeT("city")} *`}
+                className={undefined}
+                placeholder={scopeT("city")}
+                name="city"
+                formId={formId}
+              />
+            ) : (
+              <Inputfield
+                title={`${scopeT("city")} *`}
+                className={undefined}
+                placeholder={scopeT("city")}
+                name="city"
+                formId={formId}
+                disabled={loadingCities}
+                value={fieldValue["city"] || ""}
+                onChange={handleChange}
+              />
+            )}
+          </div>
+          <div className="col-span-12 md:col-span-6 relative">
+            <Inputfield
+              title={`${scopeT("zipCode")} *`}
+              className={undefined}
+              name="postalCode"
+              formId={formId}
+              placeholder={
+                zipCodeExampleField && zipCodeExampleField.length > 0
+                  ? zipCodeExampleField
+                  : scopeT("zipCode")
+              }
+              format={
+                zipCodeExampleField && zipCodeExampleField.length > 0
+                  ? zipCodeExampleField
+                  : ""
+              }
+              value={fieldValue["postalCode"] || ""}
+              onChange={handleChange}
+            />
+          </div>
+          <div className="col-span-12 relative">
+            <PhoneNumberCountries formId={formId} fieldName="countryCode" />
+          </div>
+        </div>
+        <div className="flex gap-3 justify-end w-full">
+          <ButtonCustom
+            className="!text-sm !px-5 !py-3"
+            icon={undefined}
+            type="submit"
+            onClick={proceedSubmit}
+            loading={isLoading}
+            disabled={isLoading}
+          >
+            {scopeT("updateBtn")}
+          </ButtonCustom>
+        </div>
+      </form>
+    </>
+  );
+}

package/shared/components/EmptyCartMessageComponent.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { Typography } from "@material-tailwind/react";
+import Image from "next/image";
+
+import emptyBox from "../../public/img/empty-box.png";
+import { _useScopedI18n } from "../i18n/client";
+
+export default function EmptyCartMessageComponent() {
+  const scopeT = _useScopedI18n("sharedComponents.emptyCartMessageComponent");
+
+  return (
+    <>
+      <div className="flex items-center justify-center flex-col w-full h-full">
+        <Image src={emptyBox.src} alt="emptyBox" width={100} height={100} />
+        <Typography
+          variant="h6"
+          className="text-base font-medium text-slate-400"
+        >
+          {scopeT("title")}
+        </Typography>
+      </div>
+    </>
+  );
+}

package/shared/components/EmptyCartMessageForCartPage.tsx

@@ -0,0 +1,61 @@
+"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 EmptyCartMessageForCartPage() {
+  const scopeT = _useScopedI18n("sharedComponents.emptyCartMessageForCartPage");
+
+  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("subTitle")}
+          </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/EmptyLegacyOrderMessageForOrdersPage.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { Typography } from "@material-tailwind/react";
+import Image from "next/image";
+
+import emptyBox from "../../public/img/empty-box.png";
+import { _useScopedI18n } from "../i18n/client";
+
+export default function EmptyLegacyOrderMessageForOrdersPage() {
+  const scopeT = _useScopedI18n(
+    "sharedComponents.emptyLegacyOrderMessageForOrdersPage",
+  );
+
+  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('subTitle')}
+                        <Link
+                            href="https://kmall.io/auth"
+                            target="_blank"
+                            className="font-bold"
+                        >
+                            {scopeT('linkText')}
+                        </Link>
+                        {scopeT('message')}
+                    </Typography> */}
+        </div>
+      </div>
+    </>
+  );
+}

package/shared/components/EmptyOrderMessageForOrdersPage.tsx

@@ -0,0 +1,62 @@
+"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 EmptyOrderMessageForOrdersPage() {
+  const scopeT = _useScopedI18n(
+    "sharedComponents.emptyOrderMessageForOrdersPage",
+  );
+  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("subTitle")}
+          </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/EmptyOrderMessageForShippingOrdersPage.tsx

@@ -0,0 +1,62 @@
+"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 EmptyOrderMessageForShippingOrdersPage() {
+  const scopeT = _useScopedI18n(
+    "sharedComponents.emptyOrderMessageForShippingOrdersPage",
+  );
+  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("subTitle")}
+          </Typography>
+          <Typography
+            variant="h6"
+            className="text-center font-medium text-slate-400"
+          >
+            {scopeT("message")}
+          </Typography>
+
+          <ButtonCustom
+            onClick={() => push(ROUTES.dashboard.orders)}
+            className="font-normal mt-7"
+            icon={undefined}
+          >
+            {scopeT("redirectBtn")}
+          </ButtonCustom>
+        </div>
+      </div>
+    </>
+  );
+}

package/shared/components/Footer.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Typography } from "@material-tailwind/react";
+
+import { ROUTES } from "../constants/routes";
+import { _useScopedI18n } from "../i18n/client";
+import { BrandIcon } from "./icons/BrandIcon";
+
+export function Footer() {
+  //
+  const scopeT = _useScopedI18n("sharedComponents.footerComponent");
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <>
+      <footer
+        className="bg-white rounded-none fixed bottom-0 z-[9999]
+                p-3 lg:p-5 gap-3 lg:gap-5
+                flex flex-col items-center
+                xl:flex xl:flex-row xl:justify-between xl:items-center
+                w-full left-0
+                lg:w-[calc(100%-190px)] lg:left-[190px]
+                xl:w-[calc(100%-215px)] xl:left-[215px]
+                "
+      >
+        <div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-10 ">
+          <div>
+            <a href="/products">
+              <div className="flex items-baseline justify-center gap-2 w-28 mx-auto">
+                <BrandIcon width={120} height={34} />
+              </div>
+            </a>
+          </div>
+          <ul className="flex gap-3 lg:gap-5 items-center text-center">
+            <li>
+              <a
+                href={ROUTES.dashboard.termsAndConditions}
+                className="text-xs md:text-sm font-medium text-black-400 hover:text-purple-500 hover:underline"
+                target="_blank"
+              >
+                {scopeT("termsAndC")}
+              </a>
+            </li>
+            <li>
+              <a
+                href={ROUTES.dashboard.privacyPolicy}
+                className="text-xs md:text-sm font-medium text-black-400 hover:text-purple-500 hover:underline"
+                target="_blank"
+              >
+                {scopeT("privacy")}
+              </a>
+            </li>
+            <li>
+              <a
+                href={ROUTES.dashboard.riskDisclosure}
+                className="text-xs md:text-sm font-medium text-black-400 hover:text-purple-500 hover:underline"
+                target="_blank"
+              >
+                {scopeT("risk")}
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <Typography className="text-xs md:text-sm font-medium text-gray-500 text-center">
+          COPYRIGHT ©{currentYear} | HMall Technologies LTD All Rights Reserved
+        </Typography>
+      </footer>
+    </>
+  );
+}

package/shared/components/GreetingDialog.tsx

@@ -0,0 +1,96 @@
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  IconButton,
+  Typography,
+} from "@material-tailwind/react";
+import React, { useCallback } from "react";
+import { IoIosCloseCircleOutline } from "react-icons/io";
+
+import {
+  GREETING_DIALOG_STATUS,
+  GREETING_DIALOG_STATUS_KEY,
+} from "../constants/app";
+import useCustomRouter from "../hooks/useCustomRouter";
+import ButtonCustom from "./Button";
+
+export function GreetingDialog({ handleOpen, open }) {
+  const { push } = useCustomRouter();
+
+  const buyNowAction = useCallback(() => {
+    push(`/products?category=subscription`);
+  }, [push]);
+
+  return (
+    <>
+      <Dialog size="xs" open={open} handler={handleOpen} className="px-3 py-4">
+        <DialogHeader className="justify-center">
+          <Typography
+            variant="h2"
+            className=" text-xl font-semibold text-black-500 mb-0"
+          >
+            🌟 Exciting News! 🌟
+          </Typography>
+          <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>
+          <Typography
+            variant="h6"
+            className="text-sm leading-6 font-normal text-black-400 text-center"
+          >
+            🌟 We’re thrilled to announce the launch of the Homni Advantage
+            Membership! This exclusive membership is designed for users who want
+            to unlock premium benefits and features. 🎉 Be among the first to
+            explore this exciting new offering! 👉 Visit the Subscription page
+            now to learn more and grab your membership today! Don’t miss out on
+            the chance to elevate your experience with Homni Advantage. 🚀
+          </Typography>
+        </DialogBody>
+        <DialogFooter className="justify-center">
+          <ButtonCustom
+            icon={""}
+            className={""}
+            onClick={async () => {
+              buyNowAction();
+              await localStorage.setItem(
+                GREETING_DIALOG_STATUS_KEY,
+                GREETING_DIALOG_STATUS.seen,
+              );
+              handleOpen(false);
+            }}
+          >
+            Buy Now
+          </ButtonCustom>
+          {/* <ButtonCustom
+                        icon={''}
+                        onClick={async () => {
+                            await localStorage.setItem(
+                                GREETING_DIALOG_STATUS_KEY,
+                                GREETING_DIALOG_STATUS.seen,
+                            );
+                            handleOpen(false);
+                        }}
+                        className="mr-1"
+                    >
+                        <span>close</span>
+                    </ButtonCustom> */}
+        </DialogFooter>
+      </Dialog>
+    </>
+  );
+}