@bikdotai/bik-widgets 1.0.0 → 1.0.2

package/src/widgets/DirectReward/index.tsx

@@ -1,579 +0,0 @@
-import React, { useState, useEffect, useRef, LegacyRef, Suspense } from 'react';
-import includeMe from 'utilities/script';
-import { IPageConfigProcessed, WidgetUtils } from 'utilities/widgetUtils';
-import { shouldShowExitIntent } from 'utilities/exitIntentUtils';
-import {
-  addLead,
-  fetchCouponCode,
-  IChannelInfo,
-  IPayloadFetchCouponCode,
-} from 'widgets/STW/api';
-import { IUserInputs } from 'widgets/STW/userDetails';
-import {
-  cookieClickHandler,
-  getCookie,
-  getScrollPercent,
-  setCookie,
-} from '../STW/utility';
-import DirectRewardTemplate from './directReward';
-import DRStyle from './style.module.css';
-import {
-  IDRWidgetCustomisation,
-  IDRWidgetLeadGeneration,
-  IDRWidgetVisibility,
-  ISTWWidgetLeadGeneration,
-  WIDGET_NAME,
-  WidgetInfo,
-  WidgetSchema,
-  ISO_CODES_VALUES,
-} 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 { getTriggeredPageFromUrl } from '../utility';
-import {
-  EXIT_INTENT_LEVEL,
-  TRIGGERED_INTENT_SOURCE,
-  TRIGGERED_INTENT_TYPE,
-} from '@bikdotai/bik-models/dm/models/analytics';
-import { CUSTOM_FIELDS } from 'utilities/customFieldTypeMapping';
-import { LEAD_GENERATION_CHANNELS } from '../../types/customFields';
-
-const ExitIntentHook = React.lazy(() => import('../ExitIntentHook'));
-
-interface IDR extends WidgetSchema {
-  visibility: IDRWidgetVisibility;
-  id: string;
-  storeWidgetConfig: IPageConfigProcessed;
-  environment: string;
-  preview?: boolean;
-  templateName?: WIDGET_NAME;
-  isMobile?: boolean;
-  previewLanguage?: ISO_CODES_VALUES;
-}
-
-export interface IDRTemplate {
-  id: string;
-  info?: WidgetInfo;
-  widgetCustomisation?: IDRWidgetCustomisation;
-  visibility: IDRWidgetVisibility;
-  discountCodeDetails?: {
-    discountCodeTitle: string;
-    discountCodeDescription: string;
-  };
-  claimPrizeHandle?: (userInputs: IUserInputs) => Promise<void>;
-  error?: string;
-  isLoading?: boolean;
-  preview?: boolean;
-  isMobile?: boolean;
-  leadGeneration?: IDRWidgetLeadGeneration;
-  showComponents?: {
-    userDetails: boolean;
-    couponDetails: boolean;
-    floatingButton: boolean;
-  };
-  setShowComponents: React.Dispatch<
-    React.SetStateAction<{
-      userDetails: boolean;
-      couponDetails: boolean;
-      floatingButton: boolean;
-    }>
-  >;
-  onCloseHandle?: () => void;
-  templateName?: WIDGET_NAME;
-  containerReference?: LegacyRef<HTMLDivElement>;
-  isMobileDevice?: boolean;
-  countryCode?: string;
-  environment: string;
-  widgetLanguage: ISO_CODES_VALUES;
-}
-
-let isModalOpened = false;
-const DirectReward = (props: IDR) => {
-  const { widgetCustomisation, leadGeneration, environment, info, visibility } =
-    props;
-  const { mandatoryOption, optionalOptions } =
-    leadGeneration as ISTWWidgetLeadGeneration;
-  const { storeId, templateId, templateName } = info as WidgetInfo;
-  const [showComponents, setShowComponents] = useState({
-    userDetails: false,
-    couponDetails: false,
-    floatingButton: false,
-  });
-  const [error, setError] = useState<string>(null);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [sameMobileNumberTogglers, setSameMobileNumberTogglers] = useState<{
-    sameSMSNo: boolean;
-    sameWhatsappNumber: boolean;
-  }>({
-    sameSMSNo: false,
-    sameWhatsappNumber: false,
-  });
-  const [couponCodeDetails, setCouponCodeDetails] = useState<{
-    discountCodeTitle: string;
-    discountCodeDescription: string;
-  }>({
-    discountCodeTitle: 'SND20OFF',
-    discountCodeDescription:
-      '20% off on entire order | Minimum purchase of ₹500.00 One time use only | Expiry date : 5th Aug, 2022',
-  });
-  const widgetUtils = new WidgetUtils();
-  const directRewardContainer = useRef(null);
-  const isMobileDevice = useIsMobile();
-  const { setTriggeredIntentDetails, getTriggeredIntentDetails } =
-    useTriggeredIntentDetails(props.id);
-
-  const triggers =
-    (visibility as IDRWidgetVisibility).triggers ??
-    ({} as IDRWidgetVisibility['triggers']);
-  const pageScroll = triggers?.pageScroll;
-  const viewLimit = (triggers?.frequency ? triggers.frequency : 0) / 24;
-  const timeDelay = (triggers?.timeDelay ? triggers.timeDelay : 0) * 1000;
-
-  const handleExitIntent = (exitIntentType: TRIGGERED_INTENT_TYPE) => {
-    if (!isModalOpened) {
-      setTriggeredIntentDetails({
-        triggerSource: TRIGGERED_INTENT_SOURCE.EXIT_INTENT,
-        triggerType: exitIntentType,
-        triggeredPage: getTriggeredPageFromUrl(window.location.href),
-        exitIntentLevel:
-          triggers?.showExitIntentOn ?? EXIT_INTENT_LEVEL.WEBPAGE,
-      });
-      launchModal();
-    }
-  };
-
-  const getExitIntentHook = () => {
-    if (props.preview) {
-      return false;
-    }
-
-    const pathname = window.location.pathname;
-    const location = window.location.href;
-    const visiblePages = visibility?.visiblePages ?? [];
-
-    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;
-    }
-  };
-
-  useEffect(() => {
-    cookieClickHandler(
-      `bik-${props.id}-visitor`,
-      'bikvisitor',
-      'WIDGET_VISITED',
-      1,
-      props.id,
-      environment,
-    );
-    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)
-    ) {
-      return;
-    }
-    if (visibility.triggers?.fabButtonVisibility) {
-      setShowComponents({
-        ...showComponents,
-        floatingButton: true,
-      });
-    }
-    if (
-      getCookie(`bik-${props.id}-modalopened`) &&
-      visibility?.triggers?.frequency
-    ) {
-      return;
-    }
-    launchModalOnTimeDelay();
-    const scrollCleanup = launchModalOnScroll();
-
-    return () => {
-      if (scrollCleanup) {
-        scrollCleanup();
-      }
-    };
-  }, [window.location.href]);
-
-  useEffect(() => {
-    function handleClickOutside(event) {
-      if (
-        directRewardContainer.current &&
-        !directRewardContainer.current.contains(event.target)
-      ) {
-        if (!props.preview) {
-          onCloseHandle();
-        }
-      }
-    }
-
-    document.addEventListener('click', handleClickOutside);
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  }, [directRewardContainer]);
-
-  const launchModal = () => {
-    isModalOpened = true;
-    document.body.classList.add(DRStyle.noScrollBackground);
-    setShowComponents(prev => ({
-      ...prev,
-      couponDetails: false,
-      userDetails: true,
-    }));
-    setCookie(`bik-${props.id}-modalopened`, 'bikmodalopened', viewLimit);
-    cookieClickHandler(
-      `bik-${props.id}-clicked`,
-      'bikview',
-      'WIDGET_CLICKED',
-      1,
-      props.id,
-      environment,
-    );
-  };
-
-  const launchModalOnTimeDelay = () => {
-    if (timeDelay) {
-      setTimeout(() => {
-        if (!isModalOpened) {
-          setTriggeredIntentDetails({
-            triggerSource: TRIGGERED_INTENT_SOURCE.AUTO_POPULATE,
-            triggerType: TRIGGERED_INTENT_TYPE.TIME_DELAY,
-            triggeredPage: getTriggeredPageFromUrl(window.location.href),
-          });
-          launchModal();
-        }
-      }, timeDelay);
-    }
-  };
-
-  const launchModalOnScroll = () => {
-    const handleScroll = () => {
-      if (
-        isModalOpened ||
-        !pageScroll ||
-        (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),
-        });
-        launchModal();
-      }
-    };
-
-    window.addEventListener('scrollend', handleScroll);
-    return () => window.removeEventListener('scrollend', handleScroll);
-  };
-
-  const onCloseHandle = () => {
-    setError(null);
-    setShowComponents(prev => ({
-      couponDetails: false,
-      userDetails: false,
-      floatingButton: !!(prev.couponDetails === true
-        ? triggers?.fabButtonVisibility &&
-          !getCookie(`bik-${props.id}-claimed`) &&
-          visibility?.triggers?.hideAfterClaimed &&
-          !getCookie(`bik-${props.id}-modalopened`) &&
-          visibility?.triggers?.frequency
-        : triggers?.fabButtonVisibility),
-    }));
-    const bikDirectRewardParentContainer = document.getElementsByClassName(
-      DRStyle.bikDRParentContainer,
-    )[0];
-    const bikDirectRewardMainContainer = document.getElementsByClassName(
-      DRStyle.bikDRMainContainer,
-    )[0];
-    bikDirectRewardMainContainer.classList.remove(DRStyle.scaleUpEffect);
-    if (window.screen.width <= 768) {
-      bikDirectRewardParentContainer.classList.add(DRStyle.scaleDownEffect);
-    } else {
-      bikDirectRewardMainContainer.classList.add(DRStyle.scaleDownEffect);
-    }
-    document.body.classList.remove(DRStyle.noScrollBackground);
-    isModalOpened = !viewLimit;
-  };
-
-  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,
-          });
-        }
-      }
-    });
-    sameMobileNumberTogglers.sameSMSNo
-      ? (userInputs['isWhatsapp'] = {
-          ...userInputs['isWhatsapp'],
-          countryCodeData: userInputs['isSms'].countryCodeData,
-          value: userInputs['isSms'].value,
-        })
-      : sameMobileNumberTogglers.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,
-          });
-        }
-      }
-    });
-
-    const triggeredIntentDetails = getTriggeredIntentDetails();
-
-    const data: IPayloadFetchCouponCode = {
-      storeId: storeId,
-      widgetId: props.id,
-      primaryInfo: primaryInfo,
-      secondaryInfo: secondaryInfo,
-      templateId: templateId,
-      quadrant: 1,
-      triggeredIntentDetails,
-    };
-    setIsLoading(true);
-    if (templateName === WIDGET_NAME.DIRECT_REWARD) {
-      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({
-          discountCodeTitle: decryptedData.code,
-          discountCodeDescription: decryptedData.description,
-        });
-        setIsLoading(false);
-        setShowComponents({
-          ...showComponents,
-          userDetails: false,
-          couponDetails: true,
-        });
-        return;
-      }
-      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);
-        if (visibility.triggers?.hideAfterClaimed) {
-          setCookie(`bik-${props.id}-claimed`, response.code, 24820);
-        }
-        setCouponCodeDetails({
-          discountCodeTitle: response.code,
-          discountCodeDescription: 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,
-          );
-        }
-        setShowComponents(prev => ({
-          ...showComponents,
-          userDetails: false,
-          couponDetails: true,
-        }));
-      }
-    } else {
-      storeDataInLocalStorage(
-        LOCAL_STORAGE_KEYS.BIK_PHONE_NUMBER,
-        primaryPhoneNumber,
-      );
-      storeDataInLocalStorage(LOCAL_STORAGE_KEYS.BIK_EMAIL, emailId);
-      await addLead(data, environment);
-      setIsLoading(false);
-      if (visibility.triggers?.hideAfterClaimed) {
-        setCookie(`bik-${props.id}-claimed`, true, 24820);
-      }
-      setShowComponents(prev => ({
-        ...showComponents,
-        userDetails: false,
-        couponDetails: true,
-      }));
-    }
-  };
-
-  return (
-    <>
-      {getExitIntentHook()}
-      <DirectRewardTemplate
-        {...(props as any)}
-        claimPrizeHandle={claimPrizeHandle}
-        onCloseHandle={onCloseHandle}
-        sameMobileNumberTogglers={sameMobileNumberTogglers}
-        setSameMobileNumberTogglers={setSameMobileNumberTogglers}
-        discountCodeDetails={couponCodeDetails}
-        error={error}
-        isLoading={isLoading}
-        templateName={templateName}
-        widgetCustomisation={widgetCustomisation as IDRWidgetCustomisation}
-        showComponents={showComponents}
-        containerReference={directRewardContainer}
-        setShowComponents={setShowComponents}
-      />
-    </>
-  );
-};
-export default DirectReward;
-if (process.env.NODE_ENV !== 'development') {
-  includeMe(DirectReward);
-}