@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/homepage/components/WhatsAppCommunitySection.tsx

@@ -1,187 +0,0 @@
-"use client";
-
-import React from "react";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Button, Grid, Heading, Section, Span, Text } from "../../../ui";
-import { MessageCircle } from "lucide-react";
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-export interface WhatsAppCommunitySectionProps {
-  title: string;
-  /** HTML string for the description (safe server-rendered HTML). */
-  descriptionHtml?: string;
-  memberCount?: number;
-  memberCountLabel?: string;
-  testimonial?: string;
-  benefits?: string[];
-  buttonText?: string;
-  groupLink?: string;
-  isLoading?: boolean;
-  className?: string;
-}
-
-// ─── Section ─────────────────────────────────────────────────────────────────
-
-export function WhatsAppCommunitySection({
-  title,
-  descriptionHtml,
-  memberCount,
-  memberCountLabel = "members",
-  testimonial,
-  benefits = [],
-  buttonText = "Join our WhatsApp community",
-  groupLink,
-  isLoading = false,
-  className = "",
-}: WhatsAppCommunitySectionProps) {
-  const { themed, flex } = THEME_CONSTANTS;
-
-  if (isLoading) {
-    return (
-      <Section className={`p-8 ${themed.bgSecondary} ${className}`}>
-        <div className="w-full max-w-7xl mx-auto">
-          <div className="h-80 bg-zinc-200 dark:bg-slate-700 rounded-2xl animate-pulse" />
-        </div>
-      </Section>
-    );
-  }
-
-  if (!title && !groupLink) return null;
-
-  const handleJoin = () => {
-    if (groupLink) window.open(groupLink, "_blank");
-  };
-
-  return (
-    <Section className={`p-8 ${themed.bgSecondary} ${className}`}>
-      <div className="w-full max-w-7xl mx-auto">
-        <div className="bg-gradient-to-br from-green-700 to-green-800 dark:from-emerald-800 dark:to-emerald-900 rounded-2xl p-8 text-white overflow-hidden relative">
-          {/* Decorative Pattern */}
-          <div className="absolute inset-0 opacity-10" aria-hidden>
-            <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
-              <defs>
-                <pattern
-                  id="wa-dots"
-                  x="0"
-                  y="0"
-                  width="40"
-                  height="40"
-                  patternUnits="userSpaceOnUse"
-                >
-                  <circle cx="20" cy="20" r="2" fill="white" />
-                </pattern>
-              </defs>
-              <rect width="100%" height="100%" fill="url(#wa-dots)" />
-            </svg>
-          </div>
-
-          <div className="relative z-10 text-center">
-            {/* WhatsApp Icon */}
-            <div
-              className={`inline-flex items-center justify-center w-20 h-20 rounded-full bg-white/20 backdrop-blur-sm mb-6 mx-auto`}
-            >
-              <MessageCircle className="w-10 h-10 text-white" />
-            </div>
-
-            {/* Heading */}
-            <Heading level={2} className="mb-3 text-white">
-              {title}
-            </Heading>
-
-            {descriptionHtml && (
-              <div
-                className="text-lg md:text-xl mb-2 opacity-90 prose prose-invert max-w-none"
-                dangerouslySetInnerHTML={{ __html: descriptionHtml }}
-              />
-            )}
-
-            {/* Facepile + member counter */}
-            {memberCount && (
-              <div className={`${flex.center} gap-3 mb-4`}>
-                <div className="flex -space-x-2">
-                  {["A", "R", "S", "M", "P"].map((initial, i) => (
-                    <div
-                      key={i}
-                      className={`w-8 h-8 rounded-full border-2 border-white bg-green-700 ${flex.center} text-white text-xs font-bold`}
-                    >
-                      {initial}
-                    </div>
-                  ))}
-                </div>
-                <Text variant="none" className="text-white font-bold">
-                  <Span className="text-xl font-extrabold">
-                    {memberCount.toLocaleString("en-IN")}
-                  </Span>{" "}
-                  {memberCountLabel}
-                </Text>
-              </div>
-            )}
-
-            {/* Testimonial */}
-            {testimonial && (
-              <Text
-                size="sm"
-                variant="none"
-                className="italic text-white/90 max-w-sm mx-auto mb-6"
-              >
-                &ldquo;{testimonial}&rdquo;
-              </Text>
-            )}
-
-            {/* Benefits */}
-            {benefits.length > 0 && (
-              <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4 max-w-2xl mx-auto my-8">
-                {benefits.slice(0, 4).map((benefit, index) => (
-                  <div
-                    key={index}
-                    className="flex items-start gap-3 text-left bg-white/10 backdrop-blur-sm p-4 rounded-lg"
-                  >
-                    <svg
-                      className="w-6 h-6 mt-0.5 flex-shrink-0"
-                      fill="currentColor"
-                      viewBox="0 0 20 20"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                    <Span className="text-sm md:text-base">{benefit}</Span>
-                  </div>
-                ))}
-              </Grid>
-            )}
-
-            {/* CTA Button */}
-            {groupLink && (
-              <div className="relative inline-block">
-                <div
-                  className="absolute inset-0 rounded-full bg-lime-400/30 animate-pulse blur-md scale-110"
-                  aria-hidden
-                />
-                <Button
-                  variant="primary"
-                  size="lg"
-                  aria-label={buttonText}
-                  onClick={handleJoin}
-                  className="relative bg-white text-green-600 hover:bg-zinc-100 shadow-xl hover:shadow-2xl"
-                >
-                  <svg
-                    className="w-6 h-6 mr-2"
-                    fill="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
-                  </svg>
-                  {buttonText}
-                </Button>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </Section>
-  );
-}

package/src/features/homepage/components/index.ts

@@ -1,91 +0,0 @@
-export { HeroSection } from "./HeroSection";
-export type { CharacterHotspotProps } from "./CharacterHotspot";
-export { CharacterHotspot } from "./CharacterHotspot";
-export type { CharacterHotspotFormProps } from "./CharacterHotspotForm";
-export { CharacterHotspotForm } from "./CharacterHotspotForm";
-export type { HeroBannerProps } from "./HeroBanner";
-export { HeroBanner } from "./HeroBanner";
-export type { HeroCarouselProps } from "./HeroCarousel";
-export { HeroCarousel } from "./HeroCarousel";
-export type { PromoGridProps } from "./PromoGrid";
-export { PromoGrid } from "./PromoGrid";
-export type { TrustBadgesProps } from "./TrustBadges";
-export { TrustBadges } from "./TrustBadges";
-export type { TestimonialsCarouselProps } from "./TestimonialsCarousel";
-export { TestimonialsCarousel } from "./TestimonialsCarousel";
-export type { BeforeAfterCardProps } from "./BeforeAfterCard";
-export { BeforeAfterCard } from "./BeforeAfterCard";
-export type { NewsletterBannerProps } from "./NewsletterBanner";
-export { NewsletterBanner } from "./NewsletterBanner";
-export { HomepageView } from "./HomepageView";
-export type { HomepageViewProps } from "./HomepageView";
-
-// ── Homepage section shells ──────────────────────────────────────────────────
-export type { SectionCarouselProps } from "./SectionCarousel";
-export { SectionCarousel } from "./SectionCarousel";
-
-export type { WelcomeSectionProps, WelcomeSectionChip } from "./WelcomeSection";
-export { WelcomeSection } from "./WelcomeSection";
-
-export type {
-  TrustFeatureItem,
-  TrustFeaturesSectionProps,
-} from "./TrustFeaturesSection";
-export { TrustFeaturesSection } from "./TrustFeaturesSection";
-
-export type { StatItem, StatsCounterSectionProps } from "./StatsCounterSection";
-export { StatsCounterSection } from "./StatsCounterSection";
-
-export type {
-  HowItWorksStep,
-  HowItWorksSectionProps,
-} from "./HowItWorksSection";
-export { HowItWorksSection } from "./HowItWorksSection";
-
-export type { CustomerReviewsSectionProps } from "./CustomerReviewsSection";
-export { CustomerReviewsSection } from "./CustomerReviewsSection";
-
-export type { FAQItem, FAQTab, FAQSectionProps } from "./FAQSection";
-export { FAQSection } from "./FAQSection";
-
-export type { NewsletterSectionProps } from "./NewsletterSection";
-export { NewsletterSection } from "./NewsletterSection";
-
-export type { AdvertisementBannerProps } from "./AdvertisementBanner";
-export { AdvertisementBanner } from "./AdvertisementBanner";
-
-export type {
-  SecurityHighlightItem,
-  SecurityHighlightsSectionProps,
-} from "./SecurityHighlightsSection";
-export { SecurityHighlightsSection } from "./SecurityHighlightsSection";
-
-export type {
-  SiteFeatureItem,
-  SiteFeaturesSectionProps,
-} from "./SiteFeaturesSection";
-export { SiteFeaturesSection } from "./SiteFeaturesSection";
-
-export type {
-  TrustIndicatorItem,
-  TrustIndicatorsSectionProps,
-} from "./TrustIndicatorsSection";
-export { TrustIndicatorsSection } from "./TrustIndicatorsSection";
-
-export type { WhatsAppCommunitySectionProps } from "./WhatsAppCommunitySection";
-export { WhatsAppCommunitySection } from "./WhatsAppCommunitySection";
-
-export { HomepageSkeleton } from "./HomepageSkeleton";
-
-export type {
-  FeaturedResultItem,
-  FeaturedResultsSectionProps,
-} from "./FeaturedResultsSection";
-export { FeaturedResultsSection } from "./FeaturedResultsSection";
-
-export type {
-  HowItWorksInfoStep,
-  HowItWorksInfoDetail,
-  HowItWorksInfoViewProps,
-} from "./HowItWorksInfoView";
-export { HowItWorksInfoView } from "./HowItWorksInfoView";

package/src/features/homepage/hooks/useBlogArticles.ts

@@ -1,46 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../../../http";
-import type { BlogListResponse } from "../../blog/types";
-
-const MIN_BLOG_COUNT = 4;
-
-export interface BlogListResult {
-  posts: BlogListResponse["posts"];
-  meta: { total: number; page: number; pageSize: number };
-}
-
-export function useBlogArticles() {
-  return useQuery<BlogListResult>({
-    queryKey: ["blog", "featured"],
-    queryFn: async () => {
-      const featuredResult = await apiClient.get<BlogListResponse>(
-        `/api/blog?featured=true&perPage=${MIN_BLOG_COUNT}`,
-      );
-      const featured = featuredResult.posts;
-
-      if (featured.length >= MIN_BLOG_COUNT) {
-        return featuredResult;
-      }
-
-      const remaining = MIN_BLOG_COUNT - featured.length;
-      const latestResult = await apiClient.get<BlogListResponse>(
-        `/api/blog?sort=-publishedAt&perPage=${MIN_BLOG_COUNT + remaining}`,
-      );
-
-      const existingIds = new Set(featured.map((p) => p.id));
-      const filler = latestResult.posts
-        .filter((p) => !existingIds.has(p.id))
-        .slice(0, remaining);
-
-      const posts = [...featured, ...filler];
-      return {
-        posts,
-        meta: { total: posts.length, page: 1, pageSize: posts.length },
-      };
-    },
-    staleTime: 10 * 60 * 1000,
-    gcTime: 30 * 60 * 1000,
-  });
-}

package/src/features/homepage/hooks/useFeaturedAuctions.ts

@@ -1,39 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../../../http";
-import type {
-  ProductItem,
-  ProductListResponse,
-} from "@mohasinac/feat-products";
-
-const MIN_COUNT = 12;
-
-export function useFeaturedAuctions() {
-  return useQuery<ProductItem[]>({
-    queryKey: ["auctions", "featured"],
-    queryFn: async () => {
-      const promotedRes = await apiClient.get<ProductListResponse>(
-        "/api/products?filters=isAuction%3D%3Dtrue%2Cstatus%3D%3Dpublished%2CisPromoted%3D%3Dtrue&pageSize=18",
-      );
-      const promoted = promotedRes?.items ?? [];
-
-      if (promoted.length >= MIN_COUNT) return promoted;
-
-      const remaining = MIN_COUNT - promoted.length;
-      const latestRes = await apiClient.get<ProductListResponse>(
-        `/api/products?filters=isAuction%3D%3Dtrue%2Cstatus%3D%3Dpublished&sorts=-createdAt&pageSize=${remaining + promoted.length}`,
-      );
-      const latest = latestRes?.items ?? [];
-
-      const existingIds = new Set(promoted.map((a) => a.id));
-      const filler = latest
-        .filter((a) => !existingIds.has(a.id))
-        .slice(0, remaining);
-
-      return [...promoted, ...filler];
-    },
-    staleTime: 30_000,
-    gcTime: 2 * 60 * 1000,
-  });
-}

package/src/features/homepage/hooks/useFeaturedPreOrders.ts

@@ -1,39 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../../../http";
-import type {
-  ProductItem,
-  ProductListResponse,
-} from "@mohasinac/feat-products";
-
-const MIN_COUNT = 12;
-
-export function useFeaturedPreOrders() {
-  return useQuery<ProductItem[]>({
-    queryKey: ["pre-orders", "featured"],
-    queryFn: async () => {
-      const featuredRes = await apiClient.get<ProductListResponse>(
-        "/api/products?filters=isPreOrder%3D%3Dtrue%2Cstatus%3D%3Dpublished&sorts=preOrderDeliveryDate&pageSize=6",
-      );
-      const featured = featuredRes?.items ?? [];
-
-      if (featured.length >= MIN_COUNT) return featured;
-
-      const remaining = MIN_COUNT - featured.length;
-      const latestRes = await apiClient.get<ProductListResponse>(
-        `/api/products?filters=isPreOrder%3D%3Dtrue%2Cstatus%3D%3Dpublished&sorts=-createdAt&pageSize=${remaining + featured.length}`,
-      );
-      const latest = latestRes?.items ?? [];
-
-      const existingIds = new Set(featured.map((p) => p.id));
-      const filler = latest
-        .filter((p) => !existingIds.has(p.id))
-        .slice(0, remaining);
-
-      return [...featured, ...filler];
-    },
-    staleTime: 10 * 60 * 1000,
-    gcTime: 30 * 60 * 1000,
-  });
-}

package/src/features/homepage/hooks/useFeaturedProducts.ts

@@ -1,44 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../../../http";
-import type { ProductListResponse } from "../../products/types";
-
-const MIN_COUNT = 12;
-
-export function useFeaturedProducts(options?: {
-  initialData?: ProductListResponse;
-}) {
-  return useQuery<ProductListResponse>({
-    queryKey: ["products", "featured"],
-    queryFn: async () => {
-      const promotedRes = await apiClient.get<ProductListResponse>(
-        "/api/products?filters=isPromoted%3D%3Dtrue%2Cstatus%3D%3Dpublished&pageSize=18",
-      );
-      const promoted = promotedRes?.items ?? [];
-
-      if (promoted.length >= MIN_COUNT) return promotedRes;
-
-      const remaining = MIN_COUNT - promoted.length;
-      const latestRes = await apiClient.get<ProductListResponse>(
-        `/api/products?filters=status%3D%3Dpublished&sorts=-createdAt&pageSize=${remaining + promoted.length}`,
-      );
-      const latest = latestRes?.items ?? [];
-
-      const existingIds = new Set(promoted.map((p) => p.id));
-      const filler = latest
-        .filter((p) => !existingIds.has(p.id))
-        .slice(0, remaining);
-
-      const merged = [...promoted, ...filler];
-      return {
-        ...promotedRes,
-        items: merged,
-        total: merged.length,
-      };
-    },
-    initialData: options?.initialData,
-    staleTime: 10 * 60 * 1000,
-    gcTime: 30 * 60 * 1000,
-  });
-}

package/src/features/homepage/hooks/useHeroCarousel.ts

@@ -1,19 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../../../http";
-import type { CarouselSlide } from "../types/index";
-
-/**
- * useHeroCarousel
- * Fetches active carousel slides for the homepage hero.
- * Data is pre-filtered to active slides, sorted by order, capped at 5.
- */
-export function useHeroCarousel(options?: { initialData?: CarouselSlide[] }) {
-  return useQuery<CarouselSlide[]>({
-    queryKey: ["carousel", "active"],
-    queryFn: () => apiClient.get<CarouselSlide[]>("/api/carousel"),
-    staleTime: 5 * 60 * 1000, // 5 minutes
-    initialData: options?.initialData,
-  });
-}

package/src/features/homepage/hooks/useHomepage.ts

@@ -1,25 +0,0 @@
-"use client";
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../../../http";
-import type { HomepageData } from "../types";
-
-interface UseHomepageOptions {
-  initialData?: HomepageData;
-  enabled?: boolean;
-}
-
-export function useHomepage(opts?: UseHomepageOptions) {
-  const query = useQuery<HomepageData>({
-    queryKey: ["homepage"],
-    queryFn: () => apiClient.get<HomepageData>("/api/homepage"),
-    initialData: opts?.initialData,
-    enabled: opts?.enabled,
-    staleTime: 5 * 60 * 1000,
-  });
-
-  return {
-    sections: query.data?.sections ?? [],
-    isLoading: query.isLoading,
-    error: query.error,
-  };
-}

package/src/features/homepage/hooks/useTopBrands.ts

@@ -1,17 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../../../http";
-import type { CategoryItem } from "../../categories/types";
-
-export function useTopBrands(limit = 12) {
-  return useQuery<CategoryItem[]>({
-    queryKey: ["categories", "brands", String(limit)],
-    queryFn: () =>
-      apiClient.get<CategoryItem[]>(
-        `/api/categories?isBrand=true&pageSize=${limit}`,
-      ),
-    staleTime: Infinity,
-    gcTime: Infinity,
-  });
-}

package/src/features/homepage/hooks/useTopCategories.ts

@@ -1,19 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../../../http";
-import type { CategoryItem } from "../../categories/types";
-
-export function useTopCategories(
-  limit = 12,
-  options?: { initialData?: CategoryItem[] },
-) {
-  return useQuery<CategoryItem[]>({
-    queryKey: ["categories", "top", String(limit)],
-    queryFn: () =>
-      apiClient.get<CategoryItem[]>(`/api/categories?tier=0&pageSize=${limit}`),
-    staleTime: Infinity,
-    gcTime: Infinity,
-    initialData: options?.initialData,
-  });
-}

package/src/features/homepage/index.ts

@@ -1,10 +0,0 @@
-export * from "./types";
-export * from "./hooks/useHomepage";
-export * from "./hooks/useHeroCarousel";
-export * from "./hooks/useFeaturedProducts";
-export * from "./hooks/useFeaturedAuctions";
-export * from "./hooks/useFeaturedPreOrders";
-export * from "./hooks/useTopCategories";
-export * from "./hooks/useTopBrands";
-export * from "./hooks/useBlogArticles";
-export * from "./components";

package/src/features/homepage/manifest.ts

@@ -1,16 +0,0 @@
-import type { FeatureManifest } from "../../contracts";
-
-export const manifest: FeatureManifest = {
-  name: "homepage",
-  i18nNamespace: "homepage",
-  envKeys: [],
-  routes: [{ segment: "[locale]", exports: { default: "HomepageView" } }],
-  apiRoutes: [
-    { segment: "api/homepage", methods: ["GET"] },
-    { segment: "api/homepage/sections", methods: ["GET", "POST"] },
-    {
-      segment: "api/homepage/sections/[id]",
-      methods: ["GET", "PATCH", "DELETE"],
-    },
-  ],
-};

package/src/features/homepage/messages/en.json

@@ -1,6 +0,0 @@
-{
-  "shopNow": "Shop Now",
-  "viewAll": "View All",
-  "featuredProducts": "Featured Products",
-  "featuredCategories": "Featured Categories"
-}

package/src/features/homepage/repository/homepage.repository.ts

@@ -1,38 +0,0 @@
-import type {
-  IRepository,
-  PagedResult,
-  SieveQuery,
-} from "../../../contracts";
-import type { HomepageSection } from "../types";
-
-export class HomepageSectionsRepository {
-  constructor(private readonly repo: IRepository<HomepageSection>) {}
-
-  async findAll(query?: SieveQuery): Promise<PagedResult<HomepageSection>> {
-    return this.repo.findAll({
-      filters: "isVisible==true",
-      sort: "order",
-      perPage: 50,
-      ...query,
-    });
-  }
-
-  async findById(id: string): Promise<HomepageSection | null> {
-    return this.repo.findById(id);
-  }
-
-  async create(data: Omit<HomepageSection, "id">): Promise<HomepageSection> {
-    return this.repo.create(data);
-  }
-
-  async update(
-    id: string,
-    data: Partial<HomepageSection>,
-  ): Promise<HomepageSection> {
-    return this.repo.update(id, data);
-  }
-
-  async delete(id: string): Promise<void> {
-    return this.repo.delete(id);
-  }
-}

package/src/features/homepage/server.ts

@@ -1,14 +0,0 @@
-export { HomepageSectionsRepository } from "./repository/homepage.repository";
-export { manifest } from "./manifest";
-export { GET as homepageGET, GET, POST } from "./api/route";
-export {
-  homepageSectionItemGET,
-  homepageSectionItemPATCH,
-  homepageSectionItemDELETE,
-} from "./api/[id]/route";
-export { carouselGET, carouselPOST } from "./api/carousel/route";
-export {
-  carouselItemGET,
-  carouselItemPATCH,
-  carouselItemDELETE,
-} from "./api/carousel/[id]/route";