@capillarytech/creatives-library 8.0.166 → 8.0.168-alpha.0

package/v2Containers/MobilePushNew/components/CtaButtons.js

@@ -19,6 +19,11 @@ const CtaButtons = ({
   updateHandler,
   deleteHandler,
   deepLink,
+  location,
+  tags,
+  injectedTags,
+  selectedOfferDetails,
+  handleOnTagsContextChange,
 }) => {
   // Local state to control CTA form visibility
   const [showPrimaryCTA, setShowPrimaryCTA] = useState(false);
@@ -130,6 +135,11 @@ const CtaButtons = ({
           deleteHandler={handleDelete}
           deepLink={deepLink}
           buttonType={PRIMARY}
+          location={location}
+          tags={tags}
+          injectedTags={injectedTags}
+          selectedOfferDetails={selectedOfferDetails}
+          handleOnTagsContextChange={handleOnTagsContextChange}
         />
       )}
       {isPrimaryButtonSaved && !isSecondaryButtonSaved && !shouldShowSecondaryCTA && (
@@ -174,10 +184,20 @@ CtaButtons.propTypes = {
   updateHandler: PropTypes.func.isRequired,
   deleteHandler: PropTypes.func.isRequired,
   deepLink: PropTypes.array,
+  handleOnTagsContextChange: PropTypes.func,
+  location: PropTypes.object,
+  tags: PropTypes.array,
+  injectedTags: PropTypes.object,
+  selectedOfferDetails: PropTypes.array,
 };
 
 CtaButtons.defaultProps = {
   deepLink: [],
+  handleOnTagsContextChange: () => {},
+  location: {},
+  tags: [],
+  injectedTags: {},
+  selectedOfferDetails: [],
 };
 
 export default memo(CtaButtons);

package/v2Containers/MobilePushNew/components/MediaUploaders.js

@@ -43,6 +43,7 @@ import {
 } from "../constants";
 import messages from "../messages";
 import { validateExternalLink, validateDeepLink } from "../utils";
+import TagList from "../../TagList";
 
 // Initial carousel data structure
 const CAROUSEL_INITIAL_DATA = {
@@ -102,6 +103,11 @@ const MediaUploaders = ({
   setCarouselActiveTabIndex,
   carouselLinkErrors = {}, // Carousel link errors from parent
   updateCarouselLinkError, // Function to update carousel link errors in parent
+  location,
+  tags,
+  injectedTags,
+  selectedOfferDetails,
+  handleOnTagsContextChange,
 }) => {
   // Carousel state management - separate for Android and iOS
   const [carouselMediaType, setCarouselMediaType] = useState(IMAGE.toLowerCase());
@@ -563,6 +569,14 @@ const MediaUploaders = ({
 
       const button = card?.buttons[0]; // We're handling only one button for now
 
+      const onButtonTagSelect = useCallback(
+        (value) => {
+          const newUrl = `${button?.externalLinkValue}{{${value}}}`;
+          handleCarouselExternalLinkChange(cardIndex, newUrl);
+        },
+        [handleCarouselExternalLinkChange, button?.externalLinkValue]
+      );
+
       return (
         <>
           <CapDivider />
@@ -633,9 +647,23 @@ const MediaUploaders = ({
                 )}
                 {button?.linkType === EXTERNAL_LINK && (
                   <CapColumn span={14}>
-                    <CapHeading type="h4" className="buttons-heading">
-                      {formatMessage(messages.externalLink)}
-                    </CapHeading>
+                    <CapRow>
+                      <CapHeading type="h4" className="buttons-heading">
+                        {formatMessage(messages.externalLink)}
+                      </CapHeading>
+                      <TagList
+                        moduleFilterEnabled={
+                          location?.query?.type !== "embedded"
+                        }
+                        label={formatMessage(messages.addLabels)}
+                        onTagSelect={onButtonTagSelect}
+                        onContextChange={handleOnTagsContextChange}
+                        location={location}
+                        tags={tags}
+                        injectedTags={injectedTags}
+                        selectedOfferDetails={selectedOfferDetails}
+                      />
+                    </CapRow>
                     <CapInput
                       id={`mobile-push-external-link-input-${activeTab}-${cardIndex}`}
                       onChange={(e) => handleCarouselExternalLinkChange(cardIndex, e.target.value)}

package/v2Containers/MobilePushNew/components/PlatformContentFields.js

@@ -36,6 +36,10 @@ const PlatformContentFields = ({
   linkProps,
   sameContent,
   formatMessage,
+  location,
+  tags,
+  injectedTags,
+  selectedOfferDetails,
 }) => {
   const { title: titleError, message: messageError } = errors;
   const {
@@ -145,6 +149,14 @@ const PlatformContentFields = ({
     [tagListProps, onTagSelect, handleOnTagsContextChange]
   );
 
+  const onButtonTagSelect = useCallback(
+    (value) => {
+      const newUrl = `${externalLinkValue}{{${value}}}`;
+      handleExternalLinkChange(newUrl);
+    },
+    [handleExternalLinkChange, externalLinkValue]
+  );
+
   return (
     <>
       {sameContent && (
@@ -214,6 +226,11 @@ const PlatformContentFields = ({
             mediaType={content.mediaType}
             {...mediaUploaderProps}
             formatMessage={formatMessage}
+            location={location}
+            tags={tags}
+            injectedTags={injectedTags}
+            selectedOfferDetails={selectedOfferDetails}
+            handleOnTagsContextChange={handleOnTagsContextChange}
           />
         </CapRow>
         {content?.mediaType !== CAROUSEL && (
@@ -281,9 +298,23 @@ const PlatformContentFields = ({
                   )}
                   {content.linkType === EXTERNAL_LINK && (
                     <CapColumn span={14}>
-                      <CapHeading type="h4" className="buttons-heading">
-                        {formatMessage(messages.externalLink)}
-                      </CapHeading>
+                      <CapRow style={{ display: "flex" }}>
+                        <CapHeading type="h4" className="buttons-heading">
+                          {formatMessage(messages.externalLink)}
+                        </CapHeading>
+                        <TagList
+                          moduleFilterEnabled={
+                            location?.query?.type !== "embedded"
+                          }
+                          label={formatMessage(messages.addLabels)}
+                          onTagSelect={onButtonTagSelect}
+                          onContextChange={handleOnTagsContextChange}
+                          location={location}
+                          tags={tags}
+                          injectedTags={injectedTags}
+                          selectedOfferDetails={selectedOfferDetails}
+                        />
+                      </CapRow>
                       <CapInput
                         id="mobile-push-external-link-input"
                         onChange={onExternalLinkChange}

package/v2Containers/MobilePushNew/components/tests/MediaUploaders.test.js

@@ -53,6 +53,149 @@ jest.mock('../../../../v2Components/CapImageUpload', () =>
   }
 );
 
+// Mock Cap UI Library components that use styled-components
+jest.mock('@capillarytech/cap-ui-library/CapButton', () => 
+  function MockCapButton({ children, ...props }) {
+    return <button {...props}>{children}</button>;
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapCard', () => 
+  function MockCapCard({ children, title, extra, ...props }) {
+    return (
+      <div {...props} data-testid="cap-card">
+        {title && <div data-testid="card-title">{title}</div>}
+        {extra && <div data-testid="card-extra">{extra}</div>}
+        {children}
+      </div>
+    );
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapIcon', () => 
+  function MockCapIcon({ type, ...props }) {
+    return <span {...props} data-testid={`cap-icon-${type}`}>Icon</span>;
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapRadioGroup', () => 
+  function MockCapRadioGroup({ options, value, onChange, ...props }) {
+    return (
+      <div {...props}>
+        {options?.map((option, index) => (
+          <label key={index}>
+            <input
+              type="radio"
+              checked={value === option.value}
+              onChange={() => onChange(option.value)}
+            />
+            {option.label}
+          </label>
+        ))}
+      </div>
+    );
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapSelect', () => ({
+  CapCustomSelect: function MockCapCustomSelect({ options, value, onChange, placeholder, ...props }) {
+    return (
+      <select {...props} value={value} onChange={(e) => onChange(e.target.value)}>
+        <option value="">{placeholder}</option>
+        {options?.map((option, index) => (
+          <option key={index} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    );
+  }
+}));
+
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => 
+  function MockCapRow({ children, ...props }) {
+    return <div {...props} data-testid="cap-row">{children}</div>;
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapColumn', () => 
+  function MockCapColumn({ children, span, ...props }) {
+    return <div {...props} data-testid="cap-column">{children}</div>;
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapHeading', () => 
+  function MockCapHeading({ children, type, ...props }) {
+    const Tag = type === 'h4' ? 'h4' : 'div';
+    return <Tag {...props} data-testid="cap-heading">{children}</Tag>;
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapDivider', () => 
+  function MockCapDivider({ type, ...props }) {
+    return <hr {...props} data-testid="cap-divider" />;
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapCheckbox', () => 
+  function MockCapCheckbox({ children, checked, onChange, ...props }) {
+    return (
+      <label>
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={(e) => onChange(e)}
+          {...props}
+        />
+        {children}
+      </label>
+    );
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapLabel', () => 
+  function MockCapLabel({ children, ...props }) {
+    return <label {...props} data-testid="cap-label">{children}</label>;
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapInput', () => 
+  function MockCapInput({ onChange, value, placeholder, error, ...props }) {
+    return (
+      <input
+        type="text"
+        value={value || ''}
+        onChange={onChange}
+        placeholder={placeholder}
+        {...props}
+        data-testid="cap-input"
+      />
+    );
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapError', () => 
+  function MockCapError({ children, ...props }) {
+    return <div {...props} data-testid="cap-error">{children}</div>;
+  }
+);
+
+jest.mock('../../../../v2Containers/TagList', () => 
+  function MockTagList({ label, onTagSelect, onContextChange, ...props }) {
+    return (
+      <div data-testid="tag-list" {...props}>
+        <button
+          type="button"
+          onClick={() => onTagSelect && onTagSelect('test-tag')}
+          data-testid="tag-select-button"
+        >
+          {label || 'Add Label'}
+        </button>
+      </div>
+    );
+  }
+);
+
 jest.mock('../../../../v2Components/CapVideoUpload', () => 
   function MockCapVideoUpload(props) {
     return (
@@ -352,7 +495,7 @@ const mockStore = configureStore({}, initialReducer, history);
 
 // Helper function for formatMessage
 const mockFormatMessage = (message, values = {}) => {
-  if (typeof message === 'object' && message.defaultMessage) {
+  if (message && typeof message === 'object' && message.defaultMessage) {
     let result = message.defaultMessage;
     if (values && typeof values === 'object') {
       Object.keys(values).forEach(key => {
@@ -361,7 +504,7 @@ const mockFormatMessage = (message, values = {}) => {
     }
     return result;
   }
-  return message;
+  return message || '';
 };
 
 const defaultProps = {
@@ -381,7 +524,7 @@ const defaultProps = {
   setUpdateMpushVideoSrc: jest.fn(),
   videoDataForVideo: {},
   videoDataForGif: {},
-  formatMessage: jest.fn((message) => message.defaultMessage),
+  formatMessage: jest.fn(mockFormatMessage),
   linkProps: {
     deepLink: [],
   },
@@ -395,6 +538,11 @@ const defaultProps = {
   setCarouselActiveTabIndex: jest.fn(),
   carouselLinkErrors: {},
   updateCarouselLinkError: jest.fn(),
+  location: {},
+  tags: [],
+  injectedTags: {},
+  selectedOfferDetails: [],
+  handleOnTagsContextChange: jest.fn(),
 };
 
 const renderComponent = (props = {}) => {
@@ -515,7 +663,7 @@ describe('MediaUploaders', () => {
         onCarouselDataChange: mockOnCarouselDataChange,
         carouselActiveTabIndex: 0,
         activeTab: 'ANDROID',
-        formatMessage: (message) => message.defaultMessage,
+        formatMessage: mockFormatMessage,
       });
 
       // Check if the carousel component is rendered
@@ -601,7 +749,7 @@ describe('MediaUploaders', () => {
         onCarouselDataChange: mockOnCarouselDataChange,
         carouselActiveTabIndex: 0,
         activeTab: 'ANDROID',
-        formatMessage: (message) => message.defaultMessage,
+        formatMessage: mockFormatMessage,
       });
 
       // First check if the checkbox is checked

package/v2Containers/MobilePushNew/index.js

@@ -2057,6 +2057,11 @@ const MobilePushNew = ({
         updateHandler,
         deleteHandler,
         deepLink,
+        location,
+        tags,
+        injectedTags,
+        selectedOfferDetails,
+        handleOnTagsContextChange,
       };
 
       const linkProps = {
@@ -2085,6 +2090,10 @@ const MobilePushNew = ({
           linkProps={linkProps}
           sameContent={sameContent}
           formatMessage={formatMessage}
+          location={location}
+          tags={tags}
+          injectedTags={injectedTags}
+          selectedOfferDetails={selectedOfferDetails}
         />
       );
     }, [androidContent, iosContent, androidTitleError, iosTitleError, androidMessageError, iosMessageError, androidExternalLinkError, iosExternalLinkError, androidDeepLinkError, iosDeepLinkError, androidDeepLinkKeysError, iosDeepLinkKeysError, formatMessage, activeTab, imageSrc, isFullMode, imageData, androidAssetList, iosAssetList, videoState, videoData, location, tags, injectedTags, selectedOfferDetails, primaryButtonAndroid, secondaryButtonAndroid, primaryButtonIos, secondaryButtonIos, ctaData, deepLink, mobilePushActions, carouselActiveTabIndex, carouselLinkErrors, handleTitleChange, handleMessageChange, handleMediaTypeChange, handleActionOnClickChange, handleLinkTypeChange, handleDeepLinkChange, handleDeepLinkKeysChange, handleExternalLinkChange, onTagSelect, handleOnTagsContextChange, setUpdateMpushImageSrc, updateOnMpushImageReUpload, setUpdateMpushVideoSrc, updateOnMpushVideoReUpload, clearImageDataByMediaType, handleCarouselDataChange, updateCarouselLinkError, sameContent, updateHandler, deleteHandler]

package/v2Containers/MobilePushNew/index.scss

@@ -150,7 +150,8 @@
 
 .buttons-heading {
   margin-bottom: $CAP_SPACE_12;
-  margin-top: $CAP_SPACE_16;
+  margin-top: $CAP_SPACE_12;
+  margin-right: 48%;
 }
 
 .helper-text {

package/v2Containers/Rcs/index.js

@@ -111,7 +111,7 @@ export const Rcs = (props) => {
     isDltEnabled,
     smsRegister,
     selectedOfferDetails,
-    currentOrgDetails
+    currentOrgDetails,
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
@@ -189,6 +189,76 @@ export const Rcs = (props) => {
     display: flex;
     margin-top: 20px;
   `;
+
+  // tag Code start from here
+  useEffect(() => {
+    if (!showDltContainer) {
+      //fetching tags
+      const { type, module } = location.query || {};
+      const isEmbedded = type === EMBEDDED;
+      const context = isEmbedded ? module : DEFAULT;
+      const embedded = isEmbedded ? type : FULL;
+      const query = {
+        layout: SMS,
+        type: TAG,
+        context,
+        embedded,
+      };
+      if (getDefaultTags) {
+        query.context = getDefaultTags;
+      }
+      globalActions.fetchSchemaForEntity(query);
+    }
+  }, [showDltContainer]);
+
+  useEffect(() => {
+    let tag = get(metaEntities, `tags.standard`, []);
+    const { type, module } = location.query || {};
+    if (type === EMBEDDED && module === LIBRARY && !getDefaultTags) {
+      tag = supportedTags;
+    }
+    updateTags(tag);
+  }, [metaEntities]);
+
+  const handleOnTagsContextChange = (data) => {
+    const { type } = location.query || {};
+    const tempData = (data || '').toLowerCase();
+    const isEmbedded = type === EMBEDDED;
+    const embedded = isEmbedded ? type : FULL;
+    const context = tempData === ALL ? DEFAULT : tempData;
+    const query = {
+      layout: SMS,
+      type: TAG,
+      context,
+      embedded,
+    };
+    globalActions.fetchSchemaForEntity(query);
+  };
+
+  const onTagSelect = (data) => {
+    const tempMsg = `${templateDesc}{{${data}}}`;
+    const error = templateDescErrorHandler(tempMsg);
+    setTemplateDesc(tempMsg);
+    setTemplateDescError(error);
+  };
+
+  const onTagSelectFallback = (data) => {
+    const tempMsg = `${fallbackMessage}{{${data}}}`;
+    const error = fallbackMessageErrorHandler(tempMsg);
+    setFallbackMessage(tempMsg);
+    setFallbackMessageError(error);
+  };
+
+  //removing optout tag for rcs
+  const getRcsTags = () => {
+    const tempTags = cloneDeep(tags);
+    // eslint-disable-next-line no-undef
+    if (tempTags?.length > 0 && tempTags[0]?.definition?.value === 'optout') {
+      tempTags.shift();
+    }
+    return tempTags;
+  };
+  // tag Code end
   const rcsButtonTypeOptions = [
     {
       label: (
@@ -207,6 +277,12 @@ export const Rcs = (props) => {
               buttonTextlen={TEMPLATE_BUTTON_TEXT_MAX_LENGTH}
               updateButtonChange={updateButtonChange}
               suggestions={suggestions}
+              onTagSelect={onTagSelect}
+              location={location}
+              tags={getRcsTags()}
+              onContextChange={handleOnTagsContextChange}
+              injectedTags={injectedTags || {}}
+              selectedOfferDetails={selectedOfferDetails}
             />
           )}
         </>
@@ -306,76 +382,6 @@ export const Rcs = (props) => {
     }
   }, [rcsData.templateDetails || templateData]);
 
-  // tag Code start from here
-  useEffect(() => {
-    if (!showDltContainer) {
-      //fetching tags
-      const { type, module } = location.query || {};
-      const isEmbedded = type === EMBEDDED;
-      const context = isEmbedded ? module : DEFAULT;
-      const embedded = isEmbedded ? type : FULL;
-      const query = {
-        layout: SMS,
-        type: TAG,
-        context,
-        embedded,
-      };
-      if (getDefaultTags) {
-        query.context = getDefaultTags;
-      }
-      globalActions.fetchSchemaForEntity(query);
-    }
-  }, [showDltContainer]);
-
-  useEffect(() => {
-    let tag = get(metaEntities, `tags.standard`, []);
-    const { type, module } = location.query || {};
-    if (type === EMBEDDED && module === LIBRARY && !getDefaultTags) {
-      tag = supportedTags;
-    }
-    updateTags(tag);
-  }, [metaEntities]);
-
-  const handleOnTagsContextChange = (data) => {
-    const { type } = location.query || {};
-    const tempData = (data || '').toLowerCase();
-    const isEmbedded = type === EMBEDDED;
-    const embedded = isEmbedded ? type : FULL;
-    const context = tempData === ALL ? DEFAULT : tempData;
-    const query = {
-      layout: SMS,
-      type: TAG,
-      context,
-      embedded,
-    };
-    globalActions.fetchSchemaForEntity(query);
-  };
-
-  const onTagSelect = (data) => {
-    const tempMsg = `${templateDesc}{{${data}}}`;
-    const error = templateDescErrorHandler(tempMsg);
-    setTemplateDesc(tempMsg);
-    setTemplateDescError(error);
-  };
-
-  const onTagSelectFallback = (data) => {
-    const tempMsg = `${fallbackMessage}{{${data}}}`;
-    const error = fallbackMessageErrorHandler(tempMsg);
-    setFallbackMessage(tempMsg);
-    setFallbackMessageError(error);
-  };
-
-  //removing optout tag for rcs
-  const getRcsTags = () => {
-    const tempTags = cloneDeep(tags);
-    // eslint-disable-next-line no-undef
-    if (tempTags?.length > 0 && tempTags[0]?.definition?.value === 'optout') {
-      tempTags.shift();
-    }
-    return tempTags;
-  };
-  // tag Code end
-
   const renderLabel = (value, showLabel, desc) => (
     <>
       <RcsLabel>