@retailrocketgroup/retailrocket-create.multicast-vue-email-template-render 5.0.384767 → 6.0.388429-dev

package/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@retailrocketgroup/retailrocket-create.multicast-vue-email-template-render",
-  "version": "5.0.384767",
+  "version": "6.0.388429-dev",
   "private": false
 }

package/src/createMulticastEmailTemplateApp.ts

@@ -5,9 +5,11 @@ import { createApp } from 'vue';
 import { createVuetify } from 'vuetify';
 import { ClickOutside } from 'vuetify/directives';
 
-import { CreateEmailTemplateApp } from '@easy-wizzy/core';
+import { TemplatesGallery } from '@easy-wizzy/core';
 import { createSimpleDataForm, matcherFactory } from '@easy-wizzy/core';
-import type { GeneralStringExpressionDataSource } from '@easy-wizzy/retailrocket-common';
+import type {
+    GeneralStringExpressionDataSource
+} from '@easy-wizzy/retailrocket-common';
 import { expressionEvaluatorFactory } from '@easy-wizzy/core';
 import { listExpressionEvaluatorFactory } from '@easy-wizzy/core';
 import { numberExpressionEvaluatorDelegate } from '@easy-wizzy/core';
@@ -15,15 +17,11 @@ import { stringExpressionEvaluatorFactory } from '@easy-wizzy/core';
 import { dataStructBuilderExpressionEvaluatorFactory } from '@easy-wizzy/core';
 
 import type { EmailTemplateType } from '@easy-wizzy/core';
-import type { EmailTemplatePreviewTileComponent } from '@easy-wizzy/core';
 import type { LocaleKey } from '@easy-wizzy/core';
 import type { StringExpressionEvaluatorDelegate } from '@easy-wizzy/core';
 
-import { createEmailTemplateAppDepsFactory } from '@easy-wizzy/common-app';
-import { emailTemplatePreviewTileComponentFactory } from '@easy-wizzy/common-app';
-import { emailTemplatePreviewTileDepsFactory } from '@easy-wizzy/common-app';
+import { templatesGalleryDepsFactory } from '@easy-wizzy/common-app';
 import { productImageUrlBuilderExpressionEvaluatorFactory } from '@easy-wizzy/common-app';
-import { defaultTemplateLibraryFactory } from '@easy-wizzy/common-app';
 import { apiMachineFetchFactory } from '@easy-wizzy/common-app';
 import { variableSelectorDepsFactory } from '@easy-wizzy/common-app';
 
@@ -46,6 +44,18 @@ import { multicastNumberExpressionDataSourceEvaluatorFactory } from '@/implement
 import { multicastStringExpressionDataSourceEvaluatorFactory } from '@/implementation/DataSources/StringExpressionDataSource/multicastEvaluateStringExpressionDataSource';
 
 import { createApi as listExpressionDataSourceBffClientFactory } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.listexpressiondatasource';
+import type { TemplatePreviewCardDeps } from '@easy-wizzy/core';
+import type {
+    ListExpressionDataSourceBffClient
+} from '@easy-wizzy/common-app';
+import type { FavoriteTemplateParam } from '@easy-wizzy/common-app';
+import type {
+    GeneralListExpressionDataSource,
+    GeneralNumberExpressionDataSource,
+} from '@easy-wizzy/retailrocket-common/';
+import {
+    templatePreviewCardDepsFactory
+} from '@easy-wizzy/common-app';
 
 const appTagId = '#app';
 const appTag = document.querySelector(appTagId);
@@ -60,8 +70,14 @@ const params = {
     antiForgeryFormTokenValue: appTag!.getAttribute('data-anti-forgery-form-token-value')!,
     createEmailTemplateSubmitUrl: appTag!.getAttribute('data-create-email-template-submit-url')!,
     initialEmailTemplateJson: appTag!.getAttribute('data-initial-multicast-template')!,
-    multicastFavoritesTemplates: JSON.parse(appTag!.getAttribute('data-multicast-favorites-templates')!) as [{ templateId: string, templateJson: string, favoriteTemplateName: string }],
-    commonFavoritesTemplates: JSON.parse(appTag!.getAttribute('data-common-favorites-templates')!) as [{ templateId: string, templateJson: string, favoriteTemplateName: string }],
+    multicastFavoritesTemplates: JSON
+        .parse(
+            appTag!.getAttribute('data-multicast-favorites-templates')!
+        ) as FavoriteTemplateParam[],
+    commonFavoritesTemplates: JSON
+        .parse(
+            appTag!.getAttribute('data-common-favorites-templates')!
+        ) as FavoriteTemplateParam[],
     exitLink: appTag!.getAttribute('data-exit-link')!,
     localeKey: appTag!.getAttribute('data-locale-key') as LocaleKey || 'en'
 };
@@ -83,12 +99,14 @@ const listExpressionDataSourceBffClient = listExpressionDataSourceBffClientFacto
 const createTemplate = <
     TListExpressionDataSource,
     TNumberExpressionDataSource,
-    TStringExpressionDataSource>(arg: {
-    template: EmailTemplateType<
-        TListExpressionDataSource,
-        TNumberExpressionDataSource,
-        TStringExpressionDataSource>
-}): void => {
+    TStringExpressionDataSource
+>(arg: {
+        template: EmailTemplateType<
+            TListExpressionDataSource,
+            TNumberExpressionDataSource,
+            TStringExpressionDataSource
+        >
+    }): void => {
     const formData = new FormData();
     formData.append(
         params.antiForgeryFormTokenName,
@@ -112,18 +130,21 @@ const nextCouponFromBatch: NextCouponFromBatchType = {
     BatchId: ''
 };
 
-const createEmailTemplatePreviewTile = (arg: {
-    template: EmailTemplateType<
-        MulticastListExpressionDataSource,
-        MulticastNumberExpressionDataSource,
-        MulticastStringExpressionDataSource
-    >;
-    templateName: string;
-}): EmailTemplatePreviewTileComponent => {
+const _templatePreviewCardDepsFactory = (arg: {
+    partnerId: string,
+    listExpressionDataSourceBffClient: ListExpressionDataSourceBffClient,
+    contactCustomData: ContactCustomData,
+    nextCouponFromBatch: NextCouponFromBatchType,
+    localeKey: LocaleKey
+}): TemplatePreviewCardDeps<
+    MulticastListExpressionDataSource,
+    MulticastNumberExpressionDataSource,
+    MulticastStringExpressionDataSource
+> => {
 
     const listExpressionDataSourceEvaluator = multicastEvaluateListExpressionDataSourceFactory({
-        partnerId: params.partnerId,
-        listExpressionDataSourceBffClient: listExpressionDataSourceBffClient,
+        partnerId: arg.partnerId,
+        listExpressionDataSourceBffClient: arg.listExpressionDataSourceBffClient,
         customerStockId: undefined
     });
 
@@ -132,7 +153,7 @@ const createEmailTemplatePreviewTile = (arg: {
     });
 
     const numberExpressionDataSourceEvaluator = multicastNumberExpressionDataSourceEvaluatorFactory({
-        contactCustomData: contactCustomData
+        contactCustomData: arg.contactCustomData
     });
 
     const numberExpressionEvaluator = numberExpressionEvaluatorDelegate({
@@ -152,8 +173,8 @@ const createEmailTemplatePreviewTile = (arg: {
                 partnerId: params.partnerId,
                 numberExpressionEvaluator: numberExpressionEvaluator
             }),
-            contactCustomData: contactCustomData,
-            nextCouponFromBatch: nextCouponFromBatch
+            contactCustomData: arg.contactCustomData,
+            nextCouponFromBatch: arg.nextCouponFromBatch
         })
     });
 
@@ -167,56 +188,43 @@ const createEmailTemplatePreviewTile = (arg: {
     });
 
     const stringExpressionBuilderPlugin = stringExpressionBuilderPluginFactory({
-        localeKey: params.localeKey
+        localeKey: arg.localeKey
     });
 
     const dataStructExpressionEvaluator = dataStructBuilderExpressionEvaluatorFactory({
         expressionEvaluator: expressionEvaluator
     });
 
-    return emailTemplatePreviewTileComponentFactory<
+    return templatePreviewCardDepsFactory<
         MulticastListExpressionDataSource,
         MulticastNumberExpressionDataSource,
         MulticastStringExpressionDataSource
     >({
-        template: arg.template,
-        templateName: arg.templateName,
-        emailTemplatePreviewTileDeps: emailTemplatePreviewTileDepsFactory<
-            MulticastListExpressionDataSource,
-            MulticastNumberExpressionDataSource,
-            MulticastStringExpressionDataSource
-        >({
-            localeKey: params.localeKey,
-            dataSourceFieldNameDelegate: ({ dataSource }) => {
-                return matcherFactory(dataSource as GeneralStringExpressionDataSource).Match({
-                    StringFromContactCustomData: (customData) => customData.FieldName,
-                    StringFromContactCustomDataWithFallback: (customDataWithFallback) => customDataWithFallback.FallbackValue,
-                    ProductImageUrlBuilderExpression: () => 'ImageResizer',
-                    NextCouponFromBatch: () => 'Coupon'
-                });
-            },
-            richTextToolbarPlugins: [
-                richTextToolbarPluginFactory({
-                    richTextToolbarPluginComponent: VariableSelector,
-                    deps: variableSelectorDepsFactory({
-                        localeKey: params.localeKey,
-                        stringExpressionBuilderPlugin: stringExpressionBuilderPlugin
-                    })
-                })
-            ],
-            listExpressionEvaluator: listExpressionEvaluator,
-            numberExpressionEvaluator: numberExpressionEvaluator,
-            stringExpressionEvaluator: stringExpressionEvaluator,
-            dataStructExpressionEvaluator: dataStructExpressionEvaluator,
-            expressionEvaluator: expressionEvaluator,
-            stringExpressionBuilderPlugin: stringExpressionBuilderPlugin
-        }),
-        onFavoriteTemplateSelected: () => {
-            createTemplate({
-                template: arg.template
+        localeKey: params.localeKey,
+        dataSourceFieldNameDelegate: ({ dataSource }) => {
+            return matcherFactory(dataSource as GeneralStringExpressionDataSource).Match({
+                StringFromContactCustomData: (customData) => customData.FieldName,
+                StringFromContactCustomDataWithFallback: (customDataWithFallback) => customDataWithFallback.FallbackValue,
+                ProductImageUrlBuilderExpression: () => 'ImageResizer',
+                NextCouponFromBatch: () => 'Coupon'
             });
         },
-    });
+        richTextToolbarPlugins: [
+            richTextToolbarPluginFactory({
+                richTextToolbarPluginComponent: VariableSelector,
+                deps: variableSelectorDepsFactory({
+                    localeKey: arg.localeKey,
+                    stringExpressionBuilderPlugin: stringExpressionBuilderPlugin
+                })
+            })
+        ],
+        listExpressionEvaluator: listExpressionEvaluator,
+        numberExpressionEvaluator: numberExpressionEvaluator,
+        stringExpressionEvaluator: stringExpressionEvaluator,
+        dataStructExpressionEvaluator: dataStructExpressionEvaluator,
+        expressionEvaluator: expressionEvaluator,
+        stringExpressionBuilderPlugin: stringExpressionBuilderPlugin
+    })
 };
 
 const initialEmailTemplate = params.localeKey === 'ru'
@@ -224,68 +232,56 @@ const initialEmailTemplate = params.localeKey === 'ru'
     : initialEmailTemplateEn;
 
 const app = createApp(
-    CreateEmailTemplateApp,
+    TemplatesGallery,
     {
-        onInitialTemplateSelected: () => {
-            //eslint-disable-next-line no-console
-            console.log('onInitialTemplateSelected');
+        onTemplateSelected: (template: EmailTemplateType<
+            MulticastListExpressionDataSource,
+            MulticastNumberExpressionDataSource,
+            MulticastStringExpressionDataSource
+        >) => {
             createTemplate({
-                template: params.initialEmailTemplateJson.length
-                    ? JSON.parse(params.initialEmailTemplateJson)
-                    : initialEmailTemplate,
+                template: template
             });
         },
-        deps:
-            createEmailTemplateAppDepsFactory<
-                MulticastListExpressionDataSource,
-                MulticastNumberExpressionDataSource,
-                MulticastStringExpressionDataSource
-            >({
+        commonFavoriteTemplates: params
+            .commonFavoritesTemplates
+            .map(t => ({
+                template: JSON.parse(t.templateJson) as EmailTemplateType<
+                    GeneralListExpressionDataSource,
+                    GeneralNumberExpressionDataSource,
+                    GeneralStringExpressionDataSource
+                >,
+                templateName: t.favoriteTemplateName
+            })),
+        customFavoriteTemplates: params
+            .multicastFavoritesTemplates
+            .map(t => ({
+                template: JSON.parse(t.templateJson) as EmailTemplateType<
+                    MulticastListExpressionDataSource,
+                    MulticastNumberExpressionDataSource,
+                    MulticastStringExpressionDataSource
+                >,
+                templateName: t.favoriteTemplateName
+            })),
+        deps: templatesGalleryDepsFactory<
+            MulticastListExpressionDataSource,
+            MulticastNumberExpressionDataSource,
+            MulticastStringExpressionDataSource
+        >({
+            partnerId: params.partnerId,
+            localeKey: params.localeKey,
+            templatePreviewCardDeps: _templatePreviewCardDepsFactory({
                 partnerId: params.partnerId,
-                localeKey: params.localeKey,
-                emailTemplatePreviews:
-                    {
-                        custom: [
-                            ...params
-                                .commonFavoritesTemplates
-                                .map(o => ({
-                                    templateName: o.favoriteTemplateName,
-                                    previewTileComponent: createEmailTemplatePreviewTile({
-                                        template: JSON.parse(o.templateJson),
-                                        templateName: o.favoriteTemplateName
-                                    })
-                                })),
-                            ...params
-                                .multicastFavoritesTemplates
-                                .map(o => ({
-                                    templateName: o.favoriteTemplateName,
-                                    previewTileComponent: createEmailTemplatePreviewTile({
-                                        template: JSON.parse(o.templateJson),
-                                        templateName: o.favoriteTemplateName
-                                    })
-                                })),
-                            ],
-                        default: [
-                            ...defaultTemplateLibraryFactory(params.localeKey)
-                                .map(o => ({
-                                    templateName: o.favoriteTemplateName,
-                                    previewTileComponent: createEmailTemplatePreviewTile({
-                                        template: o.defaultTemplate as EmailTemplateType<
-                                            MulticastListExpressionDataSource,
-                                            MulticastNumberExpressionDataSource,
-                                            MulticastStringExpressionDataSource
-                                        >,
-                                        templateName: o.favoriteTemplateName
-                                    })
-                                }))
-                        ]
-                },
-                initialEmailTemplate: params.initialEmailTemplateJson.length
-                    ? JSON.parse(params.initialEmailTemplateJson)
-                    : initialEmailTemplate,
-                exitLink: params.exitLink
-            }
-        )
+                listExpressionDataSourceBffClient: listExpressionDataSourceBffClient,
+                contactCustomData: contactCustomData,
+                nextCouponFromBatch: nextCouponFromBatch,
+                localeKey: params.localeKey
+            }),
+            initialEmailTemplate: params.initialEmailTemplateJson.length
+                ? JSON.parse(params.initialEmailTemplateJson)
+                : initialEmailTemplate,
+            exitLink: params.exitLink
+        })
     }
 );