customer-module-frontend 1.0.1-beta.1 → 1.0.1

package/src/components/Avatar/constants.tsx

@@ -1,45 +0,0 @@
-// Generate a deterministic hash from a string
-export const generateStringHash = (str: string): number => {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  return hash;
-};
-
-// Color options for labels
-export const colorOptions = [
-  "#5398cf", // light blue
-  "#d04b4f", // red
-  "#ac80b7", // violet
-  "#8789c5", // purple
-  "#e3692c", // orange
-];
-
-// Generate a deterministic color for a label
-export const getColorForLabel = (label: string | undefined): string => {
-  if (!label) return "#5398cf"; // light blue default
-
-  const hash = generateStringHash(label);
-  const index = Math.abs(hash) % colorOptions.length;
-  return colorOptions[index];
-};
-
-// Size configuration
-export const sizeConfig = {
-  small: {
-    size: "cm:w-3.5 cm:h-3.5", // 14x14
-    text: "cm:text-[8px]",
-    leading: "cm:leading-[12px]",
-  },
-  default: {
-    size: "cm:w-4 cm:h-4", // 16x16
-    text: "cm:text-[9px]",
-    leading: "cm:leading-[13.5px]",
-  },
-  large: {
-    size: "cm:w-7 cm:h-[18px]", // 28x18
-    text: "cm:text-sm",
-    leading: "cm:leading-[18px]",
-  },
-};

package/src/components/Avatar/index.tsx

@@ -1,42 +0,0 @@
-import React, { useMemo } from 'react';
-import { getColorForLabel, sizeConfig } from './constants';
-
-export interface AvatarProps {
-  name: string;
-  size?: 'small' | 'default' | 'large';
-  className?: string;
-  color?: string;
-  labelName?: string;
-}
-
-const Avatar: React.FC<AvatarProps> = ({ name, size = 'default', className, color, labelName }) => {
-  // Get first letter of the name
-  const initial = name.charAt(0).toUpperCase() || 'A';
-  
-
-  const assignedColor = useMemo(() => 
-    color ? color : getColorForLabel(labelName),
-  [color, labelName]);
-
-  const avatarData = useMemo(() => ({
-    backgroundColor: assignedColor,
-  }), [assignedColor]);
-  
-  const sizeStyles = sizeConfig[size];
-  
-  return (
-    <div
-      className={`cm:flex cm:flex-col cm:items-center cm:justify-center cm:rounded-full ${sizeStyles.size} cm:shrink-0 cm:relative ${className || ''}`}
-      style={avatarData}
-    >
-      <div className="cm:flex cm:flex-col cm:gap-0 cm:items-center cm:justify-center cm:w-full cm:h-full">
-        <p className={`cm:font-medium ${sizeStyles.leading} ${sizeStyles.text} cm:text-white cm:text-center cm:whitespace-nowrap`}>
-          {initial}
-        </p>
-      </div>
-    </div>
-  );
-};
-
-export default Avatar;
-

package/src/components/BreadcrumbsSection/index.tsx

@@ -1,16 +0,0 @@
-import { Breadcrumb } from 'hiver-ui-kit-extended';
-import { useBreadcrumb } from '../../hooks/useBreadcrumb';
-
-const BreadcrumbsSection = () => {
-
-    const breadcrumbItems = useBreadcrumb();
-    console.log('breadcrumbItems', breadcrumbItems);
-
-    return (
-        <div className="cm:pb-2">
-            <Breadcrumb  items={breadcrumbItems} />
-        </div>
-    );
-};
-
-export default BreadcrumbsSection;

package/src/components/Card/index.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import type { CardProps } from './types';
-
-const Card: React.FC<CardProps> = ({ 
-  children, 
-  header, 
-  className = '', 
-  onClick,
-  maxWidth = 'cm:max-w-[1000px]'
-}) => {
-  return (
-    <div
-      className={`cm:bg-slate-surface-white cm:border cm:border-slate-border-light cm:rounded-[12px] cm:relative cm:w-full ${maxWidth} ${className}`}
-      onClick={onClick}
-    >
-      <div className="cm:flex cm:flex-col cm:items-start cm:overflow-clip cm:relative cm:rounded-[inherit] cm:w-full">
-        {header && (
-          <div className="cm:border-b cm:border-slate-border-light cm:box-border cm:flex cm:h-12 cm:items-center cm:px-0 cm:pr-4 cm:py-0 cm:relative cm:shrink-0 cm:w-full">
-            {header}
-          </div>
-        )}
-        <div className="cm:box-border cm:flex cm:flex-col cm:items-start cm:px-0 cm:py-0 cm:relative cm:shrink-0 cm:w-full">
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Card;
-

package/src/components/Card/types.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from 'react';
-
-export interface CardProps {
-  children: ReactNode;
-  header?: ReactNode;
-  className?: string;
-  onClick?: () => void;
-  maxWidth?: string;
-}
-

package/src/components/ContactConversation/Converation.tsx

@@ -1,14 +0,0 @@
-import RightPanel from "../RightPanel";
-const Converation = () => {
-  return (
-    <div className="cm:flex cm:gap-4 cm:items-start cm:relative cm:shrink-0 cm:w-full cm:h-[100vh]">
-      <div className="cm:flex-1">dummy data</div>
-
-      <div className="cm:border-l cm:h-full cm:border-slate-border-light cm:w-[330px]">
-        <RightPanel />
-      </div>
-    </div>
-  );
-};
-
-export default Converation;

package/src/components/ContactConversation/index.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-import ConversationBox from '../ConversationBox';
-import type { ConversationBoxProps } from '../ConversationBox/types';
-
-// Sample conversation data for contact - can be filtered by contact later
-const conversations: Omit<ConversationBoxProps, 'onClick'>[] = [
-  {
-    type: 'chat',
-    status: 'open',
-    senderName: 'Blake Lively',
-    timestamp: 'Feb 4, 02:45 PM',
-    messagePreview: 'I am unable to access key features. The loading times are excessive, hindering my workflow. Can you please investigate?',
-    mailboxName: 'Sales',
-    assignedAgent: {
-      name: 'Alice Adams',
-    },
-  },
-  {
-    type: 'email',
-    status: 'pending',
-    senderName: 'Ryan Reynolds',
-    timestamp: 'Feb 4, 02:45 PM',
-    heading: 'Issue with the app',
-    messagePreview: 'I am having trouble with the app. It keeps crashing and I am losing data. Can you please help?',
-    mailboxName: 'Finance',
-    assignedAgent: {
-      name: 'Andy Rue',
-    },
-  },
-  {
-    type: 'chat',
-    status: 'pending',
-    senderName: 'Chris Pratt',
-    timestamp: 'Feb 4, 02:45 PM',
-    messagePreview: 'I am encountering persistent error messages when trying to save changes. This is impacting my productivity. Please assist.',
-    mailboxName: 'Sales',
-    assignedAgent: {
-      name: 'Kate Wills',
-    },
-  },
-  {
-    type: 'email',
-    status: 'closed',
-    senderName: 'Zoe Saldana',
-    timestamp: 'Feb 4, 02:45 PM',
-    heading: "Can't log in to my account",
-    messagePreview: 'I am experiencing synchronization problems across devices. My data is not updating correctly. Could you resolve this?',
-    mailboxName: 'Finance',
-    assignedAgent: {
-      name: 'Kevin Smith',
-    },
-  },
-];
-
-const ContactConversation: React.FC = () => {
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  console.log('Current route:', location.pathname);
-
-
-  const handleConversationClick = () => {
-    navigate('/conversation');
-  };
-
-  return (
-    <div className="cm:flex cm:flex-col cm:gap-2 cm:p-6 cm:w-full">
-      {conversations.map((conversation, index) => (
-        <ConversationBox
-          key={index}
-          {...conversation}
-          onClick={handleConversationClick}
-        />
-      ))}
-    </div>
-  );
-};
-
-export default ContactConversation;
-

package/src/components/ContactDetails/index.tsx

@@ -1,111 +0,0 @@
-import React, { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
-import { contactsData, accountData } from '../../constants/index';
-import accountsIcon from '../../assets/accounts.svg';
-import atTheRateIcon from '../../assets/at_the_rate.svg';
-import phoneIcon from '../../assets/phone.svg';
-import Avatar from '../Avatar';
-import EditContact from '../Contacts/EditContact';
-
-interface DetailRowProps {
-  icon: React.ReactNode;
-  label: string;
-  value: string | number;
-  valueColor?: 'default' | 'primary';
-}
-
-const DetailRow: React.FC<DetailRowProps> = ({ icon, label, value, valueColor = 'default' }) => (
-  <div className="cm:flex cm:flex-col cm:items-start cm:relative cm:shrink-0 cm:w-full">
-    <div className="cm:flex cm:h-9 cm:items-center cm:relative cm:shrink-0 cm:w-full">
-      <div className="cm:flex cm:gap-2 cm:items-center cm:relative cm:shrink-0 cm:w-[100px]">
-        <div className="cm:relative cm:shrink-0 cm:w-3.5 cm:h-3.5 cm:flex cm:items-center cm:justify-center">
-          {icon}
-        </div>
-        <p className="cm:font-normal cm:leading-5 cm:text-sm cm:text-left cm:text-slate-text-subtle cm:w-[90px]">
-          {label}
-        </p>
-      </div>
-      <div className="cm:flex-1 cm:flex cm:gap-2 cm:h-full cm:items-center cm:min-w-0 cm:px-1 cm:py-0 cm:relative cm:shrink-0">
-        <p className={`cm:font-medium cm:leading-5 cm:text-sm cm:whitespace-nowrap ${
-          valueColor === 'primary' 
-            ? 'cm:text-primary-text-default' 
-            : 'cm:text-slate-text-title'
-        }`}>
-          {value}
-        </p>
-      </div>
-    </div>
-  </div>
-);
-
-const ContactDetails: React.FC = () => {
-  const { contactId } = useParams<{ contactId: string }>();
-
-  const contact = useMemo(() => {
-    if (!contactId) return null;
-    return contactsData.data.results.find(
-      (cont: { id: number }) => cont.id.toString() === contactId
-    );
-  }, [contactId]);
-
-  const account = useMemo(() => {
-    if (!contact?.company?.id) return null;
-    return accountData.data.results.find(
-      (acc: { id: number }) => acc.id === contact.company.id
-    );
-  }, [contact]);
-
-  if (!contact) {
-    return (
-      <div>
-        <p className="cm:text-sm cm:text-slate-text-subtle">Contact not found</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="cm:flex cm:flex-col cm:gap-[20px] cm:items-stretch cm:relative cm:shrink-0 cm:w-full">
-      {/* Contact Name Section */}
-      <div className="cm:flex cm:items-center cm:justify-between cm:px-0 cm:rounded-[6px] cm:shrink-0">
-      <div className="cm:flex cm:gap-3 cm:items-center cm:relative cm:shrink-0 cm:w-full">
-        {/* Contact Avatar */}
-        <Avatar 
-          name={contact.name} 
-          labelName={contact.name} 
-          size="large"
-          className="cm:w-[28px] cm:h-[28px]"
-        />
-        <p className="cm:font-medium cm:leading-5 cm:text-sm cm:text-slate-text-title cm:whitespace-nowrap">
-          {contact.name}
-        </p>
-      </div>
-      <EditContact />
-      </div>
-
-      {/* Details Section */}
-      {/* <div className="cm:flex cm:flex-col cm:gap-0.5 cm:items-start cm:relative cm:shrink-0 cm:w-full"> */}
-        {account && (
-          <DetailRow
-            icon={<img src={accountsIcon} alt="account" className="cm:w-3.5 cm:h-3.5" />}
-            label="Account"
-            value={account.name}
-          />
-        )}
-        <DetailRow
-          icon={<img src={atTheRateIcon} alt="email" className="cm:w-3.5 cm:h-3.5" />}
-          label="Email"
-          value={contact.email || 'N/A'}
-          valueColor="primary"
-        />
-        <DetailRow
-          icon={<img src={phoneIcon} alt="phone" className="cm:w-3.5 cm:h-3.5" />}
-          label="Phone"
-          value={contact.phone_number || 'N/A'}
-        />
-      {/* </div> */}
-    </div>
-  );
-};
-
-export default ContactDetails;
-

package/src/components/Contacts/EditContact.tsx

@@ -1,213 +0,0 @@
-import { useState } from "react";
-import { Dialog, Button, TextField } from "hiver-ui-kit-extended";
-import Avatar from "../Avatar";
-import closeIcon from "../../assets/close.svg";
-import Icon from "../Icon";
-
-interface Contact {
-  id: string;
-  name: string;
-  email: string;
-  phone_number?: string;
-}
-
-interface EditContactProps {
-  contact?: Contact;
-  open?: boolean;
-  onClose?: () => void;
-}
-
-const EditContact = ({ contact, open = false, onClose }: EditContactProps) => {
-  const [dialogOpen, setDialogOpen] = useState(open);
-  const [formData, setFormData] = useState({
-    name: contact?.name || "",
-    email: contact?.email || "",
-    phone_number: contact?.phone_number || "",
-  });
-
-  const [errors, setErrors] = useState({
-    name: "",
-    email: "",
-    phone_number: "",
-  });
-
-  const handleClick = () => {
-    setDialogOpen(true);
-  };
-
-  const handleClose = () => {
-    setDialogOpen(false);
-    setFormData({
-      name: contact?.name || "",
-      email: contact?.email || "",
-      phone_number: contact?.phone_number || "",
-    });
-    setErrors({ name: "", email: "", phone_number: "" });
-    onClose?.();
-  };
-
-  const validateForm = () => {
-    const newErrors = {
-      name: "",
-      email: "",
-      phone_number: "",
-    };
-
-    let isValid = true;
-
-    if (!formData.name.trim()) {
-      newErrors.name = "Name is required";
-      isValid = false;
-    }
-
-    if (!formData.email.trim()) {
-      newErrors.email = "Email is required";
-      isValid = false;
-    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-      newErrors.email = "Please enter a valid email";
-      isValid = false;
-    }
-
-    setErrors(newErrors);
-    return isValid;
-  };
-
-  const handleSubmit = () => {
-    if (validateForm()) {
-      console.log("Form submitted:", formData);
-      alert("Contact updated successfully!");
-      handleClose();
-    }
-  };
-
-  const handleInputChange = (field: keyof typeof formData, value: string) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-    // Clear error when user starts typing
-    if (errors[field]) {
-      setErrors((prev) => ({ ...prev, [field]: "" }));
-    }
-  };
-
-  const renderHeader = () => {
-    return (
-      <div className="cm:flex cm:items-center cm:justify-between cm:w-full">
-        <div className="cm:text-slate-text-title cm:text-base cm:font-semibold cm:leading-6">
-          {contact ? "Edit Contact" : "Add Contact"}
-        </div>
-        <Button
-          onClick={handleClose}
-          variant="text"
-          icon={closeIcon}
-          size="small"
-          color="primary"
-          className="cm:p-0"
-        />
-      </div>
-    );
-  };
-
-  const renderContent = () => {
-    return (
-      <div className="" onClick={(e) => e.stopPropagation()}>
-        {/* Contact Avatar and Info */}
-        {contact && (
-          <div className="cm:flex cm:items-center cm:gap-3 cm:mb-6">
-            <Avatar name={formData.name} labelName={formData.name} />
-            <div className="cm:flex cm:flex-col">
-              <p className="cm:text-slate-text-title cm:text-sm cm:font-medium cm:leading-5 cm:m-0">
-                {contact.name}
-              </p>
-              <p className="cm:text-slate-text-subtle cm:text-xs cm:font-normal cm:leading-[18px] cm:m-0">
-                {contact.email}
-              </p>
-            </div>
-          </div>
-        )}
-
-        {/* Form Fields */}
-        <div className="cm:flex cm:flex-col cm:gap-4 cm:mb-6">
-          {/* Name Field */}
-          <div className="cm:flex cm:flex-col cm:gap-1.5">
-            <label className="cm:text-slate-text-title cm:text-sm cm:font-medium cm:leading-5">
-              Name <span className="cm:text-error">*</span>
-            </label>
-            <TextField
-              placeholder="Enter contact name"
-              value={formData.name}
-              onChange={(e) => handleInputChange("name", e.target.value)}
-              className="cm:w-full"
-              error={!!errors.name}
-            />
-            {errors.name && (
-              <span className="cm:text-error cm:text-xs cm:font-normal cm:leading-[18px]">
-                {errors.name}
-              </span>
-            )}
-          </div>
-
-          {/* Email Field */}
-          <div className="cm:flex cm:flex-col cm:gap-1.5">
-            <label className="cm:text-slate-text-title cm:text-sm cm:font-medium cm:leading-5">
-              Email <span className="cm:text-error">*</span>
-            </label>
-            <TextField
-              placeholder="Enter email address"
-              value={formData.email}
-              onChange={(e) => handleInputChange("email", e.target.value)}
-              className="cm:w-full"
-              error={!!errors.email}
-            />
-            {errors.email && (
-              <span className="cm:text-error cm:text-xs cm:font-normal cm:leading-[18px]">
-                {errors.email}
-              </span>
-            )}
-          </div>
-
-          {/* Phone Field */}
-          <div className="cm:flex cm:flex-col cm:gap-1.5">
-            <label className="cm:text-slate-text-title cm:text-sm cm:font-medium cm:leading-5">
-              Phone Number
-            </label>
-            <TextField
-              placeholder="Enter phone number"
-              value={formData.phone_number}
-              onChange={(e) => handleInputChange("phone_number", e.target.value)}
-              className="cm:w-full"
-            />
-          </div>
-        </div>
-
-        {/* Action Buttons */}
-
-      </div>
-    );
-  };
-
-  return (
-    <div>
-
-      <Icon name="edit" size={16} type="active" color="#0F172A"   onClick={handleClick}/>
-
-      <Dialog
-        open={dialogOpen}
-        onClose={handleClose}
-        maxWidth="sm"
-        title={renderHeader()}
-        className="cm:bg-slate-surface-white cm:w-[400px]"
-        footer={        <div className="cm:flex cm:gap-3 cm:items-center cm:justify-end cm:w-full">
-            <Button variant="outlined" size="medium" onClick={handleClose}>
-              Cancel
-            </Button>
-            <Button onClick={handleSubmit} size="medium">
-              Save
-            </Button>
-          </div>}
-      >
-        {renderContent()}
-      </Dialog>
-    </div>
-  );
-};
-
-export default EditContact;

package/src/components/Contacts/constants/index.tsx

@@ -1,24 +0,0 @@
-export const mockContacts = [
-    {
-      id: '1',
-      name: 'Bob Johnson',
-      email: 'bobjohnson@company.com',
-      initial: 'B',
-      avatarColor: 'bg-[#ac80b7]', // pastel-violet
-    },
-    {
-      id: '2',
-      name: 'Martin George',
-      email: 'martingeorge@company.com',
-      initial: 'M',
-      avatarColor: 'bg-[#d04b4f]', // pastel-red
-      isSelected: true,
-    },
-    {
-      id: '3',
-      name: 'Alice Smith',
-      email: 'alicesmith@company.com',
-      initial: 'A',
-      avatarColor: 'bg-[#5398cf]', // pastel-light-blue
-    },
-  ];