@capillarytech/creatives-library 9.0.15-alpha.0 → 9.0.15-alpha.3

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/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,11 +1,13 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 .ant-tabs-content{
-    margin-top: $CAP_SPACE_16;
-    .ant-tabs-tabpane-active{
-      padding: unset;
+  // .creatives-templates-list.full-mode{
+    .v2-pagination-container, .v2-pagination-container-half {
+      .ant-tabs-tabpane-active{
+        padding: unset;
+      }
     }
-  }
+}
 //removing current one as not required now in each row we'll have 3 cards for which css has been added
 
 // 3 cards per row across all breakpoints
@@ -24,6 +26,7 @@
   }
 }
 
+
 .creatives-templates-list {
   position: relative;
 
@@ -45,8 +48,10 @@
     .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;
     }
 
@@ -59,7 +64,8 @@
     }
   }
 
-  .v2-pagination-container {
+  .v2-pagination-container,
+  .v2-pagination-container-half {
     .FACEBOOK {
       .ant-card-body {
         background-color: $CAP_G09;
@@ -192,10 +198,14 @@
               .whatsapp-container {
                 background-color: $CAP_WHITE;
                 padding: $CAP_SPACE_12;
+                overflow-y: hidden;
               }
               .scroll-container {
                 overflow-x: auto;
+                overflow-y: hidden;
                 display: flex;
+                flex-wrap: nowrap;
+                width: 100%;
                 padding-top: $CAP_SPACE_06;
                 padding-right: $CAP_SPACE_06;
                 white-space: nowrap;
@@ -203,9 +213,8 @@
                 &::-webkit-scrollbar {
                   display: none; // Hide scrollbar in Chrome/Safari/Opera
                 }
-                overflow: hidden;
                 .whatsapp-carousel-container {
-                  padding: $CAP_SPACE_04 0px $CAP_SPACE_08;
+                  padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
                   border-radius: $CAP_SPACE_06;
                   background-color: $CAP_WHITE;
                   width: 80%;
@@ -253,6 +262,119 @@
       }
     }
 
+    // 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;
+                overflow-y: hidden;
+                .cap-divider-v2{
+                  margin: $CAP_SPACE_12 0;
+                }
+              }
+              // Listing preview shows only the first card — no scroll/peek (Figma).
+              .whatsapp-carousel-container {
+                padding: $CAP_SPACE_04;
+                width: 100%;
+                box-sizing: border-box;
+                white-space: pre-wrap;
+                word-break: break-word;
+                overflow: auto;
+                text-align: left;
+                .whatsapp-carousel-card {
+                  display: flex;
+                  flex-direction: column;
+                  gap: $CAP_SPACE_04;
+                }
+                // Text and media are two separate rounded cards, not one merged
+                // box (Figma listing reference) — text first, then media below it.
+                // Borderless + shadow-only elevation, matching the established
+                // convention for preview carousel cards (see .mobile-push-carousel-card
+                // in v2Components/TemplatePreview/_templatePreview.scss) — a visible
+                // border read as "boxed in" against the $CAP_G09 card background.
+                .rcs-carousel-listing-text-box {
+                  background-color: $CAP_WHITE;
+                  border-radius: $CAP_SPACE_04;
+                  padding: $CAP_SPACE_12;
+                  box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.08);
+                  .whatsapp-carousel-body {
+                    white-space: pre-wrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                  }
+                }
+                .rcs-carousel-listing-media-box {
+                  background-color: $CAP_WHITE;
+                  border-radius: $CAP_SPACE_08;
+                  padding: $CAP_SPACE_04;
+                  box-sizing: border-box;
+                  box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.08);
+                  .whatsapp-image,
+                  .rcs-video-preview-placeholder {
+                    display: block;
+                    width: 100%;
+                    // Neutralize the global .whatsapp-image { max-height: 123px;
+                    // margin-bottom: 4px; } rule (_templates.scss line ~1202) — that
+                    // margin was leaving a background sliver inside this rounded box,
+                    // making the radius clip look uneven between top and bottom.
+                    height: 11rem;
+                    max-height: none;
+                    margin: 0;
+                    object-fit: cover;
+                    overflow: hidden;
+                    border-radius: $CAP_SPACE_04;
+                  }
+                }
+              }
+
+              // 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;
@@ -298,6 +420,7 @@
                 }
                 .scroll-container {
                   overflow-x: auto;
+                  overflow-y: hidden;
                   display: flex;
                   padding-top: $CAP_SPACE_06;
                   padding-right: $CAP_SPACE_06;
@@ -306,12 +429,11 @@
                   &::-webkit-scrollbar {
                     display: none; // Hide scrollbar in Chrome/Safari/Opera
                   }
-                  overflow: hidden;
                   height: 100%;
                   width: 100%;
                   margin-left: 1.65rem;
                   .whatsapp-carousel-container {
-                    padding: $CAP_SPACE_04 0px $CAP_SPACE_08;
+                    padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
                     border-radius: $CAP_SPACE_06;
                     background-color: $CAP_WHITE;
                     width: 80%;
@@ -701,11 +823,30 @@
 }
 
 .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;
+    margin-right: $CAP_SPACE_32;
+  }
 }
 
 .popover-action-container:hover{
@@ -1164,6 +1305,49 @@
   overflow: 'auto';
 }
 
+/* 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;
+  }
+
+  .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;
+  }
+
+  /* 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;
+  }
+
+  /*
+   * 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;
+  }
+}
+
 // Archive feature layout classes
 .illustration-scroll-wrapper {
   height: calc(100vh - 20.3125rem);
@@ -1174,7 +1358,7 @@
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  width: 102%;
+  width: 100%;
 }
 
 .filter-row-content {

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,

package/v2Containers/Templates/constants.js

@@ -10,6 +10,8 @@ export const GET_ALL_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_ALL_TEM
 export const GET_ALL_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_ALL_TEMPLATES_SUCCESS';
 export const GET_ALL_TEMPLATES_FAILURE = 'app/v2Containers/Templates/GET_ALL_TEMPLATES_FAILURE';
 
+export const GET_LOCAL_SMS_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_LOCAL_SMS_TEMPLATES_REQUEST';
+
 export const DELETE_TEMPLATE_REQUEST = 'app/v2Containers/Templates/DELETE_TEMPLATE_REQUEST';
 export const DELETE_RCS_TEMPLATE_REQUEST = 'app/v2Containers/Templates/DELETE_RCS_TEMPLATE_REQUEST';
 export const DELETE_TEMPLATE_SUCCESS = 'app/v2Containers/Templates/DELETE_TEMPLATE_SUCCESS';