@sparrowengg/integrations-templates-frontend 8.0.14-Beta → 8.0.15-Beta

package/README.md

@@ -75,6 +75,8 @@ The Mapping component provides a comprehensive interface for mapping survey fiel
 | `onDeleteHandler` | `(id: string \| number) => void` | ❌ | Delete field handler |
 | `draftHandler` | `(type: string \| null, editFieldId?: string \| number) => void` | ✅ | Draft save handler |
 | `configuration` | `ConfigurationObject` | ✅ | Configuration setup object |
+| `customTypeOptions` | `Record<string, any[] \| { type: SelectOption; options: any[] }>` | ❌ | Custom mapping types and their field options |
+| `disabledMappingTypes` | `string[]` | ❌ | Array of type values to hide from dropdown |
 
 #### FieldType
 
@@ -623,6 +625,59 @@ Most components support loading states for async operations:
 />
 ```
 
+## 🎨 Custom Type Options
+
+The Mapping component supports dynamic custom mapping types through the `customTypeOptions` prop. This allows integration-specific field types without modifying core constants.
+
+### Basic Usage
+
+```tsx
+<Mapping
+  customTypeOptions={{
+    'EMAIL_SHARE_PROPERTY': {
+      type: {
+        label: 'Email Share Property',
+        value: 'EMAIL_SHARE_PROPERTY',
+      },
+      options: [
+        {
+          value: 'success',
+          label: 'Is Email sent?',
+          fieldType: 'Property',
+          id: 'success',
+          description: 'Is Email sent?',
+        },
+        {
+          value: 'sentAt',
+          label: 'Email sent at',
+          fieldType: 'Property',
+          id: 'sentAt',
+          description: 'Email sent at',
+        },
+      ]
+    },
+  }}
+/>
+```
+
+### With Type Filtering
+
+```tsx
+<Mapping
+  customTypeOptions={{...}}
+  disabledMappingTypes={['QUESTION']} // Hide Question type
+/>
+```
+
+### Custom Type Structure
+
+Each custom type requires:
+- `type.label`: Display name in Type dropdown
+- `type.value`: Unique identifier
+- `options`: Array of field options available for this type
+
+For detailed documentation on custom types, see [CUSTOM_TYPE_OPTIONS.md](./CUSTOM_TYPE_OPTIONS.md).
+
 ## 🤝 TypeScript Support
 
 The library is built with TypeScript and provides comprehensive type definitions for all components and props. Import types as needed:

package/dist/cjs/commons/components/NamingModal.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var testId_context = require('../context/test-id.context.js');
 var dialog = require('../../node_modules/@sparrowengg/twigs-react/dist/es/dialog/dialog.js');
 var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
 var formInput = require('../../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js');
@@ -25,6 +26,7 @@ function NamingModal({
   updateLabel = "Update Mapping",
   saveDisabled = false
 }) {
+  const { tid } = testId_context.useTestId();
   return /* @__PURE__ */ React.createElement(dialog.Dialog, { open: isOpen, size: "sm" }, /* @__PURE__ */ React.createElement(dialog.DialogContent, null, /* @__PURE__ */ React.createElement(
     dialog.DialogHeader,
     {
@@ -68,7 +70,8 @@ function NamingModal({
         css: {
           width: "100%"
         },
-        onClick: saveHandler
+        onClick: saveHandler,
+        "data-testid": tid("save-name")
       },
       editFieldId ? updateLabel : saveLabel
     )
@@ -79,7 +82,8 @@ function NamingModal({
       icon: /* @__PURE__ */ React.createElement(close.CloseIcon, null),
       variant: "ghost",
       "aria-label": "Close",
-      color: "default"
+      color: "default",
+      "data-testid": tid("close-modal")
     }
   )))));
 }

package/dist/cjs/commons/components/NamingModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"NamingModal.js","sources":["../../../../src/commons/components/NamingModal.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Dialog,\n  DialogHeader,\n  DialogTitle,\n  DialogBody,\n  DialogFooter,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  IconButton,\n  Box,\n  Button,\n  Flex,\n  FormInput,\n} from \"@sparrowengg/twigs-react\";\nimport { CloseIcon } from \"@sparrowengg/twigs-react-icons\";\n\nexport default function NamingModal({\n  editFieldId,\n  mappingLoader = false,\n  saveHandler,\n  closeHandler,\n  value,\n  setValue,\n  isOpen,\n  title = \"Mapping Name\",\n  placeholder = \"Enter a name for future reference\",\n  saveLabel = \"Save Mapping\",\n  updateLabel = \"Update Mapping\",\n  saveDisabled = false,\n}: {\n  editFieldId: string | number | undefined;\n  mappingLoader?: boolean;\n  saveHandler: () => void;\n  closeHandler: () => void;\n  value: string;\n  setValue: (value: string) => void;\n  isOpen: boolean;\n  /** Dialog title. Defaults to \"Mapping Name\" to preserve existing behavior. */\n  title?: string;\n  /** Input placeholder. Defaults to the original mapping placeholder text. */\n  placeholder?: string;\n  /** Save button label (create mode). Defaults to \"Save Mapping\". */\n  saveLabel?: string;\n  /** Save button label (edit mode). Defaults to \"Update Mapping\". */\n  updateLabel?: string;\n  /**\n   * Disables the Save/Update button. Defaults to false to preserve existing\n   * behavior; opt-in callers use it to block updates when nothing changed.\n   */\n  saveDisabled?: boolean;\n}) {\n  return (\n    <Dialog open={isOpen} size=\"sm\">\n      <DialogContent>\n        <DialogHeader\n          css={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"flex-start\",\n            justifyContent: \"center\",\n            borderBottom: \"none !important\",\n          }}\n        >\n          <DialogTitle size=\"lg\">{title}</DialogTitle>\n        </DialogHeader>\n        <DialogBody css={{\n            paddingInline: '$12',\n            paddingTop: '0 !important',\n            paddingBottom: '$8',\n        }}>\n          <Flex flexDirection=\"column\" gap=\"$2\" css={{ marginBottom: \"$2\" }}>\n            <FormInput\n              size=\"lg\"\n              id=\"name\"\n              value={value}\n              onChange={(e) => setValue(e.target.value)}\n              maxLength={50}\n              placeholder={placeholder}\n            />\n          </Flex>\n        </DialogBody>\n        <DialogFooter>\n          <Flex\n            css={{\n              width: \"100%\",\n            }}\n          >\n            <Button\n              loading={mappingLoader}\n              size=\"lg\"\n              color=\"primary\"\n              disabled={saveDisabled}\n              css={{\n                width: \"100%\",\n              }}\n              onClick={saveHandler}\n            >\n              {editFieldId ? updateLabel : saveLabel}\n            </Button>\n          </Flex>\n        </DialogFooter>\n        <Box css={{ position: \"absolute\", top: \"$8\", right: \"$8\" }}>\n          <DialogClose asChild onClick={closeHandler}>\n            <IconButton\n              size=\"lg\"\n              icon={<CloseIcon />}\n              variant=\"ghost\"\n              aria-label=\"Close\"\n              color=\"default\"\n            />\n          </DialogClose>\n        </Box>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"names":["Dialog","DialogContent","DialogHeader","DialogTitle","DialogBody","Flex","FormInput","DialogFooter","Button","Box","DialogClose","IconButton","CloseIcon"],"mappings":"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"}
+{"version":3,"file":"NamingModal.js","sources":["../../../../src/commons/components/NamingModal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTestId } from \"../context/test-id.context\";\nimport {\n  Dialog,\n  DialogHeader,\n  DialogTitle,\n  DialogBody,\n  DialogFooter,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  IconButton,\n  Box,\n  Button,\n  Flex,\n  FormInput,\n} from \"@sparrowengg/twigs-react\";\nimport { CloseIcon } from \"@sparrowengg/twigs-react-icons\";\n\nexport default function NamingModal({\n  editFieldId,\n  mappingLoader = false,\n  saveHandler,\n  closeHandler,\n  value,\n  setValue,\n  isOpen,\n  title = \"Mapping Name\",\n  placeholder = \"Enter a name for future reference\",\n  saveLabel = \"Save Mapping\",\n  updateLabel = \"Update Mapping\",\n  saveDisabled = false,\n}: {\n  editFieldId: string | number | undefined;\n  mappingLoader?: boolean;\n  saveHandler: () => void;\n  closeHandler: () => void;\n  value: string;\n  setValue: (value: string) => void;\n  isOpen: boolean;\n  /** Dialog title. Defaults to \"Mapping Name\" to preserve existing behavior. */\n  title?: string;\n  /** Input placeholder. Defaults to the original mapping placeholder text. */\n  placeholder?: string;\n  /** Save button label (create mode). Defaults to \"Save Mapping\". */\n  saveLabel?: string;\n  /** Save button label (edit mode). Defaults to \"Update Mapping\". */\n  updateLabel?: string;\n  /**\n   * Disables the Save/Update button. Defaults to false to preserve existing\n   * behavior; opt-in callers use it to block updates when nothing changed.\n   */\n  saveDisabled?: boolean;\n}) {\n  const { tid } = useTestId();\n  return (\n    <Dialog open={isOpen} size=\"sm\">\n      <DialogContent>\n        <DialogHeader\n          css={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"flex-start\",\n            justifyContent: \"center\",\n            borderBottom: \"none !important\",\n          }}\n        >\n          <DialogTitle size=\"lg\">{title}</DialogTitle>\n        </DialogHeader>\n        <DialogBody css={{\n            paddingInline: '$12',\n            paddingTop: '0 !important',\n            paddingBottom: '$8',\n        }}>\n          <Flex flexDirection=\"column\" gap=\"$2\" css={{ marginBottom: \"$2\" }}>\n            <FormInput\n              size=\"lg\"\n              id=\"name\"\n              value={value}\n              onChange={(e) => setValue(e.target.value)}\n              maxLength={50}\n              placeholder={placeholder}\n            />\n          </Flex>\n        </DialogBody>\n        <DialogFooter>\n          <Flex\n            css={{\n              width: \"100%\",\n            }}\n          >\n            <Button\n              loading={mappingLoader}\n              size=\"lg\"\n              color=\"primary\"\n              disabled={saveDisabled}\n              css={{\n                width: \"100%\",\n              }}\n              onClick={saveHandler}\n              data-testid={tid('save-name')}\n            >\n              {editFieldId ? updateLabel : saveLabel}\n            </Button>\n          </Flex>\n        </DialogFooter>\n        <Box css={{ position: \"absolute\", top: \"$8\", right: \"$8\" }}>\n          <DialogClose asChild onClick={closeHandler}>\n            <IconButton\n              size=\"lg\"\n              icon={<CloseIcon />}\n              variant=\"ghost\"\n              aria-label=\"Close\"\n              color=\"default\"\n              data-testid={tid('close-modal')}\n            />\n          </DialogClose>\n        </Box>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"names":["useTestId","Dialog","DialogContent","DialogHeader","DialogTitle","DialogBody","Flex","FormInput","DialogFooter","Button","Box","DialogClose","IconButton","CloseIcon"],"mappings":"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"}

package/dist/cjs/commons/components/confirmation-modal.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var testId_context = require('../context/test-id.context.js');
 var alertDialog = require('../../node_modules/@sparrowengg/twigs-react/dist/es/alert-dialog/alert-dialog.js');
 var button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
 
@@ -12,6 +13,7 @@ const ConfirmationModal = ({
   onConfirm,
   onCancel
 }) => {
+  const { tid } = testId_context.useTestId();
   const [isDeleteIconHover, setIsDeleteIconHover] = React.useState(false);
   return /* @__PURE__ */ React.createElement(alertDialog.AlertDialog, { open: true }, /* @__PURE__ */ React.createElement(
     alertDialog.AlertDialogContent,
@@ -52,14 +54,15 @@ const ConfirmationModal = ({
       },
       description
     ),
-    /* @__PURE__ */ React.createElement(alertDialog.AlertDialogActions, { css: { gap: "$6" } }, /* @__PURE__ */ React.createElement(alertDialog.AlertDialogCancel, { asChild: true, onClick: onCancel }, /* @__PURE__ */ React.createElement(button.Button, { color: "default", variant: "solid", size: "lg" }, "Cancel")), /* @__PURE__ */ React.createElement(alertDialog.AlertDialogAction, { asChild: true }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(alertDialog.AlertDialogActions, { css: { gap: "$6" } }, /* @__PURE__ */ React.createElement(alertDialog.AlertDialogCancel, { asChild: true, onClick: onCancel }, /* @__PURE__ */ React.createElement(button.Button, { color: "default", variant: "solid", size: "lg", "data-testid": tid("cancel-btn") }, "Cancel")), /* @__PURE__ */ React.createElement(alertDialog.AlertDialogAction, { asChild: true }, /* @__PURE__ */ React.createElement(
       button.Button,
       {
         onMouseEnter: () => setIsDeleteIconHover(true),
         onMouseLeave: () => setIsDeleteIconHover(false),
         color: isDeleteIconHover ? "error" : "default",
         size: "lg",
-        onClick: onConfirm
+        onClick: onConfirm,
+        "data-testid": tid("confirm-btn")
       },
       "Confirm"
     )))

package/dist/cjs/commons/components/confirmation-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirmation-modal.js","sources":["../../../../src/commons/components/confirmation-modal.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {   AlertDialog,\n    AlertDialogContent,\n    AlertDialogTitle,\n    AlertDialogDescription,\n    AlertDialogActions,\n    AlertDialogCancel,\n    AlertDialogAction,\n    Button, } from \"@sparrowengg/twigs-react\";\ntype ConfirmationModalProps = {\n    name: string;\n    description: string;\n    onConfirm: () => void | Promise<void>;\n    onCancel: () => void;\n};\nconst ConfirmationModal: React.FC<ConfirmationModalProps> = ({\n    name,\n    description,\n    onConfirm,\n    onCancel\n}) => {\n    const [isDeleteIconHover, setIsDeleteIconHover] = useState(false);\n    return  <AlertDialog open={true}>\n    <AlertDialogContent\n      onOpenAutoFocus={(e) => e.preventDefault()}\n      className=\"dm-sans\"\n      css={{\n        button: {\n          borderRadius: '8px',\n        },\n      }}\n    >\n      <AlertDialogTitle\n        css={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          border: 'none !important',\n          padding: '24px $12 8px $12 !important',\n        }}\n      >\n        {name}\n      </AlertDialogTitle>\n\n      <AlertDialogDescription\n        css={{\n          overflowWrap: 'break-word',\n          padding: '0px $12 0px $12 !important',\n          fontSize: '$sm',\n          fontWeight: '400',\n          lineHeight: '20px',\n          letterSpacing: '0px',\n          color: '$neutral800',\n          margin: '0 !important',\n        }}\n      >\n        {description}\n      </AlertDialogDescription>\n\n      <AlertDialogActions css={{ gap: '$6' }}>\n        <AlertDialogCancel asChild onClick={onCancel}>\n          <Button color=\"default\" variant=\"solid\" size=\"lg\">\n            Cancel\n          </Button>\n        </AlertDialogCancel>\n\n        <AlertDialogAction asChild>\n          <Button\n            onMouseEnter={() => setIsDeleteIconHover(true)}\n            onMouseLeave={() => setIsDeleteIconHover(false)}\n            color={isDeleteIconHover ? 'error' : 'default'}\n            size=\"lg\"\n            onClick={onConfirm}\n          >\n            Confirm\n          </Button>\n        </AlertDialogAction>\n      </AlertDialogActions>\n    </AlertDialogContent>\n  </AlertDialog>\n};\nexport default ConfirmationModal;\n"],"names":["useState","AlertDialog","AlertDialogContent","AlertDialogTitle","AlertDialogDescription","AlertDialogActions","AlertDialogCancel","Button","AlertDialogAction"],"mappings":";;;;;;;;AAeA,MAAM,oBAAsD,CAAC;AAAA,EACzD,IAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA;AACJ,CAAA,KAAM;AACF,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIA,eAAS,KAAK,CAAA;AAChE,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAACC,uBAAA,EAAA,EAAY,IAAA,EAAM,IAAA,EAAA,kBAC3B,KAAA,CAAA,aAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,eAAA,EAAiB,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,MACzC,SAAA,EAAU,SAAA;AAAA,MACV,GAAA,EAAK;AAAA,QACH,MAAA,EAAQ;AAAA,UACN,YAAA,EAAc;AAAA;AAChB;AACF,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,4BAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK;AAAA,UACH,OAAA,EAAS,MAAA;AAAA,UACT,cAAA,EAAgB,eAAA;AAAA,UAChB,MAAA,EAAQ,iBAAA;AAAA,UACR,OAAA,EAAS;AAAA;AACX,OAAA;AAAA,MAEC;AAAA,KACH;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,kCAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK;AAAA,UACH,YAAA,EAAc,YAAA;AAAA,UACd,OAAA,EAAS,4BAAA;AAAA,UACT,QAAA,EAAU,KAAA;AAAA,UACV,UAAA,EAAY,KAAA;AAAA,UACZ,UAAA,EAAY,MAAA;AAAA,UACZ,aAAA,EAAe,KAAA;AAAA,UACf,KAAA,EAAO,aAAA;AAAA,UACP,MAAA,EAAQ;AAAA;AACV,OAAA;AAAA,MAEC;AAAA,KACH;AAAA,oBAEA,KAAA,CAAA,aAAA,CAACC,8BAAA,EAAA,EAAmB,GAAA,EAAK,EAAE,GAAA,EAAK,IAAA,EAAK,EAAA,kBACnC,KAAA,CAAA,aAAA,CAACC,6BAAA,EAAA,EAAkB,OAAA,EAAO,IAAA,EAAC,OAAA,EAAS,QAAA,EAAA,kBAClC,KAAA,CAAA,aAAA,CAACC,aAAA,EAAA,EAAO,KAAA,EAAM,SAAA,EAAU,OAAA,EAAQ,OAAA,EAAQ,IAAA,EAAK,IAAA,EAAA,EAAK,QAElD,CACF,CAAA,kBAEA,KAAA,CAAA,aAAA,CAACC,6BAAA,EAAA,EAAkB,OAAA,EAAO,IAAA,EAAA,kBACxB,KAAA,CAAA,aAAA;AAAA,MAACD,aAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAc,MAAM,oBAAA,CAAqB,IAAI,CAAA;AAAA,QAC7C,YAAA,EAAc,MAAM,oBAAA,CAAqB,KAAK,CAAA;AAAA,QAC9C,KAAA,EAAO,oBAAoB,OAAA,GAAU,SAAA;AAAA,QACrC,IAAA,EAAK,IAAA;AAAA,QACL,OAAA,EAAS;AAAA,OAAA;AAAA,MACV;AAAA,KAGH,CACF;AAAA,GAEJ,CAAA;AACF;;;;"}
+{"version":3,"file":"confirmation-modal.js","sources":["../../../../src/commons/components/confirmation-modal.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useTestId } from \"../context/test-id.context\";\nimport {   AlertDialog,\n    AlertDialogContent,\n    AlertDialogTitle,\n    AlertDialogDescription,\n    AlertDialogActions,\n    AlertDialogCancel,\n    AlertDialogAction,\n    Button, } from \"@sparrowengg/twigs-react\";\ntype ConfirmationModalProps = {\n    name: string;\n    description: string;\n    onConfirm: () => void | Promise<void>;\n    onCancel: () => void;\n};\nconst ConfirmationModal: React.FC<ConfirmationModalProps> = ({\n    name,\n    description,\n    onConfirm,\n    onCancel\n}) => {\n    const { tid } = useTestId();\n    const [isDeleteIconHover, setIsDeleteIconHover] = useState(false);\n    return  <AlertDialog open={true}>\n    <AlertDialogContent\n      onOpenAutoFocus={(e) => e.preventDefault()}\n      className=\"dm-sans\"\n      css={{\n        button: {\n          borderRadius: '8px',\n        },\n      }}\n    >\n      <AlertDialogTitle\n        css={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          border: 'none !important',\n          padding: '24px $12 8px $12 !important',\n        }}\n      >\n        {name}\n      </AlertDialogTitle>\n\n      <AlertDialogDescription\n        css={{\n          overflowWrap: 'break-word',\n          padding: '0px $12 0px $12 !important',\n          fontSize: '$sm',\n          fontWeight: '400',\n          lineHeight: '20px',\n          letterSpacing: '0px',\n          color: '$neutral800',\n          margin: '0 !important',\n        }}\n      >\n        {description}\n      </AlertDialogDescription>\n\n      <AlertDialogActions css={{ gap: '$6' }}>\n        <AlertDialogCancel asChild onClick={onCancel}>\n          <Button color=\"default\" variant=\"solid\" size=\"lg\" data-testid={tid('cancel-btn')}>\n            Cancel\n          </Button>\n        </AlertDialogCancel>\n\n        <AlertDialogAction asChild>\n          <Button\n            onMouseEnter={() => setIsDeleteIconHover(true)}\n            onMouseLeave={() => setIsDeleteIconHover(false)}\n            color={isDeleteIconHover ? 'error' : 'default'}\n            size=\"lg\"\n            onClick={onConfirm}\n            data-testid={tid('confirm-btn')}\n          >\n            Confirm\n          </Button>\n        </AlertDialogAction>\n      </AlertDialogActions>\n    </AlertDialogContent>\n  </AlertDialog>\n};\nexport default ConfirmationModal;\n"],"names":["useTestId","useState","AlertDialog","AlertDialogContent","AlertDialogTitle","AlertDialogDescription","AlertDialogActions","AlertDialogCancel","Button","AlertDialogAction"],"mappings":";;;;;;;;;AAgBA,MAAM,oBAAsD,CAAC;AAAA,EACzD,IAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA;AACJ,CAAA,KAAM;AACF,EAAA,MAAM,EAAE,GAAA,EAAI,GAAIA,wBAAA,EAAU;AAC1B,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIC,eAAS,KAAK,CAAA;AAChE,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAACC,uBAAA,EAAA,EAAY,IAAA,EAAM,IAAA,EAAA,kBAC3B,KAAA,CAAA,aAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,eAAA,EAAiB,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,MACzC,SAAA,EAAU,SAAA;AAAA,MACV,GAAA,EAAK;AAAA,QACH,MAAA,EAAQ;AAAA,UACN,YAAA,EAAc;AAAA;AAChB;AACF,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,4BAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK;AAAA,UACH,OAAA,EAAS,MAAA;AAAA,UACT,cAAA,EAAgB,eAAA;AAAA,UAChB,MAAA,EAAQ,iBAAA;AAAA,UACR,OAAA,EAAS;AAAA;AACX,OAAA;AAAA,MAEC;AAAA,KACH;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,kCAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK;AAAA,UACH,YAAA,EAAc,YAAA;AAAA,UACd,OAAA,EAAS,4BAAA;AAAA,UACT,QAAA,EAAU,KAAA;AAAA,UACV,UAAA,EAAY,KAAA;AAAA,UACZ,UAAA,EAAY,MAAA;AAAA,UACZ,aAAA,EAAe,KAAA;AAAA,UACf,KAAA,EAAO,aAAA;AAAA,UACP,MAAA,EAAQ;AAAA;AACV,OAAA;AAAA,MAEC;AAAA,KACH;AAAA,oBAEA,KAAA,CAAA,aAAA,CAACC,8BAAA,EAAA,EAAmB,GAAA,EAAK,EAAE,GAAA,EAAK,IAAA,EAAK,EAAA,kBACnC,KAAA,CAAA,aAAA,CAACC,6BAAA,EAAA,EAAkB,OAAA,EAAO,IAAA,EAAC,OAAA,EAAS,4BAClC,KAAA,CAAA,aAAA,CAACC,aAAA,EAAA,EAAO,KAAA,EAAM,SAAA,EAAU,OAAA,EAAQ,OAAA,EAAQ,IAAA,EAAK,IAAA,EAAK,eAAa,GAAA,CAAI,YAAY,CAAA,EAAA,EAAG,QAElF,CACF,CAAA,kBAEA,KAAA,CAAA,aAAA,CAACC,6BAAA,EAAA,EAAkB,SAAO,IAAA,EAAA,kBACxB,KAAA,CAAA,aAAA;AAAA,MAACD,aAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAc,MAAM,oBAAA,CAAqB,IAAI,CAAA;AAAA,QAC7C,YAAA,EAAc,MAAM,oBAAA,CAAqB,KAAK,CAAA;AAAA,QAC9C,KAAA,EAAO,oBAAoB,OAAA,GAAU,SAAA;AAAA,QACrC,IAAA,EAAK,IAAA;AAAA,QACL,OAAA,EAAS,SAAA;AAAA,QACT,aAAA,EAAa,IAAI,aAAa;AAAA,OAAA;AAAA,MAC/B;AAAA,KAGH,CACF;AAAA,GAEJ,CAAA;AACF;;;;"}

package/dist/cjs/commons/components/edit-confirmation.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var testId_context = require('../context/test-id.context.js');
 var alertDialog = require('../../node_modules/@sparrowengg/twigs-react/dist/es/alert-dialog/alert-dialog.js');
 var button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
 
@@ -12,6 +13,7 @@ const EditConfirmation = ({
   onConfirm,
   onCancel
 }) => {
+  const { tid } = testId_context.useTestId();
   const [isDeleteIconHover, setIsDeleteIconHover] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(false);
   return /* @__PURE__ */ React.createElement(alertDialog.AlertDialog, { open: true }, /* @__PURE__ */ React.createElement(
@@ -53,7 +55,7 @@ const EditConfirmation = ({
       },
       description
     ),
-    /* @__PURE__ */ React.createElement(alertDialog.AlertDialogActions, { css: { gap: "$6" } }, /* @__PURE__ */ React.createElement(alertDialog.AlertDialogCancel, { asChild: true, onClick: onCancel }, /* @__PURE__ */ React.createElement(button.Button, { color: "default", variant: "solid", size: "lg" }, "Cancel")), /* @__PURE__ */ React.createElement(alertDialog.AlertDialogAction, { asChild: true }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(alertDialog.AlertDialogActions, { css: { gap: "$6" } }, /* @__PURE__ */ React.createElement(alertDialog.AlertDialogCancel, { asChild: true, onClick: onCancel }, /* @__PURE__ */ React.createElement(button.Button, { color: "default", variant: "solid", size: "lg", "data-testid": tid("cancel-edit") }, "Cancel")), /* @__PURE__ */ React.createElement(alertDialog.AlertDialogAction, { asChild: true }, /* @__PURE__ */ React.createElement(
       button.Button,
       {
         loading: isLoading,
@@ -65,7 +67,8 @@ const EditConfirmation = ({
           setIsLoading(true);
           await onConfirm();
           setIsLoading(false);
-        }
+        },
+        "data-testid": tid("confirm-edit")
       },
       "Confirm"
     )))

package/dist/cjs/commons/components/edit-confirmation.js.map

@@ -1 +1 @@
-{"version":3,"file":"edit-confirmation.js","sources":["../../../../src/commons/components/edit-confirmation.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  AlertDialog,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogActions,\n  AlertDialogCancel,\n  AlertDialogAction,\n  Button,\n} from \"@sparrowengg/twigs-react\";\ntype ConfirmationModalProps = {\n  name: string;\n  description: string;\n  onConfirm: () => void | Promise<void>;\n  onCancel: () => void;\n};\nconst EditConfirmation: React.FC<ConfirmationModalProps> = ({\n  name,\n  description,\n  onConfirm,\n  onCancel,\n}) => {\n  const [isDeleteIconHover, setIsDeleteIconHover] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n  return (\n    <AlertDialog open={true}>\n      <AlertDialogContent\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        className=\"dm-sans\"\n        css={{\n          button: {\n            borderRadius: \"8px\",\n          },\n        }}\n      >\n        <AlertDialogTitle\n          css={{\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            border: \"none !important\",\n            padding: \"24px $12 8px $12 !important\",\n          }}\n        >\n          {name}\n        </AlertDialogTitle>\n\n        <AlertDialogDescription\n          css={{\n            overflowWrap: \"break-word\",\n            padding: \"0px $12 0px $12 !important\",\n            fontSize: \"$sm\",\n            fontWeight: \"400\",\n            lineHeight: \"20px\",\n            letterSpacing: \"0px\",\n            color: \"$neutral800\",\n            margin: \"0 !important\",\n          }}\n        >\n          {description}\n        </AlertDialogDescription>\n\n        <AlertDialogActions css={{ gap: \"$6\" }}>\n          <AlertDialogCancel asChild onClick={onCancel}>\n            <Button color=\"default\" variant=\"solid\" size=\"lg\">\n              Cancel\n            </Button>\n          </AlertDialogCancel>\n\n          <AlertDialogAction asChild>\n            <Button\n              loading={isLoading}\n              onMouseEnter={() => setIsDeleteIconHover(true)}\n              onMouseLeave={() => setIsDeleteIconHover(false)}\n              color={isDeleteIconHover ? \"secondary\" : \"default\"}\n              size=\"lg\"\n              onClick={async () => {\n                setIsLoading(true)\n                await onConfirm()\n                setIsLoading(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </AlertDialogAction>\n        </AlertDialogActions>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n};\nexport default EditConfirmation;\n"],"names":["useState","AlertDialog","AlertDialogContent","AlertDialogTitle","AlertDialogDescription","AlertDialogActions","AlertDialogCancel","Button","AlertDialogAction"],"mappings":";;;;;;;;AAiBA,MAAM,mBAAqD,CAAC;AAAA,EAC1D,IAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIA,eAAS,KAAK,CAAA;AAChE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,KAAK,CAAA;AAChD,EAAA,uBACE,KAAA,CAAA,aAAA,CAACC,uBAAA,EAAA,EAAY,IAAA,EAAM,IAAA,EAAA,kBACjB,KAAA,CAAA,aAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,eAAA,EAAiB,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,MACzC,SAAA,EAAU,SAAA;AAAA,MACV,GAAA,EAAK;AAAA,QACH,MAAA,EAAQ;AAAA,UACN,YAAA,EAAc;AAAA;AAChB;AACF,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,4BAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK;AAAA,UACH,OAAA,EAAS,MAAA;AAAA,UACT,cAAA,EAAgB,eAAA;AAAA,UAChB,MAAA,EAAQ,iBAAA;AAAA,UACR,OAAA,EAAS;AAAA;AACX,OAAA;AAAA,MAEC;AAAA,KACH;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,kCAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK;AAAA,UACH,YAAA,EAAc,YAAA;AAAA,UACd,OAAA,EAAS,4BAAA;AAAA,UACT,QAAA,EAAU,KAAA;AAAA,UACV,UAAA,EAAY,KAAA;AAAA,UACZ,UAAA,EAAY,MAAA;AAAA,UACZ,aAAA,EAAe,KAAA;AAAA,UACf,KAAA,EAAO,aAAA;AAAA,UACP,MAAA,EAAQ;AAAA;AACV,OAAA;AAAA,MAEC;AAAA,KACH;AAAA,oBAEA,KAAA,CAAA,aAAA,CAACC,8BAAA,EAAA,EAAmB,GAAA,EAAK,EAAE,GAAA,EAAK,IAAA,EAAK,EAAA,kBACnC,KAAA,CAAA,aAAA,CAACC,6BAAA,EAAA,EAAkB,OAAA,EAAO,IAAA,EAAC,OAAA,EAAS,QAAA,EAAA,kBAClC,KAAA,CAAA,aAAA,CAACC,aAAA,EAAA,EAAO,KAAA,EAAM,SAAA,EAAU,OAAA,EAAQ,OAAA,EAAQ,IAAA,EAAK,IAAA,EAAA,EAAK,QAElD,CACF,CAAA,kBAEA,KAAA,CAAA,aAAA,CAACC,6BAAA,EAAA,EAAkB,OAAA,EAAO,IAAA,EAAA,kBACxB,KAAA,CAAA,aAAA;AAAA,MAACD,aAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,SAAA;AAAA,QACT,YAAA,EAAc,MAAM,oBAAA,CAAqB,IAAI,CAAA;AAAA,QAC7C,YAAA,EAAc,MAAM,oBAAA,CAAqB,KAAK,CAAA;AAAA,QAC9C,KAAA,EAAO,oBAAoB,WAAA,GAAc,SAAA;AAAA,QACzC,IAAA,EAAK,IAAA;AAAA,QACL,SAAS,YAAY;AACnB,UAAA,YAAA,CAAa,IAAI,CAAA;AACjB,UAAA,MAAM,SAAA,EAAU;AAChB,UAAA,YAAA,CAAa,KAAK,CAAA;AAAA,QACpB;AAAA,OAAA;AAAA,MACD;AAAA,KAGH,CACF;AAAA,GAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"edit-confirmation.js","sources":["../../../../src/commons/components/edit-confirmation.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useTestId } from \"../context/test-id.context\";\nimport {\n  AlertDialog,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogActions,\n  AlertDialogCancel,\n  AlertDialogAction,\n  Button,\n} from \"@sparrowengg/twigs-react\";\ntype ConfirmationModalProps = {\n  name: string;\n  description: string;\n  onConfirm: () => void | Promise<void>;\n  onCancel: () => void;\n};\nconst EditConfirmation: React.FC<ConfirmationModalProps> = ({\n  name,\n  description,\n  onConfirm,\n  onCancel,\n}) => {\n  const { tid } = useTestId();\n  const [isDeleteIconHover, setIsDeleteIconHover] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n  return (\n    <AlertDialog open={true}>\n      <AlertDialogContent\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        className=\"dm-sans\"\n        css={{\n          button: {\n            borderRadius: \"8px\",\n          },\n        }}\n      >\n        <AlertDialogTitle\n          css={{\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            border: \"none !important\",\n            padding: \"24px $12 8px $12 !important\",\n          }}\n        >\n          {name}\n        </AlertDialogTitle>\n\n        <AlertDialogDescription\n          css={{\n            overflowWrap: \"break-word\",\n            padding: \"0px $12 0px $12 !important\",\n            fontSize: \"$sm\",\n            fontWeight: \"400\",\n            lineHeight: \"20px\",\n            letterSpacing: \"0px\",\n            color: \"$neutral800\",\n            margin: \"0 !important\",\n          }}\n        >\n          {description}\n        </AlertDialogDescription>\n\n        <AlertDialogActions css={{ gap: \"$6\" }}>\n          <AlertDialogCancel asChild onClick={onCancel}>\n            <Button color=\"default\" variant=\"solid\" size=\"lg\" data-testid={tid('cancel-edit')}>\n              Cancel\n            </Button>\n          </AlertDialogCancel>\n\n          <AlertDialogAction asChild>\n            <Button\n              loading={isLoading}\n              onMouseEnter={() => setIsDeleteIconHover(true)}\n              onMouseLeave={() => setIsDeleteIconHover(false)}\n              color={isDeleteIconHover ? \"secondary\" : \"default\"}\n              size=\"lg\"\n              onClick={async () => {\n                setIsLoading(true)\n                await onConfirm()\n                setIsLoading(false)\n              }}\n              data-testid={tid('confirm-edit')}\n            >\n              Confirm\n            </Button>\n          </AlertDialogAction>\n        </AlertDialogActions>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n};\nexport default EditConfirmation;\n"],"names":["useTestId","useState","AlertDialog","AlertDialogContent","AlertDialogTitle","AlertDialogDescription","AlertDialogActions","AlertDialogCancel","Button","AlertDialogAction"],"mappings":";;;;;;;;;AAkBA,MAAM,mBAAqD,CAAC;AAAA,EAC1D,IAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,EAAE,GAAA,EAAI,GAAIA,wBAAA,EAAU;AAC1B,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIC,eAAS,KAAK,CAAA;AAChE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,KAAK,CAAA;AAChD,EAAA,uBACE,KAAA,CAAA,aAAA,CAACC,uBAAA,EAAA,EAAY,IAAA,EAAM,IAAA,EAAA,kBACjB,KAAA,CAAA,aAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,eAAA,EAAiB,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,MACzC,SAAA,EAAU,SAAA;AAAA,MACV,GAAA,EAAK;AAAA,QACH,MAAA,EAAQ;AAAA,UACN,YAAA,EAAc;AAAA;AAChB;AACF,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,4BAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK;AAAA,UACH,OAAA,EAAS,MAAA;AAAA,UACT,cAAA,EAAgB,eAAA;AAAA,UAChB,MAAA,EAAQ,iBAAA;AAAA,UACR,OAAA,EAAS;AAAA;AACX,OAAA;AAAA,MAEC;AAAA,KACH;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,kCAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK;AAAA,UACH,YAAA,EAAc,YAAA;AAAA,UACd,OAAA,EAAS,4BAAA;AAAA,UACT,QAAA,EAAU,KAAA;AAAA,UACV,UAAA,EAAY,KAAA;AAAA,UACZ,UAAA,EAAY,MAAA;AAAA,UACZ,aAAA,EAAe,KAAA;AAAA,UACf,KAAA,EAAO,aAAA;AAAA,UACP,MAAA,EAAQ;AAAA;AACV,OAAA;AAAA,MAEC;AAAA,KACH;AAAA,oBAEA,KAAA,CAAA,aAAA,CAACC,8BAAA,EAAA,EAAmB,GAAA,EAAK,EAAE,GAAA,EAAK,IAAA,EAAK,EAAA,kBACnC,KAAA,CAAA,aAAA,CAACC,6BAAA,EAAA,EAAkB,OAAA,EAAO,IAAA,EAAC,OAAA,EAAS,4BAClC,KAAA,CAAA,aAAA,CAACC,aAAA,EAAA,EAAO,KAAA,EAAM,SAAA,EAAU,OAAA,EAAQ,OAAA,EAAQ,IAAA,EAAK,IAAA,EAAK,eAAa,GAAA,CAAI,aAAa,CAAA,EAAA,EAAG,QAEnF,CACF,CAAA,kBAEA,KAAA,CAAA,aAAA,CAACC,6BAAA,EAAA,EAAkB,SAAO,IAAA,EAAA,kBACxB,KAAA,CAAA,aAAA;AAAA,MAACD,aAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,SAAA;AAAA,QACT,YAAA,EAAc,MAAM,oBAAA,CAAqB,IAAI,CAAA;AAAA,QAC7C,YAAA,EAAc,MAAM,oBAAA,CAAqB,KAAK,CAAA;AAAA,QAC9C,KAAA,EAAO,oBAAoB,WAAA,GAAc,SAAA;AAAA,QACzC,IAAA,EAAK,IAAA;AAAA,QACL,SAAS,YAAY;AACnB,UAAA,YAAA,CAAa,IAAI,CAAA;AACjB,UAAA,MAAM,SAAA,EAAU;AAChB,UAAA,YAAA,CAAa,KAAK,CAAA;AAAA,QACpB,CAAA;AAAA,QACA,aAAA,EAAa,IAAI,cAAc;AAAA,OAAA;AAAA,MAChC;AAAA,KAGH,CACF;AAAA,GAEJ,CAAA;AAEJ;;;;"}

package/dist/cjs/commons/components/mapping-conditions/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var ReactDOM = require('react-dom');
+var testId_context = require('../../context/test-id.context.js');
 var uiStrings = require('./constants/ui-strings.js');
 require('./constants/options.js');
 require('../../../cascader-dropdown/use-value.js');
@@ -26,6 +27,7 @@ const MappingCondition = ({
   renderTrigger,
   hasDerivedQuestions
 }) => {
+  const { tid } = testId_context.useTestId();
   const [isOpen, setIsOpen] = React.useState(false);
   const [hasFilterGroups, setHasFilterGroups] = React.useState(false);
   const [areFiltersValid, setAreFiltersValid] = React.useState(false);
@@ -95,7 +97,7 @@ const MappingCondition = ({
       }
     ),
     document.body
-  ), /* @__PURE__ */ React.createElement(dialog.DialogTrigger, { asChild: true, onClick: handleOpen }, renderTrigger ? renderTrigger(handleOpen) : /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(dialog.DialogTrigger, { asChild: true, onClick: handleOpen, "data-testid": tid("open-conditions") }, renderTrigger ? renderTrigger(handleOpen) : /* @__PURE__ */ React.createElement(
     text.Text,
     {
       className: "dm-sans",
@@ -137,13 +139,14 @@ const MappingCondition = ({
       className: "dm-sans",
       css: { fontFamily: "DM Sans !important" }
     },
-    /* @__PURE__ */ React.createElement(flex.Flex, { justifyContent: "flex-end", css: { justifyContent: "flex-end" } }, /* @__PURE__ */ React.createElement(dialog.DialogClose, { asChild: true }, /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, /* @__PURE__ */ React.createElement(button.Button, { size: "lg", color: "default" }, uiStrings.MAPPING_CONDITION_STRINGS.CANCEL), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(flex.Flex, { justifyContent: "flex-end", css: { justifyContent: "flex-end" } }, /* @__PURE__ */ React.createElement(dialog.DialogClose, { asChild: true }, /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, /* @__PURE__ */ React.createElement(button.Button, { size: "lg", color: "default", "data-testid": tid("cancel-conditions") }, uiStrings.MAPPING_CONDITION_STRINGS.CANCEL), /* @__PURE__ */ React.createElement(
       button.Button,
       {
         size: "lg",
         color: "primary",
         onClick: handleSave,
-        disabled: isSaveDisabled
+        disabled: isSaveDisabled,
+        "data-testid": tid("save-conditions")
       },
       uiStrings.MAPPING_CONDITION_STRINGS.SAVE
     ))))

package/dist/cjs/commons/components/mapping-conditions/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/commons/components/mapping-conditions/index.tsx"],"sourcesContent":["/* ----- Imports ----- */\n\nimport React, { useState, useRef, useCallback, useMemo } from 'react';\nimport {\n  Dialog,\n  DialogHeader,\n  DialogTitle,\n  DialogBody,\n  DialogFooter,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  IconButton,\n  Box,\n  Button,\n  Flex,\n  Text,\n} from '@sparrowengg/twigs-react';\nimport { CloseIcon } from '@sparrowengg/twigs-react-icons';\nimport { createPortal } from 'react-dom';\nimport { ConditionWrapper } from './components';\nimport { MappingConditionProps, ConditionWrapperHandle } from './types';\nimport { MAPPING_CONDITION_STRINGS } from './constants';\nimport { filterDerivedQuestionsFromConditionData } from './helpers';\n\n/* ----- Main Component / Export ----- */\n\n/**\n * MappingCondition component for managing filter conditions in a dialog\n *\n * @param {MappingConditionProps} props - Component props\n * @returns {JSX.Element} Rendered mapping condition dialog\n */\nexport const MappingCondition: React.FC<MappingConditionProps> = ({\n  existingContions,\n  setExistingCondtions,\n  conditionData,\n  renderTrigger,\n  hasDerivedQuestions,\n}) => {\n  /* ----- States ----- */\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [hasFilterGroups, setHasFilterGroups] = useState(false);\n  const [areFiltersValid, setAreFiltersValid] = useState(false);\n\n  /* ----- Refs ----- */\n\n  const ref = useRef<ConditionWrapperHandle>(null);\n\n  /* ----- Event Handlers ----- */\n\n  /**\n   * Handles changes in filter groups count\n   * @param {number} filterGroupsLength - Number of filter groups\n   */\n  const onConditionsChange = useCallback((filterGroupsLength: number) => {\n    setHasFilterGroups(filterGroupsLength > 0);\n  }, []);\n\n  /**\n   * Handles validation state changes\n   * @param {boolean} isValid - Whether filters are valid\n   */\n  const onValidationChange = useCallback((isValid: boolean) => {\n    setAreFiltersValid(isValid);\n  }, []);\n\n  /**\n   * Handles opening the dialog\n   */\n  const handleOpen = useCallback(() => {\n    setIsOpen(true);\n  }, []);\n\n  /**\n   * Handles save button click\n   */\n  const handleSave = useCallback(() => {\n    ref.current?.handleSave();\n  }, []);\n\n  /* ----- Memoized Values ----- */\n\n  /**\n   * Condition data with the Enrich (derived questions) category stripped out\n   * unless the integration opts in via `hasDerivedQuestions`.\n   */\n  const effectiveConditionData = useMemo(\n    () =>\n      filterDerivedQuestionsFromConditionData(\n        conditionData,\n        hasDerivedQuestions\n      ),\n    [conditionData, hasDerivedQuestions]\n  );\n\n  const isSaveDisabled = useMemo(\n    () => !hasFilterGroups || !areFiltersValid,\n    [hasFilterGroups, areFiltersValid]\n  );\n\n  const dialogContentCss = useMemo(\n    () => ({\n      fontFamily: 'DM Sans !important',\n      minHeight: '332px',\n      maxHeight: '532px',\n      p: {\n        margin: '0 !important',\n      },\n      zIndex: '9999',\n    }),\n    []\n  );\n\n  const dialogBodyCss = useMemo(\n    () => ({\n      fontFamily: 'DM Sans !important',\n      padding: '$12 !important',\n      minHeight: '188px',\n      maxHeight: '388px',\n      overflowY: 'auto' as const,\n      p: {\n        margin: '0 !important',\n      },\n    }),\n    []\n  );\n\n  /* ----- Render ----- */\n\n  return (\n    <Dialog size=\"md\" modal={false} open={isOpen} onOpenChange={setIsOpen}>\n      {isOpen &&\n        createPortal(\n          <Box\n            className=\"mapping-condition-overlay\"\n            css={{\n              height: '100vh',\n              width: '100vw',\n              position: 'fixed',\n              inset: '0',\n              backgroundColorOpacity: ['$black700', 0.6],\n              zIndex: '999',\n            }}\n          />,\n          document.body\n        )}\n      <DialogTrigger asChild onClick={handleOpen}>\n        {renderTrigger ? (\n          renderTrigger(handleOpen)\n        ) : (\n          <Text\n            className=\"dm-sans\"\n            weight=\"medium\"\n            css={{\n              color: '$primary500',\n              cursor: 'pointer',\n              fontFamily: 'DM Sans !important',\n            }}\n          >\n            {MAPPING_CONDITION_STRINGS.TRIGGER_TEXT}\n          </Text>\n        )}\n      </DialogTrigger>\n      <DialogContent className=\"dm-sans mapping-condition-content\" css={dialogContentCss}>\n        <DialogHeader\n          className=\"dm-sans\"\n          css={{\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'flex-start',\n            justifyContent: 'center',\n            fontFamily: 'DM Sans !important',\n          }}\n        >\n          <DialogTitle size=\"md\">{MAPPING_CONDITION_STRINGS.DIALOG_TITLE}</DialogTitle>\n        </DialogHeader>\n        <DialogBody className=\"dm-sans\" css={dialogBodyCss}>\n          <ConditionWrapper\n            conditionData={effectiveConditionData}\n            existingContions={existingContions}\n            setExistingCondtions={setExistingCondtions || (() => {})}\n            onConditionsChange={onConditionsChange}\n            onValidationChange={onValidationChange}\n            ref={ref}\n          />\n        </DialogBody>\n        <DialogFooter\n          className=\"dm-sans\"\n          css={{ fontFamily: 'DM Sans !important' }}\n        >\n          <Flex justifyContent=\"flex-end\" css={{ justifyContent: 'flex-end' }}>\n            <DialogClose asChild>\n              <Flex alignItems=\"center\" gap=\"$4\">\n                <Button size=\"lg\" color=\"default\">\n                  {MAPPING_CONDITION_STRINGS.CANCEL}\n                </Button>\n                <Button\n                  size=\"lg\"\n                  color=\"primary\"\n                  onClick={handleSave}\n                  disabled={isSaveDisabled}\n                >\n                  {MAPPING_CONDITION_STRINGS.SAVE}\n                </Button>\n              </Flex>\n            </DialogClose>\n          </Flex>\n        </DialogFooter>\n        <Box\n          css={{\n            position: 'absolute',\n            top: '$8',\n            right: '$8',\n            fontFamily: 'DM Sans !important',\n          }}\n        >\n          <DialogClose className=\"dm-sans\" asChild>\n            <IconButton\n              size=\"lg\"\n              icon={<CloseIcon />}\n              variant=\"ghost\"\n              aria-label=\"Close\"\n              color=\"default\"\n            />\n          </DialogClose>\n        </Box>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default MappingCondition;\n"],"names":["useState","useRef","useCallback","useMemo","filterDerivedQuestionsFromConditionData","Dialog","createPortal","Box","DialogTrigger","Text","MAPPING_CONDITION_STRINGS","DialogContent","DialogHeader","DialogTitle","DialogBody","ConditionWrapper","DialogFooter","Flex","DialogClose","Button","IconButton","CloseIcon"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/commons/components/mapping-conditions/index.tsx"],"sourcesContent":["/* ----- Imports ----- */\n\nimport React, { useState, useRef, useCallback, useMemo } from 'react';\nimport {\n  Dialog,\n  DialogHeader,\n  DialogTitle,\n  DialogBody,\n  DialogFooter,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  IconButton,\n  Box,\n  Button,\n  Flex,\n  Text,\n} from '@sparrowengg/twigs-react';\nimport { CloseIcon } from '@sparrowengg/twigs-react-icons';\nimport { createPortal } from 'react-dom';\nimport { useTestId } from '../../context/test-id.context';\nimport { ConditionWrapper } from './components';\nimport { MappingConditionProps, ConditionWrapperHandle } from './types';\nimport { MAPPING_CONDITION_STRINGS } from './constants';\nimport { filterDerivedQuestionsFromConditionData } from './helpers';\n\n/* ----- Main Component / Export ----- */\n\n/**\n * MappingCondition component for managing filter conditions in a dialog\n *\n * @param {MappingConditionProps} props - Component props\n * @returns {JSX.Element} Rendered mapping condition dialog\n */\nexport const MappingCondition: React.FC<MappingConditionProps> = ({\n  existingContions,\n  setExistingCondtions,\n  conditionData,\n  renderTrigger,\n  hasDerivedQuestions,\n}) => {\n  /* ----- States ----- */\n\n  const { tid } = useTestId();\n  const [isOpen, setIsOpen] = useState(false);\n  const [hasFilterGroups, setHasFilterGroups] = useState(false);\n  const [areFiltersValid, setAreFiltersValid] = useState(false);\n\n  /* ----- Refs ----- */\n\n  const ref = useRef<ConditionWrapperHandle>(null);\n\n  /* ----- Event Handlers ----- */\n\n  /**\n   * Handles changes in filter groups count\n   * @param {number} filterGroupsLength - Number of filter groups\n   */\n  const onConditionsChange = useCallback((filterGroupsLength: number) => {\n    setHasFilterGroups(filterGroupsLength > 0);\n  }, []);\n\n  /**\n   * Handles validation state changes\n   * @param {boolean} isValid - Whether filters are valid\n   */\n  const onValidationChange = useCallback((isValid: boolean) => {\n    setAreFiltersValid(isValid);\n  }, []);\n\n  /**\n   * Handles opening the dialog\n   */\n  const handleOpen = useCallback(() => {\n    setIsOpen(true);\n  }, []);\n\n  /**\n   * Handles save button click\n   */\n  const handleSave = useCallback(() => {\n    ref.current?.handleSave();\n  }, []);\n\n  /* ----- Memoized Values ----- */\n\n  /**\n   * Condition data with the Enrich (derived questions) category stripped out\n   * unless the integration opts in via `hasDerivedQuestions`.\n   */\n  const effectiveConditionData = useMemo(\n    () =>\n      filterDerivedQuestionsFromConditionData(\n        conditionData,\n        hasDerivedQuestions\n      ),\n    [conditionData, hasDerivedQuestions]\n  );\n\n  const isSaveDisabled = useMemo(\n    () => !hasFilterGroups || !areFiltersValid,\n    [hasFilterGroups, areFiltersValid]\n  );\n\n  const dialogContentCss = useMemo(\n    () => ({\n      fontFamily: 'DM Sans !important',\n      minHeight: '332px',\n      maxHeight: '532px',\n      p: {\n        margin: '0 !important',\n      },\n      zIndex: '9999',\n    }),\n    []\n  );\n\n  const dialogBodyCss = useMemo(\n    () => ({\n      fontFamily: 'DM Sans !important',\n      padding: '$12 !important',\n      minHeight: '188px',\n      maxHeight: '388px',\n      overflowY: 'auto' as const,\n      p: {\n        margin: '0 !important',\n      },\n    }),\n    []\n  );\n\n  /* ----- Render ----- */\n\n  return (\n    <Dialog size=\"md\" modal={false} open={isOpen} onOpenChange={setIsOpen}>\n      {isOpen &&\n        createPortal(\n          <Box\n            className=\"mapping-condition-overlay\"\n            css={{\n              height: '100vh',\n              width: '100vw',\n              position: 'fixed',\n              inset: '0',\n              backgroundColorOpacity: ['$black700', 0.6],\n              zIndex: '999',\n            }}\n          />,\n          document.body\n        )}\n      <DialogTrigger asChild onClick={handleOpen} data-testid={tid('open-conditions')}>\n        {renderTrigger ? (\n          renderTrigger(handleOpen)\n        ) : (\n          <Text\n            className=\"dm-sans\"\n            weight=\"medium\"\n            css={{\n              color: '$primary500',\n              cursor: 'pointer',\n              fontFamily: 'DM Sans !important',\n            }}\n          >\n            {MAPPING_CONDITION_STRINGS.TRIGGER_TEXT}\n          </Text>\n        )}\n      </DialogTrigger>\n      <DialogContent className=\"dm-sans mapping-condition-content\" css={dialogContentCss}>\n        <DialogHeader\n          className=\"dm-sans\"\n          css={{\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'flex-start',\n            justifyContent: 'center',\n            fontFamily: 'DM Sans !important',\n          }}\n        >\n          <DialogTitle size=\"md\">{MAPPING_CONDITION_STRINGS.DIALOG_TITLE}</DialogTitle>\n        </DialogHeader>\n        <DialogBody className=\"dm-sans\" css={dialogBodyCss}>\n          <ConditionWrapper\n            conditionData={effectiveConditionData}\n            existingContions={existingContions}\n            setExistingCondtions={setExistingCondtions || (() => {})}\n            onConditionsChange={onConditionsChange}\n            onValidationChange={onValidationChange}\n            ref={ref}\n          />\n        </DialogBody>\n        <DialogFooter\n          className=\"dm-sans\"\n          css={{ fontFamily: 'DM Sans !important' }}\n        >\n          <Flex justifyContent=\"flex-end\" css={{ justifyContent: 'flex-end' }}>\n            <DialogClose asChild>\n              <Flex alignItems=\"center\" gap=\"$4\">\n                <Button size=\"lg\" color=\"default\" data-testid={tid('cancel-conditions')}>\n                  {MAPPING_CONDITION_STRINGS.CANCEL}\n                </Button>\n                <Button\n                  size=\"lg\"\n                  color=\"primary\"\n                  onClick={handleSave}\n                  disabled={isSaveDisabled}\n                  data-testid={tid('save-conditions')}\n                >\n                  {MAPPING_CONDITION_STRINGS.SAVE}\n                </Button>\n              </Flex>\n            </DialogClose>\n          </Flex>\n        </DialogFooter>\n        <Box\n          css={{\n            position: 'absolute',\n            top: '$8',\n            right: '$8',\n            fontFamily: 'DM Sans !important',\n          }}\n        >\n          <DialogClose className=\"dm-sans\" asChild>\n            <IconButton\n              size=\"lg\"\n              icon={<CloseIcon />}\n              variant=\"ghost\"\n              aria-label=\"Close\"\n              color=\"default\"\n            />\n          </DialogClose>\n        </Box>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default MappingCondition;\n"],"names":["useTestId","useState","useRef","useCallback","useMemo","filterDerivedQuestionsFromConditionData","Dialog","createPortal","Box","DialogTrigger","Text","MAPPING_CONDITION_STRINGS","DialogContent","DialogHeader","DialogTitle","DialogBody","ConditionWrapper","DialogFooter","Flex","DialogClose","Button","IconButton","CloseIcon"],"mappings":"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"}

package/dist/cjs/contact-import/components/ContactImportHeader.js

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var arrow = require('../../commons/icons/arrow.js');
+var testId_context = require('../../commons/context/test-id.context.js');
 var uiStrings = require('../constants/ui-strings.js');
 var ContactImportModal = require('./ContactImportModal.js');
 var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
@@ -24,6 +25,7 @@ const ContactImportHeader = ({
   navigateMappingPage,
   invitePortal
 }) => {
+  const { tid } = testId_context.useTestId();
   const [showImportModal, setShowImportModal] = React.useState(false);
   const handleBackClick = () => {
     setNewImport(false);
@@ -74,7 +76,8 @@ const ContactImportHeader = ({
           color: "default",
           icon: /* @__PURE__ */ React.createElement(arrowLeft.ArrowLeftIcon, null),
           size: "lg",
-          "aria-label": "Go back"
+          "aria-label": "Go back",
+          "data-testid": tid("back-btn")
         }
       ),
       /* @__PURE__ */ React.createElement(heading.Heading, { size: "h6" }, uiStrings.CONTACT_IMPORT_UI_STRINGS.NEW_CONTACT_IMPORT)
@@ -96,7 +99,8 @@ const ContactImportHeader = ({
           color: "default",
           variant: "ghost",
           size: "md",
-          onClick: handleEventSetupClick
+          onClick: handleEventSetupClick,
+          "data-testid": tid("configure-tab")
         },
         uiStrings.CONTACT_IMPORT_UI_STRINGS.EVENT_SETUP
       ),
@@ -118,7 +122,8 @@ const ContactImportHeader = ({
       {
         size: "lg",
         onClick: handleContinueMapping,
-        css: { visibility: isContactMappingPage ? "visible" : "hidden" }
+        css: { visibility: isContactMappingPage ? "visible" : "hidden" },
+        "data-testid": tid("continue-btn")
       },
       uiStrings.CONTACT_IMPORT_UI_STRINGS.CONTINUE_MAPPING
     ),

package/dist/cjs/contact-import/components/ContactImportHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactImportHeader.js","sources":["../../../../src/contact-import/components/ContactImportHeader.tsx"],"sourcesContent":["import {\n  Button,\n  Flex,\n  Heading,\n  IconButton,\n  toast\n} from \"@sparrowengg/twigs-react\";\nimport { ArrowLeftIcon } from \"@sparrowengg/twigs-react-icons\";\nimport React, { useState } from \"react\";\nimport Arrow from \"../../commons/icons/arrow\";\nimport { ContactImportHeaderProps } from \"../types\";\nimport { CONTACT_IMPORT_UI_STRINGS } from \"../constants/ui-strings\";\nimport { ContactImportModal } from \"./ContactImportModal\";\n\nexport const ContactImportHeader: React.FC<ContactImportHeaderProps> = ({\n  importName,\n  setImportName,\n  setNewImport,\n  setContactImportField,\n  contactImportField,\n  hasPreviousMapping,\n  previousMappingHandler,\n  onSaveHandler,\n  isContactMappingPage,\n  navigateMappingPage,\n  invitePortal,\n}) => {\n  const [showImportModal, setShowImportModal] = useState(false);\n\n  const handleBackClick = () => {\n    setNewImport(false);\n    previousMappingHandler();\n  };\n\n  const handleEventSetupClick = () => {\n    if (isContactMappingPage) {\n      navigateMappingPage(false);\n    }\n  };\n\n  const handleContinueMapping = () => {\n    if(!contactImportField?.fields?.some(\n      (field) =>\n        field?.surveySparrowField === 'email' || field?.surveySparrowField === 'mobile'\n    )){\n      toast({\n        variant: 'error',\n        title: 'Please map Email or mobile or uniqueId field'\n      });\n      return\n    }\n    setShowImportModal(true);\n  };\n\n  const handleSaveAndClose = async (importName: string) => {\n    await onSaveHandler(importName);\n  };\n\n  return (\n    <Flex\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      css={{\n        borderBottom: \"$borderWidths$xs solid $neutral200\",\n        padding: \"$8 $12\",\n      }}\n    >\n      <Flex\n        gap=\"$6\"\n        alignItems=\"center\"\n        css={{ visibility: hasPreviousMapping ? \"visible\" : \"hidden\" }}\n      >\n        <IconButton\n          onClick={handleBackClick}\n          color=\"default\"\n          icon={<ArrowLeftIcon />}\n          size=\"lg\"\n          aria-label=\"Go back\"\n        />\n        <Heading size=\"h6\">{CONTACT_IMPORT_UI_STRINGS.NEW_CONTACT_IMPORT}</Heading>\n      </Flex>\n      <Flex\n        alignItems=\"center\"\n        gap=\"$4\"\n        css={{ \n          width: \"420px !important\",\n          \"& button\": { background: \"transparent !important\", fontSize: \"$md\" },\n        }}\n      >\n        <Button\n          css={{ color: !isContactMappingPage ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          onClick={handleEventSetupClick}\n        >\n          {CONTACT_IMPORT_UI_STRINGS.EVENT_SETUP}\n        </Button>\n        <Arrow />\n        <Button\n          css={{ color: isContactMappingPage ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          disabled={!isContactMappingPage}\n        >\n          {CONTACT_IMPORT_UI_STRINGS.MAPPING}\n        </Button>\n      </Flex>\n      <Button\n        size=\"lg\"\n        onClick={handleContinueMapping}\n        css={{ visibility: isContactMappingPage ? \"visible\" : \"hidden\"}}\n      >\n        {CONTACT_IMPORT_UI_STRINGS.CONTINUE_MAPPING}\n      </Button>\n      {showImportModal && (\n        <ContactImportModal\n          importName={importName}\n          setImportName={setImportName}\n          setContactImportField={setContactImportField}\n          contactImportField={contactImportField}\n          invitePortal={invitePortal}\n          onSaveHandler={handleSaveAndClose}\n          onCloseHandler={() => setShowImportModal(false)}\n        />\n      )}\n    </Flex>\n  );\n};\n\n"],"names":["useState","toast","importName","Flex","IconButton","ArrowLeftIcon","Heading","CONTACT_IMPORT_UI_STRINGS","Button","Arrow","ContactImportModal"],"mappings":"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"}
+{"version":3,"file":"ContactImportHeader.js","sources":["../../../../src/contact-import/components/ContactImportHeader.tsx"],"sourcesContent":["import {\n  Button,\n  Flex,\n  Heading,\n  IconButton,\n  toast\n} from \"@sparrowengg/twigs-react\";\nimport { ArrowLeftIcon } from \"@sparrowengg/twigs-react-icons\";\nimport React, { useState } from \"react\";\nimport Arrow from \"../../commons/icons/arrow\";\nimport { useTestId } from \"../../commons/context/test-id.context\";\nimport { ContactImportHeaderProps } from \"../types\";\nimport { CONTACT_IMPORT_UI_STRINGS } from \"../constants/ui-strings\";\nimport { ContactImportModal } from \"./ContactImportModal\";\n\nexport const ContactImportHeader: React.FC<ContactImportHeaderProps> = ({\n  importName,\n  setImportName,\n  setNewImport,\n  setContactImportField,\n  contactImportField,\n  hasPreviousMapping,\n  previousMappingHandler,\n  onSaveHandler,\n  isContactMappingPage,\n  navigateMappingPage,\n  invitePortal,\n}) => {\n  const { tid } = useTestId();\n  const [showImportModal, setShowImportModal] = useState(false);\n\n  const handleBackClick = () => {\n    setNewImport(false);\n    previousMappingHandler();\n  };\n\n  const handleEventSetupClick = () => {\n    if (isContactMappingPage) {\n      navigateMappingPage(false);\n    }\n  };\n\n  const handleContinueMapping = () => {\n    if(!contactImportField?.fields?.some(\n      (field) =>\n        field?.surveySparrowField === 'email' || field?.surveySparrowField === 'mobile'\n    )){\n      toast({\n        variant: 'error',\n        title: 'Please map Email or mobile or uniqueId field'\n      });\n      return\n    }\n    setShowImportModal(true);\n  };\n\n  const handleSaveAndClose = async (importName: string) => {\n    await onSaveHandler(importName);\n  };\n\n  return (\n    <Flex\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      css={{\n        borderBottom: \"$borderWidths$xs solid $neutral200\",\n        padding: \"$8 $12\",\n      }}\n    >\n      <Flex\n        gap=\"$6\"\n        alignItems=\"center\"\n        css={{ visibility: hasPreviousMapping ? \"visible\" : \"hidden\" }}\n      >\n        <IconButton\n          onClick={handleBackClick}\n          color=\"default\"\n          icon={<ArrowLeftIcon />}\n          size=\"lg\"\n          aria-label=\"Go back\"\n          data-testid={tid('back-btn')}\n        />\n        <Heading size=\"h6\">{CONTACT_IMPORT_UI_STRINGS.NEW_CONTACT_IMPORT}</Heading>\n      </Flex>\n      <Flex\n        alignItems=\"center\"\n        gap=\"$4\"\n        css={{ \n          width: \"420px !important\",\n          \"& button\": { background: \"transparent !important\", fontSize: \"$md\" },\n        }}\n      >\n        <Button\n          css={{ color: !isContactMappingPage ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          onClick={handleEventSetupClick}\n          data-testid={tid('configure-tab')}\n        >\n          {CONTACT_IMPORT_UI_STRINGS.EVENT_SETUP}\n        </Button>\n        <Arrow />\n        <Button\n          css={{ color: isContactMappingPage ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          disabled={!isContactMappingPage}\n        >\n          {CONTACT_IMPORT_UI_STRINGS.MAPPING}\n        </Button>\n      </Flex>\n      <Button\n        size=\"lg\"\n        onClick={handleContinueMapping}\n        css={{ visibility: isContactMappingPage ? \"visible\" : \"hidden\"}}\n        data-testid={tid('continue-btn')}\n      >\n        {CONTACT_IMPORT_UI_STRINGS.CONTINUE_MAPPING}\n      </Button>\n      {showImportModal && (\n        <ContactImportModal\n          importName={importName}\n          setImportName={setImportName}\n          setContactImportField={setContactImportField}\n          contactImportField={contactImportField}\n          invitePortal={invitePortal}\n          onSaveHandler={handleSaveAndClose}\n          onCloseHandler={() => setShowImportModal(false)}\n        />\n      )}\n    </Flex>\n  );\n};\n\n"],"names":["useTestId","useState","toast","importName","Flex","IconButton","ArrowLeftIcon","Heading","CONTACT_IMPORT_UI_STRINGS","Button","Arrow","ContactImportModal"],"mappings":"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"}

package/dist/cjs/contact-import/components/ContactImportModal.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var testId_context = require('../../commons/context/test-id.context.js');
 var uiStrings = require('../constants/ui-strings.js');
 var index = require('../../commons/constants/index.js');
 var index$1 = require('../../commons/helpers/index.js');
@@ -43,6 +44,7 @@ const ContactImportModal = ({
   invitePortal
 }) => {
   var _a;
+  const { tid } = testId_context.useTestId();
   const [internalLoading, setInternalLoading] = React.useState(false);
   const handleInputChange = (event) => {
     setImportName(event.currentTarget.value);
@@ -97,7 +99,8 @@ const ContactImportModal = ({
             }
           },
           onClick: onCloseHandler,
-          "aria-label": "Close modal"
+          "aria-label": "Close modal",
+          "data-testid": tid("close-modal")
         }
       )
     ),
@@ -134,14 +137,15 @@ const ContactImportModal = ({
           padding: "$8 $12"
         }
       },
-      /* @__PURE__ */ React.createElement(button.Button, { size: "lg", color: "default", disabled: internalLoading, onClick: onCloseHandler }, uiStrings.CONTACT_IMPORT_UI_STRINGS.CANCEL),
+      /* @__PURE__ */ React.createElement(button.Button, { size: "lg", color: "default", disabled: internalLoading, onClick: onCloseHandler, "data-testid": tid("cancel-btn") }, uiStrings.CONTACT_IMPORT_UI_STRINGS.CANCEL),
       /* @__PURE__ */ React.createElement(
         button.Button,
         {
           size: "lg",
           disabled: isFinishDisabled || internalLoading,
           onClick: async () => await handleFinishImport(),
-          loading: internalLoading
+          loading: internalLoading,
+          "data-testid": tid("finish-import")
         },
         uiStrings.CONTACT_IMPORT_UI_STRINGS.FINISH_IMPORT
       )

package/dist/cjs/contact-import/components/ContactImportModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactImportModal.js","sources":["../../../../src/contact-import/components/ContactImportModal.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Checkbox,\n  Dialog,\n  DialogContent,\n  Flex,\n  FormInput,\n  Heading,\n  IconButton,\n} from \"@sparrowengg/twigs-react\";\nimport { CloseIcon } from \"@sparrowengg/twigs-react-icons\";\nimport React, { useState } from \"react\";\nimport { ContactImportFieldType } from \"../types\";\nimport { CONTACT_IMPORT_UI_STRINGS } from \"../constants/ui-strings\";\nimport { MODAL_MAX_WIDTH, INPUT_MAX_LENGTH } from \"../../commons/constants\";\nimport { generateUniqueId } from \"../../commons/helpers\";\nimport { isValidInputLength } from \"../utils\";\n\ninterface ContactImportModalProps {\n  importName: string;\n  setImportName: React.Dispatch<React.SetStateAction<string>>;\n  setContactImportField: React.Dispatch<React.SetStateAction<ContactImportFieldType>>;\n  contactImportField: ContactImportFieldType;\n  onCloseHandler: () => void;\n  onSaveHandler: (importName: string) => void | Promise<void>;\n  invitePortal: {\n    hasInvitePortal: boolean;\n    value: boolean | null;\n    onChangeHandler: (value: boolean) => void;\n  };\n}\n\nexport const ContactImportModal: React.FC<ContactImportModalProps> = ({\n  importName,\n  setImportName,\n  setContactImportField,\n  contactImportField,\n  onCloseHandler,\n  onSaveHandler,\n  invitePortal,\n}) => {\n  const [internalLoading, setInternalLoading] = useState(false);\n\n  const handleInputChange = (event: any) => {\n    setImportName(event.currentTarget.value);\n  };\n\n  const handleInvitePortalChange = (value: any) => {\n    setContactImportField({\n      ...contactImportField,\n      invitePortal: value,\n    });\n    invitePortal.onChangeHandler(value);\n  };\n\n  const handleFinishImport = async () => {\n    setInternalLoading(true);\n    setContactImportField({\n      ...contactImportField,\n      description: importName,\n      id: generateUniqueId(),\n    });\n    await onSaveHandler(importName);\n    setInternalLoading(false);\n  };\n  const isFinishDisabled = !isValidInputLength(importName);\n\n\n  return (\n    <Dialog open>\n      <DialogContent\n        className=\"dm-sans\"\n        css={{\n          fontFamily: \"DM Sans !important\",\n          'p': {\n            margin: \"0 !important\",\n          },\n          padding: 0,\n          borderRadius: \"$3xl\",\n          maxWidth: MODAL_MAX_WIDTH,\n        }}\n      >\n        <Flex\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n          className=\"dm-sans\"\n          css={{\n            padding: \"$8 $12\",\n            borderBottom: \"$borderWidths$xs solid $neutral200\",\n          }}\n        >\n          <Heading className=\"dm-sans\" size=\"h6\" css={{ color: \"$neutral900\" }}>\n            {CONTACT_IMPORT_UI_STRINGS.IMPORT_CONFIGURATION}\n          </Heading>\n          <IconButton\n            variant=\"ghost\"\n            color=\"default\"\n            disabled={internalLoading}\n            icon={<CloseIcon />}\n            size=\"lg\"\n            css={{\n              \"& svg\": {\n                color: \"#64748B !important\",\n              },\n            }}\n            onClick={onCloseHandler}\n            aria-label=\"Close modal\"\n          />\n        </Flex>\n        <Box\n          className=\"dm-sans\"\n          css={{\n            padding: \"$12\",\n          }}\n        >\n          <FormInput\n            className=\"dm-sans\"\n            label={CONTACT_IMPORT_UI_STRINGS.TITLE_LABEL}\n            requiredIndicator\n            value={contactImportField?.configure?.reference || importName}\n            maxLength={INPUT_MAX_LENGTH}\n            max={INPUT_MAX_LENGTH}\n            showCount\n            onChange={handleInputChange}\n            size=\"lg\"\n          />\n          {/* {invitePortal.hasInvitePortal && (\n            <Box css={{ marginTop: \"$12\" }}>\n              <Checkbox\n                checked={!!invitePortal.value}\n                onChange={handleInvitePortalChange}\n              >\n                {CONTACT_IMPORT_UI_STRINGS.INVITE_TO_PORTAL}\n              </Checkbox>\n            </Box>\n          )} */}\n        </Box>\n        <Flex\n          className=\"dm-sans\"\n          gap=\"$4\"\n          css={{\n            justifyContent: \"flex-end\",\n            padding: \"$8 $12\",\n          }}\n        >\n          <Button size=\"lg\" color=\"default\" disabled={internalLoading} onClick={onCloseHandler}>\n            {CONTACT_IMPORT_UI_STRINGS.CANCEL}\n          </Button>\n          <Button\n            size=\"lg\"\n            disabled={isFinishDisabled || internalLoading}\n            onClick={async () => await handleFinishImport()}\n            loading={internalLoading}\n          >\n            {CONTACT_IMPORT_UI_STRINGS.FINISH_IMPORT}\n          </Button>\n        </Flex>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\n"],"names":["useState","generateUniqueId","isValidInputLength","Dialog","DialogContent","MODAL_MAX_WIDTH","Flex","Heading","CONTACT_IMPORT_UI_STRINGS","IconButton","CloseIcon","Box","FormInput","INPUT_MAX_LENGTH","Button"],"mappings":"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"}
+{"version":3,"file":"ContactImportModal.js","sources":["../../../../src/contact-import/components/ContactImportModal.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Checkbox,\n  Dialog,\n  DialogContent,\n  Flex,\n  FormInput,\n  Heading,\n  IconButton,\n} from \"@sparrowengg/twigs-react\";\nimport { CloseIcon } from \"@sparrowengg/twigs-react-icons\";\nimport React, { useState } from \"react\";\nimport { useTestId } from \"../../commons/context/test-id.context\";\nimport { ContactImportFieldType } from \"../types\";\nimport { CONTACT_IMPORT_UI_STRINGS } from \"../constants/ui-strings\";\nimport { MODAL_MAX_WIDTH, INPUT_MAX_LENGTH } from \"../../commons/constants\";\nimport { generateUniqueId } from \"../../commons/helpers\";\nimport { isValidInputLength } from \"../utils\";\n\ninterface ContactImportModalProps {\n  importName: string;\n  setImportName: React.Dispatch<React.SetStateAction<string>>;\n  setContactImportField: React.Dispatch<React.SetStateAction<ContactImportFieldType>>;\n  contactImportField: ContactImportFieldType;\n  onCloseHandler: () => void;\n  onSaveHandler: (importName: string) => void | Promise<void>;\n  invitePortal: {\n    hasInvitePortal: boolean;\n    value: boolean | null;\n    onChangeHandler: (value: boolean) => void;\n  };\n}\n\nexport const ContactImportModal: React.FC<ContactImportModalProps> = ({\n  importName,\n  setImportName,\n  setContactImportField,\n  contactImportField,\n  onCloseHandler,\n  onSaveHandler,\n  invitePortal,\n}) => {\n  const { tid } = useTestId();\n  const [internalLoading, setInternalLoading] = useState(false);\n\n  const handleInputChange = (event: any) => {\n    setImportName(event.currentTarget.value);\n  };\n\n  const handleInvitePortalChange = (value: any) => {\n    setContactImportField({\n      ...contactImportField,\n      invitePortal: value,\n    });\n    invitePortal.onChangeHandler(value);\n  };\n\n  const handleFinishImport = async () => {\n    setInternalLoading(true);\n    setContactImportField({\n      ...contactImportField,\n      description: importName,\n      id: generateUniqueId(),\n    });\n    await onSaveHandler(importName);\n    setInternalLoading(false);\n  };\n  const isFinishDisabled = !isValidInputLength(importName);\n\n\n  return (\n    <Dialog open>\n      <DialogContent\n        className=\"dm-sans\"\n        css={{\n          fontFamily: \"DM Sans !important\",\n          'p': {\n            margin: \"0 !important\",\n          },\n          padding: 0,\n          borderRadius: \"$3xl\",\n          maxWidth: MODAL_MAX_WIDTH,\n        }}\n      >\n        <Flex\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n          className=\"dm-sans\"\n          css={{\n            padding: \"$8 $12\",\n            borderBottom: \"$borderWidths$xs solid $neutral200\",\n          }}\n        >\n          <Heading className=\"dm-sans\" size=\"h6\" css={{ color: \"$neutral900\" }}>\n            {CONTACT_IMPORT_UI_STRINGS.IMPORT_CONFIGURATION}\n          </Heading>\n          <IconButton\n            variant=\"ghost\"\n            color=\"default\"\n            disabled={internalLoading}\n            icon={<CloseIcon />}\n            size=\"lg\"\n            css={{\n              \"& svg\": {\n                color: \"#64748B !important\",\n              },\n            }}\n            onClick={onCloseHandler}\n            aria-label=\"Close modal\"\n            data-testid={tid('close-modal')}\n          />\n        </Flex>\n        <Box\n          className=\"dm-sans\"\n          css={{\n            padding: \"$12\",\n          }}\n        >\n          <FormInput\n            className=\"dm-sans\"\n            label={CONTACT_IMPORT_UI_STRINGS.TITLE_LABEL}\n            requiredIndicator\n            value={contactImportField?.configure?.reference || importName}\n            maxLength={INPUT_MAX_LENGTH}\n            max={INPUT_MAX_LENGTH}\n            showCount\n            onChange={handleInputChange}\n            size=\"lg\"\n          />\n          {/* {invitePortal.hasInvitePortal && (\n            <Box css={{ marginTop: \"$12\" }}>\n              <Checkbox\n                checked={!!invitePortal.value}\n                onChange={handleInvitePortalChange}\n              >\n                {CONTACT_IMPORT_UI_STRINGS.INVITE_TO_PORTAL}\n              </Checkbox>\n            </Box>\n          )} */}\n        </Box>\n        <Flex\n          className=\"dm-sans\"\n          gap=\"$4\"\n          css={{\n            justifyContent: \"flex-end\",\n            padding: \"$8 $12\",\n          }}\n        >\n          <Button size=\"lg\" color=\"default\" disabled={internalLoading} onClick={onCloseHandler} data-testid={tid('cancel-btn')}>\n            {CONTACT_IMPORT_UI_STRINGS.CANCEL}\n          </Button>\n          <Button\n            size=\"lg\"\n            disabled={isFinishDisabled || internalLoading}\n            onClick={async () => await handleFinishImport()}\n            loading={internalLoading}\n            data-testid={tid('finish-import')}\n          >\n            {CONTACT_IMPORT_UI_STRINGS.FINISH_IMPORT}\n          </Button>\n        </Flex>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\n"],"names":["useTestId","useState","generateUniqueId","isValidInputLength","Dialog","DialogContent","MODAL_MAX_WIDTH","Flex","Heading","CONTACT_IMPORT_UI_STRINGS","IconButton","CloseIcon","Box","FormInput","INPUT_MAX_LENGTH","Button"],"mappings":"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"}

package/dist/cjs/contact-import/components/ManageImport/dashboard.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var completed = require('./completed.js');
 var scheduled = require('./scheduled.js');
 var React = require('react');
+var testId_context = require('../../../commons/context/test-id.context.js');
 var NoDataState = require('./NoDataState.js');
 var flex = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
 var box = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
@@ -20,6 +21,7 @@ function Dashboard({
   integrationName,
   imports
 }) {
+  const { tid } = testId_context.useTestId();
   const completedImport = imports.filter(
     (item) => !item.isRecuring
   );
@@ -41,7 +43,8 @@ function Dashboard({
         onClick: () => {
           setNewImport(true);
         },
-        size: "lg"
+        size: "lg",
+        "data-testid": tid("new-import")
       },
       "New Import"
     )

package/dist/cjs/contact-import/components/ManageImport/dashboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard.js","sources":["../../../../../src/contact-import/components/ManageImport/dashboard.tsx"],"sourcesContent":["import {\n  Box,\n  Heading,\n  Button,\n  TabsTrigger,\n  Tabs,\n  TabsList,\n  TabsContent,\n} from \"@sparrowengg/twigs-react\";\nimport { Flex, Text } from \"@sparrowengg/twigs-react\";\nimport Completed from \"./completed\";\nimport Scheduled from \"./scheduled\";\nimport React from \"react\";\nimport NoLogsState from \"./NoDataState\";\nimport { PlusIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { DashboardProps, CompletedImportTypes, ScheduledImportTypes } from \"../../types\";\nexport default function Dashboard({\n  dashboardDescription,\n  setNewImport,\n  integrationName,\n  imports,\n}: DashboardProps) {\n  const completedImport = imports.filter(\n    (item: CompletedImportTypes | ScheduledImportTypes) =>\n      !item.isRecuring\n  );\n  const scheduledImport = imports.filter(\n    (item: CompletedImportTypes | ScheduledImportTypes) =>\n      item.isRecuring\n  );\n\n  return (\n    <Flex justifyContent=\"center\">\n      <Box css={{ maxWidth: \"1120px\", width: \"100%\" }}>\n        <Flex\n          css={{ marginTop: \"$40\" }}\n          justifyContent=\"space-between\"\n          alignItems=\"center\"\n        >\n          <Flex flexDirection=\"column\" gap=\"$2\">\n            <Heading size=\"h5\">{integrationName}</Heading>\n            <Text size=\"sm\" css={{ color: \"$neutral600\" }}>\n              {dashboardDescription}\n            </Text>\n          </Flex>\n          <Button leftIcon={<PlusIcon size={20} />}\n            onClick={() => {\n              setNewImport(true);\n            }}\n            size=\"lg\"\n          >\n            New Import\n          </Button>\n        </Flex>\n        <Tabs\n          defaultValue=\"completed\"\n          css={{\n            marginTop: \"$16\",\n            padding: \"0 !important\",\n          }}\n        >\n          <TabsList aria-label=\"contact-imports\">\n            <TabsTrigger value=\"completed\">Completed </TabsTrigger>\n            <TabsTrigger value=\"scheduled\"> Scheduled </TabsTrigger>\n          </TabsList>\n          <TabsContent value=\"completed\" css={{ padding: \"0\", height: \"100%\" }}>\n            {completedImport?.length ? (\n              <Completed completed={completedImport} />\n            ) : (\n              <NoLogsState />\n            )}\n          </TabsContent>\n          <TabsContent css={{ padding: \"0\", height: \"100%\" }} value=\"scheduled\">\n            {scheduledImport?.length ? (\n              <Scheduled scheduled={scheduledImport} />\n            ) : (\n              <NoLogsState />\n            )}\n          </TabsContent>\n        </Tabs>\n      </Box>\n    </Flex>\n  );\n}\n"],"names":["Flex","Box","Heading","Text","Button","PlusIcon","Tabs","TabsList","TabsTrigger","TabsContent","Completed","NoLogsState","Scheduled"],"mappings":";;;;;;;;;;;;;;;;AAgBA,SAAwB,SAAA,CAAU;AAAA,EAChC,oBAAA;AAAA,EACA,YAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,kBAAkB,OAAA,CAAQ,MAAA;AAAA,IAC9B,CAAC,IAAA,KACC,CAAC,IAAA,CAAK;AAAA,GACV;AACA,EAAA,MAAM,kBAAkB,OAAA,CAAQ,MAAA;AAAA,IAC9B,CAAC,SACC,IAAA,CAAK;AAAA,GACT;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA,CAACA,SAAA,EAAA,EAAK,cAAA,EAAe,QAAA,EAAA,kBACnB,KAAA,CAAA,aAAA,CAACC,OAAA,EAAA,EAAI,GAAA,EAAK,EAAE,QAAA,EAAU,QAAA,EAAU,KAAA,EAAO,MAAA,EAAO,EAAA,kBAC5C,KAAA,CAAA,aAAA;AAAA,IAACD,SAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,EAAE,SAAA,EAAW,KAAA,EAAM;AAAA,MACxB,cAAA,EAAe,eAAA;AAAA,MACf,UAAA,EAAW;AAAA,KAAA;AAAA,oBAEX,KAAA,CAAA,aAAA,CAACA,aAAK,aAAA,EAAc,QAAA,EAAS,KAAI,IAAA,EAAA,kBAC/B,KAAA,CAAA,aAAA,CAACE,eAAA,EAAA,EAAQ,IAAA,EAAK,IAAA,EAAA,EAAM,eAAgB,mBACpC,KAAA,CAAA,aAAA,CAACC,SAAA,EAAA,EAAK,MAAK,IAAA,EAAK,GAAA,EAAK,EAAE,KAAA,EAAO,aAAA,EAAc,EAAA,EACzC,oBACH,CACF,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QAAO,QAAA,kBAAU,KAAA,CAAA,aAAA,CAACC,aAAA,EAAA,EAAS,IAAA,EAAM,EAAA,EAAI,CAAA;AAAA,QACpC,SAAS,MAAM;AACb,UAAA,YAAA,CAAa,IAAI,CAAA;AAAA,QACnB,CAAA;AAAA,QACA,IAAA,EAAK;AAAA,OAAA;AAAA,MACN;AAAA;AAED,GACF,kBACA,KAAA,CAAA,aAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAa,WAAA;AAAA,MACb,GAAA,EAAK;AAAA,QACH,SAAA,EAAW,KAAA;AAAA,QACX,OAAA,EAAS;AAAA;AACX,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAACC,aAAA,EAAA,EAAS,YAAA,EAAW,iBAAA,EAAA,sCAClBC,gBAAA,EAAA,EAAY,KAAA,EAAM,WAAA,EAAA,EAAY,YAAU,mBACzC,KAAA,CAAA,aAAA,CAACA,gBAAA,EAAA,EAAY,KAAA,EAAM,WAAA,EAAA,EAAY,aAAW,CAC5C,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAACC,oBAAY,KAAA,EAAM,WAAA,EAAY,KAAK,EAAE,OAAA,EAAS,KAAK,MAAA,EAAQ,MAAA,OACzD,eAAA,IAAA,IAAA,GAAA,MAAA,GAAA,eAAA,CAAiB,MAAA,wCACfC,iBAAA,EAAA,EAAU,SAAA,EAAW,iBAAiB,CAAA,mBAEvC,KAAA,CAAA,aAAA,CAACC,yBAAY,CAEjB,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAACF,oBAAY,GAAA,EAAK,EAAE,SAAS,GAAA,EAAK,MAAA,EAAQ,QAAO,EAAG,KAAA,EAAM,gBACvD,eAAA,IAAA,IAAA,GAAA,MAAA,GAAA,eAAA,CAAiB,MAAA,wCACfG,iBAAA,EAAA,EAAU,SAAA,EAAW,iBAAiB,CAAA,mBAEvC,KAAA,CAAA,aAAA,CAACD,yBAAY,CAEjB;AAAA,GAEJ,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"dashboard.js","sources":["../../../../../src/contact-import/components/ManageImport/dashboard.tsx"],"sourcesContent":["import {\n  Box,\n  Heading,\n  Button,\n  TabsTrigger,\n  Tabs,\n  TabsList,\n  TabsContent,\n} from \"@sparrowengg/twigs-react\";\nimport { Flex, Text } from \"@sparrowengg/twigs-react\";\nimport Completed from \"./completed\";\nimport Scheduled from \"./scheduled\";\nimport React from \"react\";\nimport { useTestId } from \"../../../commons/context/test-id.context\";\nimport NoLogsState from \"./NoDataState\";\nimport { PlusIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { DashboardProps, CompletedImportTypes, ScheduledImportTypes } from \"../../types\";\nexport default function Dashboard({\n  dashboardDescription,\n  setNewImport,\n  integrationName,\n  imports,\n}: DashboardProps) {\n  const { tid } = useTestId();\n  const completedImport = imports.filter(\n    (item: CompletedImportTypes | ScheduledImportTypes) =>\n      !item.isRecuring\n  );\n  const scheduledImport = imports.filter(\n    (item: CompletedImportTypes | ScheduledImportTypes) =>\n      item.isRecuring\n  );\n\n  return (\n    <Flex justifyContent=\"center\">\n      <Box css={{ maxWidth: \"1120px\", width: \"100%\" }}>\n        <Flex\n          css={{ marginTop: \"$40\" }}\n          justifyContent=\"space-between\"\n          alignItems=\"center\"\n        >\n          <Flex flexDirection=\"column\" gap=\"$2\">\n            <Heading size=\"h5\">{integrationName}</Heading>\n            <Text size=\"sm\" css={{ color: \"$neutral600\" }}>\n              {dashboardDescription}\n            </Text>\n          </Flex>\n          <Button leftIcon={<PlusIcon size={20} />}\n            onClick={() => {\n              setNewImport(true);\n            }}\n            size=\"lg\"\n            data-testid={tid('new-import')}\n          >\n            New Import\n          </Button>\n        </Flex>\n        <Tabs\n          defaultValue=\"completed\"\n          css={{\n            marginTop: \"$16\",\n            padding: \"0 !important\",\n          }}\n        >\n          <TabsList aria-label=\"contact-imports\">\n            <TabsTrigger value=\"completed\">Completed </TabsTrigger>\n            <TabsTrigger value=\"scheduled\"> Scheduled </TabsTrigger>\n          </TabsList>\n          <TabsContent value=\"completed\" css={{ padding: \"0\", height: \"100%\" }}>\n            {completedImport?.length ? (\n              <Completed completed={completedImport} />\n            ) : (\n              <NoLogsState />\n            )}\n          </TabsContent>\n          <TabsContent css={{ padding: \"0\", height: \"100%\" }} value=\"scheduled\">\n            {scheduledImport?.length ? (\n              <Scheduled scheduled={scheduledImport} />\n            ) : (\n              <NoLogsState />\n            )}\n          </TabsContent>\n        </Tabs>\n      </Box>\n    </Flex>\n  );\n}\n"],"names":["useTestId","Flex","Box","Heading","Text","Button","PlusIcon","Tabs","TabsList","TabsTrigger","TabsContent","Completed","NoLogsState","Scheduled"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,SAAwB,SAAA,CAAU;AAAA,EAChC,oBAAA;AAAA,EACA,YAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,EAAE,GAAA,EAAI,GAAIA,wBAAA,EAAU;AAC1B,EAAA,MAAM,kBAAkB,OAAA,CAAQ,MAAA;AAAA,IAC9B,CAAC,IAAA,KACC,CAAC,IAAA,CAAK;AAAA,GACV;AACA,EAAA,MAAM,kBAAkB,OAAA,CAAQ,MAAA;AAAA,IAC9B,CAAC,SACC,IAAA,CAAK;AAAA,GACT;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA,CAACC,SAAA,EAAA,EAAK,cAAA,EAAe,QAAA,EAAA,kBACnB,KAAA,CAAA,aAAA,CAACC,OAAA,EAAA,EAAI,GAAA,EAAK,EAAE,QAAA,EAAU,QAAA,EAAU,KAAA,EAAO,MAAA,EAAO,EAAA,kBAC5C,KAAA,CAAA,aAAA;AAAA,IAACD,SAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,EAAE,SAAA,EAAW,KAAA,EAAM;AAAA,MACxB,cAAA,EAAe,eAAA;AAAA,MACf,UAAA,EAAW;AAAA,KAAA;AAAA,oBAEX,KAAA,CAAA,aAAA,CAACA,aAAK,aAAA,EAAc,QAAA,EAAS,KAAI,IAAA,EAAA,kBAC/B,KAAA,CAAA,aAAA,CAACE,eAAA,EAAA,EAAQ,IAAA,EAAK,IAAA,EAAA,EAAM,eAAgB,mBACpC,KAAA,CAAA,aAAA,CAACC,SAAA,EAAA,EAAK,MAAK,IAAA,EAAK,GAAA,EAAK,EAAE,KAAA,EAAO,aAAA,EAAc,EAAA,EACzC,oBACH,CACF,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QAAO,QAAA,kBAAU,KAAA,CAAA,aAAA,CAACC,aAAA,EAAA,EAAS,IAAA,EAAM,EAAA,EAAI,CAAA;AAAA,QACpC,SAAS,MAAM;AACb,UAAA,YAAA,CAAa,IAAI,CAAA;AAAA,QACnB,CAAA;AAAA,QACA,IAAA,EAAK,IAAA;AAAA,QACL,aAAA,EAAa,IAAI,YAAY;AAAA,OAAA;AAAA,MAC9B;AAAA;AAED,GACF,kBACA,KAAA,CAAA,aAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAa,WAAA;AAAA,MACb,GAAA,EAAK;AAAA,QACH,SAAA,EAAW,KAAA;AAAA,QACX,OAAA,EAAS;AAAA;AACX,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAACC,aAAA,EAAA,EAAS,YAAA,EAAW,iBAAA,EAAA,sCAClBC,gBAAA,EAAA,EAAY,KAAA,EAAM,WAAA,EAAA,EAAY,YAAU,mBACzC,KAAA,CAAA,aAAA,CAACA,gBAAA,EAAA,EAAY,KAAA,EAAM,WAAA,EAAA,EAAY,aAAW,CAC5C,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAACC,oBAAY,KAAA,EAAM,WAAA,EAAY,KAAK,EAAE,OAAA,EAAS,KAAK,MAAA,EAAQ,MAAA,OACzD,eAAA,IAAA,IAAA,GAAA,MAAA,GAAA,eAAA,CAAiB,MAAA,wCACfC,iBAAA,EAAA,EAAU,SAAA,EAAW,iBAAiB,CAAA,mBAEvC,KAAA,CAAA,aAAA,CAACC,yBAAY,CAEjB,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAACF,oBAAY,GAAA,EAAK,EAAE,SAAS,GAAA,EAAK,MAAA,EAAQ,QAAO,EAAG,KAAA,EAAM,gBACvD,eAAA,IAAA,IAAA,GAAA,MAAA,GAAA,eAAA,CAAiB,MAAA,wCACfG,iBAAA,EAAA,EAAU,SAAA,EAAW,iBAAiB,CAAA,mBAEvC,KAAA,CAAA,aAAA,CAACD,yBAAY,CAEjB;AAAA,GAEJ,CACF,CAAA;AAEJ;;;;"}