add: more commits

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>

src/modules/client/pages/PlanList.jsx

@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/dialog";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import {
-    Megaphone, BookOpen, Clock, Check,
+    BookOpen, Clock, Check,
     Tag, LockIcon, Zap, RotateCcw,
 } from "lucide-react";
 import { useClientTiers } from "@/contexts/ClientTiersProvider";
@@ -22,7 +22,8 @@ import { toast } from "sonner";
 import api from "@/utils/api.util";
 import { PageMeta } from "@/contexts/MetadataContext";
 import { useDateFormat } from "@/hooks/useDateFormat";
-import { useCurrency } from "@/hooks/useCurrency";
+import { useClientAdvertisements } from "@/contexts/ClientAdvertisementContext";
+import { Banner, BannerSkeleton } from "@/components/generic/Blocks/Client/Advertisements/Banner";
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
@@ -104,7 +105,7 @@ const PlanSkeleton = () => (
 const PREVIEW_COURSE_LIMIT = 2;
 
 const PlanCard = ({ plan, myTier, onSelect, onView, onRefund, refundSecsLeft }) => {
-    const { fmtPlanPrice } = useCurrency();
+    const fmtPlanPrice = (p) => `${p.currency} ${Number(p.price).toFixed(2)}`;
     const [coursesOpen,       setCoursesOpen]       = useState(false);
     const [notAvailableOpen,  setNotAvailableOpen]  = useState(false);
     const style = TIER_STYLES[plan.tier] ?? TIER_STYLES.free;
@@ -341,7 +342,8 @@ export default function PlanList() {
     const navigate = useNavigate();
     const { plans, plansLoading, myTier, tierLoading, getPlans, getMyTier, resetMyTier } = useClientTiers();
     const { fmtDate } = useDateFormat();
-    const { fmtPlanPrice } = useCurrency();
+    const { advertisements, loading: adLoading, getActiveAdvertisement, handleAdCtaClick } = useClientAdvertisements();
+    const fmtPlanPrice = (p) => `${p.currency} ${Number(p.price).toFixed(2)}`;
 
     const [refundPlan, setRefundPlan] = useState(null);  // plan being refunded
     const [refundLoading, setRefundLoading] = useState(false);
@@ -351,8 +353,12 @@ export default function PlanList() {
     useEffect(() => {
         getPlans();
         getMyTier();
+        getActiveAdvertisement("plans.banner");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [getPlans, getMyTier]);
 
+    const bannerAd = advertisements["plans.banner"] ?? null;
+
     useEffect(() => {
         clearInterval(refundTimerRef.current);
         if (!myTier?.starts_at) { setRefundSecsLeft(0); return; }
@@ -397,24 +403,11 @@ export default function PlanList() {
                 <div className="lg:container lg:mx-auto space-y-8 p-6">
 
                     {/* Advertisement Banner */}
-                    {/* <Card className="overflow-hidden border-primary/20 bg-gradient-to-r from-primary/10 via-primary/5 to-background">
-                        <CardContent className="flex flex-col gap-4 py-20 md:flex-row md:items-center md:justify-between pl-10">
-                            <div className="space-y-2">
-                                <Badge>
-                                    <Megaphone /> Limited Time Offer
-                                </Badge>
-                                <div className="max-w-xl">
-                                    <h1 className="text-3xl font-bold line-clamp-3 leading-relaxed">
-                                        Upgrade Your Learning Journey
-                                    </h1>
-                                    <p className="mt-2 text-sm line-clamp-3 text-muted-foreground">
-                                        Unlock premium courses, certificates, and exclusive educational content.
-                                        Get access to industry-leading materials and grow your skills today.
-                                    </p>
-                                </div>
-                            </div>
-                        </CardContent>
-                    </Card> */}
+                    {adLoading["plans.banner"] ? (
+                        <BannerSkeleton />
+                    ) : (
+                        <Banner ad={bannerAd} onCtaClick={handleAdCtaClick} />
+                    )}
 
                     {/* Section Header */}
                     <div className="text-center mt-6">