From ccf03c034eed920705fc326b7ca2e1062c953a7d 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] 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 +++-
 .../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 ++---------
 8 files changed, 34 insertions(+), 50 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/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);