@capillarytech/creatives-library 7.18.0-beta.0 → 8.0.0

package/v2Components/TemplatePreview/messages.js

@@ -82,4 +82,12 @@ export default defineMessages({
     id: 'creatives.componentsV2.TemplatePreview.videoPreviewTooltip',
     defaultMessage: "This is just for preview purposes, video cannot be played here",
   },
+  previewUrlMetaImage: {
+    id: 'creatives.componentsV2.TemplatePreview.previewUrlMetaImage',
+    defaultMessage: 'Preview url meta image',
+  },
+  addToCart: {
+    id: `creatives.componentsV2.TemplatePreview.addToCart`,
+    defaultMessage: 'Add to cart',
+  },
 });

package/v2Components/TemplatePreview/tests/__snapshots__/index.test.js.snap

@@ -98,13 +98,6 @@ exports[`Test Templates container Should render correct preview component for wh
               >
                 <CapIcon
                   size="xs"
-                  svgProps={
-                    Object {
-                      "style": Object {
-                        "marginRight": "4px",
-                      },
-                    }
-                  }
                   type="call"
                 />
                 Call
@@ -115,13 +108,6 @@ exports[`Test Templates container Should render correct preview component for wh
               >
                 <CapIcon
                   size="xs"
-                  svgProps={
-                    Object {
-                      "style": Object {
-                        "marginRight": "4px",
-                      },
-                    }
-                  }
                   type="launch"
                 />
                 Visit
@@ -292,3 +278,50 @@ exports[`Test Templates container Should render correct preview component for wh
   </CapColumn>
 </CapRow>
 `;
+
+exports[`Test Templates container Should render correct preview component for zalo channel 1`] = `
+<CapRow>
+  <CapColumn
+    span={24}
+  >
+    <div
+      className="preview-container "
+    >
+      <CapRow
+        className="zalo-preview-container zalo-preview-container-campaign"
+      >
+        <CapRow>
+          <CapLabel
+            className="preview-head"
+            type="label1"
+          >
+            Preview
+          </CapLabel>
+        </CapRow>
+        <CapRow>
+          <CapLabel
+            className="preview-text"
+            type="label1"
+          >
+            Preview of the template is generated on the Zalo platform. Click on ‘Open preview’ to view it in a new tab
+          </CapLabel>
+        </CapRow>
+        <CapRow>
+          <CapLabel
+            className="preview-link"
+            data-testid="preview-link-button"
+            onClick={[Function]}
+            type="label1"
+          >
+            Open Preview
+             
+            <CapIcon
+              type="open-in-new-light"
+            />
+          </CapLabel>
+        </CapRow>
+      </CapRow>
+    </div>
+  </CapColumn>
+</CapRow>
+`;

package/v2Components/TemplatePreview/tests/index.test.js

@@ -11,6 +11,7 @@ describe('Test Templates container', () => {
     content,
     whatsappAccountName,
     whatsappContentLen,
+    templateData
   ) => {
     renderedComponent = shallowWithIntl(
       <TemplatePreview
@@ -18,6 +19,7 @@ describe('Test Templates container', () => {
         content={content}
         whatsappAccountName={whatsappAccountName}
         whatsappContentLen={whatsappContentLen}
+        templateData={templateData}
       />,
     );
   };
@@ -61,6 +63,13 @@ describe('Test Templates container', () => {
     renderFunction('whatsapp', {}, 'test', 0);
     expect(renderedComponent).toMatchSnapshot();
   });
+  it('Should render correct preview component for zalo channel', () => {
+    renderFunction('zalo', {}, '', '', {
+      templatePreviewUrl: 'https://account.zalo.cloud/znspreview/-CL4HT4Hwza4v5ocK3pdVQ=='
+    });
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
   it('Should render correct preview component for rcs channel', () => {
     renderFunction('rcs', {
       rcsPreviewContent: {

package/v2Components/WhatsappStatusContainer/_whatsappStatusContainer.scss

@@ -1,6 +1,7 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
-.whatsapp-status-container {
+.whatsapp-status-container, 
+.zalo-status-container {
   margin-top: $CAP_SPACE_12;
   width: 150%;
   height: 20px;
@@ -12,4 +13,10 @@
   .whatsapp-category-tag {
     margin-left: $CAP_SPACE_08;
   }
+}
+
+.zalo-status-color {
+  div {
+    color: $CAP_G17;
+  }
 }

package/v2Containers/App/constants.js

@@ -20,12 +20,11 @@ export const getLoyaltyTopbarMenuDataValue = () => [
     link: 'loyalty/ui/',
     key: 'programs',
   },
-  //commented as promotions are not supported in loyalty v2 flow
-  // {
-  //   label: <FormattedMessage {...globalMessages.promotions} />,
-  //   link: 'loyalty/ui/promotions/',
-  //   key: 'promotions',
-  // },
+  {
+    label: <FormattedMessage {...globalMessages.promotions} />,
+    link: 'loyalty/ui/promotions/list',
+    key: 'promotions',
+  },
   {
     label: <FormattedMessage {...globalMessages.creatives} />,
     link: '/creatives/ui/v2/loyalty',
@@ -50,6 +49,13 @@ export const VIBER = 'viber';
 export const FACEBOOK = 'facebook';
 export const WHATSAPP = 'whatsapp';
 export const RCS = 'rcs';
+export const LINE = 'line';
+export const EMAIL = 'email';
+export const ASSETS = 'assets';
+export const ZALO = 'zalo';
+export const INAPP = 'inapp';
+
+export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
 
 export const TRACK_EDIT_SMS = 'editSms';
 export const TRACK_EDIT_EMAIL = 'editEmail';

package/v2Containers/App/sagas.js

@@ -1,5 +1,4 @@
 import { call, put, takeLatest } from 'redux-saga/effects';
-// import { LOCATION_CHANGE } from 'react-router-redux';
 // import { schema, normalize } from 'normalizr';
 import * as Api from '../../services/api';
 import * as types from './constants';

package/v2Containers/Assets/Gallery/index.js

@@ -307,6 +307,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
     const currentChannel = 'gallery';
     const { searchLoader, searchText } = this.state;
     const cardDataList = templates?.length ? _.map(templates, (template) => {
+      template.name = commonUtil.getDecodedFileName(template?.name);
       const templateData =
         {
           key: `${currentChannel}-card-${template.name}`,

package/v2Containers/Assets/Gallery/sagas.js

@@ -1,5 +1,4 @@
-import { take, call, put, takeLatest, cancel } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'react-router-redux';
+import { call, put, takeLatest, all} from 'redux-saga/effects';
 import * as Api from '../../../services/api';
 import * as types from './constants';
 
@@ -52,27 +51,19 @@ export function* fetchUserList() {
 
 
 function* watchGetAllAssets() {
-  const watcher = yield takeLatest(types.GET_ALL_ASSETS_REQUEST, getAllAssets);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.GET_ALL_ASSETS_REQUEST, getAllAssets);
 }
 
 function* watchDeleteAssetById() {
-  const watcher = yield takeLatest(types.DELETE_ASSET_REQUEST, deleteAssetById);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.DELETE_ASSET_REQUEST, deleteAssetById);
 }
 
 function* watchUploadAsset() {
-  const watcher = yield takeLatest(types.UPLOAD_ASSET_REQUEST, uploadAsset);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.UPLOAD_ASSET_REQUEST, uploadAsset);
 }
 
 function* watchGetUserList() {
-  const watcher = yield takeLatest(types.GET_USER_LIST_REQUEST, fetchUserList);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.GET_USER_LIST_REQUEST, fetchUserList);
 }
 
 // All sagas to be loaded
@@ -82,3 +73,13 @@ export default [
   watchDeleteAssetById,
   watchGetUserList,
 ];
+
+
+export function* v2GallerySagas() {
+  yield all([
+    watchGetAllAssets(),
+    watchUploadAsset(),
+    watchDeleteAssetById(),
+    watchGetUserList(),
+  ]);
+}

package/v2Containers/BeeEditor/index.js

@@ -76,13 +76,15 @@ function BeeEditor(props) {
     'en': 'en',
     'zh-cn': 'zh',
     'zh': 'zh',
+    'jp': 'jp',
+    'ja-JP': 'ja-JP',
   };
   const user = localStorage.getItem('user');
   let locale = 'en';
   if (user && JSON.parse(user).lang) {
     locale = JSON.parse(user).lang;
   }
-  const defaultFormattedUrl = locale !== DEFAULT_LOCALE && ['zh-cn', 'zh'].includes(locale)
+  const defaultFormattedUrl = locale !== DEFAULT_LOCALE && ['zh-cn', 'zh', 'jp', 'ja-JP'].includes(locale)
       ? `${API_ENDPOINT}/common/getBEECustomLangunage?langid=${MAPPED_LOCALE[locale]}`
       : "";
   useEffect(() => {

package/v2Containers/BeeEditor/sagas.js

@@ -1,5 +1,4 @@
-import { take, cancel, call, put, takeLatest } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'react-router-redux';
+import { call, put, takeLatest, all } from 'redux-saga/effects';
 import * as Api from '../../services/api';
 import * as types from './constants';
 
@@ -22,12 +21,16 @@ export function* createCustomRow({data, callback}) {
 }
 
 function* watchCreateCustomRow() {
-  const watcher = yield takeLatest(types.CREATE_CUSTOM_ROW_REQUEST, createCustomRow);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.CREATE_CUSTOM_ROW_REQUEST, createCustomRow);
 }
 
 // All sagas to be loaded
 export default [
   watchCreateCustomRow,
 ];
+
+export function* v2BeeEditionSagas() {
+  yield all([
+    watchCreateCustomRow(),
+  ]);
+}

package/v2Containers/CallTask/sagas.js

@@ -1,4 +1,4 @@
-// import { take, call, put, select } from 'redux-saga/effects';
+import { all } from 'redux-saga/effects';
 
 // Individual exports for testing
 export function* defaultSaga() {
@@ -9,3 +9,9 @@ export function* defaultSaga() {
 export default [
   defaultSaga,
 ];
+
+export function* v2CallTaskSagas() {
+  yield all([
+    defaultSaga(),
+  ]);
+}

package/v2Containers/Cap/actions.js

@@ -73,3 +73,7 @@ export function clearTopbarMenuData() {
     type: types.CLEAR_TOPBAR_MENU_DATA,
   };
 }
+
+export const getSupportVideosConfig = () => ({
+  type: types.GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
+});

package/v2Containers/Cap/constants.js

@@ -39,4 +39,23 @@ export const ORG_REFRESH_SEC = 10;
 export const ORG_CHANGED = 'ORG_CHANGED';
 
 export const ENABLE_AI_SUGGESTIONS = 'ENABLE_AI_SUGGESTIONS';
-
+export const AI_CONTENT_BOT_DISABLED = 'AI_CONTENT_BOT_DISABLED';
+export const AI_DOCUMENTATION_BOT_ENABLED = 'AI_DOCUMENTATION_BOT_ENABLED';
+export const ERROR_IN_FETCHING_TAGS = 'Error in fetching tags';
+export const ENABLE_NEW_LEFT_NAVIGATION = 'ENABLE_NEW_LEFT_NAVIGATION';
+export const AI_DOCUMENTATION_BOT_DISABLED = 'AI_DOCUMENTATION_BOT_DISABLED';
+
+export const GET_SUPPORT_VIDEOS_CONFIG_REQUEST =
+  'cap/GET_SUPPORT_VIDEOS_CONFIG_REQUEST';
+export const GET_SUPPORT_VIDEOS_CONFIG_SUCCESS =
+  'cap/GET_SUPPORT_VIDEOS_CONFIG_SUCCESS';
+export const GET_SUPPORT_VIDEOS_CONFIG_FAILURE =
+  'cap/GET_SUPPORT_VIDEOS_CONFIG_FAILURE';
+
+export const REQUEST = 'REQUEST';
+export const SUCCESS = 'SUCCESS';
+export const FAILURE = 'FAILURE';
+
+export const ENABLE_PRODUCT_SUPPORT_VIDEOS = 'ENABLE_PRODUCT_SUPPORT_VIDEOS';
+export const DEFAULT = 'default';
+export const DEFAULT_MODULE = 'creatives';

package/v2Containers/Cap/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Helmet from 'react-helmet';
 import { connect } from 'react-redux';
 import { CapNotification, CapModal, CapSnackBar, CapSomethingWentWrong } from '@capillarytech/cap-ui-library';
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, compose } from 'redux';
 import styled from 'styled-components';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
@@ -12,7 +12,7 @@ import moment from 'moment';
 import { GA, multipleOrgSwitch, utilsSessionStorageApi, Auth } from '@capillarytech/cap-ui-utils';
 import { injectIntl, FormattedMessage, intlShape, FormattedHTMLMessage } from 'react-intl';
 import messages from './messages';
-import { makeSelectAuthenticated, makeSelectUser } from './selectors';
+import { makeSelectAuthenticated, makeSelectUser, makeSelectDemoVideoAndLink } from './selectors';
 import * as actions from './actions';
 import * as locationActions from '../LanguageProvider/actions';
 import * as appActions from '../App/actions';
@@ -21,13 +21,27 @@ import NavigationBar from '../../v2Components/NavigationBar';
 import { engagePlusPublicPath, publicPath } from '../../config/path';
 import { GTM_TRACKING_ID, CREATIVES_UI_VIEW, FAILURE } from '../App/constants';
 import { makeSelectLocale } from '../../v2Containers/LanguageProvider/selectors';
+import CapSupportVideosWrapper from '@capillarytech/cap-ui-library/CapSupportVideosWrapper';
+import { replaceDynamicAndCompare } from '@capillarytech/cap-ui-library/CapSupportVideosWrapper/utils';
 import {
   ORG_SETTINGS_URL,
   CAMPAIGN_SETTINGS_URL,
   ORG_REFRESH_SEC,
   ORG_CHANGED,
+  REQUEST,
+  DEFAULT,
+  ENABLE_PRODUCT_SUPPORT_VIDEOS,
+  ENABLE_NEW_LEFT_NAVIGATION,
 } from './constants';
 import './_cap.scss';
+import { Switch } from 'react-router';
+import componentRoutes from '../../../app/routes';
+import RenderRoute from '../../v2Components/RenderRoute';
+import injectReducer from '../../utils/injectReducer';
+import injectSaga from '../../utils/injectSaga';
+import reducer from './reducer';
+import { v2CapSagas } from './sagas';
+
 const gtm = window.dataLayer || [];
 const {
   logNewTab,
@@ -50,6 +64,17 @@ const CapWrapper = styled.div`
 `;
 GA.initialize({ accessKey: GTM_TRACKING_ID, trackUIError: true, trackLoadPerformance: 'creatives' });
 
+const MainWrapper = styled.div`
+  position: relative;
+  min-height: calc(100vh - 5.29rem);
+  top: ${(props) => (props.isLatestLeftNavigationEnabled ? '1.72rem' : '5.29rem')};
+`;
+
+const ContentWrapper = styled.div`
+  && {
+    margin-left: ${(props) => (props.isLatestLeftNavigationEnabled ? (props.leftNavbarExpanded ? '17rem' : '4.475rem') : 0)};
+  }
+`;
 
 export class Cap extends React.Component { // eslint-disable-line react/prefer-stateless-function
 
@@ -63,6 +88,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
       showRefreshModal: false,
       showOrgChangeModal: false,
       localStorageOrgInfo: { oldValue: null, newValue: null },
+      leftNavbarExpanded: false,
     };
     this.changeOrg = this.changeOrg.bind(this);
     this.logout = this.logout.bind(this);
@@ -81,7 +107,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
       }
       const userGtmData = this.getUserGtmData();
       this.setDimensionData(userGtmData);
-      gtm.push({...userGtmData, event: 'userAuthenticated'});
+      gtm.push({ ...userGtmData, event: 'userAuthenticated' });
       Auth.initialize({
         permissions: userData.accessiblePermissions,
         isCapUser: userData.isCapUser,
@@ -91,7 +117,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     });
     this.props.actions.getTopbarMenuData(parentModule);
     if (this.props.Global.orgID !== undefined) {
-      gtm.push({orgId: this.props.Global.orgID});
+      gtm.push({ orgId: this.props.Global.orgID });
     }
     if (this.props.Global.isLoggedIn) {
       if (this.props.Global.user && Object.keys(this.props.Global.user).length) {
@@ -109,7 +135,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     }
     locale = this.getMappedLocale(locale);
     //locale = 'zh';
-
+    this.props.actions.getSupportVideosConfig();
     moment.locale(locale);
     window.addEventListener('storage', this.handleStorageChange, false);
     document.addEventListener(
@@ -129,7 +155,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
       this.navigateToDashboard();
     }
 
-    const callBack = nextProps.routeParams.callbackUrl ? decodeURIComponent(nextProps.routeParams.callbackUrl) : "";
+    const callBack = nextProps?.routeParams?.callbackUrl ? decodeURIComponent(nextProps?.routeParams?.callbackUrl) : "";
     if (nextProps.Global.error) {
       const locationValue = `${window.location.origin}${callBack}?flash=${nextProps.Global.error}`;
       window.location.replace(locationValue);
@@ -241,7 +267,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
   navigateToDashboard() {
     const dashboardUrl = process.env.NODE_ENV === 'production' ? config.production.dashboard_url_v2 : config.development.dashboard_url_v2;
     this.props.router.push({ pathname: dashboardUrl, state: {} });
-    this.props.router.go(dashboardUrl);
+    this.props.router.go();
   }
 
   logout() {
@@ -413,6 +439,50 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     this.setState({ showOrgChangeModal: false });
   };
 
+  renderNavigationComponent(component) {
+    const { demoVideoAndLinkJSONData: {
+        demoVideoAndLinkJSON = {},
+        demoVideoAndLinkJSONStatus,
+      } = {},
+      Global,
+    } = this.props;
+    const { currentOrgDetails = {}, user = {} } =
+    Global || {};
+    const { lang: userLocale = '' } = user;
+    let wrapperComponent = <>{component}</>;
+    const {
+      basicDetails: { base_language: orgLocale = '' } = {},
+      accessibleFeatures = [],
+    } = currentOrgDetails || {};
+    if (
+      accessibleFeatures.includes(
+        ENABLE_PRODUCT_SUPPORT_VIDEOS
+      ) &&
+      demoVideoAndLinkJSON?.is_active &&
+      demoVideoAndLinkJSONStatus !== REQUEST
+    ) {
+      const demoLocale = userLocale || orgLocale || DEFAULT;
+      const JSONInContext = demoVideoAndLinkJSON?.json_config;
+      const currentPathJSON = JSONInContext?.find((routeEle) =>
+        replaceDynamicAndCompare(location?.pathname, routeEle?.route),
+      );
+      const targetElements = currentPathJSON?.target_elements || {};
+      wrapperComponent = (
+        <CapSupportVideosWrapper
+          targetElements={targetElements}
+          locale={demoLocale}
+        >
+          {component}
+        </CapSupportVideosWrapper>
+      );
+    }
+    return wrapperComponent;
+  }
+
+  handleLeftNavBarExpanded = (leftNavbarExpandedProp) => {
+    this.setState({leftNavbarExpanded: leftNavbarExpandedProp})
+  }
+
   render() {
     const { Global, location } = this.props;
     const { topbarMenuData, isLoggedIn, currentOrgDetails = {}, getUserDataStatus, getUserDataCode } = Global;
@@ -420,7 +490,9 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     const type = this.props.location.query.type;
     const toastMessages = this.props.Global.messages;
     const { isCreativesAccessible, showOrgChangeModal, showRefreshModal } = this.state;
-
+    const isLatestLeftNavigationEnabled = currentOrgDetails?.accessibleFeatures?.includes(
+      ENABLE_NEW_LEFT_NAVIGATION,
+    );
     return (
       <CapWrapper>
         { this.props.loader.localeLoading || this.props.Global.fetching_userdata ?
@@ -441,9 +513,10 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
               {
                 getUserDataStatus === FAILURE &&
                   getUserDataCode !== 401 &&
-                    <CapSomethingWentWrong url={`${window.location.origin}${publicPath}v2`} />
+                    <CapSomethingWentWrong url={`${window.location.origin}${publicPath}/v2`} />
               }
               {isLoggedIn && type !== 'embedded' ?
+              this.renderNavigationComponent(
                 <NavigationBar
                   userData={Global}
                   changeOrg={this.changeOrg}
@@ -455,13 +528,29 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
                   topbarMenuData={topbarMenuDataOptions}
                   location={location}
                   campaignOrgV2Status={currentOrgDetails.org_campaign_v2_status}
-            /> : ''}
-              <div className="main" style={{minHeight: 'calc(100vh - 74px', position: 'relative', top: '74px'}}>
-
-                <div className="main-content">
-                  {React.Children.toArray(this.props.children)}
-                </div>
-              </div>
+                  handleLeftNavBarExpanded={this.handleLeftNavBarExpanded}
+                  leftNavbarExpandedProp={this.state.leftNavbarExpanded}
+                />) : ''}
+              <MainWrapper isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled} className="main">
+
+                <ContentWrapper
+                  className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}
+                  isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled}
+                  leftNavbarExpanded={this.state.leftNavbarExpanded}
+                >
+                  <Switch>
+                    {componentRoutes.map(routeProps => {
+                      return (
+                        <RenderRoute
+                          {...routeProps}
+                          key={routeProps.path}
+                          isLoggedIn={isLoggedIn}
+                        />
+                      )}
+                    )}
+                  </Switch>
+                </ContentWrapper>
+              </MainWrapper>
             </div>
             {(toastMessages && toastMessages.length > 0) &&
           toastMessages.map((message) => {
@@ -488,12 +577,14 @@ Cap.propTypes = {
   locationActions: PropTypes.object,
   location: PropTypes.object,
   intl: intlShape.isRequired,
+  demoVideoAndLinkJSONData: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
   Global: makeSelectAuthenticated(),
   User: makeSelectUser(),
   loader: makeSelectLocale(),
+  demoVideoAndLinkJSONData: makeSelectDemoVideoAndLink(),
 });
 
 function mapDispatchToProps(dispatch) {
@@ -504,4 +595,12 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Cap));
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+const withReducer = injectReducer({ key: 'cap', reducer });
+const withSaga = injectSaga({ key: 'cap', saga: v2CapSagas });
+
+export default compose(
+  withReducer,
+  withSaga,
+  withConnect,
+)(injectIntl(Cap));

package/v2Containers/Cap/messages.js

@@ -201,5 +201,13 @@ export default defineMessages({
     id: `creatives.componentsV2.unbalanacedCurlyBraces`,
     defaultMessage: 'Invalid label, please close all curly braces'
   },
+  "copyOf": {
+    id: 'creatives.componentsV2.copyOf',
+    defaultMessage: 'Copy of',
+  },
+  autofill:{
+    id: 'creatives.componentsV2.autofill',
+    defaultMessage: 'Autofill',
+  },
 });
 

package/v2Containers/Cap/reducer.js

@@ -79,10 +79,12 @@ function capReducer(state = fromJS(initialState.cap), action) {
         .set('getUserDataCode', action.status);
     case types.GET_SCHEMA_FOR_ENTITY_REQUEST:
       return state
-        .set('fetchingSchema', true);
+        .set('fetchingSchema', true)
+        .set('fetchingSchemaError', false);
     case types.GET_SCHEMA_FOR_ENTITY_FAILURE:
       return state
-        .set('fetchingSchema', false);
+        .set('fetchingSchema', false)
+        .set('fetchingSchemaError', true);
     case types.GET_SCHEMA_FOR_ENTITY_SUCCESS: {
       const stateMeta = state.get('metaEntities');
       return state
@@ -90,7 +92,8 @@ function capReducer(state = fromJS(initialState.cap), action) {
         .set('metaEntities', {
           layouts: action.data && action.entityType === 'LAYOUT' ? action.data.metaEntities : stateMeta.layouts,
           tags: action.data && action.entityType === 'TAG' ? action.data.metaEntities : stateMeta.tags,
-        });
+        })
+        .set('fetchingSchemaError', false);
     }
     case types.CLEAR_META_ENTITIES:
       return state.set('metaEntities', {
@@ -124,6 +127,18 @@ function capReducer(state = fromJS(initialState.cap), action) {
         .set('tagsToDisable', action.tagsToDisable)
         .set('parentTagsToDisable', action.parentTagsToDisable);
     }
+    case types.GET_SUPPORT_VIDEOS_CONFIG_REQUEST:
+      return state
+        .set('demoVideoAndLinkJSONStatus', types.REQUEST)
+        .set('demoVideoAndLinkJSON', {});
+    case types.GET_SUPPORT_VIDEOS_CONFIG_SUCCESS:
+      return state
+        .set('demoVideoAndLinkJSONStatus', types.SUCCESS)
+        .set('demoVideoAndLinkJSON', action?.result);
+    case types.GET_SUPPORT_VIDEOS_CONFIG_FAILURE:
+      return state
+        .set('demoVideoAndLinkJSONStatus', types.FAILURE)
+        .set('demoVideoAndLinkJSONError', action?.error);
     default:
       return state;
   }