@capillarytech/creatives-library 8.0.125 → 8.0.127-alpha.0

package/v2Components/CapMpushCTA/messages.js

@@ -0,0 +1,89 @@
+import { defineMessages } from 'react-intl';
+const prefix = `creatives.componentsV2.CapMpushCTA`;
+export default defineMessages({
+  ctaType: {
+    id: `${prefix}.ctaType`,
+    defaultMessage: 'Type of link',
+  },
+  urlDeepLink: {
+    id: `${prefix}.urlDeepLink`,
+    defaultMessage: 'Deep link',
+  },
+  urlExternalLink: {
+    id: `${prefix}.urlExternalLink`,
+    defaultMessage: 'External link',
+  },
+  ctaButtonText: {
+    id: `${prefix}.ctaButtonText`,
+    defaultMessage: 'Primary button text',
+  },
+  ctaButtonTextSecondary: {
+    id: `${prefix}.ctaButtonTextSecondary`,
+    defaultMessage: 'Secondary button text',
+  },
+  ctaDeepLinkOptionsPlaceholder: {
+    id: `${prefix}.ctaDeepLinkOptionsPlaceholder`,
+    defaultMessage: 'Select deep link',
+  },
+  ctaExternalLinkPlaceholder: {
+    id: `${prefix}.ctaExternalLinkPlaceholder`,
+    defaultMessage: 'Enter the external link',
+  },
+  ctaButtonTextPlaceholder: {
+    id: `${prefix}.ctaButtonTextPlaceholder`,
+    defaultMessage: 'Enter button text',
+  },
+  ctaWebsiteType: {
+    id: `${prefix}.ctaWebsiteType`,
+    defaultMessage: 'URL Type',
+  },
+  ctaLinkTypeDeep: {
+    id: `${prefix}.ctaLinkTypeDeep`,
+    defaultMessage: 'Deep link',
+  },
+  ctaLinkTypeExternal: {
+    id: `${prefix}.ctaLinkTypeExternal`,
+    defaultMessage: 'External link',
+  },
+  ctaWebsiteUrl: {
+    id: `${prefix}.ctaWebsiteUrl`,
+    defaultMessage: 'Website URL',
+  },
+  ctaStaticPlaceholder: {
+    id: `${prefix}.ctaStaticPlaceholder`,
+    defaultMessage: 'Enter website URL',
+  },
+  ctaWebsiteUrlErrorMessage: {
+    id: `${prefix}.ctaWebsiteUrlErrorMessage`,
+    defaultMessage: 'URL is not valid',
+  },
+  ctaButtonErrorMessage: {
+    id: `${prefix}.ctaButtonErrorMessage`,
+    defaultMessage: "Newlines, Emojis, or Special characters are not allowed",
+  },
+  ctaSaveDisabled: {
+    id: `${prefix}.ctaSaveDisabled`,
+    defaultMessage: 'Please complete the above fields to enable button',
+  },
+  ctaButtonTextTooltip: {
+    id: `${prefix}.ctaButtonTextTooltip`,
+    defaultMessage:
+      'Use this to name the button. We would recommend not to use special characters for the button text.',
+  },
+  ctaOptionDisabledTooltipDeepLink: {
+    id: `${prefix}.ctaOptionDisabledTooltipDeepLink`,
+    defaultMessage: 'A page within the mobile app',
+  },
+  ctaOptionDisabledTooltipExternalLink: {
+    id: `${prefix}.ctaOptionDisabledTooltipExternalLink`,
+    defaultMessage: 'An external web page',
+  },
+  staticUrlWithVarErrorMessage: {
+    id: `${prefix}.staticUrlWithVarErrorMessage`,
+    defaultMessage: 'Button with url type as static cannot contain variables',
+  },
+  useTwoBracketsOnly: {
+    id: `${prefix}.useTwoBracketsOnly`,
+    defaultMessage: 'Use two brackets on each side to declare a variable',
+  },
+});

package/v2Components/CapTagList/index.js

@@ -58,14 +58,19 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       dynamicDateValue: '',
       showModal: false,
       translationLang: '',
-      tagsList: []
+      tagsList: [],
+      selectedContext: 'Outbound',
+      isLoadingLoyaltyTags: false,
+      isLoadingContextChange: false,
     };
     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';
@@ -79,17 +84,36 @@ 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) {
-      let temp = this.renderTags(this.props.tags, this.state.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) {
       this.setState({
-        tagsList: temp
+        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,
       });
     }
   }
 
   onChange = (e) => {
-    const value = e.target.value;
+    const {value} = e.target;
     let expandedKeys = this.getSearchedExpandedKeys(this.props.tags, value);
     if (value === '') {
       expandedKeys = [];
@@ -100,6 +124,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       autoExpandParent: true,
     });
   };
+
   onExpand = (expandedKeys, info) => {
     this.handleOnExpand(info.node.props.eventKey);
   };
@@ -107,26 +132,25 @@ 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);
       }
@@ -135,7 +159,21 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   }
 
   handleOnChange = (data) => {
-    this.props.onContextChange(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);
+    }
   };
 
   handleDynamicDateChange = (data) => {
@@ -192,6 +230,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     }
     this.setState({expandedKeys, autoExpandParent: false});
   };
+
   togglePopoverVisibility = (visible) => {
     this.setState({visible});
   };
@@ -200,9 +239,11 @@ 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, showCardsRelatedTags } = this?.props?.disableTagsDetails;
+    const {
+      disableRelatedTags, childTagsToDisable, parentTagstoDisable,
+    } = this?.props?.disableTagsDetails;
     const { accessibleFeatures = [] } = this?.props?.currentOrgDetails || {};
     const hideDateTagsForJpLocale = accessibleFeatures.includes(JP_LOCALE_HIDE_FEATURE);
     const list = [];
@@ -226,16 +267,14 @@ 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);
@@ -286,7 +325,8 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
                     : `${key}`
                 }
                 disabled={childDisabled}
-              ></CapTreeNode>
+              >
+              </CapTreeNode>
             );
             hidingDateTagsForJpLocale(
               hideDateTagsForJpLocale,
@@ -321,7 +361,8 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
                   : `${key}`
               }
               disabled={childDisabled}
-            ></CapTreeNode>
+            >
+            </CapTreeNode>
           );
           hidingDateTagsForJpLocale(
             hideDateTagsForJpLocale,
@@ -334,14 +375,23 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     });
     return list;
   }
+
   openTranslationLink = () => {
     window.open(TAG_TRANSLATION_DOC, '_blank');
   }
+
   render() {
-    const { hidePopover = false, tags = {}, intl = {}, moduleFilterEnabled, label, modalProps, channel, fetchingSchemaError = false } = this.props;
-    const tg = tags;
+    const {
+      hidePopover = false, intl = {}, moduleFilterEnabled, label, modalProps, channel, fetchingSchemaError = false,
+    } = this.props;
     const {formatMessage} = intl;
-    const { tagValue, expandedKeys, autoExpandParent, searchValue, visible, translationLang } = this.state;
+    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 options = [
       {
         value: "Outbound",
@@ -354,99 +404,106 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         key: 'loyalty',
       },
     ];
-    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>
-        }
+    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>
+          )}
 
-      </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"}
-        >
-          <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"
+        {hidePopover ? (
+          <CapModal
+            visible={this.props.visibleTaglist}
+            footer={[]}
+            {...modalProps}
           >
-            <CapRow className="tooltip-add-label-container">
-              <CapButton
-                disabled={
-                  this?.props?.disabled || fetchingSchemaError
-                }
-                isAddBtn
-                type="flat"
-              >
-                {label || ""}
-              </CapButton>
-            </CapRow>
-          </CapTooltip>
-        </CapPopover>
-        }
+            {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"
+            >
+              <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,7 +1,10 @@
 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