@bigbinary/neeto-message-templates-frontend 0.6.6 → 0.7.0

package/app/javascript/src/translations/en.json

@@ -34,6 +34,9 @@
       "whatsappTemplate": "Whatsapp Template",
       "apiTemplates": "API templates",
       "emptyState": "There are no {{type, anyCase}} to show.",
+      "whatsapp": {
+        "helpDocText": "You can create and add new WhatsApp templates by referring to this <Link>help document</Link>."
+      },
       "sendTestEmail": "Send test email",
       "sendTestSms": "Send test SMS",
       "filtersEmptyState": "There are no {{type, anyCase}} to show for applied filters.",
@@ -52,7 +55,9 @@
       "templateName": "Template name",
       "emailSubject": "Email subject",
       "emailBody": "Email body",
-      "smsBody": "SMS body"
+      "smsBody": "SMS body",
+      "messageTemplatesWithCount_one": "{{count}} {{type, anyCase}} template",
+      "messageTemplatesWithCount_other": "{{count}} {{type, anyCase}} templates"
     },
     "sendMessage": {
       "email": "Send email",
@@ -84,6 +89,7 @@
   "messageType": {
     "sms": "SMS",
     "email": "email",
-    "whatsapp": "whatsapp"
+    "whatsapp": "whatsapp",
+    "api": "API"
   }
 }

package/dist/index.cjs.js

@@ -10,6 +10,7 @@ var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
 var neetoui = require('@bigbinary/neetoui');
 var ramda = require('ramda');
+var reactI18next = require('react-i18next');
 var i18next = require('i18next');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
@@ -20,7 +21,6 @@ var require$$0 = require('util');
 var zustand = require('zustand');
 var neetoEditor = require('@bigbinary/neeto-editor');
 var formik$1 = require('@bigbinary/neetoui/formik');
-var reactI18next = require('react-i18next');
 var formik = require('formik');
 var PhoneNumber = require('@bigbinary/neeto-molecules/PhoneNumber');
 var yup = require('yup');
@@ -3118,51 +3118,42 @@ var Form$1 = function Form(_ref) {
       validateOnChange: true,
       onSubmit: handleSubmit
     }
-  }, function (_ref4) {
-    var dirty = _ref4.dirty,
-      isValid = _ref4.isValid,
-      isSubmitting = _ref4.isSubmitting;
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
-      required: true,
-      label: t("neetoMessageTemplate.template.templateName"),
-      name: "name",
-      ref: setInitialFocusField
-    }), isEmailTemplate && /*#__PURE__*/React__default["default"].createElement(FormikAdaptiveInput, {
-      required: true,
-      label: t("neetoMessageTemplate.template.emailSubject"),
-      name: "subject"
-    }), /*#__PURE__*/React__default["default"].createElement(neetoEditor.FormikEditor, {
-      hideSlashCommands: true,
-      required: true,
-      contentClassName: "max-h-40",
-      defaults: isEmailTemplate ? undefined : [],
-      label: messageBodyLabel,
-      name: "body",
-      ref: editorRef,
-      rows: DEFAULT_EDITOR_ROW_COUNT,
-      variables: templateVariables
-    }), isTestTemplateVisible && /*#__PURE__*/React__default["default"].createElement(TestMessage, {
-      customFields: customFields,
-      handleSubmitTestTemplate: handleSubmitTestTemplate,
-      isEmailTemplate: isEmailTemplate,
-      isTestMessageLoading: isTestMessageLoading,
-      isTestingTemplateDisabled: isTestingTemplateDisabled
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
-      className: "absolute bottom-0 left-0 flex gap-x-2"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      "data-cy": "message-template-submit-button",
-      disabled: !(dirty && isValid) || isSubmitting,
-      label: t("neetoMessageTemplate.template.saveChanges"),
-      loading: isSubmitting,
-      type: "submit"
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+    required: true,
+    label: t("neetoMessageTemplate.template.templateName"),
+    name: "name",
+    ref: setInitialFocusField
+  }), isEmailTemplate && /*#__PURE__*/React__default["default"].createElement(FormikAdaptiveInput, {
+    required: true,
+    label: t("neetoMessageTemplate.template.emailSubject"),
+    name: "subject"
+  }), /*#__PURE__*/React__default["default"].createElement(neetoEditor.FormikEditor, {
+    hideSlashCommands: true,
+    required: true,
+    contentClassName: "max-h-40",
+    defaults: isEmailTemplate ? undefined : [],
+    label: messageBodyLabel,
+    name: "body",
+    ref: editorRef,
+    rows: DEFAULT_EDITOR_ROW_COUNT,
+    variables: templateVariables
+  }), isTestTemplateVisible && /*#__PURE__*/React__default["default"].createElement(TestMessage, {
+    customFields: customFields,
+    handleSubmitTestTemplate: handleSubmitTestTemplate,
+    isEmailTemplate: isEmailTemplate,
+    isTestMessageLoading: isTestMessageLoading,
+    isTestingTemplateDisabled: isTestingTemplateDisabled
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
+    className: "absolute bottom-0 left-0"
+  }, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
+    cancelButtonProps: {
       "data-cy": "message-template-reset-button",
-      label: t("neetoMessageTemplate.template.cancel"),
-      style: "text",
-      type: "reset",
       onClick: onClose
-    })));
-  });
+    },
+    submitButtonProps: {
+      "data-cy": "message-template-submit-button"
+    }
+  })));
 };
 
 var AddEdit = function AddEdit(_ref) {
@@ -3355,19 +3346,20 @@ var List = function List(_ref) {
     }
   })) : /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, _extends({}, !isFilterApplied && {
     primaryButtonProps: {
       label: addText,
       onClick: function onClick() {
         return setManageTemplatePane(ramda.assoc("isOpen", true));
       }
-    },
+    }
+  }, {
     title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
       type: emptyStateLabel
     }) : t("neetoMessageTemplate.template.emptyState", {
       type: emptyStateLabel
     })
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
+  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
     isOpen: isDelete,
     isSubmitting: isDeleting,
     submitButtonLabel: t("neetoMessageTemplate.template.delete"),
@@ -3418,6 +3410,8 @@ var MessageTemplates = function MessageTemplates(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     isFilterPaneOpen = _useState4[0],
     setIsFilterPaneOpen = _useState4[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   var _useFilters = useFilters(),
     searchKeywordProps = _useFilters.searchKeywordProps,
     filterColumns = _useFilters.filterColumns,
@@ -3469,12 +3463,12 @@ var MessageTemplates = function MessageTemplates(_ref) {
       onClick: handleActionClick
     })
   }), /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"], {
-    leftActionBlock: /*#__PURE__*/React__default["default"].createElement(neetoFiltersFrontend.Bar, {
-      columns: filterColumns,
-      keyword: searchKeywordProps,
-      setIsPaneOpen: setIsFilterPaneOpen,
-      onChange: handleChange
-    }),
+    leftActionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      component: "h4"
+    }, t("neetoMessageTemplate.template.messageTemplatesWithCount", {
+      type: MESSAGE_TYPES[type],
+      count: templatesCount
+    })),
     rightActionBlock: /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"].RightBlock, {
       dataProps: {
         totalCount: isFilterApplied ? null : templatesCount
@@ -3487,6 +3481,11 @@ var MessageTemplates = function MessageTemplates(_ref) {
         onChange: handleChange
       }
     })
+  }), /*#__PURE__*/React__default["default"].createElement(neetoFiltersFrontend.Bar, {
+    columns: filterColumns,
+    keyword: searchKeywordProps,
+    setIsPaneOpen: setIsFilterPaneOpen,
+    onChange: handleChange
   }), /*#__PURE__*/React__default["default"].createElement(List, {
     addText: addText,
     isFilterApplied: isFilterApplied,
@@ -3577,8 +3576,7 @@ var EmailAndSms = function EmailAndSms(_ref) {
       onSubmit: handleSubmit
     }
   }, function (_ref4) {
-    var isSubmitting = _ref4.isSubmitting,
-      setValues = _ref4.setValues,
+    var setValues = _ref4.setValues,
       values = _ref4.values;
     var handleTemplateChange = function handleTemplateChange(value) {
       if (!value) return;
@@ -3615,19 +3613,16 @@ var EmailAndSms = function EmailAndSms(_ref) {
       rows: DEFAULT_EDITOR_ROW_COUNT,
       variables: templateVariables
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
-      className: "absolute bottom-0 left-0 flex gap-x-2"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      "data-cy": "message-template-send-button",
-      disabled: isSubmitting,
-      label: t("neetoMessageTemplate.template.send"),
-      loading: isSubmitting,
-      type: "submit"
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      "data-cy": "message-template-cancel-button",
-      label: t("neetoMessageTemplate.template.cancel"),
-      style: "text",
-      type: "reset",
-      onClick: onClose
+      className: "absolute bottom-0 left-0"
+    }, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
+      cancelButtonProps: {
+        "data-cy": "message-template-cancel-button",
+        onClick: onClose
+      },
+      submitButtonProps: {
+        "data-cy": "message-template-send-button",
+        label: t("neetoMessageTemplate.template.send")
+      }
     })));
   });
 };
@@ -3641,7 +3636,9 @@ var Whatsapp = function Whatsapp(_ref) {
     handleSubmit = _ref.handleSubmit,
     customFields = _ref.customFields,
     customFieldsInitialValues = _ref.customFieldsInitialValues,
-    customFieldsValidationSchema = _ref.customFieldsValidationSchema;
+    customFieldsValidationSchema = _ref.customFieldsValidationSchema,
+    _ref$helpDocUrl = _ref.helpDocUrl,
+    helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var getInitialVariableComponents = function getInitialVariableComponents(variables) {
@@ -3670,6 +3667,15 @@ var Whatsapp = function Whatsapp(_ref) {
   if (ramda.isEmpty(templates)) {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, null, t("neetoMessageTemplate.template.emptyState", {
       type: t("neetoMessageTemplate.template.whatsappTemplates")
+    }), " ", helpDocUrl && /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
+      i18nKey: "neetoMessageTemplate.template.whatsapp.helpDocText",
+      components: {
+        Link: /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+          size: "large",
+          style: "link",
+          to: helpDocUrl
+        })
+      }
     })), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
       className: "absolute bottom-0 left-0"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
@@ -3688,8 +3694,7 @@ var Whatsapp = function Whatsapp(_ref) {
       onSubmit: handleSubmit
     }
   }, function (_ref3) {
-    var isSubmitting = _ref3.isSubmitting,
-      values = _ref3.values,
+    var values = _ref3.values,
       setValues = _ref3.setValues;
     var handleTemplateChange = function handleTemplateChange(value) {
       if (!value) return;
@@ -3739,19 +3744,16 @@ var Whatsapp = function Whatsapp(_ref) {
         }));
       }));
     })), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
-      className: "absolute bottom-0 left-0 flex gap-x-2"
-    }, /*#__PURE__*/React__default["default"].createElement(formik$1.Button, {
-      "data-cy": "message-template-send-button",
-      disabled: isSubmitting,
-      label: t("neetoMessageTemplate.template.send"),
-      loading: isSubmitting,
-      type: "submit"
-    }), /*#__PURE__*/React__default["default"].createElement(formik$1.Button, {
-      "data-cy": "message-template-cancel-button",
-      label: t("neetoMessageTemplate.template.cancel"),
-      style: "text",
-      type: "reset",
-      onClick: onClose
+      className: "absolute bottom-0 left-0"
+    }, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
+      cancelButtonProps: {
+        "data-cy": "message-template-cancel-button",
+        onClick: onClose
+      },
+      submitButtonProps: {
+        "data-cy": "message-template-send-button",
+        label: t("neetoMessageTemplate.template.send")
+      }
     })));
   });
 };
@@ -3774,7 +3776,9 @@ var SendMessagePane = function SendMessagePane(_ref) {
     _ref$templateVariable = _ref.templateVariables,
     templateVariables = _ref$templateVariable === void 0 ? {} : _ref$templateVariable,
     _ref$ownerId = _ref.ownerId,
-    ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId;
+    ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId,
+    _ref$helpDocUrl = _ref.helpDocUrl,
+    helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var initialFocusField = React.useRef();
@@ -3805,6 +3809,7 @@ var SendMessagePane = function SendMessagePane(_ref) {
     customFieldsInitialValues: customFieldsInitialValues,
     customFieldsValidationSchema: customFieldsValidationSchema,
     handleSubmit: handleSubmit,
+    helpDocUrl: helpDocUrl,
     onClose: onClose,
     templates: templates
   }) : /*#__PURE__*/React__default["default"].createElement(EmailAndSms, {
@@ -4089,10 +4094,9 @@ var Form = function Form(_ref) {
     name: "additionalData"
   }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, null, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
     cancelButtonProps: {
-      onClick: onClose,
-      disabled: isMutating
+      onClick: onClose
     },
-    className: "space-x-2"
+    isSubmitting: isMutating
   }))));
 };
 
@@ -4210,15 +4214,15 @@ var ApiTemplates = function ApiTemplates(_ref) {
       placeholder: t("neetoMessageTemplate.template.searchApiTemplates")
     }
   }), /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"], {
-    leftActionBlock: /*#__PURE__*/React__default["default"].createElement(neetoFiltersFrontend.Bar, {
-      columns: FILTER_COLUMNS,
-      keyword: searchKeywordProps,
-      setIsPaneOpen: setIsFiltersPaneOpen,
-      onChange: handleFiltersChange
-    }),
+    leftActionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      component: "h4"
+    }, t("neetoMessageTemplate.template.messageTemplatesWithCount", {
+      type: t("messageType.api"),
+      count: totalCount
+    })),
     rightActionBlock: /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"].RightBlock, {
       dataProps: {
-        totalCount: totalCount
+        totalCount: isFilterApplied ? null : totalCount
       },
       filterProps: {
         columns: FILTER_COLUMNS,
@@ -4228,6 +4232,11 @@ var ApiTemplates = function ApiTemplates(_ref) {
         onChange: handleFiltersChange
       }
     })
+  }), /*#__PURE__*/React__default["default"].createElement(neetoFiltersFrontend.Bar, {
+    columns: FILTER_COLUMNS,
+    keyword: searchKeywordProps,
+    setIsPaneOpen: setIsFiltersPaneOpen,
+    onChange: handleFiltersChange
   }), neetoCist.isNotEmpty(templates) ? /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
     hasPagination: totalCount > pageParams.size
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
@@ -4253,19 +4262,20 @@ var ApiTemplates = function ApiTemplates(_ref) {
     })
   })) : /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, _extends({}, !isFilterApplied && {
     primaryButtonProps: {
       label: t("neetoMessageTemplate.api.addApiTemplate"),
       onClick: function onClick() {
         return setIsFormPaneOpen(true);
       }
-    },
+    }
+  }, {
     title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
       type: t("neetoMessageTemplate.template.apiTemplates")
     }) : t("neetoMessageTemplate.template.emptyState", {
       type: t("neetoMessageTemplate.template.apiTemplates")
     })
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
     isOpen: isFormPaneOpen,
     onClose: handleCloseDeleteAlertAndFormPane
   }, function (_ref3) {
@@ -4305,15 +4315,6 @@ var SEND_TO_API_FORM_VALIDATION_SCHEMA = yup__namespace.object({
   }))
 });
 
-var buildSendToApiFormInitialValues = function buildSendToApiFormInitialValues(template) {
-  if (ramda.isEmpty(template)) return SEND_TO_API_FORM_INITIAL_VALUES;
-  var additionalData = ramda.isEmpty(template.additionalData) ? [ADDITIONAL_DATA_INITIAL_VALUE] : template.additionalData;
-  return {
-    endpoint: template.endpoint,
-    additionalData: additionalData
-  };
-};
-
 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 SendToApiPane = function SendToApiPane(props) {
@@ -4336,10 +4337,6 @@ var SendToApiForm = function SendToApiForm(_ref) {
     setFocusField = _ref.paneProps.setFocusField;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useState = React.useState({}),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedTemplate = _useState2[0],
-    setSelectedTemplate = _useState2[1];
   var _useFetchTemplates = useFetchTemplates({
       status: "active",
       templateType: API_TEMPLATE_TYPE,
@@ -4350,6 +4347,10 @@ var SendToApiForm = function SendToApiForm(_ref) {
     _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
     templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3,
     isLoadingTemplates = _useFetchTemplates.isLoading;
+  var handleTemplateChange = function handleTemplateChange(setFieldValue, template) {
+    setFieldValue("endpoint", template.endpoint);
+    setFieldValue("additionalData", template.additionalData);
+  };
   var handleSubmit = function handleSubmit(formValues) {
     var additionalDataModifiedFormValues = ramda.modify("additionalData", rejectEmptyKeyValuePairs, formValues);
     onSubmit(additionalDataModifiedFormValues);
@@ -4359,42 +4360,44 @@ var SendToApiForm = function SendToApiForm(_ref) {
     weight: "semibold"
   }, t("neetoMessageTemplate.api.sendToApi"))), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
     formikProps: {
-      initialValues: buildSendToApiFormInitialValues(selectedTemplate),
-      enableReinitialize: true,
+      initialValues: SEND_TO_API_FORM_INITIAL_VALUES,
       validationSchema: SEND_TO_API_FORM_VALIDATION_SCHEMA,
       onSubmit: handleSubmit
     }
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-full space-y-5"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
-    innerRef: setFocusField,
-    isLoading: isLoadingTemplates,
-    label: t("neetoMessageTemplate.template.title"),
-    options: neetoCist.renameKeys({
-      name: "label",
-      id: "value"
-    }, templates),
-    placeholder: t("neetoMessageTemplate.sendMessage.selectTemplate"),
-    onChange: setSelectedTemplate
-  }), /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
-    required: true,
-    label: t("neetoMessageTemplate.api.endpoint"),
-    name: "endpoint",
-    placeholder: SAMPLE_URL
-  }), /*#__PURE__*/React__default["default"].createElement(KeyValuePairs, {
-    label: t("neetoMessageTemplate.api.additionalData"),
-    name: "additionalData"
-  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, null, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
-    className: "space-x-2",
-    cancelButtonProps: {
-      disabled: isSubmitting,
-      onClick: onClose
-    },
-    submitButtonProps: {
-      disabled: isSubmitting,
-      label: t("neetoMessageTemplate.template.send")
-    }
-  }))));
+  }, function (_ref2) {
+    var setFieldValue = _ref2.setFieldValue;
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "w-full space-y-5"
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
+      innerRef: setFocusField,
+      isLoading: isLoadingTemplates,
+      label: t("neetoMessageTemplate.template.title"),
+      options: neetoCist.renameKeys({
+        name: "label",
+        id: "value"
+      }, templates),
+      placeholder: t("neetoMessageTemplate.sendMessage.selectTemplate"),
+      onChange: function onChange(template) {
+        return handleTemplateChange(setFieldValue, template);
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+      required: true,
+      label: t("neetoMessageTemplate.api.endpoint"),
+      name: "endpoint",
+      placeholder: SAMPLE_URL
+    }), /*#__PURE__*/React__default["default"].createElement(KeyValuePairs, {
+      label: t("neetoMessageTemplate.api.additionalData"),
+      name: "additionalData"
+    }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, null, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
+      isSubmitting: isSubmitting,
+      cancelButtonProps: {
+        onClick: onClose
+      },
+      submitButtonProps: {
+        label: t("neetoMessageTemplate.template.send")
+      }
+    })));
+  }));
 };
 
 exports.ApiTemplates = ApiTemplates;