@kiwicom/smart-faq/src/shared/GuaranteeChat/utils.js

// @flow

import type {
  ChatConfig,
  GuaranteeChatBookingInfo,
} from '../context/GuaranteeChatInfo';

type WebchatInstance = {
  getConfig: () => {
    setData: Object => void,
  },
};

export const initialize = async (chatConfig: ChatConfig, elementId: string) => {
  const guid = chatConfig?.CHAT_GUID;
  const deploymentKey = chatConfig?.CHAT_DEPLOYMENT_KEY;
  const orgId = chatConfig?.CHAT_ORG_ID;
  const queueName = chatConfig?.CHAT_QUEUE_NAME;

  if (!(guid && deploymentKey && orgId && queueName)) {
    throw new Error(
      'Secrets guid, deploymentKey, orgId or queueName for Guarantee chat not provided.',
    );
  }

  await injectScript(guid, deploymentKey);

  /*
      Purecloud weirdness:
      - if chat wasn't initialized, initialize it
      - if chat was already rendered, it needs to be reinitialized again too
     */
  if (!window.webchat || window.webchat.isChatRendered()) {
    // required by Purecloud for reconnect
    window.PURECLOUD_WEBCHAT_FRAME_CONFIG = {
      containerEl: elementId,
    };
    const chatConfiguration = getConfig(orgId, queueName);
    window.webchat = await window.ININ.webchat.create(chatConfiguration);
  }
};

export const setData = (
  webchat: WebchatInstance,
  guaranteeChatBookingInfo: ?GuaranteeChatBookingInfo,
) => {
  const bid = guaranteeChatBookingInfo?.bid ?? null;
  const status = guaranteeChatBookingInfo?.status ?? null;
  const departureCity = guaranteeChatBookingInfo?.departureCity ?? '';
  const departureAirport = guaranteeChatBookingInfo?.departureAirport ?? '';
  const arrivalCity = guaranteeChatBookingInfo?.arrivalCity ?? '';
  const arrivalAirport = guaranteeChatBookingInfo?.arrivalAirport ?? '';
  const phone = guaranteeChatBookingInfo?.phone ?? '';
  const email = guaranteeChatBookingInfo?.email ?? '';
  const firstName = guaranteeChatBookingInfo?.firstName ?? '';
  const lastName = guaranteeChatBookingInfo?.lastName ?? '';

  webchat.getConfig().setData({
    firstName,
    lastName,
    addressStreet: '',
    addressCity: '',
    addressPostalCode: '',
    addressState: '',
    phoneNumber: phone,
    customField1Label: 'BID',
    customField1: bid,
    customField2Label: 'Departure',
    customField2: `${departureCity} (${departureAirport})`,
    customField3Label: 'Arrival',
    customField3: `${arrivalCity} (${arrivalAirport})`,
    bid,
    status,
    phone,
    email,
    departureCity,
    departureAirport,
    arrivalCity,
    arrivalAirport,
  });
};

const waitForInjectedScript = (attempt: number = 0) => {
  if (attempt === 5) {
    return Promise.reject(
      new Error('Purecloud chat script not loaded before timeout.'),
    );
  }

  return new Promise(resolve => {
    setTimeout(() => {
      if (window.ININ) {
        return resolve(false);
      }

      return resolve(waitForInjectedScript(attempt + 1));
    }, 200 * attempt);
  });
};

const injectScript = async (
  guid: string,
  deploymentKey: string,
): Promise<boolean> => {
  const body = document && document.body;

  if (!body) {
    return Promise.reject(new Error('Unexpected: no DOM body present.'));
  }

  if (document.getElementById('purecloud-webchat-js')) {
    if (!window.ININ) {
      // element was inserted, but script is not loaded yet, try to wait
      await waitForInjectedScript();
    }

    return Promise.resolve(false);
  }

  return new Promise((resolve, reject) => {
    const script = document.createElement('script');

    script.src = 'https://apps.mypurecloud.com/webchat/jsapi-v1.js';
    script.id = 'purecloud-webchat-js';
    script.setAttribute('region', 'eu-west-1');
    script.setAttribute('org-guid', guid);
    script.setAttribute('deployment-key', deploymentKey);
    script.onload = () => {
      if (!window.ININ) {
        reject(new Error('Purecloud chat script not loaded successfully.'));
        return;
      }

      resolve(true);
    };
    script.onerror = () => reject(new Error(false));

    body.appendChild(script);
  });
};

const getConfig = (orgId: string, queueName: string) => {
  const kiwiLogo = {
    width: 48,
    height: 40,
    url: 'https://images.kiwi.com/whitelabels/0x40/kiwicom-mobile.png',
  };

  return {
    webchatAppUrl: 'https://apps.mypurecloud.ie/webchat',
    webchatServiceUrl: 'https://realtime.mypurecloud.ie:443',
    orgId,
    orgName: 'kiwicom',
    queueName,
    logLevel: process.env.NODE_ENV === 'development' ? 'DEBUG' : 'INFO',
    locale: 'en',
    reconnectEnabled: true,
    companyLogoSmall: kiwiLogo,
    agentAvatar: kiwiLogo,
    welcomeMessage: 'Thanks for chatting with us.',
    cssClass: 'webchat-frame',
    css: {
      width: '100%',
      height: '100%',
    },
  };
};