feat(vue): add vendor-id as attribute to placeholders

src/vue/components/EmbedConsent/__snapshots__/EmbedConsent.test.ts.snap

@@ -3,6 +3,7 @@
 exports[`EmbedConsent component should render the placeholder by default 1`] = `
 <div
   class="embed-placeholder__container"
+  data-vendor-id="abc"
 >
   <div
     class="embed-placeholder__header"

src/vue/components/EmbedFacebookConsent/EmbedFacebookConsent.vue

@@ -1,7 +1,10 @@
 <template>
   <consent-wrapper :vendor-id="vendorId">
     <template #disabledContent>
-      <embed-facebook-placeholder :privacy-manager-id="privacyManagerId" />
+      <embed-facebook-placeholder
+        :privacy-manager-id="privacyManagerId"
+        :vendor-id="vendorId"
+      />
     </template>
     <template #enabledContent>
       <embed-content :content="content" />
@@ -16,28 +19,26 @@ import { ConsentWrapper } from '../ConsentWrapper';
 import { EmbedContent } from '../EmbedContent';
 import { VENDOR_ID_FACEBOOK } from '../../../vendor-mapping';
 
-type Data = {
-  vendorId: string;
-};
-
 type Props = {
+  vendorId: string;
   content: string | null;
   privacyManagerId: number;
 };
 
 type NonNullish = Record<string, unknown>;
 
-export default Vue.extend<Data, NonNullish, NonNullish, Props>({
+export default Vue.extend<NonNullish, NonNullish, NonNullish, Props>({
   name: 'EmbedFacebookConsent',
   components: { ConsentWrapper, EmbedFacebookPlaceholder, EmbedContent },
-  data: () => ({
-    vendorId: VENDOR_ID_FACEBOOK,
-  }),
   props: {
     content: {
       type: String,
       default: '',
     },
+    vendorId: {
+      type: String,
+      default: VENDOR_ID_FACEBOOK,
+    },
     privacyManagerId: {
       type: Number,
       required: true,

src/vue/components/EmbedFacebookConsent/__snapshots__/EmbedFacebookConsent.test.ts.snap

@@ -3,6 +3,7 @@
 exports[`EmbedFacebookConsent component should render the placeholder by default 1`] = `
 <div
   class="embed-placeholder__container"
+  data-vendor-id="5ee91b9593fc094b59242e25"
 >
   <div
     class="embed-placeholder__header"

src/vue/components/EmbedFacebookPlaceholder/EmbedFacebookPlaceholder.vue

@@ -1,5 +1,8 @@
 <template>
-  <embed-social-networks-placeholder :privacy-manager-id="privacyManagerId">
+  <embed-social-networks-placeholder
+    :privacy-manager-id="privacyManagerId"
+    :vendor-id="vendorId"
+  >
     <template #header>
       <svg
         width="100%"
@@ -64,10 +67,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { VENDOR_ID_FACEBOOK } from '../../../vendor-mapping';
 import { EmbedSocialNetworksPlaceholder } from '../EmbedSocialNetworksPlaceholder';
 
 type Props = {
   privacyManagerId: number;
+  vendorId: string;
 };
 
 type NonNullish = Record<string, unknown>;
@@ -80,6 +85,10 @@ export default Vue.extend<NonNullish, NonNullish, NonNullish, Props>({
       type: Number,
       required: true,
     },
+    vendorId: {
+      type: String,
+      default: VENDOR_ID_FACEBOOK,
+    },
   },
 });
 </script>

src/vue/components/EmbedFacebookPlaceholder/__snapshots__/EmbedFacebookPlaceholder.test.ts.snap

@@ -3,6 +3,7 @@
 exports[`EmbedFacebookPlaceholder should render without any errors 1`] = `
 <div
   class="embed-placeholder__container"
+  data-vendor-id="5ee91b9593fc094b59242e25"
 >
   <div
     class="embed-placeholder__header"

src/vue/components/EmbedInstagramConsent/EmbedInstagramConsent.vue

@@ -1,7 +1,10 @@
 <template>
   <consent-wrapper :vendor-id="vendorId">
     <template #disabledContent>
-      <embed-instagram-placeholder :privacy-manager-id="privacyManagerId" />
+      <embed-instagram-placeholder
+        :privacy-manager-id="privacyManagerId"
+        :vendor-id="vendorId"
+      />
     </template>
     <template #enabledContent>
       <embed-instagram :content="content" />
@@ -16,28 +19,26 @@ import { EmbedInstagramPlaceholder } from '../EmbedInstagramPlaceholder';
 import { EmbedInstagram } from '../EmbedInstagram';
 import { VENDOR_ID_INSTAGRAM } from '../../../vendor-mapping';
 
-type Data = {
-  vendorId: string;
-};
-
 type Props = {
+  vendorId: string;
   content: string;
   privacyManagerId: number;
 };
 
 type NonNullish = Record<string, unknown>;
 
-export default Vue.extend<Data, NonNullish, NonNullish, Props>({
+export default Vue.extend<NonNullish, NonNullish, NonNullish, Props>({
   name: 'EmbedInstagramConsent',
   components: { EmbedInstagram, EmbedInstagramPlaceholder, ConsentWrapper },
-  data: () => ({
-    vendorId: VENDOR_ID_INSTAGRAM,
-  }),
   props: {
     privacyManagerId: {
       type: Number,
       required: true,
     },
+    vendorId: {
+      type: String,
+      default: VENDOR_ID_INSTAGRAM,
+    },
     content: {
       type: String,
       default: '',

src/vue/components/EmbedInstagramConsent/__snapshots__/EmbedInstagramConsent.test.ts.snap

@@ -3,6 +3,7 @@
 exports[`EmbedInstagramConsent component should render the placeholder by default 1`] = `
 <div
   class="embed-placeholder__container"
+  data-vendor-id="5e717c8e69966540e4554f05"
 >
   <div
     class="embed-placeholder__header"

src/vue/components/EmbedInstagramPlaceholder/EmbedInstagramPlaceholder.vue

@@ -1,5 +1,8 @@
 <template>
-  <embed-social-networks-placeholder :privacy-manager-id="privacyManagerId">
+  <embed-social-networks-placeholder
+    :privacy-manager-id="privacyManagerId"
+    :vendor-id="vendorId"
+  >
     <template #header>
       <svg
         width="100%"
@@ -51,10 +54,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { VENDOR_ID_INSTAGRAM } from '../../../vendor-mapping';
 import { EmbedSocialNetworksPlaceholder } from '../EmbedSocialNetworksPlaceholder';
 
 type Props = {
   privacyManagerId: number;
+  vendorId: string;
 };
 
 type NonNullish = Record<string, unknown>;
@@ -67,6 +72,10 @@ export default Vue.extend<NonNullish, NonNullish, NonNullish, Props>({
       type: Number,
       required: true,
     },
+    vendorId: {
+      type: String,
+      default: VENDOR_ID_INSTAGRAM,
+    },
   },
 });
 </script>

src/vue/components/EmbedInstagramPlaceholder/__snapshots__/EmbedInstagramPlaceholder.test.ts.snap

@@ -3,6 +3,7 @@
 exports[`EmbedInstagramPlaceholder should render without any errors 1`] = `
 <div
   class="embed-placeholder__container"
+  data-vendor-id="5e717c8e69966540e4554f05"
 >
   <div
     class="embed-placeholder__header"

src/vue/components/EmbedPlaceholder/EmbedPlaceholder.test.ts

@@ -42,7 +42,9 @@ describe('EmbedPlaceholder', () => {
   });
 
   it('should render without any errors', () => {
-    expect(mount(EmbedPlaceholder, { propsData: { privacyManagerId: 123 } }).element).toMatchSnapshot();
+    expect(
+      mount(EmbedPlaceholder, { propsData: { privacyManagerId: 123, vendorId: 'abc' } }).element,
+    ).toMatchSnapshot();
   });
 
   it('should give a consent to given vendor', () => {

src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="embed-placeholder__container">
+  <div
+    class="embed-placeholder__container"
+    :data-vendor-id="vendorId"
+  >
     <div class="embed-placeholder__header">
       <slot name="header">
         <svg

src/vue/components/EmbedPlaceholder/__snapshots__/EmbedPlaceholder.test.ts.snap

@@ -3,6 +3,7 @@
 exports[`EmbedPlaceholder should render without any errors 1`] = `
 <div
   class="embed-placeholder__container"
+  data-vendor-id="abc"
 >
   <div
     class="embed-placeholder__header"

src/vue/components/EmbedPodigeeConsent/EmbedPodigeeConsent.test.ts

@@ -2,6 +2,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { EmbedPodigeeConsent } from './';
 import { sourcepoint } from '../../vuex/sourcepoint';
+import { VENDOR_ID_PODIGEE } from '../../../vendor-mapping';
 
 const localVue = createLocalVue();
 
@@ -21,7 +22,6 @@ describe('EmbedPodigeeConsent component', () => {
   it('should render the placeholder by default', () => {
     const wrapper = mount(EmbedPodigeeConsent, {
       propsData: {
-        vendorId: 'abc',
         privacyManagerId: 123,
       },
       store,
@@ -32,12 +32,11 @@ describe('EmbedPodigeeConsent component', () => {
   });
 
   it('should render the embed in case of a consented vendor', () => {
-    store.commit('sourcepoint/setGrantedVendors', ['abc']);
+    store.commit('sourcepoint/setGrantedVendors', [VENDOR_ID_PODIGEE]);
 
     const wrapper = mount(EmbedPodigeeConsent, {
       propsData: {
         content: '<div>Podigee Content</div>',
-        vendorId: 'abc',
         privacyManagerId: 123,
       },
       store,
@@ -54,11 +53,10 @@ describe('EmbedPodigeeConsent component', () => {
   });
 
   it('should provide an embed slot for overriding the default consent content', () => {
-    store.commit('sourcepoint/setGrantedVendors', ['abc']);
+    store.commit('sourcepoint/setGrantedVendors', [VENDOR_ID_PODIGEE]);
 
     const wrapper = mount(EmbedPodigeeConsent, {
       propsData: {
-        vendorId: 'abc',
         privacyManagerId: 123,
       },
       slots: {

src/vue/components/EmbedPodigeeConsent/EmbedPodigeeConsent.vue

@@ -1,7 +1,10 @@
 <template>
   <consent-wrapper :vendor-id="vendorId">
     <template #disabledContent>
-      <embed-social-networks-placeholder :privacy-manager-id="privacyManagerId" />
+      <embed-social-networks-placeholder
+        :privacy-manager-id="privacyManagerId"
+        :vendor-id="vendorId"
+      />
     </template>
     <template #enabledContent>
       <slot name="embed">
@@ -16,6 +19,7 @@ import Vue from 'vue';
 import { ConsentWrapper } from '../ConsentWrapper';
 import { EmbedSocialNetworksPlaceholder } from '../EmbedSocialNetworksPlaceholder';
 import { EmbedPodigee } from '../EmbedPodigee';
+import { VENDOR_ID_PODIGEE } from '../../../vendor-mapping';
 
 type Props = {
   vendorId: string;
@@ -35,8 +39,8 @@ export default Vue.extend<NonNullish, NonNullish, NonNullish, Props>({
     },
     vendorId: {
       type: String,
-      required: true,
-    },
+      default: VENDOR_ID_PODIGEE,
+    },    
     privacyManagerId: {
       type: Number,
       required: true,

src/vue/components/EmbedPodigeeConsent/__snapshots__/EmbedPodigeeConsent.test.ts.snap

@@ -3,6 +3,7 @@
 exports[`EmbedPodigeeConsent component should render the placeholder by default 1`] = `
 <div
   class="embed-placeholder__container"
+  data-vendor-id="5e717ad49a0b5040d5750815"
 >
   <div
     class="embed-placeholder__header"

src/vue/components/EmbedSocialNetworksConsent/EmbedSocialNetworksConsent.vue

@@ -1,7 +1,10 @@
 <template>
   <consent-wrapper :vendor-id="vendorId">
     <template #disabledContent>
-      <embed-social-networks-placeholder :privacy-manager-id="privacyManagerId" />
+      <embed-social-networks-placeholder
+        :privacy-manager-id="privacyManagerId"
+        :vendor-id="vendorId"
+      />
     </template>
     <template #enabledContent>
       <embed-content :content="content" />

src/vue/components/EmbedSocialNetworksConsent/__snapshots__/EmbedSocialNetworksConsent.test.ts.snap

@@ -11,6 +11,7 @@ exports[`EmbedSocialNetworksConsent component should render the embed in case of
 exports[`EmbedSocialNetworksConsent component should render the placeholder by default 1`] = `
 <div
   class="embed-placeholder__container"
+  data-vendor-id="abc"
 >
   <div
     class="embed-placeholder__header"

src/vue/components/EmbedSocialNetworksPlaceholder/EmbedSocialNetworksPlaceholder.test.ts

@@ -3,6 +3,8 @@ import { EmbedSocialNetworksPlaceholder } from './';
 
 describe('EmbedSocialNetworksPlaceholder', () => {
   it('should render without any errors', () => {
-    expect(mount(EmbedSocialNetworksPlaceholder, { propsData: { privacyManagerId: 12345 } }).element).toMatchSnapshot();
+    expect(
+      mount(EmbedSocialNetworksPlaceholder, { propsData: { privacyManagerId: 12345, vendorId: 'abc' } }).element,
+    ).toMatchSnapshot();
   });
 });

src/vue/components/EmbedSocialNetworksPlaceholder/EmbedSocialNetworksPlaceholder.vue

@@ -2,6 +2,7 @@
   <embed-placeholder
     :privacy-manager-id="privacyManagerId"
     :purpose-id="purposeId"
+    :vendor-id="vendorId"
   >
     <template #header>
       <slot name="header">
@@ -75,6 +76,7 @@ import { PURPOSE_ID_SOCIAL } from '../../../vendor-mapping';
 
 type Props = {
   privacyManagerId: number;
+  vendorId: string;
 };
 
 type Data = {
@@ -94,6 +96,10 @@ export default Vue.extend<Data, NonNullish, NonNullish, Props>({
       type: Number,
       required: true,
     },
+    vendorId: {
+      type: String,
+      default: '',
+    },
   },
 });
 </script>

src/vue/components/EmbedSocialNetworksPlaceholder/__snapshots__/EmbedSocialNetworksPlaceholder.test.ts.snap

@@ -3,6 +3,7 @@
 exports[`EmbedSocialNetworksPlaceholder should render without any errors 1`] = `
 <div
   class="embed-placeholder__container"
+  data-vendor-id="abc"
 >
   <div
     class="embed-placeholder__header"