@bikdotai/bik-widgets 1.0.0

package/src/utilities/languageUtilities.ts

@@ -0,0 +1,235 @@
+import { ISO_CODES_VALUES, LANGUAGE_VALUES } from '@bikdotai/bik-models/dm';
+
+export class LanguageUtils {
+  getStoreLanguage(isoCode: ISO_CODES_VALUES) {
+    return Object.values(LANGUAGE_VALUES).includes(ISO_CODES_VALUES[isoCode])
+      ? ISO_CODES_VALUES[isoCode]
+      : ISO_CODES_VALUES.en;
+  }
+
+  getLanguageDirection(language: LANGUAGE_VALUES) {
+    return language === LANGUAGE_VALUES.ARABIC ? 'rtl' : 'ltr';
+  }
+
+  private getValidationMessage(
+    language: LANGUAGE_VALUES,
+    messages: { [key in LANGUAGE_VALUES]?: string },
+    defaultMessage: string,
+  ) {
+    return messages[language] || defaultMessage;
+  }
+
+  getEmailValidationMessage(language: LANGUAGE_VALUES) {
+    return this.getValidationMessage(
+      language,
+      {
+        [LANGUAGE_VALUES.ARABIC]: 'يرجى إدخال عنوان بريد إلكتروني صالح',
+        [LANGUAGE_VALUES.FRENCH]: 'Veuillez entrer une adresse e-mail valide',
+        [LANGUAGE_VALUES.SPANISH]:
+          'Por favor, introduce una dirección de correo electrónico válida',
+        [LANGUAGE_VALUES.MALAY]: 'Sila masukkan alamat emel yang sah',
+      },
+      'Please enter a valid email address',
+    );
+  }
+
+  getPhoneNumberValidationMessage(language: LANGUAGE_VALUES) {
+    return this.getValidationMessage(
+      language,
+      {
+        [LANGUAGE_VALUES.ARABIC]: 'يرجى إدخال رقم هاتف صالح',
+        [LANGUAGE_VALUES.FRENCH]:
+          'Veuillez entrer un numéro de téléphone valide',
+        [LANGUAGE_VALUES.SPANISH]:
+          'Por favor, introduce un número de teléfono válido',
+        [LANGUAGE_VALUES.MALAY]: 'Sila masukkan nombor telefon yang sah',
+      },
+      'Please enter a valid phone number',
+    );
+  }
+
+  getRequiredFieldMessage(language: LANGUAGE_VALUES) {
+    return this.getValidationMessage(
+      language,
+      {
+        [LANGUAGE_VALUES.ARABIC]: 'هذه الخانة مطلوبه',
+        [LANGUAGE_VALUES.FRENCH]: 'Ce champ est requis',
+        [LANGUAGE_VALUES.SPANISH]: 'Este campo es obligatorio',
+        [LANGUAGE_VALUES.MALAY]: 'Ruangan ini diperlukan',
+      },
+      'This field is required',
+    );
+  }
+
+  getPrivacyPolicyAcceptanceMessage(language: LANGUAGE_VALUES) {
+    return this.getValidationMessage(
+      language,
+      {
+        [LANGUAGE_VALUES.ARABIC]: 'يرجى قبول سياسة الخصوصية للمتابعة',
+        [LANGUAGE_VALUES.FRENCH]:
+          'Veuillez accepter la politique de confidentialité pour continuer',
+        [LANGUAGE_VALUES.SPANISH]:
+          'Por favor, acepte la política de privacidad para continuar',
+        [LANGUAGE_VALUES.MALAY]: 'Sila terima dasar privasi untuk meneruskan',
+      },
+      'Please accept the privacy policy to proceed',
+    );
+  }
+
+  getOptionalEmailTitle(language: LANGUAGE_VALUES) {
+    return this.getValidationMessage(
+      language,
+      {
+        [LANGUAGE_VALUES.ARABIC]: 'البريد الإلكتروني (اختياري)',
+        [LANGUAGE_VALUES.FRENCH]: 'E-mail (facultatif)',
+        [LANGUAGE_VALUES.SPANISH]: 'Correo electrónico (opcional)',
+        [LANGUAGE_VALUES.MALAY]: 'E-mel (Pilihan)',
+      },
+      'Email (Optional)',
+    );
+  }
+
+  getOptionalPhoneNumberTitle(language: LANGUAGE_VALUES) {
+    return this.getValidationMessage(
+      language,
+      {
+        [LANGUAGE_VALUES.ARABIC]: 'رقم الهاتف (اختياري)',
+        [LANGUAGE_VALUES.FRENCH]: 'Numéro de téléphone (facultatif)',
+        [LANGUAGE_VALUES.SPANISH]: 'Número de teléfono (opcional)',
+        [LANGUAGE_VALUES.MALAY]: 'Nombor telefon (Pilihan)',
+      },
+      'Phone Number (Optional)',
+    );
+  }
+
+  getOptionalWhatsappNumberTitle(language: LANGUAGE_VALUES) {
+    return this.getValidationMessage(
+      language,
+      {
+        [LANGUAGE_VALUES.ARABIC]: 'رقم الواتساب (اختياري)',
+        [LANGUAGE_VALUES.FRENCH]: 'Numéro WhatsApp (facultatif)',
+        [LANGUAGE_VALUES.SPANISH]: 'Número de WhatsApp (opcional)',
+        [LANGUAGE_VALUES.MALAY]: 'Nombor WhatsApp (Pilihan)',
+      },
+      'Whatsapp Number (Optional)',
+    );
+  }
+
+  getPoweredByMessage(language: LANGUAGE_VALUES) {
+    return this.getValidationMessage(
+      language,
+      {
+        [LANGUAGE_VALUES.ARABIC]: 'مشغل بواسطة',
+        [LANGUAGE_VALUES.FRENCH]: 'Propulsé par',
+        [LANGUAGE_VALUES.SPANISH]: 'Desarrollado por',
+        [LANGUAGE_VALUES.MALAY]: 'Dikuasakan oleh',
+      },
+      'Powered by',
+    );
+  }
+
+  getEmailPlaceholder(language: LANGUAGE_VALUES, skipLabel: boolean) {
+    const placeholders = {
+      [LANGUAGE_VALUES.ARABIC]: skipLabel
+        ? 'أدخل بريدك الإلكتروني'
+        : 'مثل: abc@gmail.com',
+      [LANGUAGE_VALUES.FRENCH]: skipLabel
+        ? 'Entrez votre email'
+        : 'ex: abc@gmail.com',
+      [LANGUAGE_VALUES.SPANISH]: skipLabel
+        ? 'Introduce tu correo electrónico'
+        : 'ej: abc@gmail.com',
+      [LANGUAGE_VALUES.MALAY]: skipLabel
+        ? 'Masukkan e-mel anda'
+        : 'cth: abc@gmail.com',
+    };
+    return (
+      placeholders[language] ||
+      (skipLabel ? 'Enter your email' : 'eg: abc@gmail.com')
+    );
+  }
+
+  getPhoneNumberPlaceholder(language: LANGUAGE_VALUES) {
+    const placeholders = {
+      [LANGUAGE_VALUES.ARABIC]: 'مثل: 9876543210',
+      [LANGUAGE_VALUES.FRENCH]: 'ex: 9876543210',
+      [LANGUAGE_VALUES.SPANISH]: 'ej: 9876543210',
+      [LANGUAGE_VALUES.MALAY]: 'cth: 9876543210',
+    };
+    return placeholders[language] || 'eg: 9876543210';
+  }
+
+  getCountryPlaceholder(language: LANGUAGE_VALUES) {
+    const placeholders = {
+      [LANGUAGE_VALUES.ARABIC]: 'البلد',
+      [LANGUAGE_VALUES.FRENCH]: 'Pays',
+      [LANGUAGE_VALUES.SPANISH]: 'País',
+      [LANGUAGE_VALUES.MALAY]: 'Negara',
+    };
+    return placeholders[language] || 'Country';
+  }
+
+  getWhatsappNumberPlaceholder(language: LANGUAGE_VALUES, skipLabel: boolean) {
+    const placeholders = {
+      [LANGUAGE_VALUES.ARABIC]: skipLabel
+        ? 'أدخل رقم الواتساب'
+        : 'مثل: 9876543210',
+      [LANGUAGE_VALUES.FRENCH]: skipLabel
+        ? 'Entrez votre numéro WhatsApp'
+        : 'ex: 9876543210',
+      [LANGUAGE_VALUES.SPANISH]: skipLabel
+        ? 'Introduce tu número de WhatsApp'
+        : 'ej: 9876543210',
+      [LANGUAGE_VALUES.MALAY]: skipLabel
+        ? 'Masukkan nombor WhatsApp anda'
+        : 'cth: 9876543210',
+    };
+    return (
+      placeholders[language] ||
+      (skipLabel ? 'Enter whatsapp number' : 'eg: 9876543210')
+    );
+  }
+
+  getWhatsappNumberTitle(language: LANGUAGE_VALUES) {
+    const titles = {
+      [LANGUAGE_VALUES.ARABIC]: 'رقم الواتساب',
+      [LANGUAGE_VALUES.FRENCH]: 'Numéro WhatsApp',
+      [LANGUAGE_VALUES.SPANISH]: 'Número de WhatsApp',
+      [LANGUAGE_VALUES.MALAY]: 'Nombor WhatsApp',
+    };
+    return titles[language] || 'Whatsapp Number';
+  }
+
+  getCopiedMessage(language: LANGUAGE_VALUES) {
+    return this.getValidationMessage(
+      language,
+      {
+        [LANGUAGE_VALUES.ARABIC]: 'تم النسخ',
+        [LANGUAGE_VALUES.FRENCH]: 'Copié',
+        [LANGUAGE_VALUES.SPANISH]: 'Copiado',
+        [LANGUAGE_VALUES.MALAY]: 'Disalin',
+      },
+      'Copied!',
+    );
+  }
+
+  getPrivacyPolicyText(language: LANGUAGE_VALUES) {
+    const translations = {
+      [LANGUAGE_VALUES.ARABIC]: 'لقد قرأت ووافقت على',
+      [LANGUAGE_VALUES.FRENCH]: "J'ai lu et accepté la",
+      [LANGUAGE_VALUES.SPANISH]: 'He leído y acepto la',
+      [LANGUAGE_VALUES.MALAY]: 'Saya telah membaca dan bersetuju dengan',
+    };
+    return translations[language] || 'I have read and agree to the';
+  }
+
+  getPrivacyPolicyLabel(language: LANGUAGE_VALUES) {
+    const labels = {
+      [LANGUAGE_VALUES.ARABIC]: 'سياسة الخصوصية',
+      [LANGUAGE_VALUES.FRENCH]: 'politique de confidentialité',
+      [LANGUAGE_VALUES.SPANISH]: 'política de privacidad',
+      [LANGUAGE_VALUES.MALAY]: 'dasar privasi',
+    };
+    return labels[language] || 'Privacy Policy';
+  }
+}

package/src/utilities/localRunner.js

@@ -0,0 +1,26 @@
+'use strict';
+exports.__esModule = true;
+var widgetUtils_1 = require('./widgetUtils');
+var widgetUtils = new widgetUtils_1.WidgetUtils();
+var shouldShow = widgetUtils.showWidget(
+  {
+    currentUrl: '/products/leather-anchor',
+    customUrls: {
+      '/*': [
+        {
+          widgetId: 'DRfXWegtNnHMvHK8axl2',
+          fabPosition: widgetUtils_1.FAB_POSITION.POP_UP,
+        },
+      ],
+      '/': [
+        {
+          widgetId: 'R8RBWPdVtjHbOdAnF7pa',
+          fabPosition: widgetUtils_1.FAB_POSITION.POP_UP,
+        },
+      ],
+    },
+    currentWidgetId: 'DRfXWegtNnHMvHK8axl2',
+  },
+  false,
+);
+console.log('res:', shouldShow);

package/src/utilities/localRunner.ts

@@ -0,0 +1,27 @@
+import { FAB_POSITION, WidgetUtils } from './widgetUtils';
+
+const widgetUtils = new WidgetUtils();
+
+const shouldShow = widgetUtils.showWidget(
+  {
+    currentUrl: '/products/leather-anchor',
+    customUrls: {
+      '/*': [
+        {
+          widgetId: 'DRfXWegtNnHMvHK8axl2',
+          fabPosition: FAB_POSITION.POP_UP,
+        },
+      ],
+      '/': [
+        {
+          widgetId: 'R8RBWPdVtjHbOdAnF7pa',
+          fabPosition: FAB_POSITION.POP_UP,
+        },
+      ],
+    },
+    currentWidgetId: 'DRfXWegtNnHMvHK8axl2',
+  },
+  false,
+);
+
+console.log('res:', shouldShow);

package/src/utilities/localStorage.ts

@@ -0,0 +1,40 @@
+import { encryptBikData } from './encryption';
+
+export enum LOCAL_STORAGE_KEYS {
+  BIK_CHAT_WIDGET = 'bik-chat-widget',
+  BIK_PHONE_NUMBER = 'bik-phone-number',
+  BIK_EMAIL = 'bik-email',
+  BIK_COUPON_DISBURSED = 'bik-coupon-disbursed',
+  BIK_TRIGGERED_INTENT_DETAILS = 'bik-triggered-intent-details',
+}
+
+export function storeObjectInLocalStorage(
+  key: string,
+  data: any,
+  override = false,
+) {
+  try {
+    if (override || !localStorage.getItem(key)) {
+      const jsonData = JSON.stringify(data);
+      localStorage.setItem(key, encryptBikData(jsonData));
+    }
+    return;
+  } catch (error) {
+    return;
+  }
+}
+
+export function storeDataInLocalStorage(
+  key: string,
+  data: any,
+  override = false,
+) {
+  try {
+    if ((override || !localStorage.getItem(key)) && data) {
+      localStorage.setItem(key, encryptBikData(data));
+    }
+    return;
+  } catch (error) {
+    return;
+  }
+}

package/src/utilities/script.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import 'utilities/global.css';
+import ReactDOM from 'react-dom';
+
+function includeMe(Component) {
+  let wrapper = document.createElement('div');
+  const config = JSON.parse('{{{bikConfig}}}');
+  wrapper.id = `bik-widget-wrapper-${config.id}`;
+  wrapper.className = 'bik-widget__outer-wrapper';
+  document.body.appendChild(wrapper);
+  const widget = document.getElementById(`bik-widget-wrapper-${config.id}`);
+  ReactDOM.render(<Component {...config} />, widget);
+}
+
+export default includeMe;

package/src/utilities/stringUtils.ts

@@ -0,0 +1,5 @@
+export function toSnakeCase(words) {
+  let snakeCase = words.replace(/\s+/g, '_');
+  snakeCase = snakeCase.toLowerCase();
+  return snakeCase;
+}

package/src/utilities/styleUtils.ts

@@ -0,0 +1,134 @@
+import { getStyles } from '../widgets/utility';
+import CaptivateBanner from '../widgets/CaptivateBanner';
+
+export const injectFontLink = fontLinks => {
+  fontLinks?.map(fontLink => {
+    const preConnectGoogleAPi = document.createElement('link');
+    preConnectGoogleAPi.rel = 'preconnect';
+    const preConnectFontsStatic = document.createElement('link');
+    preConnectFontsStatic.rel = 'preconnect';
+    preConnectFontsStatic.type = 'crossorigin';
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = fontLink;
+    document.head.appendChild(link);
+    document.head.appendChild(preConnectGoogleAPi);
+    document.head.appendChild(preConnectFontsStatic);
+  });
+};
+
+export const getStylesWrapper = url => {
+  return new Promise(function (resolve, reject) {
+    const fn = getStyles.bind(this, url);
+    resolve(fn);
+  });
+};
+
+export const ComponentStyleMap = {
+  'Spin the wheel popup': {
+    globalStyle: getStylesWrapper('./STW/style.module.css'),
+    userInputPreviewMobile: getStylesWrapper(
+      './STW/previewStyles/userInputsPreviewMobile.module.css',
+    ),
+    userInputPreviewDesktop: getStylesWrapper(
+      './STW/previewStyles/userInputsPreviewDesktop.module.css',
+    ),
+    wheelPreviewDesktop: getStylesWrapper(
+      './STW/previewStyles/wheelPreviewDesktop.module.css',
+    ),
+    wheelPreviewMobile: getStylesWrapper(
+      './STW/previewStyles/wheelPreviewMobile.module.css',
+    ),
+    thankyouPreviewMobile: getStylesWrapper(
+      './STW/previewStyles/thankyouPreviewMobile.module.css',
+    ),
+    thankyouPreviewDesktop: getStylesWrapper(
+      './STW/previewStyles/thankyouPreviewDesktop.module.css',
+    ),
+  },
+  'Spin the wheel popup 2': {
+    globalStyle: getStylesWrapper('./STW/stw2Pages/style.module.css'),
+    userInputPreviewMobile: getStylesWrapper(
+      './STW/stw2PreviewStyles/userInputsPreviewMobile.module.css',
+    ),
+    userInputPreviewDesktop: getStylesWrapper(
+      './STW/stw2PreviewStyles/userInputsPreviewDesktop.module.css',
+    ),
+    wheelPreviewDesktop: getStylesWrapper(
+      './STW/stw2PreviewStyles/wheelPreviewDesktop.module.css',
+    ),
+    wheelPreviewMobile: getStylesWrapper(
+      './STW/stw2PreviewStyles/wheelPreviewMobile.module.css',
+    ),
+    thankyouPreviewDesktop: getStylesWrapper(
+      './STW/stw2PreviewStyles/thankyouPreviewDesktop.module.css',
+    ),
+    thankyouPreviewMobile: getStylesWrapper(
+      './STW/stw2PreviewStyles/thankyouPreviewMobile.module.css',
+    ),
+  },
+  'Direct reward widget': {
+    globalStyle: getStylesWrapper('./DirectReward/style.module.css'),
+    userInputPreviewDesktop: getStylesWrapper(
+      './DirectReward/previewStyles/userDetailsPreviewDesktop.module.css',
+    ),
+    userInputPreviewMobile: getStylesWrapper(
+      './DirectReward/previewStyles/userDetailsPreviewMobile.module.css',
+    ),
+    thankyouPreviewDesktop: getStylesWrapper(
+      './DirectReward/previewStyles/thankYouPreviewDesktop.module.css',
+    ),
+    thankyouPreviewMobile: getStylesWrapper(
+      './DirectReward/previewStyles/thankYouPreviewMobile.module.css',
+    ),
+  },
+  'Lead Generator': {
+    globalStyle: getStylesWrapper('./DirectReward/style.module.css'),
+    userInputPreviewDesktop: getStylesWrapper(
+      './DirectReward/previewStyles/userDetailsPreviewDesktop.module.css',
+    ),
+    userInputPreviewMobile: getStylesWrapper(
+      './DirectReward/previewStyles/userDetailsPreviewMobile.module.css',
+    ),
+    thankyouPreviewDesktop: getStylesWrapper(
+      './DirectReward/previewStyles/thankYouPreviewDesktop.module.css',
+    ),
+    thankyouPreviewMobile: getStylesWrapper(
+      './DirectReward/previewStyles/thankYouPreviewMobile.module.css',
+    ),
+  },
+  'Scratch the card': {
+    globalStyle: getStylesWrapper('./ScratchCard/globalStyle.module.css'),
+    userInputPreviewDesktop: getStylesWrapper(
+      './ScratchCard/previewStyles/userDetailsPreviewDesktop.module.css',
+    ),
+    userInputPreviewMobile: getStylesWrapper(
+      './ScratchCard/previewStyles/userDetailsPreviewMobile.module.css',
+    ),
+    thankyouPreviewMobile: getStylesWrapper(
+      './STW/previewStyles/thankyouPreviewMobile.module.css',
+    ),
+    thankyouPreviewDesktop: getStylesWrapper(
+      './STW/previewStyles/thankyouPreviewDesktop.module.css',
+    ),
+  },
+  'Marketing popup': {
+    globalStyle: getStylesWrapper('./CaptivateBanner/style.module.css'),
+    previewMobile: getStylesWrapper(
+      './CaptivateBanner/previewMobile.module.css',
+    ),
+    previewDesktop: getStylesWrapper(
+      './CaptivateBanner/previewDesktop.module.css',
+    ),
+  },
+  'Back in stock notifier': {
+    globalStyle: getStylesWrapper('./ShopifyForm/style.module.css'),
+    previewMobile: getStylesWrapper('./ShopifyForm/previewMobile.module.css'),
+    previewDesktop: getStylesWrapper('./ShopifyForm/previewDesktop.module.css'),
+  },
+  'Price drop notifier': {
+    globalStyle: getStylesWrapper('./ShopifyForm/style.module.css'),
+    previewMobile: getStylesWrapper('./ShopifyForm/previewMobile.module.css'),
+    previewDesktop: getStylesWrapper('./ShopifyForm/previewDesktop.module.css'),
+  },
+};

package/src/utilities/variables.ts

@@ -0,0 +1,11 @@
+export enum COOKIE_VALUES {
+  BIK_VISITOR = 'bikvisitor',
+  STORY_VIEWED = 'storeviewed',
+  COLLECTION_VIEWED = 'collectionviewed',
+}
+
+export enum EVENT_NAME {
+  WIDGET_VISITED = 'WIDGET_VISITED',
+  COLLECTION_VIEWED = 'COLLECTION_VIEWED',
+  STORY_VIEWED = 'STORY_VIEWED',
+}