@capillarytech/creatives-library 8.0.299-alpha.7 → 8.0.299

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 (10) hide show
  1. package/package.json +1 -1
  2. package/v2Components/CommonTestAndPreview/CustomerCreationModal.js +2 -2
  3. package/v2Components/CommonTestAndPreview/ExistingCustomerModal.js +1 -1
  4. package/v2Components/CommonTestAndPreview/SendTestMessage.js +1 -1
  5. package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss +813 -761
  6. package/v2Components/CommonTestAndPreview/index.js +6 -2
  7. package/v2Components/CommonTestAndPreview/tests/CommonTestAndPreview.addTestCustomer.test.js +6 -2
  8. package/v2Components/CommonTestAndPreview/tests/CustomValuesEditor.test.js +172 -0
  9. package/v2Components/CommonTestAndPreview/tests/CustomerCreationModal.test.js +150 -0
  10. package/v2Components/CommonTestAndPreview/tests/index.test.js +29 -0
package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss CHANGED
@@ -3,804 +3,856 @@
3
3
  *
4
4
  * Styling for the unified test and preview component across all channels
5
5
  */
6
- @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
6
+ @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
7
7
 
8
- /* All ant overrides scoped under wrapper to avoid affecting other modals. */
8
+ /* All ant overrides scoped under wrapper to avoid affecting other modals. */
9
9
  .common-test-preview-modal-wrap {
10
- z-index: 10000;
11
- display: flex;
12
- justify-content: center;
13
- align-items: center;
10
+ z-index: 10000;
11
+ display: flex;
12
+ justify-content: center;
13
+ align-items: center;
14
14
  }
15
15
 
16
16
  /* Modals rendered inside slidebox via getContainer (lib mode) – mask and wrap above content */
17
17
  .common-test-and-preview-notification-container {
18
- .ant-notification {
19
- z-index: 10001;
20
- }
21
- .common-test-preview-modal-wrap {
22
- z-index: 10003;
23
- }
24
- .ant-modal-mask,
25
- .ant-modal-wrap {
26
- z-index: 10003;
27
- }
18
+ .ant-notification {
19
+ z-index: 10001 !important;
20
+ }
21
+
22
+ .common-test-preview-modal-wrap {
23
+ z-index: 10003 !important;
24
+ }
25
+
26
+ .ant-modal-mask,
27
+ .ant-modal-wrap {
28
+ z-index: 10003 !important;
29
+ }
28
30
  }
31
+
29
32
  /* Lookup spinner overlay above test-customers dropdown. */
30
33
  .common-test-preview-lookup-spin {
31
- position: relative;
32
- z-index: 1000;
34
+ position: relative;
35
+ z-index: 1000;
33
36
 
34
- .ant-spin-container::after {
35
- z-index: 1;
36
- }
37
+ .ant-spin-container::after {
38
+ z-index: 1;
39
+ }
37
40
  }
38
41
 
39
42
  /* When customer lookup is loading, dropdown renders inside .send-test-section; lower it so spinner is on top. */
40
43
  .common-test-preview-customer-loading .test-customers-tree-select-dropdown {
41
- z-index: 0;
44
+ z-index: 0;
42
45
  }
43
46
 
44
47
  /* Customer creation modal content – avoid inline styles */
45
48
  .common-test-preview-modal {
46
- color: $CAP_G01 !important;
47
- width: 32.571em !important;
48
- margin-left: auto;
49
- margin-right: auto;
50
- max-width: 32.571em !important;
51
- .ant-modal-footer {
52
- text-align: left;
53
- margin-left: 0.625rem; /* 10px at 16px root */
54
- margin-top: 0.9375rem; /* 15px at 16px root */
55
- }
56
-
57
- .customer-creation-modal-row {
58
- margin-bottom: $CAP_SPACE_16;
59
-
60
- &--last {
61
- margin-bottom: $CAP_SPACE_24;
62
- }
63
- }
64
-
65
- .customer-creation-modal-description {
66
- color: $CAP_G01;
67
- font-size: $FONT_SIZE_M;
68
- }
69
-
70
- .customer-creation-modal-label {
71
- margin-bottom: $CAP_SPACE_04;
72
- display: block;
73
- font-size: $FONT_SIZE_M;
74
- font-weight: bold;
75
- color: $CAP_G01;
76
- }
77
-
78
- .customer-creation-modal-optional {
79
- color: $CAP_G06;
80
- font-weight: normal;
81
- }
82
-
83
- /* Input text color and font to match standalone (lib mode can lose host styles) */
84
- .customer-creation-modal-input {
85
- border: none !important;
86
- /* Sizes in em for 14px base: same px as .5rem 2.5rem 1.5rem .875rem at 16px (8px, 40px, 24px, 14px) */
87
- .ant-input {
88
- color: $CAP_G01;
89
- font-size: $FONT_SIZE_M;
90
- font-weight: normal;
91
- padding: 0.571em; /* 8px */
92
- height: 2.857em; /* 40px */
93
- line-height: 1.714em; /* 24px */
94
- }
95
- .ant-input:hover,
96
- .ant-input:focus {
97
- border: $CAP_SPACE_01 solid $CAP_G01 !important;
98
- }
99
- .ant-input::placeholder {
100
- color: $CAP_G06;
101
- }
102
-
103
- /* Error state: single clean red border, no double line or focus ring */
104
- &.has-error {
105
- .ant-input-affix-wrapper {
106
- border: 1px solid $CAP_COLOR_03;
107
- border-radius: $CAP_SPACE_04;
108
- }
109
- .ant-input-affix-wrapper:hover,
110
- .ant-input-affix-wrapper:focus,
111
- .ant-input-affix-wrapper-focused {
112
- border: 1px solid $CAP_COLOR_03;
113
- }
114
- .ant-input-affix-wrapper .ant-input {
115
- border: none !important;
116
- }
117
- .ant-input {
118
- border: 1px solid $CAP_COLOR_03;
119
- }
120
- }
121
- }
122
-
123
- /* Error message only – no extra border/line below the input */
124
- .customer-creation-modal-validation-error {
125
- color: $CAP_COLOR_03;
126
- font-size: $FONT_SIZE_S;
127
- margin-top: $CAP_SPACE_04;
128
- border: none ;
129
- border-top: none ;
130
- box-shadow: none ;
131
-
132
- &::before,
133
- &::after {
134
- display: none ;
135
- content: none ;
136
- border: none ;
137
- }
138
- }
139
-
140
- /* Lookup loading: make Email and Mobile fields look disabled (wrapper-only) */
141
- .customer-creation-modal--lookup-loading .customer-creation-modal-row--email .customer-creation-modal-input,
142
- .customer-creation-modal--lookup-loading .customer-creation-modal-row--last .customer-creation-modal-input {
143
- opacity: 0.65;
144
- cursor: not-allowed;
145
- background-color: $CAP_G09;
146
- }
147
-
148
- /* Existing customer modal content */
149
- .existing-customer-modal {
150
- &-intro-row {
151
- margin-bottom: $CAP_SPACE_16;
152
- }
153
-
154
- .ant-card.cap-card-v2{
155
- border:none
156
- }
157
-
158
- .ant-card-body {
159
- padding: 1rem;
160
- border-radius: $CAP_SPACE_08;
161
- border: $CAP_SPACE_01 solid $CAP_G06;
162
- }
163
-
164
- &-card {
165
- padding: 0;
166
- }
167
-
168
- &-card-row {
169
- display: flex;
170
- align-items: flex-start;
171
- padding: 0;
172
- }
173
-
174
- &-avatar {
175
- width: 3rem; /* 48px at 16px root */
176
- height: 3rem;
177
- border-radius: 1.25rem; /* 20px at 16px root */
178
- background-color: $CAP_G07;
179
- display: flex;
180
- align-items: center;
181
- justify-content: center;
182
- margin-top: $CAP_SPACE_04;
183
- margin-right: $CAP_SPACE_16;
184
- flex-shrink: 0;
185
- }
186
-
187
- &-avatar-icon {
188
- font-size: $CAP_SPACE_24;
189
- color: $CAP_G01;
190
- }
191
-
192
- &-details {
193
- flex: 1;
194
- }
195
-
196
- &-name {
197
- font-size: $FONT_SIZE_L;
198
- font-weight: 500;
199
- color: $CAP_G01;
200
- margin-bottom: $CAP_SPACE_04;
201
- }
202
-
203
- &-meta {
204
- font-size: $FONT_SIZE_M;
205
- color: $CAP_G01;
206
- line-height: 1.4;
207
- }
208
-
209
- &-meta-label {
210
- color: $CAP_G04;
211
- }
212
- }
49
+ color: $CAP_G01 !important;
50
+ width: 32.571em !important;
51
+ margin-left: auto;
52
+ margin-right: auto;
53
+ max-width: 32.571em !important;
54
+
55
+ .ant-modal-footer {
56
+ text-align: left;
57
+ margin-left: 0.625rem;
58
+ /* 10px at 16px root */
59
+ margin-top: 0.9375rem;
60
+ /* 15px at 16px root */
61
+ }
62
+
63
+ .customer-creation-modal-row {
64
+ margin-bottom: $CAP_SPACE_16;
65
+
66
+ &--last {
67
+ margin-bottom: $CAP_SPACE_24;
68
+ }
69
+ }
70
+
71
+ .customer-creation-modal-description {
72
+ color: $CAP_G01;
73
+ font-size: $FONT_SIZE_M;
74
+ }
75
+
76
+ .customer-creation-modal-label {
77
+ margin-bottom: $CAP_SPACE_04;
78
+ display: block;
79
+ font-size: $FONT_SIZE_M;
80
+ font-weight: bold;
81
+ color: $CAP_G01;
82
+ }
83
+
84
+ .customer-creation-modal-optional {
85
+ color: $CAP_G06;
86
+ font-weight: normal;
87
+ }
88
+
89
+ /* Input text color and font to match standalone (lib mode can lose host styles) */
90
+ .customer-creation-modal-input {
91
+ border: none !important;
92
+
93
+ /* Sizes in em for 14px base: same px as .5rem 2.5rem 1.5rem .875rem at 16px (8px, 40px, 24px, 14px) */
94
+ .ant-input {
95
+ color: $CAP_G01;
96
+ font-size: $FONT_SIZE_M;
97
+ font-weight: normal;
98
+ padding: 0.571em;
99
+ /* 8px */
100
+ height: 2.857em;
101
+ /* 40px */
102
+ line-height: 1.714em;
103
+ /* 24px */
104
+ }
105
+
106
+ .ant-input:hover,
107
+ .ant-input:focus {
108
+ border: 1px solid $CAP_G01 !important;
109
+ }
110
+
111
+ .ant-input::placeholder {
112
+ color: $CAP_G06;
113
+ }
114
+
115
+ /* Error state: single clean red border, no double line or focus ring */
116
+ &.has-error {
117
+ .ant-input-affix-wrapper {
118
+ border: 1px solid $CAP_COLOR_03;
119
+ border-radius: $CAP_SPACE_04;
120
+ }
121
+
122
+ .ant-input-affix-wrapper:hover,
123
+ .ant-input-affix-wrapper:focus,
124
+ .ant-input-affix-wrapper-focused {
125
+ border: 1px solid $CAP_COLOR_03;
126
+ }
127
+
128
+ .ant-input-affix-wrapper .ant-input {
129
+ border: none !important;
130
+ }
131
+
132
+ .ant-input {
133
+ border: 1px solid $CAP_COLOR_03;
134
+ }
135
+ }
136
+ }
137
+
138
+ /* Error message only – no extra border/line below the input */
139
+ .customer-creation-modal-validation-error {
140
+ color: $CAP_COLOR_03;
141
+ font-size: $FONT_SIZE_S;
142
+ margin-top: $CAP_SPACE_04;
143
+ border: none;
144
+ border-top: none;
145
+ box-shadow: none;
146
+
147
+ &::before,
148
+ &::after {
149
+ display: none;
150
+ content: none;
151
+ border: none;
152
+ }
153
+ }
154
+
155
+ /* Lookup loading: make Email and Mobile fields look disabled (wrapper-only) */
156
+ .customer-creation-modal--lookup-loading .customer-creation-modal-row--email .customer-creation-modal-input,
157
+ .customer-creation-modal--lookup-loading .customer-creation-modal-row--last .customer-creation-modal-input {
158
+ opacity: 0.65;
159
+ cursor: not-allowed;
160
+ background-color: $CAP_G09;
161
+ }
162
+
163
+ /* Existing customer modal content */
164
+ .existing-customer-modal {
165
+ &-intro-row {
166
+ margin-bottom: $CAP_SPACE_16;
167
+ }
168
+
169
+ .ant-card.cap-card-v2 {
170
+ border: none
171
+ }
172
+
173
+ .ant-card-body {
174
+ padding: 1rem;
175
+ border-radius: $CAP_SPACE_08;
176
+ border: $CAP_SPACE_01 solid $CAP_G06;
177
+ }
178
+
179
+ &-card {
180
+ padding: 0;
181
+ }
182
+
183
+ &-card-row {
184
+ display: flex;
185
+ align-items: flex-start;
186
+ padding: 0;
187
+ }
188
+
189
+ &-avatar {
190
+ width: 3rem;
191
+ /* 48px at 16px root */
192
+ height: 3rem;
193
+ border-radius: 1.25rem;
194
+ /* 20px at 16px root */
195
+ background-color: $CAP_G07;
196
+ display: flex;
197
+ align-items: center;
198
+ justify-content: center;
199
+ margin-top: $CAP_SPACE_04;
200
+ margin-right: $CAP_SPACE_16;
201
+ flex-shrink: 0;
202
+ }
203
+
204
+ &-avatar-icon {
205
+ font-size: $CAP_SPACE_24;
206
+ color: $CAP_G01;
207
+ }
208
+
209
+ &-details {
210
+ flex: 1;
211
+ }
212
+
213
+ &-name {
214
+ font-size: $FONT_SIZE_L;
215
+ font-weight: 500;
216
+ color: $CAP_G01;
217
+ margin-bottom: $CAP_SPACE_04;
218
+ }
219
+
220
+ &-meta {
221
+ font-size: $FONT_SIZE_M;
222
+ color: $CAP_G01;
223
+ line-height: 1.4;
224
+ }
225
+
226
+ &-meta-label {
227
+ color: $CAP_G04;
228
+ }
229
+ }
213
230
  }
214
231
 
215
232
 
216
233
  .add-test-customer-icon {
217
- margin-top: 0.3rem;
218
- margin-right: 0.5rem;
234
+ margin-top: 0.3rem;
235
+ margin-right: 0.5rem;
219
236
  }
220
237
 
221
238
  .common-test-and-preview-slidebox {
222
- .test-preview-header {
223
- display: flex;
224
- align-items: center;
225
- gap: $CAP_SPACE_12;
226
-
227
- .back-icon {
228
- cursor: pointer;
229
- font-size: $CAP_SPACE_16;
230
- color: #8c8c8c;
231
- transition: color 0.2s ease;
232
-
233
- &:hover {
234
- color: #262626;
235
- }
236
- }
237
-
238
- .header-title {
239
- font-size: $CAP_SPACE_16;
240
- font-weight: 500;
241
- color: #262626;
242
- }
243
- }
244
-
245
- .test-preview-container {
246
- margin-left: 2%;
247
- height: 100%;
248
- display: flex;
249
- flex-direction: column;
250
- }
251
-
252
- .discard-button {
253
- padding: 0 $CAP_SPACE_08;
254
- }
255
-
256
- .tag-input-field {
257
- width: 14.714rem;
258
- .input {
259
- height: $CAP_SPACE_40;
260
- }
261
- }
262
-
263
- .test-and-preview-panels {
264
- display: flex;
265
- flex: 1;
266
- }
267
-
268
- .left-panel {
269
- width: 40%;
270
- min-width: 20rem; /* Consistent width in campaigns/library mode so test customer dropdown matches creatives */
271
- padding-right: 1rem;
272
- border-right: $CAP_SPACE_01 solid $CAP_G12;
273
- overflow-y: auto;
274
- .panel-divider {
275
- margin: 0;
276
- }
277
- .no-tags-extracted-info-note {
278
- .note-text {
279
- white-space: unset;
280
- }
281
- }
282
- }
283
-
284
- .right-panel {
285
- flex: 1;
286
- background-color: $CAP_G09;
287
- padding: $CAP_SPACE_08 $CAP_SPACE_24;
288
- }
289
-
290
- .panel-section {
291
- margin-bottom: $CAP_SPACE_12;
292
-
293
- &:last-child {
294
- margin-bottom: 0;
295
- }
296
- }
297
-
298
- .loading-container {
299
- display: flex;
300
- flex-direction: column;
301
- align-items: center;
302
- justify-content: center;
303
- padding: $CAP_SPACE_32;
304
- text-align: center;
305
-
306
- .loading-text {
307
- margin-top: $CAP_SPACE_16;
308
- color: #666;
309
- }
310
- }
311
-
312
- .no-customer-message,
313
- .no-tags-message {
314
- padding: $CAP_SPACE_32;
315
- text-align: center;
316
- color: #666;
317
- background: #f5f5f5;
318
- border-radius: $CAP_SPACE_04;
319
- }
320
-
321
- .custom-values-editor {
322
- .values-missing-message {
323
- margin: $CAP_SPACE_16 0;
324
- }
325
- .editor-header {
326
- display: flex;
327
- justify-content: flex-end;
328
- margin-bottom: $CAP_SPACE_16;
329
-
330
- .json-toggle {
331
- display: flex;
332
- align-items: center;
333
- gap: $CAP_SPACE_08;
334
-
335
- .toggle-label {
336
- color: #666;
337
- }
338
- }
339
- }
340
-
341
- .json-editor {
342
- border: 0.071rem solid #e0e0e0;
343
- border-radius: $CAP_SPACE_04;
344
- background-color: $CAP_WHITE;
345
- margin-bottom: 1rem;
346
- overflow: hidden;
347
-
348
- .json-editor-container {
349
- display: flex;
350
- font-family: 'Courier New', monospace;
351
- font-size: 0.929rem;
352
- line-height: 1.4;
353
- }
354
-
355
- .line-numbers {
356
- background-color: #f8f8f8;
357
- border-right: 0.071rem solid #e0e0e0;
358
- padding: $CAP_SPACE_08 $CAP_SPACE_04;
359
- user-select: none;
360
- min-width: $CAP_SPACE_40;
361
- flex-shrink: 0;
362
-
363
- .line-number {
364
- text-align: right;
365
- color: #8c8c8c;
366
- font-size: $CAP_SPACE_12;
367
- padding-right: $CAP_SPACE_08;
368
- line-height: 1.4;
369
- height: $CAP_SPACE_19;
370
- display: flex;
371
- align-items: center;
372
- justify-content: flex-end;
373
- }
374
- }
375
-
376
- .json-textarea {
377
- flex: 1;
378
- border: none;
379
- outline: none;
380
- font-family: 'Courier New', monospace;
381
- font-size: 0.929rem;
382
- line-height: 1.4;
383
- padding: $CAP_SPACE_08 $CAP_SPACE_08;
384
- background-color: $CAP_WHITE;
385
- resize: none;
386
- white-space: pre;
387
- overflow-wrap: normal;
388
- overflow-x: auto;
389
- tab-size: 2;
390
- color: #3D7790;
391
-
392
- &:focus {
393
- outline: none;
394
- }
395
- }
396
-
397
- .json-container {
398
- font-family: 'Courier New', monospace;
399
- font-size: 0.929rem;
400
- line-height: 1.4;
401
- }
402
-
403
- .json-line {
404
- display: flex;
405
- align-items: center;
406
- min-height: $CAP_SPACE_20;
407
- padding-left: $CAP_SPACE_08;
408
-
409
- &:hover {
410
- background-color: #f5f5f5;
411
- }
412
- }
413
-
414
- .line-number {
415
- display: inline-block;
416
- width: $CAP_SPACE_24;
417
- text-align: right;
418
- margin-right: $CAP_SPACE_12;
419
- color: #8c8c8c;
420
- font-size: $CAP_SPACE_12;
421
- user-select: none;
422
- flex-shrink: 0;
423
- }
424
-
425
- .json-indent {
426
- color: transparent;
427
- white-space: pre;
428
- }
429
-
430
- .json-key {
431
- color: #3D7790;
432
- font-weight: 500;
433
- }
434
-
435
- .json-colon {
436
- color: black;
437
- margin: 0 $CAP_SPACE_02;
438
- }
439
-
440
- .json-quote {
441
- color: #0451a5;
442
- }
443
-
444
- .json-brace {
445
- color: black;
446
- font-weight: bold;
447
- }
448
-
449
- .json-comma {
450
- color: black;
451
- }
452
-
453
- .json-value-input {
454
- border: none;
455
- background-color: transparent;
456
- box-shadow: none;
457
- padding: 0 $CAP_SPACE_02;
458
- font-family: inherit;
459
- font-size: inherit;
460
- color: #0451a5;
461
- min-width: $CAP_SPACE_60;
462
-
463
- &:focus {
464
- background-color: #e6f7ff;
465
- border: $CAP_SPACE_01 solid #40a9ff;
466
- border-radius: $CAP_SPACE_02;
467
- outline: none;
468
- }
469
-
470
- &::placeholder {
471
- color: #bfbfbf;
472
- font-style: italic;
473
- }
474
- .ant-input {
475
- margin: $CAP_SPACE_06 0;
476
- height: $CAP_SPACE_36;
477
- width: 14.714rem;
478
- }
479
- }
480
- }
481
-
482
- .values-table {
483
- margin-bottom: $CAP_SPACE_16;
484
- border: $CAP_SPACE_01 solid $CAP_G12;
485
- border-radius: $CAP_SPACE_04;
486
- overflow: hidden;
487
-
488
- .table-header {
489
- display: flex;
490
- background: #f5f5f5;
491
- border-bottom: $CAP_SPACE_01 solid $CAP_G12;
492
-
493
- .header-cell {
494
- flex: 1;
495
- padding: $CAP_SPACE_12 $CAP_SPACE_16;
496
- font-weight: 500;
497
- color: #666;
498
-
499
- &:first-child {
500
- flex: 2;
501
- }
502
- }
503
- }
504
-
505
- .value-row {
506
- display: flex;
507
- border-bottom: $CAP_SPACE_01 solid $CAP_G12;
508
-
509
- &:last-child {
510
- border-bottom: none;
511
- }
512
-
513
- .tag-name {
514
- flex: 2;
515
- padding: $CAP_SPACE_12 $CAP_SPACE_16;
516
- color: #333;
517
- word-break: break-all;
518
- }
519
-
520
- .tag-input {
521
- flex: 1;
522
- padding: $CAP_SPACE_08 $CAP_SPACE_16;
523
- display: flex;
524
- align-items: center;
525
- }
526
- }
527
- }
528
-
529
- .editor-actions {
530
- display: flex;
531
- justify-content: space-between;
532
- margin-bottom: $CAP_SPACE_16;
533
- }
534
- .editor-actions::before,
535
- .editor-actions::after {
536
- content: none;
537
- display: none;
538
- }
539
-
540
- .optional-tags-section {
541
- .optional-count {
542
- margin-left: $CAP_SPACE_08;
543
- color: #666;
544
- }
545
-
546
- z-index: -1;
547
- .optional-tags-content {
548
- padding: $CAP_SPACE_16;
549
- background: #f5f5f5;
550
- border-radius: $CAP_SPACE_04;
551
- }
552
- }
553
- }
554
-
555
- .test-and-preview-section {
556
- .section-title {
557
- margin-bottom: $CAP_SPACE_16;
558
- color: #333;
559
- }
560
-
561
- .preview-content {
562
- border: $CAP_SPACE_01 solid $CAP_G12;
563
- border-radius: $CAP_SPACE_04;
564
- padding: $CAP_SPACE_16;
565
- min-height: 14.286rem;
566
- }
567
- }
568
-
569
- .send-test-section {
570
- .test-description {
571
- margin-bottom: $CAP_SPACE_16;
572
- color: #666;
573
- }
574
- .ant-collapse-header {
575
- padding-left: 0;
576
- }
577
- .ant-collapse-content-box {
578
- padding-left: 0 !important;
579
- }
580
- .send-test-content {
581
- flex-direction: column;
582
- align-items: stretch;
583
- gap: 0;
584
- }
585
- .test-customers-tree-select {
586
- width: 100%;
587
- min-width: 18rem; /* Consistent dropdown width in campaigns and creatives */
588
- min-height: $CAP_SPACE_40;
589
- margin: $CAP_SPACE_12 0 $CAP_SPACE_08;
590
- .ant-select-selection,
591
- .ant-select-selector {
592
- min-height: $CAP_SPACE_40;
593
- height: auto !important;
594
- }
595
- }
596
- .send-test-content .ant-btn {
597
- margin-top: $CAP_SPACE_04;
598
- flex-shrink: 0;
599
- }
600
- .ant-select-selection__choice {
601
- background-color: $CAP_G08;
602
- border-radius: $CAP_SPACE_04;
603
- }
604
- }
239
+ .test-preview-header {
240
+ display: flex;
241
+ align-items: center;
242
+ gap: $CAP_SPACE_12;
243
+
244
+ .back-icon {
245
+ cursor: pointer;
246
+ font-size: $CAP_SPACE_16;
247
+ color: #8c8c8c;
248
+ transition: color 0.2s ease;
249
+
250
+ &:hover {
251
+ color: #262626;
252
+ }
253
+ }
254
+
255
+ .header-title {
256
+ font-size: $CAP_SPACE_16;
257
+ font-weight: 500;
258
+ color: #262626;
259
+ }
260
+ }
261
+
262
+ .test-preview-container {
263
+ margin-left: 2%;
264
+ height: 100%;
265
+ display: flex;
266
+ flex-direction: column;
267
+ }
268
+
269
+ .discard-button {
270
+ padding: 0 $CAP_SPACE_08;
271
+ }
272
+
273
+ .tag-input-field {
274
+ width: 14.714rem;
275
+
276
+ .input {
277
+ height: $CAP_SPACE_40;
278
+ }
279
+ }
280
+
281
+ .test-and-preview-panels {
282
+ display: flex;
283
+ flex: 1;
284
+ }
285
+
286
+ .left-panel {
287
+ width: 40%;
288
+ min-width: 20rem;
289
+ /* Consistent width in campaigns/library mode so test customer dropdown matches creatives */
290
+ padding-right: 1rem;
291
+ border-right: $CAP_SPACE_01 solid $CAP_G12;
292
+ overflow-y: auto;
293
+
294
+ .panel-divider {
295
+ margin: 0;
296
+ }
297
+
298
+ .no-tags-extracted-info-note {
299
+ .note-text {
300
+ white-space: unset;
301
+ }
302
+ }
303
+ }
304
+
305
+ .right-panel {
306
+ flex: 1;
307
+ background-color: $CAP_G09;
308
+ padding: $CAP_SPACE_08 $CAP_SPACE_24;
309
+ }
310
+
311
+ .panel-section {
312
+ margin-bottom: $CAP_SPACE_12;
313
+
314
+ &:last-child {
315
+ margin-bottom: 0;
316
+ }
317
+ }
318
+
319
+ .loading-container {
320
+ display: flex;
321
+ flex-direction: column;
322
+ align-items: center;
323
+ justify-content: center;
324
+ padding: $CAP_SPACE_32;
325
+ text-align: center;
326
+
327
+ .loading-text {
328
+ margin-top: $CAP_SPACE_16;
329
+ color: #666;
330
+ }
331
+ }
332
+
333
+ .no-customer-message,
334
+ .no-tags-message {
335
+ padding: $CAP_SPACE_32;
336
+ text-align: center;
337
+ color: #666;
338
+ background: #f5f5f5;
339
+ border-radius: $CAP_SPACE_04;
340
+ }
341
+
342
+ .custom-values-editor {
343
+ .values-missing-message {
344
+ margin: $CAP_SPACE_16 0;
345
+ }
346
+
347
+ .editor-header {
348
+ display: flex;
349
+ justify-content: flex-end;
350
+ margin-bottom: $CAP_SPACE_16;
351
+
352
+ .json-toggle {
353
+ display: flex;
354
+ align-items: center;
355
+ gap: $CAP_SPACE_08;
356
+
357
+ .toggle-label {
358
+ color: #666;
359
+ }
360
+ }
361
+ }
362
+
363
+ .json-editor {
364
+ border: 0.071rem solid #e0e0e0;
365
+ border-radius: $CAP_SPACE_04;
366
+ background-color: $CAP_WHITE;
367
+ margin-bottom: 1rem;
368
+ overflow: hidden;
369
+
370
+ .json-editor-container {
371
+ display: flex;
372
+ font-family: 'Courier New', monospace;
373
+ font-size: 0.929rem;
374
+ line-height: 1.4;
375
+ }
376
+
377
+ .line-numbers {
378
+ background-color: #f8f8f8;
379
+ border-right: 0.071rem solid #e0e0e0;
380
+ padding: $CAP_SPACE_08 $CAP_SPACE_04;
381
+ user-select: none;
382
+ min-width: $CAP_SPACE_40;
383
+ flex-shrink: 0;
384
+
385
+ .line-number {
386
+ text-align: right;
387
+ color: #8c8c8c;
388
+ font-size: $CAP_SPACE_12;
389
+ padding-right: $CAP_SPACE_08;
390
+ line-height: 1.4;
391
+ height: $CAP_SPACE_19;
392
+ display: flex;
393
+ align-items: center;
394
+ justify-content: flex-end;
395
+ }
396
+ }
397
+
398
+ .json-textarea {
399
+ flex: 1;
400
+ border: none;
401
+ outline: none;
402
+ font-family: 'Courier New', monospace;
403
+ font-size: 0.929rem;
404
+ line-height: 1.4;
405
+ padding: $CAP_SPACE_08 $CAP_SPACE_08;
406
+ background-color: $CAP_WHITE;
407
+ resize: none;
408
+ white-space: pre;
409
+ overflow-wrap: normal;
410
+ overflow-x: auto;
411
+ tab-size: 2;
412
+ color: #3D7790;
413
+
414
+ &:focus {
415
+ outline: none;
416
+ }
417
+ }
418
+
419
+ .json-container {
420
+ font-family: 'Courier New', monospace;
421
+ font-size: 0.929rem;
422
+ line-height: 1.4;
423
+ }
424
+
425
+ .json-line {
426
+ display: flex;
427
+ align-items: center;
428
+ min-height: $CAP_SPACE_20;
429
+ padding-left: $CAP_SPACE_08;
430
+
431
+ &:hover {
432
+ background-color: #f5f5f5;
433
+ }
434
+ }
435
+
436
+ .line-number {
437
+ display: inline-block;
438
+ width: $CAP_SPACE_24;
439
+ text-align: right;
440
+ margin-right: $CAP_SPACE_12;
441
+ color: #8c8c8c;
442
+ font-size: $CAP_SPACE_12;
443
+ user-select: none;
444
+ flex-shrink: 0;
445
+ }
446
+
447
+ .json-indent {
448
+ color: transparent;
449
+ white-space: pre;
450
+ }
451
+
452
+ .json-key {
453
+ color: #3D7790;
454
+ font-weight: 500;
455
+ }
456
+
457
+ .json-colon {
458
+ color: black;
459
+ margin: 0 $CAP_SPACE_02;
460
+ }
461
+
462
+ .json-quote {
463
+ color: #0451a5;
464
+ }
465
+
466
+ .json-brace {
467
+ color: black;
468
+ font-weight: bold;
469
+ }
470
+
471
+ .json-comma {
472
+ color: black;
473
+ }
474
+
475
+ .json-value-input {
476
+ border: none;
477
+ background-color: transparent;
478
+ box-shadow: none;
479
+ padding: 0 $CAP_SPACE_02;
480
+ font-family: inherit;
481
+ font-size: inherit;
482
+ color: #0451a5;
483
+ min-width: $CAP_SPACE_60;
484
+
485
+ &:focus {
486
+ background-color: #e6f7ff;
487
+ border: $CAP_SPACE_01 solid #40a9ff;
488
+ border-radius: $CAP_SPACE_02;
489
+ outline: none;
490
+ }
491
+
492
+ &::placeholder {
493
+ color: #bfbfbf;
494
+ font-style: italic;
495
+ }
496
+
497
+ .ant-input {
498
+ margin: $CAP_SPACE_06 0;
499
+ height: $CAP_SPACE_36;
500
+ width: 14.714rem;
501
+ }
502
+ }
503
+ }
504
+
505
+ .values-table {
506
+ margin-bottom: $CAP_SPACE_16;
507
+ border: $CAP_SPACE_01 solid $CAP_G12;
508
+ border-radius: $CAP_SPACE_04;
509
+ overflow: hidden;
510
+
511
+ .table-header {
512
+ display: flex;
513
+ background: #f5f5f5;
514
+ border-bottom: $CAP_SPACE_01 solid $CAP_G12;
515
+
516
+ .header-cell {
517
+ flex: 1;
518
+ padding: $CAP_SPACE_12 $CAP_SPACE_16;
519
+ font-weight: 500;
520
+ color: #666;
521
+
522
+ &:first-child {
523
+ flex: 2;
524
+ }
525
+ }
526
+ }
527
+
528
+ .value-row {
529
+ display: flex;
530
+ border-bottom: $CAP_SPACE_01 solid $CAP_G12;
531
+
532
+ &:last-child {
533
+ border-bottom: none;
534
+ }
535
+
536
+ .tag-name {
537
+ flex: 2;
538
+ padding: $CAP_SPACE_12 $CAP_SPACE_16;
539
+ color: #333;
540
+ word-break: break-all;
541
+ }
542
+
543
+ .tag-input {
544
+ flex: 1;
545
+ padding: $CAP_SPACE_08 $CAP_SPACE_16;
546
+ display: flex;
547
+ align-items: center;
548
+ }
549
+ }
550
+ }
551
+
552
+ .editor-actions {
553
+ display: flex;
554
+ justify-content: space-between;
555
+ margin-bottom: $CAP_SPACE_16;
556
+ }
557
+
558
+ .editor-actions::before,
559
+ .editor-actions::after {
560
+ content: none;
561
+ display: none;
562
+ }
563
+
564
+ .optional-tags-section {
565
+ .optional-count {
566
+ margin-left: $CAP_SPACE_08;
567
+ color: #666;
568
+ }
569
+
570
+ z-index: -1;
571
+
572
+ .optional-tags-content {
573
+ padding: $CAP_SPACE_16;
574
+ background: #f5f5f5;
575
+ border-radius: $CAP_SPACE_04;
576
+ }
577
+ }
578
+ }
579
+
580
+ .test-and-preview-section {
581
+ .section-title {
582
+ margin-bottom: $CAP_SPACE_16;
583
+ color: #333;
584
+ }
585
+
586
+ .preview-content {
587
+ border: $CAP_SPACE_01 solid $CAP_G12;
588
+ border-radius: $CAP_SPACE_04;
589
+ padding: $CAP_SPACE_16;
590
+ min-height: 14.286rem;
591
+ }
592
+ }
593
+
594
+ .send-test-section {
595
+ .test-description {
596
+ margin-bottom: $CAP_SPACE_16;
597
+ color: #666;
598
+ }
599
+
600
+ .ant-collapse-header {
601
+ padding-left: 0;
602
+ }
603
+
604
+ .ant-collapse-content-box {
605
+ padding-left: 0 !important;
606
+ }
607
+
608
+ .send-test-content {
609
+ flex-direction: column;
610
+ align-items: stretch;
611
+ gap: 0;
612
+ }
613
+
614
+ .test-customers-tree-select {
615
+ width: 100%;
616
+ min-width: 18rem;
617
+ /* Consistent dropdown width in campaigns and creatives */
618
+ min-height: $CAP_SPACE_40;
619
+ margin: $CAP_SPACE_12 0 $CAP_SPACE_08;
620
+
621
+ .ant-select-selection,
622
+ .ant-select-selector {
623
+ min-height: $CAP_SPACE_40;
624
+ height: auto !important;
625
+ }
626
+ }
627
+
628
+ .send-test-content .ant-btn {
629
+ margin-top: $CAP_SPACE_04;
630
+ flex-shrink: 0;
631
+ }
632
+
633
+ .ant-select-selection__choice {
634
+ background-color: $CAP_G08;
635
+ border-radius: $CAP_SPACE_04;
636
+ }
637
+ }
605
638
  }
606
639
 
607
640
  // Test customers TreeSelect dropdown: limit height and make scrollable (dropdown renders in portal)
608
641
  .test-customers-tree-select-dropdown {
609
- min-width: 18rem ;
610
- max-height: 20rem ; /* 320px */
611
- overflow-y: auto ;
612
- .ant-select-tree-list-holder-inner {
613
- overflow: visible;
614
- }
642
+ min-width: 18rem;
643
+ max-height: 20rem;
644
+ /* 320px */
645
+ overflow-y: auto;
646
+
647
+ .ant-select-tree-list-holder-inner {
648
+ overflow: visible;
649
+ }
615
650
  }
616
651
 
617
652
  .test-customer-add-btn {
618
- width: 100%;
619
- background-color: transparent !important;
620
- color: $FONT_COLOR_05 !important;
621
- white-space: normal;
622
- word-break: normal;
623
- overflow-wrap: break-word;
624
- height: auto;
625
-
626
- /* Truncate long email/phone in label so it doesn't break mid-string */
627
- .test-customer-add-btn-value {
628
- display: inline-block;
629
- max-width: 12rem;
630
- overflow: hidden;
631
- text-overflow: ellipsis;
632
- white-space: nowrap;
633
- vertical-align: bottom;
634
- }
653
+ width: 100%;
654
+ background-color: transparent !important;
655
+ color: $FONT_COLOR_05 !important;
656
+ white-space: normal;
657
+ word-break: normal;
658
+ overflow-wrap: break-word;
659
+ height: auto;
660
+
661
+ /* Truncate long email/phone in label so it doesn't break mid-string */
662
+ .test-customer-add-btn-value {
663
+ display: inline-block;
664
+ max-width: 12rem;
665
+ overflow: hidden;
666
+ text-overflow: ellipsis;
667
+ white-space: nowrap;
668
+ vertical-align: bottom;
669
+ }
635
670
  }
636
671
 
637
672
  // Responsive design for smaller screens
638
673
  @media (max-width: 54.857rem) {
639
- .common-test-and-preview-slidebox {
640
- .test-preview-container {
641
- .left-panel {
642
- border-right: none;
643
- border-bottom: $CAP_SPACE_01 solid $CAP_G12;
644
- padding-right: 0;
645
- padding-bottom: $CAP_SPACE_16;
646
- margin-bottom: $CAP_SPACE_16;
647
- }
648
-
649
- .right-panel {
650
- padding-left: 0;
651
- padding-top: $CAP_SPACE_16;
652
- }
653
- }
654
- }
674
+ .common-test-and-preview-slidebox {
675
+ .test-preview-container {
676
+ .left-panel {
677
+ border-right: none;
678
+ border-bottom: $CAP_SPACE_01 solid $CAP_G12;
679
+ padding-right: 0;
680
+ padding-bottom: $CAP_SPACE_16;
681
+ margin-bottom: $CAP_SPACE_16;
682
+ }
683
+
684
+ .right-panel {
685
+ padding-left: 0;
686
+ padding-top: $CAP_SPACE_16;
687
+ }
688
+ }
689
+ }
655
690
  }
656
691
 
657
692
  .preview-chrome {
658
- background: $CAP_WHITE;
659
- overflow: hidden;
660
-
661
- .preview-divider {
662
- margin: 0;
663
- }
664
- .preview-header {
665
- display: flex;
666
- justify-content: space-between;
667
- align-items: center;
668
- padding: $CAP_SPACE_08 $CAP_SPACE_16 $CAP_SPACE_06 $CAP_SPACE_16;
669
- background: #f0f2f5;
670
-
671
- .preview-for {
672
- font-size: $FONT_SIZE_M;
673
- color: #595959;
674
- gap: $CAP_SPACE_04;
675
- b {
676
- color: #262626;
677
- margin-left: $CAP_SPACE_04;
678
- }
679
- }
680
-
681
- .device-toggle {
682
- display: flex;
683
- gap: $CAP_SPACE_08;
684
- background-color: #e0e0e0;
685
- padding: $CAP_SPACE_06 $CAP_SPACE_08;
686
- border-radius: $CAP_SPACE_08;
687
-
688
- .anticon {
689
- padding: $CAP_SPACE_04;
690
- border-radius: $CAP_SPACE_04;
691
- cursor: pointer;
692
- color: #595959;
693
-
694
- &.active {
695
- background-color: $CAP_WHITE;
696
- color: #262626;
697
- box-shadow: 0 $CAP_SPACE_01 $CAP_SPACE_03 rgba(0, 0, 0, 0.1);
698
- }
699
- }
700
- }
701
- }
702
-
703
- .preview-body {
704
- border-radius: $CAP_SPACE_08;
705
- box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0,0,0,0.1);
706
- &.mobile {
707
- width: 26.786rem;
708
- margin: 0 auto;
709
- .browser-bar {
710
- background: $CAP_G08;
711
- }
712
- }
713
-
714
- .browser-bar {
715
- display: flex;
716
- align-items: center;
717
- padding: $CAP_SPACE_08 $CAP_SPACE_12;
718
- gap: $CAP_SPACE_08;
719
-
720
- .browser-controls {
721
- display: flex;
722
- gap: $CAP_SPACE_08;
723
- color: $CAP_G06;
724
- .refresh-icon {
725
- margin-top: $CAP_SPACE_04;
726
- svg path {
727
- fill: $CAP_G06;
728
- }
729
- }
730
- }
731
- .address-bar {
732
- flex-grow: 1;
733
- background: $CAP_WHITE;
734
- border-radius: $CAP_SPACE_16;
735
- padding: $CAP_SPACE_04 $CAP_SPACE_12;
736
- font-size: $FONT_SIZE_S;
737
- color: #595959;
738
- text-align: center;
739
- border: $CAP_SPACE_01 solid $CAP_G07;
740
- .address-bar-label {
741
- float: left;
742
- }
743
- .browser-address-bar-icon {
744
- float: right;
745
- }
746
- }
747
- .browser-actions {
748
- color: #8c8c8c;
749
- }
750
- }
751
-
752
- .email-header {
753
- display: flex;
754
- align-items: center;
755
- padding: $CAP_SPACE_16;
756
- gap: $CAP_SPACE_16;
757
- .back-arrow {
758
- font-size: $CAP_SPACE_16;
759
- }
760
- .email-meta {
761
- margin-left: auto;
762
- display: flex;
763
- align-items: center;
764
- gap: $CAP_SPACE_08;
765
- font-size: $FONT_SIZE_S;
766
- color: #8c8c8c;
767
- .dots {
768
- width: $CAP_SPACE_06;
769
- height: $CAP_SPACE_06;
770
- border-radius: 50%;
771
- background: $CAP_COLOR_16;
772
- }
773
- }
774
- }
775
-
776
- .email-from {
777
- display: flex;
778
- align-items: center;
779
- padding: 0 $CAP_SPACE_16 $CAP_SPACE_16;
780
- gap: $CAP_SPACE_12;
781
- .sender-avatar {
782
- width: $CAP_SPACE_40;
783
- height: $CAP_SPACE_40;
784
- border-radius: 50%;
785
- background: $CAP_G12;
786
- }
787
- .sender-info {
788
- .sender-name {
789
- font-weight: 500;
790
- }
791
- .recipient-info {
792
- font-size: $FONT_SIZE_S;
793
- color: #8c8c8c;
794
- }
795
- }
796
- }
797
-
798
- .email-content {
799
- border-top: $CAP_SPACE_01 solid $CAP_G12;
800
- padding: 0 $CAP_SPACE_16;
801
- iframe {
802
- border: none;
803
- }
804
- }
805
- }
693
+ background: $CAP_WHITE;
694
+ overflow: hidden;
695
+
696
+ .preview-divider {
697
+ margin: 0;
698
+ }
699
+
700
+ .preview-header {
701
+ display: flex;
702
+ justify-content: space-between;
703
+ align-items: center;
704
+ padding: $CAP_SPACE_08 $CAP_SPACE_16 $CAP_SPACE_06 $CAP_SPACE_16;
705
+ background: #f0f2f5;
706
+
707
+ .preview-for {
708
+ font-size: $FONT_SIZE_M;
709
+ color: #595959;
710
+ gap: $CAP_SPACE_04;
711
+
712
+ b {
713
+ color: #262626;
714
+ margin-left: $CAP_SPACE_04;
715
+ }
716
+ }
717
+
718
+ .device-toggle {
719
+ display: flex;
720
+ gap: $CAP_SPACE_08;
721
+ background-color: #e0e0e0;
722
+ padding: $CAP_SPACE_06 $CAP_SPACE_08;
723
+ border-radius: $CAP_SPACE_08;
724
+
725
+ .anticon {
726
+ padding: $CAP_SPACE_04;
727
+ border-radius: $CAP_SPACE_04;
728
+ cursor: pointer;
729
+ color: #595959;
730
+
731
+ &.active {
732
+ background-color: $CAP_WHITE;
733
+ color: #262626;
734
+ box-shadow: 0 $CAP_SPACE_01 $CAP_SPACE_03 rgba(0, 0, 0, 0.1);
735
+ }
736
+ }
737
+ }
738
+ }
739
+
740
+ .preview-body {
741
+ border-radius: $CAP_SPACE_08;
742
+ box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0, 0, 0, 0.1);
743
+
744
+ &.mobile {
745
+ width: 26.786rem;
746
+ margin: 0 auto;
747
+
748
+ .browser-bar {
749
+ background: $CAP_G08;
750
+ }
751
+ }
752
+
753
+ .browser-bar {
754
+ display: flex;
755
+ align-items: center;
756
+ padding: $CAP_SPACE_08 $CAP_SPACE_12;
757
+ gap: $CAP_SPACE_08;
758
+
759
+ .browser-controls {
760
+ display: flex;
761
+ gap: $CAP_SPACE_08;
762
+ color: $CAP_G06;
763
+
764
+ .refresh-icon {
765
+ margin-top: $CAP_SPACE_04;
766
+
767
+ svg path {
768
+ fill: $CAP_G06;
769
+ }
770
+ }
771
+ }
772
+
773
+ .address-bar {
774
+ flex-grow: 1;
775
+ background: $CAP_WHITE;
776
+ border-radius: $CAP_SPACE_16;
777
+ padding: $CAP_SPACE_04 $CAP_SPACE_12;
778
+ font-size: $FONT_SIZE_S;
779
+ color: #595959;
780
+ text-align: center;
781
+ border: $CAP_SPACE_01 solid $CAP_G07;
782
+
783
+ .address-bar-label {
784
+ float: left;
785
+ }
786
+
787
+ .browser-address-bar-icon {
788
+ float: right;
789
+ }
790
+ }
791
+
792
+ .browser-actions {
793
+ color: #8c8c8c;
794
+ }
795
+ }
796
+
797
+ .email-header {
798
+ display: flex;
799
+ align-items: center;
800
+ padding: $CAP_SPACE_16;
801
+ gap: $CAP_SPACE_16;
802
+
803
+ .back-arrow {
804
+ font-size: $CAP_SPACE_16;
805
+ }
806
+
807
+ .email-meta {
808
+ margin-left: auto;
809
+ display: flex;
810
+ align-items: center;
811
+ gap: $CAP_SPACE_08;
812
+ font-size: $FONT_SIZE_S;
813
+ color: #8c8c8c;
814
+
815
+ .dots {
816
+ width: $CAP_SPACE_06;
817
+ height: $CAP_SPACE_06;
818
+ border-radius: 50%;
819
+ background: $CAP_COLOR_16;
820
+ }
821
+ }
822
+ }
823
+
824
+ .email-from {
825
+ display: flex;
826
+ align-items: center;
827
+ padding: 0 $CAP_SPACE_16 $CAP_SPACE_16;
828
+ gap: $CAP_SPACE_12;
829
+
830
+ .sender-avatar {
831
+ width: $CAP_SPACE_40;
832
+ height: $CAP_SPACE_40;
833
+ border-radius: 50%;
834
+ background: $CAP_G12;
835
+ }
836
+
837
+ .sender-info {
838
+ .sender-name {
839
+ font-weight: 500;
840
+ }
841
+
842
+ .recipient-info {
843
+ font-size: $FONT_SIZE_S;
844
+ color: #8c8c8c;
845
+ }
846
+ }
847
+ }
848
+
849
+ .email-content {
850
+ border-top: $CAP_SPACE_01 solid $CAP_G12;
851
+ padding: 0 $CAP_SPACE_16;
852
+
853
+ iframe {
854
+ border: none;
855
+ }
856
+ }
857
+ }
806
858
  }