@capillarytech/creatives-library 8.0.159 → 8.0.160

package/v2Components/CapTagList/index.js

@@ -30,8 +30,15 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import messages from './messages';
 import { makeSelectLoyaltyPromotionDisplay } from '../../v2Containers/Cap/selectors';
-import { CARD_RELATED_TAGS, HOSPITALITY_RELATED_TAGS, CUSTOMER_BARCODE_TAG, GET_TRANSLATION_MAPPED ,JAPANESE_HELP_TEXT, TAG_TRANSLATION_DOC} from '../../constants/unified';
+import { CARD_RELATED_TAGS, HOSPITALITY_RELATED_TAGS, CUSTOMER_BARCODE_TAG } from '../../containers/App/constants';
 import { hasCardBasedScope, hasCustomerBarcodeFeatureEnabled, hasHospitalityBasedScope } from '../../utils/common';
+
+import {
+  GET_TRANSLATION_MAPPED,
+  JAPANESE_HELP_TEXT,
+  TAG_TRANSLATION_DOC,
+  STRING,
+} from "../../containers/TagList/constants";
 import { EMAIL, JP_LOCALE_HIDE_FEATURE, LOYALTY } from '../../v2Containers/App/constants';
 import { hidingDateTagsForJpLocale } from '../../v2Containers/TagList/utils';
 
@@ -125,10 +132,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   getSearchedExpandedKeys(tags, value = '') {
     let list = [];
     _.forEach(tags, (val = {}, key) => {
-      const tagName =
-        typeof val?.name === 'string'
-          ? _.toLower(_.get(val, "name", ""))
-          : _.toLower(_.get(val, "name.props.defaultMessage", ""));
+      const tagName = typeof val?.name === STRING
+        ? _.toLower(_.get(val, "name", ""))
+        : _.toLower(_.get(val, "name.props.defaultMessage", ""));
       const tagNameWithoutUnderscore = tagName.replace(/_/g, " ");
       const searchStringLower = _.toLower(value);
       if (_.has(val, "subtags")) {
@@ -261,10 +267,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         supportedTagsString += `${supportedTag} ,`;
       });
       supportedTagsString = supportedTagsString.replace(/,\s*$/, "");
-      const tagName =
-        typeof val?.name === 'string'
-          ? _.toLower(_.get(val, "name", ""))
-          : _.toLower(_.get(val, "name.props.defaultMessage", ""));
+      const tagName = typeof val?.name === STRING
+        ? _.toLower(_.get(val, "name", ""))
+        : _.toLower(_.get(val, "name.props.defaultMessage", ""));
       const tagNameWithoutUnderscore = tagName.replace(/_/g, " ");
       const searchStringLower = _.toLower(searchString);
       const tagContainsSearchedString = searchStringLower

package/v2Components/Carousel/style.scss

@@ -26,7 +26,7 @@
     text-align: center;
     width: 120px !important;
     border-radius: 12px;
-    background-color: $CAP_G09;
+    background-color: $CAP_G09,
   }
   
   .ant-carousel .slick-slide {

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/EmailMobilePreview/index.js

@@ -19,8 +19,8 @@ import messages from '../EmailPreviewV2/messages';
 import './index.scss';
 import mobileBody from '../../assets/DeviceForEmail.png';
 import { iframePreviewAdjustWidth, removeLinksFromHtmlContent } from './../../utils/common';
-import {selectTemplateContent} from '../../v2Containers/Templates/selectors';
-import * as templateActions from '../../v2Containers/Templates/actions';
+import {selectTemplateContent} from '../../containers/Templates/selectors';
+import * as templateActions from '../../containers/Templates/actions';
 
 const deviceAspectRatio = {
   mobile: {

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

@@ -54,9 +54,9 @@ import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS,AI_CONTENT_BOT_DISABLED,
 import globalMessages from '../../v2Containers/Cap/messages';
 import { convert } from 'html-to-text';
 import { OUTBOUND } from './constants';
-import { GET_TRANSLATION_MAPPED } from '../../constants/unified';
+import { GET_TRANSLATION_MAPPED } from '../../containers/TagList/constants';
 import moment from 'moment';
-import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX} from '../../constants/unified';
+import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX} from '../../containers/App/constants';
 import { REQUEST } from '../../v2Containers/Cap/constants'
 import { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../utils/common';
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
@@ -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/TemplatePreview/index.js

@@ -32,11 +32,10 @@ import {
   RCS,
   ZALO,
   INAPP,
-  VIBER, 
-  FACEBOOK,
   MOBILE_PUSH
 } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
+import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
 import whatsappMobileAndroid from './assets/images/whatsapp_mobile_android.svg';
 import inAppMobileAndroidModal from './assets/images/inapp_mobile_android_modal.svg';
 import inAppMobileAndroidTop from './assets/images/inapp_mobile_android_top.svg';

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/SendTestMessage.js

@@ -43,7 +43,7 @@ const SendTestMessage = ({
               multiple
               placeholder={formatMessage(messages.testCustomersPlaceholder)}
             />
-            <CapButton onClick={handleSendTestMessage} disabled={isEmpty(selectedTestEntities) || isEmpty(formData['template-subject']) || isSendingTestMessage}>
+            <CapButton onClick={handleSendTestMessage} disabled={isEmpty(selectedTestEntities) || (isEmpty(formData['template-subject']) && isEmpty(formData[0]?.['template-subject'])) || isSendingTestMessage}>
               <FormattedMessage {...messages.sendTestButton} />
             </CapButton>
           </CapRow>),

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;