@bikdotai/bik-widgets 1.0.0

package/src/widgets/CaptivateBanner/index.tsx

@@ -0,0 +1,204 @@
+import includeMe from 'utilities/script';
+import Popup from './captivateBanner';
+import React, { useEffect, useRef, useState, Suspense } from 'react';
+import {
+  ICaptivateBannerWidgetCustomisation,
+  ICaptivateBannerWidgetVisibility,
+  WIDGET_NAME,
+  WidgetSchema,
+  ISO_CODES_VALUES,
+} from '@bikdotai/bik-models/dm';
+import { IPageConfigProcessed, WidgetUtils } from '../../utilities/widgetUtils';
+import { shouldShowExitIntent } from '../../utilities/exitIntentUtils';
+import {
+  cookieClickHandler,
+  getCookie,
+  getScrollPercent,
+  setCookie,
+} from '../STW/utility';
+import useIsMobile from 'hooks/useIsMobile';
+
+const ExitIntentHook = React.lazy(() => import('../ExitIntentHook'));
+
+export interface CaptivateBannerProps extends WidgetSchema {
+  visibility: ICaptivateBannerWidgetVisibility;
+  widgetCustomisation: ICaptivateBannerWidgetCustomisation;
+  id: string;
+  storeWidgetConfig: IPageConfigProcessed;
+  environment: string;
+  preview?: boolean;
+  templateName?: WIDGET_NAME;
+  isMobile?: boolean;
+  storeId: string;
+  previewLanguage?: ISO_CODES_VALUES;
+}
+
+const CaptivateBanner: React.FC<CaptivateBannerProps> = props => {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const popupReference = useRef(null);
+  const widgetUtils = new WidgetUtils();
+  const triggers =
+    props.visibility.triggers ??
+    ({} as ICaptivateBannerWidgetVisibility['triggers']);
+  const pageScroll = triggers?.pageScroll;
+  const viewLimit = (triggers?.frequency ? triggers.frequency : 0) / 24;
+  const timeDelay = (triggers?.timeDelay ? triggers.timeDelay : 0) * 1000;
+
+  const launchModal = () => {
+    setIsVisible(true);
+    setCookie(`bik-${props.id}-modalopened`, 'bikmodalopened', viewLimit);
+    cookieClickHandler(
+      `bik-${props.id}-visitor`,
+      'bikvisitor',
+      'WIDGET_VISITED',
+      1,
+      props.id,
+      props.environment,
+    );
+  };
+
+  const launchModalOnTimeDelay = () => {
+    if (!isVisible && timeDelay) {
+      setTimeout(() => {
+        if (!isVisible) {
+          launchModal();
+        }
+      }, timeDelay);
+    }
+  };
+
+  const launchModalOnScroll = () => {
+    const scrollHandler = () => {
+      if (
+        isVisible ||
+        !pageScroll ||
+        (getCookie(`bik-${props.id}-claimed`) &&
+          props.visibility?.triggers?.hideAfterClaimed) ||
+        (getCookie(`bik-${props.id}-modalopened`) &&
+          props.visibility?.triggers?.frequency)
+      ) {
+        return;
+      }
+      if (pageScroll && getScrollPercent() >= pageScroll) {
+        launchModal();
+        window.removeEventListener('scroll', scrollHandler);
+      }
+    };
+    window.addEventListener('scroll', scrollHandler);
+  };
+
+  const handleExitIntent = () => {
+    if (!isVisible && !props.preview) {
+      cookieClickHandler(
+        `bik-${props.id}-clicked`,
+        'bikclick',
+        'WIDGET_CLICKED',
+        1,
+        props.id,
+        props.environment,
+      );
+      setIsVisible(true);
+    }
+  };
+
+  const getExitIntentHook = () => {
+    if (props.preview) {
+      return false;
+    }
+    const pathname = window.location.pathname;
+    const location = window.location.href;
+    const visiblePages = props.visibility?.visiblePages ?? [];
+    const isMobileDevice = useIsMobile();
+
+    if (
+      shouldShowExitIntent({
+        visiblePages,
+        currentLocation: location,
+        currentPathname: pathname,
+        isMobileDevice,
+        triggers,
+      })
+    ) {
+      return (
+        <Suspense fallback={null}>
+          <ExitIntentHook
+            onExitIntent={handleExitIntent}
+            config={{
+              exitIntentTimeDelay: triggers?.exitIntentTimeDelay,
+              exitIntentViewLimit: triggers?.exitIntentViewLimit,
+              exitIntentFastUpScroll: triggers?.exitIntentFastUpScroll,
+              showExitIntentOn: triggers?.showExitIntentOn,
+            }}
+            widgetId={props.id}
+          />
+        </Suspense>
+      );
+    } else {
+      return null;
+    }
+  };
+
+  const closePopup = () => {
+    setIsVisible(false);
+  };
+
+  useEffect(() => {
+    const shouldShow = widgetUtils.showWidget(
+      {
+        currentUrl: window.location.href.replace(window.location.origin, ''),
+        customUrls: props.storeWidgetConfig,
+        currentWidgetId: props.id,
+      },
+      props.info.isAutomationTesting,
+    );
+    if (
+      !shouldShow ||
+      (getCookie(`bik-${props.id}-claimed`) &&
+        props.visibility?.triggers?.hideAfterClaimed) ||
+      (getCookie(`bik-${props.id}-modalopened`) &&
+        props.visibility?.triggers?.frequency)
+    ) {
+      return;
+    }
+    launchModalOnTimeDelay();
+    launchModalOnScroll();
+  }, [window.location.href]);
+
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (
+        popupReference.current &&
+        !popupReference.current.contains(event.target)
+      ) {
+        if (!props.preview) {
+          closePopup();
+        }
+      }
+    }
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [popupReference]);
+
+  return (
+    <>
+      {getExitIntentHook()}
+
+      {isVisible && (
+        <Popup
+          {...props}
+          templateName={props.info.templateName}
+          isVisible={isVisible}
+          onClose={closePopup}
+          popupReference={popupReference}
+        />
+      )}
+    </>
+  );
+};
+
+export default CaptivateBanner;
+if (process.env.NODE_ENV !== 'development') {
+  includeMe(CaptivateBanner);
+}

package/src/widgets/CaptivateBanner/previewDesktop.module.css

@@ -0,0 +1,51 @@
+.popupContainer {
+  width: calc(120px + 6px);
+  position: absolute;
+  z-index: 4;
+  opacity: 1;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+  height: auto;
+}
+
+.popupContainer__content {
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  padding: 3px;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  position: relative;
+}
+
+.popupContainer__image {
+  width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
+
+.popupContainer__button {
+  width: 100%;
+  padding: 2px;
+  border: none;
+  border-radius: 2px;
+  cursor: pointer;
+  font-weight: 400;
+  font-size: 6px;
+  text-align: center;
+}
+
+.popupCloser__button {
+  height: 15px;
+  width: 15px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  z-index: 5;
+}

package/src/widgets/CaptivateBanner/previewMobile.module.css

@@ -0,0 +1,51 @@
+.popupContainer {
+  width: calc(80% + 12px);
+  position: absolute;
+  z-index: 4;
+  opacity: 1;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+  height: auto;
+}
+
+.popupContainer__content {
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 6px;
+  gap: 6px;
+  position: relative;
+}
+
+.popupContainer__image {
+  width: 100%;
+  height: auto;
+  border-radius: 12px;
+}
+
+.popupContainer__button {
+  width: 100%;
+  padding: 5px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.popupCloser__button {
+  height: 17px;
+  width: 17px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  z-index: 5;
+}

package/src/widgets/CaptivateBanner/style.module.css

@@ -0,0 +1,77 @@
+.popupWrapper {
+  position: fixed;
+  display: block;
+  top: 0;
+  left: 0;
+  z-index: 2147483645;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.popupContainer {
+  width: calc(336px + 24px);
+  position: fixed;
+  z-index: 2147483646;
+  opacity: 1;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+  height: auto;
+}
+
+.popupContainer__content {
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  padding: 12px;
+  border-radius: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  position: relative;
+}
+
+.popupContainer__image {
+  width: 100%;
+  height: auto;
+  border-radius: 12px;
+  aspect-ratio: 0.76;
+}
+
+.popupContainer__button {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 16px;
+  text-align: center;
+}
+
+.popupCloser__button {
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  z-index: 2147483647;
+}
+
+@media only screen and (max-width: 768px) {
+  .popupContainer {
+    width: calc(80% + 12px);
+  }
+  .popupContainer__content {
+    padding: 6px;
+    gap: 6px;
+  }
+  .popupContainer__button {
+    font-size: 14px;
+    font-weight: normal;
+  }
+}

package/src/widgets/CaptivateBanner/utils.ts

@@ -0,0 +1,104 @@
+import {
+  ICaptivateBannerWidgetCustomisation,
+  WIDGET_POSITION_DESKTOP,
+  WIDGET_POSITION_MOBILE,
+} from '@bikdotai/bik-models/dm';
+import { IShopifyFormsWidgetCustomisation } from '@bikdotai/bik-models/dm/widgets/ShopifyForms/shopifyForms.interface';
+
+export const fetchPositionCss = (
+  widgetCustomisation:
+    | ICaptivateBannerWidgetCustomisation
+    | IShopifyFormsWidgetCustomisation,
+  isMobile: boolean,
+  desktopViewCenter?: boolean,
+) => {
+  if (isMobile) {
+    if (
+      widgetCustomisation.widgetPositionMobile === WIDGET_POSITION_MOBILE.CENTER
+    ) {
+      return {
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+      };
+    } else {
+      return {
+        bottom: 0,
+        left: '50%',
+        transform: 'translate(-50%, 0)',
+      };
+    }
+  }
+  if (
+    desktopViewCenter ||
+    widgetCustomisation.widgetPositionDesktop === WIDGET_POSITION_DESKTOP.CENTER
+  ) {
+    return {
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+    };
+  } else if (
+    widgetCustomisation.widgetPositionDesktop ===
+    WIDGET_POSITION_DESKTOP.BOTTOM_LEFT
+  ) {
+    return {
+      bottom: 10,
+      left: 10,
+      transform: 'none',
+    };
+  } else {
+    return {
+      bottom: 10,
+      right: 10,
+      transform: 'none',
+    };
+  }
+};
+
+export const fetchCloseButtonPositioner = (
+  widgetCustomisation:
+    | ICaptivateBannerWidgetCustomisation
+    | IShopifyFormsWidgetCustomisation,
+  isMobile: boolean,
+  isPreview: boolean,
+) => {
+  if (isMobile) {
+    return {
+      top: isPreview ? -26 : -36,
+    };
+  }
+  if (
+    widgetCustomisation.widgetPositionDesktop ===
+      WIDGET_POSITION_DESKTOP.CENTER ||
+    widgetCustomisation.widgetPositionDesktop ===
+      WIDGET_POSITION_DESKTOP.BOTTOM_LEFT
+  ) {
+    return {
+      top: isPreview ? -7 : -14,
+      right: isPreview ? -7 : -14,
+    };
+  } else {
+    return {
+      top: isPreview ? -7 : -14,
+      left: isPreview ? -7 : -14,
+    };
+  }
+};
+
+export const fetchContainerWidth = (
+  widgetCustomisation:
+    | ICaptivateBannerWidgetCustomisation
+    | IShopifyFormsWidgetCustomisation,
+  isMobile: boolean,
+) => {
+  if (isMobile) {
+    if (
+      widgetCustomisation.widgetPositionMobile === WIDGET_POSITION_MOBILE.CENTER
+    ) {
+      return 'calc(85% + 12px)';
+    }
+    return '100%';
+  }
+  return 'calc(336px + 24px);';
+};

package/src/widgets/CentrallyAlignedPopup/config.ts

@@ -0,0 +1,42 @@
+import { ICentrallyAlignedPopup } from '.';
+
+const capConfig: ICentrallyAlignedPopup = {
+  preview: false,
+  visibility: {
+    visiblePages: ['/*'],
+  },
+  environment: 'staging',
+  widgetCustomisation: {
+    widgetName: 'Centrally aligned popup ye7a',
+    redirectWidgetBackgroundColor: '',
+    livechatEnabled: false,
+    whatsapp: '916364856308',
+    whatsappMessage: 'Hello',
+    emailSubject: 'He',
+    emailBody: '',
+    redirectWidgetBannerImage:
+      'https://png.pngtree.com/thumb_back/fh260/back_pic/02/50/63/71577e1cf59d802.jpg',
+    redirectWidgetTitleText: 'Connect with us for more offers!',
+    iconColor: '#99631B',
+    fabBackgroundColor: '#FBDC7E',
+    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 with English',
+      },
+      FRENCH: {
+        redirectWidgetTitleText: 'Connect with French',
+      },
+    },
+  },
+};
+
+export default capConfig;

package/src/widgets/CentrallyAlignedPopup/index.tsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import { Fab } from 'components';
+import includeMe from 'utilities/script';
+import CentrallyAlignedModal from './modal';
+import Send from 'components/Icons/Send';
+import { IFab } from 'components/Fab';
+import { IPageConfigProcessed, WidgetUtils } from '../../utilities/widgetUtils';
+import { CookieUtils } from '../../utilities/cookie';
+import { COOKIE_VALUES, EVENT_NAME } from '../../utilities/variables';
+import { WidgetSchema, ISO_CODES_VALUES } from '@bikdotai/bik-models/dm';
+
+export interface ICentrallyAlignedPopup extends WidgetSchema {
+  id: string;
+  isMobile?: boolean;
+  environment: string;
+  preview?: boolean;
+  storeWidgetConfig: IPageConfigProcessed;
+  previewLanguage?: ISO_CODES_VALUES;
+}
+
+const CentrallyAlignedPopup = (props: ICentrallyAlignedPopup) => {
+  const widgetUtils = new WidgetUtils();
+  const cookieUtils = new CookieUtils();
+  const [showModal, setShowModal] = useState(false);
+  const [showFab, setShowFab] = useState(false);
+  const [showWidget, setShowWidget] = useState(false);
+
+  cookieUtils.addItemInLocalStorage('storeId', props.info?.storeId);
+
+  cookieUtils.cookieClickHandler(
+    `bik-${props.id}-visitor`,
+    COOKIE_VALUES.BIK_VISITOR,
+    EVENT_NAME.WIDGET_VISITED,
+    1,
+    props.environment,
+    props.id,
+  );
+
+  const fabStyle: IFab = {
+    icon: <Send color={props.widgetCustomisation?.iconColor} />,
+    onClick() {
+      cookieUtils.cookieClickHandler(
+        `bik-${props.id}-clicked`,
+        'bikclick',
+        'WIDGET_CLICKED',
+        1,
+        props.environment,
+        props.id,
+      );
+      setShowFab(false);
+      setShowModal(true);
+    },
+    isMobile: props.isMobile,
+    preview: props.preview ?? false,
+    widgetCustomisation: {
+      iconColor: props.widgetCustomisation?.iconColor,
+      fabTransform: props.widgetCustomisation?.fabTransform,
+      fabPositioner: props.widgetCustomisation?.fabPositioner,
+      fabBackgroundColor: props.widgetCustomisation?.fabBackgroundColor,
+      fabLottie: props.widgetCustomisation?.fabLottie,
+      fabAnimationRun: props.widgetCustomisation?.fabAnimationRun,
+      fabImage: props.widgetCustomisation?.fabImage,
+      fabIconLink: props.widgetCustomisation?.fabIconLink,
+      fabWebSize: props.widgetCustomisation?.fabWebSize,
+      fabMobileSize: props.widgetCustomisation?.fabMobileSize,
+    },
+  };
+
+  useEffect(() => {
+    if (!props.preview) {
+      const shouldShow = widgetUtils.showWidget(
+        {
+          currentUrl: window.location.href.replace(window.location.origin, ''),
+          customUrls: props.storeWidgetConfig,
+          currentWidgetId: props.id,
+        },
+        props.info.isAutomationTesting,
+      );
+      setShowFab(shouldShow);
+      setShowWidget(shouldShow);
+    } else {
+      setShowFab(true);
+    }
+  }, [window.location.href]);
+
+  return (
+    <>
+      {showWidget && (
+        <div id={`bik-widget-root-${props.id}`}>
+          {showFab && <Fab {...fabStyle} id={`bik-ca-${props.id}-cta-fab`} />}
+          <CentrallyAlignedModal
+            {...props}
+            showModal={showModal}
+            onClose={() => {
+              setShowFab(true);
+              setShowModal(false);
+            }}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default React.memo(CentrallyAlignedPopup);
+
+if (process.env.NODE_ENV !== 'development') {
+  includeMe(CentrallyAlignedPopup);
+}