@bikdotai/bik-widgets 1.0.0

package/src/components/selectedCountry/selectedCountry.tsx

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

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

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

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