@useinsider/guido 1.0.0-beta.d5da5b3 → 1.0.0-beta.dad21f4
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 +25 -329
- package/dist/@types/generic.d.ts +0 -7
- package/dist/components/Guido.vue.d.ts +3 -13
- package/dist/components/Guido.vue.js +8 -8
- package/dist/components/Guido.vue2.js +33 -61
- package/dist/components/organisms/header/LeftSlot.vue.js +5 -5
- package/dist/components/organisms/header/LeftSlot.vue2.js +8 -10
- package/dist/components/organisms/header/MiddleSlot.vue.js +6 -6
- package/dist/components/organisms/header/MiddleSlot.vue2.js +13 -17
- package/dist/components/organisms/header/RightSlot.vue.js +1 -1
- package/dist/components/organisms/header/RightSlot.vue2.js +14 -28
- package/dist/components/organisms/header/ViewOptions.vue.js +6 -6
- package/dist/composables/useExport.d.ts +1 -1
- package/dist/composables/useExport.js +20 -35
- package/dist/composables/useStripo.js +14 -15
- package/dist/composables/useTemplates.d.ts +5 -0
- package/dist/composables/useTemplates.js +27 -0
- package/dist/guido.css +1 -1
- package/dist/services/stripoApi.d.ts +1 -2
- package/dist/services/stripoApi.js +7 -27
- package/dist/static/templates/default/index.html.js +5 -0
- package/dist/static/templates/default/style.css.js +119 -0
- package/dist/stores/editor.d.ts +0 -4
- package/dist/stores/editor.js +3 -7
- package/package.json +2 -2
- package/dist/components/organisms/design-preview/AmpErrorModal.vue.d.ts +0 -16
- package/dist/components/organisms/design-preview/AmpErrorModal.vue.js +0 -21
- package/dist/components/organisms/design-preview/AmpErrorModal.vue2.js +0 -31
- package/dist/components/organisms/design-preview/DesktopPreview.vue.d.ts +0 -16
- package/dist/components/organisms/design-preview/DesktopPreview.vue.js +0 -22
- package/dist/components/organisms/design-preview/DesktopPreview.vue2.js +0 -29
- package/dist/components/organisms/design-preview/EmailPreview.vue.d.ts +0 -16
- package/dist/components/organisms/design-preview/EmailPreview.vue.js +0 -17
- package/dist/components/organisms/design-preview/EmailPreview.vue2.js +0 -40
- package/dist/components/organisms/design-preview/EmailView.vue.d.ts +0 -18
- package/dist/components/organisms/design-preview/EmailView.vue.js +0 -19
- package/dist/components/organisms/design-preview/EmailView.vue2.js +0 -24
- package/dist/components/organisms/design-preview/InboxView.vue.d.ts +0 -17
- package/dist/components/organisms/design-preview/InboxView.vue.js +0 -19
- package/dist/components/organisms/design-preview/InboxView.vue2.js +0 -23
- package/dist/components/organisms/design-preview/MobilePreview.vue.d.ts +0 -17
- package/dist/components/organisms/design-preview/MobilePreview.vue.js +0 -17
- package/dist/components/organisms/design-preview/MobilePreview.vue2.js +0 -23
- package/dist/components/organisms/header/AmpToggle.vue.d.ts +0 -2
- package/dist/components/organisms/header/AmpToggle.vue.js +0 -17
- package/dist/components/organisms/header/AmpToggle.vue2.js +0 -48
- package/dist/composables/useDebounce.d.ts +0 -4
- package/dist/composables/useDebounce.js +0 -12
- package/dist/composables/useGuidoActions.d.ts +0 -46
- package/dist/composables/useGuidoActions.js +0 -37
- package/dist/composables/useHtmlCompiler.d.ts +0 -4
- package/dist/composables/useHtmlCompiler.js +0 -16
- package/dist/composables/useMobileGmailFit.d.ts +0 -5
- package/dist/composables/useMobileGmailFit.js +0 -69
- package/dist/composables/usePreviewMode.d.ts +0 -6
- package/dist/composables/usePreviewMode.js +0 -19
- package/dist/composables/useProvideInject.d.ts +0 -14
- package/dist/composables/useProvideInject.js +0 -17
- package/dist/config/compiler/htmlCompilerRules.d.ts +0 -2
- package/dist/config/compiler/htmlCompilerRules.js +0 -145
- package/dist/config/compiler/outlookCompilerRules.d.ts +0 -0
- package/dist/enums/emailPreview.d.ts +0 -3
- package/dist/enums/emailPreview.js +0 -6
- package/dist/enums/gmailMobilePreview.d.ts +0 -7
- package/dist/enums/gmailMobilePreview.js +0 -17
- package/dist/inbox-mockup.svg +0 -39
- package/dist/mock/api/default-template.d.ts +0 -2
- package/dist/phone-mockup.svg +0 -31
- package/dist/utils/htmlCompiler.d.ts +0 -12
- package/dist/utils/htmlCompiler.js +0 -70
package/README.md
CHANGED
|
@@ -27,15 +27,10 @@ npm install @useinsider/guido
|
|
|
27
27
|
<div>
|
|
28
28
|
<Guido
|
|
29
29
|
ref="guidoEditor"
|
|
30
|
-
:
|
|
30
|
+
:email-id="emailId"
|
|
31
31
|
:user-id="userId"
|
|
32
32
|
:guido-config="guidoConfig"
|
|
33
|
-
:html="initialHtml"
|
|
34
|
-
:css="initialCss"
|
|
35
33
|
@dynamic-content:open="handleDynamicContentOpen"
|
|
36
|
-
@back="handleBack"
|
|
37
|
-
@save:start="handleSaveStart"
|
|
38
|
-
@save:complete="handleSaveComplete"
|
|
39
34
|
/>
|
|
40
35
|
</div>
|
|
41
36
|
</template>
|
|
@@ -49,54 +44,28 @@ export default {
|
|
|
49
44
|
},
|
|
50
45
|
data() {
|
|
51
46
|
return {
|
|
52
|
-
|
|
53
|
-
userId: '
|
|
54
|
-
initialHtml: '<p>Initial HTML content</p>',
|
|
55
|
-
initialCss: 'p { color: #333; }',
|
|
47
|
+
emailId: 'abc123',
|
|
48
|
+
userId: '12345',
|
|
56
49
|
guidoConfig: {
|
|
57
|
-
translationsPath: 'window.trans.en'
|
|
58
|
-
|
|
59
|
-
ignoreDefaultHtmlCompilerRules: false,
|
|
60
|
-
},
|
|
50
|
+
translationsPath: 'window.trans.en'
|
|
51
|
+
}
|
|
61
52
|
dynamicContentModalVisible: false
|
|
62
53
|
};
|
|
63
54
|
},
|
|
64
55
|
|
|
65
56
|
methods: {
|
|
66
|
-
handleDynamicContentOpen(
|
|
67
|
-
console.log('Dynamic content requested:', detail);
|
|
57
|
+
handleDynamicContentOpen() {
|
|
68
58
|
this.dynamicContentModalVisible = true;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
handleBack() {
|
|
72
|
-
console.log('User clicked back button');
|
|
73
|
-
// Handle navigation back
|
|
74
|
-
},
|
|
75
|
-
|
|
76
|
-
handleSaveStart() {
|
|
77
|
-
console.log('Save process started');
|
|
78
|
-
// Show loading indicator
|
|
79
|
-
},
|
|
80
|
-
|
|
81
|
-
handleSaveComplete(template) {
|
|
82
|
-
console.log('Save completed:', template);
|
|
83
|
-
// Handle saved template data
|
|
84
|
-
},
|
|
85
|
-
|
|
59
|
+
}
|
|
86
60
|
// ⚠️ Your own Dynamic Content Modal should have this id: #guido-dynamic-content-modal
|
|
87
|
-
|
|
88
|
-
this.$
|
|
89
|
-
text: '
|
|
90
|
-
value: '
|
|
91
|
-
fallback: 'Fallback
|
|
61
|
+
handleDynamicContentApply() {
|
|
62
|
+
this.$ref.guidoEditor.applyDynamicContent({
|
|
63
|
+
text: 'Text',
|
|
64
|
+
value: 'Value',
|
|
65
|
+
fallback: 'Fallback'
|
|
92
66
|
});
|
|
93
67
|
|
|
94
68
|
this.dynamicContentModalVisible = false;
|
|
95
|
-
},
|
|
96
|
-
|
|
97
|
-
// ⚠️ It's mandatory. There is no way to understand if user closes the modal without selection.
|
|
98
|
-
handleDynamicContentClose() {
|
|
99
|
-
this.$refs.guidoEditor?.dynamicContent.close();
|
|
100
69
|
}
|
|
101
70
|
}
|
|
102
71
|
};
|
|
@@ -109,28 +78,16 @@ export default {
|
|
|
109
78
|
|
|
110
79
|
| Prop | Type | Required | Default | Description |
|
|
111
80
|
|------|------|----------|---------|-------------|
|
|
112
|
-
| `
|
|
113
|
-
| `userId` | `string` | ✅ | - | Unique identifier for the user |
|
|
81
|
+
| `emailId` | `string` | ✅ | - | Unique identifier for the email draft |
|
|
82
|
+
| `userId` | `string` | ✅ | - | Unique identifier for the user draft |
|
|
83
|
+
| `username` | `string` | ⚪ | Guido User | User name |
|
|
84
|
+
| `partnerName` | `string` | ⚪ | Getting from URL host | Unique identifier for the partner draft |
|
|
85
|
+
| `productType` | `string` | ⚪ | Getting from URL path | Unique identifier for the product draft |
|
|
114
86
|
| `guidoConfig` | `GuidoConfig` | ✅ | - | Configuration object for the editor |
|
|
115
|
-
| `partnerName` | `string` | ⚪ | From URL host | Partner identifier |
|
|
116
|
-
| `productType` | `string` | ⚪ | From URL path | Product type identifier |
|
|
117
|
-
| `username` | `string` | ⚪ | `'Guido User'` | Display name for the user |
|
|
118
|
-
| `html` | `string` | ⚪ | `''` | Initial HTML content for the template |
|
|
119
|
-
| `css` | `string` | ⚪ | `''` | Initial CSS styles for the template |
|
|
120
|
-
|
|
121
|
-
### Guido Component Events
|
|
122
|
-
|
|
123
|
-
| Event | Payload | Description |
|
|
124
|
-
|-------|---------|-------------|
|
|
125
|
-
| `dynamic-content:open` | `DynamicContent \| null` | Fired when user requests to insert dynamic content |
|
|
126
|
-
| `back` | - | Fired when user clicks the back button |
|
|
127
|
-
| `save:start` | - | Fired when the save process begins |
|
|
128
|
-
| `save:complete` | `Omit<Template, 'forceRecreate'>` | Fired when template is successfully saved |
|
|
129
87
|
|
|
130
88
|
### Guido Exposed Methods
|
|
131
89
|
```typescript
|
|
132
|
-
|
|
133
|
-
dynamicContent.close();
|
|
90
|
+
applyDynamicContent(DynamicContent);
|
|
134
91
|
```
|
|
135
92
|
|
|
136
93
|
### Guido Interfaces
|
|
@@ -138,16 +95,12 @@ dynamicContent.close();
|
|
|
138
95
|
```typescript
|
|
139
96
|
interface GuidoConfig {
|
|
140
97
|
translationsPath: string;
|
|
141
|
-
htmlCompilerRules: CompilerRule[];
|
|
142
|
-
ignoreDefaultHtmlCompilerRules: boolean;
|
|
143
98
|
}
|
|
144
99
|
```
|
|
145
100
|
|
|
146
101
|
| Property | Type | Default | Description |
|
|
147
102
|
|----------|------|---------|-------------|
|
|
148
103
|
| `translationsPath` | `string` | `'window.trans.en'` | JavaScript path to the translations object |
|
|
149
|
-
| `htmlCompilerRules` | `CompilerRule[]` | `[]` | Additional compiler rules to apply to HTML content. See [HTML Compiler Rules](#-html-compiler-rules) section below |
|
|
150
|
-
| `ignoreDefaultHtmlCompilerRules` | `boolean` | `false` | Skip default compiler rules and only use custom rules. Default rules: `src/config/compiler/htmlCompilerRules.ts` |
|
|
151
104
|
|
|
152
105
|
```typescript
|
|
153
106
|
interface DynamicContent {
|
|
@@ -156,7 +109,6 @@ interface DynamicContent {
|
|
|
156
109
|
fallback?: string;
|
|
157
110
|
}
|
|
158
111
|
```
|
|
159
|
-
---
|
|
160
112
|
|
|
161
113
|
| Property | Type | Default | Description |
|
|
162
114
|
|----------|------|---------|-------------|
|
|
@@ -177,185 +129,6 @@ import type { GuidoConfig } from '@useinsider/guido';
|
|
|
177
129
|
import type { StripoEventType } from '@useinsider/guido';
|
|
178
130
|
```
|
|
179
131
|
|
|
180
|
-
## 🔨 HTML Compiler Rules
|
|
181
|
-
|
|
182
|
-
Guido includes a powerful HTML compiler system that allows you to transform HTML content with custom rules. You can define additional rules and optionally ignore the default rules.
|
|
183
|
-
|
|
184
|
-
### Rule Types
|
|
185
|
-
|
|
186
|
-
There are 4 types of compiler rules:
|
|
187
|
-
|
|
188
|
-
#### 1. Replace Rule
|
|
189
|
-
Replace specific strings in HTML content.
|
|
190
|
-
|
|
191
|
-
```typescript
|
|
192
|
-
{
|
|
193
|
-
id: 'fix-encoding',
|
|
194
|
-
description: 'Fix URL encoding issues',
|
|
195
|
-
type: 'replace',
|
|
196
|
-
search: '{%22', // String to find
|
|
197
|
-
replacement: '%7B%22', // String to replace with
|
|
198
|
-
replaceAll: true, // Replace all occurrences (default: true)
|
|
199
|
-
priority: 10 // Execution priority (lower = earlier)
|
|
200
|
-
}
|
|
201
|
-
```
|
|
202
|
-
|
|
203
|
-
#### 2. Regex Rule
|
|
204
|
-
Use regular expressions for complex pattern matching and replacement.
|
|
205
|
-
|
|
206
|
-
```typescript
|
|
207
|
-
{
|
|
208
|
-
id: 'remove-comments',
|
|
209
|
-
description: 'Remove HTML comments',
|
|
210
|
-
type: 'regex',
|
|
211
|
-
pattern: '<!--.*?-->', // Regex pattern
|
|
212
|
-
replacement: '', // Replacement string
|
|
213
|
-
flags: 'g', // Regex flags (default: 'g')
|
|
214
|
-
priority: 20
|
|
215
|
-
}
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
#### 3. Remove Rule
|
|
219
|
-
Remove specific strings or patterns from HTML content.
|
|
220
|
-
|
|
221
|
-
```typescript
|
|
222
|
-
{
|
|
223
|
-
id: 'cleanup-scripts',
|
|
224
|
-
description: 'Remove unwanted script tags',
|
|
225
|
-
type: 'remove',
|
|
226
|
-
targets: [ // Array of strings or RegExp objects
|
|
227
|
-
'<script src="unwanted.js"></script>',
|
|
228
|
-
/onclick="[^"]*"/g
|
|
229
|
-
],
|
|
230
|
-
priority: 30
|
|
231
|
-
}
|
|
232
|
-
```
|
|
233
|
-
|
|
234
|
-
#### 4. Custom Rule
|
|
235
|
-
Define complex transformation logic with a custom processor function.
|
|
236
|
-
|
|
237
|
-
```typescript
|
|
238
|
-
{
|
|
239
|
-
id: 'add-meta-tags',
|
|
240
|
-
description: 'Add custom meta tags to head',
|
|
241
|
-
type: 'custom',
|
|
242
|
-
processor: (html: string): string => {
|
|
243
|
-
// Custom transformation logic
|
|
244
|
-
const metaTags = '<meta name="custom" content="value">';
|
|
245
|
-
return html.replace('</head>', `${metaTags}</head>`);
|
|
246
|
-
},
|
|
247
|
-
priority: 40
|
|
248
|
-
}
|
|
249
|
-
```
|
|
250
|
-
|
|
251
|
-
### Using HTML Compiler Rules
|
|
252
|
-
|
|
253
|
-
#### Basic Usage with Custom Rules
|
|
254
|
-
|
|
255
|
-
```typescript
|
|
256
|
-
const guidoConfig = {
|
|
257
|
-
translationsPath: 'window.trans.en',
|
|
258
|
-
htmlCompilerRules: [
|
|
259
|
-
{
|
|
260
|
-
id: 'replace-domain',
|
|
261
|
-
description: 'Replace old domain with new one',
|
|
262
|
-
type: 'replace',
|
|
263
|
-
search: 'old-domain.com',
|
|
264
|
-
replacement: 'new-domain.com',
|
|
265
|
-
replaceAll: true,
|
|
266
|
-
priority: 10
|
|
267
|
-
},
|
|
268
|
-
{
|
|
269
|
-
id: 'remove-tracking',
|
|
270
|
-
description: 'Remove tracking pixels',
|
|
271
|
-
type: 'regex',
|
|
272
|
-
pattern: '<img[^>]*tracking[^>]*>',
|
|
273
|
-
replacement: '',
|
|
274
|
-
flags: 'gi',
|
|
275
|
-
priority: 20
|
|
276
|
-
}
|
|
277
|
-
]
|
|
278
|
-
};
|
|
279
|
-
```
|
|
280
|
-
|
|
281
|
-
#### Ignoring Default Rules
|
|
282
|
-
|
|
283
|
-
```typescript
|
|
284
|
-
const guidoConfig = {
|
|
285
|
-
translationsPath: 'window.trans.en',
|
|
286
|
-
ignoreDefaultHtmlCompilerRules: true, // Skip all default rules
|
|
287
|
-
htmlCompilerRules: [
|
|
288
|
-
// Only your custom rules will be applied
|
|
289
|
-
{
|
|
290
|
-
id: 'custom-transformation',
|
|
291
|
-
type: 'replace',
|
|
292
|
-
search: 'old-text',
|
|
293
|
-
replacement: 'new-text',
|
|
294
|
-
priority: 1
|
|
295
|
-
}
|
|
296
|
-
]
|
|
297
|
-
};
|
|
298
|
-
```
|
|
299
|
-
|
|
300
|
-
### Rule Execution Order
|
|
301
|
-
|
|
302
|
-
Rules are executed in priority order (lower numbers first). Rules with the same priority are executed in array order.
|
|
303
|
-
|
|
304
|
-
- **Priority 1-99**: Reserved for critical transformations
|
|
305
|
-
- **Priority 100-999**: Standard transformations
|
|
306
|
-
- **Priority 1000+**: Additional custom rules (automatically assigned)
|
|
307
|
-
|
|
308
|
-
### Default Rules
|
|
309
|
-
|
|
310
|
-
Guido includes several default rules for common email HTML optimizations:
|
|
311
|
-
|
|
312
|
-
- **URL encoding fixes**: Fixes malformed URL encoding in dynamic content
|
|
313
|
-
- **Template tag restoration**: Restores `{{}}` template tags that got URL encoded
|
|
314
|
-
- **HTML entity decoding**: Converts `<` and `>` back to `<` and `>`
|
|
315
|
-
- **Cleanup rules**: Removes unwanted iframe and style elements
|
|
316
|
-
- **MSO conditions**: Manages Outlook-specific conditional comments
|
|
317
|
-
- **Domain replacement**: Updates old image domains to current ones
|
|
318
|
-
|
|
319
|
-
You can view all default rules in: `src/config/compiler/htmlCompilerRules.ts`
|
|
320
|
-
|
|
321
|
-
### CompilerRule Interface
|
|
322
|
-
|
|
323
|
-
```typescript
|
|
324
|
-
type CompilerRuleType = 'replace' | 'regex' | 'remove' | 'custom';
|
|
325
|
-
|
|
326
|
-
interface BaseCompilerRule {
|
|
327
|
-
id: string;
|
|
328
|
-
description?: string;
|
|
329
|
-
priority: number;
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
interface ReplaceRule extends BaseCompilerRule {
|
|
333
|
-
type: 'replace';
|
|
334
|
-
search: string;
|
|
335
|
-
replacement: string;
|
|
336
|
-
replaceAll?: boolean; // Default: true
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
interface RegexRule extends BaseCompilerRule {
|
|
340
|
-
type: 'regex';
|
|
341
|
-
pattern: string;
|
|
342
|
-
replacement: string;
|
|
343
|
-
flags?: string; // Default: 'g'
|
|
344
|
-
}
|
|
345
|
-
|
|
346
|
-
interface RemoveRule extends BaseCompilerRule {
|
|
347
|
-
type: 'remove';
|
|
348
|
-
targets: (string | RegExp)[]; // Array of strings or RegExp objects
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
interface CustomRule extends BaseCompilerRule {
|
|
352
|
-
type: 'custom';
|
|
353
|
-
processor: (html: string) => string;
|
|
354
|
-
}
|
|
355
|
-
|
|
356
|
-
type CompilerRule = ReplaceRule | RegexRule | RemoveRule | CustomRule;
|
|
357
|
-
```
|
|
358
|
-
|
|
359
132
|
---
|
|
360
133
|
|
|
361
134
|
## 🔧 Development
|
|
@@ -412,87 +185,6 @@ src/
|
|
|
412
185
|
└── library.ts # Main export
|
|
413
186
|
```
|
|
414
187
|
|
|
415
|
-
## 🔌 Provide/Inject Utilities
|
|
416
|
-
|
|
417
|
-
Guido includes type-safe utilities for Vue's provide/inject system to facilitate dependency injection between components.
|
|
418
|
-
|
|
419
|
-
### useProvideInject
|
|
420
|
-
|
|
421
|
-
The `useProvideInject` composable provides two helper functions for type-safe dependency injection:
|
|
422
|
-
|
|
423
|
-
#### Basic Usage
|
|
424
|
-
|
|
425
|
-
```typescript
|
|
426
|
-
// Parent component
|
|
427
|
-
import { provideValue } from '@useinsider/guido';
|
|
428
|
-
import { InjectionKey } from 'vue';
|
|
429
|
-
|
|
430
|
-
// Define a typed injection key
|
|
431
|
-
const MyServiceKey: InjectionKey<MyService> = Symbol('MyService');
|
|
432
|
-
|
|
433
|
-
// Provide the value
|
|
434
|
-
const myService = new MyService();
|
|
435
|
-
provideValue(MyServiceKey, myService);
|
|
436
|
-
|
|
437
|
-
// Child component
|
|
438
|
-
import { useInjectedValue } from '@useinsider/guido';
|
|
439
|
-
|
|
440
|
-
// Inject the value with type safety
|
|
441
|
-
const myService = useInjectedValue(MyServiceKey);
|
|
442
|
-
```
|
|
443
|
-
|
|
444
|
-
#### With Default Value
|
|
445
|
-
|
|
446
|
-
```typescript
|
|
447
|
-
// Inject with a fallback value
|
|
448
|
-
const myService = useInjectedValue(MyServiceKey, new DefaultService());
|
|
449
|
-
```
|
|
450
|
-
|
|
451
|
-
#### Error Handling
|
|
452
|
-
|
|
453
|
-
The `useInjectedValue` function will throw a descriptive error if no provider is found and no default value is provided:
|
|
454
|
-
|
|
455
|
-
```typescript
|
|
456
|
-
// This will throw an error if no provider exists
|
|
457
|
-
try {
|
|
458
|
-
const myService = useInjectedValue(MyServiceKey);
|
|
459
|
-
} catch (error) {
|
|
460
|
-
console.error('No provider found for MyService');
|
|
461
|
-
}
|
|
462
|
-
```
|
|
463
|
-
|
|
464
|
-
### API Reference
|
|
465
|
-
|
|
466
|
-
#### `provideValue`
|
|
467
|
-
|
|
468
|
-
```typescript
|
|
469
|
-
provideValue<T>(key: InjectionKey<T>, value: T): void
|
|
470
|
-
```
|
|
471
|
-
|
|
472
|
-
Provides a value using Vue's provide system with type safety.
|
|
473
|
-
|
|
474
|
-
| Parameter | Type | Description |
|
|
475
|
-
|-----------|------|-------------|
|
|
476
|
-
| `key` | `InjectionKey<T>` | The typed injection key |
|
|
477
|
-
| `value` | `T` | The value to provide |
|
|
478
|
-
|
|
479
|
-
#### `useInjectedValue`
|
|
480
|
-
|
|
481
|
-
```typescript
|
|
482
|
-
useInjectedValue<T>(key: InjectionKey<T>, defaultValue?: T): T
|
|
483
|
-
```
|
|
484
|
-
|
|
485
|
-
Injects a value using Vue's inject system with type safety and error handling.
|
|
486
|
-
|
|
487
|
-
| Parameter | Type | Required | Description |
|
|
488
|
-
|-----------|------|----------|-------------|
|
|
489
|
-
| `key` | `InjectionKey<T>` | ✅ | The typed injection key |
|
|
490
|
-
| `defaultValue` | `T` | ⚪ | Optional fallback value |
|
|
491
|
-
|
|
492
|
-
**Returns:** `T` - The injected value
|
|
493
|
-
|
|
494
|
-
**Throws:** `Error` - When no provider is found and no default value is provided
|
|
495
|
-
|
|
496
188
|
## 🌐 i18n
|
|
497
189
|
Before running the project, it sends to request to inone.useinsider.com/translations and writes the JSON file into - [trans.json](src/mock/responses/trans.json).
|
|
498
190
|
It allows to use production or local translations on your code. 🚀
|
|
@@ -518,16 +210,16 @@ Since bun does not have packaging yet, use npm here: 🥲
|
|
|
518
210
|
npm pack
|
|
519
211
|
```
|
|
520
212
|
|
|
521
|
-
It'll crate like `useinsider-guido-1.0.0.
|
|
213
|
+
It'll crate like `useinsider-guido-1.0.0.gz` file.
|
|
522
214
|
|
|
523
215
|
Move this file to your project path like: `email-fe` via:
|
|
524
216
|
```sh
|
|
525
|
-
cp useinsider-guido-1.0.0.
|
|
217
|
+
cp useinsider-guido-1.0.0.gz ../email-fe
|
|
526
218
|
```
|
|
527
219
|
|
|
528
220
|
Install the file to your project:
|
|
529
221
|
```sh
|
|
530
|
-
npm i ./useinsider-guido-1.0.0.
|
|
222
|
+
npm i ./useinsider-guido-1.0.0.gz
|
|
531
223
|
```
|
|
532
224
|
|
|
533
225
|
Then you just need to rebuild to your project or restart the Container. 🎉
|
|
@@ -579,4 +271,8 @@ ISC License
|
|
|
579
271
|
- Master Version Generator should be fixed.
|
|
580
272
|
- Playwright integration
|
|
581
273
|
- Commitlint & Precommit Hooks integration
|
|
274
|
+
- We need to emit save event and we should return template config to it
|
|
275
|
+
- Default template should be same with production
|
|
276
|
+
- Open Guido with saved template
|
|
277
|
+
- Get User ID, Email and Unique Template ID as dynamic from props
|
|
582
278
|
- Get Pre-built display conditions from API
|
package/dist/@types/generic.d.ts
CHANGED
|
@@ -1,15 +1,8 @@
|
|
|
1
|
-
import type { CompilerRule } from './html-compiler';
|
|
2
1
|
export type GuidoConfig = {
|
|
3
2
|
translationsPath: string;
|
|
4
|
-
htmlCompilerRules?: CompilerRule[];
|
|
5
|
-
ignoreDefaultHtmlCompilerRules?: boolean;
|
|
6
3
|
};
|
|
7
4
|
export type DynamicContent = {
|
|
8
5
|
value: string;
|
|
9
6
|
text: string;
|
|
10
7
|
fallback?: string;
|
|
11
8
|
};
|
|
12
|
-
export interface EmailData {
|
|
13
|
-
senderName: string;
|
|
14
|
-
subject: string;
|
|
15
|
-
}
|
|
@@ -1,26 +1,16 @@
|
|
|
1
|
-
import type { DynamicContent, GuidoConfig
|
|
2
|
-
import type { Template } from '@@/Types/stripo';
|
|
1
|
+
import type { DynamicContent, GuidoConfig } from '@@/Types/generic';
|
|
3
2
|
type __VLS_Props = {
|
|
4
|
-
|
|
3
|
+
emailId: string;
|
|
5
4
|
userId: string;
|
|
6
5
|
partnerName?: string;
|
|
7
6
|
productType?: string;
|
|
8
7
|
username?: string;
|
|
9
|
-
html?: string;
|
|
10
|
-
css?: string;
|
|
11
8
|
guidoConfig: GuidoConfig;
|
|
12
|
-
emailData?: EmailData;
|
|
13
9
|
};
|
|
14
10
|
declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {
|
|
15
|
-
|
|
16
|
-
insert: (data: DynamicContent) => void;
|
|
17
|
-
close: () => void;
|
|
18
|
-
};
|
|
11
|
+
applyDynamicContent: (data: DynamicContent) => void;
|
|
19
12
|
}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
|
|
20
13
|
"dynamic-content:open": (detail: DynamicContent | null) => void;
|
|
21
|
-
back: () => void;
|
|
22
|
-
"save:start": () => void;
|
|
23
|
-
"save:complete": (template: Omit<Template, "forceRecreate">) => void;
|
|
24
14
|
}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;
|
|
25
15
|
export default _default;
|
|
26
16
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import o from "./Guido.vue2.js";
|
|
2
2
|
/* empty css */
|
|
3
|
-
import
|
|
3
|
+
import i from "../_virtual/_plugin-vue2_normalizer.js";
|
|
4
4
|
var s = function() {
|
|
5
|
-
var
|
|
6
|
-
return r("div", { staticClass: "guido-editor__wrapper" }, [r(
|
|
7
|
-
},
|
|
5
|
+
var e = this, r = e._self._c, t = e._self._setupProxy;
|
|
6
|
+
return r("div", { staticClass: "guido-editor__wrapper" }, [r(t.HeaderWrapper), r("div", { staticClass: "guido-editor__container", attrs: { id: "guido-editor" } })], 1);
|
|
7
|
+
}, _ = [], a = /* @__PURE__ */ i(
|
|
8
8
|
o,
|
|
9
9
|
s,
|
|
10
|
-
|
|
10
|
+
_,
|
|
11
11
|
!1,
|
|
12
12
|
null,
|
|
13
|
-
"
|
|
13
|
+
"1d1d2b7c"
|
|
14
14
|
);
|
|
15
|
-
const
|
|
15
|
+
const f = a.exports;
|
|
16
16
|
export {
|
|
17
|
-
|
|
17
|
+
f as default
|
|
18
18
|
};
|
|
@@ -1,83 +1,55 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { DefaultUsername as
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
import { useStripoApi as T } from "../services/stripoApi.js";
|
|
9
|
-
import { useEditorStore as N } from "../stores/editor.js";
|
|
10
|
-
const M = /* @__PURE__ */ w({
|
|
1
|
+
import { defineComponent as C, onMounted as w } from "vue";
|
|
2
|
+
import { usePartner as _ } from "../composables/usePartner.js";
|
|
3
|
+
import { useStripo as T } from "../composables/useStripo.js";
|
|
4
|
+
import { useTemplates as b } from "../composables/useTemplates.js";
|
|
5
|
+
import { DefaultUsername as h, DefaultGuidoConfig as v } from "../enums/defaults.js";
|
|
6
|
+
import D from "./organisms/header/HeaderWrapper.vue.js";
|
|
7
|
+
const x = /* @__PURE__ */ C({
|
|
11
8
|
__name: "Guido",
|
|
12
9
|
props: {
|
|
13
|
-
|
|
10
|
+
emailId: null,
|
|
14
11
|
userId: null,
|
|
15
12
|
partnerName: null,
|
|
16
13
|
productType: null,
|
|
17
14
|
username: null,
|
|
18
|
-
|
|
19
|
-
css: null,
|
|
20
|
-
guidoConfig: null,
|
|
21
|
-
emailData: null
|
|
15
|
+
guidoConfig: null
|
|
22
16
|
},
|
|
23
|
-
emits: ["dynamic-content:open"
|
|
24
|
-
setup(
|
|
25
|
-
const o =
|
|
26
|
-
|
|
27
|
-
userId:
|
|
28
|
-
guidoConfig:
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
productType: u = a(),
|
|
33
|
-
username: m = G
|
|
17
|
+
emits: ["dynamic-content:open"],
|
|
18
|
+
setup(g, { expose: y, emit: n }) {
|
|
19
|
+
const o = g, { getPartnerName: t, getProductType: r } = _(), {
|
|
20
|
+
emailId: i,
|
|
21
|
+
userId: a,
|
|
22
|
+
guidoConfig: c,
|
|
23
|
+
partnerName: s = t(),
|
|
24
|
+
productType: u = r(),
|
|
25
|
+
username: d = h
|
|
34
26
|
} = o;
|
|
35
27
|
window.GuidoConfig = {
|
|
36
|
-
...
|
|
37
|
-
...
|
|
28
|
+
...v,
|
|
29
|
+
...c
|
|
38
30
|
};
|
|
39
|
-
const { initPlugin:
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
},
|
|
44
|
-
onSaveStart: () => {
|
|
45
|
-
console.debug("guido:save:start"), t("save:start");
|
|
46
|
-
},
|
|
47
|
-
onSaveComplete: (e) => {
|
|
48
|
-
console.debug("guido:save:complete", e), t("save:complete", e);
|
|
49
|
-
}
|
|
50
|
-
});
|
|
51
|
-
const g = (e) => {
|
|
52
|
-
console.debug("dynamic-content:close", e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
|
|
53
|
-
}, y = () => {
|
|
54
|
-
console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
|
|
31
|
+
const { initPlugin: m } = T({ emailId: i, userId: a, username: d, partnerName: s, productType: u }), { getDefaultTemplate: p } = b(), l = (e) => {
|
|
32
|
+
console.debug("dynamic-content:close", e), document.dispatchEvent(new CustomEvent("dynamic-content:close", {
|
|
33
|
+
detail: e
|
|
34
|
+
}));
|
|
55
35
|
};
|
|
56
|
-
return
|
|
36
|
+
return w(async () => {
|
|
57
37
|
console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
|
|
58
38
|
try {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
css: l,
|
|
62
|
-
forceRecreate: !0
|
|
63
|
-
// TODO: It should be false for old templates. We will communicate with Stripo
|
|
64
|
-
};
|
|
65
|
-
e.html || (e = await f()), await p(e);
|
|
39
|
+
const e = await p();
|
|
40
|
+
await m(e);
|
|
66
41
|
} catch (e) {
|
|
67
42
|
console.error("Failed to initialize Stripo editor:", e);
|
|
68
43
|
}
|
|
69
44
|
document.addEventListener("dynamic-content:open", (e) => {
|
|
70
|
-
const
|
|
71
|
-
console.debug("dynamic-content:open",
|
|
45
|
+
const f = e;
|
|
46
|
+
console.debug("dynamic-content:open", f.detail), n("dynamic-content:open", f.detail);
|
|
72
47
|
});
|
|
73
|
-
}),
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
close: y
|
|
77
|
-
}
|
|
78
|
-
}), { __sfc: !0, props: o, getPartnerName: n, getProductType: a, templateId: c, userId: r, guidoConfig: i, html: s, css: l, partnerName: d, productType: u, username: m, emit: t, initPlugin: p, getDefaultTemplate: f, editorStore: h, insertDynamicContent: g, closeDynamicContent: y, EmailPreview: P, HeaderWrapper: k };
|
|
48
|
+
}), y({
|
|
49
|
+
applyDynamicContent: l
|
|
50
|
+
}), { __sfc: !0, props: o, getPartnerName: t, getProductType: r, emailId: i, userId: a, guidoConfig: c, partnerName: s, productType: u, username: d, emit: n, initPlugin: m, getDefaultTemplate: p, applyDynamicContent: l, HeaderWrapper: D };
|
|
79
51
|
}
|
|
80
52
|
});
|
|
81
53
|
export {
|
|
82
|
-
|
|
54
|
+
x as default
|
|
83
55
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import r from "./LeftSlot.vue2.js";
|
|
2
2
|
import o from "../../../_virtual/_plugin-vue2_normalizer.js";
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
return
|
|
3
|
+
var n = function() {
|
|
4
|
+
var t = this, e = t._self._c, s = t._self._setupProxy;
|
|
5
|
+
return e("div", { staticClass: "d-f a-i-c" }, [e(s.InButtonV2, { staticClass: "p-2", attrs: { id: "guido__back-button", "label-text": "Back", "left-icon": "line-arrow-left", styling: "text", type: "secondary" } }), s.editorStore.isVersionHistoryOpen ? e(s.RestoreButton, { staticClass: "ml-3" }) : t._e()], 1);
|
|
6
6
|
}, a = [], i = /* @__PURE__ */ o(
|
|
7
|
-
n,
|
|
8
7
|
r,
|
|
8
|
+
n,
|
|
9
9
|
a,
|
|
10
10
|
!1,
|
|
11
11
|
null,
|
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
const c = /* @__PURE__ */ r({
|
|
1
|
+
import { defineComponent as t } from "vue";
|
|
2
|
+
import { useEditorStore as o } from "../../../stores/editor.js";
|
|
3
|
+
import { InButtonV2 as r } from "@useinsider/design-system-vue";
|
|
4
|
+
import e from "./version-history/RestoreButton.vue.js";
|
|
5
|
+
const _ = /* @__PURE__ */ t({
|
|
7
6
|
__name: "LeftSlot",
|
|
8
|
-
setup(
|
|
9
|
-
|
|
10
|
-
return { __sfc: !0, editorStore: o, handleBack: t, InButtonV2: n, RestoreButton: s };
|
|
7
|
+
setup(m) {
|
|
8
|
+
return { __sfc: !0, editorStore: o(), InButtonV2: r, RestoreButton: e };
|
|
11
9
|
}
|
|
12
10
|
});
|
|
13
11
|
export {
|
|
14
|
-
|
|
12
|
+
_ as default
|
|
15
13
|
};
|