@capillarytech/creatives-library 8.0.158 → 8.0.159-alpha.0

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: 'http://localhost:2022/arya/api/v1/creatives',
+    api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/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/package.json

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

package/v2Components/CustomerSearchSection/index.js

@@ -69,7 +69,9 @@ const CustomerSearchSection = ({
       if (value?.trim()) {
         debouncedSearch(value.trim());
       } else {
-        onClearSearch();
+        if (onClearSearch && typeof onClearSearch === 'function') {
+          onClearSearch();
+        }
         setShowDropdown(false);
       }
     },
@@ -182,86 +184,88 @@ const CustomerSearchSection = ({
 
   return (
     <CapRow className="customer-search-section">
-      <CapRow className="search-container" ref={searchContainerRef}>
-        {selectedCustomer ? (
-          <SelectedCustomerView
-            customer={selectedCustomer}
-            onClear={onClear}
-            showIdentifiers={showIdentifiers}
-          />
-        ) : (
-          <SearchInput
-            value={customerSearchValue}
-            onChange={handleSearchChange}
-            isLoading={isSearchingCustomer}
-            error={searchError}
-            disabled={disabled}
-            placeholder={formatMessage(messages.searchPlaceholder)}
-          />
-        )}
-        {showDropdown && !selectedCustomer && (
-          <CapRow className="search-dropdown-container">
-            <CapRow type="flex" justify="center" align="middle">
-              {(processedSearchData?.length === 0 && customerSearchValue != null && !isSearchingCustomer) && (
-                <CapCard className="validation-card">
-                  <CapHeading type="h6">
-                    {formatMessage(messages.noCustomersFound)}
-                  </CapHeading>
-                </CapCard>
-              )}
-              {(isSearchingCustomer) && (
-                <CapCard className="validation-card">
-                  <CapRow className="spin-card-align">
-                    <CapSpin />
-                  </CapRow>
-                </CapCard>
-              )}
-            </CapRow>
-            <CapRow type="flex" justify="center" align="middle">
-              {processedSearchData?.length > 0 && (
-                <CapCard className="search-result-card scroll-bar">
-                  {
-                    <CapRow className="identifier-row">
-                      {processedSearchData?.map((d) => (
-                        <>
-                          <CapLink
-                            key={d?.customerId}
-                            className="search-results-height link-result"
-                            title={(
-                              <>
-                                <CapRow type="flex" align="middle" gutter={16}>
-                                  <CapColumn data-testid="namingIcon">
-                                    <CapRow className="customer-common-profile">{getNamingIcon(d?.name)}</CapRow>
-                                  </CapColumn>
-                                  <CapColumn>
-                                    <CapRow type="flex" gutter={12}>
-                                      <CapColumn data-testid="searchResultName">
-                                        <CapHeading className="search-text" type="h4">
-                                          {d?.name}
-                                        </CapHeading>
-                                      </CapColumn>
-                                    </CapRow>
-                                    {(
-                                      <CapRow type="flex">
-                                        {showIdentifiers(d?.identifiers)}
-                                      </CapRow>
-                                    )}
-                                  </CapColumn>
-                                </CapRow>
-                              </>
-                            )}
-                            onClick={() => handleCustomerSelectItem(d)}
-                          />
-                        </>
-                      ))}
+      <div ref={searchContainerRef}>
+        <CapRow className="search-container">
+          {selectedCustomer ? (
+            <SelectedCustomerView
+              customer={selectedCustomer}
+              onClear={onClear}
+              showIdentifiers={showIdentifiers}
+            />
+          ) : (
+            <SearchInput
+              value={customerSearchValue}
+              onChange={handleSearchChange}
+              isLoading={isSearchingCustomer}
+              error={searchError}
+              disabled={disabled}
+              placeholder={formatMessage(messages.searchPlaceholder)}
+            />
+          )}
+          {showDropdown && !selectedCustomer && (
+            <CapRow className="search-dropdown-container">
+              <CapRow type="flex" justify="center" align="middle">
+                {(processedSearchData?.length === 0 && customerSearchValue != null && !isSearchingCustomer) && (
+                  <CapCard className="validation-card">
+                    <CapHeading type="h6">
+                      {formatMessage(messages.noCustomersFound)}
+                    </CapHeading>
+                  </CapCard>
+                )}
+                {(isSearchingCustomer) && (
+                  <CapCard className="validation-card">
+                    <CapRow className="spin-card-align">
+                      <CapSpin />
                     </CapRow>
-                  }
-                </CapCard>
-              )}
+                  </CapCard>
+                )}
+              </CapRow>
+              <CapRow type="flex" justify="center" align="middle">
+                {processedSearchData?.length > 0 && (
+                  <CapCard className="search-result-card scroll-bar">
+                    {
+                      <CapRow className="identifier-row">
+                        {processedSearchData?.map((d) => (
+                          <>
+                            <CapLink
+                              key={d?.customerId}
+                              className="search-results-height link-result"
+                              title={(
+                                <>
+                                  <CapRow type="flex" align="middle" gutter={16}>
+                                    <CapColumn data-testid="namingIcon">
+                                      <CapRow className="customer-common-profile">{getNamingIcon(d?.name)}</CapRow>
+                                    </CapColumn>
+                                    <CapColumn>
+                                      <CapRow type="flex" gutter={12}>
+                                        <CapColumn data-testid="searchResultName">
+                                          <CapHeading className="search-text" type="h4">
+                                            {d?.name}
+                                          </CapHeading>
+                                        </CapColumn>
+                                      </CapRow>
+                                      {(
+                                        <CapRow type="flex">
+                                          {showIdentifiers(d?.identifiers)}
+                                        </CapRow>
+                                      )}
+                                    </CapColumn>
+                                  </CapRow>
+                                </>
+                              )}
+                              onClick={() => handleCustomerSelectItem(d)}
+                            />
+                          </>
+                        ))}
+                      </CapRow>
+                    }
+                  </CapCard>
+                )}
+              </CapRow>
             </CapRow>
-          </CapRow>
-        )}
-      </CapRow>
+          )}
+        </CapRow>
+      </div>
     </CapRow>
   );
 };

package/v2Components/TestAndPreviewSlidebox/PreviewSection.js

@@ -15,7 +15,7 @@ const PreviewSection = ({
   formatMessage,
   PreviewChrome,
 }) => (
-  <CapRow className="preview-section panel-section">
+  <CapRow className="test-and-preview-section panel-section">
     <PreviewChrome
       device={previewDevice}
       onDeviceChange={setPreviewDevice}

package/v2Components/TestAndPreviewSlidebox/_testAndPreviewSlidebox.scss

@@ -28,6 +28,7 @@
   }
 
   .test-preview-container {
+    margin-left: 2%;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -329,7 +330,7 @@
     }
   }
 
-  .preview-section {
+  .test-and-preview-section {
     .section-title {
       margin-bottom: $CAP_SPACE_16;
       color: #333;

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -93,10 +93,15 @@ const TestAndPreviewSlidebox = (props) => {
   ), [requiredTags, customValues]);
 
   useEffect(() => {
-    if (show && beeInstance) {
+    // Only save BEE content if we're actually using BEE editor
+    const currentTabData = formData[formData.currentTab - 1];
+    const activeTab = currentTabData?.activeTab;
+    const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
+
+    if (show && beeInstance && isDragDrop) {
       beeInstance.save();
     }
-  }, [show, beeInstance]);
+  }, [show, beeInstance, formData]);
 
   useEffect(() => {
     if (show) {
@@ -281,7 +286,35 @@ const TestAndPreviewSlidebox = (props) => {
   };
 
   // Handle update preview
-  const handleUpdatePreview = () => {
+  const handleUpdatePreview = async () => {
+    // For BEE editor, ensure content is saved first
+    const currentTabData = formData[formData.currentTab - 1];
+    const activeTab = currentTabData?.activeTab;
+
+    // Get latest content from BEE editor if needed
+    if (beeInstance && currentTabData?.[activeTab]?.is_drag_drop) {
+      // Trigger save to ensure latest content
+      beeInstance.save();
+
+      // Wait a bit for save to complete
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      // Get latest content from BEE editor
+      beeInstance.getContent((jsonFile, htmlFile) => {
+        const payload = {
+          channel: EMAIL,
+          messageTitle: formData['template-subject'],
+          messageBody: htmlFile || content,
+          resolvedTags: customValues,
+          userId: selectedCustomer?.customerId,
+        };
+
+        actions.updatePreviewRequested(payload);
+      });
+      return;
+    }
+
+    // Use content from formData for non-BEE editor
     const payload = {
       channel: EMAIL,
       messageTitle: formData['template-subject'],
@@ -289,6 +322,7 @@ const TestAndPreviewSlidebox = (props) => {
       resolvedTags: customValues,
       userId: selectedCustomer?.customerId,
     };
+
     actions.updatePreviewRequested(payload);
   };
 

package/v2Components/TestAndPreviewSlidebox/tests/PreviewSection.test.js

@@ -91,7 +91,7 @@ describe('PreviewSection', () => {
         </TestWrapper>
       );
 
-      expect(container.querySelector('.preview-section')).toBeTruthy();
+      expect(container.querySelector('.test-and-preview-section')).toBeTruthy();
       expect(container.querySelector('.panel-section')).toBeTruthy();
     });
   });

package/v2Containers/Email/index.js

@@ -592,27 +592,24 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   onChange = (evt) => {
     const {isFullMode, showTemplateName} = this.props;
     const formData = _.cloneDeep(this.state.formData);
+    const currentTabData = formData[this.state.currentTab - 1];
+    const activeTab = currentTabData?.activeTab;
 
-    //if (evt.editor.name.indexOf('editor') === -1) {
-    // _.forEach(window.CKEDITOR.instances, (winInstance) => {
-    //   const temp = winInstance;
-    //   if (winInstance.name === evt.editor.name) {
-    //
-    //     setTimeout(() => {
-    //       //temp.name = id;
-    //     }, 1000);
-    //     //temp.name = id;
-    //
-    //   }
-    // });
-    //}
-    if (!formData[this.state.currentTab - 1][formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop) {
-      formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab][`template-content`] = _.cloneDeep(evt.editor.getData());
-      if (formData[`${this.state.currentTab - 1}`].tabKey === formData.base.tabKey) {
-        formData.base[formData[`${this.state.currentTab - 1}`].activeTab][`template-content`] = _.cloneDeep(evt.editor.getData());
+    // Only handle CKEditor changes
+    if (currentTabData && activeTab && !currentTabData[activeTab]?.is_drag_drop) {
+      const newContent = evt.editor.getData();
+      
+      // Update formData with new content
+      currentTabData[activeTab]['template-content'] = _.cloneDeep(newContent);
+      if (currentTabData.tabKey === formData.base.tabKey) {
+        formData.base[activeTab]['template-content'] = _.cloneDeep(newContent);
       }
 
-      this.setState({formData, content: evt.editor.getData()}, () => {
+      // Update state with new content
+      this.setState({
+        formData,
+        content: newContent // Keep latest content in state
+      }, () => {
         if (isFullMode && showTemplateName) {
           showTemplateName({formData, onFormDataChange: this.onFormDataChange});
         }
@@ -827,8 +824,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const currentTabData = formData[currentTab - 1];
     const activeTab = currentTabData?.activeTab;
     
+    // Get content from formData
     if (currentTabData && activeTab && currentTabData[activeTab]) {
-      return currentTabData[activeTab]['template-content'] || '';
+      const isDragDrop = currentTabData[activeTab].is_drag_drop;
+      const templateContent = currentTabData[activeTab]['template-content'];
+      return templateContent || '';
     }
     
     return '';
@@ -2471,9 +2471,39 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const formData = _.cloneDeep(this.state.formData);
     const activeLangTab = formData[`${this.state.currentTab - 1}`].activeTab;
     const langIndex = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(activeLangTab);
+    
+    // Store current content before switching
+    const currentContent = formData[`${this.state.currentTab - 1}`][activeLangTab]['template-content'];
+    
+    // Update formData to mark as not drag-drop
+    formData[`${this.state.currentTab - 1}`][activeLangTab].is_drag_drop = false;
+    if (formData[`${this.state.currentTab - 1}`].base) {
+      formData.base[activeLangTab].is_drag_drop = false;
+    }
+    
+    this.setState({
+      mode: "switchEditor",
+      formData
+    }, () => {
+      // No need to call handleEdmSave as we're switching to CKEditor
+      let schema = _.cloneDeep(this.state.schema);
+      _.forEach(schema.containers, (container, index) => {
+        if (parseInt(index, 10) === (this.state.currentTab - 1)) {
+          const temp = container;
+          const langTab = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(activeLangTab);
+
+          temp.panes[langTab].sections[0].inputFields[0].cols[0].colStyle = {display: ""};
+          temp.panes[langTab].sections[0].inputFields[0].cols[1].colStyle = {display: "none"};
+          temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].colStyle.display = "none";
+        }
+      });
+      schema = this.showInsertImageButton(schema);
 
-    this.setState({mode: "switchEditor"}, () => {
-      this.handleEdmSave();
+      this.setState({ 
+        schema, 
+        showConfirmationModal: false, 
+        isSchemaChanged: true 
+      });
     });
   }
 
@@ -2668,22 +2698,26 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.beeInstance = instance;
   }
   saveBeeData = (json, html) => {
+    // Update state with new content
     this.setState((prevState) => {
       const { currentTab, formData } = _.cloneDeep(prevState);
       const activeTab = formData[currentTab - 1].activeTab;
+      
+      // Update content in both formData and base
       formData[currentTab - 1][activeTab]['template-content'] = html;
       formData[currentTab - 1][activeTab]['json-content'] = json;
-
       formData.base[activeTab]['template-content'] = html;
       formData.base[activeTab]['json-content'] = json;
 
       return {
         ...prevState,
         formData,
+        content: html // Keep latest content in state
       };
     }, () => {
-      !this.props.showTestAndPreviewSlidebox && this.setState({
-        startValidation: true,
+      // Always trigger validation to ensure content is saved
+      this.setState({
+        startValidation: true
       });
     });
   }
@@ -2697,6 +2731,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const imagePreviewHeader = (<h3>{this.props.intl.formatMessage(messages.h3imageSelection)}</h3>);
     const imagePreviewContent = this.getImagePreviewContent();
     const { selectedOfferDetails, getDefaultTags, Email: { CmsSettings = {} } = {}, moduleType = '', showTestAndPreviewSlidebox, handleTestAndPreview, handleCloseTestAndPreview } = this.props;
+    const testAndPreviewContent = this.getTemplateContent();
     if (!this.props.currentOrgDetails || !this.props.currentOrgDetails.basic_details) {
       return (<div>Loading...</div>);
     }
@@ -2796,7 +2831,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           onClose={handleCloseTestAndPreview}
           formData={this.state.formData}
           beeInstance={this.beeInstance}
-          content={this.getTemplateContent()}
+          content={testAndPreviewContent}
           currentChannel={EMAIL}
         />
       </div>

package/utils/whatsappMediaUtils.js

@@ -1,44 +0,0 @@
-/**
- * Utility functions for handling WhatsApp media URL transformations
- */
-
-/**
- * Extracts creative ID from media URL pattern
- * @param {string} mediaUrl - URL with pattern {{media_content(<creativeId>_<mediaDetailId>)}}
- * @returns {string|null} - Extracted creative ID or null if not found
- */
-export const extractCreativeIdFromMediaUrl = (mediaUrl) => {
-  if (!mediaUrl || typeof mediaUrl !== 'string') {
-    return null;
-  }
-
-  // Extract creativeId from pattern: {{media_content(<creativeId>_<mediaDetailId>)}}
-  const match = mediaUrl.match(/\{\{media_content\(([^_]+)_[^)]+\)\}\}/);
-  return match ? match[1] : null;
-};
-
-/**
- * Creates URL mapping from API response format to template pattern format
- * @param {Object} mediaDetails - API response with format {url: "mediaDetailId_creativeId"}
- * @returns {Object} - Mapping object {creativeId_mediaDetailId: url}
- */
-export const createMediaUrlMapping = (mediaDetails) => {
-  const mediaUrlMap = {};
-
-  if (!mediaDetails || typeof mediaDetails !== 'object') {
-    return mediaUrlMap;
-  }
-
-  Object.keys(mediaDetails).forEach(url => {
-    const value = mediaDetails[url];
-    // API response format: "mediaDetailId_creativeId"
-    // We need to reverse it to match our pattern: "creativeId_mediaDetailId"
-    if (typeof value === 'string' && value.includes('_')) {
-      const [mediaDetailId, creativeId] = value.split('_');
-      const templatePattern = `${mediaDetailId}_${creativeId}`;
-      mediaUrlMap[templatePattern] = url;
-    }
-  });
-
-  return mediaUrlMap;
-};

package/v2Containers/Email/tests/index.test.js

@@ -1,35 +0,0 @@
-import React from "react";
-import { injectIntl } from 'react-intl';
-import '@testing-library/jest-dom';
-import {
-  render,
-} from '../../../utils/test-utils';
-import { EMAILPreviewMockData } from '../mockdata/mockdata';
-import { Email } from "../index";
-
-const initializeComponent = () => {
-  const Component = injectIntl(Email);
-  const resetUploadData = jest.fn();
-  const clearStoreValues = jest.fn();
-  const clearCRUDResponse = jest.fn();
-  const fetchSchemaForEntity = jest.fn();
-
-  return render( <Component
-    {...EMAILPreviewMockData}
-    templatesActions={{resetUploadData}}
-    actions={{
-      clearStoreValues,
-      clearCRUDResponse,
-    }}
-    globalActions={{
-      fetchSchemaForEntity,
-    }}
-    />);
-};
-
-describe('renders a message', () => {
-  it("Test if Email component renders", () => {
-    initializeComponent();
-  });
-});
-