@bikdotai/bik-widgets 1.0.0

package/src/widgets/ScratchCard/index.tsx

@@ -0,0 +1,546 @@
+import React, { useEffect, useState, Suspense } from 'react';
+import includeMe from 'utilities/script';
+import { IPageConfigProcessed, WidgetUtils } from 'utilities/widgetUtils';
+import { shouldShowExitIntent } from 'utilities/exitIntentUtils';
+import { CookieUtils } from 'utilities/cookie';
+import Fab, { IFab } from 'components/Fab';
+import Send from '../../components/Icons/Send';
+import { COOKIE_VALUES, EVENT_NAME } from 'utilities/variables';
+import UserDetails, { IUserInputs } from '../STW/userDetails';
+import {
+  fetchCouponCode,
+  IChannelInfo,
+  IPayloadFetchCouponCode,
+} from '../STW/api';
+import ScratchCardModal from './modal';
+import { getCookie, getScrollPercent, setCookie } from '../STW/utility';
+import CouponDetails from '../STW/couponDetails';
+import {
+  ISTCWidgetCustomisation,
+  ISTWWidgetLeadGeneration,
+  ISTWWidgetVisibility,
+  WIDGET_NAME,
+  WidgetInfo,
+  WidgetSchema,
+} from '@bikdotai/bik-models/dm';
+import {
+  LOCAL_STORAGE_KEYS,
+  storeDataInLocalStorage,
+} from '../../utilities/localStorage';
+import { decryptBikData } from '../../utilities/encryption';
+import useIsMobile from '../../hooks/useIsMobile';
+import { useTriggeredIntentDetails } from '../../hooks/useTriggeredIntentDetails';
+import {
+  TRIGGERED_INTENT_SOURCE,
+  TRIGGERED_INTENT_TYPE,
+  EXIT_INTENT_LEVEL,
+} from '@bikdotai/bik-models/dm/models/analytics';
+import { getTriggeredPageFromUrl } from '../utility';
+import { CUSTOM_FIELDS } from 'utilities/customFieldTypeMapping';
+import { LEAD_GENERATION_CHANNELS } from '../../types/customFields';
+
+const ExitIntentHook = React.lazy(() => import('../ExitIntentHook'));
+
+export interface IScratchCard extends WidgetSchema {
+  environment: string;
+  id: string;
+  storeWidgetConfig: IPageConfigProcessed;
+  preview?: boolean;
+  isMobile?: boolean;
+}
+
+const ScratchCardWidget = (props: IScratchCard) => {
+  const [showFab, setShowFab] = useState(false);
+  const [showUserDetails, setShowUserDetails] = useState(false);
+  const { mandatoryOption, optionalOptions } =
+    props.leadGeneration as ISTWWidgetLeadGeneration;
+  const { storeId, templateId } = props.info as WidgetInfo;
+  const { discountTitle } =
+    props.widgetCustomisation as ISTCWidgetCustomisation;
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>(null);
+  const [showWinningScreen, setShowWinningScreen] = useState(false);
+  const [couponCodeDetails, setCouponCodeDetails] = useState<{
+    code: string;
+    description: string;
+  }>({
+    code: 'SND20OFF',
+    description:
+      '20% off on entire order | Minimum purchase of ₹500.00 One time use only | Expiry date : 5th Aug, 2022',
+  });
+  const [sameMobileNumberTooglers, setSameMobileNumberTogglers] = useState<{
+    sameSMSNo: boolean;
+    sameWhatsappNumber: boolean;
+  }>({
+    sameSMSNo: false,
+    sameWhatsappNumber: false,
+  });
+  const widgetUtils = new WidgetUtils();
+  const cookieUtils = new CookieUtils();
+  const [showModal, setShowModal] = useState(false);
+  const environment = props.environment;
+  let buttonStyle: React.CSSProperties;
+  const visibility = props.visibility as ISTWWidgetVisibility;
+  const viewLimit =
+    (visibility.triggers.frequency ? visibility.triggers.frequency : 0) / 24;
+  const timeDelay =
+    (visibility.triggers.timeDelay ? visibility.triggers.timeDelay : 0) * 1000;
+  const pageScroll = visibility.triggers.pageScroll;
+  const fabButtonVisibility = visibility.triggers.fabButtonVisibility;
+  const isMobileDevice = useIsMobile();
+  const { setTriggeredIntentDetails, getTriggeredIntentDetails } =
+    useTriggeredIntentDetails(props.id);
+
+  if (props.widgetCustomisation?.fabText) {
+    buttonStyle = {
+      width: 'fit-content',
+      height: 'fit-content',
+      paddingHorizontal: 4,
+      borderRadius: 20,
+    };
+  }
+
+  cookieUtils.addItemInLocalStorage('storeId', props.info?.storeId);
+
+  const launchModalOnTimeDelay = () => {
+    if (timeDelay && !showModal) {
+      setTimeout(() => {
+        setTriggeredIntentDetails({
+          triggerSource: TRIGGERED_INTENT_SOURCE.AUTO_POPULATE,
+          triggerType: TRIGGERED_INTENT_TYPE.TIME_DELAY,
+          triggeredPage: getTriggeredPageFromUrl(window.location.href),
+        });
+        setCookie(`bik-${props.id}-modalopened`, 'bikmodalopened', viewLimit);
+        setShowModal(true);
+      }, timeDelay);
+    }
+  };
+
+  const launchModalOnScroll = () => {
+    const handleScrollEnd = () => {
+      if (
+        showModal ||
+        (getCookie(`bik-${props.id}-claimed`) &&
+          visibility?.triggers?.hideAfterClaimed) ||
+        (getCookie(`bik-${props.id}-modalopened`) &&
+          visibility?.triggers?.frequency)
+      ) {
+        return;
+      }
+      if (pageScroll && getScrollPercent() >= pageScroll) {
+        setTriggeredIntentDetails({
+          triggerSource: TRIGGERED_INTENT_SOURCE.AUTO_POPULATE,
+          triggerType: TRIGGERED_INTENT_TYPE.PAGE_SCROLL,
+          triggeredPage: getTriggeredPageFromUrl(window.location.href),
+        });
+        setCookie(`bik-${props.id}-modalopened`, 'bikmodalopened', viewLimit);
+        setShowModal(true);
+      }
+    };
+
+    window.addEventListener('scrollend', handleScrollEnd);
+    return () => window.removeEventListener('scrollend', handleScrollEnd);
+  };
+  useEffect(() => {
+    if (!props.preview) {
+      cookieUtils.cookieClickHandler(
+        `bik-${props.id}-visitor`,
+        COOKIE_VALUES.BIK_VISITOR,
+        EVENT_NAME.WIDGET_VISITED,
+        1,
+        props.environment,
+        props.id,
+      );
+
+      if (!fabButtonVisibility) {
+        cookieUtils.cookieClickHandler(
+          `bik-${props.id}-clicked`,
+          'bikclick',
+          'WIDGET_CLICKED',
+          1,
+          props.environment,
+          props.id,
+        );
+      }
+
+      const shouldShow = widgetUtils.showWidget(
+        {
+          currentUrl: window.location.href.replace(window.location.origin, ''),
+          customUrls: props.storeWidgetConfig,
+          currentWidgetId: props.id,
+        },
+        props.info.isAutomationTesting,
+      );
+      if (
+        !shouldShow ||
+        (getCookie(`bik-${props.id}-claimed`) &&
+          visibility?.triggers?.hideAfterClaimed) ||
+        (getCookie(`bik-${props.id}-modalopened`) &&
+          visibility?.triggers?.frequency)
+      ) {
+        return;
+      }
+      if (fabButtonVisibility && !getCookie(`bik-${props.id}-claimed`)) {
+        setShowFab(true);
+      }
+      launchModalOnTimeDelay();
+      const cleanupScrollListener = launchModalOnScroll();
+
+      return () => {
+        if (cleanupScrollListener) {
+          cleanupScrollListener();
+        }
+      };
+    }
+  }, [window.location.href]);
+
+  const handleExitIntent = (exitIntentType: string) => {
+    if (!showModal) {
+      setTriggeredIntentDetails({
+        triggerSource: TRIGGERED_INTENT_SOURCE.EXIT_INTENT,
+        triggerType: exitIntentType,
+        triggeredPage: getTriggeredPageFromUrl(window.location.href),
+        exitIntentLevel:
+          visibility?.triggers?.showExitIntentOn ?? EXIT_INTENT_LEVEL.WEBPAGE,
+      });
+      setCookie(`bik-${props.id}-modalopened`, 'bikmodalopened', viewLimit);
+      setShowModal(true);
+    }
+  };
+
+  const getExitIntentHook = () => {
+    if (props.preview) {
+      return false;
+    }
+
+    const pathname = window.location.pathname;
+    const location = window.location.href;
+    const visiblePages = visibility?.visiblePages ?? [];
+    const triggers = visibility?.triggers ?? {};
+
+    if (
+      shouldShowExitIntent({
+        visiblePages,
+        currentLocation: location,
+        currentPathname: pathname,
+        isMobileDevice,
+        triggers,
+      })
+    ) {
+      return (
+        <Suspense fallback={null}>
+          <ExitIntentHook
+            onExitIntent={handleExitIntent}
+            config={{
+              exitIntentTimeDelay: triggers?.exitIntentTimeDelay,
+              exitIntentViewLimit: triggers?.exitIntentViewLimit,
+              exitIntentFastUpScroll: triggers?.exitIntentFastUpScroll,
+              showExitIntentOn: triggers?.showExitIntentOn,
+            }}
+            widgetId={props.id}
+          />
+        </Suspense>
+      );
+    } else {
+      return null;
+    }
+  };
+
+  const fabStyle: IFab = {
+    icon: <Send color={props.widgetCustomisation?.iconColor} />,
+    onClick() {
+      cookieUtils.cookieClickHandler(
+        `bik-${props.id}-clicked`,
+        'bikclick',
+        'WIDGET_CLICKED',
+        1,
+        props.environment,
+        props.id,
+      );
+      setTriggeredIntentDetails({
+        triggerSource: TRIGGERED_INTENT_SOURCE.FAB,
+        triggerType: TRIGGERED_INTENT_TYPE.FAB_CLICK,
+        triggeredPage: getTriggeredPageFromUrl(window.location.href),
+      });
+      setShowFab(false);
+      setShowModal(true);
+    },
+    buttonStyle: buttonStyle,
+    isMobile: props.isMobile,
+    preview: props.preview ?? false,
+    widgetCustomisation: {
+      fabText: props.widgetCustomisation?.fabText,
+      iconColor: props.widgetCustomisation?.iconColor,
+      fabTransform: props.widgetCustomisation?.fabTransform,
+      fabPositioner: props.widgetCustomisation?.fabPositioner,
+      fabBackgroundColor: props.widgetCustomisation?.fabBackgroundColor,
+      fabLottie: props.widgetCustomisation?.fabLottie,
+      fabAnimationRun: props.widgetCustomisation?.fabAnimationRun,
+      fabImage: props.widgetCustomisation?.fabImage,
+      fabIconLink: props.widgetCustomisation?.fabIconLink,
+      fabWebSize: props.widgetCustomisation?.fabWebSize,
+      fabMobileSize: props.widgetCustomisation?.fabMobileSize,
+    },
+  };
+
+  const claimPrizeHandle = async (userInputs: IUserInputs) => {
+    let primaryPhoneNumber: string,
+      secondaryPhoneNumber: string,
+      emailId: string;
+    const primaryInfo: IChannelInfo[] = [];
+    const secondaryInfo: IChannelInfo[] = [];
+    Object.keys(mandatoryOption).map(key => {
+      if (mandatoryOption[key]) {
+        if (key === CUSTOM_FIELDS) {
+          const customFields = userInputs[key];
+          Object.keys(customFields).forEach(fieldKey => {
+            const fieldId = Number(fieldKey);
+            const fieldValue = customFields[fieldKey];
+            if (
+              mandatoryOption.customFields &&
+              Array.isArray(mandatoryOption.customFields) &&
+              mandatoryOption.customFields.some(field => field.id === fieldId)
+            ) {
+              primaryInfo.push({
+                channel: 'customField',
+                value: fieldValue,
+                customFieldId: fieldId,
+              });
+            }
+          });
+        } else {
+          const value = userInputs[key].countryCodeData
+            ? userInputs[key].countryCodeData.dial + userInputs[key].value
+            : userInputs[key].value;
+          let channel: LEAD_GENERATION_CHANNELS;
+          if (key === 'isEmail') {
+            channel = LEAD_GENERATION_CHANNELS.EMAIL;
+            emailId = value;
+          } else if (key === 'isSms') {
+            channel = LEAD_GENERATION_CHANNELS.SMS;
+            secondaryPhoneNumber = value;
+          } else if (key === 'isWhatsapp') {
+            channel = LEAD_GENERATION_CHANNELS.WHATSAPP;
+            primaryPhoneNumber = value;
+          }
+          primaryInfo.push({
+            channel: channel,
+            value: value,
+          });
+        }
+      }
+    });
+    sameMobileNumberTooglers.sameSMSNo
+      ? (userInputs['isWhatsapp'] = {
+          ...userInputs['isWhatsapp'],
+          countryCodeData: userInputs['isSms'].countryCodeData,
+          value: userInputs['isSms'].value,
+        })
+      : sameMobileNumberTooglers.sameWhatsappNumber
+        ? (userInputs['isSms'] = {
+            ...userInputs['isSms'],
+            countryCodeData: userInputs['isWhatsapp'].countryCodeData,
+            value: userInputs['isWhatsapp'].value,
+          })
+        : '';
+
+    Object.keys(optionalOptions).map(key => {
+      if (optionalOptions[key]) {
+        if (key === CUSTOM_FIELDS) {
+          const customFields = userInputs[key];
+          Object.keys(customFields).forEach(fieldKey => {
+            const fieldId = Number(fieldKey);
+            const fieldValue = customFields[fieldKey];
+            if (
+              optionalOptions.customFields &&
+              Array.isArray(optionalOptions.customFields) &&
+              optionalOptions.customFields.some(field => field.id === fieldId)
+            ) {
+              secondaryInfo.push({
+                channel: 'customField',
+                value: fieldValue,
+                customFieldId: fieldId,
+              });
+            }
+          });
+        } else {
+          const value = userInputs[key].countryCodeData
+            ? userInputs[key].countryCodeData.dial + userInputs[key].value
+            : userInputs[key].value;
+          let channel: LEAD_GENERATION_CHANNELS;
+          if (key === 'isEmail') {
+            channel = LEAD_GENERATION_CHANNELS.EMAIL;
+            emailId = value;
+          } else if (key === 'isSms') {
+            channel = LEAD_GENERATION_CHANNELS.SMS;
+            secondaryPhoneNumber = value;
+          } else if (key === 'isWhatsapp') {
+            channel = LEAD_GENERATION_CHANNELS.WHATSAPP;
+            primaryPhoneNumber = value;
+          }
+          secondaryInfo.push({
+            channel: channel,
+            value: value,
+          });
+        }
+      }
+    });
+    setIsLoading(true);
+    let disbursedCoupon = undefined;
+    if (primaryPhoneNumber) {
+      disbursedCoupon = localStorage.getItem(
+        `${LOCAL_STORAGE_KEYS.BIK_COUPON_DISBURSED}-${props.id}-${primaryPhoneNumber}`,
+      );
+    }
+    if (!disbursedCoupon && secondaryPhoneNumber) {
+      disbursedCoupon = localStorage.getItem(
+        `${LOCAL_STORAGE_KEYS.BIK_COUPON_DISBURSED}-${props.id}-${secondaryPhoneNumber}`,
+      );
+    }
+    if (!disbursedCoupon && emailId) {
+      disbursedCoupon = localStorage.getItem(
+        `${LOCAL_STORAGE_KEYS.BIK_COUPON_DISBURSED}-${props.id}-${emailId}`,
+      );
+    }
+    if (disbursedCoupon) {
+      const decryptedData = JSON.parse(decryptBikData(disbursedCoupon));
+      setCouponCodeDetails({
+        code: decryptedData.code,
+        description: decryptedData.description,
+      });
+      setShowUserDetails(false);
+      setShowWinningScreen(true);
+      setIsLoading(false);
+      return;
+    }
+
+    const triggeredIntentDetails = getTriggeredIntentDetails();
+
+    const data: IPayloadFetchCouponCode = {
+      storeId: storeId,
+      widgetId: props.id,
+      primaryInfo: primaryInfo,
+      secondaryInfo: secondaryInfo,
+      templateId: templateId,
+      quadrant: 1,
+      triggeredIntentDetails,
+    };
+    const response: any = await fetchCouponCode(data, environment);
+    setIsLoading(false);
+    if (response.status === 404) {
+      if (response.error == 'Customer already exist!') {
+        setError('Sorry, You already claimed the prize.');
+      } else {
+        setError(response.error);
+      }
+    }
+    if (response.code && response.description) {
+      storeDataInLocalStorage(
+        LOCAL_STORAGE_KEYS.BIK_PHONE_NUMBER,
+        primaryPhoneNumber,
+      );
+      storeDataInLocalStorage(LOCAL_STORAGE_KEYS.BIK_EMAIL, emailId);
+      setCouponCodeDetails({
+        code: response.code,
+        description: response.description,
+      });
+      const stringifiedCouponData = JSON.stringify({
+        code: response.code,
+        description: response.description,
+      });
+      if (primaryPhoneNumber) {
+        storeDataInLocalStorage(
+          `${LOCAL_STORAGE_KEYS.BIK_COUPON_DISBURSED}-${props.id}-${primaryPhoneNumber}`,
+          stringifiedCouponData,
+        );
+      }
+      if (secondaryPhoneNumber) {
+        storeDataInLocalStorage(
+          `${LOCAL_STORAGE_KEYS.BIK_COUPON_DISBURSED}-${props.id}-${secondaryPhoneNumber}`,
+          stringifiedCouponData,
+        );
+      }
+      if (emailId) {
+        storeDataInLocalStorage(
+          `${LOCAL_STORAGE_KEYS.BIK_COUPON_DISBURSED}-${props.id}-${emailId}`,
+          stringifiedCouponData,
+        );
+      }
+      if (visibility.triggers.hideAfterClaimed) {
+        setCookie(`bik-${props.id}-claimed`, response.code, 24820);
+      }
+      setShowUserDetails(false);
+      setShowWinningScreen(true);
+    }
+  };
+
+  return (
+    <div id={`bik-widget-root-${props.id}`}>
+      {getExitIntentHook()}
+      {showFab && <Fab {...fabStyle} id={`bik-stw-${props.id}-fab`} />}
+      {showUserDetails && (
+        <UserDetails
+          {...props}
+          claimPrizeHandle={claimPrizeHandle}
+          error={error}
+          isLoading={isLoading}
+          onCloseHandle={() => {
+            setError(null);
+            setShowFab(fabButtonVisibility);
+            setShowUserDetails(false);
+          }}
+          widgetName={'Scratch_The_Card'}
+          templateName={WIDGET_NAME.SCRATCH_THE_CARD}
+          setSameMobileNumberTogglers={setSameMobileNumberTogglers}
+          sameMobileNumberTogglers={sameMobileNumberTooglers}
+        />
+      )}
+
+      {showWinningScreen && (
+        <CouponDetails
+          onCloseHandle={() => {
+            setError(null);
+            setShowWinningScreen(false);
+            setShowFab(
+              !!(
+                fabButtonVisibility &&
+                !getCookie(`bik-${props.id}-claimed`) &&
+                visibility?.triggers?.hideAfterClaimed &&
+                !getCookie(`bik-${props.id}-modalopened`) &&
+                visibility?.triggers?.frequency
+              ),
+            );
+          }}
+          couponCodeDetails={couponCodeDetails}
+          widgetCustomisation={props.widgetCustomisation}
+          preview={props.preview}
+          isMobile={props.isMobile}
+          templateName={WIDGET_NAME.SCRATCH_THE_CARD}
+        />
+      )}
+
+      <ScratchCardModal
+        discountTitle={discountTitle}
+        widgetCustomisation={props.widgetCustomisation}
+        onScratchComplete={() => {
+          setTimeout(() => {
+            setShowModal(false);
+            setShowUserDetails(true);
+          }, 1500);
+        }}
+        showModal={showModal}
+        environment={environment}
+        onClose={() => {
+          setShowModal(false);
+          setShowFab(fabButtonVisibility);
+        }}
+      />
+    </div>
+  );
+};
+
+export default ScratchCardWidget;
+
+if (process.env.NODE_ENV !== 'development') {
+  includeMe(ScratchCardWidget);
+}