Add credit card data parameter (#1599)

skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx

@@ -36,10 +36,13 @@ import { stringify as convertToYAML } from "yaml";
 import {
   AWSSecretParameter,
   WorkflowApiResponse,
+  WorkflowEditorParameterTypes,
+  WorkflowParameterTypes,
   WorkflowParameterValueType,
   WorkflowSettings,
 } from "../types/workflowTypes";
 import {
+  BitwardenCreditCardDataParameterYAML,
   BitwardenLoginCredentialParameterYAML,
   BitwardenSensitiveInformationParameterYAML,
   BlockYAML,
@@ -50,6 +53,11 @@ import {
 } from "../types/workflowYamlTypes";
 import { WorkflowHeader } from "./WorkflowHeader";
 import { WorkflowParametersStateContext } from "./WorkflowParametersStateContext";
+import {
+  BITWARDEN_CLIENT_ID_AWS_SECRET_KEY,
+  BITWARDEN_CLIENT_SECRET_AWS_SECRET_KEY,
+  BITWARDEN_MASTER_PASSWORD_AWS_SECRET_KEY,
+} from "./constants";
 import { edgeTypes } from "./edges";
 import {
   AppNode,
@@ -82,11 +90,12 @@ function convertToParametersYAML(
   | BitwardenLoginCredentialParameterYAML
   | ContextParameterYAML
   | BitwardenSensitiveInformationParameterYAML
+  | BitwardenCreditCardDataParameterYAML
 > {
   return parameters.map((parameter) => {
-    if (parameter.parameterType === "workflow") {
+    if (parameter.parameterType === WorkflowEditorParameterTypes.Workflow) {
       return {
-        parameter_type: "workflow",
+        parameter_type: WorkflowParameterTypes.Workflow,
         key: parameter.key,
         description: parameter.description || null,
         workflow_parameter_type: parameter.dataType,
@@ -94,39 +103,58 @@ function convertToParametersYAML(
           ? {}
           : { default_value: parameter.defaultValue }),
       };
-    } else if (parameter.parameterType === "context") {
+    } else if (
+      parameter.parameterType === WorkflowEditorParameterTypes.Context
+    ) {
       return {
-        parameter_type: "context",
+        parameter_type: WorkflowParameterTypes.Context,
         key: parameter.key,
         description: parameter.description || null,
         source_parameter_key: parameter.sourceParameterKey,
       };
-    } else if (parameter.parameterType === "secret") {
+    } else if (
+      parameter.parameterType === WorkflowEditorParameterTypes.Secret
+    ) {
       return {
-        parameter_type: "bitwarden_sensitive_information",
+        parameter_type: WorkflowParameterTypes.Bitwarden_Sensitive_Information,
         key: parameter.key,
         bitwarden_identity_key: parameter.identityKey,
         bitwarden_identity_fields: parameter.identityFields,
         description: parameter.description || null,
         bitwarden_collection_id: parameter.collectionId,
-        bitwarden_client_id_aws_secret_key: "SKYVERN_BITWARDEN_CLIENT_ID",
+        bitwarden_client_id_aws_secret_key: BITWARDEN_CLIENT_ID_AWS_SECRET_KEY,
         bitwarden_client_secret_aws_secret_key:
-          "SKYVERN_BITWARDEN_CLIENT_SECRET",
+          BITWARDEN_CLIENT_SECRET_AWS_SECRET_KEY,
         bitwarden_master_password_aws_secret_key:
-          "SKYVERN_BITWARDEN_MASTER_PASSWORD",
+          BITWARDEN_MASTER_PASSWORD_AWS_SECRET_KEY,
+      };
+    } else if (
+      parameter.parameterType === WorkflowEditorParameterTypes.CreditCardData
+    ) {
+      return {
+        parameter_type: WorkflowParameterTypes.Bitwarden_Credit_Card_Data,
+        key: parameter.key,
+        description: parameter.description || null,
+        bitwarden_item_id: parameter.itemId,
+        bitwarden_collection_id: parameter.collectionId,
+        bitwarden_client_id_aws_secret_key: BITWARDEN_CLIENT_ID_AWS_SECRET_KEY,
+        bitwarden_client_secret_aws_secret_key:
+          BITWARDEN_CLIENT_SECRET_AWS_SECRET_KEY,
+        bitwarden_master_password_aws_secret_key:
+          BITWARDEN_MASTER_PASSWORD_AWS_SECRET_KEY,
       };
     } else {
       return {
-        parameter_type: "bitwarden_login_credential",
+        parameter_type: WorkflowParameterTypes.Bitwarden_Login_Credential,
         key: parameter.key,
         description: parameter.description || null,
         bitwarden_collection_id: parameter.collectionId,
         url_parameter_key: parameter.urlParameterKey,
-        bitwarden_client_id_aws_secret_key: "SKYVERN_BITWARDEN_CLIENT_ID",
+        bitwarden_client_id_aws_secret_key: BITWARDEN_CLIENT_ID_AWS_SECRET_KEY,
         bitwarden_client_secret_aws_secret_key:
-          "SKYVERN_BITWARDEN_CLIENT_SECRET",
+          BITWARDEN_CLIENT_SECRET_AWS_SECRET_KEY,
         bitwarden_master_password_aws_secret_key:
-          "SKYVERN_BITWARDEN_MASTER_PASSWORD",
+          BITWARDEN_MASTER_PASSWORD_AWS_SECRET_KEY,
       };
     }
   });
@@ -161,6 +189,13 @@ export type ParametersState = Array<
       collectionId: string;
       description?: string | null;
     }
+  | {
+      key: string;
+      parameterType: "creditCardData";
+      itemId: string;
+      collectionId: string;
+      description?: string | null;
+    }
 >;
 
 type Props = {

skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx

@@ -7,7 +7,12 @@ import { useWorkflowQuery } from "../hooks/useWorkflowQuery";
 import { FlowRenderer } from "./FlowRenderer";
 import { getElements } from "./workflowEditorUtils";
 import { LogoMinimized } from "@/components/LogoMinimized";
-import { WorkflowSettings } from "../types/workflowTypes";
+import {
+  isDisplayedInWorkflowEditor,
+  WorkflowEditorParameterTypes,
+  WorkflowParameterTypes,
+  WorkflowSettings,
+} from "../types/workflowTypes";
 
 function WorkflowEditor() {
   const { workflowPermanentId } = useParams();
@@ -27,7 +32,6 @@ function WorkflowEditor() {
     setHasChanges(false);
   });
 
-  // TODO
   if (isLoading) {
     return (
       <div className="flex h-screen w-full items-center justify-center">
@@ -56,13 +60,7 @@ function WorkflowEditor() {
           initialNodes={elements.nodes}
           initialEdges={elements.edges}
           initialParameters={workflow.workflow_definition.parameters
-            .filter(
+            .filter((parameter) => isDisplayedInWorkflowEditor(parameter))
-              (parameter) =>
-                parameter.parameter_type === "workflow" ||
-                parameter.parameter_type === "bitwarden_login_credential" ||
-                parameter.parameter_type === "context" ||
-                parameter.parameter_type === "bitwarden_sensitive_information",
-            )
             .map((parameter) => {
               if (parameter.parameter_type === "workflow") {
                 return {
@@ -90,6 +88,17 @@ function WorkflowEditor() {
                   identityFields: parameter.bitwarden_identity_fields,
                   description: parameter.description,
                 };
+              } else if (
+                parameter.parameter_type ===
+                WorkflowParameterTypes.Bitwarden_Credit_Card_Data
+              ) {
+                return {
+                  key: parameter.key,
+                  parameterType: WorkflowEditorParameterTypes.CreditCardData,
+                  collectionId: parameter.bitwarden_collection_id,
+                  itemId: parameter.bitwarden_item_id,
+                  description: parameter.description,
+                };
               } else {
                 return {
                   key: parameter.key,

skyvern-frontend/src/routes/workflows/editor/constants.ts

@@ -14,3 +14,9 @@ export const SMTP_USERNAME_AWS_KEY = "SKYVERN_SMTP_USERNAME_SES";
 export const SMTP_PASSWORD_AWS_KEY = "SKYVERN_SMTP_PASSWORD_SES";
 
 export const EMAIL_BLOCK_SENDER = "hello@skyvern.com";
+
+export const BITWARDEN_CLIENT_ID_AWS_SECRET_KEY = "SKYVERN_BITWARDEN_CLIENT_ID";
+export const BITWARDEN_CLIENT_SECRET_AWS_SECRET_KEY =
+  "SKYVERN_BITWARDEN_CLIENT_SECRET";
+export const BITWARDEN_MASTER_PASSWORD_AWS_SECRET_KEY =
+  "SKYVERN_BITWARDEN_MASTER_PASSWORD";

skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx

@@ -2,7 +2,10 @@ import { Cross2Icon } from "@radix-ui/react-icons";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { useState } from "react";
-import { WorkflowParameterValueType } from "../../types/workflowTypes";
+import {
+  WorkflowEditorParameterType,
+  WorkflowParameterValueType,
+} from "../../types/workflowTypes";
 import {
   Select,
   SelectContent,
@@ -21,7 +24,7 @@ import { SourceParameterKeySelector } from "../../components/SourceParameterKeyS
 import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 
 type Props = {
-  type: "workflow" | "credential" | "context" | "secret";
+  type: WorkflowEditorParameterType;
   onClose: () => void;
   onSave: (value: ParametersState[number]) => void;
 };
@@ -35,7 +38,7 @@ const workflowParameterTypeOptions = [
   { label: "JSON", value: WorkflowParameterValueType.JSON },
 ];
 
-function header(type: "workflow" | "credential" | "context" | "secret") {
+function header(type: WorkflowEditorParameterType) {
   if (type === "workflow") {
     return "Add Input Parameter";
   }
@@ -45,6 +48,9 @@ function header(type: "workflow" | "credential" | "context" | "secret") {
   if (type === "secret") {
     return "Add Secret Parameter";
   }
+  if (type === "creditCardData") {
+    return "Add Credit Card Data Parameter";
+  }
   return "Add Context Parameter";
 }
 
@@ -68,6 +74,7 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
 
   const [identityKey, setIdentityKey] = useState("");
   const [identityFields, setIdentityFields] = useState("");
+  const [itemId, setItemId] = useState("");
 
   return (
     <ScrollArea>
@@ -230,6 +237,24 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
               </div>
             </>
           )}
+          {type === "creditCardData" && (
+            <>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">Item ID</Label>
+                <Input
+                  value={itemId}
+                  onChange={(e) => setItemId(e.target.value)}
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">Collection ID</Label>
+                <Input
+                  value={collectionId}
+                  onChange={(e) => setCollectionId(e.target.value)}
+                />
+              </div>
+            </>
+          )}
           <div className="flex justify-end">
             <Button
               onClick={() => {
@@ -264,15 +289,21 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
                       : null,
                   });
                 }
-                if (type === "credential") {
+                if (
+                  type === "credential" ||
+                  type === "secret" ||
+                  type === "creditCardData"
+                ) {
                   if (!collectionId) {
                     toast({
                       variant: "destructive",
-                      title: "Failed to add parameter",
+                      title: "Failed to save parameter",
                       description: "Collection ID is required",
                     });
                     return;
                   }
+                }
+                if (type === "credential") {
                   onSave({
                     key,
                     parameterType: "credential",
@@ -282,14 +313,6 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
                   });
                 }
                 if (type === "secret") {
-                  if (!collectionId) {
-                    toast({
-                      variant: "destructive",
-                      title: "Failed to add parameter",
-                      description: "Collection ID is required",
-                    });
-                    return;
-                  }
                   onSave({
                     key,
                     parameterType: "secret",
@@ -302,6 +325,15 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
                     description,
                   });
                 }
+                if (type === "creditCardData") {
+                  onSave({
+                    key,
+                    parameterType: "creditCardData",
+                    collectionId,
+                    itemId,
+                    description,
+                  });
+                }
                 if (type === "context") {
                   if (!sourceParameterKey) {
                     toast({

skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterEditPanel.tsx

@@ -2,7 +2,10 @@ import { Cross2Icon } from "@radix-ui/react-icons";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { useState } from "react";
-import { WorkflowParameterValueType } from "../../types/workflowTypes";
+import {
+  WorkflowEditorParameterType,
+  WorkflowParameterValueType,
+} from "../../types/workflowTypes";
 import {
   Select,
   SelectContent,
@@ -21,7 +24,7 @@ import { SourceParameterKeySelector } from "../../components/SourceParameterKeyS
 import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 
 type Props = {
-  type: "workflow" | "credential" | "context" | "secret";
+  type: WorkflowEditorParameterType;
   onClose: () => void;
   onSave: (value: ParametersState[number]) => void;
   initialValues: ParametersState[number];
@@ -36,7 +39,7 @@ const workflowParameterTypeOptions = [
   { label: "JSON", value: WorkflowParameterValueType.JSON },
 ];
 
-function header(type: "workflow" | "credential" | "context" | "secret") {
+function header(type: WorkflowEditorParameterType) {
   if (type === "workflow") {
     return "Edit Input Parameter";
   }
@@ -46,6 +49,9 @@ function header(type: "workflow" | "credential" | "context" | "secret") {
   if (type === "secret") {
     return "Edit Secret Parameter";
   }
+  if (type === "creditCardData") {
+    return "Edit Credit Card Data Parameter";
+  }
   return "Edit Context Parameter";
 }
 
@@ -66,7 +72,8 @@ function WorkflowParameterEditPanel({
   );
   const [collectionId, setCollectionId] = useState(
     initialValues.parameterType === "credential" ||
-      initialValues.parameterType === "secret"
+      initialValues.parameterType === "secret" ||
+      initialValues.parameterType === "creditCardData"
       ? initialValues.collectionId
       : "",
   );
@@ -110,6 +117,12 @@ function WorkflowParameterEditPanel({
       : "",
   );
 
+  const [itemId, setItemId] = useState(
+    initialValues.parameterType === "creditCardData"
+      ? initialValues.itemId
+      : "",
+  );
+
   return (
     <ScrollArea>
       <ScrollAreaViewport className="max-h-[500px]">
@@ -271,6 +284,24 @@ function WorkflowParameterEditPanel({
               </div>
             </>
           )}
+          {type === "creditCardData" && (
+            <>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">Item ID</Label>
+                <Input
+                  value={itemId}
+                  onChange={(e) => setItemId(e.target.value)}
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">Collection ID</Label>
+                <Input
+                  value={collectionId}
+                  onChange={(e) => setCollectionId(e.target.value)}
+                />
+              </div>
+            </>
+          )}
           <div className="flex justify-end">
             <Button
               onClick={() => {
@@ -305,7 +336,11 @@ function WorkflowParameterEditPanel({
                       : null,
                   });
                 }
-                if (type === "credential") {
+                if (
+                  type === "credential" ||
+                  type === "secret" ||
+                  type === "creditCardData"
+                ) {
                   if (!collectionId) {
                     toast({
                       variant: "destructive",
@@ -314,6 +349,8 @@ function WorkflowParameterEditPanel({
                     });
                     return;
                   }
+                }
+                if (type === "credential") {
                   onSave({
                     key,
                     parameterType: "credential",
@@ -323,14 +360,6 @@ function WorkflowParameterEditPanel({
                   });
                 }
                 if (type === "secret") {
-                  if (!collectionId) {
-                    toast({
-                      variant: "destructive",
-                      title: "Failed to add parameter",
-                      description: "Collection ID is required",
-                    });
-                    return;
-                  }
                   onSave({
                     key,
                     parameterType: "secret",
@@ -343,6 +372,15 @@ function WorkflowParameterEditPanel({
                     description,
                   });
                 }
+                if (type === "creditCardData") {
+                  onSave({
+                    key,
+                    parameterType: "creditCardData",
+                    collectionId,
+                    itemId,
+                    description,
+                  });
+                }
                 if (type === "context") {
                   if (!sourceParameterKey) {
                     toast({

skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParametersPanel.tsx

@@ -27,6 +27,10 @@ import {
 import { useReactFlow } from "@xyflow/react";
 import { useWorkflowHasChangesStore } from "@/store/WorkflowHasChangesStore";
 import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
+import {
+  WorkflowEditorParameterType,
+  WorkflowEditorParameterTypes,
+} from "../../types/workflowTypes";
 
 const WORKFLOW_EDIT_PANEL_WIDTH = 20 * 16;
 const WORKFLOW_EDIT_PANEL_GAP = 1 * 16;
@@ -41,7 +45,7 @@ function WorkflowParametersPanel() {
     active: boolean;
     operation: "add" | "edit";
     parameter?: ParametersState[number] | null;
-    type: "workflow" | "credential" | "context" | "secret";
+    type: WorkflowEditorParameterType;
   }>({
     active: false,
     operation: "add",
@@ -114,6 +118,17 @@ function WorkflowParametersPanel() {
             >
               Secret Parameter
             </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                setOperationPanelState({
+                  active: true,
+                  operation: "add",
+                  type: WorkflowEditorParameterTypes.CreditCardData,
+                });
+              }}
+            >
+              Credit Card Data Parameter
+            </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
 

skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts

@@ -2,14 +2,16 @@ import Dagre from "@dagrejs/dagre";
 import type { Node } from "@xyflow/react";
 import { Edge } from "@xyflow/react";
 import { nanoid } from "nanoid";
-import type {
+import {
-  AWSSecretParameter,
+  WorkflowBlockTypes,
-  OutputParameter,
+  WorkflowParameterTypes,
-  Parameter,
+  type AWSSecretParameter,
-  WorkflowApiResponse,
+  type OutputParameter,
-  WorkflowBlock,
+  type Parameter,
-  WorkflowParameterValueType,
+  type WorkflowApiResponse,
-  WorkflowSettings,
+  type WorkflowBlock,
+  type WorkflowParameterValueType,
+  type WorkflowSettings,
 } from "../types/workflowTypes";
 import {
   ActionBlockYAML,
@@ -1241,22 +1243,22 @@ const sendEmailExpectedParameters = [
   {
     key: SMTP_HOST_PARAMETER_KEY,
     aws_key: SMTP_HOST_AWS_KEY,
-    parameter_type: "aws_secret",
+    parameter_type: WorkflowParameterTypes.AWS_Secret,
   },
   {
     key: SMTP_PORT_PARAMETER_KEY,
     aws_key: SMTP_PORT_AWS_KEY,
-    parameter_type: "aws_secret",
+    parameter_type: WorkflowParameterTypes.AWS_Secret,
   },
   {
     key: SMTP_USERNAME_PARAMETER_KEY,
     aws_key: SMTP_USERNAME_AWS_KEY,
-    parameter_type: "aws_secret",
+    parameter_type: WorkflowParameterTypes.AWS_Secret,
   },
   {
     key: SMTP_PASSWORD_PARAMETER_KEY,
     aws_key: SMTP_PASSWORD_AWS_KEY,
-    parameter_type: "aws_secret",
+    parameter_type: WorkflowParameterTypes.AWS_Secret,
   },
 ] as const;
 
@@ -1265,7 +1267,7 @@ function getAdditionalParametersForEmailBlock(
   parameters: Array<ParameterYAML>,
 ): Array<ParameterYAML> {
   const emailBlocks = blocks.filter(
-    (block) => block.block_type === "send_email",
+    (block) => block.block_type === WorkflowBlockTypes.SendEmail,
   );
   if (emailBlocks.length === 0) {
     return [];
@@ -1371,32 +1373,35 @@ function convertParametersToParameterYAML(
     const base = {
       key: parameter.key,
       description: parameter.description,
+      parameter_type: parameter.parameter_type,
     };
     switch (parameter.parameter_type) {
-      case "aws_secret": {
+      case WorkflowParameterTypes.AWS_Secret: {
         return {
           ...base,
-          parameter_type: "aws_secret",
+          parameter_type: WorkflowParameterTypes.AWS_Secret,
           aws_key: parameter.aws_key,
         };
       }
-      case "bitwarden_login_credential": {
+      case WorkflowParameterTypes.Bitwarden_Login_Credential: {
         return {
           ...base,
-          parameter_type: "bitwarden_login_credential",
+          parameter_type: WorkflowParameterTypes.Bitwarden_Login_Credential,
           bitwarden_collection_id: parameter.bitwarden_collection_id,
           url_parameter_key: parameter.url_parameter_key,
-          bitwarden_client_id_aws_secret_key: "SKYVERN_BITWARDEN_CLIENT_ID",
+          bitwarden_client_id_aws_secret_key:
+            parameter.bitwarden_client_id_aws_secret_key,
           bitwarden_client_secret_aws_secret_key:
-            "SKYVERN_BITWARDEN_CLIENT_SECRET",
+            parameter.bitwarden_client_secret_aws_secret_key,
           bitwarden_master_password_aws_secret_key:
-            "SKYVERN_BITWARDEN_MASTER_PASSWORD",
+            parameter.bitwarden_master_password_aws_secret_key,
         };
       }
-      case "bitwarden_sensitive_information": {
+      case WorkflowParameterTypes.Bitwarden_Sensitive_Information: {
         return {
           ...base,
-          parameter_type: "bitwarden_sensitive_information",
+          parameter_type:
+            WorkflowParameterTypes.Bitwarden_Sensitive_Information,
           bitwarden_collection_id: parameter.bitwarden_collection_id,
           bitwarden_identity_key: parameter.bitwarden_identity_key,
           bitwarden_identity_fields: parameter.bitwarden_identity_fields,
@@ -1408,17 +1413,31 @@ function convertParametersToParameterYAML(
             parameter.bitwarden_master_password_aws_secret_key,
         };
       }
-      case "context": {
+      case WorkflowParameterTypes.Bitwarden_Credit_Card_Data: {
         return {
           ...base,
-          parameter_type: "context",
+          parameter_type: WorkflowParameterTypes.Bitwarden_Credit_Card_Data,
+          bitwarden_collection_id: parameter.bitwarden_collection_id,
+          bitwarden_item_id: parameter.bitwarden_item_id,
+          bitwarden_client_id_aws_secret_key:
+            parameter.bitwarden_client_id_aws_secret_key,
+          bitwarden_client_secret_aws_secret_key:
+            parameter.bitwarden_client_secret_aws_secret_key,
+          bitwarden_master_password_aws_secret_key:
+            parameter.bitwarden_master_password_aws_secret_key,
+        };
+      }
+      case WorkflowParameterTypes.Context: {
+        return {
+          ...base,
+          parameter_type: WorkflowParameterTypes.Context,
           source_parameter_key: parameter.source.key,
         };
       }
-      case "workflow": {
+      case WorkflowParameterTypes.Workflow: {
         return {
           ...base,
-          parameter_type: "workflow",
+          parameter_type: WorkflowParameterTypes.Workflow,
           workflow_parameter_type: parameter.workflow_parameter_type,
           default_value: parameter.default_value,
         };
@@ -1645,7 +1664,7 @@ function convertBlocksToBlockYAML(
 
 function convert(workflow: WorkflowApiResponse): WorkflowCreateYAMLRequest {
   const userParameters = workflow.workflow_definition.parameters.filter(
-    (parameter) => parameter.parameter_type !== "output",
+    (parameter) => parameter.parameter_type !== WorkflowParameterTypes.Output,
   );
   return {
     title: workflow.title,

skyvern-frontend/src/routes/workflows/types/workflowTypes.ts

@@ -45,6 +45,20 @@ export type BitwardenSensitiveInformationParameter = WorkflowParameterBase & {
   deleted_at: string | null;
 };
 
+export type BitwardenCreditCardDataParameter = WorkflowParameterBase & {
+  parameter_type: "bitwarden_credit_card_data";
+  workflow_id: string;
+  bitwarden_credit_card_data_parameter_id: string;
+  bitwarden_client_id_aws_secret_key: string;
+  bitwarden_client_secret_aws_secret_key: string;
+  bitwarden_master_password_aws_secret_key: string;
+  bitwarden_collection_id: string;
+  bitwarden_item_id: string;
+  created_at: string;
+  modified_at: string;
+  deleted_at: string | null;
+};
+
 export type WorkflowParameter = WorkflowParameterBase & {
   parameter_type: "workflow";
   workflow_id: string;
@@ -83,17 +97,38 @@ export const WorkflowParameterValueType = {
 export type WorkflowParameterValueType =
   (typeof WorkflowParameterValueType)[keyof typeof WorkflowParameterValueType];
 
-export const WorkflowParameterType = {
+export const WorkflowParameterTypes = {
   Workflow: "workflow",
   Context: "context",
   Output: "output",
   AWS_Secret: "aws_secret",
   Bitwarden_Login_Credential: "bitwarden_login_credential",
   Bitwarden_Sensitive_Information: "bitwarden_sensitive_information",
+  Bitwarden_Credit_Card_Data: "bitwarden_credit_card_data",
 } as const;
 
 export type WorkflowParameterType =
-  (typeof WorkflowParameterType)[keyof typeof WorkflowParameterType];
+  (typeof WorkflowParameterTypes)[keyof typeof WorkflowParameterTypes];
+
+export function isDisplayedInWorkflowEditor(
+  parameter: Parameter,
+): parameter is
+  | WorkflowParameter
+  | ContextParameter
+  | BitwardenCreditCardDataParameter
+  | BitwardenLoginCredentialParameter
+  | BitwardenSensitiveInformationParameter {
+  return (
+    parameter.parameter_type === WorkflowParameterTypes.Workflow ||
+    parameter.parameter_type ===
+      WorkflowParameterTypes.Bitwarden_Login_Credential ||
+    parameter.parameter_type === WorkflowParameterTypes.Context ||
+    parameter.parameter_type ===
+      WorkflowParameterTypes.Bitwarden_Sensitive_Information ||
+    parameter.parameter_type ===
+      WorkflowParameterTypes.Bitwarden_Credit_Card_Data
+  );
+}
 
 export type Parameter =
   | WorkflowParameter
@@ -101,6 +136,7 @@ export type Parameter =
   | ContextParameter
   | BitwardenLoginCredentialParameter
   | BitwardenSensitiveInformationParameter
+  | BitwardenCreditCardDataParameter
   | AWSSecretParameter;
 
 export type WorkflowBlock =
@@ -155,6 +191,17 @@ export function isTaskVariantBlock(item: {
 export type WorkflowBlockType =
   (typeof WorkflowBlockTypes)[keyof typeof WorkflowBlockTypes];
 
+export const WorkflowEditorParameterTypes = {
+  Workflow: "workflow",
+  Credential: "credential",
+  Secret: "secret",
+  Context: "context",
+  CreditCardData: "creditCardData",
+} as const;
+
+export type WorkflowEditorParameterType =
+  (typeof WorkflowEditorParameterTypes)[keyof typeof WorkflowEditorParameterTypes];
+
 export type WorkflowBlockBase = {
   label: string;
   block_type: WorkflowBlockType;

skyvern-frontend/src/routes/workflows/types/workflowYamlTypes.ts

@@ -22,7 +22,8 @@ export type ParameterYAML =
   | AWSSecretParameterYAML
   | ContextParameterYAML
   | OutputParameterYAML
-  | BitwardenSensitiveInformationParameterYAML;
+  | BitwardenSensitiveInformationParameterYAML
+  | BitwardenCreditCardDataParameterYAML;
 
 export type ParameterYAMLBase = {
   parameter_type: string;
@@ -40,9 +41,9 @@ export type BitwardenLoginCredentialParameterYAML = ParameterYAMLBase & {
   parameter_type: "bitwarden_login_credential";
   bitwarden_collection_id: string;
   url_parameter_key: string;
-  bitwarden_client_id_aws_secret_key: "SKYVERN_BITWARDEN_CLIENT_ID";
+  bitwarden_client_id_aws_secret_key: string;
-  bitwarden_client_secret_aws_secret_key: "SKYVERN_BITWARDEN_CLIENT_SECRET";
+  bitwarden_client_secret_aws_secret_key: string;
-  bitwarden_master_password_aws_secret_key: "SKYVERN_BITWARDEN_MASTER_PASSWORD";
+  bitwarden_master_password_aws_secret_key: string;
 };
 
 export type AWSSecretParameterYAML = ParameterYAMLBase & {
@@ -60,6 +61,18 @@ export type BitwardenSensitiveInformationParameterYAML = ParameterYAMLBase & {
   bitwarden_master_password_aws_secret_key: string;
 };
 
+export type BitwardenCreditCardDataParameterYAML = ParameterYAMLBase & {
+  parameter_type: "bitwarden_credit_card_data";
+
+  // bitwarden ids for the credit card item
+  bitwarden_collection_id: string;
+  bitwarden_item_id: string;
+
+  bitwarden_client_id_aws_secret_key: string;
+  bitwarden_client_secret_aws_secret_key: string;
+  bitwarden_master_password_aws_secret_key: string;
+};
+
 export type ContextParameterYAML = ParameterYAMLBase & {
   parameter_type: "context";
   source_parameter_key: string;