@lmnto/h-mall-shared 1.0.1

package/shared/components/payments/PaymentAssetItemComponent.tsx

@@ -0,0 +1,101 @@
+import CustomNextImage from "@hms/packages/shared/components/CustomNextImage";
+import {
+  Asset,
+  Option,
+  PaymentsMethod,
+} from "@hms/packages/shared/types/payments";
+import { Tooltip, Typography } from "@material-tailwind/react";
+
+import cardIcon from "../../../public/img/card-icon.png";
+
+export type PaymentAssetItemComponentProps = {
+  paymentMethodData: PaymentsMethod;
+  item: Asset;
+  selectedItem: number;
+  option: Option;
+  handleItemClick: () => void;
+  haveCommission?: boolean;
+};
+
+export default function PaymentAssetItemComponent({
+  paymentMethodData,
+  item,
+  selectedItem,
+  option,
+  handleItemClick,
+  haveCommission = false,
+}: PaymentAssetItemComponentProps) {
+  //
+  let isEligible = false;
+  let msg = option.restricted.msg;
+
+  if (option.restricted.status === false) {
+    isEligible = true;
+  }
+
+  return (
+    <>
+      <Tooltip
+        placement="top"
+        content={`${msg}`}
+        animate={{
+          mount: { scale: 1, y: 0 },
+          unmount: { scale: 0, y: 25 },
+        }}
+        className={`bg-red-600 ${isEligible ? "hidden" : ""}`}
+        interactive={!isEligible}
+      >
+        <li
+          className={`border ${
+            selectedItem === item.id
+              ? "border-purple-500 bg-purple-50" // Selected border color
+              : "border-slate-100 bg-gray-50/30" // Default border color
+          } ${!isEligible ? "cursor-not-allowed opacity-80" : "cursor-pointer"} rounded-xl p-4 text-center cursor-pointer`}
+          onClick={isEligible ? handleItemClick : () => {}}
+        >
+          <div className="text-center w-fit mx-auto mb-2">
+            <Typography
+              variant="lead"
+              className="text-xs font-medium p-2 rounded-xl bg-[#FEF3C7] text-[#D97706]"
+            >
+              Uses {option.minPercentage}%
+            </Typography>
+          </div>
+
+          <CustomNextImage
+            src={cardIcon.src}
+            alt="walletIcon"
+            className={`mx-auto my-2 ${isEligible ? "" : "grayscale"}`}
+            height={80}
+            width={80}
+          />
+
+          <Typography
+            variant="lead"
+            className="text-sm font-semibold text-black-500 mb-1"
+          >
+            {option.name}
+          </Typography>
+
+          {paymentMethodData.paymentFees.map((fee, feeIndex) => (
+            <Typography
+              key={feeIndex}
+              variant="lead"
+              className="text-xs font-normal text-slate-500 mb-2"
+            >
+              {fee.name}
+            </Typography>
+          ))}
+          {haveCommission && (
+            <Typography
+              variant="lead"
+              className="text-xs font-medium text-slate-500 mb-3"
+            >
+              CV: {option.commissions.totalCV} VP: {option.commissions.totalVP}
+            </Typography>
+          )}
+        </li>
+      </Tooltip>
+    </>
+  );
+}

package/shared/components/payments/RequestProcessingDialog.tsx

@@ -0,0 +1,123 @@
+// import AppLoadingComponent from "@hms/packages/shared/components/AppLoadingComponent";
+import ButtonCustom from "@hms/packages/shared/components/Button";
+import { _useScopedI18n } from "@hms/packages/shared/i18n/client";
+import {
+  Dialog,
+  DialogBody,
+  DialogHeader,
+  IconButton,
+  Typography,
+} from "@material-tailwind/react";
+import React from "react";
+import { IoRefresh } from "react-icons/io5";
+
+import LoadingIconComponent from "../LoadingIconComponent";
+
+type RequestProcessingDialogProps = {
+  open: boolean;
+  orderId: string;
+  paymentProcessFailed: boolean;
+  onRetry?: () => void;
+  setOpen: (value: boolean) => void;
+};
+
+export function RequestProcessingDialog({
+  open,
+  setOpen,
+  orderId,
+  paymentProcessFailed,
+  onRetry,
+}: RequestProcessingDialogProps) {
+  //
+  const scopeT = _useScopedI18n("payment.requestProcessingDialog");
+
+  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">
+          <>
+            <LoadingIconComponent />
+            <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>
+              {paymentProcessFailed ? (
+                <>
+                  <Typography
+                    variant="lead"
+                    className="text-sm font-medium text-slate-500 mb-3"
+                  >
+                    {scopeT("errorMsg")}
+                  </Typography>
+
+                  <ButtonCustom
+                    icon={<IoRefresh className="size-4" />}
+                    onClick={onRetry}
+                  >
+                    {scopeT("retryBtn")}
+                  </ButtonCustom>
+                </>
+              ) : (
+                <>
+                  <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/payments/WalletSectionManager.tsx

@@ -0,0 +1,82 @@
+import WalletTermsAndConditionComponent from "@hms/packages/shared/components/payments/WalletTermsAndConditionComponent";
+import { usePayments } from "@hms/packages/shared/hooks/usePayments";
+import { useUserStore } from "@hms/packages/shared/stores/userStore";
+import {
+  PaymentsMethod,
+  PaymentType,
+} from "@hms/packages/shared/types/payments";
+import React, { useCallback, useEffect, useState } from "react";
+
+import { PAYMENTS_TYPE } from "../../constants/app";
+
+type WalletSectionManagerProps = {
+  paymentMethodData: PaymentsMethod;
+  activeTab: boolean;
+  setDisablePaymentButton: (status: boolean) => void;
+  type?: PaymentType;
+  PaybyWalletComponent: React.ComponentType<{
+    assets: any;
+    paymentMethodData: PaymentsMethod;
+    setDisablePaymentButton: (status: boolean) => void;
+  }>;
+};
+
+export default function WalletSectionManager({
+  paymentMethodData,
+  activeTab,
+  setDisablePaymentButton,
+  type,
+  PaybyWalletComponent,
+}: WalletSectionManagerProps) {
+  //
+  const { user, setUser } = useUserStore();
+  const { getAssetsAPI, isLoadingAsset, assets } = usePayments({
+    type: type || PAYMENTS_TYPE.NORMAL,
+  });
+  // State to track if wallet consent is confirmed
+  const [walletConsentConfirmed, setWalletConsentConfirmed] = useState(
+    user?.walletConsentConfirmed,
+  );
+
+  const handleEnableConsent = useCallback(() => {
+    if (user?.id) {
+      setUser({
+        ...user,
+        walletConsentConfirmed: true,
+      });
+    }
+    setWalletConsentConfirmed(true);
+  }, [user, setUser, setWalletConsentConfirmed]);
+
+  useEffect(() => {
+    if (
+      activeTab &&
+      paymentMethodData &&
+      paymentMethodData.id &&
+      walletConsentConfirmed
+    ) {
+      getAssetsAPI({
+        methodId: paymentMethodData.id,
+      });
+    }
+  }, [activeTab, walletConsentConfirmed, paymentMethodData, getAssetsAPI]);
+
+  if (isLoadingAsset) return <>Loading ...</>;
+
+  return (
+    <React.Fragment>
+      {user && walletConsentConfirmed && (
+        <PaybyWalletComponent
+          assets={assets}
+          paymentMethodData={paymentMethodData}
+          setDisablePaymentButton={setDisablePaymentButton}
+        />
+      )}
+      {user && !walletConsentConfirmed && (
+        <WalletTermsAndConditionComponent
+          onConsentAccepted={() => handleEnableConsent()}
+        />
+      )}
+    </React.Fragment>
+  );
+}

package/shared/components/payments/WalletSliderComponent.tsx

@@ -0,0 +1,326 @@
+import ButtonCustom from "@hms/packages/shared/components/Button";
+import CustomNextLink from "@hms/packages/shared/components/CustomNextLink";
+import { ROUTES } from "@hms/packages/shared/constants/routes";
+import { useGlobalDebounce } from "@hms/packages/shared/hooks/useDebounce";
+import { _useScopedI18n } from "@hms/packages/shared/i18n/client";
+import { Asset, Commission, Option } from "@hms/packages/shared/types/payments";
+import {
+  Button,
+  Menu,
+  MenuHandler,
+  MenuItem,
+  MenuList,
+  Slider,
+  Typography,
+} from "@material-tailwind/react";
+import React, { Dispatch, useEffect, useMemo, useState } from "react";
+import { GoChevronDown } from "react-icons/go";
+import { HiOutlineArrowSmLeft } from "react-icons/hi";
+
+// Payment method update function type
+type PaymentUpdateFunction = (params: any) => Promise<void> | void;
+
+// Configuration for different cart types
+interface CartConfig {
+  updatePaymentMethod: PaymentUpdateFunction;
+  showCommissions?: boolean;
+  additionalParams?: Record<string, any>;
+}
+
+type WalletSliderComponentProps = {
+  asset: Asset;
+  selectedOption: Option;
+  grandTotal: number;
+  baseAmountToPay: number;
+  optionAmountToPay: number;
+  commission: Commission;
+  setSelectedAsset: Dispatch<any>;
+  setSelectedOption: (option: Option) => void;
+  cartConfig: CartConfig;
+};
+
+export default function WalletSliderComponent({
+  asset,
+  selectedOption,
+  grandTotal,
+  baseAmountToPay,
+  optionAmountToPay,
+  commission,
+  setSelectedAsset,
+  setSelectedOption,
+  cartConfig,
+}: WalletSliderComponentProps) {
+  const scopeT = _useScopedI18n("payment.walletSliderComponent");
+
+  const [openMenu, setOpenMenu] = useState(false);
+  const [currentPercentage, setCurrentPercentage] = useState<number>(
+    selectedOption.currentPercentage ?? selectedOption.minPercentage,
+  );
+
+  const {
+    updatePaymentMethod,
+    showCommissions = true,
+    additionalParams = {},
+  } = cartConfig;
+
+  const handleChangePercentage = useGlobalDebounce(
+    async (percentage: number) => {
+      const params = {
+        paymentMethodId: asset.paymentMethodId,
+        paymentOptionId: selectedOption.id,
+        fromAssetSelectedPercentage: percentage,
+        ...additionalParams,
+      };
+
+      await updatePaymentMethod(params);
+    },
+    300,
+  );
+
+  const handleSliderChange = (e: any) => {
+    let value = +e.target.value;
+
+    if (value < selectedOption.minPercentage) {
+      value = selectedOption.minPercentage;
+    } else if (value > 99) {
+      value = 99;
+    }
+
+    setCurrentPercentage(value);
+
+    if (selectedOption.currentPercentage == value) return;
+    handleChangePercentage(value);
+  };
+
+  useEffect(() => {
+    (async () =>
+      await setCurrentPercentage(
+        selectedOption.currentPercentage ?? selectedOption.minPercentage,
+      ))();
+  }, [selectedOption, setCurrentPercentage]);
+
+  const canPayWithBase = useMemo(() => {
+    if (+asset.balance < baseAmountToPay) return false;
+    return true;
+  }, [asset, baseAmountToPay]);
+
+  const canPayWithOption = useMemo(() => {
+    if (+selectedOption.balance < optionAmountToPay) return false;
+    return true;
+  }, [selectedOption, optionAmountToPay]);
+
+  return (
+    <>
+      <div className="">
+        <ButtonCustom
+          variant="text"
+          className="text-base mb-2 p-0"
+          icon={undefined}
+          onClick={() => {
+            setSelectedAsset(null);
+          }}
+        >
+          <HiOutlineArrowSmLeft className="text-2xl" />
+          {scopeT("backBtn")}
+        </ButtonCustom>
+
+        <div className="overflow-x-auto">
+          <div className="flex flex-col md:flex-row md:min-w-[600px] justify-between items-center gap-5 py-4">
+            <div
+              className={`flex flex-col justify-center items-center border ${canPayWithBase ? "border-slate-100" : "text-orange-500 bg-orange-50 border-orange-300"} rounded-xl p-4 min-w-30`}
+            >
+              <Typography
+                variant="lead"
+                className="text-sm font-semibold text-black-500 p-1"
+              >
+                {asset.name}
+              </Typography>
+              <Typography
+                variant="lead"
+                className="text-xs font-semibold text-gray-300 my-2"
+              >
+                {scopeT("amount")} : {baseAmountToPay}
+              </Typography>
+              {showCommissions && selectedOption.commissions?.base && (
+                <Typography
+                  variant="lead"
+                  className="text-xs font-medium text-slate-500"
+                >
+                  CV: {selectedOption.commissions.base.cv} VP:{" "}
+                  {selectedOption.commissions.base.vp}
+                </Typography>
+              )}
+            </div>
+
+            <div className="flex flex-1 flex-col items-center gap-5">
+              <div className="flex items-center gap-3 w-full">
+                <Typography
+                  variant="lead"
+                  className="text-sm font-normal text-black-500"
+                >
+                  {currentPercentage}%
+                </Typography>
+                <Slider
+                  key={selectedOption.id}
+                  onChange={handleSliderChange}
+                  min={0}
+                  value={currentPercentage}
+                  max={100}
+                  step={1}
+                  color="green"
+                  className="flex-1 my-4 md:my-0"
+                />
+
+                <Typography
+                  variant="lead"
+                  className="text-sm font-normal text-black-500"
+                >
+                  {100 - currentPercentage}%
+                </Typography>
+              </div>
+            </div>
+
+            <div
+              className={`flex flex-col justify-center items-center border ${canPayWithOption ? "border-slate-100" : "text-orange-500 bg-orange-50 border-orange-300"} rounded-xl p-4 min-w-30`}
+            >
+              <Menu open={openMenu} handler={setOpenMenu}>
+                <MenuHandler>
+                  <Button
+                    variant="text"
+                    size="sm"
+                    className="flex justify-center items-center gap-1 p-1 text-sm font-semibold text-black-500 "
+                  >
+                    {selectedOption.name}
+                    <GoChevronDown
+                      strokeWidth={2.5}
+                      className={`h-3.5 w-3.5 transition-transform ${
+                        openMenu ? "rotate-180" : ""
+                      }`}
+                    />
+                  </Button>
+                </MenuHandler>
+                <MenuList className="p-1">
+                  {asset.options.map((option, index) => {
+                    let isEligible = false;
+
+                    if (
+                      +option.balance > 0 &&
+                      option.restricted.status === false
+                    ) {
+                      isEligible = true;
+                    }
+
+                    return (
+                      <MenuItem
+                        onClick={() => {
+                          isEligible && setSelectedOption(option);
+                        }}
+                        key={index}
+                        className=""
+                        disabled={
+                          !isEligible || selectedOption.id === option.id
+                        }
+                      >
+                        <div className="flex">
+                          <div>
+                            <Typography
+                              variant="h6"
+                              className="text-sm font-semibold text-black-500"
+                            >
+                              {option.name}
+                            </Typography>
+                            <Typography
+                              variant="lead"
+                              className="text-xs font-semibold text-gray-400"
+                            >
+                              {scopeT("avlBalance")}: {option.balance}
+                            </Typography>
+                          </div>
+                        </div>
+                      </MenuItem>
+                    );
+                  })}{" "}
+                </MenuList>
+              </Menu>
+              <Typography
+                variant="lead"
+                className="text-xs font-semibold text-gray-300 my-2"
+              >
+                {scopeT("amount")} : {optionAmountToPay}
+              </Typography>
+              {showCommissions && selectedOption.commissions?.option && (
+                <Typography
+                  variant="lead"
+                  className="text-xs font-medium text-slate-500"
+                >
+                  CV: {selectedOption.commissions.option.cv} VP:{" "}
+                  {selectedOption.commissions.option.vp}
+                </Typography>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="text-center mt-4">
+          <Typography
+            variant="lead"
+            className="text-base font-normal text-black-500"
+          >
+            {scopeT("grandTotal")}: <strong> $ {grandTotal} </strong>
+          </Typography>
+        </div>
+
+        {showCommissions && (
+          <div className="text-center mt-3">
+            <Typography
+              variant="lead"
+              className="text-sm font-normal text-black-500"
+            >
+              CV: <strong>{commission?.totalCV}</strong> VP:{" "}
+              <strong>{commission?.totalVP}</strong>
+            </Typography>
+          </div>
+        )}
+
+        <div className="w-[70%] mx-auto grid grid-cols-1 md:grid-cols-2 gap-5 mt-6">
+          {+selectedOption.balance < optionAmountToPay && (
+            <div className="flex flex-col justify-between text-center text-orange-500 bg-orange-50 border border-orange-300 px-3 py-4 rounded-lg">
+              <Typography
+                variant="lead"
+                className="text-xs text-center leading-5 font-medium break-words"
+              >
+                {scopeT("insufficientBalance")} <br />
+                {selectedOption.name}: {selectedOption.balance} <br />
+              </Typography>
+              <CustomNextLink
+                target="_blank"
+                className="underline font-semibold text-sm mt-3 block text-purple-500 hover:text-purple-600"
+                href={ROUTES.dashboard.nodeLinkDeposit}
+              >
+                {scopeT("depositBtn")}
+              </CustomNextLink>
+            </div>
+          )}
+
+          {+asset.balance < baseAmountToPay && (
+            <div className="flex flex-col justify-between text-center text-orange-500 bg-orange-50 border border-orange-300 px-3 py-4 rounded-lg">
+              <Typography
+                variant="lead"
+                className="text-xs text-center leading-5 font-medium break-words"
+              >
+                {scopeT("insufficientBalance")} <br />
+                {asset.name}: {asset.balance} <br />
+              </Typography>
+              <CustomNextLink
+                target="_blank"
+                className="underline font-semibold text-sm mt-3 block text-purple-500 hover:text-purple-600"
+                href={ROUTES.dashboard.nodeLinkDeposit}
+              >
+                {scopeT("depositBtn")}
+              </CustomNextLink>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}