@confidencesystemsinc/sdk 1.2.3 → 1.2.5

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@confidencesystemsinc/sdk",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "exports": {
     ".": {

package/src/components/badge.tsx

@@ -1,116 +0,0 @@
-import { type 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,351 +0,0 @@
-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";
-    size?: {
-      width?: number | string;
-      height?: number | string;
-    };
-    offset?: {
-      top?: number | string;
-      right?: number | string;
-      left?: number | string;
-    };
-  };
-  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.size?.width || 450,
-          height: playbookStyle.overlay.size?.height || "calc(100vh - 4rem)",
-          maxHeight: "calc(100vh - 4rem)",
-          right:
-            playbookStyle.overlay.offset?.right !== undefined
-              ? playbookStyle.overlay.offset.right
-              : playbookStyle.overlay.position === "right"
-                ? 32
-                : undefined,
-          left:
-            playbookStyle.overlay.offset?.left !== undefined
-              ? playbookStyle.overlay.offset.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

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

@@ -1,79 +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,
-  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();
-        }}
-      />
-    </>
-  );
-};