From 7e7a29153cb37f28393618b4b382f82bf856b5e4 Mon Sep 17 00:00:00 2001
From: Josh Torres <josht@omniadigital.io>
Date: Sat, 30 Sep 2023 14:18:55 -0700
Subject: [PATCH] - upgrade media-manager - update withStripe livewire
 component to livewire 3 dispatch

---
 .../components/input/media-manager.blade.php  | 69 ++++++++++---------
 src/Livewire/WithStripe.php                   |  2 +-
 2 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/resources/views/components/input/media-manager.blade.php b/resources/views/components/input/media-manager.blade.php
index 9c978ea..2abf2cb 100644
--- a/resources/views/components/input/media-manager.blade.php
+++ b/resources/views/components/input/media-manager.blade.php
@@ -7,34 +7,13 @@
     'id'
 ])
 
-<div
-    x-data="{
-        showMediaManager(file, metadata) {
-            // Send data back to media manager to pre-fill data.
-            this.$wire.emitTo(
-                'media-manager',
-                'media-manager:show',
-                {
-                    id: '{{ $id }}',
-                    file: file,
-                    metadata: metadata
-                }
-            );
-        },
-        setImage(event) {
-            if (event.detail.id === '{{ $id }}') {
-                this.$wire.call('{{ $setImageAction }}', event.detail);
-            }
-        }
-    }"
-    x-on:media-manager:file-selected.window="setImage"
->
+<div x-data="mediaManager"
+     x-on:media-manager:file-selected.window="setImage">
     @if (empty($file))
         <button
-            x-on:click.prevent="showMediaManager(null, {})"
-            type="button"
-            class="relative block w-full border-2 border-gray-300 border-dashed rounded-lg p-8 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
-        >
+                x-on:click.prevent="showMediaManager(null, {})"
+                type="button"
+                class="relative block w-full border-2 border-gray-300 border-dashed rounded-lg p-8 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
             <x-library::icons.icon name="fa fa-image" class="mx-auto h-8 w-8 text-light-text-color"/>
             <span class="mt-2 block text-sm font-medium text-base-text-color">
             {{ $label }}
@@ -43,19 +22,41 @@ class="relative block w-full border-2 border-gray-300 border-dashed rounded-lg p
     @else
         <div class="relative">
             <button
-                wire:click.prevent="{{ $removeImageAction }}"
-                type="button"
-                class="absolute -top-2 -right-2 z-10 bg-red-100 rounded-full p-1 inline-flex items-center justify-center hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-red-500"
-            >
+                    wire:click.prevent="{{ $removeImageAction }}"
+                    type="button"
+                    class="absolute -top-2 -right-2 z-10 bg-red-100 rounded-full p-1 inline-flex items-center justify-center hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-red-500">
                 <x-heroicon-o-x class="w-5 h-5 text-red-500 hover:text-red-400"/>
             </button>
 
-            <div
-                x-on:click.prevent="showMediaManager('{{ $file }}', {{ Illuminate\Support\Js::from($metadata) }})"
-                class="block w-full aspect-w-10 aspect-h-7 rounded-lg overflow-hidden cursor-pointer"
-            >
+            <div x-on:click.prevent="showMediaManager('{{ $file }}', {{ Illuminate\Support\Js::from($metadata) }})"
+                 class="block w-full aspect-w-10 aspect-h-7 rounded-lg overflow-hidden cursor-pointer">
                 <img src="{{ $file }}" alt="" class="object-cover">
             </div>
         </div>
     @endif
 </div>
+
+
+<script>
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('mediaManager', () => ({
+            showMediaManager(file, metadata) {
+                // Send data back to media manager to pre-fill data.
+                $wire.dispatchTo(
+                    'media-manager',
+                    'media-manager:show',
+                    {
+                        id: '{{ $id }}',
+                        file: file,
+                        metadata: metadata
+                    }
+                );
+            },
+            setImage(event) {
+                if (event.detail.id === '{{ $id }}') {
+                    $wire.call('{{ $setImageAction }}', event.detail);
+                }
+            }
+        }));
+    }
+</script>
diff --git a/src/Livewire/WithStripe.php b/src/Livewire/WithStripe.php
index db22aa1..1933ca7 100644
--- a/src/Livewire/WithStripe.php
+++ b/src/Livewire/WithStripe.php
@@ -30,7 +30,7 @@ public function updateStripePaymentMethod(string $event, string $message)
         $billable->updateDefaultPaymentMethod($this->stripeToken);
 
         // Let Livewire knows Stripe payment method updated.
-        $this->emitSelf('stripePaymentMethodUpdated', $billable);
+        $this->dispatch('stripePaymentMethodUpdated', $billable)->self();
 
         // Let Alpinejs now Stripe payment method updated.
         $this->dispatch('stripe-payment-method-updated');