@lmnto/h-mall-shared 1.0.1

package/shared/components/SelectPickUpStore.tsx

@@ -0,0 +1,131 @@
+import { Typography } from "@material-tailwind/react";
+import React from "react";
+import {
+  HTMLInputTypeAttribute,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import { UseFormReturn } from "react-hook-form";
+
+import { countriesStore } from "../stores/countriesStore";
+import { useFormStore } from "../stores/formStore";
+import { SelectWithSearch } from "./SelectComponent";
+
+export interface InputFieldProps {
+  title: string;
+  placeholder?: string;
+  type?: HTMLInputTypeAttribute;
+  name?: string;
+  formId: string;
+  onStateSelected?: (value: number | string | any) => void;
+}
+
+export function SelectPickUpStore({
+  className,
+  title,
+  placeholder,
+  name,
+  formId,
+  onStateSelected,
+}) {
+  const { stores, setStores } = countriesStore();
+
+  const { reactHookUseForm } = useFormStore();
+  const { register, formState, setValue, watch } =
+    (reactHookUseForm as { [key: string]: UseFormReturn<any> })?.[formId] ?? {};
+  const { errors } = formState ?? {};
+  const [error, setError] = useState<any>(null);
+  const fieldKey = name ?? title?.toLowerCase();
+
+  const watchField = watch?.(`${fieldKey}`);
+  const formValues = watch?.();
+
+  const checkError = useCallback(() => {
+    if (errors?.[fieldKey]) {
+      setError(errors[fieldKey]);
+    } else {
+      setError(null);
+    }
+  }, [errors, fieldKey]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      checkError();
+    }, 100);
+  }, [watchField, checkError]);
+
+  const handleOnChange = (value: any) => {
+    setValue(`${fieldKey}`, +value.id, {
+      shouldValidate: true,
+    });
+    onStateSelected({
+      storeId: value.id,
+      countryId: formValues.countryId,
+    });
+  };
+  useEffect(() => {
+    setStores([]);
+  }, [setStores]);
+
+  if (!reactHookUseForm || !register) return <></>;
+
+  return (
+    <>
+      <Typography
+        variant="lead"
+        className="text-xs font-medium text-black-400 mb-1"
+      >
+        {title}
+      </Typography>
+
+      <SelectWithSearch
+        maxHeightOpened={235}
+        className={`p-3
+                    w-full min-w-full h-10 text-sm
+                    bg-white rounded-md	
+                    text-gray-900 
+                    shadow-gray-200/5 
+                    ring-4 ring-transparent 
+                    placeholder:text-gray-300 placeholder:opacity-100 
+                    !border !border-slate-100 !border-t-slate-100  
+                    ${error ? "!border-red-500 ring-red-50 bg-red-100/10" : "!border-t-slate-100"} 
+                    focus:!border-slate-300                  
+                    focus:ring-gray-300/10 
+                    focus:bg-offWhite
+                    shadow-none ${className}
+                `}
+        items={stores}
+        searchKey="name"
+        placeholder={placeholder}
+        renderOption={(_item, state) => {
+          if (state)
+            return (
+              <div
+                key={state.id}
+                className={
+                  state.id === watchField
+                    ? "flex items-center gap-2 pointer-events-none text-sm font-medium"
+                    : "flex items-center gap-2 text-sm font-medium"
+                }
+              >
+                {state.name}
+              </div>
+            );
+        }}
+        value={stores?.find((item) => item.id === watchField) || null}
+        setValue={(value) => {
+          handleOnChange(value);
+        }}
+      />
+      {error && (
+        <Typography
+          variant="lead"
+          className="text-red-500 font-normal text-xs  px-1 block md:absolute -bottom-[1.1rem] left-0"
+        >
+          {error?.message}
+        </Typography>
+      )}
+    </>
+  );
+}

package/shared/components/SelectStates.tsx

@@ -0,0 +1,144 @@
+import { Typography } from "@material-tailwind/react";
+import React, { useMemo } from "react";
+import {
+  HTMLInputTypeAttribute,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import { UseFormReturn } from "react-hook-form";
+
+import { countriesStore } from "../stores/countriesStore";
+import { useFormStore } from "../stores/formStore";
+import { renderTitleWithRedAsterisk } from "../utils/app.util";
+import { SelectWithSearch } from "./SelectComponent";
+
+export interface InputFieldProps {
+  title: string;
+  placeholder?: string;
+  type?: HTMLInputTypeAttribute;
+  name?: string;
+  forShipping?: boolean;
+  formId: string;
+  onStateSelected?: (value: number | string | any) => void;
+}
+
+export function SelectStates({
+  className,
+  title,
+  placeholder,
+  name,
+  formId,
+  onStateSelected,
+  forShipping = false,
+}) {
+  const { states, shippingStates, setCities, setShippingCities } =
+    countriesStore();
+  const filteredStates = useMemo(() => {
+    return forShipping ? shippingStates : states;
+  }, [states, shippingStates, forShipping]);
+  const { reactHookUseForm } = useFormStore();
+  const { register, formState, setValue, watch } =
+    (reactHookUseForm as { [key: string]: UseFormReturn<any> })?.[formId] ?? {};
+  const { errors } = formState ?? {};
+  const [error, setError] = useState<any>(null);
+  const fieldKey = name ?? title?.toLowerCase();
+
+  const watchField = watch?.(`${fieldKey}`);
+  const formValues = watch?.();
+
+  const checkError = useCallback(() => {
+    if (errors?.[fieldKey]) {
+      setError(errors[fieldKey]);
+    } else {
+      setError(null);
+    }
+  }, [errors, fieldKey]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      checkError();
+    }, 100);
+  }, [watchField, checkError]);
+
+  const handleOnChange = (value: any) => {
+    setValue(`${fieldKey}`, +value.id, {
+      shouldValidate: true,
+    });
+    if (forShipping) {
+      setShippingCities([]);
+    } else {
+      setCities([]);
+    }
+    setValue("city", "");
+    onStateSelected({
+      stateId: value.id,
+      countryId: formValues.countryId,
+    });
+  };
+
+  if (!reactHookUseForm || !register) return <></>;
+
+  return (
+    <>
+      <Typography
+        variant="lead"
+        className="text-xs font-medium text-black-400 mb-1"
+      >
+        {renderTitleWithRedAsterisk(title)}
+      </Typography>
+
+      <SelectWithSearch
+        maxHeightOpened={235}
+        className={` p-3
+                    w-full min-w-full h-10 text-base
+                    bg-white rounded-md
+                    text-gray-900 
+                    shadow-gray-200/5 
+                    ring-4 ring-transparent 
+                    placeholder:text-gray-300 placeholder:opacity-100 
+                    !border !border-slate-100 !border-t-slate-100  
+                    ${error ? "!border-red-500 !border-t-red-500 ring-red-50 bg-red-100/10" : "!border-t-slate-100"} 
+                    focus:!border-slate-300                  
+                    focus:ring-gray-300/10 
+                    focus:bg-offWhite
+                    shadow-none ${className}
+                    `}
+        items={filteredStates}
+        searchKey="name"
+        placeholder={placeholder}
+        renderOption={(_item, state) => {
+          if (state)
+            return (
+              <div
+                key={state.id}
+                className={
+                  state.id === watchField
+                    ? "flex items-center gap-2 pointer-events-none text-xs font-normal"
+                    : "flex items-center gap-2 text-xs font-normal"
+                }
+              >
+                {state.name}
+              </div>
+            );
+        }}
+        value={
+          filteredStates?.find((item) => item.id === watchField) ||
+          filteredStates?.find((item) => item.name === watchField) ||
+          null
+        }
+        setValue={(value) => {
+          handleOnChange(value);
+        }}
+      />
+      {error && (
+        <Typography
+          variant="lead"
+          className="text-red-500 font-normal text-xs  px-1 block md:absolute -bottom-[1.1rem] left-0"
+        >
+          {error?.message}
+        </Typography>
+      )}
+    </>
+  );
+}

package/shared/components/ServerTime.tsx

@@ -0,0 +1,68 @@
+import { Typography } from "@material-tailwind/react";
+import { useEffect, useRef, useState } from "react";
+
+import { _useScopedI18n } from "../i18n/client";
+
+export type ServerTimeProps = {
+  className?: string;
+  overrideClass?: boolean;
+};
+
+export type TimerType = {
+  hours: string;
+  minutes: string;
+  seconds: string;
+};
+
+export default function ServerTime({
+  className,
+  overrideClass,
+}: ServerTimeProps) {
+  //
+  const scopeT = _useScopedI18n("sharedComponents.serverTime");
+
+  const timerInterval = useRef<NodeJS.Timeout | undefined>(undefined);
+
+  const [time, setTime] = useState<TimerType>({
+    hours: `00`,
+    minutes: `00`,
+    seconds: `00`,
+  });
+
+  useEffect(() => {
+    timerInterval.current = setInterval(async () => {
+      const now = new Date();
+      const hours = now.getUTCHours().toString().padStart(2, "0");
+      const minutes = now.getUTCMinutes().toString().padStart(2, "0");
+      const seconds = now.getUTCSeconds().toString().padStart(2, "0");
+      setTime({
+        hours,
+        minutes,
+        seconds,
+      });
+    }, 1000);
+
+    return () => timerInterval.current && clearInterval(timerInterval.current);
+  }, []);
+
+  return (
+    <>
+      <Typography
+        variant="h6"
+        className={
+          !overrideClass
+            ? `flex flex-row text-xs font-medium text-center text-black-400 bg-gray-50 py-3 md:py-2.5 px-4 rounded-xl justify-center whitespace-nowrap ${className}`
+            : className
+        }
+      >
+        {scopeT("title")} :
+        <div className="flex">
+          <span className="w-5 text-center">{time.hours}</span>:
+          <span className="w-5 text-center">{time.minutes}</span>:
+          <span className="w-5 text-center mr-1">{time.seconds}</span>
+        </div>{" "}
+        UTC
+      </Typography>
+    </>
+  );
+}

package/shared/components/SessionDialogComponent.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+} from "@material-tailwind/react";
+import React from "react";
+
+import SessionIcon from "../../public/img/session-expired.png";
+import { _useScopedI18n } from "../i18n/client";
+import ButtonCustom from "./Button";
+import CustomNextImage from "./CustomNextImage";
+
+export type SessionDialogComponentProps = {
+  isExpired: boolean;
+  callBackFn?: () => void;
+};
+
+export function SessionDialogComponent({
+  isExpired,
+  callBackFn,
+}: SessionDialogComponentProps) {
+  //
+  const scopeT = _useScopedI18n("sharedComponents.sessionDialogComponent");
+
+  return (
+    <>
+      <Dialog
+        open={isExpired}
+        handler={callBackFn}
+        size="xs"
+        className="md:!max-w-[450px] md:!min-w-[450px] py-8 md:py-4 px-0 md:p-7  flex flex-col items-center justify-center"
+        style={{ zIndex: "99999999 !important" }}
+      >
+        <></>
+        <CustomNextImage
+          src={SessionIcon.src}
+          alt="SessionIcon"
+          width={80}
+          height={80}
+        />
+        <DialogHeader className="text-lg  font-semibold text-black-500 pb-0 text-center">
+          {" "}
+          {scopeT("header")}{" "}
+        </DialogHeader>
+        <div className="w-24 h-1 mx-auto rounded-full header-underline mt-2"></div>
+        <DialogBody className="text-sm text-slate-400 font-medium text-center">
+          {scopeT("message")}
+        </DialogBody>
+        <DialogFooter className="pb-0">
+          <ButtonCustom icon={undefined} onClick={callBackFn}>
+            {scopeT("redirectBtn")}
+          </ButtonCustom>
+        </DialogFooter>
+      </Dialog>
+    </>
+  );
+}

package/shared/components/ShippingAddressFormDialogComponent.tsx

@@ -0,0 +1,51 @@
+import { IconButton, Typography } from "@material-tailwind/react";
+import { Dialog, DialogBody, DialogHeader } from "@material-tailwind/react";
+import { IoIosCloseCircleOutline } from "react-icons/io";
+
+import { AddressFormComponentProps } from "../components/AddressFormComponent";
+import AddressShippingFormComponent from "./AddressShippingFormComponent";
+
+export function ShippingAddressFormDialogComponent({
+  open,
+  handleOpen,
+  formId,
+  isLoading,
+  proceedSubmit,
+}: {
+  open: boolean;
+  handleOpen: any;
+} & AddressFormComponentProps) {
+  return (
+    <>
+      <Dialog
+        open={open}
+        handler={handleOpen}
+        className="lg:min-w-[600px] md:min-w[400px]"
+        style={{ maxWidth: "600px", zIndex: 1000 }}
+      >
+        <DialogHeader className="p-3 md:pb-0 flex items-center justify-between">
+          <Typography
+            variant="h5"
+            className="text-base font-semibold text-black-500"
+          >
+            Add New Shipping address
+          </Typography>
+          <IconButton size="sm" variant="text" onClick={handleOpen}>
+            <IoIosCloseCircleOutline className="w-6 h-6 text-black-500 cursor-pointer" />
+          </IconButton>
+        </DialogHeader>
+        <DialogBody className="p-3 md:p-4 pb-4 max-h-[80vh] overflow-y-auto overflow-x-hidden">
+          <AddressShippingFormComponent
+            formId={formId}
+            isLoading={isLoading}
+            proceedSubmit={proceedSubmit}
+            onCancel={() => handleOpen(false)}
+          />
+        </DialogBody>
+        {/* <DialogFooter>
+                    <></>
+                </DialogFooter> */}
+      </Dialog>
+    </>
+  );
+}