@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.2

package/v2Components/CapDeviceContent/index.js

@@ -69,7 +69,7 @@ const CapDeviceContent = (props) => {
     templateDescErrorHandler,
     templateTitleError,
     setTemplateTitleError,
-    isAiContentBotDisabled
+    isAiContentBotDisabled,
   } = props || {};
   const { TextArea } = CapInput;
   const { formatMessage } = intl;
@@ -167,21 +167,22 @@ const CapDeviceContent = (props) => {
   return (
     <>
       <CapRow className="creatives-device-content">
-       <CapLink
+        <CapLink
           title={isAndroid
-              ? formatMessage(messages.copyContentFromIOS)
-              : formatMessage(messages.copyCotentFromAndroid)}
+            ? formatMessage(messages.copyContentFromIOS)
+            : formatMessage(messages.copyCotentFromAndroid)}
           className="inapp-copy-content"
           onClick={onCopyTitleAndContent}
-          />
+        />
         <CapRow className="creatives-inapp-title">
           <CapColumn
-           className="inapp-content-main"
+            className="inapp-content-main"
           >
             <CapHeading type="h5" className="inapp-title">
               {formatMessage(messages.title)}
             </CapHeading>
-            {getTagList(0)} {/* here 0 signifies the tags for template title */}
+            {getTagList(0)}
+            {/* here 0 signifies the tags for template title */}
           </CapColumn>
           <CapInput
             id="inapp-title-name-input"
@@ -213,7 +214,7 @@ const CapDeviceContent = (props) => {
         </CapRow>
         <CapRow className={`creatives-inapp-message ${!isMediaTypeImage && "message-bottom-margin"}`}>
           <CapColumn
-           className="inapp-message-header"
+            className="inapp-message-header"
           >
             <CapHeading type="h5" className="inapp-message-header-style">
               {formatMessage(messages.message)}
@@ -222,37 +223,37 @@ const CapDeviceContent = (props) => {
             {/* here 1 signifies the tags for template message */}
           </CapColumn>
           <div className="inapp-create-template-message-input-wrapper">
-          <TextArea
-            id="inapp-create-template-message-input"
-            className="inapp-create-template-message-input"
-            placeholder={formatMessage(messages.textAreaInputPlaceholder)}
-            onChange={onTemplateMessageChange}
-            value={templateMessage || ""}
-            autosize={{ minRows: 5, maxRows: 5 }}
-            errorMessage={
-              templateMessageError && (
-                <CapError className="inapp-template-message-error">
-                  {templateMessageError}
-                </CapError>
-              )
-            }
-          />
-          {!isAiContentBotDisabled && (
-            <CapAskAira.ContentGenerationBot
-              text={templateMessage || ""}
-              setText={(text) => {
-                onTemplateMessageChange({ target: { value: text } }); 
-              }}
-              iconPlacement="float-br"
-              iconSize="1.6rem"
-              rootStyle={{
-                bottom: "0.2rem",
-                right: "0.2rem",
-                left: "auto",
-                position: "absolute",
-              }}
+            <TextArea
+              id="inapp-create-template-message-input"
+              className="inapp-create-template-message-input"
+              placeholder={formatMessage(messages.textAreaInputPlaceholder)}
+              onChange={onTemplateMessageChange}
+              value={templateMessage || ""}
+              autosize={{ minRows: 5, maxRows: 5 }}
+              errorMessage={
+                templateMessageError && (
+                  <CapError className="inapp-template-message-error">
+                    {templateMessageError}
+                  </CapError>
+                )
+              }
             />
-          )}
+            {!isAiContentBotDisabled && (
+              <CapAskAira.ContentGenerationBot
+                text={templateMessage || ""}
+                setText={(text) => {
+                  onTemplateMessageChange({ target: { value: text } });
+                }}
+                iconPlacement="float-br"
+                iconSize="1.6rem"
+                rootStyle={{
+                  bottom: "0.2rem",
+                  right: "0.2rem",
+                  left: "auto",
+                  position: "absolute",
+                }}
+              />
+            )}
           </div>
           {isMediaTypeImage && (
             <>
@@ -279,14 +280,16 @@ const CapDeviceContent = (props) => {
         </CapRow>
       </CapRow>
       <CapRow className="inapp-action-link">
-        <CapCheckbox onChange={onActionLinkCheckBoxChange} checked={addActionLink}/>
+        <CapCheckbox onChange={onActionLinkCheckBoxChange} checked={addActionLink} />
         <CapRow className="inapp-render-heading">
           <CapHeader
-            title={<CapRow type="flex">
-              <CapHeading type="h4">
-                {formatMessage(messages.addActionLink)}
-              </CapHeading>
-            </CapRow>}
+            title={(
+              <CapRow type="flex">
+                <CapHeading type="h4">
+                  {formatMessage(messages.addActionLink)}
+                </CapHeading>
+              </CapRow>
+            )}
             description={<CapLabel type="label3">{formatMessage(messages.addActionLinkDesc)}</CapLabel>}
           />
           {addActionLink && (
@@ -310,19 +313,21 @@ const CapDeviceContent = (props) => {
       <CapRow className="inapp-cta-button">
         <CapHeader
           className="inapp-render-heading-cta-button"
-          title={<CapRow type="flex">
-            <CapHeading type="h4">
-              {formatMessage(messages.btnLabel)}
-            </CapHeading>
-            <CapHeading
-              type="h6"
-              className="inapp-optional-label"
-            >
-              {formatMessage(messages.optional)}
-            </CapHeading>
-          </CapRow>}
+          title={(
+            <CapRow type="flex">
+              <CapHeading type="h4">
+                {formatMessage(messages.btnLabel)}
+              </CapHeading>
+              <CapHeading
+                type="h6"
+                className="inapp-optional-label"
+              >
+                {formatMessage(messages.optional)}
+              </CapHeading>
+            </CapRow>
+          )}
           description={<CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>}
-          />
+        />
         <CapRadioGroup
           options={BUTTON_RADIO_OPTIONS}
           value={buttonType}

package/v2Components/CapImageUpload/constants.js

@@ -4,6 +4,4 @@ export const MAX_SUPPORTED_IMAGE_SIZE = {
   INAPP: 5,
   WHATSAPP: 5,
   MOBILEPUSH: 2,
-  WEBPUSH: 5,
-  WEBPUSH_BRAND_ICON: 1
 };

package/v2Components/CapImageUpload/index.js

@@ -17,18 +17,17 @@ import {
   CapImage,
   CapError,
 } from '@capillarytech/cap-ui-library';
-import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
+import { injectIntl, FormattedMessage, intlShape} from 'react-intl';
 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, WEBPUSH, WEBPUSH_BRAND_ICON
+  FACEBOOK, INAPP, RCS, WHATSAPP, VIBER,
 } from "../../v2Containers/CreativesContainer/constants";
 
 import messages from './messages';
 import { MOBILEPUSH } from '../CapVideoUpload/constants';
-import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 function CapImageUpload(props) {
   const {
     intl,
@@ -51,7 +50,6 @@ function CapImageUpload(props) {
     channelSpecificStyle,
     showReUploadButton = true,
     disableAutoRestore = false, // New prop to disable automatic restoration
-    recommendedDimensions, // Array of {width, height} objects for recommended dimensions
   } = props;
   const {
     formatMessage,
@@ -74,7 +72,7 @@ function CapImageUpload(props) {
   const [isImageError, updateImageErrorMessage] = useState(false);
   const [isDrawerRequired, updateDrawerRequirement] = useState(false);
 
-  const { CapHeadingSpan } = CapHeading;
+  const {CapHeadingSpan} = CapHeading;
   const ImageComponent = useCallback(
     () => (
       <>
@@ -93,7 +91,7 @@ function CapImageUpload(props) {
 
   const WithLabel = LabelHOC(ImageComponent);
 
-  const uploadImages = useCallback((e, { files }) => {
+  const uploadImages = useCallback((e, {files}) => {
     if (e) {
       e.preventDefault();
     }
@@ -111,13 +109,13 @@ function CapImageUpload(props) {
         height: img.height,
         error: file && (file.size / (1e+6) > 5), // Checking if file exists and its size is greater than 5MB (5 * 10^6 bytes)
       };
-      submitAction({ file, type: 'image', fileParams }, incorrectFile);
+      submitAction({file, type: 'image', fileParams}, incorrectFile);
     };
     img.onerror = () => {
       const fileParams = {
         error: true,
       };
-      submitAction({ fileParams }, incorrectFile);
+      submitAction({fileParams}, incorrectFile);
     };
     if (e) {
       const event = e;
@@ -125,7 +123,7 @@ function CapImageUpload(props) {
     }
   }, []);
 
-  const rcsValidation = useCallback((incorrectFile, data, size, height, width, error) => {
+  const rcsValidation = useCallback((incorrectFile, data, size, height, width, error) => { 
     if (incorrectFile || size < minImgSize || size > imgSize || height !== imgHeight || width !== imgWidth || error) {
       updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
     } else {
@@ -148,19 +146,6 @@ function CapImageUpload(props) {
     const { height, width, error } = fileParams || {};
     if (channel === RCS) {
       rcsValidation(incorrectFile, data, size, height, width, error);
-    } else if ([WEBPUSH, WEBPUSH_BRAND_ICON].includes(channel)) {
-      // For WEBPUSH, only validate file extension, size, and format - no dimension validation
-      if (incorrectFile || size > imgSize || error) {
-        updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
-      } else {
-        updateImageErrorMessage('');
-        uploadAsset(
-          data.file,
-          data.type,
-          data.fileParams,
-          index,
-        );
-      }
     } else if (incorrectFile || size > imgSize || height > imgHeight || width > imgWidth || error) {
       updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
     } else {
@@ -175,7 +160,7 @@ function CapImageUpload(props) {
   }, [isImageError]);
 
   const capUploaderCustomRequest = useCallback((uploadData) => {
-    uploadImages(undefined, { files: [uploadData.file] });
+    uploadImages(undefined, {files: [uploadData.file]});
   }, [uploadImages]);
 
   const setDrawerVisibility = useCallback((drawervisibleFlag) => updateDrawerRequirement(drawervisibleFlag), [isDrawerRequired]);
@@ -196,27 +181,19 @@ function CapImageUpload(props) {
       secure_file_path: image, width, height, file_size: size,
     } = get(imageTemplate, 'metaInfo', {});
     updateDrawerRequirement(false);
-    // For WEBPUSH, skip dimension validation - only check extension, size
-    if ([WEBPUSH, WEBPUSH_BRAND_ICON].includes(channel)) {
-      if (!allowedExtensionsRegex.test(image) || size > imgSize) {
-        updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
-      } else {
-        updateImageErrorMessage('');
-        updateImageSrc(image);
-      }
-    } else if (!allowedExtensionsRegex.test(image) || height > imgHeight || width > imgWidth || size > imgSize) {
+    if (!allowedExtensionsRegex.test(image) || height > imgHeight || width > imgWidth || size > imgSize ) {
       updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
     } else {
       updateImageErrorMessage('');
       updateImageSrc(image);
     }
-  }, [isImageError, isDrawerRequired, channel, allowedExtensionsRegex, imgSize, formatMessage]);
+  }, [isImageError, isDrawerRequired]);
 
   const getGalleryDrawerContent = useCallback(() => {
     const locationGallery = {
       pathname: `/assets`,
       search: '',
-      query: !isFullMode ? { type: 'embedded', module: 'library' } : {},
+      query: !isFullMode ? {type: 'embedded', module: 'library'} : {},
     };
     return (
       <>
@@ -285,7 +262,7 @@ function CapImageUpload(props) {
           className="dragger-button re-upload"
           type="flat"
           onClick={onReUpload}
-          style={channelSpecificStyle ? { marginTop: `-${CAP_SPACE_16}` } : {}}
+          style={channelSpecificStyle ? { marginTop: '-16px'} : {}}
         >
           <FormattedMessage {...messages.imageReUpload} />
         </CapButton>
@@ -328,18 +305,7 @@ function CapImageUpload(props) {
         )}
         {![WHATSAPP, INAPP].includes(channel) && (
           <CapHeadingSpan type="label2" className="image-dimension">
-            {[WEBPUSH, WEBPUSH_BRAND_ICON].includes(channel) && recommendedDimensions?.length ? (
-              <FormattedMessage
-                {...messages.recommendedDimensions}
-                values={{
-                  dimensions: recommendedDimensions
-                    .map((dim) => `${dim.width} x ${dim.height}px`)
-                    .join(', '),
-                }}
-              />
-            ) : (
-              <FormattedMessage {...messages.imageDimenstionDescription} values={{ width: imgWidth, height: imgHeight }} />
-            )}
+            <FormattedMessage {...messages.imageDimenstionDescription} values={{ width: imgWidth, height: imgHeight }} />
           </CapHeadingSpan>
         )}
         {channel === FACEBOOK && (
@@ -362,7 +328,7 @@ function CapImageUpload(props) {
             getImageSizeLabel()
           )
         )}
-        {[VIBER, INAPP, MOBILEPUSH, WEBPUSH, WEBPUSH_BRAND_ICON].includes(channel) && getImageSizeLabel()}
+        {[VIBER, INAPP, MOBILEPUSH].includes(channel) && getImageSizeLabel()}
         <CapHeadingSpan type="label2" className="image-format">
           {channel === INAPP ? <FormattedMessage {...messages.format2} /> : <FormattedMessage {...messages.format} />}
         </CapHeadingSpan>
@@ -391,12 +357,6 @@ CapImageUpload.propTypes = {
   channel: PropTypes.string,
   channelSpecificStyle: PropTypes.bool,
   disableAutoRestore: PropTypes.bool,
-  recommendedDimensions: PropTypes.arrayOf(
-    PropTypes.shape({
-      width: PropTypes.number.isRequired,
-      height: PropTypes.number.isRequired,
-    })
-  ),
 };
 
 export default injectIntl(CapImageUpload);

package/v2Components/CapImageUpload/index.scss

@@ -19,8 +19,5 @@ $classPrefix: cap-custom-image-upload;
   }
   .upload-image-error{
     margin-top: $CAP_SPACE_04;
-  }
-  .ant-upload-list-item{
-    height: 1.65rem;
-  }
+}
 }

package/v2Components/CapImageUpload/messages.js

@@ -34,10 +34,6 @@ export default defineMessages({
     id: `${scope}.imageDimenstionDescription`,
     defaultMessage: 'Dimensions upto: {width}px x {height}px',
   },
-  recommendedDimensions: {
-    id: `${scope}.recommendedDimensions`,
-    defaultMessage: 'Recommended dimensions: {dimensions}',
-  },
   format: {
     id: `${scope}.format`,
     defaultMessage: 'Format: JPEG, JPG, PNG',

package/v2Components/CapTagList/index.js

@@ -227,6 +227,10 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
 
   togglePopoverVisibility = (visible) => {
     this.setState({visible});
+    // Call onVisibleChange callback if provided (for triggering API calls when popover opens)
+    if (this.props.onVisibleChange) {
+      this.props.onVisibleChange(visible);
+    }
   };
 
   renderDynamicTagFlow = () => {
@@ -468,7 +472,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             onVisibleChange={this.togglePopoverVisibility}
             content={contentSection}
             trigger="click"
-            placement={channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop"}
+            placement={this.props.popoverPlacement || (channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop")}
           >
             <CapTooltip
               title={
@@ -535,6 +539,7 @@ CapTagList.propTypes = {
   channel: PropTypes.string,
   disabled: PropTypes.bool,
   fetchingSchemaError: PropTypes.bool,
+  popoverPlacement: PropTypes.string,
 };
 
 CapTagList.defaultValue = {

package/v2Components/CapTagListWithInput/index.js

@@ -48,13 +48,14 @@ export const CapTagListWithInput = (props) => {
     showTagList = true,
     showInput = true,
     inputProps = {},
+    popoverPlacement,
   } = props;
 
   const { formatMessage } = intl;
 
   return (
     <CapColumn style={containerStyle}>
-      <CapRow style={{display: 'flex', flexDirection: 'row'}}>
+      <CapRow align="middle" type="flex">
         {showHeading && headingText && (
           <CapHeading type={headingType} style={headingStyle}>
             {headingText}
@@ -76,6 +77,7 @@ export const CapTagListWithInput = (props) => {
             selectedOfferDetails={selectedOfferDetails}
             eventContextTags={eventContextTags}
             style={tagListStyle}
+            popoverPlacement={popoverPlacement}
           />
         )}
       </CapRow>
@@ -136,6 +138,7 @@ CapTagListWithInput.propTypes = {
   showHeading: PropTypes.bool,
   showTagList: PropTypes.bool,
   showInput: PropTypes.bool,
+  popoverPlacement: PropTypes.string,
 };
 
 CapTagListWithInput.defaultProps = {
@@ -164,6 +167,7 @@ CapTagListWithInput.defaultProps = {
   showTagList: true,
   showInput: true,
   inputProps: {},
+  popoverPlacement: undefined,
 };
 
 export default injectIntl(CapTagListWithInput);

package/v2Components/CapTagListWithInput/messages.js

@@ -5,6 +5,6 @@ const prefix = 'creatives.componentsV2.CapTagListWithInput';
 export default defineMessages({
   addLabels: {
     id: `${prefix}.addLabels`,
-    defaultMessage: 'Add labels',
+    defaultMessage: 'Add label',
   },
 });

package/v2Components/CapWhatsappCTA/tests/index.test.js

@@ -4,6 +4,11 @@ import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '../../../utils/test-utils';
 import { CapWhatsappCTA } from '../index';
 
+// Mock the missing reducer
+jest.mock('@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/reducer', () => {
+  return (state = {}) => state;
+}, { virtual: true });
+
 const updateHandler = jest.fn();
 const deleteHandler = jest.fn();
 const initializeComponent = (