@confidencesystemsinc/sdk 1.0.2 → 1.0.3

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@confidencesystemsinc/sdk",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "type": "module",
   "main": "dist/sdk.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "build": "tsc -b && vite build",

package/src/App.css

@@ -1,2 +0,0 @@
-@import "tailwindcss";
-@config "../tailwind.config.ts"

package/src/components/badge.tsx

@@ -1,116 +0,0 @@
-import { ComponentPropsWithoutRef, useMemo } from "react";
-import { twMerge } from "tailwind-merge";
-
-export const BadgeSolid = {
-  white: "bg-white text-dark-300 border border-gray-300",
-  primary: "bg-primary-600",
-  secondary: "bg-secondary-500",
-  success: "bg-success-600",
-  info: "bg-info-500",
-  warning: "bg-warning-500 text-gray-800",
-  danger: "bg-danger-500",
-  steel: "bg-steel-500",
-  orange: "bg-orange-500",
-  purple: "bg-purple-500",
-  grayDark: "bg-gray-900",
-  grayLight: "bg-gray-100 text-gray-800",
-} as const;
-
-export const BadgeOutline = {
-  white: "text-white border border-white",
-  primary: "text-primary-600 border border-primary-600",
-  secondary: "text-secondary-500 border border-secondary-500",
-  success: "text-success-600 border border-success-600",
-  info: "text-info-500 border border-info-500",
-  warning: "text-warning-500 border border-warning-500",
-  danger: "text-danger-500 border border-danger-500",
-  steel: "text-steel-500 border border-steel-500",
-  orange: "text-orange-500 border border-orange-500",
-  purple: "text-purple-500 border border-purple-500",
-  grayDark: "text-gray-700 border border-gray-700",
-  grayLight: "text-gray-500 border border-gray-100",
-} as const;
-
-const BadgeFontColor = {
-  white: "text-dark-300",
-  primary: "text-white",
-  secondary: "text-white",
-  success: "text-white",
-  info: "text-black",
-  warning: "text-gray-800",
-  danger: "text-white",
-  steel: "text-white",
-  orange: "text-black",
-  purple: "text-white",
-  grayDark: "text-white",
-  grayLight: "text-gray-800",
-} as const;
-
-export const BadgeRoundness = {
-  normal: "rounded",
-  pill: "rounded-pill",
-} as const;
-
-const BadgeSize = {
-  big: "h-[24px] leading-[24px] text-md px-1",
-  medium: "h-[22px] leading-[22px] text-sm px-[2px]",
-  small: "h-[18px] leading-[18px] text-xs px-[2px]",
-} as const;
-
-export interface BadgeProps extends ComponentPropsWithoutRef<"div"> {
-  category?: "solid" | "outline";
-  color?: keyof typeof BadgeSolid;
-  roundness?: keyof typeof BadgeRoundness;
-  size?: keyof typeof BadgeSize;
-  textClassName?: string;
-  children: React.ReactNode;
-  onClose?: () => void;
-  onArrowClick?: () => void;
-  className?: string;
-  onCustomIconClick?: () => void;
-  arrowTitle?: string;
-  closeTitle?: string;
-}
-
-export const Badge = ({
-  category = "solid",
-  color = "primary",
-  roundness = "normal",
-  size = "medium",
-  textClassName = "uppercase",
-  children,
-  className,
-  ...rest
-}: BadgeProps) => {
-  const fontColor = useMemo(
-    () => BadgeFontColor[color] ?? "text-white",
-    [color],
-  );
-  const BadgeClasses = useMemo(
-    () =>
-      twMerge(
-        fontColor,
-        category === "outline" ? BadgeOutline[color] : BadgeSolid[color],
-        BadgeRoundness[roundness],
-        BadgeSize[size],
-      ),
-    [fontColor, category, color, size, roundness],
-  );
-
-  return (
-    <div
-      className={twMerge(
-        "ui-badge flex items-center font-bold",
-        BadgeClasses,
-        className,
-      )}
-      style={rest?.style}
-      data-testid={`badge`}
-      data-category={category}
-      data-color={color}
-      {...rest}
-    >
-      <p className={twMerge("mx-1", textClassName)}>{children}</p>
-    </div>
-  );
-};

package/src/components/initiate-playbook-modal/InitiatePlaybookModal.tsx

@@ -1,53 +0,0 @@
-import { useState } from "react";
-import { Modal } from "../ui/modal";
-import { InputField } from "../ui/input";
-
-export const InitiatePlaybookModal = ({
-  onConfirm,
-  onClose,
-  isOpen,
-  title,
-}: {
-  onConfirm: (email: string) => void | Promise<void>;
-  onClose: () => void;
-  isOpen: boolean;
-  title?: string;
-}) => {
-  const [email, setEmail] = useState("");
-  const [isConfirming, setIsConfirming] = useState(false);
-  const handleConfirm = async () => {
-    if (email) {
-      try {
-        setIsConfirming(true);
-        await onConfirm(email);
-        setEmail(""); // Reset email after confirmation
-      } finally {
-        setIsConfirming(false);
-      }
-    } else {
-      alert("Please enter a valid email address.");
-    }
-  };
-  return (
-    <Modal
-      title={title || "Initiate Confidence Playbook"}
-      isOpen={isOpen}
-      close={onClose}
-      dismissOptions={{ label: "Cancel", onClick: onClose }}
-      confirmOptions={{
-        label: "Initiate",
-        onClick: handleConfirm,
-        disabled: isConfirming || !email,
-      }}
-    >
-      <>
-        <InputField
-          label="Email"
-          disabled={isConfirming}
-          description="Enter the email address to initiate the playbook."
-          onChange={(e) => setEmail(e.target.value)}
-        />
-      </>
-    </Modal>
-  );
-};

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

@@ -1,217 +0,0 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactNode, useEffect, useMemo, useState } from "react";
-import { usePlaybook } from "../../hooks/usePlaybook";
-import { TASK_BUTTONS, TaskButton } from "../../hooks/useTaskButtons";
-import { Playbook } from "../../types/playbook.types";
-import { TASK_STATUS } from "../../types/task.types";
-import { cn } from "../../utils/cn";
-import { ConfidenceTask } from "../task/confidence-task";
-import { PlaybookHeader } from "./playbook-header";
-import { initiatePlaybook } from "../../services/initiate-playbook.service";
-import { ConfidencePlaybookButton } from "../playbook-button/ConfidencePlaybookButton";
-
-const ConfidencePlaybookInternal = ({
-  playbookInstanceId,
-  viewMode,
-}: {
-  playbookInstanceId: string | number;
-  viewMode: "list" | "card";
-}) => {
-  const { playbook, actions: playbookActions } =
-    usePlaybook(playbookInstanceId);
-  if (!playbook) {
-    return <div>Playbook not found</div>;
-  }
-
-  const handleButtonClick = (buttonType: TaskButton, taskId: number) => {
-    if (buttonType === TASK_BUTTONS.COMPLETE) {
-      const sequenceOrder = playbook.tasks.find(
-        (task) => task.taskInstanceId === taskId,
-      )?.sequenceOrder;
-      if (sequenceOrder === undefined) {
-        console.error("Task not found in playbook");
-        return;
-      }
-
-      playbookActions.completeTask(taskId, sequenceOrder);
-    }
-
-    if (buttonType === TASK_BUTTONS.START) {
-      playbookActions.startTask(taskId);
-    }
-  };
-
-  return (
-    <div className="flex flex-col">
-      <PlaybookView
-        playbook={playbook}
-        viewMode={viewMode}
-        onTaskButtonClick={handleButtonClick}
-      />
-    </div>
-  );
-};
-
-const TasksContainer = ({
-  className,
-  children,
-}: {
-  className?: string;
-  children: React.ReactNode;
-}) => {
-  return (
-    <div className={cn("w-full mx-auto space-y-4 py-4 container", className)}>
-      {children}
-    </div>
-  );
-};
-
-const Context = ({ children }: { children: ReactNode }) => {
-  const [queryClient] = useState(new QueryClient());
-  console.log("Confidence Playbook Context Initialized");
-
-  return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-  );
-};
-
-const PlaybookView = ({
-  playbook,
-  viewMode,
-  onTaskButtonClick,
-}: {
-  viewMode: "list" | "card";
-  playbook: Playbook;
-  onTaskButtonClick: (btn: TaskButton, taskId: number) => void;
-}) => {
-  const { playbookInstanceName, tasks } = playbook;
-
-  const sequenceOrderToStart = useMemo(() => {
-    const lastCompletedTask = tasks.find(
-      (task) => task.workflowStatus === TASK_STATUS.COMPLETED,
-    );
-    if (!lastCompletedTask) {
-      return 0;
-    }
-
-    return lastCompletedTask.sequenceOrder + 1;
-  }, [tasks]);
-  return (
-    <div className="min-h-screen flex flex-col items-stretch bg-gray-50">
-      <PlaybookHeader title={playbookInstanceName} className="top-0 sticky" />
-
-      <TasksContainer
-        className={cn("flex-1", viewMode === "list" && "space-y-0")}
-      >
-        {tasks.map((task, index) => {
-          return (
-            <ConfidenceTask
-              key={index}
-              task={task}
-              step={index + 1}
-              viewMode={viewMode}
-              canStart={task.sequenceOrder === sequenceOrderToStart}
-              onButtonClick={(btn) => {
-                console.log("Button clicked:", btn);
-                onTaskButtonClick(btn, task.taskInstanceId);
-              }}
-              playbookType={"Non-Sequential"}
-            />
-          );
-        })}
-      </TasksContainer>
-    </div>
-  );
-};
-
-export const ConfidencePlaybook = ({
-  playbookInstanceId,
-  viewMode,
-}: {
-  playbookInstanceId: string | number;
-  viewMode: "list" | "card";
-}) => {
-  return (
-    <Context>
-      <ConfidencePlaybookInternal
-        playbookInstanceId={playbookInstanceId}
-        viewMode={viewMode}
-      />
-    </Context>
-  );
-};
-
-const AutoInstantiated = ({
-  email,
-  playbookId,
-  viewMode,
-}: {
-  email: string;
-  playbookId: string;
-  viewMode: "list" | "card";
-}) => {
-  const [playbookInstanceId, setPlaybookInstanceId] = useState<number | null>(
-    null,
-  );
-
-  useEffect(() => {
-    (async () => {
-      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}`,
-        );
-      }
-
-      setPlaybookInstanceId(playbookInstanceId);
-    })();
-  }, []);
-
-  if (!playbookInstanceId) {
-    return <div>Loading...</div>;
-  }
-
-  return (
-    <ConfidencePlaybook
-      playbookInstanceId={playbookInstanceId}
-      viewMode={viewMode}
-    />
-  );
-};
-
-const WithInstantiateButton = ({ playbookId }: { playbookId: string }) => {
-  const [playbookInstanceId, setPlaybookInstanceId] = useState<number | null>(
-    null,
-  );
-
-  if (playbookInstanceId) {
-    return (
-      <ConfidencePlaybook
-        playbookInstanceId={playbookInstanceId}
-        viewMode="list"
-      />
-    );
-  }
-  return (
-    <>
-      <ConfidencePlaybookButton
-        playbookId={playbookId}
-        onInitiated={setPlaybookInstanceId}
-      />
-    </>
-  );
-};
-ConfidencePlaybook.Context = Context;
-ConfidencePlaybook.View = PlaybookView;
-ConfidencePlaybook.TasksContainer = TasksContainer;
-ConfidencePlaybook.AutoInstantiated = AutoInstantiated;
-ConfidencePlaybook.WithInstantiateButton = WithInstantiateButton;

package/src/components/playbook/playbook-header.tsx

@@ -1,13 +0,0 @@
-export const PlaybookHeader = ({
-  title,
-  className,
-  ...props
-}: React.ComponentProps<"div"> & { title: string }) => {
-  return (
-    <div className={className} {...props}>
-      <div className="border-y border-gray-200 bg-white">
-        <h1 className="container mx-auto py-3 text-2xl">{title}</h1>
-      </div>
-    </div>
-  );
-};

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

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

@@ -1,198 +0,0 @@
-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>
-  );
-};