@bikdotai/bik-widgets 1.0.0 → 1.0.2

package/src/widgets/CaptivateBanner/index.tsx

@@ -1,204 +0,0 @@
-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

@@ -1,51 +0,0 @@
-.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

@@ -1,51 +0,0 @@
-.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

@@ -1,77 +0,0 @@
-.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

@@ -1,104 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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);
-}