@bikdotai/bik-widgets 1.0.0 → 1.0.1

package/src/widgets/SingleButtonRedirection/index.tsx

@@ -1,121 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Fab } from 'components';
-import includeMe from 'utilities/script';
-import { IFab } from '../../components/Fab';
-import Send from '../../components/Icons/Send';
-import { IPageConfigProcessed, WidgetUtils } from '../../utilities/widgetUtils';
-import { CookieUtils } from '../../utilities/cookie';
-import { COOKIE_VALUES, EVENT_NAME } from '../../utilities/variables';
-import {
-  IRedirectWidgetCustomisation,
-  WidgetSchema,
-} from '@bikdotai/bik-models/dm';
-
-export interface ISingleButtonRedirection extends WidgetSchema {
-  environment: string;
-  id: string;
-  storeWidgetConfig: IPageConfigProcessed;
-  preview?: boolean;
-  isMobile?: boolean;
-}
-
-const SingleButtonRedirection = (props: ISingleButtonRedirection) => {
-  const widgetUtils = new WidgetUtils();
-  const cookieUtils = new CookieUtils();
-  const environment = props.environment;
-  const widgetId = props.id;
-  const widgetCustomisation =
-    props.widgetCustomisation as IRedirectWidgetCustomisation;
-  const [showFab, setShowFab] = useState(false);
-  const [showWidget, setShowWidget] = useState(false);
-  let buttonStyle: React.CSSProperties;
-
-  if (widgetCustomisation?.fabText) {
-    buttonStyle = {
-      width: 'fit-content',
-      height: 'fit-content',
-      borderRadius: 20,
-    };
-  }
-
-  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,
-  );
-
-  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]);
-
-  const fabStyle: IFab = {
-    icon: <Send color={widgetCustomisation?.iconColor} />,
-    onClick() {
-      cookieUtils.cookieClickHandler(
-        `bik-${props.id}-clicked`,
-        'bikclick',
-        'WIDGET_CLICKED',
-        1,
-        props.environment,
-        props.id,
-      );
-      const pathName = location.href.replace(location.origin, '');
-      //temp feat for liv-space. need to make it generic.
-      const isMobileApp = window.navigator.userAgent.includes('livspace-app');
-      window.open(
-        `${environment}/publicApiFunctions-redirectToChat/?contextType=bik-widgets&contextId=${widgetId}&pathname=${encodeURIComponent(pathName)}&sourceUrl=${location.href}&platform=${isMobileApp ? 'app' : 'web'}`,
-      );
-    },
-    buttonStyle: buttonStyle,
-    isMobile: props.isMobile,
-    preview: props.preview ?? false,
-    widgetCustomisation: {
-      fabText: widgetCustomisation?.fabText,
-      iconColor: widgetCustomisation?.iconColor,
-      fabTransform: widgetCustomisation?.fabTransform,
-      fabPositioner: widgetCustomisation?.fabPositioner,
-      fabBackgroundColor: widgetCustomisation?.fabBackgroundColor,
-      fabLottie: widgetCustomisation?.fabLottie,
-      fabAnimationRun: widgetCustomisation?.fabAnimationRun,
-      fabImage: widgetCustomisation?.fabImage,
-      fabIconLink: widgetCustomisation?.fabIconLink,
-      fabWebSize: widgetCustomisation?.fabWebSize,
-      fabMobileSize: widgetCustomisation?.fabMobileSize,
-      multiLingualConfigurations:
-        widgetCustomisation?.multiLingualConfigurations,
-    } as IRedirectWidgetCustomisation,
-  } as IFab;
-  return (
-    <>
-      {showWidget && (
-        <div id={`bik-widget-root-${props.id}`}>
-          {showFab && <Fab {...fabStyle} id={`bik-wa-${props.id}-cta`} />}
-        </div>
-      )}
-    </>
-  );
-};
-
-export default SingleButtonRedirection;
-
-if (process.env.NODE_ENV !== 'development') {
-  includeMe(SingleButtonRedirection);
-}

package/src/widgets/WebStories/config.ts

@@ -1,105 +0,0 @@
-import { IWebStories } from './index';
-const config: IWebStories = {
-  storeId: 'p60HYv5wjgQaOrPdqT5NjbpkroD2',
-  idToken: '',
-  widgetId: 'h19TPIIt2VmqzQ0S7dnu',
-  environment: 'https://api.staging.bik.ai/qa-dm',
-
-  widgetCustomisation: {
-    widgetName: 'undefined 53',
-    name: 'Story widget',
-    storyCollectionThumbnailConfig: {
-      shape: 'CIRCLE',
-      borderColor: '#B01228',
-    },
-    storyCollections: [
-      {
-        index: 0,
-        htmlSource:
-          'https://storage.googleapis.com/bik-widget-mfe/bap/web-stories/p60HYv5wjgQaOrPdqT5NjbpkroD2/h19TPIIt2VmqzQ0S7dnu/html/1bfad35764',
-        thumbnail:
-          'https://api.staging.bik.ai/bik-widgets/bap/web-stories/p60HYv5wjgQaOrPdqT5NjbpkroD2/h19TPIIt2VmqzQ0S7dnu/assets/insta_logo.jpeg',
-        name: 'Collection name',
-        id: 'collectionId1',
-        stories: [
-          {
-            index: 0,
-            ref: 'https://api.staging.bik.ai/bik-widgets/bap/web-stories/p60HYv5wjgQaOrPdqT5NjbpkroD2/h19TPIIt2VmqzQ0S7dnu/assets/wallpaper.jpeg',
-            fileName: 'honey_bee_busy_insect_flower_bee_659.mp4 ',
-            type: 'video',
-            ctaButton: {
-              buttonText: 'Buy it',
-              redirectionLink: 'https://www.bik.ai',
-              backgroundColor: '#365e7c',
-            },
-          },
-        ],
-      },
-      {
-        index: 1,
-        htmlSource:
-          'https://storage.googleapis.com/bik-widget-mfe/bap/web-stories/p60HYv5wjgQaOrPdqT5NjbpkroD2/6Hx8RbBpFn83Fbz4T9fj/html/f4dda2fd98',
-        thumbnail:
-          'https://api.staging.bik.ai/bik-widgets/bap/web-stories/p60HYv5wjgQaOrPdqT5NjbpkroD2/h19TPIIt2VmqzQ0S7dnu/assets/insta_logo.jpeg',
-        name: 'Collection name 2',
-        id: 'collectionId2',
-        stories: [
-          {
-            index: 0,
-            ref: 'https://api.staging.bik.ai/bik-widgets/bap/web-stories/p60HYv5wjgQaOrPdqT5NjbpkroD2/h19TPIIt2VmqzQ0S7dnu/assets/wallpaper.jpeg',
-            fileName: 'honey_bee_busy_insect_flower_bee_659.mp4 ',
-            type: 'video',
-            ctaButton: {
-              buttonText: 'Buy it',
-              redirectionLink: 'https://www.bik.ai',
-              backgroundColor: '#365e7c',
-            },
-          },
-        ],
-      },
-    ],
-  },
-  // content: {
-  //     widgetCustomisation: {
-  //         widgetName: "undefined 53",
-  //         name: "Story widget",
-  //         storyCollections: [
-  //             {
-  //                 index: 0,
-  //                 htmlSource: 'https://storage.googleapis.com/bik-widget-mfe/bap/web-stories/p60HYv5wjgQaOrPdqT5NjbpkroD2/h19TPIIt2VmqzQ0S7dnu/html/1bfad35764',
-  //                 thumbnail: "https://api.staging.bik.ai/bik-widgets/bap/web-stories/p60HYv5wjgQaOrPdqT5NjbpkroD2/h19TPIIt2VmqzQ0S7dnu/assets/insta_logo.jpeg",
-  //                 name: "Collection name",
-  //                 stories: [
-  //                     {
-  //                         index: 0,
-  //                         ref: "https://api.staging.bik.ai/bik-widgets/bap/web-stories/p60HYv5wjgQaOrPdqT5NjbpkroD2/h19TPIIt2VmqzQ0S7dnu/assets/wallpaper.jpeg",
-  //                         fileName: "wallpaper.jpeg",
-  //                         type: "image",
-  //                         ctaButton: {
-  //                             buttonText: "Shop now",
-  //                             redirectionLink: "https://www.bik.ai",
-  //                             backgroundColor: "#365e7c"
-  //                         }
-  //                     }
-  //                 ]
-  //             }
-  //         ]
-  //     },
-  //     visibility: {},
-  //     leadGeneration: {},
-  //     info: {
-  //         templateNam: "WEB_STORIES_ON_WEBSITE",
-  //         delete: false,
-  //         status: "DRAFT",
-  //         liveSince: null,
-  //         templateId: "RfOLW0L9ZtjNPnQmFg8V",
-  //         infra: "2.0",
-  //         widgetTypeId: "uEv8pVPCMSlSM2EjLXlT",
-  //         storeId: "p60HYv5wjgQaOrPdqT5NjbpkroD2",
-  //         scriptPath: "",
-  //         widgetId: "h19TPIIt2VmqzQ0S7dnu"
-  //     }
-  // }
-};
-
-export default config;

package/src/widgets/WebStories/index.css

@@ -1,3 +0,0 @@
-.i-amphtml-fill-content {
-  display: block !important;
-}

package/src/widgets/WebStories/index.tsx

@@ -1,282 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import Style from './style.module.css';
-import './index.css';
-import { IPageConfigProcessed } from 'utilities/widgetUtils';
-import { COOKIE_VALUES, EVENT_NAME } from '../../utilities/variables';
-import { CookieUtils } from '../../utilities/cookie';
-import Shimmer from '../../components/Shimmer';
-import { WidgetSchema } from '@bikdotai/bik-models/dm';
-
-export interface IWebStories extends WidgetSchema {
-  id?: string;
-  environment: string;
-  preview?: boolean;
-  isMobile?: boolean;
-  storeWidgetConfig: IPageConfigProcessed;
-}
-
-const ampStoryPlayerUrl = 'https://cdn.ampproject.org/amp-story-player-v0';
-const config = {
-  behavior: {
-    autoplay: false,
-  },
-  controls: [
-    {
-      name: 'close',
-      position: 'start',
-    },
-  ],
-};
-
-function getAmpScript(callback) {
-  const ampJS = document.createElement('script');
-  ampJS.async = true;
-  ampJS.src = ampStoryPlayerUrl + '.js';
-  ampJS.onload = callback;
-  return ampJS;
-}
-
-function getAmpCss() {
-  const ampCSS = document.createElement('link');
-  ampCSS.href = ampStoryPlayerUrl + '.css';
-  ampCSS.rel = 'stylesheet';
-  ampCSS.type = 'text/css';
-
-  return ampCSS;
-}
-
-const useAmpStoryPlayer = callback => {
-  useEffect(() => {
-    const ampScript = document.querySelector(
-      `script[src="${ampStoryPlayerUrl + '.js'}"]`,
-    );
-    if (!ampScript) {
-      document.head.appendChild(getAmpScript(callback));
-      document.head.appendChild(getAmpCss());
-    }
-  }, []);
-};
-
-const WebStories = (props: IWebStories) => {
-  const storyCollection = props.widgetCustomisation?.storyCollections ?? [];
-  let htmlSources = [];
-  storyCollection.forEach(collection => {
-    htmlSources.push({ href: collection.htmlSource });
-  });
-  const thumbnailConfig =
-    props.widgetCustomisation?.storyCollectionThumbnailConfig ?? {};
-  const cookieUtils = new CookieUtils();
-  const [playerRef, setPlayerRef] = useState(null);
-  const [showPlayer, setShowPlayer] = useState(false);
-  const [showLoader, setShowLoader] = useState(true);
-  const [currentCollectionIndex, setCurrentCollectionIndex] = useState(0);
-
-  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 ?? '-1',
-  );
-
-  const saveViewedStories = (stories: string[]) => {
-    const date = new Date();
-    date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
-    const expires = 'expires=' + date.toUTCString();
-    document.cookie =
-      'arrayCookie=' + JSON.stringify(stories) + ';' + expires + ';path=/';
-  };
-
-  const clearStoriesCookie = () => {
-    document.cookie =
-      'arrayCookie=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-  };
-
-  const retrieveStoriesFromCookie = () => {
-    const name = 'arrayCookie=';
-    const decodedCookie = decodeURIComponent(document.cookie);
-    const ca = decodedCookie.split(';');
-    for (let i = 0; i < ca.length; i++) {
-      let c = ca[i];
-      while (c.charAt(0) === ' ') {
-        c = c.substring(1);
-      }
-      if (c.indexOf(name) === 0) {
-        return JSON.parse(c.substring(name.length, c.length));
-      }
-    }
-    return [];
-  };
-  const savedStories = retrieveStoriesFromCookie();
-
-  const loadPlayer = () => () => {
-    const player = document.querySelector('amp-story-player');
-    window.player = player;
-    setPlayerRef(player);
-
-    if (player.isReady) {
-      addStories(player);
-    } else {
-      player.addEventListener('ready', () => {
-        console.log('player is ready');
-        addStories(player);
-      });
-    }
-  };
-
-  const addStories = player => {
-    setShowLoader(false);
-    player.add(htmlSources);
-    player.addEventListener('storyNavigation', event => {
-      const detail = event.detail;
-      cookieUtils.cookieClickHandler(
-        `bik-${props.id}-story-viewed`,
-        COOKIE_VALUES.STORY_VIEWED,
-        EVENT_NAME.STORY_VIEWED,
-        1,
-        props.environment,
-        props.id ?? -1,
-        {
-          collectionId: storyCollection[currentCollectionIndex].id,
-          storyId: detail.pageId,
-        },
-      );
-    });
-    player.addEventListener('navigation', event => {
-      const index = event.detail.index;
-      setCurrentCollectionIndex(index);
-      const isSaved = savedStories.includes(
-        `web-story-${storyCollection[index].id}`,
-      );
-      const temp = retrieveStoriesFromCookie();
-      if (!isSaved) {
-        saveViewedStories([...temp, `web-story-${storyCollection[index].id}`]);
-      }
-      cookieUtils.cookieClickHandler(
-        `bik-${props.id}-collection-viewed`,
-        COOKIE_VALUES.COLLECTION_VIEWED,
-        EVENT_NAME.COLLECTION_VIEWED,
-        1,
-        props.environment,
-        props.id ?? -1,
-        {
-          collectionId: storyCollection[index].id,
-        },
-      );
-    });
-    player.addEventListener('amp-story-player-close', () => {
-      closePlayer(player);
-    });
-  };
-
-  useAmpStoryPlayer(loadPlayer(playerRef));
-
-  const closePlayer = player => {
-    player.pause();
-    setShowPlayer(false);
-  };
-
-  const handleShow = idx => {
-    cookieUtils.cookieClickHandler(
-      `bik-${props.id}-collection-viewed`,
-      COOKIE_VALUES.COLLECTION_VIEWED,
-      EVENT_NAME.COLLECTION_VIEWED,
-      1,
-      props.environment,
-      props.id,
-      {
-        collectionId: storyCollection[idx].id,
-      },
-    );
-    const stories = playerRef.getStories();
-    playerRef.show(stories[idx].href);
-    playerRef.play();
-    setShowPlayer(true);
-  };
-
-  return (
-    <>
-      {storyCollection.length === 0 ? (
-        <div style={{ margin: 16, display: 'flex', gap: 24 }}>
-          <Shimmer
-            shimmerStyle={{
-              width: thumbnailConfig?.shape === 'CIRCLE' ? 80 : 64,
-              height: thumbnailConfig?.shape === 'CIRCLE' ? 80 : 96,
-              borderRadius: thumbnailConfig?.shape === 'CIRCLE' ? '50%' : 4,
-            }}
-          />
-          <Shimmer
-            shimmerStyle={{
-              width: thumbnailConfig?.shape === 'CIRCLE' ? 80 : 64,
-              height: thumbnailConfig?.shape === 'CIRCLE' ? 80 : 96,
-              borderRadius: thumbnailConfig?.shape === 'CIRCLE' ? '50%' : 4,
-            }}
-          />
-        </div>
-      ) : (
-        <div style={{ overflow: 'auto', whiteSpace: 'nowrap' }}>
-          {storyCollection.map((collection, index) => {
-            const isSaved = savedStories.includes(`web-story-${collection.id}`);
-            const borderWidth = isSaved ? 0 : 2;
-            return (
-              <button
-                id={`web-story-${collection.id}`}
-                onClick={e => {
-                  handleShow(index);
-                  if (!isSaved) {
-                    saveViewedStories([
-                      ...savedStories,
-                      `web-story-${collection.id}`,
-                    ]);
-                  }
-                }}
-                style={{
-                  cursor: 'pointer',
-                  margin: 8,
-                  border: 'none',
-                  background: 'none',
-                  display: 'inline-block',
-                }}
-              >
-                <img
-                  style={{
-                    width: thumbnailConfig?.shape === 'CIRCLE' ? 80 : 64,
-                    height: thumbnailConfig?.shape === 'CIRCLE' ? 80 : 96,
-                    cursor: 'pointer',
-                    objectFit: 'cover',
-                    padding: 2,
-                    borderRadius:
-                      thumbnailConfig?.shape === 'CIRCLE' ? '50%' : 4,
-                    border: `${borderWidth}px solid ${thumbnailConfig.borderColor}`,
-                  }}
-                  src={collection.thumbnail}
-                />
-              </button>
-            );
-          })}
-        </div>
-      )}
-
-      <div className={`${showPlayer ? Style.lightboxShow : Style.lightbox}`}>
-        <amp-story-player style={{ width: '100vw', height: '100vh' }}>
-          <script
-            type="application/json"
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{
-              __html: JSON.stringify(config),
-            }}
-          />
-        </amp-story-player>
-      </div>
-    </>
-  );
-};
-
-export default WebStories;
-
-const widget = document.getElementById(`bik-web-story-widget-wrapper`);
-ReactDOM.render(<WebStories {...JSON.parse('{{{bikConfig}}}')} />, widget);

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

@@ -1,26 +0,0 @@
-.lightbox {
-  position: absolute;
-  background-color: rgb(0, 0, 0, 0.7);
-  z-index: -99999;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    visibility 0.2s linear,
-    opacity 0.2s linear;
-}
-
-.lightboxShow {
-  position: absolute;
-  visibility: visible;
-  z-index: 99999;
-  background-color: rgb(0, 0, 0, 0.7);
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  opacity: 1;
-}

package/src/widgets/index.tsx

@@ -1,3 +0,0 @@
-import CentrallyAlignedPopup from 'widgets/CentrallyAlignedPopup';
-
-export { CentrallyAlignedPopup };

package/src/widgets/utility.ts

@@ -1,31 +0,0 @@
-import { TRIGGERED_PAGE_TYPE } from '@bikdotai/bik-models/dm/models/analytics';
-
-export const decodeTextHelper = (text: string) => {
-  try {
-    return decodeURIComponent(text);
-  } catch (err: any) {
-    return text;
-  }
-};
-
-export const getStyles = url => {
-  return new Promise(function (resolve, reject) {
-    import(`${url}`).then(async style => {
-      resolve(style);
-    });
-  });
-};
-
-export const getTriggeredPageFromUrl = (url: string): TRIGGERED_PAGE_TYPE => {
-  try {
-    const urlObj = new URL(url);
-    const segments = urlObj.pathname.split('/').filter(Boolean);
-
-    if (segments.length === 0) return TRIGGERED_PAGE_TYPE.HOME;
-    if (segments[0] === 'collections') return TRIGGERED_PAGE_TYPE.COLLECTION;
-    if (segments[0] === 'products') return TRIGGERED_PAGE_TYPE.PRODUCT;
-    return TRIGGERED_PAGE_TYPE.CUSTOM;
-  } catch (error) {
-    return TRIGGERED_PAGE_TYPE.CUSTOM;
-  }
-};

package/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "jsx": "preserve",
-    "skipLibCheck": true,
-    "baseUrl": "./src",
-    "paths": {
-      "react": ["./node_modules/preact/compat/"],
-      "react-dom": ["./node_modules/preact/compat/"]
-    },
-    "allowSyntheticDefaultImports": true
-  }
-}