@ptcwebops/ptcw-design 3.0.2 → 3.0.3

package/dist/esm/ptc-data-lookup.entry.js

@@ -0,0 +1,492 @@
+import { r as registerInstance, h, g as getElement } from './index-62587d0b.js';
+
+// Define the ElqLib class
+class ElqLib {
+  constructor(params) {
+    this.params = params;
+    this.url_vars = {};
+    this.visitor_elq_id = null;
+    this.field_mappings = [];
+    this.callback_queue = [];
+    this.fields_populated = false;
+    this.user_elq_email = '';
+    this.user_elq_firstname = '';
+    this.user_elq_lastname = '';
+    // Merge defaults with params
+    const defaults = {
+      elq_site_id: '',
+      elq_visitor_lookup_key: '',
+      elq_recipient_id_lookup_key: '',
+      elq_contact_lookup_key: '',
+      elq_field_email_rec_id: 'V_EmailRecipientID',
+      elq_field_contact_email: 'C_EmailAddress',
+      elq_field_visitor_email: 'V_Email_Address',
+      elq_field_visitor_firstname: 'V_First_Name',
+      elq_field_visitor_lastname: 'V_Last_Name',
+      notme_link_id: 'not-me-link-id',
+      notme_fields_class: null,
+      notme_message: 'Not {name}? Click here.',
+      notme_message_noname: 'Not your details below? Click here.',
+    };
+    this.params = Object.assign(Object.assign({}, defaults), this.params);
+    this.init();
+  }
+  init() {
+    // Merge defaults with user-provided params if not already done in the constructor
+    // ...
+    // Set Eloqua site ID
+    this.setEloquaSiteId();
+    // Load Eloqua scripts
+    this.async_load();
+    // Store URL variables
+    this.store_url_vars();
+    // Store visitor's Eloqua IDgit
+    this.store_visitor_elq_id();
+    // init noteme link;
+    this.init_notme();
+    // Set the global Eloqua callback function
+    window.SetElqContent = this.eloqua_callback.bind(this);
+  }
+  setEloquaSiteId() {
+    if (this.params.elq_site_id) {
+      ElqLib._elqQ.push(['elqSetSiteId', this.params.elq_site_id]);
+      ElqLib._elqQ.push(['elqUseFirstPartyCookie', 'tracking.ptc.com']);
+      ElqLib._elqQ.push(['elqTrackPageView', window.location.href]);
+    }
+  }
+  fire_pageview(url) {
+    try {
+      if (typeof url === 'undefined') {
+        ElqLib._elqQ.push(['elqTrackPageView']);
+      }
+      else {
+        ElqLib._elqQ.push(['elqTrackPageView', url]);
+      }
+      console.log('TRACKING: Eloqua pageview fired for URL: ' + (url || 'current page'));
+    }
+    catch (e) {
+      console.log('TRACKING: Could not fire Eloqua pageview: ', e);
+    }
+  }
+  find_eloqua_contact() {
+    console.log('CONTACT LOOKUP: Attempting to find Eloqua contact...');
+    // Queue callback action for the return of lookup
+    this.callback_queue.push(this.handle_visitor_lookup.bind(this));
+    // Start with a recipient lookup if ID was supplied in URL
+    if (this.visitor_elq_id !== null) {
+      this.lookup_visitor_by_recipient_id();
+    }
+    else {
+      // If no visitor ID, attempt to do a visitor lookup with an Eloqua cookie
+      this.lookup_visitor_by_cookie(); //preference center
+      this.lookup_contact_by_email();
+    }
+  }
+  add_field_mapping(mapping) {
+    this.field_mappings.push(mapping);
+  }
+  add_queue_action(action) {
+    this.callback_queue.push(action);
+  }
+  store_url_vars() {
+    // Clear the current url_vars
+    this.url_vars = {};
+    // Split the URL by the '?' to get the query string part
+    const queryString = window.location.search.substring(1);
+    // Split the query string by '&' to get each key-value pair
+    queryString.split('&').forEach(paramString => {
+      // Split the key-value pairs by '=' to separate keys and values
+      let [key, value] = paramString.split('=');
+      // Decode URI components to handle URL encoding
+      key = decodeURIComponent(key);
+      value = decodeURIComponent(value);
+      // Store the key-value pair in the url_vars object
+      this.url_vars[key] = value;
+    });
+    // Optionally, log the stored URL variables
+    console.log('URL variables stored:', this.url_vars);
+  }
+  store_visitor_elq_id() {
+    console.log("INIT: Looking for visitor's Eloqua ID in URL...");
+    const elqIdParam = this.url_vars['elq'];
+    if (elqIdParam) {
+      const elqId = elqIdParam.toUpperCase().replace(/(.{8})(.{4})(.{4})(.{4})(.{12})/, '$1-$2-$3-$4-$5');
+      this.visitor_elq_id = elqId;
+      console.log(`INIT: ...visitor Eloqua ID found in URL: ${elqId}`);
+    }
+    else {
+      this.visitor_elq_id = null;
+      console.log('INIT: ...no visitor Eloqua ID found in URL');
+    }
+  }
+  //   private merge(root: any, ...sources: any[]): any {
+  //     sources.forEach(source => {
+  //       for (const key in source) {
+  //         if (source.hasOwnProperty(key)) {
+  //           root[key] = source[key];
+  //         }
+  //       }
+  //     });
+  //     return root;
+  //   }
+  eloqua_callback() {
+    console.log('LOOKUP: Eloqua lookup finished');
+    // Process each action in the callback queue
+    let actionSucceeded = true;
+    while (actionSucceeded && this.callback_queue.length > 0) {
+      const action = this.callback_queue.shift();
+      if (action) {
+        console.log(`QUEUE: Executing action`);
+        actionSucceeded = action(); // Execute the action. It must return a boolean indicating success.
+        if (actionSucceeded) {
+          console.log('QUEUE: Action executed successfully, removed from queue');
+        }
+        else {
+          console.log('QUEUE: Action failed, re-adding to queue');
+          this.callback_queue.unshift(action); // Re-add the action to the front of the queue
+          break; // Break out of the loop if an action fails
+        }
+      }
+    }
+    // After processing the queue, update user details or perform other operations
+    if (actionSucceeded) {
+      this.update_user_details();
+      this.populate_mapped_fields();
+    }
+    // ...additional code to handle the aftermath of callback processing...
+  }
+  lookup_visitor_by_cookie() {
+    if (this.params.elq_visitor_lookup_key != '') {
+      ElqLib._elqQ.push(['elqDataLookup', escape(this.params.elq_visitor_lookup_key), '']);
+      console.log('LOOKUP: Visitor lookup sent using Eloqua cookie');
+    }
+    else {
+      console.log('LOOKUP: A visitor lookup cannot be performed as no lookup key was defined');
+    }
+  }
+  lookup_visitor_by_recipient_id() {
+    if (this.params.elq_recipient_id_lookup_key != '') {
+      ElqLib._elqQ.push([
+        'elqDataLookup',
+        escape(this.params.elq_recipient_id_lookup_key),
+        '<' + this.params.elq_field_email_rec_id + '>' + this.visitor_elq_id + '</' + this.params.elq_field_email_rec_id + '>',
+      ]);
+      console.log('LOOKUP: Visitor lookup sent using email recipient id: ' + this.visitor_elq_id);
+    }
+    else {
+      console.log('LOOKUP: A visitor lookup cannot be performed as no lookup key was defined');
+    }
+  }
+  lookup_contact_by_email() {
+    if (this.params.elq_contact_lookup_key != '') {
+      ElqLib._elqQ.push([
+        'elqDataLookup',
+        escape(this.params.elq_contact_lookup_key),
+        '<' + this.params.elq_field_contact_email + '>' + this.user_elq_email + '</' + this.params.elq_field_contact_email + '>',
+      ]);
+      console.log('LOOKUP: Contact lookup sent using email address: ' + this.user_elq_email);
+    }
+    else {
+      console.log('LOOKUP: A visitor lookup cannot be performed as no lookup key was defined');
+    }
+  }
+  handle_visitor_lookup() {
+    //console.log('Contact Email: ' + this.params.elq_field_contact_email)
+    const email = window.GetElqContentPersonalizationValue(this.params.elq_field_contact_email); //it was elq_field_visitor_email ( V_Email_Address)
+    if (email) {
+      console.log(`LOOKUP: Found contact email address: ${email}`);
+      this.user_elq_email = email.trim();
+      this.lookup_contact_by_email();
+      this.callback_queue.push(this.handle_contact_lookup.bind(this));
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+  handle_contact_lookup() {
+    if (window.GetElqContentPersonalizationValue(this.params.elq_field_contact_email) != '') {
+      console.log('LOOKUP: Found contact email address: ' + window.GetElqContentPersonalizationValue(this.params.elq_field_contact_email));
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+  populate_mapped_fields() {
+    console.log('MAPPING: Starting field mapping');
+    //debugger;
+    this.field_mappings.forEach(({ elementId, elqFieldName }) => {
+      const fieldValue = window.GetElqContentPersonalizationValue(elqFieldName);
+      if (elementId !== 'contact-country') {
+        const element = document.getElementById(elementId);
+        console.log('element ID of field mappings: ' + element);
+        console.log('fieldValue ID of field mappings: ' + fieldValue);
+        if (element && fieldValue) {
+          element.value = fieldValue;
+          //element.style.display = 'none'; // Hide the field.
+          if (element.closest('ptc-textfield')) {
+            element.closest('ptc-textfield').style.display = 'none';
+          }
+          else if (element.closest('ptc-select')) {
+            element.closest('ptc-select').style.display = 'none';
+          }
+          this.fields_populated = true;
+        }
+      }
+      else {
+        const countryEle = document.getElementById(elementId);
+        if (countryEle && fieldValue) {
+          countryEle.textContent = fieldValue;
+        }
+        // debugger;
+        if (countryEle.closest('ptc-select')) {
+          countryEle.closest('ptc-select').style.display = 'none';
+        }
+      }
+    });
+    console.log('MAPPING: Finished ');
+    if (this.fields_populated) {
+      this.update_notme_link();
+    }
+  }
+  update_user_details() {
+    console.log('displaying user info...');
+    if (window.GetElqContentPersonalizationValue(this.params.elq_field_contact_email) !== '') {
+      document
+        .querySelectorAll('input[type=text], input[type=tel], input[name="phonenumber"], input[name="phonenumbertwo"], input[type=email], select, textarea, span.mdc-select__selected-text')
+        .forEach((element) => {
+        if (element.tagName === 'SPAN') {
+          const spanText = element;
+          const spanEloquaName = spanText.getAttribute('data-eloqua-name');
+          if (spanEloquaName !== null) {
+            const spanElqValue = window.GetElqContentPersonalizationValue(spanEloquaName);
+            if (spanElqValue !== '' && spanElqValue.length > 0) {
+              spanText.textContent = spanElqValue;
+            }
+          }
+        }
+        else if (element.className.includes('intl-tel-input')) {
+          const telInput = element;
+          const eloquaName = telInput.getAttribute('data-eloqua-name');
+          if (eloquaName !== null) {
+            const elqValue = window.GetElqContentPersonalizationValue(eloquaName);
+            if (elqValue !== '' && elqValue.length > 0) {
+              setTimeout(() => {
+                telInput.placeholder = elqValue;
+              }, 1000);
+            }
+          }
+        }
+        else {
+          const input = element;
+          const eloquaName = input.getAttribute('data-eloqua-name');
+          if (eloquaName !== null) {
+            const elqValue = window.GetElqContentPersonalizationValue(eloquaName);
+            if (elqValue !== '' && elqValue.length > 0) {
+              input.value = elqValue;
+            }
+          }
+        }
+      });
+    }
+    if (this.user_elq_email == '' && window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_email) != '') {
+      this.user_elq_email = window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_email);
+    }
+    if (this.user_elq_firstname == '' && window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_firstname) != '') {
+      this.user_elq_firstname = window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_firstname);
+    }
+    if (this.user_elq_lastname == '' && window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_lastname) != '') {
+      this.user_elq_lastname = window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_lastname);
+    }
+  }
+  update_notme_link() {
+    // Assuming the user's first and last name are available from Eloqua fields
+    const firstName = window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_firstname);
+    const lastName = window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_lastname);
+    const notMeLinkElement = document.getElementById(this.params.notme_link_id);
+    const topAdditional = document.getElementById('not-me-additional-top');
+    const bottomAdditional = document.getElementById('not-me-additional-bottom');
+    if (notMeLinkElement) {
+      let message = this.params.notme_message;
+      console.log('first name: ' + firstName);
+      if (firstName && lastName) {
+        message = this.params.notme_message.replace('{name}', lastName + ' ' + firstName);
+      }
+      notMeLinkElement.innerHTML = `<a href="#">${message}</a>`;
+      topAdditional.innerHTML = "Please fill out additional information.";
+      bottomAdditional.innerHTML = "Click the button below to recieve email confirmation.";
+      topAdditional.style.display = 'block';
+      bottomAdditional.style.display = 'block';
+      notMeLinkElement.onclick = this.remove_user_details.bind(this);
+    }
+  }
+  init_notme() {
+    const topAdditional = document.getElementById('not-me-additional-top');
+    const bottomAdditional = document.getElementById('not-me-additional-bottom');
+    if (topAdditional)
+      topAdditional.style.display = 'none';
+    if (bottomAdditional)
+      bottomAdditional.style.display = 'none';
+  }
+  remove_user_details(e) {
+    e.preventDefault();
+    this.user_elq_email = '';
+    this.user_elq_firstname = '';
+    this.user_elq_lastname = '';
+    // $('.' + this.params.notme_fields_class).val('');
+    const linkDiv = document.getElementById(this.params.notme_link_id);
+    const topAdditional = document.getElementById('not-me-additional-top');
+    const bottomAdditional = document.getElementById('not-me-additional-bottom');
+    linkDiv.querySelector('a').remove();
+    topAdditional.style.display = 'none';
+    bottomAdditional.style.display = 'none';
+    this.refreshForm();
+    return false;
+  }
+  refreshForm() {
+    this.field_mappings.forEach(({ elementId }) => {
+      if (elementId !== 'contact-country') {
+        const element = document.getElementById(elementId);
+        if (element) {
+          console.log('element: ' + element);
+          element.value = ''; // Reset the value
+          if (element.closest('ptc-textfield')) {
+            element.closest('ptc-textfield').style.display = '';
+          }
+          else if (element.closest('ptc-select')) {
+            element.closest('ptc-select').style.display = '';
+          }
+        }
+      }
+      else {
+        const countryEle = document.getElementById(elementId);
+        if (countryEle) {
+          countryEle.textContent = '';
+        }
+        // debugger;
+        if (countryEle.closest('ptc-select')) {
+          countryEle.closest('ptc-select').style.display = '';
+        }
+      }
+    });
+    this.clearEloquaCookie('elq-uid'); // Optionally clear the Eloqua cookie
+    this.fields_populated = false;
+    //this.update_notme_link(); // Update the 'Not Me' link if necessary
+  }
+  clearEloquaCookie(name) {
+    document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    console.log('cookie cleared');
+  }
+  // Private Method to load Eloqua Scripts
+  async_load() {
+    const scriptUrl = 'https://img.en25.com/i/elqCfg.min.js';
+    const scriptElement = document.createElement('script');
+    scriptElement.type = 'text/javascript';
+    scriptElement.async = true;
+    scriptElement.src = scriptUrl;
+    // Error handling for script loading
+    scriptElement.onerror = errorEvent => {
+      console.log(`Error loading script: ${errorEvent}`);
+    };
+    // Append the script element to the head of the document, or before the first script tag found
+    const firstScriptTag = document.getElementsByTagName('script')[0];
+    if (firstScriptTag && firstScriptTag.parentNode) {
+      firstScriptTag.parentNode.insertBefore(scriptElement, firstScriptTag);
+    }
+    else {
+      document.head.appendChild(scriptElement);
+    }
+    console.log(`Async loading of script ${scriptUrl} initiated.`);
+  }
+}
+ElqLib._elqQ = window['_elqQ'] || [];
+// Static member initialization
+//ElqLib._elqQ = window['_elqQ'] || [];
+
+const ptcDataLookupCss = ":host{display:block}#not-me-link-id{color:var(--color-gray-10);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-medium);font-style:normal;font-weight:var(--ptc-font-weight-bold);line-height:normal;margin-bottom:var(--ptc-element-spacing-03);position:relative}#not-me-link-id a{color:var(--color-blue-07);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-medium);font-style:normal;font-weight:var(--ptc-font-weight-bold);line-height:normal;text-decoration-line:underline}.not-me-additional-text{color:var(--color-gray-10);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-medium);font-style:normal;font-weight:var(--ptc-font-weight-regular);line-height:normal;margin-bottom:var(--ptc-element-spacing-03)}.not-me-additional-text#not-me-additional-bottom{margin-bottom:unset;margin-top:var(--ptc-element-spacing-03)}.ptc-embedded-form>div{max-width:273px;overflow-wrap:break-word}.ptc-embedded-form .iti__country-name{color:var(--color-gray-12)}.ptc-embedded-form .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{color:var(--color-gray-12)}.ptc-embedded-form .mdc-menu-surface--open{z-index:99999}";
+
+const PtcDataLookup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.elqSiteId = undefined;
+    this.elqVisitorLookupKey = undefined;
+    this.elqRecipientIdLookupKey = undefined;
+    this.elqContactLookupKey = undefined;
+    this.elqFieldEmailRecId = 'V_EmailRecipientID';
+    this.elqFieldContactEmail = 'C_EmailAddress';
+    this.elqFieldVisitorEmail = 'V_Email_Address';
+    this.elqFieldVisitorFirstname = 'C_FirstName';
+    this.elqFieldVisitorLastname = 'C_LastName';
+    this.notmeLinkId = undefined;
+    this.notmeFieldsClass = undefined;
+    this.notmeMessage = undefined;
+    this.notmeMessageNoname = undefined;
+    this.isBlindSubmit = true;
+    this.isInitialized = false;
+  }
+  componentWillLoad() {
+    this.initializeElqLib();
+    if (this.isBlindSubmit) {
+      this.populateBlindField();
+    }
+  }
+  initializeElqLib() {
+    this.elqLib = new ElqLib({
+      elq_site_id: this.elqSiteId,
+      elq_visitor_lookup_key: this.elqVisitorLookupKey,
+      elq_recipient_id_lookup_key: this.elqRecipientIdLookupKey,
+      elq_contact_lookup_key: this.elqContactLookupKey,
+      elq_field_email_rec_id: this.elqFieldEmailRecId,
+      elq_field_contact_email: this.elqFieldContactEmail,
+      elq_field_visitor_email: this.elqFieldVisitorEmail,
+      elq_field_visitor_firstname: this.elqFieldVisitorFirstname,
+      elq_field_visitor_lastname: this.elqFieldVisitorLastname,
+      notme_link_id: this.notmeLinkId,
+      notme_fields_class: this.notmeFieldsClass,
+      notme_message: this.notmeMessage,
+      notme_message_noname: this.notmeMessageNoname,
+    });
+    this.isInitialized = true;
+  }
+  populateBlindField() {
+    this.elqLib.add_field_mapping({ elementId: 'contact-phone', elqFieldName: 'C_BusPhone' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-email', elqFieldName: 'C_EmailAddress' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-firstname', elqFieldName: 'C_FirstName' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-lastname', elqFieldName: 'C_LastName' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-country', elqFieldName: 'C_Country' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-phone', elqFieldName: 'C_BusPhone' });
+    this.elqLib.add_field_mapping({ elementId: 'company', elqFieldName: 'C_Company' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-zipcode', elqFieldName: 'C_Zip_Postal' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-job-category', elqFieldName: 'C_Job_Role1' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-job-function', elqFieldName: 'C_Job_Function1' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-jp-job-title', elqFieldName: 'C_Title' });
+  }
+  getCookie(name) {
+    let cookieValue = null;
+    if (document.cookie) {
+      const cookies = document.cookie.split(';');
+      for (let cookie of cookies) {
+        const [key, value] = cookie.trim().split('=');
+        if (key === name) {
+          cookieValue = decodeURIComponent(value);
+          break;
+        }
+      }
+    }
+    return cookieValue;
+  }
+  async performDataLookup() {
+    if (this.isInitialized) {
+      this.elqLib.user_elq_email = this.getCookie('elq-uid');
+      this.elqLib.find_eloqua_contact();
+    }
+  }
+  render() {
+    return h("slot", null);
+  }
+  get el() { return getElement(this); }
+};
+PtcDataLookup.style = ptcDataLookupCss;
+
+export { PtcDataLookup as ptc_data_lookup };