@confidencesystemsinc/sdk 1.2.0 → 1.2.1

package/src/hooks/usePlaybookExpandedTasks.ts

@@ -0,0 +1,35 @@
+import { useQuery } from "@tanstack/react-query";
+import { useConfidenceContext } from "../context/confidence-context";
+
+export const usePlaybookExpandedTasks = (
+  playbookInstanceId: number | string,
+) => {
+  const { queryClient } = useConfidenceContext();
+
+  const query = useQuery({
+    initialData: {} as Record<string, boolean>,
+    queryKey: ["PLAYBOOK_EXPANDED_TASKS", +playbookInstanceId],
+  });
+
+  const isTaskExpanded = (taskId: number | string) => {
+    return query.data?.[taskId.toString()] ?? false;
+  };
+
+  const toggleTaskExpanded = (taskId: number | string, expand?: boolean) => {
+    queryClient.setQueryData(
+      ["PLAYBOOK_EXPANDED_TASKS", +playbookInstanceId],
+      () => {
+        const newData = {
+          [taskId]: expand !== undefined ? expand : !isTaskExpanded(taskId),
+        };
+
+        return newData;
+      },
+    );
+  };
+
+  return {
+    isTaskExpanded,
+    toggleTaskExpanded,
+  };
+};

package/src/hooks/useTaskButtons.ts

@@ -0,0 +1,47 @@
+import { useMemo } from "react";
+import { TASK_STATUS, TaskStatus } from "../types/task.types";
+
+export const TASK_BUTTONS = {
+  START: "START",
+  PAUSE: "PAUSE",
+  RESUME: "RESUME",
+  COMPLETE: "COMPLETE",
+  EXPAND: "EXPAND",
+} as const;
+
+export const TASK_BUTTONS_DISPLAY_TEXT: {
+  [key in TaskButton]?: string;
+} = {
+  START: "Start",
+  PAUSE: "Pause",
+  RESUME: "Resume",
+  COMPLETE: "Complete",
+};
+
+export type TaskButton = (typeof TASK_BUTTONS)[keyof typeof TASK_BUTTONS];
+
+export const useTaskButtons = (args: {
+  taskStatus: TaskStatus;
+  canStart: boolean;
+}) => {
+  const { taskStatus } = args;
+
+  const buttons = useMemo(() => {
+    if (taskStatus === TASK_STATUS.OPEN && args.canStart) {
+      return [TASK_BUTTONS.START];
+    }
+
+    if (taskStatus === TASK_STATUS.IN_PROGRESS) {
+      return [TASK_BUTTONS.PAUSE, TASK_BUTTONS.COMPLETE];
+    }
+
+    if (taskStatus === TASK_STATUS.COMPLETED) {
+      return [];
+    }
+    return [];
+  }, [taskStatus]);
+
+  return {
+    buttons,
+  };
+};

package/src/index.ts

@@ -0,0 +1,7 @@
+import { ConfidencePlaybook } from "./components/playbook/confidence-playbook";
+import { ConfidencePlaybookButton } from "./components/playbook-button/ConfidencePlaybookButton";
+import { ConfidenceUIWrapper } from "./components/ui/ui-wrapper";
+
+export { ConfidencePlaybook };
+export { ConfidencePlaybookButton };
+export { ConfidenceUIWrapper };

package/src/services/complete-task.service.ts

@@ -0,0 +1,25 @@
+import { CONFIDENCE_API_ENDPOINT } from "../constants/settings.constants";
+import { TaskStatus } from "../types/task.types";
+
+export const completeTask = async (
+  taskInstanceId: string,
+): Promise<{
+  status: TaskStatus;
+}> => {
+  const body = {
+    taskInstanceId,
+  };
+  const headers = new Headers();
+  headers.append("Content-Type", "application/json");
+  const response = await fetch(
+    `${CONFIDENCE_API_ENDPOINT}/playbook-task-complete`,
+    {
+      method: "POST",
+      headers,
+      body: JSON.stringify(body),
+    },
+  );
+  const data = await response.json();
+
+  return data;
+};

package/src/services/initiate-playbook.service.ts

@@ -0,0 +1,26 @@
+import { CONFIDENCE_API_ENDPOINT } from "../constants/settings.constants";
+
+export const initiatePlaybook = async (body: {
+  bank: string;
+  email: string;
+  timezone: string;
+  playbookUid: string;
+}): Promise<{
+  playbookInstanceId: number;
+  errorCode?: number;
+  details?: Array<string>;
+  message?: string;
+}> => {
+  const headers = new Headers();
+  headers.append("Content-Type", "application/json");
+  const response = await fetch(`${CONFIDENCE_API_ENDPOINT}/playbook-initiate`, {
+    method: "POST",
+    headers,
+    body: JSON.stringify(body),
+  });
+  const data = await response.json();
+
+  console.log({ data });
+
+  return data;
+};

package/src/services/start-task.services.ts

@@ -0,0 +1,27 @@
+import { CONFIDENCE_API_ENDPOINT } from "../constants/settings.constants";
+import { TaskStatus } from "../types/task.types";
+
+export const startTask = async (
+  taskInstanceId: string,
+): Promise<{
+  status: TaskStatus;
+}> => {
+  const body = {
+    taskInstanceId,
+  };
+  const headers = new Headers();
+  headers.append("Content-Type", "application/json");
+  const response = await fetch(
+    `${CONFIDENCE_API_ENDPOINT}/playbook-task-start`,
+    {
+      method: "POST",
+      headers,
+      body: JSON.stringify(body),
+    },
+  );
+  const data = await response.json();
+
+  console.log({ data });
+
+  return data;
+};

package/src/services/task-details.service.ts

@@ -0,0 +1,17 @@
+import { CONFIDENCE_API_ENDPOINT } from "../constants/settings.constants";
+
+export const getTaskDetails = async (body: {
+  taskId: number;
+  templateId: string;
+}) => {
+  const response = await fetch(
+    `${CONFIDENCE_API_ENDPOINT}/playbook-task-details`,
+    {
+      method: "POST",
+      body: JSON.stringify(body),
+    },
+  );
+  const data = await response.json();
+
+  return data;
+};

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

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ConfidencePlaybook } from "../components/playbook/confidence-playbook";
+import { TaskButton } from "../hooks/useTaskButtons";
+import { ConfidenceUIWrapper } from "../components/ui/ui-wrapper";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "ConfidencePlaybook",
+  component: ConfidencePlaybook.View,
+  decorators: [
+    (Story) => (
+      <ConfidenceUIWrapper>
+        <Story />
+      </ConfidenceUIWrapper>
+    ),
+  ],
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "fullscreen",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: {
+    playbookMode: "list",
+    playbook: {
+      playbookInstanceId: 4771,
+      playbookInstanceName:
+        "ACH - Returns - [HORIZON] this is a test playbook introdued by confidence system that is a beatufiul company",
+      playbookId: 227718,
+      type: "Sequential",
+      quickComplete: true,
+      autoExpandTask: true,
+      autoStart: false,
+      leadEmail: "confidence@user.it",
+      workflowStatus: "Open",
+      numberofTasks: 3,
+      tasks: [
+        {
+          taskInstanceId: 10949,
+          taskId: 1676864,
+          sequenceOrder: 0,
+          workflowStatus: "Completed",
+          taskInstanceName:
+            "Identify Return Items [Deposit Operations Specialist]",
+          taskStartTime: "2025-05-20 09:06:13",
+          taskCompletedTime: "2025-05-20 09:06:20",
+          imageRequired: 0,
+          hasDescription: true,
+        },
+        {
+          taskInstanceId: 10951,
+          taskId: 1676866,
+          sequenceOrder: 1,
+          workflowStatus: "Completed",
+          taskInstanceName:
+            "Review Return Items [Deposit Operations Specialist]",
+          taskStartTime: "2025-05-20 09:06:20",
+          taskCompletedTime: "2025-05-20 09:06:25",
+          imageRequired: 2,
+          hasDescription: true,
+        },
+        {
+          taskInstanceId: 10950,
+          taskId: 1676865,
+          sequenceOrder: 2,
+          workflowStatus: "In progress",
+          taskInstanceName: "Return Items [Deposit Operations Specialist]",
+          imageRequired: 2,
+          hasDescription: true,
+        },
+      ],
+    },
+    onTaskButtonClick: async (btn: TaskButton, taskId: number) => {
+      console.log("Button clicked:", btn, "for task ID:", taskId);
+    },
+  },
+} satisfies Meta<typeof ConfidencePlaybook.View>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const CardMode: Story = {
+  args: {
+    playbookMode: "card",
+  },
+};
+
+export const ConfidenceOverlay: Story = {
+  args: {
+    playbookMode: "list",
+    playbookStyle: {
+      whiteLabel: {
+        primaryColor: "#007BFF",
+      },
+      overlay: {
+        position: "right",
+        width: 500,
+        height: "calc(100vh - 4rem)",
+      },
+    },
+  },
+};
+
+export const FiservOverlay: Story = {
+  args: {
+    playbookMode: "list",
+    playbookStyle: {
+      overlay: {
+        position: "right",
+        right: 0,
+        width: 500,
+        height: "calc(100vh - 4rem)",
+      },
+      whiteLabel: {
+        titleBackgroundColor: "#FFE3CF",
+        primaryColor: "#FF6600",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ConfidenceTask } from "../components/task/confidence-task";
+import { TaskButton } from "../hooks/useTaskButtons";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "ConfidenceTask",
+  component: ConfidenceTask,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "fullscreen",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: {
+    task: {
+      taskInstanceId: 10949,
+      taskId: 1676864,
+      sequenceOrder: 0,
+      workflowStatus: "Open",
+      taskInstanceName: "Identify Return Items [Deposit Operations Specialist]",
+      taskStartTime: "2025-05-20 09:06:13",
+      taskCompletedTime: "2025-05-20 09:06:20",
+      imageRequired: 1,
+      hasDescription: true,
+    },
+    playbookType: "Non-Sequential",
+    step: 0,
+    onButtonClick: async (action: TaskButton) => {
+      console.log("Button clicked:", action);
+    },
+    viewMode: "card",
+    canStart: true,
+    isExpanded: false,
+    playbookId: 227718,
+  },
+} satisfies Meta<typeof ConfidenceTask>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const CardMode: Story = {
+  args: {},
+};
+
+export const ListMode: Story = {
+  args: {
+    viewMode: "list",
+  },
+};
+
+export const Fiserv: Story = {
+  args: {
+    viewMode: "list",
+    taskStyle: {
+      titleColor: "#FF6600",
+    },
+  },
+};

package/src/stories/initiate-playbook-modal.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InitiatePlaybookModal } from "../components/initiate-playbook-modal/InitiatePlaybookModal";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "InitiatePlaybookModal",
+  component: InitiatePlaybookModal,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "fullscreen",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: {},
+} satisfies Meta<typeof InitiatePlaybookModal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    onClose: () => console.log("Modal closed"),
+    onConfirm: (email: string) =>
+      console.log(`Playbook initiated with email: ${email}`),
+  },
+};

package/src/stories/modal.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Modal } from "../components/ui/modal";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Modal",
+  component: Modal,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "fullscreen",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: {},
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    children: (
+      <>
+        <p className="text-gray-500">
+          Are you sure you want to deactivate this playbook? This action cannot
+          be undone.
+        </p>
+        <p className="text-gray-500">
+          Deactivating a playbook will stop all associated tasks and prevent any
+          further actions.
+        </p>
+      </>
+    ),
+    dismissOptions: {
+      label: "Cancel",
+      onClick: () => console.log("Modal dismissed"),
+    },
+    confirmOptions: {
+      label: "Deactivate",
+      onClick: () => console.log("Playbook deactivated"),
+    },
+    title: "Deactivate Playbook",
+    close() {},
+  },
+};