@consilioweb/payload-support 0.5.1 → 0.5.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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@consilioweb/payload-support",
3
- "version": "0.5.1",
3
+ "version": "0.5.2",
4
4
  "description": "Payload CMS plugin — professional support & ticketing system with AI, SLA, time tracking, live chat, and more",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -123,6 +123,7 @@
123
123
  "@payloadcms/translations": "^3.77.0",
124
124
  "@payloadcms/ui": "^3.77.0",
125
125
  "@types/react": "^19.0.0",
126
+ "esbuild-sass-plugin": "^3.7.0",
126
127
  "next": "^15.5.14",
127
128
  "payload": "^3.77.0",
128
129
  "tsup": "^8.0.0",
@@ -63,7 +63,7 @@
63
63
  }
64
64
 
65
65
  .statusChip {
66
- padding: 5px 14px;
66
+ padding: 5px 28px 5px 14px;
67
67
  border-radius: 20px;
68
68
  font-size: 12px;
69
69
  font-weight: 700;
@@ -72,6 +72,13 @@
72
72
  transition: all 100ms;
73
73
  appearance: none;
74
74
  -webkit-appearance: none;
75
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
76
+ background-repeat: no-repeat;
77
+ background-position: right 10px center;
78
+
79
+ &:hover {
80
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
81
+ }
75
82
  }
76
83
 
77
84
  .sentimentBadge {
@@ -0,0 +1,350 @@
1
+ .page {
2
+ max-width: 900px;
3
+ margin: 0 auto;
4
+ padding: 0 1.5rem 3rem;
5
+ }
6
+
7
+ .intro {
8
+ font-size: 0.875rem;
9
+ color: var(--theme-elevation-600);
10
+ margin-bottom: 1.5rem;
11
+ line-height: 1.5;
12
+ }
13
+
14
+ // ── Sections ──────────────────────────────────
15
+
16
+ .sectionWrapper {
17
+ border: 1px solid var(--theme-elevation-150);
18
+ border-radius: 10px;
19
+ margin-bottom: 1rem;
20
+ overflow: hidden;
21
+ background: var(--theme-elevation-0);
22
+ }
23
+
24
+ .sectionHeader {
25
+ display: flex;
26
+ align-items: center;
27
+ gap: 0.75rem;
28
+ padding: 0.875rem 1.25rem;
29
+ cursor: pointer;
30
+ user-select: none;
31
+ transition: background 150ms;
32
+
33
+ &:hover {
34
+ background: var(--theme-elevation-50);
35
+ }
36
+ }
37
+
38
+ .sectionIcon {
39
+ width: 32px;
40
+ height: 32px;
41
+ border-radius: 8px;
42
+ display: flex;
43
+ align-items: center;
44
+ justify-content: center;
45
+ color: #fff;
46
+ flex-shrink: 0;
47
+ }
48
+
49
+ .sectionTitle {
50
+ font-weight: 600;
51
+ font-size: 0.9375rem;
52
+ color: var(--theme-text);
53
+ flex: 1;
54
+ }
55
+
56
+ .sectionChevron {
57
+ font-size: 0.625rem;
58
+ color: var(--theme-elevation-400);
59
+ transition: transform 200ms;
60
+
61
+ &.open {
62
+ transform: rotate(180deg);
63
+ }
64
+ }
65
+
66
+ .sectionBody {
67
+ padding: 1rem 1.25rem 1.25rem;
68
+ border-top: 1px solid var(--theme-elevation-100);
69
+ }
70
+
71
+ .sectionDescription {
72
+ font-size: 0.8125rem;
73
+ color: var(--theme-elevation-500);
74
+ margin: 0 0 1rem;
75
+ line-height: 1.5;
76
+ }
77
+
78
+ // ── Badges ────────────────────────────────────
79
+
80
+ .badge {
81
+ font-size: 0.6875rem;
82
+ font-weight: 600;
83
+ padding: 0.125rem 0.5rem;
84
+ border-radius: 9999px;
85
+ white-space: nowrap;
86
+ }
87
+
88
+ // ── Feature cards ─────────────────────────────
89
+
90
+ .categoryGroup {
91
+ margin-bottom: 1.25rem;
92
+ }
93
+
94
+ .categoryHeading {
95
+ font-size: 0.75rem;
96
+ font-weight: 700;
97
+ text-transform: uppercase;
98
+ letter-spacing: 0.05em;
99
+ margin: 0 0 0.5rem;
100
+ display: flex;
101
+ align-items: center;
102
+ gap: 0.5rem;
103
+ }
104
+
105
+ .categoryDot {
106
+ width: 8px;
107
+ height: 8px;
108
+ border-radius: 50%;
109
+ display: inline-block;
110
+ }
111
+
112
+ .featureList {
113
+ display: flex;
114
+ flex-direction: column;
115
+ gap: 0.375rem;
116
+ }
117
+
118
+ .featureCard {
119
+ display: flex;
120
+ align-items: center;
121
+ gap: 0.75rem;
122
+ padding: 0.75rem 1rem;
123
+ border-radius: 8px;
124
+ border: 1px solid var(--theme-elevation-150);
125
+ cursor: pointer;
126
+ transition: all 150ms;
127
+
128
+ &:hover {
129
+ background: var(--theme-elevation-50);
130
+ }
131
+
132
+ &.enabled {
133
+ border-color: var(--theme-elevation-200);
134
+ background: var(--theme-elevation-50);
135
+ }
136
+ }
137
+
138
+ .featureLabel {
139
+ font-weight: 600;
140
+ font-size: 0.8125rem;
141
+ color: var(--theme-text);
142
+ }
143
+
144
+ .featureDesc {
145
+ font-size: 0.75rem;
146
+ color: var(--theme-elevation-500);
147
+ margin-top: 0.125rem;
148
+ }
149
+
150
+ // ── Fields ────────────────────────────────────
151
+
152
+ .fieldRow {
153
+ display: flex;
154
+ align-items: flex-start;
155
+ gap: 1rem;
156
+ padding: 0.625rem 0;
157
+ }
158
+
159
+ .fieldLabel {
160
+ flex: 0 0 200px;
161
+ font-size: 0.8125rem;
162
+ font-weight: 600;
163
+ color: var(--theme-text);
164
+ padding-top: 0.5rem;
165
+ }
166
+
167
+ .fieldDescription {
168
+ font-size: 0.75rem;
169
+ color: var(--theme-elevation-500);
170
+ font-weight: 400;
171
+ margin-top: 0.125rem;
172
+ }
173
+
174
+ .fieldContent {
175
+ flex: 1;
176
+ }
177
+
178
+ .input {
179
+ width: 100%;
180
+ padding: 0.5rem 0.75rem;
181
+ border: 1px solid var(--theme-elevation-200);
182
+ border-radius: 6px;
183
+ font-size: 0.8125rem;
184
+ background: var(--theme-input-bg, var(--theme-elevation-0));
185
+ color: var(--theme-text);
186
+ outline: none;
187
+ transition: border-color 150ms;
188
+
189
+ &:focus {
190
+ border-color: var(--theme-success-500);
191
+ }
192
+ }
193
+
194
+ .inputReadonly {
195
+ composes: input;
196
+ background: var(--theme-elevation-50);
197
+ color: var(--theme-elevation-500);
198
+ cursor: not-allowed;
199
+ }
200
+
201
+ .select {
202
+ composes: input;
203
+ appearance: auto;
204
+ }
205
+
206
+ .numberInput {
207
+ composes: input;
208
+ max-width: 120px;
209
+ }
210
+
211
+ .separator {
212
+ border-top: 1px solid var(--theme-elevation-100);
213
+ margin: 1rem 0;
214
+ }
215
+
216
+ // ── Toggle rows ───────────────────────────────
217
+
218
+ .toggleRow {
219
+ display: flex;
220
+ align-items: flex-start;
221
+ gap: 0.75rem;
222
+ padding: 0.5rem 0;
223
+ }
224
+
225
+ .inlineLabel {
226
+ font-size: 0.8125rem;
227
+ font-weight: 600;
228
+ color: var(--theme-text);
229
+ }
230
+
231
+ .inlineDesc {
232
+ font-size: 0.75rem;
233
+ color: var(--theme-elevation-500);
234
+ margin-top: 0.125rem;
235
+ }
236
+
237
+ // ── SLA ───────────────────────────────────────
238
+
239
+ .slaInline {
240
+ display: flex;
241
+ align-items: center;
242
+ gap: 0.5rem;
243
+ }
244
+
245
+ .slaHint {
246
+ font-size: 0.75rem;
247
+ color: var(--theme-elevation-500);
248
+ }
249
+
250
+ // ── API Key ───────────────────────────────────
251
+
252
+ .apiKeyRow {
253
+ display: flex;
254
+ gap: 0.5rem;
255
+ }
256
+
257
+ .apiKeyToggle {
258
+ padding: 0.5rem 0.75rem;
259
+ border: 1px solid var(--theme-elevation-200);
260
+ border-radius: 6px;
261
+ background: var(--theme-elevation-50);
262
+ color: var(--theme-text);
263
+ font-size: 0.75rem;
264
+ cursor: pointer;
265
+ white-space: nowrap;
266
+ }
267
+
268
+ // ── AI sub features ───────────────────────────
269
+
270
+ .aiSubFeaturesLabel {
271
+ font-size: 0.8125rem;
272
+ font-weight: 600;
273
+ color: var(--theme-text);
274
+ margin: 0 0 0.5rem;
275
+ }
276
+
277
+ .aiToggleRow {
278
+ display: flex;
279
+ align-items: center;
280
+ gap: 0.75rem;
281
+ padding: 0.375rem 0;
282
+ }
283
+
284
+ .aiToggleLabel {
285
+ font-size: 0.8125rem;
286
+ font-weight: 500;
287
+ color: var(--theme-text);
288
+ }
289
+
290
+ .aiToggleDesc {
291
+ display: block;
292
+ font-size: 0.6875rem;
293
+ color: var(--theme-elevation-500);
294
+ }
295
+
296
+ // ── Signature ─────────────────────────────────
297
+
298
+ .signatureTextarea {
299
+ width: 100%;
300
+ padding: 0.75rem;
301
+ border: 1px solid var(--theme-elevation-200);
302
+ border-radius: 6px;
303
+ font-size: 0.8125rem;
304
+ font-family: inherit;
305
+ background: var(--theme-input-bg, var(--theme-elevation-0));
306
+ color: var(--theme-text);
307
+ resize: vertical;
308
+ outline: none;
309
+
310
+ &:focus {
311
+ border-color: var(--theme-success-500);
312
+ }
313
+ }
314
+
315
+ // ── Purge ─────────────────────────────────────
316
+
317
+ .purgeGroup {
318
+ display: flex;
319
+ flex-direction: column;
320
+ gap: 0.75rem;
321
+ }
322
+
323
+ .purgeCategory {
324
+ display: flex;
325
+ align-items: center;
326
+ gap: 1rem;
327
+ }
328
+
329
+ .purgeCategoryLabel {
330
+ font-size: 0.8125rem;
331
+ font-weight: 600;
332
+ color: var(--theme-text);
333
+ min-width: 100px;
334
+ }
335
+
336
+ .purgeButtons {
337
+ display: flex;
338
+ gap: 0.375rem;
339
+ }
340
+
341
+ // ── Bottom bar ────────────────────────────────
342
+
343
+ .bottomBar {
344
+ display: flex;
345
+ justify-content: flex-end;
346
+ gap: 0.5rem;
347
+ padding: 1.5rem 0;
348
+ border-top: 1px solid var(--theme-elevation-100);
349
+ margin-top: 1rem;
350
+ }
@@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react'
4
4
  import { Settings, Mail, Bot, Clock, Timer, Globe, FileSignature } from 'lucide-react'
5
5
  import { V, btnStyle } from '../shared/adminTokens'
6
6
  import { AdminViewHeader } from '../shared/AdminViewHeader'
7
- import { getFeatures, saveFeatures, DEFAULT_FEATURES, type TicketingFeatures } from '../TicketConversation/config'
7
+ import { getFeatures, saveFeatures, DEFAULT_FEATURES, type TicketingFeatures } from '../../components/TicketConversation/config'
8
8
  import ts from './TicketingSettings.module.scss'
9
9
 
10
10
  /* ============================================