@confidencesystemsinc/sdk 1.0.0

package/src/components/playbook-button/ConfidencePlaybookButton.tsx

@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { initiatePlaybook } from "../../services/initiate-playbook.service";
+import { InitiatePlaybookModal } from "../initiate-playbook-modal/InitiatePlaybookModal";
+import Button, { ButtonSizeType } from "../ui/button";
+
+export const ConfidencePlaybookButton = ({
+  btnClassName,
+  buttonNode,
+  size,
+  playbookId,
+  onInitiated,
+}: {
+  btnClassName?: string;
+  buttonNode?: React.ReactNode;
+  size?: ButtonSizeType;
+  playbookId: string;
+  onInitiated: (playbookInstanceId: number) => void;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  function open() {
+    setIsOpen(true);
+  }
+
+  function close() {
+    setIsOpen(false);
+  }
+
+  const onInitiatePlaybook = async (email: string) => {
+    const { playbookInstanceId, errorCode, details, message } =
+      (await initiatePlaybook({
+        bank: "public-sdk",
+        email,
+        timezone:
+          Intl.DateTimeFormat().resolvedOptions().timeZone ||
+          "America/Los_Angeles",
+        playbookUid: playbookId,
+      })) || {};
+
+    if (errorCode) {
+      throw new Error(
+        `Error initiating playbook: ${message} (Code: ${errorCode}) - Details: ${details}`,
+      );
+    }
+
+    onInitiated(playbookInstanceId);
+  };
+  return (
+    <>
+      {buttonNode ? (
+        { buttonNode }
+      ) : (
+        <Button
+          onClick={open}
+          className={btnClassName}
+          color="primary"
+          size={size}
+        >
+          Run Playbook
+        </Button>
+      )}
+
+      <InitiatePlaybookModal
+        isOpen={isOpen}
+        onClose={close}
+        onConfirm={async (email) => {
+          await onInitiatePlaybook(email);
+          close();
+        }}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,198 @@
+import clsx from "clsx";
+import { TaskButton, useTaskButtons } from "../../hooks/useTaskButtons";
+import { PlaybookType } from "../../types/playbook.types";
+import { Task, TASK_STATUS, TaskStatus } from "../../types/task.types";
+import { TaskButtons } from "./task-buttons";
+import { TaskLeftPanel } from "./task-left-panel";
+import { TaskStatusBadge } from "./task-status-badge";
+import { faCheckSquare } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useMemo } from "react";
+import { cn } from "../../utils/cn";
+import { TaskDropdownBadge } from "./task-dropdown-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,
+}: {
+  task: Task;
+  playbookType: PlaybookType;
+  step: number;
+  onButtonClick: (buttonType: TaskButton) => void;
+  viewMode?: "card" | "list";
+  canStart?: boolean;
+}) => {
+  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]);
+
+  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="flex gap-3 p-2 border-b border-gray-200">
+        <div className="text-gray-200 text-base">{task.sequenceOrder + 1}</div>
+        <div
+          className={cn(
+            "text-dark flex-1 truncate",
+            task.workflowStatus === TASK_STATUS.COMPLETED &&
+              "text-secondary-400 line-through",
+          )}
+        >
+          {task.taskInstanceName}
+        </div>
+        <TaskDropdownBadge
+          title={task.workflowStatus}
+          variant={BADGE_VARIANT}
+          transitions={BADGE_TRANSICTIONS}
+          onClick={(action) => {
+            onButtonClick(action as TaskButton);
+          }}
+        />
+      </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 p-2">
+        {playbookType === "Sequential" && (
+          <div className="-mb-3 elf-end pr-2 pt-2">
+            <TaskStatusBadge status={task.workflowStatus} />
+          </div>
+        )}
+
+        <div className="space-y-2 divide-y divide-black/20 flex flex-1 flex-col">
+          <div className="space-y-2">
+            <div className="text-lg font-medium text-[#1C232D] flex-1">
+              {task.taskInstanceName}
+            </div>
+
+            {verificationType ? (
+              <div className="flex items-center gap-2 text-sm">
+                <FontAwesomeIcon icon={faCheckSquare} className="size-[16px]" />
+                <div>
+                  <span className="font-medium">
+                    {verificationType === TASK_VERIFICATION_TYPE.PHOTO
+                      ? "Photo"
+                      : "Screenshot"}
+                  </span>{" "}
+                  required
+                </div>
+              </div>
+            ) : (
+              <></>
+            )}
+          </div>
+          {/* <div>
+              <PublicTaskExpandedContent
+                showScreenshotHints={showScreenshotHints}
+                description={taskDetails?.description}
+                onUploadScreenshot={handleUploadScreenshot}
+                onDeleteAsset={onDeleteAsset}
+                closeScreenshotHints={() => setShowScreenshotHints(false)}
+                taskAssets={taskAssets}
+              />
+              </div> */}
+
+          {buttons.length > 0 && (
+            <TaskButtons buttons={buttons} onButtonClick={onButtonClick} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,32 @@
+import {
+  TASK_BUTTONS_DISPLAY_TEXT,
+  TaskButton,
+} from "../../hooks/useTaskButtons";
+import Button from "../ui/button";
+
+export const TaskButtons = ({
+  buttons,
+  onButtonClick,
+}: {
+  buttons: TaskButton[];
+  onButtonClick: (buttonType: TaskButton) => void;
+}) => {
+  return (
+    <div className="flex items-center justify-end">
+      {buttons.map((button) => {
+        return (
+          <Button
+            key={button}
+            size="smallCollapse"
+            className="ml-2"
+            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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { cn } from "../../utils/cn";
+import { faArrowRight, faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { Badge } from "../badge";
+import { useState } from "react";
+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" />
+      <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",
+          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 ml-1"
+          />
+        ) : (
+          <></>
+        )}
+      </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-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>
+  );
+};