Remove use of filters in <template> tags

_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';

_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: {

_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) {

_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,29 +21,33 @@ describe('shipping-settings.vue', () => {
     ...options,
   });
 
-  it('is visible', () => {
+  it('is visible', async () => {
     const wrapper = buildWrapper({
       propsData: {
         countries: ['FR'],
         carriers: [],
         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: [],
         carriers: [],
         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,16 +93,18 @@ 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'],
         carriers: productFeed.settings.deliveryDetails.filter((carrier) => carrier.country === 'IT'),
         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',

_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);
 

_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';

_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;

_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);