@bikdotai/bik-widgets 1.0.0 → 1.0.1

package/src/components/selectedCountry/selectedCountry.tsx

@@ -1,76 +0,0 @@
-import React, { useContext, useState, useEffect } from 'react';
-import { STWContext } from '../../widgets/STW/context';
-import useIsMobile from '../../hooks/useIsMobile';
-
-const SelectedCountry: React.FC<{
-  toggleDropDown: (flag: boolean) => void;
-  showDropdown: boolean;
-  fontColour: string;
-  selectedCountryData: { code: string; dial: string };
-}> = ({ toggleDropDown, showDropdown, selectedCountryData, fontColour }) => {
-  const { preview, isMobile } = useContext(STWContext);
-  const isMobileDevice = useIsMobile();
-  const [currentStyle, setCurrentStyle] = useState<null | {
-    [key: string]: string;
-  }>(null);
-
-  useEffect(() => {
-    const importStyles = async () => {
-      let stylesModule;
-      if (preview) {
-        if (isMobile) {
-          stylesModule = await import(
-            './selectedCountryPreviewMobile.module.css'
-          );
-        } else {
-          stylesModule = await import(
-            './selectedCountryPreviewDesktop.module.css'
-          );
-        }
-      } else {
-        stylesModule = await import('./selectedCountry.module.css');
-      }
-      setCurrentStyle(stylesModule.default);
-    };
-    importStyles().then();
-  }, [preview, isMobile]);
-
-  if (!currentStyle) {
-    return <></>;
-  }
-
-  return (
-    <div
-      className={currentStyle.bikStwCountryCodePicker}
-      onClick={() => toggleDropDown(!showDropdown)}
-      style={
-        preview
-          ? {}
-          : {
-              height: isMobileDevice ? 50 : 58,
-              paddingLeft: '20px',
-              paddingRight: '20px',
-            }
-      }
-    >
-      <div className={currentStyle.bikStwCountryCodeContainer}>
-        <img
-          alt={''}
-          className={currentStyle.bikStwCountryFlag}
-          src={`https://flagcdn.com/${selectedCountryData.code.toLowerCase()}.svg`}
-        />
-        <div
-          className={currentStyle.bikStwH2}
-          style={{ color: fontColour, margin: 0 }}
-        >
-          {selectedCountryData.dial}
-        </div>
-        <div
-          className={currentStyle.bikStwDownArrow}
-          style={{ borderTopColor: fontColour }}
-        ></div>
-      </div>
-    </div>
-  );
-};
-export default SelectedCountry;

package/src/components/selectedCountry/selectedCountryPreviewDesktop.module.css

@@ -1,56 +0,0 @@
-.bikStwCountryCodePicker {
-  pointer-events: none;
-  height: 18px;
-  border-radius: 8px;
-  border-width: 1px;
-  border-style: solid;
-  align-items: center;
-  border-color: #e0e0e0;
-  padding: 2px 4px;
-  gap: 8px;
-  display: flex;
-  flex-direction: row;
-  font-family: inherit;
-  background-color: rgba(256, 256, 256, 0.3);
-}
-
-.bikStwCountryCodeContainer {
-  gap: 4px;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  font-family: inherit;
-}
-
-.bikStwCountryFlag {
-  width: 12px;
-  height: auto;
-  position: unset;
-}
-
-.bikStwH2 {
-  font-family: inherit;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 8px;
-  line-height: 10px;
-  font-feature-settings:
-    'tnum' on,
-    'lnum' on,
-    'case' on,
-    'ss04' on;
-  color: #212121;
-  margin-bottom: 0;
-}
-
-.bikStwDownArrow {
-  width: 0;
-  height: 0;
-  border-left: 3px solid transparent;
-  border-right: 3px solid transparent;
-  border-top: 4px solid #616161;
-  font-size: 0;
-  line-height: 0;
-  float: left;
-  display: block !important;
-}

package/src/components/selectedCountry/selectedCountryPreviewMobile.module.css

@@ -1,57 +0,0 @@
-.bikStwCountryCodePicker {
-  pointer-events: none;
-  height: 22px;
-  border-radius: 8px;
-  margin-top: 4px;
-  border-width: 1px;
-  border-style: solid;
-  align-items: center;
-  border-color: #e0e0e0;
-  padding: 8px 6px;
-  gap: 8px;
-  display: flex;
-  flex-direction: row;
-  font-family: inherit;
-  background-color: rgba(256, 256, 256, 0.3);
-}
-
-.bikStwCountryCodeContainer {
-  gap: 4px;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  font-family: inherit;
-}
-
-.bikStwCountryFlag {
-  width: 12px;
-  height: auto;
-  position: unset;
-}
-
-.bikStwH2 {
-  font-family: inherit;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 8px;
-  line-height: 10px;
-  font-feature-settings:
-    'tnum' on,
-    'lnum' on,
-    'case' on,
-    'ss04' on;
-  color: #212121;
-  margin-bottom: 0;
-}
-
-.bikStwDownArrow {
-  width: 0;
-  height: 0;
-  border-left: 3px solid transparent;
-  border-right: 3px solid transparent;
-  border-top: 4px solid #616161;
-  font-size: 0;
-  line-height: 0;
-  float: left;
-  display: block !important;
-}

package/src/components/userDetailsForm/RenderCustomFields.tsx

@@ -1,333 +0,0 @@
-import React, { useContext, useMemo } from 'react';
-import Checkbox from 'components/inputComponents/Checkbox';
-import { InputBox } from 'components/inputComponents/InputBox';
-import { Dropdown } from 'components/inputComponents/Dropdown';
-import DatePicker from 'components/inputComponents/DatePicker';
-import {
-  CustomField,
-  UserFields,
-  CustomFieldError,
-  CustomFieldValue,
-} from '../../types/customFields';
-import { STWContext } from '../../widgets/STW/context';
-import useIsMobile from '../../hooks/useIsMobile';
-
-type RenderCustomFieldsProps = {
-  id?: string;
-  customFields: CustomField[];
-  userInputs?: UserFields;
-  setUserInputs?: (
-    inputs: UserFields | ((prev: UserFields) => UserFields),
-  ) => void;
-  isRequired: boolean;
-  customFieldErrors?: CustomFieldError;
-  setCustomFieldErrors?: (
-    errors: CustomFieldError | ((prev: CustomFieldError) => CustomFieldError),
-  ) => void;
-  fontColour?: string;
-  onFocusColour?: string;
-  backgroundColor?: string;
-};
-
-const RenderCustomFields: React.FC<RenderCustomFieldsProps> = ({
-  id,
-  customFields,
-  userInputs,
-  setUserInputs,
-  isRequired,
-  customFieldErrors,
-  setCustomFieldErrors,
-  fontColour,
-  backgroundColor = '#F2F9FF',
-}) => {
-  const { preview, isMobile } = useContext(STWContext);
-  const isMobileDevice = useIsMobile();
-
-  const inputHeight = useMemo(() => {
-    if (preview) {
-      return 20;
-    }
-
-    return isMobileDevice ? 48 : 56;
-  }, [preview, isMobileDevice]);
-
-  // Container style for each custom field
-  const containerStyle = useMemo<React.CSSProperties>(
-    () => ({
-      marginTop: preview ? 4 : 12,
-      fontFamily: 'inherit',
-      fontSize: preview ? '8px' : '14px',
-    }),
-    [preview],
-  );
-
-  // Returns style object for InputBox, highlighting errors if present
-  const getInputBoxStyle = (
-    fieldError?: string,
-  ): React.CSSProperties & Record<string, string> => ({
-    '--bik-inputBox-text-color': fieldError ? '#b92321' : fontColour,
-    '--bik-inputBox-label-color': fieldError ? '#b92321' : fontColour,
-    '--bik-inputBox-border-color': fieldError ? '#b92321' : '#e0e0e0',
-    '--bik-inputBox-error-border-color': '#b92321',
-    '--bik-inputBox-min-height': `${inputHeight}px`,
-  });
-
-  const getFieldValue = (
-    field: CustomField,
-    defaultValue: CustomFieldValue = '',
-  ) => {
-    const value = userInputs?.customFields?.[field.id];
-    const fieldExists =
-      userInputs?.customFields && field.id in userInputs.customFields;
-
-    if (fieldExists) {
-      if (field.fieldType === 'number' && value === null) {
-        return '';
-      }
-      return value;
-    }
-
-    switch (field.fieldType) {
-      case 'checkbox':
-        return false;
-      case 'multiselect_dropdown':
-        return [];
-      case 'number':
-        return defaultValue === '' ? '' : defaultValue;
-      default:
-        return defaultValue;
-    }
-  };
-
-  const updateFieldValue = (fieldId: number, value: CustomFieldValue) => {
-    setUserInputs?.((prevInputs: UserFields) => ({
-      ...prevInputs,
-      customFields: {
-        ...prevInputs?.customFields,
-        [fieldId]: value,
-      },
-    }));
-
-    if (setCustomFieldErrors) {
-      setCustomFieldErrors((prevErrors: CustomFieldError) => {
-        const newErrors = { ...prevErrors };
-        delete newErrors[fieldId];
-        return newErrors;
-      });
-    }
-  };
-
-  return (
-    <div>
-      {customFields.map((field, index) => {
-        const fieldError = customFieldErrors?.[field.id];
-        const fieldId = `bik-${id}-custom-field-${field.fieldType}-${field.id}`;
-
-        switch (field.fieldType) {
-          case 'single_line':
-            return (
-              <div
-                key={`${field.id}-single-line-${index}`}
-                style={containerStyle}
-              >
-                <div style={getInputBoxStyle(fieldError)}>
-                  <InputBox
-                    id={fieldId}
-                    value={getFieldValue(field) as string}
-                    labelText={field.fieldName}
-                    onChange={(value: string) => {
-                      updateFieldValue(field.id, value);
-                    }}
-                    inputType="text"
-                    isRequired={isRequired}
-                    maxCharacters={50}
-                    errorMessage={fieldError || undefined}
-                    inputHeight={inputHeight}
-                    fontColour={fieldError ? '#b92321' : fontColour}
-                    isPreview={preview}
-                  />
-                </div>
-              </div>
-            );
-
-          case 'multi_line':
-            return (
-              <div
-                key={`${field.id}-multi-line-${index}`}
-                style={containerStyle}
-              >
-                <div style={getInputBoxStyle(fieldError)}>
-                  <InputBox
-                    id={fieldId}
-                    value={getFieldValue(field) as string}
-                    labelText={field.fieldName}
-                    onChange={(value: string) => {
-                      updateFieldValue(field.id, value);
-                    }}
-                    inputType="text"
-                    isMultiline
-                    isRequired={isRequired}
-                    maxCharacters={500}
-                    textareaRows={preview ? 2 : 3}
-                    errorMessage={fieldError || undefined}
-                    inputHeight={inputHeight}
-                    fontColour={fieldError ? '#b92321' : fontColour}
-                    backgroundColor={backgroundColor}
-                    isPreview={preview}
-                  />
-                </div>
-              </div>
-            );
-
-          case 'number':
-            return (
-              <div key={`${field.id}-number-${index}`} style={containerStyle}>
-                <div style={getInputBoxStyle(fieldError)}>
-                  <InputBox
-                    id={fieldId}
-                    value={getFieldValue(field) as string}
-                    labelText={field.fieldName}
-                    onChange={(value: string) => {
-                      const numericValue =
-                        value.trim() === '' ? null : Number(value);
-                      updateFieldValue(field.id, numericValue);
-                    }}
-                    inputType="number"
-                    isRequired={isRequired}
-                    minValue={Number.MIN_SAFE_INTEGER}
-                    maxValue={Number.MAX_SAFE_INTEGER}
-                    stepValue={1}
-                    errorMessage={fieldError || undefined}
-                    inputHeight={inputHeight}
-                    fontColour={fieldError ? '#b92321' : fontColour}
-                    isPreview={preview}
-                  />
-                </div>
-              </div>
-            );
-
-          case 'checkbox': {
-            return (
-              <div key={`${field.id}-checkbox-${index}`} style={containerStyle}>
-                <Checkbox
-                  id={fieldId}
-                  label={field.fieldName}
-                  checked={getFieldValue(field) as boolean}
-                  onChange={(checked: boolean) => {
-                    updateFieldValue(field.id, checked);
-                  }}
-                  iconSize={preview ? (isMobile ? 8 : 10) : 14}
-                  isPreview={preview}
-                  fontColour={fieldError ? '#b92321' : fontColour}
-                />
-              </div>
-            );
-          }
-
-          case 'date':
-            return (
-              <div key={`${field.id}-date-${index}`} style={containerStyle}>
-                <DatePicker
-                  id={fieldId}
-                  label={field.fieldName}
-                  value={getFieldValue(field) as string}
-                  onChange={(value: string) => {
-                    updateFieldValue(field.id, value);
-                  }}
-                  isRequired={isRequired}
-                  error={fieldError || undefined}
-                  isPreview={preview}
-                  fontColour={fieldError ? '#b92321' : fontColour}
-                />
-              </div>
-            );
-
-          case 'date_time':
-            return (
-              <div
-                key={`${field.id}-date-time-${index}`}
-                style={containerStyle}
-              >
-                <DatePicker
-                  id={fieldId}
-                  label={field.fieldName}
-                  value={getFieldValue(field) as string}
-                  onChange={(value: string) => {
-                    updateFieldValue(field.id, value);
-                  }}
-                  isRequired={isRequired}
-                  includeTime={true}
-                  error={fieldError || undefined}
-                  isPreview={preview}
-                  fontColour={fieldError ? '#b92321' : fontColour}
-                />
-              </div>
-            );
-
-          case 'dropdown':
-            return (
-              <div key={`${field.id}-dropdown-${index}`} style={containerStyle}>
-                <Dropdown
-                  id={fieldId}
-                  label={field.fieldName}
-                  value={(() => {
-                    const value = getFieldValue(field);
-                    return Array.isArray(value)
-                      ? value
-                      : value != null && value !== ''
-                        ? [value as string]
-                        : [];
-                  })()}
-                  options={(field.options || []).map((option: string) => ({
-                    value: option,
-                    label: option,
-                  }))}
-                  onChange={(value: string[]) => {
-                    const selectedValue = value.length > 0 ? value[0] : null;
-                    updateFieldValue(field.id, selectedValue);
-                  }}
-                  isRequired={isRequired}
-                  isMultiSelect={false}
-                  closeOnSelect={true}
-                  error={fieldError || undefined}
-                  isPreview={preview}
-                  fontColour={fieldError ? '#b92321' : fontColour}
-                />
-              </div>
-            );
-
-          case 'multiselect_dropdown':
-            return (
-              <div
-                key={`${field.id}-multiselect-dropdown-${index}`}
-                style={containerStyle}
-              >
-                <Dropdown
-                  id={fieldId}
-                  label={field.fieldName}
-                  value={getFieldValue(field, []) as string[]}
-                  options={(field?.options ?? []).map((option: string) => ({
-                    value: option,
-                    label: option,
-                  }))}
-                  onChange={(value: string[]) => {
-                    updateFieldValue(field.id, value);
-                  }}
-                  isRequired={isRequired}
-                  isMultiSelect={true}
-                  showSelectAll={true}
-                  error={fieldError || undefined}
-                  isPreview={preview}
-                  fontColour={fieldError ? '#b92321' : fontColour}
-                />
-              </div>
-            );
-
-          default:
-            return null;
-        }
-      })}
-    </div>
-  );
-};
-export default RenderCustomFields;