@capillarytech/creatives-library 7.17.89 → 7.17.91-alpha.0

package/containers/App/constants.js

@@ -15,6 +15,7 @@ export const EXTENDED_TAG = 'ExtendedTagMessage';
 export const BADGES_UI_ENABLED = 'BADGES_UI_ENABLED';
 export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
 export const ENABLE_CUSTOMER_BARCODE_TAG = "ENABLE_CUSTOMER_BARCODE_TAG";
+export const EMAIL_UNSUBSCRIBE_TAG_MANDATORY = "EMAIL_UNSUBSCRIBE_TAG_MANDATORY";
 
 export const CARD_RELATED_TAGS = [
   'card_series',

package/initialState.js

@@ -16,6 +16,7 @@ export default {
       layouts: [],
     },
     fetchingSchema: true,
+    fetchingSchemaError: '',
     // isLoggedIn,
   },
   app: {

package/package.json

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

package/services/api.js

@@ -509,3 +509,8 @@ export const getMetaTags = ({previewUrl}) => {
   const url = `${API_ENDPOINT}/common/getMetaTags?url=${previewUrl}`;
   return request(url, getAPICallObject('GET'));
 };
+
+export const getSupportVideosConfig = () => {
+  const url = `${ARYA_ENDPOINT}/support_videos/?product=Creatives`;
+  return request(url, getAPICallObject('GET'));
+};

package/services/tests/api.test.js

@@ -4,6 +4,7 @@ import {
   getCdnTransformationConfig,
   createWhatsappTemplate,
   getMetaTags,
+  getSupportVideosConfig,
 } from '../api';
 import { mockData } from './mockData';
 const sampleFile = require('../../assets/line.png');
@@ -52,3 +53,8 @@ describe('getMetaTags -- Test with valid responses', () => {
       getMetaTags({previewUrl: 'https://capillarytech.com'}),
     ).toEqual(Promise.resolve()));
 });
+
+describe('getSupportVideosConfig -- Test with valid responses', () => {
+  it('Should return correct response', () =>
+    expect(getSupportVideosConfig()).toEqual(Promise.resolve()));
+});

package/utils/common.js

@@ -17,6 +17,7 @@ import {
   ENABLE_CUSTOMER_BARCODE_TAG,
   BADGES_UI_ENABLED,
   BADGES_ENROLL,
+  EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
 } from '../containers/App/constants';
 import { apiMessageFormatHandler } from './commonUtils';
 
@@ -104,6 +105,10 @@ export const hasCustomerBarcodeFeatureEnabled = Auth.hasFeatureAccess.bind(
   ENABLE_CUSTOMER_BARCODE_TAG,
 );
 
+export const hasRemoveEmailUnsubscribeTag = Auth.hasFeatureAccess.bind(
+  null,
+  EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
+);
 //filtering tags based on scope
 export const filterTags = (tagsToFilter, tagsList) => tagsList?.filter(
     (tag) => !tagsToFilter?.includes(tag?.definition?.value)

package/v2Components/CapTagList/index.js

@@ -10,7 +10,20 @@ import { connect } from 'react-redux';
 import moment from 'moment';
 import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
 // import styled from 'styled-components';
-import { CapSpin, CapModal, CapButton, CapPopover, CapInput, CapTree, CapSelect, CapTooltip, CapLink, CapIcon } from '@capillarytech/cap-ui-library';
+import {
+  CapSpin,
+  CapModal,
+  CapButton,
+  CapPopover,
+  CapInput,
+  CapTree,
+  CapSelect,
+  CapTooltip,
+  CapLink,
+  CapIcon,
+  CapRow,
+  CapLabel,
+} from "@capillarytech/cap-ui-library";
 import './style.scss';
 import _ from 'lodash';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
@@ -239,7 +252,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     window.open(TAG_TRANSLATION_DOC, '_blank');
   }
   render() {
-    const { hidePopover = false, tags = {}, intl = {}, moduleFilterEnabled, label, modalProps, channel } = this.props;
+    const { hidePopover = false, tags = {}, intl = {}, moduleFilterEnabled, label, modalProps, channel, fetchingSchemaError = false } = this.props;
     const tg = tags;
     const {formatMessage} = intl;
     const { tagValue, expandedKeys, autoExpandParent, searchValue, visible, translationLang } = this.state;
@@ -318,13 +331,39 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           {contentSection}
         </CapModal> :
         <CapPopover
-          visible={visible}
+          visible={fetchingSchemaError ? false : visible}
           onVisibleChange={this.togglePopoverVisibility}
           content={contentSection}
           trigger="click"
           placement={translationLang === "ja-JP" && channel === 'EMAIL' ? "bottom" : "rightTop"}
+        >
+          <CapTooltip
+            title={
+              fetchingSchemaError && (
+                <CapRow className="tooltip-text-container">
+                  <CapLabel className="tooltip-text1">
+                    {formatMessage(messages.somethingWentWrong)}
+                  </CapLabel>
+                  <CapLabel className="tooltip-text2">
+                    {formatMessage(messages.labelFetchErrorMsg)}
+                  </CapLabel>
+                </CapRow>
+              )
+            }
+            placement="right"
           >
-          <CapButton disabled={this?.props?.disabled} isAddBtn type="flat">{label || ''}</CapButton>
+            <CapRow className="tooltip-add-label-container">
+              <CapButton
+                disabled={
+                  this?.props?.disabled || fetchingSchemaError
+                }
+                isAddBtn
+                type="flat"
+              >
+                {label || ""}
+              </CapButton>
+            </CapRow>
+          </CapTooltip>
         </CapPopover>
         }
         <CapModal
@@ -361,7 +400,8 @@ CapTagList.propTypes = {
   disableTagsDetails: PropTypes.object,
   currentOrgDetails: PropTypes.object,
   channel: PropTypes.string,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  fetchingSchemaError: PropTypes.bool,
 };
 
 CapTagList.defaultValue = {

package/v2Components/CapTagList/messages.js

@@ -50,4 +50,12 @@ export default defineMessages({
     id: `creatives.componentsV2.CapTagList.customerBarcodeDisable`,
     defaultMessage: 'This label is not enabled for your organization. Please connect with your Capillary POC',
   },
+  "somethingWentWrong": {
+    id: `creatives.componentsV2.CapTagList.somethingWentWrong`,
+    defaultMessage: 'Something went wrong',
+  },
+  'labelFetchErrorMsg': {
+    id: `creatives.componentsV2.CapTagList.labelFetchErrorMsg`,
+    defaultMessage: 'Unable to fetch the labels. Please try again later'
+  },
 });

package/v2Components/CapTagList/style.scss

@@ -1,5 +1,26 @@
+@import "~@capillarytech/cap-ui-library/styles/_variables";
+
 @media (max-height: 25rem) {
   .ant-tree.cap-tree-v2.ant-tree-icon-hide {
     height: 8.5714rem;
   }
 }
+
+.tooltip-add-label-container {
+  float: right;
+}
+
+.tooltip-text-container {
+  margin: $CAP_SPACE_12 $CAP_SPACE_20;
+  .tooltip-text1 {
+    margin-bottom: $CAP_SPACE_08;
+    font-weight: $FONT_WEIGHT_MEDIUM;
+    color: $FONT_COLOR_06;
+    font-size: $FONT_SIZE_L;
+  }
+  .tooltip-text2 {
+    font-weight: $FONT_WEIGHT_REGULAR;
+    color: $FONT_COLOR_06;
+    font-size: $FONT_SIZE_M;
+  }
+}

package/v2Components/FormBuilder/index.js

@@ -55,6 +55,7 @@ import { AI_SUGGESTION_API_URL, CONTENT_RECOMMENDATION_BOT } from './constants';
 import { GET_TRANSLATION_MAPPED } from '../../containers/TagList/constants';
 import moment from 'moment';
 import { CUSTOMER_BARCODE_TAG , COPY_OF} from '../../containers/App/constants';
+import { hasRemoveEmailUnsubscribeTag } from '../../utils/common';
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
 const {TextArea} = CapInput;
@@ -987,6 +988,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 if (tagValidationResponse.isBraceError){
                   errorString += this.props.intl.formatMessage(globalMessages.unbalanacedCurlyBraces);
                 }
+                if (tagValidationResponse.isContentEmpty) {
+                  errorString += this.props.intl.formatMessage(messages.emailBodyEmptyError);
+                }
               }
             }
           }
@@ -1125,6 +1129,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     response.missingTags = [];
     response.unsupportedTags = [];
     response.isBraceError = false;
+    response.isContentEmpty = false;
+    const contentForValidation = isEmail ? convert(content) : content ;
     if(tags && tags.length) {
       _.forEach(tags, (tag) => {
         _.forEach(tag.definition.supportedModules, (module) => {
@@ -1142,6 +1148,19 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       let matchImg = regexImgSrc.exec(content);
       const regexCustomerBarcode = /{{customer_barcode}}(?![^<]*>)/g;
       let matchCustomerBarcode = regexCustomerBarcode.exec(content);
+      // \S matches anything other than a space, a tab, a newline, or a carriage return.
+      const validString= /\S/.test(contentForValidation);
+      if (hasRemoveEmailUnsubscribeTag() && isEmail) {
+        const missingTagIndex = response.missingTags.indexOf("unsubscribe");
+        if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
+          response.missingTags.splice(missingTagIndex, 1);
+          if (validString) {
+            response.valid = true;
+          } else {
+            response.isContentEmpty = true;
+          }
+        }
+      }
       while (match !== null ) {
         const tagValue = match[0].substring(this.indexOfEnd(match[0], '{{'), match[0].indexOf('}}'));
         match = regex.exec(content);
@@ -1175,7 +1194,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
       }
     }
-    const contentForValidation = isEmail ? convert(content) : content ;
     if(!validateIfTagClosed(contentForValidation)){
       response.isBraceError = true;
       response.valid = false;

package/v2Components/FormBuilder/messages.js

@@ -86,4 +86,8 @@ export default defineMessages({
     id: 'creatives.componentsV2.FormBuilder.imageReUpload',
     defaultMessage: 'Re upload',
   },
+  emailBodyEmptyError: {
+    id: 'creatives.componentsV2.FormBuilder.emailBodyEmptyError',
+    defaultMessage: 'Email body cannot be empty',
+  },
 });

package/v2Containers/Cap/actions.js

@@ -73,3 +73,7 @@ export function clearTopbarMenuData() {
     type: types.CLEAR_TOPBAR_MENU_DATA,
   };
 }
+
+export const getSupportVideosConfig = () => ({
+  type: types.GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
+});

package/v2Containers/Cap/constants.js

@@ -39,4 +39,18 @@ export const ORG_REFRESH_SEC = 10;
 export const ORG_CHANGED = 'ORG_CHANGED';
 
 export const ENABLE_AI_SUGGESTIONS = 'ENABLE_AI_SUGGESTIONS';
+export const ERROR_IN_FETCHING_TAGS = 'Error in fetching tags';
 
+export const GET_SUPPORT_VIDEOS_CONFIG_REQUEST =
+  'cap/GET_SUPPORT_VIDEOS_CONFIG_REQUEST';
+export const GET_SUPPORT_VIDEOS_CONFIG_SUCCESS =
+  'cap/GET_SUPPORT_VIDEOS_CONFIG_SUCCESS';
+export const GET_SUPPORT_VIDEOS_CONFIG_FAILURE =
+  'cap/GET_SUPPORT_VIDEOS_CONFIG_FAILURE';
+
+export const REQUEST = 'REQUEST';
+export const SUCCESS = 'SUCCESS';
+export const FAILURE = 'FAILURE';
+
+export const ENABLE_PRODUCT_SUPPORT_VIDEOS = 'ENABLE_PRODUCT_SUPPORT_VIDEOS';
+export const DEFAULT = 'default';

package/v2Containers/Cap/index.js

@@ -12,7 +12,7 @@ import moment from 'moment';
 import { GA, multipleOrgSwitch, utilsSessionStorageApi, Auth } from '@capillarytech/cap-ui-utils';
 import { injectIntl, FormattedMessage, intlShape, FormattedHTMLMessage } from 'react-intl';
 import messages from './messages';
-import { makeSelectAuthenticated, makeSelectUser } from './selectors';
+import { makeSelectAuthenticated, makeSelectUser, makeSelectDemoVideoAndLink } from './selectors';
 import * as actions from './actions';
 import * as locationActions from '../LanguageProvider/actions';
 import * as appActions from '../App/actions';
@@ -21,11 +21,16 @@ import NavigationBar from '../../v2Components/NavigationBar';
 import { engagePlusPublicPath, publicPath } from '../../config/path';
 import { GTM_TRACKING_ID, CREATIVES_UI_VIEW, FAILURE } from '../App/constants';
 import { makeSelectLocale } from '../../v2Containers/LanguageProvider/selectors';
+import CapSupportVideosWrapper from '@capillarytech/cap-ui-library/CapSupportVideosWrapper';
+import { replaceDynamicAndCompare } from '@capillarytech/cap-ui-library/CapSupportVideosWrapper/utils';
 import {
   ORG_SETTINGS_URL,
   CAMPAIGN_SETTINGS_URL,
   ORG_REFRESH_SEC,
   ORG_CHANGED,
+  REQUEST,
+  DEFAULT,
+  ENABLE_PRODUCT_SUPPORT_VIDEOS,
 } from './constants';
 import './_cap.scss';
 const gtm = window.dataLayer || [];
@@ -109,7 +114,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     }
     locale = this.getMappedLocale(locale);
     //locale = 'zh';
-
+    this.props.actions.getSupportVideosConfig();
     moment.locale(locale);
     window.addEventListener('storage', this.handleStorageChange, false);
     document.addEventListener(
@@ -413,6 +418,46 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     this.setState({ showOrgChangeModal: false });
   };
 
+  renderNavigationComponent(component) {
+    const { demoVideoAndLinkJSONData: {
+        demoVideoAndLinkJSON = {},
+        demoVideoAndLinkJSONStatus,
+      } = {},
+      Global,
+    } = this.props;
+    const { currentOrgDetails = {}, user = {} } =
+    Global || {};
+    const { lang: userLocale = '' } = user;
+    let wrapperComponent = <>{component}</>;
+    const {
+      basicDetails: { base_language: orgLocale = '' } = {},
+      accessibleFeatures = [],
+    } = currentOrgDetails || {};
+    if (
+      accessibleFeatures.includes(
+        ENABLE_PRODUCT_SUPPORT_VIDEOS
+      ) &&
+      demoVideoAndLinkJSON?.is_active &&
+      demoVideoAndLinkJSONStatus !== REQUEST
+    ) {
+      const demoLocale = userLocale || orgLocale || DEFAULT;
+      const JSONInContext = demoVideoAndLinkJSON?.json_config;
+      const currentPathJSON = JSONInContext?.find((routeEle) =>
+        replaceDynamicAndCompare(location?.pathname, routeEle?.route),
+      );
+      const targetElements = currentPathJSON?.target_elements || {};
+      wrapperComponent = (
+        <CapSupportVideosWrapper
+          targetElements={targetElements}
+          locale={demoLocale}
+        >
+          {component}
+        </CapSupportVideosWrapper>
+      );
+    }
+    return wrapperComponent;
+  }
+
   render() {
     const { Global, location } = this.props;
     const { topbarMenuData, isLoggedIn, currentOrgDetails = {}, getUserDataStatus, getUserDataCode } = Global;
@@ -444,6 +489,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
                     <CapSomethingWentWrong url={`${window.location.origin}${publicPath}v2`} />
               }
               {isLoggedIn && type !== 'embedded' ?
+              this.renderNavigationComponent(
                 <NavigationBar
                   userData={Global}
                   changeOrg={this.changeOrg}
@@ -455,7 +501,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
                   topbarMenuData={topbarMenuDataOptions}
                   location={location}
                   campaignOrgV2Status={currentOrgDetails.org_campaign_v2_status}
-            /> : ''}
+                />) : ''}
               <div className="main" style={{minHeight: 'calc(100vh - 74px', position: 'relative', top: '74px'}}>
 
                 <div className="main-content">
@@ -488,12 +534,14 @@ Cap.propTypes = {
   locationActions: PropTypes.object,
   location: PropTypes.object,
   intl: intlShape.isRequired,
+  demoVideoAndLinkJSONData: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
   Global: makeSelectAuthenticated(),
   User: makeSelectUser(),
   loader: makeSelectLocale(),
+  demoVideoAndLinkJSONData: makeSelectDemoVideoAndLink(),
 });
 
 function mapDispatchToProps(dispatch) {

package/v2Containers/Cap/reducer.js

@@ -79,10 +79,12 @@ function capReducer(state = fromJS(initialState.cap), action) {
         .set('getUserDataCode', action.status);
     case types.GET_SCHEMA_FOR_ENTITY_REQUEST:
       return state
-        .set('fetchingSchema', true);
+        .set('fetchingSchema', true)
+        .set('fetchingSchemaError', false);
     case types.GET_SCHEMA_FOR_ENTITY_FAILURE:
       return state
-        .set('fetchingSchema', false);
+        .set('fetchingSchema', false)
+        .set('fetchingSchemaError', true);
     case types.GET_SCHEMA_FOR_ENTITY_SUCCESS: {
       const stateMeta = state.get('metaEntities');
       return state
@@ -90,7 +92,8 @@ function capReducer(state = fromJS(initialState.cap), action) {
         .set('metaEntities', {
           layouts: action.data && action.entityType === 'LAYOUT' ? action.data.metaEntities : stateMeta.layouts,
           tags: action.data && action.entityType === 'TAG' ? action.data.metaEntities : stateMeta.tags,
-        });
+        })
+        .set('fetchingSchemaError', false);
     }
     case types.CLEAR_META_ENTITIES:
       return state.set('metaEntities', {
@@ -124,6 +127,18 @@ function capReducer(state = fromJS(initialState.cap), action) {
         .set('tagsToDisable', action.tagsToDisable)
         .set('parentTagsToDisable', action.parentTagsToDisable);
     }
+    case types.GET_SUPPORT_VIDEOS_CONFIG_REQUEST:
+      return state
+        .set('demoVideoAndLinkJSONStatus', types.REQUEST)
+        .set('demoVideoAndLinkJSON', {});
+    case types.GET_SUPPORT_VIDEOS_CONFIG_SUCCESS:
+      return state
+        .set('demoVideoAndLinkJSONStatus', types.SUCCESS)
+        .set('demoVideoAndLinkJSON', action?.result);
+    case types.GET_SUPPORT_VIDEOS_CONFIG_FAILURE:
+      return state
+        .set('demoVideoAndLinkJSONStatus', types.FAILURE)
+        .set('demoVideoAndLinkJSONError', action?.error);
     default:
       return state;
   }

package/v2Containers/Cap/sagas.js

@@ -125,9 +125,28 @@ export function* fetchSchemaForEntity(queryParams) {
     const result = yield call(Api.fetchSchemaForEntity, queryParams);
 
     // const sidebar = result.response.sidebar;
-    yield put({ type: types.GET_SCHEMA_FOR_ENTITY_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', entityType: queryParams.queryParams.type });
+    const {
+      success = false,
+      response = {},
+      status: {
+        code = '',
+      } = {},
+    } = result || {};
+    const {
+      metaEntities = [],
+    } = response || {};
+    const {
+      queryParams: {
+        type = '',
+      } = {},
+    } = queryParams || {};
+    if (success || metaEntities?.length) {
+      yield put({ type: types.GET_SCHEMA_FOR_ENTITY_SUCCESS, data: response, statusCode: code, entityType: type });
+    } else {
+      yield put({ type: types.GET_SCHEMA_FOR_ENTITY_FAILURE, error: true });
+    }
   } catch (error) {
-    yield put({ type: types.GET_SCHEMA_FOR_ENTITY_FAILURE, error });
+    yield put({ type: types.GET_SCHEMA_FOR_ENTITY_FAILURE, error});
   }
 }
 
@@ -152,6 +171,25 @@ function* getTopbarMenuData(params) {
   }
 }
 
+export function* getSupportVideosConfig({ callback }) {
+  try {
+    const response = yield call(Api.getSupportVideosConfig);
+    if (response?.success) {
+      yield put({
+        type: types.GET_SUPPORT_VIDEOS_CONFIG_SUCCESS,
+        result: response?.data || {},
+      });
+    } else {
+      yield put({
+        type: types.GET_SUPPORT_VIDEOS_CONFIG_FAILURE,
+        error: response?.message,
+      });
+    }
+    if (callback) callback(response);
+  } catch (error) {
+    yield put({ type: types.GET_SUPPORT_VIDEOS_CONFIG_FAILURE, error });
+  }
+}
 
 function* watchFetchSchemaForEntity() {
   const watcher = yield takeLatest(types.GET_SCHEMA_FOR_ENTITY_REQUEST, fetchSchemaForEntity);
@@ -176,6 +214,13 @@ function* watchGetTopbarMenuData() {
   yield takeLatest(types.GET_TOPBAR_MENU_DATA_REQUEST, getTopbarMenuData);
 }
 
+export function* watchForGetVideosConfig() {
+  yield takeLatest(
+    types.GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
+    getSupportVideosConfig,
+  );
+}
+
 export default [
   loginFlow,
   watchForOrgChange,
@@ -183,5 +228,6 @@ export default [
   watchForFetchUserInfo,
   watchFetchSchemaForEntity,
   watchGetTopbarMenuData,
+  watchForGetVideosConfig,
 ];
 

package/v2Containers/Cap/selectors.js

@@ -73,6 +73,11 @@ const makeSelectFetchingSchema = () => createSelector(
   (globalState) => globalState.get('fetchingSchema')
 );
 
+const makeSelectFetchingSchemaError = () => createSelector(
+  selectCapDomain,
+  (globalState) => globalState.get('fetchingSchemaError')
+);
+
 const makeSelectLoyaltyPromotionDisplay = () => createSelector(
   selectCapDomain,
   (globalState) => ({
@@ -82,6 +87,13 @@ const makeSelectLoyaltyPromotionDisplay = () => createSelector(
   }),
 );
 
+const makeSelectDemoVideoAndLink = () =>
+  createSelector(selectCapDomain, (substate) => ({
+    demoVideoAndLinkJSON: substate.get('demoVideoAndLinkJSON'),
+    demoVideoAndLinkJSONStatus: substate.get('demoVideoAndLinkJSONStatus'),
+    demoVideoAndLinkJSONError: substate.get('demoVideoAndLinkJSONError'),
+  }));
+
 export {
   makeSelectLocationState,
   makeSelectAuthenticated,
@@ -94,4 +106,6 @@ export {
   makeSelectFetchingSchema,
   setInjectedTags,
   makeSelectLoyaltyPromotionDisplay,
+  makeSelectFetchingSchemaError,
+  makeSelectDemoVideoAndLink,
 };