@bikdotai/bik-widgets 1.0.0

package/src/widgets/ExitIntentHook.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useExitIntent } from 'hooks/useExitIntent';
+import {
+  EXIT_INTENT_LEVEL,
+  TRIGGERED_INTENT_TYPE,
+} from '@bikdotai/bik-models/dm/models/analytics';
+
+interface ExitIntentHookProps {
+  onExitIntent: (exitIntentType: TRIGGERED_INTENT_TYPE) => void;
+  config?: {
+    exitIntentTimeDelay?: number | null;
+    exitIntentViewLimit?: number | null;
+    exitIntentFastUpScroll?: boolean | null;
+    showExitIntentOn?: EXIT_INTENT_LEVEL | null;
+  };
+  widgetId?: string;
+}
+
+const ExitIntentHook: React.FC<ExitIntentHookProps> = props => {
+  useExitIntent({
+    onExitIntent: props.onExitIntent,
+    config: props.config,
+    widgetId: props.widgetId,
+  });
+  return null;
+};
+
+export default ExitIntentHook;

package/src/widgets/STW/api.ts

@@ -0,0 +1,70 @@
+import { encryptBikData } from '../../utilities/encryption';
+import { ITriggeredIntentDetails } from '../../hooks/useTriggeredIntentDetails';
+
+export interface IChannelInfo {
+  channel: 'sms' | 'email' | 'whatsapp' | 'customField';
+  value: string;
+  customFieldId?: number;
+}
+export interface IPayloadFetchCouponCode {
+  storeId: string;
+  widgetId: string;
+  primaryInfo: IChannelInfo[];
+  secondaryInfo: IChannelInfo[];
+  templateId: string;
+  quadrant?: number;
+  session?: string;
+  productId?: number;
+  productName?: string;
+  variantId?: number;
+  variantName?: string;
+  variantPrice?: number;
+  triggeredIntentDetails?: ITriggeredIntentDetails;
+}
+export const fetchCouponCode = async (
+  payload: IPayloadFetchCouponCode,
+  environment,
+) => {
+  const isStw =
+    payload.templateId === 'KHnL25g05yRTFCGyJFit' ||
+    payload.templateId === 'KcG3ONb3O8OPE2CSAXWJ';
+  const url = `${environment}/publicApiFunctions-${isStw ? 'claimReward' : 'fetchCouponCode'}`;
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(payload),
+  });
+  return response.json();
+};
+
+export const addLead = async (
+  payload: IPayloadFetchCouponCode,
+  environment,
+) => {
+  const response = await fetch(`${environment}/publicApiFunctions-addLead`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(payload),
+  });
+  return response.json();
+};
+
+export const sendWidgetEvent = (event, widgetId, env) => {
+  fetch(`${env}/publicApiFunctions-sendWidgetEvent`, {
+    method: 'POST',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      widgetId: widgetId,
+      event,
+    }),
+  })
+    .then(response => response.json())
+    .then(() => {});
+};

package/src/widgets/STW/components/svgFactory.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+export enum SVGName {
+  BIK = 'BIK',
+}
+interface SVGFactoryProps {
+  name: SVGName;
+  color?: string;
+}
+const SVGFactory = (props: SVGFactoryProps) => {
+  const { name, color } = props;
+  return (
+    <>
+      {name === SVGName.BIK && (
+        <svg
+          width="28"
+          height="10"
+          viewBox="0 0 28 10"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M28 8.21913C28 9.20256 27.1629 9.99979 26.1302 9.99979C25.0976 9.99979 24.2605 9.20256 24.2605 8.21913C24.2605 7.2357 25.0976 6.43848 26.1302 6.43848C27.1629 6.43848 28 7.2357 28 8.21913Z"
+            fill="#A2A2A2"
+          />
+          <path
+            d="M0.388011 9.9487C0.288521 9.9487 0.19898 9.91553 0.119388 9.84921C0.0397961 9.77341 0 9.6834 0 9.57917V0.369523C0 0.265299 0.0397961 0.180024 0.119388 0.113699C0.19898 0.0378997 0.288521 0 0.388011 0H5.14861C6.05397 0 6.79517 0.113699 7.37222 0.341098C7.94926 0.568497 8.37707 0.895383 8.65564 1.32176C8.93421 1.74813 9.0735 2.27399 9.0735 2.89933C9.0735 3.22148 9.00385 3.51047 8.86457 3.76629C8.73523 4.01264 8.57605 4.22109 8.38701 4.39164C8.19798 4.55271 8.0189 4.67115 7.84977 4.74695C8.23778 4.90802 8.57605 5.1828 8.86457 5.57127C9.15309 5.95027 9.29735 6.38612 9.29735 6.87881C9.29735 7.54206 9.13817 8.10108 8.8198 8.55588C8.51138 9.01068 8.0587 9.35651 7.46176 9.59339C6.87477 9.83026 6.15346 9.9487 5.29785 9.9487H0.388011ZM3.20856 7.80262H4.95461C5.29287 7.80262 5.5416 7.70787 5.70078 7.51837C5.85997 7.3194 5.93956 7.10148 5.93956 6.8646C5.93956 6.61825 5.85499 6.40507 5.68586 6.22504C5.51673 6.03554 5.27297 5.94079 4.95461 5.94079H3.20856V7.80262ZM3.20856 3.85157H4.80537C5.12374 3.85157 5.35754 3.76629 5.50678 3.59574C5.65601 3.42519 5.73063 3.22622 5.73063 2.99882C5.73063 2.77142 5.65601 2.57245 5.50678 2.4019C5.35754 2.23135 5.12374 2.14608 4.80537 2.14608H3.20856V3.85157Z"
+            fill={`${color ?? '#A1A1A1'}`}
+          />
+          <path
+            d="M10.5173 9.9487C10.4179 9.9487 10.3283 9.91553 10.2487 9.84921C10.1691 9.77341 10.1293 9.6834 10.1293 9.57917V0.369523C10.1293 0.265299 10.1691 0.180024 10.2487 0.113699C10.3283 0.0378997 10.4179 0 10.5173 0H13.0543C13.1638 0 13.2533 0.0378997 13.323 0.113699C13.4026 0.180024 13.4424 0.265299 13.4424 0.369523V9.57917C13.4424 9.6834 13.4026 9.77341 13.323 9.84921C13.2533 9.91553 13.1638 9.9487 13.0543 9.9487H10.5173Z"
+            fill={`${color ?? '#A1A1A1'}`}
+          />
+          <path
+            d="M15.0795 9.9487C14.98 9.9487 14.8905 9.91553 14.8109 9.84921C14.7313 9.77341 14.6915 9.6834 14.6915 9.57917V0.369523C14.6915 0.265299 14.7313 0.180024 14.8109 0.113699C14.8905 0.0378997 14.98 0 15.0795 0H17.4523C17.5618 0 17.6513 0.0378997 17.721 0.113699C17.8006 0.180024 17.8404 0.265299 17.8404 0.369523V3.35413L20.064 0.298461C20.1137 0.232136 20.1834 0.165812 20.2729 0.0994874C20.3624 0.0331624 20.4868 0 20.646 0H23.377C23.4665 0 23.5411 0.0331624 23.6008 0.0994874C23.6705 0.156337 23.7053 0.227399 23.7053 0.312674C23.7053 0.369523 23.6854 0.421635 23.6456 0.46901L20.5117 4.76116L23.9142 9.47969C23.954 9.51759 23.9739 9.5697 23.9739 9.63602C23.9739 9.7213 23.9391 9.7971 23.8695 9.86342C23.8098 9.92027 23.7351 9.9487 23.6456 9.9487H20.8251C20.636 9.9487 20.4918 9.90606 20.3923 9.82079C20.3027 9.73551 20.248 9.67392 20.2281 9.63602L17.8404 6.33874V9.57917C17.8404 9.6834 17.8006 9.77341 17.721 9.84921C17.6513 9.91553 17.5618 9.9487 17.4523 9.9487H15.0795Z"
+            fill={`${color ?? '#A1A1A1'}`}
+          />
+        </svg>
+      )}
+    </>
+  );
+};
+
+export default SVGFactory;

package/src/widgets/STW/config.ts

@@ -0,0 +1,193 @@
+import {
+  BACKGROUND_TYPE,
+  ISTWWidgetCustomisation,
+} from '@bikdotai/bik-models/dm';
+
+const config = {
+  id: 'widget',
+  environment: 'staging',
+  templateName: 'Spin the wheel popup',
+  widgetCustomisation: {
+    probability: {
+      probability: [0.1, 0.1, 0.2, 0.2, 0.1, 0.3],
+      probabilityIndexArray: [
+        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2,
+        2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3,
+        3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5,
+        5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
+        5, 5, 5, 5,
+      ],
+    },
+    widgetName: 'Spin the wheel popup pac4',
+    fabPositioner: {
+      left: '30px',
+      bottom: '30px',
+    },
+    playScreenHeading:
+      '<p><strong>Spin the wheel to win exciting prizes</strong></p>',
+    fabBackgroundColor: '#d97559',
+    fontFamily: {
+      name: 'Inter',
+      link: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap',
+    },
+    fontColour: '#000000',
+    playScreenSubHeading:
+      '<p>You have a chance to win a big discount. Are you ready?</p>',
+    spinLimit: 0,
+    iconcolor: '#f5f5f5',
+    wheelDetails: [],
+    spikesCount: 6,
+    spinnerColor: '#fbbb18',
+    segmentColor2: '#d97559',
+    segmentAngle: 60,
+    segmentColor1: '#a1deed',
+    iconColor: '#f5f5f5',
+    fabIconLink:
+      'https://storage.googleapis.com/bik-widget-mfe/bap%2Ffab-assets%2Ficons%2Fbik%2Fgift.svg',
+    fabPosition: 'BOTTOM_LEFT',
+    postSpinScreenCtaColor: '#731dcf',
+    fabMobileSize: 50,
+    fabWebSize: '50',
+    winningScreenCouponTextColour: '#000000',
+    winningScreenButtonColour: '#000000',
+    winningScreenTitle:
+      '<p><strong>Spin the wheel to win exciting prizes</strong></p>',
+    winningScreenSubTitle: '<p>You have a chance to win a big discount</p>',
+    postPlayScreenButtonColour: '#000000',
+    postPlayScreenButtonText: 'Claim prize',
+    postPlayScreenTitle: '<p><strong>Special prize only for you!</strong></p>',
+    postPlayScreenSubTitle: '<p>To claim prize fill the details below</p>',
+    winningScreenButtonText: 'Copy and use discount',
+    winningScreenIcon: '',
+    winningScreenBackgroundColour: '#ffffff',
+    winningScreenButtonTextColour: '#ffffff',
+    winningScreenCouponBgColour: '#ffffff',
+    postPlayScreenBackgroundColour: '#ffffff',
+    fabColor: '#ffffff',
+    playScreenBackgroundColour: '#ffffff',
+    postPlayScreenButtonTextColour: '#ffffff',
+    discountCodeTitle: {
+      '1': 'asdf',
+      '2': 'asf',
+      '3': 'afs',
+      '4': 'asf',
+      '5': 'asfs',
+      '6': 'fsadf',
+    },
+    backgroundType: 'colour',
+    backgroundColour: '#ffffff',
+    winningScreenTitleIcon:
+      'https://storage.googleapis.com/bik-widget-mfe/bap%2Fpost-play-screen-assets%2Fimages%2Fbik%2FconfettiOne.png',
+    multiLingualConfigurations: {
+      ENGLISH: {
+        playScreenHeading:
+          '<p><strong>Spin the wheel to win exciting prizes</strong></p>',
+        playScreenSubHeading:
+          '<p>You have a chance to win a big discount. Are you ready?</p>',
+        playScreenButtonText: 'Spin to win',
+        postPlayScreenTitle:
+          '<p><strong>Special prize only for you!</strong></p>',
+        postPlayScreenSubTitle: '<p>To claim prize fill the details below</p>',
+        postPlayScreenButtonText: 'Claim prize',
+        winningScreenTitle:
+          '<p><strong>Hurry! you have won a coupon</strong></p>',
+        winningScreenSubTitle: '<p>Use the coupon during checkout</p>',
+        winningScreenButtonText: 'Copy and use discount',
+      },
+      ARABIC: {
+        playScreenHeading:
+          '<p><strong>ادور العجلة لربح جوائز مثيرة</strong></p>',
+        playScreenSubHeading: '<p>لديك فرصة للفوز بخصم كبير. هل أنت جاهز؟</p>',
+        playScreenButtonText: 'ادور للفوز',
+        postPlayScreenTitle: '<p><strong>جائزة خاصة فقط لك!</strong></p>',
+        postPlayScreenSubTitle:
+          '<p>للحصول على الجائزة، قم بملء التفاصيل أدناه</p>',
+        postPlayScreenButtonText: 'ادعي الجائزة',
+        winningScreenTitle: '<p><strong>أسرع! لقد فزت بقسيمة</strong></p>',
+        winningScreenSubTitle: '<p>استخدم القسيمة أثناء الخروج</p>',
+        winningScreenButtonText: 'انسخ واستخدم الخصم',
+      },
+      FRENCH: {
+        playScreenHeading:
+          '<p><strong>Faites tourner la roue pour gagner des prix excitants</strong></p>',
+        playScreenSubHeading:
+          '<p>Vous avez une chance de gagner un gros rabais. Êtes-vous prêt?</p>',
+        playScreenButtonText: 'Tourner pour gagner',
+        postPlayScreenTitle:
+          '<p><strong>Prix spécial juste pour vous!</strong></p>',
+        postPlayScreenSubTitle:
+          '<p>Pour réclamer le prix, remplissez les détails ci-dessous</p>',
+        postPlayScreenButtonText: 'Réclamer le prix',
+        winningScreenTitle:
+          '<p><strong>Dépêchez-vous! vous avez gagné un coupon</strong></p>',
+        winningScreenSubTitle: '<p>Utilisez le coupon lors du paiement</p>',
+        winningScreenButtonText: 'Copier et utiliser le rabais',
+      },
+      MALAY: {
+        playScreenHeading:
+          '<p><strong>Putar roda untuk memenangi hadiah menarik</strong></p>',
+        playScreenSubHeading:
+          '<p>Anda berpeluang untuk memenangi kod diskaun besar. Adakah anda bersedia?</p>',
+        playScreenButtonText: 'Putar untuk menang',
+        postPlayScreenTitle:
+          '<p><strong>Hadiah istimewa hanya untuk anda!</strong></p>',
+        postPlayScreenSubTitle:
+          '<p>Untuk menuntut hadiah, isikan butiran di bawah</p>',
+        postPlayScreenButtonText: 'Tuntut hadiah',
+        winningScreenTitle:
+          '<p><strong>Bergegas! anda telah memenangi kupon</strong></p>',
+        winningScreenSubTitle: '<p>Guna kupon semasa pembayaran</p>',
+        winningScreenButtonText: 'Salin dan gunakan diskaun',
+      },
+    },
+  } as ISTWWidgetCustomisation,
+  visibility: {
+    visiblePages: ['/*'],
+    triggers: {
+      isPlayable: false,
+      playLimit: null,
+      hasFAbButton: true,
+      pageScroll: null,
+      timeDelay: null,
+      viewLimit: null,
+      fabButtonVisibility: true,
+      frequency: null,
+    },
+  },
+  leadGeneration: {
+    optionalOptions: {
+      isSms: false,
+      isWhatsapp: false,
+      isEmail: false,
+    },
+    mandatoryOption: {
+      isSms: false,
+      isWhatsapp: true,
+      isEmail: false,
+    },
+    enableConsentPolicies: false,
+    privacyPolicyURL: '',
+  },
+  info: {
+    scriptPath: 'bap/widget-stw/stw.js',
+    widgetTypeId: 'lCcPfO2RuooXpBGgZSs0',
+    templateName: 'Spin the wheel popup',
+    liveSince: '07/09/2023',
+    infra: '2.0',
+    id: '1z5TI1ZzjKWrZR5tv39r',
+    templateId: 'KHnL25g05yRTFCGyJFit',
+    storeId: 'p60HYv5wjgQaOrPdqT5NjbpkroD2',
+    delete: false,
+    status: 'LIVE',
+  },
+  storeWidgetConfig: {
+    '/*': [
+      {
+        widgetId: 'widget',
+        fabPosition: 'BOTTOM_LEFT',
+      },
+    ],
+  },
+};
+
+export default config;

package/src/widgets/STW/context.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+export const STWContext = createContext<{
+  preview: boolean;
+  isMobile: boolean;
+  templateName: string;
+}>({ preview: false, isMobile: false, templateName: '' });

package/src/widgets/STW/couponDetails.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react';
+import Coupon from '../../components/couponDetails/coupon';
+import { ISTWTemplate } from './stw1';
+import CloseIcon from '../../assets/svg/Close';
+import { toSnakeCase } from '../../utilities/stringUtils';
+import {
+  BACKGROUND_TYPE,
+  ISTWWidgetCustomisation,
+  LANGUAGE_VALUES,
+  LANGUAGE_ISO_CODES,
+} from '@bikdotai/bik-models/dm';
+import useIsMobile from '../../hooks/useIsMobile';
+import { ComponentStyleMap, injectFontLink } from '../../utilities/styleUtils';
+import { LanguageUtils } from 'utilities/languageUtilities';
+
+const CouponDetails = (props: ISTWTemplate) => {
+  const {
+    widgetCustomisation,
+    couponCodeDetails,
+    onCloseHandle,
+    preview,
+    isMobile,
+    templateName,
+  } = props;
+  const {
+    fontFamily,
+    backgroundType,
+    backgroundColour,
+    backgroundImageMobile,
+    backgroundImageDesktop,
+  } = widgetCustomisation as ISTWWidgetCustomisation;
+  const [currentStyle, setCurrentStyle] = useState<any>(null);
+  const isMobileDevice = useIsMobile();
+  const languageUtils = new LanguageUtils();
+  const [widgetLanguage, setWidgetLanguage] = useState(LANGUAGE_VALUES.ENGLISH);
+
+  useEffect(() => {
+    if (fontFamily && fontFamily?.link) {
+      injectFontLink([fontFamily?.link]);
+    }
+  }, [fontFamily]);
+
+  useEffect(() => {
+    if (preview) {
+      if (isMobile) {
+        ComponentStyleMap[templateName]?.thankyouPreviewMobile.then(
+          async style => {
+            setCurrentStyle((await style()).default);
+          },
+        );
+      } else {
+        ComponentStyleMap[templateName]?.thankyouPreviewDesktop.then(
+          async style => {
+            setCurrentStyle((await style()).default);
+          },
+        );
+      }
+    } else {
+      ComponentStyleMap[templateName]?.globalStyle.then(async style => {
+        setCurrentStyle((await style()).default);
+      });
+    }
+  }, [preview, isMobile]);
+
+  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]);
+
+  if (!currentStyle || !couponCodeDetails) {
+    return <></>;
+  }
+  return (
+    <div className={currentStyle.bikSpinOverlay}>
+      <div
+        className={currentStyle.bikMainWrapper}
+        id={`bik-${props.id}-coupon-screen`}
+      >
+        <div className={currentStyle.bikCloseBtnWrapper}>
+          <div
+            className={currentStyle.bikCloseBtn}
+            onClick={() => onCloseHandle('couponDetails')}
+          >
+            <CloseIcon />
+          </div>
+        </div>
+        <div
+          className={currentStyle.bikWrapper + ' ' + currentStyle.bikPadding20}
+          style={
+            backgroundType === BACKGROUND_TYPE.IMAGE
+              ? {
+                  background: `url(${isMobileDevice || isMobile ? backgroundImageMobile : backgroundImageDesktop})`,
+                  backgroundSize: 'contain',
+                  backgroundRepeat: 'round',
+                  backgroundPosition: 'top',
+                  fontFamily: fontFamily?.name,
+                }
+              : {
+                  backgroundColor: backgroundColour ?? '#ffffff',
+                  fontFamily: fontFamily?.name ?? 'Inter',
+                }
+          }
+        >
+          <Coupon
+            {...props}
+            widgetName={toSnakeCase(templateName)}
+            widgetLanguage={widgetLanguage}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default CouponDetails;