Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-11-04 04:07:32 -05:00
Code Issues Packages Projects Releases Wiki Activity

Extract scripts into separate file

Browse Source
This commit is contained in:
Benjamin Beganović 2021-08-18 17:52:32 +02:00
parent 99da2128d1
commit 2065145ffb
4 changed files with 142 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
resources/js/clients/payments/square-credit-card.js vendored Normal file
View File

@ -0,0 +1,136 @@
/**
* Invoice Ninja (https://invoiceninja.com).
*
* @link https://github.com/invoiceninja/invoiceninja source repository
*
* @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
*
* @license https://www.elastic.co/licensing/elastic-license
*/
class SquareCreditCard {
constructor() {
this.appId = document.querySelector('meta[name=square-appId]').content;
this.locationId = document.querySelector(
'meta[name=square-locationId]'
).content;
this.isLoaded = false;
}
async init() {
this.payments = Square.payments(this.appId, this.locationId);
this.card = await this.payments.card();
await this.card.attach('#card-container');
this.isLoaded = true;
let iframeContainer = document.querySelector(
'.sq-card-iframe-container'
);
if (iframeContainer) {
iframeContainer.setAttribute('style', '150px !important');
}
let toggleWithToken = document.querySelector(
'.toggle-payment-with-token'
);
if (toggleWithToken) {
document.getElementById('card-container').classList.add('hidden');
}
}
async completePaymentWithoutToken(e) {
document.getElementById('errors').hidden = true;
e.target.parentElement.disabled = true;
let result = await this.card.tokenize();
if (result.status === 'OK') {
document.getElementById('sourceId').value = result.token;
let tokenBillingCheckbox = document.querySelector(
'input[name="token-billing-checkbox"]:checked'
);
if (tokenBillingCheckbox) {
document.querySelector('input[name="store_card"]').value =
tokenBillingCheckbox.value;
}
return document.getElementById('server_response').submit();
}
document.getElementById('errors').textContent =
result.errors[0].message;
document.getElementById('errors').hidden = false;
e.target.parentElement.disabled = false;
}
async completePaymentUsingToken(e) {
e.target.parentElement.disabled = true;
return document.getElementById('server_response').submit();
}
async handle() {
document
.getElementById('authorize-card')
?.addEventListener('click', (e) =>
this.completePaymentWithoutToken(e)
);
document.getElementById('pay-now').addEventListener('click', (e) => {
let tokenInput = document.querySelector('input[name=token]');
if (tokenInput.value) {
return this.completePaymentUsingToken(e);
}
return this.completePaymentWithoutToken(e);
});
Array.from(
document.getElementsByClassName('toggle-payment-with-token')
).forEach((element) =>
element.addEventListener('click', (element) => {
document
.getElementById('card-container')
.classList.add('hidden');
document.getElementById('save-card--container').style.display =
'none';
document.querySelector('input[name=token]').value =
element.target.dataset.token;
})
);
document
.getElementById('toggle-payment-with-credit-card')
.addEventListener('click', async (element) => {
document
.getElementById('card-container')
.classList.remove('hidden');
document.getElementById('save-card--container').style.display =
'grid';
document.querySelector('input[name=token]').value = '';
if (!this.isLoaded) {
await this.init();
}
});
let toggleWithToken = document.querySelector(
'.toggle-payment-with-token'
);
if (!toggleWithToken) {
document.getElementById('toggle-payment-with-credit-card').click();
}
}
}
new SquareCreditCard().handle();

45
resources/views/portal/ninja2020/gateways/square/credit_card/authorize.blade.php
View File

@ -32,48 +32,5 @@
<script type="text/javascript" src="https://web.squarecdn.com/v1/square.js"></script> <script type="text/javascript" src="https://web.squarecdn.com/v1/square.js"></script>
@endif @endif
<script> <script src="{{ asset('js/clients/payments/square-credit-card.js') }}"></script>
class SquareCreditCard {
constructor() {
this.appId = document.querySelector('meta[name=square-appId]').content;
this.locationId = document.querySelector('meta[name=square-locationId]').content;
}
async init() {
this.payments = Square.payments(this.appId, this.locationId);
this.card = await this.payments.card();
await this.card.attach('#card-container');
}
async completePaymentWithoutToken(e) {
document.getElementById('errors').hidden = true;
e.target.parentElement.disabled = true;
let result = await this.card.tokenize();
if (result.status === 'OK') {
document.getElementById('sourceId').value = result.token;
return document.getElementById('server_response').submit();
}
document.getElementById('errors').textContent = result.errors[0].message;
document.getElementById('errors').hidden = false;
e.target.parentElement.disabled = false;
}
async handle() {
await this.init();
document
.getElementById('authorize-card')
?.addEventListener('click', (e) => this.completePaymentWithoutToken(e));
}
}
new SquareCreditCard().handle();
</script>
@endsection @endsection

111
resources/views/portal/ninja2020/gateways/square/credit_card/pay.blade.php
View File

@ -63,114 +63,5 @@
<script type="text/javascript" src="https://web.squarecdn.com/v1/square.js"></script> <script type="text/javascript" src="https://web.squarecdn.com/v1/square.js"></script>
@endif @endif
<script> <script src="{{ asset('js/clients/payments/square-credit-card.js') }}"></script>
class SquareCreditCard {
constructor() {
this.appId = document.querySelector('meta[name=square-appId]').content;
this.locationId = document.querySelector('meta[name=square-locationId]').content;
this.isLoaded = false;
}
async init() {
this.payments = Square.payments(this.appId, this.locationId);
this.card = await this.payments.card();
await this.card.attach('#card-container');
this.isLoaded = true;
let iframeContainer = document.querySelector('.sq-card-iframe-container');
if (iframeContainer) {
iframeContainer.setAttribute('style', '150px !important');
}
let toggleWithToken = document.querySelector('.toggle-payment-with-token');
if (toggleWithToken) {
document.getElementById('card-container').classList.add('hidden');
}
}
async completePaymentWithoutToken(e) {
document.getElementById('errors').hidden = true;
e.target.parentElement.disabled = true;
let result = await this.card.tokenize();
if (result.status === 'OK') {
document.getElementById('sourceId').value = result.token;
let tokenBillingCheckbox = document.querySelector(
'input[name="token-billing-checkbox"]:checked'
);
if (tokenBillingCheckbox) {
document.querySelector('input[name="store_card"]').value =
tokenBillingCheckbox.value;
}
return document.getElementById('server_response').submit();
}
document.getElementById('errors').textContent = result.errors[0].message;
document.getElementById('errors').hidden = false;
e.target.parentElement.disabled = false;
}
async completePaymentUsingToken(e) {
e.target.parentElement.disabled = true;
return document.getElementById('server_response').submit();
}
async handle() {
document
.getElementById('authorize-card')
?.addEventListener('click', (e) => this.completePaymentWithoutToken(e));
document
.getElementById('pay-now')
.addEventListener('click', (e) => {
let tokenInput = document.querySelector('input[name=token]');
if (tokenInput.value) {
return this.completePaymentUsingToken(e);
}
return this.completePaymentWithoutToken(e);
});
Array
.from(document.getElementsByClassName('toggle-payment-with-token'))
.forEach((element) => element.addEventListener('click', (element) => {
document.getElementById('card-container').classList.add('hidden');
document.getElementById('save-card--container').style.display = 'none';
document.querySelector('input[name=token]').value = element.target.dataset.token;
}));
document
.getElementById('toggle-payment-with-credit-card')
.addEventListener('click', async (element) => {
document.getElementById('card-container').classList.remove('hidden');
document.getElementById('save-card--container').style.display = 'grid';
document.querySelector('input[name=token]').value = "";
if (!this.isLoaded) {
await this.init();
}
});
let toggleWithToken = document.querySelector('.toggle-payment-with-token');
if (!toggleWithToken) {
document.getElementById('toggle-payment-with-credit-card').click();
}
}
}
new SquareCreditCard().handle();
</script>
@endsection @endsection

4
webpack.mix.js vendored
View File

@ -89,6 +89,10 @@ mix.js("resources/js/app.js", "public/js")
.js( .js(
"resources/js/clients/payments/mollie-credit-card.js", "resources/js/clients/payments/mollie-credit-card.js",
"public/js/clients/payments/mollie-credit-card.js" "public/js/clients/payments/mollie-credit-card.js"
)
.js(
"resources/js/clients/payments/square-credit-card.js",
"public/js/clients/payments/square-credit-card.js"
); );
mix.copyDirectory('node_modules/card-js/card-js.min.css', 'public/css/card-js.min.css'); mix.copyDirectory('node_modules/card-js/card-js.min.css', 'public/css/card-js.min.css');