@capillarytech/creatives-library 7.17.214 → 7.17.216

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.214",
+  "version": "7.17.216",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/tagValidations.js

@@ -17,10 +17,11 @@ const SUBTAGS = 'subtags';
  * @param {Object} response - The response object to check.
  * @param {Object} tagObject - The tagLookupMap.
  */
-export const checkSupport = (response = {}, tagObject = {}) => {
+export const checkSupport = (response = {}, tagObject = {}, eventContextTags = []) => {
   const supportedList = [];
   // Verifies the presence of the tag in the 'Add Labels' section.
-  const checkNameInTagObject = (name) => !!tagObject[name];
+  // Incase of journey event context the tags won't be available in the tagObject(tagLookupMap).
+  const checkNameInTagObjectOrEventContext = (name) => !!tagObject[name] || eventContextTags?.some((tag) => tag?.tagName === name);
 
   // Verify if childTag is a valid sub-tag of parentTag from the 'Add Labels' section or if it's unsupported.
   const checkSubtags = (parentTag, childName) => {
@@ -47,7 +48,7 @@ export const checkSupport = (response = {}, tagObject = {}) => {
 
   //Checks if the tag is present in the Add Label Section
   for (const item of response?.data || []) {
-    if (checkNameInTagObject(item?.name)) {
+    if (checkNameInTagObjectOrEventContext(item?.name)) {
       supportedList?.push(item?.name);
     }
     //Repeat the process for subtags
@@ -93,6 +94,7 @@ export const validateTags = ({
   injectedTagsParams,
   location,
   tagModule,
+  eventContextTags,
 }) => {
   const tags = tagsParam;
   const injectedTags = transformInjectedTags(injectedTagsParams);
@@ -145,6 +147,12 @@ export const validateTags = ({
           }
         }
       }
+      // Journey Event Context Tags support
+      eventContextTags?.forEach((tag) => {
+        if (tagValue === tag?.tagName) {
+          ifSupported = true;
+        }
+      });
       ifSupported = ifSupported || checkIfSupportedTag(tagValue, injectedTags);
       if (!ifSupported) {
         response.unsupportedTags.push(tagValue);

package/utils/tests/tagValidations.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import '@testing-library/jest-dom';
 import { checkSupport, extractNames, getTagMapValue, preprocessHtml, validateIfTagClosed,validateTags} from '../tagValidations';
+import { eventContextTags } from '../../v2Containers/TagList/tests/mockdata';
 
 describe("check if curly brackets are balanced", () => {
     it("test for balanced curly brackets", () => {
@@ -50,7 +51,7 @@ describe("validateTags", () => {
     },
   ];
   it("should return valid response when all tags are present", () => {
-    const content = "Hello {{tag1}}, {{tag2}}, {{tag3}}";
+    const content = "Hello {{tag1}}, {{tag2}}, {{tag3}} {{lifetimePurchases}}";
 
     const injectedTagsParams = [];
     const location = { query: { module: "DEFAULT" } };
@@ -62,6 +63,7 @@ describe("validateTags", () => {
       injectedTagsParams,
       location,
       tagModule,
+      eventContextTags,
     });
 
     expect(result.valid).toEqual(true);
@@ -96,7 +98,7 @@ describe("validateTags", () => {
   });
 
   it("should return invalid response when an unsupported tag is present", () => {
-    const content = "Hello {{tag1}}, {{tag2}}, {{tag3}}";
+    const content = "Hello {{tag1}}, {{tag2}}, {{tag3}} {{missingEventContextTags}}";
     const tagsParam = [
       {
         definition: {
@@ -125,7 +127,7 @@ describe("validateTags", () => {
 
     expect(result.valid).toEqual(true);
     expect(result.missingTags).toEqual([]);
-    expect(result.unsupportedTags).toEqual(["tag3"]);
+    expect(result.unsupportedTags).toEqual(["tag3", "missingEventContextTags"]);
     expect(result.isBraceError).toEqual(false);
   });
 
@@ -272,6 +274,15 @@ describe("checkSupport", () => {
     expect(result).toEqual([]);
   });
 
+  it("should return event context tags even if tagObject is empty", () => {
+    const response = {
+      data: [{ name: "tag1" }, { name: "lifetimePurchases" }],
+    };
+    const tagObject = {};
+    const result = checkSupport(response, tagObject, eventContextTags);
+    expect(result).toEqual(['lifetimePurchases']);
+  });
+
   it("should return an array of supported tags", () => {
     const response = {
       data: [{ name: "tag1" }, { name: "tag2" }, { name: "tag3" }],

package/v2Components/FormBuilder/index.js

@@ -1120,7 +1120,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             // Extracts the supported liquid tags from the given content.
             const supportedLiquidTags = checkSupport(
               result,
-              this.props?.metaEntities?.tagLookupMap
+              this.props?.metaEntities?.tagLookupMap,
+              this.props?.eventContextTags
             );
             const unsupportedLiquidTags = extractedLiquidTags?.filter(
               (tag) => !supportedLiquidTags?.includes(tag) && !this.skipTags(tag)
@@ -1283,6 +1284,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }
           }
         }
+
+        // Event Context Tags support
+        this.props?.eventContextTags?.forEach((tag) => {
+          if (tagValue === tag?.tagName) {
+            ifSupported = true;
+          }
+        });
+
         ifSupported = ifSupported || this.checkIfSupportedTag(tagValue, injectedTags);
         if (!ifSupported && !this.liquidFlow) {
           response.unsupportedTags.push(tagValue);
@@ -2610,6 +2619,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 id={val.id}
                 userLocale={this.props.userLocale}
                 selectedOfferDetails={this.props.selectedOfferDetails}
+                eventContextTags={this.props?.eventContextTags}
               />
             </CapColumn>
           );
@@ -3231,6 +3241,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     userLocale={this.state.translationLang}
                     selectedOfferDetails={this.props.selectedOfferDetails}
                     channel={channel}
+                    eventContextTags={this.props?.eventContextTags}
                   />
                 </CapColumn>
               );
@@ -3505,6 +3516,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   saveBeeData={this.props.saveBeeData}
                   onContextChange={this.props.onContextChange}
                   moduleFilterEnabled={isModuleFilterEnabled}
+                  eventContextTags={this.props?.eventContextTags}
                 />
               </CapColumn>
             );

package/v2Containers/BeeEditor/index.js

@@ -48,6 +48,7 @@ function BeeEditor(props) {
     actions,
     BEESelect,
     currentOrgDetails,
+    eventContextTags,
   } = props;
   const { saveRowRequest } = BEESelect;
   const {formatMessage} = intl;
@@ -280,6 +281,7 @@ function BeeEditor(props) {
             className: "bee-editor-tag-list",
           }}
           onContextChange={onContextChange}
+          eventContextTags={eventContextTags}
         />
         <CapModal
           className="custom-row-modal"
@@ -323,6 +325,7 @@ BeeEditor.propTypes = {
   injectedTags: PropTypes.object,
   onContextChange: PropTypes.func,
   userLocale: PropTypes.string,
+  eventContextTags: PropTypes.array,
 };
 
 const mapStateToProps = () => createStructuredSelector({

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -156,6 +156,7 @@ export function SlideBoxContent(props) {
       showLiquidErrorInFooter,
       creativesMode,
       hostName = '',
+      eventContextTags,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -396,6 +397,7 @@ export function SlideBoxContent(props) {
     onCreateComplete,
     selectedOfferDetails,
     getFormData,
+    eventContextTags,
   };
 
   return (
@@ -430,6 +432,7 @@ export function SlideBoxContent(props) {
         smsRegister={smsRegister}
         enableNewChannels={enableNewChannels}
         hideTestAndPreviewBtn={hideTestAndPreviewBtn}
+        eventContextTags={eventContextTags}
         />
       )}
       {isPreview && (
@@ -509,6 +512,7 @@ export function SlideBoxContent(props) {
           handleClose={handleClose}
           onCreateComplete={onCreateComplete}
           smsRegister={smsRegister}
+          eventContextTags={eventContextTags}
         />
       )}
       {isEditFTP && (
@@ -545,6 +549,7 @@ export function SlideBoxContent(props) {
             search: '',
           }}
           hostName={hostName}
+          eventContextTags={eventContextTags}
         />
       }
       {
@@ -575,6 +580,7 @@ export function SlideBoxContent(props) {
         onCreateComplete={onCreateComplete}
         smsRegister={smsRegister}
         onShowTemplates={onShowTemplates}
+        eventContextTags={eventContextTags}
       />
         )}
 
@@ -606,6 +612,7 @@ export function SlideBoxContent(props) {
         getCmsTemplatesInProgress={getCmsTemplatesInProgress}
         moduleType={moduleType}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
+        eventContextTags={eventContextTags}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -634,6 +641,7 @@ export function SlideBoxContent(props) {
         onTestContentClicked={onTestContentClicked}
         moduleType={moduleType}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
+        eventContextTags={eventContextTags}
       />
         )}
       {isEditMPush &&
@@ -659,35 +667,38 @@ export function SlideBoxContent(props) {
           type={type}
           hideTestAndPreviewBtn={hideTestAndPreviewBtn}
           creativesMode={creativesMode}
+          eventContextTags={eventContextTags}
         />
         }
       {isCreateMPush &&
-      <MobilepushWrapper
-        key="creatives-mobilepush-wrapper"
-        date={new Date().getMilliseconds()}
-        setIsLoadingContent={setIsLoadingContent}
-        onMobilepushModeChange={onMobilepushModeChange}
-        mobilePushCreateMode={mobilePushCreateMode}
-        isGetFormData={isGetFormData}
-        getFormData={getFormData}
-        templateData={templateData}
-        type={type}
-        step={templateStep}
-        showNextStep={onCreateNextStep}
-        isFullMode={isFullMode}
-        onEnterTemplateName={onEnterTemplateName}
-        onRemoveTemplateName={onRemoveTemplateName}
-        cap={cap}
-        onResetStep={onResetStep}
-        showTemplateName={showTemplateName}
-        query={query}
-        forwardedTags={forwardedTags}
-        onValidationFail={onValidationFail}
-        selectedOfferDetails={selectedOfferDetails}
-        onPreviewContentClicked={onPreviewContentClicked}
-        hideTestAndPreviewBtn={hideTestAndPreviewBtn}
-        onTestContentClicked={onTestContentClicked}/>
-        }
+        <MobilepushWrapper
+          key="creatives-mobilepush-wrapper"
+          date={new Date().getMilliseconds()}
+          setIsLoadingContent={setIsLoadingContent}
+          onMobilepushModeChange={onMobilepushModeChange}
+          mobilePushCreateMode={mobilePushCreateMode}
+          isGetFormData={isGetFormData}
+          getFormData={getFormData}
+          templateData={templateData}
+          type={type}
+          step={templateStep}
+          showNextStep={onCreateNextStep}
+          isFullMode={isFullMode}
+          onEnterTemplateName={onEnterTemplateName}
+          onRemoveTemplateName={onRemoveTemplateName}
+          cap={cap}
+          onResetStep={onResetStep}
+          showTemplateName={showTemplateName}
+          query={query}
+          forwardedTags={forwardedTags}
+          onValidationFail={onValidationFail}
+          selectedOfferDetails={selectedOfferDetails}
+          onPreviewContentClicked={onPreviewContentClicked}
+          hideTestAndPreviewBtn={hideTestAndPreviewBtn}
+          onTestContentClicked={onTestContentClicked}
+          eventContextTags={eventContextTags}
+        />
+      }
       {
         isCreateFacebook && (
           <Facebook
@@ -704,6 +715,7 @@ export function SlideBoxContent(props) {
             fbAdManager={fbAdManager}
             onSelectTemplate={onSelectTemplate}
             orgUnitId={orgUnitId}
+            eventContextTags={eventContextTags}
           />
         )
       }
@@ -723,6 +735,7 @@ export function SlideBoxContent(props) {
             getFormSubscriptionData={getFormData}
             fbAdManager={fbAdManager}
             onSelectTemplate={onSelectTemplate}
+            eventContextTags={eventContextTags}
           />
         )
       }
@@ -744,6 +757,7 @@ export function SlideBoxContent(props) {
             selectedAccount={selectedAccount}
             handleClose={handleClose}
             selectedOfferDetails={selectedOfferDetails}
+            eventContextTags={eventContextTags}
           />
         )
       }
@@ -762,6 +776,7 @@ export function SlideBoxContent(props) {
             createNew
             handleClose={handleClose}
             selectedOfferDetails={selectedOfferDetails}
+            eventContextTags={eventContextTags}
           />
         )
       }
@@ -776,6 +791,7 @@ export function SlideBoxContent(props) {
           onShowTemplates={onShowTemplates}
           templateData={templateData}
           selectedOfferDetails={selectedOfferDetails}
+          eventContextTags={eventContextTags}
           createNew/>
       )}
 
@@ -792,11 +808,13 @@ export function SlideBoxContent(props) {
         onShowTemplates={onShowTemplates}
         templateData={templateData}
         selectedOfferDetails={selectedOfferDetails}
+        eventContextTags={eventContextTags}
         createNew/> }
 
       {isCreateWhatsapp && (<Whatsapp
         isFullMode={isFullMode}
         onCreateComplete={onCreateComplete}
+        eventContextTags={eventContextTags}
         handleClose={handleClose}/>
       )}
 
@@ -807,6 +825,7 @@ export function SlideBoxContent(props) {
         getDefaultTags={type}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
+        eventContextTags={eventContextTags}
         params={{
           id: templateData._id,
         }}
@@ -830,6 +849,7 @@ export function SlideBoxContent(props) {
         isGetFormData={isGetFormData}
         templateData={templateData}
         getDefaultTags={type}
+        eventContextTags={eventContextTags}
       />
       )}
 
@@ -841,6 +861,7 @@ export function SlideBoxContent(props) {
         forwardedTags={forwardedTags}
         onCreateComplete={onCreateComplete}
         selectedOfferDetails={selectedOfferDetails}
+        eventContextTags={eventContextTags}
         params={{
           id: templateData._id,
         }}

package/v2Containers/CreativesContainer/index.js

@@ -1213,6 +1213,7 @@ export class Creatives extends React.Component {
       editor,
       smsRegister,
       enableNewChannels,
+      eventContextTags,
     } = this.props;
     const mapTemplateCreate =
       slidBoxContent === "createTemplate" &&
@@ -1314,6 +1315,7 @@ export class Creatives extends React.Component {
               showLiquidErrorInFooter={this.showLiquidErrorInFooter}
               creativesMode={creativesMode} // An existing prop that we're using here. Required to ensure correct account details in Edit or Preview in case of Embedded mode.
               hostName={this.props?.hostName || ''}
+              eventContextTags={eventContextTags}
           />
           }
           footer={this.shouldShowFooter() &&
@@ -1373,6 +1375,7 @@ Creatives.propTypes = {
   strategy: PropTypes.string,
   orgUnitId: PropTypes.number,
   hostName: PropTypes.string,
+  eventContextTags: PropTypes.array,
 };
 const mapStatesToProps = () => createStructuredSelector({
   isLoading: isLoadingSelector(),

package/v2Containers/Email/index.js

@@ -2733,6 +2733,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   isEmailLoading={isLoading}
                   moduleType={moduleType}
                   showLiquidErrorInFooter={this.props.showLiquidErrorInFooter}
+                  eventContextTags={this.props?.eventContextTags}
               /> : ''}
             </Col>
           </Row>

package/v2Containers/EmailWrapper/index.js

@@ -215,6 +215,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       currentOrgDetails,
       moduleType,
       showLiquidErrorInFooter,
+      eventContextTags,
     } = this.props;
     const {
       templateName,
@@ -287,6 +288,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                 onTestContentClicked={onTestContentClicked}
                 editor={editor}
                 moduleType={moduleType}
+                eventContextTags={eventContextTags}
               />}
               {!isShowEmailCreate && (
                 <CmsTemplatesComponent
@@ -332,6 +334,7 @@ EmailWrapper.propTypes = {
   moduleType: PropTypes.string,
   onEnterTemplateName: PropTypes.func,
   onRemoveTemplateName: PropTypes.func,
+  eventContextTags: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/MobilePush/Create/index.js

@@ -1804,6 +1804,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 templateData={this.props.templateData}
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
+                eventContextTags={this.props?.eventContextTags}
               />
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&
@@ -1895,6 +1896,7 @@ Create.propTypes = {
   getFormLibraryData: PropTypes.func,
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
+  eventContextTags: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/MobilePush/Edit/index.js

@@ -1951,6 +1951,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 templateData={this.props.templateData}
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
+                eventContextTags={this.props?.eventContextTags}
               />}
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&
@@ -2046,6 +2047,7 @@ Edit.propTypes = {
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
   creativesMode: PropTypes.string,
+  eventContextTags: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/MobilepushWrapper/index.js

@@ -72,7 +72,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
   }
 
   render() {
-    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData} = this.props;
+    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData, eventContextTags = []} = this.props;
     const {templateName} = this.state;
     const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
     return (
@@ -119,6 +119,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
               onTestContentClicked={onTestContentClicked}
               templateData={templateData}
               hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
+              eventContextTags={eventContextTags}
           />
 
 
@@ -144,6 +145,7 @@ MobilepushWrapper.propTypes = {
   showTemplateName: PropTypes.func,
   type: PropTypes.string,
   onValidationFail: PropTypes.func,
+  eventContextTags: PropTypes.array,
 };
 
 

package/v2Containers/Sms/Create/index.js

@@ -989,6 +989,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 selectedOfferDetails={this.props.selectedOfferDetails}
                 onTestContentClicked={this.props.onTestContentClicked}
                 onPreviewContentClicked={this.props.onPreviewContentClicked}
+                eventContextTags={this.props?.eventContextTags}
               />
             </CapColumn>
           </CapRow>
@@ -1015,6 +1016,7 @@ Create.propTypes = {
   getFormSubscriptionData: PropTypes.func,
   isLoadingMetaEntities: PropTypes.bool,
   selectedOfferDetails: PropTypes.array,
+  eventContextTags: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Sms/Edit/index.js

@@ -987,6 +987,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 selectedOfferDetails={this.props.selectedOfferDetails}
                 onPreviewContentClicked={this.props.onPreviewContentClicked}
                 onTestContentClicked={this.props.onTestContentClicked}
+                eventContextTags={this.props?.eventContextTags}
               />
             </CapColumn>
           </CapRow>
@@ -1016,6 +1017,7 @@ Edit.propTypes = {
   // route: PropTypes.object,
   injectedTags: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
+  eventContextTags: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/SmsTrai/Edit/index.js

@@ -71,6 +71,7 @@ export const SmsTraiEdit = (props) => {
     getFormSubscriptionData,
     templateData = {},
     selectedOfferDetails,
+    eventContextTags,
   } = props || {};
   const { formatMessage } = intl;
   const [loading, updateLoading] = useState(true);
@@ -226,6 +227,7 @@ export const SmsTraiEdit = (props) => {
           injectedTagsParams: injectedTags,
           location,
           tagModule: getDefaultTags,
+          eventContextTags,
         }) || {};
       updateIsTagValidationError(
         tagValidationResponse.unsupportedTags.length > 0,
@@ -569,6 +571,7 @@ export const SmsTraiEdit = (props) => {
                     injectedTags={injectedTags || {}}
                     hidePopover={disablehandler()}
                     selectedOfferDetails={selectedOfferDetails}
+                    eventContextTags={eventContextTags}
                   />
                 }
               />

package/v2Containers/SmsWrapper/index.js

@@ -29,6 +29,7 @@ const SmsWrapper = (props) => {
     handleClose,
     smsRegister,
     onShowTemplates,
+    eventContextTags,
   } = props;
 
   const smsProps = {
@@ -44,6 +45,7 @@ const SmsWrapper = (props) => {
     selectedOfferDetails,
     onPreviewContentClicked,
     onTestContentClicked,
+    eventContextTags,
   };
   const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
   return <>

package/v2Containers/TagList/index.js

@@ -22,6 +22,7 @@ import './_tagList.scss';
 import { selectCurrentOrgDetails, makeSelectFetchingSchemaError } from '../Cap/selectors';
 import { injectIntl } from 'react-intl';
 import { scope } from './messages';
+import messages from './messages';
 import { handleInjectedData, hasGiftVoucherFeature, hasPromoFeature, hasBadgesFeature, transformBadgeTags } from '../../utils/common';
 import { GIFT_VOUCHER_RELATED_TAGS, PROMO_ENGINE_RELATED_TAGS, BADGES_RELATED_TAGS, BADGES_ENROLL, BADGES_ISSUE } from '../../containers/App/constants';
 
@@ -83,7 +84,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
   generateTags = (props) => {
     let tags = {};
     let injectedTags = {};
-    const {selectedOfferDetails } = props;
+    const eventContextTagsObj = {};
+
+    const {selectedOfferDetails, eventContextTags } = props;
     if (props.injectedTags && !_.isEmpty(props.injectedTags)) {
       const formattedInjectedTags = handleInjectedData(
         props.injectedTags,
@@ -101,7 +104,27 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
         this.transformCouponTags(selectedOfferDetails, tags);
       }
     }
-    this.setState({tags: _.merge( {}, tags, injectedTags)});
+    if (eventContextTags?.length) {
+      const TAG_HEADER_MSG_LABEL = this.props.intl.formatMessage(messages.tagsBasedOnEntryTriggerEvent);
+      eventContextTagsObj.EventContextTags = {
+        name: TAG_HEADER_MSG_LABEL,
+        desc: TAG_HEADER_MSG_LABEL,
+        resolved: true,
+        'tag-header': true,
+        subtags: {},
+      };
+      // Journey event context tags also should be displayed in the Add Labels.
+      eventContextTags.forEach((tag) => {
+        if (tag?.tagName) {
+          eventContextTagsObj.EventContextTags.subtags[tag?.tagName] = {
+              name: tag?.tagName,
+              desc: tag?.tagName,
+              resolved: true
+          }
+        }
+      });
+    }
+    this.setState({tags: _.merge( {}, tags, injectedTags, eventContextTagsObj )});
   }
   populateTags(tagsList) {
     const mainTags = {};
@@ -299,6 +322,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
 TagList.defaultProps = {
   isNewVersionFlow: false,
   userLocale: 'en',
+  eventContextTags: [],
 };
 
 TagList.propTypes = {
@@ -318,6 +342,7 @@ TagList.propTypes = {
   channel: PropTypes.string,
   disabled: PropTypes.bool,
   fetchingSchemaError: PropTypes.bool,
+  eventContextTags: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/TagList/messages.js

@@ -11,4 +11,8 @@ export default defineMessages({
     id: `${scope}.header`,
     defaultMessage: 'This is TagList container !',
   },
+  tagsBasedOnEntryTriggerEvent: {
+    id: `${scope}.tagsBasedOnEntryTriggerEvent`,
+    defaultMessage: 'Tags based on entry trigger event',
+  },
 });

package/v2Containers/TagList/tests/TagList.test.js

@@ -4,9 +4,10 @@ import configureStore from "../../../store";
 import { injectIntl } from "react-intl";
 import { fireEvent } from "@testing-library/react";
 import { TagList } from '../index';
-import { TagListData } from './mockdata';
+import { TagListData, eventContextTags } from './mockdata';
 import { Provider } from 'react-redux';
 import { screen, render } from '../../../utils/test-utils';
+const { getByText } = screen;
 
 
 const initializeTagList = (props) => {
@@ -26,16 +27,26 @@ const initializeTagList = (props) => {
   );
 };
 
+const addLabelBtnAssertion = () => {
+  const addLabelButton = screen.getByRole('button', {
+    name: /add label/i
+  });
+  expect(addLabelButton).toBeInTheDocument();
+  fireEvent.click(addLabelButton);
+};
 
 describe("TagList test :  UNIT", () => {
   it("should render the TagList component with default props amd addLabel Button", async () => {
     initializeTagList();
-    
-    const addLabelButton = screen.getByRole('button', {
-        name: /add label/i
-    })
-    expect(addLabelButton).toBeInTheDocument();
-    
-    fireEvent.click(addLabelButton);
+    addLabelBtnAssertion();
+  });
+
+  it('should render event context tags correctly from generateTags', () => {
+    initializeTagList({eventContextTags});
+    addLabelBtnAssertion();
+    const EVENT_CONTEXT_TAG_HEADER = getByText('Tags based on entry trigger event');
+    expect(EVENT_CONTEXT_TAG_HEADER).toBeInTheDocument();
+    fireEvent.click(EVENT_CONTEXT_TAG_HEADER);
+    expect(getByText('lifetimePurchases')).toBeInTheDocument();
   });
 });

package/v2Containers/TagList/tests/mockdata.js

@@ -105,4 +105,62 @@ export const TagListData = {
     "actions": {},
     "globalActions": {},
     "isNewVersionFlow": false,
-}
+}
+
+export const eventContextTags = [
+    {
+        "profileId": "BEHAVIOURAL_EVENT_PROFILE",
+        "method": "getEventData",
+        "field": "butterfly",
+        "params": null,
+        "returnType": {
+            "isList": false,
+            "typeInfo": {
+                "type": "DOUBLE",
+                "typeId": null
+            },
+            "list": false
+        },
+        "factId": "getEventData_butterfly",
+        "tagName": "(butterfly)",
+        "isTaggable": true,
+        "uniqueId": "yW_DH7vjKk__BEHAVIOURAL__monsoon",
+        "isDynamicFact": true
+    },
+    {
+        "profileId": "BEHAVIOURAL_EVENT_PROFILE",
+        "method": "getEventData",
+        "field": "raindrops",
+        "params": null,
+        "returnType": {
+            "isList": false,
+            "typeInfo": {
+                "type": "DOUBLE",
+                "typeId": null
+            },
+            "list": false
+        },
+        "factId": "getEventData_raindrops",
+        "tagName": "",
+        "isTaggable": true,
+        "uniqueId": "yW_DH7vjKk__BEHAVIOURAL__monsoon",
+        "isDynamicFact": true
+    },
+    {
+        "factId": "5LFP9e",
+        "profileId": "CUSTOMER_PROFILE",
+        "params": [],
+        "returnType": {
+            "isList": false,
+            "typeInfo": {
+                "type": "DOUBLE",
+                "typeId": null
+            },
+            "list": false
+        },
+        "tagName": "lifetimePurchases",
+        "isTaggable": true,
+        "uniqueId": "yW_DH7vjKk__BEHAVIOURAL__monsoon",
+        "isDynamicFact": false
+    }
+];

package/v2Containers/Viber/index.js

@@ -71,6 +71,7 @@ export const Viber = (props) => {
     viberData = {},
     selectedOfferDetails = [],
     currentOrgDetails,
+    eventContextTags,
   } = props || {};
 
   const { formatMessage } = intl;
@@ -270,6 +271,7 @@ export const Viber = (props) => {
           id={"viber_tags"}
           userLocale={localStorage.getItem("jlocale") || "en"}
           selectedOfferDetails={selectedOfferDetails}
+          eventContextTags={eventContextTags}
         />
       </CapColumn>
       <div className="viber-textarea-wrapper">

package/v2Containers/Whatsapp/index.js

@@ -128,7 +128,8 @@ export const Whatsapp = (props) => {
     loadingTags,
     getFormData,
     selectedOfferDetails,
-    currentOrgDetails
+    currentOrgDetails,
+    eventContextTags,
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
@@ -501,6 +502,7 @@ export const Whatsapp = (props) => {
           injectedTagsParams: injectedTags,
           location,
           tagModule: getDefaultTags,
+          eventContextTags,
         }) || {};
       const unsupportedTagsLengthCheck =
         validationResponse?.unsupportedTags?.length > 0;
@@ -2051,6 +2053,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
                 onContextChange={handleOnTagsContextChange}
                 injectedTags={injectedTags || {}}
                 selectedOfferDetails={selectedOfferDetails}
+                eventContextTags={eventContextTags}
               />
             )
           }

package/v2Containers/Zalo/index.js

@@ -66,6 +66,7 @@ export const Zalo = (props) => {
     getFormData,
     selectedOfferDetails,
     hostName: zaloHostName = '',
+    eventContextTags,
   } = props || {};
   const {hostName = zaloHostName || ''} = senderDetails;
   const { formatMessage } = intl;
@@ -256,6 +257,7 @@ export const Zalo = (props) => {
         injectedTagsParams: injectedTags,
         location,
         tagModule: getDefaultTags,
+        eventContextTags,
       }) || {};
     const { unsupportedTags = [], isBraceError } = tagValidationResponse;
     let tagError = '';
@@ -445,6 +447,7 @@ export const Zalo = (props) => {
                     injectedTags={injectedTags || {}}
                     selectedOfferDetails={selectedOfferDetails}
                     disabled={isFullMode}
+                    eventContextTags={eventContextTags}
                   />
                 }
               />

package/containers/App/index.js

@@ -1,52 +0,0 @@
-/**
- *
- * App.js
- *
- * This component is the skeleton around the actual pages, and should only
- * contain code that should be seen on all pages. (e.g. navigation bar)
- *
- */
-
-import React, { useEffect } from 'react'; // eslint-disable-line no-unused-vars
-import { Switch } from 'react-router';
-import { ConnectedRouter } from 'connected-react-router/immutable';
-import history from 'utils/history';
-
-import Cap from '../Cap';
-import CapV2 from '../../v2Containers/Cap';
-import Login from '../Login';
-import NotFoundPage from '../NotFoundPage';
-
-import GlobalStyle from '../../global-styles';
-import config from '../../config/app';
-import withReactRouterV3Compatibility from '../../hoc/withReactRouterV3Compatibility';
-import RenderRoute from '../../v2Components/RenderRoute';
-import { updateCharCount } from '../../utils/smsCharCountV2';
-
-const loginUrl =
-  process.env.NODE_ENV === 'production'
-    ? `${config.production.login_url}`
-    : `${config.development.login_url}`;
-
-// const Protected = userIsAuthenticatedRedir(Cap);
-const v3CompatibleCap = withReactRouterV3Compatibility(Cap);
-const v3CompatibleCapV2 = withReactRouterV3Compatibility(CapV2);
-
-export default function App() {
-  useEffect(() => {
-    updateCharCount("", false);
-  });
-  return (
-    <div>
-      <ConnectedRouter history={history}>
-        <Switch>
-          <RenderRoute exact path={loginUrl} component={Login} />
-          <RenderRoute path="/v2" component={v3CompatibleCapV2} key="/v2" />
-          <RenderRoute path="/" component={v3CompatibleCap} key="/" />
-          <RenderRoute component={NotFoundPage} />
-        </Switch>
-      </ConnectedRouter>
-      <GlobalStyle />
-    </div>
-  );
-}

package/entry.js

@@ -1,2 +0,0 @@
-import { publicPath } from './config/path';
-__webpack_public_path__ = ((new URL(((document || {}).currentScript || {}).src || window.location)).origin) + `${publicPath}/`;

package/hoc/withReactRouterV3Compatibility.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { compose } from 'redux';
-import { withRouter } from 'react-router-dom';
-import componentRoutes from '../routes';
-
-function findRoute(routes, path) {
-  let match;
-  for (let i = 0; i < routes.length; i++) {
-    const route = routes[i];
-    if (route?.path === path) {
-      match = route;
-      break;
-    }
-    if (route?.routes) {
-      match = findRoute(route.routes, path);
-      if (match) {
-        break;
-      }
-    }
-  }
-  return match;
-}
-
-function getParamsObject(params = []) {
-  const paramsObject = {};
-  params.forEach((value, key) => {
-    if (paramsObject[key]) {
-      // If the key already exists, convert the value to an array (to handle multiple values for the same key)
-      paramsObject[key] = Array.isArray(paramsObject[key])
-        ? [...paramsObject[key], value]
-        : [paramsObject[key], value];
-    } else {
-      paramsObject[key] = value;
-    }
-  });
-  return paramsObject;
-}
-
-function withReactRouterV3Compatibility(Component) {
-  const EnhancedComponent = (props) => {
-    const { history = {}, location = {}, match = {} } = props;
-    const matchedRoute = findRoute(componentRoutes, match.path);
-    const newProps = {
-      ...props,
-      router: history,
-      params: match.params,
-      route: matchedRoute,
-      location: {
-        ...location,
-        query: getParamsObject(new URLSearchParams(location.search)),
-      },
-    };
-    return <Component {...newProps} />;
-  };
-  EnhancedComponent.propTypes = {
-    router: PropTypes.object,
-    params: PropTypes.object,
-    route: PropTypes.object,
-  };
-  return compose(
-    withRouter,
-  )(EnhancedComponent);
-};
-
-export default withReactRouterV3Compatibility;

package/initialReducer.js

@@ -1,34 +0,0 @@
-import languageProviderReducer from 'v2Containers/LanguageProvider/reducer';
-import beeEditorReducer from 'v2Containers/BeeEditor/reducer';
-import CapFacebookPreviewReducer from 'v2Containers/CapFacebookPreview/reducer';
-
-import capReducer from 'containers/Cap/reducer';
-import appReducer from 'containers/App/reducer';
-import createSmsReducer from 'containers/Sms/Create/reducer';
-import editSmsReducer from 'containers/Sms/Edit/reducer';
-import templateReducer from 'containers/Templates/reducer';
-import tagsReducer from 'containers/TagList/reducer';
-import emailReducer from 'containers/Email/reducer';
-import ebillReducer from 'containers/Ebill/reducer';
-import ftpReducer from 'v2Containers/FTP/reducer';
-import galleryReducer from './v2Containers/Assets/Gallery/reducer';
-import CapCollapsibleLeftNavigationReducer from '@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/reducer';
-import { AIRA_REDUCER_DOMAIN, askAiraReducer } from '@capillarytech/cap-ui-library/CapAskAira';
-
-export const initialReducer = {
-  language: languageProviderReducer,
-  cap: capReducer,
-  app: appReducer,
-  create: createSmsReducer,
-  edit: editSmsReducer,
-  templates: templateReducer,
-  tagList: tagsReducer,
-  email: emailReducer,
-  ebill: ebillReducer,
-  beeEditor: beeEditorReducer,
-  facebookPreview: CapFacebookPreviewReducer,
-  FTP: ftpReducer,
-  [AIRA_REDUCER_DOMAIN]: askAiraReducer,
-  gallery: galleryReducer,
-  navigationConfig: CapCollapsibleLeftNavigationReducer,
-};

package/mfe-exposed-components.js

@@ -1,8 +0,0 @@
-// This file is used to expose the components of the MFE to the host application
-// Contents of this file are used in webpack config's ModuleFederationPlugin.
-//
-module.exports = {
-    // which exposes
-    // ADD MFE COMPONENT YOU WANT TO EXPORT example:
-    // './Home': './app/components/pages/Home',
-  };

package/utils/checkStore.js

@@ -1,21 +0,0 @@
-import { conformsTo, isFunction, isObject } from 'lodash';
-import invariant from 'invariant';
-
-/**
- * Validate the shape of redux store
- */
-export default function checkStore(store) {
-  const shape = {
-    dispatch: isFunction,
-    subscribe: isFunction,
-    getState: isFunction,
-    replaceReducer: isFunction,
-    runSaga: isFunction,
-    injectedReducers: isObject,
-    injectedSagas: isObject,
-  };
-  invariant(
-    conformsTo(store, shape),
-    '(app/utils...) injectors: Expected a valid redux store',
-  );
-}

package/utils/customAuthWrapper.js

@@ -1,62 +0,0 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable react/no-multi-comp */
-/* eslint-disable react/prefer-stateless-function */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import hoistStatics from 'hoist-non-react-statics';
-
-const AuthenticatingComponentWithRef = React.forwardRef((props, ref) => (
-  <div ref={ref} />
-));
-const FailureComponentWithRef = React.forwardRef((props, ref) => (
-  <div ref={ref} />
-));
-const defaults = {
-  AuthenticatingComponent: AuthenticatingComponentWithRef, // dont render anything while authenticating
-  FailureComponent: FailureComponentWithRef, // dont render anything on failure of the predicate
-  wrapperDisplayName: 'AuthWrapper',
-};
-
-export default args => {
-  const { AuthenticatingComponent, FailureComponent, wrapperDisplayName } = {
-    ...defaults,
-    ...args,
-  };
-
-  // Wraps the component that needs the auth enforcement
-  return function wrapComponent(DecoratedComponent) {
-    const displayName =
-      DecoratedComponent.displayName || DecoratedComponent.name || 'Component';
-
-    class UserAuthWrapper extends Component {
-      static displayName = `${wrapperDisplayName}(${displayName})`;
-
-      static propTypes = {
-        isAuthenticated: PropTypes.bool,
-        isAuthenticating: PropTypes.bool,
-      };
-
-      static defaultProps = {
-        isAuthenticating: false,
-      };
-
-      render() {
-        const { isAuthenticated, isAuthenticating, forwardedRef } = this.props;
-        if (isAuthenticated) {
-          return <DecoratedComponent {...this.props} ref={forwardedRef} />;
-        }
-        if (isAuthenticating) {
-          return <AuthenticatingComponent {...this.props} ref={forwardedRef} />;
-        }
-        return <FailureComponent {...this.props} ref={forwardedRef} />;
-      }
-    }
-
-    /** forwardRef from HOC to the Wrapped Component */
-    const UserAuthWrapperWithRef = React.forwardRef((props, ref) => (
-      <UserAuthWrapper {...props} forwardedRef={ref} />
-    ));
-
-    return hoistStatics(UserAuthWrapperWithRef, DecoratedComponent);
-  };
-};

package/utils/customConnectedAuthWrapper.js

@@ -1,26 +0,0 @@
-import { connect } from 'react-redux';
-
-import authWrapper from './customAuthWrapper';
-
-const connectedDefaults = {
-  authenticatingSelector: () => false,
-};
-
-export default args => {
-  const { authenticatedSelector, authenticatingSelector } = {
-    ...connectedDefaults,
-    ...args,
-  };
-
-  /** Passed withRef option set to true for forwarding Ref to Wrapped Component */
-  return DecoratedComponent =>
-    connect(
-      (state, ownProps) => ({
-        isAuthenticated: authenticatedSelector(state, ownProps),
-        isAuthenticating: authenticatingSelector(state, ownProps),
-      }),
-      null,
-      null,
-      { withRef: true },
-    )(authWrapper(args)(DecoratedComponent));
-};

package/utils/history.js

@@ -1,8 +0,0 @@
-import { createBrowserHistory } from 'history';
-import pathConfig from '../config/path';
-
-const history = createBrowserHistory({
-  basename: pathConfig.publicPath,
-});
-
-export default history;

package/utils/injectReducer.js

@@ -1,2 +0,0 @@
-import { injectReducer } from "@capillarytech/vulcan-react-sdk/utils";
-export default injectReducer;

package/utils/injectSaga.js

@@ -1,2 +0,0 @@
-import { injectSaga } from "@capillarytech/vulcan-react-sdk/utils";
-export default injectSaga;

package/v2Components/NavigationBar/saga.js

@@ -1,18 +0,0 @@
-import { all } from 'redux-saga/effects';
-import CapCollapsibleLeftNavigationSagas from '@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/saga';
-import { analyticsBotSaga } from '@capillarytech/cap-ui-library/CapAskAira';
-
-export default [
-  {
-    key: 'navigation',
-    saga: function* navigationConfigSaga() {
-      yield all(CapCollapsibleLeftNavigationSagas.map(saga => saga.call()));
-    },
-  },
-  {
-    key: 'analyticsBotSaga',
-    saga: function* analyticsBotSagaFn() {
-      yield all(analyticsBotSaga.map(saga => saga.call()));
-    },
-  },
-];

package/v2Components/RenderRoute/RenderRoute.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Route } from 'react-router-dom';
-
-const RenderRoute = ({ Component: ComponentToRender, ...rest }) => (
-  <Route
-    {...rest}
-    render={props => <ComponentToRender {...props} />}
-  />
-);
-
-export default RenderRoute;

package/v2Components/RenderRoute/index.js

@@ -1 +0,0 @@
-export { default } from './RenderRoute';