@capillarytech/creatives-library 8.0.236-beta.0 → 8.0.237

package/config/app.js

@@ -20,7 +20,7 @@ const config = {
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
-    api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
+    api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',

package/constants/unified.js

@@ -45,7 +45,6 @@ export const GIFT_CARDS = 'GIFT_CARDS';
 export const PROMO_ENGINE = 'PROMO_ENGINE';
 export const LIQUID_SUPPORT = 'ENABLE_LIQUID_SUPPORT';
 export const ENABLE_NEW_MPUSH = 'ENABLE_NEW_MPUSH';
-export const SUPPORT_CK_EDITOR = 'SUPPORT_CK_EDITOR';
 export const CUSTOM_TAG = 'CustomTagMessage';
 export const CUSTOMER_EXTENDED_FIELD = 'Customer extended fields';
 export const EXTENDED_TAG = 'ExtendedTagMessage';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.236-beta.0",
+  "version": "8.0.237",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -465,11 +465,6 @@ export const getCmsTemplateSettingsV2 = (cmsType, projectId, cmsMode, langId, is
   return API.get(url);
 };
 
-export const getCmsAccounts = (cmsType) => {
-  const url = `${API_ENDPOINT}/cms/accounts?type=${cmsType}`;
-  return API.get(url);
-};
-
 export const getCmsTemplateData = (cmsType, projectId, langId) => {
   const url = `${API_ENDPOINT}/cms/getContent?type=${cmsType}&projectId=${projectId}&langId=${langId}`;
   return API.get(url);

package/utils/common.js

@@ -22,8 +22,7 @@ import {
   BADGES_ISSUE,
   ENABLE_WECHAT,
   LIQUID_SUPPORT,
-  ENABLE_NEW_MPUSH,
-  SUPPORT_CK_EDITOR
+  ENABLE_NEW_MPUSH
 } from '../constants/unified';
 import { apiMessageFormatHandler } from './commonUtils';
 
@@ -96,10 +95,6 @@ export const hasLiquidSupportFeature = Auth.hasFeatureAccess.bind(
   LIQUID_SUPPORT,
 );
 
-export const hasSupportCKEditor = Auth.hasFeatureAccess.bind(
-  null,
-  SUPPORT_CK_EDITOR,
-);
 
 export const hasGiftVoucherFeature = Auth.hasFeatureAccess.bind(
   null,

package/v2Components/CapTagList/index.js

@@ -468,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={
@@ -535,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/ErrorInfoNote/style.scss

@@ -1,7 +1,7 @@
 @import "~@capillarytech/cap-ui-library/styles/_variables.scss";
 
 .error-container {
-  width: 100%;
+  width: max-content;
   margin-bottom: $CAP_SPACE_08;
   margin-top: $CAP_SPACE_12;
   background-color: $CAP_COLOR_05;

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -12,7 +12,7 @@
  * Note: Uses injectIntl with forwardRef to provide direct access to CodeEditorPane via ref
  */
 
-import React, { useRef, useCallback, useMemo, useState, useEffect } from 'react';
+import React, { useRef, useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Layout } from 'antd'; // Fallback - no Cap UI equivalent
 import { injectIntl, intlShape } from 'react-intl';
@@ -61,16 +61,6 @@ const HTMLEditor = ({
   showFullscreenButton = true,
   autoSave = true,
   autoSaveInterval = 30000, // 30 seconds
-  // Tag-related props - tags are fetched and managed by parent component (EmailHTMLEditor, INAPP, etc.)
-  tags = [],
-  injectedTags = {},
-  location,
-  eventContextTags = [],
-  selectedOfferDetails = [],
-  channel,
-  userLocale = 'en',
-  moduleFilterEnabled = true,
-  onTagContextChange, // Parent component handles tag fetching
   ...props
 }) => {
   // Separate refs for main and modal editors to avoid conflicts
@@ -127,29 +117,6 @@ const HTMLEditor = ({
   // Use appropriate content hook based on variant
   const content = variant === HTML_EDITOR_VARIANTS.EMAIL ? emailContent : inAppContent;
 
-  // Update content when initialContent prop changes (for edit mode)
-  // This ensures the editor updates when template data loads
-  useEffect(() => {
-    if (isEmailVariant && emailContent && initialContent !== undefined && initialContent !== null) {
-      // Only update if content is different to avoid unnecessary updates
-      if (emailContent.content !== initialContent) {
-        emailContent.updateContent(initialContent, true); // immediate update
-      }
-    } else if (isInAppVariant && inAppContent && initialContent !== undefined && initialContent !== null) {
-      // Handle InApp variant updates
-      const contentToUpdate = typeof initialContent === 'string'
-        ? { [DEVICE_TYPES.ANDROID]: initialContent, [DEVICE_TYPES.IOS]: initialContent }
-        : initialContent;
-      if (inAppContent.updateContent) {
-        const currentContent = inAppContent.getDeviceContent?.(inAppContent.activeDevice);
-        const newContent = contentToUpdate[inAppContent.activeDevice] || contentToUpdate[DEVICE_TYPES.ANDROID] || '';
-        if (currentContent !== newContent) {
-          inAppContent.updateContent(newContent, true);
-        }
-      }
-    }
-  }, [initialContent, isEmailVariant, isInAppVariant]);
-
   // Destructure content properties for cleaner access throughout component
   const {
     activeDevice,
@@ -420,15 +387,6 @@ const HTMLEditor = ({
               ref={mainEditorRef}
               readOnly={readOnly}
               onLabelInsert={handleLabelInsert}
-              tags={tags}
-              injectedTags={injectedTags}
-              location={location}
-              eventContextTags={eventContextTags}
-              selectedOfferDetails={selectedOfferDetails}
-              channel={channel}
-              userLocale={userLocale}
-              moduleFilterEnabled={moduleFilterEnabled}
-              onTagContextChange={onTagContextChange}
             />
 
             {/* Preview Pane */}
@@ -496,28 +454,19 @@ const HTMLEditor = ({
                   readOnly={readOnly}
                   isFullscreenMode={true}
                   onLabelInsert={handleLabelInsert}
-                  tags={tags}
-                  injectedTags={injectedTags}
-                  location={location}
-                  eventContextTags={eventContextTags}
-                  selectedOfferDetails={selectedOfferDetails}
-                  channel={channel}
-                  userLocale={userLocale}
-                  moduleFilterEnabled={moduleFilterEnabled}
-                  onTagContextChange={onTagContextChange}
                 />
 
-                {/* Preview Pane */}
-                <PreviewPane isFullscreenMode={true} isModalContext={true} />
-              </SplitContainer>
+              {/* Preview Pane */}
+              <PreviewPane isFullscreenMode={true} isModalContext={true} />
+            </SplitContainer>
 
-              {/* Validation Display in Modal */}
-              <ValidationErrorDisplay
-                validation={validation}
-                onErrorClick={handleValidationErrorClick}
-                variant={variant}
-                className="html-editor-validation"
-              />
+            {/* Validation Display in Modal */}
+            <ValidationErrorDisplay
+              validation={validation}
+              onErrorClick={handleValidationErrorClick}
+              variant={variant}
+              className="html-editor-validation"
+            />
             </CapRow>
           </CapRow>
         </CapModal>
@@ -532,7 +481,7 @@ HTMLEditor.propTypes = {
   layoutType: PropTypes.string, // Layout type for InApp variant
   initialContent: PropTypes.oneOfType([
     PropTypes.string,
-    PropTypes.objectOf(PropTypes.string), // Per-device content for INAPP variant
+    PropTypes.objectOf(PropTypes.string) // Per-device content for INAPP variant
   ]),
   onSave: PropTypes.func,
   onContentChange: PropTypes.func,
@@ -540,22 +489,11 @@ HTMLEditor.propTypes = {
   readOnly: PropTypes.bool,
   showFullscreenButton: PropTypes.bool,
   autoSave: PropTypes.bool,
-  autoSaveInterval: PropTypes.number,
-  // Tag-related props - tags are fetched and managed by parent component
-  tags: PropTypes.array,
-  injectedTags: PropTypes.object,
-  location: PropTypes.object,
-  eventContextTags: PropTypes.array,
-  selectedOfferDetails: PropTypes.array,
-  channel: PropTypes.string,
-  userLocale: PropTypes.string,
-  moduleFilterEnabled: PropTypes.bool,
-  onTagContextChange: PropTypes.func, // Required - parent must handle tag fetching
+  autoSaveInterval: PropTypes.number
 };
 
 HTMLEditor.defaultProps = {
   variant: HTML_EDITOR_VARIANTS.EMAIL, // Default to email variant
-  layoutType: null,
   initialContent: null, // Will use default from useEditorContent hook
   onSave: null,
   onContentChange: null,
@@ -563,17 +501,7 @@ HTMLEditor.defaultProps = {
   readOnly: false,
   showFullscreenButton: true,
   autoSave: true,
-  autoSaveInterval: 30000,
-  // Tag-related defaults - tags are fetched and managed by parent component
-  tags: [],
-  injectedTags: {},
-  location: null,
-  eventContextTags: [],
-  selectedOfferDetails: [],
-  channel: null,
-  userLocale: 'en',
-  moduleFilterEnabled: true,
-  onTagContextChange: null, // Parent component should provide this
+  autoSaveInterval: 30000
 };
 
 // Export with forwardRef to allow direct access to CodeEditorPane via ref

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -267,6 +267,10 @@
 
 // Focus states and accessibility
 .html-editor {
+  &:focus-within {
+    outline: 0.125rem solid map-get($CAP_PRIMARY, base); // 2px = 0.125rem
+    outline-offset: -0.125rem; // -2px = -0.125rem
+  }
 
   // High contrast mode support
   @media (prefers-contrast: high) {

package/v2Components/HtmlEditor/_index.lazy.scss

@@ -13,7 +13,7 @@
   align-items: center;
   min-height: 25rem; // 400px = 25rem
   background: $CAP_G11; // Light background similar to #fafbfc
-  // border: 0.0625rem solid $CAP_G07; // 1px border similar to #dfe2e7
+  border: 0.0625rem solid $CAP_G07; // 1px border similar to #dfe2e7
   border-radius: 0.5rem; // 8px = 0.5rem
   flex-direction: column;
   gap: 1rem; // 16px = 1rem

package/v2Components/HtmlEditor/components/CodeEditorPane/_codeEditorPane.scss

@@ -31,6 +31,79 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
+
+    .cap-button,
+    .ant-btn,
+    button {
+      color: map-get($CAP_PRIMARY, base);
+      border: none;
+      background: $CAP_WHITE;
+      border-radius: 0.25rem;
+      padding: 0.375rem 0.5rem;
+      font-size: 0.875rem;
+      font-family: $FONT_FAMILY;
+      font-weight: 500;
+      height: auto;
+      min-width: 5.9375rem;
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
+      line-height: 1.25rem;
+      text-align: left;
+
+      &:hover {
+        background: $CAP_G09;
+        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.375rem 0.75rem -0.125rem rgba(9, 30, 66, 0.25);
+        color: map-get($CAP_PRIMARY, base);
+        border: none;
+      }
+
+      &:active,
+      &:focus {
+        background: $CAP_G08;
+        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.125rem 0.25rem -0.125rem rgba(9, 30, 66, 0.25);
+        color: map-get($CAP_PRIMARY, base);
+        border: none;
+      }
+
+      .anticon,
+      .cap-icon {
+        font-size: 1rem;
+        color: map-get($CAP_PRIMARY, base);
+      }
+
+      span {
+        font-size: 0.875rem;
+        font-weight: 500;
+        line-height: 1.25rem;
+        color: map-get($CAP_PRIMARY, base);
+        white-space: nowrap;
+      }
+
+      &:before,
+      &:after {
+        display: none;
+      }
+    }
+
+    .tooltip-add-label-container {
+
+      .cap-button,
+      .ant-btn {
+        color: map-get($CAP_PRIMARY, base);
+        background: $CAP_WHITE;
+        border: none;
+        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
+      }
+    }
+
+    .cap-button-flat,
+    .cap-button-add {
+      background: $CAP_WHITE;
+      color: map-get($CAP_PRIMARY, base);
+      border: none;
+    }
   }
 
   &__content {
@@ -57,17 +130,6 @@
     }
   }
 
-  .code-editor-pane__actions {
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-  }
-  
-  .code-editor-pane__content:hover .code-editor-pane__actions {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  
   .cm-foldGutter {
     width: 1rem;
 
@@ -172,6 +234,31 @@
       top: 0.5rem;
       right: 0.5rem;
       z-index: 20;
+
+      .cap-button,
+      .ant-btn,
+      button {
+        background: $CAP_WHITE;
+        color: map-get($CAP_PRIMARY, base);
+        border: none;
+        border-radius: 0.25rem;
+        padding: 0.375rem 0.5rem;
+        font-size: 0.875rem;
+        font-family: $FONT_FAMILY;
+        font-weight: 500;
+        min-width: 5.9375rem;
+        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
+
+        &:hover {
+          background: $CAP_G09;
+          color: map-get($CAP_PRIMARY, base);
+        }
+
+        &:active {
+          background: $CAP_G08;
+          color: map-get($CAP_PRIMARY, base);
+        }
+      }
     }
 
     .codemirror-editor {