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

package/src/editAbandonedBasketEmailTemplate.ts

@@ -0,0 +1,408 @@
+import 'bootstrap';
+import '@easy-wizzy/retailrocket-common/index.css';
+import '@easy-wizzy/core/index.css';
+
+import { createApp } from 'vue';
+import { createVuetify } from 'vuetify';
+import { ClickOutside } from 'vuetify/directives';
+
+import { createSimpleDataForm, matcherFactory } from '@easy-wizzy/core';
+import { EditEmailTemplateApp } from '@easy-wizzy/core';
+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 { LocaleKey } from '@easy-wizzy/core';
+import type { StringExpressionEvaluatorDelegate } from '@easy-wizzy/core';
+
+import { defaultThemeLibraryFactory } from '@easy-wizzy/theme-library';
+import { defaultComponentLibraryFactory } from '@easy-wizzy/component-library';
+
+import type { ApiMachineFetchDelegate } from '@easy-wizzy/common-app';
+
+import { apiMachineFetchFactory } from '@easy-wizzy/common-app';
+import { editEmailTemplateAppDepsFactory } from '@easy-wizzy/common-app';
+import { productImageUrlBuilderExpressionEvaluatorFactory } from '@easy-wizzy/common-app';
+import { wysiwygTemplateEditorBffClientFactory } from '@easy-wizzy/common-app';
+import { variableSelectorDepsFactory } from '@easy-wizzy/common-app';
+
+import { productShelfDataSourceExpressionBuilderPluginFactory } from '@easy-wizzy/retailrocket-common';
+import { stringExpressionBuilderPluginFactory, richTextToolbarPluginFactory, VariableSelector } from '@easy-wizzy/retailrocket-common';
+
+import type { ContactCustomData, GeneralStringExpressionDataSource, NextCouponFromBatchType } from '@easy-wizzy/retailrocket-common';
+
+import type { AbandonedBasketListExpressionDataSource } from '@easy-wizzy/retailrocket-abandoned-basket';
+import type { AbandonedBasketNumberExpressionDataSource } from '@easy-wizzy/retailrocket-abandoned-basket';
+import type { AbandonedBasketStringExpressionDataSource } from '@easy-wizzy/retailrocket-abandoned-basket';
+
+import { AbandonedBasketProductShelfDataSourceExpressionBuilder } from '@easy-wizzy/retailrocket-abandoned-basket';
+
+import { abandonedBasketEvaluateListExpressionDataSourceFactory } from '@/implementation/DataSources/ListDataExpressionSource/abandonedBasketEvaluateListExpressionDataSourceFactory';
+import { abandonedBasketEvaluateNumberExpressionDataSourceFactory } from '@/implementation/DataSources/NumberExpressionDataSource/abandonedBasketEvaluateNumberExpressionDataSourceFactory';
+import { abandonedBasketStringExpressionDataSourceEvaluatorFactory } from '@/implementation/DataSources/StringExpressionDataSource/abandonedBasketEvaluateStringExpressionDataSource';
+import { abandonedBasketComponentLibraryFactory } from '@/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CustomComponentLibrary/abandonedBasketComponentLibraryFactory';
+import { abandonedBasketProductShelfDataSourceExpressionBuilderDepsFactory } from '@/implementation/EmailComponentSettingsModifierPlugin/ProductShelfDataSourceExpressionBuilder/abandonedBasketProductShelfDataSourceExpressionBuilderDepsFactory.ts';
+
+import { createApi as createTriggerAbandonedBasketWysiwygTemplateEditorClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.triggerabandonedbasketwysiwygtemplateeditor';
+import {
+    type Component,
+    createApi as createAddComponentLibrarySectionItemModalWindowBffClient
+} from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.addcomponentlibrarysectionitemmodalwindow';
+import { createApi as listExpressionDataSourceBffClientFactory } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.listexpressiondatasource';
+import { createApi as createProductShelfBuilderModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.productshelfmodalwindow';
+import { createApi as createThemeLibraryBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.themelibrary';
+import { createApi as createComponentLibraryBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.componentlibrary';
+import { createApi as createAddThemeLibrarySectionItemModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.addthemelibrarysectionitemmodalwindow';
+import { createApi as createDeleteThemeLibrarySectionItemModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.deletethemelibrarysectionitemmodalwindow';
+import { createApi as createDeleteThemeLibrarySectionModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.deletethemelibrarysectionmodalwindow';
+import { createApi as createEditThemeLibrarySectionItemModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.editthemelibrarysectionitemmodalwindow';
+import { createApi as createAddComponentLibrarySectionModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.addcomponentlibrarysectionmodalwindow';
+import { createApi as createEditComponentLibrarySectionItemModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.editcomponentlibrarysectionitemmodalwindow';
+import { createApi as createDeleteComponentLibrarySectionItemModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.deletecomponentlibrarysectionitemmodalwindow';
+import { createApi as createThemeLibrarySectionModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.addthemelibrarysectionmodalwindow';
+import { createApi as createDeleteComponentLibrarySectionModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.deletecomponentlibrarysectionmodalwindow';
+import { createApi as createProductCategoryPickerModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.productcategorypickermodalwindow';
+import { createApi as createProductPickerModalWindowBffClient } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.productpickermodalwindow';
+import { createApi as saveFavoriteTemplate } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.savefavoritetemplatemodalwindow';
+
+const appTagId = '#app';
+const appTag = document.querySelector(appTagId);
+
+const params = {
+    partnerId: appTag!.getAttribute('data-partner-id')!,
+    wysiwygBffProxyBaseUrl: appTag!.getAttribute('data-wysiwyg-bff-proxy-base-url')!,
+    wysiwygTemplateEditorBffBaseUrl: appTag!.getAttribute('data-wysiwyg-template-editor-bff-base-url')!,
+    antiForgeryHeaderTokenName: appTag!.getAttribute('data-anti-forgery-header-token-name')!,
+    antiForgeryHeaderTokenValue: appTag!.getAttribute('data-anti-forgery-header-token-value')!,
+    antiForgeryFormTokenName: appTag!.getAttribute('data-anti-forgery-form-token-name')!,
+    antiForgeryFormTokenValue: appTag!.getAttribute('data-anti-forgery-form-token-value')!,
+    emailTemplateJson: appTag!.getAttribute('data-email-template-json')!,
+    previewTemplateDataJson: appTag!.getAttribute('data-preview-template-data-json')!,
+    resetTemplateFormUrl: appTag!.getAttribute('data-reset-template-form-url')!,
+    exitLink: appTag!.getAttribute('data-exit-link')!,
+    localeKey: appTag!.getAttribute('data-locale-key') as LocaleKey || 'en'
+};
+
+const _apiMachineFetchFactory = (arg: {
+    baseUrl: string
+}): ApiMachineFetchDelegate => apiMachineFetchFactory({
+    baseUrl: arg.baseUrl,
+    antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+    antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+});
+
+const abandonedBasketMainPageBffClient = createTriggerAbandonedBasketWysiwygTemplateEditorClient(
+    apiMachineFetchFactory({
+        baseUrl: params.wysiwygTemplateEditorBffBaseUrl,
+        antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+        antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+    })
+);
+
+const createFavoriteTemplateBffClient = saveFavoriteTemplate(
+    _apiMachineFetchFactory({
+        baseUrl: params.wysiwygBffProxyBaseUrl
+    })
+);
+
+const resetTemplate = (): void => {
+    const formData = new FormData();
+    formData.append(
+        params.antiForgeryFormTokenName,
+        params.antiForgeryFormTokenValue);
+
+    const form = createSimpleDataForm({
+        method: 'POST',
+        action: params.resetTemplateFormUrl,
+        formData: formData
+    });
+
+    document.body.appendChild(form);
+    form.submit();
+};
+
+let contactCustomData: ContactCustomData = {};
+let nextCouponFromBatch: NextCouponFromBatchType = {
+    BatchId: '',
+};
+
+
+const listExpressionDataSourceBffClient = listExpressionDataSourceBffClientFactory(
+    _apiMachineFetchFactory({
+        baseUrl: params.wysiwygBffProxyBaseUrl
+    })
+);
+
+const listExpressionDataSourceEvaluator = abandonedBasketEvaluateListExpressionDataSourceFactory({
+    partnerId: params.partnerId,
+    listExpressionDataSourceBffClient: listExpressionDataSourceBffClient,
+    customerStockId: undefined
+});
+
+const listExpressionEvaluator = listExpressionEvaluatorFactory({
+    listExpressionDataSourceEvaluator: listExpressionDataSourceEvaluator
+});
+
+const numberExpressionDataSourceEvaluator = abandonedBasketEvaluateNumberExpressionDataSourceFactory();
+
+const numberExpressionEvaluator = numberExpressionEvaluatorDelegate({
+    listExpressionEvaluator: listExpressionEvaluator,
+    numberExpressionDataSourceEvaluator: numberExpressionDataSourceEvaluator
+})
+
+const stringExpressionEvaluator: StringExpressionEvaluatorDelegate<
+    AbandonedBasketListExpressionDataSource,
+    AbandonedBasketNumberExpressionDataSource,
+    AbandonedBasketStringExpressionDataSource
+> = stringExpressionEvaluatorFactory({
+    listExpressionEvaluator: listExpressionEvaluator,
+    numberExpressionEvaluator: numberExpressionEvaluator,
+    stringExpressionDataSourceEvaluatorFactory: () => abandonedBasketStringExpressionDataSourceEvaluatorFactory({
+        productImageUrlBuilderExpressionEvaluator: productImageUrlBuilderExpressionEvaluatorFactory({
+            partnerId: params.partnerId,
+            numberExpressionEvaluator: numberExpressionEvaluator
+        }),
+        contactCustomData: contactCustomData,
+        nextCouponFromBatch: nextCouponFromBatch
+    })
+});
+
+const expressionEvaluator = expressionEvaluatorFactory({
+    listExpressionEvaluator: listExpressionEvaluator,
+    numberExpressionEvaluator: numberExpressionEvaluator,
+    stringExpressionEvaluator: stringExpressionEvaluator,
+    dataStructBuilderExpressionEvaluatorFactory: expressionEvaluator => dataStructBuilderExpressionEvaluatorFactory({
+        expressionEvaluator: expressionEvaluator
+    })
+});
+
+const dataStructExpressionEvaluator = dataStructBuilderExpressionEvaluatorFactory({
+    expressionEvaluator: expressionEvaluator
+});
+
+const app = createApp(
+    EditEmailTemplateApp,
+    {
+        onTemplateReset: () => {
+            resetTemplate();
+        },
+        deps:
+        editEmailTemplateAppDepsFactory<
+            AbandonedBasketListExpressionDataSource,
+            AbandonedBasketNumberExpressionDataSource,
+            AbandonedBasketStringExpressionDataSource
+        >({
+            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: stringExpressionBuilderPluginFactory({
+                            localeKey: params.localeKey
+                        })
+                    })
+                })
+            ],
+            partnerId: params.partnerId,
+            exitLink: params.exitLink,
+            localeKey: params.localeKey,
+            defaultThemeLibrary: defaultThemeLibraryFactory({
+                localeKey: params.localeKey
+            }),
+            defaultComponentLibrary: defaultComponentLibraryFactory({
+                localeKey: params.localeKey
+            }),
+            saveEmailTemplate: async arg => {
+                const result = await abandonedBasketMainPageBffClient
+                    .postSaveTemplate({
+                        body: {
+                            partnerId: params.partnerId,
+                            templateJson: JSON.stringify(arg.emailTemplate)
+                        }
+                    })
+
+                return result.status === 200
+                    ? 'Success'
+                    : 'Fail'
+            },
+            createFavoriteTemplate: async arg => {
+                const result = await createFavoriteTemplateBffClient
+                    .postCreateFavoriteTriggerAbandonedBasketTemplate({
+                        body: {
+                            partnerId: params.partnerId,
+                            templateJson: JSON.stringify(arg.emailTemplate),
+                            favoriteTemplateName: 'Favorite template'
+                        }
+                    });
+
+                return result.status === 200
+                    ? 'Success'
+                    : 'Fail';
+            },
+            listExpressionEvaluator: listExpressionEvaluator,
+            numberExpressionEvaluator: numberExpressionEvaluator,
+            stringExpressionEvaluator: stringExpressionEvaluator,
+            dataStructExpressionEvaluator: dataStructExpressionEvaluator,
+            expressionEvaluator: expressionEvaluator,
+            getComponentLibraryFactory: x => () =>
+                x.getComponentLibraryHttpClient(
+                    {
+                        body: {
+                            partnerId: x.partnerId,
+                            componentTypes: [
+                                { triggerAbandonedBasket: {} },
+                                { common: {} }
+                            ]
+                        }
+                    }
+                )
+                .then(x => abandonedBasketComponentLibraryFactory(x.body.sections)),
+            canProductShelfDataSourceBeConverted: () => false,
+            httpClientComponentFactoryDelegate: (emailComponent): Component => {
+                return {
+                    triggerAbandonedBasket: {
+                        componentJson: JSON.stringify(emailComponent)
+                    }
+                }
+            },
+            stringExpressionBuilderPlugin: stringExpressionBuilderPluginFactory({
+                localeKey: params.localeKey
+            }),
+            emailComponentSettingsModifierPlugin: productShelfDataSourceExpressionBuilderPluginFactory({
+                productShelfDataSourceExpressionBuilderComponent: AbandonedBasketProductShelfDataSourceExpressionBuilder,
+                deps: abandonedBasketProductShelfDataSourceExpressionBuilderDepsFactory({
+                    localeKey: params.localeKey,
+                    partnerId: params.partnerId,
+                    customerStockId: 'customerStockId',
+                    productShelfBuilderModalWindowBffClient: createProductShelfBuilderModalWindowBffClient(
+                        apiMachineFetchFactory({
+                            baseUrl: params.wysiwygBffProxyBaseUrl,
+                            antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+                            antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+                        })
+                    ),
+                    productCategoryPickerModalWindowBffClient: createProductCategoryPickerModalWindowBffClient(
+                        apiMachineFetchFactory({
+                            baseUrl: params.wysiwygBffProxyBaseUrl,
+                            antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+                            antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+                        })
+                    ),
+                    productPickerModalWindowBffClient: createProductPickerModalWindowBffClient(
+                        apiMachineFetchFactory({
+                            baseUrl: params.wysiwygBffProxyBaseUrl,
+                            antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+                            antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+                        })
+                    )
+                })
+            }),
+            initialEmailTemplate: JSON.parse(params.emailTemplateJson),
+            wysiwygTemplateEditorBffClient: wysiwygTemplateEditorBffClientFactory({
+                themeLibraryBffClient: createThemeLibraryBffClient(
+                    apiMachineFetchFactory({
+                        baseUrl: params.wysiwygBffProxyBaseUrl,
+                        antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+                        antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+                    })
+                ),
+                componentLibraryBffClient: createComponentLibraryBffClient(
+                    apiMachineFetchFactory({
+                        baseUrl: params.wysiwygBffProxyBaseUrl,
+                        antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+                        antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+                    })
+                )
+            }),
+            addThemeLibrarySectionItemModalWindowBffClient: createAddThemeLibrarySectionItemModalWindowBffClient(
+                apiMachineFetchFactory({
+                    baseUrl: params.wysiwygBffProxyBaseUrl,
+                    antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+                    antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+                })
+            ),
+            addComponentLibrarySectionItemModalWindowBffClient: createAddComponentLibrarySectionItemModalWindowBffClient(
+                apiMachineFetchFactory({
+                    baseUrl: params.wysiwygBffProxyBaseUrl,
+                    antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+                    antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+                })
+            ),
+            deleteThemeLibrarySectionItemModalWindowBffClient: createDeleteThemeLibrarySectionItemModalWindowBffClient(
+                apiMachineFetchFactory({
+                    baseUrl: params.wysiwygBffProxyBaseUrl,
+                    antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+                    antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+                })
+            ),
+            deleteThemeLibrarySectionModalWindowBffClient: createDeleteThemeLibrarySectionModalWindowBffClient(
+                apiMachineFetchFactory({
+                    baseUrl: params.wysiwygBffProxyBaseUrl,
+                    antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+                    antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+                })
+            ),
+            editThemeLibrarySectionItemModalWindowBffClient: createEditThemeLibrarySectionItemModalWindowBffClient(
+                apiMachineFetchFactory({
+                    baseUrl: params.wysiwygBffProxyBaseUrl,
+                    antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+                    antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+                })
+            ),
+            createComponentLibrarySectionModalWindowBffClient: createAddComponentLibrarySectionModalWindowBffClient(
+                apiMachineFetchFactory({
+                    baseUrl: params.wysiwygBffProxyBaseUrl,
+                    antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+                    antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+                })
+            ),
+            editComponentLibrarySectionItemModalWindowBffClient: createEditComponentLibrarySectionItemModalWindowBffClient(
+                apiMachineFetchFactory({
+                    baseUrl: params.wysiwygBffProxyBaseUrl,
+                    antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+                    antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+                })
+            ),
+            deleteComponentLibrarySectionItemModalWindowBffClient: createDeleteComponentLibrarySectionItemModalWindowBffClient(
+                apiMachineFetchFactory({
+                    baseUrl: params.wysiwygBffProxyBaseUrl,
+                    antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+                    antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+                })
+            ),
+            createThemeLibrarySectionModalWindowBffClient: createThemeLibrarySectionModalWindowBffClient(
+                apiMachineFetchFactory({
+                    baseUrl: params.wysiwygBffProxyBaseUrl,
+                    antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+                    antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+                })
+            ),
+            deleteComponentLibrarySectionModalWindowBffClient: createDeleteComponentLibrarySectionModalWindowBffClient(
+                apiMachineFetchFactory({
+                    baseUrl: params.wysiwygBffProxyBaseUrl,
+                    antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
+                    antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
+                })
+            )
+        })
+    }
+);
+
+app.use(createVuetify({
+    theme: false,
+    directives: {
+        ClickOutside
+    }
+}));
+
+app.mount(appTagId);

package/src/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CreateComponentLibrarySectionModalWindow/abandonedBasketComponentSectionItemFactory.ts

@@ -0,0 +1,32 @@
+import type {
+    ComponentLibrarySectionItem,
+} from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.componentlibrary/main';
+import type {
+    CustomComponentSectionItemType
+} from '@easy-wizzy/core';
+import type {
+    AbandonedBasketListExpressionDataSource
+} from '@easy-wizzy/retailrocket-abandoned-basket';
+import type {
+    AbandonedBasketNumberExpressionDataSource
+} from '@easy-wizzy/retailrocket-abandoned-basket';
+import type {
+    AbandonedBasketStringExpressionDataSource
+} from '@easy-wizzy/retailrocket-abandoned-basket';
+import {
+    abandonedBasketEmailComponentFactory
+} from '@/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CreateComponentLibrarySectionModalWindow/abandonedBasketEmailComponentFactory';
+
+export const abandonedBasketComponentSectionItemFactory = (
+    componentLibrarySectionItem: ComponentLibrarySectionItem,
+): CustomComponentSectionItemType<
+    AbandonedBasketListExpressionDataSource,
+    AbandonedBasketNumberExpressionDataSource,
+    AbandonedBasketStringExpressionDataSource
+> => {
+    return {
+        sectionItemId: componentLibrarySectionItem.sectionItemId,
+        sectionItemName: componentLibrarySectionItem.sectionItemName,
+        componentTemplate: abandonedBasketEmailComponentFactory(componentLibrarySectionItem.component),
+    };
+};

package/src/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CreateComponentLibrarySectionModalWindow/abandonedBasketEmailComponentFactory.ts

@@ -0,0 +1,26 @@
+import type { EmailComponentType } from '@easy-wizzy/core';
+import type {
+    Component,
+} from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.addcomponentlibrarysectionitemmodalwindow/main';
+import type {
+    AbandonedBasketListExpressionDataSource
+} from '@easy-wizzy/retailrocket-abandoned-basket';
+import type {
+    AbandonedBasketNumberExpressionDataSource
+} from '@easy-wizzy/retailrocket-abandoned-basket';
+import type {
+    AbandonedBasketStringExpressionDataSource
+} from '@easy-wizzy/retailrocket-abandoned-basket';
+
+export const abandonedBasketEmailComponentFactory = (
+    component: Component
+): EmailComponentType<
+    AbandonedBasketListExpressionDataSource,
+    AbandonedBasketNumberExpressionDataSource,
+    AbandonedBasketStringExpressionDataSource
+> =>
+{
+    return component.triggerAbandonedBasket
+        ? JSON.parse(component.triggerAbandonedBasket.componentJson)
+        : JSON.parse(component.common!.componentJson)
+}

package/src/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CustomComponentLibrary/abandonedBasketComponentLibraryFactory.ts

@@ -0,0 +1,29 @@
+import type {
+    ComponentLibrarySection
+} from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.componentlibrary/main';
+import type {
+    CustomComponentLibraryType,
+} from '@easy-wizzy/core';
+import type {
+    AbandonedBasketListExpressionDataSource
+} from '@easy-wizzy/retailrocket-abandoned-basket';
+import type {
+    AbandonedBasketNumberExpressionDataSource
+} from '@easy-wizzy/retailrocket-abandoned-basket';
+import type {
+    AbandonedBasketStringExpressionDataSource
+} from '@easy-wizzy/retailrocket-abandoned-basket';
+import {
+    abandonedBasketSectionFactory
+} from '@/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CustomComponentLibrary/abandonedBasketSectionFactory';
+
+export const abandonedBasketComponentLibraryFactory = (
+    componentLibrary: Array<ComponentLibrarySection>
+): CustomComponentLibraryType<
+    AbandonedBasketListExpressionDataSource,
+    AbandonedBasketNumberExpressionDataSource,
+    AbandonedBasketStringExpressionDataSource
+> => {
+    return componentLibrary
+        .map(section => abandonedBasketSectionFactory(section))
+}

package/src/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CustomComponentLibrary/abandonedBasketSectionFactory.ts

@@ -0,0 +1,34 @@
+import type {
+    ComponentLibrarySection,
+} from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.componentlibrary/main';
+import type {
+    CustomComponentSectionType
+} from '@easy-wizzy/core';
+import type {
+    AbandonedBasketListExpressionDataSource
+} from '@easy-wizzy/retailrocket-abandoned-basket';
+import type {
+    AbandonedBasketNumberExpressionDataSource
+} from '@easy-wizzy/retailrocket-abandoned-basket';
+import type {
+    AbandonedBasketStringExpressionDataSource
+} from '@easy-wizzy/retailrocket-abandoned-basket';
+import {
+    abandonedBasketComponentSectionItemFactory
+} from '@/implementation/Apps/components/WysiwygTemplateEditor/AsideMenu/ComponentLibrary/CreateComponentLibrarySectionModalWindow/abandonedBasketComponentSectionItemFactory';
+
+export const abandonedBasketSectionFactory = (
+    section: ComponentLibrarySection,
+): CustomComponentSectionType<
+    AbandonedBasketListExpressionDataSource,
+    AbandonedBasketNumberExpressionDataSource,
+    AbandonedBasketStringExpressionDataSource
+> => {
+    return {
+        sectionId: section.sectionId,
+        sectionName: section.sectionName,
+        componentList: section
+            .sectionItems
+            .map(component => abandonedBasketComponentSectionItemFactory(component)),
+    };
+};

package/src/implementation/DataSources/ListDataExpressionSource/abandonedBasketEvaluateListExpressionDataSourceFactory.ts

@@ -0,0 +1,132 @@
+import type { DataListType } from '@easy-wizzy/core';
+import type { ListExpressionDataSourceBffClient } from '@easy-wizzy/common-app';
+import type { ListExpressionDataSourceEvaluatorDelegate } from '@easy-wizzy/core';
+import { getPopularProducts } from '@easy-wizzy/common-app';
+import { stockIdFactory } from '@easy-wizzy/common-app';
+import type { AbandonedBasketListExpressionDataSource } from '@easy-wizzy/retailrocket-abandoned-basket';
+import { abandonedBasketListExpressionDataSourceMatcher } from '@easy-wizzy/retailrocket-abandoned-basket';
+import { getProductList } from '@easy-wizzy/common-app';
+import { getRelatedProducts } from '@easy-wizzy/common-app';
+import { getAlternativeProducts } from '@easy-wizzy/common-app';
+import { getPopularProductsInCategories } from '@easy-wizzy/common-app';
+import type { Product } from '@retailrocket/retailrocket.wysiwyg.bff.v2.apiclients.listexpressiondatasource';
+import { getLatestProducts } from '@easy-wizzy/common-app';
+import { getSaleByPopularProducts } from '@easy-wizzy/common-app';
+import { getSaleByLatestProducts } from '@easy-wizzy/common-app';
+import { getSampleProductsForPreview } from '@easy-wizzy/common-app';
+
+export const abandonedBasketEvaluateListExpressionDataSourceFactory = (arg: {
+    partnerId: string;
+    listExpressionDataSourceBffClient: ListExpressionDataSourceBffClient;
+    customerStockId: string | undefined;
+}): ListExpressionDataSourceEvaluatorDelegate<AbandonedBasketListExpressionDataSource> => {
+    let productCache: { [key: string]: Product } = {};
+
+    return (asyncDataSource: AbandonedBasketListExpressionDataSource) =>
+        abandonedBasketListExpressionDataSourceMatcher(asyncDataSource).Match<Promise<DataListType>>({
+            AbandonedBasketProductList: ({ StockSource }) =>
+                getSampleProductsForPreview({
+                    partnerId: arg.partnerId,
+                    stockId: stockIdFactory({
+                        stockSource: StockSource,
+                        customerStockId: arg.customerStockId,
+                    }),
+                    getSampleProductsForPreviewHttpClient: arg.listExpressionDataSourceBffClient.postGetSampleProductsForPreview,
+                }),
+            RelatedProductsForAbandonedBasketProductList: ({ StockSource }) =>
+                getSampleProductsForPreview({
+                    partnerId: arg.partnerId,
+                    stockId: stockIdFactory({
+                        stockSource: StockSource,
+                        customerStockId: arg.customerStockId,
+                    }),
+                    getSampleProductsForPreviewHttpClient: arg.listExpressionDataSourceBffClient.postGetSampleProductsForPreview,
+                }),
+            AlternativeProductsForAbandonedBasketProductList: ({ StockSource }) =>
+                getSampleProductsForPreview({
+                    partnerId: arg.partnerId,
+                    stockId: stockIdFactory({
+                        stockSource: StockSource,
+                        customerStockId: arg.customerStockId,
+                    }),
+                    getSampleProductsForPreviewHttpClient: arg.listExpressionDataSourceBffClient.postGetSampleProductsForPreview,
+                }),
+            ProductList: ({ ProductIds, StockSource }) =>
+                getProductList({
+                    partnerId: arg.partnerId,
+                    productIDs: ProductIds,
+                    stockId: stockIdFactory({
+                        stockSource: StockSource,
+                        customerStockId: arg.customerStockId,
+                    }),
+                    productCache: productCache,
+                    getProductsByIDsHttpClient: arg.listExpressionDataSourceBffClient.postGetProductsByIds,
+                }),
+            RelatedProductsFor: ({ ProductIds, StockSource }) =>
+                getRelatedProducts({
+                    partnerId: arg.partnerId,
+                    productIDs: ProductIds,
+                    stockId: stockIdFactory({
+                        stockSource: StockSource,
+                        customerStockId: arg.customerStockId
+                    }),
+                    getRelatedProducts: arg.listExpressionDataSourceBffClient.postGetRelatedRecommendations,
+                }),
+            AlternativeProductsFor: ({ ProductIds, StockSource }) =>
+                getAlternativeProducts({
+                    partnerId: arg.partnerId,
+                    productIDs: ProductIds,
+                    stockId: stockIdFactory({
+                        stockSource: StockSource,
+                        customerStockId: arg.customerStockId,
+                    }),
+                    getAlternativeProductsHttpClient: arg.listExpressionDataSourceBffClient.postGetAlternativeRecommendations,
+                }),
+            PopularProductsInCategories: ({ CategoryIds, StockSource }) =>
+                getPopularProductsInCategories({
+                    partnerId: arg.partnerId,
+                    categoryIds: CategoryIds,
+                    stockId: stockIdFactory({
+                        stockSource: StockSource,
+                        customerStockId: arg.customerStockId,
+                    }),
+                    getPopularProductsInCategoriesHttpClient: arg.listExpressionDataSourceBffClient.postGetPopularInCategoriesRecommendations,
+                }),
+            Popular: ({ StockSource }) =>
+                getPopularProducts({
+                    partnerId: arg.partnerId,
+                    stockId: stockIdFactory({
+                        stockSource: StockSource,
+                        customerStockId: arg.customerStockId,
+                    }),
+                    getPopularProductsHttpClient: arg.listExpressionDataSourceBffClient.postGetPopularRecommendations,
+                }),
+            Latest: ({ StockSource }) =>
+                getLatestProducts({
+                    partnerId: arg.partnerId,
+                    stockId: stockIdFactory({
+                        stockSource: StockSource,
+                        customerStockId: arg.customerStockId,
+                    }),
+                    getLatestProductsHttpClient: arg.listExpressionDataSourceBffClient.postGetLatestRecommendations,
+                }),
+            SaleByPopular: ({ StockSource }) =>
+                getSaleByPopularProducts({
+                    partnerId: arg.partnerId,
+                    stockId: stockIdFactory({
+                        stockSource: StockSource,
+                        customerStockId: arg.customerStockId,
+                    }),
+                    getSaleByPopularProductsHttpClient: arg.listExpressionDataSourceBffClient.postGetSaleByPopularRecommendations,
+                }),
+            SaleByLatest: ({ StockSource }) =>
+                getSaleByLatestProducts({
+                    partnerId: arg.partnerId,
+                    stockId: stockIdFactory({
+                        stockSource: StockSource,
+                        customerStockId: arg.customerStockId,
+                    }),
+                    getSaleByLatestProductsHttpClient: arg.listExpressionDataSourceBffClient.postGetSaleByLatestRecommendations,
+                }),
+        });
+};