@onereach/webform/src/store/modules/webform.js

Content Builder includes several views for: - Content builder view itself; - Web Form view; - Slack block-kit builder;

import WSService from '@/api/services/ws.service';
import MessageService from '@/api/services/message.service';
import config from '../../config';
import EventBus from '../../helpers/eventBus';

import { encryptAuth } from './webform-helpers/index';

import { clearLSByVuexPersistedKey } from '../../utils/index';

import {
  WEBFORM_SET_KEY,
  WEBFORM_SET_ENV,
  OUTPUT_RESET_GENERIC_MODEL,
  WEBFORM_SET_EMBUS_WSS_URL,
  OUTPUT_SET_GENERIC,
  SET_MESSAGE,
  CLEAR_MESSAGE,
  WEBFORM_SET_FORM_STEP,
  WEBFORM_RESET_STATE,
  WEBFORM_CLEAR_STATE
} from '@/store/mutation-types';
const dayjs = require('dayjs');
const customParseFormat = require('dayjs/plugin/customParseFormat');
dayjs.extend(customParseFormat);

const initialState = {
  EMBUS_WSS_URL: null,
  env: null,
  queryParams: {},
  preview: false,
  loading: false,
  endpoint: undefined,
  key: undefined,
  accountId: undefined,
  wsHandlers: undefined,
  eventManager: undefined,
  callback: undefined,
  readQueuePromise: undefined,
  readQueue: undefined,
  sessionId: undefined,
  responseKey: undefined,
  updateCallback: undefined,
  multiStepForm: false,
  multiStepLevel: 0,
  multiStepData: [{
    goBack: false,
    isCancelHandling: false,
    endOfForm: false
  }],
  config: null,
  isSingleCancelHandling: true,
  hideForm: false,
  beginningSessionId: undefined,
  previousSessionId: undefined
};

const getters = {
  isMultiStepGoBack: state => _.get(state.multiStepData, `[${state.multiStepLevel}].goBack`, false),
  isCancelHandling: state => _.get(state.multiStepData, `[${state.multiStepLevel}].isCancelHandling`, false),
  isMultiStepEndOfForm: state => _.get(state.multiStepData, `[${state.multiStepLevel}].endOfForm`, false),
  isMultiStepItems: state => _.get(state.multiStepData, `[${state.multiStepLevel}].data`, false)
};

const actions = {
  async getGenericDataModel ({ dispatch, commit, state, rootState }) {
    commit(WEBFORM_SET_KEY, { key: 'loading', payload: true });

    try {
      let attempt = 0;
      let response;
      do {
        const key = state.sessionId || state.key;
        let params = { p: key };

        if (state.queryParams) {
          if (state.queryParams.q) {
            delete state.queryParams.q;
          }

          params = Object.assign(params, state.queryParams);
        }

        const urlParams = new URLSearchParams(Object.entries(params));

        response = await fetch(`${state.endpoint}?` + urlParams, {
          method: 'GET'
        });
        attempt += 1;
      } while (response.status !== 200 && attempt < 5);

      if (!response.ok) {
        const errorMessage = 'The form has expired';
        EventBus.$emit('on-webform-error', { message: errorMessage });
        throw new Error(errorMessage);
      }

      const data = await response.json();
      let genericModel = _.get(data, 'data.data');
      const stepId = _.get(data, 'data.stepId', null);
      const multiStepLevel = _.get(state, 'multiStepLevel', null);
      const multiStepData = _.get(state, 'multiStepData', null);

      if (state.sessionId && stepId && stepId === _.get(multiStepData, `[${multiStepLevel}].stepId`)) {
        genericModel = _.get(multiStepData, `[${multiStepLevel}].data`);
      }

      commit(`output/${OUTPUT_SET_GENERIC}`, genericModel, { root: true });
      const multiStepForm = _.get(data, 'data.multiStepForm');
      const isSingleCancelHandling = _.get(data, 'data.isCancelHandling');

      if (multiStepForm) {
        commit(WEBFORM_SET_KEY, {
          key: 'multiStepForm',
          payload: multiStepForm
        });
        const formDataOut = {
          goBack: _.get(data, 'data.goBack', false),
          isCancelHandling: _.get(data, 'data.isCancelHandling', false),
          data: _.cloneDeep(genericModel),
          endOfForm: false,
          stepId
        };

        if (
          formDataOut.goBack &&
          !_.get(
            state,
            `multiStepData[${state.multiStepLevel - 1}].data.children.length`
          )
        ) {
          formDataOut.goBack = false;
        }

        commit(WEBFORM_SET_FORM_STEP, formDataOut);
      }

      commit(WEBFORM_SET_KEY, {
        key: 'isSingleCancelHandling',
        payload: isSingleCancelHandling
      });

      if (!state.preview && state.multiStepForm) {
        await dispatch('initEventEmiter', _.get(data, 'data.unauthorized'));
        // start a new session if the first page has no children
        // then go to the next page
        if (
          state.multiStepLevel === 0 &&
          (!_.get(rootState, 'output.genericModel.children.length') ||
          _.get(data, 'data.immediateSession'))

        ) {
          await dispatch('startNewSession');
        } else if (state.sessionId) {
          await dispatch('updateCallback');
        }
      }

      commit(WEBFORM_SET_KEY, { key: 'loading', payload: false });
      EventBus.$emit('on-webform-loaded');
    } catch (error) {
      commit(
        SET_MESSAGE,
        { type: 'error', message: error, status: 500 },
        { root: true }
      );
      commit(WEBFORM_SET_KEY, { key: 'loading', payload: false });
      throw new Error(error);
    }
  },

  prepareFormDataObject ({ commit, state, rootState }, submit = false) {
    let children = [];

    if (submit) {
      if (state.multiStepForm) {
        children = state.multiStepData.reduce((acc, field) => {
          const children = _.get(field, 'data.children');
          if (children) {
            acc = [...acc, ...children];
          }
          return acc;
        }, []);

        children = Object.values(
          [
            ...children,
            ..._.get(rootState, 'output.genericModel.children', [])
          ].reduce((result, { id, ...rest }) => {
            result[id] = {
              ...(result[id] || {}),
              id,
              ...rest
            };
            return result;
          }, {})
        );
      } else {
        children = [..._.get(rootState, 'output.genericModel.children', [])];
      }
    } else {
      children = [..._.get(rootState, 'output.genericModel.children', [])];
    }

    if (!children) {
      return commit(
        SET_MESSAGE,
        {
          type: 'error',
          message: 'Error schema of generic model data',
          status: 500
        },
        { root: true }
      );
    }

    const staticTypes = ['attachments', 'text', 'divider', 'image'];

    const getInputData = (children) =>
      children.reduce((acc, item) => {
        let value = _.get(item, 'props.value');
        const isDatepicker = item.type === 'datePicker';
        if (isDatepicker && typeof value === 'string' && value.trim().length) {
          const dateFormat = _.get(item, 'props.web.dateFormat');

          const date = dayjs(
            `${value}T00:00:00+00`,
            `${dateFormat}[T]HH:mm:ssZZ`
          );

          value = {
            input: value,
            iso: date.toISOString()
          };
        }

        if (item.type === 'video') {
          return acc.concat({
            id: item.id,
            value: {
              watched: _.get(item, 'props.watched')
            },
            name:
              _.get(item, 'props.variableName') ||
              _.get(item, 'props.web.variableName') ||
              item.id
          });
        }

        return acc.concat({
          id: item.id,
          value,
          name:
            _.get(item, 'props.variableName') ||
            _.get(item, 'props.web.variableName') ||
            item.id
        });
      }, []);

    return getInputData(children);
  },

  async fetchConfig ({ state, commit }, url) {
    let attempt = 0;
    let response;
    do {
      response = await fetch(url);
      attempt += 1;
    } while (response.status !== 200 && attempt < 5);

    const data = await response.json();

    if (response.status !== 200) {
      const message = data.message || data.error;
      throw new Error(`Can't get config: ${message}`);
    } else {
      return data || null;
    }
  },

  async onWSConnect ({ dispatch, commit, state, rootState }) {
    const sessionId = state.sessionId;
    // console.log('onWSConnect sessionId -> ', sessionId);

    if (sessionId) {
      const messagesFromQueue = await MessageService.getMessagesFromQueue({ sessionId });
      config.debug && console.debug('[EWPS::onWSConnect] messagesFromQueue ', messagesFromQueue);

      if (messagesFromQueue && messagesFromQueue.length) {
        dispatch('addMessagesOneByOne', messagesFromQueue);
      }

      await MessageService.updateCallback({ sessionId });
      await MessageService.clearQueue({ sessionId });
    }

    // commit('notifications/showNotification', NOTIFICATION_TYPES.REMOVE_NOTIFICATION, { root: true });
    // commit(`config/${mutationTypes.CHANGE_CONNECTION_STATUS}`, true, { root: true });
  },

  /*   createEventManager ({ state }, authString) {
    let embusWssUrlFormatted;
    if (state.EMBUS_WSS_URL) {
      const wsProtocolPrefix = 'wss://';
      embusWssUrlFormatted = state.EMBUS_WSS_URL.match(wsProtocolPrefix)
        ? state.EMBUS_WSS_URL
        : `${wsProtocolPrefix}${state.EMBUS_WSS_URL}`;
    }

    const eventManagerConfig = {
      authorization: authString,
      embusWssUrl:
        embusWssUrlFormatted ||
        (state.env
          ? `wss://embus-${state.env}.onereach.ai`
          : config.EMBUS_WSS_URL),
      getRemainingTimeInMillis () {
        return 72 * 60 * 60 * 1000;
      }
    };

    return new EventManager({
      flow: { config: eventManagerConfig },
      config: eventManagerConfig,
      log: console
    });
  }, */

  /*   async createReadQueue ({ state }, eventManager) {
    const readQueue = await eventManager.getReadQueue();
    const readQueuePromise = await readQueue.connect(true);
    const callback = await readQueuePromise.getCallback();

    return { readQueue, readQueuePromise, callback };
  }, */

  /*   async onWSClose () {
    await new Promise(resolve => setTimeout(resolve, 1000));
    window.location.reload();
  },

  async onWSOpen ({ state }) {
    state.readQueuePromise.getCallback();
  }, */

  async onMessage ({ state, commit }, { result }) {
    const formDataOut = _.get(result, 'resolve.formDataOut');

    // console.log('onWSData formDataOut ->', formDataOut);

    if (!formDataOut) return;

    if (
      formDataOut.goBack &&
      !_.get(
        state,
        `multiStepData[${state.multiStepLevel}].data.children.length`
      )
    ) {
      // console.log('onWSData goBack toggle multiStepData -> ', state.multiStepData);
      // console.log('onWSData goBack toggle multiStepLevel -> ', state.multiStepLevel);
      formDataOut.goBack = false;
    }

    commit(WEBFORM_SET_KEY, {
      key: 'multiStepLevel',
      payload: (state.multiStepLevel = state.multiStepLevel + 1)
    });

    if (formDataOut.stepId === _.get(state, `multiStepData[${state.multiStepLevel}].stepId`)) {
      formDataOut.data = state.multiStepData[state.multiStepLevel].data;
    }

    commit(WEBFORM_SET_FORM_STEP, formDataOut);
    const formPartData = _.get(formDataOut, 'data');

    if (formPartData) {
      commit(`output/${OUTPUT_SET_GENERIC}`, _.cloneDeep(formPartData), {
        root: true
      });
      commit(WEBFORM_SET_KEY, { key: 'loading', payload: false });
    }

    // console.log('onWSData end state -> ', state);
  },

  /*   addWSListeners ({ state, dispatch, commit }) {
    const wsHandlers = {
      'wsq:close': () => dispatch('onWSClose'),
      'wsq:open': () => dispatch('onWSOpen'),
      'data': (data) => dispatch('onWSData', data)
    };

    commit(WEBFORM_SET_KEY, { key: 'wsHandlers', payload: wsHandlers });

    _.forEach(wsHandlers, (handler, name) => {
      state.readQueuePromise.on(name, handler);
    });

    // state.readQueuePromise.on('wsq:close', async () => dispatch('onWSClose'));
    // state.readQueuePromise.on('wsq:open', async () => dispatch('onWSOpen'));
    // state.readQueuePromise.on('data', async data => dispatch('onWSData', data));
  }, */

  async initEventEmiter ({ state, commit, dispatch }, isUnauthorized) {
    if (state.eventManager && Object.keys(state.eventManager).length) {
      // await dispatch('deleteEventManager');
    }

    let authStr = 'UNAUTHORIZED';

    if (!isUnauthorized) {
      const url = `${
        state.env
          ? 'https://sdkapi.' + state.env + '.api.onereach.ai'
          : config.SDK_API_URL
      }/http/${state.accountId}/content-builder-form/${state.key}`;

      const configuration = await dispatch('fetchConfig', url);
      if (!configuration) return;
      const { sessionId } = configuration;
      if (sessionId) {
        commit(WEBFORM_SET_KEY, { key: 'sessionId', payload: sessionId });
        commit(WEBFORM_SET_KEY, { key: 'updateCallback', payload: true });
      }

      authStr = encryptAuth(configuration);
    }

    let embusWssUrlFormatted;
    if (state.EMBUS_WSS_URL) {
      const wsProtocolPrefix = 'wss://';
      embusWssUrlFormatted = state.EMBUS_WSS_URL.match(wsProtocolPrefix)
        ? state.EMBUS_WSS_URL
        : `${wsProtocolPrefix}${state.EMBUS_WSS_URL}`;
    }

    const eventManagerConfig = {
      token: authStr,
      emBusWssUrl:
        embusWssUrlFormatted ||
        (state.env
          ? `wss://embus-${state.env}.onereach.ai`
          : config.EMBUS_WSS_URL)
    };

    WSService.init(eventManagerConfig);
    WSService.connect();
    // WSService.addOnConnectListener(() => dispatch('onWSConnect'));
    WSService.addOnMessageListener((data) => dispatch('onMessage', data));
    // const eventManager = await dispatch('createEventManager', authStr);

    // commit(WEBFORM_SET_KEY, { key: 'eventManager', payload: eventManager });

    // const { readQueue, readQueuePromise, callback } = await dispatch('createReadQueue', eventManager);

    // commit(WEBFORM_SET_KEY, { key: 'callback', payload: callback });
    // commit(WEBFORM_SET_KEY, { key: 'readQueuePromise', payload: readQueuePromise });
    // commit(WEBFORM_SET_KEY, { key: 'readQueue', payload: readQueue });

    // await dispatch('addWSListeners');
  },

  /* removeWSListeners ({ state, commit }) {
    _.forEach(state.wsHandlers, (handler, name) => {
      state.readQueuePromise.off(name, handler);
    });

    commit(WEBFORM_SET_KEY, { key: 'wsHandlers', payload: undefined });
  }, */
  async deleteEventManager ({ state, commit, dispatch }) {
    // WSService.close();
    // await dispatch('removeWSListeners');

    commit(WEBFORM_SET_KEY, { key: 'callback', payload: undefined });
    commit(WEBFORM_SET_KEY, { key: 'readQueuePromise', payload: undefined });
    commit(WEBFORM_SET_KEY, { key: 'readQueue', payload: undefined });
    commit(WEBFORM_SET_KEY, { key: 'eventManager', payload: undefined });
  },

  async goBack ({ state, commit, rootState }, step = 1) {
    // console.log('goBack state -> ', state);
    // console.log('goBack step -> ', step);

    const transcription = _.get(rootState, 'output.genericModel');

    if (transcription) {
      commit(WEBFORM_SET_FORM_STEP, {
        data: _.cloneDeep(transcription),
        transcription: true
      });
    }

    commit(WEBFORM_SET_KEY, { key: 'hideForm', payload: true });

    try {
      await MessageService.sendMessage({
        name: `form/go-back/${state.sessionId}`,
        params: {
          callback: state.callback
        }
      }, true, {
        token: 'UNAUTHORIZED',
        accountId: state.accountId
      });
      /*       await state.eventManager.emit({
        name: `form/go-back/${state.sessionId}`,
        params: {
          callback: state.callback
        }
      }); */
    } catch (error) {
      commit(
        SET_MESSAGE,
        { type: 'error', message: error, status: 500 },
        { root: true }
      );
    }

    /*     console.log(
      'goBack state.multiStepLevel before -> ',
      state.multiStepLevel
    );

    console.log(
      'goBack state.multiStepLevel -> ',
      state.multiStepLevel - step
    ); */

    commit(WEBFORM_SET_KEY, {
      key: 'multiStepLevel',
      payload: (state.multiStepLevel = state.multiStepLevel - step)
    });

    commit(
      `output/${OUTPUT_SET_GENERIC}`,
      _.cloneDeep(state.multiStepData[state.multiStepLevel].data),
      { root: true }
    );

    commit(WEBFORM_SET_KEY, { key: 'hideForm', payload: false });
  },

  async startNewSession ({ commit, state, rootState }) {
    // console.log('startNewSession');
    const transcription = _.get(rootState, 'output.genericModel');

    // console.log('transcription -> ', transcription);

    if (transcription) {
      commit(WEBFORM_SET_FORM_STEP, {
        data: _.cloneDeep(transcription),
        transcription: true
      });
    }

    const formData = {};

    const config = {
      name: `form/start-session/${state.key}`,
      params: {
        callback: state.callback,
        formData,
        queryParams: state.queryParams,
        beginningSessionId: state.beginningSessionId,
        previousSessionId: state.previousSessionId
      },
      target: state.accountId
    };

    try {
      const res = await MessageService.sendMessage(config, true, {
        token: 'UNAUTHORIZED',
        accountId: state.accountId
      });
      // await state.eventManager.emit(config);

      if (res && res.sessionId) {
        commit(WEBFORM_SET_KEY, { key: 'sessionId', payload: res.sessionId });
      }

      EventBus.$emit('on-webform-start-session-success', {
        result: res,
        formData
      });
    } catch (error) {
      commit(
        SET_MESSAGE,
        { type: 'error', message: error, status: 500 },
        { root: true }
      );
      throw new Error(error);
    }
  },

  async updateCallback ({ commit, state }) {
    const config = {
      name: `form/UPDATE_CALLBACK/${state.sessionId}`,
      params: {
        callback: state.callback,
        beginningSessionId: state.beginningSessionId,
        previousSessionId: state.previousSessionId
      },
      target: state.accountId
    };

    try {
      await MessageService.sendMessage(config, true, {
        token: 'UNAUTHORIZED',
        accountId: state.accountId
      });
      // const res = await state.eventManager.emit(config);

      // console.log('updateCallback res -> ', res);
    } catch (error) {
      commit(
        SET_MESSAGE,
        { type: 'error', message: error, status: 500 },
        { root: true }
      );
      throw new Error(error);
    }
  },

  async submitNextStep ({ commit, state, dispatch, rootState }) {
    const transcription = _.get(rootState, 'output.genericModel');

    if (transcription) {
      commit(WEBFORM_SET_FORM_STEP, {
        data: _.cloneDeep(transcription),
        transcription: true
      });
    }

    const fields = await dispatch('prepareFormDataObject');

    const formData = {};

    fields.forEach((field) => {
      formData[field.name || field.id] = field.value;
    });

    // console.log('submitNextStep formData -> ', formData);

    const config = {
      name:
        state.multiStepLevel === 0 && !state.sessionId
          ? `form/start-session/${state.key}`
          : `form/response/${state.sessionId}`,
      params: {
        callback: state.callback,
        formData,
        queryParams: state.queryParams,
        beginningSessionId: state.beginningSessionId,
        previousSessionId: state.previousSessionId
      },
      target: state.accountId
    };

    try {
      commit(WEBFORM_SET_KEY, { key: 'loading', payload: true });
      const pagePayload = {
        key: state.key,
        formData
      };

      EventBus.$emit('on-webform-next-page', pagePayload);

      const res = await MessageService.sendMessage(config, true, {
        token: 'UNAUTHORIZED',
        accountId: state.accountId
      });
      // console.log('submitNextStep res -> ', res);

      /* if (!res) {
        const errorMessage = 'The form has expired';
        EventBus.$emit('on-webform-error', { message: errorMessage });
        commit(WEBFORM_SET_KEY, { key: 'loading', payload: false });
        commit(
          SET_MESSAGE,
          { type: 'error', message: errorMessage, status: 500 },
          { root: true }
        );
        throw new Error(errorMessage);
        // console.log('submitNextStep error happened -> ', errorMessage);
      } */

      // await state.eventManager.emit(config);

      if (res && res.sessionId) {
        commit(WEBFORM_SET_KEY, { key: 'sessionId', payload: res.sessionId });
      }

      EventBus.$emit('on-webform-next-step-success', {
        result: res,
        formData
      });

      commit(WEBFORM_SET_KEY, { key: 'updateCallback', payload: false });
    } catch (error) {
      // const errorMessage = 'The form has expired';
      // EventBus.$emit('on-webform-error', { message: errorMessage });
      // console.log('submitNextStep error happened -> ', error);
      commit(WEBFORM_SET_KEY, { key: 'loading', payload: false });
      commit(
        SET_MESSAGE,
        { type: 'error', message: error, status: 500 },
        { root: true }
      );
      throw new Error(error);
    }
  },

  async prepareAllResponses ({ dispatch }) {
    const currentField = await dispatch('prepareFormDataObject');

    const currentData = {};

    currentField.forEach((field) => {
      currentData[field.name || field.id] = field.value;
    });

    const fields = await dispatch('prepareFormDataObject', true);

    const formData = {
      response: currentData
    };

    const allResponses = {};

    fields.forEach((field) => {
      allResponses[field.name || field.id] = field.value;
    });

    formData.allResponses = allResponses;

    return formData;
  },

  async submitForm ({ commit, state, dispatch, rootState }) {
    EventBus.$emit('on-webform-submit');

    const formData = await dispatch('prepareAllResponses');

    const body = JSON.stringify({
      type: 'submit',
      sessionId: state.sessionId,
      data: formData
    });

    let response = null;

    try {
      let params = { p: state.key };

      if (state.queryParams) {
        if (state.queryParams.q) {
          delete state.queryParams.q;
        }

        params = Object.assign(params, state.queryParams);
      }

      const urlParams = new URLSearchParams(Object.entries(params));

      response = await fetch(`${state.endpoint}?` + urlParams, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body,
        queryParams: params
      });

      const result = await response.json();

      EventBus.$emit('on-webform-submit-success', {
        result,
        formData
      });
    } catch (error) {
      const messageError = `Submit error: ${error}`;
      commit(
        SET_MESSAGE,
        {
          type: 'error',
          message: messageError,
          status: 500
        },
        { root: true }
      );

      EventBus.$emit('on-webform-error', { message: messageError });

      throw new Error(error);
    }

    if (!response.ok) {
      const messageError = 'The number of form submissions has already ended';
      commit(
        SET_MESSAGE,
        {
          type: 'error',
          message: messageError,
          status: 500
        },
        { root: true }
      );

      EventBus.$emit('on-webform-error', { message: messageError });

      throw new Error(messageError);
    }

    if (state.multiStepForm) {
      commit(WEBFORM_CLEAR_STATE);
    }

    await dispatch('deleteEventManager');
    commit(WEBFORM_SET_KEY, { key: 'sessionId', payload: undefined });
    commit(`output/${OUTPUT_RESET_GENERIC_MODEL}`, null, { root: true });
    clearLSByVuexPersistedKey();
  },

  async cancelForm ({ commit, state, dispatch }) {
    EventBus.$emit('on-webform-cancel');

    const formData = await dispatch('prepareAllResponses');

    const body = JSON.stringify({
      type: 'cancel',
      sessionId: state.sessionId,
      data: formData
    });

    let response = null;

    try {
      let params = { p: state.key };

      if (state.queryParams) {
        if (state.queryParams.q) {
          delete state.queryParams.q;
        }

        params = Object.assign(params, state.queryParams);
      }

      const urlParams = new URLSearchParams(Object.entries(params));

      response = await fetch(`${state.endpoint}?` + urlParams, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body,
        queryParams: params
      });

      const result = await response.json();

      EventBus.$emit('on-webform-cancel-success', {
        result,
        formData
      });
    } catch (error) {
      commit(
        SET_MESSAGE,
        { type: 'error', message: error, status: 500 },
        { root: true }
      );
      throw new Error(error);
    }

    if (state.multiStepForm) {
      commit(WEBFORM_CLEAR_STATE);
    }

    await dispatch('deleteEventManager');
    commit(WEBFORM_SET_KEY, { key: 'sessionId', payload: undefined });
    commit(`output/${OUTPUT_RESET_GENERIC_MODEL}`, null, { root: true });
    clearLSByVuexPersistedKey();
  },

  async initWebForm ({ commit, state, dispatch }, { $route, formUrl }) {
    commit(CLEAR_MESSAGE, null, { root: true });
    let accountId,
      key,
      beginningSessionId,
      previousSessionId,
      env,
      EMBUS_WSS_URL;

    if ($route) {
      env = $route.params.env;
      accountId = $route.params.accountId;
      key = $route.params.key;
      EMBUS_WSS_URL = $route.params.embusWssUrl;
    }

    // set webform key
    // console.log('setting key by formUrl -> ', formUrl);

    if (formUrl) {
      env = formUrl.env;
      accountId = formUrl.accountId;
      key = formUrl.key;
      EMBUS_WSS_URL = formUrl.EMBUS_WSS_URL;
    }

    // console.log('initWebForm state.key -> ', state.key);
    // console.log('initWebForm key -> ', key);

    if (state.key && (state.key !== key)) {
      commit(WEBFORM_RESET_STATE);
    }

    if ($route && $route.query) {
      beginningSessionId = $route.query.beginningSessionId;
      previousSessionId = $route.query.previousSessionId;

      commit(WEBFORM_SET_KEY, { key: 'queryParams', payload: $route.query });
    }

    if (beginningSessionId && previousSessionId) {
      commit(WEBFORM_SET_KEY, {
        key: 'beginningSessionId',
        payload: beginningSessionId
      });

      commit(WEBFORM_SET_KEY, {
        key: 'previousSessionId',
        payload: previousSessionId
      });
    }

    if (EMBUS_WSS_URL) {
      commit(WEBFORM_SET_EMBUS_WSS_URL, {
        payload: EMBUS_WSS_URL
      });
    }

    if (env) {
      commit(WEBFORM_SET_ENV, {
        payload: env
      });
    }

    function b64DecodeUnicode (str) {
      // Going backwards: from bytestream, to percent-encoding, to original string.
      return decodeURIComponent(
        atob(str)
          .split('')
          .map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
          })
          .join('')
      );
    }

    const encryptAccountId = b64DecodeUnicode(accountId);

    commit(WEBFORM_SET_KEY, { key: 'accountId', payload: encryptAccountId });

    const endpoint = `${
      state.env
        ? 'https://sdkapi.' + state.env + '.api.onereach.ai'
        : config.SDK_API_URL
    }/http/${encryptAccountId}/ephemeral-web-page`;

    if (!endpoint || !key) {
      const errorMessage = 'Missing parameters (endpoint, key)';

      commit(
        SET_MESSAGE,
        { type: 'error', message: errorMessage },
        { root: true }
      );
      EventBus.$emit('on-webform-error', { message: errorMessage });
      throw new Error(errorMessage);
    }

    commit(WEBFORM_SET_KEY, { key: 'endpoint', payload: endpoint });
    commit(WEBFORM_SET_KEY, { key: 'key', payload: key });

    try {
      await dispatch('getGenericDataModel');
    } catch (error) {
      console.error(error);
      EventBus.$emit('on-webform-submit-error', error);
      throw new Error(error);
    }
  }
};

const mutations = {
  [WEBFORM_RESET_STATE] (state) {
    // console.log('WEBFORM_RESET_STATE state -> ', state);
    Object.keys(initialState).forEach(key => { state[key] = initialState[key]; });
  },

  [WEBFORM_CLEAR_STATE] (state) {
    state.multiStepForm = false;
    state.multiStepLevel = 0;
    state.multiStepData = [{ goBack: false, isCancelHandling: false, endOfForm: false }];
  },

  [WEBFORM_SET_FORM_STEP] (state, payload) {
    if (state.multiStepData[state.multiStepLevel]) {
      const { goBack, isCancelHandling, stepId, endOfForm, data, transcription } = payload;

      // console.log('WEBFORM_SET_FORM_STEP payload -> ', payload);

      if (transcription) {
        state.multiStepData[state.multiStepLevel].data = data;
      } else {
        // console.log('WEBFORM_SET_FORM_STEP !transcription stepId -> ', stepId);
        // console.log('WEBFORM_SET_FORM_STEP !transcription multiStepLevel -> ', state.multiStepLevel);
        /* if (stepId !== state.multiStepData[state.multiStepLevel].stepId) {
          state.multiStepData[state.multiStepLevel].data = data;
          state.multiStepData[state.multiStepLevel].stepId = stepId;
        } */

        state.multiStepData[state.multiStepLevel].stepId = stepId;
        state.multiStepData[state.multiStepLevel].goBack = goBack;
        state.multiStepData[state.multiStepLevel].isCancelHandling = isCancelHandling;
        state.multiStepData[state.multiStepLevel].endOfForm = endOfForm;
      }
    } else {
      // console.log('WEBFORM_SET_FORM_STEP else payload -> ', payload);
      state.multiStepData.push(payload);
    }
  },

  [WEBFORM_SET_ENV] (state, { payload }) {
    if (!payload) return;
    state.env = payload;
  },

  [WEBFORM_SET_EMBUS_WSS_URL] (state, { payload }) {
    if (!payload) return;
    state.EMBUS_WSS_URL = payload;
  },

  [WEBFORM_SET_KEY] (state, { key, payload }) {
    if (!key) return;
    state[key] = payload;
  }
};

export default {
  namespaced: true,
  state: () => _.cloneDeep(initialState),
  getters,
  actions,
  mutations
};