@confidencesystemsinc/sdk 1.2.0 → 1.2.1

package/src/components/ui/button.tsx

@@ -0,0 +1,272 @@
+import {
+  ReactNode,
+  ButtonHTMLAttributes,
+  CSSProperties,
+  forwardRef,
+} from "react";
+import { twMerge } from "tailwind-merge";
+/*
+ DOCS: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth
+*/
+
+const ButtonBase =
+  "whitespace-nowrap font-normal flex items-center justify-center";
+const ButtonFocus =
+  "focus:outline focus:outline-3 focus:outline-primary-500/[.3]";
+const ButtonDisabled = "disabled:opacity-15 disabled:pointer-events-none";
+
+const isLight = (color: string) => {
+  return Boolean(color === "grayLight" || color === "warning");
+};
+
+const handleNoneColor = (fn: () => string, color?: string) => {
+  if (!color || color === "none") {
+    return "";
+  }
+  return fn();
+};
+
+const buttonColorBase = (color: string, active: boolean) =>
+  handleNoneColor(() => {
+    const useColor = color === "gray400" ? "gray" : color;
+    const textColor = isLight(useColor)
+      ? "active:text-black"
+      : "active:text-white";
+    if (color === "primary") {
+      return active
+        ? `bg-${useColor}-800 text-white`
+        : `hover:bg-${useColor}-800 active:bg-${useColor}-800 hover:text-white ${textColor}`;
+    } else if (useColor === "grayDark") {
+      return active
+        ? "bg-gray-800 text-white"
+        : `hover:bg-gray-800 active:bg-gray-800 hover:text-white ${textColor}`;
+    } else if (useColor === "grayLight") {
+      return active
+        ? "bg-gray-50 text-black"
+        : `hover:bg-gray-50 active:bg-gray-50 hover:text-black ${textColor}`;
+    } else if (color === "gray400") {
+      return active
+        ? `bg-${useColor}-500 text-white`
+        : `hover:bg-${useColor}-500 active:bg-${useColor}-500 hover:text-white ${textColor}`;
+    }
+    return active
+      ? `bg-${useColor}-700 text-white`
+      : `hover:bg-${useColor}-600 active:bg-${useColor}-700 hover:text-white ${textColor}`;
+  }, color);
+
+const buttonColorSolid = (color: string) =>
+  handleNoneColor(() => {
+    const textColor = isLight(color) ? "text-black" : "text-white";
+    if (color === "primary") {
+      return `bg-primary-600 ${textColor}`;
+    } else if (color === "gray400") {
+      return `bg-gray-400 ${textColor}`;
+    }
+    return `bg-${color}-500 ${textColor}`;
+  }, color);
+
+const buttonColorLink = (color: string) => {
+  const classes: Record<string, string> = {
+    dark: "text-dark hover:text-dark",
+    yellow: "text-yellow hover:text-yellow",
+    gray: "text-gray-500 hover:text-gray-800",
+    primary: "text-primary-600 hover:text-primary-800",
+    secondary: "text-secondary-500 hover:text-secondary-800",
+    success: "text-success-500 hover:text-success-800",
+    info: "text-info-500 hover:text-info-800",
+    warning: "text-warning-500 hover:text-warning-800",
+    danger: "text-danger-500 hover:text-danger-800",
+    steel: "text-steel-500 hover:text-steel-800",
+    orange: "text-orange-500 hover:text-orange-800",
+    purple: "text-purple-500 hover:text-purple-800",
+    "fiserv-orange": "text-fiserv-orange-500 hover:text-fiserv-orange-800",
+    grayDark: "text-gray-800 hover:text-gray-900",
+    grayLight: "text-gray-50 hover:text-gray-400",
+    gray400: "text-gray-400 hover:text-gray-700",
+  };
+  return (color && classes[color]) || "";
+};
+
+const buttonColorLinkHoverSolid = (color: string, active: boolean) => {
+  const classes: Record<string, string> = {
+    dark: active
+      ? "bg-dark text-white"
+      : "text-dark hover:bg-dark hover:text-white",
+    yellow: active
+      ? "bg-yellow text-white"
+      : "text-yellow hover:bg-yellow hover:text-white",
+    gray: active
+      ? "bg-gray-500 text-white"
+      : "text-gray-500 hover:bg-gray-500 hover:text-white",
+    primary: active
+      ? "bg-primary-800 text-white"
+      : "text-primary-600 hover:bg-primary-800 hover:text-white",
+    secondary: active
+      ? "bg-secondary-500 text-white"
+      : "text-secondary-500 hover:bg-secondary-500 hover:text-white",
+    success: active
+      ? "bg-success-500 text-white"
+      : "text-success-500 hover:bg-success-500 hover:text-white",
+    info: active
+      ? "bg-info-500 text-white"
+      : "text-info-500 hover:bg-info-500 hover:text-white",
+    warning: active
+      ? "bg-warning-500 text-white"
+      : "text-warning-500 hover:bg-warning-500 hover:text-white",
+    danger: active
+      ? "bg-danger-500 text-white"
+      : "text-danger-500 hover:bg-danger-500 hover:text-white",
+    steel: active
+      ? "bg-steel-500 text-white"
+      : "text-steel-500 hover:bg-steel-500 hover:text-white",
+    orange: active
+      ? "bg-orange-500 text-white"
+      : "text-orange-500 hover:bg-orange-500 hover:text-white",
+    purple: active
+      ? "bg-purple-500 text-white"
+      : "text-purple-500 hover:bg-purple-500 hover:text-white",
+    "fiserv-orange": active
+      ? "bg-fiserv-orange-500 text-white"
+      : "text-fiserv-orange-500 hover:bg-fiserv-orange-500 hover:text-white",
+    grayDark: active
+      ? "bg-gray-900 text-white"
+      : "text-gray-800 hover:bg-gray-900 hover:text-white",
+    grayLight: active
+      ? "bg-gray-400 text-white"
+      : "text-gray-50 hover:bg-gray-400 hover:text-white",
+    gray400: active
+      ? "bg-gray-500 text-white"
+      : "text-gray-400 hover:bg-gray-500 hover:text-white",
+  };
+  return (color && classes[color]) || "";
+};
+
+const buttonColorOutline = (color: string, active: boolean) => {
+  if (!color || color === "none") {
+    return "";
+  } else if (color === "primary") {
+    return `border border-primary-600 ${active ? "" : "text-primary-600"}`;
+  } else if (color === "grayDark") {
+    return `border border-gray-800 ${active ? "" : "text-gray-800"}`;
+  } else if (color === "grayLight") {
+    return `border border-gray-50 ${active ? "" : "text-gray-400"}`;
+  } else if (color === "gray400") {
+    return `border border-gray-400 ${active ? "" : "text-gray-400"}`;
+  }
+
+  return `border border-${color}-500 ${active ? "" : `text-${color}-500`}`;
+};
+
+export type ButtonCategoryType =
+  | "solid"
+  | "link"
+  | "linkHoverSolid"
+  | "outline";
+
+const ButtonCategoryFn = (
+  color: string,
+  active: boolean,
+): { [key in ButtonCategoryType]: string } => {
+  return {
+    solid: buttonColorSolid(color),
+    link: buttonColorLink(color),
+    linkHoverSolid: buttonColorLinkHoverSolid(color, active),
+    outline: buttonColorOutline(color, active),
+  };
+};
+
+export const ButtonSize = {
+  none: "",
+  default: "min-w-fit h-[40px] text-base px-3",
+  base: "w-full md:min-w-fit h-[40px] text-base px-3",
+  small: "min-w-[106px] h-[30px] text-sm px-2",
+  normal: "min-w-[140px] h-[38px] text-base px-3",
+  large: "min-w-[160px] h-[40px] text-lg px-3",
+  NormalBlock: "w-full h-[40px] text-lg px-3",
+  box: "w-[38px] h-[38px]",
+  smallCollapse: "h-[30px] text-sm px-2",
+  normalCollapse: "h-[38px] text-base px-3",
+} as const;
+
+export type ButtonSizeType = keyof typeof ButtonSize;
+
+export const ButtonRounded = {
+  none: "",
+  default: "rounded",
+  pill: "rounded-pill",
+} as const;
+
+export type ButtonRoundedType = keyof typeof ButtonRounded;
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<Omit<HTMLButtonElement, "type">> {
+  active?: boolean;
+  children: ReactNode;
+  color?: string;
+  size?: ButtonSizeType;
+  category?: "solid" | "link" | "outline" | "linkHoverSolid";
+  type?: "button" | "submit";
+  rounded?: ButtonRoundedType;
+  className?: string;
+  useFilterStyle?: boolean;
+  usePaginationStyle?: boolean;
+  dataCy?: string;
+  testingIdKey?: string;
+  style?: CSSProperties;
+  primaryColor?: string; // for custom primary color
+}
+
+const button = (
+  {
+    active = false,
+    children,
+    color = "primary",
+    size = "normal",
+    category = "solid",
+    className,
+    type = "button",
+    rounded = "default",
+    style = {},
+    primaryColor,
+    ...props
+  }: ButtonProps,
+  ref: React.Ref<HTMLButtonElement>,
+) => {
+  const disabledClasses = ButtonDisabled;
+  const colorBaseClasses = !/link/.test(category)
+    ? buttonColorBase(color, active)
+    : null;
+  const focusClasses = ButtonFocus; // for accessibility we always need focus outlines
+  const sizeClasses = ButtonSize[size];
+  const categoryClasses = ButtonCategoryFn(color, active)?.[category];
+  const colorClasses = twMerge(colorBaseClasses, categoryClasses);
+  const roundedClasses = ButtonRounded[rounded];
+  return (
+    <button
+      {...props}
+      style={{
+        ...style,
+        transition:
+          "color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out",
+        backgroundColor: primaryColor ? primaryColor + "!important" : undefined,
+      }}
+      type={type}
+      ref={ref}
+      className={twMerge(
+        ButtonBase,
+        focusClasses,
+        disabledClasses,
+        sizeClasses,
+        colorClasses,
+        roundedClasses,
+        className,
+        "cursor-pointer",
+      )}
+    >
+      {children}
+    </button>
+  );
+};
+
+const Button = forwardRef(button);
+export default Button;

package/src/components/ui/header.tsx

@@ -0,0 +1,12 @@
+export const Header = () => {
+  return (
+    <div
+      className="sticky top-0 z-[4]"
+      style={{ background: "rgb(0, 123, 255)" }}
+    >
+      <div className="container">
+        <div className="flex h-[56px] items-center"></div>
+      </div>
+    </div>
+  );
+};

package/src/components/ui/input.tsx

@@ -0,0 +1,39 @@
+import { Description, Field, Input, Label } from "@headlessui/react";
+import { cn } from "../../utils/cn";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  type?: string; // Optional type prop, default is "text"
+  label: string; // Required label prop for the input field
+  description?: string; // Optional description prop for additional information
+}
+export const InputField = ({
+  type = "text",
+  className,
+  label,
+  description,
+  ...props
+}: InputProps & {
+  className?: string;
+}) => {
+  return (
+    <div className="w-full max-w-md px-4">
+      <Field>
+        <Label className="font-medium text-gray-900">{label}</Label>
+        {description && (
+          <Description className="text-sm text-secondary">
+            {description}
+          </Description>
+        )}
+        <Input
+          type={type}
+          className={cn(
+            "mt-3 block w-full rounded-lg  border border-gray-200 px-3 py-1.5 text-sm/6 text-gray-800",
+            "focus:not-data-focus:outline-none data-focus:outline-2 data-focus:-outline-offset-2 data-focus:outline-primary-500",
+            className,
+          )}
+          {...props}
+        />
+      </Field>
+    </div>
+  );
+};

package/src/components/ui/modal.tsx

@@ -0,0 +1,88 @@
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from "@headlessui/react";
+import React from "react";
+import Button from "./button";
+
+export const Modal = ({
+  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;
+  };
+}) => {
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={close}
+      className="relative z-50 transition duration-300 ease-out data-closed:opacity-0 confidence-ui"
+      transition
+    >
+      {/* The backdrop, rendered as a fixed sibling to the panel container */}
+      <DialogBackdrop className="fixed inset-0 bg-black/30" />
+
+      {/* Full-screen container to center the panel */}
+      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
+        {/* The actual dialog panel  */}
+        <DialogPanel className="max-w-lg divide-y divide-gray-100 bg-white rounded-sm shadow-xl">
+          <DialogTitle className=" text-gray-900 p-4">{title}</DialogTitle>
+          <div className="p-4">{children}</div>
+          {dismissOptions || confirmOptions ? (
+            <div className="flex gap-4 justify-end p-4">
+              {dismissOptions ? (
+                <Button
+                  onClick={() => {
+                    dismissOptions.onClick();
+                    close();
+                  }}
+                  size="small"
+                  color="secondary"
+                >
+                  {dismissOptions.label}
+                </Button>
+              ) : (
+                <></>
+              )}
+
+              {confirmOptions ? (
+                <Button
+                  disabled={confirmOptions.disabled}
+                  onClick={() => {
+                    confirmOptions.onClick();
+                    close();
+                  }}
+                  size="small"
+                  color="primary"
+                >
+                  {confirmOptions.label}
+                </Button>
+              ) : (
+                <></>
+              )}
+            </div>
+          ) : (
+            <></>
+          )}
+        </DialogPanel>
+      </div>
+    </Dialog>
+  );
+};

package/src/components/ui/ui-wrapper.tsx

@@ -0,0 +1,7 @@
+export const ConfidenceUIWrapper = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return <div className="confidence-ui">{children}</div>;
+};

package/src/constants/settings.constants.ts

@@ -0,0 +1,4 @@
+const BASE_ENDPOINT = "https://marketplace.confidence.com/api";
+
+export const CONFIDENCE_API_ENDPOINT = BASE_ENDPOINT + "/confidence";
+export const DROPBOX_API_ENDPOINT = BASE_ENDPOINT + "/dropbox/prod";

package/src/context/confidence-context.tsx

@@ -0,0 +1,25 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createContext, useContext, useState } from "react";
+
+const Context = createContext<{
+  queryClient: QueryClient;
+} | null>(null);
+
+export const ConfidenceProvider = Context.Provider;
+
+export const useConfidenceContext = () => useContext(Context)!;
+
+export const ConfidenceContext = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [queryClient] = useState(new QueryClient());
+  console.log("Confidence Playbook Context Initialized");
+
+  return (
+    <Context.Provider value={{ queryClient }}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </Context.Provider>
+  );
+};

package/src/hooks/task/useCompleteTask.ts

@@ -0,0 +1,32 @@
+import { useMutation } from "@tanstack/react-query";
+import { completeTask } from "../../services/complete-task.service";
+import { useConfidenceContext } from "../../context/confidence-context";
+
+export const useCompleteTask = () => {
+  const { queryClient } = useConfidenceContext();
+
+  const completeTaskMutation = useMutation(
+    {
+      mutationFn: async (taskInstanceId: string) => {
+        return completeTask(taskInstanceId);
+      },
+    },
+    queryClient,
+  );
+
+  const completeTaskHandler = async (taskInstanceId: string) => {
+    return completeTaskMutation.mutateAsync(taskInstanceId, {
+      onSuccess: () => {
+        console.log("Task completed successfully");
+      },
+      onError: (error) => {
+        console.error("Error completing task:", error);
+      },
+    });
+  };
+
+  return {
+    completeTask: completeTaskHandler,
+    ...completeTaskMutation,
+  };
+};

package/src/hooks/task/useStartTask.ts

@@ -0,0 +1,35 @@
+import { useMutation } from "@tanstack/react-query";
+import { startTask } from "../../services/start-task.services";
+import { useConfidenceContext } from "../../context/confidence-context";
+
+export const useStartTask = () => {
+  const { queryClient } = useConfidenceContext();
+
+  const startTaskMutation = useMutation(
+    {
+      mutationFn: async (taskInstanceId: string) => {
+        const res = await startTask(taskInstanceId);
+        console.log(res);
+
+        return res;
+      },
+    },
+    queryClient,
+  );
+
+  const startTaskHandler = (taskInstanceId: string) => {
+    return startTaskMutation.mutateAsync(taskInstanceId, {
+      onSuccess: () => {
+        console.log("Task started successfully");
+      },
+      onError: (error) => {
+        console.error("Error starting task:", error);
+      },
+    });
+  };
+
+  return {
+    startTask: startTaskHandler,
+    ...startTaskMutation,
+  };
+};

package/src/hooks/task/useTaskDetails.ts

@@ -0,0 +1,42 @@
+import { useQuery } from "@tanstack/react-query";
+import { getTaskDetails } from "../../services/task-details.service";
+import { useConfidenceContext } from "../../context/confidence-context";
+
+export const useTaskDetails = ({
+  taskId,
+  playbookId,
+  enabled,
+}: {
+  taskId: number | string;
+  playbookId: string | number;
+  enabled: boolean;
+}) => {
+  const { queryClient } = useConfidenceContext();
+  const queryFn = async () =>
+    getTaskDetails({
+      taskId: +taskId,
+      templateId: playbookId.toString(),
+    });
+
+  const queryKey = ["taskDetails", +taskId, playbookId];
+  const query = useQuery(
+    {
+      queryKey,
+      queryFn,
+      enabled,
+    },
+    queryClient,
+  );
+
+  const prefetchQuery = () => {
+    queryClient.prefetchQuery({
+      queryFn,
+      queryKey,
+    });
+  };
+  return {
+    taskDetails: query.data,
+    prefetchQuery,
+    ...query,
+  };
+};

package/src/hooks/usePlaybook.ts

@@ -0,0 +1,54 @@
+import { useQuery } from "@tanstack/react-query";
+import { useConfidenceContext } from "../context/confidence-context";
+import { Playbook } from "../types/playbook.types";
+import { usePlaybookActions } from "./usePlaybookActions";
+import { CONFIDENCE_API_ENDPOINT } from "../constants/settings.constants";
+
+export const usePlaybook = (playbookInstanceId: number | string) => {
+  const { queryClient } = useConfidenceContext();
+  const query = useQuery(
+    {
+      queryFn: async () => {
+        const headers = new Headers();
+
+        const response = await fetch(
+          `${CONFIDENCE_API_ENDPOINT}/playbook-details`,
+          {
+            method: "POST",
+            cache: "no-store",
+            headers,
+            body: JSON.stringify({
+              playbookInstanceId: +playbookInstanceId,
+              start: 0,
+              limit: 50,
+            }),
+          },
+        );
+
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+
+        const data = await response.json();
+        if (data.error) {
+          throw new Error(data.error);
+        }
+
+        return data;
+      },
+      queryKey: ["playbook", +playbookInstanceId],
+    },
+    queryClient,
+  );
+
+  const actions = usePlaybookActions(playbookInstanceId, {
+    quickComplete: query.data?.quickComplete,
+  });
+
+  return {
+    playbook: query.data as Playbook,
+    isLoading: query.isLoading,
+    error: query.error,
+    actions,
+  };
+};

package/src/hooks/usePlaybookActions.ts

@@ -0,0 +1,69 @@
+import { useConfidenceContext } from "../context/confidence-context";
+import { Playbook } from "../types/playbook.types";
+import { Task, TASK_STATUS } from "../types/task.types";
+import { useCompleteTask } from "./task/useCompleteTask";
+import { useStartTask } from "./task/useStartTask";
+
+export const usePlaybookActions = (
+  playbookInstanceId: number | string,
+  options: {
+    quickComplete?: boolean;
+  },
+) => {
+  const { queryClient } = useConfidenceContext();
+
+  const { completeTask } = useCompleteTask();
+  const { startTask } = useStartTask();
+
+  const completeTaskHandler = async (
+    taskInstanceId: number,
+    sequenceOrder: number,
+  ) => {
+    const { status } = await completeTask(taskInstanceId.toString());
+    if (!status) return;
+
+    queryClient.setQueryData(
+      ["playbook", +playbookInstanceId],
+      (oldData: Playbook) => {
+        if (!oldData) return oldData;
+        const updatedTasks = oldData.tasks.map((task: Task) => {
+          if (
+            task.sequenceOrder === sequenceOrder + 1 &&
+            options.quickComplete
+          ) {
+            return { ...task, workflowStatus: TASK_STATUS.IN_PROGRESS };
+          }
+          if (task.taskInstanceId === taskInstanceId) {
+            return { ...task, workflowStatus: status };
+          }
+          return task;
+        });
+
+        return { ...oldData, tasks: updatedTasks };
+      },
+    );
+  };
+
+  const startTaskHandler = async (taskInstanceId: number) => {
+    const { status } = await startTask(taskInstanceId.toString());
+    if (!status) return;
+    queryClient.setQueryData(
+      ["playbook", +playbookInstanceId],
+      (oldData: Playbook) => {
+        if (!oldData) return oldData;
+        const updatedTasks = oldData.tasks.map((task: Task) => {
+          if (task.taskInstanceId === taskInstanceId) {
+            return { ...task, workflowStatus: status };
+          }
+          return task;
+        });
+        return { ...oldData, tasks: updatedTasks };
+      },
+    );
+  };
+
+  return {
+    completeTask: completeTaskHandler,
+    startTask: startTaskHandler,
+  };
+};