@capillarytech/creatives-library 8.0.345-alpha.13 → 8.0.345-alpha.15

package/v2Containers/SmsWrapper/index.js

@@ -10,12 +10,14 @@ import { isTraiDLTEnable } from '../../utils/common';
 import SmsEdit from '../Sms/Edit';
 import SmsTraiCreate from '../SmsTrai/Create';
 import SmsTraiEdit from '../SmsTrai/Edit';
+
 const SmsWrapper = (props) => {
   const {
     isCreateSms,
     isEditSms,
     setIsLoadingContent,
     location,
+    route: routeFromProps,
     isGetFormData,
     getFormSubscriptionData,
     isFullMode,
@@ -38,15 +40,33 @@ const SmsWrapper = (props) => {
     handleCloseTestAndPreview,
     isTestAndPreviewMode,
     onValidationFail,
+    embeddedSmsFallback = false,
+    onEmbeddedSmsFooterValidity,
+    forceFullTagContext = false,
     } = props;
 
+  /** FormBuilder / SMS Create assume `location.query`; connected-router shapes may omit it. */
+  const smsLocation = (() => {
+    const loc = location || {};
+    const q = loc.query;
+    if (q && typeof q === 'object') {
+      return { ...loc, query: { ...q } };
+    }
+    return {
+      pathname: loc.pathname || '/sms/create',
+      search: loc.search || '',
+      query: { type: 'embedded', module: 'library' },
+    };
+  })();
+
   const smsProps = {
     onCreateComplete,
     setIsLoadingContent,
-    location,
-    route: { name: 'sms' },
+    location: smsLocation,
+    route: routeFromProps || { name: 'sms' },
     isGetFormData,
     getFormSubscriptionData,
+    templateData,
     getDefaultTags,
     isFullMode,
     forwardedTags,
@@ -62,24 +82,33 @@ const SmsWrapper = (props) => {
     handleCloseTestAndPreview,
     isTestAndPreviewMode,
     onValidationFail,
+    forceFullTagContext,
+    embeddedSmsFallback,
+    onEmbeddedSmsFooterValidity,
+    ...(embeddedSmsFallback
+      ? {
+        tagListGetPopupContainer: () => document.body,
+        tagListPopoverOverlayStyle: { zIndex: 10020 },
+        tagListPopoverOverlayClassName: 'sms-fallback-taglist-popover rcs-sms-fallback-taglist-popover',
+      }
+      : {}),
   };
-  const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
+  const useTraiSmsFlow = isTraiDLTEnable(isFullMode, smsRegister);
   return <>
     {
-      isCreateSms && (isTraiDlt ?
+      isCreateSms && (useTraiSmsFlow ?
         <SmsTraiCreate
           isComponent
           {...smsProps}
           onShowTemplates={onShowTemplates}
           /> :
           <SmsCreate
-            isComponent {
-              ...smsProps
-            }
+            isComponent
+            {...smsProps}
           />
       )
     }
-    {isEditSms && (isTraiDlt ?
+    {isEditSms && (useTraiSmsFlow ?
       <SmsTraiEdit
         {...smsProps}
         params={{id: templateData._id}}

package/v2Containers/TagList/index.js

@@ -477,6 +477,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
           disableTooltipMsg={tooltipMsg}
           fetchingSchemaError={this?.state?.tagsError}
           popoverPlacement={this.props.popoverPlacement}
+          overlayStyle={this.props.popoverOverlayStyle}
+          overlayClassName={this.props.popoverOverlayClassName}
+          getPopupContainer={this.props.getPopupContainer}
         />
       </div>
     );
@@ -513,6 +516,9 @@ TagList.propTypes = {
   // message to show when Add Label button is disabled (e.g. personalization restriction)
   disableTooltipMsg: PropTypes.string,
   restrictPersonalization: PropTypes.bool,
+  popoverOverlayStyle: PropTypes.object,
+  popoverOverlayClassName: PropTypes.string,
+  getPopupContainer: PropTypes.func,
   intl: PropTypes.shape({
     formatMessage: PropTypes.func.isRequired,
     locale: PropTypes.string,

package/v2Containers/Templates/ChannelTypeIllustration.js

@@ -1,9 +1,5 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import zaloillustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
-import inAppIllustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
-import { FormattedMessage } from 'react-intl';
-import { CapIllustration } from "@capillarytech/cap-ui-library";
 import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
@@ -12,12 +8,13 @@ import lineIllustration from '../Assets/images/lineIllustration.svg';
 import facebookIllustration from '../Assets/images/facebookIllustration.svg';
 import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
 import whatsappOrZaloAccountIllustration from '../Assets/images/whatsappOrZaloAccountIllustration.svg';
-import archiveEmptyStateIllustration from '../Assets/images/archive_Empty_Illustration.svg';
 import rcsIllustration from '../Assets/images/rcsIllustration.png';
+import zaloillustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
+import inAppIllustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
 import messages from './messages';
-import {
-  MOBILE_PUSH, SMS, EMAIL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP, WEBPUSH,
-} from '../CreativesContainer/constants';
+import { FormattedMessage } from 'react-intl';
+import { CapIllustration } from "@capillarytech/cap-ui-library";
+import { MOBILE_PUSH, SMS, EMAIL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP, WEBPUSH } from '../CreativesContainer/constants';
 
 
 // Configuration object for channel types
@@ -83,8 +80,7 @@ function ChannelTypeIllustration(props) {
     isFullMode,
     createTemplate,
     currentChannel,
-    hostName,
-    isArchivedMode,
+    hostName
   } = props;
 
   const templateText = useMemo(() => {
@@ -92,18 +88,6 @@ function ChannelTypeIllustration(props) {
     return isFullMode ? templateIntlMsg : '';
   }, [isFullMode]);
 
-  if (isArchivedMode) {
-    return (
-      <CapIllustration
-        illustrationImage={archiveEmptyStateIllustration}
-        title={<FormattedMessage {...messages.noArchivedCreatives} />}
-        description={<FormattedMessage {...messages.noArchivedCreativesDesc} />}
-        descriptionPosition="bottom"
-        descriptionClassName="illustration-desc archive-illustration"
-      />
-    );
-  }
-
   const getChannelTypeIllustrationInfo = (type, hostName) => {
     // Handle special cases with hostName dependency
     if (type === WHATSAPP) {
@@ -212,6 +196,5 @@ ChannelTypeIllustration.propTypes = {
   createTemplate: PropTypes.func.isRequired,
   currentChannel: PropTypes.string,
   hostName: PropTypes.string,
-  isArchivedMode: PropTypes.bool,
 };
 export default ChannelTypeIllustration;

package/v2Containers/Templates/TemplatesActionBar.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+
+/**
+ * Reusable action bar for template pickers.
+ * Layout and spacing live in `_templates.scss` (`.action-container`, `.action-container__toolbar-row`).
+ * Default search field width: `.action-container__toolbar-row .search-text` (13.125rem).
+ * Pass `searchInputClassName` / `searchInputStyle` to override (defaults match Templates list: 210px per master).
+ */
+const TemplatesActionBar = ({
+  searchValue,
+  onSearchChange,
+  onSearch,
+  onClear,
+  searchPlaceholder,
+  searchInputClassName,
+  searchInputStyle,
+  ctaLabel,
+  onCtaClick,
+  ctaDisabled,
+  ctaClassName,
+  ctaNode,
+  children,
+  showCta = true,
+}) => (
+  <div className="action-container">
+    <div className="action-container__toolbar-row">
+      {searchPlaceholder && (
+        <CapInput.Search
+          className={['search-text', searchInputClassName].filter(Boolean).join(' ')}
+          placeholder={searchPlaceholder}
+          value={searchValue}
+          onChange={onSearchChange}
+          /* antd `Input` (used by CapInput.Search) has no `onSearch`; only `Input.Search` does. */
+          onPressEnter={(e) => {
+            if (onSearch) {
+              const v = e?.target && 'value' in e.target ? e.target.value : searchValue;
+              onSearch(v);
+            }
+          }}
+          onSearch={onSearch}
+          onClear={onClear}
+          onScroll={(e) => e.stopPropagation()}
+        />
+      )}
+      {children}
+    </div>
+    {showCta && (
+      <div>
+        {ctaNode || (
+          <CapButton
+            className={ctaClassName}
+            type="primary"
+            disabled={ctaDisabled}
+            onClick={onCtaClick}
+          >
+            {ctaLabel}
+          </CapButton>
+        )}
+      </div>
+    )}
+  </div>
+);
+
+TemplatesActionBar.propTypes = {
+  searchValue: PropTypes.string,
+  onSearchChange: PropTypes.func,
+  onSearch: PropTypes.func,
+  onClear: PropTypes.func,
+  searchPlaceholder: PropTypes.string,
+  searchInputClassName: PropTypes.string,
+  searchInputStyle: PropTypes.object,
+  ctaLabel: PropTypes.node,
+  onCtaClick: PropTypes.func,
+  ctaDisabled: PropTypes.bool,
+  ctaClassName: PropTypes.string,
+  ctaNode: PropTypes.node,
+  children: PropTypes.node,
+  showCta: PropTypes.bool,
+};
+
+TemplatesActionBar.defaultProps = {
+  searchValue: '',
+  onSearchChange: () => {},
+  onSearch: () => {},
+  onClear: () => {},
+  searchPlaceholder: '',
+  searchInputClassName: '',
+  searchInputStyle: { width: '210px' },
+  ctaLabel: null,
+  onCtaClick: () => {},
+  ctaDisabled: false,
+  ctaClassName: '',
+  ctaNode: null,
+  children: null,
+};
+
+export default TemplatesActionBar;
+

package/v2Containers/Templates/_templates.scss

@@ -1,36 +1,59 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 .ant-tabs-content{
-    margin-top: $CAP_SPACE_16;
+    margin-top: 16px;
+  // .creatives-templates-list.full-mode{
+    .v2-pagination-container, .v2-pagination-container-half {
     .ant-tabs-tabpane-active{
       padding: unset;
     }
   }
+}
 
-// 3 cards per row across all breakpoints
-.creatives-templates-list {
-  .v2-pagination-container,
-  .v2-pagination-container-half {
-    .cap-custom-card-list-row {
-      .cap-custom-card-list-col {
-        width: calc(33.33% - #{$CAP_SPACE_08});
-        margin-right: $CAP_SPACE_12;
-        &:nth-child(3n) {
-          margin-right: 0;
+@media screen and (max-width: 1172px) {
+  .creatives-templates-list.full-mode{
+    .v2-pagination-container {
+      .cap-custom-card-list-row {
+        .cap-custom-card-list-col{
+          &:nth-child(3n+3) { //every 4th child
+            margin-right: unset;
+          }
+        }
+      }
+    }
+  }
+}
+// }
+
+@media screen and (min-width: 1172px) {
+  .creatives-templates-list.full-mode{
+    .v2-pagination-container, .v2-pagination-container-half {
+  .creatives-templates-list.full-mode{
+    .v2-pagination-container {
+      .cap-custom-card-list-row {
+        .cap-custom-card-list-col{
+          &:nth-child(4n+4) { //every 4th child
+            margin-right: unset;
+          }
         }
       }
     }
   }
+    }
+  }
 }
 
+
 .creatives-templates-list {
 
   .delete-template-confirm {
     .ant-modal-footer {
       padding: $CAP_SPACE_16 $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_24;
     }
+}
 
     .ant-modal-header {
+  .v2-pagination-container, .v2-pagination-container-half {
       padding: $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_08 $CAP_SPACE_24;
     }
 
@@ -169,10 +192,13 @@
               .whatsapp-container {
                 background-color: $CAP_WHITE;
                 padding: $CAP_SPACE_12;
+                overflow-y: hidden;
               }
               .scroll-container {
                 overflow-x: auto;
                 display: flex;
+                flex-wrap: nowrap;
+                width: 100%;
                 padding-top: $CAP_SPACE_06;
                 padding-right: $CAP_SPACE_06;
                 white-space: nowrap;
@@ -206,6 +232,92 @@
       }
     }
 
+    // RCS template listing preview: match WhatsApp carousel "peek" behavior
+    .RCS {
+      .cap-custom-card {
+        .ant-card-body {
+          .ant-card-meta {
+            background-color: $CAP_G09;
+            padding: 0;
+            .ant-card-meta-description {
+             .whatsapp-container,.cap-rcs-creatives {
+                background-color: $CAP_WHITE;
+                padding: $CAP_SPACE_12;
+                border-radius: 0.25rem;
+                .cap-divider-v2{
+                  margin: $CAP_SPACE_12 0;
+                }
+              }
+              .scroll-container {
+                overflow-x: auto;
+                overflow-y: hidden;
+                display: flex;
+                flex-wrap: nowrap;
+                padding-top: $CAP_SPACE_06;
+                padding-right: $CAP_SPACE_06;
+                white-space: nowrap;
+                scrollbar-width: none; // Hide scrollbar in Firefox
+                &::-webkit-scrollbar {
+                  display: none; // Hide scrollbar in Chrome/Safari/Opera
+                }
+                .whatsapp-carousel-container {
+                  padding: $CAP_SPACE_04 0px $CAP_SPACE_08;
+                  border-radius: $CAP_SPACE_06;
+                  background-color: $CAP_WHITE;
+                  width: 80%;
+                  flex-shrink: 0;
+                  margin-right: $CAP_SPACE_04;
+                  white-space: pre-wrap;
+                  word-break: break-word;
+                  overflow: auto;
+                  text-align: left;
+                  .whatsapp-carousel-card {
+                    margin: $CAP_SPACE_02 $CAP_SPACE_06 $CAP_SPACE_01 $CAP_SPACE_08;
+                    .whatsapp-carousel-body {
+                      margin-bottom: $CAP_SPACE_08;
+                      white-space: pre-wrap;
+                    }
+                  }
+                }
+              }
+
+              // RCS CTA buttons in listing (reuse WhatsApp-ish look)
+              .rcs-cta-preview {
+                margin: $CAP_SPACE_12 0;
+                display: flex;
+                justify-content: center;
+                font-size: $FONT_SIZE_M;
+                align-items: center;
+                color: #1970DA;
+                svg {
+                  margin-right: $CAP_SPACE_04;
+                }
+              }
+
+              .rcs-video-preview-placeholder {
+                background: #f5f5f5;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              }
+
+              .rcs-video-preview-label {
+                color: #7a7a7a;
+              }
+
+              .rcs-listing-title {
+                font-weight: 600;
+              }
+
+              .whatsapp-divider {
+                margin: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+
     .MOBILEPUSH {
         .ant-card-body {
           padding: 0;
@@ -647,11 +759,29 @@
 }
 
 .action-container{
-  margin-top: 8px;
-  margin-bottom: 16px;
+  margin-top: $CAP_SPACE_08;
+  margin-bottom: $CAP_SPACE_16;
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+  &__toolbar-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  &__toolbar-row .search-text {
+    width: 13.125rem;
+    min-width: 13.125rem;
+    flex: 1;
+  }
+
+  &__create-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 }
 
 .popover-action-container:hover{
@@ -662,32 +792,6 @@
   font-size: 14px;
 }
 
-// Archive/Unarchive confirm modal overrides — scoped to avoid affecting other modals
-.archive-confirm-modal {
-  // Remove the left margin added when an icon is present
-  .ant-modal-confirm-body {
-    > .anticon + .ant-modal-confirm-title + .ant-modal-confirm-content {
-      margin-left: 0;
-    }
-  }
-
-  // Left-align buttons, remove float
-  .ant-modal-confirm-btns {
-    float: none;
-    display: flex;
-    align-items: center;
-    gap: $CAP_SPACE_08;
-    margin-top: $CAP_SPACE_16;
-
-    // Cancel button styling
-    .ant-btn:not(.ant-btn-primary) {
-      background-color: $CAP_G08;
-      border-color: $CAP_G08;
-      color: $CAP_G01;
-    }
-  }
-}
-
 .popover-action-container {
   line-height: 24px;
 }
@@ -1117,94 +1221,45 @@
   overflow: 'auto';
 }
 
-// Archive feature layout classes
-.illustration-scroll-wrapper {
-  height: calc(100vh - 20.3125rem);
-  overflow: auto;
-}
-
-.filter-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.filter-row-content {
-  flex: 1;
-}
-
-.bulk-selection-bar {
-  display: flex;
-  align-items: center;
-  gap: $CAP_SPACE_12;
-  flex-shrink: 0;
-}
-
-.archived-mode-header {
-  display: flex;
-  align-items: center;
-  gap: $CAP_SPACE_12;
-  margin-bottom: $CAP_SPACE_16;
-
-  .archived-mode-back-icon {
-    cursor: pointer;
-    font-size: 1.428rem;
+/* Local SMS / slidebox: viewport-based .v2-pagination-container-half height leaves empty space below and clips cards */
+.creatives-templates-container--local-sms.library-mode {
+  .creatives-templates-list.library-mode > .cap-row:first-of-type > div {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
   }
-}
-
-.archived-tag {
-  margin-left: $CAP_SPACE_08;
-  font-size: 0.786rem;
-}
-
-.popover-archive-action {
-  cursor: pointer;
-  padding: $CAP_SPACE_08 0;
-}
-
-.archive-menu-item {
-  display: inline-flex;
-  align-items: center;
-  gap: $CAP_SPACE_08;
-  margin-top: 1rem;
-}
-
-.archive-btn-label {
-  margin-right: 0.714rem;
-}
-
-.bulk-selection-bar .cap-button-v2-prefix {
-  margin-top: 1rem;
-}
-
-.bulk-selection-bar .ant-btn.cap-button-v2 > .cap-button-v2-prefix + span {
-  margin-left: -$CAP_SPACE_06;
-}
-
-.template-card-top-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: $CAP_SPACE_08 $CAP_SPACE_12 0;
-}
 
-.template-listing-header-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: $CAP_SPACE_08;
-}
-
-.template-listing-more-btn {
-  padding: 0 $CAP_SPACE_08;
-  min-width: auto;
-}
+  .creatives-templates-list.library-mode > .cap-row:first-of-type > div > div:first-child {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
 
-.notification-template-label {
-  color: #5E6C84;
-}
+  /* Block below search/filter: grid + skeletons — must grow to use space above footer */
+  .creatives-templates-list.library-mode > .cap-row:first-of-type > div > div:first-child > div:nth-child(2) {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
 
-.notification-template-name {
-  color: #091E42;
-}
+  /*
+   * Scroll needs a definite height. Pure flex + height:auto + max-height:100% often won’t bound (no % base), so no scrollbar.
+   * Use a taller slice than global 100vh-20rem so the grid uses space under search; still overflow-y:auto for long lists.
+   */
+  .v2-pagination-container,
+  .v2-pagination-container-half {
+    flex: 0 1 auto;
+    min-height: 0;
+    height: calc(100vh - 12rem);
+    max-height: calc(100vh - 12rem);
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+}

package/v2Containers/Templates/actions.js

@@ -15,6 +15,17 @@ export function getAllTemplates(channel, queryParams, intlCopyOf = '') {
   };
 }
 
+
+export function getLocalSmsTemplates(queryParams, intlCopyOf = '', onSuccess, onFailure) {
+  return {
+    type: types.GET_LOCAL_SMS_TEMPLATES_REQUEST,
+    queryParams,
+    intlCopyOf,
+    onSuccess,
+    onFailure,
+  };
+}
+
 export function resetTemplate() {
   return {
     type: types.RESET_TEMPLATE,
@@ -167,39 +178,3 @@ export function getCdnTransformationConfig() {
     type: types.GET_CDN_TRANSFORMATION_CONFIG_REQUEST,
   };
 }
-
-export function archiveTemplate(channel, id, templateName) {
-  return { type: types.ARCHIVE_TEMPLATE_REQUEST, channel, id, templateName };
-}
-
-export function unarchiveTemplate(channel, id, templateName) {
-  return { type: types.UNARCHIVE_TEMPLATE_REQUEST, channel, id, templateName };
-}
-
-export function bulkArchiveTemplates(channel, ids) {
-  return { type: types.BULK_ARCHIVE_REQUEST, channel, ids };
-}
-
-export function bulkUnarchiveTemplates(channel, ids) {
-  return { type: types.BULK_UNARCHIVE_REQUEST, channel, ids };
-}
-
-export function setArchiveFilter(filter) {
-  return { type: types.SET_ARCHIVE_FILTER, filter };
-}
-
-export function toggleTemplateSelection(id) {
-  return { type: types.TOGGLE_TEMPLATE_SELECTION, id };
-}
-
-export function selectAllTemplates(ids) {
-  return { type: types.SELECT_ALL_TEMPLATES, ids };
-}
-
-export function clearTemplateSelection() {
-  return { type: types.CLEAR_TEMPLATE_SELECTION };
-}
-
-export function setArchivedMode(isArchived) {
-  return { type: types.SET_ARCHIVED_MODE, isArchived };
-}