@bikdotai/bik-widgets 1.0.0

package/src/widgets/STW/index.tsx

@@ -0,0 +1,733 @@
+import React, { useEffect, useState, Suspense } from 'react';
+import { IUserInputs } from './userDetails';
+import {
+  generateRotationValues,
+  setCookie,
+  getCookie,
+  cookieClickHandler,
+  getScrollPercent,
+} from './utility';
+import STWStyle from './style.module.css';
+import STW2Style from './stw2Pages/style.module.css';
+import { fetchCouponCode, IChannelInfo, IPayloadFetchCouponCode } from './api';
+import Fab, { IFab } from 'components/Fab';
+import Send from 'components/Icons/Send';
+import includeMe from 'utilities/script';
+import { IPageConfigProcessed, WidgetUtils } from '../../utilities/widgetUtils';
+import { shouldShowExitIntent } from '../../utilities/exitIntentUtils';
+import {
+  ISTWWidgetCustomisation,
+  WIDGET_NAME,
+  WidgetSchema,
+  ISTWWidgetLeadGeneration,
+  WidgetInfo,
+  ISTWWidgetVisibility,
+  ISO_CODES_VALUES,
+} from '@bikdotai/bik-models/dm';
+import {
+  LOCAL_STORAGE_KEYS,
+  storeDataInLocalStorage,
+} from '../../utilities/localStorage';
+import { v4 as uuidV4 } from 'uuid';
+import { decryptBikData } from '../../utilities/encryption';
+import useIsMobile from '../../hooks/useIsMobile';
+import {
+  TRIGGERED_INTENT_SOURCE,
+  TRIGGERED_INTENT_TYPE,
+  EXIT_INTENT_LEVEL,
+} from '@bikdotai/bik-models/dm/models/analytics';
+import { getTriggeredPageFromUrl } from '../utility';
+import { useTriggeredIntentDetails } from 'hooks/useTriggeredIntentDetails';
+import { CUSTOM_FIELDS } from 'utilities/customFieldTypeMapping';
+import { LEAD_GENERATION_CHANNELS } from '../../types/customFields';
+
+const ExitIntentHook = React.lazy(() => import('../ExitIntentHook'));
+
+export interface ISTW extends WidgetSchema {
+  id: string;
+  widgetCustomisation: ISTWWidgetCustomisation;
+  storeWidgetConfig: IPageConfigProcessed;
+  environment: string;
+  preview?: boolean;
+  templateName?: WIDGET_NAME;
+  isMobile?: boolean;
+  countryCode?: string;
+  previewLanguage?: ISO_CODES_VALUES;
+}
+
+let isModalOpened = false;
+const STW = (props: ISTW) => {
+  const { widgetCustomisation, info, environment, leadGeneration, visibility } =
+    props;
+  const { spikesCount } = widgetCustomisation as ISTWWidgetCustomisation;
+  const { mandatoryOption, optionalOptions } =
+    leadGeneration as ISTWWidgetLeadGeneration;
+  const {
+    storeId,
+    templateId,
+    templateName = WIDGET_NAME.STW2,
+  } = info as WidgetInfo;
+  const { triggers } = visibility as ISTWWidgetVisibility;
+  const { fabButtonVisibility, pageScroll } = triggers;
+  const widgetUtils = new WidgetUtils();
+  const viewLimit = (triggers.frequency ? triggers.frequency : 0) / 24;
+  const timeDelay = (triggers.timeDelay ? triggers.timeDelay : 0) * 1000;
+  const playLimit = (triggers.playLimit ? triggers.playLimit : 0) / 24;
+
+  const [showComponents, setShowComponents] = useState({
+    wheel: false,
+    userDetails: false,
+    couponDetails: false,
+    showFab: false,
+  });
+  const [STWJSX, setSTWJSX] = useState<any>();
+  const [error, setError] = useState<string>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isWheelSpinning, setIsWheelSpinning] = useState<boolean>(false);
+  const [session, setSession] = useState<string>();
+  const [sameMobileNumberTooglers, setSameMobileNumberTogglers] = useState<{
+    sameSMSNo: boolean;
+    sameWhatsappNumber: boolean;
+  }>({
+    sameSMSNo: false,
+    sameWhatsappNumber: 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 isMobileDevice = useIsMobile();
+  const { setTriggeredIntentDetails, getTriggeredIntentDetails } =
+    useTriggeredIntentDetails(props.id);
+
+  useEffect(() => {
+    loadSTWOnDemand();
+  }, []);
+
+  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`) && triggers?.hideAfterClaimed) ||
+      (getCookie(`bik-${props.id}-modalopened`) && triggers?.frequency)
+    ) {
+      return;
+    }
+    if (fabButtonVisibility) {
+      setShowComponents({
+        ...showComponents,
+        showFab: fabButtonVisibility,
+      });
+    }
+    launchModalOnTimeDelay();
+    const cleanupScrollListener = launchModalOnScroll();
+
+    return () => {
+      if (cleanupScrollListener) {
+        cleanupScrollListener();
+      }
+    };
+  }, [window.location.href]);
+
+  const loadSTWOnDemand = () => {
+    if (templateName === WIDGET_NAME.STW1) {
+      import('./stw1').then(Component => {
+        setSTWJSX(Component);
+      });
+    } else if (templateName === WIDGET_NAME.STW2) {
+      import('./stw2Pages/stw2').then(Component => {
+        setSTWJSX(Component);
+      });
+    }
+  };
+
+  const launchModalOnTimeDelay = () => {
+    if (
+      timeDelay &&
+      !(getCookie(`bik-${props.id}-spinned`) === 'bikspinned') &&
+      !isModalOpened
+    ) {
+      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 handleScrollEnd = () => {
+      if (
+        getCookie(`bik-${props.id}-spinned`) === 'bikspinned' ||
+        isModalOpened
+      ) {
+        return;
+      }
+      if (
+        !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', handleScrollEnd);
+
+    return () => {
+      window.removeEventListener('scrollend', handleScrollEnd);
+    };
+  };
+
+  const launchModal = () => {
+    isModalOpened = true;
+    cookieClickHandler(
+      `bik-${props.id}-clicked`,
+      'bikview',
+      'WIDGET_CLICKED',
+      1,
+      props.id,
+      environment,
+    );
+    setCookie(`bik-${props.id}-modalopened`, 'bikmodalopened', viewLimit);
+    setShowComponents({ ...showComponents, wheel: true, showFab: false });
+    document.body.style.overflow = 'hidden';
+  };
+
+  const handleExitIntent = (exitIntentType: string) => {
+    if (!isModalOpened) {
+      setTriggeredIntentDetails({
+        triggerSource: TRIGGERED_INTENT_SOURCE.EXIT_INTENT,
+        triggerType: exitIntentType,
+        triggeredPage: getTriggeredPageFromUrl(window.location.href),
+        exitIntentLevel:
+          triggers?.showExitIntentOn ?? EXIT_INTENT_LEVEL.WEBPAGE,
+      });
+      launchModal();
+    }
+  };
+
+  // Only render exit intent node if exitIntent trigger is enabled
+  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;
+    }
+  };
+
+  const onSpinHandle = async () => {
+    if (isWheelSpinning) {
+      return;
+    }
+
+    const style = templateName === WIDGET_NAME.STW1 ? STWStyle : STW2Style;
+    let container = document.getElementsByClassName(
+      style.bikContainerSpinner,
+    )[0];
+    if (getCookie(`bik-${props.id}-spinned`) === 'bikspinned') {
+      const header = document.getElementById(style.bikHeader);
+      header.innerHTML = `Sorry, you are out of spin! come back later`;
+      const subheader = document.getElementById(style.bikSubheader);
+      subheader.innerHTML = `Since you have spined now, please come back after some time`;
+      return;
+    }
+
+    setIsWheelSpinning(true);
+
+    const number = 360 * 7;
+    setCookie(`bik-${props.id}-spinned`, 'bikspinned', playLimit);
+    container.style.transitionDuration = '5s';
+    container.style.transform = 'rotate(' + number + 'deg)';
+
+    try {
+      return await getWinningSector(container);
+    } finally {
+      setTimeout(() => {
+        setIsWheelSpinning(false);
+      }, 6000);
+    }
+  };
+
+  const getWinningSector = async container => {
+    const uuid = uuidV4();
+    setSession(uuid);
+    const response = await fetch(
+      `${environment}/publicApiFunctions-fetchProbabilityIndex`,
+      {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          widgetId: props.id,
+          session: uuid,
+        }),
+      },
+    );
+    const responseJson = await response.json();
+
+    if (templateName === WIDGET_NAME.STW1) {
+      processRotationValueSTW1(container, responseJson.winningSector);
+    } else {
+      processRotationValueSTW2(container, responseJson.winningSector);
+    }
+    return true;
+  };
+
+  const processRotationValueSTW1 = (container, winningSector) => {
+    const rotationValues = generateRotationValues(
+      spikesCount,
+      templateName,
+    ) as any[];
+    let finalSectorTemp = winningSector + 1;
+    let random = null;
+    let number = 360 * 7;
+    if (finalSectorTemp === 1) {
+      random =
+        360 -
+        Math.floor(
+          Math.random() *
+            (rotationValues[winningSector].maxDegree -
+              rotationValues[winningSector].minDegree +
+              1),
+        );
+    } else if (finalSectorTemp > 1 && finalSectorTemp <= spikesCount / 2 + 1) {
+      random =
+        360 -
+        rotationValues[winningSector].minDegree -
+        Math.floor(
+          Math.random() *
+            (rotationValues[winningSector].maxDegree -
+              rotationValues[winningSector].minDegree +
+              1),
+        );
+    } else {
+      random =
+        Math.floor(
+          Math.random() *
+            (rotationValues[winningSector].maxDegree -
+              rotationValues[winningSector].minDegree +
+              1),
+        ) + Math.abs(360 - rotationValues[winningSector].maxDegree);
+    }
+    number = random + number;
+    container.style.transform = 'rotate(' + number + 'deg)';
+    valueGenerator();
+  };
+
+  const processRotationValueSTW2 = (container, winningSector) => {
+    const rotationValues: any[] = generateRotationValues(
+      spikesCount,
+      templateName,
+    ) as any[];
+    let finalSector = winningSector + 1;
+    let random = null;
+    let idx = rotationValues.findIndex(el => el.value === finalSector);
+    if (document.body.clientWidth > 450) {
+      if (finalSector >= spikesCount / 2 && finalSector <= spikesCount - 1) {
+        random =
+          180 +
+          rotationValues[idx].minDegree -
+          180 +
+          Math.floor(
+            Math.random() *
+              (rotationValues[idx].maxDegree -
+                rotationValues[idx].minDegree +
+                1),
+          );
+      } else {
+        random =
+          rotationValues[idx].minDegree +
+          Math.floor(
+            Math.random() *
+              (rotationValues[idx].maxDegree -
+                rotationValues[idx].minDegree +
+                1),
+          );
+      }
+    } else {
+      if (finalSector === 1) {
+        random =
+          360 -
+          Math.floor(
+            Math.random() *
+              (rotationValues[winningSector].maxDegree -
+                rotationValues[winningSector].minDegree +
+                1),
+          );
+      } else if (finalSector > 1 && finalSector <= spikesCount + 1) {
+        random =
+          360 -
+          rotationValues[winningSector].minDegree -
+          Math.floor(
+            Math.random() *
+              (rotationValues[winningSector].maxDegree -
+                rotationValues[winningSector].minDegree +
+                1),
+          );
+      } else {
+        random =
+          Math.floor(
+            Math.random() *
+              (rotationValues[winningSector].maxDegree -
+                rotationValues[winningSector].minDegree +
+                1),
+          ) + Math.abs(360 - rotationValues[winningSector].maxDegree);
+      }
+    }
+    let number = 360 * 7;
+    number = random + number;
+    container.style.transform = 'rotate(' + number + 'deg)';
+    valueGenerator();
+  };
+
+  const valueGenerator = () => {
+    setTimeout(() => {
+      setShowComponents({ ...showComponents, wheel: false, userDetails: true });
+    }, 6000);
+  };
+
+  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));
+      setError(
+        `Sorry, You already claimed the coupon code "${decryptedData.code}"`,
+      );
+      setIsLoading(false);
+      return;
+    }
+
+    const triggeredIntentDetails = getTriggeredIntentDetails();
+
+    const data: IPayloadFetchCouponCode = {
+      storeId: storeId,
+      widgetId: props.id,
+      primaryInfo: primaryInfo,
+      secondaryInfo: secondaryInfo,
+      templateId: templateId,
+      session: session,
+      triggeredIntentDetails,
+    };
+    setIsLoading(true);
+    const response: any = await fetchCouponCode(data, environment);
+    setIsLoading(false);
+    if (response.status === 404) {
+      setSession(uuidV4());
+      if (response.error == 'Customer already exist!') {
+        setError('Sorry, You already claimed the prize.');
+      } else {
+        setError(response.error);
+      }
+    }
+    if (response.status === 403) {
+      setSession(uuidV4());
+      setError('Session expired! Please try again.');
+    }
+    if (response.code && response.description) {
+      storeDataInLocalStorage(
+        LOCAL_STORAGE_KEYS.BIK_PHONE_NUMBER,
+        primaryPhoneNumber,
+      );
+      storeDataInLocalStorage(LOCAL_STORAGE_KEYS.BIK_EMAIL, emailId);
+      if (triggers.hideAfterClaimed) {
+        setCookie(`bik-${props.id}-claimed`, response.code, 24820);
+      }
+      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,
+        );
+      }
+      setShowComponents({
+        ...showComponents,
+        wheel: false,
+        userDetails: false,
+        couponDetails: true,
+      });
+    }
+  };
+
+  const fabStyle: IFab = {
+    icon: <Send color={props.widgetCustomisation?.iconColor} />,
+    onClick() {
+      setTriggeredIntentDetails({
+        triggerSource: TRIGGERED_INTENT_SOURCE.FAB,
+        triggerType: TRIGGERED_INTENT_TYPE.FAB_CLICK,
+        triggeredPage: getTriggeredPageFromUrl(window.location.href),
+      });
+      launchModal();
+    },
+    isMobile: props.isMobile,
+    preview: props.preview ?? false,
+    widgetCustomisation: {
+      iconColor: props.widgetCustomisation?.iconColor,
+      fabPositioner: props.widgetCustomisation?.fabPositioner,
+      fabBackgroundColor: props.widgetCustomisation?.fabBackgroundColor,
+      fabIconLink: props.widgetCustomisation?.fabIconLink,
+      fabTransform: props.widgetCustomisation?.fabTransform,
+      fabLottie: props.widgetCustomisation?.fabLottie,
+      fabAnimationRun: props.widgetCustomisation?.fabAnimationRun,
+      fabImage: props.widgetCustomisation?.fabImage,
+      fabWebSize: props.widgetCustomisation?.fabWebSize,
+      fabMobileSize: props.widgetCustomisation?.fabMobileSize,
+    },
+  };
+
+  const onCloseHandle = (
+    component: 'wheel' | 'userDetails' | 'couponDetails',
+  ) => {
+    setShowComponents({
+      ...showComponents,
+      [component]: false,
+      showFab:
+        showComponents.couponDetails === true
+          ? !!(
+              triggers?.fabButtonVisibility &&
+              !getCookie(`bik-${props.id}-claimed`) &&
+              triggers?.hideAfterClaimed &&
+              !getCookie(`bik-${props.id}-modalopened`) &&
+              triggers?.frequency
+            )
+          : triggers?.fabButtonVisibility,
+    });
+    isModalOpened = !viewLimit;
+    document.body.style.overflow = 'unset';
+    setError(null);
+  };
+  return (
+    <>
+      {getExitIntentHook()}
+      {showComponents.showFab && (
+        <Fab {...fabStyle} id={`bik-stw-${props.id}-fab`} />
+      )}
+      {(showComponents.wheel ||
+        showComponents.couponDetails ||
+        showComponents.userDetails) &&
+      STWJSX ? (
+        <STWJSX.default
+          {...props}
+          onSpinHandle={onSpinHandle}
+          onCloseHandle={onCloseHandle}
+          claimPrizeHandle={claimPrizeHandle}
+          error={error}
+          isLoading={isLoading}
+          setSameMobileNumberTogglers={setSameMobileNumberTogglers}
+          sameMobileNumberTogglers={sameMobileNumberTooglers}
+          couponCodeDetails={couponCodeDetails}
+          showComponents={showComponents}
+          templateName={templateName}
+        />
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+export default STW;
+
+if (process.env.NODE_ENV !== 'development') {
+  includeMe(STW);
+}