From 6e154291ddc3b77e2c108143839bf8778117acd7 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Wed, 19 Jun 2024 22:59:50 +0200
Subject: [PATCH] feat: migrate SnippetConfigExtraParams

---
 .../snippet-config-extra-params.vue           | 121 +++++++-----------
 1 file changed, 47 insertions(+), 74 deletions(-)

diff --git a/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue b/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue
index a6e86d798c..2728e89732 100644
--- a/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue
+++ b/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue
@@ -4,87 +4,60 @@
 
 <script lang="ts">
   import { forEach, Dictionary } from '@empathyco/x-utils';
-  import Vue from 'vue';
-  import { Component, Inject, Prop, Watch } from 'vue-property-decorator';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { defineComponent, inject, ref, watch } from 'vue';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
   import { extraParamsXModule } from '../x-module';
   import ExtraParams from './extra-params.vue';
 
-  /**
-   * Extracts the extra parameters from the {@link SnippetConfig} and syncs it with the request
-   * objects of every x-module.
-   *
-   * @public
-   */
-  @Component({
-    components: { ExtraParams },
-    mixins: [xComponentMixin(extraParamsXModule)]
-  })
-  export default class SnippetConfigExtraParams extends Vue {
-    /**
-     * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
-     *
-     * @internal
-     */
-    @Inject('snippetConfig')
-    public snippetConfig!: SnippetConfig;
-
-    /**
-     * A Dictionary where the keys are the extra param names and its values.
-     *
-     * @public
-     */
-    @Prop()
-    protected values?: Dictionary<unknown>;
-
-    /**
-     * Custom object containing the extra params from the snippet config and the values prop.
-     *
-     * @remarks This object keeps manually the desired snippet config properties to avoid
-     * unnecessary re-renders.
-     *
-     * @returns A dictionary with the extra params.
-     *
-     * @internal
-     */
-    protected extraParams: Dictionary<unknown> = {};
+  export default defineComponent({
+    name: 'SnippetConfigExtraParams',
+    xModule: extraParamsXModule.name,
+    components: {
+      ExtraParams
+    },
+    props: {
+      values: {
+        type: Object as () => Dictionary<unknown>,
+        required: true
+      },
+      excludedExtraParams: {
+        type: Array as () => Array<keyof SnippetConfig>,
+        default: (): Array<keyof SnippetConfig> => [
+          'callbacks',
+          'productId',
+          'uiLang',
+          'consent',
+          'documentDirection',
+          'filters',
+          'isSpa',
+          'queriesPreview'
+        ]
+      }
+    },
+    setup(props) {
+      const snippetConfig = inject('snippetConfig') as SnippetConfig;
+      const extraParams = ref({});
 
-    /**
-     * Updates the extraParams object when the snippet config or the values prop changes.
-     *
-     * @internal
-     */
-    @Watch('snippetConfig', { deep: true, immediate: true })
-    @Watch('values', { deep: true, immediate: true })
-    syncExtraParams(): void {
-      forEach({ ...this.values, ...this.snippetConfig }, (name, value) => {
-        if (!this.excludedExtraParams.includes(name)) {
-          this.$set(this.extraParams, name, value);
+      watch(
+        [() => snippetConfig, () => props.values],
+        () => {
+          forEach({ ...props.values, ...snippetConfig }, (name, value) => {
+            if (!props.excludedExtraParams.includes(name)) {
+              extraParams.value = { ...extraParams.value, [name]: value };
+            }
+          });
+        },
+        {
+          deep: true,
+          immediate: true
         }
-      });
-    }
+      );
 
-    /**
-     * Collection of properties from the snippet config to exclude from the
-     * extra params object.
-     *
-     * @public
-     */
-    @Prop({
-      default: (): Array<keyof SnippetConfig> => [
-        'callbacks',
-        'productId',
-        'uiLang',
-        'consent',
-        'documentDirection',
-        'filters',
-        'isSpa',
-        'queriesPreview'
-      ]
-    })
-    protected excludedExtraParams!: Array<keyof SnippetConfig>;
-  }
+      return {
+        extraParams
+      };
+    }
+  });
 </script>
 
 <docs lang="mdx">