Show promo

Author: Stigmatoz

src/components/Notifications.vue

@@ -32,7 +32,6 @@
         {{ t('notificationTime.description') }}
       </p>
       <ListWithTimeComponent :type="ListWithTime.Notifications" />
-      <PromoClearYouTube />
     </div>
     <div class="settings-item">
       <label class="setting-header">{{ t('notificationMessage.message') }}</label>

src/components/PromoClearYouTube.vue

@@ -15,7 +15,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { injecStorage } from '../storage/inject-storage';
 import { StorageParams } from '../storage/storage-params';
@@ -32,27 +32,23 @@ const extensionPage = useExtensionPage();
 const showReview = ref<boolean>(true);
 
 const canShowPromo = computedAsync(async () => await usePromoExtension());
-const isBlockPage = computed(() => extensionPage.isBlockPage);
 
 async function closeBlock() {
   showReview.value = false;
-  await settingsStorage.saveValue(
-    isBlockPage.value
-      ? StorageParams.PROMO_CLEAR_YOUTUBE_ON_BLOCK
-      : StorageParams.PROMO_CLEAR_YOUTUBE_ON_LIMITS,
-    true,
-  );
+  await saveValue();
 }
 
 async function openStore() {
   showReview.value = false;
   window.open(CHROME_STORE_CLEAR_YOUTUBE_URL, '_blank');
-  await settingsStorage.saveValue(
-    isBlockPage.value
-      ? StorageParams.PROMO_CLEAR_YOUTUBE_ON_BLOCK
-      : StorageParams.PROMO_CLEAR_YOUTUBE_ON_LIMITS,
-    true,
-  );
+  await saveValue();
+}
+
+async function saveValue() {
+  let param: StorageParams | undefined = undefined;
+  if (extensionPage.isBlockPage.value) param = StorageParams.PROMO_CLEAR_YOUTUBE_ON_BLOCK;
+  if (extensionPage.isLimitPage.value) param = StorageParams.PROMO_CLEAR_YOUTUBE_ON_LIMITS;
+  if (param) await settingsStorage.saveValue(param, true);
 }
 </script>
 

src/compositions/useExtensionPage.ts

@@ -3,8 +3,8 @@ import { SettingsTab } from '../utils/enums';
 import { getStringTab } from '../utils/extension-tabs';
 
 export const QUERY_PARAMS_DASHBOARD = 'dashboard.html';
-export const QUERY_PARAMS_DASHBOARD_TAB = 'tab';
-export const QUERY_PARAMS_DASHBOARD_TAB_LIMITS = 'limits';
+export const QUERY_PARAMS_TAB = 'tab';
+export const QUERY_PARAMS_TAB_LIMITS = 'limits';
 export const QUERY_PARAMS_BLOCK = 'block.html';
 export const QUERY_PARAMS_BLOCK_DOMAIN = 'domain';
 
@@ -15,20 +15,19 @@ export function useExtensionPage() {
     () =>
       urlObj.value.hostname == __APP_ID__ &&
       urlObj.value.pathname.includes(QUERY_PARAMS_DASHBOARD) &&
-      urlObj.value.searchParams.get(QUERY_PARAMS_DASHBOARD_TAB) ==
-        QUERY_PARAMS_DASHBOARD_TAB_LIMITS,
+      urlObj.value.searchParams.get(QUERY_PARAMS_TAB) == QUERY_PARAMS_TAB_LIMITS,
   );
 
   const isBlockPage = computed(
     () =>
       urlObj.value.hostname == __APP_ID__ &&
       urlObj.value.pathname.includes(QUERY_PARAMS_BLOCK) &&
-      urlObj.value.searchParams.get(QUERY_PARAMS_BLOCK_DOMAIN) == 'youtube.com',
+      urlObj.value.searchParams.get(QUERY_PARAMS_BLOCK_DOMAIN)?.includes('youtube.com'),
   );
 
   function updateTab(tab: SettingsTab) {
     let targetTab = getStringTab(tab);
-    const currentTab = urlObj.value.searchParams.get(QUERY_PARAMS_DASHBOARD_TAB);
+    const currentTab = urlObj.value.searchParams.get(QUERY_PARAMS_TAB);
     if (window.history.replaceState && currentTab) {
       const sourceUrl = `tab=${currentTab}`;
       const targetUrl = `tab=${targetTab}`;

src/compositions/usePromoExtension.ts

@@ -41,5 +41,5 @@ export async function usePromoExtension() {
       extensionPage.isBlockPage.value,
   );
 
-  return showOnLimitPage || showOnBlockPage;
+  return showOnLimitPage.value || showOnBlockPage.value;
 }

src/pages/Block.vue

@@ -30,6 +30,7 @@
       @click="deferring()"
     />
     <p class="desctiption">{{ t('deferringDescription.message') }}</p>
+    <PromoClearYouTube />
   </div>
 </template>
 
@@ -41,6 +42,7 @@ import { injecStorage } from '../storage/inject-storage';
 import { BLOCK_DEFERRAL_DEFAULT, StorageParams } from '../storage/storage-params';
 import { convertLimitTimeToString } from '../utils/converter';
 import { defering, canDefering } from '../compositions/deferList';
+import PromoClearYouTube from '../components/PromoClearYouTube.vue';
 
 const { t } = useI18n();