@capillarytech/creatives-library 6.7.1 → 6.8.0

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -11,14 +11,13 @@ import EmailWrapper from '../EmailWrapper';
 import MobilepushWrapper from '../MobilepushWrapper';
 import EmailPreviewV2 from '../../v2Components/EmailPreviewV2';
 import MobilePushPreview from '../../v2Components/MobilePushPreviewV2';
-import LineEdit from '../Line/Create';
 import WechatWrapper from '../WeChat/Wrapper';
 import Facebook from '../Facebook';
 import { RICH_MEDIA, MAP_TEMPLATE, CREATE } from '../WeChat/Wrapper/constants';
 import CallTask from '../CallTask';
 import MobliPushEdit from '../MobilePush/Edit';
 import * as constants from './constants';
-import CreateLineWrapper from '../Line/CreateWrapper';
+import LineContainer from '../Line/Container';
 const CreativesWrapper = styled.div`
   .ant-popover,
   .ant-notification,
@@ -115,6 +114,8 @@ function SlideBoxContent(props) {
       onFacebookSubmit,
       saveMessage,
       selectedAccount,
+      onShowTemplates,
+      handleClose,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -164,20 +165,45 @@ function SlideBoxContent(props) {
       case constants.SMS:
         return get(templateDataObject, `versions.base['sms-editor']`);
       case constants.LINE: {
-        const content = get(templateDataObject, `versions.base.content.messages[0]`, {});
-        let previewContent = {};
-        if (content.text) {
-          previewContent = {
-            bodyText: content.text,
+        const lineContents = get(templateDataObject, `versions.base.content.messages`, [{}]);
+        const previewContent = [];
+        return lineContents.map(({
+          text,
+          previewImageUrl,
+          selectedSticker,
+          stickerUrl,
+          animatedStickerUrl,
+          stickerId,
+          packageId,
+          baseUrl
+        }) => {
+          let previewContent = {};
+          previewContent.messageContent = text;
+          previewContent.previewImageUrl = previewImageUrl;
+          previewContent.selectedSticker = selectedSticker || {
+            stickerUrl,
+            animatedStickerUrl,
+            stickerId,
+            packageId,
           };
-        }
-        if (content.originalContentUrl) {
-          previewContent = {
-            ...previewContent,
-            bodyImage: content.previewImageUrl,
+          previewContent.baseUrl = baseUrl;
+          const getType = () => {
+            if (text) {
+              return 'text';
+            }
+            if (previewImageUrl) {
+              return 'image';
+            }
+            if (selectedSticker || stickerUrl) {
+              return 'sticker';
+            }
+            if (baseUrl) {
+              return 'imagemap';
+            }
           };
-        }
-        return previewContent;
+          previewContent.type = getType();
+          return previewContent;
+        });
       }
       default:
         return get(templateDataObject, `versions.base.content`);
@@ -202,8 +228,12 @@ function SlideBoxContent(props) {
         channelsToDisable={channelsToDisable}
         messageDetails={messageDetails}
         onFacebookSubmit={onFacebookSubmit}
+        location={creativesLocationProps}
+        onCreateComplete={onCreateComplete}
+        getFormSubscriptionData={getFormData}
+        handleClose={handleClose}
         />
-        )}
+      )}
       {isPreview && (
       <TemplatePreview
         content={getChannelPreviewContent(templateData)}
@@ -414,7 +444,7 @@ function SlideBoxContent(props) {
       }
       {
         isEditLine && (
-          <LineEdit
+          <LineContainer
             location={creativesLocationProps}
             params={{
               id: templateData._id,
@@ -428,12 +458,13 @@ function SlideBoxContent(props) {
             isGetFormData={isGetFormData}
             templateData={templateData}
             selectedAccount={selectedAccount}
+            handleClose={handleClose}
           />
         )
       }
       {
         isCreateLine && (
-          <CreateLineWrapper
+          <LineContainer
             location={creativesLocationProps}
             onCreateComplete={onCreateComplete}
             isFullMode={isFullMode}
@@ -442,6 +473,9 @@ function SlideBoxContent(props) {
             selectedAccount={selectedAccount}
             templateData={templateData}
             getFormSubscriptionData={getFormData}
+            onShowTemplates={onShowTemplates}
+            createNew
+            handleClose={handleClose}
           />
         )
       }

package/v2Containers/CreativesContainer/index.js

@@ -136,7 +136,8 @@ class Creatives extends React.Component {
     this.setState({ isGetFormData: false });
   };
   getTemplateData = (templateData) => { //from consumers to creatives
-    const {isFullMode} = this.props;
+    const {isFullMode, messageDetails = {}} = this.props;
+    const { additionalProperties = {} } = messageDetails;
     if (!isFullMode && templateData) { // for component mode
       const {channel} = templateData;
       let creativesTemplateData = {type: channel };
@@ -216,27 +217,29 @@ class Creatives extends React.Component {
           break;
         }
         case constants.LINE: {
-          const { messageBody= '{}', isDefault } = templateData;
-          const {
-            messages,
-            to,
-            messages: [{
-              type,
-            }] = [{}],
-          } = JSON.parse(messageBody);
+          const { messageBody, isDefault } = templateData;
+          const { messages = '[]' } = additionalProperties;
+          const messagesDefinition = JSON.parse(messages);
+          let lineContent = JSON.parse(messageBody || '{}').messages || [{}];
+          lineContent = lineContent.map((content, index) => {
+            return {
+              ...content,
+              ...(messagesDefinition[index] || {})
+            };
+          })
           creativesTemplateData = {
             type: constants.LINE,
             isDefault,
             edit: true,
             definition: {
-              mode: type,
+              mode: constants.LINE,
             },
             name: "Campaign message Line content",
             versions: {
               base: {
                 content: {
-                  messages,
-                  to,
+                  messages: lineContent,
+                  to: "{{line_id}}",
                 },
               },
             },
@@ -311,9 +314,10 @@ class Creatives extends React.Component {
       case constants.LINE:
         if (template.value) {
           const { versions } = template.value;
-          const { Templates } = this.props;
+          const { Templates, templateData: templateDataProps } = this.props;
+          const { accountDetails: selectedAccountDetails } = templateDataProps || {};
           const selectedLineAccount = Templates && Templates.selectedLineAccount;
-          const accountDetails = !!selectedLineAccount ? JSON.stringify(Templates.selectedLineAccount) : '';
+          const accountDetails = !!selectedLineAccount ? JSON.stringify(selectedLineAccount) : (selectedAccountDetails || '');
           const accountId = !!selectedLineAccount ? selectedLineAccount.id : '';
           templateData = {
             channel,
@@ -438,8 +442,8 @@ class Creatives extends React.Component {
     }
 
     const isLineChannel = templateData && templateData.type === constants.LINE;
-    if (isFullMode ? channel === constants.LINE : isLineChannel) {
-      showFooter = showFooter && isFullMode;
+    if (channel === constants.LINE || isLineChannel) {
+      showFooter = false;
     }
 
     return showFooter;
@@ -595,7 +599,9 @@ class Creatives extends React.Component {
               onFacebookSubmit={getCreativesData}
               saveMessage={this.saveMessage}
               selectedAccount={this.props.selectedAccount}
-            />
+              onShowTemplates={this.onShowTemplates}
+              handleClose={this.handleCloseSlideBox}
+          />
           }
           footer={this.shouldShowFooter() &&
             <SlideBoxFooter

package/v2Containers/Line/Container/Drawer/index.js

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapCustomCard from '@capillarytech/cap-ui-library/CapCustomCard';
+import Pagination from '../../../../v2Components/Pagination';
+
+const {CapCustomCardList} = CapCustomCard;
+
+export const LineDrawer = ({
+    getAllTemplates,
+    cardDataList,
+    isDrawer,
+    searchPlaceholder,
+}) => {
+
+    const [currentPage, updateCurrentPage] = useState(0);
+    const [searchText, updateSearchText] = useState('');
+
+    useEffect(() => {
+        if (!isDrawer) {
+            updateCurrentPage(0);
+            searchTemplate('');
+        }
+    }, [isDrawer]);
+
+    let delayTimer = 0;
+
+    const getAllLineTemplate = ({params = {} , getNextPage, resetPage}, isReRender = false) => {
+        let queryParams = {
+            sortBy: 'Most Recent',
+            ...params,
+        };
+        let page = currentPage;
+        if (getNextPage) {
+            page += 1;
+        }
+
+        if (resetPage) {
+            page = 1;
+        }
+        queryParams.page = page;
+        queryParams.perPage = 25;
+
+        if (params.name !== "") {
+            queryParams.name = params.name;
+            queryParams.page = 1;
+        }
+        updateCurrentPage(page);
+        
+        getAllTemplates('Line', queryParams);
+    };
+
+    const delayedSearch = (callback, ms) => {
+        clearTimeout(delayTimer);
+        delayTimer = setTimeout(callback, ms);
+    }
+
+    const searchTemplate = (value) => {
+        updateSearchText(value);
+        delayedSearch(() => {
+            const params = {
+                name: value,
+                sortBy: 'Most Recent',
+            };
+            getAllLineTemplate({params, resetPage: true});
+            
+      }, 1000);
+    }
+
+    return (
+        <>
+            <CapInput.Search
+                className="search-text"
+                style={{width: 324}}
+                value={searchText}
+                placeholder={searchPlaceholder}
+                onChange={(e) => searchTemplate(e.target.value)}
+                onClear={() => searchTemplate('')}
+            />
+            <Pagination onPageChange={() => { getAllLineTemplate({getNextPage: true}); }} paginationSelector="pagination-container">
+                <div className="pagination-container">
+                    <CapCustomCardList
+                        key={'LINE-card-list'}
+                        cardList={cardDataList}
+                        type="LINE"
+                        style={{marginLeft: '16px'}}
+                    />
+                </div>
+            </Pagination>
+        </>
+        )
+}
+
+export default LineDrawer;

package/v2Containers/Line/Container/Image/constants.js

@@ -0,0 +1,3 @@
+export const LINE_IMG_HEIGHT = 400;
+export const LINE_IMG_WIDTH = 300;
+export const LINE_IMG_SIZE = 30000000;