@bikdotai/bik-widgets 1.0.0 → 1.0.2

package/src/widgets/ScratchCard/index.tsx

@@ -1,546 +0,0 @@
-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);
-}