@capillarytech/creatives-library 8.0.262 → 8.0.264

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,22 +167,21 @@ 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"
@@ -214,7 +213,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)}
@@ -223,37 +222,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>
-                )
-              }
+          <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",
+              }}
             />
-            {!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 && (
             <>
@@ -280,16 +279,14 @@ 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 && (
@@ -313,21 +310,19 @@ 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/CapTagList/index.js

@@ -227,10 +227,6 @@ 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 = () => {
@@ -472,7 +468,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             onVisibleChange={this.togglePopoverVisibility}
             content={contentSection}
             trigger="click"
-            placement={this.props.popoverPlacement || (channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop")}
+            placement={channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop"}
           >
             <CapTooltip
               title={
@@ -539,7 +535,6 @@ CapTagList.propTypes = {
   channel: PropTypes.string,
   disabled: PropTypes.bool,
   fetchingSchemaError: PropTypes.bool,
-  popoverPlacement: PropTypes.string,
 };
 
 CapTagList.defaultValue = {

package/v2Components/CapTagListWithInput/index.js

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

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

@@ -4,11 +4,6 @@ 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 = (

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -913,7 +913,7 @@
       // Colors adjusted to white for preview context (inside .message-pop with blue background)
       .whatsapp-template-header-preview {
         // From WhatsApp/index.scss: color: $CAP_G01, but use white for preview
-        color: $CAP_WHITE;
+        color: $CAP_G01;
         // From WhatsApp/index.scss: font-weight: $FONT_WEIGHT_MEDIUM
         font-weight: $FONT_WEIGHT_MEDIUM;
         // From WhatsApp/index.scss: font-size: $FONT_SIZE_VS
@@ -927,7 +927,7 @@
   
       .whatsapp-template-footer-preview {
         // From WhatsApp/index.scss: color: $CAP_G04, but use white for preview
-        color: $CAP_WHITE;
+        color: $CAP_G01;
         // From WhatsApp/index.scss: font-weight: $FONT_WEIGHT_REGULAR
         font-weight: $FONT_WEIGHT_REGULAR;
         // From WhatsApp/index.scss: font-size: 0.5rem