@lmnto/h-mall-shared 1.0.1

package/shared/components/AddressShippingFormComponent.tsx

@@ -0,0 +1,223 @@
+import { FormEventHandler, useCallback } 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 { useShippingAddressForm } from '../hooks/useShippingAddressForm';
+import { _useScopedI18n } from "../i18n/client";
+import { countriesStore } from "../stores/countriesStore";
+import { useFormStore } from "../stores/formStore";
+import { SelectCities } from "./SelectCities";
+import { SelectStates } from "./SelectStates";
+
+export type AddressShippingFormComponentProps = {
+  formId: string;
+  isLoading: boolean;
+  proceedSubmit: FormEventHandler<HTMLButtonElement>;
+  onCancel?: () => void;
+};
+
+export default function AddressShippingFormComponent({
+  formId,
+  isLoading,
+  proceedSubmit,
+}: AddressShippingFormComponentProps) {
+  //
+  const scopeT = _useScopedI18n("sharedComponents.addressFormComponent");
+
+  const { reactHookUseForm } = useFormStore();
+  const { watch } =
+    (reactHookUseForm as { [key: string]: UseFormReturn<any> })?.[formId] ?? {};
+  const countryIdField = watch?.(`countryId`);
+  const zipCodeExampleField = watch?.(`zipCodeExample`);
+
+  const {
+    shippingStates,
+    shippingCities,
+    loading,
+    loadingCities,
+    setLoading,
+    setShippingLoadingCities,
+  } = countriesStore();
+
+  const { getShippingStatesByCountry, getShippingCityByStateAndCountry } =
+    useAddressForm();
+
+  const handleGetCities = useCallback(
+    (state: any) => {
+      setShippingLoadingCities(true);
+      getShippingCityByStateAndCountry.mutate(state);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const handleGetState = useCallback(
+    async (country: number) => {
+      setLoading(true);
+      setShippingLoadingCities(true);
+      const data = await getShippingStatesByCountry.mutateAsync(country);
+
+      if (data && data?.length > 0) {
+        setShippingLoadingCities(false);
+      } else {
+        handleGetCities({
+          countryId: country,
+        });
+      }
+    },
+    [
+      setLoading,
+      setShippingLoadingCities,
+      handleGetCities,
+      getShippingStatesByCountry,
+    ],
+  );
+
+  return (
+    <>
+      <form action="" method="post">
+        <div className="grid grid-cols-12 gap-y-4 md:gap-y-7 md:gap-x-5 mb-5">
+          <div className="col-span-12 md:col-span-6 relative">
+            <Inputfield
+              title={`${scopeT("firstName")} *`}
+              placeholder={scopeT("firstName")}
+              className={undefined}
+              value={undefined}
+              readOnly={undefined}
+              name="firstName"
+              formId={formId}
+            />
+          </div>
+          <div className="col-span-12 md:col-span-6 relative">
+            <Inputfield
+              title={`${scopeT("lastName")} *`}
+              className={undefined}
+              placeholder={scopeT("lastName")}
+              value={undefined}
+              readOnly={undefined}
+              name="lastName"
+              formId={formId}
+            />
+          </div>
+          <div className="col-span-12 relative">
+            <Inputfield
+              title={`${scopeT("address")} *`}
+              className={undefined}
+              placeholder={scopeT("address")}
+              value={undefined}
+              readOnly={undefined}
+              name="address"
+              formId={formId}
+            />
+          </div>
+          <div className="col-span-12 relative">
+            <Inputfield
+              title={`${scopeT("flatHouseBuilding")}`}
+              className={undefined}
+              placeholder={`${scopeT("flatHouseBuilding")}`}
+              value={undefined}
+              readOnly={undefined}
+              name="buildingInfo"
+              formId={formId}
+            />
+          </div>
+          <div className="col-span-12 md:col-span-6 relative">
+            <SelectCountries
+              title={`${scopeT("selectCountry")} *`}
+              className={undefined}
+              placeholder={scopeT("selectCountry")}
+              name="countryId"
+              formId={formId}
+              onCountrySelected={handleGetState}
+              forShipping={true}
+            />
+          </div>
+          <div className="col-span-12 md:col-span-6 relative">
+            {shippingStates?.length > 0 && countryIdField ? (
+              <SelectStates
+                title={`${scopeT("state")} *`}
+                className={undefined}
+                placeholder={scopeT("state")}
+                name="state"
+                formId={formId}
+                onStateSelected={handleGetCities}
+                forShipping={true}
+              />
+            ) : (
+              <Inputfield
+                title={`${scopeT("state")} *`}
+                className={undefined}
+                placeholder={scopeT("state")}
+                value={undefined}
+                readOnly={loading}
+                name="state"
+                formId={formId}
+                disabled={loading}
+              />
+            )}
+          </div>
+          <div className="col-span-12 md:col-span-6 relative">
+            {shippingCities?.length > 0 && countryIdField ? (
+              <SelectCities
+                title={`${scopeT("city")} *`}
+                className={undefined}
+                placeholder={scopeT("city")}
+                name="city"
+                formId={formId}
+                forShipping={true}
+              />
+            ) : (
+              <Inputfield
+                title={`${scopeT("city")} *`}
+                className={undefined}
+                placeholder={scopeT("city")}
+                value={undefined}
+                readOnly={loading}
+                name="city"
+                formId={formId}
+                disabled={loadingCities}
+              />
+            )}
+          </div>
+          <div className="col-span-12 md:col-span-6 relative">
+            <Inputfield
+              title={`${scopeT("zipCode")} *`}
+              className={undefined}
+              placeholder={
+                zipCodeExampleField?.length > 0
+                  ? zipCodeExampleField
+                  : scopeT("zipCode")
+              }
+              value={undefined}
+              readOnly={undefined}
+              name="postalCode"
+              formId={formId}
+              format={
+                zipCodeExampleField?.length > 0 ? zipCodeExampleField : null
+              }
+            />
+          </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=""
+            icon={undefined}
+            type="submit"
+            onClick={proceedSubmit}
+            loading={isLoading}
+            disabled={isLoading}
+          >
+            {scopeT("submitBtn")}
+          </ButtonCustom>
+        </div>
+      </form>
+    </>
+  );
+}

package/shared/components/AiPaymentDialog.tsx

@@ -0,0 +1,95 @@
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  IconButton,
+  Typography,
+} from "@material-tailwind/react";
+import React from "react";
+import { IoIosCloseCircleOutline } from "react-icons/io";
+
+import aiImage from "../../public/img/ai-dialog.png";
+import ButtonCustom from "./Button";
+import CustomNextImage from "./CustomNextImage";
+
+export function AiPaymentDialog({ handleOpen, open, action }) {
+  return (
+    <>
+      <Dialog
+        size="xs"
+        open={open}
+        handler={handleOpen}
+        className=" px-3 xl:px-5  py-4 boostDialogBg"
+      >
+        <DialogHeader className="justify-center">
+          <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="max-h-[600px] overflow-y-auto">
+          <div className="flex flex-wrap-reverse justify-center xl:justify-between items-center gap-3 mb-4">
+            <div>
+              <Typography
+                variant="paragraph"
+                className="text-lg max-w-[30px] md:text-4xl font-bold text-[#9451A0] uppercase"
+              >
+                Important Information
+              </Typography>
+              <Typography
+                variant="paragraph"
+                className="text-sm md:text-lg text-[#E27500] max-w-[200px] font-normal"
+              >
+                Maintain Your NodeK Rewards{" "}
+              </Typography>
+            </div>
+            <div>
+              <CustomNextImage
+                src={aiImage.src}
+                alt={"boost image"}
+                width={164}
+                height={163}
+              />
+            </div>
+          </div>
+          <div className="mb-4">
+            <Typography
+              variant="paragraph"
+              className="text-base text-black-900 font-normal"
+            >
+              To ensure your <strong>NodeK</strong> rewards remain active,
+              please complete your add-on purchase within <strong>30</strong>{" "}
+              days of its official launch.
+            </Typography>
+          </div>
+
+          <Typography
+            variant="paragraph"
+            className="text-base text-[#E27500] font-normal"
+          >
+            After this period,{" "}
+            <strong> reward accumulation will be temporarily paused </strong>{" "}
+            until the purchase is completed.
+          </Typography>
+        </DialogBody>
+        <DialogFooter className="justify-center">
+          <ButtonCustom
+            icon={undefined}
+            onClick={() => {
+              action();
+            }}
+          >
+            Continue
+          </ButtonCustom>
+        </DialogFooter>
+      </Dialog>
+    </>
+  );
+}

package/shared/components/AppLoadingComponent.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import React from "react";
+
+import AppLoadingComponentV2 from "./AppLoadingComponentV2";
+
+export default function AppLoadingComponent({}: any) {
+  return (
+    <>
+      <div className="flex justify-center bg-white bg-opacity-50 items-center fixed top-0 bottom-0 left-0 right-0">
+        <AppLoadingComponentV2 />
+      </div>
+    </>
+  );
+}

package/shared/components/AppLoadingComponentV2.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import React from "react";
+
+import LoadingIconComponent from "./LoadingIconComponent";
+
+export default function AppLoadingComponent() {
+  return (
+    <>
+      <div
+        className="flex justify-center bg-white bg-opacity-50 items-center fixed top-0 bottom-0 left-0 right-0"
+        style={{ zIndex: 9999999 }}
+      >
+        <LoadingIconComponent />
+      </div>
+    </>
+  );
+}

package/shared/components/Button.tsx

@@ -0,0 +1,48 @@
+import { Button, ButtonProps } from "@material-tailwind/react";
+
+export type ButtonCustomProps = ButtonProps & {
+  icon: any;
+  iconPosition?: "left" | "right";
+  size?: "sm" | "md" | "lg";
+  resetClass?: boolean;
+  fullWidth?: boolean;
+};
+
+export default function ButtonCustom({
+  icon,
+  iconPosition,
+  resetClass,
+  disabled,
+  size = "md",
+  fullWidth,
+  ...props
+}: ButtonCustomProps) {
+  const sizeClasses = {
+    // sm: 'px-4 py-2',
+    // md: 'px-8 py-3',
+    // lg: 'px-14 py-2.5',
+  };
+
+  return (
+    <>
+      <Button
+        {...props}
+        color="purple"
+        className={
+          resetClass
+            ? props.className
+            : `${sizeClasses[size]} ${props.className} flex items-center justify-center gap-2 font-medium
+                        px-5 py-3 md:px-8 md:py-2.5 lg:px-9 lg:py-3
+                        hover:opacity-100
+                        text-sm md:text-base rounded-xl capitalize shadow-none outline-none ${!props.variant ? "primary-button" : ""}`
+        }
+        disabled={disabled ?? false}
+        fullWidth={fullWidth}
+      >
+        {iconPosition == "left" || (!iconPosition && icon)}
+        {props.children}
+        {iconPosition == "right" && icon}
+      </Button>
+    </>
+  );
+}

package/shared/components/BuySubscriptionDialog.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+} from "@material-tailwind/react";
+import React, { useCallback, useEffect } from "react";
+
+import subscriptionIcon from "../../public/img/subscriptionIcon.png";
+import { ROUTES } from "../constants/routes";
+import useCustomRouter from "../hooks/useCustomRouter";
+import { _useScopedI18n } from "../i18n/client";
+import ButtonCustom from "./Button";
+import CustomNextImage from "./CustomNextImage";
+
+type SubscriptionPurchaseDialogComponentProps = {
+  showSubscriptionDialog: boolean;
+  onClose: () => void;
+};
+
+export function SubscriptionPurchaseDialogComponent({
+  showSubscriptionDialog,
+  onClose,
+}: SubscriptionPurchaseDialogComponentProps) {
+  //
+  const scopeT = _useScopedI18n("sharedComponents.buySubscriptionComponent");
+
+  const [open, setOpen] = React.useState(showSubscriptionDialog);
+  const { push } = useCustomRouter();
+
+  useEffect(() => {
+    setOpen(showSubscriptionDialog);
+  }, [showSubscriptionDialog]);
+
+  const handleClose = () => {
+    setOpen(false);
+    onClose();
+  };
+
+  const handleBuySubscription = useCallback(() => {
+    // redirect to subscription page
+    return push(`${ROUTES.dashboard.products}?category=subscription`);
+  }, [push]);
+
+  return (
+    <>
+      <Dialog
+        open={open}
+        handler={handleClose}
+        size="xs"
+        className="md:!max-w-[500px] md:!min-w-[500px] py-4 px-0 md:p-7  flex flex-col items-center justify-center"
+      >
+        <CustomNextImage
+          src={subscriptionIcon.src}
+          alt="SessionIcon"
+          width={80}
+          height={80}
+        />
+        <DialogHeader className="text-lg md:text-xl  font-semibold text-black-500 pb-0 text-center">
+          {scopeT("header")}
+        </DialogHeader>
+        <DialogBody className="text-sm  md:text-base text-slate-400 font-medium text-center">
+          {scopeT("description")}
+        </DialogBody>
+        <DialogFooter className="pb-0">
+          <ButtonCustom icon={undefined} onClick={handleBuySubscription}>
+            {scopeT(`redirectBtn`)}
+          </ButtonCustom>
+        </DialogFooter>
+      </Dialog>
+    </>
+  );
+}