@capillarytech/creatives-library 8.0.213 → 8.0.214-beta.0

package/v2Containers/CreativesContainer/index.js

@@ -43,7 +43,7 @@ import {
   IMAGE as LINE_IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, VIDEO as LINE_VIDEO, TEMPLATE, STICKER,
 } from '../Line/Container/constants';
 import { IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
-import {RCS_STATUSES} from '../Rcs/constants';
+import { RCS_STATUSES } from '../Rcs/constants';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
 import {
@@ -107,6 +107,9 @@ export class Creatives extends React.Component {
       isTestAndPreviewMode: false, // Add flag to track Test & Preview mode
       // Performance optimization: Local template name for immediate UI feedback
       localTemplateName: '',
+      // Track selected email create mode for new flow (HTML Editor vs Drag & Drop)
+      selectedEmailCreateMode: null,
+      // isTemplateNameEmpty: true, // Track template name state for new flow
     };
     this.liquidFlow = Boolean(commonUtil.hasLiquidSupportFeature());
     this.creativesTemplateSteps = {
@@ -136,7 +139,7 @@ export class Creatives extends React.Component {
     if (!this.props?.isFullMode) {
       this.props?.templateActions.getCdnTransformationConfig();
     }
-    
+
     // Store loyalty tag props if loyaltyTagFetchingDependencies is provided
     const { loyaltyTagFetchingDependencies } = this.props;
     if (loyaltyTagFetchingDependencies) {
@@ -162,9 +165,9 @@ export class Creatives extends React.Component {
     const isEmptyTemplateName = !value.trim();
 
     // 1. IMMEDIATE: Update local state for instant UI feedback
-    this.setState({ 
+    this.setState({
       isTemplateNameEmpty: isEmptyTemplateName,
-      localTemplateName: value 
+      localTemplateName: value
     });
 
     // 2. DEBOUNCED: Only debounce the expensive onFormDataChange call
@@ -243,8 +246,19 @@ export class Creatives extends React.Component {
   onCreateNextStep = () => {
     this.setState((prevState) => {
       let templateStep = prevState.templateStep + 1;
-      const { emailCreateMode, currentChannel } = prevState;
-      if ((currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") || [constants.MOBILE_PUSH, constants.WECHAT, constants.INAPP].includes(currentChannel.toUpperCase())) {
+      const { emailCreateMode, currentChannel, selectedEmailCreateMode } = prevState;
+
+      // Check if we should skip template selection for HTML Editor
+      const supportCKEditor = commonUtil.hasSupportCKEditor();
+      const shouldSkipTemplateSelection = !supportCKEditor
+        && selectedEmailCreateMode === 'html_editor'
+        && currentChannel.toUpperCase() === constants.EMAIL
+        && prevState.templateStep === 1; // Only skip if we're at modeSelection step
+
+      if (shouldSkipTemplateSelection) {
+        // Skip template selection (step 2), go directly to createTemplateContent (step 3)
+        templateStep = prevState.templateStep + 2;
+      } else if ((currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") || [constants.MOBILE_PUSH, constants.WECHAT, constants.INAPP].includes(currentChannel.toUpperCase())) {
         templateStep = prevState.templateStep + 2;
       }
       return {
@@ -253,8 +267,11 @@ export class Creatives extends React.Component {
     });
   }
 
-  onEmailModeChange = (mode) => {
-    this.setState({ emailCreateMode: mode });
+  onEmailModeChange = (mode, selectedMode = null) => {
+    this.setState({
+      emailCreateMode: mode,
+      selectedEmailCreateMode: selectedMode || mode, // Store the selected mode for new flow
+    });
   }
 
   onInAppModeChange = (mode) => {
@@ -304,7 +321,7 @@ export class Creatives extends React.Component {
       }
       return buttonObj;
     });
-    const {url, previewUrl} = media || {};
+    const { url, previewUrl } = media || {};
     return {
       bodyText: bodyTemplate,
       varMap: cardVarMapped,
@@ -673,7 +690,7 @@ export class Creatives extends React.Component {
           } = templateData || {};
           const cardContent = (rcsContent.cardContent && rcsContent.cardContent[0]) || {};
           const Status = RCS_STATUSES.approved || '';
-        
+
           creativesTemplateData = {
             type: channel,
             edit: true,
@@ -758,7 +775,7 @@ export class Creatives extends React.Component {
   });
 
   getMobilePushCarouselData = (expandableDetails = []) => {
-    const newExpandableDetails = {...expandableDetails};
+    const newExpandableDetails = { ...expandableDetails };
     newExpandableDetails.style = expandableDetails.style || MANUAL_CAROUSEL;
     newExpandableDetails.message = expandableDetails.message || '';
     newExpandableDetails.ctas = expandableDetails.ctas || [];
@@ -853,7 +870,7 @@ export class Creatives extends React.Component {
               androidContent.custom = custom;
             }
             if (channel === constants.MOBILE_PUSH && androidContent?.expandableDetails?.carouselData?.length) {
-              androidContent.expandableDetails = this.getMobilePushCarouselData({...androidContent?.expandableDetails});
+              androidContent.expandableDetails = this.getMobilePushCarouselData({ ...androidContent?.expandableDetails });
             }
             templateData.androidContent = androidContent;
             templateData.androidContent.type = androidContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || constants.TEXT;
@@ -875,7 +892,7 @@ export class Creatives extends React.Component {
               iosContent.custom = custom;
             }
             if (channel === constants.MOBILE_PUSH && iosContent?.expandableDetails?.carouselData?.length) {
-              iosContent.expandableDetails = this.getMobilePushCarouselData({...iosContent?.expandableDetails});
+              iosContent.expandableDetails = this.getMobilePushCarouselData({ ...iosContent?.expandableDetails });
             }
             templateData.iosContent = iosContent;
             templateData.iosContent.type = iosContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || 'TEXT';
@@ -1092,7 +1109,7 @@ export class Creatives extends React.Component {
             contentType = "",
             cardType = "",
             cardSettings = {},
-          } = get(versions, 'base.content.RCS.rcsContent',{});
+          } = get(versions, 'base.content.RCS.rcsContent', {});
           const rcsContent = {
             contentType,
             cardType,
@@ -1230,7 +1247,7 @@ export class Creatives extends React.Component {
   processCentralCommsMetaId = (channel, creativesData) => {
     // Create the payload for the centralcommnsmetaId API call
     const { isLoyaltyModule = false, loyaltyMetaData = {} } = this.props;
-    const { actionName, setMetaData = () => {} } = loyaltyMetaData;
+    const { actionName, setMetaData = () => { } } = loyaltyMetaData;
 
     // const isTemplateModified = getTemplateDiffState(
     //   channel,
@@ -1333,6 +1350,13 @@ export class Creatives extends React.Component {
     showFooter = isFullMode && slidBoxContent === "preview";
     const isMobilepush = channel === constants.MOBILE_PUSH;
 
+    const supportCKEditor = commonUtil.hasSupportCKEditor();
+    if (!supportCKEditor && channel === constants.EMAIL && currentStep === 'modeSelection' && slidBoxContent === 'createTemplate') {
+      return true;
+    }
+    if (!supportCKEditor && channel === constants.EMAIL && currentStep === 'createTemplateContent' && slidBoxContent === 'createTemplate') {
+      showFooter = true;
+    }
 
     if (!isFullMode) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
@@ -1369,13 +1393,18 @@ export class Creatives extends React.Component {
     }
 
     if (showFooter) {
-      if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent')
-        || ([constants.SMS, constants.WECHAT].includes(channel) && currentStep === 'modeSelection'))) {
-        showFooter = showFooter && !this.state.isLoadingContent;
-      } else if (slidBoxContent === "editTemplate"
-        && ([constants.SMS, constants.WECHAT, constants.EMAIL].includes(channel)
-          && currentStep === 'modeSelection')) {
-        showFooter = showFooter && !this.state.isLoadingContent;
+      // For new HTML editor flow, don't check isLoadingContent
+      const isNewHTMLEditorFlow = !supportCKEditor && channel === constants.EMAIL && currentStep === 'createTemplateContent' && slidBoxContent === 'createTemplate';
+
+      if (!isNewHTMLEditorFlow) {
+        if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent')
+          || ([constants.SMS, constants.WECHAT].includes(channel) && currentStep === 'modeSelection'))) {
+          showFooter = showFooter && !this.state.isLoadingContent;
+        } else if (slidBoxContent === "editTemplate"
+          && ([constants.SMS, constants.WECHAT, constants.EMAIL].includes(channel)
+            && currentStep === 'modeSelection')) {
+          showFooter = showFooter && !this.state.isLoadingContent;
+        }
       }
     }
 
@@ -1398,10 +1427,17 @@ export class Creatives extends React.Component {
     const channelName = !isFullMode && templateData ? templateData.type : currentChannel;
     const channel = channelName?.toUpperCase();
 
-
+    // Check supportCKEditor flag for new HTML editor flow
+    const supportCKEditor = commonUtil.hasSupportCKEditor();
     if (channel === constants.EMAIL || channel === constants.SMS) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
-      showDone = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
+
+      // For new HTML editor flow (when supportCKEditor is false), show Done footer when in createTemplateContent step
+      if (!supportCKEditor && channel === constants.EMAIL && slidBoxContent === 'createTemplate' && currentStep === 'createTemplateContent') {
+        showDone = true;
+      } else {
+        showDone = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
+      }
     } else if ([constants.WECHAT, constants.MOBILE_PUSH].includes(channel)) {
       showDone = currentStep === "createTemplateContent" || slidBoxContent === "editTemplate";
 
@@ -1411,7 +1447,6 @@ export class Creatives extends React.Component {
       }
     }
 
-
     return showDone;
   }
 
@@ -1431,18 +1466,18 @@ export class Creatives extends React.Component {
   templateNameComponentInput = ({ formData, onFormDataChange, name }) => {
     // Use local state for immediate UI feedback, fallback to prop value
     const displayValue = this.state.localTemplateName !== '' ? this.state.localTemplateName : name;
-    
+
     return (
       <CapInput
         value={displayValue}
         suffix={<span />}
-        onBlur={() => { 
-          this.setState({ 
+        onBlur={() => {
+          this.setState({
             isEditName: false,
             localTemplateName: '' // Clear local state on blur
-          }, () => { 
-            this.showTemplateName({ formData, onFormDataChange }); 
-          }); 
+          }, () => {
+            this.showTemplateName({ formData, onFormDataChange });
+          });
         }}
         onChange={(ev) => {
           const { value } = ev.currentTarget;
@@ -1454,10 +1489,16 @@ export class Creatives extends React.Component {
   }
 
   showTemplateName = ({ formData, onFormDataChange }) => { //gets called from email/index after template data is fetched
-    const { slidBoxContent, currentChannel, isEditName } = this.state;
+    const { slidBoxContent, currentChannel, isEditName, templateStep } = this.state;
     const channel = currentChannel.toUpperCase();
     if ([constants.EMAIL, constants.MOBILE_PUSH, constants.INAPP].includes(channel) && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate')) {
       const name = get(formData, 'template-name');
+
+      const isModeSelectionStep = templateStep === 'modeSelection' || this.creativesTemplateSteps[templateStep] === 'modeSelection';
+      const isCreateMode = slidBoxContent === 'createTemplate';
+      if (isCreateMode && isModeSelectionStep) {
+        return;
+      }
       if (channel === constants.EMAIL && !name && slidBoxContent === 'createTemplate') {
         this.setState({ isTemplateNameEmpty: true });
       }
@@ -1465,7 +1506,7 @@ export class Creatives extends React.Component {
       if (name && !isEditName) {
         this.setState({ showTemplateNameComponentEdit: false });
       } else if (isEditName) {
-        this.setState({ 
+        this.setState({
           showTemplateNameComponentEdit: true,
           localTemplateName: name || '' // Initialize local state with current value
         });
@@ -1488,8 +1529,17 @@ export class Creatives extends React.Component {
     let isShowContinueFooter = false;
     const currentStep = this.creativesTemplateSteps[templateStep];
     const channel = currentChannel.toUpperCase();
+    // Check if supportCKEditor is false (new flow)
+    const supportCKEditor = commonUtil.hasSupportCKEditor(); // Default to legacy flow
     if (channel === constants.EMAIL || channel === constants.SMS) {
-      if ((emailCreateMode === "upload" && !isEmpty(this.props.EmailLayout)) || emailCreateMode === "editor") {
+      // New flow: Show Continue button when supportCKEditor is false and in modeSelection
+      // Always show it (even if disabled) - visibility is separate from enabled state
+      if (!supportCKEditor && currentStep === 'modeSelection' && slidBoxContent === 'createTemplate') {
+        return true; // Return early to ensure visibility
+      }
+
+      // Legacy flow: Original logic (only when supportCKEditor is true)
+      if (supportCKEditor && ((emailCreateMode === "upload" && !isEmpty(this.props.EmailLayout)) || emailCreateMode === "editor")) {
         let isEmailCreate = slidBoxContent === 'createTemplate';
         isEmailCreate = currentChannel.toUpperCase() === constants.EMAIL && ((emailCreateMode === "upload" && currentStep !== 'createTemplateContent') || (emailCreateMode === "editor" && currentStep !== 'createTemplateContent' && currentStep !== "templateSelection"));
         isShowContinueFooter = isEmailCreate && emailCreateMode;
@@ -1525,6 +1575,22 @@ export class Creatives extends React.Component {
     return true;
   }
 
+  // Check if Continue button should be disabled (for new flow only)
+  isContinueButtonDisabled = () => {
+    const { currentChannel, emailCreateMode, templateNameExists } = this.state;
+    const { isFullMode } = this.props;
+    const supportCKEditor = commonUtil.hasSupportCKEditor();
+    if (supportCKEditor) {
+      return false;
+    }
+    if (currentChannel.toUpperCase() === constants.EMAIL) {
+      const isTemplateNameValid = templateNameExists && isFullMode;
+      const isEditorSelected = !!emailCreateMode && emailCreateMode !== 'upload';
+      return !(isTemplateNameValid && isEditorSelected);
+    }
+    return true;
+  }
+
   render() {
     const {
       slidBoxContent,
@@ -1567,6 +1633,10 @@ export class Creatives extends React.Component {
       isLoyaltyModule,
       loyaltyMetaData = {},
     } = this.props;
+    // Compute Continue button label
+    const supportCKEditor = commonUtil.hasSupportCKEditor();
+    const continueButtonLabel = supportCKEditor ? messages.continue : messages.next;
+
     const mapTemplateCreate = slidBoxContent === "createTemplate"
       && weChatTemplateType === MAP_TEMPLATE
       && templateStep !== "modeSelection";
@@ -1697,6 +1767,8 @@ export class Creatives extends React.Component {
               errorMessages={liquidErrorMessage}
               currentTab={activeFormBuilderTab}
               onTestAndPreview={this.handleTestAndPreview}
+              isContinueButtonDisabled={this.isContinueButtonDisabled()}
+              continueButtonLabel={continueButtonLabel}
               showTestAndPreviewButton={(() => {
                 const showButton = currentChannel.toUpperCase() === constants.EMAIL && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate');
                 return showButton;
@@ -1707,7 +1779,7 @@ export class Creatives extends React.Component {
               {(() => {
                 const errorsToShow = get(liquidErrorMessage, constants.LIQUID_ERROR_MSG, []);
                 const standardErrorsToShow = get(liquidErrorMessage, constants.STANDARD_ERROR_MSG, []);
-                return <ErrorInfoNote currentTab={activeFormBuilderTab?.toUpperCase()} errorMessages={{LIQUID_ERROR_MSG: errorsToShow, STANDARD_ERROR_MSG: standardErrorsToShow}} />;
+                return <ErrorInfoNote currentTab={activeFormBuilderTab?.toUpperCase()} errorMessages={{ LIQUID_ERROR_MSG: errorsToShow, STANDARD_ERROR_MSG: standardErrorsToShow }} />;
               })()}
             </CapRow>
           )}

package/v2Containers/CreativesContainer/messages.js

@@ -366,4 +366,8 @@ export default defineMessages({
     id: `${scope}.testAndPreview`,
     defaultMessage: `Preview and Test`,
   },
+  "next": {
+    id: `${scope}.next`,
+    defaultMessage: `Next`,
+  },
 });

package/v2Containers/Email/actions.js

@@ -66,6 +66,13 @@ export function clearCRUDResponse() {
   };
 }
 
+export function getCmsAccounts(cmsType) {
+  return {
+    type: types.GET_CMS_ACCOUNTS_REQUEST,
+    cmsType,
+  };
+}
+
 export function clearStoreValues() {
   return {
     type: types.CLEAR_ALL_VALUES,

package/v2Containers/Email/constants.js

@@ -36,4 +36,8 @@ export const DUPLICATE_TEMPLATE_REQUEST = 'app/v2Containers/Email/DUPLICATE_TEMP
 export const DUPLICATE_TEMPLATE_SUCCESS = 'app/v2Containers/Email/DUPLICATE_TEMPLATE_SUCCESS';
 export const DUPLICATE_TEMPLATE_FAILURE = 'app/v2Containers/Email/DUPLICATE_TEMPLATE_FAILURE';
 
-export const TRANSFORM_EMAIL_TEMPLATE_REQUEST = 'app/v2Containers/Email/TRANSFORM_EMAIL_TEMPLATE_REQUEST';
+export const TRANSFORM_EMAIL_TEMPLATE_REQUEST = 'app/v2Containers/Email/TRANSFORM_EMAIL_TEMPLATE_REQUEST';
+
+export const GET_CMS_ACCOUNTS_REQUEST = 'app/v2Containers/Email/GET_CMS_ACCOUNTS_REQUEST';
+export const GET_CMS_ACCOUNTS_SUCCESS = 'app/v2Containers/Email/GET_CMS_ACCOUNTS_SUCCESS';
+export const GET_CMS_ACCOUNTS_FAILURE = 'app/v2Containers/Email/GET_CMS_ACCOUNTS_FAILURE';

package/v2Containers/Email/index.js

@@ -2998,6 +2998,19 @@ function mapDispatchToProps(dispatch) {
 const withReducer = injectReducer({ key: 'email', reducer: v2EmailReducer });
 const withEmailSaga = injectSaga({ key: 'email', saga: v2EmailSagas });
 
+// Base Email component without saga registration (for use from EmailWrapper)
+// EmailWrapper already registers the saga, so we don't need to register it here
+export const EmailWithoutSaga = withCreatives({
+  WrappedComponent: Email,
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+  sagas: [], // No saga - EmailWrapper registers it
+  reducers: [withReducer],
+});
+
+// Email component with saga registration (for direct use from SlideBoxContent in Edit mode)
+// When Email is used directly (not as child of EmailWrapper), it needs to register the saga
 export default withCreatives({
   WrappedComponent: Email,
   mapStateToProps,

package/v2Containers/Email/messages.js

@@ -302,4 +302,36 @@ export default defineMessages({
     id: 'creatives.containersV2.Email.base64ImageError',
     defaultMessage: 'Base64 images are not allowed. Please upload your image to a gallery and use it, or add the image URL instead.',
   },
+  "editorTypeTitle": {
+    id: 'creatives.containersV2.Email.editorTypeTitle',
+    defaultMessage: 'Editor type',
+  },
+  "htmlEditorTitle": {
+    id: 'creatives.containersV2.Email.htmlEditorTitle',
+    defaultMessage: 'HTML editor',
+  },
+  "htmlEditorDescription": {
+    id: 'creatives.containersV2.Email.htmlEditorDescription',
+    defaultMessage: 'Use a basic HTML editor to write and format your content. Suitable if you are familiar with HTML.',
+  },
+  "dragDropEditorTitle": {
+    id: 'creatives.containersV2.Email.dragDropEditorTitle',
+    defaultMessage: 'Drag & drop editor',
+  },
+  "dragDropEditorDescription": {
+    id: 'creatives.containersV2.Email.dragDropEditorDescription',
+    defaultMessage: 'Create your content visually by dragging blocks — no coding needed. Great for quick, easy designs.',
+  },
+  "uploadZipTitle": {
+    id: 'creatives.containersV2.Email.uploadZipTitle',
+    defaultMessage: 'Upload zip file',
+  },
+  "uploadZipDescription": {
+    id: 'creatives.containersV2.Email.uploadZipDescription',
+    defaultMessage: 'Upload a ZIP containing your custom HTML, images, and assets. Ideal if your content is already built.',
+  },
+  "nextButton": {
+    id: 'creatives.containersV2.Email.nextButton',
+    defaultMessage: 'Next',
+  },
 });

package/v2Containers/Email/reducer.js

@@ -11,6 +11,7 @@ import * as types from './constants';
 const initialState = fromJS({
   createTemplateInProgress: false,
   createResponse: {},
+  isBeeEnabled: false,
 });
 
 function emailReducer(state = initialState, action) {
@@ -107,6 +108,15 @@ function emailReducer(state = initialState, action) {
       return state
         .set('fetchingCmsData', false)
         .set('fetchingCmsDataFailed', true);
+    case types.GET_CMS_ACCOUNTS_REQUEST:
+      return state
+        .set('isBeeEnabled', false); // default to false
+    case types.GET_CMS_ACCOUNTS_SUCCESS:
+      return state
+        .set('isBeeEnabled', action.isBeeEnabled);
+    case types.GET_CMS_ACCOUNTS_FAILURE:
+      return state
+        .set('isBeeEnabled', false);
     case types.CLEAR_EMAIL_CRUD_RESPONSE_REQUEST:
       return state
         .set('createResponse', fromJS({}));
@@ -139,7 +149,8 @@ function emailReducer(state = initialState, action) {
         .set('CmsSettings', fromJS({}))
         .set('fetchingCmsData', false)
         .set('duplicateResponse', fromJS({}))
-        .set('cmsData', '');
+        .set('cmsData', '')
+        .set('isBeeEnabled', false);
     case types.TRANSFORM_EMAIL_TEMPLATE_REQUEST:
       return state.set("createTemplateInProgress", true);
     default:

package/v2Containers/Email/sagas.js

@@ -87,6 +87,17 @@ export function* getCmsData({cmsType, projectId, langId}) {
   }
 }
 
+export function* getCmsAccounts({cmsType}) {
+  try {
+    const result = yield call(Api.getCmsAccounts, cmsType);
+    const { cmsAccounts } = result.data?.response || {};
+    const isBeeEnabled = cmsAccounts?.type === cmsType;
+    yield put({ type: types.GET_CMS_ACCOUNTS_SUCCESS, isBeeEnabled });
+  } catch (error) {
+    yield put({ type: types.GET_CMS_ACCOUNTS_FAILURE, error });
+  }
+}
+
 export function* uploadAsset(file, assetType, fileParams) {
   try {
     const result = yield call(Api.uploadFile, file, assetType, fileParams);
@@ -123,6 +134,10 @@ function* watchGetCmsData() {
   yield takeEvery(types.GET_CMS_EDITOR_DATA_REQUEST, getCmsData);
 }
 
+function* watchGetCmsAccounts() {
+  yield takeEvery(types.GET_CMS_ACCOUNTS_REQUEST, getCmsAccounts);
+}
+
 function* watchUploadAsset() {
   yield takeLatest(types.UPLOAD_ASSET_REQUEST, uploadAsset);
 }
@@ -139,6 +154,7 @@ export default [
   watchGetAllAssets,
   watchGetCmsSetting,
   watchGetCmsData,
+  watchGetCmsAccounts,
   watchUploadAsset,
   watchDuplicateTemplate,
 ];
@@ -151,6 +167,7 @@ export function* v2EmailSagas() {
     watchGetAllAssets(),
     watchGetCmsSetting(),
     watchGetCmsData(),
+    watchGetCmsAccounts(),
     watchUploadAsset(),
   ]);
 }