106 lines
4.1 KiB
JavaScript
106 lines
4.1 KiB
JavaScript
import { applyLang, bindHeader, connectToApp, get, navigateTo, safeJsonArray, t, toast } from "../bd-static/shared.js";
|
|
|
|
const state = { card: null, kyc: null };
|
|
const bankCard = document.getElementById("bankCard");
|
|
const moreCards = document.getElementById("moreCards");
|
|
const kycCard = document.getElementById("kycCard");
|
|
const kycStatus = document.getElementById("kycStatus");
|
|
const kycMore = document.getElementById("kycMore");
|
|
const kycColon = document.getElementById("kycColon");
|
|
const query = new URLSearchParams(window.location.search);
|
|
|
|
bindHeader("bank_cards_link");
|
|
applyLang();
|
|
moreCards.addEventListener("click", () => navigateTo("/bank-card"));
|
|
kycMore.addEventListener("click", () => navigateTo("/KYC"));
|
|
|
|
async function init() {
|
|
try {
|
|
await connectToApp();
|
|
const [cardsResult, kycResult] = await Promise.allSettled([loadCards(), loadKyc()]);
|
|
[cardsResult, kycResult].forEach((result) => {
|
|
if (result.status === "rejected") toast(result.reason?.response?.errorMsg || result.reason?.message);
|
|
});
|
|
} catch (error) {
|
|
toast(error.response?.errorMsg || error.message);
|
|
} finally {
|
|
render();
|
|
}
|
|
}
|
|
|
|
async function loadCards() {
|
|
const response = await get("/wallet/bank-card/list");
|
|
const body = response.status && Array.isArray(response.body) ? response.body : [];
|
|
state.card = body.find((item) => item.use) || null;
|
|
}
|
|
|
|
async function loadKyc() {
|
|
const response = await get("/wallet/withdraw-info/list");
|
|
const body = response.status && Array.isArray(response.body) ? response.body : [];
|
|
state.kyc = body.length > 0 ? { ...body[0], previewUrls: safeJsonArray(body[0].passportFrontUrl) } : null;
|
|
}
|
|
|
|
function render() {
|
|
moreCards.hidden = !state.card;
|
|
bankCard.innerHTML = state.card
|
|
? `
|
|
<div style="display:flex;flex-direction:column;gap:8px">
|
|
<div><b>${t("category")}</b></div>
|
|
<div class="subtle">${state.card.cardType || ""}</div>
|
|
<div><b>${t("card_number_label")}</b></div>
|
|
<div class="subtle">${state.card.cardNo || ""}</div>
|
|
<div><b>${t("payee")}:</b></div>
|
|
<div class="subtle">${state.card.payee || ""}</div>
|
|
</div>
|
|
`
|
|
: `
|
|
<button class="menu-link" type="button" id="addCard">
|
|
<span>${t("add_payment_method")}</span>
|
|
<img class="arrow" src="../bd-static/icons/arrow.svg" alt="">
|
|
</button>
|
|
`;
|
|
const addCard = document.getElementById("addCard");
|
|
if (addCard) addCard.addEventListener("click", () => navigateTo("/bank-card"));
|
|
|
|
kycColon.hidden = !state.kyc;
|
|
kycMore.hidden = !state.kyc;
|
|
kycStatus.innerHTML = statusHtml(state.kyc?.status);
|
|
kycCard.innerHTML = state.kyc ? kycDetails(state.kyc) : `
|
|
<button class="menu-link" type="button" id="completeKyc">
|
|
<span>${t("complete_information")}</span>
|
|
<img class="arrow" src="../bd-static/icons/arrow.svg" alt="">
|
|
</button>
|
|
`;
|
|
const completeKyc = document.getElementById("completeKyc");
|
|
if (completeKyc) completeKyc.addEventListener("click", () => navigateTo("/KYC"));
|
|
|
|
const from = query.get("from");
|
|
const activeAction = query.get("activeAction");
|
|
if (from || activeAction) {
|
|
sessionStorage.setItem("bankCardsBackQuery", JSON.stringify({ from, activeAction }));
|
|
}
|
|
}
|
|
|
|
function statusHtml(status) {
|
|
if (status === "PASS") return `<span class="badge pass">${t("review_passed")}</span>`;
|
|
if (status === "NOT_PASS") return `<span class="badge fail">${t("review_failed")}</span>`;
|
|
if (status === "PENDING") return `<span class="badge wait">${t("awaiting_review")}</span>`;
|
|
return "";
|
|
}
|
|
|
|
function kycDetails(item) {
|
|
const images = (item.previewUrls || []).map((src) => `<img src="${src}" alt="" style="width:15vw;aspect-ratio:1/1;object-fit:cover;border-radius:10px">`).join("");
|
|
return `
|
|
<div style="display:flex;flex-direction:column;gap:8px">
|
|
<div><b>${t("passport_id_card_title")}:</b></div>
|
|
<div style="display:flex;gap:8px;flex-wrap:wrap">${images}</div>
|
|
<div><b>${t("contact_number")}:</b></div>
|
|
<div class="subtle">${item.contactNumber || ""}</div>
|
|
<div><b>${t("other_description")}:</b></div>
|
|
<div class="subtle">${item.otherDescription || ""}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
init();
|