@bikdotai/bik-widgets 1.0.0

package/src/widgets/ShopifyForm/shopifyForm.tsx

@@ -0,0 +1,445 @@
+import React, { LegacyRef, useEffect, useState } from 'react';
+import { ComponentStyleMap, injectFontLink } from '../../utilities/styleUtils';
+import CloseIcon from '../../assets/svg/Close';
+import { ShopifyWidgetProps } from './index';
+import useIsMobile from '../../hooks/useIsMobile';
+import {
+  fetchCloseButtonPositioner,
+  fetchContainerWidth,
+  fetchPositionCss,
+} from '../CaptivateBanner/utils';
+import { decodeTextHelper } from '../utility';
+import UserDetailsV2 from '../../components/UserDetailsV2/userDetailsV2';
+import { LEAD_GENERATION_CHANNELS, UserFields } from '../../types/customFields';
+import { addLead, IChannelInfo, IPayloadFetchCouponCode } from '../STW/api';
+import {
+  LOCAL_STORAGE_KEYS,
+  storeDataInLocalStorage,
+} from '../../utilities/localStorage';
+import { STWContext } from 'widgets/STW/context';
+import { LanguageUtils } from 'utilities/languageUtilities';
+import { LANGUAGE_VALUES, LANGUAGE_ISO_CODES } from '@bikdotai/bik-models/dm';
+import { CUSTOM_FIELDS } from 'utilities/customFieldTypeMapping';
+
+interface PopupI extends ShopifyWidgetProps {
+  isVisible: boolean;
+  onClose: () => void;
+  popupReference?: LegacyRef<HTMLDivElement>;
+  selectedScreen: SCREENS;
+  setSelectedScreen: React.Dispatch<React.SetStateAction<SCREENS>>;
+}
+
+const BACKUP_IMAGE =
+  'https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2Fbb0816b9-ba06-4789-aca5-2a4d10560878?alt=media&token=996dc6bd-b3e2-4bea-bbac-41e9c0845578';
+
+export enum SCREENS {
+  LEAD_SCREEN = 'leadScreen',
+  POST_LEAD_SCREEN = 'postLeadScreen',
+}
+
+const Popup: React.FC<PopupI> = props => {
+  const [styles, setStyles] = useState<any>();
+  const [error, setError] = useState<string>();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const isMobileDevice = useIsMobile();
+  const isMobile = props.preview ? props.isMobile : isMobileDevice;
+  const languageUtils = new LanguageUtils();
+  const [widgetLanguage, setWidgetLanguage] = useState(LANGUAGE_VALUES.ENGLISH);
+  const multiLingualData =
+    props?.widgetCustomisation?.multiLingualConfigurations?.[widgetLanguage];
+
+  useEffect(() => {
+    if (props.widgetCustomisation.fontFamily) {
+      injectFontLink([props.widgetCustomisation.fontFamily?.link]);
+    }
+  }, [props.widgetCustomisation.fontFamily]);
+
+  useEffect(() => {
+    if (!props.preview) {
+      ComponentStyleMap[props.templateName]?.globalStyle.then(
+        async (_style: any) => {
+          setStyles((await _style()).default);
+        },
+      );
+    } else {
+      if (props.isMobile) {
+        ComponentStyleMap[props.templateName]?.previewMobile.then(
+          async (_style: any) => {
+            setStyles((await _style()).default);
+          },
+        );
+      } else {
+        ComponentStyleMap[props.templateName]?.previewDesktop.then(
+          async (_style: any) => {
+            setStyles((await _style()).default);
+          },
+        );
+      }
+    }
+  }, []);
+
+  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]);
+
+  if (!styles) {
+    return <></>;
+  }
+
+  const onFormSubmit = async (userInputs: UserFields) => {
+    let primaryPhoneNumber: string,
+      secondaryPhoneNumber: string,
+      emailId: string;
+    const primaryInfo: IChannelInfo[] = [];
+    const secondaryInfo: IChannelInfo[] = [];
+
+    // Process mandatory fields
+    Object.keys(props.leadGeneration.mandatoryOption).map(key => {
+      if (props.leadGeneration.mandatoryOption[key]) {
+        if (key === CUSTOM_FIELDS) {
+          const customFields = userInputs[key];
+          Object.keys(customFields).forEach(fieldKey => {
+            const fieldId = Number(fieldKey);
+            const fieldValue = customFields[fieldKey];
+            if (
+              props.leadGeneration.mandatoryOption.customFields &&
+              Array.isArray(
+                props.leadGeneration.mandatoryOption.customFields,
+              ) &&
+              props.leadGeneration.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,
+          });
+        }
+      }
+    });
+
+    Object.keys(props.leadGeneration.optionalOptions).map(key => {
+      if (props.leadGeneration.optionalOptions[key]) {
+        if (key === CUSTOM_FIELDS) {
+          const customFields = userInputs[key];
+          Object.keys(customFields).forEach(fieldKey => {
+            const fieldId = Number(fieldKey);
+            const fieldValue = customFields[fieldKey];
+            if (
+              props.leadGeneration.optionalOptions.customFields &&
+              Array.isArray(
+                props.leadGeneration.optionalOptions.customFields,
+              ) &&
+              props.leadGeneration.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,
+          });
+        }
+      }
+    });
+
+    // Get variant details
+    let variantDetails: any[];
+    const variants: any[] = (window as any)?.bikWidgetContext?.currentProduct
+      ?.variants;
+    const currentVariantId =
+      new URLSearchParams(window.location.search).get('variant') ??
+      variants?.[0]?.id;
+    if (variants && variants.length) {
+      variantDetails = (
+        window as any
+      )?.bikWidgetContext?.currentProduct?.variants.filter(
+        (variant: any) => `${variant.id}` === `${currentVariantId}`,
+      );
+    }
+
+    // Prepare data for API call
+    const data: IPayloadFetchCouponCode = {
+      storeId: props.storeId,
+      widgetId: props.id,
+      primaryInfo: primaryInfo,
+      secondaryInfo: secondaryInfo,
+      templateId: props.templateId,
+      productId: (window as any)?.bikWidgetContext?.currentProduct?.id,
+      productName: (window as any)?.bikWidgetContext?.currentProduct?.name,
+    };
+
+    if (variantDetails && variantDetails.length) {
+      data.variantId = variantDetails[0].id;
+      data.variantName = variantDetails[0].title;
+      data.variantPrice = parseFloat(
+        (variantDetails[0].price / 100).toFixed(2),
+      );
+    }
+
+    try {
+      setIsLoading(true);
+      setError('');
+
+      // Store data in local storage
+      storeDataInLocalStorage(
+        LOCAL_STORAGE_KEYS.BIK_PHONE_NUMBER,
+        primaryPhoneNumber,
+      );
+      storeDataInLocalStorage(LOCAL_STORAGE_KEYS.BIK_EMAIL, emailId);
+
+      // Submit the lead
+      await addLead(data, props.environment);
+
+      setIsLoading(false);
+      props.setSelectedScreen(SCREENS.POST_LEAD_SCREEN);
+    } catch (error) {
+      setIsLoading(false);
+      setError('Failed to submit form. Please try again.');
+      console.error('Form submission error:', error);
+    }
+  };
+
+  const onRedirect = () => {
+    window.open(
+      props.widgetCustomisation.postPlayScreenButtonRedirection,
+      '_blank',
+    );
+  };
+
+  const renderLeadScreen = () => {
+    return (
+      <>
+        <div
+          className={styles.popupContainer__title}
+          style={{ color: props?.widgetCustomisation?.fontColour }}
+          dangerouslySetInnerHTML={{
+            __html: decodeTextHelper(
+              multiLingualData?.playScreenTitle ??
+                props.widgetCustomisation.playScreenTitle,
+            ),
+          }}
+        ></div>
+        <div
+          className={styles.popupContainer__subTitle}
+          style={{ color: props?.widgetCustomisation?.fontColour }}
+          dangerouslySetInnerHTML={{
+            __html: decodeTextHelper(
+              multiLingualData?.playScreenSubTitle ??
+                props.widgetCustomisation.playScreenSubTitle,
+            ),
+          }}
+        ></div>
+        <STWContext.Provider
+          value={{
+            preview: props.preview,
+            isMobile: props.isMobile,
+            templateName: props.templateName,
+          }}
+        >
+          <UserDetailsV2
+            countryCode={props.countryCode ?? 'IN'}
+            error={error}
+            isLoading={isLoading}
+            leadGeneration={props.leadGeneration}
+            templateName={props.templateName}
+            widgetCustomisation={props.widgetCustomisation}
+            claimPrizeHandle={onFormSubmit}
+            widgetLanguage={widgetLanguage}
+          />
+        </STWContext.Provider>
+      </>
+    );
+  };
+
+  const renderPostLeadScreen = () => {
+    return (
+      <>
+        {props.widgetCustomisation.postPlayScreenTitleIcon && (
+          <img
+            className={styles.popupContainer__titleIcon}
+            alt=""
+            src={props.widgetCustomisation.postPlayScreenTitleIcon}
+          />
+        )}
+        <div
+          className={styles.popupContainer__title}
+          style={{ color: props?.widgetCustomisation?.fontColour }}
+          dangerouslySetInnerHTML={{
+            __html: decodeTextHelper(
+              multiLingualData?.postPlayScreenTitle ??
+                props.widgetCustomisation.postPlayScreenTitle,
+            ),
+          }}
+        ></div>
+        <div
+          className={styles.popupContainer__subTitle}
+          style={{ color: props?.widgetCustomisation?.fontColour }}
+          dangerouslySetInnerHTML={{
+            __html: decodeTextHelper(
+              multiLingualData?.postPlayScreenSubTitle ??
+                props.widgetCustomisation.postPlayScreenSubTitle,
+            ),
+          }}
+        ></div>
+        {props.widgetCustomisation.isRedirectionButtonEnabled && (
+          <div
+            onClick={onRedirect}
+            style={{
+              backgroundColor:
+                props.widgetCustomisation.postPlayScreenButtonColour,
+              color: props.widgetCustomisation.postPlayScreenButtonTextColour,
+            }}
+            className={styles.popupContainer__button}
+          >
+            {multiLingualData?.postPlayScreenButtonText ??
+              props.widgetCustomisation.postPlayScreenButtonText}
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const renderWidget = () => {
+    return (
+      <div
+        ref={props.popupReference}
+        className={`${styles.popupContainer}`}
+        style={{
+          ...fetchPositionCss(props.widgetCustomisation, isMobile),
+          width: fetchContainerWidth(props.widgetCustomisation, isMobile),
+        }}
+      >
+        <div
+          className={styles.popupContainer__content}
+          style={{
+            backgroundColor:
+              props.widgetCustomisation.backgroundColour ?? '#ffffff',
+            fontFamily: props.widgetCustomisation.fontFamily.name,
+          }}
+        >
+          <div
+            className={styles.popupCloser__button}
+            style={{
+              ...fetchCloseButtonPositioner(
+                props.widgetCustomisation,
+                isMobile,
+                props.preview,
+              ),
+              backgroundColor:
+                props.widgetCustomisation.backgroundColour ?? '#ffffff',
+            }}
+            onClick={props.onClose}
+          >
+            <CloseIcon
+              size="small"
+              colour={props.widgetCustomisation.fontColour}
+            />
+          </div>
+          <img
+            src={
+              (props.selectedScreen === SCREENS.LEAD_SCREEN
+                ? (multiLingualData?.playScreenImage ??
+                  props.widgetCustomisation.playScreenImage)
+                : (multiLingualData?.postPlayScreenImage ??
+                  props.widgetCustomisation.postPlayScreenImage)) ??
+              BACKUP_IMAGE
+            }
+            alt="Popup Image"
+            className={styles.popupContainer__image}
+            onError={e => {
+              (e.target as HTMLImageElement).onerror = null;
+              (e.target as HTMLImageElement).src = BACKUP_IMAGE;
+            }}
+          />
+          <div
+            className={styles.popupContainer__inner_content}
+            style={{
+              justifyContent:
+                props.selectedScreen === SCREENS.POST_LEAD_SCREEN
+                  ? 'center'
+                  : 'flex-start',
+              fontFamily: props.widgetCustomisation.fontFamily.name,
+            }}
+          >
+            {props.selectedScreen === SCREENS.LEAD_SCREEN && renderLeadScreen()}
+            {props.selectedScreen === SCREENS.POST_LEAD_SCREEN &&
+              renderPostLeadScreen()}
+          </div>
+          <div className={styles.popupContainer__poweredBy}>
+            <a
+              href="https://bik.ai/"
+              target="_blank"
+              rel="noreferrer"
+              style={{ color: props?.widgetCustomisation?.fontColour }}
+            >
+              {languageUtils.getPoweredByMessage(widgetLanguage)} Bik
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {!props.preview && (
+        <div className={styles.popupWrapper}>{renderWidget()}</div>
+      )}
+      {props.preview && renderWidget()}
+    </>
+  );
+};
+
+export default Popup;

package/src/widgets/ShopifyForm/style.module.css

@@ -0,0 +1,161 @@
+.popupWrapper {
+  position: fixed;
+  display: block;
+  top: 0;
+  left: 0;
+  z-index: 2147483645;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.popupContainer {
+  width: 380px;
+  position: fixed;
+  z-index: 2147483646;
+  opacity: 1;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+  height: auto;
+}
+
+.popupContainer__content {
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 17px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.popupContainer__content * {
+  font-family: inherit;
+}
+
+.popupContainer__image {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1.56;
+  margin: 0;
+  padding: 0;
+  border-top-left-radius: 17px;
+  border-top-right-radius: 17px;
+}
+
+.popupContainer__inner_content {
+  padding: 16px 30px 0px;
+  min-height: 186px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+}
+
+.popupContainer__title {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 600;
+  text-align: center;
+  font-family: inherit;
+  max-width: 90%;
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.popupContainer__subTitle {
+  font-size: 13px;
+  line-height: 16px;
+  font-weight: 400;
+  text-align: center;
+  font-family: inherit;
+  max-width: 90%;
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.popupCloser__button {
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  z-index: 2147483647;
+}
+
+.popupContainer__button {
+  cursor: pointer;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 14px;
+  text-align: center;
+  width: 90%;
+  line-height: 16px;
+}
+
+.popupContainer__poweredBy {
+  margin: 4px 12px 12px;
+  padding: 0;
+  text-align: center;
+
+  a {
+    text-decoration: underline;
+    font-family: inherit;
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+    color: #212121;
+    cursor: pointer;
+    text-underline-offset: 3px;
+  }
+}
+
+.popupContainer__titleIcon {
+  height: 48px;
+  width: auto;
+  margin: 10px 0;
+}
+
+@media only screen and (max-width: 768px) {
+  .popupContainer {
+    width: 9%;
+  }
+  .popupContainer__content {
+    gap: 6px;
+  }
+  .popupContainer__button {
+    font-size: 14px;
+    font-weight: normal;
+  }
+  .popupContainer__inner_content {
+    padding: 12px 20px 0;
+  }
+  .popupContainer__title {
+    font-size: 16px;
+    line-height: 22px;
+  }
+
+  .popupContainer__subTitle {
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  .popupContainer__titleIcon {
+    height: 38px;
+    width: auto;
+    margin: 8px 0;
+  }
+}

package/src/widgets/SingleButtonRedirection/config.ts

@@ -0,0 +1,47 @@
+import { ISingleButtonRedirection } from './index';
+import { IRedirectWidgetCustomisation } from '@bikdotai/bik-models/dm';
+import { FAB_POSITION } from '../../utilities/widgetUtils';
+
+const config: ISingleButtonRedirection = {
+  id: 'is9bagRgFR1IrZl21T6A',
+  isMobile: false,
+  preview: false,
+  environment: '',
+  info: {},
+  widgetCustomisation: {
+    fabText: 'Chat with us',
+    iconColor: '#fff',
+    fabPositioner: {
+      bottom: '20px',
+      right: '20px',
+    },
+    fabBackgroundColor: '#000',
+    fabIconLink:
+      'https://storage.googleapis.com/bik-widget-mfe/bap%2Ffab-assets%2Ficons%2Fbik%2Fredirect.svg',
+    fabWebSize: 50,
+    fabMobileSize: 50,
+  } as unknown as IRedirectWidgetCustomisation,
+  visibility: {
+    visiblePages: ['/'],
+  },
+  storeWidgetConfig: {
+    '/': [
+      {
+        widgetId: 'Kxb0Ib2YdCUv1cUsrK4C',
+        fabPosition: FAB_POSITION.CENTER_RIGHT,
+      },
+      {
+        widgetId: 'is9bagRgFR1IrZl21T6A',
+        fabPosition: FAB_POSITION.BOTTOM_RIGHT,
+      },
+    ],
+    '/*': [
+      {
+        widgetId: 'qnXJjhuTog9sTWqDZHc7',
+        fabPosition: FAB_POSITION.BOTTOM_LEFT,
+      },
+    ],
+  },
+} as unknown as ISingleButtonRedirection;
+
+export default config;