@bikdotai/bik-widgets 1.0.0

package/src/widgets/DirectReward/index.tsx

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