@lmnto/h-mall-shared 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lmnto/h-mall-shared",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "private": false,
   "sideEffects": false,
   "scripts": {

package/shared/components/HomeBanners.tsx

@@ -2,8 +2,6 @@
 
 import { Carousel, Typography } from "@material-tailwind/react";
 
-import SubscriptionBanner from "@/app/[locale]/(dashboard)/products/components/SubscriptionBanner";
-
 import aiX1BannerImage from "../../public/img/ai-x1-banner.png";
 import gen3BannerImage from "../../public/img/gen3-image.png";
 import smartPayChoseIcon from "../../public/img/smart-pay-chose.png";
@@ -12,6 +10,7 @@ import smartPayPaymentIcon from "../../public/img/smart-pay-payment.png";
 import { FeatureCodes } from "../constants/feature-flags";
 import { useMainContext } from "../contexts/MainWrapperContext";
 import CustomNextImage from "./CustomNextImage";
+import SubscriptionBanner from "./SubscriptionBanner";
 
 export type HomeBannersProps = {
   isSubscriptionActive: boolean;

package/shared/components/ListItemComponent.tsx

@@ -33,7 +33,7 @@ export default function ListItemComponent({
 
   return (
     <ListItem
-      className={`p-3 lg:p-2.5 xl:p-3 text-slate-600 rounded-lg
+      className={`relative p-3 lg:p-2.5 xl:p-3 text-slate-600 rounded-lg
         hover:text-purple-500 hover:bg-purple-100 
         focus:text-purple-500 focus:bg-purple-200
         active:text-purple-500 active:bg-purple-50 

package/shared/components/SubscriptionBanner.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import ButtonCustom from "./Button";
+import { _useScopedI18n } from "../i18n/client";
+import { useUserStore } from "../stores/userStore";
+import { Typography } from "@material-tailwind/react";
+import { useMemo } from "react";
+
+export type SubscriptionBannerProps = {
+  isSubscriptionActive: boolean;
+  callback: () => void;
+};
+
+export default function SubscriptionBanner({
+  isSubscriptionActive,
+  callback,
+}: SubscriptionBannerProps) {
+  const scopeT = _useScopedI18n("products.subscriptionBanner");
+  const { user } = useUserStore();
+
+  const renderBanner = useMemo(() => {
+    if (isSubscriptionActive)
+      return (
+        <div className="justify-between rounded-xl h-[200px] sm:h-[150px] p-[5%] lg:p-[2%] subscriptionBanner">
+          <div className="w-full md:w-5/6 lg:w-3/4 xl:w-2/3">
+            <Typography
+              variant="h6"
+              className="font-medium text-sm text-black-500 mb-1"
+            >
+              {scopeT("welcomeBack")}
+            </Typography>
+
+            <Typography
+              variant="h3"
+              className="font-semibold text-sm md:text-base text-black-500"
+            >
+              {scopeT("activeSubscription")}
+            </Typography>
+          </div>
+        </div>
+      );
+    return (
+      <div className="justify-between rounded-xl h-[200px] p-[5%] lg:p-[2%]  subscriptionBannerBuy">
+        <div className="w-full md:w-5/6 lg:w-3/4 xl:w-2/3">
+          <Typography
+            variant="h5"
+            className="font-medium text-sm text-black-500 mb-1"
+          >
+            {scopeT("welcome")}
+          </Typography>
+
+          {user?.subscriptionActivationPending ? (
+            <Typography
+              variant="h2"
+              className="font-semibold text-sm md:text-base text-black-500"
+            >
+              {scopeT("subscriptionActivationPending")}
+            </Typography>
+          ) : (
+            <>
+              <Typography
+                variant="h2"
+                className="font-semibold text-sm md:text-base text-black-500"
+              >
+                {scopeT("inactiveSubscription")} 🚀
+              </Typography>
+            </>
+          )}
+          <ButtonCustom
+            onClick={callback}
+            className="font-medium mt-7"
+            icon={undefined}
+            disabled={user?.subscriptionActivationPending}
+          >
+            {scopeT("buySubscriptionBtn")}
+          </ButtonCustom>
+        </div>
+      </div>
+    );
+  }, [isSubscriptionActive, callback, scopeT, user]);
+
+  return <>{renderBanner}</>;
+}

package/shared/components/payments/DisclaimerAlertDialog.tsx

@@ -1,7 +1,3 @@
-import alertIcon from "@hms/packages/public/img/alert-Icon.png";
-import ButtonCustom from "@hms/packages/shared/components/Button";
-import CustomNextImage from "@hms/packages/shared/components/CustomNextImage";
-import { _useScopedI18n } from "@hms/packages/shared/i18n/client";
 import {
   Checkbox,
   Dialog,
@@ -13,7 +9,11 @@ import {
 } from "@material-tailwind/react";
 import React, { useEffect, useState } from "react";
 
+import alertIcon from "../../../public/img/alert-Icon.png";
+import ButtonCustom from "../../components/Button";
+import CustomNextImage from "../../components/CustomNextImage";
 import { ROUTES } from "../../constants/routes";
+import { _useScopedI18n } from "../../i18n/client";
 
 type DisclaimerAlertDialogProps = {
   open: boolean;

package/shared/components/payments/EmptyAssets.tsx

@@ -1,6 +1,7 @@
-import { _useScopedI18n } from "@hms/packages/shared/i18n/client";
 import { Typography } from "@material-tailwind/react";
 
+import { _useScopedI18n } from "../../i18n/client";
+
 export default function EmptyAssets() {
   const scopeT = _useScopedI18n("sharedComponents.emptyAssets");
 

package/shared/components/payments/PaybyWalletItemComponent.tsx

@@ -1,14 +1,10 @@
-import CustomNextImage from "@hms/packages/shared/components/CustomNextImage";
-import { _useScopedI18n } from "@hms/packages/shared/i18n/client";
-import {
-  Asset,
-  Option,
-  PaymentsMethod,
-} from "@hms/packages/shared/types/payments";
-import { displayExactWalletBalance } from "@hms/packages/shared/utils/app.util";
 import { Tooltip, Typography } from "@material-tailwind/react";
 
 import walletIcon from "../../../public/img/wallet-icon.png";
+import { _useScopedI18n } from "../../i18n/client";
+import { Asset, Option, PaymentsMethod } from "../../types/payments";
+import { displayExactWalletBalance } from "../../utils/app.util";
+import CustomNextImage from "../CustomNextImage";
 
 export type PaybyWalletItemComponentProps = {
   paymentMethodData: PaymentsMethod;

package/shared/components/payments/PaymentAssetItemComponent.tsx

@@ -1,12 +1,8 @@
-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";
+import { Asset, Option, PaymentsMethod } from "../../types/payments";
+import CustomNextImage from "../CustomNextImage";
 
 export type PaymentAssetItemComponentProps = {
   paymentMethodData: PaymentsMethod;

package/shared/components/payments/RequestProcessingDialog.tsx

@@ -1,6 +1,4 @@
-// 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 AppLoadingComponent from "../AppLoadingComponent";
 import {
   Dialog,
   DialogBody,
@@ -11,6 +9,8 @@ import {
 import React from "react";
 import { IoRefresh } from "react-icons/io5";
 
+import { _useScopedI18n } from "../../i18n/client";
+import ButtonCustom from "../Button";
 import LoadingIconComponent from "../LoadingIconComponent";
 
 type RequestProcessingDialogProps = {

package/shared/components/payments/WalletSectionManager.tsx

@@ -1,13 +1,10 @@
-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";
+import { usePayments } from "../../hooks/usePayments";
+import { useUserStore } from "../../stores/userStore";
+import { PaymentsMethod, PaymentType } from "../../types/payments";
+import WalletTermsAndConditionComponent from "./WalletTermsAndConditionComponent";
 
 type WalletSectionManagerProps = {
   paymentMethodData: PaymentsMethod;

package/shared/components/payments/WalletSliderComponent.tsx

@@ -1,9 +1,3 @@
-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,
@@ -17,6 +11,13 @@ import React, { Dispatch, useEffect, useMemo, useState } from "react";
 import { GoChevronDown } from "react-icons/go";
 import { HiOutlineArrowSmLeft } from "react-icons/hi";
 
+import { ROUTES } from "../../constants/routes";
+import { useGlobalDebounce } from "../../hooks/useDebounce";
+import { _useScopedI18n } from "../../i18n/client";
+import { Asset, Commission, Option } from "../../types/payments";
+import ButtonCustom from "../Button";
+import CustomNextLink from "../CustomNextLink";
+
 // Payment method update function type
 type PaymentUpdateFunction = (params: any) => Promise<void> | void;
 

package/shared/components/payments/WalletTermsAndConditionComponent.tsx

@@ -1,10 +1,11 @@
-import ButtonCustom from "@hms/packages/shared/components/Button";
-import { usePayments } from "@hms/packages/shared/hooks/usePayments";
-import { _useScopedI18n } from "@hms/packages/shared/i18n/client";
-import { notification } from "@hms/packages/shared/utils/notifications.util";
 import { Checkbox, Typography } from "@material-tailwind/react";
 import React, { useState } from "react";
 
+import { usePayments } from "../../hooks/usePayments";
+import { _useScopedI18n } from "../../i18n/client";
+import { notification } from "../../utils/notifications.util";
+import ButtonCustom from "../Button";
+
 type WalletTermsAndConditionComponentProps = {
   onConsentAccepted: () => void; // Prop to accept the consent
 };

package/shared/hooks/usePayments.ts

@@ -1,9 +1,9 @@
-import { QueryKeys } from "@hms/packages/shared/constants/query-keys";
-import { UsersService } from "@hms/packages/shared/services/api";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
 
 import { PAYMENTS_TYPE } from "../constants/app";
+import { QueryKeys } from "../constants/query-keys";
+import { UsersService } from "../services/api";
 import {
   proceedGetPaymentMethodAssetsAsync,
   proceedGetPaymentMethodsAsync,

package/shared/types/payments.ts

@@ -1,4 +1,4 @@
-import { PAYMENTS_TYPE } from "@hms/packages/shared/constants/app";
+import { PAYMENTS_TYPE } from "../constants/app";
 
 export type PaymentsMethod = {
   code: string;

package/tailwind.config.ts

@@ -1,8 +1,11 @@
+import path from "node:path";
+
 import withMT from "@material-tailwind/react/utils/withMT";
 import type { Config } from "tailwindcss";
 
 export const sharedConfig: Config = {
-  content: ["../h-mall-shared/shared/**/*.{js,ts,jsx,tsx,mdx}"],
+  // Absolute glob so when web-app imports this config, paths are not resolved from web-app/.
+  content: [path.join(__dirname, "shared/**/*.{js,ts,jsx,tsx,mdx}")],
   safelist: [
     "bg-yellow-50",
     "bg-red-100",