642 lines
24 KiB
Smarty
642 lines
24 KiB
Smarty
{extends file=$layout}
|
|
|
|
{block name='content'}
|
|
<style>
|
|
|
|
.loading_gif {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#blik_code {
|
|
width: 230px;
|
|
}
|
|
|
|
#content_blik_code {
|
|
padding: .9375rem;
|
|
}
|
|
|
|
.modal_blik {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 50000;
|
|
background: rgba(0, 0, 0, .5)
|
|
}
|
|
|
|
.modal_blik-content {
|
|
background: #fbfbfb none;
|
|
border: 1px solid #d6d4d4;
|
|
border-radius: 4px;
|
|
transform: translate(-50%, -50%);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
color: black;
|
|
padding: 20px;
|
|
}
|
|
|
|
#modal_blik_code-content {
|
|
max-width: 274px;
|
|
}
|
|
|
|
.remember_code-content {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.blik-alias, .alias-deactivate {
|
|
margin-right: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
#modal_processing {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 50000;
|
|
background: rgba(0, 0, 0, .5)
|
|
}
|
|
|
|
.d--none {
|
|
display: none;
|
|
}
|
|
|
|
.alias-deactivate {
|
|
font-weight: 600;
|
|
text-transform: uppercase
|
|
}
|
|
|
|
.fr {
|
|
float: right;
|
|
}
|
|
|
|
#text-tip {
|
|
margin-top: 2rem;
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
#insert_blik_code-text:after {
|
|
float: right;
|
|
content: "\25bc";
|
|
}
|
|
|
|
#insert_blik_code-text.is-active:after {
|
|
content: "\25b2";
|
|
}
|
|
</style>
|
|
<section class="clearfix">
|
|
<div class="card col-xs-12 col-lg-8">
|
|
<div id="text-tip" class="d--none"></div>
|
|
<div id="content_blik_code">
|
|
{if $active_profile}
|
|
<div id="content_blik_oneclick">
|
|
<p>
|
|
<h2 class="h3">{l s='Debit profile' mod='imoje'}</h2>
|
|
<hr/>
|
|
<div data-profile-id="{$active_profile.id}"
|
|
data-profile-name="{$active_profile.label}"
|
|
class="div_profile">
|
|
{foreach $active_profile.aliasList as $alias}
|
|
<div data-blik-key="{$alias.key}"
|
|
data-blik-name="{$alias.label}" class="blik-alias-div">
|
|
<button class="btn btn-primary blik-alias">
|
|
{$alias.label}
|
|
</button>
|
|
<button class="btn btn-danger alias-deactivate">
|
|
{l s='Deactivate' mod='imoje'}
|
|
</button>
|
|
</div>
|
|
{/foreach}
|
|
</div>
|
|
<hr/>
|
|
</div>
|
|
{/if}
|
|
|
|
<h2 class="h3 mt-2 mb-2" id="insert_blik_code-text">
|
|
{l s='Insert BLIK code' mod='imoje'}
|
|
</h2>
|
|
<div class="content_insert_code d--none">
|
|
<input id="blik_code"
|
|
placeholder="{l s='BLIK code' mod='imoje'}"
|
|
class="form-control"
|
|
type="text"
|
|
name="blik_code"
|
|
required
|
|
autocomplete="off"
|
|
maxlength="6">
|
|
<br/>
|
|
|
|
{if $is_customer_logged && $is_imoje_blik_oneclick}
|
|
<div class="remember_code-content">
|
|
<div class="float-xs-left">
|
|
<span class="custom-checkbox">
|
|
<input id="remember_code-checkbox" type="checkbox">
|
|
<span>
|
|
<i class="material-icons checkbox-checked"></i>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div class="remember_code">
|
|
<label for="remember_code-checkbox">
|
|
{l s='I want to remember this shop' mod='imoje'}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<button id="blik_submit" class="btn btn-primary btn-submit-code disabled"
|
|
style="display: inline-block" disabled>
|
|
{l s='Pay' mod='imoje'}
|
|
</button>
|
|
</div>
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-lg-4">
|
|
{block name='cart_summary'}
|
|
{include file='checkout/_partials/cart-summary.tpl' cart = $cart}
|
|
{/block}
|
|
|
|
{block name='hook_display_reassurance'}
|
|
{hook h='displayReassurance'}
|
|
{/block}
|
|
</div>
|
|
|
|
<div class="modal_blik" id="modal_processing">
|
|
<div class="modal_blik-content" id="modal_processing-content">
|
|
<img class="loading_gif" src="{$loading_gif}" alt="{l s='Loading' mod='imoje'}"/>
|
|
<br/>
|
|
<span id="modal_tip"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal_blik" id="modal_blik_code">
|
|
<div class="modal_blik-content" id="modal_blik_code-content">
|
|
<p id="proceed_payment_code"></p>
|
|
<label for="blik_code_modal" class="d--none">
|
|
</label>
|
|
<input placeholder="{l s='BLIK code' mod='imoje'}"
|
|
id="blik_code_modal"
|
|
class="form-control"
|
|
type="text"
|
|
name="blik_code"
|
|
required autocomplete="off"
|
|
maxlength="6">
|
|
<br/>
|
|
<button id="blik_submit_modal" class="btn btn-primary btn-submit-code disabled blik_submit" disabled>
|
|
{l s='Pay' mod='imoje'}
|
|
</button>
|
|
<button class="btn btn-secondary btn-modal-close">
|
|
{l s='Close' mod='imoje'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal_blik" id="modal_blik_alias_deactivate-modal">
|
|
<div class="modal_blik-content" id="modal_blik_alias_deactivate-modal-content">
|
|
<h2 class="h3">{l s='Deactivate profile' mod='imoje'}</h2>
|
|
<label for="blik_code" class="">
|
|
</label>
|
|
<p>
|
|
{l s='Are you sure that you want deactivate profile ' mod='imoje'}
|
|
<span id="deactivate_profile_name-text"></span>?
|
|
</p>
|
|
<button id="deactivate_profile_accept-btn" class="btn btn-primary">
|
|
{l s='Deactivate' mod='imoje'}
|
|
</button>
|
|
<button class="btn btn-secondary btn-modal-close">
|
|
{l s='Close' mod='imoje'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<br>
|
|
<script type="text/javascript">
|
|
|
|
document.addEventListener("DOMContentLoaded", function (event) {
|
|
|
|
(function () {
|
|
|
|
// region vars
|
|
var $blikCode = $("#blik_code"),
|
|
$blikSubmit = $('#blik_submit'),
|
|
$contentBlikCode = $('#content_blik_code'),
|
|
$contentBlikOneclick = $('#content_blik_oneclick'),
|
|
$modalProcessing = $('#modal_processing'),
|
|
isSubmitted = false,
|
|
$rememberCodeCheckbox = $('#remember_code-checkbox'),
|
|
$aliasDeactivateButton = $('.alias-deactivate'),
|
|
$blikProfile = $('.blik-alias'),
|
|
$modalBlikAliasDeactivateModal = $('#modal_blik_alias_deactivate-modal'),
|
|
$deactivateProfileNameText = $('#deactivate_profile_name-text'),
|
|
$modalTip = $('#modal_tip'),
|
|
$deactivateProfileAcceptButton = $('#deactivate_profile_accept-btn'),
|
|
$textTip = $('#text-tip'),
|
|
$modalBlik = $('.modal_blik'),
|
|
dontProcessing = false,
|
|
dontProcessingTimeout = null,
|
|
$insertBlikCodeText = $('#insert_blik_code-text'),
|
|
$modalBlikCode = $('#modal_blik_code'),
|
|
$btnModalClose = $('.btn-modal-close'),
|
|
$blikSubmitModal = $('#blik_submit_modal'),
|
|
$blikCodeModal = $('#blik_code_modal'),
|
|
$proceedPaymentCodeText = $('#proceed_payment_code'),
|
|
timeoutAppendResultText = null,
|
|
tempKey = null,
|
|
profileId = null,
|
|
tempThis = null,
|
|
tempNewParamAlias = null,
|
|
msAppendResultText = 60000,
|
|
msBlikSubmit = 90000;
|
|
// endregion
|
|
|
|
{if !$active_profile}
|
|
toggleContentInsertCode();
|
|
{/if}
|
|
|
|
{if $profile_id}
|
|
profileId = "{$profile_id}";
|
|
{/if}
|
|
|
|
$insertBlikCodeText.on('click', function () {
|
|
toggleContentInsertCode();
|
|
});
|
|
|
|
if (!isSubmitted) {
|
|
|
|
$blikCode.on('input', function () {
|
|
if ($blikCode.val().length === 6) {
|
|
$blikSubmit.removeClass('disabled');
|
|
$blikSubmit.removeAttr("disabled");
|
|
} else {
|
|
disableBlikSubmit();
|
|
}
|
|
});
|
|
|
|
$blikCodeModal.on('input', function () {
|
|
if ($blikCodeModal.val().length === 6) {
|
|
$blikSubmitModal.removeClass('disabled').removeAttr("disabled");
|
|
} else {
|
|
disableBlikSubmit();
|
|
}
|
|
});
|
|
}
|
|
|
|
function toggleContentInsertCode() {
|
|
$insertBlikCodeText.toggleClass('is-active').next(".content_insert_code").stop().slideToggle(500);
|
|
}
|
|
|
|
function appendResultText(text, color) {
|
|
|
|
clearTimeout(timeoutAppendResultText);
|
|
|
|
if ({$create_order_arrangement}) {
|
|
$textTip.show();
|
|
$textTip.html(text).css('color', color);
|
|
timeoutAppendResultText = setTimeout(function () {
|
|
$textTip.hide();
|
|
}, msAppendResultText)
|
|
return;
|
|
}
|
|
|
|
$contentBlikCode.html(text)
|
|
}
|
|
|
|
function blikSubmit(data) {
|
|
disableBlikSubmit();
|
|
isSubmitted = true;
|
|
$modalBlik.hide();
|
|
clearDontProcessingTimeout()
|
|
|
|
dontProcessingTimeout = setTimeout(
|
|
function () {
|
|
dontProcessing = true
|
|
}, msBlikSubmit);
|
|
|
|
processForm(data);
|
|
}
|
|
|
|
$blikSubmit.on('click', function () {
|
|
|
|
var data = {
|
|
blikCode: $blikCode.val(),
|
|
}
|
|
|
|
if ($rememberCodeCheckbox.is(":checked")) {
|
|
data.rememberBlikCode = 1;
|
|
data.profileId = profileId;
|
|
}
|
|
|
|
blikSubmit(data);
|
|
});
|
|
|
|
$blikSubmitModal.on('click', function () {
|
|
|
|
var data = {
|
|
blikCode: $blikCodeModal.val(),
|
|
}
|
|
|
|
if ($('.blik-alias').length > 1) {
|
|
data.profileId = profileId
|
|
}
|
|
|
|
if (tempNewParamAlias) {
|
|
data.rememberBlikCode = 1
|
|
}
|
|
|
|
blikSubmit(data);
|
|
});
|
|
|
|
function disableBlikSubmit() {
|
|
$blikSubmit.addClass('disabled').attr("disabled", true);
|
|
$blikSubmitModal.addClass('disabled').attr("disabled", true);
|
|
}
|
|
|
|
// region deactivate profile
|
|
$aliasDeactivateButton.on('click', function () {
|
|
|
|
$deactivateProfileNameText.html($(this).parent().data("blik-name"))
|
|
|
|
tempThis = $(this);
|
|
$modalBlikAliasDeactivateModal.show();
|
|
});
|
|
|
|
$deactivateProfileAcceptButton.on('click', function () {
|
|
|
|
$modalBlikAliasDeactivateModal.hide();
|
|
|
|
if (!tempThis) {
|
|
return;
|
|
}
|
|
|
|
var blikKey = tempThis.parent().data('blik-key');
|
|
|
|
processForm({
|
|
profileId: profileId,
|
|
blikKey: blikKey,
|
|
deactivate: 1
|
|
},
|
|
'{l s='Please wait, deactivation is in progress' mod='imoje'}',
|
|
function (response) {
|
|
|
|
$modalProcessing.hide();
|
|
|
|
if (response.status) {
|
|
|
|
$('div[data-blik-key=' + blikKey + ']').remove();
|
|
|
|
appendResultText("{l s='Successfully deactivated profile' mod='imoje'}" + " " + tempThis.parent().data('blik-name'), 'green');
|
|
|
|
if ($('.blik-alias-div').length === 0) {
|
|
toggleContentInsertCode();
|
|
$('div[data-profile-id=' + profileId + ']').remove();
|
|
$contentBlikOneclick.remove();
|
|
return;
|
|
}
|
|
return;
|
|
}
|
|
|
|
appendResultText('{l s='Could not deactivate profile. Try again later or contact with shop staff.' mod='imoje'}', 'red')
|
|
})
|
|
})
|
|
|
|
// endregion
|
|
|
|
function clearDontProcessingTimeout() {
|
|
clearTimeout(dontProcessingTimeout);
|
|
dontProcessing = null;
|
|
}
|
|
|
|
function checkPayment(transactionId) {
|
|
|
|
$.ajax({
|
|
data: {
|
|
transactionId: transactionId,
|
|
checkTransaction: true
|
|
},
|
|
method: "POST",
|
|
url: "{$payment_blik_url nofilter}"
|
|
})
|
|
.then(function (data) { // done
|
|
if (dontProcessing) {
|
|
$modalProcessing.hide();
|
|
appendResultText('{l s='Response timed out. Try again.' mod='imoje'}', 'red');
|
|
clearDontProcessingTimeout();
|
|
return;
|
|
}
|
|
|
|
if (!data.status) {
|
|
|
|
$modalProcessing.hide();
|
|
|
|
appendResultText('{l s='Something went wrong. Please contact with shop staff' mod='imoje'}', 'red');
|
|
clearDontProcessingTimeout();
|
|
return;
|
|
}
|
|
|
|
if (data.body && data.body.error) {
|
|
|
|
$modalProcessing.hide();
|
|
|
|
clearDontProcessingTimeout();
|
|
|
|
if (data.body.code) {
|
|
|
|
$proceedPaymentCodeText.html(data.body.error);
|
|
|
|
if (data.body.newParamAlias) {
|
|
tempNewParamAlias = true;
|
|
}
|
|
|
|
$modalBlikCode.show();
|
|
return;
|
|
}
|
|
|
|
appendResultText(data.body.error, 'red');
|
|
return;
|
|
}
|
|
|
|
if (data.body.transaction.status === 'pending') { // state inny niz pending
|
|
|
|
if (dontProcessing) {
|
|
$modalProcessing.hide();
|
|
appendResultText('{l s='Response timed out. Try again.' mod='imoje'}', 'red');
|
|
clearDontProcessingTimeout();
|
|
return;
|
|
}
|
|
|
|
setTimeout(function () {
|
|
checkPayment(transactionId)
|
|
}, 1000);
|
|
|
|
return;
|
|
}
|
|
|
|
clearDontProcessingTimeout();
|
|
|
|
$modalProcessing.hide();
|
|
|
|
if (data.body.transaction.status === 'settled') {
|
|
$contentBlikCode.html('{l s='Your payment has been processed correctly. We will inform you about the progress of the order by e-mail.' mod='imoje'}');
|
|
return;
|
|
}
|
|
|
|
$contentBlikCode.html('{$failure_tip1} <br/><br/> {$failure_tip2}');
|
|
|
|
|
|
}, function () { // fail
|
|
});
|
|
}
|
|
|
|
// region debit profile
|
|
$blikProfile.on("click", function () {
|
|
|
|
dontProcessingTimeout = setTimeout(
|
|
function () {
|
|
dontProcessing = true
|
|
}, msBlikSubmit);
|
|
|
|
var parent = $(this).parent(),
|
|
key = parent.data("blik-key")
|
|
? parent.data("blik-key")
|
|
: null;
|
|
|
|
tempKey = key;
|
|
|
|
processForm({
|
|
profileId: profileId,
|
|
blikKey: key,
|
|
},
|
|
'',
|
|
function (response) {
|
|
|
|
if (response.status && response.body.transaction.id) {
|
|
checkPayment(response.body.transaction.id);
|
|
return;
|
|
}
|
|
|
|
$modalProcessing.hide();
|
|
appendResultText('{l s='Could not debit profile. Try again later or contact with shop staff.' mod='imoje'}', 'red');
|
|
}
|
|
);
|
|
|
|
});
|
|
// endregion
|
|
|
|
$btnModalClose.on('click', function () {
|
|
$modalBlik.hide();
|
|
}
|
|
)
|
|
|
|
// region show modal processing
|
|
function showModalProcessing(text) {
|
|
$modalTip.html(text);
|
|
$modalProcessing.show();
|
|
}
|
|
// endregion
|
|
|
|
function clearInputs(){
|
|
$blikCode.val('');
|
|
$blikCodeModal.val('');
|
|
}
|
|
|
|
// region process form
|
|
function processForm(data, modalTipText = '', funcAtDone = null, funcAtAlways = null) {
|
|
|
|
document.activeElement.blur();
|
|
|
|
$.ajax({
|
|
method: "POST",
|
|
url: "{$payment_blik_url nofilter}",
|
|
data: data,
|
|
beforeSend: function () {
|
|
|
|
$textTip.hide();
|
|
clearInputs();
|
|
showModalProcessing(modalTipText ? modalTipText : '{l s='Now accept payment in your bank application' mod='imoje'}');
|
|
}
|
|
})
|
|
.done(function (data) {
|
|
|
|
if (typeof data !== "object") {
|
|
$modalProcessing.hide();
|
|
appendResultText('{l s='Something went wrong. Please contact with shop staff' mod='imoje'}', 'red');
|
|
return;
|
|
}
|
|
|
|
if (!data.status) {
|
|
$modalProcessing.hide();
|
|
appendResultText('{l s='Something went wrong. Please contact with shop staff' mod='imoje'}', 'red');
|
|
return;
|
|
}
|
|
|
|
if (data.body && data.body.error) {
|
|
|
|
$modalProcessing.hide();
|
|
|
|
clearDontProcessingTimeout();
|
|
|
|
if (data.body.code) {
|
|
|
|
$('#proceed_payment_code').html(data.body.error);
|
|
|
|
if (data.body.newParamAlias) {
|
|
tempNewParamAlias = true;
|
|
}
|
|
|
|
$modalBlikCode.show();
|
|
return;
|
|
}
|
|
|
|
appendResultText(data.body.error, 'red');
|
|
return;
|
|
}
|
|
|
|
if (funcAtDone) {
|
|
funcAtDone(data);
|
|
return;
|
|
}
|
|
|
|
if (data.body.transaction.status === 'settled') {
|
|
$modalProcessing.hide();
|
|
$contentBlikCode.html('{l s='Your payment has been processed correctly. We will inform you about the progress of the order by e-mail.' mod='imoje'}');
|
|
return;
|
|
}
|
|
|
|
if (data.body.transaction.status === 'rejected') {
|
|
$modalProcessing.hide();
|
|
$contentBlikCode.html('{$failure_tip1} <br/><br/> {$failure_tip2}');
|
|
return;
|
|
}
|
|
|
|
if (data.body.transaction.id) {
|
|
checkPayment(data.body.transaction.id);
|
|
return;
|
|
}
|
|
|
|
$modalProcessing.hide();
|
|
appendResultText('{l s='Something went wrong. Please contact with shop staff' mod='imoje'}', 'red');
|
|
})
|
|
.fail(function () {
|
|
$modalProcessing.hide();
|
|
appendResultText('{l s='Something went wrong. Please contact with shop staff' mod='imoje'}', 'red');
|
|
})
|
|
.always(function (response) {
|
|
if (funcAtAlways) {
|
|
funcAtAlways(response);
|
|
}
|
|
});
|
|
}
|
|
// endregion
|
|
})()
|
|
});
|
|
</script>
|
|
{/block}
|