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

package/v2Containers/SmsWrapper/index.js

@@ -10,14 +10,12 @@ 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,
@@ -40,33 +38,15 @@ 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: smsLocation,
-    route: routeFromProps || { name: 'sms' },
+    location,
+    route: { name: 'sms' },
     isGetFormData,
     getFormSubscriptionData,
-    templateData,
     getDefaultTags,
     isFullMode,
     forwardedTags,
@@ -82,33 +62,24 @@ 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 useTraiSmsFlow = isTraiDLTEnable(isFullMode, smsRegister);
+  const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
   return <>
     {
-      isCreateSms && (useTraiSmsFlow ?
+      isCreateSms && (isTraiDlt ?
         <SmsTraiCreate
           isComponent
           {...smsProps}
           onShowTemplates={onShowTemplates}
           /> :
           <SmsCreate
-            isComponent
-            {...smsProps}
+            isComponent {
+              ...smsProps
+            }
           />
       )
     }
-    {isEditSms && (useTraiSmsFlow ?
+    {isEditSms && (isTraiDlt ?
       <SmsTraiEdit
         {...smsProps}
         params={{id: templateData._id}}

package/v2Containers/TagList/index.js

@@ -477,9 +477,6 @@ 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>
     );
@@ -516,9 +513,6 @@ 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,5 +1,9 @@
 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';
@@ -8,13 +12,12 @@ 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 { 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';
+import {
+  MOBILE_PUSH, SMS, EMAIL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP, WEBPUSH,
+} from '../CreativesContainer/constants';
 
 
 // Configuration object for channel types
@@ -80,7 +83,8 @@ function ChannelTypeIllustration(props) {
     isFullMode,
     createTemplate,
     currentChannel,
-    hostName
+    hostName,
+    isArchivedMode,
   } = props;
 
   const templateText = useMemo(() => {
@@ -88,6 +92,18 @@ 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) {
@@ -196,5 +212,6 @@ ChannelTypeIllustration.propTypes = {
   createTemplate: PropTypes.func.isRequired,
   currentChannel: PropTypes.string,
   hostName: PropTypes.string,
+  isArchivedMode: PropTypes.bool,
 };
 export default ChannelTypeIllustration;

package/v2Containers/Templates/_templates.scss

@@ -1,59 +1,36 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 .ant-tabs-content{
-    margin-top: 16px;
-  // .creatives-templates-list.full-mode{
-    .v2-pagination-container, .v2-pagination-container-half {
+    margin-top: $CAP_SPACE_16;
     .ant-tabs-tabpane-active{
       padding: unset;
     }
   }
-}
 
-@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;
-          }
+// 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;
         }
       }
     }
   }
-    }
-  }
 }
 
-
 .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;
     }
 
@@ -192,13 +169,10 @@
               .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;
@@ -232,92 +206,6 @@
       }
     }
 
-    // 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;
@@ -759,29 +647,11 @@
 }
 
 .action-container{
-  margin-top: $CAP_SPACE_08;
-  margin-bottom: $CAP_SPACE_16;
+  margin-top: 8px;
+  margin-bottom: 16px;
   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{
@@ -792,6 +662,32 @@
   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;
 }
@@ -1221,45 +1117,94 @@
   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;
-  }
+// Archive feature layout classes
+.illustration-scroll-wrapper {
+  height: calc(100vh - 20.3125rem);
+  overflow: 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;
-  }
+.filter-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
 
-  /* 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;
-  }
+.filter-row-content {
+  flex: 1;
+}
 
-  /*
-   * 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;
+.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;
   }
-}
+}
+
+.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;
+}
+
+.notification-template-label {
+  color: #5E6C84;
+}
+
+.notification-template-name {
+  color: #091E42;
+}

package/v2Containers/Templates/actions.js

@@ -15,17 +15,6 @@ 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,
@@ -178,3 +167,39 @@ 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 };
+}

package/v2Containers/Templates/constants.js

@@ -10,8 +10,6 @@ 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';
@@ -93,3 +91,26 @@ export const noApprovedWhatsappTemplatesDesc ='noApprovedWhatsappTemplatesDesc'
 export const zaloDescIllustration='zaloDescIllustration'
 export const noApprovedRcsTemplatesTitle='noApprovedRcsTemplatesTitle'
 export const noApprovedRcsTemplatesDesc='noApprovedRcsTemplatesDesc'
+
+// Archive feature
+export const ARCHIVE_TEMPLATE_REQUEST = 'app/v2Containers/Templates/ARCHIVE_TEMPLATE_REQUEST';
+export const ARCHIVE_TEMPLATE_SUCCESS = 'app/v2Containers/Templates/ARCHIVE_TEMPLATE_SUCCESS';
+export const ARCHIVE_TEMPLATE_FAILURE = 'app/v2Containers/Templates/ARCHIVE_TEMPLATE_FAILURE';
+
+export const UNARCHIVE_TEMPLATE_REQUEST = 'app/v2Containers/Templates/UNARCHIVE_TEMPLATE_REQUEST';
+export const UNARCHIVE_TEMPLATE_SUCCESS = 'app/v2Containers/Templates/UNARCHIVE_TEMPLATE_SUCCESS';
+export const UNARCHIVE_TEMPLATE_FAILURE = 'app/v2Containers/Templates/UNARCHIVE_TEMPLATE_FAILURE';
+
+export const BULK_ARCHIVE_REQUEST = 'app/v2Containers/Templates/BULK_ARCHIVE_REQUEST';
+export const BULK_ARCHIVE_SUCCESS = 'app/v2Containers/Templates/BULK_ARCHIVE_SUCCESS';
+export const BULK_ARCHIVE_FAILURE = 'app/v2Containers/Templates/BULK_ARCHIVE_FAILURE';
+
+export const BULK_UNARCHIVE_REQUEST = 'app/v2Containers/Templates/BULK_UNARCHIVE_REQUEST';
+export const BULK_UNARCHIVE_SUCCESS = 'app/v2Containers/Templates/BULK_UNARCHIVE_SUCCESS';
+export const BULK_UNARCHIVE_FAILURE = 'app/v2Containers/Templates/BULK_UNARCHIVE_FAILURE';
+
+export const SET_ARCHIVE_FILTER = 'app/v2Containers/Templates/SET_ARCHIVE_FILTER';
+export const TOGGLE_TEMPLATE_SELECTION = 'app/v2Containers/Templates/TOGGLE_TEMPLATE_SELECTION';
+export const SELECT_ALL_TEMPLATES = 'app/v2Containers/Templates/SELECT_ALL_TEMPLATES';
+export const CLEAR_TEMPLATE_SELECTION = 'app/v2Containers/Templates/CLEAR_TEMPLATE_SELECTION';
+export const SET_ARCHIVED_MODE = 'app/v2Containers/Templates/SET_ARCHIVED_MODE';