/* =====================================================================
Mereka v2 — Gamification module (Points & Rewards) — UPDATED to UXA
Dark-header summary cards, illustrated quests, 3-tab Points & Rewards
with Add-a-voucher, redesigned My Badges (seals + For you), Membership
tiers (Unlocked/Locked + progress), GrabGifts reward flow, Add-voucher
modal, quest-detail illustrations, weekly-streak popup, sidebar block,
public Learner profile. Global on/off flag (bottom-right toggle).
===================================================================== */
/* ---------- Global on/off flag ---------- */
let _gamiOn = (() => { try { const v = localStorage.getItem('mereka_gami'); return v === null ? true : v === '1'; } catch (e) { return true; } })();
const _gamiSubs = new Set();
function setGamiOn(v) { _gamiOn = !!v; try { localStorage.setItem('mereka_gami', _gamiOn ? '1' : '0'); } catch (e) {} _gamiSubs.forEach(fn => fn(_gamiOn)); }
function useGamiOn() {
const [v, setV] = React.useState(_gamiOn);
React.useEffect(() => { const fn = (x) => setV(x); _gamiSubs.add(fn); setV(_gamiOn); return () => _gamiSubs.delete(fn); }, []);
return v;
}
/* ---------- Data ---------- */
const GAMI = {
user: 'Faiz Fadhillah', balance: 780, expiry: '31 Dec 2026', referral: 'NZWKLR20',
rankWeek: 15, rankWeekDelta: 2, rankAll: 22, rankAllDelta: 4, streakWeeks: 2,
tier: 'Explorer', tierPoints: 350, tierNext: 500, tierNextName: 'Achiever',
};
const GAMI_FEATURED_QUESTS = [
{ group: 'QUEST GROUP NAME', title: 'Quest name', pts: 10, cta: 'Start', state: 'active', expires: '12:59:00', art: 0 },
{ group: 'LEARN AND EARN', title: 'Join AI4U learning path', pts: 10, cta: 'Start', state: 'active', expires: '12:59:00', art: 1 },
{ group: 'LEARN AND EARN', title: 'Join a course', pts: 10, cta: 'Start', state: 'active', repeatable: true, prog: '1/5 complete', art: 2 },
{ group: 'WELCOME', title: 'Complete profile', pts: 10, cta: 'Continue', state: 'active', art: 3 },
];
const GAMI_QUEST_GROUPS = [
{ name: 'Welcome', done: 1, total: 3, bonus: 50, rate: 50, quests: [
{ title: 'Complete profile', pts: 10, desc: 'Complete your profile to earn points!', state: 'progress', prog: '1/5 complete', art: 0, cta: 'Continue' },
{ title: 'Sign up bonus', pts: 10, desc: 'Welcome! Create an account to earn your first 10 pts.', state: 'completed', art: 0 },
{ title: 'Complete profile', pts: 10, desc: 'Complete your profile to earn points!', state: 'completed', prog: '5/5 complete', art: 0 },
] },
{ name: 'Learn and earn', done: 0, total: 4, bonus: 40, rate: 15, quests: [
{ title: 'Join a course', pts: 10, desc: 'Expand your knowledge and earn rewards by enrolling in a course. Each course you join earns points toward exclusive perks and achievements.', state: 'active', repeatable: true, cta: 'Start', art: 2 },
{ title: 'Join a learning path', pts: 10, desc: 'Join a learning path to earn points. The more you explore, the more you earn!', state: 'active', repeatable: true, cta: 'Start', art: 1 },
{ title: 'Join an experience', pts: 10, desc: 'Sign up and attend an experience to earn points. The more you explore, the more you earn!', state: 'active', repeatable: true, cta: 'Start', art: 2 },
{ title: 'Join an expertise session', pts: 10, desc: 'Sign up and attend an expertise session to earn points. The more you explore, the more you earn!', state: 'active', repeatable: true, cta: 'Start', art: 1 },
] },
{ name: 'Standalone', done: 0, total: 3, bonus: 30, rate: 15, quests: [
{ title: 'Join AI4U learning path', pts: 10, desc: 'Limited time quest! Join AI4U learning path now to earn bonus points.', state: 'active', cta: 'Start', expires: '12:59:00', art: 3, featured: true },
{ title: 'Refer and earn', pts: 10, desc: 'Spread the word! Earn 10 pts for every new friend who signs up using your referral code.', state: 'active', repeatable: true, cta: 'Continue', art: 3 },
{ title: 'Join AI4U learning path', pts: 10, desc: 'Limited time quest! Join AI4U learning path now to earn bonus points.', state: 'expired', art: 3 },
] },
];
const GAMI_REWARDS = [
{ id: 'grab10', title: 'Grab RM10 Voucher', desc: 'RM10 Grab e-voucher – rides or food.', pts: 100, cat: 'Vouchers', fav: true },
{ id: 'grab25', title: 'Grab RM25 Voucher', desc: 'RM25 Grab e-voucher – rides or food.', pts: 250, cat: 'Vouchers' },
{ id: 'grab50', title: 'Grab RM50 Voucher', desc: 'RM50 Grab e-voucher – rides or food.', pts: 500, cat: 'Vouchers' },
{ id: 'grab50b', title: 'Grab RM50 Voucher', desc: 'RM50 Grab e-voucher – rides or food.', pts: 500, cat: 'Vouchers' },
{ id: 'credit25', title: 'RM25 Course Credit', desc: 'RM25 off any course or experience.', pts: 250, cat: 'Discounts', mereka: true, fav: true },
{ id: 'credit50', title: 'RM50 Course Credit', desc: 'RM50 off any course or learning path.', pts: 500, cat: 'Discounts', mereka: true },
{ id: 'session', title: 'Free 30-min expertise session', desc: 'One complimentary expertise mini-session.', pts: 400, cat: 'Gift cards', mereka: true },
{ id: 'grab10b', title: 'Grab RM10 Voucher', desc: 'RM10 Grab e-voucher – rides or food.', pts: 100, cat: 'Vouchers' },
{ id: 'credit10', title: 'RM10 Course Credit', desc: 'RM10 off your next booking.', pts: 100, cat: 'Discounts', mereka: true },
];
const GAMI_REDEMPTIONS = [
{ id: 'r1', title: 'Grab RM10 Voucher', desc: 'RM10 Grab e-voucher – rides or food.', cat: 'Vouchers', used: false, fav: true },
{ id: 'r2', title: 'Grab RM25 Voucher', desc: 'RM25 Grab e-voucher – rides or food.', cat: 'Vouchers', used: false },
{ id: 'r3', title: 'Grab RM10 Voucher', desc: 'RM10 Grab e-voucher – rides or food.', cat: 'Vouchers', used: true },
];
const GAMI_HISTORY = [
{ pts: 10, detail: 'Complete profile quest', date: '12 Jan 2026', time: '14:30', type: 'Earning' },
{ pts: 10, detail: 'Complete profile quest', date: '12 Jan 2026', time: '14:30', type: 'Earning' },
{ pts: -100, detail: 'Grab RM10 Voucher', date: '12 Jan 2026', time: '14:30', type: 'Spending' },
];
const GAMI_LEADERBOARD = {
'All time': [
{ name: 'Florence Jones', state: 'Perak', pts: 100, reward: 50 },
{ name: 'Adam Wilson', state: 'Kuala Lumpur', pts: 95, reward: 25 },
{ name: 'Jackson Lee', state: 'Kuching', pts: 95, reward: 10 },
{ name: 'Jennifer Tay', state: 'Johor', pts: 85, reward: 5 },
{ name: 'Michael Chen', state: 'Kuala Lumpur', pts: 80, reward: 5 },
{ name: 'Aisha Rahman', state: 'Penang', pts: 80, reward: 5 },
{ name: 'Ravi Kumar', state: 'Malacca', pts: 75, reward: 5 },
{ name: 'Siti Nurhaliza', state: 'Putrajaya', pts: 75, reward: 5 },
{ name: 'Faiz Fadhillah', state: 'Kuala Lumpur', pts: 75, reward: 5, me: true },
{ name: 'Fiona Lim', state: 'Langkawi', pts: 70, reward: 5 },
],
'Monthly': [
{ name: 'Aisha Rahman', state: 'Penang', pts: 62, reward: 50 },
{ name: 'Faiz Fadhillah', state: 'Kuala Lumpur', pts: 58, reward: 25, me: true },
{ name: 'Florence Jones', state: 'Perak', pts: 55, reward: 10 },
{ name: 'Ravi Kumar', state: 'Malacca', pts: 52, reward: 5 },
{ name: 'Adam Wilson', state: 'Kuala Lumpur', pts: 50, reward: 5 },
{ name: 'Fiona Lim', state: 'Langkawi', pts: 48, reward: 5 },
{ name: 'Jennifer Tay', state: 'Johor', pts: 45, reward: 5 },
{ name: 'Jackson Lee', state: 'Kuching', pts: 44, reward: 5 },
{ name: 'Michael Chen', state: 'Kuala Lumpur', pts: 40, reward: 5 },
{ name: 'Siti Nurhaliza', state: 'Putrajaya', pts: 38, reward: 5 },
],
'Weekly': [
{ name: 'Jackson Lee', state: 'Kuching', pts: 30, reward: 50 },
{ name: 'Siti Nurhaliza', state: 'Putrajaya', pts: 28, reward: 25 },
{ name: 'Faiz Fadhillah', state: 'Kuala Lumpur', pts: 26, reward: 10, me: true },
{ name: 'Michael Chen', state: 'Kuala Lumpur', pts: 24, reward: 5 },
{ name: 'Florence Jones', state: 'Perak', pts: 22, reward: 5 },
{ name: 'Jennifer Tay', state: 'Johor', pts: 20, reward: 5 },
{ name: 'Fiona Lim', state: 'Langkawi', pts: 18, reward: 5 },
{ name: 'Adam Wilson', state: 'Kuala Lumpur', pts: 16, reward: 5 },
{ name: 'Aisha Rahman', state: 'Penang', pts: 14, reward: 5 },
{ name: 'Ravi Kumar', state: 'Malacca', pts: 12, reward: 5 },
],
};
const GAMI_LEADERS = GAMI_LEADERBOARD['All time'];
const GAMI_TIERS = [
{ name: 'Explorer', sub: 'Default', unlock: 0, medal: '#C77B3B', perks: [
['Standard features', 'Access to standard public experiences, courses, and gigs.'],
['Base point earning rate', 'Earn 1x points on actions.'],
['Dashboard access', 'Standard dashboard features and progress tracking.'],
] },
{ name: 'Achiever', sub: '', unlock: 500, medal: '#AEB4BE', perks: [
['1.2x Point Multiplier', 'Earn points 20% faster on all activities.'],
['Priority Booking Window', '24-hour early access to high-demand workshops/experiences before public release.'],
['Monthly Discount Voucher', 'Automated 5-10% off code applied at checkout once per month.'],
['Profile Badge', 'Achiever badge displayed on public profile and forum posts.'],
] },
{ name: 'Innovator', sub: '', unlock: 2000, medal: '#E8B23A', perks: [
['1.5x Point Multiplier', 'Earn points 50% faster.'],
['VIP Event Access', 'Exclusive access to members-only webinars, expert Q&As, or networking sessions.'],
['Zero Booking Fee / Extra Discounts', 'Standard platform convenience fees waived or higher flat discounts on paid experiences.'],
['Featured Profile Status', 'Highlighted placement in "Find Experts" or community directory.'],
] },
];
const GAMI_BADGES = [
{ name: 'AI Explorer', req: 'Complete 3 AI courses', date: '12/08/2026', earned: true, hue: '#2F6BFF', letter: 'A' },
{ name: 'AI Fluent', req: 'Complete an AI learning pathway', date: '12/08/2026', earned: true, hue: '#1FA85B', letter: 'A' },
{ name: 'Lifelong Learner', req: 'Complete 10 courses', date: '12/08/2026', earned: true, hue: '#E4572E', letter: 'A' },
{ name: 'Knowledge Seeker', req: 'Complete 5 courses', date: '12/08/2026', earned: true, hue: '#E8B23A', letter: 'A' },
];
const GAMI_BADGES_FORYOU = [
{ name: 'Fast Learner', req: 'Complete 5 courses', done: 3, total: 5, hue: '#2F6BFF' },
{ name: 'Path Completer', req: 'Finish a learning path', done: 3, total: 5, hue: '#1FA85B' },
{ name: 'Top Reviewer', req: 'Leave 10 reviews', done: 3, total: 5, hue: '#E4572E' },
{ name: 'Streak Master', req: 'Hold a 4-week streak', done: 3, total: 5, hue: '#E8B23A' },
{ name: 'Category Explorer', req: 'Book all 4 categories', done: 3, total: 5, hue: '#2F6BFF' },
{ name: 'Community Helper', req: 'Answer 5 questions', done: 3, total: 5, hue: '#1FA85B' },
{ name: 'First Certificate', req: 'Earn a certificate', done: 3, total: 5, hue: '#E4572E' },
];
/* ---------- Small helpers ---------- */
function GamiStar({ size = 22 }) {
return
);
}
function GamiChips({ chips, value, onChange }) {
return (
{chips.map(c => (
onChange(c)}
className={`px-3.5 h-8 inline-flex items-center rounded-full text-[13px] font-semibold transition-colors ${value === c ? 'bg-ink text-white' : 'border border-neutral-200 text-neutral-600 hover:border-neutral-300'}`}>{c}
))}
);
}
/* Badge seal (two rotated squircles + letter/sparkle) */
function GamiBadgeSeal({ hue = '#2F6BFF', locked = false, size = 56, letter = 'A' }) {
const c = locked ? '#AEB4BE' : hue;
const sq = (bg, scale, rot) =>
{sq(c, 1, 0)}{sq(c, 1, 45)}{sq('#15121C', 0.78, 0)}{sq('#15121C', 0.78, 45)}
{letter}✦
);
}
/* Tier medal (star seal) */
function GamiTierMedal({ color = '#C77B3B', locked = false, size = 80 }) {
const c = locked ? '#AEB4BE' : color;
const sq = (bg, scale, rot) =>
{sq(c, 1, 0)}{sq(c, 1, 45)}
);
}
/* Real Figma quest illustration (Mereka V2 — UXA, node 5351-97646) */
function GamiQuestArt({ seed = 0, size = 56, rounded = 'rounded-xl', full = false }) {
return (
);
}
/* GrabGifts / Mereka reward logo */
function GamiRewardLogo({ mereka = false, size = 44 }) {
return (
{mereka ? M
: <>Grab eGIFT }
);
}
/* ---------- GrabGifts / Mereka reward banner artwork ---------- */
function GamiRewardBanner({ mereka = false, h = 150, fav, onFav, rounded = 'rounded-t-2xl' }) {
const a = mereka ? '#12A5A5' : '#00B14F', b = mereka ? '#0A7E7E' : '#00933F';
const confetti = [['12%', '20%', '#FFD54A', 8], ['30%', '60%', '#FF6F61', 7], ['66%', '16%', '#FFFFFF', 6], ['84%', '44%', '#FFD54A', 7], ['50%', '30%', '#8CE0B4', 6]];
return (
{confetti.map(([l, t, c, sz], i) =>
)}
{mereka ? 'Mereka' : 'GrabGifts'}
{mereka ? 'eCREDIT' : 'eGIFT'}
{fav !== undefined &&
{ e.stopPropagation(); onFav && onFav(); }} className="absolute top-3 right-3 w-8 h-8 rounded-full bg-black/60 text-white flex items-center justify-center hover:bg-black/75"> }
{label}
);
return (
{crumb && (
{crumb}
)}
This week {GAMI.rankWeek}
All time {GAMI.rankAll}
{earned.slice(0, 3).map(b => (
{b.name}
))}
{GAMI.tier} {GAMI.tierPoints} / {GAMI.tierNext}
Earn {GAMI.tierNext - GAMI.tierPoints} pts to unlock next tier
Referral Code {GAMI.referral}
);
}
/* ---------- Weekly streak card (used only in popup) ---------- */
function GamiWeeklyStreak() {
const weeks = GAMI.streakWeeks;
return (
🔥
Weekly streak · {weeks} weeks
Complete a course module this week to keep your streak alive.
);
}
/* ---------- Quest detail modal (gradient + stepper + T&C) ---------- */
function GamiQuestModal({ quest, onClose }) {
if (!quest) return null;
const done = quest.state === 'completed';
const steps = quest.repeatable
? [['Join ' + quest.title.replace(/^Join /i, ''), quest.pts, 'done'], ['Complete a course in ' + quest.title.replace(/^Join /i, ''), quest.pts, 'active'], ['Complete the ' + quest.title.replace(/^Join /i, ''), quest.pts, 'locked']]
: [[quest.title, quest.pts, done ? 'done' : 'active']];
const total = steps.reduce((a, s) => a + s[1], 0);
return (
e.stopPropagation()}>
{quest.title}
+{total} pts {quest.repeatable &&
{quest.desc}
{steps.map(([label, pts, st], i) => (
Step {i + 1}
{label}. +{pts} pts
{st === 'done' ?
Completed
: st === 'locked' ?
:
Continue }
))}
Terms and Conditions
All points awarded are non-exchangeable for cash or credit. No refund or exchange for used or unused points and rewards is allowed.
Points and rewards will be forfeited with no extension if not used within the stated time frame.
Points are automatically awarded to your account once the steps are completed.
);
}
/* ---------- Reward detail / redemption flow (GrabGifts) ---------- */
function GamiRewardModal({ reward, initialStep = 'detail', onClose }) {
const [step, setStep] = React.useState(initialStep);
const [used, setUsed] = React.useState(false);
React.useEffect(() => { setStep(initialStep); setUsed(false); }, [reward, initialStep]);
if (!reward) return null;
const tags = reward.mereka ? ['Credit', 'Mereka'] : ['Voucher', 'Partner'];
const Head = () => (
{reward.title} {tags.map(t => {t} )}
);
return (
e.stopPropagation()}>
{step === 'detail' && (<>
{reward.desc}
********
Copy this code and paste it on the Grab voucher redemption page to activate your voucher.
setStep('confirm')} className="h-12 px-6 rounded-full bg-ink text-white text-[15px] font-semibold inline-flex items-center gap-2 hover:bg-black">
)}
{step === 'confirm' && (<>
Redeem the following reward? Your points will be deducted immediately.
setStep('success')} className="h-12 px-6 rounded-full bg-ink text-white text-[15px] font-semibold hover:bg-black inline-flex items-center gap-2">
)}
{step === 'success' && (<>
Reward redeemed!
Congratulations! You have successfully redeemed the reward.
setStep('claimed')} className="h-12 px-6 rounded-full bg-ink text-white text-[15px] font-semibold hover:bg-black">View reward
)}
{step === 'claimed' && (<>
{reward.desc}
{reward.mereka ? 'MRKA-4821' : 'GRB-93F2XA'}
Copy this code and paste it on the Grab voucher redemption page to activate your voucher.
{used ? Reward used
: setUsed(true)} className="h-11 px-5 rounded-full border border-neutral-300 text-sm font-semibold inline-flex items-center gap-2 hover:bg-neutral-50"> }
)}
);
}
/* ---------- Add a voucher modal (with states) ---------- */
function GamiVoucherModal({ onClose }) {
const [code, setCode] = React.useState('');
const [status, setStatus] = React.useState(null); // null | invalid | success | used
const submit = () => {
const c = code.trim().toUpperCase();
if (!c) return;
if (c === 'USED123') setStatus('used');
else if (/^[A-Z0-9]{6}$/.test(c)) setStatus('success');
else setStatus('invalid');
};
const border = status === 'invalid' || status === 'used' ? 'border-red-400 focus:border-red-500' : status === 'success' ? 'border-green-400' : 'border-neutral-300 focus:border-primary';
return (
e.stopPropagation()}>
Add a voucher Voucher code
{ setCode(e.target.value); setStatus(null); }} placeholder="E.g: ABC123" className={`w-full h-11 px-4 rounded-xl border ${border} focus:outline-none text-[15px]`} />
{status === 'invalid' &&
Invalid code
}
{status === 'used' &&
Voucher has already been used
}
{status === 'success' &&
Voucher added to your redemptions!
}
{status === 'success'
? Claim }
);
}
/* ---------- Reward card ---------- */
function GamiRewardCard({ r, onRedeem }) {
const [fav, setFav] = React.useState(!!r.fav);
return (
setFav(v => !v)} />
{r.title}
{r.desc}
onRedeem(r)} className="h-10 px-6 rounded-full border border-neutral-200 text-ink text-[13px] font-bold inline-flex items-center gap-2 hover:bg-neutral-50">
);
}
/* ---------- Redemption card ---------- */
function GamiRedemptionCard({ r, onUse }) {
return (
{r.title}
{r.desc}
{r.used ? Reward used
: onUse(r)} className="h-10 px-5 rounded-full bg-ink text-white text-[13px] font-semibold inline-flex items-center gap-1 hover:bg-black">Use now }
);
}
/* ---------- 1) Points & Rewards (Earn / Redeem / My redemptions) ---------- */
function GamiPointsRewardsPage() {
const [tab, setTab] = React.useState('earn');
const [qfilter, setQfilter] = React.useState('All');
const [rcat, setRcat] = React.useState('All');
const [dcat, setDcat] = React.useState('All');
const [quest, setQuest] = React.useState(null);
const [reward, setReward] = React.useState(null);
const [rewardStep, setRewardStep] = React.useState('detail');
const [voucherOpen, setVoucherOpen] = React.useState(false);
const openReward = (r, step) => { setReward(r); setRewardStep(step || 'detail'); };
const filteredGroups = GAMI_QUEST_GROUPS.map(g => ({
...g,
quests: g.quests.filter(q => qfilter === 'All'
|| (qfilter === 'Active' && (q.state === 'active' || q.state === 'progress'))
|| (qfilter === 'Completed' && q.state === 'completed')
|| (qfilter === 'Expired' && q.state === 'expired')),
})).filter(g => g.quests.length);
const store = GAMI_REWARDS.filter(r => rcat === 'All' ? true : rcat === 'Favorites' ? r.fav : rcat === 'Grab' ? /Grab/i.test(r.title) : r.cat === rcat);
const redeems = GAMI_REDEMPTIONS.filter(r => dcat === 'All' ? true : dcat === 'Favorites' ? r.fav : dcat === 'Grab' ? /Grab/i.test(r.title) : dcat === 'Used' ? r.used : r.cat === dcat);
const pill = (k, label) => (
setTab(k)} className={`h-10 px-5 rounded-full text-sm font-semibold transition-colors ${tab === k ? 'bg-ink text-white' : 'border border-neutral-200 text-neutral-600 hover:border-neutral-300'}`}>{label}
);
return (
{/* tabs + add voucher */}
{pill('earn', 'Earn points')}{pill('redeem', 'Redeem rewards')}{pill('redemptions', 'My redemptions')}
setVoucherOpen(true)} className="h-10 px-4 rounded-full border border-neutral-200 text-sm font-semibold inline-flex items-center gap-2 hover:bg-neutral-50">
{tab === 'earn' && (
Quests for you
{GAMI_FEATURED_QUESTS.map((q, i) => (
{q.title}
+{q.pts} pts
{q.expires &&
setQuest(q)} className={`h-8 px-4 rounded-full text-[13px] font-semibold inline-flex items-center gap-1 ${q.cta === 'Continue' ? 'bg-ink text-white hover:bg-black' : 'border border-neutral-200 text-neutral-700 hover:bg-neutral-50'}`}>{q.cta || 'Start'}
))}
All quests Complete the following quests to earn more points.
Points history
{filteredGroups.map(g => (
{g.name} ({g.done}/{g.total}) +{g.bonus} pts
Completion rate
{g.quests.map((q, i) => (
{q.title}
{q.desc}
+{q.pts} pts
{q.prog &&
{q.state === 'completed' ?
: q.state === 'expired' ?
:
setQuest(q)} className={`h-9 px-4 rounded-full text-[13px] font-semibold inline-flex items-center gap-1 flex-shrink-0 ${q.cta === 'Continue' ? 'bg-ink text-white hover:bg-black' : 'border border-neutral-200 text-neutral-700 bg-white hover:bg-neutral-50'}`}>{q.cta || 'Start'} }
))}
))}
)}
{tab === 'redeem' && (
All rewards Redeem your points for vouchers. Confirming a redemption deducts the points immediately.
{store.map(r => openReward(x, 'detail')} />)}
)}
{tab === 'redemptions' && (
My Redemptions This is where all the rewards you have redeemed are stored.
{redeems.map(r => openReward(x, 'claimed')} />)}
)}
setQuest(null)} />
setReward(null)} />
{voucherOpen && setVoucherOpen(false)} />}
);
}
/* ---------- 2) All rewards ---------- */
function GamiAllRewardsPage() {
const [cat, setCat] = React.useState('All');
const [reward, setReward] = React.useState(null);
const view = GAMI_REWARDS.filter(r => cat === 'All' ? true : cat === 'Favorites' ? r.fav : cat === 'Grab' ? /Grab/i.test(r.title) : r.cat === cat);
return (
{view.map(r =>
Showing 1-{view.length} of {view.length}
setReward(null)} />
);
}
/* ---------- 3) My redemptions ---------- */
function GamiMyRedemptionsPage() {
const [cat, setCat] = React.useState('All');
const [reward, setReward] = React.useState(null);
const view = GAMI_REDEMPTIONS.filter(r => cat === 'All' || (cat === 'Used' ? r.used : r.cat === cat));
return (
My redemptions This is where all the rewards you have redeemed are stored.
{view.map(r => setReward(x)} />)}
Showing 1-{view.length} of {view.length}
setReward(null)} />
);
}
/* ---------- 4) Point history ---------- */
function GamiPointHistoryPage() {
const [f, setF] = React.useState('All');
const view = GAMI_HISTORY.filter(h => f === 'All' || h.type === f);
return (
Point history Keep track of your point history earnings and spendings here.
Points Detail Date & time Type Action
{view.map((h, i) => (
= 0 ? 'text-green-600' : 'text-ink'}>{h.pts >= 0 ? '+' : ''}{h.pts} PTS {h.detail}
{h.date} · {h.time}
{h.type}
View detail
))}
Showing 1-{view.length} of {view.length}
);
}
/* ---------- 5) Leaderboard ---------- */
function GamiLeaderboardPage() {
const [range, setRange] = React.useState('All time');
const rows = GAMI_LEADERBOARD[range] || GAMI_LEADERBOARD['All time'];
const rowRefs = React.useRef({});
const prevPos = React.useRef({});
React.useLayoutEffect(function () {
const names = Object.keys(rowRefs.current);
names.forEach(function (n) {
const el = rowRefs.current[n];
if (!el) return;
const newTop = el.getBoundingClientRect().top;
const oldTop = prevPos.current[n];
if (oldTop != null && Math.abs(oldTop - newTop) > 0.5) {
el.style.transition = 'none';
el.style.transform = 'translateY(' + (oldTop - newTop) + 'px)';
el.getBoundingClientRect();
requestAnimationFrame(function () {
el.style.transition = 'transform .6s cubic-bezier(.22,.61,.36,1)';
el.style.transform = '';
});
}
});
const p = {};
names.forEach(function (n) { const el = rowRefs.current[n]; if (el) p[n] = el.getBoundingClientRect().top; });
prevPos.current = p;
}, [range]);
const gridCols = { display: 'grid', gridTemplateColumns: '52px minmax(0,1.7fr) 1fr 1fr 92px 96px', alignItems: 'center' };
return (
Leaderboard See how you rank against other learners this period.
# Name Institution State Points Reward
{rows.map(function (l, i) {
const rank = i + 1;
return (
{rank} {l.name}{l.me && You } -
{l.state}
{l.pts}
+{l.reward} pts
);
})}
Showing 1-10 of 56
);
}
/* ---------- 6) Membership tiers (Unlocked / Locked + progress) ---------- */
function GamiMembershipPage() {
const tiles = [
['Redeem Rewards', 'card', '/app/dashboard/points/rewards'],
['Earn More Points', 'spark', '/app/dashboard/points'],
['View my points history', 'refresh', '/app/dashboard/points/history'],
['Membership FAQs', 'message', '/app/dashboard/points/membership'],
];
return (
{GAMI.balance} points
Your points will expire on {GAMI.expiry}.
{tiles.map(([l, ic, to]) => (
{l}
))}
Membership tiers
{GAMI_TIERS.map((t) => {
const locked = t.unlock > GAMI.tierPoints;
const pct = t.unlock > 0 ? Math.min(100, Math.round(GAMI.tierPoints / t.unlock * 100)) : 100;
return (
{locked ? 'Locked' : 'Unlocked'}
{t.name}
{!locked &&
Default
}
{locked && (
earn {t.unlock - GAMI.tierPoints} pts to unlock
{GAMI.tierPoints} of {t.unlock.toLocaleString()} pts earned
)}
{t.perks.map(([h, d]) => (
))}
FAQ
);
})}
);
}
/* ---------- 7) My Badges (earned seals + For you) ---------- */
function GamiBadgesPage() {
const earned = GAMI_BADGES.filter(b => b.earned);
return (
{earned.map(b => (
{b.name}
{b.req}
{b.date}
))}
Showing 1-{earned.length} of {earned.length}
For you
Badges you're close to earning or ones you can complete now.
{GAMI_BADGES_FORYOU.map(b => (
{b.name}
{b.req}
{b.done} of {b.total} completed
))}
);
}
/* ---------- 8) Public Learner profile ---------- */
const GAMI_PROFILE = {
name: 'Aisha A', role: 'Learner', location: 'Kuala Lumpur, Malaysia',
headline: "Learner's Interest as Headline Here", joined: 'Joined in January 2021',
speaks: ['English (Fluent)', 'Mandarin (Conversational)', 'Malay (Basic)'],
about: 'I am interested in .... Aliquet fames eget nisi amet. Nisi erat tincidunt lectus ornare sagittis, sit enim vitae fusce. Aliquet fames eget nisi amet. Nisi erat tincidunt lectus ornare sagittis, sit enim vitae fusce. Aliquet fames eget nisi amet. Aliquet fames eget nisi amet. Nisi erat tincidunt lectus ornare sagittis, sit enim vitae fusce. Aliquet fames eget nisi amet. Aliquet fames eget nisi amet.',
interests: ['COMPUTING & IT', 'WEB DEVELOPMENT', 'UI/UX', 'HTML & CSS', 'FIGMA', 'BOOTSTRAP'],
};
function GamiLearnerProfilePage() {
const p = GAMI_PROFILE;
const earned = GAMI_BADGES.filter(b => b.earned);
return (
{p.name}
{p.role}
{['globe', 'briefcase', 'user', 'mail'].map(ic =>
{earned.slice(0, 4).map(b => +2
{p.headline}
{p.joined}
Speaks:
{p.speaks.map((s, i) => {i > 0 && | }{s} )}
About me
{p.about}
Interests
{p.interests.map(t => {t} )}
{typeof ProgrammeJourney === 'function' &&
}
);
}
/* ---------- Dashboard "Quests for you" carousel (embeddable) ---------- */
function GamiDashboardQuests() {
const on = useGamiOn();
const [quest, setQuest] = React.useState(null);
if (!on) return null;
return (
Quests for you
{GAMI_FEATURED_QUESTS.map((q, i) => (
{q.title}
+{q.pts} pts
{q.expires &&
setQuest(q)} className={`h-8 px-4 rounded-full text-[13px] font-semibold inline-flex items-center gap-1 ${q.cta === 'Continue' ? 'bg-ink text-white hover:bg-black' : 'border border-neutral-200 text-neutral-700 hover:bg-neutral-50'}`}>{q.cta || 'Start'}
))}
setQuest(null)} />
);
}
/* ---------- Sidebar points + badges block ---------- */
function GamiEarnPopup({ onClose }) {
const ALL = [
{ id: 'profile', title: 'Complete profile', pts: 10, cta: 'Continue', to: '/app/dashboard/points', fav: true, active: true, forYou: true },
{ id: 'ai4u', title: 'Join AI4U programme', pts: 10, cta: 'Start', to: '/app/dashboard/points', fav: true, active: true, forYou: true },
{ id: 'refer', title: 'Refer and earn', pts: 10, cta: 'Start', to: '/app/dashboard/points/rewards', fav: true, active: true, forYou: false },
{ id: 'course', title: 'Join a course', pts: 10, cta: 'Start', to: '/app/dashboard/points', fav: false, active: true, forYou: true },
{ id: 'experience', title: 'Join an experience', pts: 10, cta: 'Start', to: '/app/dashboard/points', fav: false, active: true, forYou: true },
{ id: 'review', title: 'Leave a review', pts: 10, cta: 'Start', to: '/app/dashboard/points', fav: false, active: false, forYou: true },
];
const [tab, setTab] = React.useState('Favorites');
const [favs, setFavs] = React.useState(function () { const s = {}; ALL.forEach(function (q) { if (q.fav) s[q.id] = true; }); return s; });
const toggleFav = function (id) { setFavs(function (f) { const n = Object.assign({}, f); n[id] = !n[id]; return n; }); };
const list = ALL.filter(function (q) { return tab === 'Favorites' ? !!favs[q.id] : tab === 'Active' ? q.active : q.forYou; });
const pct = Math.min(100, Math.round(GAMI.tierPoints / GAMI.tierNext * 100));
return (
{GAMI.tier}
{GAMI.tierPoints} / {GAMI.tierNext}
{['Favorites', 'Active', 'For you'].map(function (t) {
return {t} ;
})}
{list.length === 0 ? (
No quests here yet.
) : list.map(function (q) {
const isFav = !!favs[q.id];
return (
{q.title} +{q.pts} pts
);
})}
See all
);
}
function GamiSidebarBlock() {
const earned = GAMI_BADGES.filter(b => b.earned);
const [earnOpen, setEarnOpen] = React.useState(false);
const earnRef = React.useRef(null);
React.useEffect(() => { if (!earnOpen) return; const h = (e) => { if (earnRef.current && !earnRef.current.contains(e.target)) setEarnOpen(false); }; document.addEventListener('click', h); return () => document.removeEventListener('click', h); }, [earnOpen]);
return (
setEarnOpen(o => !o)} className="w-full flex items-center justify-between rounded-full p-0.5 pr-2" style={{ background: 'linear-gradient(90deg,#FFE9A8,#F7C9E0,#C9D8FF)' }}>
Earn more
{earnOpen && setEarnOpen(false)} />}
My Badges ({earned.length})
{earned.slice(0, 4).map(b =>
);
}
function GamiProfilePoints() {
return (
Quest
{!dismissed && (
Weekly streak 🔥 {GAMI.streakWeeks}
setDismissed(true)} className="text-neutral-500 hover:text-neutral-800"> Complete a course module +10 pts
)}
{GAMI_QUEST_PARTS.map((p, i) => (
setOpen(o => ({ ...o, [i]: !o[i] }))} className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-neutral-50">
{p.part} ({p.pct}%) {i === 0 && +{p.pts} pts }
{p.name}
+{p.pts} pts }
{open[i] && (
{p.items.map((it, j) => (
{it.done ? {it.title} +{it.pts} pts
{!it.done &&
))}
)}
))}
See all
);
}
function GamiQuestTrigger() {
const on = useGamiOn();
const [open, setOpen] = React.useState(false);
const ref = React.useRef(null);
React.useEffect(() => { if (!open) return; const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('click', h); return () => document.removeEventListener('click', h); }, [open]);
if (!on) return null;
return (
setOpen(o => !o)} className="relative w-10 h-10 flex items-center justify-center rounded-full hover:bg-neutral-100 transition-colors" aria-label="Quests and streak">
{GAMI.streakWeeks}
{open && setOpen(false)} />}
);
}
/* ---------- Floating on/off toggle ---------- */
function GamificationToggle() {
const on = useGamiOn();
return (
setGamiOn(!on)} title="Toggle the gamification feature set"
className={`fixed bottom-[76px] right-5 z-50 inline-flex items-center gap-2 px-4 py-2.5 rounded-full shadow-lg transition-all ${on ? 'bg-primary text-white hover:bg-primary-hover' : 'bg-white text-neutral-600 border border-neutral-300 hover:bg-neutral-50'}`}>
);
}
Object.assign(window, {
useGamiOn, setGamiOn,
GamiPointsRewardsPage, GamiAllRewardsPage, GamiMyRedemptionsPage, GamiPointHistoryPage,
GamiLeaderboardPage, GamiMembershipPage, GamiBadgesPage, GamiLearnerProfilePage, GamificationToggle,
GamiSidebarBlock, GamiProfilePoints, GamiQuestTrigger, GamiQuestPopup, GamiDashboardQuests,
});
