@bikdotai/bik-widgets 1.0.0 → 1.0.2

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

@@ -1,279 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap');
-
-.widgetContainer {
-  width: 100%;
-  animation: fade-in-down 0.25s ease-in-out;
-}
-
-.widgetBody {
-  overflow: hidden;
-  position: relative;
-  border-radius: 8px;
-}
-
-.widgetHeader {
-  position: absolute;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  width: 100%;
-}
-
-.bannerImage {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  width: 100%;
-}
-
-.widgetContent {
-  box-sizing: border-box;
-  margin: 100px 10px 10px 10px;
-  background-color: rgb(255, 255, 255);
-  box-shadow: rgb(0 0 0 / 12%) 0px 2px 8px;
-  border-radius: 4px;
-  position: relative;
-}
-
-.widgetRedirects {
-  padding: 10px;
-}
-
-.content {
-  background-color: white;
-  box-shadow: rgb(0 0 0 / 12%) 0px 2px 8px;
-  width: 300px;
-  border-radius: 8px;
-  border-width: 10px;
-}
-
-.overlay {
-  position: fixed;
-  right: 30px;
-  bottom: 30px;
-  border-radius: 5px;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-}
-
-.crossBtn {
-  width: 32px;
-  height: 32px;
-  border-radius: 16px;
-  padding: 4px;
-  position: absolute;
-  justify-content: center;
-  align-items: center;
-  top: -52px;
-  left: 278px;
-  border: none;
-  min-width: unset !important;
-}
-
-.bannerImage {
-  border-left: 4px;
-  border-right: 4px;
-  border-top: 4px;
-  overflow: hidden;
-  width: 300px;
-}
-
-.title {
-  padding: 10px;
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 24px;
-  text-align: center;
-  font-feature-settings:
-    'tnum' on,
-    'lnum' on,
-    'case' on,
-    'ss04' on;
-  color: #212121;
-  flex: none;
-  order: 0;
-  flex-grow: 0;
-}
-
-.poweredByBik {
-  font-family: 'Inter';
-  font-style: normal;
-  background: none;
-  font-weight: 400;
-  background: none;
-  font-size: 12px;
-  line-height: 16px;
-  font-feature-settings:
-    'tnum' on,
-    'lnum' on,
-    'case' on,
-    'ss04' on;
-  color: #9e9e9e;
-  display: flex;
-  align-items: center;
-  padding: 4px;
-  border: none;
-}
-
-.poweredByBik svg {
-  margin-left: 8px !important;
-}
-
-@keyframes slideFromBottom {
-  0% {
-    bottom: -200px;
-  }
-
-  100% {
-    bottom: 0;
-  }
-}
-
-@keyframes pulse {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes fade-in-down {
-  0% {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .widgetContainer {
-    width: 100%;
-    animation: fade-in-down 0.25s ease-in-out;
-  }
-
-  .widgetBody {
-    overflow: hidden;
-    position: relative;
-    border-radius: 8px;
-  }
-
-  .widgetHeader {
-    position: absolute;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    width: 100%;
-  }
-
-  .bannerImage {
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    width: 100%;
-  }
-
-  .widgetContent {
-    box-sizing: border-box;
-    margin: 130px 10px 10px 10px;
-    background-color: rgb(255, 255, 255);
-    box-shadow: rgb(0 0 0 / 12%) 0px 2px 8px;
-    border-radius: 4px;
-    position: relative;
-  }
-
-  .widgetRedirects {
-    padding: 10px;
-  }
-
-  .liveChat {
-    width: 100%;
-    bottom: 0px;
-    left: 0px;
-    max-width: none;
-  }
-
-  .content {
-    background-color: white;
-    width: 100%;
-    position: relative;
-    border-radius: 5px;
-    border-width: 10px;
-  }
-
-  .overlay {
-    position: fixed;
-    right: 30px;
-    bottom: 98px;
-    width: 100%;
-    border-radius: 5px;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-    animation: 0.7s ease-in-out 0s 1 slideFromBottom;
-  }
-
-  .crossBtn {
-    width: 32px;
-    height: 32px;
-    border-radius: 16px;
-    padding: 4px;
-    position: absolute;
-    justify-content: center;
-    align-items: center;
-    left: 50%;
-    border: none;
-  }
-
-  .title {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 600;
-    font-size: 14px;
-    padding: 10px;
-    line-height: 24px;
-    text-align: center;
-    font-feature-settings:
-      'tnum' on,
-      'lnum' on,
-      'case' on,
-      'ss04' on;
-    color: #212121;
-    flex: none;
-    order: 0;
-    flex-grow: 0;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    width: 100%;
-  }
-
-  .poweredByBik {
-    background: none;
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 16px;
-    font-feature-settings:
-      'tnum' on,
-      'lnum' on,
-      'case' on,
-      'ss04' on;
-    color: #9e9e9e;
-    display: flex;
-    align-items: center;
-    border: none;
-  }
-
-  .poweredByBik svg {
-    margin-left: 8px;
-  }
-}

package/src/widgets/CaptivateBanner/captivateBanner.tsx

@@ -1,200 +0,0 @@
-import React, { LegacyRef, useEffect, useState } from 'react';
-import { ComponentStyleMap, injectFontLink } from '../../utilities/styleUtils';
-import CloseIcon from '../../assets/svg/Close';
-import { CaptivateBannerProps } from './index';
-import {
-  BUTTON_FUNCTIONALITY,
-  LANGUAGE_VALUES,
-  LANGUAGE_ISO_CODES,
-} from '@bikdotai/bik-models/dm';
-import {
-  fetchCloseButtonPositioner,
-  fetchContainerWidth,
-  fetchPositionCss,
-} from './utils';
-import useIsMobile from '../../hooks/useIsMobile';
-import { cookieClickHandler, setCookie } from '../STW/utility';
-import { LanguageUtils } from 'utilities/languageUtilities';
-
-interface PopupI extends CaptivateBannerProps {
-  isVisible: boolean;
-  onClose: () => void;
-  popupReference?: LegacyRef<HTMLDivElement>;
-}
-
-const BACKUP_IMAGE =
-  'https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2Fbb0816b9-ba06-4789-aca5-2a4d10560878?alt=media&token=996dc6bd-b3e2-4bea-bbac-41e9c0845578';
-
-const Popup: React.FC<PopupI> = props => {
-  const [styles, setStyles] = useState<any>();
-  const isMobileDevice = useIsMobile();
-  const isMobile = props.preview ? props.isMobile : isMobileDevice;
-  const languageUtils = new LanguageUtils();
-  const [widgetLanguage, setWidgetLanguage] = useState(LANGUAGE_VALUES.ENGLISH);
-
-  useEffect(() => {
-    if (props.widgetCustomisation.fontFamily) {
-      injectFontLink([props.widgetCustomisation.fontFamily?.link]);
-    }
-  }, [props.widgetCustomisation.fontFamily]);
-
-  useEffect(() => {
-    if (!props.preview) {
-      ComponentStyleMap[props.templateName]?.globalStyle.then(
-        async (_style: any) => {
-          setStyles((await _style()).default);
-        },
-      );
-    } else {
-      if (props.isMobile) {
-        ComponentStyleMap[props.templateName]?.previewMobile.then(
-          async (_style: any) => {
-            setStyles((await _style()).default);
-          },
-        );
-      } else {
-        ComponentStyleMap[props.templateName]?.previewDesktop.then(
-          async (_style: any) => {
-            setStyles((await _style()).default);
-          },
-        );
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    const isBikURL =
-      window.location.href?.includes('https://dashboard.bik.ai/') ||
-      window.location.href?.includes('https://staging.dashboard.bik.ai/');
-    const previewLanguage = props?.widgetCustomisation?.previewLanguage;
-    const storeLanguage =
-      (isBikURL ? previewLanguage : window?.Shopify?.locale) ??
-      previewLanguage ??
-      LANGUAGE_ISO_CODES.EN;
-    setWidgetLanguage(languageUtils.getStoreLanguage(storeLanguage));
-  }, [window.location.href, props?.widgetCustomisation?.previewLanguage]);
-
-  const onButtonClick = e => {
-    cookieClickHandler(
-      `bik-${props.id}-clicked`,
-      'bikview',
-      'WIDGET_CLICKED',
-      1,
-      props.id,
-      props.environment,
-    );
-    setCookie(`bik-${props.id}-claimed`, 'claimed', 24820);
-    if (
-      props.widgetCustomisation.clickFunctionality ===
-        BUTTON_FUNCTIONALITY.REDIRECTION &&
-      props.widgetCustomisation.redirectionUrl
-    ) {
-      window.open(props.widgetCustomisation.redirectionUrl, '_self');
-      props.onClose();
-    } else if (
-      props.widgetCustomisation.clickFunctionality ===
-        BUTTON_FUNCTIONALITY.COPY_TEXT &&
-      props.widgetCustomisation.copyText
-    ) {
-      const cb = navigator.clipboard;
-      cb.writeText(props.widgetCustomisation.copyText).then(() => {
-        e.target.textContent = languageUtils.getCopiedMessage(widgetLanguage);
-      });
-      if (!props.widgetCustomisation.isButtonEnabled) {
-        props.onClose();
-      }
-    }
-  };
-
-  if (!styles) {
-    return <></>;
-  }
-
-  const renderWidget = () => {
-    return (
-      <div
-        ref={props.popupReference}
-        className={`${styles.popupContainer}`}
-        style={{
-          ...fetchPositionCss(props.widgetCustomisation, isMobile),
-          width: fetchContainerWidth(props.widgetCustomisation, isMobile),
-        }}
-      >
-        <div
-          className={styles.popupContainer__content}
-          style={{
-            backgroundColor:
-              props.widgetCustomisation.backgroundColour ?? '#ffffff',
-          }}
-        >
-          <div
-            className={styles.popupCloser__button}
-            style={{
-              ...fetchCloseButtonPositioner(
-                props.widgetCustomisation,
-                isMobile,
-                props.preview,
-              ),
-              backgroundColor:
-                props.widgetCustomisation.backgroundColour ?? '#ffffff',
-            }}
-            onClick={props.onClose}
-          >
-            <CloseIcon size="small" />
-          </div>
-          <img
-            style={
-              props.widgetCustomisation.isButtonEnabled
-                ? {}
-                : { cursor: 'pointer' }
-            }
-            onClick={
-              props.widgetCustomisation.isButtonEnabled
-                ? () => {}
-                : onButtonClick
-            }
-            src={
-              props?.widgetCustomisation?.multiLingualConfigurations?.[
-                widgetLanguage
-              ]?.bannerImage ??
-              props.widgetCustomisation.bannerImage ??
-              BACKUP_IMAGE
-            }
-            alt="Popup Image"
-            className={styles.popupContainer__image}
-            onError={e => {
-              (e.target as HTMLImageElement).onerror = null;
-              (e.target as HTMLImageElement).src = BACKUP_IMAGE;
-            }}
-          />
-          {props.widgetCustomisation.isButtonEnabled && (
-            <button
-              style={{
-                backgroundColor: props.widgetCustomisation.buttonColour,
-                color: props.widgetCustomisation.buttonTextColour,
-                fontFamily: props.widgetCustomisation.fontFamily.name,
-              }}
-              onClick={onButtonClick}
-              className={styles.popupContainer__button}
-            >
-              {props.widgetCustomisation?.multiLingualConfigurations?.[
-                widgetLanguage
-              ]?.buttonText ?? props.widgetCustomisation.buttonText}
-            </button>
-          )}
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <>
-      {!props.preview && (
-        <div className={styles.popupWrapper}>{renderWidget()}</div>
-      )}
-      {props.preview && renderWidget()}
-    </>
-  );
-};
-
-export default Popup;

package/src/widgets/CaptivateBanner/config.ts

@@ -1,72 +0,0 @@
-import { IBottomDrawer } from './index';
-const config: IBottomDrawer = {
-  preview: false,
-  environment: 'staging',
-  widgetCustomisation: {
-    fontFamily: {
-      link: 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap',
-      name: 'Montserrat',
-    },
-    backgroundColour: '#ffffff',
-    widgetPositionDesktop: 'CENTER',
-    widgetPositionMobile: 'CENTER',
-    widgetName: 'Marketing popup nd9b',
-    isButtonEnabled: true,
-    buttonText: 'Shop now!',
-    buttonColour: '#000000',
-    buttonTextColour: '#ffffff',
-    clickFunctionality: 'REDIRECTION',
-    multiLingualConfigurations: {
-      ENGLISH: {
-        buttonText: 'Shop now!',
-        bannerImage:
-          'https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/abdd390e-5b36-4c85-8c36-821bd581254b%23image_p60HYv5wjgQaOrPdqT5NjbpkroD2_dYZPW.jpg?alt=media&token=db8ae5c0-d80c-44d4-9bea-36c08993b4d0',
-      },
-      ARABIC: {
-        buttonText: 'تسوق الآن!',
-      },
-      FRENCH: {
-        buttonText: 'Acheter maintenant!',
-      },
-      SPANISH: {
-        buttonText: 'Compra ahora!',
-      },
-      MALAY: {
-        buttonText: 'Beli sekarang!',
-      },
-    },
-    previewLanguage: 'en',
-    bannerImage:
-      'https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/abdd390e-5b36-4c85-8c36-821bd581254b%23image_p60HYv5wjgQaOrPdqT5NjbpkroD2_dYZPW.jpg?alt=media&token=db8ae5c0-d80c-44d4-9bea-36c08993b4d0',
-    redirectionUrl: 'https://google.com',
-    copyText: '',
-    fabPosition: 'POP_UP',
-  },
-  visibility: {
-    visiblePages: ['/*'],
-    triggers: {
-      fabButtonVisibility: false,
-      hasFAbButton: false,
-      isPlayable: false,
-      pageScroll: null,
-      viewLimit: null,
-      playLimit: null,
-      timeDelay: 3,
-      frequency: null,
-      hideAfterClaimed: false,
-    },
-  },
-  info: {
-    delete: false,
-    liveSince: '',
-    scriptPath: '',
-    infra: '',
-    status: 'DRAFT',
-    storeId: 'p60HYv5wjgQaOrPdqT5NjbpkroD2',
-    templateId: 'rNr7DwmSiPAP8zUAOtWz',
-    widgetTypeId: 'UXq0MWMp765My76Fk7p5',
-    templateName: 'Marketing popup',
-  },
-};
-
-export default config;