@capillarytech/creatives-library 8.0.125-alpha.6 → 8.0.126

package/v2Components/CapImageUpload/index.js

@@ -22,9 +22,7 @@ import { isEmpty, get } from 'lodash';
 import './index.scss';
 import Gallery from '../../v2Containers/Assets/Gallery';
 import { MAX_SUPPORTED_IMAGE_SIZE } from './constants';
-import {
-  FACEBOOK, INAPP, RCS, WHATSAPP, VIBER,
-} from "../../v2Containers/CreativesContainer/constants";
+import { FACEBOOK, INAPP, RCS, WHATSAPP, VIBER } from "../../v2Containers/CreativesContainer/constants";
 
 import messages from './messages';
 function CapImageUpload(props) {
@@ -50,14 +48,14 @@ function CapImageUpload(props) {
   } = props;
   const {
     formatMessage,
-  } = intl || {};
+    } = intl || {};
 
 
   useEffect(() => {
     const imageDataObj = imageData[`uploadedAssetData${index}`];
     if (!isEmpty(imageDataObj)) {
-      const { secure_file_path = '' } = get(imageDataObj, 'metaInfo', {});
-      updateImageSrc(secure_file_path);
+      const { secure_file_path = '', karixFileHandle = '' } = get(imageDataObj, 'metaInfo', {});
+      updateImageSrc(secure_file_path, karixFileHandle);
     }
   }, [imageData[`uploadedAssetData${index}`]]);
 
@@ -67,7 +65,7 @@ function CapImageUpload(props) {
   const {CapHeadingSpan} = CapHeading;
   const ImageComponent = useCallback(
     () => (
-      <>
+        <>
         {
           !isEmpty(imageSrc) ? (
             <div className={`image-container upload ${props.ifError ? 'error' : ''}`}>
@@ -76,10 +74,10 @@ function CapImageUpload(props) {
               )}
             </div>
           ) : null}
-      </>
-    ),
-    [imageSrc],
-  );
+        </>
+      ),
+      [imageSrc],
+    );
 
   const WithLabel = LabelHOC(ImageComponent);
 
@@ -149,13 +147,10 @@ function CapImageUpload(props) {
   const onReUpload = useCallback(() => {
     updateImageSrc('');
     updateOnReUpload();
-    // Don't automatically trigger file dialog - let user choose between computer and gallery
   }, []);
 
   const onGalleryImageSelect = useCallback((imageTemplate) => {
-    const {
-      secure_file_path: image, width, height, file_size: size,
-    } = get(imageTemplate, 'metaInfo', {});
+    const {secure_file_path: image, width, height, file_size: size} = get(imageTemplate, 'metaInfo', {});
     updateDrawerRequirement(false);
     if (!allowedExtensionsRegex.test(image) || height > imgHeight || width > imgWidth || size > imgSize ) {
       updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
@@ -181,7 +176,7 @@ function CapImageUpload(props) {
           isFullMode={isFullMode}
           isLineAsset
           onGalleryImageSelect={onGalleryImageSelect}
-        />
+          />
       </>
     );
   }, []);
@@ -199,35 +194,34 @@ function CapImageUpload(props) {
 
   const getImageSection = useCallback(() => {
     if (imageSrc === "") {
-      return (
-        <>
-          <CapUploader.CapDragger
-            customRequest={capUploaderCustomRequest}
-            className="form-builder-dragger grey-background"
-            showUploadList={!isImageError}
-          >
-            <CapHeading className="dragger-title" type="h7">
-              <FormattedMessage {...messages.dragAndDrop} />
-            </CapHeading>
-            <CapHeading className="dragger-or" type="label6">
-              <FormattedMessage {...messages.or} />
-            </CapHeading>
-            <CapButton className="dragger-button upload-image" type="secondary">
-              <FormattedMessage {...messages.uploadComputer} />
+      return (<>
+        <CapUploader.CapDragger
+          customRequest={capUploaderCustomRequest}
+          className="form-builder-dragger grey-background"
+          showUploadList={!isImageError}
+        >
+          <CapHeading className="dragger-title" type="h7">
+            <FormattedMessage {...messages.dragAndDrop} />
+          </CapHeading>
+          <CapHeading className="dragger-or" type="label6">
+            <FormattedMessage {...messages.or} />
+          </CapHeading>
+          <CapButton className="dragger-button upload-image" type="secondary">
+            <FormattedMessage {...messages.uploadComputer} />
+          </CapButton>
+          {channel !== WHATSAPP && (
+            <CapButton
+              className="dragger-button gallery-select"
+              type="secondary"
+              onClick={onGalleryClick}
+            >
+              <FormattedMessage {...messages.uploadGallery} />
             </CapButton>
-            {channel !== WHATSAPP && (
-              <CapButton
-                className="dragger-button gallery-select"
-                type="secondary"
-                onClick={onGalleryClick}
-              >
-                <FormattedMessage {...messages.uploadGallery} />
-              </CapButton>
-            )}
-          </CapUploader.CapDragger>
-          <CapError type="error" className="upload-image-error">
-            {isImageError}
-          </CapError>
+          )}
+        </CapUploader.CapDragger>
+        <CapError type="error" className="upload-image-error">
+          {isImageError}
+        </CapError>
         </>
       );
     }
@@ -248,26 +242,26 @@ function CapImageUpload(props) {
   return (
     <div style={style} className="cap-custom-image-upload">
       <WithLabel
-        key="with-label"
+        key={`with-label`}
         ifError={!!isImageError}
 
-      />
-      <form encType="multipart/form-data" id="form" className={className}>
+    />
+      <form encType="multipart/form-data" id={`form`} className={className}>
         <input
-          key="imgFile"
+          key={`imgFile`}
           style={{ display: 'none' }}
-          id="imageFileName"
+          id="fileName"
           type="file"
           onChange={(e) => uploadImages(e, { files: e.target.files })}
           accept={supportedExtensions || "image/*"}
-        />
+      />
         {getImageSection()}
         <CapDrawer
           content={getGalleryDrawerContent()}
           visible={isDrawerRequired}
           width={430}
           onClose={() => updateDrawerRequirement(false)}
-        />
+      />
       </form>
       <div className="image-info-wrapper">
         {channel === WHATSAPP && (

package/v2Components/CapInAppCTA/index.js

@@ -38,7 +38,6 @@ export const CapInAppCTA = (props) => {
     deleteHandler,
     isEditFlow,
     deepLink,
-    channel,
   } = props;
   const { formatMessage } = intl;
 

package/v2Components/CapTagList/index.js

@@ -58,19 +58,14 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       dynamicDateValue: '',
       showModal: false,
       translationLang: '',
-      tagsList: [],
-      selectedContext: 'Outbound',
-      isLoadingLoyaltyTags: false,
-      isLoadingContextChange: false,
+      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';
@@ -84,36 +79,17 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     });
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps, prevState){
     if (this.props.tags !== prevProps.tags || this.state.searchValue !== prevState.searchValue) {
-      const temp = this.renderTags(this.props.tags, this.state.searchValue);
-      this.setState({
-        tagsList: temp,
-      });
-    }
-
-    // Reset loading states when tags are received after context change
-    if ((this.state.isLoadingLoyaltyTags || this.state.isLoadingContextChange)
-        && this.props.tags !== prevProps.tags) {
+      let temp = this.renderTags(this.props.tags, this.state.searchValue);
       this.setState({
-        isLoadingLoyaltyTags: false,
-        isLoadingContextChange: false,
-      });
-    }
-
-    // Backup: Reset loading states if props.loading changed from true to false
-    // This handles cases where the API doesn't return different tags but injectedTags change
-    if (prevProps.loading === true && this.props.loading === false
-        && (this.state.isLoadingLoyaltyTags || this.state.isLoadingContextChange)) {
-      this.setState({ 
-        isLoadingLoyaltyTags: false,
-        isLoadingContextChange: false,
+        tagsList: temp
       });
     }
   }
 
   onChange = (e) => {
-    const {value} = e.target;
+    const value = e.target.value;
     let expandedKeys = this.getSearchedExpandedKeys(this.props.tags, value);
     if (value === '') {
       expandedKeys = [];
@@ -124,7 +100,6 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       autoExpandParent: true,
     });
   };
-
   onExpand = (expandedKeys, info) => {
     this.handleOnExpand(info.node.props.eventKey);
   };
@@ -132,25 +107,26 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   getSearchedExpandedKeys(tags, value = '') {
     let list = [];
     _.forEach(tags, (val = {}, key) => {
-      const tagName = typeof val?.name === STRING
-        ? _.toLower(_.get(val, "name", ""))
-        : _.toLower(_.get(val, "name.props.defaultMessage", ""));
+      const tagName =
+        typeof val?.name === STRING
+          ? _.toLower(_.get(val, "name", ""))
+          : _.toLower(_.get(val, "name.props.defaultMessage", ""));
       const tagNameWithoutUnderscore = tagName.replace(/_/g, " ");
       const searchStringLower = _.toLower(value);
       if (_.has(val, "subtags")) {
         if (
-          val?.name
-          && (tagName.includes(searchStringLower)
-            || tagNameWithoutUnderscore.includes(searchStringLower))
+          val?.name &&
+          (tagName.includes(searchStringLower) ||
+            tagNameWithoutUnderscore.includes(searchStringLower))
         ) {
           list.push(key);
         }
         const temp = this.getSearchedExpandedKeys(val?.subtags, value);
         list = list.concat(temp);
       } else if (
-        val?.name
-        && (tagName.includes(searchStringLower)
-          || tagNameWithoutUnderscore.includes(searchStringLower))
+        val?.name &&
+        (tagName.includes(searchStringLower) ||
+          tagNameWithoutUnderscore.includes(searchStringLower))
       ) {
         list.push(key);
       }
@@ -159,21 +135,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   }
 
   handleOnChange = (data) => {
-    const { selectedContext } = this.state;
-
-    // Only proceed if the context has actually changed
-    if (selectedContext !== data) {
-      // Set loading state for any context change
-      this.setState({
-        isLoadingContextChange: true,
-        selectedContext: data,
-        // Keep loyalty-specific loading for backward compatibility
-        isLoadingLoyaltyTags: data === 'Loyalty',
-      });
-
-      // Call the parent's context change handler
-      this.props.onContextChange(data);
-    }
+    this.props.onContextChange(data);
   };
 
   handleDynamicDateChange = (data) => {
@@ -230,7 +192,6 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     }
     this.setState({expandedKeys, autoExpandParent: false});
   };
-
   togglePopoverVisibility = (visible) => {
     this.setState({visible});
   };
@@ -239,11 +200,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     this.setState({showModal: true, visible: false});
   };
 
-  renderTags = (tags) => {
+  renderTags(tags) {
     const searchString = this.state.searchValue || '';
-    const {
-      disableRelatedTags, childTagsToDisable, parentTagstoDisable,
-    } = 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 = [];
@@ -267,14 +226,16 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         supportedTagsString += `${supportedTag} ,`;
       });
       supportedTagsString = supportedTagsString.replace(/,\s*$/, "");
-      const tagName = typeof val?.name === STRING
-        ? _.toLower(_.get(val, "name", ""))
-        : _.toLower(_.get(val, "name.props.defaultMessage", ""));
+      const tagName =
+        typeof val?.name === STRING
+          ? _.toLower(_.get(val, "name", ""))
+          : _.toLower(_.get(val, "name.props.defaultMessage", ""));
       const tagNameWithoutUnderscore = tagName.replace(/_/g, " ");
       const searchStringLower = _.toLower(searchString);
-      const tagContainsSearchedString = searchStringLower
-        && (tagName.includes(searchStringLower)
-          || tagNameWithoutUnderscore.includes(searchStringLower));
+      const tagContainsSearchedString =
+        searchStringLower &&
+        (tagName.includes(searchStringLower) ||
+          tagNameWithoutUnderscore.includes(searchStringLower));
       if (_.has(val, 'subtags')) {
         const disabled = disableRelatedTags ? parentTagstoDisable.includes(key) : false;
         const temp = this.renderTags(val?.subtags);
@@ -325,8 +286,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
                     : `${key}`
                 }
                 disabled={childDisabled}
-              >
-              </CapTreeNode>
+              ></CapTreeNode>
             );
             hidingDateTagsForJpLocale(
               hideDateTagsForJpLocale,
@@ -361,8 +321,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
                   : `${key}`
               }
               disabled={childDisabled}
-            >
-            </CapTreeNode>
+            ></CapTreeNode>
           );
           hidingDateTagsForJpLocale(
             hideDateTagsForJpLocale,
@@ -375,23 +334,14 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     });
     return list;
   }
-
   openTranslationLink = () => {
     window.open(TAG_TRANSLATION_DOC, '_blank');
   }
-
   render() {
-    const {
-      hidePopover = false, intl = {}, moduleFilterEnabled, label, modalProps, channel, fetchingSchemaError = false,
-    } = 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, visible, translationLang, selectedContext, isLoadingLoyaltyTags, isLoadingContextChange,
-    } = this.state;
-
-    // Show loading spinner if general loading OR if specifically loading loyalty tags OR if context change is in progress
-    const shouldShowLoading = this.props.loading || (selectedContext === 'Loyalty' && isLoadingLoyaltyTags) || isLoadingContextChange;
-
+    const { tagValue, expandedKeys, autoExpandParent, searchValue, visible, translationLang } = this.state;
     const options = [
       {
         value: "Outbound",
@@ -404,106 +354,99 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         key: 'loyalty',
       },
     ];
-    const contentSection = (
-      <div>
-        <CapSpin tip={formatMessage(messages.gettingTags)} spinning={shouldShowLoading}>
-          <Search
-            style={{ marginBottom: 8, width: '250px'}}
-            placeholder={formatMessage(messages.search)}
-            onChange={this.onChange} />
-          {moduleFilterEnabled ? (
-            <CapSelect
-              getPopupContainer={(triggerNode) => triggerNode.parentNode}
-              style={{
-                width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit',
-              }}
-              onChange={this.handleOnChange}
-              value={selectedContext}
-              options={options}>
-            </CapSelect>
-          ) : ''}
-          <CapTree
-            styling={{height: '350px', overflow: 'auto'}}
-            onSelect={this.handleOnSelect}
-            selectedKeys={tagValue}
-            expandedKeys={expandedKeys}
-            autoExpandParent={autoExpandParent}
-            onExpand={this.onExpand}
-          >
-            {/* {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>
-          )}
+    const contentSection = (<div>
+      <CapSpin tip={formatMessage(messages.gettingTags)} spinning={this.props.loading}>
+        <Search
+          style={{ marginBottom: 8, width: '250px'}}
+          placeholder={formatMessage(messages.search)}
+          onChange={this.onChange} />
+        {moduleFilterEnabled ?
+          <CapSelect
+            getPopupContainer={(triggerNode) => triggerNode.parentNode}
+            style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}}
+            onChange={this.props.onContextChange}
+            defaultValue={'Outbound'}
+            options={options}>
+          </CapSelect> : ''}
+        <CapTree
+          styling={{height: '350px', overflow: 'auto'}}
+          onSelect={this.handleOnSelect}
+          selectedKeys={tagValue}
+          expandedKeys={expandedKeys}
+          autoExpandParent={autoExpandParent}
+          onExpand={this.onExpand}
+        >
+          {/* {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>
-    );
+      </CapSpin>
+    </div>);
     return (
       <>
-        {hidePopover ? (
-          <CapModal
-            visible={this.props.visibleTaglist}
-            footer={[]}
-            {...modalProps}
-          >
-            {contentSection}
-          </CapModal>
-        ) : (
-          <CapPopover
-            visible={fetchingSchemaError ? false : visible}
-            onVisibleChange={this.togglePopoverVisibility}
-            content={contentSection}
-            trigger="click"
-            placement={channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop"}
+        {hidePopover ? <CapModal
+          visible={this.props.visibleTaglist}
+          footer={[]}
+          {...modalProps}
+        >
+          {contentSection}
+        </CapModal> :
+        <CapPopover
+          visible={fetchingSchemaError ? false : visible}
+          onVisibleChange={this.togglePopoverVisibility}
+          content={contentSection}
+          trigger="click"
+          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"
           >
-            <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"
-            >
-              <CapRow className="tooltip-add-label-container">
-                <CapButton
-                  disabled={
-                    this?.props?.disabled || fetchingSchemaError
-                  }
-                  isAddBtn
-                  type="flat"
-                >
-                  {label || ""}
-                </CapButton>
-              </CapRow>
-            </CapTooltip>
-          </CapPopover>
-        )}
+            <CapRow className="tooltip-add-label-container">
+              <CapButton
+                disabled={
+                  this?.props?.disabled || fetchingSchemaError
+                }
+                isAddBtn
+                type="flat"
+              >
+                {label || ""}
+              </CapButton>
+            </CapRow>
+          </CapTooltip>
+        </CapPopover>
+        }
         <CapModal
           visible={this.state.showModal}
           title={this.props.intl.formatMessage(messages["Dynamic Days before Expiry"])}

package/v2Components/CapVideoUpload/constants.js

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