@empathyco/x-components
Version:
Empathy X Components
105 lines (102 loc) • 3.43 kB
JavaScript
import { defineComponent, inject, computed, onMounted, watch } from 'vue';
import { useXBus } from '../../../composables/use-x-bus.js';
import { taggingXModule } from '../x-module.js';
/**
* This component enables and manages the sending of information to the
* [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).
* It allows you to activate or deactivate the session id management through the `consent` prop.
*
* @public
*/
var _sfc_main = defineComponent({
name: 'Tagging',
xModule: taggingXModule.name,
props: {
/**
* The TTL in milliseconds for storing the result info.
*/
storageTTLMs: {
type: Number,
default: 30000,
},
/**
* The Object key of the {@link @empathyco/x-types#Result} clicked or added to the cart by the user
* that will be used as id for the storage.
* By default, the Result url will be used.
*/
storageKey: {
type: String,
default: 'url',
},
/**
* The session TTL in milliseconds.
*/
sessionTTLMs: Number,
/**
* The debounce time in milliseconds to track the query.
*/
queryTaggingDebounceMs: {
type: Number,
default: 2000,
},
/**
* The consent to be emitted.
*/
consent: {
type: Boolean,
default: null,
},
},
setup(props) {
const xBus = useXBus();
/**
* It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
*/
const snippetConfig = inject('snippetConfig');
/**
* The active consent, selected from the `consent` prop and the `snippetConfig.consent`
* property. False by default.
*
* @remarks If the consent is undefined in the prop and in the snippetConfig, it will return
* false.
*
* @returns A boolean that represents if the consent is accepted or not.
*/
const activeConsent = computed(() => props.consent ?? snippetConfig?.consent ?? false);
/**
* The tagging config to be emitted.
*/
const taggingConfig = computed(() => {
return {
queryTaggingDebounceMs: props.queryTaggingDebounceMs,
sessionTTLMs: props.sessionTTLMs,
storageTTLMs: props.storageTTLMs,
storageKey: props.storageKey,
};
});
/**
* Emits the {@link TaggingXEvents.PDPIsLoaded} XEvent if the snippet config contains
* a product id.
*/
onMounted(() => {
if (snippetConfig?.productId) {
xBus.emit('PDPIsLoaded', snippetConfig.productId);
}
});
/**
* Emmits the consent when it changes.
*/
watch(activeConsent, () => xBus.emit('ConsentProvided', activeConsent.value), {
immediate: true,
});
/**
* Emmits the tagging config when it changes.
*/
watch(taggingConfig, () => xBus.emit('TaggingConfigProvided', taggingConfig.value), {
immediate: true,
});
return () => { };
},
});
export { _sfc_main as default };
//# sourceMappingURL=tagging.vue.js.map