@retailrocketgroup/retailrocket-edit.reactivation-vue-email-template-render 3.0.381747 → 5.0.384530

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 (38) hide show
  1. package/.turbo/turbo-build.log +25 -0
  2. package/dist/assets/index.css +1 -0
  3. package/dist/assets/index.js +379 -0
  4. package/dist/assets/index.js.map +1 -0
  5. package/dist/editReactivationEmailTemplate.d.ts +0 -0
  6. package/dist/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CreateComponentLibrarySectionModalWindow/reactivationComponentSectionItemFactory.d.ts +4 -0
  7. package/dist/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CreateComponentLibrarySectionModalWindow/reactivationEmailComponentFactory.d.ts +4 -0
  8. package/dist/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CustomComponentLibrary/reactivationComponentLibraryFactory.d.ts +4 -0
  9. package/dist/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CustomComponentLibrary/reactivationSectionFactory.d.ts +4 -0
  10. package/dist/implementation/DataSources/ListDataExpressionSource/reactivationEvaluateListExpressionDataSourceFactory.d.ts +8 -0
  11. package/dist/implementation/DataSources/NumberExpressionDataSource/reactivationEvaluateNumberExpressionDataSourceFactory.d.ts +2 -0
  12. package/dist/implementation/DataSources/StringExpressionDataSource/reactivationEvaluateStringExpressionDataSource.d.ts +9 -0
  13. package/dist/implementation/EmailComponentSettingsModifierPlugin/ProductShelfDataSourceExpressionBuilder/ReactivationProductShelfDataSourceExpressionBuilderModal/reactivationProductShelfDataSourceExpressionBuilderModalDepsFactory.d.ts +11 -0
  14. package/dist/implementation/EmailComponentSettingsModifierPlugin/ProductShelfDataSourceExpressionBuilder/reactivationProductShelfDataSourceExpressionBuilderDepsFactory.d.ts +11 -0
  15. package/dist/index.d.ts +1 -0
  16. package/dist/index.html +35 -0
  17. package/env.d.ts +1 -0
  18. package/index.html +1 -2
  19. package/package.json +1 -1
  20. package/src/editReactivationEmailTemplate.ts +409 -0
  21. package/src/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CreateComponentLibrarySectionModalWindow/reactivationComponentSectionItemFactory.ts +30 -0
  22. package/src/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CreateComponentLibrarySectionModalWindow/reactivationEmailComponentFactory.ts +26 -0
  23. package/src/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CustomComponentLibrary/reactivationComponentLibraryFactory.ts +29 -0
  24. package/src/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CustomComponentLibrary/reactivationSectionFactory.ts +34 -0
  25. package/src/implementation/DataSources/ListDataExpressionSource/reactivationEvaluateListExpressionDataSourceFactory.ts +106 -0
  26. package/src/implementation/DataSources/NumberExpressionDataSource/reactivationEvaluateNumberExpressionDataSourceFactory.ts +10 -0
  27. package/src/implementation/DataSources/StringExpressionDataSource/reactivationEvaluateStringExpressionDataSource.ts +56 -0
  28. package/src/implementation/EmailComponentSettingsModifierPlugin/ProductShelfDataSourceExpressionBuilder/ReactivationProductShelfDataSourceExpressionBuilderModal/reactivationProductShelfDataSourceExpressionBuilderModalDepsFactory.ts +127 -0
  29. package/src/implementation/EmailComponentSettingsModifierPlugin/ProductShelfDataSourceExpressionBuilder/reactivationProductShelfDataSourceExpressionBuilderDepsFactory.ts +35 -0
  30. package/src/index.ts +0 -0
  31. package/tsconfig.app.json +19 -0
  32. package/tsconfig.json +14 -0
  33. package/tsconfig.node.json +11 -0
  34. package/tsconfig.test.json +11 -0
  35. package/vite.config.ts +36 -0
  36. package/assets/main.css +0 -1
  37. package/assets/main.js +0 -217
  38. package/favicon.ico +0 -0
File without changes
@@ -0,0 +1,4 @@
1
+ import { ReactivationListExpressionDataSource, ReactivationNumberExpressionDataSource, ReactivationStringExpressionDataSource } from '@easy-wizzy/retailrocket-reactivation';
2
+ import { ComponentLibrarySectionItem } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.componentlibrary/main';
3
+ import { CustomComponentSectionItemType } from '@easy-wizzy/core';
4
+ export declare const reactivationComponentSectionItemFactory: (componentLibrarySectionItem: ComponentLibrarySectionItem) => CustomComponentSectionItemType<ReactivationListExpressionDataSource, ReactivationNumberExpressionDataSource, ReactivationStringExpressionDataSource>;
@@ -0,0 +1,4 @@
1
+ import { EmailComponentType } from '@easy-wizzy/core';
2
+ import { ReactivationListExpressionDataSource, ReactivationNumberExpressionDataSource, ReactivationStringExpressionDataSource } from '@easy-wizzy/retailrocket-reactivation';
3
+ import { Component } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.addcomponentlibrarysectionitemmodalwindow/main';
4
+ export declare const reactivationEmailComponentFactory: (component: Component) => EmailComponentType<ReactivationListExpressionDataSource, ReactivationNumberExpressionDataSource, ReactivationStringExpressionDataSource>;
@@ -0,0 +1,4 @@
1
+ import { ReactivationListExpressionDataSource, ReactivationNumberExpressionDataSource, ReactivationStringExpressionDataSource } from '@easy-wizzy/retailrocket-reactivation';
2
+ import { ComponentLibrarySection } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.componentlibrary/main';
3
+ import { CustomComponentLibraryType } from '@easy-wizzy/core';
4
+ export declare const reactivationComponentLibraryFactory: (componentLibrary: Array<ComponentLibrarySection>) => CustomComponentLibraryType<ReactivationListExpressionDataSource, ReactivationNumberExpressionDataSource, ReactivationStringExpressionDataSource>;
@@ -0,0 +1,4 @@
1
+ import { ReactivationListExpressionDataSource, ReactivationNumberExpressionDataSource, ReactivationStringExpressionDataSource } from '@easy-wizzy/retailrocket-reactivation';
2
+ import { ComponentLibrarySection } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.componentlibrary/main';
3
+ import { CustomComponentSectionType } from '@easy-wizzy/core';
4
+ export declare const reactivationSectionFactory: (section: ComponentLibrarySection) => CustomComponentSectionType<ReactivationListExpressionDataSource, ReactivationNumberExpressionDataSource, ReactivationStringExpressionDataSource>;
@@ -0,0 +1,8 @@
1
+ import { ReactivationListExpressionDataSource } from '@easy-wizzy/retailrocket-reactivation';
2
+ import { ListExpressionDataSourceBffClient } from '@easy-wizzy/common-app';
3
+ import { ListExpressionDataSourceEvaluatorDelegate } from '@easy-wizzy/core';
4
+ export declare const reactivationEvaluateListExpressionDataSourceFactory: (arg: {
5
+ partnerId: string;
6
+ listExpressionDataSourceBffClient: ListExpressionDataSourceBffClient;
7
+ customerStockId: string | undefined;
8
+ }) => ListExpressionDataSourceEvaluatorDelegate<ReactivationListExpressionDataSource>;
@@ -0,0 +1,2 @@
1
+ import { NumberExpressionDataSourceEvaluatorDelegate } from '@easy-wizzy/core';
2
+ export declare const reactivationEvaluateNumberExpressionDataSourceFactory: <TNumberExpressionDataSource>() => NumberExpressionDataSourceEvaluatorDelegate<TNumberExpressionDataSource>;
@@ -0,0 +1,9 @@
1
+ import { ReactivationStringExpressionDataSource, ReactivationListExpressionDataSource, ReactivationNumberExpressionDataSource } from '@easy-wizzy/retailrocket-reactivation';
2
+ import { StringExpressionDataSourceEvaluatorDelegate } from '@easy-wizzy/core';
3
+ import { ContactCustomData, NextCouponFromBatchType } from '@easy-wizzy/retailrocket-common';
4
+ import { ProductImageUrlBuilderExpressionEvaluatorDelegate } from '@easy-wizzy/common-app';
5
+ export declare const reactivationStringExpressionDataSourceEvaluatorFactory: (arg: {
6
+ productImageUrlBuilderExpressionEvaluator: ProductImageUrlBuilderExpressionEvaluatorDelegate<ReactivationListExpressionDataSource, ReactivationNumberExpressionDataSource>;
7
+ contactCustomData: ContactCustomData;
8
+ nextCouponFromBatch: NextCouponFromBatchType;
9
+ }) => StringExpressionDataSourceEvaluatorDelegate<ReactivationStringExpressionDataSource>;
@@ -0,0 +1,11 @@
1
+ import { LocaleKey } from '@easy-wizzy/core';
2
+ import { ReactivationProductShelfDataSourceExpressionBuilderModalDeps } from '@easy-wizzy/retailrocket-reactivation';
3
+ import { ProductShelfBuilderModalWindowBffClient, ProductPickerModalWindowBffClient, ProductCategoryPickerModalWindowBffClient } from '@easy-wizzy/common-app';
4
+ export declare const reactivationProductShelfDataSourceExpressionBuilderModalDepsFactory: (arg: {
5
+ localeKey: LocaleKey;
6
+ partnerId: string;
7
+ customerStockId: string | undefined;
8
+ productShelfBuilderModalWindowBffClient: ProductShelfBuilderModalWindowBffClient;
9
+ productCategoryPickerModalWindowBffClient: ProductCategoryPickerModalWindowBffClient;
10
+ productPickerModalWindowBffClient: ProductPickerModalWindowBffClient;
11
+ }) => ReactivationProductShelfDataSourceExpressionBuilderModalDeps;
@@ -0,0 +1,11 @@
1
+ import { LocaleKey } from '@easy-wizzy/core';
2
+ import { ReactivationProductShelfDataSourceExpressionBuilderDeps } from '@easy-wizzy/retailrocket-reactivation';
3
+ import { ProductShelfBuilderModalWindowBffClient, ProductPickerModalWindowBffClient, ProductCategoryPickerModalWindowBffClient } from '@easy-wizzy/common-app';
4
+ export declare const reactivationProductShelfDataSourceExpressionBuilderDepsFactory: (arg: {
5
+ localeKey: LocaleKey;
6
+ partnerId: string;
7
+ customerStockId: string | undefined;
8
+ productShelfBuilderModalWindowBffClient: ProductShelfBuilderModalWindowBffClient;
9
+ productCategoryPickerModalWindowBffClient: ProductCategoryPickerModalWindowBffClient;
10
+ productPickerModalWindowBffClient: ProductPickerModalWindowBffClient;
11
+ }) => ReactivationProductShelfDataSourceExpressionBuilderDeps;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,35 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <link rel="icon" href="/favicon.ico">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link
10
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
11
+ rel="stylesheet"
12
+ />
13
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Lato:wght@100;300;400;700;900&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
14
+ <title>Vite App</title>
15
+ <script type="module" crossorigin src="/assets/index.js"></script>
16
+ <link rel="stylesheet" crossorigin href="/assets/index.css">
17
+ </head>
18
+ <body>
19
+ <div
20
+ id="app"
21
+ data-partner-id="5df72bdc97a52507605e4cc1"
22
+ data-wysiwyg-template-editor-bff-base-url="https://my.retailrocket.ru/5db801c197a52821e86b0d45/TransactionalEmailCampaign/6757225a5520d1ae575e7f0e/CampaignWizard/Step2/WysiwygTemplateEditorBff"
23
+ data-wysiwyg-bff-proxy-base-url="https://k8s-b1.retailrocket.ru/"
24
+ data-email-template-json='{"Subject": "","Preheader": "","Theme": {"BodyWidth": 600,"IsResponsiveWidth": true,"FontFamily": "Arial","Colors": {"EmailBackgroundColor": "#EEEEEE","BodyColor": "#FFFFFF","PrimaryColor": "#557aff","PrimaryTextColor": "#ffffff","SecondaryColor": "#E4EAFF","SecondaryTextColor": "#557aff","CardBackgroundColor": "#F6F6F6","HeadingColor": "#2F2F2F","TitleColor": "#2F2F2F","SubHeadingColor": "#2F2F2F","LargeTextColor": "#2F2F2F","NormalTextColor": "#2F2F2F","DescriptionTextColor": "#999999","LinkColor": "#65A0FA","ButtonTextColor": "#ffffff"},"BorderRadius": {"TopLeft": 20,"TopRight": 20,"BottomLeft": 20,"BottomRight": 20},"BorderRadiusCard": {"TopLeft": 16,"TopRight": 16,"BottomLeft": 16,"BottomRight": 16},"BorderRadiusButton": {"TopLeft": 6,"TopRight": 6,"BottomLeft": 6,"BottomRight": 6},"BorderRadiusBanner": {"TopLeft": 0,"TopRight": 0,"BottomLeft": 0,"BottomRight": 0},"BodyPaddings": {"Left": 20,"Right": 20,"Top": 10,"Bottom": 10},"ComponentPaddings": {"Small": 8,"Medium": 16,"Large": 24,"Huge": 24},"ButtonPaddings": {"TopBottom": 12,"LeftRight": 14},"FontSettingsPresets": {"Title": {"FontSize": 24,"LineHeight": 28,"IsBold": true,"IsItalic": false,"Decoration": "None"},"Heading": {"FontSize": 20,"LineHeight": 24,"IsBold": true,"IsItalic": false,"Decoration": "None"},"SubHeading": {"FontSize": 14,"LineHeight": 16,"IsBold": true,"IsItalic": false,"Decoration": "None"},"LargeText": {"FontSize": 14,"LineHeight": 18,"IsBold": false,"IsItalic": false,"Decoration": "None"},"NormalText": {"FontSize": 12,"LineHeight": 15,"IsBold": false,"IsItalic": false,"Decoration": "None"},"DescriptionText": {"FontSize": 10,"LineHeight": 13,"IsBold": false,"IsItalic": false,"Decoration": "None"},"Button": {"FontSize": 12,"LineHeight": 14,"IsBold": true,"IsItalic": false,"Decoration": "None"},"Link": {"FontSize": 12,"LineHeight": 14,"IsBold": false,"IsItalic": false,"Decoration": "None"}}},"Components": [{"IsRequired": false,"BorderRadius": {"TopLeft": {"Discriminator": "CustomBorderRadius","CustomValue": 0},"TopRight": {"Discriminator": "CustomBorderRadius","CustomValue": 0},"BottomRight": {"Discriminator": "CustomBorderRadius","CustomValue": 0},"BottomLeft": {"Discriminator": "CustomBorderRadius","CustomValue": 0}},"InnerBgColor": {"Discriminator": "BodyColor","CustomValue": "#000000"},"Paddings": {"Top": {"ThemePadding": "ThemePaddingsLarge"},"Bottom": {"ThemePadding": "ThemePaddingsLarge"}},"FullWidth": false,"BodyRowList": [{"MultipleColumnBodyRow": {"ColumnSpacerSize": {"CustomValue": 0},"DirectionRtl": false,"Paddings": {"Left": {"CustomValue": 0},"Top": {"CustomValue": 0},"Right": {"CustomValue": 0},"Bottom": {"CustomValue": 0}},"Border": {"Left": {"Width": 0,"Style": "None","Color": {"Discriminator": "Custom","CustomValue": "#FFFFFF"}},"Top": {"Width": 0,"Style": "None","Color": {"Discriminator": "Custom","CustomValue": "#FFFFFF"}},"Right": {"Width": 0,"Style": "None","Color": {"Discriminator": "Custom","CustomValue": "#FFFFFF"}},"Bottom": {"Width": 0,"Style": "None","Color": {"Discriminator": "Custom","CustomValue": "#FFFFFF"}}},"BorderRadius": {"TopLeft": {"Discriminator": "CustomBorderRadius","CustomValue": 0},"TopRight": {"Discriminator": "CustomBorderRadius","CustomValue": 0},"BottomRight": {"Discriminator": "CustomBorderRadius","CustomValue": 0},"BottomLeft": {"Discriminator": "CustomBorderRadius","CustomValue": 0}},"BgColor": {"Discriminator": "None","CustomValue": "#ffffff"},"ContainerAlign": "Center","Columns": [{"VerticalAlign": "Top","BgColor": {"Discriminator": "None","CustomValue": "#ffffff"},"Paddings": {"Top": {"CustomValue": 0},"Right": {"CustomValue": 0},"Bottom": {"CustomValue": 0},"Left": {"CustomValue": 0}},"Border": {"Left": {"Width": 0,"Style": "None","Color": {"Discriminator": "Custom","CustomValue": "#FFFFFF"}},"Top": {"Width": 0,"Style": "None","Color": {"Discriminator": "Custom","CustomValue": "#FFFFFF"}},"Right": {"Width": 0,"Style": "None","Color": {"Discriminator": "Custom","CustomValue": "#FFFFFF"}},"Bottom": {"Width": 0,"Style": "None","Color": {"Discriminator": "Custom","CustomValue": "#FFFFFF"}}},"BorderRadius": {"TopLeft": {"Discriminator": "CustomBorderRadius","CustomValue": 0},"TopRight": {"Discriminator": "CustomBorderRadius","CustomValue": 0},"BottomRight": {"Discriminator": "CustomBorderRadius","CustomValue": 0},"BottomLeft": {"Discriminator": "CustomBorderRadius","CustomValue": 0}},"ContainerAlign": "Center","Elements": [{"RichText": {"ImageVerticalAlign": "Baseline","MinHeight": 1,"ContentAlign": "Center","Text": {"Content": [{"ParagraphNode": {"Content": [{"TextNode": {"Text": "Сервис создания электронных писем","TextStyle": {"ThemeName": "Heading","Style": {}}}}]}}]}}},{"Spacer": {"Height": {"ThemePadding": "ThemePaddingsLarge"},"Weight": 0,"Color": {"Discriminator": "None","CustomValue": "#FFFFFF"}}},{"RichText": {"ImageVerticalAlign": "Baseline","MinHeight": 1,"ContentAlign": "Center","Text": {"Content": [{"ParagraphNode": {"Content": [{"TextNode": {"Text": "Мы рады представить вам наш новый продукт - сервис создания электронных писем. С помощью этого удобного и интуитивно понятного инструмента, вы сможете легко создавать красивые и профессиональные письма всего в несколько простых шагов.","TextStyle": {"ThemeName": "LargeText","Style": {}}}}]}}]}}}],"Width": {"JustifyWidth": {"WidthInPixels": 560}}}]}}]}]}'
25
+ data-create-email-template-submit-url="data-create-email-template-submit-url"
26
+ data-anti-forgery-header-token-name="data-anti-forgery-header-token-name"
27
+ data-anti-forgery-header-token-value="data-anti-forgery-header-token-value"
28
+ data-anti-forgery-form-token-name="data-anti-forgery-form-token-name"
29
+ data-anti-forgery-form-token-value="data-anti-forgery-form-token-value"
30
+ data-reset-template-form-url="https://webhook.site/a85a171c-bb86-4693-9552-d209a59a7e6a"
31
+ data-exit-link="ya.ru"
32
+ data-locale-key="en"
33
+ ></div>
34
+ </body>
35
+ </html>
package/env.d.ts ADDED
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />
package/index.html CHANGED
@@ -12,8 +12,6 @@
12
12
  />
13
13
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Lato:wght@100;300;400;700;900&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
14
14
  <title>Vite App</title>
15
- <script type="module" crossorigin src="/assets/main.js"></script>
16
- <link rel="stylesheet" crossorigin href="/assets/main.css">
17
15
  </head>
18
16
  <body>
19
17
  <div
@@ -31,5 +29,6 @@
31
29
  data-exit-link="ya.ru"
32
30
  data-locale-key="en"
33
31
  ></div>
32
+ <script type="module" src="/src/editReactivationEmailTemplate.ts"></script>
34
33
  </body>
35
34
  </html>
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@retailrocketgroup/retailrocket-edit.reactivation-vue-email-template-render",
3
- "version": "3.0.381747",
3
+ "version": "5.0.384530",
4
4
  "private": false
5
5
  }
@@ -0,0 +1,409 @@
1
+ import 'bootstrap';
2
+ import '@easy-wizzy/retailrocket-common/index.css';
3
+ import '@easy-wizzy/core/index.css';
4
+
5
+ import { createApp } from 'vue';
6
+ import { createVuetify } from 'vuetify';
7
+ import { ClickOutside } from 'vuetify/directives';
8
+
9
+ import { createSimpleDataForm, matcherFactory } from '@easy-wizzy/core';
10
+ import { EditEmailTemplateApp } from '@easy-wizzy/core';
11
+ import { expressionEvaluatorFactory } from '@easy-wizzy/core';
12
+ import { listExpressionEvaluatorFactory } from '@easy-wizzy/core';
13
+ import { numberExpressionEvaluatorDelegate } from '@easy-wizzy/core';
14
+ import { stringExpressionEvaluatorFactory } from '@easy-wizzy/core';
15
+ import { dataStructBuilderExpressionEvaluatorFactory } from '@easy-wizzy/core';
16
+
17
+ import type { LocaleKey } from '@easy-wizzy/core';
18
+ import type { StringExpressionEvaluatorDelegate } from '@easy-wizzy/core';
19
+
20
+ import { defaultThemeLibraryFactory } from '@easy-wizzy/theme-library';
21
+ import { defaultComponentLibraryFactory } from '@easy-wizzy/component-library';
22
+
23
+ import type { ApiMachineFetchDelegate } from '@easy-wizzy/common-app';
24
+
25
+ import { apiMachineFetchFactory } from '@easy-wizzy/common-app';
26
+ import { editEmailTemplateAppDepsFactory } from '@easy-wizzy/common-app';
27
+ import { productImageUrlBuilderExpressionEvaluatorFactory } from '@easy-wizzy/common-app';
28
+ import { wysiwygTemplateEditorBffClientFactory } from '@easy-wizzy/common-app';
29
+ import { variableSelectorDepsFactory } from '@easy-wizzy/common-app';
30
+
31
+ import { productShelfDataSourceExpressionBuilderPluginFactory } from '@easy-wizzy/retailrocket-common';
32
+ import { stringExpressionBuilderPluginFactory, richTextToolbarPluginFactory, VariableSelector } from '@easy-wizzy/retailrocket-common';
33
+
34
+ import type { ContactCustomData, GeneralStringExpressionDataSource, NextCouponFromBatchType } from '@easy-wizzy/retailrocket-common';
35
+
36
+ import type { ReactivationListExpressionDataSource } from '@easy-wizzy/retailrocket-reactivation';
37
+ import type { ReactivationNumberExpressionDataSource } from '@easy-wizzy/retailrocket-reactivation';
38
+ import type { ReactivationStringExpressionDataSource } from '@easy-wizzy/retailrocket-reactivation';
39
+
40
+ import { ReactivationProductShelfDataSourceExpressionBuilder } from '@easy-wizzy/retailrocket-reactivation';
41
+
42
+ import { reactivationEvaluateListExpressionDataSourceFactory } from '@/implementation/DataSources/ListDataExpressionSource/reactivationEvaluateListExpressionDataSourceFactory';
43
+ import { reactivationEvaluateNumberExpressionDataSourceFactory } from '@/implementation/DataSources/NumberExpressionDataSource/reactivationEvaluateNumberExpressionDataSourceFactory';
44
+ import { reactivationStringExpressionDataSourceEvaluatorFactory } from '@/implementation/DataSources/StringExpressionDataSource/reactivationEvaluateStringExpressionDataSource';
45
+ import { reactivationComponentLibraryFactory } from '@/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CustomComponentLibrary/reactivationComponentLibraryFactory';
46
+ import { reactivationProductShelfDataSourceExpressionBuilderDepsFactory } from '@/implementation/EmailComponentSettingsModifierPlugin/ProductShelfDataSourceExpressionBuilder/reactivationProductShelfDataSourceExpressionBuilderDepsFactory';
47
+
48
+ import { createApi as createTriggerReactivationWysiwygTemplateEditorClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.triggerreactivationwysiwygtemplateeditor';
49
+ import {
50
+ type Component,
51
+ createApi as createAddComponentLibrarySectionItemModalWindowBffClient
52
+ } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.addcomponentlibrarysectionitemmodalwindow';
53
+ import { createApi as listExpressionDataSourceBffClientFactory } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.listexpressiondatasource';
54
+ import { createApi as createProductShelfBuilderModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.productshelfmodalwindow';
55
+ import { createApi as createThemeLibraryBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.themelibrary';
56
+ import { createApi as createComponentLibraryBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.componentlibrary';
57
+ import { createApi as createAddThemeLibrarySectionItemModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.addthemelibrarysectionitemmodalwindow';
58
+ import { createApi as createDeleteThemeLibrarySectionItemModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.deletethemelibrarysectionitemmodalwindow';
59
+ import { createApi as createDeleteThemeLibrarySectionModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.deletethemelibrarysectionmodalwindow';
60
+ import { createApi as createEditThemeLibrarySectionItemModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.editthemelibrarysectionitemmodalwindow';
61
+ import { createApi as createAddComponentLibrarySectionModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.addcomponentlibrarysectionmodalwindow';
62
+ import { createApi as createEditComponentLibrarySectionItemModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.editcomponentlibrarysectionitemmodalwindow';
63
+ import { createApi as createDeleteComponentLibrarySectionItemModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.deletecomponentlibrarysectionitemmodalwindow';
64
+ import { createApi as createThemeLibrarySectionModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.addthemelibrarysectionmodalwindow';
65
+ import { createApi as createDeleteComponentLibrarySectionModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.deletecomponentlibrarysectionmodalwindow';
66
+ import { createApi as createProductCategoryPickerModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.productcategorypickermodalwindow';
67
+ import { createApi as createProductPickerModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.productpickermodalwindow';
68
+ import { createApi as saveFavoriteTemplate } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.savefavoritetemplatemodalwindow';
69
+
70
+ const appTagId = '#app';
71
+ const appTag = document.querySelector(appTagId);
72
+
73
+ const params = {
74
+ partnerId: appTag!.getAttribute('data-partner-id')!,
75
+ wysiwygBffProxyBaseUrl: appTag!.getAttribute('data-wysiwyg-bff-proxy-base-url')!,
76
+ wysiwygTemplateEditorBffBaseUrl: appTag!.getAttribute('data-wysiwyg-template-editor-bff-base-url')!,
77
+ antiForgeryHeaderTokenName: appTag!.getAttribute('data-anti-forgery-header-token-name')!,
78
+ antiForgeryHeaderTokenValue: appTag!.getAttribute('data-anti-forgery-header-token-value')!,
79
+ antiForgeryFormTokenName: appTag!.getAttribute('data-anti-forgery-form-token-name')!,
80
+ antiForgeryFormTokenValue: appTag!.getAttribute('data-anti-forgery-form-token-value')!,
81
+ emailTemplateJson: appTag!.getAttribute('data-email-template-json')!,
82
+ previewTemplateDataJson: appTag!.getAttribute('data-preview-template-data-json')!,
83
+ resetTemplateFormUrl: appTag!.getAttribute('data-reset-template-form-url')!,
84
+ exitLink: appTag!.getAttribute('data-exit-link')!,
85
+ localeKey: appTag!.getAttribute('data-locale-key') as LocaleKey || 'en'
86
+ };
87
+
88
+ const _apiMachineFetchFactory = (arg: {
89
+ baseUrl: string
90
+ }): ApiMachineFetchDelegate => apiMachineFetchFactory({
91
+ baseUrl: arg.baseUrl,
92
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
93
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
94
+ });
95
+
96
+ const reactivationMainPageBffClient = createTriggerReactivationWysiwygTemplateEditorClient(
97
+ apiMachineFetchFactory({
98
+ baseUrl: params.wysiwygTemplateEditorBffBaseUrl,
99
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
100
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
101
+ })
102
+ );
103
+
104
+ const resetTemplate = (): void => {
105
+ const formData = new FormData();
106
+ formData.append(
107
+ params.antiForgeryFormTokenName,
108
+ params.antiForgeryFormTokenValue);
109
+
110
+ const form = createSimpleDataForm({
111
+ method: 'POST',
112
+ action: params.resetTemplateFormUrl,
113
+ formData: formData
114
+ });
115
+
116
+ document.body.appendChild(form);
117
+ form.submit();
118
+ };
119
+
120
+ let contactCustomData: ContactCustomData = {};
121
+ let nextCouponFromBatch: NextCouponFromBatchType = {
122
+ BatchId: ''
123
+ };
124
+
125
+ const listExpressionDataSourceBffClient = listExpressionDataSourceBffClientFactory(
126
+ _apiMachineFetchFactory({
127
+ baseUrl: params.wysiwygBffProxyBaseUrl
128
+ })
129
+ );
130
+
131
+ const createFavoriteTemplateBffClient = saveFavoriteTemplate(
132
+ _apiMachineFetchFactory({
133
+ baseUrl: params.wysiwygBffProxyBaseUrl
134
+ })
135
+ );
136
+
137
+ const listExpressionDataSourceEvaluator = reactivationEvaluateListExpressionDataSourceFactory({
138
+ partnerId: params.partnerId,
139
+ listExpressionDataSourceBffClient: listExpressionDataSourceBffClient,
140
+ customerStockId: undefined
141
+ });
142
+
143
+ const listExpressionEvaluator = listExpressionEvaluatorFactory({
144
+ listExpressionDataSourceEvaluator: listExpressionDataSourceEvaluator
145
+ });
146
+
147
+ const numberExpressionDataSourceEvaluator = reactivationEvaluateNumberExpressionDataSourceFactory();
148
+
149
+ const numberExpressionEvaluator = numberExpressionEvaluatorDelegate({
150
+ listExpressionEvaluator: listExpressionEvaluator,
151
+ numberExpressionDataSourceEvaluator: numberExpressionDataSourceEvaluator
152
+ })
153
+
154
+ const stringExpressionEvaluator: StringExpressionEvaluatorDelegate<
155
+ ReactivationListExpressionDataSource,
156
+ ReactivationNumberExpressionDataSource,
157
+ ReactivationStringExpressionDataSource
158
+ > = stringExpressionEvaluatorFactory({
159
+ listExpressionEvaluator: listExpressionEvaluator,
160
+ numberExpressionEvaluator: numberExpressionEvaluator,
161
+ stringExpressionDataSourceEvaluatorFactory: () => reactivationStringExpressionDataSourceEvaluatorFactory({
162
+ productImageUrlBuilderExpressionEvaluator: productImageUrlBuilderExpressionEvaluatorFactory({
163
+ partnerId: params.partnerId,
164
+ numberExpressionEvaluator: numberExpressionEvaluator
165
+ }),
166
+ contactCustomData: contactCustomData,
167
+ nextCouponFromBatch: nextCouponFromBatch
168
+ })
169
+ });
170
+
171
+ const expressionEvaluator = expressionEvaluatorFactory({
172
+ listExpressionEvaluator: listExpressionEvaluator,
173
+ numberExpressionEvaluator: numberExpressionEvaluator,
174
+ stringExpressionEvaluator: stringExpressionEvaluator,
175
+ dataStructBuilderExpressionEvaluatorFactory: expressionEvaluator => dataStructBuilderExpressionEvaluatorFactory({
176
+ expressionEvaluator: expressionEvaluator
177
+ })
178
+ });
179
+
180
+ const dataStructExpressionEvaluator = dataStructBuilderExpressionEvaluatorFactory({
181
+ expressionEvaluator: expressionEvaluator
182
+ });
183
+
184
+ const app = createApp(
185
+ EditEmailTemplateApp,
186
+ {
187
+ onTemplateReset: () => {
188
+ //eslint-disable-next-line no-console
189
+ console.log('onTemplateReset');
190
+ resetTemplate();
191
+ },
192
+ deps:
193
+ editEmailTemplateAppDepsFactory<
194
+ ReactivationListExpressionDataSource,
195
+ ReactivationNumberExpressionDataSource,
196
+ ReactivationStringExpressionDataSource
197
+ >({
198
+ partnerId: params.partnerId,
199
+ localeKey: params.localeKey,
200
+ exitLink: params.exitLink,
201
+ dataSourceFieldNameDelegate: ({ dataSource }) => {
202
+ return matcherFactory(dataSource as GeneralStringExpressionDataSource).Match({
203
+ StringFromContactCustomData: (customData) => customData.FieldName,
204
+ StringFromContactCustomDataWithFallback: (customDataWithFallback) => customDataWithFallback.FallbackValue,
205
+ ProductImageUrlBuilderExpression: () => 'ImageResizer',
206
+ NextCouponFromBatch: () => 'Coupon'
207
+ });
208
+ },
209
+ richTextToolbarPlugins: [
210
+ richTextToolbarPluginFactory({
211
+ richTextToolbarPluginComponent: VariableSelector,
212
+ deps: variableSelectorDepsFactory({
213
+ localeKey: params.localeKey,
214
+ stringExpressionBuilderPlugin: stringExpressionBuilderPluginFactory({
215
+ localeKey: params.localeKey
216
+ })
217
+ })
218
+ })
219
+ ],
220
+ defaultThemeLibrary: defaultThemeLibraryFactory({
221
+ localeKey: params.localeKey
222
+ }),
223
+ defaultComponentLibrary: defaultComponentLibraryFactory({
224
+ localeKey: params.localeKey
225
+ }),
226
+ saveEmailTemplate: async arg => {
227
+ const result = await reactivationMainPageBffClient
228
+ .postSaveTemplate({
229
+ body: {
230
+ partnerId: params.partnerId,
231
+ templateJson: JSON.stringify(arg.emailTemplate)
232
+ }
233
+ })
234
+
235
+ return result.status === 200
236
+ ? 'Success'
237
+ : 'Fail'
238
+ },
239
+ createFavoriteTemplate: async arg => {
240
+ const result = await createFavoriteTemplateBffClient
241
+ .postCreateFavoriteTriggerReactivationTemplate({
242
+ body: {
243
+ partnerId: params.partnerId,
244
+ templateJson: JSON.stringify(arg.emailTemplate),
245
+ favoriteTemplateName: 'Favorite template'
246
+ }
247
+ });
248
+
249
+ return result.status === 200
250
+ ? 'Success'
251
+ : 'Fail';
252
+ },
253
+ listExpressionEvaluator: listExpressionEvaluator,
254
+ numberExpressionEvaluator: numberExpressionEvaluator,
255
+ stringExpressionEvaluator: stringExpressionEvaluator,
256
+ dataStructExpressionEvaluator: dataStructExpressionEvaluator,
257
+ expressionEvaluator: expressionEvaluator,
258
+ getComponentLibraryFactory: x => () =>
259
+ x.getComponentLibraryHttpClient(
260
+ {
261
+ body: {
262
+ partnerId: x.partnerId,
263
+ componentTypes: [
264
+ { triggerReactivation: {} },
265
+ { common: {} }
266
+ ]
267
+ }
268
+ }
269
+ )
270
+ .then(x => reactivationComponentLibraryFactory(x.body.sections)),
271
+ canProductShelfDataSourceBeConverted: () => false,
272
+ httpClientComponentFactoryDelegate: (emailComponent): Component => {
273
+ return {
274
+ triggerReactivation: {
275
+ componentJson: JSON.stringify(emailComponent)
276
+ }
277
+ }
278
+ },
279
+ stringExpressionBuilderPlugin: stringExpressionBuilderPluginFactory({
280
+ localeKey: params.localeKey
281
+ }),
282
+ emailComponentSettingsModifierPlugin: productShelfDataSourceExpressionBuilderPluginFactory({
283
+ productShelfDataSourceExpressionBuilderComponent: ReactivationProductShelfDataSourceExpressionBuilder,
284
+ deps: reactivationProductShelfDataSourceExpressionBuilderDepsFactory({
285
+ localeKey: params.localeKey,
286
+ partnerId: params.partnerId,
287
+ customerStockId: 'customerStockId',
288
+ productShelfBuilderModalWindowBffClient: createProductShelfBuilderModalWindowBffClient(
289
+ apiMachineFetchFactory({
290
+ baseUrl: params.wysiwygBffProxyBaseUrl,
291
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
292
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
293
+ })
294
+ ),
295
+ productCategoryPickerModalWindowBffClient: createProductCategoryPickerModalWindowBffClient(
296
+ apiMachineFetchFactory({
297
+ baseUrl: params.wysiwygBffProxyBaseUrl,
298
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
299
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
300
+ })
301
+ ),
302
+ productPickerModalWindowBffClient: createProductPickerModalWindowBffClient(
303
+ apiMachineFetchFactory({
304
+ baseUrl: params.wysiwygBffProxyBaseUrl,
305
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
306
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
307
+ })
308
+ )
309
+ })
310
+ }),
311
+ initialEmailTemplate: JSON.parse(params.emailTemplateJson),
312
+ wysiwygTemplateEditorBffClient: wysiwygTemplateEditorBffClientFactory({
313
+ themeLibraryBffClient: createThemeLibraryBffClient(
314
+ apiMachineFetchFactory({
315
+ baseUrl: params.wysiwygBffProxyBaseUrl,
316
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
317
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
318
+ })
319
+ ),
320
+ componentLibraryBffClient: createComponentLibraryBffClient(
321
+ apiMachineFetchFactory({
322
+ baseUrl: params.wysiwygBffProxyBaseUrl,
323
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
324
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
325
+ })
326
+ )
327
+ }),
328
+ addThemeLibrarySectionItemModalWindowBffClient: createAddThemeLibrarySectionItemModalWindowBffClient(
329
+ apiMachineFetchFactory({
330
+ baseUrl: params.wysiwygBffProxyBaseUrl,
331
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
332
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
333
+ })
334
+ ),
335
+ addComponentLibrarySectionItemModalWindowBffClient: createAddComponentLibrarySectionItemModalWindowBffClient(
336
+ apiMachineFetchFactory({
337
+ baseUrl: params.wysiwygBffProxyBaseUrl,
338
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
339
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
340
+ })
341
+ ),
342
+ deleteThemeLibrarySectionItemModalWindowBffClient: createDeleteThemeLibrarySectionItemModalWindowBffClient(
343
+ apiMachineFetchFactory({
344
+ baseUrl: params.wysiwygBffProxyBaseUrl,
345
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
346
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
347
+ })
348
+ ),
349
+ deleteThemeLibrarySectionModalWindowBffClient: createDeleteThemeLibrarySectionModalWindowBffClient(
350
+ apiMachineFetchFactory({
351
+ baseUrl: params.wysiwygBffProxyBaseUrl,
352
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
353
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
354
+ })
355
+ ),
356
+ editThemeLibrarySectionItemModalWindowBffClient: createEditThemeLibrarySectionItemModalWindowBffClient(
357
+ apiMachineFetchFactory({
358
+ baseUrl: params.wysiwygBffProxyBaseUrl,
359
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
360
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
361
+ })
362
+ ),
363
+ createComponentLibrarySectionModalWindowBffClient: createAddComponentLibrarySectionModalWindowBffClient(
364
+ apiMachineFetchFactory({
365
+ baseUrl: params.wysiwygBffProxyBaseUrl,
366
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
367
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
368
+ })
369
+ ),
370
+ editComponentLibrarySectionItemModalWindowBffClient: createEditComponentLibrarySectionItemModalWindowBffClient(
371
+ apiMachineFetchFactory({
372
+ baseUrl: params.wysiwygBffProxyBaseUrl,
373
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
374
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
375
+ })
376
+ ),
377
+ deleteComponentLibrarySectionItemModalWindowBffClient: createDeleteComponentLibrarySectionItemModalWindowBffClient(
378
+ apiMachineFetchFactory({
379
+ baseUrl: params.wysiwygBffProxyBaseUrl,
380
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
381
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
382
+ })
383
+ ),
384
+ createThemeLibrarySectionModalWindowBffClient: createThemeLibrarySectionModalWindowBffClient(
385
+ apiMachineFetchFactory({
386
+ baseUrl: params.wysiwygBffProxyBaseUrl,
387
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
388
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
389
+ })
390
+ ),
391
+ deleteComponentLibrarySectionModalWindowBffClient: createDeleteComponentLibrarySectionModalWindowBffClient(
392
+ apiMachineFetchFactory({
393
+ baseUrl: params.wysiwygBffProxyBaseUrl,
394
+ antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
395
+ antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
396
+ })
397
+ )
398
+ })
399
+ }
400
+ );
401
+
402
+ app.use(createVuetify({
403
+ theme: false,
404
+ directives: {
405
+ ClickOutside
406
+ }
407
+ }));
408
+
409
+ app.mount(appTagId);
@@ -0,0 +1,30 @@
1
+ import type {
2
+ ReactivationListExpressionDataSource,
3
+ } from '@easy-wizzy/retailrocket-reactivation';
4
+ import type {
5
+ ReactivationNumberExpressionDataSource,
6
+ } from '@easy-wizzy/retailrocket-reactivation';
7
+ import type {
8
+ ReactivationStringExpressionDataSource,
9
+ } from '@easy-wizzy/retailrocket-reactivation';
10
+ import {
11
+ reactivationEmailComponentFactory,
12
+ } from '@/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CreateComponentLibrarySectionModalWindow/reactivationEmailComponentFactory';
13
+ import type {
14
+ ComponentLibrarySectionItem,
15
+ } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.componentlibrary/main';
16
+ import type { CustomComponentSectionItemType } from '@easy-wizzy/core';
17
+
18
+ export const reactivationComponentSectionItemFactory = (
19
+ componentLibrarySectionItem: ComponentLibrarySectionItem,
20
+ ): CustomComponentSectionItemType<
21
+ ReactivationListExpressionDataSource,
22
+ ReactivationNumberExpressionDataSource,
23
+ ReactivationStringExpressionDataSource
24
+ > => {
25
+ return {
26
+ sectionItemId: componentLibrarySectionItem.sectionItemId,
27
+ sectionItemName: componentLibrarySectionItem.sectionItemName,
28
+ componentTemplate: reactivationEmailComponentFactory(componentLibrarySectionItem.component),
29
+ };
30
+ };
@@ -0,0 +1,26 @@
1
+ import type { EmailComponentType } from '@easy-wizzy/core';
2
+ import type {
3
+ ReactivationListExpressionDataSource,
4
+ } from '@easy-wizzy/retailrocket-reactivation';
5
+ import type {
6
+ ReactivationNumberExpressionDataSource,
7
+ } from '@easy-wizzy/retailrocket-reactivation';
8
+ import type {
9
+ ReactivationStringExpressionDataSource,
10
+ } from '@easy-wizzy/retailrocket-reactivation';
11
+ import type {
12
+ Component,
13
+ } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.addcomponentlibrarysectionitemmodalwindow/main';
14
+
15
+ export const reactivationEmailComponentFactory = (
16
+ component: Component
17
+ ): EmailComponentType<
18
+ ReactivationListExpressionDataSource,
19
+ ReactivationNumberExpressionDataSource,
20
+ ReactivationStringExpressionDataSource
21
+ > =>
22
+ {
23
+ return component.triggerReactivation
24
+ ? JSON.parse(component.triggerReactivation.componentJson)
25
+ : JSON.parse(component.common!.componentJson)
26
+ }