@capillarytech/creatives-library 8.0.112 → 8.0.113-alpha.0

package/package.json

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

package/v2Components/CapWhatsappCTA/index.js

@@ -20,7 +20,7 @@ import globalMessages from '../../v2Containers/Cap/messages';
 import whatsappMsg from '../../v2Containers/Whatsapp/messages';
 import messages from './messages';
 import './index.scss';
-import { isUrl,isValidText } from '../../v2Containers/Line/Container/Wrapper/utils';
+import { isUrl, isValidText } from '../../v2Containers/Line/Container/Wrapper/utils';
 import TagList from '../../v2Containers/TagList';
 import {
   CTA_OPTIONS,
@@ -51,6 +51,7 @@ export const CapWhatsappCTA = (props) => {
     tags = [],
     injectedTags = {},
     selectedOfferDetails = [],
+    eventContextTags = [],
   } = props;
   const { formatMessage } = intl;
   const invalidVarRegex = /{{(.*?)}}/g;
@@ -135,8 +136,7 @@ export const CapWhatsappCTA = (props) => {
     clonedCta.push(cloneDeep(INITIAL_CTA_DATA[0]));
     if (clonedCta.length === 2) {
       clonedCta[1].index = 1;
-      clonedCta[1].ctaType =
-        clonedCta[0].ctaType === PHONE_NUMBER ? WEBSITE : PHONE_NUMBER;
+      clonedCta[1].ctaType = clonedCta[0].ctaType === PHONE_NUMBER ? WEBSITE : PHONE_NUMBER;
     }
     updateHandler(clonedCta, null, true);
   };
@@ -168,8 +168,8 @@ export const CapWhatsappCTA = (props) => {
     if (!isUrl(value)) {
       errorMessage = formatMessage(messages.ctaWebsiteUrlErrorMessage);
     } else if (
-      urlType === STATIC_URL &&
-      value.match(invalidVarRegex)?.length > 0
+      urlType === STATIC_URL
+      && value.match(invalidVarRegex)?.length > 0
     ) {
       errorMessage = formatMessage(messages.staticUrlWithVarErrorMessage);
     }
@@ -178,12 +178,14 @@ export const CapWhatsappCTA = (props) => {
   };
 
   const ctaSaveDisabled = (index) => {
-    const { ctaType, text, phone_number, url } = ctaData[index] || {};
+    const {
+      ctaType, text, phone_number, url,
+    } = ctaData[index] || {};
     if (text === '' || buttonError) {
       return true;
-    } else if (ctaType === PHONE_NUMBER && phone_number.length < 5) {
+    } if (ctaType === PHONE_NUMBER && phone_number.length < 5) {
       return true;
-    } else if (ctaType === WEBSITE && (url === '' || urlError)) {
+    } if (ctaType === WEBSITE && (url === '' || urlError)) {
       return true;
     }
     return false;
@@ -208,8 +210,9 @@ export const CapWhatsappCTA = (props) => {
     const renderArray = [];
     const addBtnDisabled = ctaData.length === 1 && !ctaData[0].isSaved;
     ctaData.forEach((cta) => {
-      const { index, ctaType, text, phone_number, urlType, url, isSaved } =
-        cta || {};
+      const {
+        index, ctaType, text, phone_number, urlType, url, isSaved,
+      } = cta || {};
       //this is to display buttons after they are saved, in both create and edit mode.
       if (isSaved) {
         const ctaIsPhone = ctaType === PHONE_NUMBER;
@@ -237,7 +240,10 @@ export const CapWhatsappCTA = (props) => {
             </CapColumn>
             {ctaIsPhone && (
               <CapColumn span={10} align="left">
-                <CapLabel className="phone">+{phone_number}</CapLabel>
+                <CapLabel className="phone">
+                  +
+                  {phone_number}
+                </CapLabel>
               </CapColumn>
             )}
             {!ctaIsPhone && (
@@ -249,7 +255,7 @@ export const CapWhatsappCTA = (props) => {
                       : formatMessage(messages.ctaWebsiteTypeDynamic)}
                   </CapLabel>
                 </CapColumn>
-                <CapTooltip title={url} placement={'top'}>
+                <CapTooltip title={url} placement="top">
                   <CapColumn span={7} style={{ marginRight: '0px' }}>
                     <CapLabel className="url">{url}</CapLabel>
                   </CapColumn>
@@ -279,6 +285,7 @@ export const CapWhatsappCTA = (props) => {
                   tags={tags}
                   injectedTags={injectedTags}
                   selectedOfferDetails={selectedOfferDetails}
+                  eventContextTags={eventContextTags}
                 />
               </CapColumn>
             )}
@@ -290,7 +297,7 @@ export const CapWhatsappCTA = (props) => {
               >
                 <CapTooltip
                   title={formatMessage(messages.whatsappCtaTagListRevert)}
-                  placement={'top'}
+                  placement="top"
                 >
                   <CapIcon size="s" type="return" />
                 </CapTooltip>
@@ -423,7 +430,7 @@ export const CapWhatsappCTA = (props) => {
                     ? formatMessage(messages.ctaSaveDisabled)
                     : ''
                 }
-                placement={'bottom'}
+                placement="bottom"
               >
                 <div className="button-disabled-tooltip-wrapper">
                   <CapButton
@@ -451,15 +458,15 @@ export const CapWhatsappCTA = (props) => {
     {
       // when first button is not saved, add button is disabled with tooltip
       // eslint-disable-next-line no-unused-expressions
-      ctaData.length < 2 &&
-        !isEditFlow &&
-        renderArray.push(
+      ctaData.length < 2
+        && !isEditFlow
+        && renderArray.push(
           <CapRow>
             <CapTooltip
               title={
                 addBtnDisabled ? formatMessage(messages.ctaAddDisabled) : ''
               }
-              placement={'right'}
+              placement="right"
             >
               <div className="button-disabled-tooltip-wrapper">
                 <CapButton

package/v2Containers/TagList/index.js

@@ -7,6 +7,7 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
+import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { Tree } from 'antd';
 import _ from 'lodash';
@@ -16,17 +17,20 @@ import makeSelectTagList from './selectors';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import * as actions from './actions';
 import * as globalActions from '../Cap/actions';
+import messages, { scope } from './messages';
+
 // import styled from styled-components;
 import CapTagList from '../../v2Components/CapTagList';
 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';
+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';
 
-const TreeNode = Tree.TreeNode;
+const {TreeNode} = Tree;
 
 export class TagList extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -52,35 +56,31 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       this.setState({loading: true});
     }
     if (!_.isEqual(nextProps.injectedTags, this.props.injectedTags)) {
-
       this.setState({loading: false});
     }
     if (!_.isEqual(nextProps.tags, this.props.tags)) {
-
       this.setState({loading: false});
     }
     if (nextProps?.fetchingSchemaError) {
       this.setState({tagsError: nextProps?.fetchingSchemaError});
     }
-
   }
+
   componentDidUpdate(prevProps) {
     if (this.props.tags !== prevProps.tags || this.props.injectedTags !== prevProps.injectedTags || this.props.selectedOfferDetails !== prevProps.selectedOfferDetails) {
       this.generateTags(this.props);
     }
   }
+
   onSelect = (selectedKeys) => {
     this.props.onTagSelect(selectedKeys[0]);
   };
 
-  onClick = (e, data) => {
-
-  };
-
   getTagsforContext = (data) => {
     //this.setState({loading: true});
     this.props.onContextChange(data);
   }
+
   generateTags = (props) => {
     let tags = {};
     let injectedTags = {};
@@ -108,24 +108,26 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     if (eventContextTags?.length) {
       const TAG_HEADER_MSG_LABEL = this.props.intl.formatMessage(messages.entryEvent);
       eventContextTagsObj.eventContextTags = {
-        name: TAG_HEADER_MSG_LABEL,
-        desc: TAG_HEADER_MSG_LABEL,
-        resolved: true,
+        "name": TAG_HEADER_MSG_LABEL,
+        "desc": TAG_HEADER_MSG_LABEL,
+        "resolved": true,
         'tag-header': true,
-        subtags: {},
+        "subtags": {},
       };
 
       eventContextTags.forEach((tag) => {
-        const { tagName, label, profileId, profileName } = tag || {};
+        const {
+          tagName, label, profileId, profileName,
+        } = tag || {};
         if (!profileId || !tagName || !label || !profileName) return;
         // Initializing the tags profile if it doesn't exist
         if (!eventContextTagsObj?.eventContextTags?.subtags?.[profileId]) {
           eventContextTagsObj.eventContextTags.subtags[profileId] = {
-            name: profileName,
-            desc: profileName,
-            resolved: true,
+            "name": profileName,
+            "desc": profileName,
+            "resolved": true,
             "tag-header": true,
-            subtags: {},
+            "subtags": {},
           };
         }
         // Adding the current tag to the profile group
@@ -138,6 +140,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     }
     this.setState({tags: _.merge( {}, tags, injectedTags, eventContextTagsObj )});
   }
+
   populateTags(tagsList) {
     const mainTags = {};
     const excludedTags = [];
@@ -164,8 +167,8 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       }
       if (!tag['tag-header']) {
         mainTags[tag.value] = {
-          "name": tag?.label[userLocale] ? tag?.label[userLocale] : tag?.label?.en,
-          "desc": tag?.label[userLocale] ? tag?.label[userLocale] : tag?.label?.en,
+          name: tag?.label[userLocale] ? tag?.label[userLocale] : tag?.label?.en,
+          desc: tag?.label[userLocale] ? tag?.label[userLocale] : tag?.label?.en,
         };
       } else if (tag['tag-header'] && mainTags[tag.value]) {
         mainTags[tag.value].subtags = _.concat(mainTags[tag.value].subtags, tag.subtags);
@@ -245,7 +248,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       };
     };
     offerDetails.forEach((offer) => {
-      const { id, couponName, description, couponSeriesId } = offer;
+      const {
+        id, couponName, description, couponSeriesId,
+      } = offer;
       const couponId = id || couponSeriesId;
       const couponSubTags = {};
       couponTagsKeys.forEach((couponTagKey) => {

package/v2Containers/Whatsapp/index.js

@@ -882,6 +882,10 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
               deleteHandler={deleteHandler}
               isEditFlow={isEditFlow}
               hostName={host}
+              tags={tags || []}
+              injectedTags={injectedTags || {}}
+              selectedOfferDetails={selectedOfferDetails}
+              eventContextTags={eventContextTags}
             />
           )}
         </>
@@ -2697,6 +2701,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
               tags={tags || []}
               injectedTags={injectedTags || {}}
               selectedOfferDetails={selectedOfferDetails}
+              eventContextTags={eventContextTags}
             />
           )}
           {isBtnTypeQuickReply && (