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

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.1",
   "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/EmailPreview/_emailPreview.scss

@@ -79,6 +79,7 @@
           }
           .email-subject-desktop {
             text-align: left;
+            margin-left: 6%;
             margin-bottom: 8px;
           }
           .tablet-message-container-v2 {

package/v2Components/EmailPreviewV2/_emailPreviewV2.scss

@@ -65,6 +65,7 @@ $classPrefix: email-preview-v2;
               }
               .email-subject-desktop {
                 text-align: left;
+                margin-left: 6%;
                 margin-bottom: 8px;
               }
               .tablet-message-container {

package/v2Components/FormBuilder/index.js

@@ -235,9 +235,15 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       ( !this.state.usingTabContainer || (this.state.usingTabContainer && nextProps.tabKey !== ''))
       && !_.isEqual(nextProps.formData, this.state.formData) &&
       !_.isEqual(nextProps.formData, this.props.formData)) {
-      this.setState({formData: nextProps.formData, tabKey: nextProps.tabKey}, () => {
-        this.validateForm();
-      });
+      // Don't run validation if we're in Test & Preview mode
+      if (!nextProps.isTestAndPreviewMode) {
+        this.setState({formData: nextProps.formData, tabKey: nextProps.tabKey}, () => {
+          this.validateForm();
+        });
+      } else {
+        // Just update formData without validation
+        this.setState({formData: nextProps.formData, tabKey: nextProps.tabKey});
+      }
       //this.resetTabKeys(nextProps.formData, nextProps.tabCount);
     } else if ((_.isEmpty(this.props.formData) || !this.props.formData) && _.isEmpty(this.state.formData)) {
       this.initialiseForm(nextProps.schema, true);
@@ -265,10 +271,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           this.resetTabKeys(nextProps.formData, nextProps.tabCount, false, true);
         }
         if (type === 'embedded' || ( this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'EMAIL')) {
-          this.validateForm();
+          // Don't run validation if we're in Test & Preview mode
+          if (!nextProps.isTestAndPreviewMode) {
+            this.validateForm();
+          }
         }
         if ((this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'MOBILEPUSH')) {
-          this.validateForm();
+          // Don't run validation if we're in Test & Preview mode
+          if (!nextProps.isTestAndPreviewMode) {
+            this.validateForm();
+          }
         }
       });
     }
@@ -286,7 +298,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
 
           this.initialiseForm(nextProps.schema, false, resetTabKeys);
-          this.validateForm();
+          // Don't run validation if we're in Test & Preview mode
+          if (!nextProps.isTestAndPreviewMode) {
+            this.validateForm();
+          }
         }
       });
     }
@@ -299,10 +314,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
 
     if (!_.isEmpty(nextProps.injectedTags) && !_.isEqual(nextProps.injectedTags, this.props.injectedTags)) {
-      this.validateForm(nextProps.tags, nextProps.injectedTags);
+      // Don't run validation if we're in Test & Preview mode
+      if (!nextProps.isTestAndPreviewMode) {
+        this.validateForm(nextProps.tags, nextProps.injectedTags);
+      }
     }
     if (!_.isEmpty(nextProps.tags) && !_.isEqual(nextProps.tags, this.props.tags)) {
-      this.validateForm(nextProps.tags, nextProps.injectedTags);
+      // Don't run validation if we're in Test & Preview mode
+      if (!nextProps.isTestAndPreviewMode) {
+        this.validateForm(nextProps.tags, nextProps.injectedTags);
+      }
     }
     if (!_.isEqual(nextProps.showModal, this.props.showModal)) {
       this.setState({showModal: nextProps.showModal});
@@ -3917,55 +3938,59 @@ FormBuilder.defaultProps = {
   userLocale: localStorage.getItem('jlocale') || 'en',
   showLiquidErrorInFooter: () => {},
   metaDataStatus: "",
+  isTestAndPreviewMode: false, // Default to false to maintain existing behavior
 };
 
 FormBuilder.propTypes = {
   schema: PropTypes.object.isRequired,
-  onSubmit: PropTypes.func,
-  formData: PropTypes.object,
-  onChange: PropTypes.func,
-  isEdit: PropTypes.bool,
-  usingTabContainer: PropTypes.bool,
-  parent: PropTypes.object,
-  iframeParent: PropTypes.object,
-  location: PropTypes.object,
-  tags: PropTypes.array,
-  injectedTags: PropTypes.object,
-  onFormValidityChange: PropTypes.func,
-  checkValidation: PropTypes.bool,
-  onContextChange: PropTypes.func,
-  tabCount: PropTypes.number,
-  isSchemaChanged: PropTypes.bool,
-  modal: PropTypes.object,
-  isNewVersionFlow: PropTypes.bool,
-  baseLanguage: PropTypes.string,
-  supportedLanguages: PropTypes.array,
-  router: PropTypes.object,
-  currentTab: PropTypes.number,
-  showModal: PropTypes.bool,
-  handleCancelModal: PropTypes.func,
-  cmsTemplates: PropTypes.array,
-  getCmsTemplatesInProgress: PropTypes.bool,
-  showEdmEmailTemplates: PropTypes.bool,
-  toggleEdmEmailTemplateSelection: PropTypes.func,
-  handleEdmDefaultTemplateSelection: PropTypes.func,
-  userLocale: PropTypes.string,
-  setModalContent: PropTypes.func,
-  addLanguageType: PropTypes.string,
-  getValidationData: PropTypes.func,
-  startValidation: PropTypes.bool,
-  // saveForm: PropTypes.bool,
-  stopValidation: PropTypes.func,
-  handleDelete: PropTypes.func,
-  intl: intlShape.isRequired,
-  selectedOfferDetails: PropTypes.array,
-  setDrawerVisibility: PropTypes.bool,
-  capDrawerContent: PropTypes.array,
-  isFullMode: PropTypes.bool,
-  currentOrgDetails: PropTypes.object,
-  liquidExtractionInProgress: PropTypes.bool,
-  showLiquidErrorInFooter: PropTypes.func,
-  channel: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  currentTab: PropTypes.number.isRequired,
+  parent: PropTypes.object.isRequired,
+  formData: PropTypes.object.isRequired,
+  location: PropTypes.object.isRequired,
+  tabKey: PropTypes.string.isRequired,
+  tags: PropTypes.array.isRequired,
+  tagModule: PropTypes.string.isRequired,
+  injectedTags: PropTypes.object.isRequired,
+  onFormValidityChange: PropTypes.func.isRequired,
+  handleCancelModal: PropTypes.func.isRequired,
+  usingTabContainer: PropTypes.bool.isRequired,
+  checkValidation: PropTypes.bool.isRequired,
+  onContextChange: PropTypes.func.isRequired,
+  tabCount: PropTypes.number.isRequired,
+  isNewVersionFlow: PropTypes.bool.isRequired,
+  modal: PropTypes.object.isRequired,
+  showModal: PropTypes.bool.isRequired,
+  isEdit: PropTypes.bool.isRequired,
+  iframeParent: PropTypes.object.isRequired,
+  router: PropTypes.object.isRequired,
+  baseLanguage: PropTypes.string.isRequired,
+  supportedLanguages: PropTypes.array.isRequired,
+  isSchemaChanged: PropTypes.bool.isRequired,
+  cmsTemplates: PropTypes.array.isRequired,
+  getCmsTemplatesInProgress: PropTypes.bool.isRequired,
+  showEdmEmailTemplates: PropTypes.bool.isRequired,
+  toggleEdmEmailTemplateSelection: PropTypes.func.isRequired,
+  handleEdmDefaultTemplateSelection: PropTypes.func.isRequired,
+  setModalContent: PropTypes.func.isRequired,
+  addLanguageType: PropTypes.string.isRequired,
+  startValidation: PropTypes.bool.isRequired,
+  getValidationData: PropTypes.func.isRequired,
+  saveForm: PropTypes.bool.isRequired,
+  stopValidation: PropTypes.func.isRequired,
+  selectedOfferDetails: PropTypes.object.isRequired,
+  saveBeeInstance: PropTypes.func.isRequired,
+  saveBeeData: PropTypes.func.isRequired,
+  uuid: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  isEmailLoading: PropTypes.bool.isRequired,
+  moduleType: PropTypes.string.isRequired,
+  showLiquidErrorInFooter: PropTypes.bool.isRequired,
+  eventContextTags: PropTypes.array.isRequired,
+  forwardedTags: PropTypes.object.isRequired,
+  isLoyaltyModule: PropTypes.bool.isRequired,
+  isTestAndPreviewMode: PropTypes.bool, // Add new prop type
 };
 
 const mapStateToProps = createStructuredSelector({

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;