@confidencesystemsinc/sdk 1.2.0 → 1.2.1

package/src/components/task/confidence-task.tsx

@@ -0,0 +1,297 @@
+import {
+  faCheckSquare,
+  faChevronDown,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import clsx from "clsx";
+import { useMemo, useState } from "react";
+import { useTaskDetails } from "../../hooks/task/useTaskDetails";
+import { TaskButton, useTaskButtons } from "../../hooks/useTaskButtons";
+import { PlaybookType } from "../../types/playbook.types";
+import { Task, TASK_STATUS, TaskStatus } from "../../types/task.types";
+import { cn } from "../../utils/cn";
+import Button from "../ui/button";
+import { TaskButtons } from "./task-buttons";
+import { TaskDropdownBadge } from "./task-dropdown-badge";
+import { TaskExpandedContent } from "./task-expanded-content";
+import { TaskLeftPanel } from "./task-left-panel";
+import { TaskStatusBadge } from "./task-status-badge";
+
+const TASK_CARD_COLOR: {
+  [key in TaskStatus]?: string;
+} = {
+  [TASK_STATUS.OPEN]: "border-[#C1C5C8] bg-[#F0F1F2]",
+  [TASK_STATUS.IN_PROGRESS]: "bg-[#E6F2FF] border-[#94C8FF]",
+  [TASK_STATUS.IN_REVIEW]: "bg-[#EAF6EC] border-[#A5DAB1]",
+  [TASK_STATUS.COMPLETED]: "bg-[#EAF6EC] border-[#A5DAB1]",
+};
+
+const TASK_VERIFICATION_TYPE = {
+  PHOTO: "photo",
+  SCREENSHOT: "screenshot",
+} as const;
+
+export type TaskVerificationType =
+  (typeof TASK_VERIFICATION_TYPE)[keyof typeof TASK_VERIFICATION_TYPE];
+
+export const ConfidenceTask = ({
+  task,
+  step,
+  playbookType,
+  onButtonClick,
+  viewMode = "card",
+  canStart = false,
+  isExpanded = false,
+  toggleExpanded,
+  playbookId,
+  taskStyle,
+  listStickyTopBase,
+}: {
+  task: Task;
+  playbookType: PlaybookType;
+  step: number;
+  onButtonClick: (buttonType: TaskButton) => Promise<void>;
+  viewMode?: "card" | "list";
+  canStart?: boolean;
+  isExpanded?: boolean;
+  toggleExpanded?: (expand?: boolean) => void;
+  playbookId: number;
+  taskStyle?: {
+    titleColor?: string;
+  };
+  listStickyTopBase?: number;
+}) => {
+  const [isPerformingAction, setIsPerformingAction] = useState(false);
+  const { taskDetails, prefetchQuery: prefetchTaskDetails } = useTaskDetails({
+    taskId: task.taskId,
+    playbookId,
+    enabled: isExpanded,
+  });
+  const { buttons } = useTaskButtons({
+    taskStatus: task.workflowStatus,
+    canStart,
+  });
+  const verificationType = useMemo(() => {
+    if (task.imageRequired === 0) {
+      return null;
+    }
+    if (task.imageRequired === 1) {
+      return TASK_VERIFICATION_TYPE.SCREENSHOT;
+    }
+    if (task.imageRequired === 2) {
+      return TASK_VERIFICATION_TYPE.PHOTO;
+    }
+    return null;
+  }, [task.imageRequired]);
+
+  const handleButtonClick = async (btn: TaskButton) => {
+    try {
+      setIsPerformingAction(true);
+      await onButtonClick(btn);
+    } finally {
+      setIsPerformingAction(false);
+    }
+  };
+
+  if (viewMode === "list") {
+    const BADGE_VARIANT = useMemo(() => {
+      if (task.workflowStatus === TASK_STATUS.COMPLETED) {
+        return "success";
+      }
+
+      if (task.workflowStatus === TASK_STATUS.IN_PROGRESS) {
+        return "primary";
+      }
+      return "default";
+    }, [task.workflowStatus]);
+
+    const BADGE_TRANSICTIONS = useMemo(() => {
+      const transitions: {
+        color: "primary" | "success";
+        id: TaskButton;
+        action: string;
+        to: TaskStatus;
+      }[] = [];
+      buttons.forEach((button) => {
+        if (button === "START") {
+          transitions.push({
+            id: "START",
+            color: "primary",
+            action: "Start",
+            to: TASK_STATUS.IN_PROGRESS,
+          });
+        }
+
+        if (button === "COMPLETE") {
+          transitions.push({
+            id: "COMPLETE",
+            color: "success",
+            action: "Complete",
+            to: TASK_STATUS.COMPLETED,
+          });
+        }
+      });
+
+      return transitions;
+    }, [buttons]);
+
+    return (
+      <div className={cn("flex flex-col")}>
+        <div
+          className={cn(
+            "flex gap-3 p-2 border-gray-200",
+            task.sequenceOrder > 0 && "border-t",
+            isExpanded &&
+              "bg-white rounded-md border border-t-none shadow-sm sticky",
+          )}
+          style={{
+            top: isExpanded ? listStickyTopBase : 0,
+          }}
+        >
+          <div className="text-gray-200 text-base">
+            {task.sequenceOrder + 1}
+          </div>
+          <div
+            onClick={() => {
+              toggleExpanded?.(!isExpanded);
+            }}
+            onMouseOver={prefetchTaskDetails}
+            className={cn(
+              "flex-1 truncate cursor-pointer",
+              isExpanded && "font-medium",
+              task.workflowStatus === TASK_STATUS.COMPLETED &&
+                "text-secondary-400 line-through",
+            )}
+            style={{
+              color:
+                (task.workflowStatus === TASK_STATUS.IN_PROGRESS &&
+                  taskStyle?.titleColor) ||
+                "#1C232D",
+            }}
+          >
+            {task.taskInstanceName}
+          </div>
+          <TaskDropdownBadge
+            title={task.workflowStatus}
+            variant={BADGE_VARIANT}
+            transitions={BADGE_TRANSICTIONS}
+            onClick={(action) => {
+              onButtonClick(action as TaskButton);
+            }}
+          />
+        </div>
+        {taskDetails?.description && (
+          <div
+            className={cn(
+              !isExpanded && "hidden",
+              "border-gray-200 border p-2 mx-4 mb-4 border-t-none -mt-0.5 bg-gray-100 rounded-b-md",
+            )}
+          >
+            <TaskExpandedContent description={taskDetails?.description || ""} />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={clsx(
+        "flex items-stretch rounded-sm overflow-hidden border",
+        TASK_CARD_COLOR[task.workflowStatus],
+      )}
+    >
+      <TaskLeftPanel
+        playbookType={playbookType}
+        status={task.workflowStatus}
+        step={step}
+      />
+      {/* <input
+          type="file"
+          ref={photoInputRef}
+          hidden
+          onChange={(e) => {
+            if (e.target.files?.length) {
+              void onUploadAsset(e.target.files[0]);
+              handleExpand(true);
+            }
+          }}
+        /> */}
+      <div className="flex w-full flex-col overflow-x-hidden flex-1 p-2">
+        {playbookType === "Sequential" && (
+          <div className="-mb-3 self-end pr-2 pt-2">
+            <TaskStatusBadge status={task.workflowStatus} />
+          </div>
+        )}
+
+        <div className="space-y-2 divide-y divide-black/10 flex flex-col flex-1">
+          <div
+            className={cn("text-lg font-medium flex-1 pb-1")}
+            style={{
+              color:
+                task.workflowStatus === "Completed"
+                  ? "#1C232D"
+                  : taskStyle?.titleColor || "#1C232D",
+            }}
+          >
+            {task.taskInstanceName}
+          </div>
+
+          {verificationType ? (
+            <div className="flex items-center gap-2 text-sm pb-2">
+              <FontAwesomeIcon icon={faCheckSquare} className="size-4" />
+              <div>
+                <span className="font-medium">
+                  {verificationType === TASK_VERIFICATION_TYPE.PHOTO
+                    ? "Photo"
+                    : "Screenshot"}
+                </span>{" "}
+                required
+              </div>
+            </div>
+          ) : (
+            <></>
+          )}
+        </div>
+
+        {taskDetails?.description && (
+          <div className={cn(!isExpanded && "hidden")}>
+            <TaskExpandedContent description={taskDetails?.description || ""} />
+          </div>
+        )}
+        {(buttons.length > 0 || task.hasDescription) && (
+          <div className="flex items-center justify-end gap-4 border-t border-black/10 pt-2">
+            <div className="flex-1">
+              <TaskButtons
+                buttons={buttons}
+                onButtonClick={handleButtonClick}
+                disabled={isPerformingAction}
+              />
+            </div>
+            {toggleExpanded && (
+              <Button
+                size="smallCollapse"
+                onMouseOver={prefetchTaskDetails}
+                category="link"
+                onClick={() => {
+                  toggleExpanded();
+                }}
+                title={
+                  isExpanded ? "Hide task description" : "Show task description"
+                }
+              >
+                <FontAwesomeIcon
+                  icon={faChevronDown}
+                  className={clsx(
+                    "cursor-pointer text-[#0069D9]",
+                    isExpanded ? "rotate-180" : "",
+                  )}
+                />
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/task/task-buttons.tsx

@@ -0,0 +1,35 @@
+import {
+  TASK_BUTTONS_DISPLAY_TEXT,
+  TaskButton,
+} from "../../hooks/useTaskButtons";
+import Button from "../ui/button";
+
+export const TaskButtons = ({
+  buttons,
+  onButtonClick,
+  disabled,
+}: {
+  buttons: TaskButton[];
+  onButtonClick: (buttonType: TaskButton) => void;
+  disabled?: boolean;
+}) => {
+  return (
+    <div className="flex items-center justify-end">
+      {buttons.map((button) => {
+        return (
+          <Button
+            key={button}
+            size="smallCollapse"
+            className="ml-2"
+            disabled={disabled}
+            onClick={() => {
+              onButtonClick(button);
+            }}
+          >
+            {TASK_BUTTONS_DISPLAY_TEXT[button]}
+          </Button>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/task/task-dropdown-badge.tsx

@@ -0,0 +1,121 @@
+import { useDismiss, useFloating, useInteractions } from "@floating-ui/react";
+import { faArrowRight, faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
+import { cn } from "../../utils/cn";
+import { Badge } from "../badge";
+const TASK_DROPDOWN_BADGE_VARIANTS = {
+  default: "text-secondary-600 border-secondary-600",
+  primary: "text-primary-600 border-primary-600",
+  success: "text-success-600 border-success-600",
+} as const;
+
+interface TaskDropdownBadgeProps {
+  title: string;
+  variant?: keyof typeof TASK_DROPDOWN_BADGE_VARIANTS;
+  transitions: {
+    id: string;
+    color: "primary" | "success";
+    action: string;
+    to: string;
+  }[];
+  onClick?: (action: string) => void;
+}
+
+const MenuItem = ({
+  transition,
+  onClick,
+}: {
+  transition: {
+    id: string;
+    color: "primary" | "success";
+    action: string;
+    to: string;
+  };
+  onClick: () => void;
+}) => {
+  return (
+    <div
+      className="py-1 px-3 space-x-2 flex items-center hover:bg-gray-100 cursor-pointer"
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick();
+      }}
+    >
+      <span className="text-base text-dark flex-1">{transition.action}</span>
+      <FontAwesomeIcon icon={faArrowRight} className="text-gray-400 size-4" />
+      <Badge category="outline" color={transition.color}>
+        {transition.to}
+      </Badge>
+    </div>
+  );
+};
+
+export const TaskDropdownBadge = ({
+  title,
+  variant = "default",
+  transitions,
+  onClick,
+}: TaskDropdownBadgeProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { refs, floatingStyles, context } = useFloating({
+    strategy: "fixed",
+    placement: "bottom-end",
+    open: isOpen,
+    onOpenChange: setIsOpen,
+  });
+
+  const dismiss = useDismiss(context, {
+    outsidePress: true,
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
+  return (
+    <>
+      <div
+        onClick={
+          transitions?.length ? () => setIsOpen((prev) => !prev) : undefined
+        }
+        ref={refs.setReference}
+        className={cn(
+          "px-1 uppercase border rounded-sm flex items-center space-x-1",
+          transitions.length ? "cursor-pointer" : "pointer-events-none",
+          TASK_DROPDOWN_BADGE_VARIANTS[variant],
+        )}
+        {...getReferenceProps()}
+      >
+        <span className="text-sm font-bold">{title}</span>
+        {transitions.length > 0 ? (
+          <FontAwesomeIcon
+            icon={faChevronDown}
+            className="text-gray-400 size-4"
+          />
+        ) : (
+          <></>
+        )}
+      </div>
+
+      {isOpen && transitions.length && (
+        <div
+          ref={refs.setFloating}
+          style={floatingStyles}
+          className={cn(
+            "border border-gray-200 py-1.5 rounded-sm min-w-[172px] bg-white shadow-dark/50",
+          )}
+          {...getFloatingProps()}
+        >
+          {transitions.map((transition, index) => (
+            <MenuItem
+              key={index}
+              transition={transition}
+              onClick={() => {
+                onClick?.(transition.id as string);
+                setIsOpen(false);
+              }}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+};

package/src/components/task/task-expanded-content.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useMemo } from "react";
+import { DROPBOX_API_ENDPOINT } from "../../constants/settings.constants";
+
+export const TaskExpandedContent = ({
+  description,
+}: {
+  description: string;
+}) => {
+  const imageReplacedDescription = useMemo(() => {
+    const regex = /https:\/\/[^/]+\/api\/files/g;
+
+    const stripped = description?.replaceAll(regex, `${DROPBOX_API_ENDPOINT}`);
+
+    const replaced = stripped?.replaceAll(
+      'src="/api/files',
+      `src="${DROPBOX_API_ENDPOINT}`,
+    );
+
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(replaced, "text/html");
+    const images = doc.querySelectorAll("img");
+    const slides = [] as { src: string }[];
+    images?.forEach((img) => {
+      const src = img.getAttribute("src");
+      if (src) {
+        slides.push({ src });
+        /** Prefetch image to show immediately */
+        new Image().src = src;
+      }
+    });
+
+    return replaced;
+  }, [description]);
+
+  useEffect(() => {}, [imageReplacedDescription]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div
+        className="lexical-view-mode"
+        // onClick={handleDescriptionClick}
+        dangerouslySetInnerHTML={{ __html: imageReplacedDescription }}
+      />
+    </div>
+  );
+};

package/src/components/task/task-left-panel.tsx

@@ -0,0 +1,60 @@
+import clsx from "clsx";
+import { TaskStatus, TASK_STATUS } from "../../types/task.types";
+import { PLAYBOOK_TYPES, PlaybookType } from "../../types/playbook.types";
+
+export interface TaskCardV2LeftPanelProps {
+  playbookType: PlaybookType;
+  status: TaskStatus;
+  step: number;
+  isSelected?: boolean;
+  onSelect?: (withShiftKey?: boolean) => void;
+}
+
+const LEFT_PANEL_FORMATTED_LABELS: {
+  [key in TaskStatus]?: string;
+} = {
+  [TASK_STATUS.IN_REVIEW]: "In Review",
+};
+
+const LEFT_PANEL_COLOR: {
+  [key in TaskStatus]?: string;
+} = {
+  [TASK_STATUS.OPEN]: "bg-secondary-500",
+  [TASK_STATUS.IN_PROGRESS]: "bg-primary-600",
+  [TASK_STATUS.IN_REVIEW]: "bg-success-600",
+  [TASK_STATUS.COMPLETED]: "bg-success-600",
+};
+
+export const TaskLeftPanel = ({
+  playbookType,
+  status,
+  step,
+  isSelected,
+  onSelect,
+}: TaskCardV2LeftPanelProps) => {
+  return (
+    <div
+      className={clsx(
+        "flex flex-col items-center justify-center",
+        isSelected ? "bg-[#FFE600]" : LEFT_PANEL_COLOR[status],
+        onSelect && "cursor-pointer",
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+        onSelect?.(e.shiftKey);
+      }}
+    >
+      <span
+        className={clsx(
+          `text-orientation-mixed w-[27px] flex items-center whitespace-nowrap px-2 text-sm font-bold [writing-mode:vertical-lr]`,
+          isSelected ? "text-black" : "text-white",
+        )}
+      >
+        {/** TODO: check "status" wording */}
+        {playbookType === PLAYBOOK_TYPES.SEQUENTIAL
+          ? `STEP ${step}`
+          : (LEFT_PANEL_FORMATTED_LABELS[status] || status).toUpperCase()}
+      </span>
+    </div>
+  );
+};

package/src/components/task/task-status-badge.tsx

@@ -0,0 +1,23 @@
+import { TASK_STATUS, TaskStatus } from "../../types/task.types";
+import { Badge, BadgeSolid } from "../badge";
+
+export interface TaskCardV2StatusBadgeProps {
+  status: TaskStatus;
+}
+
+export const STATUS_BADGE_COLOR: {
+  [key in TaskStatus]?: keyof typeof BadgeSolid;
+} = {
+  [TASK_STATUS.OPEN]: "secondary",
+  [TASK_STATUS.IN_PROGRESS]: "primary",
+  [TASK_STATUS.IN_REVIEW]: "success",
+  [TASK_STATUS.COMPLETED]: "success",
+} as const;
+
+export const TaskStatusBadge = ({ status }: TaskCardV2StatusBadgeProps) => {
+  return (
+    <Badge category="outline" color={STATUS_BADGE_COLOR[status]}>
+      {status}
+    </Badge>
+  );
+};