@lmnto/h-mall-shared 1.0.1

package/shared/components/LoadingIconComponent.tsx

@@ -0,0 +1,284 @@
+"use client";
+
+import React from "react";
+
+export default function LoadingIconComponent() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid"
+      style={{
+        shapeRendering: "auto",
+        display: "block",
+        background: "transparent",
+      }}
+      width="150"
+      height="150"
+    >
+      <g>
+        <g transform="rotate(0 50 50)">
+          <rect
+            fill="#c5cef7"
+            height="21"
+            width="7"
+            ry="5.25"
+            rx="3.5"
+            y="7.5"
+            x="46.5"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.9230769230769231s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(27.692307692307693 50 50)">
+          <rect
+            fill="#c5cef7"
+            height="21"
+            width="7"
+            ry="5.25"
+            rx="3.5"
+            y="7.5"
+            x="46.5"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.8461538461538461s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(55.38461538461539 50 50)">
+          <rect
+            fill="#c5cef7"
+            height="21"
+            width="7"
+            ry="5.25"
+            rx="3.5"
+            y="7.5"
+            x="46.5"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.7692307692307693s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(83.07692307692308 50 50)">
+          <rect
+            fill="#c5cef7"
+            height="21"
+            width="7"
+            ry="5.25"
+            rx="3.5"
+            y="7.5"
+            x="46.5"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.6923076923076923s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(110.76923076923077 50 50)">
+          <rect
+            fill="#c5cef7"
+            height="21"
+            width="7"
+            ry="5.25"
+            rx="3.5"
+            y="7.5"
+            x="46.5"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.6153846153846154s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(138.46153846153845 50 50)">
+          <rect
+            fill="#c5cef7"
+            height="21"
+            width="7"
+            ry="5.25"
+            rx="3.5"
+            y="7.5"
+            x="46.5"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.5384615384615384s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(166.15384615384616 50 50)">
+          <rect
+            fill="#c5cef7"
+            height="21"
+            width="7"
+            ry="5.25"
+            rx="3.5"
+            y="7.5"
+            x="46.5"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.46153846153846156s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(193.84615384615384 50 50)">
+          <rect
+            fill="#c5cef7"
+            height="21"
+            width="7"
+            ry="5.25"
+            rx="3.5"
+            y="7.5"
+            x="46.5"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.38461538461538464s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(221.53846153846155 50 50)">
+          <rect
+            fill="#c5cef7"
+            height="21"
+            width="7"
+            ry="5.25"
+            rx="3.5"
+            y="7.5"
+            x="46.5"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.3076923076923077s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(249.23076923076923 50 50)">
+          <rect
+            fill="#c5cef7"
+            height="21"
+            width="7"
+            ry="5.25"
+            rx="3.5"
+            y="7.5"
+            x="46.5"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.23076923076923078s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(276.9230769230769 50 50)">
+          <rect
+            fill="#c5cef7"
+            height="21"
+            width="7"
+            ry="5.25"
+            rx="3.5"
+            y="7.5"
+            x="46.5"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.15384615384615385s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(304.61538461538464 50 50)">
+          <rect
+            fill="#c5cef7"
+            height="21"
+            width="7"
+            ry="5.25"
+            rx="3.5"
+            y="7.5"
+            x="46.5"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.07692307692307693s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(332.3076923076923 50 50)">
+          <rect
+            fill="#c5cef7"
+            height="21"
+            width="7"
+            ry="5.25"
+            rx="3.5"
+            y="7.5"
+            x="46.5"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="0s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g></g>
+      </g>
+    </svg>
+  );
+}

package/shared/components/OrderNotFoundComponent.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 OrderNotFoundComponent() {
+  //
+  const scopeT = _useScopedI18n("sharedComponents.orderNotFoundComponent");
+
+  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.orders)}
+            className="font-normal mt-7"
+            icon={undefined}
+          >
+            {scopeT("redirectBtn")}
+          </ButtonCustom>
+        </div>
+      </div>
+    </>
+  );
+}

package/shared/components/PageHeader.tsx

@@ -0,0 +1,42 @@
+import { Typography } from "@material-tailwind/react";
+import { useMemo } from "react";
+
+export type PageHeaderProps = {
+  name: string;
+  size?: "title" | "subtitle";
+  className?: string;
+};
+
+export default function PageHeader({
+  name,
+  size = "subtitle",
+  className,
+}: PageHeaderProps) {
+  const renderTitle = useMemo(() => {
+    if (size == "title")
+      return (
+        <>
+          <Typography
+            variant="h5"
+            className={`text-base font-medium text-black-500 mb-3 ${className}`}
+          >
+            {name}
+          </Typography>
+        </>
+      );
+
+    if (size == "subtitle")
+      return (
+        <>
+          <Typography
+            variant="h6"
+            className={`text-sm font-medium text-black-500 mb-3 ${className}`}
+          >
+            {name}
+          </Typography>
+        </>
+      );
+  }, [size, name, className]);
+
+  return <>{renderTitle}</>;
+}

package/shared/components/PhoneNumberCountries.tsx

@@ -0,0 +1,133 @@
+import {
+  Button,
+  Menu,
+  MenuHandler,
+  MenuItem,
+  MenuList,
+  Typography,
+} from "@material-tailwind/react";
+import React, { useEffect, useState } from "react";
+import { UseFormReturn } from "react-hook-form";
+import { IoChevronDownOutline } from "react-icons/io5";
+
+import { _useScopedI18n } from "../i18n/client";
+import { countriesStore } from "../stores/countriesStore";
+import { useFormStore } from "../stores/formStore";
+import { renderTitleWithRedAsterisk } from "../utils/app.util";
+import CustomNextImage from "./CustomNextImage";
+import Inputfield from "./Inputfield";
+
+export function PhoneNumberCountries({
+  formId,
+  fieldName,
+}: {
+  formId: string;
+  fieldName: string;
+}) {
+  const scopeT = _useScopedI18n("sharedComponents.phoneNumberComponent");
+
+  const { countries } = countriesStore();
+  const [country, setCountry] = React.useState(0);
+  const [selectedCallingCode, setSelectedCallingCode] = useState<number>();
+
+  const { reactHookUseForm } = useFormStore();
+  const form = (reactHookUseForm as { [key: string]: UseFormReturn<any> })?.[
+    formId
+  ];
+  const setValue = form?.setValue;
+  const watch = form?.watch;
+  const fieldKey = fieldName ?? fieldName?.toLowerCase();
+
+  const watchCountryIdField = watch?.(`countryId`);
+
+  const handleOnChange = (code: number, index: number) => {
+    if (!setValue) return;
+
+    setCountry(index);
+    setTimeout(() => {
+      setValue(`${fieldKey}`, code, {
+        shouldValidate: true,
+      });
+
+      setSelectedCallingCode(code);
+      const selectedCountry = countries?.find((c) => +c.callingCode == code);
+      setValue("minPhoneLength", selectedCountry.minPhoneLength);
+    }, 250);
+  };
+
+  useEffect(() => {
+    if (!setValue || !countries?.length) return;
+
+    const selectedCountry = countries?.find(
+      (c) => c.id == +watchCountryIdField,
+    );
+    const { callingCode, minPhoneLength } =
+      selectedCountry ?? countries?.[country];
+
+    (async () => await setSelectedCallingCode(+callingCode))();
+
+    setValue(`${fieldKey}`, +callingCode, {
+      shouldValidate: true,
+    });
+    setValue("minPhoneLength", minPhoneLength);
+  }, [fieldKey, countries, country, watchCountryIdField, setValue]);
+
+  return (
+    <>
+      <Typography
+        variant="lead"
+        className="text-xs font-medium text-black-400 mb-1"
+      >
+        {renderTitleWithRedAsterisk(`${scopeT("title")} *`)}
+      </Typography>
+      <div className="relative flex items-center w-auto z-90 mobileNumberField">
+        <Menu placement="bottom-start">
+          <MenuHandler>
+            <Button
+              ripple={false}
+              variant="text"
+              className="mt-1 p-3 text-sm flex items-center justify-between h-10 font-medium gap-x-1.5 rounded-md border border-r-0 rounded-r-none border-slate-100  bg-slate-50/60 hover:bg-slate-50 focus:bg-slate-50 active:bg-slate-50/60  whitespace-nowrap"
+            >
+              <div>+{selectedCallingCode}</div>
+              <div className="h-5 w-3">
+                <IoChevronDownOutline className="text-black-400 h-5 w-4 text-base" />
+              </div>
+            </Button>
+          </MenuHandler>
+          <MenuList className=" absolute max-h-[20rem] max-w-[18rem] z-[999999]">
+            {countries?.map((Item, index): any => {
+              return (
+                <MenuItem
+                  key={Item.name}
+                  value={Item.name}
+                  className="flex items-center gap-2"
+                  onClick={() => handleOnChange(+Item.callingCode, index)}
+                >
+                  <CustomNextImage
+                    src={Item.flag}
+                    alt={Item.name}
+                    className="h-4 w-5 rounded-sm object-cover"
+                    height={30}
+                    width={30}
+                  />
+                  {Item.name}{" "}
+                  <span className="ml-auto">{Item.callingCode}</span>
+                </MenuItem>
+              );
+            })}
+          </MenuList>
+        </Menu>
+        <Inputfield
+          title={""}
+          type="number"
+          className="rounded-l-none flex-1"
+          placeholder={"00 - 000 - 000"}
+          value={undefined}
+          readOnly={undefined}
+          name="phone"
+          formId={formId}
+        />
+      </div>
+    </>
+  );
+}

package/shared/components/PhoneShippingDialog.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  Typography,
+} from "@material-tailwind/react";
+import React, { useState } from "react";
+
+import shippingIcon from "../../public/img/shippingIcon.png";
+// import { _useScopedI18n } from '../i18n/client';
+import ButtonCustom from "./Button";
+import CustomNextImage from "./CustomNextImage";
+
+export function PhoneShippingDialog() {
+  //
+  // const scopeT = _useScopedI18n('sharedComponents.buySubscriptionComponent');
+
+  const [open, setOpen] = useState(true);
+  const handleClose = () => setOpen(!open);
+
+  return (
+    <>
+      <Dialog
+        open={open}
+        handler={handleClose}
+        size="xs"
+        className="md:!max-w-[500px] md:!min-w-[500px] p-0"
+      >
+        <DialogHeader className="phoneShippingBG 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={shippingIcon.src}
+              alt="SessionIcon"
+              width={80}
+              height={80}
+            />
+            <Typography
+              variant="h3"
+              className="text-base md:text-xl font-semibold text-white text-center uppercase"
+            >
+              Gen 1 Phones Ready for Shipping!
+            </Typography>
+          </div>
+        </DialogHeader>
+
+        <DialogBody className="text-sm  md:text-base text-slate-400 font-medium text-center pt-0">
+          <Typography
+            variant="h5"
+            className="text-sm md:text-xl font-medium text-black-500 mb-3"
+          >
+            Great news!
+          </Typography>
+
+          <Typography
+            variant="h5"
+            className="text-sm md:text-base font-medium text-black-400"
+          >
+            The Gen 1 phones you ordered are now ready to ship. Please proceed
+            to the Legacy Order Page to complete your delivery payment and
+            initiate shipping.
+          </Typography>
+        </DialogBody>
+        <DialogFooter className="gap-5 justify-end items-end">
+          <ButtonCustom icon={undefined} variant="text" onClick={handleClose}>
+            Cancel
+          </ButtonCustom>
+          <ButtonCustom icon={undefined} onClick={handleClose}>
+            Proceed
+          </ButtonCustom>
+        </DialogFooter>
+      </Dialog>
+    </>
+  );
+}

package/shared/components/PickupDialog.tsx

@@ -0,0 +1,92 @@
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  IconButton,
+  Typography,
+} from "@material-tailwind/react";
+import Link from "next/link";
+import React from "react";
+import { IoIosCloseCircleOutline } from "react-icons/io";
+
+import ButtonCustom from "./Button";
+
+export function PickupDialog({
+  handleOpen,
+  open,
+  proceedToPayment,
+  isLoading,
+}) {
+  return (
+    <>
+      <Dialog
+        size="xs"
+        open={open}
+        handler={handleOpen}
+        className="px-3 py-4 max-xs:px-0"
+      >
+        <DialogHeader className="justify-center pt-5 max-xs:px-0">
+          <Typography
+            variant="h2"
+            className="text-xl max-xs:text-[13px] mt-5 font-semibold text-black-500 mb-0 whitespace-nowrap overflow-hidden"
+          >
+            ⬆️ Pick-Up Confirmation Required ⬆️
+          </Typography>
+          <IconButton
+            size="sm"
+            variant="text"
+            className="!absolute right-3 top-3 outline-none"
+            onClick={async () => {
+              handleOpen(false);
+            }}
+          >
+            <IoIosCloseCircleOutline className="w-6 h-6 text-gray-500 cursor-pointer" />
+          </IconButton>
+        </DialogHeader>
+        <DialogBody className="">
+          <Typography
+            variant="h6"
+            className="text-sm max-xs:text-[12px] font-semibold leading-6 text-black-400 text-center"
+          >
+            Thank you for choosing the Pick-Up Option!
+          </Typography>
+          <Typography
+            variant="h6"
+            className="text-sm max-xs:text-[12px] font-semibold leading-6 text-black-400 text-center"
+          >
+            To schedule your Pick-Up, please Contact the Horys Technologies Team
+            at:{" "}
+            <Link
+              className="text-purple-500"
+              href="https://support.hmall.shop"
+              target="_blank"
+            >
+              {" "}
+              HMall Support
+            </Link>
+          </Typography>
+          <Typography
+            variant="h6"
+            className="text-sm max-xs:text-[12px] font-semibold leading-6 text-black-400 text-center"
+          >
+            Your order will be ready once the Pick-Up is Confirmed. 🚀
+          </Typography>
+        </DialogBody>
+        <DialogFooter className="justify-center">
+          <ButtonCustom
+            icon={""}
+            loading={isLoading}
+            disabled={isLoading}
+            className={""}
+            onClick={async () => {
+              await proceedToPayment();
+            }}
+          >
+            Continue
+          </ButtonCustom>
+        </DialogFooter>
+      </Dialog>
+    </>
+  );
+}