/* Central Rewards Club — Rewards catalog, detail, redemption, vouchers. */
function tierRank(t) { return ['classic', 'gold', 'platinum', 'black'].indexOf(t); }
function Rewards({ ctx }) {
const C = ctx.C;
const [cat, setCat] = React.useState('Semua');
const list = C.rewards.filter((r) => cat === 'Semua' || r.cat === cat);
return (
{/* Header */}
ctx.push('vouchers')} style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '9px 14px', borderRadius: 999, border: 'none', background: 'var(--crc-primary-soft)', color: 'var(--crc-primary)', fontWeight: 600, fontSize: 13, fontFamily: 'var(--crc-font)', cursor: 'pointer' }}>
{/* Balance strip */}
POIN AKTIF
{ctx.fmt.pts(ctx.points)}
{ctx.tierObj.name} · {ctx.tierObj.mult}
{/* Filter chips */}
{C.rewardCats.map((c) => setCat(c)} />)}
{/* Grid */}
{list.map((r) => {
const locked = r.tier && tierRank(ctx.tier) < tierRank(r.tier);
const afford = ctx.points >= r.cost;
return (
ctx.push('rewardDetail', { id: r.id })} style={{ borderRadius: 16, overflow: 'hidden', background: '#fff', boxShadow: 'var(--crc-sh-sm)', cursor: 'pointer', position: 'relative' }}>
{r.hot &&
}
{locked &&
{C.TIERS[r.tier].name}
}
{r.cat}
{r.name}
kurang {ctx.fmt.pts(r.cost - ctx.points)} }
);
})}
{r.cat.toUpperCase()}
{r.name}
poin
Deskripsi
Tukarkan poinmu dengan {r.name.toLowerCase()}. Hadiah dapat digunakan di seluruh gerai Central Department Store Grand Indonesia. Voucher dikirim langsung ke dompet digitalmu setelah penukaran.
Syarat & ketentuan
{['Berlaku 30 hari sejak penukaran', 'Tidak dapat digabung dengan promo lain', 'Tunjukkan voucher digital ke kasir'].map((t, i) => (
))}
{/* Sticky CTA */}
{locked ? (
ctx.toast('Naik ke tier ' + C.TIERS[r.tier].name + ' untuk membuka', 'warning')}>Khusus member {C.TIERS[r.tier].name}
) : (
ctx.openSheet(
)}
);
}
function RedeemSheet({ ctx, reward }) {
const [stage, setStage] = React.useState('confirm'); // confirm | done
const [voucher, setVoucher] = React.useState(null);
if (stage === 'done') {
return (
Voucher kamu siap!
{reward.name}
{(voucher && voucher.code) || 'CRC-' + reward.id.toUpperCase()}
Berlaku hingga {(voucher && voucher.expires) || '30 hari'}
ctx.closeSheet()}>Tutup
{ ctx.closeSheet(); ctx.push('vouchers'); }}>Lihat voucher
);
}
return (
Konfirmasi penukaran
{reward.name}
{reward.cat}
Poin saat ini {ctx.fmt.pts(ctx.points)}
Biaya penukaran −{ctx.fmt.pts(reward.cost)}
Sisa poin {ctx.fmt.pts(ctx.points - reward.cost)}
{ const v = ctx.actions.redeemReward(reward); if (v) { setVoucher(v); ctx.celebrate(); setStage('done'); } else { ctx.toast('Poin tidak cukup', 'warning'); } }}>Tukar {ctx.fmt.pts(reward.cost)} poin
);
}
function Vouchers({ ctx }) {
const C = ctx.C;
const [tab, setTab] = React.useState('active');
const list = ctx.store.vouchers.filter((v) => tab === 'active' ? v.status === 'active' : v.status === 'used');
return (
{[['active', 'Aktif'], ['used', 'Terpakai']].map(([k, l]) => setTab(k)} />)}
{list.length === 0 &&
}
{list.map((v) => {
const used = v.status === 'used';
return (
{v.name}
{v.code}
{used ? 'Terpakai' : 'Berlaku s/d ' + v.expires}
{!used && ctx.openSheet( }
);
})}
);
}
function VoucherUse({ ctx, v }) {
return (
{v.name}
Tunjukkan ke kasir untuk digunakan
Berlaku hingga {v.expires}
);
}
function EmptyState({ icon, title, sub, cta, onCta }) {
return (
{title}
{sub}
{cta &&
{cta}
}
);
}
Object.assign(window, { Rewards, RewardDetail, RedeemSheet, Vouchers, VoucherUse, EmptyState, tierRank });