@retailrocketgroup/retailrocket-create.welcome-sequence-vue-email-template-render 5.0.384700 → 6.0.388330-dev

package/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@retailrocketgroup/retailrocket-create.welcome-sequence-vue-email-template-render",
-  "version": "5.0.384700",
+  "version": "6.0.388330-dev",
   "private": false
 }

package/src/createWelcomeSequenceEmailTemplateApp.ts

@@ -5,9 +5,13 @@ 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';
@@ -15,19 +19,22 @@ 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 {
+    templatePreviewCardDepsFactory
+} 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';
 
@@ -46,6 +53,7 @@ import { welcomeSequenceEvaluateNumberExpressionDataSourceFactory } from '@/impl
 import { welcomeSequenceStringExpressionDataSourceEvaluatorFactory } from '@/implementation/DataSources/StringExpressionDataSource/welcomeSequenceEvaluateStringExpressionDataSource';
 
 import { createApi as listExpressionDataSourceBffClientFactory } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.listexpressiondatasource';
+import type { TemplatePreviewCardDeps } from '@easy-wizzy/core';
 
 const appTagId = '#app';
 const appTag = document.querySelector(appTagId);
@@ -60,8 +68,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-welcome-sequence-template')!,
-    welcomeSequenceFavoritesTemplates: JSON.parse(appTag!.getAttribute('data-welcome-sequence-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 }],
+    welcomeSequenceFavoritesTemplates: JSON
+        .parse(
+            appTag!.getAttribute('data-welcome-sequence-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,7 +97,8 @@ const listExpressionDataSourceBffClient = listExpressionDataSourceBffClientFacto
 const createTemplate = <
     TListExpressionDataSource,
     TNumberExpressionDataSource,
-    TStringExpressionDataSource>(arg: {
+    TStringExpressionDataSource
+>(arg: {
     template: EmailTemplateType<
         TListExpressionDataSource,
         TNumberExpressionDataSource,
@@ -112,18 +127,21 @@ const nextCouponFromBatch: NextCouponFromBatchType = {
     BatchId: ''
 };
 
-const createEmailTemplatePreviewTile = (arg: {
-    template: EmailTemplateType<
-        WelcomeSequenceListExpressionDataSource,
-        WelcomeSequenceNumberExpressionDataSource,
-        WelcomeSequenceStringExpressionDataSource
-    >;
-    templateName: string;
-}): EmailTemplatePreviewTileComponent => {
+const _templatePreviewCardDepsFactory = (arg: {
+    partnerId: string,
+    listExpressionDataSourceBffClient: ListExpressionDataSourceBffClient,
+    contactCustomData: ContactCustomData,
+    nextCouponFromBatch: NextCouponFromBatchType,
+    localeKey: LocaleKey
+}): TemplatePreviewCardDeps<
+    WelcomeSequenceListExpressionDataSource,
+    WelcomeSequenceNumberExpressionDataSource,
+    WelcomeSequenceStringExpressionDataSource
+> => {
 
     const listExpressionDataSourceEvaluator = welcomeSequenceEvaluateListExpressionDataSourceFactory({
-        partnerId: params.partnerId,
-        listExpressionDataSourceBffClient: listExpressionDataSourceBffClient,
+        partnerId: arg.partnerId,
+        listExpressionDataSourceBffClient: arg.listExpressionDataSourceBffClient,
         customerStockId: undefined
     });
 
@@ -150,8 +168,8 @@ const createEmailTemplatePreviewTile = (arg: {
                 partnerId: params.partnerId,
                 numberExpressionEvaluator: numberExpressionEvaluator
             }),
-            contactCustomData: contactCustomData,
-            nextCouponFromBatch: nextCouponFromBatch
+            contactCustomData: arg.contactCustomData,
+            nextCouponFromBatch: arg.nextCouponFromBatch
         })
     });
 
@@ -164,57 +182,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<
         WelcomeSequenceListExpressionDataSource,
         WelcomeSequenceNumberExpressionDataSource,
         WelcomeSequenceStringExpressionDataSource
     >({
-        template: arg.template,
-        templateName: arg.templateName,
-        emailTemplatePreviewTileDeps: emailTemplatePreviewTileDepsFactory<
-            WelcomeSequenceListExpressionDataSource,
-            WelcomeSequenceNumberExpressionDataSource,
-            WelcomeSequenceStringExpressionDataSource
-        >({
-            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'
@@ -222,68 +227,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<
+            WelcomeSequenceListExpressionDataSource,
+            WelcomeSequenceNumberExpressionDataSource,
+            WelcomeSequenceStringExpressionDataSource
+        >) => {
             createTemplate({
-                template: params.initialEmailTemplateJson.length
-                    ? JSON.parse(params.initialEmailTemplateJson)
-                    : initialEmailTemplate,
+                template: template
             });
         },
-        deps:
-            createEmailTemplateAppDepsFactory<
-                WelcomeSequenceListExpressionDataSource,
-                WelcomeSequenceNumberExpressionDataSource,
-                WelcomeSequenceStringExpressionDataSource
-            >({
+        commonFavoriteTemplates: params
+            .commonFavoritesTemplates
+            .map(t => ({
+                template: JSON.parse(t.templateJson) as EmailTemplateType<
+                    GeneralListExpressionDataSource,
+                    GeneralNumberExpressionDataSource,
+                    GeneralStringExpressionDataSource
+                >,
+                templateName: t.favoriteTemplateName
+            })),
+        customFavoriteTemplates: params
+            .welcomeSequenceFavoritesTemplates
+            .map(t => ({
+                template: JSON.parse(t.templateJson) as EmailTemplateType<
+                    WelcomeSequenceListExpressionDataSource,
+                    WelcomeSequenceNumberExpressionDataSource,
+                    WelcomeSequenceStringExpressionDataSource
+                >,
+                templateName: t.favoriteTemplateName
+            })),
+        deps: templatesGalleryDepsFactory<
+            WelcomeSequenceListExpressionDataSource,
+            WelcomeSequenceNumberExpressionDataSource,
+            WelcomeSequenceStringExpressionDataSource
+        >({
+            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
-                                .welcomeSequenceFavoritesTemplates
-                                .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<
-                                            WelcomeSequenceListExpressionDataSource,
-                                            WelcomeSequenceNumberExpressionDataSource,
-                                            WelcomeSequenceStringExpressionDataSource
-                                        >,
-                                        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
+        })
     }
 );
 
@@ -294,4 +287,4 @@ app.use(createVuetify({
     }
 }));
 
-app.mount(appTagId);
+app.mount(appTagId);

package/vite.config.ts

@@ -13,7 +13,6 @@ export default defineConfig({
                 assetFileNames: 'assets/[name].[ext]',
             },
         },
-        sourcemap: true,
     },
     plugins: [
         vue({