@bigbinary/neeto-message-templates-frontend 1.3.10 → 1.4.0

package/dist/SendToApiPane.js

@@ -8,73 +8,74 @@ import Typography from '@bigbinary/neetoui/Typography';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import Input from '@bigbinary/neetoui/formik/Input';
 import NeetoUIForm from '@bigbinary/neetoui/formik/Form';
-import { map, unless, path, omit, mergeDeepLeft, modify, equals } from 'ramda';
+import { equals, modify } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import { V as VALID_URL_REGEX, a as ADDITIONAL_DATA_INITIAL_VALUE, S as SAMPLE_URL, K as KeyValuePairs, r as rejectEmptyKeyValuePairs, b as API_TEMPLATE_TYPE } from './utils-oljkG5EG.js';
-import { S as SaveAsTemplate, a as areValuesEqual } from './utils-CdkVjz8p.js';
+import { V as VALID_URL_REGEX, C as CUSTOM_HEADERS_INITIAL_VALUE, d as buildHelpPopoverProps, S as SAMPLE_URL, c as CustomHeaders, J as JsonEditor, r as rejectEmptyKeyValuePairs, a as API_TEMPLATE_TYPE } from './JsonEditor-ChlZYDDV.js';
+import { S as SaveAsTemplate, a as areValuesEqual } from './utils-o_45ksFf.js';
 import { b as useFetchTemplates } from './useTemplatesApi-D63swqeh.js';
 import { t } from 'i18next';
 import * as yup from 'yup';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import 'react';
 import 'formik';
+import '@bigbinary/neetoui/formik/Switch';
 import '@bigbinary/neeto-commons-frontend/react-utils';
 import '@bigbinary/neeto-icons/Delete';
 import '@bigbinary/neetoui/Button';
+import '@babel/runtime/helpers/slicedToArray';
+import '@monaco-editor/react';
+import '@bigbinary/neeto-icons/Help';
+import '@bigbinary/neeto-molecules/DynamicVariables';
 import '@bigbinary/neetoui/Label';
-import 'react';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import 'classnames';
-import '@bigbinary/neetoui/formik/Switch';
+import './inject-css-DmrvuTKK.js';
 import '@tanstack/react-query';
 import 'axios';
 import 'qs';
 
 var SEND_TO_API_FORM_INITIAL_VALUES = {
   endpoint: "",
-  additionalData: [ADDITIONAL_DATA_INITIAL_VALUE],
+  enableCustomHeaders: false,
+  customHeaders: [CUSTOM_HEADERS_INITIAL_VALUE],
+  body: "{}",
   shouldSaveAsTemplate: false,
   templateName: ""
 };
 var SEND_TO_API_FORM_VALIDATION_SCHEMA = yup.object({
-  endpoint: yup.string().required(t("neetoMessageTemplate.api.validation.endpointPresence")).matches(VALID_URL_REGEX, t("neetoMessageTemplate.api.validation.validEndpoint")),
-  additionalData: yup.array().of(yup.object({
-    key: yup.string(),
-    value: yup.string()
-  })),
-  templateName: yup.string().when("shouldSaveAsTemplate", {
-    is: true,
-    then: yup.string().required(t("neetoMessageTemplate.template.validation.requiredEntity", {
-      entity: t("neetoMessageTemplate.template.templateName")
-    }))
+  endpoint: yup.string().trim().required(t("neetoMessageTemplate.api.validation.endpointPresence")).matches(VALID_URL_REGEX, t("neetoMessageTemplate.api.validation.validEndpoint")),
+  body: yup.string().trim().required(t("neetoMessageTemplate.validations.requiredEntity", {
+    entity: t("neetoMessageTemplate.template.body")
+  })).test("is-not-empty", t("neetoMessageTemplate.validations.requiredEntity", {
+    entity: t("neetoMessageTemplate.template.body")
+  }), function (value) {
+    return isPresent(value);
+  }).test("is-valid-json", t("neetoMessageTemplate.api.validation.invalidJsonBody"), function (value) {
+    try {
+      JSON.parse(value);
+      return true;
+    } catch (_unused) {
+      return false;
+    }
   })
 });
-var SEND_TO_API_HELP_POPOVER_PROPS = {
-  sendToApi: {
-    description: t("neetoMessageTemplate.api.helpPopovers.sendToApi.description"),
-    helpLinkProps: {
-      "data-cy": "send-to-api-action-help-link"
-    },
-    popoverProps: {
-      position: "top"
-    }
-  },
-  additionalData: {
-    description: t("neetoMessageTemplate.api.helpPopovers.additionalData.description"),
-    helpLinkProps: {
-      label: t("neetoMessageTemplate.template.viewHelpArticle"),
-      "data-cy": "send-to-api-additional-data-help-link"
-    },
-    position: "top"
-  }
-};
 
-var sanitizeHelpPopoverProps = map(unless(path(["helpLinkProps", "href"]), omit(["helpLinkProps"])));
-var formatAdditionalData = function formatAdditionalData(additionalData) {
-  return isPresent(additionalData) ? additionalData : [ADDITIONAL_DATA_INITIAL_VALUE];
+var formatCustomHeaders = function formatCustomHeaders(customHeaders) {
+  return isPresent(customHeaders) ? customHeaders : [CUSTOM_HEADERS_INITIAL_VALUE];
 };
-var buildHelpPopoverProps = function buildHelpPopoverProps(popoverProps) {
-  var combinedProps = mergeDeepLeft(popoverProps, SEND_TO_API_HELP_POPOVER_PROPS);
-  return sanitizeHelpPopoverProps(combinedProps);
+var areHeadersSame = function areHeadersSame(enableCustomHeaders, customHeaders) {
+  var template = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var templateHasCustomHeaders = template.enableCustomHeaders,
+    templateHeaders = template.customHeaders;
+  if (!enableCustomHeaders && !templateHasCustomHeaders) return true;
+  if (enableCustomHeaders !== templateHasCustomHeaders) return false;
+  return equals(customHeaders, templateHeaders);
+};
+var isBodyAvailable = function isBodyAvailable(body) {
+  try {
+    var data = JSON.parse(body);
+    return isPresent(data);
+  } catch (_unused) {
+    return false;
+  }
 };
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -85,6 +86,7 @@ var SendToApiPane = function SendToApiPane(props) {
   return /*#__PURE__*/jsx(Pane, {
     isOpen: isOpen,
     onClose: onClose,
+    size: "large",
     children: function children(paneProps) {
       return /*#__PURE__*/jsx(SendToApiForm, _objectSpread({}, _objectSpread(_objectSpread({}, props), {}, {
         paneProps: paneProps
@@ -97,6 +99,7 @@ var SendToApiForm = function SendToApiForm(_ref) {
     onClose = _ref.onClose,
     onSubmit = _ref.onSubmit,
     isSubmitting = _ref.isSubmitting,
+    templateVariables = _ref.templateVariables,
     _ref$canManageTemplat = _ref.canManageTemplates,
     canManageTemplates = _ref$canManageTemplat === void 0 ? true : _ref$canManageTemplat,
     _ref$helpPopoverProps = _ref.helpPopoverProps,
@@ -119,28 +122,32 @@ var SendToApiForm = function SendToApiForm(_ref) {
     var template = findBy({
       id: option.value
     }, templates);
-    setValues(_objectSpread(_objectSpread({}, values), modify("additionalData", formatAdditionalData, template)));
+    setValues(_objectSpread(_objectSpread({}, values), modify("customHeaders", formatCustomHeaders, template)));
   };
   var handleSubmit = function handleSubmit(formValues) {
-    var additionalDataModifiedFormValues = modify("additionalData", rejectEmptyKeyValuePairs, formValues);
-    onSubmit(additionalDataModifiedFormValues);
+    var customHeadersModifiedFormValues = modify("customHeaders", rejectEmptyKeyValuePairs, formValues);
+    onSubmit(customHeadersModifiedFormValues);
   };
   var shouldShowSaveAsTemplate = function shouldShowSaveAsTemplate() {
     var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       id = _ref2.id,
       endpoint = _ref2.endpoint,
-      additionalData = _ref2.additionalData;
+      enableCustomHeaders = _ref2.enableCustomHeaders,
+      _ref2$customHeaders = _ref2.customHeaders,
+      customHeaders = _ref2$customHeaders === void 0 ? [CUSTOM_HEADERS_INITIAL_VALUE] : _ref2$customHeaders,
+      body = _ref2.body;
     var template = findBy({
       id: id
     }, templates);
-    var hasContent = isPresent(endpoint) || isPresent(rejectEmptyKeyValuePairs(additionalData));
-    var isContentDifferentFromTemplate = !(areValuesEqual(template === null || template === void 0 ? void 0 : template.endpoint, endpoint) && equals(template === null || template === void 0 ? void 0 : template.additionalData, additionalData));
+    var hasContent = isPresent(endpoint) || isPresent(rejectEmptyKeyValuePairs(customHeaders)) || isBodyAvailable(body);
+    var isContentDifferentFromTemplate = !(areValuesEqual(template === null || template === void 0 ? void 0 : template.endpoint, endpoint) && areHeadersSame(enableCustomHeaders, customHeaders, template) && equals(template === null || template === void 0 ? void 0 : template.body, body));
     return hasContent && isContentDifferentFromTemplate;
   };
   var isTemplateSelectionEnabled = isPresent(templates);
   var _buildHelpPopoverProp = buildHelpPopoverProps(helpPopoverProps),
     sendToApiHelpPopoverProps = _buildHelpPopoverProp.sendToApi,
-    additionalDataHelpPopoverProps = _buildHelpPopoverProp.additionalData;
+    customHeadersHelpPopoverProps = _buildHelpPopoverProp.customHeaders,
+    bodyHelpPopoverProps = _buildHelpPopoverProp.body;
   if (isLoadingTemplates) {
     return /*#__PURE__*/jsx("div", {
       className: "flex h-full w-full items-center justify-center",
@@ -168,7 +175,7 @@ var SendToApiForm = function SendToApiForm(_ref) {
         return /*#__PURE__*/jsxs(Fragment, {
           children: [/*#__PURE__*/jsx(Pane.Body, {
             children: /*#__PURE__*/jsxs("div", {
-              className: "w-full space-y-5",
+              className: "w-full space-y-5 mb-10",
               children: [isTemplateSelectionEnabled && /*#__PURE__*/jsx(Select, {
                 innerRef: setFocusField,
                 isLoading: isLoadingTemplates,
@@ -187,15 +194,13 @@ var SendToApiForm = function SendToApiForm(_ref) {
                 name: "endpoint",
                 placeholder: SAMPLE_URL,
                 ref: isTemplateSelectionEnabled ? null : setFocusField
-              }), /*#__PURE__*/jsx(KeyValuePairs, {
-                label: t("neetoMessageTemplate.api.additionalData"),
-                name: "additionalData",
-                labelProps: {
-                  className: "ml-2",
-                  helpIconProps: {
-                    popoverProps: additionalDataHelpPopoverProps
-                  }
-                }
+              }), /*#__PURE__*/jsx(CustomHeaders, {
+                helpPopoverProps: customHeadersHelpPopoverProps
+              }), /*#__PURE__*/jsx(JsonEditor, {
+                templateVariables: templateVariables,
+                helpPopoverProps: bodyHelpPopoverProps,
+                initialValue: values.body,
+                name: "body"
               }), canManageTemplates && shouldShowSaveAsTemplate(values) && /*#__PURE__*/jsx(SaveAsTemplate, {})]
             })
           }), /*#__PURE__*/jsx(Pane.Footer, {

package/dist/SendToApiPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"SendToApiPane.js","sources":["../app/javascript/src/components/Api/SendToApiPane/constants.js","../app/javascript/src/components/Api/SendToApiPane/utils.js","../app/javascript/src/components/Api/SendToApiPane/index.jsx"],"sourcesContent":["import { t } from \"i18next\";\nimport * as yup from \"yup\";\n\nimport { ADDITIONAL_DATA_INITIAL_VALUE, VALID_URL_REGEX } from \"../constants\";\n\nexport const SEND_TO_API_FORM_INITIAL_VALUES = {\n  endpoint: \"\",\n  additionalData: [ADDITIONAL_DATA_INITIAL_VALUE],\n  shouldSaveAsTemplate: false,\n  templateName: \"\",\n};\n\nexport const SEND_TO_API_FORM_VALIDATION_SCHEMA = yup.object({\n  endpoint: yup\n    .string()\n    .required(t(\"neetoMessageTemplate.api.validation.endpointPresence\"))\n    .matches(\n      VALID_URL_REGEX,\n      t(\"neetoMessageTemplate.api.validation.validEndpoint\")\n    ),\n  additionalData: yup\n    .array()\n    .of(yup.object({ key: yup.string(), value: yup.string() })),\n  templateName: yup.string().when(\"shouldSaveAsTemplate\", {\n    is: true,\n    then: yup.string().required(\n      t(\"neetoMessageTemplate.template.validation.requiredEntity\", {\n        entity: t(\"neetoMessageTemplate.template.templateName\"),\n      })\n    ),\n  }),\n});\n\nexport const SEND_TO_API_HELP_POPOVER_PROPS = {\n  sendToApi: {\n    description: t(\n      \"neetoMessageTemplate.api.helpPopovers.sendToApi.description\"\n    ),\n    helpLinkProps: { \"data-cy\": \"send-to-api-action-help-link\" },\n    popoverProps: { position: \"top\" },\n  },\n  additionalData: {\n    description: t(\n      \"neetoMessageTemplate.api.helpPopovers.additionalData.description\"\n    ),\n    helpLinkProps: {\n      label: t(\"neetoMessageTemplate.template.viewHelpArticle\"),\n      \"data-cy\": \"send-to-api-additional-data-help-link\",\n    },\n    position: \"top\",\n  },\n};\n","import { isPresent } from \"neetocist\";\nimport { map, mergeDeepLeft, omit, path, unless } from \"ramda\";\n\nimport { SEND_TO_API_HELP_POPOVER_PROPS } from \"./constants\";\n\nimport { ADDITIONAL_DATA_INITIAL_VALUE } from \"../constants\";\n\nconst sanitizeHelpPopoverProps = map(\n  unless(path([\"helpLinkProps\", \"href\"]), omit([\"helpLinkProps\"]))\n);\n\nexport const formatAdditionalData = additionalData =>\n  isPresent(additionalData) ? additionalData : [ADDITIONAL_DATA_INITIAL_VALUE];\n\nexport const buildHelpPopoverProps = popoverProps => {\n  const combinedProps = mergeDeepLeft(\n    popoverProps,\n    SEND_TO_API_HELP_POPOVER_PROPS\n  );\n\n  return sanitizeHelpPopoverProps(combinedProps);\n};\n","import { findBy, isPresent, renameKeys } from \"neetocist\";\nimport HelpPopover from \"neetomolecules/HelpPopover\";\nimport { Pane, Select, Spinner, Typography } from \"neetoui\";\nimport { ActionBlock, Input, Form as NeetoUIForm } from \"neetoui/formik\";\nimport { equals, modify } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { SAMPLE_URL } from \"components/Api/ApiTemplates/constants\";\nimport { API_TEMPLATE_TYPE } from \"components/Api/constants\";\nimport { rejectEmptyKeyValuePairs } from \"components/Api/utils\";\nimport KeyValuePairs from \"components/commons/KeyValuePairs\";\nimport SaveAsTemplate from \"components/commons/SaveAsTemplate\";\nimport { areValuesEqual } from \"components/utils\";\nimport { useFetchTemplates } from \"hooks/reactQuery/useTemplatesApi\";\n\nimport {\n  SEND_TO_API_FORM_INITIAL_VALUES,\n  SEND_TO_API_FORM_VALIDATION_SCHEMA,\n} from \"./constants\";\nimport { buildHelpPopoverProps, formatAdditionalData } from \"./utils\";\n\nconst SendToApiPane = props => {\n  const { isOpen, onClose } = props;\n\n  return (\n    <Pane {...{ isOpen, onClose }}>\n      {paneProps => <SendToApiForm {...{ ...props, paneProps }} />}\n    </Pane>\n  );\n};\n\nconst SendToApiForm = ({\n  ownerId,\n  onClose,\n  onSubmit,\n  isSubmitting,\n  canManageTemplates = true,\n  helpPopoverProps = {},\n  paneProps: { setFocusField },\n}) => {\n  const { t } = useTranslation();\n\n  const { data: { templates = [] } = {}, isLoading: isLoadingTemplates } =\n    useFetchTemplates({\n      status: \"active\",\n      templateType: API_TEMPLATE_TYPE,\n      ownerId,\n    });\n\n  const handleTemplateChange = (setValues, values, option) => {\n    if (!option) return;\n\n    const template = findBy({ id: option.value }, templates);\n\n    setValues({\n      ...values,\n      ...modify(\"additionalData\", formatAdditionalData, template),\n    });\n  };\n\n  const handleSubmit = formValues => {\n    const additionalDataModifiedFormValues = modify(\n      \"additionalData\",\n      rejectEmptyKeyValuePairs,\n      formValues\n    );\n\n    onSubmit(additionalDataModifiedFormValues);\n  };\n\n  const shouldShowSaveAsTemplate = ({ id, endpoint, additionalData } = {}) => {\n    const template = findBy({ id }, templates);\n    const hasContent =\n      isPresent(endpoint) ||\n      isPresent(rejectEmptyKeyValuePairs(additionalData));\n\n    const isContentDifferentFromTemplate = !(\n      areValuesEqual(template?.endpoint, endpoint) &&\n      equals(template?.additionalData, additionalData)\n    );\n\n    return hasContent && isContentDifferentFromTemplate;\n  };\n\n  const isTemplateSelectionEnabled = isPresent(templates);\n\n  const {\n    sendToApi: sendToApiHelpPopoverProps,\n    additionalData: additionalDataHelpPopoverProps,\n  } = buildHelpPopoverProps(helpPopoverProps);\n\n  if (isLoadingTemplates) {\n    return (\n      <div className=\"flex h-full w-full items-center justify-center\">\n        <Spinner />\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <Pane.Header>\n        <Typography style=\"h2\" weight=\"semibold\">\n          {t(\"neetoMessageTemplate.api.sendToApi\")}\n          <HelpPopover className=\"ml-2\" {...sendToApiHelpPopoverProps} />\n        </Typography>\n      </Pane.Header>\n      <NeetoUIForm\n        formikProps={{\n          initialValues: SEND_TO_API_FORM_INITIAL_VALUES,\n          validationSchema: SEND_TO_API_FORM_VALIDATION_SCHEMA,\n          onSubmit: handleSubmit,\n        }}\n      >\n        {({ values, setValues }) => (\n          <>\n            <Pane.Body>\n              <div className=\"w-full space-y-5\">\n                {isTemplateSelectionEnabled && (\n                  <Select\n                    innerRef={setFocusField}\n                    isLoading={isLoadingTemplates}\n                    label={t(\"neetoMessageTemplate.template.title\")}\n                    options={renameKeys(\n                      { name: \"label\", id: \"value\" },\n                      templates\n                    )}\n                    placeholder={t(\n                      \"neetoMessageTemplate.sendMessage.selectTemplate\"\n                    )}\n                    onChange={template =>\n                      handleTemplateChange(setValues, values, template)\n                    }\n                  />\n                )}\n                <Input\n                  required\n                  label={t(\"neetoMessageTemplate.api.endpoint\")}\n                  name=\"endpoint\"\n                  placeholder={SAMPLE_URL}\n                  ref={isTemplateSelectionEnabled ? null : setFocusField}\n                />\n                <KeyValuePairs\n                  label={t(\"neetoMessageTemplate.api.additionalData\")}\n                  name=\"additionalData\"\n                  labelProps={{\n                    className: \"ml-2\",\n                    helpIconProps: {\n                      popoverProps: additionalDataHelpPopoverProps,\n                    },\n                  }}\n                />\n                {canManageTemplates && shouldShowSaveAsTemplate(values) && (\n                  <SaveAsTemplate />\n                )}\n              </div>\n            </Pane.Body>\n            <Pane.Footer>\n              <ActionBlock\n                {...{ isSubmitting }}\n                cancelButtonProps={{\n                  onClick: onClose,\n                  \"data-cy\": \"api-template-cancel-button\",\n                }}\n                submitButtonProps={{\n                  label: t(\"neetoMessageTemplate.template.send\"),\n                  \"data-cy\": \"api-template-send-button\",\n                }}\n              />\n            </Pane.Footer>\n          </>\n        )}\n      </NeetoUIForm>\n    </>\n  );\n};\n\nexport default SendToApiPane;\n"],"names":["SEND_TO_API_FORM_INITIAL_VALUES","endpoint","additionalData","ADDITIONAL_DATA_INITIAL_VALUE","shouldSaveAsTemplate","templateName","SEND_TO_API_FORM_VALIDATION_SCHEMA","yup","object","string","required","t","matches","VALID_URL_REGEX","array","of","key","value","when","is","then","entity","SEND_TO_API_HELP_POPOVER_PROPS","sendToApi","description","helpLinkProps","popoverProps","position","label","sanitizeHelpPopoverProps","map","unless","path","omit","formatAdditionalData","isPresent","buildHelpPopoverProps","combinedProps","mergeDeepLeft","SendToApiPane","props","isOpen","onClose","_jsx","Pane","children","paneProps","SendToApiForm","_objectSpread","_ref","ownerId","onSubmit","isSubmitting","_ref$canManageTemplat","canManageTemplates","_ref$helpPopoverProps","helpPopoverProps","setFocusField","_useTranslation","useTranslation","_useFetchTemplates","useFetchTemplates","status","templateType","API_TEMPLATE_TYPE","_useFetchTemplates$da","data","_useFetchTemplates$da2","_useFetchTemplates$da3","templates","isLoadingTemplates","isLoading","handleTemplateChange","setValues","values","option","template","findBy","id","modify","handleSubmit","formValues","additionalDataModifiedFormValues","rejectEmptyKeyValuePairs","shouldShowSaveAsTemplate","_ref2","arguments","length","undefined","hasContent","isContentDifferentFromTemplate","areValuesEqual","equals","isTemplateSelectionEnabled","_buildHelpPopoverProp","sendToApiHelpPopoverProps","additionalDataHelpPopoverProps","className","Spinner","_jsxs","_Fragment","Header","Typography","style","weight","HelpPopover","NeetoUIForm","formikProps","initialValues","validationSchema","_ref3","Body","Select","innerRef","options","renameKeys","name","placeholder","onChange","Input","SAMPLE_URL","ref","KeyValuePairs","labelProps","helpIconProps","SaveAsTemplate","Footer","ActionBlock","cancelButtonProps","onClick","submitButtonProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,IAAMA,+BAA+B,GAAG;AAC7CC,EAAAA,QAAQ,EAAE,EAAE;EACZC,cAAc,EAAE,CAACC,6BAA6B,CAAC;AAC/CC,EAAAA,oBAAoB,EAAE,KAAK;AAC3BC,EAAAA,YAAY,EAAE;AAChB,CAAC;AAEM,IAAMC,kCAAkC,GAAGC,GAAG,CAACC,MAAM,CAAC;EAC3DP,QAAQ,EAAEM,GAAG,CACVE,MAAM,EAAE,CACRC,QAAQ,CAACC,CAAC,CAAC,sDAAsD,CAAC,CAAC,CACnEC,OAAO,CACNC,eAAe,EACfF,CAAC,CAAC,mDAAmD,CACvD,CAAC;AACHT,EAAAA,cAAc,EAAEK,GAAG,CAChBO,KAAK,EAAE,CACPC,EAAE,CAACR,GAAG,CAACC,MAAM,CAAC;AAAEQ,IAAAA,GAAG,EAAET,GAAG,CAACE,MAAM,EAAE;AAAEQ,IAAAA,KAAK,EAAEV,GAAG,CAACE,MAAM;AAAG,GAAC,CAAC,CAAC;EAC7DJ,YAAY,EAAEE,GAAG,CAACE,MAAM,EAAE,CAACS,IAAI,CAAC,sBAAsB,EAAE;AACtDC,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,IAAI,EAAEb,GAAG,CAACE,MAAM,EAAE,CAACC,QAAQ,CACzBC,CAAC,CAAC,yDAAyD,EAAE;MAC3DU,MAAM,EAAEV,CAAC,CAAC,4CAA4C;AACxD,KAAC,CACH;GACD;AACH,CAAC,CAAC;AAEK,IAAMW,8BAA8B,GAAG;AAC5CC,EAAAA,SAAS,EAAE;AACTC,IAAAA,WAAW,EAAEb,CAAC,CACZ,6DACF,CAAC;AACDc,IAAAA,aAAa,EAAE;AAAE,MAAA,SAAS,EAAE;KAAgC;AAC5DC,IAAAA,YAAY,EAAE;AAAEC,MAAAA,QAAQ,EAAE;AAAM;GACjC;AACDzB,EAAAA,cAAc,EAAE;AACdsB,IAAAA,WAAW,EAAEb,CAAC,CACZ,kEACF,CAAC;AACDc,IAAAA,aAAa,EAAE;AACbG,MAAAA,KAAK,EAAEjB,CAAC,CAAC,+CAA+C,CAAC;AACzD,MAAA,SAAS,EAAE;KACZ;AACDgB,IAAAA,QAAQ,EAAE;AACZ;AACF,CAAC;;AC5CD,IAAME,wBAAwB,GAAGC,GAAG,CAClCC,MAAM,CAACC,IAAI,CAAC,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,EAAEC,IAAI,CAAC,CAAC,eAAe,CAAC,CAAC,CACjE,CAAC;AAEM,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAGhC,cAAc,EAAA;EAAA,OAChDiC,SAAS,CAACjC,cAAc,CAAC,GAAGA,cAAc,GAAG,CAACC,6BAA6B,CAAC;AAAA,CAAA;AAEvE,IAAMiC,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAGV,YAAY,EAAI;AACnD,EAAA,IAAMW,aAAa,GAAGC,aAAa,CACjCZ,YAAY,EACZJ,8BACF,CAAC;EAED,OAAOO,wBAAwB,CAACQ,aAAa,CAAC;AAChD,CAAC;;;;ACAD,IAAME,aAAa,GAAG,SAAhBA,aAAaA,CAAGC,KAAK,EAAI;AAC7B,EAAA,IAAQC,MAAM,GAAcD,KAAK,CAAzBC,MAAM;IAAEC,OAAO,GAAKF,KAAK,CAAjBE,OAAO;EAEvB,oBACEC,GAAA,CAACC,IAAI,EAAA;AAAOH,IAAAA,MAAM,EAANA,MAAM;AAAEC,IAAAA,OAAO,EAAPA,OAAO;IAAAG,QAAA,EACxB,SAAAA,QAAAA,CAAAC,SAAS,EAAA;MAAA,oBAAIH,GAAA,CAACI,aAAa,EAAAC,aAAA,KAAAA,aAAA,CAAAA,aAAA,CAAA,EAAA,EAAUR,KAAK,CAAA,EAAA,EAAA,EAAA;AAAEM,QAAAA,SAAS,EAATA;AAAS,OAAA,CAAA,CAAK,CAAC;AAAA;AAAA,GACxD,CAAC;AAEX;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAAE,IAAA,EAQb;AAAA,EAAA,IAPJC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPR,OAAO,GAAAO,IAAA,CAAPP,OAAO;IACPS,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,YAAY,GAAAH,IAAA,CAAZG,YAAY;IAAAC,qBAAA,GAAAJ,IAAA,CACZK,kBAAkB;AAAlBA,IAAAA,kBAAkB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,qBAAA;IAAAE,qBAAA,GAAAN,IAAA,CACzBO,gBAAgB;AAAhBA,IAAAA,gBAAgB,GAAAD,qBAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAAA,qBAAA;AACRE,IAAAA,aAAa,GAAAR,IAAA,CAA1BH,SAAS,CAAIW,aAAa;AAE1B,EAAA,IAAAC,eAAA,GAAcC,cAAc,EAAE;IAAtBhD,CAAC,GAAA+C,eAAA,CAAD/C,CAAC;EAET,IAAAiD,kBAAA,GACEC,iBAAiB,CAAC;AAChBC,MAAAA,MAAM,EAAE,QAAQ;AAChBC,MAAAA,YAAY,EAAEC,iBAAiB;AAC/Bd,MAAAA,OAAO,EAAPA;AACF,KAAC,CAAC;IAAAe,qBAAA,GAAAL,kBAAA,CALIM,IAAI;AAAAC,IAAAA,sBAAA,GAAAF,qBAAA,KAAA,KAAA,CAAA,GAAuB,EAAE,GAAAA,qBAAA;IAAAG,sBAAA,GAAAD,sBAAA,CAArBE,SAAS;AAATA,IAAAA,SAAS,GAAAD,sBAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,sBAAA;IAAoBE,kBAAkB,GAAAV,kBAAA,CAA7BW,SAAS;EAOhD,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIC,SAAS,EAAEC,MAAM,EAAEC,MAAM,EAAK;IAC1D,IAAI,CAACA,MAAM,EAAE;IAEb,IAAMC,QAAQ,GAAGC,MAAM,CAAC;MAAEC,EAAE,EAAEH,MAAM,CAAC1D;KAAO,EAAEoD,SAAS,CAAC;AAExDI,IAAAA,SAAS,CAAAzB,aAAA,CAAAA,aAAA,CAAA,EAAA,EACJ0B,MAAM,CACNK,EAAAA,MAAM,CAAC,gBAAgB,EAAE7C,oBAAoB,EAAE0C,QAAQ,CAAC,CAC5D,CAAC;GACH;AAED,EAAA,IAAMI,YAAY,GAAG,SAAfA,YAAYA,CAAGC,UAAU,EAAI;IACjC,IAAMC,gCAAgC,GAAGH,MAAM,CAC7C,gBAAgB,EAChBI,wBAAwB,EACxBF,UACF,CAAC;IAED9B,QAAQ,CAAC+B,gCAAgC,CAAC;GAC3C;AAED,EAAA,IAAME,wBAAwB,GAAG,SAA3BA,wBAAwBA,GAA8C;AAAA,IAAA,IAAAC,KAAA,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAP,EAAE;MAAnCR,EAAE,GAAAO,KAAA,CAAFP,EAAE;MAAE7E,QAAQ,GAAAoF,KAAA,CAARpF,QAAQ;MAAEC,cAAc,GAAAmF,KAAA,CAAdnF,cAAc;IAC9D,IAAM0E,QAAQ,GAAGC,MAAM,CAAC;AAAEC,MAAAA,EAAE,EAAFA;KAAI,EAAET,SAAS,CAAC;AAC1C,IAAA,IAAMoB,UAAU,GACdtD,SAAS,CAAClC,QAAQ,CAAC,IACnBkC,SAAS,CAACgD,wBAAwB,CAACjF,cAAc,CAAC,CAAC;AAErD,IAAA,IAAMwF,8BAA8B,GAAG,EACrCC,cAAc,CAACf,QAAQ,KAARA,IAAAA,IAAAA,QAAQ,KAARA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,QAAQ,CAAE3E,QAAQ,EAAEA,QAAQ,CAAC,IAC5C2F,MAAM,CAAChB,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAARA,QAAQ,CAAE1E,cAAc,EAAEA,cAAc,CAAC,CACjD;IAED,OAAOuF,UAAU,IAAIC,8BAA8B;GACpD;AAED,EAAA,IAAMG,0BAA0B,GAAG1D,SAAS,CAACkC,SAAS,CAAC;AAEvD,EAAA,IAAAyB,qBAAA,GAGI1D,qBAAqB,CAACoB,gBAAgB,CAAC;IAF9BuC,yBAAyB,GAAAD,qBAAA,CAApCvE,SAAS;IACOyE,8BAA8B,GAAAF,qBAAA,CAA9C5F,cAAc;AAGhB,EAAA,IAAIoE,kBAAkB,EAAE;AACtB,IAAA,oBACE3B,GAAA,CAAA,KAAA,EAAA;AAAKsD,MAAAA,SAAS,EAAC,gDAAgD;AAAApD,MAAAA,QAAA,eAC7DF,GAAA,CAACuD,OAAO,EAAE,EAAA;AAAC,KACR,CAAC;AAEV;EAEA,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAvD,IAAAA,QAAA,EACEF,cAAAA,GAAA,CAACC,IAAI,CAACyD,MAAM,EAAA;MAAAxD,QAAA,eACVsD,IAAA,CAACG,UAAU,EAAA;AAACC,QAAAA,KAAK,EAAC,IAAI;AAACC,QAAAA,MAAM,EAAC,UAAU;QAAA3D,QAAA,EAAA,CACrClC,CAAC,CAAC,oCAAoC,CAAC,eACxCgC,GAAA,CAAC8D,WAAW,EAAAzD,aAAA,CAAA;AAACiD,UAAAA,SAAS,EAAC;SAAWF,EAAAA,yBAAyB,CAAG,CAAC;OACrD;AAAC,KACF,CAAC,eACdpD,GAAA,CAAC+D,WAAW,EAAA;AACVC,MAAAA,WAAW,EAAE;AACXC,QAAAA,aAAa,EAAE5G,+BAA+B;AAC9C6G,QAAAA,gBAAgB,EAAEvG,kCAAkC;AACpD6C,QAAAA,QAAQ,EAAE6B;OACV;MAAAnC,QAAA,EAED,SAAAA,QAAAA,CAAAiE,KAAA,EAAA;AAAA,QAAA,IAAGpC,MAAM,GAAAoC,KAAA,CAANpC,MAAM;UAAED,SAAS,GAAAqC,KAAA,CAATrC,SAAS;QAAA,oBACnB0B,IAAA,CAAAC,QAAA,EAAA;AAAAvD,UAAAA,QAAA,EACEF,cAAAA,GAAA,CAACC,IAAI,CAACmE,IAAI,EAAA;AAAAlE,YAAAA,QAAA,eACRsD,IAAA,CAAA,KAAA,EAAA;AAAKF,cAAAA,SAAS,EAAC,kBAAkB;AAAApD,cAAAA,QAAA,EAC9BgD,CAAAA,0BAA0B,iBACzBlD,GAAA,CAACqE,MAAM,EAAA;AACLC,gBAAAA,QAAQ,EAAExD,aAAc;AACxBc,gBAAAA,SAAS,EAAED,kBAAmB;AAC9B1C,gBAAAA,KAAK,EAAEjB,CAAC,CAAC,qCAAqC,CAAE;gBAChDuG,OAAO,EAAEC,UAAU,CACjB;AAAEC,kBAAAA,IAAI,EAAE,OAAO;AAAEtC,kBAAAA,EAAE,EAAE;iBAAS,EAC9BT,SACF,CAAE;AACFgD,gBAAAA,WAAW,EAAE1G,CAAC,CACZ,iDACF,CAAE;AACF2G,gBAAAA,QAAQ,EAAE,SAAVA,QAAQA,CAAE1C,QAAQ,EAAA;AAAA,kBAAA,OAChBJ,oBAAoB,CAACC,SAAS,EAAEC,MAAM,EAAEE,QAAQ,CAAC;AAAA;AAClD,eACF,CACF,eACDjC,GAAA,CAAC4E,KAAK,EAAA;gBACJ7G,QAAQ,EAAA,IAAA;AACRkB,gBAAAA,KAAK,EAAEjB,CAAC,CAAC,mCAAmC,CAAE;AAC9CyG,gBAAAA,IAAI,EAAC,UAAU;AACfC,gBAAAA,WAAW,EAAEG,UAAW;AACxBC,gBAAAA,GAAG,EAAE5B,0BAA0B,GAAG,IAAI,GAAGpC;AAAc,eACxD,CAAC,eACFd,GAAA,CAAC+E,aAAa,EAAA;AACZ9F,gBAAAA,KAAK,EAAEjB,CAAC,CAAC,yCAAyC,CAAE;AACpDyG,gBAAAA,IAAI,EAAC,gBAAgB;AACrBO,gBAAAA,UAAU,EAAE;AACV1B,kBAAAA,SAAS,EAAE,MAAM;AACjB2B,kBAAAA,aAAa,EAAE;AACblG,oBAAAA,YAAY,EAAEsE;AAChB;AACF;AAAE,eACH,CAAC,EACD1C,kBAAkB,IAAI8B,wBAAwB,CAACV,MAAM,CAAC,iBACrD/B,GAAA,CAACkF,cAAc,IAAE,CAClB;aACE;AAAC,WACG,CAAC,eACZlF,GAAA,CAACC,IAAI,CAACkF,MAAM,EAAA;YAAAjF,QAAA,eACVF,GAAA,CAACoF,WAAW,EAAA;AACJ3E,cAAAA,YAAY,EAAZA,YAAY;AAClB4E,cAAAA,iBAAiB,EAAE;AACjBC,gBAAAA,OAAO,EAAEvF,OAAO;AAChB,gBAAA,SAAS,EAAE;eACX;AACFwF,cAAAA,iBAAiB,EAAE;AACjBtG,gBAAAA,KAAK,EAAEjB,CAAC,CAAC,oCAAoC,CAAC;AAC9C,gBAAA,SAAS,EAAE;AACb;aACD;AAAC,WACS,CAAC;AAAA,SACd,CAAC;AAAA;AACJ,KACU,CAAC;AAAA,GACd,CAAC;AAEP,CAAC;;;;"}
+{"version":3,"file":"SendToApiPane.js","sources":["../app/javascript/src/components/Api/SendToApiPane/constants.js","../app/javascript/src/components/Api/SendToApiPane/utils.js","../app/javascript/src/components/Api/SendToApiPane/index.jsx"],"sourcesContent":["import { t } from \"i18next\";\nimport { isPresent } from \"neetocist\";\nimport * as yup from \"yup\";\n\nimport { CUSTOM_HEADERS_INITIAL_VALUE, VALID_URL_REGEX } from \"../constants\";\n\nexport const SEND_TO_API_FORM_INITIAL_VALUES = {\n  endpoint: \"\",\n  enableCustomHeaders: false,\n  customHeaders: [CUSTOM_HEADERS_INITIAL_VALUE],\n  body: \"{}\",\n  shouldSaveAsTemplate: false,\n  templateName: \"\",\n};\n\nexport const SEND_TO_API_FORM_VALIDATION_SCHEMA = yup.object({\n  endpoint: yup\n    .string()\n    .trim()\n    .required(t(\"neetoMessageTemplate.api.validation.endpointPresence\"))\n    .matches(\n      VALID_URL_REGEX,\n      t(\"neetoMessageTemplate.api.validation.validEndpoint\")\n    ),\n  body: yup\n    .string()\n    .trim()\n    .required(\n      t(\"neetoMessageTemplate.validations.requiredEntity\", {\n        entity: t(\"neetoMessageTemplate.template.body\"),\n      })\n    )\n    .test(\n      \"is-not-empty\",\n      t(\"neetoMessageTemplate.validations.requiredEntity\", {\n        entity: t(\"neetoMessageTemplate.template.body\"),\n      }),\n      value => isPresent(value)\n    )\n    .test(\n      \"is-valid-json\",\n      t(\"neetoMessageTemplate.api.validation.invalidJsonBody\"),\n      value => {\n        try {\n          JSON.parse(value);\n\n          return true;\n        } catch {\n          return false;\n        }\n      }\n    ),\n});\n","import { isPresent } from \"neetocist\";\nimport { equals } from \"ramda\";\n\nimport { CUSTOM_HEADERS_INITIAL_VALUE } from \"../constants\";\n\nexport const formatCustomHeaders = customHeaders =>\n  isPresent(customHeaders) ? customHeaders : [CUSTOM_HEADERS_INITIAL_VALUE];\n\nexport const areHeadersSame = (\n  enableCustomHeaders,\n  customHeaders,\n  template = {}\n) => {\n  const {\n    enableCustomHeaders: templateHasCustomHeaders,\n    customHeaders: templateHeaders,\n  } = template;\n  if (!enableCustomHeaders && !templateHasCustomHeaders) return true;\n\n  if (enableCustomHeaders !== templateHasCustomHeaders) return false;\n\n  return equals(customHeaders, templateHeaders);\n};\n\nexport const isBodyAvailable = body => {\n  try {\n    const data = JSON.parse(body);\n\n    return isPresent(data);\n  } catch {\n    return false;\n  }\n};\n","import { findBy, isPresent, renameKeys } from \"neetocist\";\nimport HelpPopover from \"neetomolecules/HelpPopover\";\nimport { Pane, Select, Spinner, Typography } from \"neetoui\";\nimport { ActionBlock, Input, Form as NeetoUIForm } from \"neetoui/formik\";\nimport { equals, modify } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { SAMPLE_URL } from \"components/Api/ApiTemplates/constants\";\nimport {\n  API_TEMPLATE_TYPE,\n  CUSTOM_HEADERS_INITIAL_VALUE,\n} from \"components/Api/constants\";\nimport {\n  buildHelpPopoverProps,\n  rejectEmptyKeyValuePairs,\n} from \"components/Api/utils\";\nimport SaveAsTemplate from \"components/commons/SaveAsTemplate\";\nimport { areValuesEqual } from \"components/utils\";\nimport { useFetchTemplates } from \"hooks/reactQuery/useTemplatesApi\";\n\nimport {\n  SEND_TO_API_FORM_INITIAL_VALUES,\n  SEND_TO_API_FORM_VALIDATION_SCHEMA,\n} from \"./constants\";\nimport { areHeadersSame, formatCustomHeaders, isBodyAvailable } from \"./utils\";\n\nimport CustomHeaders from \"../CustomHeaders\";\nimport JsonEditor from \"../JsonEditor\";\n\nconst SendToApiPane = props => {\n  const { isOpen, onClose } = props;\n\n  return (\n    <Pane {...{ isOpen, onClose }} size=\"large\">\n      {paneProps => <SendToApiForm {...{ ...props, paneProps }} />}\n    </Pane>\n  );\n};\n\nconst SendToApiForm = ({\n  ownerId,\n  onClose,\n  onSubmit,\n  isSubmitting,\n  templateVariables,\n  canManageTemplates = true,\n  helpPopoverProps = {},\n  paneProps: { setFocusField },\n}) => {\n  const { t } = useTranslation();\n\n  const { data: { templates = [] } = {}, isLoading: isLoadingTemplates } =\n    useFetchTemplates({\n      status: \"active\",\n      templateType: API_TEMPLATE_TYPE,\n      ownerId,\n    });\n\n  const handleTemplateChange = (setValues, values, option) => {\n    if (!option) return;\n\n    const template = findBy({ id: option.value }, templates);\n    setValues({\n      ...values,\n      ...modify(\"customHeaders\", formatCustomHeaders, template),\n    });\n  };\n\n  const handleSubmit = formValues => {\n    const customHeadersModifiedFormValues = modify(\n      \"customHeaders\",\n      rejectEmptyKeyValuePairs,\n      formValues\n    );\n\n    onSubmit(customHeadersModifiedFormValues);\n  };\n\n  const shouldShowSaveAsTemplate = ({\n    id,\n    endpoint,\n    enableCustomHeaders,\n    customHeaders = [CUSTOM_HEADERS_INITIAL_VALUE],\n    body,\n  } = {}) => {\n    const template = findBy({ id }, templates);\n    const hasContent =\n      isPresent(endpoint) ||\n      isPresent(rejectEmptyKeyValuePairs(customHeaders)) ||\n      isBodyAvailable(body);\n\n    const isContentDifferentFromTemplate = !(\n      areValuesEqual(template?.endpoint, endpoint) &&\n      areHeadersSame(enableCustomHeaders, customHeaders, template) &&\n      equals(template?.body, body)\n    );\n\n    return hasContent && isContentDifferentFromTemplate;\n  };\n\n  const isTemplateSelectionEnabled = isPresent(templates);\n\n  const {\n    sendToApi: sendToApiHelpPopoverProps,\n    customHeaders: customHeadersHelpPopoverProps,\n    body: bodyHelpPopoverProps,\n  } = buildHelpPopoverProps(helpPopoverProps);\n\n  if (isLoadingTemplates) {\n    return (\n      <div className=\"flex h-full w-full items-center justify-center\">\n        <Spinner />\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <Pane.Header>\n        <Typography style=\"h2\" weight=\"semibold\">\n          {t(\"neetoMessageTemplate.api.sendToApi\")}\n          <HelpPopover className=\"ml-2\" {...sendToApiHelpPopoverProps} />\n        </Typography>\n      </Pane.Header>\n      <NeetoUIForm\n        formikProps={{\n          initialValues: SEND_TO_API_FORM_INITIAL_VALUES,\n          validationSchema: SEND_TO_API_FORM_VALIDATION_SCHEMA,\n          onSubmit: handleSubmit,\n        }}\n      >\n        {({ values, setValues }) => (\n          <>\n            <Pane.Body>\n              <div className=\"w-full space-y-5 mb-10\">\n                {isTemplateSelectionEnabled && (\n                  <Select\n                    innerRef={setFocusField}\n                    isLoading={isLoadingTemplates}\n                    label={t(\"neetoMessageTemplate.template.title\")}\n                    options={renameKeys(\n                      { name: \"label\", id: \"value\" },\n                      templates\n                    )}\n                    placeholder={t(\n                      \"neetoMessageTemplate.sendMessage.selectTemplate\"\n                    )}\n                    onChange={template =>\n                      handleTemplateChange(setValues, values, template)\n                    }\n                  />\n                )}\n                <Input\n                  required\n                  label={t(\"neetoMessageTemplate.api.endpoint\")}\n                  name=\"endpoint\"\n                  placeholder={SAMPLE_URL}\n                  ref={isTemplateSelectionEnabled ? null : setFocusField}\n                />\n                <CustomHeaders\n                  helpPopoverProps={customHeadersHelpPopoverProps}\n                />\n                <JsonEditor\n                  {...{ templateVariables }}\n                  helpPopoverProps={bodyHelpPopoverProps}\n                  initialValue={values.body}\n                  name=\"body\"\n                />\n                {canManageTemplates && shouldShowSaveAsTemplate(values) && (\n                  <SaveAsTemplate />\n                )}\n              </div>\n            </Pane.Body>\n            <Pane.Footer>\n              <ActionBlock\n                {...{ isSubmitting }}\n                cancelButtonProps={{\n                  onClick: onClose,\n                  \"data-cy\": \"api-template-cancel-button\",\n                }}\n                submitButtonProps={{\n                  label: t(\"neetoMessageTemplate.template.send\"),\n                  \"data-cy\": \"api-template-send-button\",\n                }}\n              />\n            </Pane.Footer>\n          </>\n        )}\n      </NeetoUIForm>\n    </>\n  );\n};\n\nexport default SendToApiPane;\n"],"names":["SEND_TO_API_FORM_INITIAL_VALUES","endpoint","enableCustomHeaders","customHeaders","CUSTOM_HEADERS_INITIAL_VALUE","body","shouldSaveAsTemplate","templateName","SEND_TO_API_FORM_VALIDATION_SCHEMA","yup","object","string","trim","required","t","matches","VALID_URL_REGEX","entity","test","value","isPresent","JSON","parse","_unused","formatCustomHeaders","areHeadersSame","template","arguments","length","undefined","templateHasCustomHeaders","templateHeaders","equals","isBodyAvailable","data","SendToApiPane","props","isOpen","onClose","_jsx","Pane","size","children","paneProps","SendToApiForm","_objectSpread","_ref","ownerId","onSubmit","isSubmitting","templateVariables","_ref$canManageTemplat","canManageTemplates","_ref$helpPopoverProps","helpPopoverProps","setFocusField","_useTranslation","useTranslation","_useFetchTemplates","useFetchTemplates","status","templateType","API_TEMPLATE_TYPE","_useFetchTemplates$da","_useFetchTemplates$da2","_useFetchTemplates$da3","templates","isLoadingTemplates","isLoading","handleTemplateChange","setValues","values","option","findBy","id","modify","handleSubmit","formValues","customHeadersModifiedFormValues","rejectEmptyKeyValuePairs","shouldShowSaveAsTemplate","_ref2","_ref2$customHeaders","hasContent","isContentDifferentFromTemplate","areValuesEqual","isTemplateSelectionEnabled","_buildHelpPopoverProp","buildHelpPopoverProps","sendToApiHelpPopoverProps","sendToApi","customHeadersHelpPopoverProps","bodyHelpPopoverProps","className","Spinner","_jsxs","_Fragment","Header","Typography","style","weight","HelpPopover","NeetoUIForm","formikProps","initialValues","validationSchema","_ref3","Body","Select","innerRef","label","options","renameKeys","name","placeholder","onChange","Input","SAMPLE_URL","ref","CustomHeaders","JsonEditor","initialValue","SaveAsTemplate","Footer","ActionBlock","cancelButtonProps","onClick","submitButtonProps"],"mappings":"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"}

package/dist/cjs/ApiTemplates.js

@@ -7,7 +7,7 @@ var react = require('react');
 var neetoCist = require('@bigbinary/neeto-cist');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var FiltersBar = require('@bigbinary/neeto-filters-frontend/Bar');
-var utils$1 = require('@bigbinary/neeto-filters-frontend/utils');
+var utils = require('@bigbinary/neeto-filters-frontend/utils');
 var Container = require('@bigbinary/neeto-molecules/Container');
 var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
@@ -20,7 +20,7 @@ var Table = require('@bigbinary/neetoui/Table');
 var Typography = require('@bigbinary/neetoui/Typography');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
-var utils = require('../utils-D7y24q1q.js');
+var JsonEditor = require('../JsonEditor-Cz_76w4s.js');
 var constants = require('../constants-CqiptWxr.js');
 var useTemplatesApi = require('../useTemplatesApi-CSsaKyRi.js');
 var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
@@ -31,8 +31,13 @@ var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var jsxRuntime = require('react/jsx-runtime');
 require('yup');
 require('formik');
+require('@bigbinary/neetoui/formik/Switch');
 require('@bigbinary/neeto-icons/Delete');
+require('@monaco-editor/react');
+require('@bigbinary/neeto-icons/Help');
+require('@bigbinary/neeto-molecules/DynamicVariables');
 require('@bigbinary/neetoui/Label');
+require('../inject-css-vQvjPR2x.js');
 require('@bigbinary/neeto-commons-frontend/constants');
 require('@tanstack/react-query');
 require('axios');
@@ -45,9 +50,11 @@ var buildApiTemplatePayload = function buildApiTemplatePayload(values, templateI
     entity: {
       id: templateId,
       endpoint: values.endpoint,
-      additionalData: utils.rejectEmptyKeyValuePairs(values.additionalData)
+      enableCustomHeaders: values.enableCustomHeaders,
+      customHeaders: JsonEditor.rejectEmptyKeyValuePairs(values.customHeaders || []),
+      body: values.body
     },
-    templateType: utils.API_TEMPLATE_TYPE,
+    templateType: JsonEditor.API_TEMPLATE_TYPE,
     name: values.name
   };
 };
@@ -85,7 +92,7 @@ var buildTableColumnData = function buildTableColumnData(_ref) {
             }
           }, {
             key: "status",
-            label: ramda.equals(apiTemplate.status, utils.TEMPLATE_STATUS.ACTIVE) ? i18next.t("neetoMessageTemplate.template.markAsInactive") : i18next.t("neetoMessageTemplate.template.markAsActive"),
+            label: ramda.equals(apiTemplate.status, JsonEditor.TEMPLATE_STATUS.ACTIVE) ? i18next.t("neetoMessageTemplate.template.markAsInactive") : i18next.t("neetoMessageTemplate.template.markAsActive"),
             "data-cy": "api-template-button-status-button",
             onClick: function onClick() {
               return handleMarkAsActiveOrInactive(apiTemplate);
@@ -111,11 +118,13 @@ var buildTableColumnData = function buildTableColumnData(_ref) {
     width: "20%"
   }];
 };
-var buildApiTemplateInitialValues = function buildApiTemplateInitialValues(isEdit, apiTemplate) {
-  if (!isEdit) return utils.API_TEMPLATE_INITIAL_VALUES;
-  var additionalData = ramda.isEmpty(apiTemplate.additionalData) ? [utils.ADDITIONAL_DATA_INITIAL_VALUE] : apiTemplate.additionalData;
-  return _objectSpread$1(_objectSpread$1({}, ramda.pick(["name", "endpoint"], apiTemplate)), {}, {
-    additionalData: additionalData
+var buildApiTemplateInitialValues = function buildApiTemplateInitialValues(isEdit, apiTemplate, initialPayload) {
+  if (!isEdit) {
+    return ramda.assoc("body", initialPayload, JsonEditor.API_TEMPLATE_INITIAL_VALUES);
+  }
+  var customHeaders = ramda.isEmpty(apiTemplate.customHeaders) ? [JsonEditor.CUSTOM_HEADERS_INITIAL_VALUE] : apiTemplate.customHeaders;
+  return _objectSpread$1(_objectSpread$1({}, ramda.pick(["name", "endpoint", "body", "enableCustomHeaders"], apiTemplate)), {}, {
+    customHeaders: customHeaders
   });
 };
 
@@ -124,7 +133,11 @@ var Form = function Form(_ref) {
     onClose = _ref.onClose,
     ownerId = _ref.ownerId,
     selectedApiTemplate = _ref.selectedApiTemplate,
-    onMutationSuccess = _ref.onMutationSuccess;
+    onMutationSuccess = _ref.onMutationSuccess,
+    initialPayload = _ref.initialPayload,
+    templateVariables = _ref.templateVariables,
+    bodyHelpPopoverProps = _ref.bodyHelpPopoverProps,
+    customHeadersHelpPopoverProps = _ref.customHeadersHelpPopoverProps;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useCreateTemplate = useTemplatesApi.useCreateTemplate(ownerId),
@@ -156,6 +169,9 @@ var Form = function Form(_ref) {
     createApiTemplate(payload, options);
   };
   var isMutating = isUpdating || isCreating;
+  var initialValues = react.useMemo(function () {
+    return buildApiTemplateInitialValues(isEdit, selectedApiTemplate, initialPayload);
+  }, [isEdit, selectedApiTemplate, initialPayload]);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Header, {
       children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
@@ -165,13 +181,13 @@ var Form = function Form(_ref) {
       })
     }), /*#__PURE__*/jsxRuntime.jsxs(NeetoUIForm, {
       formikProps: {
-        initialValues: buildApiTemplateInitialValues(isEdit, selectedApiTemplate),
-        validationSchema: utils.API_TEMPLATE_FORM_VALIDATION_SCHEMA,
+        initialValues: initialValues,
+        validationSchema: JsonEditor.API_TEMPLATE_FORM_VALIDATION_SCHEMA,
         onSubmit: handleSubmit
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
         children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "w-full space-y-5",
+          className: "w-full space-y-5 mb-10",
           children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
             required: true,
             label: t("neetoMessageTemplate.template.name"),
@@ -181,10 +197,14 @@ var Form = function Form(_ref) {
             required: true,
             label: t("neetoMessageTemplate.api.endpoint"),
             name: "endpoint",
-            placeholder: utils.SAMPLE_URL
-          }), /*#__PURE__*/jsxRuntime.jsx(utils.KeyValuePairs, {
-            label: t("neetoMessageTemplate.api.additionalData"),
-            name: "additionalData"
+            placeholder: JsonEditor.SAMPLE_URL
+          }), /*#__PURE__*/jsxRuntime.jsx(JsonEditor.CustomHeaders, {
+            helpPopoverProps: customHeadersHelpPopoverProps
+          }), /*#__PURE__*/jsxRuntime.jsx(JsonEditor.JsonEditor, {
+            templateVariables: templateVariables,
+            helpPopoverProps: bodyHelpPopoverProps,
+            initialValue: initialValues.body,
+            name: "body"
           })]
         })
       }), /*#__PURE__*/jsxRuntime.jsx(Pane.Footer, {
@@ -202,12 +222,16 @@ var Form = function Form(_ref) {
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ApiTemplates = function ApiTemplates(_ref) {
-  var _helpPopoverProps$hel;
+  var _apiTemplatesHelpPopo;
   var ownerId = _ref.ownerId,
     _ref$breadcrumbs = _ref.breadcrumbs,
     breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
     _ref$helpPopoverProps = _ref.helpPopoverProps,
     helpPopoverProps = _ref$helpPopoverProps === void 0 ? {} : _ref$helpPopoverProps,
+    _ref$initialPayload = _ref.initialPayload,
+    initialPayload = _ref$initialPayload === void 0 ? {} : _ref$initialPayload,
+    _ref$templateVariable = _ref.templateVariables,
+    templateVariables = _ref$templateVariable === void 0 ? [] : _ref$templateVariable,
     _ref$onMutationSucces = _ref.onMutationSuccess,
     onMutationSuccess = _ref$onMutationSucces === void 0 ? neetoCist.noop : _ref$onMutationSucces;
   var _useTranslation = reactI18next.useTranslation(),
@@ -241,7 +265,7 @@ var ApiTemplates = function ApiTemplates(_ref) {
     value: searchTerm
   };
   var _useState11 = react.useState(function () {
-      return utils$1.buildFiltersFromURL([].concat(_toConsumableArray(utils.FILTER_COLUMNS), [searchKeywordProps]));
+      return utils.buildFiltersFromURL([].concat(_toConsumableArray(JsonEditor.FILTER_COLUMNS), [searchKeywordProps]));
     }),
     _useState12 = _slicedToArray(_useState11, 2),
     filters = _useState12[0],
@@ -250,7 +274,7 @@ var ApiTemplates = function ApiTemplates(_ref) {
       filters: filters,
       page: pageParams.index,
       pageSize: pageParams.size,
-      templateType: utils.API_TEMPLATE_TYPE,
+      templateType: JsonEditor.API_TEMPLATE_TYPE,
       ownerId: ramda.isEmpty(ownerId) ? undefined : ownerId
     }),
     _useFetchTemplates$da = _useFetchTemplates.data,
@@ -286,11 +310,11 @@ var ApiTemplates = function ApiTemplates(_ref) {
   var handleMarkAsActiveOrInactive = function handleMarkAsActiveOrInactive(_ref2) {
     var status = _ref2.status,
       id = _ref2.id;
-    var newStatus = ramda.equals(status, utils.TEMPLATE_STATUS.ACTIVE) ? utils.TEMPLATE_STATUS.INACTIVE : utils.TEMPLATE_STATUS.ACTIVE;
+    var newStatus = ramda.equals(status, JsonEditor.TEMPLATE_STATUS.ACTIVE) ? JsonEditor.TEMPLATE_STATUS.INACTIVE : JsonEditor.TEMPLATE_STATUS.ACTIVE;
     updateTemplate({
       payload: {
         status: newStatus,
-        templateType: utils.API_TEMPLATE_TYPE
+        templateType: JsonEditor.API_TEMPLATE_TYPE
       },
       id: id
     }, {
@@ -305,7 +329,11 @@ var ApiTemplates = function ApiTemplates(_ref) {
       }
     });
   };
-  var helpDocUrl = (helpPopoverProps === null || helpPopoverProps === void 0 || (_helpPopoverProps$hel = helpPopoverProps.helpLinkProps) === null || _helpPopoverProps$hel === void 0 ? void 0 : _helpPopoverProps$hel.href) || "";
+  var _buildHelpPopoverProp = JsonEditor.buildHelpPopoverProps(helpPopoverProps),
+    apiTemplatesHelpPopoverProps = _buildHelpPopoverProp.apiTemplates,
+    customHeadersHelpPopoverProps = _buildHelpPopoverProp.customHeaders,
+    bodyHelpPopoverProps = _buildHelpPopoverProp.body;
+  var helpDocUrl = (apiTemplatesHelpPopoverProps === null || apiTemplatesHelpPopoverProps === void 0 || (_apiTemplatesHelpPopo = apiTemplatesHelpPopoverProps.helpLinkProps) === null || _apiTemplatesHelpPopo === void 0 ? void 0 : _apiTemplatesHelpPopo.href) || "";
   var noDataProps = _objectSpread(_objectSpread({}, !isFilterApplied && {
     primaryButtonProps: {
       label: t("neetoMessageTemplate.api.addApiTemplate"),
@@ -350,8 +378,8 @@ var ApiTemplates = function ApiTemplates(_ref) {
         placeholder: t("neetoMessageTemplate.template.searchApiTemplates"),
         "data-cy": "api-templates-search-input"
       },
-      titleHelpPopoverProps: helpPopoverProps && _objectSpread(_objectSpread({}, helpPopoverProps), {}, {
-        title: (helpPopoverProps === null || helpPopoverProps === void 0 ? void 0 : helpPopoverProps.title) || title
+      titleHelpPopoverProps: apiTemplatesHelpPopoverProps && _objectSpread(_objectSpread({}, apiTemplatesHelpPopoverProps), {}, {
+        title: (apiTemplatesHelpPopoverProps === null || apiTemplatesHelpPopoverProps === void 0 ? void 0 : apiTemplatesHelpPopoverProps.title) || title
       })
     }), /*#__PURE__*/jsxRuntime.jsx(SubHeader, {
       className: "mb-4",
@@ -367,7 +395,7 @@ var ApiTemplates = function ApiTemplates(_ref) {
           totalCount: isFilterApplied ? null : totalCount
         },
         filterProps: {
-          columns: utils.FILTER_COLUMNS,
+          columns: JsonEditor.FILTER_COLUMNS,
           isOpen: isFiltersPaneOpen,
           keyword: searchKeywordProps,
           setIsOpen: setIsFiltersPaneOpen,
@@ -375,7 +403,7 @@ var ApiTemplates = function ApiTemplates(_ref) {
         }
       })
     }), /*#__PURE__*/jsxRuntime.jsx(FiltersBar, {
-      columns: utils.FILTER_COLUMNS,
+      columns: JsonEditor.FILTER_COLUMNS,
       keyword: searchKeywordProps,
       setIsPaneOpen: setIsFiltersPaneOpen,
       onChange: handleFiltersChange
@@ -408,14 +436,19 @@ var ApiTemplates = function ApiTemplates(_ref) {
       children: /*#__PURE__*/jsxRuntime.jsx(NoData, _objectSpread({}, noDataProps))
     }), /*#__PURE__*/jsxRuntime.jsx(Pane, {
       isOpen: isFormPaneOpen,
+      size: "large",
       onClose: handleCloseDeleteAlertAndFormPane,
       children: function children(_ref3) {
         var setFocusField = _ref3.setFocusField;
         return /*#__PURE__*/jsxRuntime.jsx(Form, {
+          bodyHelpPopoverProps: bodyHelpPopoverProps,
+          customHeadersHelpPopoverProps: customHeadersHelpPopoverProps,
           onMutationSuccess: onMutationSuccess,
           ownerId: ownerId,
           selectedApiTemplate: selectedApiTemplate,
           setFocusField: setFocusField,
+          templateVariables: templateVariables,
+          initialPayload: JSON.stringify(initialPayload, null, 2),
           onClose: handleCloseDeleteAlertAndFormPane
         });
       }