@confidencesystemsinc/sdk 1.2.0 → 1.2.2

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

@@ -0,0 +1,346 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ConfidenceContext } from "../../context/confidence-context";
+import { usePlaybook } from "../../hooks/usePlaybook";
+import { TASK_BUTTONS, TaskButton } from "../../hooks/useTaskButtons";
+import { initiatePlaybook } from "../../services/initiate-playbook.service";
+import { Playbook } from "../../types/playbook.types";
+import { TASK_STATUS } from "../../types/task.types";
+import { cn } from "../../utils/cn";
+import { ConfidencePlaybookButton } from "../playbook-button/ConfidencePlaybookButton";
+import { ConfidenceTask } from "../task/confidence-task";
+import { PlaybookHeader } from "./playbook-header";
+import ConfidenceLogo from "../../../public/confidence_logo.png";
+import { usePlaybookExpandedTasks } from "../../hooks/usePlaybookExpandedTasks";
+export interface ConfidencePlaybookStyleConfiguration {
+  overlay?: {
+    position?: "left" | "right";
+    width?: number | string; // Use string to allow 'calc()' or other CSS values
+    height?: number | string;
+    right?: number; // For right positioning
+    left?: number; // For left positioning
+  };
+  whiteLabel?: {
+    titleBackgroundColor?: string;
+    titleTextColor?: string;
+    primaryColor?: string;
+  };
+}
+
+const ConfidencePlaybookInternal = ({
+  playbookInstanceId,
+  playbookMode,
+  playbookStyle,
+}: {
+  playbookInstanceId: string | number;
+  playbookMode: "list" | "card";
+  playbookStyle?: ConfidencePlaybookStyleConfiguration;
+}) => {
+  const { playbook, actions: playbookActions } =
+    usePlaybook(playbookInstanceId);
+
+  if (!playbook) {
+    return <div></div>;
+  }
+
+  const handleButtonClick = async (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;
+      }
+
+      return playbookActions.completeTask(taskId, sequenceOrder);
+    }
+
+    if (buttonType === TASK_BUTTONS.START) {
+      return playbookActions.startTask(taskId);
+    }
+  };
+
+  return (
+    <PlaybookView
+      playbook={playbook}
+      playbookMode={playbookMode}
+      onTaskButtonClick={handleButtonClick}
+      playbookStyle={playbookStyle}
+    />
+  );
+};
+
+const TasksContainer = ({
+  className,
+  children,
+  numberOfTasks,
+  playbookMode,
+}: {
+  className?: string;
+  children: React.ReactNode;
+  numberOfTasks?: number; // Default to 3 if not provided
+  playbookMode: "list" | "card";
+}) => {
+  return (
+    <div className={cn("w-full p-4", className)}>
+      {numberOfTasks && (
+        <div className={cn(playbookMode === "card" && "mb-4")}>
+          <span className="font-medium">Tasks</span> (3)
+        </div>
+      )}
+      <div className={cn(playbookMode === "card" && "space-y-4")}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+const PlaybookView = ({
+  playbook,
+  playbookMode,
+  onTaskButtonClick,
+  playbookStyle,
+}: {
+  playbookMode: "list" | "card";
+  playbook: Playbook;
+  onTaskButtonClick: (btn: TaskButton, taskId: number) => Promise<void>;
+  playbookStyle?: ConfidencePlaybookStyleConfiguration;
+}) => {
+  const { playbookInstanceName, tasks } = playbook;
+  const playbookHeaderRef = useRef<HTMLDivElement>(null);
+  const [playbookHeaderHeight, setPlaybookHeaderHeight] = useState(0);
+  const { isTaskExpanded, toggleTaskExpanded } = usePlaybookExpandedTasks(
+    playbook.playbookInstanceId,
+  );
+
+  useEffect(() => {
+    if (playbookHeaderRef.current) {
+      /** Setup a resize observer */
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          console.log("ResizeObserver entry:", entry);
+          if (entry.contentRect) {
+            setPlaybookHeaderHeight(
+              playbookHeaderRef.current?.offsetHeight || 0,
+            );
+          }
+        }
+      });
+      resizeObserver.observe(playbookHeaderRef.current);
+    }
+
+    return () => {
+      if (playbookHeaderRef.current) {
+        /** Cleanup the resize observer */
+        const resizeObserver = new ResizeObserver(() => {});
+        resizeObserver.unobserve(playbookHeaderRef.current);
+      }
+    };
+  }, [playbookHeaderRef]);
+  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={cn(
+        !playbookStyle?.overlay && "min-h-screen",
+        playbookStyle?.overlay && "fixed bottom-0 z-[99999999999999] flex",
+      )}
+      {...(playbookStyle?.overlay && {
+        style: {
+          width: playbookStyle.overlay.width || 450,
+          height: playbookStyle.overlay.height || "calc(100vh - 4rem)",
+          maxHeight: "calc(100vh - 4rem)",
+          right:
+            playbookStyle.overlay.right !== undefined
+              ? playbookStyle.overlay.right
+              : playbookStyle.overlay.position === "right"
+                ? 32
+                : undefined,
+          left:
+            playbookStyle.overlay.left !== undefined
+              ? playbookStyle.overlay.left
+              : playbookStyle.overlay.position === "left"
+                ? 32
+                : undefined,
+        },
+      })}
+    >
+      {playbookStyle?.overlay && (
+        <div
+          className={cn(
+            "size-9 relative p-1 top-3 z-[99999999999999] border-none rounded-l-sm ",
+          )}
+          style={{
+            backgroundColor:
+              playbookStyle?.whiteLabel?.primaryColor || "#007BFF",
+            boxShadow: "0px 3px 3px 0px #00000040",
+          }}
+        >
+          <img
+            src={ConfidenceLogo}
+            alt="Confidence Logo"
+            className="w-full h-full object-contain"
+          />
+        </div>
+      )}
+      <div
+        className={cn(
+          "flex flex-col flex-1 bg-gray-50",
+          playbookStyle?.overlay &&
+            "border border-gray-200 shadow-2xl rounded-t-sm overflow-y-auto",
+        )}
+      >
+        <PlaybookHeader
+          title={playbookInstanceName}
+          className={cn("top-0 sticky z-2")}
+          playbookStyle={playbookStyle}
+          ref={playbookHeaderRef}
+        />
+
+        <TasksContainer
+          playbookMode={playbookMode}
+          numberOfTasks={playbook.numberofTasks}
+        >
+          {tasks.map((task, index) => {
+            return (
+              <ConfidenceTask
+                key={index}
+                task={task}
+                step={index + 1}
+                viewMode={playbookMode}
+                playbookId={playbook.playbookId}
+                canStart={task.sequenceOrder === sequenceOrderToStart}
+                onButtonClick={(btn) => {
+                  return onTaskButtonClick(btn, task.taskInstanceId);
+                }}
+                playbookType={"Non-Sequential"}
+                taskStyle={{
+                  titleColor: playbookStyle?.whiteLabel?.primaryColor,
+                }}
+                isExpanded={isTaskExpanded(task.taskInstanceId)}
+                toggleExpanded={() => toggleTaskExpanded(task.taskInstanceId)}
+                listStickyTopBase={playbookHeaderHeight || 104} // Adjust this value based on your header height
+              />
+            );
+          })}
+        </TasksContainer>
+      </div>
+    </div>
+  );
+};
+
+const AutoInstantiated = ({
+  email,
+  playbookId,
+  playbookMode,
+}: {
+  email: string;
+  playbookId: string;
+  playbookMode: "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}
+      playbookMode={playbookMode}
+    />
+  );
+};
+
+const WithInstantiateButton = ({
+  playbookId,
+  playbookMode = "list",
+  playbookStyle,
+  btnLabel = "Start Playbook",
+}: {
+  playbookId: string;
+  playbookMode?: "list" | "card";
+  playbookStyle?: ConfidencePlaybookStyleConfiguration;
+  btnLabel?: string;
+}) => {
+  const [playbookInstanceId, setPlaybookInstanceId] = useState<number | null>(
+    null,
+  );
+
+  return (
+    <>
+      <ConfidencePlaybookButton
+        playbookId={playbookId}
+        disabled={!!playbookInstanceId}
+        onInitiated={setPlaybookInstanceId}
+        btnLabel={btnLabel}
+      />
+
+      {playbookInstanceId && (
+        <ConfidencePlaybook
+          playbookInstanceId={playbookInstanceId}
+          playbookMode={playbookMode}
+          playbookStyle={playbookStyle}
+        />
+      )}
+    </>
+  );
+};
+
+export const ConfidencePlaybook = ({
+  playbookInstanceId,
+  playbookMode,
+  playbookStyle,
+}: {
+  playbookInstanceId: string | number;
+  playbookMode: "list" | "card";
+  playbookStyle?: ConfidencePlaybookStyleConfiguration;
+}) => {
+  return (
+    <ConfidenceContext>
+      <ConfidencePlaybookInternal
+        playbookInstanceId={playbookInstanceId}
+        playbookMode={playbookMode}
+        playbookStyle={playbookStyle}
+      />
+    </ConfidenceContext>
+  );
+};
+
+ConfidencePlaybook.Context = ConfidenceContext;
+ConfidencePlaybook.View = PlaybookView;
+ConfidencePlaybook.AutoInstantiated = AutoInstantiated;
+ConfidencePlaybook.WithInstantiateButton = WithInstantiateButton;

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

@@ -0,0 +1,32 @@
+import { cn } from "../../utils/cn";
+import { type ConfidencePlaybookStyleConfiguration } from "./confidence-playbook";
+
+export const PlaybookHeader = ({
+  title,
+  className,
+  playbookStyle,
+  ...props
+}: React.ComponentProps<"div"> & {
+  title: string;
+  playbookStyle?: ConfidencePlaybookStyleConfiguration;
+}) => {
+  return (
+    <div
+      className={cn("border-b border-gray-200 flex items-center", className)}
+      style={{
+        backgroundColor:
+          playbookStyle?.whiteLabel?.titleBackgroundColor || "#f8f9fa",
+      }}
+      {...props}
+    >
+      <div
+        className="text-xl min-h-16 p-4"
+        style={{
+          color: playbookStyle?.whiteLabel?.titleTextColor,
+        }}
+      >
+        {title}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,79 @@
+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,
+  disabled,
+  btnLabel = "Run Playbook",
+}: {
+  btnClassName?: string;
+  buttonNode?: React.ReactNode;
+  size?: ButtonSizeType;
+  playbookId: string;
+  disabled?: boolean;
+  btnLabel?: 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}
+          disabled={disabled}
+        >
+          {btnLabel}
+        </Button>
+      )}
+
+      <InitiatePlaybookModal
+        isOpen={isOpen}
+        onClose={close}
+        onConfirm={async (email) => {
+          await onInitiatePlaybook(email);
+          close();
+        }}
+      />
+    </>
+  );
+};