@bikdotai/bik-widgets 1.0.0

package/src/widgets/ShopifyForm/config.ts

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

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

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

@@ -0,0 +1,131 @@
+.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;
+}