@bikdotai/bik-widgets 1.0.0 → 1.0.1

package/src/components/UserDetailsV2/userDetailsV2.tsx

@@ -1,527 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import {
-  ISTWWidgetLeadGeneration,
-  IShopifyFormsWidgetCustomisation,
-  WIDGET_NAME,
-  IShopifyFormsLeadGeneration,
-  LANGUAGE_VALUES,
-} from '@bikdotai/bik-models/dm';
-import { CountriesData } from '../../widgets/STW/utility';
-import { STWContext } from '../../widgets/STW/context';
-import EmailInputBox from '../EmailInput/emailInputBox';
-import SMSInputBox from '../SmsInput/smsInputBox';
-import WhatsappInputBox from '../WhatsappInput/whatsappInputBox';
-import { phone } from 'phone';
-import { CheckBox } from '../checkbox/checkbox';
-import { tlds } from '@hapi/tlds';
-import { LanguageUtils } from 'utilities/languageUtilities';
-import RenderCustomFields from '../userDetailsForm/RenderCustomFields';
-import {
-  UserFields,
-  CustomFieldError,
-  UserFieldDetails,
-} from '../../types/customFields';
-import {
-  CUSTOM_FIELDS,
-  mapCustomFields,
-} from '../../utilities/customFieldTypeMapping';
-import { validateCustomFields } from '../../utilities/customFieldValidation';
-
-interface IUserDetailsV2 {
-  claimPrizeHandle?: (userInputs: UserFields) => Promise<void>;
-  widgetCustomisation: IShopifyFormsWidgetCustomisation;
-  leadGeneration: IShopifyFormsLeadGeneration;
-  error: string;
-  isLoading: boolean;
-  templateName: WIDGET_NAME;
-  countryCode: string;
-  id?: string;
-  widgetLanguage: LANGUAGE_VALUES;
-}
-
-const UserDetailsV2: React.FC<IUserDetailsV2> = ({
-  widgetCustomisation,
-  leadGeneration,
-  error,
-  claimPrizeHandle,
-  id,
-  countryCode,
-  isLoading,
-  widgetLanguage,
-}) => {
-  const languageUtilities = new LanguageUtils();
-  const skipCountryPicker: boolean =
-    widgetCustomisation.skipCountryPicker ?? false;
-  const selectedCountry = CountriesData.filter(
-    country => country.code3 === countryCode,
-  );
-  const { fontFamily, fontColour } = widgetCustomisation;
-  const {
-    mandatoryOption,
-    optionalOptions,
-    enableConsentPolicies,
-    privacyPolicyURL,
-  } = leadGeneration as ISTWWidgetLeadGeneration;
-  const { preview, isMobile } = useContext(STWContext);
-  const order = ['isWhatsapp', 'isSms', 'isEmail'];
-  const sortWithCustomFieldsLast = keys => {
-    return keys.sort((a, b) => {
-      if (a === CUSTOM_FIELDS) return 1;
-      if (b === CUSTOM_FIELDS) return -1;
-      return order.indexOf(a) - order.indexOf(b);
-    });
-  };
-
-  const sortedMandatoryOptions = sortWithCustomFieldsLast(
-    Object.keys(mandatoryOption),
-  );
-  const sortedOptionalOptions = sortWithCustomFieldsLast(
-    Object.keys(optionalOptions),
-  );
-
-  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 [isPrivacyPolicyChecked, setIsPrivacyPolicyChecked] =
-    useState<boolean>(false);
-  const [currentStyle, setCurrentStyle] = useState<Record<
-    string,
-    string
-  > | null>(null);
-  const [customFieldErrors, setCustomFieldErrors] = useState<CustomFieldError>(
-    {},
-  );
-
-  const onChangeHandle = (
-    value: string,
-    key: 'isWhatsapp' | 'isSms' | 'isEmail',
-  ) => {
-    setUserInputs(prevInputs => ({
-      ...prevInputs,
-      [key]: { ...prevInputs[key], error: null, value: value },
-    }));
-  };
-
-  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 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 onPrivacyPolicyChangeHandle = (value: boolean) => {
-    setIsPrivacyPolicyChecked(value);
-    setUserInputs(prevInputs => ({
-      ...prevInputs,
-      isPolicyChecked: { value: value, error: null },
-    }));
-  };
-
-  useEffect(() => {
-    const importStyles = async () => {
-      let stylesModule;
-      if (!preview) {
-        stylesModule = await import('./userDetailsV2.module.css');
-      } else {
-        if (isMobile) {
-          stylesModule = await import('./userDetailsV2.mobile.module.css');
-        } else {
-          stylesModule = await import('./userDetailsV2.desktop.module.css');
-        }
-      }
-      setCurrentStyle(stylesModule.default);
-    };
-    importStyles().then();
-  }, [preview, isMobile]);
-
-  useEffect(() => {
-    if (currentStyle) {
-      document
-        .getElementById('user-details-container')
-        .setAttribute(
-          'dir',
-          languageUtilities.getLanguageDirection(widgetLanguage),
-        );
-    }
-  }, [widgetLanguage, currentStyle]);
-
-  if (!currentStyle) {
-    return <></>;
-  }
-  return (
-    <div
-      id="user-details-container"
-      className={currentStyle.userDetails__container}
-      style={{ fontFamily: fontFamily?.name }}
-    >
-      {sortedMandatoryOptions.map(key => {
-        return (
-          <>
-            {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}
-                widgetLanguage={widgetLanguage}
-              />
-            )}
-            {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 === CUSTOM_FIELDS && mandatoryOption[key]?.length > 0 && (
-              <div>
-                <RenderCustomFields
-                  id={id}
-                  customFields={mapCustomFields(mandatoryOption[key])}
-                  userInputs={userInputs}
-                  setUserInputs={setUserInputs}
-                  isRequired={true}
-                  customFieldErrors={customFieldErrors}
-                  setCustomFieldErrors={setCustomFieldErrors}
-                  fontColour={fontColour}
-                  onFocusColour={widgetCustomisation.playScreenButtonColour}
-                  backgroundColor={widgetCustomisation?.backgroundColour}
-                />
-              </div>
-            )}
-          </>
-        );
-      })}
-      {sortedOptionalOptions?.map(key => {
-        return (
-          <>
-            {key === 'isSms' &&
-              optionalOptions[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="Phone Number (Optional)"
-                  error={userInputs.isSms.error}
-                  skipCountryPicker={skipCountryPicker ?? false}
-                  widgetLanguage={widgetLanguage}
-                />
-              )}
-            {key === 'isWhatsapp' &&
-              optionalOptions[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="Whatsapp Number (Optional)"
-                  error={userInputs.isWhatsapp.error}
-                  skipCountryPicker={skipCountryPicker ?? false}
-                  widgetLanguage={widgetLanguage}
-                />
-              )}
-            {key === 'isEmail' && optionalOptions[key] && (
-              <EmailInputBox
-                fontColour={fontColour}
-                id={`bik-${id}-input-email-op`}
-                onChangeHandle={onChangeHandle}
-                value={userInputs.isEmail.value as string}
-                title="Email (Optional)"
-                error={userInputs.isEmail.error}
-                widgetLanguage={widgetLanguage}
-              />
-            )}
-            {key === CUSTOM_FIELDS && optionalOptions[key]?.length > 0 && (
-              <div>
-                <RenderCustomFields
-                  id={id}
-                  customFields={mapCustomFields(optionalOptions[key])}
-                  userInputs={userInputs}
-                  setUserInputs={setUserInputs}
-                  isRequired={false}
-                  customFieldErrors={customFieldErrors}
-                  setCustomFieldErrors={setCustomFieldErrors}
-                  fontColour={fontColour}
-                  onFocusColour={widgetCustomisation.playScreenButtonColour}
-                  backgroundColor={widgetCustomisation?.backgroundColour}
-                />
-              </div>
-            )}
-          </>
-        );
-      })}
-      {enableConsentPolicies && (
-        <>
-          {/* Style override for consent__message font size */}
-          <style>{`.bikConsentMessageOverride { font-size: ${preview ? '5px' : '12px'} !important; }`}</style>
-          <div
-            className={currentStyle.consent__container}
-            style={preview ? { gap: '4px', marginTop: '4px' } : {}}
-          >
-            {!preview && (
-              <CheckBox
-                borderColour={widgetCustomisation.fontColour}
-                isChecked={isPrivacyPolicyChecked}
-                checkedColour={widgetCustomisation.playScreenButtonColour}
-                onChange={onPrivacyPolicyChangeHandle}
-              />
-            )}
-            {preview && <div className={currentStyle.preview__checkbox}></div>}
-            <div
-              className={`${currentStyle.consent__message} bikConsentMessageOverride`}
-              style={{ color: fontColour }}
-            >
-              {languageUtilities.getPrivacyPolicyText(widgetLanguage)}{' '}
-              <a
-                href={privacyPolicyURL}
-                style={{
-                  color: fontColour,
-                  fontSize: preview ? '5px' : '12px',
-                }}
-                target="_blank"
-                rel="noreferrer"
-              >
-                {languageUtilities.getPrivacyPolicyLabel(widgetLanguage)}
-              </a>
-            </div>
-          </div>
-          {userInputs.isPolicyChecked.error?.length ? (
-            <div className={currentStyle.userDetails__error}>
-              {userInputs.isPolicyChecked.error}
-            </div>
-          ) : (
-            <></>
-          )}
-        </>
-      )}
-      {error?.length ? (
-        <div
-          className={currentStyle.userDetails__error}
-          style={{ color: fontColour }}
-        >
-          {error}
-        </div>
-      ) : (
-        <></>
-      )}
-      <div
-        className={currentStyle.userDetails__button}
-        onClick={claimPrize}
-        style={{
-          backgroundColor: widgetCustomisation.playScreenButtonColour,
-          color: widgetCustomisation.playScreenButtonTextColour,
-        }}
-      >
-        {isLoading ? (
-          <div className={currentStyle.userDetails__loader}></div>
-        ) : (
-          (widgetCustomisation?.multiLingualConfigurations?.[widgetLanguage]
-            ?.playScreenButtonText ?? widgetCustomisation.playScreenButtonText)
-        )}
-      </div>
-    </div>
-  );
-};
-export default UserDetailsV2;

package/src/components/WhatsappInput/Spinner.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-
-const spinnerStyle: React.CSSProperties = {
-  display: 'inline-block',
-  width: 24,
-  height: 24,
-  border: '3px solid #e0e0e0',
-  borderTop: '3px solid #4b1583',
-  borderRadius: '50%',
-  animation: 'bik-spin 1s linear infinite',
-};
-
-const styleSheet = `@keyframes bik-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`;
-
-interface SpinnerProps {
-  color?: string;
-}
-
-const Spinner: React.FC<SpinnerProps> = ({ color }) => (
-  <>
-    <style>{styleSheet}</style>
-    <span style={{ ...spinnerStyle, borderTopColor: color }} />
-  </>
-);
-
-export default Spinner;

package/src/components/WhatsappInput/whatsappInput.module.css

@@ -1,106 +0,0 @@
-.bikStwPhoneInputRow {
-  display: flex;
-  gap: 8px;
-  flex-direction: row;
-  margin-top: 12px;
-  width: 100%;
-  font-family: inherit;
-}
-
-.bikStwPhoneInputRow > div {
-  font-family: inherit;
-}
-
-.bikInputMain {
-  display: flex;
-}
-
-.bikStwH2 {
-  font-family: inherit;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  font-feature-settings:
-    'tnum' on,
-    'lnum' on,
-    'case' on,
-    'ss04' on;
-  color: #212121;
-  margin-bottom: 8px;
-}
-
-.bikInputWrapper {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  font-family: inherit;
-}
-
-.bikInputWrapper input {
-  outline: none;
-  padding: 6px 10px;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px !important;
-  font-family: inherit;
-  height: 34px;
-  box-shadow: none;
-  background-color: rgba(256, 256, 256, 0.3);
-  width: unset !important;
-  margin: 0 !important;
-}
-
-.bikStwPhoneInput {
-  flex: 1;
-  font-family: inherit;
-}
-
-.bikInputWrapper input::placeholder {
-  color: rgba(0, 0, 0, 0.45) !important;
-  opacity: 1 !important;
-}
-
-input.bikStwSpinInputText::-webkit-outer-spin-button,
-input.bikStwSpinInputText::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.bikStwError {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 8px;
-  line-height: 16px;
-  color: #b92321;
-  margin-top: 4px;
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  padding-left: 4px;
-}
-
-.bikEmailInputMain {
-  display: block;
-  margin-top: 12px;
-  font-family: inherit;
-}
-
-@media only screen and (max-width: 768px) {
-  .bikStwH2 {
-    font-size: 12px;
-  }
-
-  .bikInputWrapper input {
-    padding: 4px 10px;
-    height: 30px;
-    font-size: 10px !important;
-  }
-
-  .bikStwPhoneInputRow {
-    margin-top: 10px;
-  }
-
-  .bikEmailInputMain {
-    margin-top: 10px;
-  }
-}