mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-05-14 17:25:01 +00:00
- added payment page
This commit is contained in:
Peter Papp
@@ -3,6 +3,7 @@
|
||||
namespace App\Http\Resources\Oasis;
|
||||
|
||||
use App\Http\Resources\PlanResource;
|
||||
use App\Http\Resources\PricingResource;
|
||||
use App\Services\StripeService;
|
||||
use Illuminate\Http\Resources\Json\JsonResource;
|
||||
use Illuminate\Support\Facades\Cache;
|
||||
@@ -42,7 +43,7 @@ class SubscriptionRequestResource extends JsonResource
|
||||
]
|
||||
]
|
||||
],
|
||||
'plan' => new PlanResource(
|
||||
'plan' => new PricingResource(
|
||||
resolve(StripeService::class)->getPlan($this->requested_plan)
|
||||
),
|
||||
]
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
namespace App\Http\Resources;
|
||||
|
||||
use App\Services\StripeService;
|
||||
use Illuminate\Http\Resources\Json\JsonResource;
|
||||
use Laravel\Cashier\Cashier;
|
||||
|
||||
@@ -26,43 +27,9 @@ class PricingResource extends JsonResource
|
||||
'capacity_formatted' => format_gigabytes($this['product']['metadata']['capacity']),
|
||||
'capacity' => (int)$this['product']['metadata']['capacity'],
|
||||
'currency' => config('cashier.currency'),
|
||||
'tax_rates' => $this->get_tax_rates(),
|
||||
'tax_rates' => resolve(StripeService::class)->get_tax_rates($this['plan']['amount'])
|
||||
]
|
||||
]
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Get plan tax rates
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
private function get_tax_rates(): array
|
||||
{
|
||||
$stripe = resolve('App\Services\StripeService');
|
||||
|
||||
$rates_public = [];
|
||||
|
||||
// Get tax rates
|
||||
$rates = $stripe->getTaxRates();
|
||||
|
||||
foreach ($rates as $rate) {
|
||||
|
||||
// Continue when is not active
|
||||
if (!$rate['active']) continue;
|
||||
|
||||
// Calculate tax
|
||||
$tax = $this['plan']['amount'] * ($rate['percentage'] / 100);
|
||||
|
||||
array_push($rates_public, [
|
||||
'id' => $rate['id'],
|
||||
'active' => $rate['active'],
|
||||
'jurisdiction' => $rate['jurisdiction'],
|
||||
'percentage' => $rate['percentage'],
|
||||
'plan_price_formatted' => Cashier::formatAmount(round($this['plan']['amount'] + $tax)),
|
||||
]);
|
||||
}
|
||||
|
||||
return $rates_public;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,7 @@ use App\Models\User;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Cache;
|
||||
use Illuminate\Support\Str;
|
||||
use Laravel\Cashier\Cashier;
|
||||
use Laravel\Cashier\Exceptions\IncompletePayment;
|
||||
use Laravel\Cashier\Exceptions\PaymentActionRequired;
|
||||
use Stripe;
|
||||
@@ -49,6 +50,36 @@ class StripeService
|
||||
->all()['data'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Get plan tax rates
|
||||
*
|
||||
* @param $amount
|
||||
* @return array
|
||||
*/
|
||||
public function get_tax_rates($amount): array
|
||||
{
|
||||
$rates_public = [];
|
||||
|
||||
foreach ($this->getTaxRates() as $rate) {
|
||||
|
||||
// Continue when is not active
|
||||
if (!$rate['active']) continue;
|
||||
|
||||
// Calculate tax
|
||||
$tax = $amount * ($rate['percentage'] / 100);
|
||||
|
||||
array_push($rates_public, [
|
||||
'id' => $rate['id'],
|
||||
'active' => $rate['active'],
|
||||
'jurisdiction' => $rate['jurisdiction'],
|
||||
'percentage' => $rate['percentage'],
|
||||
'plan_price_formatted' => Cashier::formatAmount(round($amount + $tax)),
|
||||
]);
|
||||
}
|
||||
|
||||
return $rates_public;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get default payment option or set new default payment
|
||||
*
|
||||
|
||||
+43
-11
@@ -2,7 +2,7 @@
|
||||
"/js/main.js": "/js/main.js",
|
||||
"/css/app.css": "/css/app.css",
|
||||
"/chunks/admin.js": "/chunks/admin.js?id=7875b08fc6fb75a7ad1f",
|
||||
"/chunks/admin-account.js": "/chunks/admin-account.js?id=c9330616aa6a16b45288",
|
||||
"/chunks/admin-account.js": "/chunks/admin-account.js?id=b1d2758e439eb303f5ee",
|
||||
"/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.js?id=81dea7680f4bfde55278",
|
||||
"/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js?id=62b552a0492fe95b2223",
|
||||
"/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~a001bb84.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~a001bb84.js?id=0cad8279d29d79cd0e82",
|
||||
@@ -19,17 +19,17 @@
|
||||
"/chunks/app-payments.js": "/chunks/app-payments.js?id=4184e5c489f4fe09f2ab",
|
||||
"/chunks/app-settings.js": "/chunks/app-settings.js?id=1441a53c88fa164f4e1c",
|
||||
"/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js": "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js?id=e71bb0286189734a8aec",
|
||||
"/chunks/app-setup.js": "/chunks/app-setup.js?id=bb25421b4c61d039765f",
|
||||
"/chunks/billings-detail.js": "/chunks/billings-detail.js?id=15ab9d58ca7eeb26ed0e",
|
||||
"/chunks/app-setup.js": "/chunks/app-setup.js?id=e643bae8573b88e6437c",
|
||||
"/chunks/billings-detail.js": "/chunks/billings-detail.js?id=e71c7c69b1132cf6b243",
|
||||
"/chunks/contact-us.js": "/chunks/contact-us.js?id=14e8c1c3784fce3b5a22",
|
||||
"/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js": "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js?id=5814ff43ba7c67297af1",
|
||||
"/chunks/create-new-password.js": "/chunks/create-new-password.js?id=f3c8bc62f62ae537f93c",
|
||||
"/chunks/dashboard.js": "/chunks/dashboard.js?id=9809887401e27ef5826e",
|
||||
"/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.js?id=1c22034c0e30c4530f3d",
|
||||
"/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js?id=859a6f034ca5697aaf60",
|
||||
"/chunks/database.js": "/chunks/database.js?id=58addbf30b3b2f7c36db",
|
||||
"/chunks/database.js": "/chunks/database.js?id=22b6513c494a3d5714d9",
|
||||
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=6dccc2158cc6278f683d",
|
||||
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=81005c48fec83ab4ca45",
|
||||
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=123776e4ad431b2af406",
|
||||
"/chunks/files.js": "/chunks/files.js?id=40b4464ce393cb112111",
|
||||
"/chunks/files~chunks/platform~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared-files~chunks/shared/file-browser.js?id=c2c86f2168e863fbd49e",
|
||||
"/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js?id=885dd88f0e8d5c499a48",
|
||||
@@ -40,7 +40,7 @@
|
||||
"/chunks/files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared/file-browser.js?id=b2a355bb27f40ee0e386",
|
||||
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=a00dedfec5aeabac394c",
|
||||
"/chunks/homepage.js": "/chunks/homepage.js?id=14154b40ea69f91fef31",
|
||||
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=4f937c33675bb39bc682",
|
||||
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=7543bc0ebd67a282779a",
|
||||
"/chunks/invoices.js": "/chunks/invoices.js?id=98c2b0d4a83f4e0cc6d9",
|
||||
"/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=7fc7f9b6f10bdfac770e",
|
||||
"/chunks/page-edit.js": "/chunks/page-edit.js?id=234551fa36d21e29606e",
|
||||
@@ -55,7 +55,7 @@
|
||||
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=82814a863a150db0cc7e",
|
||||
"/chunks/profile.js": "/chunks/profile.js?id=0f82cbd818967273cbd8",
|
||||
"/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=9202f2cff7c80a561718",
|
||||
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=b9ae98e83f8df690d09f",
|
||||
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=01dafc8397bda91a47f5",
|
||||
"/chunks/settings.js": "/chunks/settings.js?id=713564bcdbe44aa66df1",
|
||||
"/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=9c088cb1b14836d13648",
|
||||
"/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=c765f8563393c27bc6a6",
|
||||
@@ -71,9 +71,9 @@
|
||||
"/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=e8aedb75df7fe227d693",
|
||||
"/chunks/sign-in.js": "/chunks/sign-in.js?id=92a1de80f254cfc9ac91",
|
||||
"/chunks/sign-up.js": "/chunks/sign-up.js?id=50e81d184a05d3990d89",
|
||||
"/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=98e8a206373b361e6138",
|
||||
"/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=7cb7c0cb6ef388cd016e",
|
||||
"/chunks/subscription-service.js": "/chunks/subscription-service.js?id=bcea699b0d9d0ee61565",
|
||||
"/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=6eb1bdf3942d7b2dd06f",
|
||||
"/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=8048188a201c41f248c6",
|
||||
"/chunks/subscription-service.js": "/chunks/subscription-service.js?id=90c1aa9431689a89eb3d",
|
||||
"/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=830456726847f435144e",
|
||||
"/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=2b555924c945cbcd23f5",
|
||||
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=9c61721d5e30ef544377",
|
||||
@@ -171,5 +171,37 @@
|
||||
"/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.cec600408276af5260fe.hot-update.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.cec600408276af5260fe.hot-update.js",
|
||||
"/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.dbdbf80723e41e072d01.hot-update.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.dbdbf80723e41e072d01.hot-update.js",
|
||||
"/chunks/users.2b4b9dbd972d7a9d7c83.hot-update.js": "/chunks/users.2b4b9dbd972d7a9d7c83.hot-update.js",
|
||||
"/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.d4f9806caf6c6d5f1344.hot-update.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.d4f9806caf6c6d5f1344.hot-update.js"
|
||||
"/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.d4f9806caf6c6d5f1344.hot-update.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.d4f9806caf6c6d5f1344.hot-update.js",
|
||||
"/js/main.55cf4e9bc02bec922581.hot-update.js": "/js/main.55cf4e9bc02bec922581.hot-update.js",
|
||||
"/js/main.b52ecb4afdc47584e38f.hot-update.js": "/js/main.b52ecb4afdc47584e38f.hot-update.js",
|
||||
"/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~74bf0fcb.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~74bf0fcb.js?id=6b6737a58e371fc4434b",
|
||||
"/chunks/oasis/platba.js": "/chunks/oasis/platba.js?id=41fec8f562bfc988aa95",
|
||||
"/chunks/oasis/platba~chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/oasis/platba~chunks/upgrade-billing~chunks/upgrade-plan.js?id=4781f8460c7f0f8b21a5",
|
||||
"/vendors~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-i~0a9c5e33.js": "/vendors~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-i~0a9c5e33.js?id=b28978d3c8aae9b949a5",
|
||||
"/vendors~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-i~8394cf85.js": "/vendors~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-i~8394cf85.js?id=d25da0762af813ea588c",
|
||||
"/chunks/oasis/platba.f2d7a060bf88fd2d9403.hot-update.js": "/chunks/oasis/platba.f2d7a060bf88fd2d9403.hot-update.js",
|
||||
"/chunks/oasis/platba.79f86d9923a5b3d8f77b.hot-update.js": "/chunks/oasis/platba.79f86d9923a5b3d8f77b.hot-update.js",
|
||||
"/chunks/oasis/platba.960030e55311860adad8.hot-update.js": "/chunks/oasis/platba.960030e55311860adad8.hot-update.js",
|
||||
"/js/main.b089e299b2beda8c4435.hot-update.js": "/js/main.b089e299b2beda8c4435.hot-update.js",
|
||||
"/chunks/oasis/platba.0975d1f12bf7fcd32825.hot-update.js": "/chunks/oasis/platba.0975d1f12bf7fcd32825.hot-update.js",
|
||||
"/chunks/oasis/platba.b1513de9a1f782c9fcf9.hot-update.js": "/chunks/oasis/platba.b1513de9a1f782c9fcf9.hot-update.js",
|
||||
"/chunks/oasis/platba.6101685137fe4c159b2f.hot-update.js": "/chunks/oasis/platba.6101685137fe4c159b2f.hot-update.js",
|
||||
"/js/main.4e81e4ea624ef84cb166.hot-update.js": "/js/main.4e81e4ea624ef84cb166.hot-update.js",
|
||||
"/chunks/oasis/platba.4e81e4ea624ef84cb166.hot-update.js": "/chunks/oasis/platba.4e81e4ea624ef84cb166.hot-update.js",
|
||||
"/js/main.9d41d45200d1397f7d1f.hot-update.js": "/js/main.9d41d45200d1397f7d1f.hot-update.js",
|
||||
"/chunks/oasis/platba.9d41d45200d1397f7d1f.hot-update.js": "/chunks/oasis/platba.9d41d45200d1397f7d1f.hot-update.js",
|
||||
"/chunks/oasis/platba.7295a36fd456e216edb5.hot-update.js": "/chunks/oasis/platba.7295a36fd456e216edb5.hot-update.js",
|
||||
"/chunks/oasis/platba.42cfd9642e72806e1d73.hot-update.js": "/chunks/oasis/platba.42cfd9642e72806e1d73.hot-update.js",
|
||||
"/chunks/oasis/platba.eb85a1eef45f79ca4c3e.hot-update.js": "/chunks/oasis/platba.eb85a1eef45f79ca4c3e.hot-update.js",
|
||||
"/chunks/admin-account.9b07cca19b41d1b68e00.hot-update.js": "/chunks/admin-account.9b07cca19b41d1b68e00.hot-update.js",
|
||||
"/chunks/app-setup.9b07cca19b41d1b68e00.hot-update.js": "/chunks/app-setup.9b07cca19b41d1b68e00.hot-update.js",
|
||||
"/chunks/billings-detail.9b07cca19b41d1b68e00.hot-update.js": "/chunks/billings-detail.9b07cca19b41d1b68e00.hot-update.js",
|
||||
"/chunks/database.9b07cca19b41d1b68e00.hot-update.js": "/chunks/database.9b07cca19b41d1b68e00.hot-update.js",
|
||||
"/chunks/environment-setup.9b07cca19b41d1b68e00.hot-update.js": "/chunks/environment-setup.9b07cca19b41d1b68e00.hot-update.js",
|
||||
"/chunks/installation-disclaimer.9b07cca19b41d1b68e00.hot-update.js": "/chunks/installation-disclaimer.9b07cca19b41d1b68e00.hot-update.js",
|
||||
"/chunks/purchase-code.9b07cca19b41d1b68e00.hot-update.js": "/chunks/purchase-code.9b07cca19b41d1b68e00.hot-update.js",
|
||||
"/chunks/stripe-credentials.9b07cca19b41d1b68e00.hot-update.js": "/chunks/stripe-credentials.9b07cca19b41d1b68e00.hot-update.js",
|
||||
"/chunks/subscription-plans.9b07cca19b41d1b68e00.hot-update.js": "/chunks/subscription-plans.9b07cca19b41d1b68e00.hot-update.js",
|
||||
"/chunks/subscription-service.9b07cca19b41d1b68e00.hot-update.js": "/chunks/subscription-service.9b07cca19b41d1b68e00.hot-update.js",
|
||||
"/chunks/oasis/platba.cba2f2943cb866639e8c.hot-update.js": "/chunks/oasis/platba.cba2f2943cb866639e8c.hot-update.js"
|
||||
}
|
||||
|
||||
@@ -0,0 +1,676 @@
|
||||
<template>
|
||||
<div id="single-page">
|
||||
<div v-show="! isLoading" id="page-content" class="large-width center-page">
|
||||
|
||||
<div class="content-page">
|
||||
<div class="plan-title">
|
||||
<credit-card-icon size="42" class="title-icon text-theme" />
|
||||
<h1>{{ $t('page_upgrade_account.title') }}</h1>
|
||||
<h2>{{ $t('page_upgrade_account.desription') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="order">
|
||||
|
||||
<div class="steps">
|
||||
<div class="payment-card">
|
||||
<FormLabel>{{ $t('page_upgrade_account.section_card') }}</FormLabel>
|
||||
|
||||
<!-- Pay by new credit card -->
|
||||
<div class="register-card" v-show="! defaultPaymentMethod || payByNewCard">
|
||||
<InfoBox v-if="config.isDemo">
|
||||
<p>For test your payment please use <b>4242 4242 4242 4242</b> or <b>5555 5555 5555 4444</b> as a card number, <b>11/22</b>
|
||||
as the expiration date and <b>123</b> as CVC number and ZIP <b>12345</b>.</p>
|
||||
</InfoBox>
|
||||
|
||||
<div ref="stripeCard" class="stripe-card" :class="{'is-error': isError }"></div>
|
||||
|
||||
<div class="card-error-message" v-if="isError">
|
||||
<span>{{ errorMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--User registered payment card-->
|
||||
<div class="registered-cards" v-if="defaultPaymentMethod && ! payByNewCard">
|
||||
|
||||
<div class="credit-card" :class="{'is-error': isError}">
|
||||
<div class="card-number">
|
||||
<img class="credit-card-icon"
|
||||
:src="$getCreditCardBrand(defaultPaymentMethod.data.attributes.brand)"
|
||||
:alt="defaultPaymentMethod.data.attributes.brand">
|
||||
<div class="credit-card-numbers">
|
||||
•••• {{ defaultPaymentMethod.data.attributes.last4 }}
|
||||
</div>
|
||||
<ColorLabel color="purple">{{ $t('global.default') }}</ColorLabel>
|
||||
</div>
|
||||
<div class="expiration-date">
|
||||
<span>{{ defaultPaymentMethod.data.attributes.exp_month }} / {{ defaultPaymentMethod.data.attributes.exp_year }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Change payment-->
|
||||
<div class="change-payment" v-if="! isError">
|
||||
<span>
|
||||
{{ $t('page_upgrade_account.change_payment.you_can') }}
|
||||
</span>
|
||||
|
||||
<router-link v-if="PaymentMethods.data.length > 0" :to="{name: 'PaymentMethods'}">
|
||||
{{ $t('page_upgrade_account.change_payment.change_payment') }}
|
||||
</router-link>
|
||||
|
||||
<span v-if="PaymentMethods.data.length > 0">
|
||||
{{ $t('global.or') }}
|
||||
</span>
|
||||
|
||||
<a @click="payByNewCardForm">
|
||||
{{ $t('page_upgrade_account.change_payment.pay_by_new_card') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!--Card error-->
|
||||
<div class="card-error-message" v-if="isError">
|
||||
<span>{{ errorMessage }}</span>
|
||||
<span @click="payByNewCardForm" class="link">
|
||||
{{ $t('page_upgrade_account.errors.pay_by_another_card') }}
|
||||
</span>
|
||||
<span>
|
||||
{{ $t('global.or') }}
|
||||
</span>
|
||||
<router-link :to="{name: 'PaymentMethods'}" class="link">
|
||||
{{ $t('page_upgrade_account.change_payment.change_payment') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary">
|
||||
<FormLabel>
|
||||
{{ $t('page_upgrade_account.section_summary') }}
|
||||
</FormLabel>
|
||||
|
||||
<div class="summary-list" :class="{'is-error': isError}" v-if="requestedPlan">
|
||||
<div class="row">
|
||||
<div class="cell">
|
||||
<b>{{ requestedPlan.data.relationships.plan.data.attributes.name }}</b>
|
||||
<small>{{ $t('page_upgrade_account.summary.period') }}</small>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<b>{{ requestedPlan.data.relationships.plan.data.attributes.price }}</b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="taxRates">
|
||||
<div class="cell">
|
||||
<b>{{ $t('page_upgrade_account.summary.vat') }} - ({{ taxRates.jurisdiction }} {{ taxRates.percentage }}%)</b>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<b>{{ taxRates.plan_price_formatted }}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Show total when tax rates is not specified-->
|
||||
<div class="row" v-if="! taxRates">
|
||||
<div class="cell">
|
||||
<b>{{ $t('global.total') }}</b>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<b>{{ requestedPlan.data.relationships.plan.data.attributes.price }}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Show total when is tax rates-->
|
||||
<div class="row" v-if="taxRates">
|
||||
<div class="cell">
|
||||
<b>{{ $t('page_upgrade_account.summary.total_with_vat') }}</b>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<b>{{ taxRates.plan_price_formatted }}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ButtonBase :disabled="isSubmitted" :loading="isSubmitted" @click.native="submitOrder"
|
||||
type="submit" button-style="theme-solid" class="next-submit">
|
||||
{{ $t('page_upgrade_account.summary.submit_button') }}
|
||||
</ButtonBase>
|
||||
<p class="error-message" v-if="isError">{{ errorMessage }}</p>
|
||||
<small class="disclaimer">
|
||||
{{ $t('page_upgrade_account.summary.submit_disclaimer', {app: config.app_name}) }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loader" v-if="isLoading">
|
||||
<Spinner></Spinner>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import PlanPricingTables from '@/components/Others/PlanPricingTables'
|
||||
import SelectInput from '@/components/Others/Forms/SelectInput'
|
||||
import FormLabel from '@/components/Others/Forms/FormLabel'
|
||||
import MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import InfoBox from '@/components/Others/Forms/InfoBox'
|
||||
import ColorLabel from '@/components/Others/ColorLabel'
|
||||
import PageHeader from '@/components/Others/PageHeader'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
import {CreditCardIcon} from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from "@/bus"
|
||||
import axios from 'axios'
|
||||
|
||||
let [stripe, card] = [undefined, undefined];
|
||||
|
||||
export default {
|
||||
name: 'SubscriptionRequestPayment',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
PlanPricingTables,
|
||||
CreditCardIcon,
|
||||
MobileHeader,
|
||||
SelectInput,
|
||||
ButtonBase,
|
||||
PageHeader,
|
||||
ColorLabel,
|
||||
FormLabel,
|
||||
required,
|
||||
Spinner,
|
||||
InfoBox,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config', 'countries']),
|
||||
taxRates() {
|
||||
return this.requestedPlan.data.relationships.plan.data.attributes.tax_rates.find(taxRate => {
|
||||
return taxRate.jurisdiction === this.requestedPlan.data.relationships.user.data.attributes.country
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
complete: false,
|
||||
stripeOptions: {
|
||||
hidePostalCode: false
|
||||
},
|
||||
isLoading: true,
|
||||
isSubmitted: false,
|
||||
PaymentMethods: undefined,
|
||||
defaultPaymentMethod: undefined,
|
||||
|
||||
errorMessage: undefined,
|
||||
isError: false,
|
||||
|
||||
payByNewCard: false,
|
||||
|
||||
clientSecret: undefined,
|
||||
|
||||
requestedPlan: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initStripe() {
|
||||
stripe = Stripe(this.config.stripe_public_key)
|
||||
|
||||
let elements = stripe.elements();
|
||||
|
||||
card = elements.create('card');
|
||||
|
||||
card.mount(this.$refs.stripeCard);
|
||||
},
|
||||
payByNewCardForm() {
|
||||
this.payByNewCard = true
|
||||
this.isError = false
|
||||
},
|
||||
successOrder() {
|
||||
// Update user data
|
||||
this.$store.dispatch('getAppData')
|
||||
|
||||
// Show toaster
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('toaster.account_upgraded'),
|
||||
})
|
||||
|
||||
// Go to User page
|
||||
this.$router.push({name: 'Subscription'})
|
||||
},
|
||||
errorOrder(error) {
|
||||
|
||||
// Redirect user to confirmation payment page
|
||||
if (error.response.status === 402) {
|
||||
window.location.href = error.response.data.message;
|
||||
}
|
||||
|
||||
// Show user error message
|
||||
if (error.response.status === 400) {
|
||||
this.isError = true
|
||||
this.errorMessage = error.response.data.message
|
||||
}
|
||||
|
||||
// Show server error
|
||||
if (error.response.status === 500) {
|
||||
this.isError = true
|
||||
this.errorMessage = error.response.data.message
|
||||
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
})
|
||||
}
|
||||
},
|
||||
async submitOrder() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.order.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
// Remove error
|
||||
this.isError = false
|
||||
|
||||
// Start loading
|
||||
this.isSubmitted = true
|
||||
|
||||
// If user don't have credit card, register new
|
||||
if (!this.defaultPaymentMethod || this.payByNewCard) {
|
||||
|
||||
const {setupIntent, error} = await stripe.confirmCardSetup(this.clientSecret, {
|
||||
payment_method: {
|
||||
card: card,
|
||||
}
|
||||
})
|
||||
|
||||
if (error) {
|
||||
|
||||
// Set error on
|
||||
this.isError = true
|
||||
|
||||
// End button spinner
|
||||
this.isSubmitted = false
|
||||
|
||||
// Show error message
|
||||
this.errorMessage = error.message
|
||||
|
||||
} else {
|
||||
|
||||
axios
|
||||
.post('/api/subscription/upgrade', {
|
||||
billing: this.billing,
|
||||
plan: this.requestedPlan,
|
||||
payment: {
|
||||
type: 'stripe',
|
||||
meta: {
|
||||
pm: setupIntent.payment_method,
|
||||
}
|
||||
}
|
||||
})
|
||||
.then(() => this.successOrder())
|
||||
.catch((error) => this.errorOrder(error))
|
||||
.finally(() => {
|
||||
this.isSubmitted = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// if user has credit card
|
||||
if (this.defaultPaymentMethod && !this.payByNewCard) {
|
||||
|
||||
axios
|
||||
.post('/api/subscription/upgrade', {
|
||||
billing: this.billing,
|
||||
plan: this.requestedPlan,
|
||||
payment: {
|
||||
type: 'stripe',
|
||||
}
|
||||
})
|
||||
.then(() => this.successOrder())
|
||||
.catch((error) => this.errorOrder(error))
|
||||
.finally(() => {
|
||||
this.isSubmitted = false
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
this.initStripe()
|
||||
},
|
||||
created() {
|
||||
|
||||
// Get setup intent for stripe
|
||||
axios.get('/api/subscription/setup-intent')
|
||||
.then(response => {
|
||||
this.clientSecret = response.data.client_secret
|
||||
})
|
||||
.catch(() => this.$isSomethingWrong())
|
||||
|
||||
axios.get(`/api/oasis/subscription-request/${this.$route.params.id}`)
|
||||
.then(response => {
|
||||
this.requestedPlan = response.data
|
||||
})
|
||||
.catch(() => {
|
||||
this.$isSomethingWrong()
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vuefilemanager/_variables';
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
@import '@assets/vuefilemanager/_forms';
|
||||
|
||||
.change-payment {
|
||||
padding-top: 10px;
|
||||
|
||||
span {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
span, a {
|
||||
color: $text-muted;
|
||||
@include font-size(14);
|
||||
}
|
||||
}
|
||||
|
||||
.card-error-message {
|
||||
padding-top: 10px;
|
||||
|
||||
span, a {
|
||||
@include font-size(14);
|
||||
font-weight: 600;
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
.link, a {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.registered-cards {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
margin-bottom: 55px;
|
||||
}
|
||||
|
||||
.credit-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
background: $light_background;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
|
||||
&.is-error {
|
||||
box-shadow: 0 0 7px rgba($danger, 0.3);
|
||||
border: 2px solid $danger;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-number {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.credit-card-numbers {
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.credit-card-icon {
|
||||
vertical-align: middle;
|
||||
max-height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.stripe-card {
|
||||
box-sizing: border-box;
|
||||
padding: 13px 20px;
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
|
||||
box-shadow: 0 1px 3px 0 #e6ebf1;
|
||||
-webkit-transition: box-shadow 150ms ease;
|
||||
transition: box-shadow 150ms ease;
|
||||
|
||||
&.is-error {
|
||||
box-shadow: 0 0 7px rgba($danger, 0.3);
|
||||
border: 2px solid $danger;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&.StripeElement--focus {
|
||||
box-shadow: 0 1px 3px 0 #cfd7df;
|
||||
}
|
||||
|
||||
&.StripeElement--invalid {
|
||||
border-color: #fa755a;
|
||||
}
|
||||
|
||||
&.StripeElement--webkit-autofill {
|
||||
background-color: #fefde5 !important;
|
||||
}
|
||||
|
||||
iframe .InputContainer .InputElement {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-list {
|
||||
box-shadow: 0 7px 20px 5px hsla(220, 36%, 16%, 0.06);
|
||||
border-radius: 8px;
|
||||
position: sticky;
|
||||
padding: 25px;
|
||||
top: 30px;
|
||||
|
||||
&.is-error {
|
||||
border: 2px solid $danger;
|
||||
box-shadow: 0 7px 20px 5px rgba($danger, 0.06);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.next-submit {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
@include font-size(12);
|
||||
line-height: 1.6;
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px 0;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-top: 1px solid $light_mode_border;
|
||||
padding-bottom: 0;
|
||||
|
||||
b {
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
b {
|
||||
display: block;
|
||||
@include font-size(18);
|
||||
}
|
||||
|
||||
small {
|
||||
color: $text-muted;
|
||||
@include font-size(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order {
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.steps {
|
||||
flex: 0 0 65%;
|
||||
padding-right: 30px;
|
||||
|
||||
.form {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.summary {
|
||||
flex: 0 0 34%;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-title {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 80px;
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include font-size(38);
|
||||
font-weight: 800;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include font-size(20);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.plan-title {
|
||||
|
||||
h1 {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.credit-card {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
span, .credit-card-numbers {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
|
||||
.change-payment {
|
||||
|
||||
span {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-list {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.disclaimer {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
|
||||
.row {
|
||||
|
||||
&:last-of-type {
|
||||
border-top: 1px solid $dark_mode_border_color;
|
||||
|
||||
b {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
b {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
small {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stripe-card {
|
||||
border: 1px solid transparent;
|
||||
//background-color: $dark_mode_foreground;
|
||||
box-shadow: none;
|
||||
|
||||
&.StripeElement--webkit-autofill {
|
||||
background-color: $dark_mode_foreground !important;
|
||||
}
|
||||
|
||||
&.StripeElement--focus {
|
||||
box-shadow: none;
|
||||
border-color: $theme;
|
||||
box-shadow: 0 1px 5px rgba($theme, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.order {
|
||||
display: block;
|
||||
|
||||
.steps {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Vendored
+10
@@ -9,6 +9,16 @@ import UserProfileMobileMenu from './views/Mobile/UserProfileMobileMenu'
|
||||
Vue.use(Router)
|
||||
|
||||
const routesOasis = [
|
||||
{
|
||||
name: 'SubscriptionRequestPayment',
|
||||
path: '/platba/:id',
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "chunks/oasis/platba" */ './Oasis/Pages/SubscriptionRequestPayment'),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
title: 'Platba'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Admin',
|
||||
path: '/admin',
|
||||
|
||||
+1
-1
@@ -73,7 +73,7 @@
|
||||
animation: spinner 5s linear infinite;
|
||||
|
||||
circle, path {
|
||||
stroke: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user