@bigbinary/neeto-message-templates-frontend 0.6.7 → 0.7.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.
Files changed (7) hide show
  1. package/app/javascript/src/translations/en.json +3 -0
  2. package/dist/index.cjs.js +108 -66
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.js +39 -11
  5. package/dist/index.js.map +1 -1
  6. package/package.json +13 -12
  7. package/types.d.ts +1 -0
package/app/javascript/src/translations/en.json CHANGED
@@ -34,6 +34,9 @@
34
34
  "whatsappTemplate": "Whatsapp Template",
35
35
  "apiTemplates": "API templates",
36
36
  "emptyState": "There are no {{type, anyCase}} to show.",
37
+ "whatsapp": {
38
+ "helpDocText": "You can create and add new WhatsApp templates by referring to this <Link>help document</Link>."
39
+ },
37
40
  "sendTestEmail": "Send test email",
38
41
  "sendTestSms": "Send test SMS",
39
42
  "filtersEmptyState": "There are no {{type, anyCase}} to show for applied filters.",
package/dist/index.cjs.js CHANGED
@@ -8,7 +8,8 @@ var neetoFiltersFrontend = require('@bigbinary/neeto-filters-frontend');
8
8
  var Container = require('@bigbinary/neeto-molecules/Container');
9
9
  var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
10
10
  var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
11
- var neetoui = require('@bigbinary/neetoui');
11
+ var Button = require('@bigbinary/neetoui/Button');
12
+ var Typography = require('@bigbinary/neetoui/Typography');
12
13
  var ramda = require('ramda');
13
14
  var reactI18next = require('react-i18next');
14
15
  var i18next = require('i18next');
@@ -19,13 +20,24 @@ var reactQuery = require('react-query');
19
20
  var axios = require('axios');
20
21
  var require$$0 = require('util');
21
22
  var zustand = require('zustand');
23
+ var Pane = require('@bigbinary/neetoui/Pane');
22
24
  var neetoEditor = require('@bigbinary/neeto-editor');
23
- var formik$1 = require('@bigbinary/neetoui/formik');
25
+ var NeetoUIForm = require('@bigbinary/neetoui/formik/Form');
26
+ var Input = require('@bigbinary/neetoui/formik/Input');
27
+ var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
24
28
  var formik = require('formik');
29
+ var Textarea = require('@bigbinary/neetoui/formik/Textarea');
25
30
  var PhoneNumber = require('@bigbinary/neeto-molecules/PhoneNumber');
26
31
  var yup = require('yup');
27
32
  var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
33
+ var Alert = require('@bigbinary/neetoui/Alert');
34
+ var Table = require('@bigbinary/neetoui/Table');
35
+ var NoData = require('@bigbinary/neetoui/NoData');
36
+ var Select = require('@bigbinary/neetoui/Select');
37
+ var Textarea$1 = require('@bigbinary/neetoui/Textarea');
38
+ var Select$1 = require('@bigbinary/neetoui/formik/Select');
28
39
  var neetoIcons = require('@bigbinary/neeto-icons');
40
+ var Label = require('@bigbinary/neetoui/Label');
29
41
 
30
42
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
31
43
 
@@ -51,11 +63,25 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
51
63
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
52
64
  var NeetoHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoHeader);
53
65
  var SubHeader__default = /*#__PURE__*/_interopDefaultLegacy(SubHeader);
66
+ var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
67
+ var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
54
68
  var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
55
69
  var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
56
70
  var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
71
+ var Pane__default = /*#__PURE__*/_interopDefaultLegacy(Pane);
72
+ var NeetoUIForm__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUIForm);
73
+ var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
74
+ var ActionBlock__default = /*#__PURE__*/_interopDefaultLegacy(ActionBlock);
75
+ var Textarea__default = /*#__PURE__*/_interopDefaultLegacy(Textarea);
57
76
  var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
58
77
  var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
78
+ var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
79
+ var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
80
+ var NoData__default = /*#__PURE__*/_interopDefaultLegacy(NoData);
81
+ var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
82
+ var Textarea__default$1 = /*#__PURE__*/_interopDefaultLegacy(Textarea$1);
83
+ var Select__default$1 = /*#__PURE__*/_interopDefaultLegacy(Select$1);
84
+ var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
59
85
 
60
86
  function _typeof$1(o) {
61
87
  "@babel/helpers - typeof";
@@ -2462,7 +2488,7 @@ var buildTableColumnData$1 = function buildTableColumnData(setManageTemplatePane
2462
2488
  render: function render(name, template) {
2463
2489
  return /*#__PURE__*/React__default["default"].createElement("div", {
2464
2490
  className: "flex items-center justify-between gap-x-3"
2465
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
2491
+ }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
2466
2492
  label: name,
2467
2493
  style: "link",
2468
2494
  onClick: function onClick() {
@@ -2552,7 +2578,7 @@ var FormikAdaptiveInput = function FormikAdaptiveInput(_ref) {
2552
2578
  event.preventDefault();
2553
2579
  submitForm();
2554
2580
  };
2555
- return /*#__PURE__*/React__default["default"].createElement(formik$1.Textarea, _extends({
2581
+ return /*#__PURE__*/React__default["default"].createElement(Textarea__default["default"], _extends({
2556
2582
  label: label,
2557
2583
  name: name,
2558
2584
  className: "neeto-message-templates-nano-adaptive-input",
@@ -3037,7 +3063,7 @@ var TestMessage = function TestMessage(_ref) {
3037
3063
  };
3038
3064
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
3039
3065
  className: "neeto-ui-flex left-0 flex items-start gap-x-2"
3040
- }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, _extends({
3066
+ }, /*#__PURE__*/React__default["default"].createElement(Input__default["default"], _extends({
3041
3067
  "data-cy": "message-template-test-input"
3042
3068
  }, !isEmailTemplate && {
3043
3069
  helpText: t("neetoMessageTemplate.template.phoneNumberHelpText")
@@ -3046,7 +3072,7 @@ var TestMessage = function TestMessage(_ref) {
3046
3072
  placeholder: t(isEmailTemplate ? "neetoMessageTemplate.template.emailAddress" : "neetoMessageTemplate.template.phoneNumber"),
3047
3073
  onKeyDown: handleKeyDown,
3048
3074
  onKeyUp: handleTestValidation
3049
- })), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
3075
+ })), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
3050
3076
  "data-cy": "message-template-test-button",
3051
3077
  disabled: isTestTemplateButtonDisabled,
3052
3078
  loading: isTestMessageLoading,
@@ -3056,7 +3082,7 @@ var TestMessage = function TestMessage(_ref) {
3056
3082
  onClick: function onClick() {
3057
3083
  return handleSubmitTestTemplate(values);
3058
3084
  }
3059
- })), !isEmailTemplate && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
3085
+ })), !isEmailTemplate && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
3060
3086
  style: "body2"
3061
3087
  }, t("neetoMessageTemplate.sendMessage.testSmsNote")), customFields);
3062
3088
  };
@@ -3106,7 +3132,7 @@ var Form$1 = function Form(_ref) {
3106
3132
  });
3107
3133
  };
3108
3134
  var messageBodyLabel = isEmailTemplate ? t("neetoMessageTemplate.template.emailBody") : t("neetoMessageTemplate.template.smsBody");
3109
- return /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
3135
+ return /*#__PURE__*/React__default["default"].createElement(NeetoUIForm__default["default"], {
3110
3136
  formProps: {
3111
3137
  noValidate: true,
3112
3138
  className: "flex w-full flex-col gap-y-4 pb-6"
@@ -3118,7 +3144,7 @@ var Form$1 = function Form(_ref) {
3118
3144
  validateOnChange: true,
3119
3145
  onSubmit: handleSubmit
3120
3146
  }
3121
- }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
3147
+ }, /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
3122
3148
  required: true,
3123
3149
  label: t("neetoMessageTemplate.template.templateName"),
3124
3150
  name: "name",
@@ -3143,9 +3169,9 @@ var Form$1 = function Form(_ref) {
3143
3169
  isEmailTemplate: isEmailTemplate,
3144
3170
  isTestMessageLoading: isTestMessageLoading,
3145
3171
  isTestingTemplateDisabled: isTestingTemplateDisabled
3146
- }), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
3172
+ }), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Footer, {
3147
3173
  className: "absolute bottom-0 left-0"
3148
- }, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
3174
+ }, /*#__PURE__*/React__default["default"].createElement(ActionBlock__default["default"], {
3149
3175
  cancelButtonProps: {
3150
3176
  "data-cy": "message-template-reset-button",
3151
3177
  onClick: onClose
@@ -3177,14 +3203,14 @@ var AddEdit = function AddEdit(_ref) {
3177
3203
  isEdit = manageTemplatePane.isEdit,
3178
3204
  template = manageTemplatePane.template;
3179
3205
  var label = isEdit ? editText : addText;
3180
- return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
3206
+ return /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], {
3181
3207
  isOpen: isOpen,
3182
3208
  onClose: onClose,
3183
3209
  initialFocusRef: initialFocusField
3184
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
3210
+ }, /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
3185
3211
  style: "h2",
3186
3212
  weight: "semibold"
3187
- }, label)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement(Form$1, {
3213
+ }, label)), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Body, null, /*#__PURE__*/React__default["default"].createElement(Form$1, {
3188
3214
  createUpdateTemplate: createUpdateTemplate,
3189
3215
  customFields: customFields,
3190
3216
  handleSubmitTestTemplate: handleSubmitTestTemplate,
@@ -3327,7 +3353,7 @@ var List = function List(_ref) {
3327
3353
  };
3328
3354
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !ramda.isEmpty(templates) ? /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
3329
3355
  hasPagination: totalCount > pageSize
3330
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
3356
+ }, /*#__PURE__*/React__default["default"].createElement(Table__default["default"], {
3331
3357
  totalCount: totalCount,
3332
3358
  fixedHeight: true,
3333
3359
  currentPageNumber: pageIndex,
@@ -3346,7 +3372,7 @@ var List = function List(_ref) {
3346
3372
  }
3347
3373
  })) : /*#__PURE__*/React__default["default"].createElement("div", {
3348
3374
  className: "flex h-full w-full items-center justify-center"
3349
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, _extends({}, !isFilterApplied && {
3375
+ }, /*#__PURE__*/React__default["default"].createElement(NoData__default["default"], _extends({}, !isFilterApplied && {
3350
3376
  primaryButtonProps: {
3351
3377
  label: addText,
3352
3378
  onClick: function onClick() {
@@ -3359,7 +3385,7 @@ var List = function List(_ref) {
3359
3385
  }) : t("neetoMessageTemplate.template.emptyState", {
3360
3386
  type: emptyStateLabel
3361
3387
  })
3362
- }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
3388
+ }))), /*#__PURE__*/React__default["default"].createElement(Alert__default["default"], {
3363
3389
  isOpen: isDelete,
3364
3390
  isSubmitting: isDeleting,
3365
3391
  submitButtonLabel: t("neetoMessageTemplate.template.delete"),
@@ -3457,13 +3483,13 @@ var MessageTemplates = function MessageTemplates(_ref) {
3457
3483
  searchProps: renderSearchProps(label, value),
3458
3484
  size: "small",
3459
3485
  title: label,
3460
- actionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
3486
+ actionBlock: /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
3461
3487
  "data-cy": "add-".concat(neetoCist.hyphenate(value), "-button"),
3462
3488
  label: addText,
3463
3489
  onClick: handleActionClick
3464
3490
  })
3465
3491
  }), /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"], {
3466
- leftActionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
3492
+ leftActionBlock: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
3467
3493
  component: "h4"
3468
3494
  }, t("neetoMessageTemplate.template.messageTemplatesWithCount", {
3469
3495
  type: MESSAGE_TYPES[type],
@@ -3565,7 +3591,7 @@ var EmailAndSms = function EmailAndSms(_ref) {
3565
3591
  var updatedInitialValues = ramda.mergeAll([INITIAL_VALUES, customFieldsInitialValues]);
3566
3592
  var updatedValidationSchema = yup__namespace.object().shape(_objectSpread$3(_objectSpread$3({}, SEND_MESSAGE_FORM_SCHEMA === null || SEND_MESSAGE_FORM_SCHEMA === void 0 ? void 0 : SEND_MESSAGE_FORM_SCHEMA.fields), customFieldsValidationSchema === null || customFieldsValidationSchema === void 0 ? void 0 : customFieldsValidationSchema.fields));
3567
3593
  var initialValueKeys = Object.keys(INITIAL_VALUES);
3568
- return /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
3594
+ return /*#__PURE__*/React__default["default"].createElement(NeetoUIForm__default["default"], {
3569
3595
  formProps: {
3570
3596
  noValidate: true,
3571
3597
  className: "flex w-full flex-col gap-y-4 pb-6"
@@ -3587,7 +3613,7 @@ var EmailAndSms = function EmailAndSms(_ref) {
3587
3613
  setValues(_objectSpread$3(_objectSpread$3({}, template), customFieldValues));
3588
3614
  editorRef.current.editor.commands.setContent(template.body);
3589
3615
  };
3590
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
3616
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
3591
3617
  isClearable: true,
3592
3618
  isSearchable: true,
3593
3619
  innerRef: setInitialFocusField,
@@ -3598,7 +3624,7 @@ var EmailAndSms = function EmailAndSms(_ref) {
3598
3624
  }, templates),
3599
3625
  placeholder: t("neetoMessageTemplate.sendMessage.selectTemplate"),
3600
3626
  onChange: handleTemplateChange
3601
- }), customFields, isEmailTemplate && /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
3627
+ }), customFields, isEmailTemplate && /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
3602
3628
  required: true,
3603
3629
  label: t("neetoMessageTemplate.template.subject"),
3604
3630
  name: "subject"
@@ -3612,9 +3638,9 @@ var EmailAndSms = function EmailAndSms(_ref) {
3612
3638
  ref: editorRef,
3613
3639
  rows: DEFAULT_EDITOR_ROW_COUNT,
3614
3640
  variables: templateVariables
3615
- }), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
3641
+ }), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Footer, {
3616
3642
  className: "absolute bottom-0 left-0"
3617
- }, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
3643
+ }, /*#__PURE__*/React__default["default"].createElement(ActionBlock__default["default"], {
3618
3644
  cancelButtonProps: {
3619
3645
  "data-cy": "message-template-cancel-button",
3620
3646
  onClick: onClose
@@ -3636,7 +3662,9 @@ var Whatsapp = function Whatsapp(_ref) {
3636
3662
  handleSubmit = _ref.handleSubmit,
3637
3663
  customFields = _ref.customFields,
3638
3664
  customFieldsInitialValues = _ref.customFieldsInitialValues,
3639
- customFieldsValidationSchema = _ref.customFieldsValidationSchema;
3665
+ customFieldsValidationSchema = _ref.customFieldsValidationSchema,
3666
+ _ref$helpDocUrl = _ref.helpDocUrl,
3667
+ helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl;
3640
3668
  var _useTranslation = reactI18next.useTranslation(),
3641
3669
  t = _useTranslation.t;
3642
3670
  var getInitialVariableComponents = function getInitialVariableComponents(variables) {
@@ -3662,17 +3690,27 @@ var Whatsapp = function Whatsapp(_ref) {
3662
3690
  };
3663
3691
  var updatedInitialValues = ramda.mergeAll([initialFormValues, customFieldsInitialValues]);
3664
3692
  var updatedValidationSchema = yup__namespace.object().shape(_objectSpread$2(_objectSpread$2({}, WHATSAPP_MESSAGE_FORM_VALIDATIONS_SCHEMA === null || WHATSAPP_MESSAGE_FORM_VALIDATIONS_SCHEMA === void 0 ? void 0 : WHATSAPP_MESSAGE_FORM_VALIDATIONS_SCHEMA.fields), customFieldsValidationSchema === null || customFieldsValidationSchema === void 0 ? void 0 : customFieldsValidationSchema.fields));
3693
+ var initialValueKeys = Object.keys(initialFormValues);
3665
3694
  if (ramda.isEmpty(templates)) {
3666
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, null, t("neetoMessageTemplate.template.emptyState", {
3695
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], null, t("neetoMessageTemplate.template.emptyState", {
3667
3696
  type: t("neetoMessageTemplate.template.whatsappTemplates")
3668
- })), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
3697
+ }), " ", helpDocUrl && /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
3698
+ i18nKey: "neetoMessageTemplate.template.whatsapp.helpDocText",
3699
+ components: {
3700
+ Link: /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
3701
+ size: "large",
3702
+ style: "link",
3703
+ to: helpDocUrl
3704
+ })
3705
+ }
3706
+ })), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Footer, {
3669
3707
  className: "absolute bottom-0 left-0"
3670
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
3708
+ }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
3671
3709
  label: t("neetoMessageTemplate.template.close"),
3672
3710
  onClick: onClose
3673
3711
  })));
3674
3712
  }
3675
- return /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
3713
+ return /*#__PURE__*/React__default["default"].createElement(NeetoUIForm__default["default"], {
3676
3714
  formProps: {
3677
3715
  noValidate: true,
3678
3716
  className: "flex w-full flex-col gap-y-4 pb-6"
@@ -3690,16 +3728,17 @@ var Whatsapp = function Whatsapp(_ref) {
3690
3728
  var template = neetoCist.findBy({
3691
3729
  id: value === null || value === void 0 ? void 0 : value.value
3692
3730
  }, templates);
3693
- setValues({
3731
+ var customFieldValues = ramda.omit(initialValueKeys, values);
3732
+ setValues(_objectSpread$2({
3694
3733
  selectedTemplate: {
3695
3734
  label: template.name,
3696
3735
  value: template.id
3697
3736
  },
3698
3737
  templateMessage: getTemplateMessage(template.components),
3699
3738
  variableContents: getInitialVariableComponents(template.variableCount)
3700
- });
3739
+ }, customFieldValues));
3701
3740
  };
3702
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(formik$1.Select, {
3741
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Select__default$1["default"], {
3703
3742
  required: true,
3704
3743
  defaultValue: initialFormValues.selectedTemplate,
3705
3744
  label: t("neetoMessageTemplate.template.title"),
@@ -3709,7 +3748,7 @@ var Whatsapp = function Whatsapp(_ref) {
3709
3748
  id: "value"
3710
3749
  }, templates),
3711
3750
  onChange: handleTemplateChange
3712
- }), customFields, /*#__PURE__*/React__default["default"].createElement(neetoui.Textarea, {
3751
+ }), customFields, /*#__PURE__*/React__default["default"].createElement(Textarea__default$1["default"], {
3713
3752
  disabled: true,
3714
3753
  nakedTextarea: true,
3715
3754
  label: t("neetoMessageTemplate.template.preview"),
@@ -3718,23 +3757,23 @@ var Whatsapp = function Whatsapp(_ref) {
3718
3757
  return /*#__PURE__*/React__default["default"].createElement("div", {
3719
3758
  className: "flex flex-col gap-y-2",
3720
3759
  key: group
3721
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
3760
+ }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
3722
3761
  style: "h4"
3723
3762
  }, t("neetoMessageTemplate.template.resolveVariable", {
3724
3763
  type: neetoCist.capitalize(group)
3725
3764
  })), values.variableContents[group].map(function (_, index) {
3726
3765
  return /*#__PURE__*/React__default["default"].createElement("div", {
3727
3766
  key: "".concat(group, "-").concat(index)
3728
- }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
3767
+ }, /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
3729
3768
  required: true,
3730
3769
  key: "".concat(group, "-").concat(index),
3731
3770
  label: "{{".concat(index + 1, "}}"),
3732
3771
  name: "variableContents.".concat(group, ".").concat(index)
3733
3772
  }));
3734
3773
  }));
3735
- })), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
3774
+ })), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Footer, {
3736
3775
  className: "absolute bottom-0 left-0"
3737
- }, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
3776
+ }, /*#__PURE__*/React__default["default"].createElement(ActionBlock__default["default"], {
3738
3777
  cancelButtonProps: {
3739
3778
  "data-cy": "message-template-cancel-button",
3740
3779
  onClick: onClose
@@ -3765,7 +3804,9 @@ var SendMessagePane = function SendMessagePane(_ref) {
3765
3804
  _ref$templateVariable = _ref.templateVariables,
3766
3805
  templateVariables = _ref$templateVariable === void 0 ? {} : _ref$templateVariable,
3767
3806
  _ref$ownerId = _ref.ownerId,
3768
- ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId;
3807
+ ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId,
3808
+ _ref$helpDocUrl = _ref.helpDocUrl,
3809
+ helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl;
3769
3810
  var _useTranslation = reactI18next.useTranslation(),
3770
3811
  t = _useTranslation.t;
3771
3812
  var initialFocusField = React.useRef();
@@ -3784,18 +3825,19 @@ var SendMessagePane = function SendMessagePane(_ref) {
3784
3825
  _useFetchTemplates$da2 = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da,
3785
3826
  _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
3786
3827
  templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3;
3787
- return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
3828
+ return /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], {
3788
3829
  isOpen: isOpen,
3789
3830
  onClose: onClose,
3790
3831
  initialFocusRef: initialFocusField
3791
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
3832
+ }, /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
3792
3833
  style: "h2",
3793
3834
  weight: "semibold"
3794
- }, t("neetoMessageTemplate.common.send"), " ", MESSAGE_TYPES[type])), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, isWhatsappTemplate ? /*#__PURE__*/React__default["default"].createElement(Whatsapp, {
3835
+ }, t("neetoMessageTemplate.common.send"), " ", MESSAGE_TYPES[type])), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Body, null, isWhatsappTemplate ? /*#__PURE__*/React__default["default"].createElement(Whatsapp, {
3795
3836
  customFields: customFields,
3796
3837
  customFieldsInitialValues: customFieldsInitialValues,
3797
3838
  customFieldsValidationSchema: customFieldsValidationSchema,
3798
3839
  handleSubmit: handleSubmit,
3840
+ helpDocUrl: helpDocUrl,
3799
3841
  onClose: onClose,
3800
3842
  templates: templates
3801
3843
  }) : /*#__PURE__*/React__default["default"].createElement(EmailAndSms, {
@@ -3904,19 +3946,19 @@ var KeyValuePairs = reactUtils.withT(function (_ref) {
3904
3946
  var showDeleteButton = data.length > 1 || isKeyOrValueNotEmpty(data[0]);
3905
3947
  return /*#__PURE__*/React__default["default"].createElement("div", {
3906
3948
  className: "space-y-2"
3907
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, null, label), data.map(function (_, index) {
3949
+ }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, label), data.map(function (_, index) {
3908
3950
  return /*#__PURE__*/React__default["default"].createElement("div", {
3909
3951
  className: "flex h-8 space-x-3",
3910
3952
  key: index
3911
- }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
3953
+ }, /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
3912
3954
  className: "w-2/5",
3913
3955
  name: "".concat(name, ".").concat(index, ".key"),
3914
3956
  placeholder: t("neetoMessageTemplate.api.key")
3915
- }), /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
3957
+ }), /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
3916
3958
  className: "w-3/5",
3917
3959
  name: "".concat(name, ".").concat(index, ".value"),
3918
3960
  placeholder: t("neetoMessageTemplate.api.value"),
3919
- suffix: showDeleteButton && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
3961
+ suffix: showDeleteButton && /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
3920
3962
  icon: neetoIcons.Delete,
3921
3963
  size: "small",
3922
3964
  style: "text",
@@ -3929,7 +3971,7 @@ var KeyValuePairs = reactUtils.withT(function (_ref) {
3929
3971
  }
3930
3972
  })
3931
3973
  }));
3932
- }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
3974
+ }), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
3933
3975
  className: "w-full justify-center",
3934
3976
  label: t("neetoMessageTemplate.api.addKeyValuePair"),
3935
3977
  style: "secondary",
@@ -3968,7 +4010,7 @@ var buildTableColumnData = function buildTableColumnData(_ref) {
3968
4010
  render: function render(name, apiTemplate) {
3969
4011
  return /*#__PURE__*/React__default["default"].createElement("div", {
3970
4012
  className: "flex items-center justify-between gap-x-3"
3971
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
4013
+ }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
3972
4014
  label: name,
3973
4015
  style: "link",
3974
4016
  onClick: function onClick() {
@@ -4054,23 +4096,23 @@ var Form = function Form(_ref) {
4054
4096
  createApiTemplate(payload, options);
4055
4097
  };
4056
4098
  var isMutating = isUpdating || isCreating;
4057
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
4099
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
4058
4100
  style: "h2",
4059
4101
  weight: "semibold"
4060
- }, isEdit ? t("neetoMessageTemplate.api.editApiTemplate") : t("neetoMessageTemplate.api.addApiTemplate"))), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
4102
+ }, isEdit ? t("neetoMessageTemplate.api.editApiTemplate") : t("neetoMessageTemplate.api.addApiTemplate"))), /*#__PURE__*/React__default["default"].createElement(NeetoUIForm__default["default"], {
4061
4103
  formikProps: {
4062
4104
  initialValues: buildApiTemplateInitialValues(isEdit, selectedApiTemplate),
4063
4105
  validationSchema: API_TEMPLATE_FORM_VALIDATION_SCHEMA,
4064
4106
  onSubmit: handleSubmit
4065
4107
  }
4066
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
4108
+ }, /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
4067
4109
  className: "w-full space-y-5"
4068
- }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
4110
+ }, /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
4069
4111
  required: true,
4070
4112
  label: t("neetoMessageTemplate.template.name"),
4071
4113
  name: "name",
4072
4114
  ref: setFocusField
4073
- }), /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
4115
+ }), /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
4074
4116
  required: true,
4075
4117
  label: t("neetoMessageTemplate.api.endpoint"),
4076
4118
  name: "endpoint",
@@ -4078,7 +4120,7 @@ var Form = function Form(_ref) {
4078
4120
  }), /*#__PURE__*/React__default["default"].createElement(KeyValuePairs, {
4079
4121
  label: t("neetoMessageTemplate.api.additionalData"),
4080
4122
  name: "additionalData"
4081
- }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, null, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
4123
+ }))), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Footer, null, /*#__PURE__*/React__default["default"].createElement(ActionBlock__default["default"], {
4082
4124
  cancelButtonProps: {
4083
4125
  onClick: onClose
4084
4126
  },
@@ -4190,7 +4232,7 @@ var ApiTemplates = function ApiTemplates(_ref) {
4190
4232
  breadcrumbs: breadcrumbs,
4191
4233
  size: "small",
4192
4234
  title: t("neetoMessageTemplate.template.apiTemplates"),
4193
- actionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
4235
+ actionBlock: /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
4194
4236
  label: t("neetoMessageTemplate.api.addApiTemplate"),
4195
4237
  onClick: function onClick() {
4196
4238
  return setIsFormPaneOpen(true);
@@ -4200,7 +4242,7 @@ var ApiTemplates = function ApiTemplates(_ref) {
4200
4242
  placeholder: t("neetoMessageTemplate.template.searchApiTemplates")
4201
4243
  }
4202
4244
  }), /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"], {
4203
- leftActionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
4245
+ leftActionBlock: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
4204
4246
  component: "h4"
4205
4247
  }, t("neetoMessageTemplate.template.messageTemplatesWithCount", {
4206
4248
  type: t("messageType.api"),
@@ -4225,7 +4267,7 @@ var ApiTemplates = function ApiTemplates(_ref) {
4225
4267
  onChange: handleFiltersChange
4226
4268
  }), neetoCist.isNotEmpty(templates) ? /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
4227
4269
  hasPagination: totalCount > pageParams.size
4228
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
4270
+ }, /*#__PURE__*/React__default["default"].createElement(Table__default["default"], {
4229
4271
  totalCount: totalCount,
4230
4272
  fixedHeight: true,
4231
4273
  currentPageNumber: pageParams.index,
@@ -4248,7 +4290,7 @@ var ApiTemplates = function ApiTemplates(_ref) {
4248
4290
  })
4249
4291
  })) : /*#__PURE__*/React__default["default"].createElement("div", {
4250
4292
  className: "flex h-full w-full items-center justify-center"
4251
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, _extends({}, !isFilterApplied && {
4293
+ }, /*#__PURE__*/React__default["default"].createElement(NoData__default["default"], _extends({}, !isFilterApplied && {
4252
4294
  primaryButtonProps: {
4253
4295
  label: t("neetoMessageTemplate.api.addApiTemplate"),
4254
4296
  onClick: function onClick() {
@@ -4261,7 +4303,7 @@ var ApiTemplates = function ApiTemplates(_ref) {
4261
4303
  }) : t("neetoMessageTemplate.template.emptyState", {
4262
4304
  type: t("neetoMessageTemplate.template.apiTemplates")
4263
4305
  })
4264
- }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
4306
+ }))), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], {
4265
4307
  isOpen: isFormPaneOpen,
4266
4308
  onClose: handleCloseDeleteAlertAndFormPane
4267
4309
  }, function (_ref3) {
@@ -4273,7 +4315,7 @@ var ApiTemplates = function ApiTemplates(_ref) {
4273
4315
  setFocusField: setFocusField,
4274
4316
  onClose: handleCloseDeleteAlertAndFormPane
4275
4317
  });
4276
- }), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
4318
+ }), /*#__PURE__*/React__default["default"].createElement(Alert__default["default"], {
4277
4319
  isOpen: isDeleteAlertOpen,
4278
4320
  isSubmitting: isDeleting,
4279
4321
  submitButtonLabel: t("neetoMessageTemplate.template.delete"),
@@ -4306,7 +4348,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
4306
4348
  var SendToApiPane = function SendToApiPane(props) {
4307
4349
  var isOpen = props.isOpen,
4308
4350
  onClose = props.onClose;
4309
- return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
4351
+ return /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], {
4310
4352
  isOpen: isOpen,
4311
4353
  onClose: onClose
4312
4354
  }, function (paneProps) {
@@ -4341,10 +4383,10 @@ var SendToApiForm = function SendToApiForm(_ref) {
4341
4383
  var additionalDataModifiedFormValues = ramda.modify("additionalData", rejectEmptyKeyValuePairs, formValues);
4342
4384
  onSubmit(additionalDataModifiedFormValues);
4343
4385
  };
4344
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
4386
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
4345
4387
  style: "h2",
4346
4388
  weight: "semibold"
4347
- }, t("neetoMessageTemplate.api.sendToApi"))), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
4389
+ }, t("neetoMessageTemplate.api.sendToApi"))), /*#__PURE__*/React__default["default"].createElement(NeetoUIForm__default["default"], {
4348
4390
  formikProps: {
4349
4391
  initialValues: SEND_TO_API_FORM_INITIAL_VALUES,
4350
4392
  validationSchema: SEND_TO_API_FORM_VALIDATION_SCHEMA,
@@ -4352,9 +4394,9 @@ var SendToApiForm = function SendToApiForm(_ref) {
4352
4394
  }
4353
4395
  }, function (_ref2) {
4354
4396
  var setFieldValue = _ref2.setFieldValue;
4355
- 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", {
4397
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
4356
4398
  className: "w-full space-y-5"
4357
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
4399
+ }, /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
4358
4400
  innerRef: setFocusField,
4359
4401
  isLoading: isLoadingTemplates,
4360
4402
  label: t("neetoMessageTemplate.template.title"),
@@ -4366,7 +4408,7 @@ var SendToApiForm = function SendToApiForm(_ref) {
4366
4408
  onChange: function onChange(template) {
4367
4409
  return handleTemplateChange(setFieldValue, template);
4368
4410
  }
4369
- }), /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
4411
+ }), /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
4370
4412
  required: true,
4371
4413
  label: t("neetoMessageTemplate.api.endpoint"),
4372
4414
  name: "endpoint",
@@ -4374,7 +4416,7 @@ var SendToApiForm = function SendToApiForm(_ref) {
4374
4416
  }), /*#__PURE__*/React__default["default"].createElement(KeyValuePairs, {
4375
4417
  label: t("neetoMessageTemplate.api.additionalData"),
4376
4418
  name: "additionalData"
4377
- }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, null, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
4419
+ }))), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Footer, null, /*#__PURE__*/React__default["default"].createElement(ActionBlock__default["default"], {
4378
4420
  isSubmitting: isSubmitting,
4379
4421
  cancelButtonProps: {
4380
4422
  onClick: onClose