No OneTemporary
Actions

Size

44 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/app/Providers/PaymentProvider.php b/src/app/Providers/PaymentProvider.php
	index 5d65329c..7d778751 100644
	--- a/src/app/Providers/PaymentProvider.php
	+++ b/src/app/Providers/PaymentProvider.php
	@@ -1,384 +1,384 @@
	<?php

	namespace App\Providers;

	use App\Transaction;
	use App\Payment;
	use App\Wallet;
	use Illuminate\Support\Facades\Cache;

	abstract class PaymentProvider
	{
	public const STATUS_OPEN = 'open';
	public const STATUS_CANCELED = 'canceled';
	public const STATUS_PENDING = 'pending';
	public const STATUS_AUTHORIZED = 'authorized';
	public const STATUS_EXPIRED = 'expired';
	public const STATUS_FAILED = 'failed';
	public const STATUS_PAID = 'paid';

	public const TYPE_ONEOFF = 'oneoff';
	public const TYPE_RECURRING = 'recurring';
	public const TYPE_MANDATE = 'mandate';
	public const TYPE_REFUND = 'refund';
	public const TYPE_CHARGEBACK = 'chargeback';

	public const METHOD_CREDITCARD = 'creditcard';
	public const METHOD_PAYPAL = 'paypal';
	public const METHOD_BANKTRANSFER = 'banktransfer';
	public const METHOD_DIRECTDEBIT = 'directdebit';

	public const PROVIDER_MOLLIE = 'mollie';
	public const PROVIDER_STRIPE = 'stripe';

	/** const int Minimum amount of money in a single payment (in cents) */
	public const MIN_AMOUNT = 1000;

	private static $paymentMethodIcons = [
	self::METHOD_CREDITCARD => ['prefix' => 'far', 'name' => 'credit-card'],
	self::METHOD_PAYPAL => ['prefix' => 'fab', 'name' => 'paypal'],
	- self::METHOD_BANKTRANSFER => ['prefix' => 'fas', 'name' => 'university']
	+ self::METHOD_BANKTRANSFER => ['prefix' => 'fas', 'name' => 'building-columns']
	];

	/**
	* Detect the name of the provider
	*
	* @param \App\Wallet\|string\|null $provider_or_wallet
	* @return string The name of the provider
	*/
	private static function providerName($provider_or_wallet = null): string
	{
	if ($provider_or_wallet instanceof Wallet) {
	$settings = $provider_or_wallet->getSettings(['stripe_id', 'mollie_id']);

	if ($settings['stripe_id']) {
	$provider = self::PROVIDER_STRIPE;
	} elseif ($settings['mollie_id']) {
	$provider = self::PROVIDER_MOLLIE;
	}
	} else {
	$provider = $provider_or_wallet;
	}

	if (empty($provider)) {
	$provider = \config('services.payment_provider') ?: self::PROVIDER_MOLLIE;
	}

	return \strtolower($provider);
	}

	/**
	* Factory method
	*
	* @param \App\Wallet\|string\|null $provider_or_wallet
	*/
	public static function factory($provider_or_wallet = null)
	{
	switch (self::providerName($provider_or_wallet)) {
	case self::PROVIDER_STRIPE:
	return new \App\Providers\Payment\Stripe();

	case self::PROVIDER_MOLLIE:
	return new \App\Providers\Payment\Mollie();

	default:
	throw new \Exception("Invalid payment provider: {$provider_or_wallet}");
	}
	}

	/**
	* Create a new auto-payment mandate for a wallet.
	*
	* @param \App\Wallet $wallet The wallet
	* @param array $payment Payment data:
	* - amount: Value in cents
	* - currency: The operation currency
	* - description: Operation desc.
	* - methodId: Payment method
	*
	* @return array Provider payment data:
	* - id: Operation identifier
	* - redirectUrl: the location to redirect to
	*/
	abstract public function createMandate(Wallet $wallet, array $payment): ?array;

	/**
	* Revoke the auto-payment mandate for a wallet.
	*
	* @param \App\Wallet $wallet The wallet
	*
	* @return bool True on success, False on failure
	*/
	abstract public function deleteMandate(Wallet $wallet): bool;

	/**
	* Get a auto-payment mandate for a wallet.
	*
	* @param \App\Wallet $wallet The wallet
	*
	* @return array\|null Mandate information:
	* - id: Mandate identifier
	* - method: user-friendly payment method desc.
	* - methodId: Payment method
	* - isPending: the process didn't complete yet
	* - isValid: the mandate is valid
	*/
	abstract public function getMandate(Wallet $wallet): ?array;

	/**
	* Get a link to the customer in the provider's control panel
	*
	* @param \App\Wallet $wallet The wallet
	*
	* @return string\|null The string representing <a> tag
	*/
	abstract public function customerLink(Wallet $wallet): ?string;

	/**
	* Get a provider name
	*
	* @return string Provider name
	*/
	abstract public function name(): string;

	/**
	* Create a new payment.
	*
	* @param \App\Wallet $wallet The wallet
	* @param array $payment Payment data:
	* - amount: Value in cents
	* - currency: The operation currency
	* - type: first/oneoff/recurring
	* - description: Operation description
	* - methodId: Payment method
	*
	* @return array Provider payment/session data:
	* - id: Operation identifier
	* - redirectUrl
	*/
	abstract public function payment(Wallet $wallet, array $payment): ?array;

	/**
	* Update payment status (and balance).
	*
	* @return int HTTP response code
	*/
	abstract public function webhook(): int;

	/**
	* Create a payment record in DB
	*
	* @param array $payment Payment information
	* @param string $wallet_id Wallet ID
	*
	* @return \App\Payment Payment object
	*/
	protected function storePayment(array $payment, $wallet_id): Payment
	{
	$db_payment = new Payment();
	$db_payment->id = $payment['id'];
	$db_payment->description = $payment['description'] ?? '';
	$db_payment->status = $payment['status'] ?? self::STATUS_OPEN;
	$db_payment->amount = $payment['amount'] ?? 0;
	$db_payment->type = $payment['type'];
	$db_payment->wallet_id = $wallet_id;
	$db_payment->provider = $this->name();
	$db_payment->currency = $payment['currency'];
	$db_payment->currency_amount = $payment['currency_amount'];
	$db_payment->save();

	return $db_payment;
	}

	/**
	* Convert a value from $sourceCurrency to $targetCurrency
	*
	* @param int $amount Amount in cents of $sourceCurrency
	* @param string $sourceCurrency Currency from which to convert
	* @param string $targetCurrency Currency to convert to
	*
	* @return int Exchanged amount in cents of $targetCurrency
	*/
	protected function exchange(int $amount, string $sourceCurrency, string $targetCurrency): int
	{
	return intval(round($amount * \App\Utils::exchangeRate($sourceCurrency, $targetCurrency)));
	}

	/**
	* Deduct an amount of pecunia from the wallet.
	* Creates a payment and transaction records for the refund/chargeback operation.
	*
	* @param \App\Wallet $wallet A wallet object
	* @param array $refund A refund or chargeback data (id, type, amount, description)
	*
	* @return void
	*/
	protected function storeRefund(Wallet $wallet, array $refund): void
	{
	if (empty($refund) \|\| empty($refund['amount'])) {
	return;
	}

	// Preserve originally refunded amount
	$refund['currency_amount'] = $refund['amount'] * -1;

	// Convert amount to wallet currency
	// TODO We should possibly be using the same exchange rate as for the original payment?
	$amount = $this->exchange($refund['amount'], $refund['currency'], $wallet->currency);

	$wallet->balance -= $amount;
	$wallet->save();

	if ($refund['type'] == self::TYPE_CHARGEBACK) {
	$transaction_type = Transaction::WALLET_CHARGEBACK;
	} else {
	$transaction_type = Transaction::WALLET_REFUND;
	}

	Transaction::create([
	'object_id' => $wallet->id,
	'object_type' => Wallet::class,
	'type' => $transaction_type,
	'amount' => $amount * -1,
	'description' => $refund['description'] ?? '',
	]);

	$refund['status'] = self::STATUS_PAID;
	$refund['amount'] = -1 * $amount;

	// FIXME: Refunds/chargebacks are out of the reseller comissioning for now

	$this->storePayment($refund, $wallet->id);
	}

	/**
	* List supported payment methods from this provider
	*
	* @param string $type The payment type for which we require a method (oneoff/recurring).
	* @param string $currency Currency code
	*
	* @return array Array of array with available payment methods:
	* - id: id of the method
	* - name: User readable name of the payment method
	* - minimumAmount: Minimum amount to be charged in cents
	* - currency: Currency used for the method
	* - exchangeRate: The projected exchange rate (actual rate is determined during payment)
	* - icon: An icon (icon name) representing the method
	*/
	abstract public function providerPaymentMethods(string $type, string $currency): array;

	/**
	* Get a payment.
	*
	* @param string $paymentId Payment identifier
	*
	* @return array Payment information:
	* - id: Payment identifier
	* - status: Payment status
	* - isCancelable: The payment can be canceled
	* - checkoutUrl: The checkout url to complete the payment or null if none
	*/
	abstract public function getPayment($paymentId): array;

	/**
	* Return an array of whitelisted payment methods with override values.
	*
	* @param string $type The payment type for which we require a method.
	*
	* @return array Array of methods
	*/
	protected static function paymentMethodsWhitelist($type): array
	{
	$methods = [];
	switch ($type) {
	case self::TYPE_ONEOFF:
	$methods = explode(',', \config('app.payment.methods_oneoff'));
	break;
	case PaymentProvider::TYPE_RECURRING:
	$methods = explode(',', \config('app.payment.methods_recurring'));
	break;
	default:
	\Log::error("Unknown payment type: " . $type);
	}
	$methods = array_map('strtolower', array_map('trim', $methods));
	return $methods;
	}

	/**
	* Return an array of whitelisted payment methods with override values.
	*
	* @param string $type The payment type for which we require a method.
	*
	* @return array Array of methods
	*/
	private static function applyMethodWhitelist($type, $availableMethods): array
	{
	$methods = [];

	// Use only whitelisted methods, and apply values from whitelist (overriding the backend)
	$whitelistMethods = self::paymentMethodsWhitelist($type);
	foreach ($whitelistMethods as $id) {
	if (array_key_exists($id, $availableMethods)) {
	$method = $availableMethods[$id];
	$method['icon'] = self::$paymentMethodIcons[$id];
	$methods[] = $method;
	}
	}

	return $methods;
	}

	/**
	* List supported payment methods for $wallet
	*
	* @param \App\Wallet $wallet The wallet
	* @param string $type The payment type for which we require a method (oneoff/recurring).
	*
	* @return array Array of array with available payment methods:
	* - id: id of the method
	* - name: User readable name of the payment method
	* - minimumAmount: Minimum amount to be charged in cents
	* - currency: Currency used for the method
	* - exchangeRate: The projected exchange rate (actual rate is determined during payment)
	* - icon: An icon (icon name) representing the method
	*/
	public static function paymentMethods(Wallet $wallet, $type): array
	{
	$providerName = self::providerName($wallet);

	$cacheKey = "methods-{$providerName}-{$type}-{$wallet->currency}";

	if ($methods = Cache::get($cacheKey)) {
	\Log::debug("Using payment method cache" . var_export($methods, true));
	return $methods;
	}

	$provider = PaymentProvider::factory($providerName);
	$methods = $provider->providerPaymentMethods($type, $wallet->currency);
	$methods = self::applyMethodWhitelist($type, $methods);

	\Log::debug("Loaded payment methods" . var_export($methods, true));

	Cache::put($cacheKey, $methods, now()->addHours(1));

	return $methods;
	}

	/**
	* Returns the full URL for the wallet page, used when returning from an external payment page.
	* Depending on the request origin it will return a URL for the User or Reseller UI.
	*
	* @return string The redirect URL
	*/
	public static function redirectUrl(): string
	{
	$url = \App\Utils::serviceUrl('/wallet');
	$domain = preg_replace('/:[0-9]+$/', '', request()->getHttpHost());

	if (strpos($domain, 'reseller') === 0) {
	$url = preg_replace('\|^(https?://)([^/]+)\|', '\\1' . $domain, $url);
	}

	return $url;
	}
	}
	diff --git a/src/resources/themes/app.scss b/src/resources/themes/app.scss
	index 68c8eb19..f263b42b 100644
	--- a/src/resources/themes/app.scss
	+++ b/src/resources/themes/app.scss
	@@ -1,510 +1,514 @@
	html,
	body,
	body > .outer-container {
	height: 100%;
	}

	#app {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	overflow: hidden;

	& > nav {
	flex-shrink: 0;
	z-index: 12;
	}

	& > div.container {
	flex-grow: 1;
	margin-top: 2rem;
	margin-bottom: 2rem;
	}

	& > .filler {
	flex-grow: 1;
	}

	& > div.container + .filler {
	display: none;
	}
	}

	.error-page {
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	align-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	color: #636b6f;
	z-index: 10;
	background: white;

	.code {
	text-align: right;
	border-right: 2px solid;
	font-size: 26px;
	padding: 0 15px;
	}

	.message {
	font-size: 18px;
	padding: 0 15px;
	}

	.hint {
	margin-top: 3em;
	text-align: center;
	width: 100%;
	}
	}

	.app-loader {
	background-color: $body-bg;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 8;

	.spinner-border {
	width: 120px;
	height: 120px;
	border-width: 15px;
	color: #b2aa99;
	}

	&.small .spinner-border {
	width: 25px;
	height: 25px;
	border-width: 3px;
	}

	&.fadeOut {
	visibility: hidden;
	opacity: 0;
	transition: visibility 300ms linear, opacity 300ms linear;
	}
	}

	pre {
	margin: 1rem 0;
	padding: 1rem;
	background-color: $menu-bg-color;
	}

	.card-title {
	font-size: 1.2rem;
	font-weight: bold;
	}

	tfoot.table-fake-body {
	background-color: #f8f8f8;
	color: grey;
	text-align: center;

	td {
	vertical-align: middle;
	height: 8em;
	border: 0;
	}

	tbody:not(:empty) + & {
	display: none;
	}
	}

	table {
	th {
	white-space: nowrap;
	}

	td.email,
	td.price,
	td.datetime,
	td.selection {
	width: 1%;
	white-space: nowrap;
	}

	td.buttons,
	th.price,
	td.price,
	th.size,
	td.size {
	width: 1%;
	text-align: right;
	white-space: nowrap;
	}

	&.form-list {
	margin: 0;

	td {
	border: 0;

	&:first-child {
	padding-left: 0;
	}

	&:last-child {
	padding-right: 0;
	}
	}

	button {
	line-height: 1;
	}
	}

	.btn-action {
	line-height: 1;
	padding: 0;
	}

	td {
	& > svg + a,
	& > svg + span {
	margin-left: .4em;
	}
	}

	&.files {
	table-layout: fixed;

	td {
	white-space: nowrap;
	}

	td.name {
	overflow: hidden;
	text-overflow: ellipsis;
	}
	/*
	td.size,
	th.size {
	width: 80px;
	}

	td.mtime,
	th.mtime {
	width: 140px;

	@include media-breakpoint-down(sm) {
	display: none;
	}
	}
	*/
	td.buttons,
	th.buttons {
	width: 50px;
	}
	}
	}

	.table > :not(:first-child) {
	// Remove Bootstrap's 2px border
	border-width: 0;
	}

	.list-details {
	min-height: 1em;

	& > ul {
	margin: 0;
	padding-left: 1.2em;
	}
	}

	.plan-selector {
	.plan-header {
	display: flex;
	}

	.plan-ico {
	margin:auto;
	font-size: 3.8rem;
	color: #f1a539;
	border: 3px solid #f1a539;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	}
	}

	.status-message {
	display: flex;
	align-items: center;
	justify-content: center;

	.app-loader {
	width: auto;
	position: initial;

	.spinner-border {
	color: $body-color;
	}
	}

	svg {
	font-size: 1.5em;
	}

	:first-child {
	margin-right: 0.4em;
	}
	}

	.form-separator {
	position: relative;
	margin: 1em 0;
	display: flex;
	justify-content: center;

	hr {
	border-color: #999;
	margin: 0;
	position: absolute;
	top: 0.75em;
	width: 100%;
	}

	span {
	background: #fff;
	padding: 0 1em;
	z-index: 1;
	}
	}

	#status-box {
	background-color: lighten($green, 35);

	.progress {
	background-color: #fff;
	height: 10px;
	}

	.progress-label {
	font-size: 0.9em;
	}

	.progress-bar {
	background-color: $green;
	}

	&.process-failed {
	background-color: lighten($orange, 30);

	.progress-bar {
	background-color: $red;
	}
	}
	}

	@keyframes blinker {
	50% {
	opacity: 0;
	}
	}

	.blinker {
	animation: blinker 750ms step-start infinite;
	}

	#dashboard-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	& > a {
	padding: 1rem;
	text-align: center;
	white-space: nowrap;
	margin: 0.25rem;
	text-decoration: none;
	width: 150px;

	&.disabled {
	pointer-events: none;
	opacity: 0.6;
	}

	// Some icons are too big, scale them down
	&.link-companionapp,
	&.link-domains,
	&.link-resources,
	&.link-settings,
	&.link-wallet,
	&.link-invitations {
	svg {
	transform: scale(0.8);
	}
	}

	&.link-distlists,
	&.link-files,
	&.link-shared-folders {
	svg {
	transform: scale(0.9);
	}
	}

	.badge {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	}
	}

	svg {
	width: 6rem;
	height: 6rem;
	margin: auto;
	}
	}

	#payment-method-selection {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	& > a {
	padding: 1rem;
	text-align: center;
	white-space: nowrap;
	margin: 0.25rem;
	text-decoration: none;
	width: 150px;
	}

	svg {
	width: 6rem;
	height: 6rem;
	margin: auto;
	}
	+
	+ .link-banktransfer svg {
	+ transform: scale(.8);
	+ }
	}

	#logon-form {
	flex-basis: auto; // Bootstrap issue? See logon page with width < 992
	}

	#logon-form-footer {
	a:not(:first-child) {
	margin-left: 2em;
	}
	}

	// Various improvements for mobile
	@include media-breakpoint-down(sm) {
	.card,
	.card-footer {
	border: 0;
	}

	.card-body {
	padding: 0.5rem 0;
	}

	.nav-tabs {
	flex-wrap: nowrap;

	.nav-link {
	white-space: nowrap;
	padding: 0.5rem 0.75rem;
	}
	}

	#app > div.container {
	margin-bottom: 1rem;
	margin-top: 1rem;
	max-width: 100%;
	}

	#header-menu-navbar {
	padding: 0;
	}

	#dashboard-nav > a {
	width: 135px;
	}

	.table-sm:not(.form-list) {
	tbody td {
	padding: 0.75rem 0.5rem;

	svg {
	vertical-align: -0.175em;
	}

	& > svg {
	font-size: 125%;
	margin-right: 0.25rem;
	}
	}
	}

	.table.transactions {
	thead {
	display: none;
	}

	tbody {
	tr {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	}

	td {
	width: auto;
	border: 0;
	padding: 0.5rem;

	&.datetime {
	width: 50%;
	padding-left: 0;
	}

	&.description {
	order: 3;
	width: 100%;
	border-bottom: 1px solid $border-color;
	color: $secondary;
	padding: 0 1.5em 0.5rem 0;
	margin-top: -0.25em;
	}

	&.selection {
	position: absolute;
	right: 0;
	border: 0;
	top: 1.7em;
	padding-right: 0;
	}

	&.price {
	width: 50%;
	padding-right: 0;
	}

	&.email {
	display: none;
	}
	}
	}
	}
	}

	@include media-breakpoint-down(sm) {
	.tab-pane > .card-body {
	padding: 0.5rem;
	}
	}
	diff --git a/src/resources/vue/Wallet.vue b/src/resources/vue/Wallet.vue
	index 32b5a88b..1b506553 100644
	--- a/src/resources/vue/Wallet.vue
	+++ b/src/resources/vue/Wallet.vue
	@@ -1,446 +1,446 @@
	<template>
	<div class="container" dusk="wallet-component">
	<div v-if="wallet.id" id="wallet" class="card">
	<div class="card-body">
	<div class="card-title">{{ $t('wallet.title') }} <span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'">{{ $root.price(wallet.balance, wallet.currency) }}</span></div>
	<div class="card-text">
	<p v-if="wallet.notice" id="wallet-notice">{{ wallet.notice }}</p>

	<div v-if="showPendingPayments" class="alert alert-warning">
	{{ $t('wallet.pending-payments-warning') }}
	</div>
	<p>
	<btn class="btn-primary" @click="paymentMethodForm('manual')">{{ $t('wallet.add-credit') }}</btn>
	</p>
	<div id="mandate-form" v-if="!mandate.isValid && !mandate.isPending">
	<template v-if="mandate.id && !mandate.isValid">
	<div class="alert alert-danger">
	{{ $t('wallet.auto-payment-failed') }}
	</div>
	<btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn>
	</template>
	<btn class="btn-primary" @click="paymentMethodForm('auto')">{{ $t('wallet.auto-payment-setup') }}</btn>
	</div>
	<div id="mandate-info" v-else>
	<div v-if="mandate.isDisabled" class="disabled-mandate alert alert-danger">
	{{ $t('wallet.auto-payment-disabled') }}
	</div>
	<template v-else>
	<p v-html="$t('wallet.auto-payment-info', { amount: mandate.amount + ' ' + wallet.currency, balance: mandate.balance + ' ' + wallet.currency})"></p>
	<p>{{ $t('wallet.payment-method', { method: mandate.method }) }}</p>
	</template>
	<div v-if="mandate.isPending" class="alert alert-warning">
	{{ $t('wallet.auto-payment-inprogress') }}
	</div>
	<p class="buttons">
	<btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn>
	<btn class="btn-primary" @click="autoPaymentChange">{{ $t('wallet.auto-payment-change') }}</btn>
	</p>
	</div>
	</div>
	</div>
	</div>

	<ul class="nav nav-tabs mt-3" role="tablist">
	<li class="nav-item">
	<a class="nav-link active" id="tab-receipts" href="#wallet-receipts" role="tab" aria-controls="wallet-receipts" aria-selected="true">
	{{ $t('wallet.receipts') }}
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" id="tab-history" href="#wallet-history" role="tab" aria-controls="wallet-history" aria-selected="false">
	{{ $t('wallet.history') }}
	</a>
	</li>
	<li v-if="showPendingPayments" class="nav-item">
	<a class="nav-link" id="tab-payments" href="#wallet-payments" role="tab" aria-controls="wallet-payments" aria-selected="false">
	{{ $t('wallet.pending-payments') }}
	</a>
	</li>
	</ul>
	<div class="tab-content">
	<div class="tab-pane active" id="wallet-receipts" role="tabpanel" aria-labelledby="tab-receipts">
	<div class="card-body">
	<div class="card-text">
	<p v-if="receipts.length">
	{{ $t('wallet.receipts-hint') }}
	</p>
	<div v-if="receipts.length" class="input-group">
	<select id="receipt-id" class="form-control">
	<option v-for="(receipt, index) in receipts" :key="index" :value="receipt">{{ receipt }}</option>
	</select>
	<btn class="btn-secondary" @click="receiptDownload" icon="download">{{ $t('btn.download') }}</btn>
	</div>
	<p v-if="!receipts.length">
	{{ $t('wallet.receipts-none') }}
	</p>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="wallet-history" role="tabpanel" aria-labelledby="tab-history">
	<div class="card-body">
	<transaction-log v-if="walletId && loadTransactions" class="card-text" :wallet-id="walletId"></transaction-log>
	</div>
	</div>
	<div class="tab-pane" id="wallet-payments" role="tabpanel" aria-labelledby="tab-payments">
	<div class="card-body">
	<payment-log v-if="walletId && loadPayments" class="card-text" :wallet-id="walletId"></payment-log>
	</div>
	</div>
	</div>

	<div id="payment-dialog" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ paymentDialogTitle }}</h5>
	<btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</div>
	<div class="modal-body">
	<div id="payment-method" v-if="paymentForm == 'method'">
	<form data-validation-prefix="mandate_">
	<div id="payment-method-selection">
	- <a :id="method.id" v-for="method in paymentMethods" :key="method.id" @click="selectPaymentMethod(method)" href="#" class="card link-profile">
	+ <a :id="method.id" v-for="method in paymentMethods" :key="method.id" @click="selectPaymentMethod(method)" href="#" :class="'card link-' + method.id">
	<svg-icon v-if="method.icon" :icon="[method.icon.prefix, method.icon.name]" />
	<img v-if="method.image" :src="method.image" />
	<span class="name">{{ method.name }}</span>
	</a>
	</div>
	</form>
	</div>
	<div id="manual-payment" v-if="paymentForm == 'manual'">
	<p v-if="wallet.currency != selectedPaymentMethod.currency">
	{{ $t('wallet.currency-conv', { wc: wallet.currency, pc: selectedPaymentMethod.currency }) }}
	</p>
	<p v-if="selectedPaymentMethod.id == 'banktransfer'">
	{{ $t('wallet.banktransfer-hint') }}
	</p>
	<p>
	{{ $t('wallet.payment-amount-hint') }}
	</p>
	<form id="payment-form" @submit.prevent="payment">
	<div class="input-group">
	<input type="text" class="form-control" id="amount" v-model="amount" required>
	<span class="input-group-text">{{ wallet.currency }}</span>
	</div>
	<div v-if="wallet.currency != selectedPaymentMethod.currency && !isNaN(amount)" class="alert alert-warning m-0 mt-3">
	{{ $t('wallet.payment-warning', { price: $root.price(amount * selectedPaymentMethod.exchangeRate * 100, selectedPaymentMethod.currency) }) }}
	</div>
	</form>
	</div>
	<div id="auto-payment" v-if="paymentForm == 'auto'">
	<form data-validation-prefix="mandate_">
	<p>
	{{ $t('wallet.auto-payment-hint') }}
	</p>
	<div class="row mb-3">
	<label for="mandate_amount" class="col-sm-6 col-form-label">{{ $t('wallet.fill-up') }}</label>
	<div class="col-sm-6">
	<div class="input-group">
	<input type="text" class="form-control" id="mandate_amount" v-model="mandate.amount" required>
	<span class="input-group-text">{{ wallet.currency }}</span>
	</div>
	</div>
	</div>
	<div class="row mb-3">
	<label for="mandate_balance" class="col-sm-6 col-form-label">{{ $t('wallet.when-below') }}</label>
	<div class="col-sm-6">
	<div class="input-group">
	<input type="text" class="form-control" id="mandate_balance" v-model="mandate.balance" required>
	<span class="input-group-text">{{ wallet.currency }}</span>
	</div>
	</div>
	</div>
	<p v-if="!mandate.isValid">
	{{ $t('wallet.auto-payment-next') }}
	</p>
	<div v-if="mandate.isValid && mandate.isDisabled" class="disabled-mandate alert alert-danger m-0">
	{{ $t('wallet.auto-payment-disabled-next') }}
	</div>
	</form>
	</div>
	</div>
	<div class="modal-footer">
	<btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	<btn class="btn-primary modal-action" icon="check" @click="autoPayment"
	v-if="paymentForm == 'auto' && (mandate.isValid \|\| mandate.isPending)"
	>
	{{ $t('btn.submit') }}
	</btn>
	<btn class="btn btn-primary modal-action" icon="check" @click="autoPayment"
	v-if="paymentForm == 'auto' && !mandate.isValid && !mandate.isPending"
	>
	{{ $t('btn.continue') }}
	</btn>
	<btn class="btn-primary modal-action" icon="check" @click="payment"
	v-if="paymentForm == 'manual'"
	>
	{{ $t('btn.continue') }}
	</btn>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	import { Modal } from 'bootstrap'
	import TransactionLog from './Widgets/TransactionLog'
	import PaymentLog from './Widgets/PaymentLog'

	import { library } from '@fortawesome/fontawesome-svg-core'

	library.add(
	require('@fortawesome/free-brands-svg-icons/faPaypal').definition,
	require('@fortawesome/free-regular-svg-icons/faCreditCard').definition,
	- require('@fortawesome/free-solid-svg-icons/faUniversity').definition,
	+ require('@fortawesome/free-solid-svg-icons/faBuildingColumns').definition,
	)

	export default {
	components: {
	TransactionLog,
	PaymentLog
	},
	data() {
	return {
	amount: '',
	mandate: { amount: 10, balance: 0, method: null },
	paymentDialogTitle: null,
	paymentForm: null,
	nextForm: null,
	receipts: [],
	stripe: null,
	loadTransactions: false,
	loadPayments: false,
	showPendingPayments: false,
	wallet: {},
	walletId: null,
	paymentMethods: [],
	selectedPaymentMethod: null
	}
	},
	mounted() {
	$('#wallet button').focus()

	this.walletId = this.$root.authInfo.wallets[0].id

	this.$root.startLoading()
	axios.get('/api/v4/wallets/' + this.walletId)
	.then(response => {
	this.$root.stopLoading()
	this.wallet = response.data

	const receiptsTab = $('#wallet-receipts')

	this.$root.addLoader(receiptsTab)
	axios.get('/api/v4/wallets/' + this.walletId + '/receipts')
	.then(response => {
	this.$root.removeLoader(receiptsTab)
	this.receipts = response.data.list
	})
	.catch(error => {
	this.$root.removeLoader(receiptsTab)
	})

	if (this.wallet.provider == 'stripe') {
	this.stripeInit()
	}
	})
	.catch(this.$root.errorHandler)

	this.loadMandate()

	axios.get('/api/v4/payments/has-pending')
	.then(response => {
	this.showPendingPayments = response.data.hasPending
	})
	},
	updated() {
	$(this.$el).find('ul.nav-tabs a').on('click', e => {
	this.$root.tab(e)

	if ($(e.target).is('#tab-history')) {
	this.loadTransactions = true
	} else if ($(e.target).is('#tab-payments')) {
	this.loadPayments = true
	}
	})
	},
	methods: {
	loadMandate() {
	const mandate_form = $('#mandate-form')

	this.$root.removeLoader(mandate_form)

	if (!this.mandate.id \|\| this.mandate.isPending) {
	this.$root.addLoader(mandate_form)
	axios.get('/api/v4/payments/mandate')
	.then(response => {
	this.$root.removeLoader(mandate_form)
	this.mandate = response.data
	})
	.catch(error => {
	this.$root.removeLoader(mandate_form)
	})
	}
	},
	selectPaymentMethod(method) {
	this.formLock = false
	this.selectedPaymentMethod = method
	this.paymentForm = this.nextForm

	setTimeout(() => { $('#payment-dialog').find('#amount,#mandate_amount').focus() }, 10)
	},
	payment() {
	if (this.formLock) {
	return
	}

	// Lock the form to prevent from double submission
	this.formLock = true
	let onFinish = () => { this.formLock = false }

	this.$root.clearFormValidation($('#payment-form'))

	const post = {
	amount: this.amount,
	methodId: this.selectedPaymentMethod.id,
	currency: this.selectedPaymentMethod.currency
	}

	axios.post('/api/v4/payments', post, { onFinish })
	.then(response => {
	if (response.data.redirectUrl) {
	location.href = response.data.redirectUrl
	} else {
	this.stripeCheckout(response.data)
	}
	})
	},
	autoPayment() {
	if (this.formLock) {
	return
	}

	// Lock the form to prevent from double submission
	this.formLock = true
	let onFinish = () => { this.formLock = false }

	const method = this.mandate.id && (this.mandate.isValid \|\| this.mandate.isPending) ? 'put' : 'post'
	let post = {
	amount: this.mandate.amount,
	balance: this.mandate.balance,
	}

	// Modifications can't change the method of payment
	if (this.selectedPaymentMethod) {
	post.methodId = this.selectedPaymentMethod.id
	post.currency = this.selectedPaymentMethod.currency
	}

	this.$root.clearFormValidation($('#auto-payment form'))

	axios[method]('/api/v4/payments/mandate', post, { onFinish })
	.then(response => {
	if (method == 'post') {
	this.mandate.id = null
	// a new mandate, redirect to the chackout page
	if (response.data.redirectUrl) {
	location.href = response.data.redirectUrl
	} else if (response.data.id) {
	this.stripeCheckout(response.data)
	}
	} else {
	// an update
	if (response.data.status == 'success') {
	this.dialog.hide();
	this.mandate = response.data
	this.$toast.success(response.data.message)
	}
	}
	})
	},
	autoPaymentChange(event) {
	this.autoPaymentForm(event, this.$t('wallet.auto-payment-update'))
	},
	autoPaymentDelete() {
	axios.delete('/api/v4/payments/mandate')
	.then(response => {
	this.mandate = { amount: 10, balance: 0 }
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	}
	})
	},
	paymentMethodForm(nextForm) {
	this.formLock = false
	this.paymentMethods = []
	this.paymentForm = 'method'
	this.nextForm = nextForm
	this.paymentDialogTitle = this.$t(nextForm == 'auto' ? 'wallet.auto-payment-setup' : 'wallet.top-up')

	this.dialog = new Modal('#payment-dialog')
	this.dialog.show()

	this.$nextTick().then(() => {
	const form = $('#payment-method')
	const type = nextForm == 'manual' ? 'oneoff' : 'recurring'

	this.$root.addLoader(form, false, { 'min-height': '10em' })

	axios.get('/api/v4/payments/methods', { params: { type } })
	.then(response => {
	this.$root.removeLoader(form)
	this.paymentMethods = response.data
	})
	})
	},
	autoPaymentForm(event, title) {
	this.paymentForm = 'auto'
	this.paymentDialogTitle = title
	this.formLock = false

	this.dialog = new Modal('#payment-dialog')
	this.dialog.show()
	},
	receiptDownload() {
	const receipt = $('#receipt-id').val()
	this.$root.downloadFile('/api/v4/wallets/' + this.walletId + '/receipts/' + receipt)
	},
	stripeInit() {
	let script = $('#stripe-script')

	if (!script.length) {
	script = document.createElement('script')

	script.onload = () => {
	this.stripe = Stripe(window.config.stripePK)
	}

	script.id = 'stripe-script'
	script.src = 'https://js.stripe.com/v3/'

	document.getElementsByTagName('head')[0].appendChild(script)
	} else {
	this.stripe = Stripe(window.config.stripePK)
	}
	},
	stripeCheckout(data) {
	if (!this.stripe) {
	return
	}

	this.stripe.redirectToCheckout({
	sessionId: data.id
	}).then(result => {
	// If it fails due to a browser or network error,
	// display the localized error message to the user
	if (result.error) {
	this.$toast.error(result.error.message)
	}
	})
	}
	}
	}
	</script>

File Metadata

Mime Type: text/x-diff
Expires: Wed, Mar 18, 7:53 PM (1 h, 13 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 458409
Default Alt Text: (44 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions