@livechat/widget-vue/dist/widget-vue.cjs.js

This library allows to render and interact with the LiveChat Chat Widget inside a Vue 3 application

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var widgetCore = require('@livechat/widget-core');

function useWidgetIsReady() {
  var isReady = vue.ref(false);
  var unsubscribeInit = null;
  var unsubscribeDestroy = null;

  var onReady = function onReady() {
    isReady.value = true;
  };

  vue.onMounted(function () {
    unsubscribeInit = widgetCore.lcOnInit(function () {
      widgetCore.assignEventHandlers('once', {
        onReady: onReady
      });
    });
    unsubscribeDestroy = widgetCore.lcOnDestroy(function () {
      isReady.value = false;
    });
  });
  vue.onUnmounted(function () {
    var _unsubscribeInit, _unsubscribeDestroy;

    widgetCore.assignEventHandlers('off', {
      onReady: onReady
    });
    (_unsubscribeInit = unsubscribeInit) === null || _unsubscribeInit === void 0 ? void 0 : _unsubscribeInit();
    (_unsubscribeDestroy = unsubscribeDestroy) === null || _unsubscribeDestroy === void 0 ? void 0 : _unsubscribeDestroy();
  });
  return isReady;
}

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    enumerableOnly && (symbols = symbols.filter(function (sym) {
      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
    })), keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = null != arguments[i] ? arguments[i] : {};
    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
      _defineProperty(target, key, source[key]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
    });
  }

  return target;
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function useWidgetState() {
  var widgetState = vue.ref(null);
  var unsubscribeInit = null;
  var unsubscribeDestroy = null;

  var onReady = function onReady(_ref) {
    var state = _ref.state;
    widgetState.value = state;
  };

  var onVisibilityChanged = function onVisibilityChanged(_ref2) {
    var visibility = _ref2.visibility;
    widgetState.value = widgetState.value ? _objectSpread2(_objectSpread2({}, widgetState.value), {}, {
      visibility: visibility
    }) : widgetState.value;
  };

  var onAvailabilityChanged = function onAvailabilityChanged(_ref3) {
    var availability = _ref3.availability;
    widgetState.value = widgetState.value ? _objectSpread2(_objectSpread2({}, widgetState.value), {}, {
      availability: availability
    }) : widgetState.value;
  };

  vue.onMounted(function () {
    unsubscribeInit = widgetCore.lcOnInit(function () {
      widgetCore.assignEventHandlers('once', {
        onReady: onReady
      });
      widgetCore.assignEventHandlers('on', {
        onVisibilityChanged: onVisibilityChanged,
        onAvailabilityChanged: onAvailabilityChanged
      });
    });
    unsubscribeDestroy = widgetCore.lcOnDestroy(function () {
      widgetState.value = null;
    });
  });
  vue.onUnmounted(function () {
    var _unsubscribeInit, _unsubscribeDestroy;

    widgetCore.assignEventHandlers('off', {
      onReady: onReady,
      onVisibilityChanged: onVisibilityChanged,
      onAvailabilityChanged: onAvailabilityChanged
    });
    (_unsubscribeInit = unsubscribeInit) === null || _unsubscribeInit === void 0 ? void 0 : _unsubscribeInit();
    (_unsubscribeDestroy = unsubscribeDestroy) === null || _unsubscribeDestroy === void 0 ? void 0 : _unsubscribeDestroy();
  });
  return widgetState;
}

function useWidgetCustomerData() {
  var customerData = vue.ref(null);
  var unsubscribeInit = null;
  var unsubscribeDestroy = null;

  var onReady = function onReady(payload) {
    customerData.value = payload.customerData;
  };

  var onCustomerStatusChanged = function onCustomerStatusChanged() {
    customerData.value = widgetCore.getData('customer');
  };

  vue.onMounted(function () {
    unsubscribeInit = widgetCore.lcOnInit(function () {
      widgetCore.assignEventHandlers('once', {
        onReady: onReady
      });
      widgetCore.assignEventHandlers('on', {
        onCustomerStatusChanged: onCustomerStatusChanged
      });
    });
    unsubscribeDestroy = widgetCore.lcOnDestroy(function () {
      customerData.value = null;
    });
  });
  vue.onUnmounted(function () {
    var _unsubscribeInit, _unsubscribeDestroy;

    widgetCore.assignEventHandlers('off', {
      onReady: onReady,
      onCustomerStatusChanged: onCustomerStatusChanged
    });
    (_unsubscribeInit = unsubscribeInit) === null || _unsubscribeInit === void 0 ? void 0 : _unsubscribeInit();
    (_unsubscribeDestroy = unsubscribeDestroy) === null || _unsubscribeDestroy === void 0 ? void 0 : _unsubscribeDestroy();
  });
  return customerData;
}

function useWidgetChatData() {
  var chatData = vue.ref(null);
  var customerData = useWidgetCustomerData();
  vue.watch(function () {
    var _customerData$value;

    return (_customerData$value = customerData.value) === null || _customerData$value === void 0 ? void 0 : _customerData$value.status;
  }, function (status) {
    if (status === 'chatting') {
      chatData.value = widgetCore.getData('chat');
    } else {
      chatData.value = null;
    }
  });
  return chatData;
}

function useWidgetGreeting() {
  var greeting = vue.ref(null);
  var unsubscribeInit = null;
  var unsubscribeDestroy = null;

  var onGreetingDisplayed = function onGreetingDisplayed(greetingData) {
    greeting.value = greetingData;
  };

  var onGreetingHidden = function onGreetingHidden() {
    greeting.value = null;
  };

  vue.onMounted(function () {
    unsubscribeInit = widgetCore.lcOnInit(function () {
      widgetCore.assignEventHandlers('on', {
        onGreetingDisplayed: onGreetingDisplayed,
        onGreetingHidden: onGreetingHidden
      });
    });
    unsubscribeDestroy = widgetCore.lcOnDestroy(function () {
      greeting.value = null;
    });
  });
  vue.onUnmounted(function () {
    var _unsubscribeInit, _unsubscribeDestroy;

    widgetCore.assignEventHandlers('off', {
      onGreetingDisplayed: onGreetingDisplayed,
      onGreetingHidden: onGreetingHidden
    });
    (_unsubscribeInit = unsubscribeInit) === null || _unsubscribeInit === void 0 ? void 0 : _unsubscribeInit();
    (_unsubscribeDestroy = unsubscribeDestroy) === null || _unsubscribeDestroy === void 0 ? void 0 : _unsubscribeDestroy();
  });
  return greeting;
}

var LiveChatWidget = vue.defineComponent({
  props: {
    license: {
      type: String,
      required: true
    },
    group: {
      type: String,
      required: false,
      "default": undefined
    },
    visibility: {
      type: String,
      required: false,
      "default": undefined
    },
    customerName: {
      type: String,
      required: false,
      "default": undefined
    },
    customerEmail: {
      type: String,
      required: false,
      "default": undefined
    },
    sessionVariables: {
      type: Object,
      required: false,
      "default": undefined
    },
    chatBetweenGroups: {
      type: Boolean,
      required: false,
      "default": undefined
    },
    customIdentityProvider: {
      type: Function,
      required: false,
      "default": undefined
    }
  },
  emits: ['ready', 'new-event', 'form-submitted', 'rating-submitted', 'greeting-hidden', 'greeting-displayed', 'visibility-changed', 'customer-status-changed', 'rich-message-button-clicked', 'availability-changed'],
  data: function data() {
    return {
      widget: null
    };
  },
  watch: {
    license: 'reinitialize',
    group: 'reinitialize',
    chatBetweenGroups: 'reinitialize',
    visibility: function visibility(_visibility) {
      var _this$widget;

      (_this$widget = this.widget) === null || _this$widget === void 0 ? void 0 : _this$widget.updateVisibility(_visibility);
    },
    customerName: function customerName(name) {
      var _this$widget2;

      (_this$widget2 = this.widget) === null || _this$widget2 === void 0 ? void 0 : _this$widget2.updateCustomerData({
        name: name
      });
    },
    customerEmail: function customerEmail(email) {
      var _this$widget3;

      (_this$widget3 = this.widget) === null || _this$widget3 === void 0 ? void 0 : _this$widget3.updateCustomerData({
        email: email
      });
    },
    sessionVariables: function sessionVariables(_sessionVariables) {
      var _this$widget4;

      (_this$widget4 = this.widget) === null || _this$widget4 === void 0 ? void 0 : _this$widget4.updateSessionVariables(_sessionVariables);
    }
  },
  mounted: function mounted() {
    this.setupWidget();
  },
  unmounted: function unmounted() {
    var _this$widget5;

    (_this$widget5 = this.widget) === null || _this$widget5 === void 0 ? void 0 : _this$widget5.destroy();
  },
  methods: {
    setupWidget: function setupWidget() {
      var _this = this;

      this.widget = widgetCore.createWidget({
        group: this.group,
        license: this.license,
        customerName: this.customerName,
        customerEmail: this.customerEmail,
        sessionVariables: this.sessionVariables,
        chatBetweenGroups: this.chatBetweenGroups,
        visibility: this.visibility,
        customIdentityProvider: this.customIdentityProvider,
        onReady: function onReady(data) {
          return _this.$emit('ready', data);
        },
        onNewEvent: function onNewEvent(event) {
          return _this.$emit('new-event', event);
        },
        onFormSubmitted: function onFormSubmitted(form) {
          return _this.$emit('form-submitted', form);
        },
        onRatingSubmitted: function onRatingSubmitted(rating) {
          return _this.$emit('rating-submitted', rating);
        },
        onGreetingHidden: function onGreetingHidden(greeting) {
          return _this.$emit('greeting-hidden', greeting);
        },
        onGreetingDisplayed: function onGreetingDisplayed(greeting) {
          return _this.$emit('greeting-displayed', greeting);
        },
        onVisibilityChanged: function onVisibilityChanged(visibility) {
          return _this.$emit('visibility-changed', visibility);
        },
        onCustomerStatusChanged: function onCustomerStatusChanged(status) {
          return _this.$emit('customer-status-changed', status);
        },
        onRichMessageButtonClicked: function onRichMessageButtonClicked(button) {
          return _this.$emit('rich-message-button-clicked', button);
        },
        onAvailabilityChanged: function onAvailabilityChanged(availability) {
          return _this.$emit('availability-changed', availability);
        }
      });
      window.__lc.integration_name = "@livechat/widget-vue";
      this.widget.init();
    },
    reinitialize: function reinitialize() {
      var _this$widget6;

      (_this$widget6 = this.widget) === null || _this$widget6 === void 0 ? void 0 : _this$widget6.destroy();
      this.setupWidget();
    }
  },
  render: function render() {
    return null;
  }
});

exports.LiveChatWidget = LiveChatWidget;
exports.useWidgetChatData = useWidgetChatData;
exports.useWidgetCustomerData = useWidgetCustomerData;
exports.useWidgetGreeting = useWidgetGreeting;
exports.useWidgetIsReady = useWidgetIsReady;
exports.useWidgetState = useWidgetState;