"use client"; import React, { useState, useMemo } from "react"; import { IoCopy, IoPersonAdd, IoShareSocial, IoCartOutline, IoCheckmark, IoGiftOutline, IoBagHandleOutline, IoShieldCheckmarkOutline, IoBulbOutline, } from "react-icons/io5"; import { FaFacebook, FaXTwitter, FaWhatsapp } from "react-icons/fa6"; import type { IconType } from "react-icons"; import { BiWallet } from "react-icons/bi"; import { Dialog, DialogContent, DialogHeader } from "@/components/ui/dialog"; import { RiCloseFill } from "react-icons/ri"; import dynamic from "next/dynamic"; import referEarnAnimation from "@/assets/refer-earn.json"; import { t } from "@/utils/translation"; import { useSelector } from "react-redux"; const Lottie = dynamic(() => import("lottie-react"), { ssr: false }); // The gift box in refer-earn.json is baked in 3 red tones (main body/lid, the // gradient dark stop, the bottom shadow). Recolor each to the runtime primary // at a matching brightness so the box keeps depth but follows the theme. The // gold ribbon + white sparkles are left as accent pops. // Tones are matched by hue+brightness order, not exact value. const RED_TONES = [ { rgb: [0.988235, 0.101961, 0.25098], shade: 1 }, // main red (lid/body) { rgb: [0.588235, 0.058824, 0.14902], shade: 0.62 }, // gradient dark stop { rgb: [0.458824, 0.027451, 0.098039], shade: 0.48 }, // bottom shadow ]; const hexToRgb = (hex: string | null | undefined): number[] | null => { if (!hex) return null; let h = String(hex).trim().replace(/^#/, ""); if (/^[a-f\d]{3}$/i.test(h)) h = h .split("") .map((c) => c + c) .join(""); const m = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h); return m ? [1, 2, 3].map((i) => parseInt(m[i], 16) / 255) : null; }; const near = (a: number, b: number) => Math.abs(a - b) < 0.03; // Match an [r,g,b] against the red tone table → primary * shade, or null. const remapRed = ( r: number, g: number, b: number, primary: number[], ): number[] | null => { const t = RED_TONES.find( (x) => near(x.rgb[0], r) && near(x.rgb[1], g) && near(x.rgb[2], b), ); return t ? primary.map((c) => c * t.shade) : null; }; // Lottie animation JSON — raw third-party asset with no exported shape, kept // as `any` per this project's pragmatic-TS policy (see AGENTS.md rule 4). const recolorGift = (anim: any, rgb: number[] | null) => { if (!rgb) return anim; const clone = JSON.parse(JSON.stringify(anim)); const walk = (node: any) => { if (Array.isArray(node)) return node.forEach(walk); if (!node || typeof node !== "object") return; // Solid fill/stroke: c.k = [r,g,b] (SVGator omits alpha). if (node.ty === "fl" || node.ty === "st") { const k = node.c?.k; if (Array.isArray(k) && typeof k[0] === "number") { const mapped = remapRed(k[0], k[1], k[2], rgb); if (mapped) node.c.k = [...mapped, ...(k.length > 3 ? [k[3]] : [])]; } } // Gradient fill: g.k.k = [pos,r,g,b, pos,r,g,b, ...] — recolor each red stop. if (node.ty === "gf") { const stops = node.g?.k?.k; if (Array.isArray(stops)) { for (let i = 0; i + 3 < stops.length; i += 4) { const mapped = remapRed( stops[i + 1], stops[i + 2], stops[i + 3], rgb, ); if (mapped) [stops[i + 1], stops[i + 2], stops[i + 3]] = mapped; } } } Object.values(node).forEach(walk); }; walk(clone.assets || []); walk(clone.layers || []); return clone; }; interface ReferAndEarnModalProps { showReferAndEarn: boolean; setShowReferAndEarn: (show: boolean) => void; } const ReferAndEarnModal = ({ showReferAndEarn, setShowReferAndEarn }: ReferAndEarnModalProps) => { const user = useSelector((state: any) => state.User.user); const webSettings = useSelector( (state: any) => state.Setting?.setting?.web_settings, ); // Reward amounts, currency, policies etc. come from the country_setting API, // fetched app-wide in Layout and stored in redux. const referData = useSelector((state: any) => state.CountrySetting.countrySetting); // RTL flips the step row visually, so the connector arrows must mirror too. const isRtl = useSelector( (state: any) => state.Language.selectedLanguage?.type, )?.toLowerCase() === "rtl"; const [copied, setCopied] = useState(false); // Recolor the gift box to the runtime primary. Read settings first, fall back // to the CSS var (client only). Recompute only when the modal opens or color // changes so the JSON walk doesn't run every render. const giftAnimation = useMemo(() => { if (!showReferAndEarn) return referEarnAnimation; const fromSettings = webSettings?.light_mode_color || webSettings?.color; const hex = fromSettings || (typeof window !== "undefined" ? getComputedStyle(document.documentElement).getPropertyValue( "--primary-color", ) : null); return recolorGift(referEarnAnimation, hexToRgb(hex)); }, [showReferAndEarn, webSettings]); const currency = referData?.currency ?? ""; const referrerBonus = referData?.referral_credit_first_order; const friendBonus = referData?.referral_credit_referred; const minOrder = referData?.referral_min_order_amount; const hasReward = referrerBonus > 0 || friendBonus > 0; const handleCopyCode = () => { navigator.clipboard.writeText(user?.referral_code); setCopied(true); setTimeout(() => setCopied(false), 2000); }; const handleShare = (platform: "facebook" | "twitter" | "whatsapp") => { const message = `${t("join_me_message")}: ${user?.referral_code}`; const encodedMessage = encodeURIComponent(message); switch (platform) { case "facebook": window.open( `https://www.facebook.com/sharer/sharer.php?u=${encodedMessage}`, "_blank", ); break; case "twitter": window.open( `https://twitter.com/intent/tweet?text=${encodedMessage}`, "_blank", ); break; case "whatsapp": window.open(`https://wa.me/?text=${encodedMessage}`, "_blank"); break; } }; const steps = [ { icon: IoShareSocial, title: t("share_your_code"), desc: t("share_your_code_desc"), }, { icon: IoCartOutline, title: t("friend_places_order"), desc: t("friend_places_order_desc"), }, { icon: BiWallet, title: t("you_earn_bonus"), desc: t("you_earn_bonus_desc"), }, ]; // "Both get" summary cards. Each carries its own tint so the trio reads like // the reference: min-order (green) · you-earn (amber) · friend-gets (blue). // "you" card hides when referrer bonus is 0, "friend" card hides when the // first-order bonus is 0. min-order always shows while any reward exists. const perks = [ { key: "min", Icon: IoBagHandleOutline, label: t("min_order"), value: `${currency}${minOrder || 0}`, desc: t("share_message"), tint: "emerald", }, referrerBonus > 0 && { key: "you", Icon: IoPersonAdd, label: t("you_get"), value: `${currency}${referrerBonus || 0}`, desc: t("you_earn_bonus_desc"), tint: "amber", }, friendBonus > 0 && { key: "friend", Icon: IoPersonAdd, label: t("friend_gets"), value: `${currency}${friendBonus || 0}`, desc: t("friend_places_order_desc"), tint: "sky", }, ].filter( ( perk, ): perk is { key: string; Icon: IconType; label: string; value: string; desc: string; tint: string; } => Boolean(perk), ); // Per-tint class map — kept static so Tailwind's JIT sees full class strings. const TINT = { emerald: { card: "bg-emerald-50 dark:bg-emerald-500/10 ring-emerald-100 dark:ring-emerald-500/20", icon: "bg-emerald-100 dark:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400", value: "text-emerald-600 dark:text-emerald-400", label: "text-emerald-700 dark:text-emerald-300", }, amber: { card: "bg-amber-50 dark:bg-amber-500/10 ring-amber-100 dark:ring-amber-500/20", icon: "bg-amber-100 dark:bg-amber-500/20 text-amber-600 dark:text-amber-400", value: "text-amber-600 dark:text-amber-500", label: "text-amber-700 dark:text-amber-300", }, sky: { card: "bg-sky-50 dark:bg-sky-500/10 ring-sky-100 dark:ring-sky-500/20", icon: "bg-sky-100 dark:bg-sky-500/20 text-sky-600 dark:text-sky-400", value: "text-sky-600 dark:text-sky-400", label: "text-sky-700 dark:text-sky-300", }, }; // `color` = brand tint for the icon well. Twitter/X uses null → falls back to // the theme text color so the black X mark stays legible on a dark ground too. const socials: { key: "facebook" | "twitter" | "whatsapp"; label: string; Icon: IconType; color: string | null; }[] = [ { key: "facebook", label: t("facebook"), Icon: FaFacebook, color: "#1877F2", }, { key: "twitter", label: t("twitter"), Icon: FaXTwitter, color: null }, { key: "whatsapp", label: t("whatsapp"), Icon: FaWhatsapp, color: "#25D366", }, ]; return ( {/* Close */} {/* ── HERO: purple gradient banner + 3D gift art ─────────────────── */}
{/* sparkle glow blobs */}
{/* animated illustration, pinned to the reading-end top corner (right in LTR, left in RTL) so it never overlaps the text block. A soft white radial pulse glows behind so it lifts off the hero. */}
{/* pulsing glow */}
{t("referandearn")}

{t("invite_friends_and_earn_rewards")}

{t("share_message")}

{/* trust pills */}
{t("secure") || "Secure"} · {t("simple") || "Simple"} · {t("rewarding") || "Rewarding"}
{/* ── BODY: pulled up over the hero curve ────────────────────────── */}
{/* Referral code card */}
{t("your_referral_code")}
{user?.referral_code}
{t("share_message")}
{/* You & Your Friend Both Get — tinted trio */} {hasReward && (
{/* dashed lines w/ end dots + gift-badge label — a distinct divider that echoes the step-connector dashes. */}
{t("you_and_your_friend_both_get") || "You & Your Friend Both Get"}
{perks.map(({ key, Icon, label, value, tint }) => { const c = TINT[tint]; return (
{label} {value}
); })}
)} {/* How it works — horizontal step nodes with connector */}
{/* dashed lines w/ end dots + icon-badge label — same divider as "You & Your Friend Both Get". */}
{t("how_it_works")}
{/* Two dashed arcs bulging UP between the node pairs, the second ending in an arrowhead into the last (gift) node — matches the reference wave. Aspect preserved so arcs + arrow keep their shape at any width. */} {steps.map((step, i) => { const Icon = step.icon; return (
{i + 1}
{step.title} {step.desc}
); })}
{/* Share row — label + social buttons (doubles as the primary CTA) */}
{t("share_via_social_apps")}
{socials.map(({ key, label, Icon, color }) => ( ))}
); }; export default ReferAndEarnModal;