@lmnto/h-mall-shared 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lmnto/h-mall-shared",
-  "version": "1.0.3",
+  "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/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}</>;
+}