@bikdotai/bik-widgets 1.0.0 → 1.0.2

package/src/widgets/DirectReward/config.ts

@@ -1,186 +0,0 @@
-import { IDRTemplate } from './index';
-import { FAB_POSITION } from '../../utilities/widgetUtils';
-
-export const directRewardConfig: IDRTemplate = {
-  id: 'TtEgsNeYy02d9NOSlp8F',
-  environment: 'https://bikapi.bikayi.app/dm',
-  storeWidgetConfig: {
-    '/': [
-      {
-        widgetId: 'TtEgsNeYy02d9NOSlp8F',
-        fabPosition: 'POP_UP',
-      },
-    ],
-  },
-  createdAt: 1682521847,
-  leadGeneration: {
-    mandatoryOption: {
-      isEmail: true,
-      isSms: false,
-      isWhatsapp: true,
-      customFields: [
-        {
-          id: 6634,
-          storeId: 'p60HYv5wjgQaOrPdqT5NjbpkroD2',
-          fieldName: 'Widget Dropdown',
-          aliasName: 'widgetdropdown',
-          dataType: 'string',
-          fieldType: 'number',
-          options: ['24', 'ewr', 'rwer'],
-          isVisible: true,
-          createdAt: '2025-06-17T09:30:17.321Z',
-          updatedAt: '2025-06-17T09:30:17.321Z',
-        },
-      ],
-    },
-    optionalOptions: {
-      isEmail: false,
-      isSms: false,
-      isWhatsapp: false,
-      customFields: [
-        {
-          id: 6502,
-          storeId: 'p60HYv5wjgQaOrPdqT5NjbpkroD2',
-          fieldName: 'What is the reason',
-          aliasName: 'whatisthereason',
-          dataType: 'string',
-          fieldType: 'multiselect_dropdown',
-          options: ['misplaced order', 'damaged product', 'new product'],
-          isVisible: true,
-          createdAt: '2025-05-27T04:59:04.179Z',
-          updatedAt: '2025-06-16T18:59:15.862Z',
-        },
-      ],
-    },
-    enableConsentPolicies: false,
-    privacyPolicyURL: '',
-  },
-  widgetCustomisation: {
-    skipLabel: true,
-    fabPosition: 'POP_UP',
-    fabBackgroundColor: '#000000',
-    fabMobileSize: 50,
-    fabWebSize: 50,
-    iconColor: '#ffffff',
-    fabIconLink:
-      'https://storage.googleapis.com/bik-widget-mfe/bap%2Ffab-assets%2Ficons%2Fbik%2Fgift.svg',
-    widgetName: 'Lead Generator cym8',
-    cardTheme: '#F2F9FF',
-    backgroundType: 'colour',
-    backgroundColour: '#F2F9FF',
-    fontFamily: {
-      link: 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap',
-      name: 'Montserrat',
-    },
-    fontColour: '#000000',
-    playScreenImageDesktop:
-      'https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/b4abf188-cefe-400d-bacf-3983c571fbe2%23image_p60HYv5wjgQaOrPdqT5NjbpkroD2_odUvf.jpg?alt=media&token=19726742-2800-4476-94ba-6bfb63c5b9eb',
-    playScreenImageMobile:
-      'https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/d41b2ddf-07be-4cf7-96c5-b49369e3fae4%23image_p60HYv5wjgQaOrPdqT5NjbpkroD2_CfNPh.jpg?alt=media&token=798c9caf-cf41-498f-a43f-208f430d9049',
-    playScreenTitle: '<p><strong>Hey good looking!</strong></p>',
-    playScreenTitleSize: 26,
-    playScreenSubTitle:
-      '<p>Explore personalized fashion with our curated subscription service<p>',
-    playScreenSubTitleSize: 16,
-    playScreenFormDescriptionSize: 12,
-    playScreenButtonText: 'Subscribe',
-    playScreenButtonColour: '#000000',
-    postPlayScreenImageDesktop:
-      'https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/b4abf188-cefe-400d-bacf-3983c571fbe2%23image_p60HYv5wjgQaOrPdqT5NjbpkroD2_odUvf.jpg?alt=media&token=19726742-2800-4476-94ba-6bfb63c5b9eb',
-    postPlayScreenImageMobile:
-      'https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/d41b2ddf-07be-4cf7-96c5-b49369e3fae4%23image_p60HYv5wjgQaOrPdqT5NjbpkroD2_CfNPh.jpg?alt=media&token=798c9caf-cf41-498f-a43f-208f430d9049',
-    playScreenButtonTextColour: '#ffffff',
-    postPlayScreenTitle: '<p><strong>Thank you for subscribing!</strong></p>',
-    postPlayScreenTitleIcon:
-      'https://storage.googleapis.com/bik-widget-mfe/bap/post-play-screen-assets/images/bik/checked.png',
-    postPlayScreenTitleSize: 26,
-    postPlayScreenSubTitle:
-      '<p>For subscribing! Get ready to experience a world of fashion and style with us.</p>',
-    postPlayScreenSubTitleSize: 16,
-    isPostPlayScreenButtonEnabled: false,
-    postPlayScreenButtonText: 'Explore now!',
-    postPlayScreenButtonColour: '#000000',
-    postPlayScreenButtonRedirection: 'https://bik.ai',
-    postPlayScreenButtonTextColour: '#ffffff',
-    fabPositioner: {
-      bottom: '30px',
-      right: '30px',
-    },
-    multiLingualConfigurations: {
-      ENGLISH: {
-        playScreenTitle: '<p><strong>Hey good looking!</strong></p>',
-        playScreenSubTitle:
-          '<p>Explore personalized fashion with our curated subscription service<p>',
-        playScreenButtonText: 'Subscribe',
-        postPlayScreenTitle:
-          '<p><strong>Thank you for subscribing!</strong></p>',
-        postPlayScreenSubTitle:
-          '<p>For subscribing! Get ready to experience a world of fashion and style with us.</p>',
-        postPlayScreenButtonText: 'Explore now!',
-      },
-      ARABIC: {
-        playScreenTitle: '<p><strong>مرحبا جميل!</strong></p>',
-        playScreenSubTitle:
-          '%3Cp%3E%D8%A7%D8%B3%D8%AA%D9%83%D8%B4%D9%81%20%D8%A7%D9%84%D9%85%D9%88%D8%B6%D8%A9%20%D8%A7%D9%84%D8%B4%D8%AE%D8%B5%D9%8A%D8%A9%20%D9%85%D8%B9%20%D8%AE%D8%AF%D9%85%D8%A9%20%D8%A7%D9%84%D8%A7%D8%B4%D8%AA%D8%B1%D8%A7%D9%83%20%D8%A7%D9%84%D9%85%D8%AE%D8%B5%D8%B5%D8%A9%20%D9%84%D8%AF%D9%8A%D9%86%D8%A7%3C%2Fp%3E',
-        playScreenButtonText: 'اشترك',
-        postPlayScreenTitle: '<p><strong>شكرا للاشتراك!</strong></p>',
-        postPlayScreenSubTitle:
-          '<p>للاشتراك! استعد لتجربة عالم الموضة والأناقة معنا.</p>',
-        postPlayScreenButtonText: 'استكشف الآن!',
-      },
-      FRENCH: {
-        playScreenTitle: '<p><strong>Salut beau gosse!</strong></p>',
-        playScreenSubTitle:
-          '<p>Explorez la mode personnalisée avec notre service d’abonnement soigneusement sélectionné<p>',
-        playScreenButtonText: 'Souscrire',
-        postPlayScreenTitle:
-          '<p><strong>Merci de vous être abonné!</strong></p>',
-        postPlayScreenSubTitle:
-          '<p>Pour vous être abonné! Préparez-vous à vivre un monde de mode et de style avec nous.</p>',
-        postPlayScreenButtonText: 'Explorer maintenant!',
-      },
-      MALAY: {
-        playScreenTitle: '<p><strong>Hey good looking!</strong></p>',
-        playScreenSubTitle:
-          '<p>Explore personalized fashion with our curated subscription service<p>',
-        playScreenButtonText: 'Subscribe',
-        postPlayScreenTitle:
-          '<p><strong>Thank you for subscribing!</strong></p>',
-        postPlayScreenSubTitle:
-          '<p>For subscribing! Get ready to experience a world of fashion and style with us.</p>',
-        postPlayScreenButtonText: 'Explore now!',
-      },
-    },
-    previewLanguage: 'en',
-  },
-  info: {
-    scriptPath: 'bap/widget-direct-reward/directReward.js',
-    widgetTypeId: 'lCcPfO2RuooXpBGgZSs0',
-    templateName: 'Lead Generator',
-    infra: '2.0',
-    storeId: 'C2fptDtyEbMz5cgIT5AqBaEIxB53',
-    templateId: '7fM9X24TY9Bk9f7fIG9C',
-    delete: false,
-    firebaseScriptId: '',
-    scriptId: null,
-    liveSince: '26/04/2023',
-    status: 'LIVE',
-  },
-  visibility: {
-    visiblePages: ['/*'],
-    triggers: {
-      fabButtonVisibility: false,
-      hasFAbButton: false,
-      isPlayable: false,
-      // pageScroll: 0,
-      viewLimit: null,
-      playLimit: null,
-      timeDelay: null,
-      frequency: null,
-      hideAfterClaimed: false,
-      exitIntentTimeDelay: 1,
-      exitIntentFastUpScroll: true,
-      showExitIntentOn: 'webpage',
-    } as any,
-  },
-};

package/src/widgets/DirectReward/directReward.tsx

@@ -1,350 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { cookieClickHandler } from '../STW/utility';
-import { IDRTemplate } from '.';
-import CouponDetails from './components/couponDetails';
-import UserDetails from './components/userDetails';
-import CrossIconMobile from '../../icons/crossIconMobile';
-import CrossIconDesktop from '../../icons/crossIconDesktop';
-import useIsMobile from '../../hooks/useIsMobile';
-import {
-  BACKGROUND_TYPE,
-  IDRWidgetCustomisation,
-  LANGUAGE_VALUES,
-  LANGUAGE_ISO_CODES,
-} from '@bikdotai/bik-models/dm';
-import Fab, { IFab } from '../../components/Fab';
-import Send from '../../components/Icons/Send';
-import { ComponentStyleMap, injectFontLink } from '../../utilities/styleUtils';
-import { LanguageUtils } from 'utilities/languageUtilities';
-import { fetchPositionCss } from '../CaptivateBanner/utils';
-import { useTriggeredIntentDetails } from '../../hooks/useTriggeredIntentDetails';
-import { getTriggeredPageFromUrl } from '../utility';
-import {
-  TRIGGERED_INTENT_SOURCE,
-  TRIGGERED_INTENT_TYPE,
-} from '@bikdotai/bik-models/dm/models/analytics';
-
-const DirectRewardTemplate = (props: IDRTemplate) => {
-  const {
-    preview,
-    showComponents,
-    onCloseHandle,
-    widgetCustomisation,
-    error,
-    isLoading,
-    isMobile,
-    claimPrizeHandle,
-    visibility,
-    leadGeneration,
-    discountCodeDetails,
-    templateName,
-    containerReference,
-    setShowComponents,
-    environment,
-  } = props;
-  const [currentStyle, setCurrentStyle] = useState<any>(null);
-  const languageUtils = new LanguageUtils();
-  const [widgetLanguage, setWidgetLanguage] = useState(LANGUAGE_VALUES.ENGLISH);
-  const isMobileDevice = useIsMobile();
-  const { setTriggeredIntentDetails } = useTriggeredIntentDetails(props.id);
-  const multiLingualData =
-    widgetCustomisation?.multiLingualConfigurations?.[widgetLanguage];
-
-  useEffect(() => {
-    if (widgetCustomisation.fontFamily) {
-      injectFontLink([widgetCustomisation.fontFamily?.link]);
-    }
-  }, [widgetCustomisation.fontFamily]);
-
-  let imageUrl: string;
-  if (preview) {
-    if (isMobile) {
-      imageUrl = showComponents.userDetails
-        ? (multiLingualData?.playScreenImageMobile ??
-          (Object.keys(multiLingualData ?? {}).includes('playScreenImageMobile')
-            ? ''
-            : widgetCustomisation.playScreenImageMobile))
-        : (multiLingualData?.postPlayScreenImageMobile ??
-          (Object.keys(multiLingualData ?? {}).includes(
-            'postPlayScreenImageMobile',
-          )
-            ? ''
-            : widgetCustomisation.postPlayScreenImageMobile));
-    } else {
-      imageUrl = showComponents.userDetails
-        ? (multiLingualData?.playScreenImageDesktop ??
-          (Object.keys(multiLingualData ?? {}).includes(
-            'playScreenImageDesktop',
-          )
-            ? ''
-            : widgetCustomisation.playScreenImageDesktop))
-        : (multiLingualData?.postPlayScreenImageDesktop ??
-          (Object.keys(multiLingualData ?? {}).includes(
-            'postPlayScreenImageDesktop',
-          )
-            ? ''
-            : widgetCustomisation.postPlayScreenImageDesktop));
-    }
-  } else {
-    if (isMobileDevice) {
-      imageUrl = showComponents.userDetails
-        ? (multiLingualData?.playScreenImageMobile ??
-          (Object.keys(multiLingualData ?? {}).includes('playScreenImageMobile')
-            ? ''
-            : widgetCustomisation.playScreenImageMobile))
-        : (multiLingualData?.postPlayScreenImageMobile ??
-          (Object.keys(multiLingualData ?? {}).includes(
-            'postPlayScreenImageMobile',
-          )
-            ? ''
-            : widgetCustomisation.postPlayScreenImageMobile));
-    } else {
-      imageUrl = showComponents.userDetails
-        ? (multiLingualData?.playScreenImageDesktop ??
-          (Object.keys(multiLingualData ?? {}).includes(
-            'playScreenImageDesktop',
-          )
-            ? ''
-            : widgetCustomisation.playScreenImageDesktop))
-        : (multiLingualData?.postPlayScreenImageDesktop ??
-          (Object.keys(multiLingualData ?? {}).includes(
-            'postPlayScreenImageDesktop',
-          )
-            ? ''
-            : widgetCustomisation.postPlayScreenImageDesktop));
-    }
-  }
-
-  useEffect(() => {
-    if (preview && showComponents) {
-      if (showComponents.userDetails) {
-        if (isMobile) {
-          ComponentStyleMap[templateName]?.userInputPreviewMobile.then(
-            async style => {
-              setCurrentStyle((await style()).default);
-            },
-          );
-        } else {
-          ComponentStyleMap[templateName]?.userInputPreviewDesktop.then(
-            async style => {
-              setCurrentStyle((await style()).default);
-            },
-          );
-        }
-      } else if (showComponents.couponDetails) {
-        if (isMobile) {
-          ComponentStyleMap[templateName]?.thankyouPreviewMobile.then(
-            async style => {
-              setCurrentStyle((await style()).default);
-            },
-          );
-        } else {
-          ComponentStyleMap[templateName]?.thankyouPreviewDesktop.then(
-            async style => {
-              setCurrentStyle((await style()).default);
-            },
-          );
-        }
-      }
-    } else {
-      ComponentStyleMap[templateName]?.globalStyle.then(async style => {
-        setCurrentStyle((await style()).default);
-      });
-    }
-  }, [preview, isMobile]);
-
-  useEffect(() => {
-    const isBikURL =
-      window.location.href?.includes('https://dashboard.bik.ai/') ||
-      window.location.href?.includes('https://staging.dashboard.bik.ai/');
-    const previewLanguage = props?.widgetCustomisation?.previewLanguage;
-    const storeLanguage =
-      (isBikURL ? previewLanguage : window?.Shopify?.locale) ??
-      previewLanguage ??
-      LANGUAGE_ISO_CODES.EN;
-    setWidgetLanguage(languageUtils.getStoreLanguage(storeLanguage));
-  }, [window.location.href, props?.widgetCustomisation?.previewLanguage]);
-
-  const fabStyle: IFab = {
-    info: undefined,
-    visibility: undefined,
-    icon: <Send color={props.widgetCustomisation?.iconColor} />,
-    onClick() {
-      cookieClickHandler(
-        `bik-${props.id}-clicked`,
-        'bikclick',
-        'WIDGET_CLICKED',
-        1,
-        props.id,
-        props.environment,
-      );
-      setTriggeredIntentDetails({
-        triggerSource: TRIGGERED_INTENT_SOURCE.FAB,
-        triggerType: TRIGGERED_INTENT_TYPE.FAB_CLICK,
-        triggeredPage: getTriggeredPageFromUrl(window.location.href),
-      });
-      setShowComponents({
-        userDetails: true,
-        floatingButton: false,
-        couponDetails: false,
-      });
-    },
-    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,
-    } as any,
-  };
-
-  if (!currentStyle) {
-    return <></>;
-  }
-
-  return (
-    <>
-      {(showComponents.userDetails || showComponents.couponDetails) && (
-        <div className={currentStyle.bikDirectReward}>
-          <div className={currentStyle.overlay}></div>
-          <div
-            className={currentStyle.bikDRParentContainer}
-            ref={containerReference}
-            style={{
-              overflow: isMobile ? 'visible' : 'auto',
-              width: isMobile || isMobileDevice || imageUrl ? '100%' : '40%',
-              ...fetchPositionCss(
-                props.widgetCustomisation,
-                isMobile || isMobileDevice,
-                true,
-              ),
-            }}
-          >
-            <div
-              className={
-                currentStyle.bikDRMainContainer +
-                ' ' +
-                currentStyle.scaleUpEffect
-              }
-              id={currentStyle.bikDirectRewardMainContainer}
-            >
-              <div
-                className={currentStyle.bikDRImageDiv}
-                style={{
-                  width: imageUrl
-                    ? '40%'
-                    : isMobile || isMobileDevice
-                      ? '100%'
-                      : '0',
-                }}
-              >
-                <div
-                  className={currentStyle.bikDRCloseBtnWrapperMobile}
-                  onClick={onCloseHandle}
-                >
-                  <CrossIconMobile />
-                </div>
-                {imageUrl && (
-                  <img
-                    className={currentStyle.bikDRImageContainer}
-                    src={imageUrl}
-                    onError={e => {
-                      (e.target as HTMLImageElement).onerror = null;
-                      (e.target as HTMLImageElement).src =
-                        'https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F509f5b9f-4b8d-455b-af85-b97b0d4b41d7?alt=media&token=858d569b-a3b5-46f9-9bb9-b88261b0bcd5';
-                    }}
-                  />
-                )}
-              </div>
-              <div
-                className={currentStyle.bikDRContentContainer}
-                id={currentStyle.directRewardClaimRewardContainer}
-                style={
-                  widgetCustomisation.backgroundType === BACKGROUND_TYPE.IMAGE
-                    ? {
-                        background: `url(${isMobile || isMobileDevice ? widgetCustomisation.backgroundImageMobile : widgetCustomisation.backgroundImageDesktop})`,
-                        backgroundSize: '100% 100%',
-                        backgroundRepeat: 'no-repeat',
-                        backgroundPosition: 'center',
-                        width:
-                          isMobile || isMobileDevice || !imageUrl
-                            ? '100%'
-                            : '60%',
-                      }
-                    : {
-                        backgroundColor: widgetCustomisation.backgroundColour,
-                        fontFamily: widgetCustomisation.fontFamily.name,
-                        width:
-                          isMobile || isMobileDevice || !imageUrl
-                            ? '100%'
-                            : '60%',
-                      }
-                }
-              >
-                <div
-                  id={currentStyle.directRewardCloseBtnWrapper}
-                  onClick={onCloseHandle}
-                >
-                  <CrossIconDesktop color={widgetCustomisation?.fontColour} />
-                </div>
-                {showComponents.userDetails ? (
-                  <UserDetails
-                    widgetCustomisation={
-                      widgetCustomisation as IDRWidgetCustomisation
-                    }
-                    visibility={visibility}
-                    leadGeneration={leadGeneration}
-                    error={error}
-                    isLoading={isLoading}
-                    claimPrizeHandle={claimPrizeHandle}
-                    preview={preview}
-                    templateName={templateName}
-                    isMobile={isMobile}
-                    isMobileDevice={isMobileDevice}
-                    id={props.id}
-                    countryCode={props.countryCode}
-                    environment={environment}
-                    setShowComponents={setShowComponents}
-                    widgetLanguage={widgetLanguage}
-                  />
-                ) : (
-                  <></>
-                )}
-                {showComponents.couponDetails ? (
-                  <CouponDetails
-                    discountCodeDetails={discountCodeDetails}
-                    preview={preview}
-                    widgetCustomisation={widgetCustomisation}
-                    templateName={templateName}
-                    isMobile={isMobile}
-                    id={props.id}
-                    environment={environment}
-                    setShowComponents={setShowComponents}
-                    visibility={visibility}
-                    widgetLanguage={widgetLanguage}
-                  />
-                ) : (
-                  <></>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-      {showComponents.floatingButton && (
-        <Fab {...fabStyle} id={`bik-stw-${props.id}-fab`} />
-      )}
-    </>
-  );
-};
-
-export default DirectRewardTemplate;