// Portal C — Affiliate Mobile App (Neumorphic, in phone frame)
function PortalC() {
const s = YJ.useStore();
const toast = useToast();
const broker = s.brokers.find(b => b.id === s.currentBrokerId) || s.brokers[0];
const [tab, setTab] = useState("home");
// Compute broker's stats
const myOrders = s.orders.filter(o => o.brokerId === broker.id);
const earnFromOrders = myOrders.reduce((a, o) => a + o.amount * 0.05, 0);
// Use seed totalEarn as baseline + any new commission earned at runtime
const myCommission = Math.max(broker.totalEarn || 0, earnFromOrders);
const cashWallet = Math.max(0, myCommission - (broker.withdrawn || 0));
const myCustomers = Array.from(new Set(myOrders.map(o => o.customerId))).map(cid => {
const cust = s.customers.find(c => c.id === cid);
const cOrders = myOrders.filter(o => o.customerId === cid);
return { cust, orders: cOrders, maxMaai: Math.max(...cOrders.map(o => o.maai)) };
});
const expPct = (broker.exp % 1000) / 10; // arbitrary scale
return (
9:41
5G
{tab === "home" &&
}
{tab === "quest" &&
}
{tab === "products" &&
}
{tab === "wallet" &&
}
{tab === "leaderboard" &&
}
สลับมุมมองนายหน้า:
);
}
function PhoneHome({ broker, myCommission, cashWallet, expPct, setTab }) {
const s = YJ.useStore();
return (
{broker.avatar}
สวัสดีตอนเช้า
{broker.name}
{/* EXP bar */}
EXP สะสม
{fmtNum(broker.exp)} / {fmtNum(Math.ceil(broker.exp / 1000) * 1000)}
{/* Wallet card big */}
กระเป๋าเงินสด
{fmtTHB(cashWallet)}
รวมรายได้สะสม {fmtTHB(myCommission)}
{/* Quick stats */}
{[
{ label: "ลิงก์ที่แชร์", value: "37" },
{ label: "ลูกค้าใหม่", value: fmtNum(new Set(s.orders.filter(o => o.brokerId === broker.id && o.maai === 1).map(o => o.customerId)).size) },
{ label: "ปิดยอด", value: fmtNum(s.orders.filter(o => o.brokerId === broker.id).length) },
].map(x => (
))}
{/* Featured products to share */}
โปรเด่นวันนี้
{s.products.slice(0, 3).map(p => {
const br = s.brands.find(b => b.id === p.brandId);
return (
IMG
{p.name}
{br?.name} · คอม ฿{Math.round(p.price * 0.05)}
);
})}
);
}
function PhoneQuest({ broker, myCustomers }) {
return (
เส้นทางผจญภัย
ติดตามลูกค้าที่กดผ่านลิงก์ของคุณตามไม้ 1-4
{myCustomers.length === 0 &&
ยังไม่มีลูกค้าผ่านลิงก์ของคุณ
}
{myCustomers.map(({ cust, orders, maxMaai }) => (
{[1, 2, 3, 4].map(m => {
const hit = orders.find(o => o.maai === m);
return (
ไม้ {m}
{hit ? "✓ ปิด" : "—"}
{hit &&
฿{Math.round(hit.amount * 0.05)}
}
);
})}
ความคืบหน้า: ไม้ {maxMaai}/4 — {orders.length} ออเดอร์ · รวม ฿{Math.round(orders.reduce((a, o) => a + o.amount * 0.05, 0))}
))}
);
}
function PhoneProducts({ toast, brokerId }) {
const s = YJ.useStore();
const [gpFilter, setGpFilter] = useState("all");
const visible = s.products.filter(p => {
if (gpFilter === "all") return true;
const b = s.brands.find(br => br.id === p.brandId);
return b && b.gp === Number(gpFilter);
});
const copy = async (productId) => {
const url = `https://yjm.co/r/${brokerId}/${productId}`;
try { await navigator.clipboard.writeText(url); } catch {}
toast.push("คัดลอกลิงก์แล้ว — แชร์ได้ทันที");
};
return (
คลังสินค้าดึงลิงก์
เลือกสินค้าตามเกรด GP ที่ได้ค่าคอมสูง
{[["all", "ทั้งหมด"], ["60", "GP 60%"], ["50", "GP 50%"], ["40", "GP 40%"]].map(([k, l]) => (
))}
{visible.map(p => {
const br = s.brands.find(b => b.id === p.brandId);
const commission = Math.round(p.price * 0.05);
return (
IMG
{p.name}
{br?.name} · GP {br?.gp}%
{fmtTHB(p.price)}
+฿{commission} คอม
);
})}
);
}
function PhoneWallet({ broker, cashWallet, totalEarn, toast }) {
const confirm = useConfirm();
const [amount, setAmount] = useState(Math.min(500, cashWallet) || 0);
const btnRef = useRef(null);
const handleWithdraw = async () => {
if (amount <= 0 || amount > cashWallet) return toast.push("จำนวนไม่ถูกต้อง", "danger");
const ok = await confirm.ask({ title: "ถอนเงินด่วน", body: `ถอน ${fmtTHB(amount)} เข้าบัญชี ${broker.name} — เงินถึงภายใน 30 นาที`, confirmLabel: "ยืนยันถอน" });
if (!ok) return;
YJ.actions.brokerWithdraw(broker.id, amount);
if (btnRef.current) shootCoins(btnRef.current, 14);
toast.push("ส่งคำสั่งถอน " + fmtTHB(amount) + " — รอเงินเข้า");
};
const history = [
{ d: Date.now() - 2 * 86400000, a: 2400, status: "success" },
{ d: Date.now() - 7 * 86400000, a: 1800, status: "success" },
{ d: Date.now() - 14 * 86400000, a: 3200, status: "success" },
];
return (
กระเป๋าเงิน
ยอดเงินสดสะสม
{fmtTHB(cashWallet)}
รายได้สะสมตลอดชีวิต {fmtTHB(totalEarn)} · ถอนไปแล้ว {fmtTHB(broker.withdrawn || 0)}
ถอนด่วน — เข้าทันที 30 นาที
{[500, 1000, Math.floor(cashWallet)].map((v, i) => (
))}
setAmount(Number(e.target.value))} />
ประวัติการถอน
{history.map((h, i) => (
{fmtTHB(h.a)}
{fmtDate(h.d)}
โอนแล้ว
))}
{confirm.node}
);
}
function PhoneLeaderboard() {
const s = YJ.useStore();
const top = YJ.select.topBrokers(s, 5);
const podium = top.slice(0, 3);
return (
แท่นเกียรติยศ
ท็อปนายหน้าประจำเดือน — รางวัลพิเศษทุกเดือน
{/* Podium */}
{[1, 0, 2].map((idx, col) => {
const x = podium[idx];
if (!x) return
;
const height = [110, 140, 90][col];
const colors = ["linear-gradient(180deg,#c4cad6,#8a93a8)", "linear-gradient(180deg,#ffd54a,#f1a721)", "linear-gradient(180deg,#e5965f,#a16438)"];
return (
{x.broker.avatar}
{x.broker.name.split(" ")[0]}
฿{fmtNum(x.earn)}
{idx + 1}
);
})}
{/* List rest */}
{top.slice(3).map((x, i) => (
{i + 4}
{x.broker.avatar}
{x.broker.name}
{fmtTHB(x.earn)}
))}
);
}
function PhoneNav({ tab, setTab }) {
const items = [
{ id: "home", label: "หน้าแรก", ico: "⌂" },
{ id: "quest", label: "ไม้ 1-4", ico: "◎" },
{ id: "products", label: "สินค้า", ico: "▤" },
{ id: "leaderboard", label: "ท็อป", ico: "♛" },
{ id: "wallet", label: "เงิน", ico: "₿" },
];
return (
{items.map(it => (
))}
);
}
window.PortalC = PortalC;