@bikdotai/bik-widgets 1.0.0 → 1.0.1

package/src/widgets/ShopifyForm/config.ts

@@ -1,168 +0,0 @@
-import {
-  FAB_POSITION,
-  STATUS,
-  WIDGET_NAME,
-  WIDGET_POSITION_DESKTOP,
-  WIDGET_POSITION_MOBILE,
-} from '@bikdotai/bik-models/dm';
-import {
-  IShopifyFormsLeadGeneration,
-  IShopifyFormsWidgetCustomisation,
-} from '@bikdotai/bik-models/dm/widgets/ShopifyForms/shopifyForms.interface';
-
-export const SHOPIFY_FORM_CONFIG = {
-  storeId: 'asf',
-  id: 'widget',
-  templateId: ' Z6LLItSwpTbNmobFvl6S',
-  environment: 'staging',
-  templateName: WIDGET_NAME.BACK_IN_STOCK_NOTIFIER,
-  widgetCustomisation: {
-    fabPosition: 'POP_UP',
-    widgetName: 'Back in stock notifier be18l',
-    backgroundColour: '#E6FEFF',
-    fontColour: '#212121',
-    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',
-    },
-    playScreenImage:
-      'https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/0b4e9493-9bb8-4e49-b39a-d1bd734ba0dd%23image_p60HYv5wjgQaOrPdqT5NjbpkroD2_Pntnt.jpg?alt=media&token=fb380dba-905a-449e-815c-353ddb6bca49',
-    playScreenTitle: '<p>Notify me when in stock</p>',
-    playScreenSubTitle:
-      '<p>Provide your email for notifications once this item is back in stock</p>',
-    playScreenButtonText: 'Email me when available',
-    playScreenButtonColour: '#01A9AC',
-    postPlayScreenImage:
-      'https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/0b4e9493-9bb8-4e49-b39a-d1bd734ba0dd%23image_p60HYv5wjgQaOrPdqT5NjbpkroD2_Pntnt.jpg?alt=media&token=fb380dba-905a-449e-815c-353ddb6bca49',
-    playScreenButtonTextColour: '#ffffff',
-    postPlayScreenTitle: '<p>Thank you</p>',
-    postPlayScreenSubTitle:
-      '<p>You will receive an email notification when this product becomes available</p>',
-    postPlayScreenButtonColour: '#01A9AC',
-    postPlayScreenButtonTextColour: '#ffffff',
-    isRedirectionButtonEnabled: false,
-    skipLabel: true,
-    widgetPositionMobile: 'CENTER',
-    widgetPositionDesktop: 'CENTER',
-    postPlayScreenTitleIcon:
-      'https://storage.googleapis.com/bik-widget-mfe/bap/post-play-screen-assets/images/bik/checked.png',
-    multiLingualConfigurations: {
-      ENGLISH: {
-        playScreenTitle: '<p>Notify me when in stock</p>',
-        playScreenSubTitle:
-          '<p>Provide your email for notifications once this item is back in stock</p>',
-        playScreenButtonText: 'Email me when available',
-        postPlayScreenTitle: '<p>Thank you</p>',
-        postPlayScreenSubTitle:
-          '<p>You will receive an email notification when this product becomes available</p>',
-        postPlayScreenButtonText: 'Email me when available',
-      },
-      ARABIC: {
-        playScreenTitle: '<p>أخبرني عند الوصول إلى المخزون</p>',
-        playScreenSubTitle:
-          '<p>قدم بريدك الإلكتروني للإشعارات بمجرد عودة هذا العنصر إلى المخزون</p>',
-        playScreenButtonText: 'أرسل لي بريدًا إلكترونيًا عند التوفر',
-        postPlayScreenTitle: '<p>شكرا لك</p>',
-        postPlayScreenSubTitle:
-          '<p>سوف تتلقى إشعارًا بالبريد الإلكتروني عند توفر هذا المنتج</p>',
-        postPlayScreenButtonText: 'أرسل لي بريدًا إلكترونيًا عند التوفر',
-      },
-      FRENCH: {
-        playScreenTitle: '<p>Prévenez-moi en stock</p>',
-        playScreenSubTitle:
-          '<p>Indiquez votre e-mail pour recevoir des notifications une fois cet article de retour en stock</p>',
-        playScreenButtonText: 'Envoyez-moi un e-mail lorsque disponible',
-        postPlayScreenTitle: '<p>Merci</p>',
-        postPlayScreenSubTitle:
-          '<p>Vous recevrez une notification par e-mail lorsque ce produit sera disponible</p>',
-        postPlayScreenButtonText: 'Envoyez-moi un e-mail lorsque disponible',
-      },
-      SPANISH: {
-        playScreenTitle: '<p>Notifícame cuando esté en stock</p>',
-        playScreenSubTitle:
-          '<p>Proporcione su correo electrónico para recibir notificaciones una vez que este artículo vuelva a estar en stock</p>',
-        playScreenButtonText:
-          'Envíame un correo electrónico cuando esté disponible',
-        postPlayScreenTitle: '<p>Gracias</p>',
-        postPlayScreenSubTitle:
-          '<p>Recibirá una notificación por correo electrónico cuando este producto esté disponible</p>',
-        postPlayScreenButtonText:
-          'Envíame un correo electrónico cuando esté disponible',
-      },
-      MALAY: {
-        playScreenTitle: '<p>Beritahu saya bila stok</p>',
-        playScreenSubTitle:
-          '<p>Masukkan e-mel anda untuk pemberitahuan sekiranya item ini kembali ke stok</p>',
-        playScreenButtonText: 'E-mel saya apabila tersedia',
-        postPlayScreenTitle: '<p>Terima kasih</p>',
-        postPlayScreenSubTitle:
-          '<p>Anda akan menerima pemberitahuan e-mel apabila produk ini tersedia</p>',
-        postPlayScreenButtonText: 'E-mel saya apabila tersedia',
-      },
-    },
-  } as IShopifyFormsWidgetCustomisation,
-  leadGeneration: {
-    mandatoryOption: {
-      isEmail: false,
-      isSms: false,
-      isWhatsapp: true,
-      customFields: [
-        {
-          id: 1001,
-          storeId: 'shopify-store',
-          fieldName: 'Product Interest',
-          fieldType: 'single_line',
-          options: [],
-        },
-      ],
-    },
-    optionalOptions: {
-      isEmail: false,
-      isSms: false,
-      isWhatsapp: false,
-      customFields: [
-        {
-          id: 1002,
-          storeId: 'shopify-store',
-          fieldName: 'How did you hear about us?',
-          fieldType: 'dropdown',
-          options: [
-            'Social Media',
-            'Search Engine',
-            'Friend Recommendation',
-            'Advertisement',
-          ],
-        },
-        {
-          id: 1003,
-          storeId: 'shopify-store',
-          fieldName: 'Subscribe to newsletter',
-          fieldType: 'checkbox',
-          options: [],
-        },
-      ],
-    },
-    enableConsentPolicies: true,
-    privacyPolicyURL: '',
-  } as IShopifyFormsLeadGeneration,
-  info: {
-    delete: false,
-    liveSince: '',
-    scriptPath: '',
-    infra: '2.0',
-    status: STATUS.DRAFT,
-    storeId: '',
-    templateId: ' Z6LLItSwpTbNmobFvl6S',
-    widgetTypeId: 'lCcPfO2RuooXpBGgZSs0',
-    templateName: WIDGET_NAME.BACK_IN_STOCK_NOTIFIER,
-    id: 'widget',
-  },
-  storeWidgetConfig: {
-    '/*': [
-      {
-        widgetId: 'widget',
-        fabPosition: FAB_POSITION.POP_UP,
-      },
-    ],
-  },
-};

package/src/widgets/ShopifyForm/index.tsx

@@ -1,214 +0,0 @@
-import includeMe from 'utilities/script';
-import Popup, { SCREENS } from './shopifyForm';
-import React, { useEffect, useRef, useState } from 'react';
-import {
-  IShopifyFormsLeadGeneration,
-  IShopifyFormsWidgetCustomisation,
-  WIDGET_NAME,
-  WidgetSchema,
-  ISO_CODES_VALUES,
-  LANGUAGE_VALUES,
-  LANGUAGE_ISO_CODES,
-} from '@bikdotai/bik-models/dm';
-import { IPageConfigProcessed } from '../../utilities/widgetUtils';
-import { cookieClickHandler } from '../STW/utility';
-import { LanguageUtils } from 'utilities/languageUtilities';
-
-export interface ShopifyWidgetProps extends WidgetSchema {
-  widgetCustomisation: IShopifyFormsWidgetCustomisation;
-  leadGeneration: IShopifyFormsLeadGeneration;
-  id: string;
-  templateId: string;
-  storeWidgetConfig: IPageConfigProcessed;
-  environment: string;
-  preview?: boolean;
-  templateName?: WIDGET_NAME;
-  isMobile?: boolean;
-  storeId: string;
-  countryCode?: string;
-  widgetLanguage?: LANGUAGE_VALUES;
-  previewLanguage: ISO_CODES_VALUES;
-}
-
-const ShopifyForm: React.FC<ShopifyWidgetProps> = props => {
-  const [isVisible, setIsVisible] = useState<boolean>(false);
-  const [selectedScreen, setSelectedScreen] = useState<SCREENS>(
-    SCREENS.LEAD_SCREEN,
-  );
-  const popupReference = useRef(null);
-  const languageUtils = new LanguageUtils();
-  const [widgetLanguage, setWidgetLanguage] = useState(LANGUAGE_VALUES.ENGLISH);
-  const [currentUrl, setCurrentUrl] = useState(window.location.href);
-  const isFirstLoad = useRef(true);
-
-  // Listen for URL changes (including query params)
-  useEffect(() => {
-    const handleUrlChange = () => {
-      setCurrentUrl(window.location.href);
-    };
-
-    // Listen for browser back/forward navigation
-    window.addEventListener('popstate', handleUrlChange);
-
-    // Listen for hash changes
-    window.addEventListener('hashchange', handleUrlChange);
-
-    // Intercept pushState and replaceState for SPA routing
-    const originalPushState = history.pushState;
-    const originalReplaceState = history.replaceState;
-
-    history.pushState = function (...args) {
-      originalPushState.apply(this, args);
-      handleUrlChange();
-    };
-
-    history.replaceState = function (...args) {
-      originalReplaceState.apply(this, args);
-      handleUrlChange();
-    };
-
-    return () => {
-      window.removeEventListener('popstate', handleUrlChange);
-      window.removeEventListener('hashchange', handleUrlChange);
-      history.pushState = originalPushState;
-      history.replaceState = originalReplaceState;
-    };
-  }, []);
-
-  const copyNotifierButtonStyles = () => {
-    const id = props.id;
-    const selector = `.shopify-payment-button__button#bik-cta-${id}`;
-
-    const shopifyButton = document.querySelector(selector);
-    if (!shopifyButton) {
-      return;
-    }
-
-    const computedStyle = window.getComputedStyle(shopifyButton);
-
-    const styleElement = document.createElement('style');
-    let cssText = `.bik_notifier_${id}_button {`;
-
-    for (let i = 0; i < computedStyle.length; i++) {
-      const property = computedStyle.item(i);
-      if (property) {
-        const value = computedStyle.getPropertyValue(property);
-        if (value) {
-          cssText += `${property}: ${value}; `;
-        }
-      }
-    }
-
-    const addToCartButtonAvailable =
-      document.getElementsByClassName('add-to-cart');
-
-    if (!addToCartButtonAvailable.length) {
-      cssText += 'width: 100%; height: 44px; ';
-    }
-
-    cssText += 'visibility: visible; }';
-    styleElement.textContent = cssText;
-
-    // Ensure only one style tag per button ID to avoid duplicates
-    const existingStyle = document.head.querySelector(
-      `style[data-bik-style-id="${id}"]`,
-    );
-    if (existingStyle) {
-      existingStyle.remove();
-    }
-    styleElement.setAttribute('data-bik-style-id', id);
-    document.head.appendChild(styleElement);
-
-    shopifyButton.classList.add(`bik_notifier_${id}_button`);
-    shopifyButton.classList.remove('shopify-payment-button__button');
-  };
-
-  useEffect(() => {
-    (window as any)[`bik_notifier_${props.id}`] = {
-      open: (widget_id?: string) => {
-        if (widget_id === `bik-cta-${props.id}`) {
-          launchModal();
-        }
-      },
-    };
-
-    if (isFirstLoad.current) {
-      // On first load, wait for DOM to be ready
-      setTimeout(() => {
-        copyNotifierButtonStyles();
-      }, 1000);
-      isFirstLoad.current = false;
-    } else {
-      // On subsequent URL changes, call immediately
-      copyNotifierButtonStyles();
-    }
-  }, [currentUrl]);
-
-  const launchModal = () => {
-    setIsVisible(true);
-    cookieClickHandler(
-      `bik-${props.id}-clicked`,
-      'bikClick',
-      'WIDGET_CLICKED',
-      0,
-      props.id,
-      props.environment,
-    );
-  };
-
-  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]);
-
-  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 closePopup = () => {
-    setIsVisible(false);
-    setSelectedScreen(SCREENS.LEAD_SCREEN);
-  };
-
-  return (
-    <>
-      {isVisible && (
-        <Popup
-          {...props}
-          templateName={props.info.templateName}
-          isVisible={isVisible}
-          onClose={closePopup}
-          popupReference={popupReference}
-          selectedScreen={selectedScreen}
-          setSelectedScreen={setSelectedScreen}
-          widgetLanguage={widgetLanguage}
-        />
-      )}
-    </>
-  );
-};
-
-export default ShopifyForm;
-if (process.env.NODE_ENV !== 'development') {
-  includeMe(ShopifyForm);
-}

package/src/widgets/ShopifyForm/previewDesktop.module.css

@@ -1,117 +0,0 @@
-.popupContainer {
-  width: 120px;
-  position: absolute;
-  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);
-  border-radius: 4px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-}
-
-.popupContainer__content * {
-  font-family: inherit;
-}
-
-.popupContainer__image {
-  width: 100%;
-  height: auto;
-  aspect-ratio: 1.56;
-  margin: 0;
-  padding: 0;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
-
-.popupContainer__inner_content {
-  padding: 0px 6px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 3px;
-  flex: 1;
-}
-
-.popupContainer__title {
-  font-size: 8px;
-  line-height: 10px;
-  font-weight: 600;
-  text-align: center;
-  font-family: inherit;
-
-  p {
-    margin: 0;
-    padding: 0;
-  }
-}
-
-.popupContainer__subTitle {
-  font-size: 6px;
-  line-height: 8px;
-  font-weight: 400;
-  text-align: center;
-  font-family: inherit;
-
-  p {
-    margin: 0;
-    padding: 0;
-  }
-}
-
-.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: 2147483647;
-}
-
-.popupContainer__button {
-  cursor: pointer;
-  padding: 2px;
-  border: none;
-  border-radius: 2px;
-  font-weight: 600;
-  font-size: 8px;
-  text-align: center;
-  width: 90%;
-  line-height: 10px;
-}
-
-.popupContainer__poweredBy {
-  margin: 4px;
-  padding: 0;
-  line-height: 0;
-  text-align: center;
-
-  a {
-    text-decoration: underline;
-    font-family: inherit;
-    font-weight: 400;
-    font-size: 6px;
-    line-height: 8px;
-    color: #212121;
-    cursor: pointer;
-    text-underline-offset: 2px;
-  }
-}
-
-.popupContainer__titleIcon {
-  height: 20px;
-  width: auto;
-  margin: 6px 0;
-}

package/src/widgets/ShopifyForm/previewMobile.module.css

@@ -1,131 +0,0 @@
-.popupWrapper {
-  position: absolute;
-  display: block;
-  top: 0;
-  left: 0;
-  z-index: 3;
-  height: 100%;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
-.popupContainer {
-  width: 80%;
-  position: fixed;
-  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: 4px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 3px;
-  position: relative;
-}
-
-.popupContainer__content * {
-  font-family: inherit;
-}
-
-.popupContainer__image {
-  width: 100%;
-  height: auto;
-  aspect-ratio: 1.56;
-  margin: 0;
-  padding: 0;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
-
-.popupContainer__inner_content {
-  padding: 3px 9px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  flex: 1;
-}
-
-.popupContainer__title {
-  font-size: 8px;
-  line-height: 10px;
-  font-weight: 600;
-  text-align: center;
-  font-family: inherit;
-  max-width: 90%;
-
-  p {
-    margin: 0;
-    padding: 0;
-  }
-}
-
-.popupContainer__subTitle {
-  font-size: 6px;
-  line-height: 8px;
-  font-weight: 400;
-  text-align: center;
-  font-family: inherit;
-  max-width: 90%;
-
-  p {
-    margin: 0;
-    padding: 0;
-  }
-}
-
-.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;
-}
-
-.popupContainer__button {
-  cursor: pointer;
-  padding: 3px;
-  border: none;
-  border-radius: 3px;
-  font-weight: 600;
-  font-size: 8px;
-  text-align: center;
-  margin-top: 4px;
-  width: 90%;
-  line-height: 10px;
-}
-
-.popupContainer__poweredBy {
-  margin: 3px;
-  padding: 0;
-  text-align: center;
-
-  a {
-    text-decoration: underline;
-    font-family: inherit;
-    font-weight: 400;
-    font-size: 6px;
-    line-height: 8px;
-    color: #212121;
-    cursor: pointer;
-    text-underline-offset: 2px;
-  }
-}
-
-.popupContainer__titleIcon {
-  height: 20px;
-  width: auto;
-  margin: 6px 0;
-}