@bikdotai/bik-widgets 1.0.0

package/src/utilities/widgetUtils.js

@@ -0,0 +1,342 @@
+'use strict';
+/**
+ * Considerations
+ * if path is greater we can ignore it
+ * fallback path query params should not be considered
+ */
+var __assign =
+  (this && this.__assign) ||
+  function () {
+    __assign =
+      Object.assign ||
+      function (t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+      };
+    return __assign.apply(this, arguments);
+  };
+exports.__esModule = true;
+exports.WidgetUtils = exports.FAB_POSITION = void 0;
+var FAB_POSITION;
+(function (FAB_POSITION) {
+  FAB_POSITION['BOTTOM_LEFT'] = 'BOTTOM_LEFT';
+  FAB_POSITION['BOTTOM_RIGHT'] = 'BOTTOM_RIGHT';
+  FAB_POSITION['CENTER_LEFT'] = 'CENTER_LEFT';
+  FAB_POSITION['CENTER_RIGHT'] = 'CENTER_RIGHT';
+  FAB_POSITION['POP_UP'] = 'POP_UP';
+})((FAB_POSITION = exports.FAB_POSITION || (exports.FAB_POSITION = {})));
+function isInIframe() {
+  try {
+    return window.self !== window.top;
+  } catch (e) {
+    return true;
+  }
+}
+var WidgetUtils = /** @class */ (function () {
+  function WidgetUtils() {}
+  WidgetUtils.prototype.isValidUrl = function (urlString) {
+    var urlPattern = new RegExp(
+      '^(https?:\\/\\/)?' +
+        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
+        '((\\d{1,3}\\.){3}\\d{1,3}))' +
+        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
+        '(\\?[;&a-z\\d%_.~+=-]*)?' +
+        '(\\#[-a-z\\d_]*)?$',
+      'i',
+    );
+    return !!urlPattern.test(urlString);
+  };
+  WidgetUtils.prototype.isHomePage = function (urlString) {
+    var urlPattern = urlString.match(/^\/(\?.*)?$/);
+    return !!urlPattern;
+  };
+  //entry point
+  WidgetUtils.prototype.showWidget = function (config, isAutomationTest) {
+    var _this = this;
+    var _a, _b;
+    try {
+      // if(!isAutomationTest && isInIframe()){
+      //   console.log('return 1')
+      //   return false;
+      // }
+      var updatedCustomUrls_1 = {};
+      Object.keys(config.customUrls).forEach(function (key) {
+        if (_this.isValidUrl(key)) {
+          var newUrl = new URL(key);
+          var correctKey = newUrl.href.replace(newUrl.origin, '');
+          updatedCustomUrls_1[correctKey] = config.customUrls[key];
+        } else {
+          updatedCustomUrls_1[key] = config.customUrls[key];
+        }
+      });
+      var updatedConfig_1 = __assign(__assign({}, config), {
+        customUrls: updatedCustomUrls_1,
+      });
+      //handling home page alone
+      var homePageWidgetsArray =
+        (_a = updatedConfig_1.customUrls['/']) !== null && _a !== void 0
+          ? _a
+          : [];
+      if (homePageWidgetsArray.length) {
+        var filtered = homePageWidgetsArray.filter(function (widget) {
+          return widget.widgetId == config.currentWidgetId;
+        });
+        if (filtered.length) {
+          if (updatedConfig_1.currentUrl == '/') {
+            return true;
+          }
+          var constructedUrl = new URL(
+            'https://bik.ai' + updatedConfig_1.currentUrl,
+          );
+          if (constructedUrl.pathname == '/') {
+            return true;
+          }
+        }
+      }
+      //handling all pages
+      var allPagesWidgetsArray =
+        (_b = updatedConfig_1.customUrls['/*']) !== null && _b !== void 0
+          ? _b
+          : [];
+      console.log('allPagesWidgetsArray', allPagesWidgetsArray);
+      if (allPagesWidgetsArray.length) {
+        var filtered = allPagesWidgetsArray.filter(function (widget) {
+          return widget.widgetId == config.currentWidgetId;
+        });
+        console.log('filtered', filtered);
+        if (filtered.length) {
+          var currentWidgetPosition_1 = filtered[0].fabPosition;
+          var allWidgetedUrls = Object.keys(updatedConfig_1.customUrls);
+          var filteredWidgetedUrls = allWidgetedUrls.filter(function (url) {
+            return url !== '/*';
+          });
+          console.log('filteredWidgetedUrls', filteredWidgetedUrls);
+          var priorityUrls = [];
+          for (var i = 0; i < filteredWidgetedUrls.length; i++) {
+            if (
+              filteredWidgetedUrls[i] !== '/' &&
+              updatedConfig_1.currentUrl.startsWith(filteredWidgetedUrls[i])
+            ) {
+              priorityUrls.push(filteredWidgetedUrls[i]);
+            }
+          }
+          console.log('priorityUrls', priorityUrls);
+          if (!priorityUrls.length) {
+            return true;
+          }
+          for (var i = 0; i < priorityUrls.length; i++) {
+            var clashingWidgets = updatedConfig_1.customUrls[
+              priorityUrls[i]
+            ].filter(function (widget) {
+              return (
+                widget.widgetId !== updatedConfig_1.currentWidgetId &&
+                widget.fabPosition === currentWidgetPosition_1
+              );
+            });
+            console.log('clashingWidgets', clashingWidgets);
+            if (clashingWidgets.length) {
+              return false;
+            }
+          }
+          return true;
+        }
+      }
+      var ans = this.findExactMatch(updatedConfig_1);
+      if (ans && ans === config.currentWidgetId) {
+        return true;
+      }
+      var fuzzyAns = this.tryFuzzyMatch(updatedConfig_1);
+      console.log('fuzzyAns', fuzzyAns);
+      return fuzzyAns && fuzzyAns === config.currentWidgetId;
+    } catch (err) {
+      return false;
+    }
+  };
+  WidgetUtils.prototype.findExactMatch = function (config) {
+    try {
+      // try exact match
+      var ans_1;
+      if (config.customUrls[config.currentUrl]) {
+        var values = config.customUrls[config.currentUrl];
+        if (values.length) {
+          values.forEach(function (item) {
+            if (item.widgetId == config.currentWidgetId) {
+              ans_1 = config.currentWidgetId;
+            }
+          });
+        }
+      }
+      return ans_1;
+    } catch (err) {
+      return;
+    }
+  };
+  WidgetUtils.prototype.tryFuzzyMatch = function (config) {
+    var _this = this;
+    try {
+      var ans_2 = null;
+      var currentUrlRaw = config.currentUrl.replace(/\/\?/, '?');
+      var currentUrl_1 = this.separatePathAndQuery(
+        currentUrlRaw,
+        config.currentWidgetId,
+      );
+      if (!currentUrl_1) {
+        return;
+      }
+      // try max path match
+      var onlyUrls = Object.keys(config.customUrls);
+      var currentUrlPathLength_1 = currentUrl_1.path.split('/').length;
+      var possibleMatches_1 = [];
+      var possibleFallback_1 = {
+        path: '',
+        query: [],
+        count: 0,
+      };
+      onlyUrls.forEach(function (url) {
+        // if number of paths are greater than current url paths - ignore them
+        // only consider the path part here - remove/ignore the query params
+        if (_this.isHomePage(url)) return;
+        var values = config.customUrls[url];
+        values.forEach(function (item) {
+          var urlPath = _this.separatePathAndQuery(url, item.widgetId);
+          var urlPathLength =
+            urlPath === null || urlPath === void 0
+              ? void 0
+              : urlPath.path.split('/').length;
+          if (urlPathLength && urlPathLength > currentUrlPathLength_1) {
+            // Do nothing
+          } else if (urlPathLength == currentUrlPathLength_1) {
+            // check if they match
+            if (
+              (currentUrl_1 === null || currentUrl_1 === void 0
+                ? void 0
+                : currentUrl_1.path) ==
+              (urlPath === null || urlPath === void 0 ? void 0 : urlPath.path)
+            ) {
+              possibleMatches_1.push(urlPath);
+            }
+          } else {
+            // fallback
+            // consider only pure url i.e. only path and no query params
+            if (
+              !(urlPath === null || urlPath === void 0
+                ? void 0
+                : urlPath.query.length)
+            ) {
+              if (
+                (currentUrl_1 === null || currentUrl_1 === void 0
+                  ? void 0
+                  : currentUrl_1.path.includes(
+                      urlPath === null || urlPath === void 0
+                        ? void 0
+                        : urlPath.path,
+                    )) &&
+                currentUrl_1.count > possibleFallback_1.count
+              ) {
+                possibleFallback_1 = urlPath;
+              }
+            } else {
+              // Do nothing
+            }
+          }
+        });
+      });
+      if (possibleMatches_1.length) {
+        // if there are query params in currentUrl calculate max query match
+        if (currentUrl_1 && currentUrl_1.query.length) {
+          // find max query match
+          // even if one query param matches, consider that url
+          // else fallback to exact path match
+          var maxMatchPercentage_1 = 0;
+          var currentQueryHashMap_1 = new Map();
+          currentUrl_1.query.forEach(function (param) {
+            currentQueryHashMap_1.set(param, 1);
+          });
+          possibleMatches_1.forEach(function (possibleMatch) {
+            var matchCount = 0;
+            possibleMatch.query.forEach(function (query) {
+              if (currentQueryHashMap_1.has(query)) {
+                matchCount++;
+              }
+            });
+            var matchPercentage = currentUrl_1
+              ? (matchCount /
+                  (possibleMatch.query.length + currentUrl_1.query.length)) *
+                100
+              : 0;
+            if (maxMatchPercentage_1 < matchPercentage) {
+              maxMatchPercentage_1 = matchPercentage;
+              ans_2 = possibleMatch;
+            }
+          });
+          if (ans_2) {
+            // Do nothing
+          } else {
+            ans_2 = this.possibleMatchWithZeroQueryParam(possibleMatches_1);
+            if (ans_2 && ans_2.length) {
+              ans_2 = ans_2[0];
+            } else {
+              // if that is also empty, return best fallback
+              ans_2 = possibleFallback_1;
+            }
+          }
+        } else {
+          // if there are no query params in currentUrl, return the option with 0 query params
+          ans_2 = this.possibleMatchWithZeroQueryParam(possibleMatches_1);
+          if (ans_2 && ans_2.length) {
+            ans_2 = ans_2[0];
+          } else {
+            // if that is also empty, return best fallback
+            ans_2 = possibleFallback_1;
+          }
+        }
+      } else {
+        ans_2 = possibleFallback_1;
+      }
+      return (
+        (ans_2 === null || ans_2 === void 0 ? void 0 : ans_2.template) || null
+      );
+    } catch (err) {
+      return;
+    }
+  };
+  WidgetUtils.prototype.separatePathAndQuery = function (url, widgetId) {
+    try {
+      // any dummy base url will do
+      url = 'https://www.bik.ai' + url;
+      var newUrl = new URL(url);
+      var obj = {
+        path: '',
+        query: [],
+        count: 0,
+        template: widgetId,
+      };
+      obj.path = newUrl.pathname;
+      obj.count = newUrl.pathname.split('/').length;
+      if (newUrl.search) {
+        var params = newUrl.search.split('?');
+        obj.query = params[1].split('&');
+      }
+      return obj;
+    } catch (err) {
+      return;
+    }
+  };
+  WidgetUtils.prototype.possibleMatchWithZeroQueryParam = function (
+    possibleMatches,
+  ) {
+    try {
+      return possibleMatches.filter(function (possibleMatch) {
+        return !possibleMatch.query.length;
+      });
+    } catch (err) {
+      return;
+    }
+  };
+  return WidgetUtils;
+})();
+exports.WidgetUtils = WidgetUtils;

package/src/utilities/widgetUtils.ts

@@ -0,0 +1,313 @@
+/**
+ * Considerations
+ * if path is greater we can ignore it
+ * fallback path query params should not be considered
+ */
+
+export enum FAB_POSITION {
+  BOTTOM_LEFT = 'BOTTOM_LEFT',
+  BOTTOM_RIGHT = 'BOTTOM_RIGHT',
+  CENTER_LEFT = 'CENTER_LEFT',
+  CENTER_RIGHT = 'CENTER_RIGHT',
+  POP_UP = 'POP_UP',
+}
+
+export interface IPageConfigProcessed {
+  [key: string]: {
+    widgetId: string;
+    fabPosition: FAB_POSITION;
+  }[];
+}
+
+interface IShowWidget {
+  currentWidgetId: string;
+  customUrls: IPageConfigProcessed;
+  currentUrl: string;
+}
+
+interface IParsedUrl {
+  path: string;
+  query: string[];
+  count: number;
+  template?: string;
+}
+
+function isInIframe() {
+  try {
+    return window.self !== window.top;
+  } catch (e) {
+    return true;
+  }
+}
+
+export class WidgetUtils {
+  isValidUrl(urlString: string) {
+    const urlPattern = new RegExp(
+      '^(https?:\\/\\/)?' +
+        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
+        '((\\d{1,3}\\.){3}\\d{1,3}))' +
+        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
+        '(\\?[;&a-z\\d%_.~+=-]*)?' +
+        '(\\#[-a-z\\d_]*)?$',
+      'i',
+    );
+    return !!urlPattern.test(urlString);
+  }
+
+  isHomePage(urlString: string) {
+    const urlPattern = urlString.match(/^\/(\?.*)?$/);
+    return !!urlPattern;
+  }
+
+  //entry point
+  showWidget(config: IShowWidget, isAutomationTest?: boolean) {
+    try {
+      if (!isAutomationTest && isInIframe()) {
+        return false;
+      }
+      let updatedCustomUrls: IPageConfigProcessed = {};
+      Object.keys(config.customUrls).forEach(key => {
+        if (this.isValidUrl(key)) {
+          const newUrl = new URL(key);
+          const correctKey = newUrl.href.replace(newUrl.origin, '');
+          updatedCustomUrls[correctKey] = config.customUrls[key];
+        } else {
+          updatedCustomUrls[key] = config.customUrls[key];
+        }
+      });
+      const updatedConfig: IShowWidget = {
+        ...config,
+        customUrls: updatedCustomUrls,
+      };
+      //handling home page alone
+      const homePageWidgetsArray = updatedConfig.customUrls['/'] ?? [];
+      if (homePageWidgetsArray.length) {
+        const filtered = homePageWidgetsArray.filter(
+          widget => widget.widgetId == config.currentWidgetId,
+        );
+        if (filtered.length) {
+          if (updatedConfig.currentUrl == '/') {
+            return true;
+          }
+          const constructedUrl = new URL(
+            'https://bik.ai' + updatedConfig.currentUrl,
+          );
+          if (constructedUrl.pathname == '/') {
+            return true;
+          }
+        }
+      }
+
+      //handling all pages
+      const allPagesWidgetsArray = updatedConfig.customUrls['/*'] ?? [];
+      if (allPagesWidgetsArray.length) {
+        const filtered = allPagesWidgetsArray.filter(
+          widget => widget.widgetId == config.currentWidgetId,
+        );
+        if (filtered.length) {
+          const currentWidgetPosition = filtered[0].fabPosition;
+          const allWidgetedUrls = Object.keys(updatedConfig.customUrls);
+          const filteredWidgetedUrls = allWidgetedUrls.filter(
+            url => url !== '/*',
+          );
+          const priorityUrls = [];
+          for (let i = 0; i < filteredWidgetedUrls.length; i++) {
+            if (updatedConfig.currentUrl.startsWith(filteredWidgetedUrls[i])) {
+              priorityUrls.push(filteredWidgetedUrls[i]);
+            }
+          }
+          if (!priorityUrls.length) {
+            return true;
+          }
+          for (let i = 0; i < priorityUrls.length; i++) {
+            const clashingWidgets = updatedConfig.customUrls[
+              priorityUrls[i]
+            ].filter(widget => {
+              return (
+                widget.widgetId !== updatedConfig.currentWidgetId &&
+                widget.fabPosition === currentWidgetPosition
+              );
+            });
+            if (clashingWidgets.length) {
+              return false;
+            }
+          }
+          return true;
+        }
+      }
+      const ans = this.findExactMatch(updatedConfig);
+      if (ans && ans === config.currentWidgetId) {
+        return true;
+      }
+      const fuzzyAns = this.tryFuzzyMatch(updatedConfig);
+      return fuzzyAns && fuzzyAns === config.currentWidgetId;
+    } catch (err: any) {
+      return false;
+    }
+  }
+
+  findExactMatch(config: IShowWidget) {
+    try {
+      // try exact match
+      let ans;
+      if (config.customUrls[config.currentUrl]) {
+        const values = config.customUrls[config.currentUrl];
+        if (values.length) {
+          values.forEach(item => {
+            if (item.widgetId == config.currentWidgetId) {
+              ans = config.currentWidgetId;
+            }
+          });
+        }
+      }
+      return ans;
+    } catch (err: any) {
+      return;
+    }
+  }
+
+  tryFuzzyMatch(config: IShowWidget) {
+    try {
+      let ans = null;
+      const currentUrlRaw = config.currentUrl.replace(/\/\?/, '?');
+      const currentUrl = this.separatePathAndQuery(
+        currentUrlRaw,
+        config.currentWidgetId,
+      );
+      if (!currentUrl) {
+        return;
+      }
+      // try max path match
+      const onlyUrls = Object.keys(config.customUrls);
+      const currentUrlPathLength = currentUrl.path.split('/').length;
+      const possibleMatches: IParsedUrl[] = [];
+      let possibleFallback: IParsedUrl = {
+        path: '',
+        query: [],
+        count: 0,
+      };
+      onlyUrls.forEach(url => {
+        // if number of paths are greater than current url paths - ignore them
+        // only consider the path part here - remove/ignore the query params
+        if (this.isHomePage(url)) return;
+        const values = config.customUrls[url];
+        values.forEach(item => {
+          const urlPath = this.separatePathAndQuery(url, item.widgetId);
+          const urlPathLength = urlPath?.path.split('/').length;
+          if (urlPathLength && urlPathLength > currentUrlPathLength) {
+            // Do nothing
+          } else if (urlPathLength == currentUrlPathLength) {
+            // check if they match
+            if (currentUrl?.path == urlPath?.path) {
+              possibleMatches.push(urlPath);
+            }
+          } else {
+            // fallback
+            // consider only pure url i.e. only path and no query params
+            if (!urlPath?.query.length) {
+              if (
+                currentUrl?.path.includes(urlPath?.path as string) &&
+                currentUrl.count > possibleFallback.count
+              ) {
+                possibleFallback = urlPath as unknown as IParsedUrl;
+              }
+            } else {
+              // Do nothing
+            }
+          }
+        });
+      });
+
+      if (possibleMatches.length) {
+        // if there are query params in currentUrl calculate max query match
+        if (currentUrl && currentUrl.query.length) {
+          // find max query match
+          // even if one query param matches, consider that url
+          // else fallback to exact path match
+          let maxMatchPercentage = 0;
+
+          const currentQueryHashMap = new Map();
+          currentUrl.query.forEach(param => {
+            currentQueryHashMap.set(param, 1);
+          });
+          possibleMatches.forEach(possibleMatch => {
+            let matchCount = 0;
+            possibleMatch.query.forEach((query: string) => {
+              if (currentQueryHashMap.has(query)) {
+                matchCount++;
+              }
+            });
+            const matchPercentage = currentUrl
+              ? (matchCount /
+                  (possibleMatch.query.length + currentUrl.query.length)) *
+                100
+              : 0;
+            if (maxMatchPercentage < matchPercentage) {
+              maxMatchPercentage = matchPercentage;
+              ans = possibleMatch;
+            }
+          });
+
+          if (ans) {
+            // Do nothing
+          } else {
+            ans = this.possibleMatchWithZeroQueryParam(possibleMatches);
+            if (ans && ans.length) {
+              ans = ans[0];
+            } else {
+              // if that is also empty, return best fallback
+              ans = possibleFallback;
+            }
+          }
+        } else {
+          // if there are no query params in currentUrl, return the option with 0 query params
+          ans = this.possibleMatchWithZeroQueryParam(possibleMatches);
+          if (ans && ans.length) {
+            ans = ans[0];
+          } else {
+            // if that is also empty, return best fallback
+            ans = possibleFallback;
+          }
+        }
+      } else {
+        ans = possibleFallback;
+      }
+      return ans?.template || null;
+    } catch (err: any) {
+      return;
+    }
+  }
+
+  separatePathAndQuery(url: string, widgetId: string) {
+    try {
+      // any dummy base url will do
+      url = 'https://www.bik.ai' + url;
+      const newUrl = new URL(url);
+      const obj: IParsedUrl = {
+        path: '',
+        query: [],
+        count: 0,
+        template: widgetId,
+      };
+      obj.path = newUrl.pathname;
+      obj.count = newUrl.pathname.split('/').length;
+      if (newUrl.search) {
+        const params = newUrl.search.split('?');
+        obj.query = params[1].split('&');
+      }
+      return obj;
+    } catch (err: any) {
+      return;
+    }
+  }
+
+  possibleMatchWithZeroQueryParam(possibleMatches: IParsedUrl[]) {
+    try {
+      return possibleMatches.filter(
+        possibleMatch => !possibleMatch.query.length,
+      );
+    } catch (err: any) {
+      return;
+    }
+  }
+}

package/src/widgets/BottomDrawer/config.ts

@@ -0,0 +1,41 @@
+import { IBottomDrawer } from './index';
+const config: IBottomDrawer = {
+  preview: false,
+  environment: 'staging',
+  visibility: {
+    visiblePages: ['/', '/products'],
+  },
+  widgetCustomisation: {
+    iconColor: '#000000',
+    fabBackgroundColor: '#FBDC7E',
+    widgetName: 'Bottom Drawer tmyv',
+    redirectWidgetBackgroundColor: '',
+    redirectWidgetTitleText: 'Connect with us!',
+    redirectWidgetBannerImage:
+      'https://png.pngtree.com/thumb_back/fh260/back_pic/02/50/63/71577e1cf59d802.jpg',
+    livechatEnabled: false,
+    whatsapp: '916364856308',
+    whatsappMessage: 'afas',
+    emailSubject: '',
+    emailBody: '',
+    fabPositioner: {
+      bottom: '30px',
+      right: '30px',
+    },
+    fabIconLink:
+      'https://storage.googleapis.com/bik-widget-mfe/bap%2Ffab-assets%2Ficons%2Fbik%2Fredirect.svg',
+    fabPosition: 'BOTTOM_RIGHT',
+    fabMobileSize: 50,
+    fabWebSize: 50,
+    multiLingualConfigurations: {
+      ENGLISH: {
+        redirectWidgetTitleText: 'Connect English',
+      },
+      FRENCH: {
+        redirectWidgetTitleText: 'Connect French',
+      },
+    },
+  },
+};
+
+export default config;