@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.
Files changed (70) hide show
  1. package/README.md +25 -329
  2. package/dist/@types/generic.d.ts +0 -7
  3. package/dist/components/Guido.vue.d.ts +3 -13
  4. package/dist/components/Guido.vue.js +8 -8
  5. package/dist/components/Guido.vue2.js +33 -61
  6. package/dist/components/organisms/header/LeftSlot.vue.js +5 -5
  7. package/dist/components/organisms/header/LeftSlot.vue2.js +8 -10
  8. package/dist/components/organisms/header/MiddleSlot.vue.js +6 -6
  9. package/dist/components/organisms/header/MiddleSlot.vue2.js +13 -17
  10. package/dist/components/organisms/header/RightSlot.vue.js +1 -1
  11. package/dist/components/organisms/header/RightSlot.vue2.js +14 -28
  12. package/dist/components/organisms/header/ViewOptions.vue.js +6 -6
  13. package/dist/composables/useExport.d.ts +1 -1
  14. package/dist/composables/useExport.js +20 -35
  15. package/dist/composables/useStripo.js +14 -15
  16. package/dist/composables/useTemplates.d.ts +5 -0
  17. package/dist/composables/useTemplates.js +27 -0
  18. package/dist/guido.css +1 -1
  19. package/dist/services/stripoApi.d.ts +1 -2
  20. package/dist/services/stripoApi.js +7 -27
  21. package/dist/static/templates/default/index.html.js +5 -0
  22. package/dist/static/templates/default/style.css.js +119 -0
  23. package/dist/stores/editor.d.ts +0 -4
  24. package/dist/stores/editor.js +3 -7
  25. package/package.json +2 -2
  26. package/dist/components/organisms/design-preview/AmpErrorModal.vue.d.ts +0 -16
  27. package/dist/components/organisms/design-preview/AmpErrorModal.vue.js +0 -21
  28. package/dist/components/organisms/design-preview/AmpErrorModal.vue2.js +0 -31
  29. package/dist/components/organisms/design-preview/DesktopPreview.vue.d.ts +0 -16
  30. package/dist/components/organisms/design-preview/DesktopPreview.vue.js +0 -22
  31. package/dist/components/organisms/design-preview/DesktopPreview.vue2.js +0 -29
  32. package/dist/components/organisms/design-preview/EmailPreview.vue.d.ts +0 -16
  33. package/dist/components/organisms/design-preview/EmailPreview.vue.js +0 -17
  34. package/dist/components/organisms/design-preview/EmailPreview.vue2.js +0 -40
  35. package/dist/components/organisms/design-preview/EmailView.vue.d.ts +0 -18
  36. package/dist/components/organisms/design-preview/EmailView.vue.js +0 -19
  37. package/dist/components/organisms/design-preview/EmailView.vue2.js +0 -24
  38. package/dist/components/organisms/design-preview/InboxView.vue.d.ts +0 -17
  39. package/dist/components/organisms/design-preview/InboxView.vue.js +0 -19
  40. package/dist/components/organisms/design-preview/InboxView.vue2.js +0 -23
  41. package/dist/components/organisms/design-preview/MobilePreview.vue.d.ts +0 -17
  42. package/dist/components/organisms/design-preview/MobilePreview.vue.js +0 -17
  43. package/dist/components/organisms/design-preview/MobilePreview.vue2.js +0 -23
  44. package/dist/components/organisms/header/AmpToggle.vue.d.ts +0 -2
  45. package/dist/components/organisms/header/AmpToggle.vue.js +0 -17
  46. package/dist/components/organisms/header/AmpToggle.vue2.js +0 -48
  47. package/dist/composables/useDebounce.d.ts +0 -4
  48. package/dist/composables/useDebounce.js +0 -12
  49. package/dist/composables/useGuidoActions.d.ts +0 -46
  50. package/dist/composables/useGuidoActions.js +0 -37
  51. package/dist/composables/useHtmlCompiler.d.ts +0 -4
  52. package/dist/composables/useHtmlCompiler.js +0 -16
  53. package/dist/composables/useMobileGmailFit.d.ts +0 -5
  54. package/dist/composables/useMobileGmailFit.js +0 -69
  55. package/dist/composables/usePreviewMode.d.ts +0 -6
  56. package/dist/composables/usePreviewMode.js +0 -19
  57. package/dist/composables/useProvideInject.d.ts +0 -14
  58. package/dist/composables/useProvideInject.js +0 -17
  59. package/dist/config/compiler/htmlCompilerRules.d.ts +0 -2
  60. package/dist/config/compiler/htmlCompilerRules.js +0 -145
  61. package/dist/config/compiler/outlookCompilerRules.d.ts +0 -0
  62. package/dist/enums/emailPreview.d.ts +0 -3
  63. package/dist/enums/emailPreview.js +0 -6
  64. package/dist/enums/gmailMobilePreview.d.ts +0 -7
  65. package/dist/enums/gmailMobilePreview.js +0 -17
  66. package/dist/inbox-mockup.svg +0 -39
  67. package/dist/mock/api/default-template.d.ts +0 -2
  68. package/dist/phone-mockup.svg +0 -31
  69. package/dist/utils/htmlCompiler.d.ts +0 -12
  70. 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
- :template-id="templateId"
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
- templateId: 'template-123',
53
- userId: 'user-456',
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
- htmlCompilerRules: [],
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(detail) {
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
- handleDynamicContentInsert() {
88
- this.$refs.guidoEditor?.dynamicContent.insert({
89
- text: 'Display Text',
90
- value: 'actual-value',
91
- fallback: 'Fallback Text'
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
- | `templateId` | `string` | ✅ | - | Unique identifier for the email template |
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
- dynamicContent.insert(DynamicContent);
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 `&lt;` and `&gt;` 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.tgz` file.
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.tgz ../email-fe
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.tgz
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
@@ -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, EmailData } from '@@/Types/generic';
2
- import type { Template } from '@@/Types/stripo';
1
+ import type { DynamicContent, GuidoConfig } from '@@/Types/generic';
3
2
  type __VLS_Props = {
4
- templateId: string;
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
- dynamicContent: {
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 t from "../_virtual/_plugin-vue2_normalizer.js";
3
+ import i from "../_virtual/_plugin-vue2_normalizer.js";
4
4
  var s = function() {
5
- var i = this, r = i._self._c, e = i._self._setupProxy;
6
- return r("div", { staticClass: "guido-editor__wrapper" }, [r(e.HeaderWrapper), r(e.EmailPreview, { directives: [{ name: "show", rawName: "v-show", value: e.editorStore.isPreviewModeOpen, expression: "editorStore.isPreviewModeOpen" }], attrs: { "email-data": i.emailData, "is-visible": e.editorStore.isPreviewModeOpen } }), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.editorStore.isPreviewModeOpen, expression: "!editorStore.isPreviewModeOpen" }], staticClass: "guido-editor__container", attrs: { id: "guido-editor" } })], 1);
7
- }, a = [], d = /* @__PURE__ */ t(
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
- a,
10
+ _,
11
11
  !1,
12
12
  null,
13
- "7836f831"
13
+ "1d1d2b7c"
14
14
  );
15
- const m = d.exports;
15
+ const f = a.exports;
16
16
  export {
17
- m as default
17
+ f as default
18
18
  };
@@ -1,83 +1,55 @@
1
- import { defineComponent as w, onMounted as E } from "vue";
2
- import { provideGuidoActions as S } from "../composables/useGuidoActions.js";
3
- import { usePartner as D } from "../composables/usePartner.js";
4
- import { useStripo as _ } from "../composables/useStripo.js";
5
- import { DefaultUsername as G, DefaultGuidoConfig as I } from "../enums/defaults.js";
6
- import P from "./organisms/design-preview/EmailPreview.vue.js";
7
- import k from "./organisms/header/HeaderWrapper.vue.js";
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
- templateId: null,
10
+ emailId: null,
14
11
  userId: null,
15
12
  partnerName: null,
16
13
  productType: null,
17
14
  username: null,
18
- html: null,
19
- css: null,
20
- guidoConfig: null,
21
- emailData: null
15
+ guidoConfig: null
22
16
  },
23
- emits: ["dynamic-content:open", "back", "save:start", "save:complete"],
24
- setup(C, { expose: b, emit: t }) {
25
- const o = C, { getPartnerName: n, getProductType: a } = D(), {
26
- templateId: c,
27
- userId: r,
28
- guidoConfig: i,
29
- html: s = "",
30
- css: l = "",
31
- partnerName: d = n(),
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
- ...I,
37
- ...i
28
+ ...v,
29
+ ...c
38
30
  };
39
- const { initPlugin: p } = _({ emailId: c, userId: r, username: m, partnerName: d, productType: u }), { getDefaultTemplate: f } = T(), h = N();
40
- S({
41
- onBack: () => {
42
- console.debug("guido:back"), t("back");
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 E(async () => {
36
+ return w(async () => {
57
37
  console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
58
38
  try {
59
- let e = {
60
- html: s,
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 v = e;
71
- console.debug("dynamic-content:open", v.detail), t("dynamic-content:open", v.detail);
45
+ const f = e;
46
+ console.debug("dynamic-content:open", f.detail), n("dynamic-content:open", f.detail);
72
47
  });
73
- }), b({
74
- dynamicContent: {
75
- insert: g,
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
- M as default
54
+ x as default
83
55
  };
@@ -1,11 +1,11 @@
1
- import n from "./LeftSlot.vue2.js";
1
+ import r from "./LeftSlot.vue2.js";
2
2
  import o from "../../../_virtual/_plugin-vue2_normalizer.js";
3
- var r = function() {
4
- var e = this, s = e._self._c, t = e._self._setupProxy;
5
- return s("div", { staticClass: "d-f a-i-c" }, [s(t.InButtonV2, { staticClass: "p-2", attrs: { id: "guido__back-button", "label-text": "Back", "left-icon": "line-arrow-left", styling: "text", type: "secondary" }, on: { click: t.handleBack } }), t.editorStore.isVersionHistoryOpen ? s(t.RestoreButton, { staticClass: "ml-3" }) : e._e()], 1);
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 r } from "vue";
2
- import { useBack as e } from "../../../composables/useGuidoActions.js";
3
- import { useEditorStore as m } from "../../../stores/editor.js";
4
- import { InButtonV2 as n } from "@useinsider/design-system-vue";
5
- import s from "./version-history/RestoreButton.vue.js";
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(f) {
9
- const o = m(), t = e();
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
- c as default
12
+ _ as default
15
13
  };