Add Cart component and handle context in Purchase class

app/Livewire/BillingPortal/Purchase.php

@@ -13,6 +13,7 @@
 namespace App\Livewire\BillingPortal;
 
 use App\Libraries\MultiDB;
+use App\Livewire\BillingPortal\Cart\Cart;
 use App\Models\Subscription;
 use Livewire\Attributes\Computed;
 use Livewire\Attributes\On;
@@ -26,6 +27,8 @@ class Purchase extends Component
 
     public array $request_data;
 
+    public string $hash;
+
     public ?string $campaign;
 
     // 
@@ -34,6 +37,7 @@ class Purchase extends Component
 
     public array $steps = [
         Setup::class,
+        Cart::class,
         Authentication::class,
         Example::class,
     ];
@@ -41,9 +45,14 @@ class Purchase extends Component
     public array $context = [];
 
     #[On('purchase.context')]
-    public function handleContext(string $property, $value): void
+    public function handleContext(string $property, $value): self
     {
         $this->context[$property] = $value;
+
+        // The following may not be needed, as we can pass arround $context.
+        // cache()->set($this->hash, $this->context);
+
+        return $this;
     }
 
     #[On('purchase.next')]
@@ -70,11 +79,11 @@ class Purchase extends Component
     {
         MultiDB::setDb($this->db);
 
-        $this->context = [
-            'quantity' => 1,
-            'request_data' => $this->request_data,
-            'campaign' => $this->campaign,
-        ];
+        $this
+            ->handleContext('hash', $this->hash)
+            ->handleContext('quantity', 1)
+            ->handleContext('request_data', $this->request_data)
+            ->handleContext('campaign', $this->campaign);
     }
 
     public function render()

resources/views/billing-portal/v3/purchase.blade.php

@@ -1,10 +1,14 @@
-<div class="grid grid-cols-12">
-    <div class="col-span-12 xl:col-span-6 bg-white flex flex-col items-center lg:h-screen">
-        <div class="w-full p-10 lg:mt-24 md:max-w-md">
-            <img 
-                class="h-8" 
+<div class="grid grid-cols-12 bg-gray-50">
+    <div
+        class="col-span-12 xl:col-span-6 bg-white flex flex-col items-center lg:h-screen"
+    >
+        <div class="w-full p-10 lg:mt-24 md:max-w-xl">
+            <img
+                class="h-8"
                 src="{{ $subscription->company->present()->logo }}"
-                alt="{{ $subscription->company->present()->name }}" />
+                alt="{{ $subscription->company->present()->name }}"
+            />
+
 
             <div class="my-10" id="container">
                 @livewire($this->component, ['context' => $context, 'subscription' => $this->subscription], key($this->component))
@@ -12,9 +16,13 @@
         </div>
     </div>
 
-    <div class="col-span-12 xl:col-span-6 bg-gray-50 flex flex-col items-center">
-        <div class="w-full p-10 lg:mt-24 md:max-w-3xl">
-            <h1 class="text-3xl">{{ $subscription->name }}</h1>
+    <div class="col-span-12 xl:col-span-6 flex flex-col items-center">
+        <div class="sticky top-0">
+            <div class="w-full p-10 lg:mt-24 md:max-w-xl">
+                <div class="my-6 space-y-10">
+                    <livewire:billing-portal.summary :subscription="$subscription" :context="$context" />
+                </div>
+            </div>
         </div>
     </div>
 </div>