@bikdotai/bik-widgets 1.0.0

package/src/components/userDetailsForm/userDetailsForm.tsx

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

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