@capillarytech/creatives-library 7.17.203 → 7.17.204-alpha.0

package/package.json

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

package/utils/tagValidations.js

@@ -93,6 +93,7 @@ export const validateTags = ({
   injectedTagsParams,
   location,
   tagModule,
+  eventContextTags,
 }) => {
   const tags = tagsParam;
   const injectedTags = transformInjectedTags(injectedTagsParams);
@@ -145,6 +146,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/v2Components/FormBuilder/index.js

@@ -1262,6 +1262,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);
@@ -2589,6 +2597,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>
           );
@@ -3210,6 +3219,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>
               );
@@ -3484,6 +3494,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

@@ -155,6 +155,7 @@ export function SlideBoxContent(props) {
       moduleType,
       showLiquidErrorInFooter,
       creativesMode,
+      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};
@@ -395,6 +396,7 @@ export function SlideBoxContent(props) {
     onCreateComplete,
     selectedOfferDetails,
     getFormData,
+    eventContextTags,
   };
 
   return (
@@ -429,6 +431,7 @@ export function SlideBoxContent(props) {
         smsRegister={smsRegister}
         enableNewChannels={enableNewChannels}
         hideTestAndPreviewBtn={hideTestAndPreviewBtn}
+        eventContextTags={eventContextTags}
         />
       )}
       {isPreview && (
@@ -508,6 +511,7 @@ export function SlideBoxContent(props) {
           handleClose={handleClose}
           onCreateComplete={onCreateComplete}
           smsRegister={smsRegister}
+          eventContextTags={eventContextTags}
         />
       )}
       {isEditFTP && (
@@ -543,6 +547,7 @@ export function SlideBoxContent(props) {
             query,
             search: '',
           }}
+          eventContextTags={eventContextTags}
         />
       }
       {
@@ -573,6 +578,7 @@ export function SlideBoxContent(props) {
         onCreateComplete={onCreateComplete}
         smsRegister={smsRegister}
         onShowTemplates={onShowTemplates}
+        eventContextTags={eventContextTags}
       />
         )}
 
@@ -604,6 +610,7 @@ export function SlideBoxContent(props) {
         getCmsTemplatesInProgress={getCmsTemplatesInProgress}
         moduleType={moduleType}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
+        eventContextTags={eventContextTags}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -632,6 +639,7 @@ export function SlideBoxContent(props) {
         onTestContentClicked={onTestContentClicked}
         moduleType={moduleType}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
+        eventContextTags={eventContextTags}
       />
         )}
       {isEditMPush &&
@@ -657,35 +665,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
@@ -702,6 +713,7 @@ export function SlideBoxContent(props) {
             fbAdManager={fbAdManager}
             onSelectTemplate={onSelectTemplate}
             orgUnitId={orgUnitId}
+            eventContextTags={eventContextTags}
           />
         )
       }
@@ -721,6 +733,7 @@ export function SlideBoxContent(props) {
             getFormSubscriptionData={getFormData}
             fbAdManager={fbAdManager}
             onSelectTemplate={onSelectTemplate}
+            eventContextTags={eventContextTags}
           />
         )
       }
@@ -742,6 +755,7 @@ export function SlideBoxContent(props) {
             selectedAccount={selectedAccount}
             handleClose={handleClose}
             selectedOfferDetails={selectedOfferDetails}
+            eventContextTags={eventContextTags}
           />
         )
       }
@@ -760,6 +774,7 @@ export function SlideBoxContent(props) {
             createNew
             handleClose={handleClose}
             selectedOfferDetails={selectedOfferDetails}
+            eventContextTags={eventContextTags}
           />
         )
       }
@@ -774,6 +789,7 @@ export function SlideBoxContent(props) {
           onShowTemplates={onShowTemplates}
           templateData={templateData}
           selectedOfferDetails={selectedOfferDetails}
+          eventContextTags={eventContextTags}
           createNew/>
       )}
 
@@ -790,11 +806,13 @@ export function SlideBoxContent(props) {
         onShowTemplates={onShowTemplates}
         templateData={templateData}
         selectedOfferDetails={selectedOfferDetails}
+        eventContextTags={eventContextTags}
         createNew/> }
 
       {isCreateWhatsapp && (<Whatsapp
         isFullMode={isFullMode}
         onCreateComplete={onCreateComplete}
+        eventContextTags={eventContextTags}
         handleClose={handleClose}/>
       )}
 
@@ -805,6 +823,7 @@ export function SlideBoxContent(props) {
         getDefaultTags={type}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
+        eventContextTags={eventContextTags}
         params={{
           id: templateData._id,
         }}
@@ -828,6 +847,7 @@ export function SlideBoxContent(props) {
         isGetFormData={isGetFormData}
         templateData={templateData}
         getDefaultTags={type}
+        eventContextTags={eventContextTags}
       />
       )}
 
@@ -839,6 +859,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" &&
@@ -1313,6 +1314,7 @@ export class Creatives extends React.Component {
               moduleType={this.props.messageDetails?.type}
               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.
+              eventContextTags={eventContextTags}
           />
           }
           footer={this.shouldShowFooter() &&
@@ -1371,6 +1373,7 @@ Creatives.propTypes = {
   selectedAccount: PropTypes.object,
   strategy: PropTypes.string,
   orgUnitId: PropTypes.number,
+  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

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

package/v2Containers/MobilePush/Edit/index.js

@@ -1924,6 +1924,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 &&
@@ -2019,6 +2020,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,9 @@ 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 +121,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
               onTestContentClicked={onTestContentClicked}
               templateData={templateData}
               hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
+              eventContextTags={eventContextTags}
           />
 
 
@@ -144,6 +147,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);
@@ -569,6 +570,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,28 @@ 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: {},
+      };
+      eventContextTags.forEach((tag) => {
+        if (tag?.tagName) {
+          eventContextTagsObj.EventContextTags.subtags[tag?.tagName] = {
+              name: tag?.tagName,
+              desc: tag?.tagName,
+              resolved: true
+          }
+        }
+      });
+    }
+    console.log("Test >>> generateTags ", {eventTags: this.props.eventContextTags, eventContextTagsObj, tags, injectedTags});
+    this.setState({tags: _.merge( {}, tags, injectedTags, eventContextTagsObj )});
+    // this.setState({tags: _.merge( {}, tags, injectedTags)});
   }
   populateTags(tagsList) {
     const mainTags = {};
@@ -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/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

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