@capillarytech/creatives-library 8.0.168 → 8.0.170-beta.1

package/v2Containers/MobilePush/commonMethods.js

@@ -202,11 +202,33 @@ function getLinkTypeFields({inputFieldsArgs, fieldIndex, deepLinkOptions, formDa
       identifier: inputId,
 
       cols: [
-
+        {
+          // Add label control for external link input
+          id: "title-tagList",
+          label: "Add label",
+          type: "tag-list",
+          metaType: "List",
+          datatype: "select",
+          required: true,
+          fluid: true,
+          onlyDisplay: true,
+          style: {
+            marginRight: "10%",
+            marginTop: "-3%",
+          },
+          styling: "semantic",
+          order: 2,
+          customComponent: true,
+          // Helps handler identify the destination input
+          target: inputId,
+          supportedEvents: [
+            "onTagSelect",
+          ],
+        },
         {
           id: inputId,
           placeholder: "External Link",
-          type: "input",  //Resembles component to be used
+          type: "input", //Resembles component to be used
           metaType: "text",
           datatype: "string",
           errorMessage: <FormattedMessage {...messages.invalidExternalLink}/>,
@@ -215,7 +237,7 @@ function getLinkTypeFields({inputFieldsArgs, fieldIndex, deepLinkOptions, formDa
           width: 18,
           offset: 1,
           style: {
-            width: '100%',
+            width: '95%',
           },
           styling: "semantic",
           order: 1,

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
@@ -4026,5 +4174,52 @@ describe('MediaUploaders', () => {
       // Verify the component renders without errors
       expect(document.querySelector('.mobile-push-carousel-tab')).toBeTruthy();
     });
+
+    it('should handle tag selection for external link in carousel buttons', () => {
+      const mockHandleCarouselExternalLinkChange = jest.fn();
+      
+      const { container } = renderComponent({
+        mediaType: 'CAROUSEL',
+        carouselData: [
+          {
+            mediaType: 'image',
+            imageUrl: 'test.jpg',
+            buttons: [{
+              actionOnClick: true,
+              linkType: 'EXTERNAL_LINK',
+              deepLinkValue: '',
+              deepLinkKeys: [],
+              externalLinkValue: 'https://example.com/',
+            }],
+          }
+        ],
+        carouselActiveTabIndex: 0,
+        activeTab: 'ANDROID',
+        formatMessage: mockFormatMessage,
+        onCarouselDataChange: mockHandleCarouselExternalLinkChange,
+      });
+
+      // Find the TagList component and click the tag select button to trigger the real useCallback
+      const tagSelectButton = container.querySelector('[data-testid="tag-select-button"]');
+      expect(tagSelectButton).toBeTruthy();
+
+      // Click the button to trigger the real onButtonTagSelect useCallback
+      fireEvent.click(tagSelectButton);
+
+      // Verify the handler was called with the correct parameters
+      // The mock TagList calls onTagSelect with 'test-tag', so we expect that
+      expect(mockHandleCarouselExternalLinkChange).toHaveBeenCalledWith(
+        'ANDROID', // platform
+        expect.arrayContaining([
+          expect.objectContaining({
+            buttons: expect.arrayContaining([
+              expect.objectContaining({
+                externalLinkValue: 'https://example.com/{{test-tag}}'
+              })
+            ])
+          })
+        ])
+      );
+    });
   });
 });

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

@@ -42,7 +42,25 @@ jest.mock("@capillarytech/cap-ui-library/CapLabel", () => ({ children }) => <lab
 jest.mock("@capillarytech/cap-ui-library/CapInfoNote", () => ({ message }) => <div data-testid="info-note">{message}</div>);
 
 // Mock child components
-jest.mock("../../../TagList", () => () => <div data-testid="tag-list">TagList</div>);
+jest.mock("../../../TagList", () => ({ onTagSelect, onContextChange, label, ...props }) => (
+  <div data-testid="tag-list">
+    <button 
+      type="button" 
+      onClick={() => onTagSelect && onTagSelect('test_tag')}
+      data-testid="tag-select-button"
+    >
+      Select Tag
+    </button>
+    <button 
+      type="button" 
+      onClick={() => onContextChange && onContextChange('test_context')}
+      data-testid="tag-context-button"
+    >
+      Change Context
+    </button>
+    <span data-testid="tag-label">{label}</span>
+  </div>
+));
 jest.mock("../MediaUploaders", () => () => <div data-testid="media-uploaders">MediaUploaders</div>);
 jest.mock("../CtaButtons", () => () => <div data-testid="cta-buttons">CtaButtons</div>);
 
@@ -840,4 +858,44 @@ describe("PlatformContentFields", () => {
       expect(getByText('query')).toBeInTheDocument();
     });
   });
+
+  it('should handle tag selection for external link in buttons', () => {
+    const mockHandleExternalLinkChange = jest.fn();
+    
+    // Create a test that actually renders the component and triggers the useCallback
+    const { container } = renderComponent({
+      content: {
+        ...defaultProps.content,
+        actionOnClick: true,
+        linkType: EXTERNAL_LINK,
+      },
+      linkProps: {
+        ...defaultProps.linkProps,
+        externalLinkValue: 'https://example.com/',
+      },
+      handlers: {
+        ...defaultProps.handlers,
+        handleExternalLinkChange: mockHandleExternalLinkChange,
+      },
+    });
+
+    // Find the TagList component that's specifically for external link (there should be 3 TagLists total)
+    // One for title, one for message, and one for external link
+    const tagLists = container.querySelectorAll('[data-testid="tag-list"]');
+    expect(tagLists).toHaveLength(3); // title, message, and external link TagLists
+
+    // The external link TagList should be the third one (index 2)
+    const externalLinkTagList = tagLists[2];
+    const tagSelectButton = externalLinkTagList.querySelector('[data-testid="tag-select-button"]');
+    expect(tagSelectButton).toBeTruthy();
+
+    // Click the button to trigger the real onButtonTagSelect useCallback
+    fireEvent.click(tagSelectButton);
+
+    // Verify the handler was called with the correct parameters
+    // The mock TagList calls onTagSelect with 'test_tag', so we expect that
+    expect(mockHandleExternalLinkChange).toHaveBeenCalledWith(
+      'https://example.com/{{test_tag}}' // newUrl with appended tag
+    );
+  });
 });

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 {