Qty

app/Http/Livewire/BillingPortalPurchase.php

@@ -123,6 +123,13 @@ class BillingPortalPurchase extends Component
      */
     public $coupon;
 
+    /**
+     * Quantity for seats
+     *
+     * @var int
+     */
+    public $quantity = 1;
+
     /**
      * Handle user authentication
      *
@@ -236,9 +243,11 @@ class BillingPortalPurchase extends Component
                 'client_contact_id' => $this->contact->hashed_id,
             ]],
             'user_input_promo_code' => $this->coupon,
-            'quantity' => 1, // Option to increase quantity
+            'quantity' => $this->quantity,
         ];
 
+        dd($data);
+
         $this->invoice = $this->billing_subscription
             ->service()
             ->createInvoice($data)
@@ -269,6 +278,28 @@ class BillingPortalPurchase extends Component
         ]);
     }
 
+    /**
+     * Update quantity property.
+     *
+     * @param string $option
+     * @return int
+     */
+    public function updateQuantity(string $option): int
+    {
+        if ($this->quantity == 1 && $option == 'decrement') {
+            return $this->quantity;
+        }
+
+        // TODO: David for review.
+        if ($this->quantity >= $this->billing_subscription->max_seats_limit) {
+            return $this->quantity;
+        }
+
+        return $option == 'increment'
+            ? $this->quantity++
+            : $this->quantity--;
+    }
+
     public function render()
     {
         if ($this->contact instanceof ClientContact) {

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
     "/js/app.js": "/js/app.js?id=696e8203d5e8e7cf5ff5",
-    "/css/app.css": "/css/app.css?id=e8d6d5e8cb60bc2f15b3",
+    "/css/app.css": "/css/app.css?id=1481aa442df903f3c38b",
     "/js/clients/invoices/action-selectors.js": "/js/clients/invoices/action-selectors.js?id=a09bb529b8e1826f13b4",
     "/js/clients/invoices/payment.js": "/js/clients/invoices/payment.js?id=8ce8955ba775ea5f47d1",
     "/js/clients/linkify-urls.js": "/js/clients/linkify-urls.js?id=0dc8c34010d09195d2f7",

resources/views/portal/ninja2020/components/livewire/billing-portal-purchase.blade.php

@@ -10,10 +10,36 @@
 
             <p class="my-6">{{ $billing_subscription->product->notes }}</p>
 
-            <span class="text-sm uppercase font-bold">{{ ctrans('texts.total') }}:</span>
+            <span class="text-sm uppercase font-bold">{{ ctrans('texts.price') }}:</span>
 
+            <div class="flex space-x-2">
                 <h1 class="text-2xl font-bold tracking-wide">{{ App\Utils\Number::formatMoney($billing_subscription->product->price, $billing_subscription->company) }}</h1>
 
+                @if($billing_subscription->per_seat_enabled)
+                    <span class="text-sm">/unit</span>
+                @endif
+            </div>
+
+            <div class="flex mt-4 space-x-4 items-center">
+                <span class="text-sm">{{ ctrans('texts.qty') }}</span>
+                <button wire:click="updateQuantity('decrement')" class="bg-gray-100 border rounded p-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                         class="feather feather-minus">
+                        <line x1="5" y1="12" x2="19" y2="12"></line>
+                    </svg>
+                </button>
+                <button>{{ $quantity }}</button>
+                <button wire:click="updateQuantity('increment')" class="bg-gray-100 border rounded p-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                         class="feather feather-plus">
+                        <line x1="12" y1="5" x2="12" y2="19"></line>
+                        <line x1="5" y1="12" x2="19" y2="12"></line>
+                    </svg>
+                </button>
+            </div>
+
             @if(auth('contact')->user())
                 <a href="{{ route('client.invoices.index') }}" class="block mt-16 inline-flex items-center space-x-2">
                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"