Refactored components and added chatbot

src/components/Atoms/Controls/Input/Input.types.ts

@@ -0,0 +1,79 @@
+import { MenuItem } from "@/types";
+import { ChangeHandler, FieldErrors, RegisterOptions } from "react-hook-form";
+
+export interface CustomChangeEvent {
+  target: {
+    name: string;
+    value: any;
+    type: string;
+  };
+}
+
+export interface InputProps {
+  onChange: ChangeHandler;
+  onBlur: ChangeHandler;
+  name: string;
+  min?: string | number;
+  max?: string | number;
+  maxLength?: number;
+  minLength?: number;
+  pattern?: string;
+  required?: boolean;
+  disabled?: boolean;
+}
+
+export interface CustomInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+  name: string;
+  label?: string;
+  tooltip?: string;
+  type:
+    | "text"
+    | "email"
+    | "password"
+    | "number"
+    | "tel"
+    | "radio"
+    | "switch"
+    | "checkbox"
+    | "dropdown";
+  radioOptions?: Array<{ label: string; value: string; disabled?: boolean }>;
+  required?: boolean;
+  badge?: string;
+  dropdownOptions?: Array<MenuItem>;
+  customValidation?: RegisterOptions;
+  onChange?: (
+    event: React.ChangeEvent<HTMLInputElement> | CustomChangeEvent,
+  ) => void;
+}
+
+export interface RenderFieldProps {
+  type:
+    | "text"
+    | "email"
+    | "password"
+    | "number"
+    | "tel"
+    | "radio"
+    | "switch"
+    | "checkbox"
+    | "dropdown";
+  disabled?: boolean | undefined;
+  radioOptions?: Array<{ label: string; value: string; disabled?: boolean }>;
+  dropdownOptions?: Array<MenuItem>;
+  fieldValue: any;
+  createCustomEvent: any;
+  defaultValue?: any;
+  placeholder?: string;
+  className?: string;
+  errors: FieldErrors;
+  inputProps: InputProps;
+  inputRef: (el: HTMLInputElement | null) => void;
+  handleChange: (
+    event: React.ChangeEvent<HTMLInputElement> | CustomChangeEvent,
+  ) => void;
+  name: string;
+  label: string | undefined;
+  ref: React.ForwardedRef<HTMLInputElement>;
+  props?: any;
+}

src/components/Atoms/Controls/Input/components/Badge.tsx

@@ -0,0 +1,13 @@
+interface IBadge {
+  badge: string;
+}
+
+const Badge = ({ badge }: IBadge) => {
+  return (
+    <div className="caption text-white py-1 px-2 rounded-xl bg-white bg-opacity-10">
+      {badge}
+    </div>
+  );
+};
+
+export default Badge;

src/components/Atoms/Controls/Input/components/FieldError.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+interface FieldErrorProps {
+  error?: { message?: string };
+  disabled?: boolean;
+}
+
+const FieldError: React.FC<FieldErrorProps> = ({ error, disabled }) => {
+  if (disabled || !error?.message) return null;
+
+  return <span className="text-error-600 text-xs">{error.message}</span>;
+};
+
+export default FieldError;

src/components/Atoms/Controls/Input/components/Label.tsx

@@ -0,0 +1,25 @@
+interface LabelProps {
+  type:
+    | "text"
+    | "email"
+    | "password"
+    | "number"
+    | "tel"
+    | "radio"
+    | "switch"
+    | "checkbox"
+    | "dropdown";
+  label: string;
+  name: string;
+}
+
+const Label = ({ type, label, name }: LabelProps) => {
+  if (type === "switch" || type === "radio") return null;
+  return (
+    <label htmlFor={name} className="body-2 text-white">
+      {label}
+    </label>
+  );
+};
+
+export default Label;

src/components/Atoms/Controls/Input/components/Tooltip.tsx

@@ -0,0 +1,18 @@
+import { Tooltip } from "@/components/Atoms/Misc/Tooltip";
+import { AiOutlineInfoCircle } from "react-icons/ai";
+
+interface ITooltip {
+  text: string;
+}
+
+const InfoTooltip = ({ text }: ITooltip) => {
+  return (
+    <Tooltip content={text}>
+      <div>
+        <AiOutlineInfoCircle className="text-white flex-shrink-0" size={16} />
+      </div>
+    </Tooltip>
+  );
+};
+
+export default InfoTooltip;

src/components/Atoms/Controls/Input/components/renderFieldForInput.tsx

@@ -0,0 +1,22 @@
+import Input from "../formControls/input";
+import DropdownField from "../formControls/dropdown";
+import SwitchField from "../formControls/switch";
+import RadioButton from "../formControls/radio_buttons";
+import { RenderFieldProps } from "../Input.types";
+
+export const renderFieldForInput = ({ ...props }: RenderFieldProps) => {
+  switch (props.type) {
+    case "radio":
+      return <RadioButton {...props} />;
+
+    case "switch":
+      return <SwitchField {...props} />;
+
+    case "dropdown":
+      return <DropdownField {...props} />;
+
+    default: {
+      return <Input {...props} />;
+    }
+  }
+};

src/components/Atoms/Controls/Input/formControls/dropdown.tsx

@@ -0,0 +1,27 @@
+import DropdownMenu from "@/components/Molecules/Dropdowns";
+import { RenderFieldProps } from "../components/renderFieldForInput";
+
+const DropdownField = ({
+  disabled,
+  dropdownOptions,
+  fieldValue,
+  createCustomEvent,
+  defaultValue,
+  placeholder,
+  className,
+  handleChange,
+}: RenderFieldProps) => {
+  return (
+    <DropdownMenu
+      disabled={disabled}
+      size="lg"
+      menuList={dropdownOptions || []}
+      onChange={(value) => handleChange(createCustomEvent(value.label))}
+      className={className}
+    >
+      {fieldValue || defaultValue || placeholder}
+    </DropdownMenu>
+  );
+};
+
+export default DropdownField;

src/components/Atoms/Controls/Input/formControls/input.tsx

@@ -0,0 +1,58 @@
+import { tv } from "tailwind-variants";
+import { RenderFieldProps } from "../Input.types";
+import { usePasswordToggle } from "@/hooks/usePasswordToggle";
+
+const inputClass = tv({
+  base: "body-3 w-full rounded-xl p-4 bg-white bg-opacity-10 ring-0 outline-0 focus:ring-1 active:ring-1 focus:ring-white active:ring-white transition-all ease-in-out duration-300 text-white",
+  variants: {
+    error: {
+      true: "border border-error-600",
+      false: "",
+    },
+    withIcon: {
+      true: "pr-12", // Add padding to the right to accommodate the icon
+    },
+  },
+});
+
+const Input = ({
+  type,
+  disabled,
+  className,
+  errors,
+  inputProps,
+  inputRef,
+  handleChange,
+  defaultValue,
+  name,
+  ref,
+  props,
+}: RenderFieldProps) => {
+  const { showPassword, PasswordToggleIcon } = usePasswordToggle();
+  console.log("type", type);
+  return (
+    <div className="relative w-full">
+      <input
+        defaultValue={defaultValue}
+        className={inputClass({
+          error: !disabled && errors[name] !== undefined,
+          withIcon: type === "password",
+          className,
+        })}
+        disabled={disabled}
+        id={name}
+        type={type === "password" && showPassword ? "text" : type}
+        {...inputProps}
+        onChange={handleChange}
+        {...props}
+        ref={(e) => {
+          if (typeof inputRef === "function") inputRef(e);
+          if (typeof ref === "function") ref(e);
+        }}
+      />
+      {type === "password" && PasswordToggleIcon}
+    </div>
+  );
+};
+
+export default Input;

src/components/Atoms/Controls/Input/formControls/radio_buttons.tsx

@@ -0,0 +1,31 @@
+import Radio from "../../RadioButton";
+import { RenderFieldProps } from "../components/renderFieldForInput";
+
+const RadioButton = ({
+  type,
+  disabled,
+  radioOptions,
+  defaultValue,
+  handleChange,
+  name,
+}: RenderFieldProps) => {
+  return (
+    <Radio
+      options={
+        radioOptions?.map((opt) => ({
+          ...opt,
+          disabled: opt.disabled || disabled,
+        })) || []
+      }
+      defaultValue={String(defaultValue)}
+      className="space-y-2"
+      labelClassName="body-2 text-white ml-3"
+      onClick={(opt: { value: any }) =>
+        handleChange({ target: { name, value: opt.value, type } })
+      }
+      size="sm"
+    />
+  );
+};
+
+export default RadioButton;

src/components/Atoms/Controls/Input/formControls/switch.tsx

@@ -0,0 +1,34 @@
+import Switch from "../../Switch";
+import { RenderFieldProps } from "../components/renderFieldForInput";
+
+const SwitchField = ({
+  type,
+  disabled,
+  className,
+  inputRef,
+  handleChange,
+  name,
+  label,
+  ref,
+  props,
+}: RenderFieldProps) => {
+  return (
+    <Switch
+      disabled={disabled}
+      name={name}
+      label={label}
+      className={className}
+      {...props}
+      ref={(e: HTMLInputElement | null) => {
+        if (typeof inputRef === "function") inputRef(e);
+        if (typeof ref === "function") ref(e);
+        else if (ref) ref.current = e;
+      }}
+      onChange={(checked: unknown) =>
+        handleChange({ target: { name, value: checked, type } })
+      }
+    />
+  );
+};
+
+export default SwitchField;