@capillarytech/creatives-library 6.9.1 → 6.9.5

package/v2Containers/Templates/actions.js

@@ -1,122 +1,117 @@
-/*
- *
- * Templates actions
- *
- */
-
- import * as types from './constants';
-
- export function getAllTemplates(channel, queryParams) {
-   console.log('get all templates action trigereed', channel, queryParams);
-   return {
-     type: types.GET_ALL_TEMPLATES_REQUEST, channel, queryParams,
-   };
- }
-
- export function resetTemplate() {
-   return {
-     type: types.RESET_TEMPLATE,
-   };
- }
-
- export function resetAccount() {
-   return {
-     type: types.RESET_ACCOUNT,
-   };
- }
-
- export function deleteTemplate(channel, id) {
-   console.log('delete template action trigereed', channel, id);
-   return {
-     type: types.DELETE_TEMPLATE_REQUEST, channel, id,
-   };
- }
-
- export function getUserList() {
-   return {
-     type: types.GET_USER_LIST_REQUEST,
-   };
- }
-
- export function getWeCrmAccounts(source) {
-   return {
-     type: types.GET_WECRM_ACCOUNTS_REQUEST, source,
-   };
- }
-
- export function setWeChatAccount(weChatAccount) {
-   console.log('setting wechat account', weChatAccount);
-   return {
-     type: types.SET_WECHAT_ACCOUNT,
-     weChatAccount,
-   };
- }
-
- export function setLineAccount(lineAccount) {
-  return {
-    type: types.SET_LINE_ACCOUNT,
-    lineAccount,
-  };
-}
-
- export function handleHtmlUpload(selectedTemplate) {
-   return {
-     type: types.SET_SELECTED_LAYOUT,
-     selectedTemplate,
-   };
- }
-
- export function handleZipUpload(selectedFile, successHandler, errorHandler) {
-   return {
-     type: types.SEND_ZIPPED_FILE_REQUEST,
-     selectedFile,
-     successHandler,
-     errorHandler,
-   };
- }
-
- export function getDefaultBeeTemplates() {
-   return {
-     type: types.GET_DEAFULT_BEE_TEMPLATES_REQUEST,
-   };
- }
-
- export function setEdmTemplate(template) {
-   return {
-     type: types.SET_EDM_TEMPLATE,
-     template,
-   };
- }
- export function setBEETemplate(template) {
-   return {
-     type: types.SET_BEE_TEMPLATE,
-     template,
-   };
- }
- export function getTemplateDetails(id, channel) {
-   console.log('getting template', id, channel);
-   return {
-     type: types.GET_TEMPLATE_DETAILS_REQUEST,
-     id,
-     channel,
-   };
- }
-
- export function resetTemplateData() {
-   return {
-     type: types.RESET_TEMPLATE_DATA,
-   };
- }
-
- export function resetUploadData() {
-   console.log('clearing upload data');
-   return {
-     type: types.RESET_UPLOAD_DATA,
-   };
- }
-
- export function resetTemplateStoreData() {
-   return {
-     type: types.CLEAR_TEMPLATE_STORE_DATA,
-   };
- }
+/*
+ *
+ * Templates actions
+ *
+ */
+
+ import * as types from './constants';
+
+ export function getAllTemplates(channel, queryParams) {
+   console.log('get all templates action trigereed', channel, queryParams);
+   return {
+     type: types.GET_ALL_TEMPLATES_REQUEST, channel, queryParams,
+   };
+ }
+
+ export function resetTemplate() {
+   return {
+     type: types.RESET_TEMPLATE,
+   };
+ }
+
+ export function resetAccount() {
+   return {
+     type: types.RESET_ACCOUNT,
+   };
+ }
+
+ export function deleteTemplate(channel, id) {
+   console.log('delete template action trigereed', channel, id);
+   return {
+     type: types.DELETE_TEMPLATE_REQUEST, channel, id,
+   };
+ }
+
+ export function getUserList() {
+   return {
+     type: types.GET_USER_LIST_REQUEST,
+   };
+ }
+
+ export function getWeCrmAccounts(source) {
+   return {
+     type: types.GET_WECRM_ACCOUNTS_REQUEST, source,
+   };
+ }
+
+ export function setWeChatAccount(weChatAccount) {
+   console.log('setting wechat account', weChatAccount);
+   return {
+     type: types.SET_WECHAT_ACCOUNT,
+     weChatAccount,
+   };
+ }
+
+ export function setLineAccount(lineAccount) {
+  return {
+    type: types.SET_LINE_ACCOUNT,
+    lineAccount,
+  };
+}
+
+ export function handleHtmlUpload(selectedTemplate) {
+   return {
+     type: types.SET_SELECTED_LAYOUT,
+     selectedTemplate,
+   };
+ }
+
+ export function handleZipUpload(selectedFile, successHandler, errorHandler) {
+   return {
+     type: types.SEND_ZIPPED_FILE_REQUEST,
+     selectedFile,
+     successHandler,
+     errorHandler,
+   };
+ }
+
+ export function getEdmDefaultTemplates() {
+   return {
+     type: types.GET_EDM_DEAFULT_TEMPLATES_REQUEST,
+   };
+ }
+
+ export function setEdmTemplate(template) {
+   return {
+     type: types.SET_EDM_TEMPLATE,
+     template,
+   };
+ }
+
+ export function getTemplateDetails(id, channel) {
+   console.log('getting template', id, channel);
+   return {
+     type: types.GET_TEMPLATE_DETAILS_REQUEST,
+     id,
+     channel,
+   };
+ }
+
+ export function resetTemplateData() {
+   return {
+     type: types.RESET_TEMPLATE_DATA,
+   };
+ }
+
+ export function resetUploadData() {
+   console.log('clearing upload data');
+   return {
+     type: types.RESET_UPLOAD_DATA,
+   };
+ }
+
+ export function resetTemplateStoreData() {
+   return {
+     type: types.CLEAR_TEMPLATE_STORE_DATA,
+   };
+ }

package/v2Containers/Templates/constants.js

@@ -1,49 +1,47 @@
-/*
- *
- * Templates constants
- *
- */
-
-export const DEFAULT_ACTION = 'app/Templates/DEFAULT_ACTION';
-
-export const GET_ALL_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_ALL_TEMPLATES_REQUEST';
-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 DELETE_TEMPLATE_REQUEST = 'app/v2Containers/Templates/DELETE_TEMPLATE_REQUEST';
-export const DELETE_TEMPLATE_SUCCESS = 'app/v2Containers/Templates/DELETE_TEMPLATE_SUCCESS';
-export const DELETE_TEMPLATE_FAILURE = 'app/v2Containers/Templates/DELETE_TEMPLATE_FAILURE';
-
-export const GET_USER_LIST_REQUEST = "app/v2Containers/GET_USER_LIST_REQUEST";
-export const GET_USER_LIST_SUCCESS = "app/v2Containers/GET_USER_LIST_SUCCESS";
-export const GET_USER_LIST_FAILURE = "app/v2Containers/GET_USER_LIST_FAILURE";
-
-export const GET_WECRM_ACCOUNTS_REQUEST = "app/v2Containers/Templates/GET_WECRM_ACCOUNTS_REQUEST";
-export const GET_WECRM_ACCOUNTS_SUCCESS = "app/v2Containers/Templates/GET_WECRM_ACCOUNTS_SUCCESS";
-export const GET_WECRM_ACCOUNTS_FAILURE = "app/v2Containers/Templates/GET_WECRM_ACCOUNTS_FAILURE";
-export const SET_WECHAT_ACCOUNT = "app/v2Containers/Templates/SET_WECHAT_ACCOUNT";
-
-export const SET_SELECTED_LAYOUT = "app/v2Containers/Templates/SET_SELECTED_LAYOUT";
-export const SEND_ZIPPED_FILE_REQUEST = "app/v2Containers/Templates/SEND_ZIPPED_FILE_REQUEST";
-export const SEND_ZIPPED_FILE_SUCCESS = "app/v2Containers/Templates/SEND_ZIPPED_FILE_SUCCESS";
-export const SEND_ZIPPED_FILE_FAILURE = "app/v2Containers/Templates/SEND_ZIPPED_FILE_FAILURE";
-
-export const GET_TEMPLATE_DETAILS_REQUEST = 'app/v2Containers/Templates/GET_TEMPLATE_DETAILS_REQUEST';
-export const GET_TEMPLATE_DETAILS_SUCCESS = 'app/v2Containers/Templates/GET_TEMPLATE_DETAILS_SUCCESS';
-export const GET_TEMPLATE_DETAILS_FAILURE = 'app/v2Containers/Templates/GET_TEMPLATE_DETAILS_FAILURE';
-
-
-export const SET_EDM_TEMPLATE = "app/v2Containers/Templates/SET_EDM_TEMPLATE";
-export const SET_BEE_TEMPLATE = "app/v2Containers/Templates/SET_BEE_TEMPLATE";
-
-export const RESET_ACCOUNT = "app/v2Containers/Templates/RESET_ACCOUNT";
-export const RESET_TEMPLATE = "app/v2Containers/Templates/RESET_TEMPLATE";
-export const RESET_TEMPLATE_DATA = "app/v2Containers/Templates/RESET_TEMPLATE_DATA";
-export const RESET_UPLOAD_DATA = "app/v2Containers/Templates/RESET_UPLOAD_DATA";
-export const CLEAR_TEMPLATE_STORE_DATA = "app/v2Containers/Templates/CLEAR_TEMPLATE_STORE_DATA";
-
-export const SET_LINE_ACCOUNT = "app/v2Containers/Templates/SET_LINE_ACCOUNT";
-
-export const GET_DEAFULT_BEE_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_REQUEST';
-export const GET_DEAFULT_BEE_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_SUCCESS';
-export const GET_DEAFULT_BEE_TEMPLATES_FAILURE = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_FAILURE';
+/*
+ *
+ * Templates constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/Templates/DEFAULT_ACTION';
+
+export const GET_ALL_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_ALL_TEMPLATES_REQUEST';
+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 DELETE_TEMPLATE_REQUEST = 'app/v2Containers/Templates/DELETE_TEMPLATE_REQUEST';
+export const DELETE_TEMPLATE_SUCCESS = 'app/v2Containers/Templates/DELETE_TEMPLATE_SUCCESS';
+export const DELETE_TEMPLATE_FAILURE = 'app/v2Containers/Templates/DELETE_TEMPLATE_FAILURE';
+
+export const GET_USER_LIST_REQUEST = "app/v2Containers/GET_USER_LIST_REQUEST";
+export const GET_USER_LIST_SUCCESS = "app/v2Containers/GET_USER_LIST_SUCCESS";
+export const GET_USER_LIST_FAILURE = "app/v2Containers/GET_USER_LIST_FAILURE";
+
+export const GET_WECRM_ACCOUNTS_REQUEST = "app/v2Containers/Templates/GET_WECRM_ACCOUNTS_REQUEST";
+export const GET_WECRM_ACCOUNTS_SUCCESS = "app/v2Containers/Templates/GET_WECRM_ACCOUNTS_SUCCESS";
+export const GET_WECRM_ACCOUNTS_FAILURE = "app/v2Containers/Templates/GET_WECRM_ACCOUNTS_FAILURE";
+export const SET_WECHAT_ACCOUNT = "app/v2Containers/Templates/SET_WECHAT_ACCOUNT";
+
+export const SET_SELECTED_LAYOUT = "app/v2Containers/Templates/SET_SELECTED_LAYOUT";
+export const SEND_ZIPPED_FILE_REQUEST = "app/v2Containers/Templates/SEND_ZIPPED_FILE_REQUEST";
+export const SEND_ZIPPED_FILE_SUCCESS = "app/v2Containers/Templates/SEND_ZIPPED_FILE_SUCCESS";
+export const SEND_ZIPPED_FILE_FAILURE = "app/v2Containers/Templates/SEND_ZIPPED_FILE_FAILURE";
+
+export const GET_EDM_DEAFULT_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_EDM_DEAFULT_TEMPLATES_REQUEST';
+export const GET_EDM_DEAFULT_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_EDM_DEAFULT_TEMPLATES_SUCCESS';
+export const GET_EDM_DEAFULT_TEMPLATES_FAILURE = 'app/v2Containers/Templates/GET_EDM_DEAFULT_TEMPLATES_FAILURE';
+
+export const GET_TEMPLATE_DETAILS_REQUEST = 'app/v2Containers/Templates/GET_TEMPLATE_DETAILS_REQUEST';
+export const GET_TEMPLATE_DETAILS_SUCCESS = 'app/v2Containers/Templates/GET_TEMPLATE_DETAILS_SUCCESS';
+export const GET_TEMPLATE_DETAILS_FAILURE = 'app/v2Containers/Templates/GET_TEMPLATE_DETAILS_FAILURE';
+
+
+export const SET_EDM_TEMPLATE = "app/v2Containers/Templates/SET_EDM_TEMPLATE";
+export const RESET_ACCOUNT = "app/v2Containers/Templates/RESET_ACCOUNT";
+export const RESET_TEMPLATE = "app/v2Containers/Templates/RESET_TEMPLATE";
+export const RESET_TEMPLATE_DATA = "app/v2Containers/Templates/RESET_TEMPLATE_DATA";
+export const RESET_UPLOAD_DATA = "app/v2Containers/Templates/RESET_UPLOAD_DATA";
+export const CLEAR_TEMPLATE_STORE_DATA = "app/v2Containers/Templates/CLEAR_TEMPLATE_STORE_DATA";
+
+export const SET_LINE_ACCOUNT = "app/v2Containers/Templates/SET_LINE_ACCOUNT";

package/v2Containers/Templates/index.js

@@ -81,7 +81,8 @@ const LINE_FILTERS = {
   ALL: 'all',
   TEXT: 'text',
   IMAGE_VIDEO: 'image',
-  IMAGE_MAP: 'imagemap'
+  IMAGE_MAP: 'imagemap',
+  IMAGE_CAROUSEL: 'template',
 };
 
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -207,6 +208,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       queryParams.perPage = this.state.perPageLimit;
       const channel = this.state.channel;
       this.props.actions.getAllTemplates(channel, queryParams);
+      //this.getAllTemplates({});
+      // if (this.state.channel.toLowerCase() === "email") {
+      //   this.props.actions.getEdmDefaultTemplates();
+      // }
     }
 
     window.addEventListener("message", this.handleFrameTasks);
@@ -231,6 +236,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         nextProps.actions.getWeCrmAccounts();
       } else if (nextProps.route.name.toLowerCase() === 'email') {
         channel = 'Email';
+        // this.props.actions.getEdmDefaultTemplates();
       } else if (nextProps.route.name.toLowerCase() === "mobilepush") {
         this.setState({defaultAccount: true});
         channel = "mobilepush";
@@ -635,11 +641,34 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 stickerUrl = '',
                 animatedStickerUrl = '',
                 baseUrl = '',
+                template: carouselTemplate,
               }] = [{}],
             } = {},
           } = template.versions.base;
           templateData.content = text;
           templateData.url = originalContentUrl || animatedStickerUrl || stickerUrl || (baseUrl ? `${baseUrl}/1040` : '');
+          if (carouselTemplate) {
+            const carouselContent = get(carouselTemplate, 'columns', [{}]).map(({ imageUrl, action: { label: actionLabel } = {} }) => ({ imageUrl, actionLabel }) );
+            templateData.content = (
+              <div style={{ display: 'flex'}}>
+                {
+                  carouselContent.map(({
+                    imageUrl,
+                    actionLabel
+                  }) => (
+                    <img
+                      width={208}
+                      height={279}
+                      src={imageUrl}
+                      alt={actionLabel}
+                      key={`${imageUrl}_${actionLabel}`}
+                    />
+                  ))
+                }
+              </div>
+            );
+            templateData.className = 'carousel-img-section';
+          }
           break;
         }
         default:
@@ -1091,7 +1120,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   toggleEdmEmailTemplateSelection = () => {
     this.setState( (prevState) => ({
       showEdmEmailTemplates: !prevState.showEdmEmailTemplates}), () => {
-      this.props.actions.getDefaultBeeTemplates();
+      this.props.actions.getEdmDefaultTemplates();
     });
   };
 
@@ -1164,7 +1193,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       let getQuery = '';
 
       this.props.actions.setEdmTemplate(data);
-      // this.props.actions.setBEETemplate(data);
       if (this.state.channel && this.state.channel.toLowerCase() === 'email') {
         getQuery = (type === 'embedded') ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport};
       } else {
@@ -1510,23 +1538,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
 
   isLoading = () => {
-    const { EmailCreate, Templates } = this.props;
-    const {
-      getAllTemplatesInProgress,
-      deleteTemplateInProgress,
-      fetchingWeCrmAccounts,
-      sendingFile,
-    } = Templates;
-    const lineLoader = (getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'line');
-    const smsLoader = (getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'sms');
-    const wechatLoader = (((this.state.selectedAccount !== '' && getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'wechat');
-    const mobilePushLoader = (((getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'mobilepush');
-    const emailLoader = (
-      (getAllTemplatesInProgress ||
-      sendingFile ||
-      deleteTemplateInProgress ||
-      EmailCreate.duplicateTemplateInProgress) && this.state.channel.toLowerCase() === 'email');
-    const ebillLoader = ((getAllTemplatesInProgress || sendingFile) && this.state.channel.toLowerCase() === 'ebill');
+    const lineLoader = (this.props.Templates.getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'line');
+    const smsLoader = (this.props.Templates.getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'sms');
+    const wechatLoader = (((this.state.selectedAccount !== '' && this.props.Templates.getAllTemplatesInProgress) || (this.props.Templates.fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'wechat');
+    const mobilePushLoader = (((this.props.Templates.getAllTemplatesInProgress) || (this.props.Templates.fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'mobilepush');
+    const emailLoader = ((this.props.Templates.getAllTemplatesInProgress || this.props.Templates.sendingFile) && this.state.channel.toLowerCase() === 'email');
+    const ebillLoader = ((this.props.Templates.getAllTemplatesInProgress || this.props.Templates.sendingFile) && this.state.channel.toLowerCase() === 'ebill');
     const isLoading = ((wechatLoader !== undefined) ? wechatLoader : false) ||
       (smsLoader !== undefined ? smsLoader : false) ||
       (emailLoader !== undefined ? emailLoader : false) ||
@@ -1790,7 +1807,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <CapRadio.CapRadioGroup className="line-filters" defaultValue={lineFilter} onChange={this.setLineFilter}>
               {
                 (() => {
-                  const { ALL, TEXT, IMAGE_VIDEO, STICKER, IMAGE_MAP } = LINE_FILTERS;
+                  const { ALL, TEXT, IMAGE_VIDEO, IMAGE_CAROUSEL, IMAGE_MAP } = LINE_FILTERS;
                   return (
                     <>
                       <CapRadio.Button value={ALL}><CapLabel type="label2">
@@ -1805,6 +1822,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                       <CapRadio.Button value={IMAGE_MAP}><CapLabel type="label2">
                         <FormattedMessage {...messages.imageMapTemplate} />
                       </CapLabel></CapRadio.Button>
+                      <CapRadio.Button value={IMAGE_CAROUSEL}><CapLabel type="label2">
+                        <FormattedMessage {...messages.imageCarouselTemplate} />
+                      </CapLabel></CapRadio.Button>
                     </>
                   );
                 })()
@@ -1838,19 +1858,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const creativesParams = this.getCreativesParams();
     const templates = this.props.TemplatesList || [];
     const {route} = this.props;
-    const loadingTipMap = {
-      sendingFile: 'uploadingFile',
-      deleteTemplateInProgress: 'deletingTemplate',
-      duplicateTemplateInProgress: 'duplicatingTemplate',
-    };
-    const { sendingFile, deleteTemplateInProgress } = this.props.Templates;
-    const loadingTipIntl =
-        ((['email', 'ebill'].includes(this.state.channel.toLowerCase() === 'email')) && sendingFile && 'sendingFile') ||
-        (deleteTemplateInProgress && 'deletingTemplate') ||
-        (this.props.EmailCreate.duplicateTemplateInProgress && 'duplicatingTemplate');
-
-    const loadingTip = messages[loadingTipIntl] ? this.props.intl.formatMessage(messages[loadingTipIntl]) : this.props.intl.formatMessage(messages.gettingAllTemplates);
-
+    const loadingTip = (this.props.Templates.sendingFile && (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill')) ? this.props.intl.formatMessage(messages.uploadingFile) : this.props.intl.formatMessage(messages.gettingAllTemplates);
     return (
       <>
         {activeMode === ACCOUNT_CHANGE_MODE && this.renderAccountSelection()}

package/v2Containers/Templates/messages.js

@@ -242,6 +242,10 @@ export default defineMessages({
     id: `${scope}.imageMapTemplate`,
     defaultMessage: `Rich message`,
   },
+  "imageCarouselTemplate": {
+    id: `${scope}.imageCarouselTemplate`,
+    defaultMessage: `Card message`,
+  },
   "selectDefaultButton": {
     id: `${scope}.selectDefaultButton`,
     defaultMessage: `Select`,
@@ -350,12 +354,4 @@ export default defineMessages({
     id: `${scope}.richMediaTemplates`,
     defaultMessage: 'Rich media templates',
   },
-  deletingTemplate: {
-    id: `${scope}.deletingTemplate`,
-    defaultMessage: 'Deleting template...',
-  },
-  duplicatingTemplate: {
-    id: `${scope}.duplicatingTemplate`,
-    defaultMessage: 'Duplicating template...'
-  },
 });