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

package/package.json

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

package/src/FavoriteTransactionalTemplateParam.ts

@@ -0,0 +1,5 @@
+export type FavoriteTransactionalTemplateParam = {
+    templateJson: string;
+    dataJson: string;
+    favoriteTemplateName: string;
+}

package/src/createTransactionalEmailTemplateApp.ts

@@ -5,33 +5,37 @@ 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 {
+    GeneralListExpressionDataSource,
+    GeneralNumberExpressionDataSource,
+    GeneralStringExpressionDataSource
+} from '@easy-wizzy/retailrocket-common';
 import { expressionEvaluatorFactory } from '@easy-wizzy/core';
 import { listExpressionEvaluatorFactory } from '@easy-wizzy/core';
 import { numberExpressionEvaluatorDelegate } from '@easy-wizzy/core';
 import { stringExpressionEvaluatorFactory } from '@easy-wizzy/core';
 import { dataStructBuilderExpressionEvaluatorFactory } from '@easy-wizzy/core';
 
-import type { DataType } 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';
 
 import type { ApiMachineFetchDelegate } from '@easy-wizzy/common-app';
+import type { FavoriteTemplateParam } from '@easy-wizzy/common-app';
+import type {
+    ListExpressionDataSourceBffClient
+} from '@easy-wizzy/common-app';
 
 import { stringExpressionBuilderPluginFactory, richTextToolbarPluginFactory, VariableSelector } from '@easy-wizzy/retailrocket-common';
 
+import type { ContactCustomData } from '@easy-wizzy/retailrocket-common';
 import type { NextCouponFromBatchType } from '@easy-wizzy/retailrocket-common';
 
 import type { TransactionalListExpressionDataSource } from '@easy-wizzy/retailrocket-transactional';
@@ -46,6 +50,12 @@ import { transactionalNumberExpressionDataSourceEvaluatorFactory } from '@/imple
 import { transactionalStringExpressionDataSourceEvaluatorFactory } from '@/implementation/DataSources/StringExpressionDataSource/transactionalEvaluateStringExpressionDataSource';
 
 import { createApi as listExpressionDataSourceBffClientFactory } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.listexpressiondatasource';
+import type { TemplatePreviewCardDeps } from '@easy-wizzy/core';
+import type { DataType } from '@easy-wizzy/core';
+import type { FavoriteTransactionalTemplateParam } from '@/FavoriteTransactionalTemplateParam.ts';
+import {
+    templatePreviewCardDepsFactory
+} from '@easy-wizzy/common-app';
 
 const appTagId = '#app';
 const appTag = document.querySelector(appTagId);
@@ -60,15 +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-transactional-template')!,
-    transactionalFavoritesTemplates: JSON.parse(appTag!.getAttribute('data-transactional-favorites-templates')!) as [{
-        templateJson: string,
-        dataJson: string,
-        favoriteTemplateName: string
-    }],
-    commonFavoritesTemplates: JSON.parse(appTag!.getAttribute('data-common-favorites-templates')!) as [{
-        templateJson: string,
-        favoriteTemplateName: string
-    }],
+    transactionalFavoritesTemplates: JSON
+        .parse(
+            appTag!.getAttribute('data-transactional-favorites-templates')!
+        ) as FavoriteTransactionalTemplateParam[],
+    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'
 };
@@ -90,12 +99,12 @@ const listExpressionDataSourceBffClient = listExpressionDataSourceBffClientFacto
 const createTemplate = <
     TListExpressionDataSource,
     TNumberExpressionDataSource,
-    TStringExpressionDataSource>(arg: {
+    TStringExpressionDataSource
+>(arg: {
     template: EmailTemplateType<
         TListExpressionDataSource,
         TNumberExpressionDataSource,
-        TStringExpressionDataSource>,
-    previewData: unknown,
+        TStringExpressionDataSource>
 }): void => {
     const formData = new FormData();
     formData.append(
@@ -104,9 +113,6 @@ const createTemplate = <
     formData.append(
         'template',
         JSON.stringify(arg.template));
-    formData.append(
-        'previewData',
-        JSON.stringify(arg.previewData));
 
     const form = createSimpleDataForm({
         method: 'POST',
@@ -118,19 +124,23 @@ const createTemplate = <
     form.submit();
 };
 
+const contactCustomData: ContactCustomData = {};
 const nextCouponFromBatch: NextCouponFromBatchType = {
     BatchId: ''
 };
 
-const createEmailTemplatePreviewTile = (arg: {
-    template: EmailTemplateType<
-        TransactionalListExpressionDataSource,
-        TransactionalNumberExpressionDataSource,
-        TransactionalStringExpressionDataSource
-    >;
-    templateData: DataType;
-    templateName: string;
-}): EmailTemplatePreviewTileComponent => {
+const _templatePreviewCardDepsFactory = (arg: {
+    partnerId: string,
+    listExpressionDataSourceBffClient: ListExpressionDataSourceBffClient,
+    contactCustomData: ContactCustomData,
+    nextCouponFromBatch: NextCouponFromBatchType,
+    localeKey: LocaleKey,
+    templateData: DataType
+}): TemplatePreviewCardDeps<
+    TransactionalListExpressionDataSource,
+    TransactionalNumberExpressionDataSource,
+    TransactionalStringExpressionDataSource
+> => {
 
     const listExpressionDataSourceEvaluator = transactionalListExpressionDataSourceEvaluatorFactory({
         partnerId: params.partnerId,
@@ -144,7 +154,7 @@ const createEmailTemplatePreviewTile = (arg: {
     });
 
     const numberExpressionDataSourceEvaluator = transactionalNumberExpressionDataSourceEvaluatorFactory({
-        getTransactionalTemplateData: () => arg.templateData
+        getTransactionalTemplateData: () => arg.templateData,
     });
 
     const numberExpressionEvaluator = numberExpressionEvaluatorDelegate({
@@ -160,12 +170,12 @@ const createEmailTemplatePreviewTile = (arg: {
         listExpressionEvaluator: listExpressionEvaluator,
         numberExpressionEvaluator: numberExpressionEvaluator,
         stringExpressionDataSourceEvaluatorFactory: () => transactionalStringExpressionDataSourceEvaluatorFactory({
-            getTransactionalTemplateData: () => arg.templateData,
             productImageUrlBuilderExpressionEvaluator: productImageUrlBuilderExpressionEvaluatorFactory({
                 partnerId: params.partnerId,
                 numberExpressionEvaluator: numberExpressionEvaluator
             }),
-            nextCouponFromBatch: nextCouponFromBatch
+            getTransactionalTemplateData: () => arg.templateData,
+            nextCouponFromBatch: arg.nextCouponFromBatch
         })
     });
 
@@ -178,62 +188,44 @@ const createEmailTemplatePreviewTile = (arg: {
         })
     });
 
-    const dataStructExpressionEvaluator = dataStructBuilderExpressionEvaluatorFactory({
-        expressionEvaluator: expressionEvaluator
+    const stringExpressionBuilderPlugin = stringExpressionBuilderPluginFactory({
+        localeKey: arg.localeKey
     });
 
-    const stringExpressionBuilderPlugin = stringExpressionBuilderPluginFactory({
-        localeKey: params.localeKey
+    const dataStructExpressionEvaluator = dataStructBuilderExpressionEvaluatorFactory({
+        expressionEvaluator: expressionEvaluator
     });
 
-    return emailTemplatePreviewTileComponentFactory<
+    return templatePreviewCardDepsFactory<
         TransactionalListExpressionDataSource,
         TransactionalNumberExpressionDataSource,
         TransactionalStringExpressionDataSource
     >({
-        template: arg.template,
-        templateName: arg.templateName,
-        emailTemplatePreviewTileDeps: emailTemplatePreviewTileDepsFactory<
-            TransactionalListExpressionDataSource,
-            TransactionalNumberExpressionDataSource,
-            TransactionalStringExpressionDataSource
-        >({
-            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: () => {
-            //eslint-disable-next-line no-console
-            console.log('onFavoriteTemplateSelected');
-            // create email template
-            createTemplate({
-                template: arg.template,
-                previewData: arg.templateData,
+        localeKey: params.localeKey,
+        dataSourceFieldNameDelegate: ({ dataSource }) => {
+            return matcherFactory(dataSource as GeneralStringExpressionDataSource).Match({
+                StringFromContactCustomData: (customData) => customData.FieldName,
+                StringFromContactCustomDataWithFallback: (customDataWithFallback) => customDataWithFallback.FallbackValue,
+                ProductImageUrlBuilderExpression: () => 'ImageResizer',
+                NextCouponFromBatch: () => 'Coupon'
             });
-            // redirect
         },
-    });
+        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'
@@ -241,73 +233,57 @@ const initialEmailTemplate = params.localeKey === 'ru'
     : initialEmailTemplateEn;
 
 const app = createApp(
-    CreateEmailTemplateApp,
+    TemplatesGallery,
     {
-        onInitialTemplateSelected: () => {
-            //eslint-disable-next-line no-console
-            console.log('onInitialTemplateSelected');
+        onTemplateSelected: (template: EmailTemplateType<
+            TransactionalListExpressionDataSource,
+            TransactionalNumberExpressionDataSource,
+            TransactionalStringExpressionDataSource
+        >) => {
             createTemplate({
-                template: params.initialEmailTemplateJson.length
-                    ? JSON.parse(params.initialEmailTemplateJson)
-                    : initialEmailTemplate,
-                previewData: {}
+                template: template
             });
         },
-        exitLink: params.exitLink,
-        deps:
-            createEmailTemplateAppDepsFactory<
-                TransactionalListExpressionDataSource,
-                TransactionalNumberExpressionDataSource,
-                TransactionalStringExpressionDataSource
-            >({
+        commonFavoriteTemplates: params
+            .commonFavoritesTemplates
+            .map(t => ({
+                template: JSON.parse(t.templateJson) as EmailTemplateType<
+                    GeneralListExpressionDataSource,
+                    GeneralNumberExpressionDataSource,
+                    GeneralStringExpressionDataSource
+                >,
+                templateName: t.favoriteTemplateName
+            })),
+        customFavoriteTemplates: params
+            .transactionalFavoritesTemplates
+            .map(t => ({
+                template: JSON.parse(t.templateJson) as EmailTemplateType<
+                    TransactionalListExpressionDataSource,
+                    TransactionalNumberExpressionDataSource,
+                    TransactionalStringExpressionDataSource
+                >,
+                templateName: t.favoriteTemplateName
+            })),
+        deps: templatesGalleryDepsFactory<
+            TransactionalListExpressionDataSource,
+            TransactionalNumberExpressionDataSource,
+            TransactionalStringExpressionDataSource
+        >({
+            partnerId: params.partnerId,
+            localeKey: params.localeKey,
+            templatePreviewCardDeps: _templatePreviewCardDepsFactory({
                 partnerId: params.partnerId,
+                listExpressionDataSourceBffClient: listExpressionDataSourceBffClient,
+                contactCustomData: contactCustomData,
+                nextCouponFromBatch: nextCouponFromBatch,
                 localeKey: params.localeKey,
-                emailTemplatePreviews:{
-                    custom: [
-                        ...params
-                            .commonFavoritesTemplates
-                            .map(o => ({
-                                templateName: o.favoriteTemplateName,
-                                previewTileComponent: createEmailTemplatePreviewTile({
-                                    template: JSON.parse(o.templateJson),
-                                    templateName: o.favoriteTemplateName,
-                                    templateData: {}
-                                })
-                            })),
-                        ...params
-                            .transactionalFavoritesTemplates
-                            .map(o => ({
-                                templateName: o.favoriteTemplateName,
-                                previewTileComponent: createEmailTemplatePreviewTile({
-                                    template: JSON.parse(o.templateJson),
-                                    templateName: o.favoriteTemplateName,
-                                    templateData: {}
-                                })
-                            }))
-                    ],
-                    default: [
-                        ...defaultTemplateLibraryFactory(params.localeKey)
-                            .map(o => ({
-                                templateName: o.favoriteTemplateName,
-                                previewTileComponent: createEmailTemplatePreviewTile({
-                                    template: o.defaultTemplate as EmailTemplateType<
-                                        TransactionalListExpressionDataSource,
-                                        TransactionalNumberExpressionDataSource,
-                                        TransactionalStringExpressionDataSource
-                                    >,
-                                    templateName: o.favoriteTemplateName,
-                                    templateData: {}
-                                })
-                            }))
-                    ]
-                }
-                    ,
-                initialEmailTemplate: params.initialEmailTemplateJson.length
-                    ? JSON.parse(params.initialEmailTemplateJson)
-                    : initialEmailTemplate,
-                exitLink: params.exitLink
-            }
-        )
+                templateData: {}
+            }),
+            initialEmailTemplate: params.initialEmailTemplateJson.length
+                ? JSON.parse(params.initialEmailTemplateJson)
+                : initialEmailTemplate,
+            exitLink: params.exitLink
+        })
     }
 );
 
@@ -318,4 +294,4 @@ app.use(createVuetify({
     }
 }));
 
-app.mount(appTagId);
+app.mount(appTagId);