@capillarytech/creatives-library 8.0.24-alpha.0 → 8.0.25

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.24-alpha.0",
+  "version": "8.0.25",
   "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

@@ -54,6 +54,7 @@ function BeeEditor(props) {
     actions,
     BEESelect,
     currentOrgDetails,
+    eventContextTags,
   } = props;
   const { saveRowRequest } = BEESelect;
   const {formatMessage} = intl;
@@ -286,6 +287,7 @@ function BeeEditor(props) {
             className: "bee-editor-tag-list",
           }}
           onContextChange={onContextChange}
+          eventContextTags={eventContextTags}
         />
         <CapModal
           className="custom-row-modal"
@@ -329,6 +331,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

@@ -1219,6 +1219,7 @@ export class Creatives extends React.Component {
       editor,
       smsRegister,
       enableNewChannels,
+      eventContextTags,
     } = this.props;
     const mapTemplateCreate =
       slidBoxContent === "createTemplate" &&
@@ -1320,6 +1321,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() &&
@@ -1379,6 +1381,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

@@ -2741,6 +2741,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

@@ -1808,6 +1808,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 &&
@@ -1899,6 +1900,7 @@ Create.propTypes = {
   getFormLibraryData: PropTypes.func,
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
+  eventContextTags: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/MobilePush/Edit/index.js

@@ -1956,6 +1956,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 &&
@@ -2051,6 +2052,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

@@ -993,6 +993,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>
@@ -1019,6 +1020,7 @@ Create.propTypes = {
   getFormSubscriptionData: PropTypes.func,
   isLoadingMetaEntities: PropTypes.bool,
   selectedOfferDetails: PropTypes.array,
+  eventContextTags: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Sms/Edit/index.js

@@ -992,6 +992,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>
@@ -1021,6 +1022,7 @@ Edit.propTypes = {
   // route: PropTypes.object,
   injectedTags: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
+  eventContextTags: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/SmsTrai/Edit/index.js

@@ -75,6 +75,7 @@ export const SmsTraiEdit = (props) => {
     getFormSubscriptionData,
     templateData = {},
     selectedOfferDetails,
+    eventContextTags,
   } = props || {};
   const { formatMessage } = intl;
   const [loading, updateLoading] = useState(true);
@@ -230,6 +231,7 @@ export const SmsTraiEdit = (props) => {
           injectedTagsParams: injectedTags,
           location,
           tagModule: getDefaultTags,
+          eventContextTags,
         }) || {};
       updateIsTagValidationError(
         tagValidationResponse.unsupportedTags.length > 0,
@@ -573,6 +575,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',
+  },
 });