@capillarytech/creatives-library 8.0.340-beta.0 → 8.0.340-beta.0.1

package/package.json

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

package/styles/containers/layout/_layoutPage.scss

@@ -172,7 +172,7 @@
 }
 
 html {
-  font-size: 16px !important;
+  font-size: 14px !important;
 }
 
 .cap-collapsible-new-nav, .l1-enabled-popover-container {

package/v2Components/CapTagList/index.js

@@ -120,7 +120,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   };
 
   onExpand = (expandedKeys, info) => {
-    this.handleOnExpand(info.node.props.eventKey);
+    const node = info && info.node;
+    const eventKey = node && (node.eventKey ?? node.key ?? node.props?.eventKey);
+    this.handleOnExpand(eventKey);
   };
 
   getSearchedExpandedKeys(tags, value = '', parentPath = '') {
@@ -202,9 +204,14 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
 
   handleOnSelect = (selectedKeys, info) => {
     if (selectedKeys.length > 0) {
-      if (info && info.selectedNodes && info.selectedNodes.length > 0 && info.selectedNodes[0].props.isLeaf) {
-        const selectedNode = info.selectedNodes[0];
-        const selectedTagValue = selectedNode?.props?.tagKey || selectedKeys[0];
+      const selectedNode = info && info.selectedNodes && info.selectedNodes[0];
+      if (!selectedNode) {
+        return;
+      }
+      const isLeaf = selectedNode.isLeaf ?? selectedNode.props?.isLeaf;
+      if (isLeaf) {
+        const tagKey = selectedNode.tagKey ?? selectedNode.props?.tagKey;
+        const selectedTagValue = tagKey || selectedKeys[0];
         this.setState({
           tagValue: selectedTagValue,
           selectedNodeKey: selectedKeys[0],
@@ -216,7 +223,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           this.props.onSelect([selectedTagValue], info);
           this.setState({visible: false});
         }
-      } else if (info && info.selectedNodes && info.selectedNodes.length > 0 && !info.selectedNodes[0].props.isLeaf) {
+      } else {
         this.handleOnExpand(selectedKeys[0]);
       }
     }
@@ -419,7 +426,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             <CapSelect
               getPopupContainer={(triggerNode) => triggerNode.parentNode}
               style={{
-                width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit',
+                width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'flex',
               }}
               onChange={this.handleOnChange}
               value={selectedContext}
@@ -479,6 +486,11 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             content={contentSection}
             trigger="click"
             placement={this.props.popoverPlacement || (channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop")}
+            styles={{
+              container: {
+                backgroundColor: 'white'
+              }
+            }}
           >
             <CapTooltip
               title={

package/v2Components/CommonTestAndPreview/CustomValuesEditor.js

@@ -44,7 +44,7 @@ const CustomValuesEditor = ({
         </CapLabel>
       )}
       <CapRow className="editor-header">
-        <CapRow className="json-toggle">
+        <CapRow className="json-toggle" align='middle' justify='start'>
           <span className="toggle-label">
             <FormattedMessage {...messages.showJSON} />
           </span>
@@ -57,7 +57,7 @@ const CustomValuesEditor = ({
       </CapRow>
       {showJSON ? (
         <CapRow className="json-editor">
-          <CapRow className="json-editor-container">
+          <CapRow className="json-editor-container" align='center' justify='start'>
             <CapRow className="line-numbers">
               {JSON.stringify(customValues, null, 2).split('\n').map((_, index) => (
                 <CapRow key={`line-${index + 1}`} className="line-number">
@@ -79,7 +79,7 @@ const CustomValuesEditor = ({
         <>
           {extractedTags?.length > 0 && (
             <CapRow className="values-table">
-              <CapRow className="table-header">
+              <CapRow className="table-header" align='middle' justify='space-between'>
                 <CapLabel type="label31" className="header-cell">
                   <FormattedMessage {...messages.personalizationTags} />
                 </CapLabel>
@@ -88,10 +88,9 @@ const CustomValuesEditor = ({
                 </CapLabel>
               </CapRow>
               {requiredTags.map((tag) => (
-                <CapRow key={tag.fullPath} className="value-row">
-                  <CapRow className="tag-name">
-                    {tag.fullPath}
-                    <span className="required-tag-indicator">*</span>
+                <CapRow key={tag.fullPath} className="value-row" align='middle' justify='start'>
+                  <CapRow className="tag-name" align='top' justify='start'>
+                    {`${tag.fullPath}*`}
                   </CapRow>
                   <CapRow className="tag-input">
                     <CapInput
@@ -125,7 +124,7 @@ const CustomValuesEditor = ({
           )}
         </>
       )}
-      <CapRow className="editor-actions">
+      <CapRow type='flex' align='middle' justify='space-between' className="editor-actions">
         <CapButton
           className="discard-button"
           type="link"

package/v2Components/CommonTestAndPreview/UnifiedPreview/PreviewHeader.js

@@ -45,7 +45,7 @@ const PreviewHeader = ({
           </CapLabel>
         </CapRow>
         {showDeviceToggle && (
-          <CapRow className="device-toggle">
+          <CapRow type="flex" align="middle" className="device-toggle">
             {isAndroidIosToggle ? (
               // Android/iOS toggle for SMS, WhatsApp, RCS, InApp, and MobilePush
               <>

package/v2Components/CommonTestAndPreview/UnifiedPreview/SmsPreviewContent.js

@@ -106,11 +106,13 @@ const SmsPreviewContent = ({
       {/* Content Overlay */}
       <CapRow className={`sms-content-overlay sms-content-overlay-${device} sms-preview sms-${device}`}>
         {/* Navigation Bar */}
-        <CapRow useLegacy className={`sms-navigation-bar ${!showHeader ? 'sms-navigation-bar-no-header' : ''}`}>
-          <CapIcon type="chevron-left" className="sms-back-arrow" />
-          <CapLabel type="label15" className="sms-sender-id">
-            {senderId || formatMessage(messages.senderId)}
-          </CapLabel>
+        <CapRow className={`sms-navigation-bar ${!showHeader ? 'sms-navigation-bar-no-header' : ''}`}>
+          <CapRow type='flex' align='middle' justify='center'>
+            <CapIcon type="chevron-left" className="sms-back-arrow" />
+            <CapLabel type="label15" className="sms-sender-id">
+              {senderId || formatMessage(messages.senderId)}
+            </CapLabel>
+          </CapRow>
           <CapIcon type="more" className="sms-menu-icon" />
         </CapRow>
 

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -556,11 +556,11 @@
   }
 
   // SMS Preview Content Styles (Phase 7)
-  .sms-device-container {
+  .sms-device-container.ant-row {
     position: relative;
     display: flex;
     justify-content: center;
-    align-items: flex-start;
+    align-items: center !important;
     width: 100%;
     margin: 0 auto;
 
@@ -619,8 +619,9 @@
       // Navigation Bar
       .sms-navigation-bar {
         display: flex;
+        position: relative;
         align-items: center;
-        justify-content: space-between;
+        justify-content: center;
         padding: $CAP_SPACE_12 $CAP_SPACE_16;
         height: $CAP_SPACE_48;
         background: $CAP_G09;
@@ -644,6 +645,8 @@
         }
 
         .sms-menu-icon {
+          position: absolute;
+          right: $CAP_SPACE_20;
           font-size: $FONT_SIZE_L;
           color: #595959;
           cursor: pointer;
@@ -690,6 +693,7 @@
             font-size: $FONT_SIZE_M;
             line-height: 1.4;
             word-wrap: break-word;
+            max-width: 14.286rem;
 
             .message-pop {
               .rcs-image {

package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss

@@ -364,6 +364,7 @@
         user-select: none;
         min-width: $CAP_SPACE_40;
         flex-shrink: 0;
+        flex-direction: column;
 
         .line-number {
           text-align: right;
@@ -521,6 +522,7 @@
           padding: $CAP_SPACE_12 $CAP_SPACE_16;
           color: #333;
           word-break: break-all;
+          max-width: 10rem;
         }
 
         .tag-input {
@@ -528,6 +530,11 @@
           padding: $CAP_SPACE_08 $CAP_SPACE_16;
           display: flex;
           align-items: center;
+          
+          input {
+            height: $CAP_SPACE_32;
+            font-size: $FONT_SIZE_M
+          }
         }
       }
     }
@@ -580,6 +587,10 @@
       color: #666;
     }
 
+    .ant-collapse-borderless {
+      background-color: transparent;
+    }
+
     .ant-collapse-header {
       padding-left: 0;
     }
@@ -588,14 +599,24 @@
       padding-left: 0 !important;
     }
 
+    .accordion-content-wrapper {
+      padding-left: $CAP_SPACE_08;
+    }
+
     .send-test-content {
       flex-direction: column;
       align-items: stretch;
       gap: 0;
     }
 
+    .cap-tree-select-v2-select-slot {
+      height: $CAP_SPACE_40;
+      max-height: 21.429rem;
+    }
+
     .test-customers-tree-select {
       width: 100%;
+      height: 100% !important;
       min-width: 18rem;
       /* Consistent dropdown width in campaigns and creatives */
       min-height: $CAP_SPACE_40;
@@ -606,6 +627,10 @@
         min-height: $CAP_SPACE_40;
         height: auto !important;
       }
+
+      .ant-select-content {
+        height: 100%;
+      }
     }
 
     .send-test-content .ant-btn {
@@ -707,7 +732,8 @@
       padding: $CAP_SPACE_06 $CAP_SPACE_08;
       border-radius: $CAP_SPACE_08;
 
-      .anticon {
+      .anticon,
+      .cap-icon-v2 {
         padding: $CAP_SPACE_04;
         border-radius: $CAP_SPACE_04;
         cursor: pointer;

package/v2Components/CommonTestAndPreview/index.js

@@ -2959,7 +2959,7 @@ const CommonTestAndPreview = (props) => {
 
   // Header content for the slidebox
   const slideboxHeader = (
-    <CapRow className="test-preview-header">
+    <CapRow type="flex" align="middle" className="test-preview-header">
       <CapIcon type="arrow-left" onClick={handleClose} className="back-icon" />
       <CapHeader title={<FormattedMessage {...messages.testAndPreviewHeader} />} />
     </CapRow>
@@ -2981,7 +2981,7 @@ const CommonTestAndPreview = (props) => {
           className={`common-test-preview-lookup-spin ${isCustomerDataLoading ? 'common-test-preview-customer-loading' : ''}`}
         >
           <CapRow className="test-preview-container">
-            <CapRow className="test-and-preview-panels">
+            <CapRow type="flex" align="stretch" className="test-and-preview-panels">
               {/* Left Panel */}
               <CapRow useLegacy className="left-panel">
                 {channel === CHANNELS.ZALO ? null : renderLeftPanelContent()}

package/v2Components/TestAndPreviewSlidebox/CustomValuesEditor.js

@@ -79,7 +79,7 @@ const CustomValuesEditor = ({
         <>
           {extractedTags?.length > 0 && (
             <CapRow className="values-table">
-              <CapRow className="table-header">
+              <CapRow type="flex" className="table-header">
                 <CapLabel type="label31" className="header-cell">
                   <FormattedMessage {...messages.personalizationTags} />
                 </CapLabel>

package/v2Containers/MobilePushNew/index.scss

@@ -332,9 +332,9 @@
   }
 }
 
-.note-message-container {
-  display: flex;
-  align-items: center;
+.note-message-container.cap-row-vertical {
+  flex-direction: row !important;
+  flex-wrap: nowrap;
 }
 
 .save-section {

package/v2Containers/Sms/Create/_smsCreate.scss

@@ -1,13 +1,20 @@
-.creatives-sms-footer{
-  display: inline-flex;
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+.cap-row-v2.ant-row-legacy.creatives-sms-footer {
+  display: flex !important;
 }
 .tag-container{
   .add-label{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
     button{
       float: right;
       top: 8px;
       z-index: 100;
       padding: unset !important;;
+      color: map-get($CAP_SECONDARY, base);
     }
   }
 }