@bikdotai/bik-widgets 1.0.0

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

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

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

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