customer-module-frontend 1.0.2

package/src/components/Contacts/EditContact.tsx

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

@@ -0,0 +1,24 @@
+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
+    },
+  ];

package/src/components/Contacts/index.tsx

@@ -0,0 +1,171 @@
+import { useState } from "react";
+import { Dialog, Button, TextField } from "hiver-ui-kit-extended";
+import { mockContacts } from "./constants";
+import Avatar from "../Avatar";
+import closeIcon from "../../assets/close.svg";
+import Icon from "../Icon";
+
+type DialogState = "add-primary-contact" | "primary-contact-confirmation";
+
+interface Contact {
+  id: string;
+  name: string;
+  email: string;
+  isSelected?: boolean;
+}
+
+const PrimaryContactsDialog = () => {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogState, setDialogState] = useState<DialogState>("add-primary-contact");
+  const [searchValue, setSearchValue] = useState("");
+  const [selectedContact, setSelectedContact] = useState<Contact | null>(null);
+
+  const handleClick = () => {
+    setDialogOpen(true);
+  };
+
+  const handleClose = () => {
+    setDialogOpen(false);
+    setDialogState("add-primary-contact");
+    setSearchValue("");
+    setSelectedContact(null);
+  };
+
+  const filteredContacts = mockContacts.filter(
+    (contact) =>
+      contact.name.toLowerCase().includes(searchValue.toLowerCase()) ||
+      contact.email.toLowerCase().includes(searchValue.toLowerCase())
+  );
+
+  const handleContactSelect = (contact: Contact) => {
+    setSelectedContact(contact);
+    setDialogState("primary-contact-confirmation");
+  };
+
+  const renderHeader = () => {
+    if (dialogState === "add-primary-contact") {
+      return (
+        <div className="flex items-center justify-between w-full">
+          <div>Change Primary Contact</div>
+          <Button
+            onClick={handleClose}
+            variant="text"
+            icon={closeIcon}
+            size="small"
+            color="primary"
+            className="p-0"
+          />
+        </div>
+      );
+    }
+    return <div>Primary Contact Confirmation</div>;
+  };
+
+  const renderContent = () => {
+    if (dialogState === "primary-contact-confirmation") {
+      return (
+        <div className="w-[380px]" onClick={(e) => e.stopPropagation()}>
+          <p className="font-['Hanken_Grotesk',sans-serif] font-normal leading-5 text-sm text-[var(--slate-text-subtle,#64758b)] m-0 w-full mb-4">
+            Are you sure you want to change the contact to {selectedContact?.name}? This will replace
+            the existing contact for this conversation.
+          </p>
+          <div className="flex gap-3 items-center justify-end w-full">
+            <Button
+              variant="outlined"
+              size="medium"
+              onClick={() => setDialogState("add-primary-contact")}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={() => {
+                alert("Contact changed!");
+                handleClose();
+              }}
+              size="medium"
+            >
+              Change
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="w-[380px]" onClick={(e) => e.stopPropagation()}>
+        <div className="w-full mb-4">
+          <TextField
+            placeholder="Search name or email"
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+          />
+        </div>
+        <div className="flex flex-col gap-2 items-start w-full">
+          <p className="font-['Hanken_Grotesk',sans-serif] font-normal leading-5 text-sm text-[#64758b]">
+            Contacts from this conversation
+          </p>
+          <div className="flex flex-col items-start w-full gap-0">
+            {filteredContacts.map((contact: Contact) => (
+              <ContactItem
+                key={contact.id}
+                contact={contact}
+                onSelect={() => handleContactSelect(contact)}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div>
+
+      <Icon name="edit" size={16} type="active" color="#0F172A" onClick={handleClick} />
+      <Dialog
+        open={dialogOpen}
+        variant="confirmation"
+        onClose={handleClose}
+        onBack={() => setDialogState("add-primary-contact")}
+        maxWidth="sm"
+        title={renderHeader()}
+      >
+        {renderContent()}
+      </Dialog>
+    </div>
+  );
+};
+
+export default PrimaryContactsDialog;
+
+const ContactItem = ({
+  contact,
+  onSelect,
+}: {
+  contact: Contact;
+  onSelect: () => void;
+}) => {
+  return (
+    <div
+      className="bg-white flex gap-3 items-center px-0 py-2 rounded-lg w-full cursor-pointer hover:bg-gray-50 transition-colors"
+      onClick={onSelect}
+    >
+      <div className="flex gap-3 items-center flex-1 min-w-0">
+        <Avatar name={contact.name} labelName={contact.name} />
+        <div className="flex flex-col items-start justify-center flex-1 min-w-0">
+          <p className="font-['Hanken_Grotesk',sans-serif] font-normal leading-5 text-sm text-[#334155] truncate w-full">
+            {contact.name}
+          </p>
+          <p className="font-['Hanken_Grotesk',sans-serif] font-normal leading-[18px] text-xs text-[#64758b] truncate w-full">
+            {contact.email}
+          </p>
+        </div>
+      </div>
+      {contact.isSelected && (
+        <div className="overflow-clip relative shrink-0 w-3.5 h-3.5">
+          <i className="pi pi-check text-[#276cf0] text-sm"></i>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/ConversationBox/constants.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import type { ConversationStatus, ConversationBoxSize } from "./types";
+import statusOpenIcon from '../../assets/status_open.svg';
+import statusPendingIcon from '../../assets/status-snoozed.svg';
+import statusClosedIcon from '../../assets/status-resolved.svg';
+import conversationIcon from '../../assets/conversation.svg';
+import emailIcon from '../../assets/email.svg';
+import sharedMailboxIcon from '../../assets/sm_inbox.svg';
+
+// Status configuration with colors and icons
+export const statusConfig: Record<ConversationStatus, { label: string; color: string; iconColor: string; icon: string }> = {
+    open: { label: 'Open', color: '#E37144', iconColor: '#E3692C', icon: statusOpenIcon },
+    pending: { label: 'Pending', color: '#5398CF', iconColor: '#EC8A54', icon: statusPendingIcon },
+    closed: { label: 'Closed', color: '#2DBB6D', iconColor: '#276CF0', icon: statusClosedIcon },
+};
+
+// Size configuration
+export const sizeConfig: Record<ConversationBoxSize, {
+    padding: { email: string; chat: string };
+    gap: string;
+    iconSize: string;
+    fontSize: { title: string; body: string; timestamp: string };
+    avatarSize: string;
+    avatarText: string;
+    maxWidth: string;
+    dividerHeight: string;
+}> = {
+    default: {
+        padding: {
+            email: 'cm:px-5 cm:py-4',
+            chat: 'cm:px-5 cm:py-4',
+        },
+        gap: 'cm:gap-1.5',
+        iconSize: 'cm:w-3.5 cm:h-3.5',
+        fontSize: {
+            title: 'cm:text-sm',
+            body: 'cm:text-sm',
+            timestamp: 'cm:text-[13px]',
+        },
+        avatarSize: 'cm:w-4 cm:h-4',
+        avatarText: 'cm:text-[9px]',
+        maxWidth: 'cm:max-w-[914px]',
+        dividerHeight: 'cm:h-4',
+    },
+    small: {
+        padding: {
+            email: 'cm:p-4',
+            chat: 'cm:p-4',
+        },
+        gap: 'cm:gap-1',
+        iconSize: 'cm:w-3 cm:h-3',
+        fontSize: {
+            title: 'cm:text-xs',
+            body: 'cm:text-xs',
+            timestamp: 'cm:text-xs',
+        },
+        avatarSize: 'cm:w-3 cm:h-3',
+        avatarText: 'cm:text-[8px]',
+        maxWidth: 'cm:max-w-[330px]',
+        dividerHeight: 'cm:h-3',
+    },
+};
+
+// Icon components
+interface IconProps {
+    iconSize: string;
+}
+
+export const ChatIcon: React.FC<IconProps> = ({ iconSize }) => (
+    <img
+        src={conversationIcon}
+        alt="Chat"
+        className={iconSize}
+    />
+);
+
+export const EnvelopeIcon: React.FC<IconProps> = ({ iconSize }) => (
+    <img
+        src={emailIcon}
+        alt="Email"
+        className={iconSize}
+    />
+);
+
+export const SharedMailboxIcon: React.FC<IconProps> = ({ iconSize }) => (
+    <img
+        src={sharedMailboxIcon}
+        alt="Shared Mailbox"
+        className={iconSize}
+    />
+);
+
+export const StatusIcon: React.FC<IconProps & { icon: string; label: string }> = ({ iconSize, icon, label }) => (
+    <img
+        src={icon}
+        alt={label}
+        className={iconSize}
+    />
+);

package/src/components/ConversationBox/index.tsx

@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+import type { ConversationBoxProps } from './types';
+import { statusConfig, sizeConfig, ChatIcon, EnvelopeIcon, SharedMailboxIcon, StatusIcon } from './constants';
+import Avatar from '../Avatar';
+import openInANewTab from '../../assets/open_in_a_new_tab.svg';
+
+
+const ConversationBox: React.FC<ConversationBoxProps> = ({
+  type,
+  status,
+  size = 'default',
+  senderName,
+  timestamp,
+  messagePreview,
+  heading,
+  mailboxName,
+  assignedAgent,
+  onClick,
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const statusInfo = statusConfig[status];
+  const sizeStyles = sizeConfig[size];
+
+  // Divider line (vertical)
+  const Divider = () => (
+    <div className={`${sizeStyles.dividerHeight} cm:w-px cm:bg-slate-border-light cm:shrink-0`} />
+  );
+
+  const handleActionClick = (e: React.MouseEvent) => {
+    e.stopPropagation(); // Prevent triggering the onClick handler
+    // Handle action button click (e.g., show menu)
+    console.log('Action button clicked');
+  };
+
+  return (
+    <div
+      className={`cm:border cm:p-3.5 cm:border-slate-border-light cm:rounded-[10px] cm:flex cm:flex-col ${sizeStyles.gap} cm:w-full ${sizeStyles.maxWidth} cm:cursor-pointer hover:cm:bg-slate-surface-subtle_100 cm:transition-colors cm:relative ${type === 'email' ? sizeStyles.padding.email : sizeStyles.padding.chat
+        }`}
+      onClick={onClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Top row: Sender, Status, Timestamp */}
+      <div className={`cm:flex ${size === 'small' ? 'cm:gap-2' : 'cm:gap-2.5'} cm:items-center cm:w-full`}>
+        <div className={`cm:flex-1 cm:flex ${size === 'small' ? 'cm:gap-2' : 'cm:gap-2.5'} cm:items-center cm:min-w-0`}>
+          {/* Icon and Sender Name */}
+          <div className={`cm:flex ${size === 'small' ? 'cm:gap-1.5' : 'cm:gap-2'} cm:items-center cm:shrink-0`}>
+            <div className={`${sizeStyles.iconSize} cm:shrink-0 cm:flex cm:items-center cm:justify-center cm:text-slate-icons-subtle`}>
+              {type === 'chat' ? <ChatIcon iconSize={sizeStyles.iconSize} /> : <EnvelopeIcon iconSize={sizeStyles.iconSize} />}
+            </div>
+            <div className="cm:flex cm:gap-1 cm:items-center">
+              <p className={`cm:font-medium cm:leading-5 ${sizeStyles.fontSize.title} cm:text-slate-text-title cm:whitespace-nowrap`}>
+                {senderName}
+              </p>
+            </div>
+          </div>
+
+          {/* Divider */}
+          <Divider />
+
+          {/* Status Chip */}
+          <div className={`cm:flex ${size === 'small' ? 'cm:gap-1.5' : 'cm:gap-2'} cm:items-center cm:justify-center cm:rounded-2xl cm:shrink-0`}>
+            <div className={`${sizeStyles.iconSize} cm:shrink-0 cm:flex cm:items-center cm:justify-center`}>
+              <StatusIcon iconSize={sizeStyles.iconSize} icon={statusInfo.icon} label={statusInfo.label} />
+            </div>
+          </div>
+        </div>
+
+        {/* Timestamp or Action Button - fixed width container to prevent layout shift */}
+        <div className="cm:relative cm:shrink-0 cm:min-w-[100px] cm:flex cm:items-center cm:justify-end">
+          {/* Timestamp - always rendered but hidden on hover */}
+          <p 
+            className={`cm:font-normal cm:leading-[18px] ${sizeStyles.fontSize.timestamp} cm:text-slate-text-subtle cm:whitespace-nowrap cm:text-right cm:transition-opacity ${
+              isHovered ? 'cm:opacity-0' : 'cm:opacity-100'
+            }`}
+          >
+            {timestamp}
+          </p>
+          
+          {/* Action Button - absolutely positioned, shown on hover */}
+          <button
+            onClick={handleActionClick}
+            className={`cm:absolute cm:right-0 cm:bg-slate-surface-white cm:border cm:border-slate-border-light cm:rounded-[6px] cm:flex cm:items-center cm:justify-center cm:p-1.5 cm:w-7 cm:h-7 cm:hover:bg-slate-surface-subtle cm:transition-all ${
+              isHovered ? 'cm:opacity-100 cm:pointer-events-auto' : 'cm:opacity-0 cm:pointer-events-none'
+            }`}
+            aria-label="Open in a new tab"
+          >
+            <div className="cm:w-3.5 cm:h-3.5 cm:flex cm:items-center cm:justify-center">
+              <img src={openInANewTab} alt="Open in a new tab" className="cm:w-3.5 cm:h-3.5" />
+            </div>
+          </button>
+        </div>
+      </div>
+
+      {/* Content Section */}
+      <div className="cm:flex cm:flex-col cm:items-start cm:w-full">
+        {/* Heading (only for email) */}
+        {type === 'email' && heading && (
+          <div className={`cm:flex ${size === 'small' ? 'cm:gap-2' : 'cm:gap-3'} cm:items-center cm:w-full`}>
+            <div className={`cm:flex-1 cm:flex cm:flex-col cm:font-normal cm:justify-center cm:leading-none cm:overflow-hidden ${sizeStyles.fontSize.body} cm:text-slate-text-body`}>
+              <p className="cm:leading-5 cm:text-left cm:overflow-ellipsis cm:overflow-hidden">
+                {heading}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Message Preview and Footer */}
+        <div className={`cm:flex ${size === 'small' ? 'cm:flex-col cm:gap-1' : 'cm:flex-row cm:items-center cm:justify-between'} cm:w-full`}>
+          <p className={`cm:font-normal cm:leading-5 cm:overflow-ellipsis cm:overflow-hidden ${sizeStyles.fontSize.body} cm:text-slate-text-subtle cm:whitespace-nowrap ${size === 'small' ? 'cm:w-full' : 'cm:max-w-[560px]'}`}>
+            {messagePreview}
+          </p>
+
+          {/* MailboxName and Assigned Agent */}
+          <div className={`cm:flex ${size === 'small' ? 'cm:gap-2 cm:w-full' : 'cm:gap-2.5'} cm:items-center cm:shrink-0`}>
+            {/* mailboxName */}
+            {mailboxName && (
+              <>
+                <div className="cm:flex cm:gap-1 cm:items-center cm:justify-center cm:py-0.5 cm:rounded cm:shrink-0">
+                  <div className={`${sizeStyles.iconSize} cm:overflow-hidden cm:shrink-0 cm:flex cm:items-center cm:justify-center cm:text-slate-icons-subtle`}>
+                    <SharedMailboxIcon iconSize={sizeStyles.iconSize} />
+                  </div>
+                  <p className={`cm:font-normal cm:leading-5 ${sizeStyles.fontSize.body} cm:text-slate-text-subtle cm:whitespace-nowrap`}>
+                    {mailboxName}
+                  </p>
+                </div>
+                <Divider />
+              </>
+            )}
+
+            {/* Assigned Agent */}
+            {assignedAgent && (
+              <div className={`cm:flex ${size === 'small' ? 'cm:gap-1' : 'cm:gap-1.5'} cm:items-center cm:shrink-0`}>
+                <Avatar name={assignedAgent.name} size={size} />
+                <p className={`cm:font-normal cm:leading-5 ${sizeStyles.fontSize.body} cm:text-slate-text-subtle cm:whitespace-nowrap`}>
+                  {assignedAgent.name}
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConversationBox;

package/src/components/ConversationBox/types.ts

@@ -0,0 +1,20 @@
+export type ConversationType = 'chat' | 'email';
+export type ConversationStatus = 'open' | 'pending' | 'closed';
+export type ConversationBoxSize = 'default' | 'small';
+
+export interface ConversationBoxProps {
+    type: ConversationType;
+    status: ConversationStatus;
+    size?: ConversationBoxSize;
+    senderName: string;
+    timestamp: string;
+    messagePreview: string;
+    heading?: string; // Only used for email type
+    mailboxName?: string;
+    assignedAgent?: {
+      name: string;
+      avatarColor?: string;
+      avatarInitial?: string;
+    };
+    onClick?: () => void;
+  }