@bikdotai/bik-widgets 1.0.0

package/src/components/UserDetailsV2/userDetailsV2.tsx

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

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

@@ -0,0 +1,106 @@
+.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;
+  }
+}