@bigbinary/neeto-message-templates-frontend 0.7.1 → 0.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +138 -69
- package/app/javascript/src/translations/en.json +1 -1
- package/dist/index.cjs.js +807 -684
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +791 -668
- package/dist/index.js.map +1 -1
- package/package.json +7 -7
- package/types.d.ts +2 -0
package/README.md
CHANGED
|
@@ -1,97 +1,136 @@
|
|
|
1
1
|
# neeto-message-templates-nano
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
The `neeto-message-templates-nano` manages message templates across the neeto
|
|
4
|
+
products. As of now, it supports the creation of SMS, Email and Whatsapp
|
|
5
|
+
templates. The nano exports
|
|
6
|
+
the `@bigbinary/neeto-message-templates-frontend` NPM package
|
|
7
|
+
and `neeto-message-templates-engine` Rails engine for development.
|
|
3
8
|
|
|
4
9
|
# Contents
|
|
10
|
+
|
|
5
11
|
1. [Development with Host Application](#development-with-host-application)
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
+
- [Engine](#engine)
|
|
13
|
+
- [Installation](#installation)
|
|
14
|
+
- [Usage](#usage)
|
|
15
|
+
- [Frontend package](#frontend-package)
|
|
16
|
+
- [Installation](#installation-1)
|
|
17
|
+
- [Components](#components)
|
|
12
18
|
2. [Instructions for Publishing](#instructions-for-publishing)
|
|
13
19
|
|
|
14
20
|
# Development with Host Application
|
|
21
|
+
|
|
15
22
|
## Engine
|
|
23
|
+
|
|
16
24
|
The engine is used to manage message templates across neeto products.
|
|
17
25
|
|
|
18
26
|
### Installation
|
|
27
|
+
|
|
19
28
|
1. Add this line to your application's Gemfile:
|
|
20
|
-
```ruby
|
|
21
|
-
source "NEETO_GEM_SERVER_URL" do
|
|
22
|
-
# ..existing gems
|
|
23
29
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
30
|
+
```ruby
|
|
31
|
+
source "NEETO_GEM_SERVER_URL" do
|
|
32
|
+
# ..existing gems
|
|
33
|
+
|
|
34
|
+
gem 'neeto-message-templates-engine'
|
|
35
|
+
end
|
|
36
|
+
```
|
|
37
|
+
|
|
27
38
|
2. And then execute:
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
39
|
+
```zsh
|
|
40
|
+
bundle install
|
|
41
|
+
```
|
|
31
42
|
3. Add this line to your application's `config/routes.rb` file:
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
4. Run the following command to copy the migrations from the engine to the host
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
43
|
+
```ruby
|
|
44
|
+
mount NeetoMessageTemplatesEngine::Engine => "/neeto_message_templates_engine"
|
|
45
|
+
```
|
|
46
|
+
4. Run the following command to copy the migrations from the engine to the host
|
|
47
|
+
application:
|
|
48
|
+
```zsh
|
|
49
|
+
bundle exec rails neeto_message_templates_engine:install:migrations
|
|
50
|
+
```
|
|
39
51
|
5. Add the migrations to the database:
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
52
|
+
```zsh
|
|
53
|
+
bundle exec rails db:migrate
|
|
54
|
+
```
|
|
55
|
+
6. Create file `neeto-message-templates.rb` under `config/initializers` to
|
|
56
|
+
provide the `owner_class` information
|
|
57
|
+
```ruby
|
|
58
|
+
NeetoFormEngine.owner_class = "Organization"
|
|
59
|
+
```
|
|
60
|
+
7. Create file `callbacks.rb` under `app/lib/neeto_message_templates_engine` and
|
|
61
|
+
provide the permission (If you don't have permissions, then simply return
|
|
62
|
+
true)
|
|
63
|
+
```ruby
|
|
64
|
+
module NeetoMessageTemplatesEngine
|
|
65
|
+
class Callbacks
|
|
66
|
+
def self.can_manage_message_templates?(user)
|
|
67
|
+
user.has_permission?("admin.manage_message_templates")
|
|
68
|
+
end
|
|
69
|
+
end
|
|
70
|
+
end
|
|
71
|
+
```
|
|
72
|
+
8. Configure the owner model in the host application.
|
|
73
|
+
```ruby
|
|
74
|
+
has_many :message_templates, as: :owner, class_name: "NeetoMessageTemplatesEngine::MessageTemplate", dependent: :destroy
|
|
75
|
+
```
|
|
61
76
|
|
|
62
77
|
### Usage
|
|
78
|
+
|
|
63
79
|
You can learn more about usage here:
|
|
64
|
-
|
|
80
|
+
|
|
81
|
+
1. [Models](/docs/engine/models.md)
|
|
65
82
|
|
|
66
83
|
## Frontend package
|
|
84
|
+
|
|
67
85
|
### Installation
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
86
|
+
|
|
87
|
+
1. Install the latest `neeto-message-templates-nano` package using the below
|
|
88
|
+
command:
|
|
89
|
+
```zsh
|
|
90
|
+
yarn add @bigbinary/neeto-message-templates-frontend
|
|
91
|
+
```
|
|
72
92
|
|
|
73
93
|
### Instructions for development
|
|
74
|
-
|
|
94
|
+
|
|
95
|
+
Check the
|
|
96
|
+
[Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0)
|
|
97
|
+
for step-by-step instructions to develop the frontend package.
|
|
75
98
|
|
|
76
99
|
### Components
|
|
100
|
+
|
|
77
101
|
#### `MessageTemplates` ([source code](https://github.com/bigbinary/neeto-message-templates-nano/blob/80a73223e8facf21a0135675d4dc837645d0f2b0/app/javascript/src/components/MessageTemplates/index.jsx))
|
|
78
|
-
|
|
102
|
+
|
|
103
|
+
This component is used to manage message templates in your web application. It
|
|
104
|
+
provides a user-friendly interface for viewing, adding, and editing templates,
|
|
105
|
+
along with filtering and search capabilities.
|
|
79
106
|
|
|
80
107
|
##### Props
|
|
81
|
-
|
|
82
|
-
- `
|
|
83
|
-
|
|
84
|
-
- `
|
|
108
|
+
|
|
109
|
+
- `shouldIncludeTestTemplate`: A boolean indicating whether the test message
|
|
110
|
+
template option should be included.
|
|
111
|
+
- `handleSubmitTestTemplate`: The function in the host app responsible for
|
|
112
|
+
submitting values to send test templates for email and SMS.
|
|
113
|
+
- `isTestMessageLoading`: A boolean indicating whether the test template handle
|
|
114
|
+
submit is in a loading state.
|
|
115
|
+
- `type`: Represents the type of message, with accepted values of `email`,
|
|
116
|
+
`sms`, or `whatsapp`.
|
|
85
117
|
|
|
86
118
|
##### Optional Props
|
|
119
|
+
|
|
87
120
|
- `templateVariables`: (optional) To add dynamic variables to form body field.
|
|
88
|
-
- `ownerId`: (optional) To provide the `ID` of the owner if it is not an
|
|
121
|
+
- `ownerId`: (optional) To provide the `ID` of the owner if it is not an
|
|
122
|
+
Organization model. If the owner is an Organization, this prop can be left
|
|
123
|
+
unspecified.
|
|
89
124
|
- `breadcrumbs`: An array of objects that specify breadcrumbs for navigation.
|
|
90
|
-
- `isTestingTemplateDisabled`: A boolean indicating whether the test template
|
|
91
|
-
|
|
92
|
-
- `
|
|
125
|
+
- `isTestingTemplateDisabled`: A boolean indicating whether the test template
|
|
126
|
+
button should be enabled or not.
|
|
127
|
+
- `manageTemplatesPaneCustomFields`: To add custom components to the manage
|
|
128
|
+
templates pane.
|
|
129
|
+
- `onMutationSuccess`: The callback function which is triggered on the success
|
|
130
|
+
of mutation functions(create, update & delete).
|
|
93
131
|
|
|
94
132
|
##### Usage
|
|
133
|
+
|
|
95
134
|
```jsx
|
|
96
135
|
import React from "react";
|
|
97
136
|
|
|
@@ -119,7 +158,8 @@ const App = () => {
|
|
|
119
158
|
|
|
120
159
|
const manageTemplatesPaneCustomFields = () => (
|
|
121
160
|
<Callout icon={Warning} style="warning">
|
|
122
|
-
Twilio integration is required for sending SMS. Please connect your Twilio
|
|
161
|
+
Twilio integration is required for sending SMS. Please connect your Twilio
|
|
162
|
+
account.
|
|
123
163
|
</Callout>
|
|
124
164
|
);
|
|
125
165
|
|
|
@@ -140,22 +180,33 @@ const App = () => {
|
|
|
140
180
|
```
|
|
141
181
|
|
|
142
182
|
#### `SendMessagePane` ([source code](https://github.com/bigbinary/neeto-message-templates-nano/blob/80a73223e8facf21a0135675d4dc837645d0f2b0/app/javascript/src/components/SendMessagePane/index.jsx))
|
|
143
|
-
|
|
183
|
+
|
|
184
|
+
This component provides a pane where users can select a template and add content
|
|
185
|
+
to compose and send messages.
|
|
144
186
|
|
|
145
187
|
##### Props
|
|
188
|
+
|
|
146
189
|
- `isOpen`: A boolean determining whether the side pane is open.
|
|
147
190
|
- `onClose`: The function to execute when closing.
|
|
148
191
|
- `handleSubmit`: The function within the host app used to send SMS and email.
|
|
149
|
-
- `type`: Represents the type of message, with accepted values of `email`,
|
|
192
|
+
- `type`: Represents the type of message, with accepted values of `email`,
|
|
193
|
+
`sms`, or `whatsapp`.
|
|
194
|
+
- `addNewTemplateRoute`: A redirect route to the add template page. If there are
|
|
195
|
+
no message templates present, users can be redirected to this route to add new
|
|
196
|
+
message templates.
|
|
150
197
|
|
|
151
198
|
##### Optional Props
|
|
199
|
+
|
|
152
200
|
- `customFields`: To add custom field component to the pane.
|
|
153
201
|
- `customFieldsInitialValues`: To provide initial values for the custom fields.
|
|
154
|
-
- `customFieldsValidationSchema`: To provide validation schema for the custom
|
|
202
|
+
- `customFieldsValidationSchema`: To provide validation schema for the custom
|
|
203
|
+
fields.
|
|
155
204
|
- `templateVariables`: To add dynamic variables to form body field.
|
|
156
|
-
- `ownerId`: To provide the `ID` of the owner if it is not an Organization
|
|
205
|
+
- `ownerId`: To provide the `ID` of the owner if it is not an Organization
|
|
206
|
+
model. If the owner is an Organization, this prop can be left unspecified.
|
|
157
207
|
|
|
158
208
|
##### Usage
|
|
209
|
+
|
|
159
210
|
```jsx
|
|
160
211
|
import React, { useState } from "react";
|
|
161
212
|
|
|
@@ -204,16 +255,24 @@ const App = () => {
|
|
|
204
255
|
```
|
|
205
256
|
|
|
206
257
|
#### ApiTemplates ([source code](https://github.com/bigbinary/neeto-message-templates-nano/blob/main/app/javascript/src/components/Api/ApiTemplates/index.jsx))
|
|
207
|
-
|
|
258
|
+
|
|
259
|
+
This component is used to manage the API templates in your application. It
|
|
260
|
+
provides the interface to add, delete, and edit API templates, along with
|
|
261
|
+
filtering and search capabilities.
|
|
208
262
|
|
|
209
263
|
##### Props
|
|
210
|
-
|
|
264
|
+
|
|
265
|
+
- `ownerId`: To provide the `ID` of the owner to which the API templates belongs
|
|
266
|
+
to.
|
|
211
267
|
|
|
212
268
|
##### Optional props
|
|
269
|
+
|
|
213
270
|
- `breadcrumbs`: An array of objects that specify breadcrumbs for navigation.
|
|
214
|
-
- `onMutationSuccess`: The callback function which is triggered on the success
|
|
271
|
+
- `onMutationSuccess`: The callback function which is triggered on the success
|
|
272
|
+
of mutation functions(create, update & delete).
|
|
215
273
|
|
|
216
274
|
##### Usage
|
|
275
|
+
|
|
217
276
|
```js
|
|
218
277
|
import React from "react";
|
|
219
278
|
|
|
@@ -235,15 +294,22 @@ const App = () => {
|
|
|
235
294
|
```
|
|
236
295
|
|
|
237
296
|
#### SendToApiPane ([source code](https://github.com/bigbinary/neeto-message-templates-nano/blob/main/app/javascript/src/components/Api/SendToApiPane/index.jsx))
|
|
238
|
-
|
|
297
|
+
|
|
298
|
+
This component provides a pane where users can select an API template and modify
|
|
299
|
+
it if needed and send the data to the specified HTTP(S) endpoint.
|
|
239
300
|
|
|
240
301
|
##### Props
|
|
302
|
+
|
|
241
303
|
- `ownerId`: A boolean determining whether the side pane is open.
|
|
242
304
|
- `onClose`: This function will be executed while closing the pane.
|
|
243
305
|
- `onSubmit`: This function will be executed while submitting the form.
|
|
244
306
|
- `isSubmitting`: A boolean to know the form submission status
|
|
307
|
+
- `addNewTemplateRoute`: A redirect route to the API template page. If there are
|
|
308
|
+
no API templates present, users can be redirected to this route to add new API
|
|
309
|
+
templates.
|
|
245
310
|
|
|
246
311
|
##### Usage
|
|
312
|
+
|
|
247
313
|
```js
|
|
248
314
|
import React, { useState } from "react";
|
|
249
315
|
|
|
@@ -273,4 +339,7 @@ const App = () => {
|
|
|
273
339
|
```
|
|
274
340
|
|
|
275
341
|
# Instructions for Publishing
|
|
276
|
-
|
|
342
|
+
|
|
343
|
+
Consult the
|
|
344
|
+
[building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages)
|
|
345
|
+
guide for details on how to publish.
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"whatsappTemplates": "Whatsapp Templates",
|
|
34
34
|
"whatsappTemplate": "Whatsapp Template",
|
|
35
35
|
"apiTemplates": "API templates",
|
|
36
|
-
"emptyState": "There are no {{type, anyCase}} to show
|
|
36
|
+
"emptyState": "There are no {{type, anyCase}} to show",
|
|
37
37
|
"whatsapp": {
|
|
38
38
|
"helpDocText": "You can create and add new WhatsApp templates by referring to this <Link>help document</Link>."
|
|
39
39
|
},
|