@bikdotai/bik-widgets 1.0.0

package/src/widgets/SingleButtonRedirection/index.tsx

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

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

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

package/src/widgets/WebStories/index.tsx

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

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

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

package/src/widgets/utility.ts

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

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