@bikdotai/bik-widgets 1.0.0

package/src/widgets/DirectReward/config.ts

@@ -0,0 +1,186 @@
+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

@@ -0,0 +1,350 @@
+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;