@capillarytech/creatives-library 7.18.0-beta.0 → 8.0.0

package/v2Components/CapTagList/index.js

@@ -7,16 +7,40 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 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 } 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';
 import { createStructuredSelector } from 'reselect';
 import messages from './messages';
 import { makeSelectLoyaltyPromotionDisplay } from '../../v2Containers/Cap/selectors';
-import { CARD_RELATED_TAGS } from '../../containers/App/constants';
-import { hasCardBasedScope } from '../../utils/common';
+import { CARD_RELATED_TAGS, HOSPITALITY_RELATED_TAGS, CUSTOMER_BARCODE_TAG } from '../../containers/App/constants';
+import { hasCardBasedScope, hasCustomerBarcodeFeatureEnabled, hasHospitalityBasedScope } from '../../utils/common';
+
+import {
+  GET_TRANSLATION_MAPPED,
+  JAPANESE_HELP_TEXT,
+  TAG_TRANSLATION_DOC,
+} from "../../containers/TagList/constants";
+import { EMAIL, JP_LOCALE_HIDE_FEATURE } from '../../v2Containers/App/constants';
+import { hidingDateTagsForJpLocale } from '../../v2Containers/TagList/utils';
+
 
 const {Search} = CapInput;
 const {CapTreeNode} = CapTree;
@@ -32,10 +56,36 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       visible: false,
       dynamicDateValue: '',
       showModal: false,
+      translationLang: '',
+      tagsList: []
     };
     this.renderTags = this.renderTags.bind(this);
     this.getSearchedExpandedKeys = this.getSearchedExpandedKeys.bind(this);
   }
+  getTranslationMappedLocale(locale) {
+    return GET_TRANSLATION_MAPPED?.[locale];
+  }
+  componentDidMount() {
+    const user = localStorage.getItem('user');
+    let locale = 'en';
+    moment.locale(locale);
+    if (user) {
+      locale = JSON.parse(user).lang || locale;
+    }
+    locale = this.getTranslationMappedLocale(locale);
+    this.setState({
+      translationLang: locale,
+    });
+  }
+
+  componentDidUpdate(prevProps, prevState){
+    if (this.props.tags !== prevProps.tags || this.state.searchValue !== prevState.searchValue) {
+      let temp = this.renderTags(this.props.tags, this.state.searchValue);
+      this.setState({
+        tagsList: temp
+      });
+    }
+  }
 
   onChange = (e) => {
     const value = e.target.value;
@@ -57,12 +107,12 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     let list = [];
     _.forEach(tags, (val = {}, key) => {
       if (_.has(val, 'subtags')) {
-        if ((val.name || '').toLowerCase().indexOf(value.toLowerCase()) !== -1) {
+        if (val.name && typeof val.name === 'string' && (val.name || '').toLowerCase().indexOf(value.toLowerCase()) !== -1) {
           list.push(key);
         }
         const temp = this.getSearchedExpandedKeys(val.subtags, value);
         list = list.concat(temp);
-      } else if ((val.name || '').toLowerCase().indexOf(value.toLowerCase()) !== -1) {
+      } else if (val.name && typeof val.name === 'string' && (val.name || '').toLowerCase().indexOf(value.toLowerCase()) !== -1) {
         list.push(key);
       }
     });
@@ -136,54 +186,76 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   };
 
   renderTags(tags, searchString = '') {
-    const { disableRelatedTags, childTagsToDisable, parentTagstoDisable, showCardsRelatedTags} = this.props.disableTagsDetails;
+    const { disableRelatedTags, childTagsToDisable, parentTagstoDisable, showCardsRelatedTags } = this?.props?.disableTagsDetails;
+    const { accessibleFeatures = [] } = this?.props?.currentOrgDetails || {};
+    const hideDateTagsForJpLocale = accessibleFeatures.includes(JP_LOCALE_HIDE_FEATURE);
     const list = [];
     const loyaltyAttrDisableText = <FormattedMessage {...messages.loyaltyAttributeDisable} />;
+    const customerBarcodeDisableText = <FormattedMessage {...messages.customerBarcodeDisable} />;
     let clonedTags = _.cloneDeep(tags);
     if (!hasCardBasedScope()) {
       clonedTags = _.omit(clonedTags, CARD_RELATED_TAGS);
     }
+    if (!hasHospitalityBasedScope()) {
+      //filtering HOSPITALITY_RELATED_TAGS if org does not have HOSPITALITY_BASED_SCOPE feature enabled
+      clonedTags = _.omit(clonedTags, HOSPITALITY_RELATED_TAGS);
+    }
+    if (!hasCustomerBarcodeFeatureEnabled()) {
+      //filtering CUSTOMER_BARCODE_TAG if org does not have CUSTOMER_BARCODE_TAG feature enabled
+      clonedTags = _.omit(clonedTags, CUSTOMER_BARCODE_TAG);
+    }
     _.forEach(clonedTags, (val = '', key) => {
       let supportedTagsString = '';
       _.forEach(val.supportedTags, (supportedTag) => {
         supportedTagsString += `${supportedTag} ,`;
       });
       supportedTagsString = supportedTagsString.replace(/,\s*$/, "");
+      const tagDescriptionOrName = _.toLower(String(_.get(val, 'desc', '') || _.get(val, 'name', '')));
+      const searchStringLower = _.toLower(searchString);
+      const tagContainsSearchedString = tagDescriptionOrName.includes(searchStringLower);
       if (_.has(val, 'subtags')) {
         const disabled = disableRelatedTags ? parentTagstoDisable.includes(key) : false;
         const temp = this.renderTags(val.subtags, '', disabled);
-        list.push((
+        const tagValue = (
           <CapTreeNode
-            title={disabled ? <CapTooltip title={loyaltyAttrDisableText}>{val.name}</CapTooltip> : val.name}
+            title={disabled ? <CapTooltip title={loyaltyAttrDisableText}>{val?.name}</CapTooltip> : val?.name}
             tag={val}
-            key={val.couponSeriesId ? `${key}(${val.couponSeriesId})` : `${key}`}
+            key={val?.incentiveSeriesId ? `${key}(${val?.incentiveSeriesId})` : `${key}`}
             disabled={disabled}
           >
             {temp}
           </CapTreeNode>
-        ));
-      } else if (searchString === '' || !searchString || ((val.name || '').toLowerCase().indexOf(searchString.toLowerCase()) !== -1)) {
-        const childDisabled = disableRelatedTags ? childTagsToDisable.includes(key) : false;
+        );
+        hidingDateTagsForJpLocale(hideDateTagsForJpLocale, val, list, tagValue);
+      } else if (searchString === '' || !searchString || tagContainsSearchedString) {
+        let childDisabled = true;
+        if (key === CUSTOMER_BARCODE_TAG && !hasCustomerBarcodeFeatureEnabled()) {
+          childDisabled = true;
+        } else {
+          childDisabled = disableRelatedTags ? childTagsToDisable.includes(key) : false;
+        }
         const tempNode = (
           <CapTreeNode
-            title={childDisabled ? <CapTooltip title={loyaltyAttrDisableText}>{val.desc || val.name}</CapTooltip> : (val.desc || val.name)}
+            title={childDisabled ? <CapTooltip title={key === CUSTOMER_BARCODE_TAG ? customerBarcodeDisableText : loyaltyAttrDisableText}>{val.desc || val.name}</CapTooltip> : (val.desc || val.name)}
             tag={val}
             isLeaf
-            key={val.couponSeriesId ? `${key}(${val.couponSeriesId})` : `${key}`}
+            key={val?.incentiveSeriesId ? `${key}(${val?.incentiveSeriesId})` : `${key}`}
             disabled={childDisabled}
           >
           </CapTreeNode>);
-        list.push(tempNode);
+        hidingDateTagsForJpLocale(hideDateTagsForJpLocale, val, list, tempNode);
       }
     });
     return list;
   }
-
+  openTranslationLink = () => {
+    window.open(TAG_TRANSLATION_DOC, '_blank');
+  }
   render() {
-    const { hidePopover = false, tags = {}, intl = {}, moduleFilterEnabled, label, modalProps } = 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 } = this.state;
+    const { tagValue, expandedKeys, autoExpandParent, searchValue, visible, translationLang } = this.state;
     const options = [
       {
         value: "All",
@@ -222,9 +294,31 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           expandedKeys={expandedKeys}
           autoExpandParent={autoExpandParent}
           onExpand={this.onExpand}
-      >
-          {this.renderTags(tg, searchValue)}
+        >
+          {/* {this.renderTags(tg, searchValue)} */}
+          {this.state.tagsList}
         </CapTree>
+        {translationLang === "ja-JP" &&
+          <div className="tag-list-footer">
+            <CapIcon
+              type="help"
+              size="s"
+            />
+            <CapLink>
+              <CapButton id="translationtagfooter" type="flat" onClick={this.openTranslationLink} >
+                <div className="tag-list-footer-icon">
+                  <div>{JAPANESE_HELP_TEXT}</div>
+                  <CapIcon
+                    type="open-in-new-light"
+                    size="s"
+                    svgProps={{ color: FONT_COLOR_05 }}
+                  />
+                </div>
+              </CapButton>
+            </CapLink>
+          </div>
+        }
+
       </CapSpin>
     </div>);
     return (
@@ -233,17 +327,43 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           visible={this.props.visibleTaglist}
           footer={[]}
           {...modalProps}
-          >
+        >
           {contentSection}
         </CapModal> :
         <CapPopover
-          visible={visible}
+          visible={fetchingSchemaError ? false : visible}
           onVisibleChange={this.togglePopoverVisibility}
           content={contentSection}
           trigger="click"
-          placement="rightTop"
+          placement={channel === EMAIL.toUpperCase() ? "leftTop" : "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 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
@@ -278,6 +398,10 @@ CapTagList.propTypes = {
   hidePopover: PropTypes.bool,
   modalProps: PropTypes.any,
   disableTagsDetails: PropTypes.object,
+  currentOrgDetails: PropTypes.object,
+  channel: PropTypes.string,
+  disabled: PropTypes.bool,
+  fetchingSchemaError: PropTypes.bool,
 };
 
 CapTagList.defaultValue = {
@@ -295,4 +419,3 @@ const mapStateToProps = createStructuredSelector({
 
 
 export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(CapTagList));
-

package/v2Components/CapTagList/messages.js

@@ -46,4 +46,16 @@ export default defineMessages({
     id: `creatives.componentsV2.CapTagList.loyaltyAttributeDisable`,
     defaultMessage: 'You won’t be able to add loyalty related attributes since the loyalty program/ card series is None.',
   },
+  "customerBarcodeDisable": {
+    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

@@ -0,0 +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/CapVideoUpload/constants.js

@@ -1 +1,7 @@
 export const WHATSAPP = 'WHATSAPP';
+export const DEFAULT = 'DEFAULT';
+export const SUPPORTED_FILE_FORMATS = {
+  VIBER: '3GP, MP4, MOV, M4V',
+  DEFAULT: 'MP4',
+};
+export const VIBER_MAX_DURATION = 600; // seconds

package/v2Components/CapVideoUpload/index.js

@@ -18,9 +18,10 @@ import {
   CapSpin,
 } from '@capillarytech/cap-ui-library';
 import messages from './messages';
-import {bytes2Size} from '../../utils/common';
-import { WHATSAPP } from './constants';
+import {bytes2Size, getDecodedFileName} from '../../utils/common';
+import { SUPPORTED_FILE_FORMATS, WHATSAPP, DEFAULT, VIBER_MAX_DURATION } from './constants';
 import './index.scss';
+import { VIBER } from '../../v2Containers/CreativesContainer/constants';
 
 function CapVideoUpload(props) {
   const {
@@ -41,7 +42,7 @@ function CapVideoUpload(props) {
   } = props;
   const [isVideoError, updateVideoErrorMessage] = useState(false);
   const [isVideo, updateVideoStatus] = useState(false);
-  const [videoDuration, updateVideoDuration] = useState('');
+  const [videoDuration, updateVideoDuration] = useState(null);
   const [isPlaying, updateIsPlaying] = useState(false);
   const [isSpinning, setSpinning] = useState(false);
 
@@ -99,6 +100,7 @@ function CapVideoUpload(props) {
           videoName: metaVideoName,
           videoId: metaVideoId,
           fileHandle: karixFileHandle,
+          videoDuration: null,
         },
         );
       }
@@ -199,6 +201,7 @@ function CapVideoUpload(props) {
     }
     const onReUpload = () => {
       updateVideoStatus(false);
+      updateVideoDuration(null);
       onVideoUploadUpdateAssestList(
         index,
         {
@@ -207,7 +210,7 @@ function CapVideoUpload(props) {
           videoHeight: "",
           videoWidth: "",
           videoSrc: "",
-          videoDuration: "",
+          videoDuration: null,
           videoId: "",
           fileHandle: "",
         }
@@ -217,12 +220,13 @@ function CapVideoUpload(props) {
     const updateMetadataLoaded = () => {
       const { current: { duration, videoHeight: metaVideoHeight, videoWidth: metaVideoWidth } = {} } = videoEl;
       if (duration) {
-        const value = moment('1900-01-01 00:00:00').add(duration, 'seconds').format("HH.mm.ss"); // to get the duration of video
-        updateVideoDuration(value);
+        updateVideoDuration(duration);
         if (videoWidth === undefined && videoHeight === undefined) {
-          onVideoUploadUpdateAssestList(
-            index,
-            {
+          if (
+            channel !== VIBER ||
+            (channel === VIBER && duration <= VIBER_MAX_DURATION)
+          ) {
+            onVideoUploadUpdateAssestList(index, {
               videoSrc,
               videoId,
               videoName,
@@ -230,12 +234,16 @@ function CapVideoUpload(props) {
               videoWidth: metaVideoWidth,
               previewUrl,
               fileHandle,
-            }
-          );
+              videoDuration: duration,
+            });
+          } else {
+            onReUpload();
+            updateVideoErrorMessage(formatMessage(messages.videoDurationError));
+          }
         }
       }
     };
-
+    const videoDurationValue = moment('1900-01-01 00:00:00').add(videoDuration, 'seconds').format("HH.mm.ss"); // to get the duration of video
     return (
       <Fragment key={videoSrc}>
         <div style={{ overflow: 'hidden' }}>
@@ -264,11 +272,11 @@ function CapVideoUpload(props) {
           </video>
           {showVideoNameAndDuration &&
             <div className="video-info">
-              <CapHeading type="h6">
-                {videoName}
+              <CapHeading type="h4">
+                {getDecodedFileName(videoName)}
               </CapHeading>
               <CapHeading type="h6">
-                {videoDuration}
+                {videoDurationValue}
               </CapHeading>
             </div>
           }
@@ -276,6 +284,16 @@ function CapVideoUpload(props) {
       </Fragment>
     );
   };
+
+  const getVideoSizeDescription = () => (
+    <CapHeading.CapHeadingSpan type="label2">
+      <FormattedMessage
+        {...messages.videoSizeDescription}
+        values={{ size: bytes2Size(videoSize) }}
+      />
+    </CapHeading.CapHeadingSpan>
+  );
+
   return (
     <CapSpin spinning={isSpinning}>
       <div style={style} className="cap-custom-video-upload">
@@ -295,26 +313,34 @@ function CapVideoUpload(props) {
             onClose={() => updateTemplateDrawerRequirement(false)}
         />
         </form>
-        {channel !== WHATSAPP ?
+        {![WHATSAPP, VIBER].includes(channel) &&
         <>
           <CapHeading.CapHeadingSpan type="h6" className="video-description">
             <FormattedMessage {...messages.videoRatioDescription} />
           </CapHeading.CapHeadingSpan>
           {' '}
           <CapHeading.CapHeadingSpan type="h6" className="video-description file-format">
-            <FormattedMessage {...messages.fileFormat} />
-
+            <FormattedMessage {...messages.channelFileFormat} values={{ format: SUPPORTED_FILE_FORMATS[DEFAULT] }} />
           </CapHeading.CapHeadingSpan>
           <CapHeading.CapHeadingSpan type="h6" className="video-description video-details">
             <FormattedMessage {...messages.videoSizeDescription} values={{size: bytes2Size(videoSize)}} />
           </CapHeading.CapHeadingSpan>
-        </> :
+        </>}
+        {channel === WHATSAPP &&
         <>
-          <CapHeading.CapHeadingSpan type="label2" className="">
-            <FormattedMessage {...messages.videoSizeDescription} values={{size: bytes2Size(videoSize)}} />
+          {getVideoSizeDescription()}
+          <CapHeading.CapHeadingSpan type="label2" className="whatsapp-format">
+            <FormattedMessage {...messages.channelFileFormat} values={{ format: SUPPORTED_FILE_FORMATS[DEFAULT] }} />
           </CapHeading.CapHeadingSpan>
+        </>}
+        {channel === VIBER &&
+        <>
+          {getVideoSizeDescription()}
           <CapHeading.CapHeadingSpan type="label2" className="whatsapp-format">
-            <FormattedMessage {...messages.whatsappFileFormat} />
+            <FormattedMessage {...messages.channelFileFormat} values={{ format: SUPPORTED_FILE_FORMATS.VIBER }} />
+          </CapHeading.CapHeadingSpan>
+          <CapHeading.CapHeadingSpan type="label2" className="video-duration">
+            <FormattedMessage {...messages.viberMaxDuration} />
           </CapHeading.CapHeadingSpan>
         </>}
       </div>

package/v2Components/CapVideoUpload/index.scss

@@ -12,7 +12,6 @@ $classPrefix: cap-custom-video-upload;
     .video-reupload{  
         float: right;
         color: $FONT_COLOR_05;
-        padding: 0px;
         right: 40px;
     }
     .video-info{
@@ -46,4 +45,7 @@ $classPrefix: cap-custom-video-upload;
 }
 .video-panel {
     display: flex;
-}  
+}  
+.video-duration {
+    margin-left: 8rem;
+}

package/v2Components/CapVideoUpload/messages.js

@@ -55,12 +55,16 @@ export default defineMessages({
     id: `${scope}.imageReUpload`,
     defaultMessage: 'Re upload',
   },
-  fileFormat: {
-    id: `${scope}.fileFormat`,
-    defaultMessage: 'Format: MP4',
+  channelFileFormat: {
+    id: `${scope}.channelFileFormat`,
+    defaultMessage: 'Format: {format}',
   },
-  whatsappFileFormat: {
-    id: `${scope}.whatsappFileFormat`,
-    defaultMessage: 'Format: MP4',
+  viberMaxDuration: {
+    id: `${scope}.viberMaxDuration`,
+    defaultMessage: 'Max Duration: 600 seconds',
+  },
+  videoDurationError: {
+    id: `${scope}.videoDurationError`,
+    defaultMessage: 'Video duration should not exceed 600 seconds',
   },
 });