From 99e531fce3cde53138725e45b0555eef8e2c9a33 Mon Sep 17 00:00:00 2001
From: Thomas Nabord <thomas.nabord@prestashop.com>
Date: Tue, 2 Jan 2024 16:41:23 +0100
Subject: [PATCH] Remove use of filters in <script> tags

---
 .../campaign-creation-popin-recap.vue         |  3 ++-
 .../campaign-creation/campaign-creation.vue   |  2 +-
 .../campaign/campaign-table-list-row.vue      |  5 ++--
 .../key-metrics/key-metrics-chart-wrapper.vue |  3 ++-
 .../google-ads-account-popin-new.vue          |  9 ++++----
 .../dashboard/sync-history/sync-history.vue   | 23 ++++++++++---------
 .../product-feed-settings-export.vue          |  5 ++--
 .../estimate-method/countries-form-list.vue   |  5 ++--
 .../import-method/shipping-settings.vue       | 10 ++++----
 .../product-feed/settings/summary/summary.vue |  5 ++--
 10 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/_dev/apps/ui/src/components/campaign-creation/campaign-creation-filter-popin/campaign-creation-popin-recap.vue b/_dev/apps/ui/src/components/campaign-creation/campaign-creation-filter-popin/campaign-creation-popin-recap.vue
index f6463496f2..0b7ea5a7fb 100644
--- a/_dev/apps/ui/src/components/campaign-creation/campaign-creation-filter-popin/campaign-creation-popin-recap.vue
+++ b/_dev/apps/ui/src/components/campaign-creation/campaign-creation-filter-popin/campaign-creation-popin-recap.vue
@@ -111,6 +111,7 @@ import PsModal from '@/components/commons/ps-modal.vue';
 import SegmentGenericParams from '@/utils/SegmentGenericParams';
 import compareYears from '@/utils/CompareYears';
 import {changeCountryNameToCode} from '@/utils/Countries';
+import { timeConverterToDate } from '@/utils/Dates';
 
 export default defineComponent({
   name: 'SSCCreationPopinRecap',
@@ -154,7 +155,7 @@ export default defineComponent({
         const isThereAnEndDate = compareYears(this.newCampaign.endDate);
 
         return isThereAnEndDate
-          ? this.$options.filters.timeConverterToDate(this.newCampaign.endDate)
+          ? timeConverterToDate(this.newCampaign.endDate)
           : null;
       }
       return '-';
diff --git a/_dev/apps/ui/src/components/campaign-creation/campaign-creation.vue b/_dev/apps/ui/src/components/campaign-creation/campaign-creation.vue
index 7e11acfded..548613acff 100644
--- a/_dev/apps/ui/src/components/campaign-creation/campaign-creation.vue
+++ b/_dev/apps/ui/src/components/campaign-creation/campaign-creation.vue
@@ -631,7 +631,7 @@ export default defineComponent({
         ?.currencyCode;
     },
     currencySymbol(): string {
-      return this.$options.filters.formatPrice(0, this.currency).replace(/[\s.,0]*/g, '');
+      return formatPrice(0, this.currency).replace(/[\s.,0]*/g, '');
     },
     finalCampaignFilters() {
       // IMPORTANT: Do not send the filters property if the campaign has unhandled filters
diff --git a/_dev/apps/ui/src/components/campaign/campaign-table-list-row.vue b/_dev/apps/ui/src/components/campaign/campaign-table-list-row.vue
index 0e57b97134..2fd44fc090 100644
--- a/_dev/apps/ui/src/components/campaign/campaign-table-list-row.vue
+++ b/_dev/apps/ui/src/components/campaign/campaign-table-list-row.vue
@@ -100,9 +100,10 @@ import CampaignStatus, {CampaignStatusToggle} from '@/enums/reporting/CampaignSt
 import compareYears from '@/utils/CompareYears';
 import {CampaignPerformanceObject, CampaignStatusPayload} from '@/store/modules/campaigns/state';
 import {timeConverterToDate} from '@/utils/Dates';
-import {formatPrice} from '../../utils/Price';
+import {formatPrice} from '@/utils/Price';
 import SegmentGenericParams from '@/utils/SegmentGenericParams';
 import AlertLowBudget from './alert-low-budget.vue';
+import {changeCountriesCodesToNames} from '@/utils/Countries';
 
 export default defineComponent({
   name: 'CampaignTableListRow',
@@ -130,7 +131,7 @@ export default defineComponent({
       return this.$t('campaigns.dateLabel.from', {startDate: timeConverterToDate(this.campaign.startDate)});
     },
     campaignCountryName() {
-      return this.$options.filters.changeCountriesCodesToNames([this.campaign.targetCountry])[0];
+      return changeCountriesCodesToNames([this.campaign.targetCountry])[0];
     },
     currencyCode(): string {
       return this.campaign.currencyCode || this.$store.getters['googleAds/GET_GOOGLE_ADS_ACCOUNT_CHOSEN']?.currencyCode;
diff --git a/_dev/apps/ui/src/components/campaign/reporting/key-metrics/key-metrics-chart-wrapper.vue b/_dev/apps/ui/src/components/campaign/reporting/key-metrics/key-metrics-chart-wrapper.vue
index 103e6c17af..ca6f561847 100644
--- a/_dev/apps/ui/src/components/campaign/reporting/key-metrics/key-metrics-chart-wrapper.vue
+++ b/_dev/apps/ui/src/components/campaign/reporting/key-metrics/key-metrics-chart-wrapper.vue
@@ -44,6 +44,7 @@ import KpiType from '@/enums/reporting/KpiType';
 import ChartCanvas from '@/components/chart/chart-canvas.vue';
 import {Kpis, DailyResultTypes} from '@/store/modules/campaigns/state';
 import {timeConverterToDate} from '@/utils/Dates';
+import {formatPrice} from '@/utils/Price';
 import {externalTooltipHandler} from '@/utils/ChartTooltip';
 
 const skipped = (
@@ -215,7 +216,7 @@ export default defineComponent({
         || type === KpiType.COSTS;
     },
     getFormattedValue(value: string|number|Point|null) {
-      return this.$options.filters.formatPrice(value, this.currencyCode);
+      return formatPrice(value, this.currencyCode);
     },
   },
 });
diff --git a/_dev/apps/ui/src/components/google-ads-account/google-ads-account-popin-new.vue b/_dev/apps/ui/src/components/google-ads-account/google-ads-account-popin-new.vue
index 141046fdfa..c8aae604a2 100644
--- a/_dev/apps/ui/src/components/google-ads-account/google-ads-account-popin-new.vue
+++ b/_dev/apps/ui/src/components/google-ads-account/google-ads-account-popin-new.vue
@@ -209,6 +209,7 @@ import SelectCountry from '../commons/select-country.vue';
 import SegmentGenericParams from '@/utils/SegmentGenericParams';
 import {GoogleAccountContext} from '@/store/modules/accounts/state';
 import BannerAds from '../commons/banner-ads.vue';
+import {changeCountryCodeToName} from '@/utils/Countries';
 
 export default defineComponent({
   name: 'GoogleAdsAccountPopinNew',
@@ -261,13 +262,13 @@ export default defineComponent({
     saveCountrySelected(value) {
       this.newAccountInfos.country = value;
     },
-    defaultCountry() {
+    defaultCountry(): string {
       if (!this.$store.state.app.psxMtgWithGoogleDefaultShopCountry) {
         return '';
       }
-      return this.$options.filters.changeCountriesCodesToNames(
-        [this.$store.state.app.psxMtgWithGoogleDefaultShopCountry],
-      )[0];
+      return changeCountryCodeToName(
+        this.$store.state.app.psxMtgWithGoogleDefaultShopCountry,
+      );
     },
   },
   props: {
diff --git a/_dev/apps/ui/src/components/product-feed-page/dashboard/sync-history/sync-history.vue b/_dev/apps/ui/src/components/product-feed-page/dashboard/sync-history/sync-history.vue
index 20b31fa93f..8e7170dc5e 100644
--- a/_dev/apps/ui/src/components/product-feed-page/dashboard/sync-history/sync-history.vue
+++ b/_dev/apps/ui/src/components/product-feed-page/dashboard/sync-history/sync-history.vue
@@ -4,10 +4,11 @@
   </ul>
 </template>
 
-<script>
+<script lang="ts">
 import {
   SyncHystoryType,
 } from '@/enums/product-feed/sync-history.ts';
+import {timeConverterToDate, timeConverterToHour} from '@/utils/Dates';
 
 export default {
   props: {
@@ -40,7 +41,7 @@ export default {
             ),
             description: this.$i18n.t(
               'productFeedPage.syncSummary.syncHistory.subtitle.happenedOnDate',
-              {date: this.$options.filters.timeConverterToDate(this.syncInfos.lastUpdatedAt)},
+              {date: timeConverterToDate(this.syncInfos.lastUpdatedAt)},
             ),
             icon: 'change_circle',
           },
@@ -56,8 +57,8 @@ export default {
             ),
             description: this.$i18n.t(
               'productFeedPage.syncSummary.syncHistory.subtitle.willHappenOnDate', [
-                this.$options.filters.timeConverterToDate(this.syncInfos.nextJobAt),
-                this.$options.filters.timeConverterToHour(this.syncInfos.nextJobAt),
+                timeConverterToDate(this.syncInfos.nextJobAt),
+                timeConverterToHour(this.syncInfos.nextJobAt),
               ]),
             icon: 'schedule',
           },
@@ -72,7 +73,7 @@ export default {
             description: this.$i18n.t(
               'productFeedPage.syncSummary.syncHistory.subtitle.happenedOnDate',
               {
-                date: this.$options.filters.timeConverterToDate(
+                date: timeConverterToDate(
                   this.syncInfos.lastUpdatedAt ?? this.syncInfos.jobEndedAt,
                 ),
               },
@@ -86,9 +87,9 @@ export default {
             ),
             description: this.$i18n.t(
               'productFeedPage.syncSummary.syncHistory.subtitle.error', [
-                this.$options.filters.timeConverterToDate(this.syncInfos.lastUpdatedAt
+                timeConverterToDate(this.syncInfos.lastUpdatedAt
                 ?? this.syncInfos.jobEndedAt),
-                this.$options.filters.timeConverterToHour(this.syncInfos.lastUpdatedAt
+                timeConverterToHour(this.syncInfos.lastUpdatedAt
                 ?? this.syncInfos.jobEndedAt),
               ],
             ),
@@ -106,7 +107,7 @@ export default {
           ),
           description: this.$i18n.t(
             'productFeedPage.syncSummary.syncHistory.subtitle.happenedOnDate',
-            {date: this.$options.filters.timeConverterToDate(this.syncInfos.lastUpdatedAt)},
+            {date: timeConverterToDate(this.syncInfos.lastUpdatedAt)},
           ),
           icon: 'check_circle',
           lineColor: 'info',
@@ -117,7 +118,7 @@ export default {
           ),
           description: this.$i18n.t(
             'productFeedPage.syncSummary.syncHistory.subtitle.happenedOnDate',
-            {date: this.$options.filters.timeConverterToDate(this.syncInfos.jobEndedAt)},
+            {date: timeConverterToDate(this.syncInfos.jobEndedAt)},
           ),
           icon: 'check_circle',
           lineColor: 'info',
@@ -128,8 +129,8 @@ export default {
           ),
           description: this.$i18n.t(
             'productFeedPage.syncSummary.syncHistory.subtitle.willHappenOnDate', [
-              this.$options.filters.timeConverterToDate(this.syncInfos.nextJobAt),
-              this.$options.filters.timeConverterToHour(this.syncInfos.nextJobAt),
+              timeConverterToDate(this.syncInfos.nextJobAt),
+              timeConverterToHour(this.syncInfos.nextJobAt),
             ],
 
           ),
diff --git a/_dev/apps/ui/src/components/product-feed/product-feed-settings-export.vue b/_dev/apps/ui/src/components/product-feed/product-feed-settings-export.vue
index 5e4c39c81e..7cc7304091 100644
--- a/_dev/apps/ui/src/components/product-feed/product-feed-settings-export.vue
+++ b/_dev/apps/ui/src/components/product-feed/product-feed-settings-export.vue
@@ -214,7 +214,7 @@
   </b-form> -->
 </template>
 
-<script>
+<script lang="ts">
 /**
  * ! Not needed for batch 1
  */
@@ -231,6 +231,7 @@
  * TODO: Replace with real datas.
  */
 import SettingsFooter from '@/components/product-feed/settings/commons/settings-footer.vue';
+import {timeConverterToHour} from '@/utils/Dates';
 
 export default {
   name: 'ProductFeedSettingsExport',
@@ -310,7 +311,7 @@ export default {
       return false;
     },
     syncTime() {
-      return this.$options.filters.timeConverterToHour(this.$store.getters['productFeed/GET_PRODUCT_FEED_STATUS'].nextJobAt);
+      return timeConverterToHour(this.$store.getters['productFeed/GET_PRODUCT_FEED_STATUS'].nextJobAt);
     },
   },
 
diff --git a/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/estimate-method/countries-form-list.vue b/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/estimate-method/countries-form-list.vue
index 5a892c4e57..96c60837e9 100644
--- a/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/estimate-method/countries-form-list.vue
+++ b/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/estimate-method/countries-form-list.vue
@@ -79,7 +79,7 @@
           class="d-flex btn-without-hover"
           variant="invisible"
         >
-          <span>{{ $options.filters.changeCountriesCodesToNames(carrier.countries)[0] }}</span>
+          <span>{{ countriesNames[0] }}</span>
           <span
             v-if="validateCarrier(carrier) === false"
             class="text-danger spans-gs_fz-14 d-inline-block ml-2"
@@ -131,6 +131,7 @@ import {defineComponent, PropType} from 'vue';
 import CustomCarrierForm from './custom-carrier-form.vue';
 import {RateType} from '@/enums/product-feed/rate';
 import {CustomCarrier, validateCarrier} from '@/providers/shipping-rate-provider';
+import {changeCountriesCodesToNames} from '@/utils/Countries';
 
 export default defineComponent({
   name: 'CountriesFormList',
@@ -164,7 +165,7 @@ export default defineComponent({
   },
   computed: {
     countriesNames(): string[] {
-      return this.$options.filters.changeCountriesCodesToNames(this.countries);
+      return changeCountriesCodesToNames(this.countries);
     },
   },
   methods: {
diff --git a/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/import-method/shipping-settings.vue b/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/import-method/shipping-settings.vue
index de1ab82990..18146a1734 100644
--- a/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/import-method/shipping-settings.vue
+++ b/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/import-method/shipping-settings.vue
@@ -13,7 +13,7 @@
         id="filterByCountryDropdown"
         variant=" "
         menu-class="ps-dropdown"
-        :text="countryChosen ? $options.filters.changeCountriesCodesToNames([countryChosen])[0]
+        :text="countryChosen ? changeCountryCodeToName(countryChosen)
           : $t('productFeedSettings.deliveryTimeAndRates.filterTitle')"
         class="mb-2 ps-dropdown psxmarketingwithgoogle-dropdown bordered maxw-sm-250 ml-2"
       >
@@ -33,7 +33,7 @@
           variant="dark"
           link-class="flex-wrap px-3 d-flex flex-md-nowrap align-items-center"
         >
-          {{ $options.filters.changeCountriesCodesToNames([country])[0] }}
+          {{ changeCountryCodeToName(country) }}
         </b-dropdown-item>
       </b-dropdown>
     </div>
@@ -178,8 +178,9 @@ import ShippingSettingsHeaderType from '@/enums/product-feed/shipping-settings-h
 import SettingsFooter from '@/components/product-feed/settings/commons/settings-footer.vue';
 import ActionsButtons from '@/components/product-feed/settings/commons/actions-buttons.vue';
 import TableRowCarrier from './table-row-carrier.vue';
-import {DeliveryDetail, validateEachCountryHasAtLeastOneCarrier} from '../../../../../providers/shipping-settings-provider';
-import {ShippingSetupOption} from '../../../../../enums/product-feed/shipping';
+import {DeliveryDetail, validateEachCountryHasAtLeastOneCarrier} from '@/providers/shipping-settings-provider';
+import {ShippingSetupOption} from '@/enums/product-feed/shipping';
+import {changeCountryCodeToName} from '@/utils/Countries';
 
 export default {
   components: {
@@ -231,6 +232,7 @@ export default {
     },
   },
   methods: {
+    changeCountryCodeToName,
     hasToolTip(headerType) {
       if (
         headerType === ShippingSettingsHeaderType.SHIP_TO_CUSTOMER
diff --git a/_dev/apps/ui/src/components/product-feed/settings/summary/summary.vue b/_dev/apps/ui/src/components/product-feed/settings/summary/summary.vue
index e740fd3976..897ad164ce 100644
--- a/_dev/apps/ui/src/components/product-feed/settings/summary/summary.vue
+++ b/_dev/apps/ui/src/components/product-feed/settings/summary/summary.vue
@@ -232,6 +232,7 @@ import TableRowMapping from '@/components/product-feed/commons/table-row-mapping
 import SegmentGenericParams from '@/utils/SegmentGenericParams';
 import ProductFeedSummaryCards from '@/components/product-feed/summary/product-feed-summary-cards.vue';
 import {getDataFromLocalStorage} from '@/utils/LocalStorage';
+import { timeConverterToHour, timeConverterToStringifiedDate } from '@/utils/Dates';
 
 dayjs.extend(duration);
 
@@ -272,12 +273,12 @@ export default defineComponent({
         .nextJobAt;
     },
     formatNextSyncDate() {
-      return this.$options.filters.timeConverterToStringifiedDate(
+      return timeConverterToStringifiedDate(
         this.nextSyncDate,
       );
     },
     formatNextSync() {
-      return this.$options.filters.timeConverterToHour(this.nextSyncDate);
+      return timeConverterToHour(this.nextSyncDate);
     },
     nextSyncTotalProducts: {
       get() {