@bikdotai/bik-widgets 1.0.0 → 1.0.2

package/src/widgets/STW/index.tsx

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