@bikdotai/bik-widgets 1.0.0 → 1.0.2

package/src/widgets/ShopifyForm/shopifyForm.tsx

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

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

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