@sparrowengg/integrations-templates-frontend 1.2.9 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/contact-import/components/contact-import-mapping.js +0 -1
- package/dist/cjs/contact-import/components/contact-import-mapping.js.map +1 -1
- package/dist/cjs/contact-import/index.js +0 -2
- package/dist/cjs/contact-import/index.js.map +1 -1
- package/dist/cjs/integration-template/components/dashboard.js +160 -158
- package/dist/cjs/integration-template/components/dashboard.js.map +1 -1
- package/dist/cjs/integration-template/index.js +35 -17
- package/dist/cjs/integration-template/index.js.map +1 -1
- package/dist/cjs/mapping/components/mapping.js +1 -3
- package/dist/cjs/mapping/components/mapping.js.map +1 -1
- package/dist/es/contact-import/components/contact-import-mapping.js +0 -1
- package/dist/es/contact-import/components/contact-import-mapping.js.map +1 -1
- package/dist/es/contact-import/index.js +0 -2
- package/dist/es/contact-import/index.js.map +1 -1
- package/dist/es/integration-template/components/dashboard.js +160 -158
- package/dist/es/integration-template/components/dashboard.js.map +1 -1
- package/dist/es/integration-template/index.js +35 -17
- package/dist/es/integration-template/index.js.map +1 -1
- package/dist/es/mapping/components/mapping.js +1 -3
- package/dist/es/mapping/components/mapping.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/package.json +1 -1
|
@@ -96,7 +96,6 @@ const ContactImportMapping = ({
|
|
|
96
96
|
]
|
|
97
97
|
}));
|
|
98
98
|
};
|
|
99
|
-
console.log(contactImportField);
|
|
100
99
|
return /* @__PURE__ */ React.createElement(flex.Flex, { justifyContent: "center" }, /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: "$40", maxWidth: 1176, width: "100%" } }, /* @__PURE__ */ React.createElement(
|
|
101
100
|
box.Box,
|
|
102
101
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contact-import-mapping.js","sources":["../../../../src/contact-import/components/contact-import-mapping.tsx"],"sourcesContent":["import {\n Box,\n Button,\n Flex,\n FormInput,\n FormLabel,\n Heading,\n IconButton,\n Select,\n Table,\n Tbody,\n Td,\n Text,\n Th,\n Thead,\n Tr\n} from \"@sparrowengg/twigs-react\";\nimport { DeleteIcon, PlusIcon } from \"@sparrowengg/twigs-react-icons\";\nimport React, { useEffect, useRef } from \"react\";\nconst defaultFieldValue = {\n integrationField: null,\n surveySparrowField: \"\",\n property: \"custom\"\n};\n\nconst ContactImportMapping = ({\n contactImportField,\n setContactImportField,\n integrationName,\n contactProperties,\n}: any) => {\n const customPropertyRef = useRef<HTMLDivElement | null>(null);\n const initialRenderRef = useRef(true);\n const errorFieldRef = useRef(false);\n\n useEffect(() => {\n if (initialRenderRef.current) {\n //to skip scroll on initial mounting\n initialRenderRef.current = false;\n } else {\n if (customPropertyRef?.current) {\n customPropertyRef.current.scrollIntoView({\n behavior: \"smooth\",\n block: \"end\"\n });\n }\n }\n }, []);\n\n const customFieldHandler = (\n id: string | number,\n property: string,\n value: any\n ) => {\n setContactImportField({\n ...contactImportField,\n fields: contactImportField.fields.map((field: any) => {\n if (field.id === id) {\n return { ...field, [property]: value };\n } else {\n return { ...field };\n }\n })\n });\n };\n\n const updateSurveySparrowField = (\n value: any,\n id: string | number,\n manuallyMapped: boolean\n ) => {\n setContactImportField({\n ...contactImportField,\n fields: contactImportField?.fields.map((field: any) => {\n if (field.id === id) {\n return {\n ...field,\n surveySparrowField: value,\n ...(manuallyMapped && { mapped: manuallyMapped })\n };\n } else {\n return { ...field };\n }\n })\n });\n };\n\n const addCustomProperty = () => {\n setContactImportField({\n ...contactImportField,\n fields: [\n ...contactImportField.fields,\n {\n id: contactImportField.fields?.length\n ? contactImportField.fields[contactImportField.fields?.length - 1]\n .id + 1\n : 1,\n ...defaultFieldValue\n }\n ]\n });\n };\n console.log(contactImportField);\n\n return (\n <Flex justifyContent=\"center\">\n <Box css={{ marginTop: \"$40\", maxWidth: 1176, width: \"100%\" }}>\n <Box\n css={{\n paddingLeft: \"$28\"\n }}\n >\n <Heading size=\"h5\">Map Contact Properties</Heading>\n <Text css={{ marginTop: \"$4\", color: \"$neutral600\" }} size=\"md\">\n Review these mappings before importing. Unmapped columns will be\n ignored.\n </Text>\n </Box>\n <Box\n css={{\n height: \"calc(100vh - 241px)\",\n paddingTop: \"$16\",\n overflowY: \"auto\",\n position: \"relative\",\n background: \"$white900\",\n paddingLeft: \"$28\"\n }}\n >\n <Table\n css={{\n width: \"100%\",\n background: \"$white900\",\n borderRadius: \"5px\",\n borderCollapse: \"collapse\"\n }}\n >\n <Thead\n css={{\n zIndex: 5,\n position: \"sticky\",\n top: \"-31px\",\n \"& th\": {\n textAlign: \"left\",\n fontWeight: 700,\n paddingBlock: \"$6\",\n lineHeight: \"$sm\",\n background: \"$white900\",\n boxShadow: '0 1px 0 rgba(0,0,0,0.1)',\n borderBlock: \"$borderWidths$xs solid $neutral200\",\n }\n }}\n >\n <Th>{`${integrationName} Profile Fields Data`}</Th>\n <Th css={{ borderLeft: \"$borderWidths$xs solid $neutral100\" }}>SurveySparrow Mapping</Th>\n </Thead>\n <Tbody\n css={{\n \"& tr\": {\n borderBottom: \"$borderWidths$xs solid $neutral200\"\n }\n }}\n >\n {contactImportField.fields.map((field: any) => {\n const hasSurveyFieldValue = contactProperties.some(\n (contact: any) => contact.value === field.surveySparrowField\n );\n return (\n <Tr\n key={field.id}\n css={{\n position: \"relative\",\n \"& td\": {\n paddingBlock: \"$8 $12\",\n paddingInline: \"$6\",\n verticalAlign: \"top\"\n }\n }}\n >\n <Td\n css={{\n width: 560,\n \"& > p\": {\n lineHeight: \"$sm\",\n color: \"$neutral600\"\n }\n }}\n >\n {field.property !== \"custom\" ? (\n <>\n <Text\n size=\"sm\"\n css={{\n color: \"$neutral900 !important\"\n }}\n weight=\"medium\"\n >\n {(\n field?.integrationField?.charAt(0).toUpperCase() +\n field?.integrationField.slice(1)\n ).replace(\"_\", \" \")}\n </Text>\n {field?.sampleData.length ? (\n <>\n {field.sampleData.map((sample: any) => (\n <Text\n size=\"xs\"\n css={{\n color: \"$neutral600\",\n lineHeight: \"$xs !important\"\n }}\n >\n {sample.length > 40\n ? sample.slice(0, 40) + \"...\"\n : sample}\n </Text>\n ))}\n </>\n ) : null}\n </>\n ) : (\n <Box css={{ position: \"relative\" }}>\n <FormInput\n size=\"lg\"\n onChange={(event) =>\n customFieldHandler(\n field.id,\n \"integrationField\",\n event.currentTarget.value\n )\n }\n />\n <FormLabel\n css={{ marginTop: \"$4\", color: \"$neutral400\" }}\n >\n Enter the exact custom property name for accurate\n mapping. It is case-sensitive.\n </FormLabel>\n {field.property === \"custom\" ? (\n <IconButton\n css={{\n position: \"absolute\",\n top: \"0\",\n left: \"-70px\"\n }}\n size=\"lg\"\n variant=\"ghost\"\n color=\"secondary\"\n onClick={() => {\n setContactImportField({\n ...contactImportField,\n fields: contactImportField?.fields.filter((currentField: any) => currentField?.id !== field?.id)\n })\n }}\n icon={<DeleteIcon />}\n />\n ) : null}\n </Box>\n )}\n </Td>\n <Td\n css={{\n width: 560,\n borderLeft: \"$borderWidths$xs solid $neutral100\"\n }}\n >\n <>\n <Select\n size=\"lg\"\n placeholder=\"--Choose Property--\"\n value={\n field.surveySparrowField\n ? {\n label: contactProperties.find(\n (contact: any) =>\n contact.value === field.surveySparrowField\n )?.label,\n value: field.surveySparrowField\n }\n : null\n }\n options={contactProperties.filter(\n (contact: any) => contact.type !== \"DEPENDENT_FIELD\"\n )}\n onChange={(currentField: any) => {\n updateSurveySparrowField(\n currentField.value,\n field.id,\n true\n );\n }}\n css={{\n marginBottom:\n !hasSurveyFieldValue &&\n !field.surveySparrowFieldError &&\n field.property === \"custom\"\n ? \"$12\"\n : 0,\n ...(!field.surveySparrowField &&\n field.surveySparrowFieldError && {\n \"& .twigs-select__control, & .twigs-select__control:hover\":\n {\n boxShadow: \"0px 1.5px 0px 0px #f65633\",\n borderBottom: 0\n }\n })\n }}\n />\n {hasSurveyFieldValue ? (\n <FormLabel\n css={{\n color: field?.mapped ? \"$neutral600\" : \"#0F966C\",\n marginBlock: \"$4 $12\"\n }}\n size=\"xs\"\n >\n {field?.mapped\n ? \"Manually mapped by you\"\n : \"Automatically mapped\"}\n </FormLabel>\n ) : null}\n {!field.surveySparrowField &&\n field.surveySparrowFieldError && (\n <FormLabel\n css={{\n color: \"$negative500\",\n marginTop: \"$4\"\n }}\n size=\"xs\"\n >\n Please select the property\n </FormLabel>\n )}\n </>\n </Td>\n </Tr>\n );\n })}\n\n <Tr\n css={{\n borderBottom: \"none !important\",\n \"&:hover\": {\n background: \"$white900\"\n }\n }}\n >\n <Td colSpan={2}>\n <Button\n size=\"md\"\n variant=\"ghost\"\n leftIcon={<PlusIcon />}\n onClick={addCustomProperty}\n >\n Add Custom Property\n </Button>\n </Td>\n </Tr>\n </Tbody>\n </Table>\n </Box>\n </Box>\n </Flex>\n );\n};\n\nexport default ContactImportMapping;\n"],"names":["useRef","useEffect","Flex","Box","Heading","Text","Table","Thead","Th","Tbody","Tr","Td","FormInput","FormLabel","IconButton","DeleteIcon","Select","Button","PlusIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"contact-import-mapping.js","sources":["../../../../src/contact-import/components/contact-import-mapping.tsx"],"sourcesContent":["import {\n Box,\n Button,\n Flex,\n FormInput,\n FormLabel,\n Heading,\n IconButton,\n Select,\n Table,\n Tbody,\n Td,\n Text,\n Th,\n Thead,\n Tr\n} from \"@sparrowengg/twigs-react\";\nimport { DeleteIcon, PlusIcon } from \"@sparrowengg/twigs-react-icons\";\nimport React, { useEffect, useRef } from \"react\";\nconst defaultFieldValue = {\n integrationField: null,\n surveySparrowField: \"\",\n property: \"custom\"\n};\n\nconst ContactImportMapping = ({\n contactImportField,\n setContactImportField,\n integrationName,\n contactProperties,\n}: any) => {\n const customPropertyRef = useRef<HTMLDivElement | null>(null);\n const initialRenderRef = useRef(true);\n const errorFieldRef = useRef(false);\n\n useEffect(() => {\n if (initialRenderRef.current) {\n //to skip scroll on initial mounting\n initialRenderRef.current = false;\n } else {\n if (customPropertyRef?.current) {\n customPropertyRef.current.scrollIntoView({\n behavior: \"smooth\",\n block: \"end\"\n });\n }\n }\n }, []);\n\n const customFieldHandler = (\n id: string | number,\n property: string,\n value: any\n ) => {\n setContactImportField({\n ...contactImportField,\n fields: contactImportField.fields.map((field: any) => {\n if (field.id === id) {\n return { ...field, [property]: value };\n } else {\n return { ...field };\n }\n })\n });\n };\n\n const updateSurveySparrowField = (\n value: any,\n id: string | number,\n manuallyMapped: boolean\n ) => {\n setContactImportField({\n ...contactImportField,\n fields: contactImportField?.fields.map((field: any) => {\n if (field.id === id) {\n return {\n ...field,\n surveySparrowField: value,\n ...(manuallyMapped && { mapped: manuallyMapped })\n };\n } else {\n return { ...field };\n }\n })\n });\n };\n\n const addCustomProperty = () => {\n setContactImportField({\n ...contactImportField,\n fields: [\n ...contactImportField.fields,\n {\n id: contactImportField.fields?.length\n ? contactImportField.fields[contactImportField.fields?.length - 1]\n .id + 1\n : 1,\n ...defaultFieldValue\n }\n ]\n });\n };\n\n return (\n <Flex justifyContent=\"center\">\n <Box css={{ marginTop: \"$40\", maxWidth: 1176, width: \"100%\" }}>\n <Box\n css={{\n paddingLeft: \"$28\"\n }}\n >\n <Heading size=\"h5\">Map Contact Properties</Heading>\n <Text css={{ marginTop: \"$4\", color: \"$neutral600\" }} size=\"md\">\n Review these mappings before importing. Unmapped columns will be\n ignored.\n </Text>\n </Box>\n <Box\n css={{\n height: \"calc(100vh - 241px)\",\n paddingTop: \"$16\",\n overflowY: \"auto\",\n position: \"relative\",\n background: \"$white900\",\n paddingLeft: \"$28\"\n }}\n >\n <Table\n css={{\n width: \"100%\",\n background: \"$white900\",\n borderRadius: \"5px\",\n borderCollapse: \"collapse\"\n }}\n >\n <Thead\n css={{\n zIndex: 5,\n position: \"sticky\",\n top: \"-31px\",\n \"& th\": {\n textAlign: \"left\",\n fontWeight: 700,\n paddingBlock: \"$6\",\n lineHeight: \"$sm\",\n background: \"$white900\",\n boxShadow: '0 1px 0 rgba(0,0,0,0.1)',\n borderBlock: \"$borderWidths$xs solid $neutral200\",\n }\n }}\n >\n <Th>{`${integrationName} Profile Fields Data`}</Th>\n <Th css={{ borderLeft: \"$borderWidths$xs solid $neutral100\" }}>SurveySparrow Mapping</Th>\n </Thead>\n <Tbody\n css={{\n \"& tr\": {\n borderBottom: \"$borderWidths$xs solid $neutral200\"\n }\n }}\n >\n {contactImportField.fields.map((field: any) => {\n const hasSurveyFieldValue = contactProperties.some(\n (contact: any) => contact.value === field.surveySparrowField\n );\n return (\n <Tr\n key={field.id}\n css={{\n position: \"relative\",\n \"& td\": {\n paddingBlock: \"$8 $12\",\n paddingInline: \"$6\",\n verticalAlign: \"top\"\n }\n }}\n >\n <Td\n css={{\n width: 560,\n \"& > p\": {\n lineHeight: \"$sm\",\n color: \"$neutral600\"\n }\n }}\n >\n {field.property !== \"custom\" ? (\n <>\n <Text\n size=\"sm\"\n css={{\n color: \"$neutral900 !important\"\n }}\n weight=\"medium\"\n >\n {(\n field?.integrationField?.charAt(0).toUpperCase() +\n field?.integrationField.slice(1)\n ).replace(\"_\", \" \")}\n </Text>\n {field?.sampleData.length ? (\n <>\n {field.sampleData.map((sample: any) => (\n <Text\n size=\"xs\"\n css={{\n color: \"$neutral600\",\n lineHeight: \"$xs !important\"\n }}\n >\n {sample.length > 40\n ? sample.slice(0, 40) + \"...\"\n : sample}\n </Text>\n ))}\n </>\n ) : null}\n </>\n ) : (\n <Box css={{ position: \"relative\" }}>\n <FormInput\n size=\"lg\"\n onChange={(event) =>\n customFieldHandler(\n field.id,\n \"integrationField\",\n event.currentTarget.value\n )\n }\n />\n <FormLabel\n css={{ marginTop: \"$4\", color: \"$neutral400\" }}\n >\n Enter the exact custom property name for accurate\n mapping. It is case-sensitive.\n </FormLabel>\n {field.property === \"custom\" ? (\n <IconButton\n css={{\n position: \"absolute\",\n top: \"0\",\n left: \"-70px\"\n }}\n size=\"lg\"\n variant=\"ghost\"\n color=\"secondary\"\n onClick={() => {\n setContactImportField({\n ...contactImportField,\n fields: contactImportField?.fields.filter((currentField: any) => currentField?.id !== field?.id)\n })\n }}\n icon={<DeleteIcon />}\n />\n ) : null}\n </Box>\n )}\n </Td>\n <Td\n css={{\n width: 560,\n borderLeft: \"$borderWidths$xs solid $neutral100\"\n }}\n >\n <>\n <Select\n size=\"lg\"\n placeholder=\"--Choose Property--\"\n value={\n field.surveySparrowField\n ? {\n label: contactProperties.find(\n (contact: any) =>\n contact.value === field.surveySparrowField\n )?.label,\n value: field.surveySparrowField\n }\n : null\n }\n options={contactProperties.filter(\n (contact: any) => contact.type !== \"DEPENDENT_FIELD\"\n )}\n onChange={(currentField: any) => {\n updateSurveySparrowField(\n currentField.value,\n field.id,\n true\n );\n }}\n css={{\n marginBottom:\n !hasSurveyFieldValue &&\n !field.surveySparrowFieldError &&\n field.property === \"custom\"\n ? \"$12\"\n : 0,\n ...(!field.surveySparrowField &&\n field.surveySparrowFieldError && {\n \"& .twigs-select__control, & .twigs-select__control:hover\":\n {\n boxShadow: \"0px 1.5px 0px 0px #f65633\",\n borderBottom: 0\n }\n })\n }}\n />\n {hasSurveyFieldValue ? (\n <FormLabel\n css={{\n color: field?.mapped ? \"$neutral600\" : \"#0F966C\",\n marginBlock: \"$4 $12\"\n }}\n size=\"xs\"\n >\n {field?.mapped\n ? \"Manually mapped by you\"\n : \"Automatically mapped\"}\n </FormLabel>\n ) : null}\n {!field.surveySparrowField &&\n field.surveySparrowFieldError && (\n <FormLabel\n css={{\n color: \"$negative500\",\n marginTop: \"$4\"\n }}\n size=\"xs\"\n >\n Please select the property\n </FormLabel>\n )}\n </>\n </Td>\n </Tr>\n );\n })}\n\n <Tr\n css={{\n borderBottom: \"none !important\",\n \"&:hover\": {\n background: \"$white900\"\n }\n }}\n >\n <Td colSpan={2}>\n <Button\n size=\"md\"\n variant=\"ghost\"\n leftIcon={<PlusIcon />}\n onClick={addCustomProperty}\n >\n Add Custom Property\n </Button>\n </Td>\n </Tr>\n </Tbody>\n </Table>\n </Box>\n </Box>\n </Flex>\n );\n};\n\nexport default ContactImportMapping;\n"],"names":["useRef","useEffect","Flex","Box","Heading","Text","Table","Thead","Th","Tbody","Tr","Td","FormInput","FormLabel","IconButton","DeleteIcon","Select","Button","PlusIcon"],"mappings":"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"}
|
|
@@ -88,10 +88,8 @@ const ContactImportHeader = ({
|
|
|
88
88
|
onSaveHandler,
|
|
89
89
|
isContactMappingPage,
|
|
90
90
|
navigateMappingPage,
|
|
91
|
-
contactImportField,
|
|
92
91
|
invitePortal
|
|
93
92
|
}) => {
|
|
94
|
-
console.log(contactImportField);
|
|
95
93
|
const [showImportModal, setShowImportModal] = React.useState(false);
|
|
96
94
|
return /* @__PURE__ */ React.createElement(
|
|
97
95
|
flex.Flex,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/contact-import/index.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 {\n ArrowLeftIcon,\n ChevronRightIcon,\n CloseIcon\n} from \"@sparrowengg/twigs-react-icons\";\nimport React, { useState } from \"react\";\nimport Arrow from \"../commons/icons/arrow\";\nimport ContactImportConfigure from \"./components/contact-import-configure\";\nimport ContactImportMapping from \"./components/contact-import-mapping\";\nimport ThemeWrapper from \"../commons/components/theme-wrapper\";\nimport { ContactImportProps, ContactImportHeaderProps } from \"./types\";\n\nexport const ContactImport = ({\n hasPreviousMapping,\n previousMappingHandler,\n onSaveHandler,\n isContactMappingPage,\n navigateMappingPage,\n contactImportField,\n setContactImportField,\n listSegmentOptions,\n integrationName,\n contactProperties,\n invitePortal\n}: ContactImportProps) => {\n return (\n <ThemeWrapper>\n <Box css={{ height: \"100vh\", width: \"100vw\" }}>\n <ContactImportHeader\n contactImportField={contactImportField}\n hasPreviousMapping={hasPreviousMapping}\n previousMappingHandler={previousMappingHandler}\n onSaveHandler={onSaveHandler}\n isContactMappingPage={isContactMappingPage}\n navigateMappingPage={navigateMappingPage}\n invitePortal={invitePortal}\n />\n {!isContactMappingPage ? (\n <ContactImportConfigure\n contactImportField={contactImportField}\n handleConfigureField={(value: any) => {\n setContactImportField({\n ...contactImportField,\n configure: { ...value }\n });\n navigateMappingPage(true);\n }}\n listSegmentOptions={listSegmentOptions}\n />\n ) : (\n <ContactImportMapping\n contactImportField={contactImportField}\n setContactImportField={setContactImportField}\n integrationName={integrationName}\n contactProperties={contactProperties}\n />\n )}\n </Box>\n </ThemeWrapper>\n );\n};\n\nconst ContactImportHeader = ({\n hasPreviousMapping,\n previousMappingHandler,\n onSaveHandler,\n isContactMappingPage,\n navigateMappingPage,\n contactImportField,\n invitePortal\n}: ContactImportHeaderProps) => {\n console.log(contactImportField);\n const [showImportModal, setShowImportModal] = useState(false);\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={() => previousMappingHandler()}\n color=\"default\"\n icon={<ArrowLeftIcon />}\n size=\"lg\"\n />\n <Heading size=\"h6\">New Contact Import</Heading>\n </Flex>\n <Flex\n alignItems=\"center\"\n gap=\"$4\"\n css={{\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={() => isContactMappingPage && navigateMappingPage(false)}\n >\n 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 Mapping\n </Button>\n </Flex>\n <Button\n size=\"lg\"\n onClick={() => setShowImportModal(true)}\n rightIcon={<ChevronRightIcon />}\n css={{ visibility: isContactMappingPage ? \"visible\" : \"hidden\" }}\n >\n Continue\n </Button>\n {showImportModal ? (\n <ContactImportModal\n invitePortal={invitePortal}\n onSaveHandler={() => onSaveHandler()}\n onCloseHandler={() => setShowImportModal(false)}\n />\n ) : null}\n </Flex>\n );\n};\n\nconst ContactImportModal = ({\n onCloseHandler,\n onSaveHandler,\n invitePortal\n}: {\n onCloseHandler: () => void;\n onSaveHandler: () => void;\n invitePortal: {\n hasInvitePortal: boolean;\n value: boolean | null;\n onChangeHandler: (value: any) => void;\n };\n}) => {\n const [inputValue, setInputValue] = useState(\"\");\n return (\n <Dialog open>\n <DialogContent\n css={{\n padding: 0,\n borderRadius: \"$3xl\",\n maxWidth: 600\n }}\n >\n <Flex\n alignItems=\"center\"\n justifyContent=\"space-between\"\n css={{\n padding: \"$8 $12\",\n borderBottom: \"$borderWidths$xs solid $neutral200\"\n }}\n >\n <Heading size=\"h6\" css={{ color: \"$neutral900\" }}>\n Import Configuration\n </Heading>\n <IconButton\n variant=\"ghost\"\n color=\"default\"\n icon={<CloseIcon />}\n size=\"lg\"\n css={{\n \"& svg\": {\n color: \"#64748B !important\"\n }\n }}\n onClick={() => onCloseHandler()}\n />\n </Flex>\n <Box\n css={{\n padding: \"$12\"\n }}\n >\n <FormInput\n label=\"Title of this import for future reference\"\n requiredIndicator\n value={inputValue}\n maxLength={30}\n max={30}\n showCount\n onChange={(event) => setInputValue(event.currentTarget.value)}\n size=\"lg\"\n />\n {invitePortal.hasInvitePortal ? (\n <Box css={{ marginTop: \"$12\" }}>\n <Checkbox\n checked={!!invitePortal.value}\n onChange={(value) => invitePortal.onChangeHandler(value)}\n >\n Invite to portal whenever a contact is created\n </Checkbox>\n </Box>\n ) : null}\n </Box>\n <Flex\n gap=\"$4\"\n css={{\n justifyContent: \"flex-end\",\n padding: \"$8 $12\"\n }}\n >\n <Button size=\"lg\" color=\"default\" onClick={() => onCloseHandler()}>\n Cancel\n </Button>\n <Button size=\"lg\" onClick={onSaveHandler}>\n Finish Import\n </Button>\n </Flex>\n </DialogContent>\n </Dialog>\n );\n};\n"],"names":["ThemeWrapper","Box","ContactImportConfigure","ContactImportMapping","useState","Flex","IconButton","ArrowLeftIcon","Heading","Button","Arrow","ChevronRightIcon","Dialog","DialogContent","CloseIcon","FormInput","Checkbox"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/contact-import/index.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 {\n ArrowLeftIcon,\n ChevronRightIcon,\n CloseIcon\n} from \"@sparrowengg/twigs-react-icons\";\nimport React, { useState } from \"react\";\nimport Arrow from \"../commons/icons/arrow\";\nimport ContactImportConfigure from \"./components/contact-import-configure\";\nimport ContactImportMapping from \"./components/contact-import-mapping\";\nimport ThemeWrapper from \"../commons/components/theme-wrapper\";\nimport { ContactImportProps, ContactImportHeaderProps } from \"./types\";\n\nexport const ContactImport = ({\n hasPreviousMapping,\n previousMappingHandler,\n onSaveHandler,\n isContactMappingPage,\n navigateMappingPage,\n contactImportField,\n setContactImportField,\n listSegmentOptions,\n integrationName,\n contactProperties,\n invitePortal\n}: ContactImportProps) => {\n return (\n <ThemeWrapper>\n <Box css={{ height: \"100vh\", width: \"100vw\" }}>\n <ContactImportHeader\n contactImportField={contactImportField}\n hasPreviousMapping={hasPreviousMapping}\n previousMappingHandler={previousMappingHandler}\n onSaveHandler={onSaveHandler}\n isContactMappingPage={isContactMappingPage}\n navigateMappingPage={navigateMappingPage}\n invitePortal={invitePortal}\n />\n {!isContactMappingPage ? (\n <ContactImportConfigure\n contactImportField={contactImportField}\n handleConfigureField={(value: any) => {\n setContactImportField({\n ...contactImportField,\n configure: { ...value }\n });\n navigateMappingPage(true);\n }}\n listSegmentOptions={listSegmentOptions}\n />\n ) : (\n <ContactImportMapping\n contactImportField={contactImportField}\n setContactImportField={setContactImportField}\n integrationName={integrationName}\n contactProperties={contactProperties}\n />\n )}\n </Box>\n </ThemeWrapper>\n );\n};\n\nconst ContactImportHeader = ({\n hasPreviousMapping,\n previousMappingHandler,\n onSaveHandler,\n isContactMappingPage,\n navigateMappingPage,\n invitePortal\n}: ContactImportHeaderProps) => {\n const [showImportModal, setShowImportModal] = useState(false);\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={() => previousMappingHandler()}\n color=\"default\"\n icon={<ArrowLeftIcon />}\n size=\"lg\"\n />\n <Heading size=\"h6\">New Contact Import</Heading>\n </Flex>\n <Flex\n alignItems=\"center\"\n gap=\"$4\"\n css={{\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={() => isContactMappingPage && navigateMappingPage(false)}\n >\n 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 Mapping\n </Button>\n </Flex>\n <Button\n size=\"lg\"\n onClick={() => setShowImportModal(true)}\n rightIcon={<ChevronRightIcon />}\n css={{ visibility: isContactMappingPage ? \"visible\" : \"hidden\" }}\n >\n Continue\n </Button>\n {showImportModal ? (\n <ContactImportModal\n invitePortal={invitePortal}\n onSaveHandler={() => onSaveHandler()}\n onCloseHandler={() => setShowImportModal(false)}\n />\n ) : null}\n </Flex>\n );\n};\n\nconst ContactImportModal = ({\n onCloseHandler,\n onSaveHandler,\n invitePortal\n}: {\n onCloseHandler: () => void;\n onSaveHandler: () => void;\n invitePortal: {\n hasInvitePortal: boolean;\n value: boolean | null;\n onChangeHandler: (value: any) => void;\n };\n}) => {\n const [inputValue, setInputValue] = useState(\"\");\n return (\n <Dialog open>\n <DialogContent\n css={{\n padding: 0,\n borderRadius: \"$3xl\",\n maxWidth: 600\n }}\n >\n <Flex\n alignItems=\"center\"\n justifyContent=\"space-between\"\n css={{\n padding: \"$8 $12\",\n borderBottom: \"$borderWidths$xs solid $neutral200\"\n }}\n >\n <Heading size=\"h6\" css={{ color: \"$neutral900\" }}>\n Import Configuration\n </Heading>\n <IconButton\n variant=\"ghost\"\n color=\"default\"\n icon={<CloseIcon />}\n size=\"lg\"\n css={{\n \"& svg\": {\n color: \"#64748B !important\"\n }\n }}\n onClick={() => onCloseHandler()}\n />\n </Flex>\n <Box\n css={{\n padding: \"$12\"\n }}\n >\n <FormInput\n label=\"Title of this import for future reference\"\n requiredIndicator\n value={inputValue}\n maxLength={30}\n max={30}\n showCount\n onChange={(event) => setInputValue(event.currentTarget.value)}\n size=\"lg\"\n />\n {invitePortal.hasInvitePortal ? (\n <Box css={{ marginTop: \"$12\" }}>\n <Checkbox\n checked={!!invitePortal.value}\n onChange={(value) => invitePortal.onChangeHandler(value)}\n >\n Invite to portal whenever a contact is created\n </Checkbox>\n </Box>\n ) : null}\n </Box>\n <Flex\n gap=\"$4\"\n css={{\n justifyContent: \"flex-end\",\n padding: \"$8 $12\"\n }}\n >\n <Button size=\"lg\" color=\"default\" onClick={() => onCloseHandler()}>\n Cancel\n </Button>\n <Button size=\"lg\" onClick={onSaveHandler}>\n Finish Import\n </Button>\n </Flex>\n </DialogContent>\n </Dialog>\n );\n};\n"],"names":["ThemeWrapper","Box","ContactImportConfigure","ContactImportMapping","useState","Flex","IconButton","ArrowLeftIcon","Heading","Button","Arrow","ChevronRightIcon","Dialog","DialogContent","CloseIcon","FormInput","Checkbox"],"mappings":"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"}
|
|
@@ -37,7 +37,8 @@ const Dashboard = ({
|
|
|
37
37
|
handleEditField,
|
|
38
38
|
handleDashboardPage,
|
|
39
39
|
deleteFieldHandler,
|
|
40
|
-
toggleDashboardField
|
|
40
|
+
toggleDashboardField,
|
|
41
|
+
hasDropdownComponents
|
|
41
42
|
}) => {
|
|
42
43
|
const isSingleAccountMappingCompleted = !hasMultiAccounts && !!(mappingFields == null ? void 0 : mappingFields.fields.length);
|
|
43
44
|
const isSingleAccountTriggerCompleted = !hasMultiAccounts && !!(triggerFields == null ? void 0 : triggerFields.length);
|
|
@@ -56,7 +57,7 @@ const Dashboard = ({
|
|
|
56
57
|
align: "start",
|
|
57
58
|
css: { maxWidth: 240, zIndex: 10 }
|
|
58
59
|
},
|
|
59
|
-
/* @__PURE__ */ React.createElement(
|
|
60
|
+
hasDropdownComponents.trigger ? /* @__PURE__ */ React.createElement(
|
|
60
61
|
DropdownItem,
|
|
61
62
|
{
|
|
62
63
|
icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 24, color: "#6A6A6A" }),
|
|
@@ -65,8 +66,8 @@ const Dashboard = ({
|
|
|
65
66
|
isDisabled: isSingleAccountTriggerCompleted,
|
|
66
67
|
onClickHandler: () => handleConfigurationType("TRIGGER")
|
|
67
68
|
}
|
|
68
|
-
),
|
|
69
|
-
/* @__PURE__ */ React.createElement(
|
|
69
|
+
) : null,
|
|
70
|
+
hasDropdownComponents.mapping ? /* @__PURE__ */ React.createElement(
|
|
70
71
|
DropdownItem,
|
|
71
72
|
{
|
|
72
73
|
icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 24, color: "#6A6A6A" }),
|
|
@@ -75,7 +76,7 @@ const Dashboard = ({
|
|
|
75
76
|
description: `Create/Update record in ${integrationName} from survey responses`,
|
|
76
77
|
onClickHandler: () => handleConfigurationType("MAPPING")
|
|
77
78
|
}
|
|
78
|
-
)
|
|
79
|
+
) : null
|
|
79
80
|
)))
|
|
80
81
|
), hasMultiAccounts ? /* @__PURE__ */ React.createElement(
|
|
81
82
|
MultiAccountDashboard,
|
|
@@ -278,7 +279,16 @@ const MultiAccountFallback = ({
|
|
|
278
279
|
},
|
|
279
280
|
"Creating one is as easy as a breeze. Just a click away to get started."
|
|
280
281
|
),
|
|
281
|
-
/* @__PURE__ */ React.createElement(
|
|
282
|
+
/* @__PURE__ */ React.createElement(
|
|
283
|
+
button.Button,
|
|
284
|
+
{
|
|
285
|
+
size: "lg",
|
|
286
|
+
leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null),
|
|
287
|
+
variant: "outline",
|
|
288
|
+
onClick: onClickHandler
|
|
289
|
+
},
|
|
290
|
+
`New ${title}`
|
|
291
|
+
)
|
|
282
292
|
);
|
|
283
293
|
};
|
|
284
294
|
const SingleAccountDashboard = ({
|
|
@@ -859,187 +869,179 @@ const DashboardItem = ({
|
|
|
859
869
|
}
|
|
860
870
|
return field;
|
|
861
871
|
};
|
|
862
|
-
return /* @__PURE__ */ React.createElement(
|
|
872
|
+
return /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(
|
|
863
873
|
flex.Flex,
|
|
864
874
|
{
|
|
865
|
-
|
|
866
|
-
|
|
875
|
+
css: {
|
|
876
|
+
border: isMappingDisplayed ? "$borderWidths$xs solid $black400" : "$borderWidths$xs solid $neutral200",
|
|
877
|
+
borderRadius: isMappingDisplayed ? "$2xl $2xl 0 0" : "$2xl",
|
|
878
|
+
padding: "$10 $12",
|
|
879
|
+
width: "100%",
|
|
880
|
+
backgroundColor: isMappingDisplayed ? "rgba(100, 116, 139, 0.04)" : "$white900"
|
|
881
|
+
},
|
|
882
|
+
justifyContent: "space-between",
|
|
883
|
+
alignItems: "center"
|
|
867
884
|
},
|
|
868
885
|
/* @__PURE__ */ React.createElement(
|
|
869
886
|
flex.Flex,
|
|
870
887
|
{
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
888
|
+
alignItems: "center",
|
|
889
|
+
gap: "$4",
|
|
890
|
+
css: { cursor: "pointer" },
|
|
891
|
+
onClick: () => setIsMappingDisplayed(!isMappingDisplayed)
|
|
892
|
+
},
|
|
893
|
+
isMappingDisplayed ? /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, { size: 40, color: "#848484" }) : /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, { size: 40, color: "#848484" }),
|
|
894
|
+
/* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, icon, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "bold" }, heading), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, description)))
|
|
895
|
+
),
|
|
896
|
+
/* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(
|
|
897
|
+
_switch.Switch,
|
|
898
|
+
{
|
|
899
|
+
size: "md",
|
|
900
|
+
checked: isEnabled,
|
|
901
|
+
onChange: (value) => toggleDashboardField(id, value)
|
|
902
|
+
}
|
|
903
|
+
), /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
|
|
904
|
+
iconButton.IconButton,
|
|
905
|
+
{
|
|
906
|
+
variant: "ghost",
|
|
907
|
+
color: "default",
|
|
908
|
+
size: "lg",
|
|
909
|
+
icon: /* @__PURE__ */ React.createElement(ellipsisVertical.EllipsisVerticalIcon, null)
|
|
910
|
+
}
|
|
911
|
+
)), /* @__PURE__ */ React.createElement(
|
|
912
|
+
dropdown.DropdownMenuContent,
|
|
913
|
+
{
|
|
914
|
+
css: { minWidth: 180, zIndex: 10 },
|
|
915
|
+
sideOffset: 4,
|
|
916
|
+
align: "end"
|
|
880
917
|
},
|
|
881
918
|
/* @__PURE__ */ React.createElement(
|
|
882
|
-
|
|
919
|
+
dropdown.DropdownMenuItem,
|
|
883
920
|
{
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
921
|
+
onClick: () => {
|
|
922
|
+
handleEditField({
|
|
923
|
+
type,
|
|
924
|
+
values: fields,
|
|
925
|
+
id
|
|
926
|
+
});
|
|
927
|
+
handleDashboardPage(false, type);
|
|
928
|
+
}
|
|
888
929
|
},
|
|
889
|
-
|
|
890
|
-
/* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, icon, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "bold" }, heading), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, description)))
|
|
930
|
+
/* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(pencil.PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Edit"))
|
|
891
931
|
),
|
|
892
|
-
/* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
{
|
|
902
|
-
variant: "ghost",
|
|
903
|
-
color: "default",
|
|
904
|
-
size: "lg",
|
|
905
|
-
icon: /* @__PURE__ */ React.createElement(ellipsisVertical.EllipsisVerticalIcon, null)
|
|
906
|
-
}
|
|
907
|
-
)), /* @__PURE__ */ React.createElement(
|
|
908
|
-
dropdown.DropdownMenuContent,
|
|
909
|
-
{
|
|
910
|
-
css: { minWidth: 180, zIndex: 10 },
|
|
911
|
-
sideOffset: 4,
|
|
912
|
-
align: "end"
|
|
913
|
-
},
|
|
914
|
-
/* @__PURE__ */ React.createElement(
|
|
915
|
-
dropdown.DropdownMenuItem,
|
|
916
|
-
{
|
|
917
|
-
onClick: () => {
|
|
918
|
-
handleEditField({
|
|
919
|
-
type,
|
|
920
|
-
values: fields,
|
|
921
|
-
id
|
|
922
|
-
});
|
|
923
|
-
handleDashboardPage(false, type);
|
|
924
|
-
}
|
|
925
|
-
},
|
|
926
|
-
/* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(pencil.PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Edit"))
|
|
927
|
-
),
|
|
928
|
-
/* @__PURE__ */ React.createElement(dropdown.DropdownMenuItem, { onClick: () => deleteFieldHandler(id) }, /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete")))
|
|
929
|
-
)))
|
|
930
|
-
),
|
|
932
|
+
/* @__PURE__ */ React.createElement(dropdown.DropdownMenuItem, { onClick: () => deleteFieldHandler(id) }, /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete")))
|
|
933
|
+
)))
|
|
934
|
+
), /* @__PURE__ */ React.createElement(
|
|
935
|
+
box.Box,
|
|
936
|
+
{
|
|
937
|
+
css: {
|
|
938
|
+
height: isMappingDisplayed ? "100%" : 0
|
|
939
|
+
}
|
|
940
|
+
},
|
|
931
941
|
/* @__PURE__ */ React.createElement(
|
|
932
942
|
box.Box,
|
|
933
943
|
{
|
|
934
944
|
css: {
|
|
935
|
-
|
|
945
|
+
borderInline: "$borderWidths$xs solid $black400",
|
|
946
|
+
maxHeight: 432,
|
|
947
|
+
height: "100%",
|
|
948
|
+
position: "relative",
|
|
949
|
+
overflow: "auto"
|
|
936
950
|
}
|
|
937
951
|
},
|
|
938
|
-
/* @__PURE__ */ React.createElement(
|
|
939
|
-
|
|
952
|
+
(fields == null ? void 0 : fields.length) ? /* @__PURE__ */ React.createElement(table.Table, { css: { borderCollapse: "collapse", width: "100%" } }, /* @__PURE__ */ React.createElement(
|
|
953
|
+
table.Thead,
|
|
940
954
|
{
|
|
941
955
|
css: {
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
956
|
+
background: "$white900",
|
|
957
|
+
"& th": {
|
|
958
|
+
padding: "$7 $8",
|
|
959
|
+
fontSize: "$sm",
|
|
960
|
+
lineHeight: "$sm",
|
|
961
|
+
textAlign: "left",
|
|
962
|
+
borderInline: "none"
|
|
963
|
+
},
|
|
964
|
+
borderBottom: "$borderWidths$xs solid $neutral100",
|
|
965
|
+
position: "sticky",
|
|
966
|
+
top: 0,
|
|
967
|
+
zIndex: 10
|
|
947
968
|
}
|
|
948
969
|
},
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
padding: "$7 $8",
|
|
956
|
-
fontSize: "$sm",
|
|
957
|
-
lineHeight: "$sm",
|
|
958
|
-
textAlign: "left",
|
|
959
|
-
borderInline: "none"
|
|
960
|
-
},
|
|
961
|
-
borderBottom: "$borderWidths$xs solid $neutral100",
|
|
962
|
-
position: "sticky",
|
|
963
|
-
top: 0,
|
|
964
|
-
zIndex: 10
|
|
965
|
-
}
|
|
966
|
-
},
|
|
967
|
-
/* @__PURE__ */ React.createElement(table.Th, { css: { paddingLeft: "$38 !important" } }, "Type"),
|
|
968
|
-
/* @__PURE__ */ React.createElement(table.Th, null, "SurveySparrow Field"),
|
|
969
|
-
/* @__PURE__ */ React.createElement(table.Th, null, `${integrationName} Field`),
|
|
970
|
-
/* @__PURE__ */ React.createElement(table.Th, { css: { paddingRight: "$20 !important" } }, "Default Value")
|
|
971
|
-
), /* @__PURE__ */ React.createElement(
|
|
972
|
-
table.Tbody,
|
|
973
|
-
{
|
|
974
|
-
css: {
|
|
975
|
-
"& tr:last-child": {
|
|
976
|
-
borderBottom: 0,
|
|
977
|
-
"& td": {
|
|
978
|
-
borderBottom: 0
|
|
979
|
-
}
|
|
980
|
-
}
|
|
981
|
-
}
|
|
982
|
-
},
|
|
983
|
-
fields.map((field) => {
|
|
984
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
985
|
-
return /* @__PURE__ */ React.createElement(
|
|
986
|
-
table.Tr,
|
|
987
|
-
{
|
|
988
|
-
css: {
|
|
989
|
-
borderBottom: "$borderWidths$xs solid $neutral100",
|
|
990
|
-
"& td": {
|
|
991
|
-
padding: "$7 $8",
|
|
992
|
-
fontSize: "$sm",
|
|
993
|
-
lineHeight: "$sm",
|
|
994
|
-
borderInline: "none"
|
|
995
|
-
},
|
|
996
|
-
"& td:first-child": {
|
|
997
|
-
paddingLeft: "$38 !important"
|
|
998
|
-
},
|
|
999
|
-
"& td:last-child": {
|
|
1000
|
-
paddingRight: "$20 !important"
|
|
1001
|
-
}
|
|
1002
|
-
}
|
|
1003
|
-
},
|
|
1004
|
-
/* @__PURE__ */ React.createElement(table.Td, null, (_b = (_a = field.mappedType) == null ? void 0 : _a.label) != null ? _b : "--"),
|
|
1005
|
-
/* @__PURE__ */ React.createElement(table.Td, null, (_d = (_c = field.surveySparrowField) == null ? void 0 : _c.label) != null ? _d : "--"),
|
|
1006
|
-
/* @__PURE__ */ React.createElement(table.Td, null, (_f = (_e = field.integrationField) == null ? void 0 : _e.label) != null ? _f : "--"),
|
|
1007
|
-
/* @__PURE__ */ React.createElement(table.Td, null, (_g = getDefaultFieldValue(field.defaultValue)) != null ? _g : "--")
|
|
1008
|
-
);
|
|
1009
|
-
})
|
|
1010
|
-
)) : null
|
|
1011
|
-
),
|
|
1012
|
-
isMappingDisplayed && /* @__PURE__ */ React.createElement(
|
|
1013
|
-
box.Box,
|
|
970
|
+
/* @__PURE__ */ React.createElement(table.Th, { css: { paddingLeft: "$38 !important" } }, "Type"),
|
|
971
|
+
/* @__PURE__ */ React.createElement(table.Th, null, "SurveySparrow Field"),
|
|
972
|
+
/* @__PURE__ */ React.createElement(table.Th, null, `${integrationName} Field`),
|
|
973
|
+
/* @__PURE__ */ React.createElement(table.Th, { css: { paddingRight: "$20 !important" } }, "Default Value")
|
|
974
|
+
), /* @__PURE__ */ React.createElement(
|
|
975
|
+
table.Tbody,
|
|
1014
976
|
{
|
|
1015
977
|
css: {
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
978
|
+
"& tr:last-child": {
|
|
979
|
+
borderBottom: 0,
|
|
980
|
+
"& td": {
|
|
981
|
+
borderBottom: 0
|
|
982
|
+
}
|
|
983
|
+
}
|
|
1020
984
|
}
|
|
1021
985
|
},
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
986
|
+
fields.map((field) => {
|
|
987
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
988
|
+
return /* @__PURE__ */ React.createElement(
|
|
989
|
+
table.Tr,
|
|
990
|
+
{
|
|
991
|
+
css: {
|
|
992
|
+
borderBottom: "$borderWidths$xs solid $neutral100",
|
|
993
|
+
"& td": {
|
|
994
|
+
padding: "$7 $8",
|
|
995
|
+
fontSize: "$sm",
|
|
996
|
+
lineHeight: "$sm",
|
|
997
|
+
borderInline: "none"
|
|
998
|
+
},
|
|
999
|
+
"& td:first-child": {
|
|
1000
|
+
paddingLeft: "$38 !important"
|
|
1001
|
+
},
|
|
1002
|
+
"& td:last-child": {
|
|
1003
|
+
paddingRight: "$20 !important"
|
|
1004
|
+
}
|
|
1005
|
+
}
|
|
1033
1006
|
},
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1007
|
+
/* @__PURE__ */ React.createElement(table.Td, null, (_b = (_a = field.mappedType) == null ? void 0 : _a.label) != null ? _b : "--"),
|
|
1008
|
+
/* @__PURE__ */ React.createElement(table.Td, null, (_d = (_c = field.surveySparrowField) == null ? void 0 : _c.label) != null ? _d : "--"),
|
|
1009
|
+
/* @__PURE__ */ React.createElement(table.Td, null, (_f = (_e = field.integrationField) == null ? void 0 : _e.label) != null ? _f : "--"),
|
|
1010
|
+
/* @__PURE__ */ React.createElement(table.Td, null, (_g = getDefaultFieldValue(field.defaultValue)) != null ? _g : "--")
|
|
1011
|
+
);
|
|
1012
|
+
})
|
|
1013
|
+
)) : null
|
|
1014
|
+
),
|
|
1015
|
+
isMappingDisplayed && /* @__PURE__ */ React.createElement(
|
|
1016
|
+
box.Box,
|
|
1017
|
+
{
|
|
1018
|
+
css: {
|
|
1019
|
+
padding: "$8 $32",
|
|
1020
|
+
border: "$borderWidths$xs solid $black400",
|
|
1021
|
+
borderRadius: "0 0 $2xl $2xl",
|
|
1022
|
+
height: "100%"
|
|
1023
|
+
}
|
|
1024
|
+
},
|
|
1025
|
+
/* @__PURE__ */ React.createElement(
|
|
1026
|
+
button.Button,
|
|
1027
|
+
{
|
|
1028
|
+
size: "sm",
|
|
1029
|
+
onClick: () => {
|
|
1030
|
+
handleEditField({
|
|
1031
|
+
type,
|
|
1032
|
+
values: fields,
|
|
1033
|
+
id
|
|
1034
|
+
});
|
|
1035
|
+
handleDashboardPage(false, type);
|
|
1037
1036
|
},
|
|
1038
|
-
|
|
1039
|
-
|
|
1037
|
+
leftIcon: /* @__PURE__ */ React.createElement(pencil.PencilIcon, null),
|
|
1038
|
+
color: "primary",
|
|
1039
|
+
variant: "ghost"
|
|
1040
|
+
},
|
|
1041
|
+
`Edit ${heading}`
|
|
1040
1042
|
)
|
|
1041
1043
|
)
|
|
1042
|
-
);
|
|
1044
|
+
));
|
|
1043
1045
|
};
|
|
1044
1046
|
const DropdownItem = ({
|
|
1045
1047
|
icon,
|