64 lines
3.4 KiB
PHP
64 lines
3.4 KiB
PHP
<div id="shoraka-modal" hidden style="position:fixed;inset:0;z-index:20000;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:16px">
|
|
<div role="dialog" aria-modal="true" aria-labelledby="shoraka-modal-title" tabindex="-1" style="background:#fff;border-radius:5px;padding:24px;max-width:460px;width:100%;text-align:center;box-shadow:0 8px 30px #0003">
|
|
<h4 id="shoraka-modal-title">Pembelian Komoditi Shoraka</h4>
|
|
<p id="shoraka-modal-message" role="status" aria-live="polite">Sedang memproses pembelian komoditi...</p>
|
|
<ol style="text-align:left;padding-left:28px">
|
|
<li data-shoraka-step="1">Menyimpan gadaian dan menghantar order</li>
|
|
<li data-shoraka-step="2">Menunggu pengesahan Shoraka</li>
|
|
<li data-shoraka-step="3">Menyelesaikan pembiayaan</li>
|
|
</ol>
|
|
<p class="text-muted small">Sila tunggu sehingga proses selesai. Jangan hantar transaksi semula.</p>
|
|
<div id="shoraka-modal-spinner" class="spinner-border text-primary" role="status"><span class="sr-only">Sedang memproses</span></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
window.shorakaProgress = (function () {
|
|
var modal = document.getElementById('shoraka-modal');
|
|
var previousFocus;
|
|
modal.addEventListener('keydown', function (event) {
|
|
if (event.key === 'Tab') {
|
|
event.preventDefault();
|
|
modal.querySelector('[role="dialog"]').focus();
|
|
}
|
|
});
|
|
return function (step, message, stopped) {
|
|
if (stopped) {
|
|
modal.hidden = true;
|
|
modal.style.display = 'none';
|
|
if (previousFocus) { previousFocus.focus(); }
|
|
return;
|
|
}
|
|
if (modal.hidden) { previousFocus = document.activeElement; }
|
|
modal.hidden = false;
|
|
modal.style.display = 'flex';
|
|
document.getElementById('shoraka-modal-message').textContent = message || 'Sedang memproses pembelian komoditi...';
|
|
modal.querySelectorAll('[data-shoraka-step]').forEach(function (item) {
|
|
var number = Number(item.getAttribute('data-shoraka-step'));
|
|
item.className = number < step ? 'text-success' : (number === step ? 'text-primary font-weight-bold' : 'text-muted');
|
|
if (number === step) { item.setAttribute('aria-current', 'step'); }
|
|
else { item.removeAttribute('aria-current'); }
|
|
});
|
|
modal.querySelector('[role="dialog"]').focus();
|
|
};
|
|
}());
|
|
window.shorakaTrack = function (statusUrl) {
|
|
if (window.shorakaTrackTimer) { clearInterval(window.shorakaTrackTimer); }
|
|
window.shorakaProgress(1, 'Menyimpan gadaian dan menghantar order...');
|
|
window.shorakaTrackTimer = setInterval(function () {
|
|
$.get(statusUrl).done(function (body) {
|
|
var order = body && body.data && body.data.order;
|
|
var status = order && order.status;
|
|
if (status === 'Completed') {
|
|
clearInterval(window.shorakaTrackTimer);
|
|
window.shorakaProgress(3, 'Menyelesaikan pembiayaan...');
|
|
} else if (status === 'Cancelled' || status === 'FAILED' || status === 'UNKNOWN') {
|
|
clearInterval(window.shorakaTrackTimer);
|
|
window.shorakaProgress(2, 'Transaksi Shoraka gagal. Sila tunggu...');
|
|
} else if (status) {
|
|
window.shorakaProgress(2, 'Menunggu pengesahan Shoraka...');
|
|
}
|
|
});
|
|
}, 1500);
|
|
};
|
|
</script>
|