@buerokratt-ria/common-gui-components 0.0.1

package/ui-components/HistoricalChat/index.tsx

@@ -0,0 +1,282 @@
+import React, { FC, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import { MdOutlineModeEditOutline, MdOutlineSave } from "react-icons/md";
+
+import { Button, FormSelect, FormTextarea, Icon, Track } from "../";
+import { ReactComponent as BykLogoWhite } from "../../assets/logo-white.svg";
+import { CHAT_EVENTS, Chat as ChatType, BACKOFFICE_NAME } from "../../types/chat";
+import { Message } from "../../types/message";
+import ChatMessage from "./ChatMessage";
+import "./HistoricalChat.scss";
+import { apiDev } from "../../services/api";
+import ChatEvent from "../../ui-components/ChatEvent";
+import { ToastContextType } from "../../context";
+
+type ChatProps = {
+  chat: ChatType;
+  header_link?: string;
+  trigger: boolean;
+  onChatStatusChange: (event: string) => void;
+  onCommentChange: (comment: string) => void;
+  selectedStatus: string | null;
+  showComment?: boolean;
+  showStatus?: boolean;
+  toastContext: ToastContextType | null;
+  onMessageClick?: (message: Message) => void;
+};
+
+type GroupedMessage = {
+  name: string;
+  title: string;
+  type: string;
+  messages: Message[];
+};
+
+const chatStatuses = [
+  CHAT_EVENTS.ACCEPTED,
+  CHAT_EVENTS.CLIENT_LEFT_FOR_UNKNOWN_REASONS,
+  CHAT_EVENTS.CLIENT_LEFT_WITH_ACCEPTED,
+  CHAT_EVENTS.CLIENT_LEFT_WITH_NO_RESOLUTION,
+  CHAT_EVENTS.HATE_SPEECH,
+  CHAT_EVENTS.OTHER,
+  CHAT_EVENTS.RESPONSE_SENT_TO_CLIENT_EMAIL,
+];
+
+const HistoricalChat: FC<ChatProps> = ({
+  chat,
+  header_link,
+  trigger,
+  selectedStatus,
+  onChatStatusChange,
+  onCommentChange,
+  showComment = true,
+  showStatus = true,
+  toastContext,
+  onMessageClick,
+}) => {
+  const { t } = useTranslation();
+  const chatRef = useRef<HTMLDivElement>(null);
+  const [messageGroups, setMessageGroups] = useState<GroupedMessage[]>([]);
+  const [editingComment, setEditingComment] = useState<string | null>(null);
+  const [messagesList, setMessagesList] = useState<Message[]>([]);
+  const [status, setStatus] = useState<string | null>(selectedStatus ?? null);
+  const [lastMessage, setLastMessage] = useState<Message>();
+  const [statuses, setStatuses] = useState(chatStatuses);
+
+  useEffect(() => {
+    getMessages();
+  }, [trigger]);
+
+  useEffect(() => {
+    const initializeComponent = () => {
+      setMessageGroups([]);
+      setMessagesList([]);
+      setLastMessage(undefined);
+      setStatuses(chatStatuses);
+      getMessages();
+    };
+
+    initializeComponent();
+  }, [chat]);
+
+  const getMessages = async () => {
+    if (!chat.id) return;
+    const { data: res } = await apiDev.post("agents/messages-by-id", {
+      chatId: chat.id,
+    });
+    setMessagesList(res.response);
+  };
+
+  const endUserFullName =
+    chat.endUserFirstName && chat.endUserLastName && chat.endUserFirstName !== "" && chat.endUserLastName !== ""
+      ? `${chat.endUserFirstName} ${chat.endUserLastName}`
+      : t("global.anonymous");
+
+  useEffect(() => {
+    setStatus(selectedStatus);
+  }, [selectedStatus, status]);
+
+  useEffect(() => {
+    if (!messagesList) return;
+    let groupedMessages: GroupedMessage[] = [];
+    messagesList.forEach((message) => {
+      const lastGroup = groupedMessages[groupedMessages.length - 1];
+      if (lastGroup?.type === message.authorRole) {
+        if (
+          !message.event ||
+          message.event.toLowerCase() === CHAT_EVENTS.GREETING ||
+          message.event.toLowerCase() === CHAT_EVENTS.WAITING_VALIDATION ||
+          message.event.toLowerCase() === CHAT_EVENTS.APPROVED_VALIDATION
+        ) {
+          lastGroup.messages.push({
+            ...message,
+            content:
+              message.event === CHAT_EVENTS.WAITING_VALIDATION
+                ? t("chat.waiting_validation").toString()
+                : message.content,
+          });
+        } else {
+          groupedMessages.push({
+            name: "",
+            type: "event",
+            title: "",
+            messages: [{ ...message }],
+          });
+        }
+      } else {
+        const isBackOfficeUser =
+          message.authorRole === "backoffice-user"
+            ? `${message.authorFirstName} ${message.authorLastName}`
+            : BACKOFFICE_NAME.DEFAULT;
+        groupedMessages.push({
+          name: message.authorRole === "end-user" ? endUserFullName : isBackOfficeUser,
+          type: message.authorRole,
+          title: message.csaTitle ?? "",
+          messages: [{ ...message }],
+        });
+      }
+    });
+
+    setMessageGroups(groupedMessages);
+    const lastMessage = messagesList[messagesList.length - 1];
+    if (
+      lastMessage?.event?.toLowerCase() === CHAT_EVENTS.CLIENT_LEFT_FOR_UNKNOWN_REASONS ||
+      lastMessage?.event?.toLowerCase() === CHAT_EVENTS.HATE_SPEECH ||
+      lastMessage?.event?.toLowerCase() === CHAT_EVENTS.OTHER ||
+      lastMessage?.event?.toLowerCase() === CHAT_EVENTS.RESPONSE_SENT_TO_CLIENT_EMAIL
+    ) {
+      setStatuses([CHAT_EVENTS.HATE_SPEECH, CHAT_EVENTS.OTHER, CHAT_EVENTS.RESPONSE_SENT_TO_CLIENT_EMAIL]);
+    } else if (
+      lastMessage?.event?.toLowerCase() === CHAT_EVENTS.CLIENT_LEFT_WITH_ACCEPTED ||
+      lastMessage?.event?.toLowerCase() === CHAT_EVENTS.CLIENT_LEFT_WITH_NO_RESOLUTION
+    ) {
+      setStatuses([]);
+    } else {
+      setStatuses(chatStatuses);
+    }
+    setLastMessage(lastMessage);
+  }, [messagesList, endUserFullName]);
+
+  useEffect(() => {
+    if (!chatRef.current || !messageGroups) return;
+    chatRef.current.scrollIntoView({ block: "end", inline: "end" });
+  }, [messageGroups]);
+
+  const isEvent = (group: GroupedMessage) => {
+    return (
+      group.type === "event" || group.name.trim() === "" || (!group.messages[0].content && group.messages[0].event)
+    );
+  };
+
+  return (
+      <div className="historical-chat">
+        <div className="historical-chat__body">
+          {header_link && <div className={"header-link"}>{header_link}</div>}
+          <div className="historical-chat__group-wrapper">
+            {messageGroups?.map((group, index) => (
+              <div
+                className={clsx(["historical-chat__group", `historical-chat__group--${group.type}`])}
+                key={`${group.name}-${index}`}
+              >
+                {isEvent(group) ? (
+                  <ChatEvent message={group.messages[0]} />
+                ) : (
+                  <>
+                    <div className="historical-chat__group-initials">
+                      {group.type === "buerokratt" || group.type === "chatbot" ? (
+                        <BykLogoWhite height={24} />
+                      ) : (
+                        <>
+                          {group.name
+                            .split(" ")
+                            .map((n) => n[0])
+                            .join("")
+                            .toUpperCase()}
+                        </>
+                      )}
+                    </div>
+                    <div className="historical-chat__group-name">
+                      {group.name}
+                      {group.title.length > 0 && <div className="title">{group.title}</div>}
+                    </div>
+                    <div className="historical-chat__messages">
+                      {group.messages.map((message, i) => (
+                        <ChatMessage
+                          message={message}
+                          key={`${message.id ?? ""}-${i}`}
+                          toastContext={toastContext}
+                          onMessageClick={(message) => {
+                            onMessageClick?.(message);
+                          }}
+                        />
+                      ))}
+                    </div>
+                  </>
+                )}
+              </div>
+            ))}
+            <div id="anchor" ref={chatRef}></div>
+          </div>
+          {lastMessage && (
+            <div className="historical-chat__toolbar">
+              {showComment && (
+                <div className="historical-chat__toolbar-row">
+                  <Track gap={16} justify="between">
+                    {editingComment || editingComment === "" ? (
+                      <FormTextarea
+                        name="comment"
+                        label={t("global.comment")}
+                        value={editingComment}
+                        hideLabel
+                        onChange={(e) => setEditingComment(e.target.value)}
+                      />
+                    ) : (
+                      <p className={`historical-chat__comment-text ${chat.comment ? "" : "placeholder"}`}>
+                        {chat.comment ?? t("chat.history.addACommentToTheConversation")}
+                      </p>
+                    )}
+                    {editingComment || editingComment === "" ? (
+                      <Button
+                        appearance="text"
+                        onClick={() => {
+                          onCommentChange(editingComment);
+                          setEditingComment(null);
+                        }}
+                      >
+                        <Icon icon={<MdOutlineSave />} />
+                        {t("global.save")}
+                      </Button>
+                    ) : (
+                      <Button appearance="text" onClick={() => setEditingComment(chat.comment ?? "")}>
+                        <Icon icon={<MdOutlineModeEditOutline />} />
+                        {t("global.edit")}
+                      </Button>
+                    )}
+                  </Track>
+                </div>
+              )}
+              {showStatus && statuses.length > 0 && (
+                <div className="historical-chat__toolbar-row">
+                  <FormSelect
+                    name="chatStatus"
+                    label={t("chat.chatStatus")}
+                    direction="up"
+                    defaultValue={status ?? ""}
+                    onSelectionChange={(selection) => (selection ? onChatStatusChange(selection.value) : null)}
+                    options={statuses.map((status) => ({
+                      label: t(`chat.events.${status}`, { date: "" }),
+                      value: status,
+                    }))}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        <div id="anchor" ref={chatRef}></div>
+      </div>
+  );
+};
+
+export default HistoricalChat;

package/ui-components/Icon/Icon.scss

@@ -0,0 +1,17 @@
+@import 'src/styles/tools/spacing';
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &--small {
+    width: get-spacing(haapsalu);
+    height: get-spacing(haapsalu);
+  }
+
+  &--medium {
+    width: get-spacing(kuressaare);
+    height: get-spacing(kuressaare);
+  }
+}

package/ui-components/Icon/index.tsx

@@ -0,0 +1,26 @@
+import React, { CSSProperties, forwardRef, ReactNode, StyleHTMLAttributes } from 'react';
+import * as AccessibleIcon from '@radix-ui/react-accessible-icon';
+import clsx from 'clsx';
+
+import './Icon.scss';
+
+type IconProps = StyleHTMLAttributes<CSSProperties> & {
+    label?: string | null;
+    icon: ReactNode;
+    size?: 'small' | 'medium';
+};
+
+const Icon = forwardRef<HTMLSpanElement, IconProps>(({ label, icon, size = 'small', ...rest }, ref) => {
+    const iconClasses = clsx(
+        'icon',
+        `icon--${size}`,
+    );
+
+    return (
+        <AccessibleIcon.Root label={label ?? ''}>
+            <span ref={ref} className={iconClasses} style={rest.style}>{icon}</span>
+        </AccessibleIcon.Root>
+    );
+});
+
+export default Icon;

package/ui-components/Label/Label.scss

@@ -0,0 +1,76 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.label {
+  $self: &;
+  display: flex;
+  padding: 1.5px 16px;
+  font-size: $veera-font-size-80;
+  font-weight: $veera-font-weight-delta;
+  border: 2px solid;
+  background-color: get-color(white);
+  border-radius: $veera-radius-s;
+  position: relative;
+
+  &--info {
+    color: get-color(sapphire-blue-10);
+    border-color: get-color(sapphire-blue-10);
+
+    #{$self} {
+      &__icon {
+        border-color: get-color(sapphire-blue-10);
+      }
+    }
+  }
+
+  &--warning {
+    color: get-color(dark-tangerine-10);
+    border-color: get-color(dark-tangerine-10);
+
+    #{$self} {
+      &__icon {
+        border-color: get-color(dark-tangerine-10);
+      }
+    }
+  }
+
+  &--error {
+    color: get-color(jasper-10);
+    border-color: get-color(jasper-10);
+
+    #{$self} {
+      &__icon {
+        border-color: get-color(jasper-10);
+      }
+    }
+  }
+
+  &--success {
+    color: get-color(sea-green-10);
+    border-color: get-color(sea-green-10);
+
+    #{$self} {
+      &__icon {
+        border-color: get-color(sea-green-10);
+      }
+    }
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    font-size: 13px;
+    line-height: 15px;
+    right: -8px;
+    top: 4px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 2px solid;
+    background-color: get-color(white);
+  }
+}

package/ui-components/Label/index.tsx

@@ -0,0 +1,40 @@
+import React, { forwardRef, PropsWithChildren, ReactNode } from 'react';
+import clsx from 'clsx';
+import { MdOutlineCheck } from 'react-icons/md';
+
+import { Tooltip } from '../';
+import './Label.scss';
+
+type LabelProps = {
+    type?: 'warning' | 'error' | 'info' | 'success';
+    tooltip?: ReactNode;
+}
+
+const Label = forwardRef<HTMLSpanElement, PropsWithChildren<LabelProps>>((
+    {
+        type = 'info',
+        tooltip,
+        children,
+    }, ref,
+) => {
+    const labelClasses = clsx(
+        'label',
+        `label--${type}`,
+        tooltip && 'label--tooltip',
+    );
+
+    return (
+        <span ref={ref} className={labelClasses}>
+      {children}
+            {tooltip && (
+                <Tooltip content={tooltip}>
+          <span className='label__icon'>
+            {type === 'success' ? <MdOutlineCheck /> : 'i'}
+          </span>
+                </Tooltip>
+            )}
+    </span>
+    );
+});
+
+export default Label;

package/ui-components/OptionMessage/OptionMessage.scss

@@ -0,0 +1,16 @@
+@import 'src/styles/tools/color';
+
+.option-container {
+  display: flex;
+  gap: 12px;
+  margin: 0.3rem 0 0.7rem 0;
+
+  span {
+    padding: 0 0.5rem;
+    background-color: get-color(sea-green-12);
+    color: get-color(white);
+    border-radius: 8px;
+    box-shadow: 2px 1px 4px rgb(159, 159, 159);
+    opacity: 0.7;
+  }
+}

package/ui-components/OptionMessage/index.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import './OptionMessage.scss';
+
+type OptionMessageProps = {
+    options: string[];
+};
+
+const OptionMessage: FC<OptionMessageProps> = ({ options }) => {
+    return (
+        <div className='option-container'>
+            {options.map(option => <span key={option}>{option}</span>)}
+        </div>
+    );
+};
+
+export default OptionMessage;

package/ui-components/Toast/Toast.scss

@@ -0,0 +1,73 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.toast {
+  padding: 16px;
+  border-radius: 5px;
+  border: 1px solid;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+  transition: opacity 0.25s ease-out;
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-right: 25px;
+  }
+
+  &__list {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 8px;
+    width: 408px;
+    max-width: 100vw;
+    z-index: 9999;
+    list-style: none;
+  }
+
+  &__content {
+    font-size: $veera-font-size-80;
+
+    a {
+      display: inline;
+      color: get-color(sapphire-blue-10);
+      text-decoration: underline;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    font-size: 20px;
+  }
+
+  &--success {
+    border-color: get-color(sea-green-10);
+    background-color: get-color(sea-green-0);
+  }
+
+  &--info {
+    border-color: get-color(sapphire-blue-10);
+    background-color: get-color(sapphire-blue-1);
+  }
+
+  &--error {
+    border-color: get-color(jasper-10);
+    background-color: #FCEEEE;
+  }
+
+  &--warning {
+    border-color: get-color(dark-tangerine-10);
+    background-color: get-color(dark-tangerine-1);
+  }
+}

package/ui-components/Toast/index.tsx

@@ -0,0 +1,54 @@
+import React, { FC, useState } from 'react';
+import * as RadixToast from '@radix-ui/react-toast';
+import {
+    MdOutlineClose,
+    MdOutlineInfo,
+    MdCheckCircleOutline,
+    MdOutlineWarningAmber,
+    MdErrorOutline,
+} from 'react-icons/md';
+import clsx from 'clsx';
+
+import { Icon } from '../';
+import type { ToastType } from '../../context/ToastContext';
+import './Toast.scss';
+
+type ToastProps = {
+    toast: ToastType;
+    close: () => void;
+};
+
+const toastIcons = {
+    info: <MdOutlineInfo />,
+    success: <MdCheckCircleOutline />,
+    warning: <MdOutlineWarningAmber />,
+    error: <MdErrorOutline />,
+};
+
+const Toast: FC<ToastProps> = ({ toast, close }) => {
+    const [open, setOpen] = useState(true);
+
+    const toastClasses = clsx('toast', `toast--${toast.type}`);
+
+    return (
+        <RadixToast.Root
+            className={toastClasses}
+            onEscapeKeyDown={close}
+            open={open}
+            onOpenChange={setOpen}
+        >
+            <RadixToast.Title className="toast__title h5">
+                <Icon icon={toastIcons[toast.type]} />
+                {toast.title}
+            </RadixToast.Title>
+            <RadixToast.Description className="toast__content">
+                {toast.message}
+            </RadixToast.Description>
+            <RadixToast.Close onClick={close} className="toast__close">
+                <Icon icon={<MdOutlineClose />} size="medium" />
+            </RadixToast.Close>
+        </RadixToast.Root>
+    );
+};
+
+export default Toast;

package/ui-components/Tooltip/Tooltip.scss

@@ -0,0 +1,17 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/typography';
+
+.tooltip {
+  background-color: get-color(white);
+  padding: 4px;
+  border-radius: 4px;
+  filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.25));
+  font-size: $veera-font-size-80;
+  max-width: 50vw;
+  z-index: +100;
+
+  &__arrow {
+    fill: get-color(white);
+  }
+}

package/ui-components/Tooltip/index.tsx

@@ -0,0 +1,28 @@
+import React, { FC, PropsWithChildren, ReactNode } from 'react';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+
+import './Tooltip.scss';
+
+type TooltipProps = {
+    content: ReactNode;
+}
+
+const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({ content, children }) => {
+    return (
+        <RadixTooltip.Provider delayDuration={100}>
+            <RadixTooltip.Root>
+                <RadixTooltip.Trigger asChild>
+                    {children}
+                </RadixTooltip.Trigger>
+                <RadixTooltip.Portal>
+                    <RadixTooltip.Content className='tooltip'>
+                        {content}
+                        <RadixTooltip.Arrow className='tooltip__arrow' />
+                    </RadixTooltip.Content>
+                </RadixTooltip.Portal>
+            </RadixTooltip.Root>
+        </RadixTooltip.Provider>
+    );
+};
+
+export default Tooltip;