@confidencesystemsinc/sdk 1.0.0

package/dist/services/complete-task.service.d.ts

@@ -0,0 +1,4 @@
+import { TaskStatus } from '../types/task.types';
+export declare const completeTask: (taskInstanceId: string) => Promise<{
+    status: TaskStatus;
+}>;

package/dist/services/initiate-playbook.service.d.ts

@@ -0,0 +1,11 @@
+export declare const initiatePlaybook: (body: {
+    bank: string;
+    email: string;
+    timezone: string;
+    playbookUid: string;
+}) => Promise<{
+    playbookInstanceId: number;
+    errorCode?: number;
+    details?: Array<string>;
+    message?: string;
+}>;

package/dist/services/start-task.services.d.ts

@@ -0,0 +1,4 @@
+import { TaskStatus } from '../types/task.types';
+export declare const startTask: (taskInstanceId: string) => Promise<{
+    status: TaskStatus;
+}>;

package/dist/stories/initiate-playbook-modal.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ onConfirm, onClose, isOpen, title, }: {
+        onConfirm: (email: string) => void | Promise<void>;
+        onClose: () => void;
+        isOpen: boolean;
+        title?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/stories/modal.stories.d.ts

@@ -0,0 +1,28 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ isOpen, close, title, dismissOptions, confirmOptions, children, }: {
+        isOpen: boolean;
+        close: () => void;
+        title: string;
+        children: React.ReactNode;
+        dismissOptions?: {
+            label: string;
+            onClick: () => void;
+        };
+        confirmOptions?: {
+            label: string;
+            onClick: () => void;
+            disabled?: boolean;
+        };
+    }) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/stories/playbook-container.stories.d.ts

@@ -0,0 +1,55 @@
+import { StoryObj } from '@storybook/react';
+import { TaskButton } from '../hooks/useTaskButtons';
+declare const meta: {
+    title: string;
+    component: ({ playbook, viewMode, onTaskButtonClick, }: {
+        viewMode: "list" | "card";
+        playbook: import('../types/playbook.types').Playbook;
+        onTaskButtonClick: (btn: TaskButton, taskId: number) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {};
+    args: {
+        viewMode: "list";
+        playbook: {
+            playbookInstanceId: number;
+            playbookInstanceName: string;
+            playbookId: number;
+            type: string;
+            quickComplete: true;
+            autoExpandTask: true;
+            autoStart: false;
+            leadEmail: string;
+            workflowStatus: string;
+            numberofTasks: number;
+            tasks: ({
+                taskInstanceId: number;
+                taskId: number;
+                sequenceOrder: number;
+                workflowStatus: "Completed";
+                taskInstanceName: string;
+                taskStartTime: string;
+                taskCompletedTime: string;
+                imageRequired: number;
+                hasDescription: true;
+            } | {
+                taskInstanceId: number;
+                taskId: number;
+                sequenceOrder: number;
+                workflowStatus: "In progress";
+                taskInstanceName: string;
+                imageRequired: number;
+                hasDescription: true;
+                taskStartTime?: undefined;
+                taskCompletedTime?: undefined;
+            })[];
+        };
+        onTaskButtonClick: (btn: TaskButton, taskId: number) => void;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/types/playbook.types.d.ts

@@ -0,0 +1,20 @@
+import { Task } from './task.types';
+export interface Playbook {
+    playbookInstanceId: number;
+    playbookInstanceName: string;
+    playbookId: number;
+    type: string;
+    quickComplete: boolean;
+    autoExpandTask: boolean;
+    autoStart: boolean;
+    leadEmail: string;
+    workflowStatus: string;
+    numberofTasks: number;
+    nextTaskId?: number;
+    tasks: Task[];
+}
+export declare const PLAYBOOK_TYPES: {
+    readonly NON_SEQUENTIAL: "Non-Sequential";
+    readonly SEQUENTIAL: "Sequential";
+};
+export type PlaybookType = (typeof PLAYBOOK_TYPES)[keyof typeof PLAYBOOK_TYPES];

package/dist/types/task.types.d.ts

@@ -0,0 +1,18 @@
+export declare const TASK_STATUS: {
+    readonly OPEN: "Open";
+    readonly IN_PROGRESS: "In progress";
+    readonly IN_REVIEW: "In review";
+    readonly COMPLETED: "Completed";
+};
+export type TaskStatus = (typeof TASK_STATUS)[keyof typeof TASK_STATUS];
+export interface Task {
+    taskInstanceId: number;
+    taskId: number;
+    sequenceOrder: number;
+    workflowStatus: TaskStatus;
+    taskInstanceName: string;
+    imageRequired: number;
+    hasDescription: boolean;
+    taskStartTime?: string;
+    taskCompletedTime?: string;
+}

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@confidencesystemsinc/sdk",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "dist/sdk.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.27.12",
+    "@headlessui/react": "^2.2.4",
+    "@headlessui/tailwindcss": "^0.2.2",
+    "@tanstack/react-query": "^5.76.1",
+    "@types/node": "^22.15.16",
+    "clsx": "^2.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.2.0"
+  },
+  "peerDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.1.18"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/experimental-addon-test": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@tailwindcss/vite": "^4.1.4",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.1.3",
+    "@vitest/coverage-v8": "^3.1.3",
+    "glob": "^11.0.2",
+    "globals": "^16.0.0",
+    "playwright": "^1.52.0",
+    "prettier": "^3.5.3",
+    "storybook": "^8.6.12",
+    "tailwindcss": "^4.1.4",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.31.0",
+    "vite": "^6.3.1",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vitest": "^3.1.3"
+  },
+  "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
+  "author": "",
+  "license": "ISC"
+}

package/src/App.css

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

package/src/components/badge.tsx

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

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

@@ -0,0 +1,193 @@
+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";
+
+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}
+    />
+  );
+};
+
+ConfidencePlaybook.Context = Context;
+ConfidencePlaybook.View = PlaybookView;
+ConfidencePlaybook.TasksContainer = TasksContainer;
+ConfidencePlaybook.AutoInstantiated = AutoInstantiated;

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

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