Facebook deprecated page_engaged_users metric

resources/css/custom.css

@@ -26,6 +26,10 @@
     .link {
         @apply text-blue-500 hover:text-blue-400 transition-colors ease-in-out duration-200;
     }
+
+    .link-lighter {
+        @apply text-blue-300 hover:text-blue-200 transition-colors ease-in-out duration-200;
+    }
 }
 
 @layer utilities {
@@ -37,6 +41,26 @@
         @apply py-10;
     }
 
+    .row-py {
+        @apply py-8;
+    }
+
+    .row-mb {
+        @apply mb-8;
+    }
+
+    .row-mt {
+        @apply mb-8;
+    }
+
+    .m-container {
+        @apply max-w-6xl;
+    }
+
+    .s-container {
+        @apply max-w-3xl;
+    }
+
     /* Firefox */
     .mixpost-scroll-style {
         scrollbar-width: thin;

resources/js/Components/Button/DangerButton.vue

@@ -22,7 +22,7 @@ const {sizeClass} = useButtonSize(props.size);
 
 <template>
     <button :type="type" :class="sizeClass"
-            class="relative inline-flex items-center bg-red-500 border border-transparent rounded-md font-medium text-xs text-white uppercase tracking-widest hover:bg-red-700 active:bg-red-700 focus:border-red-700 focus:shadow-outline-red disabled:bg-red-400 transition ease-in-out duration-200">
+            class="relative inline-flex items-center bg-red-500 border border-transparent rounded-md font-medium text-xs text-white uppercase tracking-widest hover:bg-red-700 active:bg-red-700 focus:border-red-700 focus:shadow-outline-red disabled:bg-red-400 disabled:cursor-not-allowed transition ease-in-out duration-200">
         <slot/>
         <span v-if="isLoading" class="absolute left-0 top-0 flex justify-center items-center w-full h-full bg-red-500">
              <CircleLoadingIcon class="animate-spin text-white"/>

resources/js/Components/Button/PrimaryButton.vue

@@ -21,7 +21,7 @@ const { sizeClass } = useButtonSize(props.size);
 </script>
 
 <template>
-    <button :type="type" :class="sizeClass" class="relative inline-flex items-center bg-indigo-500 border border-transparent rounded-md font-medium text-xs text-white uppercase tracking-widest hover:bg-indigo-700 active:bg-indigo-700 focus:border-indigo-700 focus:shadow-outline-indigo disabled:bg-indigo-400 transition ease-in-out duration-200">
+    <button :type="type" :class="sizeClass" class="relative inline-flex items-center bg-indigo-500 border border-transparent rounded-md font-medium text-xs text-white uppercase tracking-widest hover:bg-indigo-700 active:bg-indigo-700 focus:border-indigo-700 focus:shadow-outline-indigo disabled:bg-indigo-400 disabled:cursor-not-allowed transition ease-in-out duration-200">
         <slot />
         <span v-if="isLoading" class="absolute left-0 top-0 flex justify-center items-center w-full h-full bg-indigo-500 rounded-md">
              <CircleLoadingIcon class="animate-spin text-white"/>

resources/js/Components/Button/PureButton.vue

@@ -7,7 +7,7 @@ defineProps({
 });
 </script>
 <template>
-    <button :type="type" class="relative inline-flex items-center text-gray-400 hover:text-indigo-500 transition-colors ease-in-out duration-200">
+    <button :type="type" class="relative inline-flex items-center text-gray-400 hover:text-indigo-500 disabled:cursor-not-allowed transition-colors ease-in-out duration-200">
         <slot/>
     </button>
 </template>

resources/js/Components/Button/PureDangerButton.vue

@@ -8,7 +8,7 @@ defineProps({
 </script>
 <template>
     <button :type="type"
-            class="relative inline-flex items-center text-red-400 hover:text-red-500 transition-colors ease-in-out duration-200">
+            class="relative inline-flex items-center text-red-400 hover:text-red-500 disabled:cursor-not-allowed transition-colors ease-in-out duration-200">
         <slot/>
     </button>
 </template>

resources/js/Components/Button/SecondaryButton.vue

@@ -21,7 +21,7 @@ const { sizeClass } = useButtonSize(props.size);
 </script>
 
 <template>
-    <button :type="type" :class="sizeClass" class="relative inline-flex items-center bg-white text-black border border-indigo-800 rounded-md font-medium text-xs uppercase tracking-widest hover:text-indigo-500 hover:border-indigo-500 active:text-indigo-500 active:border-indigo-700 focus:border-indigo-700 focus:shadow-outline-indigo disabled:text-gray-500 transition ease-in-out duration-200">
+    <button :type="type" :class="sizeClass" class="relative inline-flex items-center bg-white text-black border border-indigo-800 rounded-md font-medium text-xs uppercase tracking-widest hover:text-indigo-500 hover:border-indigo-500 active:text-indigo-500 active:border-indigo-700 focus:border-indigo-700 focus:shadow-outline-indigo disabled:text-gray-500 disabled:cursor-not-allowed transition ease-in-out duration-200">
         <slot />
         <span v-if="isLoading" class="absolute left-0 top-0 flex justify-center items-center w-full h-full bg-white rounded-md">
              <CircleLoadingIcon class="animate-spin text-indigo-500"/>

resources/js/Components/Calendar/Month/CalendarMonth.vue

@@ -146,7 +146,7 @@ const selectDate = (value) => {
 </script>
 <template>
     <div class="bg-white">
-        <div class="flex flex-col md:flex-row md:items-center md:justify-between p-lg">
+        <div class="flex flex-col md:flex-row md:items-center md:justify-between py-lg row-px">
             <div class="flex items-center space-x-xs mb-xs md:mb-0">
                 <DateSelector
                     :current-date="today"

resources/js/Components/Calendar/Week/CalendarWeek.vue

@@ -106,7 +106,7 @@ const onScroll = throttle(($event) => {
 </script>
 <template>
     <div class="bg-white ">
-        <div class="flex flex-col md:flex-row md:items-center md:justify-between p-lg">
+        <div class="flex flex-col md:flex-row md:items-center md:justify-between py-lg row-px">
             <div class="flex items-center space-x-xs mb-xs md:mb-0">
                 <DateSelector
                     :currentDate="today"

resources/js/Components/Dropdown/DropdownItem.vue

@@ -11,7 +11,7 @@ defineProps({
     }
 });
 
-const classes = 'flex items-center p-sm w-full rounded-md text-gray-800 hover:bg-gray-100 transition ease-in-out duration-200';
+const classes = 'flex items-center p-sm w-full first:rounded-t-md last:rounded-b-md text-gray-800 hover:bg-gray-100 transition ease-in-out duration-200';
 const iconClass = 'mr-xs';
 </script>
 <template>

resources/js/Components/Layout/HorizontalGroup.vue

@@ -1,17 +1,35 @@
+<script setup>
+defineProps({
+    flexColMobile: {
+        type: Boolean,
+        default: true,
+    }
+})
+</script>
 <template>
     <div>
         <div class="flex justify-between items-center">
-            <div class="w-full flex flex-col sm:flex-row sm:items-center sm:justify-between">
-                <div v-if="$slots.title"
-                     class="flex justify-start w-full font-semibold sm:mr-xs">
-                    <slot name="title"/>
+            <div class="w-full flex sm:flex-row sm:items-center sm:justify-between"
+                 :class="{'flex-col': flexColMobile}">
+                <div v-if="$slots.title || $slots.description" class="flex flex-col justify-start w-full sm:mr-xs">
+                    <div v-if="$slots.title"
+                         class="font-medium">
+                        <slot name="title"/>
+                    </div>
+
+                    <div v-if="$slots.description" class="text-gray-500">
+                        <slot name="description"/>
+                    </div>
                 </div>
 
                 <div v-if="$slots.default" class="w-full flex justify-start mt-xs sm:mt-0">
                     <slot/>
                 </div>
             </div>
         </div>
-        <slot name="footer"/>
+
+        <div v-if="$slots.footer" class="mt-xs">
+            <slot name="footer"/>
+        </div>
     </div>
 </template>

resources/js/Components/Modal/DialogModal.vue

@@ -1,5 +1,7 @@
 <script setup>
 import Modal from '@/Components/Modal/Modal.vue';
+import PureButton from "../Button/PureButton.vue";
+import X from "../../Icons/X.vue";
 
 const emit = defineEmits(['close']);
 
@@ -37,8 +39,12 @@ const close = () => {
     >
         <div class="w-full h-full min-h-full max-h-max relative overflow-x-hidden overflow-y-auto">
             <div class="flex flex-col h-full w-full">
-                <div v-if="$slots.header" class="px-lg py-md text-lg">
+                <div v-if="$slots.header" class="flex justify-between px-lg py-md text-lg">
                     <slot name="header"/>
+
+                    <template v-if="closeable">
+                        <PureButton @click="close"><X/></PureButton>
+                    </template>
                 </div>
 
                 <div class="p-lg h-full overflow-x-hidden overflow-y-auto" :class="{'pt-0': $slots.header}">

resources/js/Components/Post/PostItem.vue

@@ -154,7 +154,7 @@ const closePreview = () => {
             </template>
             <template #footer>
                 <template v-if="preview">
-                    <div class="mr-xs">
+                    <div class="mr-xs flex items-center">
                         <PostItemActions :item-id="item.id"/>
                     </div>
                     <SecondaryButton @click="closePreview">Close</SecondaryButton>

resources/js/Components/Post/PostTags.vue

@@ -138,7 +138,7 @@ const store = () => {
                         </div>
                     </div>
 
-                    <div class="mt-4">
+                    <div class="mt-xs">
                         <Input v-model="searchText"
                                @keyup.enter="store"
                                type="text"

resources/js/Components/Report/FacebookPageReports.vue

@@ -23,12 +23,13 @@ const getAudienceData = (value) => {
 </script>
 <template>
     <div class="row-px mt-2xl">
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-sm">
-            <Panel>
-                <template #title><span v-tooltip="'The number of people who engaged with your Page. Engagement includes any click.'">Page Engaged Users</span>
-                </template>
-                <div class="font-bold text-indigo-500 text-2xl">{{ getMetricCount('page_engaged_users') }}</div>
-            </Panel>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-sm">
+            <!--            Facebook deprecated `page_engaged_users` metric-->
+<!--            <Panel>-->
+<!--                <template #title><span v-tooltip="'The number of people who engaged with your Page. Engagement includes any click.'">Page Engaged Users</span>-->
+<!--                </template>-->
+<!--                <div class="font-bold text-indigo-500 text-2xl">{{ getMetricCount('page_engaged_users') }}</div>-->
+<!--            </Panel>-->
 
             <Panel>
                 <template #title><span v-tooltip="'The number of times people have engaged with your posts through reactions, comments, shares and more.'">Post Engagements</span>

resources/js/Components/Surface/SectionBorder.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="hidden sm:block">
-        <div class="py-xl">
+        <div class="py-lg">
             <div class="border-t border-gray-200 dark:border-slate-700"></div>
         </div>
     </div>

resources/js/Components/Util/Alert.vue

@@ -40,7 +40,7 @@ const variantColorClasses = computed(() => {
 });
 </script>
 <template>
-    <div v-if="show" class="flex px-5 py-md rounded-md bg-indigo-800">
+    <div v-if="show" class="flex p-md rounded-md bg-indigo-800">
         <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div>

resources/js/Components/Util/Notifications.vue

@@ -40,7 +40,7 @@ const open = (variantName, messageText, buttonObject) => {
     showTimeout = setTimeout(() => {
         show.value = false;
         button.value = null;
-    }, 3000);
+    }, 5000);
 }
 
 const close = () => {

src/Reports/FacebookPageReports.php

@@ -30,7 +30,7 @@ protected function metrics(Account $account, string $period): array
             ->get();
 
         return [
-            'page_engaged_users' => $reports->where('type', FacebookInsightType::PAGE_ENGAGED_USERS)->value('total', 0),
+//            'page_engaged_users' => $reports->where('type', FacebookInsightType::PAGE_ENGAGED_USERS)->value('total', 0), Facebook deprecated `page_engaged_users` metric
             'page_post_engagements' => $reports->where('type', FacebookInsightType::PAGE_POST_ENGAGEMENTS)->value('total', 0),
             'page_posts_impressions' => $reports->where('type', FacebookInsightType::PAGE_POSTS_IMPRESSIONS)->value('total', 0)
         ];

src/SocialProviders/Meta/Concerns/ManagesFacebookPageResources.php

@@ -77,7 +77,7 @@ public function getPageInsights(): SocialProviderResponse
     {
         $data = [
             'access_token' => $this->getAccessToken()['page_access_token'],
-            'metric' => 'page_engaged_users,page_post_engagements,page_posts_impressions',
+            'metric' => 'page_post_engagements,page_posts_impressions', // facebook deprecated `page_engaged_users` metric
             'period' => 'day',
             'since' => Carbon::today('UTC')->subDays(90)->toDateString(),
             'until' => Carbon::today('UTC')->toDateString(),

src/Support/EagerLoadPostVersionsMedia.php

@@ -2,7 +2,8 @@
 
 namespace Inovector\Mixpost\Support;
 
-use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Collection as EloquentCollection;
+use Illuminate\Support\Collection;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Pagination\LengthAwarePaginator;
 use Inovector\Mixpost\Models\Media;
@@ -63,14 +64,20 @@ protected function extractMediaIds(): array
         return array_unique($mediaIds);
     }
 
-    protected function getMediaCollection(): Collection
+    protected function getMediaCollection(): Collection|EloquentCollection
     {
-        $mediaItems = Media::findMany($this->extractMediaIds());
+        $mediaIds = $this->extractMediaIds();
+
+        if (empty($mediaIds)) {
+            return collect();
+        }
+
+        $mediaItems = Media::findMany($mediaIds);
 
         return $mediaItems->keyBy('id');
     }
 
-    protected function parseResult(): Model|Collection|LengthAwarePaginator|\Illuminate\Support\Collection
+    protected function parseResult(): Model|Collection|EloquentCollection|LengthAwarePaginator
     {
         if ($this->postResult instanceof Model) {
             return collect([$this->postResult]);