From 0219fbbd3cecef40332b7d6e6f76f0e9650a48dc Mon Sep 17 00:00:00 2001
From: Thomas Nabord <thomas.nabord@prestashop.com>
Date: Tue, 2 Jan 2024 16:10:16 +0100
Subject: [PATCH 1/4] Remove Vue.extend

---
 .../delivery-time-and-rates/delivery-time-and-rates.vue       | 4 ++--
 .../estimate-method/countries-form-list.vue                   | 4 ++--
 .../estimate-method/custom-carrier-form.vue                   | 4 ++--
 .../delivery-time-and-rates/estimate-method/custom-rate.vue   | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/delivery-time-and-rates.vue b/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/delivery-time-and-rates.vue
index a45aca1575..9aa603e48c 100644
--- a/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/delivery-time-and-rates.vue
+++ b/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/delivery-time-and-rates.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import {defineComponent} from 'vue';
 import {ShippingSetupOption} from '@/enums/product-feed/shipping';
 import ProductFeedSettingsPages from '@/enums/product-feed/product-feed-settings-pages';
 import ShippingSettingsHeaderType from '@/enums/product-feed/shipping-settings-header-type';
@@ -58,7 +58,7 @@ import CustomRate from '@/components/product-feed/settings/delivery-time-and-rat
 import CountriesFormList from './estimate-method/countries-form-list.vue';
 import {getDataFromLocalStorage} from '@/utils/LocalStorage';
 
-export default Vue.extend({
+export default defineComponent({
   components: {
     ActionsButtons,
     TargetCountries,
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 90f4a21e9d..5a892c4e57 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
@@ -127,12 +127,12 @@
   </div>
 </template>
 <script lang="ts">
-import Vue, {PropType} from 'vue';
+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';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'CountriesFormList',
   components: {
     CustomCarrierForm,
diff --git a/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/estimate-method/custom-carrier-form.vue b/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/estimate-method/custom-carrier-form.vue
index cfd7d80ba7..5c8671ad5f 100644
--- a/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/estimate-method/custom-carrier-form.vue
+++ b/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/estimate-method/custom-carrier-form.vue
@@ -261,7 +261,7 @@
   </div>
 </template>
 <script lang="ts">
-import Vue, {PropType} from 'vue';
+import {defineComponent, PropType} from 'vue';
 import {OfferType} from '@/enums/product-feed/offer';
 import {
   validateDeliveryTime,
@@ -271,7 +271,7 @@ import {
 } from '@/providers/shipping-rate-provider';
 import CurrencyDropdown from './currency-dropdown.vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'CustomCarrierForm',
   components: {
     CurrencyDropdown,
diff --git a/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/estimate-method/custom-rate.vue b/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/estimate-method/custom-rate.vue
index 885c87ef54..4040eac3ec 100644
--- a/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/estimate-method/custom-rate.vue
+++ b/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/estimate-method/custom-rate.vue
@@ -54,10 +54,10 @@
   </div>
 </template>
 <script lang="ts">
-import Vue, {PropType} from 'vue';
+import {defineComponent, PropType} from 'vue';
 import {RateType} from '@/enums/product-feed/rate';
 
-export default Vue.extend({
+export default defineComponent({
   data() {
     return {
       RateType,

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 2/4] 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() {

From d4500065a743d0ac1759c3c8c675c27cfe27d1f7 Mon Sep 17 00:00:00 2001
From: Thomas Nabord <thomas.nabord@prestashop.com>
Date: Tue, 2 Jan 2024 17:02:08 +0100
Subject: [PATCH 3/4] Remove use of filters in <template> tags

---
 _dev/apps/ui/.storybook/preview.js            |  1 -
 .../campaign-creation-popin-recap.vue         | 16 +++++++++--
 .../attribute-mapping/attribute-field.vue     |  6 +++-
 .../import-method/shipping-settings.spec.ts   | 20 ++++++++-----
 .../product-feed/settings/summary/summary.vue |  2 +-
 _dev/apps/ui/src/main.ts                      |  1 -
 _dev/apps/ui/src/utils/Filters.ts             | 28 -------------------
 _dev/apps/ui/src/utils/Slugify.ts             | 13 +++++++++
 _dev/apps/ui/tests/init.ts                    | 17 ++---------
 9 files changed, 47 insertions(+), 57 deletions(-)
 delete mode 100644 _dev/apps/ui/src/utils/Filters.ts
 create mode 100644 _dev/apps/ui/src/utils/Slugify.ts

diff --git a/_dev/apps/ui/.storybook/preview.js b/_dev/apps/ui/.storybook/preview.js
index 16f17d26fe..1a7483a68e 100644
--- a/_dev/apps/ui/.storybook/preview.js
+++ b/_dev/apps/ui/.storybook/preview.js
@@ -46,7 +46,6 @@ initialize({
 
 // import showdown extension
 import '../showdown.js';
-import '../src/utils/Filters';
 
  // app.scss all the styles for the module
  import '../src/assets/scss/app.scss';
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 0b7ea5a7fb..027810c8a9 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
@@ -28,7 +28,7 @@
                 $t('smartShoppingCampaignCreation.inputDurationLabel1')
               }} </span><br>
             <span class="text-secondary">
-              {{ newCampaign.startDate | timeConverterToDate }}
+              {{ startDate }}
             </span>
           </b-col>
           <b-col
@@ -74,7 +74,7 @@
         {{ $t('smartShoppingCampaignCreation.inputBudgetFeedback') }}
       </dt>
       <dd class="text-secondary mb-2">
-        {{ newCampaign.dailyBudget|formatPrice(newCampaign.currencyCode) }}
+        {{ dailyBudget }}
       </dd>
     </dl>
     <p>
@@ -111,7 +111,8 @@ 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';
+import {timeConverterToDate} from '@/utils/Dates';
+import {formatPrice} from '@/utils/Price';
 
 export default defineComponent({
   name: 'SSCCreationPopinRecap',
@@ -150,6 +151,9 @@ export default defineComponent({
     dimensionName() {
       return this.$store.state.campaigns.dimensionChosen.name;
     },
+    startDate(): string {
+      return timeConverterToDate(this.newCampaign.startDate);
+    },
     endDate() {
       if (this.newCampaign.endDate) {
         const isThereAnEndDate = compareYears(this.newCampaign.endDate);
@@ -160,6 +164,12 @@ export default defineComponent({
       }
       return '-';
     },
+    dailyBudget(): string {
+      return formatPrice(
+        this.newCampaign.dailyBudget,
+        this.newCampaign.currencyCode,
+      );
+    },
   },
 
   methods: {
diff --git a/_dev/apps/ui/src/components/product-feed/settings/attribute-mapping/attribute-field.vue b/_dev/apps/ui/src/components/product-feed/settings/attribute-mapping/attribute-field.vue
index 250e025488..ef652f2e8c 100644
--- a/_dev/apps/ui/src/components/product-feed/settings/attribute-mapping/attribute-field.vue
+++ b/_dev/apps/ui/src/components/product-feed/settings/attribute-mapping/attribute-field.vue
@@ -1,6 +1,6 @@
 <template>
   <b-form-group
-    :label-for="field.label | slugify"
+    :label-for="slugifiedLabel"
     label-class="d-flex align-items-center"
   >
     <b-dropdown
@@ -65,6 +65,7 @@
 import {PropType, defineComponent} from 'vue';
 import googleUrl from '@/assets/json/googleUrl.json';
 import {FieldsContent, RecommendedFieldType, arrayEquals} from '@/utils/AttributeMapping';
+import slugify from '@/utils/Slugify';
 
 export default defineComponent({
   data() {
@@ -115,6 +116,9 @@ export default defineComponent({
     displayEventuallyRequiredMessage() {
       return !this.attributesChecked.length && this.field.name !== 'description';
     },
+    slugifiedLabel(): string {
+      return slugify(this.field.label);
+    },
   },
   methods: {
     findAttribute(attr) {
diff --git a/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/import-method/shipping-settings.spec.ts b/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/import-method/shipping-settings.spec.ts
index 0c1df89987..8f101ed9aa 100644
--- a/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/import-method/shipping-settings.spec.ts
+++ b/_dev/apps/ui/src/components/product-feed/settings/delivery-time-and-rates/import-method/shipping-settings.spec.ts
@@ -1,5 +1,5 @@
 import {mount, MountOptions} from '@vue/test-utils';
-import config, {localVue, filters} from '@/../tests/init';
+import config, {localVue} from '@/../tests/init';
 
 import ShippingSettings from './shipping-settings.vue';
 import TableRowCarrier from './table-row-carrier.vue';
@@ -21,7 +21,7 @@ describe('shipping-settings.vue', () => {
     ...options,
   });
 
-  it('is visible', () => {
+  it('is visible', async () => {
     const wrapper = buildWrapper({
       propsData: {
         countries: ['FR'],
@@ -29,13 +29,15 @@ describe('shipping-settings.vue', () => {
         displayValidationErrors: false,
       },
     });
+    const changeCountryCodeToNameSpy = vi.spyOn(wrapper.vm, 'changeCountryCodeToName');
+    await wrapper.vm.$forceUpdate();
     expect(wrapper.isVisible()).toBe(true);
     // Country selector
-    expect(filters.changeCountriesCodesToNames).toHaveBeenCalledTimes(1);
+    expect(changeCountryCodeToNameSpy).toHaveBeenCalledTimes(1);
     expect(wrapper.find('#table-carriers').isVisible()).toBe(true);
   });
 
-  it('shows a default message when there are no selected countries', () => {
+  it('shows a default message when there are no selected countries', async () => {
     const wrapper = buildWrapper({
       propsData: {
         countries: [],
@@ -43,7 +45,9 @@ describe('shipping-settings.vue', () => {
         displayValidationErrors: false,
       },
     });
-    expect(filters.changeCountriesCodesToNames).toHaveBeenCalledTimes(0);
+    const changeCountryCodeToNameSpy = vi.spyOn(wrapper.vm, 'changeCountryCodeToName');
+    await wrapper.vm.$forceUpdate();
+    expect(changeCountryCodeToNameSpy).toHaveBeenCalledTimes(0);
     expect(wrapper.findAllComponents(TableRowCarrier)).toHaveLength(0);
     expect(wrapper.find('[data-test-id="no-carriers"]').isVisible()).toBe(true);
   });
@@ -89,7 +93,7 @@ describe('shipping-settings.vue', () => {
     });
   });
 
-  it('shows the table with carriers filtered by target countries (IT)', () => {
+  it('shows the table with carriers filtered by target countries (IT)', async () => {
     const wrapper = buildWrapper({
       propsData: {
         countries: ['IT'],
@@ -97,8 +101,10 @@ describe('shipping-settings.vue', () => {
         displayValidationErrors: false,
       },
     });
+    const changeCountryCodeToNameSpy = vi.spyOn(wrapper.vm, 'changeCountryCodeToName');
+    await wrapper.vm.$forceUpdate();
     // Country selector
-    expect(filters.changeCountriesCodesToNames).toHaveBeenCalledTimes(1);
+    expect(changeCountryCodeToNameSpy).toHaveBeenCalledTimes(1);
     expect(wrapper.findAllComponents(TableRowCarrier)).toHaveLength(4);
     expect(wrapper.findAllComponents(TableRowCarrier).at(0).props('carrier')).toEqual({
       carrierId: '9',
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 897ad164ce..6f9bee64cc 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,7 +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';
+import {timeConverterToHour, timeConverterToStringifiedDate} from '@/utils/Dates';
 
 dayjs.extend(duration);
 
diff --git a/_dev/apps/ui/src/main.ts b/_dev/apps/ui/src/main.ts
index 7549300cdb..77ed88391e 100644
--- a/_dev/apps/ui/src/main.ts
+++ b/_dev/apps/ui/src/main.ts
@@ -7,7 +7,6 @@ import store from './store';
 import App from './App.vue';
 import i18n from './lib/i18n';
 import './assets/scss/app.scss';
-import './utils/Filters';
 // import showdown extension
 import '../showdown.js';
 import '@/utils/Sentry';
diff --git a/_dev/apps/ui/src/utils/Filters.ts b/_dev/apps/ui/src/utils/Filters.ts
deleted file mode 100644
index 3807ffffc8..0000000000
--- a/_dev/apps/ui/src/utils/Filters.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import Vue from 'vue';
-
-import {changeCountriesCodesToNames} from './Countries';
-import {formatPrice} from './Price';
-import {timeConverterToDate, timeConverterToHour, timeConverterToStringifiedDate} from './Dates';
-
-Vue.filter('timeConverterToDate', timeConverterToDate);
-
-Vue.filter('timeConverterToStringifiedDate', timeConverterToStringifiedDate);
-
-Vue.filter('timeConverterToHour', timeConverterToHour);
-
-Vue.filter('changeCountriesCodesToNames', changeCountriesCodesToNames);
-
-Vue.filter('formatPrice', formatPrice);
-
-Vue.filter(
-  'slugify', (...args: (string | number)[]): string => {
-    const value = args.join(' ');
-
-    return value
-      .normalize('NFD') // split an accented letter in the base letter and the acent
-      .replace(/[\u0300-\u036f]/g, '') // remove all previously split accents
-      .toLowerCase()
-      .trim()
-      .replace(/[^a-z0-9 ]/g, '') // remove all chars not letters, numbers and spaces (to be replaced)
-      .replace(/\s+/g, '-'); // separator
-  });
diff --git a/_dev/apps/ui/src/utils/Slugify.ts b/_dev/apps/ui/src/utils/Slugify.ts
new file mode 100644
index 0000000000..00241168ce
--- /dev/null
+++ b/_dev/apps/ui/src/utils/Slugify.ts
@@ -0,0 +1,13 @@
+export const slugify = (...args: (string | number)[]): string => {
+  const value = args.join(' ');
+
+  return value
+    .normalize('NFD') // split an accented letter in the base letter and the acent
+    .replace(/[\u0300-\u036f]/g, '') // remove all previously split accents
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9 ]/g, '') // remove all chars not letters, numbers and spaces (to be replaced)
+    .replace(/\s+/g, '-'); // separator
+};
+
+export default slugify;
diff --git a/_dev/apps/ui/tests/init.ts b/_dev/apps/ui/tests/init.ts
index 1cbd3a228c..86e1910723 100644
--- a/_dev/apps/ui/tests/init.ts
+++ b/_dev/apps/ui/tests/init.ts
@@ -11,7 +11,6 @@ import '../showdown.js';
 let windowSpy;
 let localVue; // eslint-disable-line
 const defaultLocale = 'en';
-let filters; // eslint-disable-line
 let VBTooltip;
 
 beforeAll(() => {
@@ -29,19 +28,7 @@ beforeEach(() => {
     i18nSettings: {isoCode: 'fr', languageLocale: 'fr'},
   }));
   VBTooltip = vi.fn();
-  filters = {
-    timeConverterToDate: vi.fn(),
-    timeConverterToHour: vi.fn(),
-    changeCountriesCodesToNames: vi.fn().mockImplementation(changeCountriesCodesToNames),
-    timeConverterToStringifiedDate: vi.fn().mockImplementation(() => ''),
-    slugify: vi.fn().mockImplementation(() => 'foo'),
-  };
-
-  localVue.filter('timeConverterToDate', filters.timeConverterToDate);
-  localVue.filter('timeConverterToHour', filters.timeConverterToHour);
-  localVue.filter('changeCountriesCodesToNames', filters.changeCountriesCodesToNames);
-  localVue.filter('timeConverterToStringifiedDate', filters.timeConverterToStringifiedDate);
-  localVue.filter('slugify', filters.slugify);
+
   localVue.directive('b-tooltip', VBTooltip);
 
   initOnboardingClient({
@@ -92,7 +79,7 @@ export default {config};
 
 export {cloneStore} from './store';
 
-export {localVue, filters};
+export {localVue};
 
 export const addShowdownToVue = () => {
   localVue.use(VueShowdown);

From 68d53f684899ae7e063d14afa8024f06f7d5cb67 Mon Sep 17 00:00:00 2001
From: Thomas Nabord <thomas.nabord@prestashop.com>
Date: Wed, 3 Jan 2024 10:21:12 +0100
Subject: [PATCH 4/4] Remove use of  and

---
 .../campaign/campaign-table-list.spec.ts      |  8 +++---
 .../campaign/campaign-table-list.vue          |  8 ++----
 .../commons/page-number-selector.vue          | 28 +++++++++++--------
 .../commons/result-number-selector.vue        |  2 +-
 .../commons/table-page-controls.vue           | 17 +++++++----
 .../non-compliant-products-details-page.vue   |  8 ++----
 6 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/_dev/apps/ui/src/components/campaign/campaign-table-list.spec.ts b/_dev/apps/ui/src/components/campaign/campaign-table-list.spec.ts
index c52192e336..73e0042cf1 100644
--- a/_dev/apps/ui/src/components/campaign/campaign-table-list.spec.ts
+++ b/_dev/apps/ui/src/components/campaign/campaign-table-list.spec.ts
@@ -412,7 +412,7 @@ describe('CampaignTableList', () => {
       expect(wrapper.findComponent(tablePageControlsVue).exists()).toBe(true);
       expect(wrapper.vm.activePage).toBe(1);
 
-      await wrapper.vm.$root.$emit('changePage', 3);
+      await wrapper.findComponent(tablePageControlsVue).vm.$emit('changePage', 3);
 
       expect(wrapper.vm.activePage).toBe(3);
     });
@@ -427,7 +427,7 @@ describe('CampaignTableList', () => {
       expect(wrapper.findComponent(tablePageControlsVue).exists()).toBe(true);
       expect(wrapper.vm.totalPages).toBe(13);
 
-      await wrapper.vm.$root.$emit('changeLimit', 50);
+      await wrapper.findComponent(tablePageControlsVue).vm.$emit('changeLimit', 50);
 
       expect(wrapper.vm.totalPages).toBe(3);
     });
@@ -445,10 +445,10 @@ describe('CampaignTableList', () => {
 
       expect(campaignsListAction).toHaveBeenCalledTimes(1);
 
-      await wrapper.vm.$root.$emit('changeLimit', 50);
+      await wrapper.findComponent(tablePageControlsVue).vm.$emit('changeLimit', 50);
       expect(campaignsListAction).toHaveBeenCalledTimes(2);
 
-      await wrapper.vm.$root.$emit('changePage', 3);
+      await wrapper.findComponent(tablePageControlsVue).vm.$emit('changePage', 3);
       expect(campaignsListAction).toHaveBeenCalledTimes(3);
     });
   });
diff --git a/_dev/apps/ui/src/components/campaign/campaign-table-list.vue b/_dev/apps/ui/src/components/campaign/campaign-table-list.vue
index 6dfb97495b..4546e527bd 100644
--- a/_dev/apps/ui/src/components/campaign/campaign-table-list.vue
+++ b/_dev/apps/ui/src/components/campaign/campaign-table-list.vue
@@ -107,6 +107,8 @@
           :total-pages="totalPages"
           :active-page="activePage"
           :selected-filter-quantity-to-show="pageSize"
+          @changeLimit="changeLimit"
+          @changePage="changePageTo"
         />
       </b-card-body>
     </b-card>
@@ -248,15 +250,9 @@ export default defineComponent({
     },
   },
   mounted() {
-    this.$root.$on('changeLimit', this.changeLimit);
-    this.$root.$on('changePage', this.changePageTo);
     this.fetchCampaigns();
     this.$store.dispatch('campaigns/GET_DIMENSIONS_FILTERS', null);
   },
-  beforeDestroy() {
-    this.$root.$off('changeLimit', this.changeLimit);
-    this.$root.$off('changePage', this.changePageTo);
-  },
   googleUrl,
   CampaignTypes,
 });
diff --git a/_dev/apps/ui/src/components/commons/page-number-selector.vue b/_dev/apps/ui/src/components/commons/page-number-selector.vue
index a4b1a18641..dd2662fe52 100644
--- a/_dev/apps/ui/src/components/commons/page-number-selector.vue
+++ b/_dev/apps/ui/src/components/commons/page-number-selector.vue
@@ -1,13 +1,15 @@
 <template>
   <div class="ps_gs-table-controls__go-to d-flex align-items-center">
     <span class="flex-shrink-0">{{ $t('productFeedPage.approvalTable.goToLabel') }}</span>
-    <b-form-input
-      class="ml-2 maxw-sm-72 flex-grow-0"
-      type="text"
-      size="sm"
-      pattern="[0-9]*"
-      v-model.number="nbPageToGo"
-    />
+    <b-form @submit.prevent="goToPage">
+      <b-form-input
+        class="ml-2 maxw-sm-72 flex-grow-0"
+        type="text"
+        size="sm"
+        pattern="[0-9]*"
+        v-model.number="nbPageToGo"
+      />
+    </b-form>
     <b-button
       variant="primary"
       class="ml-2"
@@ -19,18 +21,20 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import {defineComponent} from 'vue';
+
+export default defineComponent({
   name: 'PageNumberSelector',
   data() {
     return {
-      nbPageToGo: null,
+      nbPageToGo: null as number|null,
     };
   },
   methods: {
     goToPage() {
-      this.$root.$emit('changePage', this.nbPageToGo);
+      this.$emit('changePage', this.nbPageToGo);
     },
   },
-};
+});
 </script>
diff --git a/_dev/apps/ui/src/components/commons/result-number-selector.vue b/_dev/apps/ui/src/components/commons/result-number-selector.vue
index 1ae40f0e97..7e1e50bf87 100644
--- a/_dev/apps/ui/src/components/commons/result-number-selector.vue
+++ b/_dev/apps/ui/src/components/commons/result-number-selector.vue
@@ -32,7 +32,7 @@ export default {
   methods: {
     onChangeLimit(limitChosen) {
       this.selectedFilterQuantityToShow = limitChosen;
-      this.$root.$emit('changeLimit', Number(limitChosen));
+      this.$emit('changeLimit', Number(limitChosen));
     },
 
   },
diff --git a/_dev/apps/ui/src/components/commons/table-page-controls.vue b/_dev/apps/ui/src/components/commons/table-page-controls.vue
index ba50a9085f..8d59c2022c 100644
--- a/_dev/apps/ui/src/components/commons/table-page-controls.vue
+++ b/_dev/apps/ui/src/components/commons/table-page-controls.vue
@@ -14,6 +14,7 @@
   >
     <ResultNumberSelector
       :selected-filter-quantity-to-show="selectedFilterQuantityToShow"
+      @changeLimit="$emit('changeLimit', $event)"
     />
 
     <nav
@@ -30,15 +31,19 @@
         class="mb-0"
       />
     </nav>
-    <PageNumberSelector v-if="needPageSelector" />
+    <PageNumberSelector
+      v-if="needPageSelector"
+      @changePage="goToPage($event)"
+    />
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import {defineComponent} from 'vue';
 import PageNumberSelector from './page-number-selector.vue';
 import ResultNumberSelector from './result-number-selector.vue';
 
-export default {
+export default defineComponent({
   name: 'TableControls',
   components: {
     PageNumberSelector,
@@ -66,11 +71,11 @@ export default {
     },
   },
   methods: {
-    goToPage(page) {
+    goToPage(page: number) {
       if (page > 0 && page <= this.totalPages) {
-        this.$root.$emit('changePage', page);
+        this.$emit('changePage', page);
       }
     },
   },
-};
+});
 </script>
diff --git a/_dev/apps/ui/src/components/product-feed-page/non-compliant-products-details-page/non-compliant-products-details-page.vue b/_dev/apps/ui/src/components/product-feed-page/non-compliant-products-details-page/non-compliant-products-details-page.vue
index 5d52fd170b..42c09e45ed 100644
--- a/_dev/apps/ui/src/components/product-feed-page/non-compliant-products-details-page/non-compliant-products-details-page.vue
+++ b/_dev/apps/ui/src/components/product-feed-page/non-compliant-products-details-page/non-compliant-products-details-page.vue
@@ -120,6 +120,8 @@
           :total-pages="totalPages"
           :active-page="activePage+1"
           :selected-filter-quantity-to-show="pageSize"
+          @changeLimit="pageChanged"
+          @changePage="limitChanged"
         />
       </b-card-body>
     </b-card>
@@ -212,12 +214,6 @@ export default defineComponent({
   },
   mounted() {
     this.getIssues();
-    this.$root.$on('changePage', this.pageChanged);
-    this.$root.$on('changeLimit', this.limitChanged);
-  },
-  beforeDestroy() {
-    this.$root.$off('changePage', this.pageChanged);
-    this.$root.$off('changeLimit', this.limitChanged);
   },
 });
 </script>