@capillarytech/creatives-library 6.8.6 → 6.8.8

package/v2Containers/Templates/actions.js

@@ -1,117 +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 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,
-   };
- }
+/*
+ *
+ * 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,47 +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_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";
+/*
+ *
+ * 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,8 +81,8 @@ const LINE_FILTERS = {
   ALL: 'all',
   TEXT: 'text',
   IMAGE_VIDEO: 'image',
-  STICKER: 'sticker',
-  IMAGE_MAP: 'imagemap'
+  IMAGE_MAP: 'imagemap',
+  IMAGE_CAROUSEL: 'template',
 };
 
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -641,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:
@@ -1784,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">
@@ -1796,12 +1819,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                       <CapRadio.Button value={IMAGE_VIDEO}><CapLabel type="label2">
                         <FormattedMessage {...messages.imageTemplate} />
                       </CapLabel></CapRadio.Button>
-                      <CapRadio.Button value={STICKER}><CapLabel type="label2">
-                        <FormattedMessage {...messages.stickerTemplate} />
-                      </CapLabel></CapRadio.Button>
                       <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>
                     </>
                   );
                 })()

package/v2Containers/Templates/messages.js

@@ -238,13 +238,13 @@ export default defineMessages({
     id: `${scope}.imageTemplate`,
     defaultMessage: `Image`,
   },
-  "stickerTemplate": {
-    id: `${scope}.stickerTemplate`,
-    defaultMessage: `Sticker`,
-  },
   "imageMapTemplate": {
     id: `${scope}.imageMapTemplate`,
-    defaultMessage: `Image map`,
+    defaultMessage: `Rich message`,
+  },
+  "imageCarouselTemplate": {
+    id: `${scope}.imageCarouselTemplate`,
+    defaultMessage: `Card message`,
   },
   "selectDefaultButton": {
     id: `${scope}.selectDefaultButton`,