@bikdotai/bik-widgets 1.0.0 → 1.0.1

package/src/components/userDetailsForm/userDetailsForm.tsx

@@ -1,675 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import {
-  IDRWidgetCustomisation,
-  ISTWWidgetCustomisation,
-  ISTWWidgetLeadGeneration,
-  IUserInputs,
-  WIDGET_NAME,
-  LANGUAGE_VALUES,
-} from '@bikdotai/bik-models/dm';
-import { CountriesData } from '../../widgets/STW/utility';
-import { STWContext } from '../../widgets/STW/context';
-import useIsMobile from '../../hooks/useIsMobile';
-import { ComponentStyleMap } from '../../utilities/styleUtils';
-import parse from 'html-react-parser';
-import { decodeTextHelper } from '../../widgets/utility';
-import EmailInputBox from '../EmailInput/emailInputBox';
-import SMSInputBox from '../SmsInput/smsInputBox';
-import WhatsappInputBox from '../WhatsappInput/whatsappInputBox';
-import SVGFactory, { SVGName } from '../../widgets/STW/components/svgFactory';
-import { phone } from 'phone';
-import { tlds } from '@hapi/tlds';
-import { LanguageUtils } from '../../utilities/languageUtilities';
-import RenderCustomFields from './RenderCustomFields';
-import {
-  UserFields,
-  UserFieldDetails,
-  CustomFieldError,
-} from '../../types/customFields';
-import { validateCustomFields } from '../../utilities/customFieldValidation';
-import {
-  CUSTOM_FIELDS,
-  mapCustomFields,
-} from '../../utilities/customFieldTypeMapping';
-
-const UserDetailsForm: React.FC<{
-  claimPrizeHandle?: (userInputs: UserFields) => Promise<void>;
-  widgetCustomisation: ISTWWidgetCustomisation | IDRWidgetCustomisation;
-  leadGeneration: ISTWWidgetLeadGeneration;
-  error: string;
-  isLoading: boolean;
-  templateName: WIDGET_NAME;
-  showTitle?: boolean;
-  skipSubtitle?: boolean;
-  widgetName: string;
-  countryCode: string;
-  id?: string;
-  hideCreatorLabel?: boolean;
-  widgetLanguage?: LANGUAGE_VALUES;
-}> = ({
-  widgetCustomisation,
-  leadGeneration,
-  hideCreatorLabel,
-  error,
-  isLoading,
-  claimPrizeHandle,
-  templateName,
-  showTitle = true,
-  skipSubtitle = false,
-  widgetName,
-  countryCode,
-  id,
-  widgetLanguage,
-}) => {
-  const languageUtilities = new LanguageUtils();
-  const skipCountryPicker: boolean =
-    widgetCustomisation.skipCountryPicker ?? false;
-  const selectedCountry = CountriesData.filter(
-    country => country.code3 === countryCode,
-  );
-  const { preview, isMobile } = useContext(STWContext);
-  const { fontFamily, fontColour } =
-    widgetCustomisation as ISTWWidgetCustomisation;
-  const {
-    mandatoryOption,
-    optionalOptions,
-    enableConsentPolicies,
-    privacyPolicyURL,
-  } = leadGeneration as ISTWWidgetLeadGeneration;
-  const isMobileDevice = useIsMobile();
-  let userDetailsTitleSize: string;
-  let userDetailsSubTitleSize: string;
-
-  if (preview) {
-    userDetailsTitleSize = isMobile ? '16px' : '12px';
-    userDetailsSubTitleSize = isMobile ? '13px' : '10px';
-  } else {
-    userDetailsTitleSize = isMobileDevice ? '18px' : `24px`;
-    userDetailsSubTitleSize = isMobileDevice ? '14px' : `16px`;
-  }
-
-  const [userInputs, setUserInputs] = useState<UserFields>({
-    isWhatsapp: {
-      value: null,
-      countryCodeData: selectedCountry.length
-        ? selectedCountry[0]
-        : {
-            dial: '+91',
-            code: 'IN',
-            code3: 'IND',
-          },
-      showComponent: true,
-      error: null,
-    },
-    isSms: {
-      value: null,
-      countryCodeData: selectedCountry.length
-        ? selectedCountry[0]
-        : {
-            dial: '+91',
-            code: 'IN',
-            code3: 'IND',
-          },
-      showComponent: true,
-      error: null,
-    },
-    isEmail: {
-      value: null,
-      error: null,
-    },
-    isPolicyChecked: {
-      value: null,
-      error: null,
-    },
-    customFields: {},
-  });
-  const [optionlOptionsRevised, setOptionalOptionsRevised] =
-    useState<IUserInputs>();
-  const [isPrivacyPolicyChecked, setIsPrivacyPolicyChecked] =
-    useState<boolean>(false);
-  const [currentStyle, setCurrentStyle] = useState<Record<
-    string,
-    string
-  > | null>(null);
-  const [customFieldErrors, setCustomFieldErrors] = useState<CustomFieldError>(
-    {},
-  );
-  const multiLingualData =
-    widgetCustomisation?.multiLingualConfigurations?.[widgetLanguage];
-
-  useEffect(() => {
-    const mandatoryOptionTemp = Object.keys(mandatoryOption).filter(key => {
-      return key === 'isWhatsapp' || key === 'isSms';
-    });
-    if (mandatoryOptionTemp.length) {
-      let optionalOptionsTemp = { ...optionalOptions };
-      Object.keys(optionalOptions).filter(key => {
-        if ((key === 'isWhatsapp' || key === 'isSms') && optionalOptions[key]) {
-          optionalOptionsTemp = {
-            [key]: optionalOptions[key],
-            ...optionalOptionsTemp,
-          };
-        }
-      });
-      setOptionalOptionsRevised(optionalOptionsTemp);
-    }
-  }, [mandatoryOption, optionalOptions]);
-
-  const onChangeHandle = (
-    value: string,
-    key: 'isWhatsapp' | 'isSms' | 'isEmail',
-  ) => {
-    setUserInputs(prevInputs => ({
-      ...prevInputs,
-      [key]: { ...prevInputs[key], error: null, value: value },
-    }));
-  };
-
-  const validateEmail = email => {
-    const emailRegex =
-      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-    const match = email.match(emailRegex);
-    if (!match) return false;
-
-    const domain = email.split('@')[1];
-    const tld = domain.split('.').pop();
-    return tlds.has(tld);
-  };
-
-  const claimPrize = () => {
-    let hasError = false;
-    let updatedUserInput = JSON.parse(JSON.stringify(userInputs));
-    const customFieldsError: CustomFieldError = {};
-
-    Object.keys(mandatoryOption).forEach(key => {
-      if (
-        key !== CUSTOM_FIELDS &&
-        mandatoryOption[key] &&
-        userInputs[key] &&
-        !(userInputs[key] as UserFieldDetails).value
-      ) {
-        updatedUserInput = {
-          ...updatedUserInput,
-          [key]: {
-            ...updatedUserInput[key],
-            error: languageUtilities.getRequiredFieldMessage(widgetLanguage),
-          },
-        };
-        hasError = true;
-      } else if (
-        key === CUSTOM_FIELDS &&
-        mandatoryOption[key] &&
-        mandatoryOption.customFields?.length > 0
-      ) {
-        const mandatoryFields = mapCustomFields(mandatoryOption.customFields);
-        const validationResult = validateCustomFields(
-          mandatoryFields,
-          [],
-          updatedUserInput.customFields || {},
-        );
-
-        if (!validationResult.isValid) {
-          Object.assign(customFieldsError, validationResult.errors);
-          hasError = true;
-        }
-      }
-    });
-
-    Object.keys(optionalOptions).forEach(key => {
-      const otherKey = key === 'isWhatsapp' ? 'isSms' : 'isWhatsapp';
-      if (
-        optionalOptions[key] &&
-        key !== 'isEmail' &&
-        key !== CUSTOM_FIELDS &&
-        !userInputs[key].showComponent
-      ) {
-        updatedUserInput = {
-          ...updatedUserInput,
-          [key]: {
-            ...updatedUserInput[key],
-            value: updatedUserInput[otherKey].value,
-          },
-        };
-      } else if (
-        key === CUSTOM_FIELDS &&
-        optionalOptions[key] &&
-        optionalOptions.customFields?.length > 0
-      ) {
-        const optionalFields = mapCustomFields(optionalOptions.customFields);
-        const validationResult = validateCustomFields(
-          [],
-          optionalFields,
-          updatedUserInput.customFields || {},
-        );
-
-        if (!validationResult.isValid) {
-          Object.assign(customFieldsError, validationResult.errors);
-          hasError = true;
-        }
-      }
-    });
-
-    if (enableConsentPolicies && !isPrivacyPolicyChecked) {
-      hasError = true;
-      updatedUserInput = {
-        ...updatedUserInput,
-        isPolicyChecked: {
-          ...updatedUserInput.isPolicyChecked,
-          error:
-            languageUtilities.getPrivacyPolicyAcceptanceMessage(widgetLanguage),
-        },
-      };
-    }
-    if (userInputs.isEmail.value && !validateEmail(userInputs.isEmail.value)) {
-      updatedUserInput = {
-        ...updatedUserInput,
-        isEmail: {
-          ...updatedUserInput.isEmail,
-          error: languageUtilities.getEmailValidationMessage(widgetLanguage),
-        },
-      };
-      hasError = true;
-    }
-    if (
-      userInputs.isWhatsapp.value &&
-      !phone(
-        (userInputs.isWhatsapp.countryCodeData.dial +
-          userInputs.isWhatsapp.value) as string,
-        { strictDetection: true },
-      ).isValid
-    ) {
-      updatedUserInput = {
-        ...updatedUserInput,
-        isWhatsapp: {
-          ...updatedUserInput.isWhatsapp,
-          error:
-            languageUtilities.getPhoneNumberValidationMessage(widgetLanguage),
-        },
-      };
-      hasError = true;
-    }
-    if (
-      userInputs.isSms.value &&
-      !phone(
-        (userInputs.isSms.countryCodeData.dial +
-          userInputs.isSms.value) as string,
-        { strictDetection: true },
-      ).isValid
-    ) {
-      updatedUserInput = {
-        ...updatedUserInput,
-        isSms: {
-          ...updatedUserInput.isSms,
-          error:
-            languageUtilities.getPhoneNumberValidationMessage(widgetLanguage),
-        },
-      };
-      hasError = true;
-    }
-    setCustomFieldErrors(customFieldsError);
-    setUserInputs(updatedUserInput);
-    if (hasError) {
-      return;
-    }
-
-    claimPrizeHandle?.(updatedUserInput);
-  };
-
-  const onPrivacyPolicyChangeHandle = (value: boolean) => {
-    setIsPrivacyPolicyChecked(value);
-    setUserInputs(prevInputs => ({
-      ...prevInputs,
-      isPolicyChecked: { value: value, error: null },
-    }));
-  };
-
-  useEffect(() => {
-    if (preview) {
-      if (isMobile) {
-        ComponentStyleMap[templateName]?.userInputPreviewMobile.then(
-          async style => {
-            setCurrentStyle((await style()).default);
-          },
-        );
-      } else {
-        ComponentStyleMap[templateName]?.userInputPreviewDesktop.then(
-          async style => {
-            setCurrentStyle((await style()).default);
-          },
-        );
-      }
-    } else {
-      ComponentStyleMap[templateName]?.globalStyle.then(async style => {
-        setCurrentStyle((await style()).default);
-      });
-    }
-  }, [preview, isMobile]);
-
-  useEffect(() => {
-    if (currentStyle) {
-      document
-        .getElementById(currentStyle.bikFooter2)
-        .setAttribute(
-          'dir',
-          languageUtilities.getLanguageDirection(widgetLanguage),
-        );
-    }
-  }, [widgetLanguage, currentStyle]);
-
-  const screenTitle =
-    (multiLingualData?.postPlayScreenTitle ??
-    widgetCustomisation?.postPlayScreenTitle) ? (
-      parse(
-        decodeTextHelper(
-          multiLingualData?.postPlayScreenTitle ??
-            widgetCustomisation.postPlayScreenTitle,
-        ),
-      )
-    ) : (
-      <p>
-        <strong>Special prize only for you!</strong>
-      </p>
-    );
-  const screenSubTitle =
-    (multiLingualData?.postPlayScreenSubTitle ??
-    widgetCustomisation?.postPlayScreenSubTitle) ? (
-      parse(
-        decodeTextHelper(
-          multiLingualData?.postPlayScreenSubTitle ??
-            widgetCustomisation.postPlayScreenSubTitle,
-        ),
-      )
-    ) : (
-      <></>
-    );
-  const screenButtonText =
-    templateName === WIDGET_NAME.DIRECT_REWARD ||
-    templateName === WIDGET_NAME.LEAD_GENERATOR
-      ? (multiLingualData?.playScreenButtonText ??
-        widgetCustomisation?.playScreenButtonText)
-      : (multiLingualData?.postPlayScreenButtonText ??
-        widgetCustomisation.postPlayScreenButtonText ??
-        'Claim the prize');
-  const screenButtonTextColour =
-    templateName === WIDGET_NAME.DIRECT_REWARD ||
-    templateName === WIDGET_NAME.LEAD_GENERATOR
-      ? (widgetCustomisation as IDRWidgetCustomisation)
-          .playScreenButtonTextColour
-      : (widgetCustomisation.postPlayScreenButtonTextColour ?? '#fff');
-  const screenButtonColour =
-    templateName === WIDGET_NAME.DIRECT_REWARD ||
-    templateName === WIDGET_NAME.LEAD_GENERATOR
-      ? (widgetCustomisation as IDRWidgetCustomisation).playScreenButtonColour
-      : (widgetCustomisation.postPlayScreenButtonColour ?? '#731dcf');
-
-  if (!currentStyle) {
-    return <></>;
-  }
-
-  return (
-    <>
-      <div
-        id={currentStyle.bikFooter2}
-        style={{
-          fontFamily: fontFamily?.name,
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        {showTitle && (
-          <div
-            style={{ fontSize: userDetailsTitleSize, color: fontColour }}
-            className={currentStyle.userDetailsTitleWrapper}
-          >
-            {screenTitle}
-          </div>
-        )}
-        {!skipSubtitle && (
-          <div
-            style={{
-              marginTop: preview ? 4 : 8,
-              fontSize: userDetailsSubTitleSize,
-              color: fontColour,
-              opacity: 0.8,
-            }}
-            className={currentStyle.userDetailsTitleWrapper}
-          >
-            {screenSubTitle}
-          </div>
-        )}
-        {Object.keys(mandatoryOption).map(key => {
-          return (
-            <>
-              {key === 'isEmail' && mandatoryOption[key] && (
-                <EmailInputBox
-                  id={`bik-${id}-input-email`}
-                  onChangeHandle={onChangeHandle}
-                  value={userInputs.isEmail.value as string}
-                  error={userInputs.isEmail.error}
-                  fontColour={fontColour}
-                  widgetLanguage={widgetLanguage}
-                />
-              )}
-              {key === 'isSms' && mandatoryOption[key] && (
-                <SMSInputBox
-                  id={`bik-${id}-input-sms`}
-                  selectedCountryData={userInputs.isSms.countryCodeData}
-                  setUserInputs={setUserInputs}
-                  onChangeHandle={onChangeHandle}
-                  value={userInputs.isSms.value as string}
-                  error={userInputs.isSms.error}
-                  skipCountryPicker={skipCountryPicker ?? false}
-                  fontColour={fontColour}
-                  widgetLanguage={widgetLanguage}
-                />
-              )}
-              {key === 'isWhatsapp' && mandatoryOption[key] && (
-                <WhatsappInputBox
-                  id={`bik-${id}-input-whatsapp`}
-                  selectedCountryData={userInputs.isWhatsapp.countryCodeData}
-                  setUserInputs={setUserInputs}
-                  onChangeHandle={onChangeHandle}
-                  value={userInputs.isWhatsapp.value as string}
-                  error={userInputs.isWhatsapp.error}
-                  skipCountryPicker={skipCountryPicker ?? false}
-                  fontColour={fontColour}
-                  screenButtonColour={screenButtonColour}
-                  widgetLanguage={widgetLanguage}
-                />
-              )}
-              {key === CUSTOM_FIELDS && mandatoryOption[key]?.length > 0 && (
-                <RenderCustomFields
-                  id={id}
-                  customFields={mapCustomFields(mandatoryOption[key])}
-                  userInputs={userInputs}
-                  setUserInputs={setUserInputs}
-                  isRequired={true}
-                  customFieldErrors={customFieldErrors}
-                  setCustomFieldErrors={setCustomFieldErrors}
-                  fontColour={fontColour}
-                  onFocusColour={screenButtonColour}
-                  backgroundColor={widgetCustomisation?.backgroundColour}
-                />
-              )}
-            </>
-          );
-        })}
-        {optionlOptionsRevised &&
-          Object.keys(optionlOptionsRevised)?.map(key => {
-            return (
-              <>
-                {key === 'isEmail' && optionlOptionsRevised[key] && (
-                  <EmailInputBox
-                    fontColour={fontColour}
-                    id={`bik-${id}-input-email-op`}
-                    onChangeHandle={onChangeHandle}
-                    value={userInputs.isEmail.value as string}
-                    title={languageUtilities.getOptionalEmailTitle(
-                      widgetLanguage,
-                    )}
-                    error={userInputs.isEmail.error}
-                    widgetLanguage={widgetLanguage}
-                  />
-                )}
-                {key === 'isSms' &&
-                  optionlOptionsRevised[key] &&
-                  userInputs.isSms.showComponent && (
-                    <SMSInputBox
-                      fontColour={fontColour}
-                      id={`bik-${id}-input-sms-op`}
-                      selectedCountryData={userInputs.isSms.countryCodeData}
-                      setUserInputs={setUserInputs}
-                      onChangeHandle={onChangeHandle}
-                      value={userInputs.isSms.value as string}
-                      title={languageUtilities.getOptionalPhoneNumberTitle(
-                        widgetLanguage,
-                      )}
-                      error={userInputs.isSms.error}
-                      skipCountryPicker={skipCountryPicker ?? false}
-                      widgetLanguage={widgetLanguage}
-                    />
-                  )}
-                {key === 'isWhatsapp' &&
-                  optionlOptionsRevised[key] &&
-                  userInputs.isWhatsapp.showComponent && (
-                    <WhatsappInputBox
-                      fontColour={fontColour}
-                      id={`bik-${id}-input-whatsapp-op`}
-                      selectedCountryData={
-                        userInputs.isWhatsapp.countryCodeData
-                      }
-                      setUserInputs={setUserInputs}
-                      onChangeHandle={onChangeHandle}
-                      value={userInputs.isWhatsapp.value as string}
-                      title={languageUtilities.getOptionalWhatsappNumberTitle(
-                        widgetLanguage,
-                      )}
-                      error={userInputs.isWhatsapp.error}
-                      skipCountryPicker={skipCountryPicker ?? false}
-                      widgetLanguage={widgetLanguage}
-                      screenButtonColour={screenButtonColour}
-                    />
-                  )}
-
-                {key === CUSTOM_FIELDS && optionalOptions[key]?.length > 0 && (
-                  <RenderCustomFields
-                    id={id}
-                    customFields={mapCustomFields(optionalOptions[key])}
-                    userInputs={userInputs}
-                    setUserInputs={setUserInputs}
-                    isRequired={false}
-                    customFieldErrors={customFieldErrors}
-                    setCustomFieldErrors={setCustomFieldErrors}
-                    fontColour={fontColour}
-                    onFocusColour={screenButtonColour}
-                    backgroundColor={widgetCustomisation?.backgroundColour}
-                  />
-                )}
-              </>
-            );
-          })}
-        {enableConsentPolicies && (
-          <>
-            {/* Style override for bikStwH2 font size */}
-            <style>{`.bikStwH2Override { font-size: ${preview ? '8px' : '12px'} !important; }`}</style>
-            <div
-              className={currentStyle.bikStwWaCheckboxContainer}
-              style={preview ? { gap: '4px', marginTop: '4px' } : {}}
-            >
-              <input
-                type="checkbox"
-                id={currentStyle.bikStwPolicyCheckbox}
-                name="bik-wa"
-                checked={isPrivacyPolicyChecked}
-                onChange={e => onPrivacyPolicyChangeHandle(e.target.checked)}
-                style={{
-                  display: 'block',
-                  margin: 0,
-                  appearance: 'auto',
-                  ...(preview
-                    ? { width: '10px' }
-                    : {
-                        width: '12px',
-                        height: '12px',
-                        clip: 'unset',
-                        position: 'relative',
-                      }),
-                }}
-              />
-              <h2
-                className={`${currentStyle.bikStwH2} bikStwH2Override`}
-                style={{ color: fontColour }}
-              >
-                {languageUtilities.getPrivacyPolicyText(widgetLanguage)}{' '}
-                <a
-                  href={privacyPolicyURL}
-                  style={{
-                    color: fontColour,
-                    fontSize: preview ? '8px' : '12px',
-                    display: 'inline-block',
-                  }}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {languageUtilities.getPrivacyPolicyLabel(widgetLanguage)}
-                </a>
-              </h2>
-            </div>
-            {userInputs.isPolicyChecked.error?.length ? (
-              <p id={currentStyle.bikErrorWrapper}>
-                {userInputs.isPolicyChecked.error}
-              </p>
-            ) : (
-              <></>
-            )}
-          </>
-        )}
-        {error?.length ? (
-          <p id={currentStyle.bikErrorWrapper} style={{ color: fontColour }}>
-            {error}
-          </p>
-        ) : (
-          <></>
-        )}
-        <button
-          id={currentStyle.bikayiBtn}
-          className={currentStyle.bikCliamBtn}
-          onClick={() => claimPrize()}
-          style={{
-            backgroundColor: screenButtonColour,
-            color: screenButtonTextColour,
-            fontFamily: fontFamily?.name ?? 'inherit',
-          }}
-        >
-          {isLoading ? (
-            <div className={currentStyle.loader}></div>
-          ) : (
-            screenButtonText
-          )}
-        </button>
-      </div>
-      {!widgetCustomisation.hidePoweredBy && !hideCreatorLabel && (
-        <p
-          className={currentStyle.poweredBy}
-          style={{ opacity: 0.4 }}
-          onClick={() =>
-            window.open(
-              `https://bik.ai/?utm_campaign=${widgetName}&utm_medium=Widgets&utm_source=Powered_by_bik`,
-            )
-          }
-        >
-          <a
-            href={`https://bik.ai/?utm_campaign=${widgetName}&utm_medium=Widgets&utm_source=Powered_by_bik`}
-            target="_blank"
-            rel="noreferrer"
-            style={{ color: fontColour }}
-          >
-            {languageUtilities.getPoweredByMessage(widgetLanguage)}
-          </a>
-          <SVGFactory name={SVGName.BIK} color={fontColour} />
-        </p>
-      )}
-    </>
-  );
-};
-export default UserDetailsForm;

package/src/hooks/index.ts

@@ -1,4 +0,0 @@
-import { useWindowEvent } from './useWindowEvent';
-import { useMessageEvent } from './useMessageEvent';
-
-export { useWindowEvent, useMessageEvent };