v1.7 beta.4

app/Http/Resources/InvoiceResource.php

@@ -16,32 +16,49 @@ class InvoiceResource extends JsonResource
     public function toArray($request)
     {
         $user = User::where('stripe_id', $this->customer)->first();
-        $subscription = $this->subscriptions()[0];
+        $invoice_items = [];
+        $invoice_subscriptions = [];
+
+        // Format bag
+        foreach ($this->invoiceItems() as $item) {
+            array_push($invoice_items, [
+                'amount'      => $item->total(),
+                'description' => $item->description,
+                'currency'    => $item->currency,
+                'type'        => $item->type,
+            ]);
+        }
+
+        // Format bag
+        foreach ($this->subscriptions() as $item) {
+            array_push($invoice_subscriptions, [
+                'amount'      => $item->total(),
+                'description' => $item->description,
+                'currency'    => $item->currency,
+                'type'        => $item->type,
+            ]);
+        }
 
         return [
             'data' => [
                 'id'         => $this->id,
                 'type'       => 'invoices',
                 'attributes' => [
-                    'customer'             => $this->customer,
+                    'customer'              => $this->customer,
-                    'total'                => $this->total(),
+                    'total'                 => $this->total(),
-                    'currency'             => $this->currency,
+                    'currency'              => $this->currency,
-                    'created_at_formatted' => format_date($this->date(), '%d. %B. %Y'),
+                    'created_at_formatted'  => format_date($this->date(), '%d. %B. %Y'),
-                    'created_at'           => $this->created,
+                    'created_at'            => $this->created,
-                    'order'                => $this->number,
+                    'order'                 => $this->number,
-                    'user_id'              => $user ? $user->id : null,
+                    'user_id'               => $user ? $user->id : null,
-                    'client'               => [
+                    'client'                => [
                         'billing_address'      => $this->customer_address,
                         'billing_name'         => $this->customer_name,
                         'billing_phone_number' => $this->customer_phone,
                     ],
-                    'bag'                  => [
+                    'seller'                => null,
-                        'amount'      => $subscription->amount,
+                    'invoice_items'         => $invoice_items,
-                        'currency'    => $subscription->currency,
+                    'invoice_subscriptions' => $invoice_subscriptions,
-                        'type'        => $subscription->type,
-                        'description' => $subscription->description,
-                    ],
-                    'seller'               => null,
                 ]
             ],
             $this->mergeWhen($user, [

app/Services/StripeService.php

@@ -347,7 +347,7 @@ class StripeService
      */
     public function getUserInvoice($customer, $id)
     {
-        $user = User::where('stripe_id', $customer)->first();
+        $user = User::where('stripe_id', $customer)->firstOrFail();
 
         return $user->findInvoice($id);
     }

public/mix-manifest.json

@@ -1,4 +1,77 @@
 {
     "/js/main.js": "/js/main.js",
-    "/css/app.css": "/css/app.css"
+    "/css/app.css": "/css/app.css",
+    "/js/main.106812bee98d73136ccb.hot-update.js": "/js/main.106812bee98d73136ccb.hot-update.js",
+    "/js/main.8621138aee2c0a61d67f.hot-update.js": "/js/main.8621138aee2c0a61d67f.hot-update.js",
+    "/js/main.dd6c335d96ee9985d68f.hot-update.js": "/js/main.dd6c335d96ee9985d68f.hot-update.js",
+    "/js/main.c8d6fde86a6639aa371a.hot-update.js": "/js/main.c8d6fde86a6639aa371a.hot-update.js",
+    "/js/main.5562e3d619f26be41add.hot-update.js": "/js/main.5562e3d619f26be41add.hot-update.js",
+    "/js/main.77742cf2b8f4e0580009.hot-update.js": "/js/main.77742cf2b8f4e0580009.hot-update.js",
+    "/js/main.70ba5e77c80abf731fd2.hot-update.js": "/js/main.70ba5e77c80abf731fd2.hot-update.js",
+    "/js/main.b747d3ffd5a8cca43ae4.hot-update.js": "/js/main.b747d3ffd5a8cca43ae4.hot-update.js",
+    "/js/main.4e1cccd4f2e5efc5a389.hot-update.js": "/js/main.4e1cccd4f2e5efc5a389.hot-update.js",
+    "/js/main.26c4cf4b90a18022d7a1.hot-update.js": "/js/main.26c4cf4b90a18022d7a1.hot-update.js",
+    "/js/main.a7937ff14c4c1fa3ef67.hot-update.js": "/js/main.a7937ff14c4c1fa3ef67.hot-update.js",
+    "/js/main.3cad9e8d624e2a484cdd.hot-update.js": "/js/main.3cad9e8d624e2a484cdd.hot-update.js",
+    "/js/main.f41928cb829d91d2c566.hot-update.js": "/js/main.f41928cb829d91d2c566.hot-update.js",
+    "/js/main.d8be6422ce8964879893.hot-update.js": "/js/main.d8be6422ce8964879893.hot-update.js",
+    "/js/main.a50b5cea82cf38085ff7.hot-update.js": "/js/main.a50b5cea82cf38085ff7.hot-update.js",
+    "/js/main.96aeefeacdf41380d1a7.hot-update.js": "/js/main.96aeefeacdf41380d1a7.hot-update.js",
+    "/js/main.216d640d9fe64a6de498.hot-update.js": "/js/main.216d640d9fe64a6de498.hot-update.js",
+    "/js/main.830b61785301ca4b6b0b.hot-update.js": "/js/main.830b61785301ca4b6b0b.hot-update.js",
+    "/js/main.7084be65c8385ac02a1d.hot-update.js": "/js/main.7084be65c8385ac02a1d.hot-update.js",
+    "/js/main.da3f4fa9c6f4feeecd94.hot-update.js": "/js/main.da3f4fa9c6f4feeecd94.hot-update.js",
+    "/js/main.92de8336d78d28cbdc7e.hot-update.js": "/js/main.92de8336d78d28cbdc7e.hot-update.js",
+    "/js/main.74223da74f4f33793477.hot-update.js": "/js/main.74223da74f4f33793477.hot-update.js",
+    "/js/main.a8b0b591686e15342fad.hot-update.js": "/js/main.a8b0b591686e15342fad.hot-update.js",
+    "/js/main.aa92d5adb1d7c1171547.hot-update.js": "/js/main.aa92d5adb1d7c1171547.hot-update.js",
+    "/js/main.e4f75bd33ed7e3280082.hot-update.js": "/js/main.e4f75bd33ed7e3280082.hot-update.js",
+    "/js/main.cde4842646bab538d900.hot-update.js": "/js/main.cde4842646bab538d900.hot-update.js",
+    "/js/main.1817712990191da4df15.hot-update.js": "/js/main.1817712990191da4df15.hot-update.js",
+    "/js/main.c03008dba2f79ce1186f.hot-update.js": "/js/main.c03008dba2f79ce1186f.hot-update.js",
+    "/js/main.e4b0c45602e7e1093b81.hot-update.js": "/js/main.e4b0c45602e7e1093b81.hot-update.js",
+    "/js/main.915ed88076aab030fdd5.hot-update.js": "/js/main.915ed88076aab030fdd5.hot-update.js",
+    "/js/main.06a4f68b906dcf488546.hot-update.js": "/js/main.06a4f68b906dcf488546.hot-update.js",
+    "/js/main.36f2e6e3a1f3d7845c3a.hot-update.js": "/js/main.36f2e6e3a1f3d7845c3a.hot-update.js",
+    "/js/main.b4bd52a3c21ffb89e2f5.hot-update.js": "/js/main.b4bd52a3c21ffb89e2f5.hot-update.js",
+    "/js/main.c7face95076eb4b7ce34.hot-update.js": "/js/main.c7face95076eb4b7ce34.hot-update.js",
+    "/js/main.5d77a5833fb2420e0a4c.hot-update.js": "/js/main.5d77a5833fb2420e0a4c.hot-update.js",
+    "/js/main.f4b8bc1f12e5c65ae307.hot-update.js": "/js/main.f4b8bc1f12e5c65ae307.hot-update.js",
+    "/js/main.3738f1a2b60b8567aff4.hot-update.js": "/js/main.3738f1a2b60b8567aff4.hot-update.js",
+    "/js/main.b0b53080a4fcd75a6f46.hot-update.js": "/js/main.b0b53080a4fcd75a6f46.hot-update.js",
+    "/js/main.ece949b692a443be4707.hot-update.js": "/js/main.ece949b692a443be4707.hot-update.js",
+    "/js/main.f15430b33a9487011b08.hot-update.js": "/js/main.f15430b33a9487011b08.hot-update.js",
+    "/js/main.4f980f3ed0819acd20da.hot-update.js": "/js/main.4f980f3ed0819acd20da.hot-update.js",
+    "/js/main.bb4445f6b9aca9569559.hot-update.js": "/js/main.bb4445f6b9aca9569559.hot-update.js",
+    "/js/main.ac4f05e4656406d76c9f.hot-update.js": "/js/main.ac4f05e4656406d76c9f.hot-update.js",
+    "/js/main.c661c0acfa0152ccab3d.hot-update.js": "/js/main.c661c0acfa0152ccab3d.hot-update.js",
+    "/js/main.4b4b4c69b53d5b21d355.hot-update.js": "/js/main.4b4b4c69b53d5b21d355.hot-update.js",
+    "/js/main.6b8abf41e791569d451a.hot-update.js": "/js/main.6b8abf41e791569d451a.hot-update.js",
+    "/js/main.10008c45dea46c1723df.hot-update.js": "/js/main.10008c45dea46c1723df.hot-update.js",
+    "/js/main.1a6cd71b8cb6ce854d97.hot-update.js": "/js/main.1a6cd71b8cb6ce854d97.hot-update.js",
+    "/js/main.62307adf16c2ec7c2cb4.hot-update.js": "/js/main.62307adf16c2ec7c2cb4.hot-update.js",
+    "/js/main.893170ee8ec98367019d.hot-update.js": "/js/main.893170ee8ec98367019d.hot-update.js",
+    "/js/main.f2f96922126908ddf594.hot-update.js": "/js/main.f2f96922126908ddf594.hot-update.js",
+    "/js/main.1fd05d9e7702b1cc7274.hot-update.js": "/js/main.1fd05d9e7702b1cc7274.hot-update.js",
+    "/js/main.c02979ca7ffc425e3ac8.hot-update.js": "/js/main.c02979ca7ffc425e3ac8.hot-update.js",
+    "/js/main.ae8714cf20dddc311b79.hot-update.js": "/js/main.ae8714cf20dddc311b79.hot-update.js",
+    "/js/main.f005250574e90c2da04d.hot-update.js": "/js/main.f005250574e90c2da04d.hot-update.js",
+    "/js/main.785aa60110fd41ce4459.hot-update.js": "/js/main.785aa60110fd41ce4459.hot-update.js",
+    "/js/main.99b8f7feea76d5edb1f4.hot-update.js": "/js/main.99b8f7feea76d5edb1f4.hot-update.js",
+    "/js/main.5df7e7541a7baaabb55e.hot-update.js": "/js/main.5df7e7541a7baaabb55e.hot-update.js",
+    "/js/main.64fe0a65056db9bf85f5.hot-update.js": "/js/main.64fe0a65056db9bf85f5.hot-update.js",
+    "/js/main.2b89905a5bf8f751ce09.hot-update.js": "/js/main.2b89905a5bf8f751ce09.hot-update.js",
+    "/js/main.ebf519d4ac5aadfe1b4d.hot-update.js": "/js/main.ebf519d4ac5aadfe1b4d.hot-update.js",
+    "/js/main.1a8cf326c27f46c26025.hot-update.js": "/js/main.1a8cf326c27f46c26025.hot-update.js",
+    "/js/main.9aba9b93afec2adefb51.hot-update.js": "/js/main.9aba9b93afec2adefb51.hot-update.js",
+    "/js/main.09ce036c9c3fabb9b1b3.hot-update.js": "/js/main.09ce036c9c3fabb9b1b3.hot-update.js",
+    "/js/main.5695381f6fc0dfad104b.hot-update.js": "/js/main.5695381f6fc0dfad104b.hot-update.js",
+    "/js/main.3f7dc9dd752a29f357c6.hot-update.js": "/js/main.3f7dc9dd752a29f357c6.hot-update.js",
+    "/js/main.39b5d5a0ecd3436a3c28.hot-update.js": "/js/main.39b5d5a0ecd3436a3c28.hot-update.js",
+    "/js/main.303297cf11d6180aeb8c.hot-update.js": "/js/main.303297cf11d6180aeb8c.hot-update.js",
+    "/js/main.6f40595767f71b28215d.hot-update.js": "/js/main.6f40595767f71b28215d.hot-update.js",
+    "/js/main.eda0bc6702d559c59bfb.hot-update.js": "/js/main.eda0bc6702d559c59bfb.hot-update.js",
+    "/js/main.c906a90c3a7db20c1aff.hot-update.js": "/js/main.c906a90c3a7db20c1aff.hot-update.js",
+    "/js/main.dece824e5460a118f902.hot-update.js": "/js/main.dece824e5460a118f902.hot-update.js",
+    "/js/main.4d66f2c0cb2ef879ee60.hot-update.js": "/js/main.4d66f2c0cb2ef879ee60.hot-update.js"
 }

resources/js/i18n/lang/en.json

@@ -703,9 +703,12 @@
 	},
 	"user_payments": {
 		"add_card": "Add Payment Card",
+		"store_card": "Store Payment Card",
 		"delete_card": "Delete card",
 		"empty": "You don't have any payment cards yet.",
 		"set_as_default": "Set as default card",
+		"card_field_title": "Credit Card",
+		"field_loading": "Loading card field...",
 		"title": "Payment Methods"
 	},
 	"user_settings": {

resources/js/views/Admin/Users/UserTabs/UserInvoices.vue

@@ -15,8 +15,8 @@
                             </span>
                         </td>
                         <td>
-                            <span class="cell-item">
+                            <span class="cell-item" v-if="row.data.attributes.invoice_subscriptions[0].description">
-                                {{ row.data.attributes.bag.description }}
+                                {{ row.data.attributes.invoice_subscriptions[0].description }}
                             </span>
                         </td>
                         <td>

resources/js/views/User/CreatePaymentMethod.vue

@@ -11,10 +11,16 @@
                             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="block-wrapper">
-
+                        <label>{{ $t('user_payments.card_field_title') }}:</label>
-                    <div class="card-error-message" v-if="isError">
+                        <div ref="stripeCard" class="stripe-card" :class="{'is-error': isError }">
-                        <span>{{ errorMessage }}</span>
+                            <span class="loading">
+                                {{ $t('user_payments.field_loading') }}
+                            </span>
+                        </div>
+                        <div class="card-error-message" v-if="isError">
+                            <span>{{ errorMessage }}</span>
+                        </div>
                     </div>
                 </div>
 
@@ -30,8 +36,8 @@
                     </div>
                 </div>
 
-                <ButtonBase @click.native="registerCard" :disabled="isSubmitted" :loading="isSubmitted" button-style="theme" type="submit">
+                <ButtonBase @click.native="registerCard" :loading="isSubmitted" :button-style="isDisabledSubmit ? 'secondary' : 'theme'" type="submit">
-                    {{ $t('user_payments.add_card') }}
+                    {{ $t('user_payments.store_card') }}
                 </ButtonBase>
             </div>
         </PageTabGroup>
@@ -74,13 +80,18 @@
                 },
 
                 isSubmitted: false,
+                isDisabledSubmit: true,
+
                 defaultPaymentMethod: true,
-                clientSecret: undefined
+                clientSecret: undefined,
             }
         },
         methods: {
             async registerCard() {
 
+                // Prevent empty submit
+                if (! stripe && !card && ! this.$refs.stripeCard.classList.contains('StripeElement')) return
+
                 // Start loading
                 this.isSubmitted = true
 
@@ -91,6 +102,7 @@
                 })
 
                 if (setupIntent) {
+
                     axios
                         .post('/api/user/payment-cards', {
                             token: setupIntent.payment_method,
@@ -128,7 +140,6 @@
 
                     // Show error message
                     this.errorMessage = error.message
-
                 }
             },
             initStripe() {
@@ -139,6 +150,8 @@
                 card = elements.create('card');
 
                 card.mount(this.$refs.stripeCard);
+
+                this.isDisabledSubmit = false
             },
         },
         mounted() {
@@ -179,6 +192,17 @@
         -webkit-transition: box-shadow 150ms ease;
         transition: box-shadow 150ms ease;
 
+
+        &:not(.StripeElement) {
+            background: $light_background;
+            padding: 14px 20px;
+
+            .loading {
+                @include font-size(14);
+                font-weight: 700;
+            }
+        }
+
         &.is-error {
             box-shadow: 0 0 7px rgba($danger, 0.3);
             border: 2px solid $danger;

resources/js/views/User/Invoices.vue

@@ -16,8 +16,8 @@
                             </span>
                         </td>
                         <td>
-                            <span class="cell-item">
+                            <span class="cell-item" v-if="row.data.attributes.invoice_subscriptions[0].description">
-                                {{ row.data.attributes.bag.description }}
+                                {{ row.data.attributes.invoice_subscriptions[0].description }}
                             </span>
                         </td>
                         <td>

resources/views/vuefilemanager/invoice.blade.php

@@ -2,11 +2,21 @@
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
     <meta charset="utf-8">
-    <title>{{ config('vuefilemanager.app_name') }}</title>
+    <title>@lang('vuefilemanager.invoice_title')</title>
 
     <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;900&display=swap"
           rel="stylesheet">
-    <link href="{{ env('APP_ENV') !== 'local' ? asset('css/invoice.css') : mix('css/invoice.css') }}?v={{ get_version() }}" rel="stylesheet">
+    <link href="{{ env('APP_ENV') !== 'local' ? asset('css/invoice.css') : mix('css/invoice.css') }}?v={{ get_version() }}"
+          rel="stylesheet">
+
+    <style>
+        .table td {
+            padding: 8px;
+            line-height: 20px;
+            text-align: left;
+            vertical-align: top;
+        }
+    </style>
 </head>
 <body>
 <div id="toolbar-wrapper">
@@ -165,7 +175,7 @@
         </div>
     </div>
     <div class="invoice-order">
-        <table class="table">
+        <table class="table" width="100%" class="table" border="0">
             <thead class="table-header">
             <tr>
                 <td>@lang('vuefilemanager.col_description')</td>
@@ -174,11 +184,21 @@
             </tr>
             </thead>
             <tbody class="table-body">
-                <tr>
+                @foreach($invoice->invoiceItems() as $item)
-                    <td>{{ $invoice->subscriptions()[0]->description }}</td>
+                    <tr>
-                    <td>{{ $invoice->subscriptions()[0]->type }}</td>
+                        <td colspan="2">{{ $item->description }}</td>
-                    <td>{{ \Laravel\Cashier\Cashier::formatAmount($invoice->subscriptions()[0]->amount) }}</td>
+                        <td>{{ $item->total() }}</td>
-                </tr>
+                    </tr>
+                @endforeach
+
+                @foreach($invoice->subscriptions() as $subscription)
+                    <tr>
+                        <td>@lang('vuefilemanager.subscription') ({{ $subscription->quantity }})</td>
+                        <td>{{ $subscription->startDateAsCarbon()->formatLocalized('%d. %B. %Y') }} -
+                            {{ $subscription->endDateAsCarbon()->formatLocalized('%d. %B. %Y') }}</td>
+                        <td>{{ $subscription->total() }}</td>
+                    </tr>
+                @endforeach
             </tbody>
         </table>
     </div>