@capillarytech/creatives-library 8.0.332 → 8.0.334-alpha.0

package/v2Containers/CreativesContainer/index.js

@@ -762,7 +762,6 @@ export class Creatives extends React.Component {
             smsFallBackContent = {},
             creativeName = "",
             channel = constants.RCS,
-            accountId = "",
           } = templateData || {};
           const cardContent = (rcsContent.cardContent && rcsContent.cardContent[0]) || {};
           const Status = RCS_STATUSES.approved || '';
@@ -777,7 +776,6 @@ export class Creatives extends React.Component {
                   RCS: {
                     rcsContent: {
                       ...rcsContent,
-                      ...(accountId && !isFullMode && { accountId }),
                       cardContent: [
                         {
                           ...cardContent,
@@ -1225,7 +1223,7 @@ export class Creatives extends React.Component {
           };
         }
         break;
-      case constants.FACEBOOK:
+      case constants.FACEBOOK: {
         if (template.value) {
           const FacebookAd = template?.value?.versions?.base?.content?.FacebookAd;
           const { type } = FacebookAd[0];
@@ -1269,8 +1267,9 @@ export class Creatives extends React.Component {
             selectedMarketingObjective: template.value.selectedMarketingObjective,
           };
         }
+      }
         break;
-      case constants.RCS:
+      case constants.RCS: {
         if (template.value) {
           const { name = "", versions = {} } = {
           } = template.value || {};
@@ -1280,7 +1279,6 @@ export class Creatives extends React.Component {
             contentType = "",
             cardType = "",
             cardSettings = {},
-            accountId = "",
           } = get(versions, 'base.content.RCS.rcsContent', {});
           const rcsContent = {
             contentType,
@@ -1292,11 +1290,11 @@ export class Creatives extends React.Component {
             channel,
             creativeName: name,
             rcsContent,
-            accountId,
           };
         }
+      }
         break;
-      case constants.ZALO:
+      case constants.ZALO: {
         if (template.value) {
           templateData = {
             ...template.value,
@@ -1305,6 +1303,7 @@ export class Creatives extends React.Component {
             delete templateData.type;
           }
         }
+      }
         break;
       case constants.WEBPUSH: {
         if (template.value) {

package/v2Containers/Rcs/index.js

@@ -300,7 +300,6 @@ export const Rcs = (props) => {
   const [accessToken, setAccessToken] = useState('');
   const [hostName, setHostName] = useState('');
   const [accountName, setAccountName] = useState('');
-  const [rcsAccount, setRcsAccount] = useState('');
   useEffect(() => {
     const accountObj = accountData.selectedRcsAccount || {};
     if (!isEmpty(accountObj)) {
@@ -313,7 +312,6 @@ export const Rcs = (props) => {
       setAccessToken(configs.accessToken || '');
       setHostName(accountObj.hostName || '');
       setAccountName(accountObj.name || '');
-      setRcsAccount(accountObj.id || '');
     }
   }, [accountData.selectedRcsAccount]);
 
@@ -608,10 +606,6 @@ export const Rcs = (props) => {
       const mediaData = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].media', '');
       const cardSettings = get(details, 'versions.base.content.RCS.rcsContent.cardSettings', '');
       setMediaData(mediaData, mediaType, cardSettings);
-      if (details?.edit) {
-        const rcsAccountId = get(details, 'versions.base.content.RCS.rcsContent.accountId', '');
-        setRcsAccount(rcsAccountId);
-      }
     }
   }, [rcsData, templateData, isFullMode, isEditFlow]);
   
@@ -1967,7 +1961,6 @@ const splitTemplateVarString = (str) => {
           content: {
             RCS: {
               rcsContent: {
-                ...(rcsAccount && !isFullMode && { accountId: rcsAccount }),
                 cardType: STANDALONE,
                 cardSettings: {
                   cardOrientation: isMediaTypeImage ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.orientation || VERTICAL : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.orientation || VERTICAL,

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,34 +1,22 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 .ant-tabs-content{
-    margin-top: 16px;
+    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 {
-      .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;
         }
       }
     }
@@ -674,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;
 }
@@ -1101,4 +1115,65 @@
 .inapp-illustration-parent {
   height: "calc(100vh - 325px)";
   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;
+  }
+}
+
+.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;
+}

package/v2Containers/Templates/actions.js

@@ -167,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

@@ -91,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';