@capillarytech/creatives-library 6.8.3 → 6.8.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "6.8.3",
+  "version": "6.8.4",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/TemplatePreview/index.js

@@ -308,7 +308,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
         }
             {
           channel && channel.toLowerCase() === 'line' ? (
-            <div className="shell-v2 align-center" id="sms-preview" style={{ marginLeft: 12 }}>
+            <div className="shell-v2 align-center" id="sms-preview">
               <CapImage className="preview-image" src={lineMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
               <div
                 className="msgContainer line-preview"

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

@@ -1,7 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapCustomCard from '@capillarytech/cap-ui-library/CapCustomCard';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import Pagination from '../../../../v2Components/Pagination';
+import messages from './messages';
 
 const {CapCustomCardList} = CapCustomCard;
 
@@ -10,10 +14,22 @@ export const LineDrawer = ({
     cardDataList,
     isDrawer,
     searchPlaceholder,
+    intl: {
+        formatMessage,
+    },
+    Templates
 }) => {
 
     const [currentPage, updateCurrentPage] = useState(0);
     const [searchText, updateSearchText] = useState('');
+    const [isSearching, updateSearchStatus] = useState(false);
+
+    useEffect(() => {
+        const { getAllTemplatesInProgress } = Templates || {};
+        if (getAllTemplatesInProgress !== undefined) {
+            updateSearchStatus(getAllTemplatesInProgress);
+        }
+    }, [Templates]);
 
     useEffect(() => {
         if (!isDrawer) {
@@ -22,6 +38,9 @@ export const LineDrawer = ({
         }
     }, [isDrawer]);
 
+    useEffect(() => {
+    }, [cardDataList]);
+
     let delayTimer = 0;
 
     const getAllLineTemplate = ({params = {} , getNextPage, resetPage}, isReRender = false) => {
@@ -67,7 +86,7 @@ export const LineDrawer = ({
     }
 
     return (
-        <>
+        <CapSpin spinning={isSearching} tip={formatMessage(messages.gettingAllTemplates)} style={{width: '100%'}}>
             <CapInput.Search
                 className="search-text"
                 style={{width: 324}}
@@ -77,6 +96,15 @@ export const LineDrawer = ({
                 onClear={() => searchTemplate('')}
             />
             <Pagination onPageChange={() => { getAllLineTemplate({getNextPage: true}); }} paginationSelector="pagination-container">
+                {
+                    !cardDataList.length
+                    ? (
+                        <CapHeading type="h6" style={{ textAlign: 'center', padding: 20 }}>
+                            <FormattedMessage {...messages.noTemplatesFound} />
+                        </CapHeading>
+                    )
+                    : null
+                }
                 <div className="pagination-container">
                     <CapCustomCardList
                         key={'LINE-card-list'}
@@ -86,8 +114,8 @@ export const LineDrawer = ({
                     />
                 </div>
             </Pagination>
-        </>
+        </CapSpin>
         )
 }
 
-export default LineDrawer;
+export default injectIntl(LineDrawer);

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

@@ -0,0 +1,20 @@
+
+
+/*
+ * LineDrawer Messages
+ *
+ * This contains all the text for the LineDrawer component.
+ */
+import { defineMessages } from 'react-intl';
+const scope = `creatives.containersV2.LineDrawer`;
+
+export default defineMessages({
+  "noTemplatesFound": {
+    id: `${scope}.noTemplatesFound`,
+    defaultMessage: 'No templates found',
+  },
+  "gettingAllTemplates": {
+    id: `${scope}.gettingAllTemplates`,
+    defaultMessage: "Getting all templates...",
+  },
+});

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

@@ -39,6 +39,9 @@ export const LineImage = ({
     activeKey,
     Templates,
     getAllTemplates,
+    uploadedAssetList,
+    updateUploadedAssetList,
+    deleteUploadedImgList,
 }) => {
     if (activeKey !== 'image') {
         return null;
@@ -81,17 +84,40 @@ export const LineImage = ({
     }, [errorMessageTitle, imageSrc, messageTitle, isImageError]);
 
     useEffect(() => {
-        const imgSrc = get(Line, 'uploadedAssetData.metaInfo.secure_file_path', '');
-        const imgPreview = get(Line, 'uploadedAssetData.metaInfo.secure_file_path_preview', '');
+        if (Line.uploadedAssetData && Object.keys(Line.uploadedAssetData).length) {
+            const imgSrc = get(Line, 'uploadedAssetData.metaInfo.secure_file_path', '');
+            const imgPreview = get(Line, 'uploadedAssetData.metaInfo.secure_file_path_preview', '');
+            updateUploadedAssetList({
+                ...uploadedAssetList,
+                [index]: {
+                    imgPreview,
+                    imgSrc,
+                },
+            });
+            actions.clearAsset();
+        }
+    }, [Line.uploadedAssetData]);
+
+    useEffect(() => {
+        const imgSrc = get(uploadedAssetList[index], 'imgSrc', '');
+        const imgPreview = get(uploadedAssetList[index], 'imgPreview', '');
 
         if (imgSrc) {
             updateImageSrc(imgSrc);
             updateImageStatus(true);
-        }
-        if (imgPreview)  {
             updateImagePreview(imgPreview);
+
+            updateMessageState({
+                isError: !imgSrc || !(isFullMode ? messageTitle : true) || errorMessageTitle,
+                originalContentUrl: imgSrc,
+                previewImageUrl: imgPreview,
+                messageTitle,
+                index,
+                type: 'image',
+                messageType: 'originalContentUrl',
+            });
         }
-    }, [Line]);
+    }, [uploadedAssetList]);
 
     const submitAction = (data, incorrectFile) => {
         const {
@@ -105,8 +131,9 @@ export const LineImage = ({
             type,
         } = data;
         if (incorrectFile || size > LINE_IMG_SIZE || height > LINE_IMG_HEIGHT || width > LINE_IMG_WIDTH) {
-            updateImageErrorMessage(formatMessage(messages.lineImageIncorrectSize))
+            updateImageErrorMessage(formatMessage(messages.lineImageIncorrectSize));
         } else {
+            updateImageErrorMessage('');
             data.fileParams.isGeneratePreview = true;
             actions.uploadAsset(
                 data.file,
@@ -207,6 +234,7 @@ export const LineImage = ({
         if (!isFullMode) {
             updateCreateNew(false);
         }
+        deleteUploadedImgList(index);
         updateImageSrc('');
         updateImagePreview('');
         updateMessageState({
@@ -363,6 +391,7 @@ export const LineImage = ({
                 getAllTemplates={getAllTemplates}
                 cardDataList={cardDataList}
                 isDrawer={isTemplateDrawerRequired}
+                Templates={Templates}
                 searchPlaceholder={formatMessage(messages.searchImages)}
             />
         </>

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

@@ -1,7 +1,7 @@
 export const LINE_ASSET_WIDTH = 1040;
 export const LINE_ASSET_HEIGHT = 1040;
 export const LINE_CUSTOM_ASSET_HEIGHT_MIN = 520;
-export const LINE_CUSTOM_ASSET_HEIGHT_MAX= 1040;
+export const LINE_CUSTOM_ASSET_HEIGHT_MAX= 2080;
 export const DEFAULT_ASSET_TYPE = 'default';
 export const CUSTOM_ASSET_TYPE = 'custom';
 export const DEFAULT_TEMPLATES = [

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

@@ -164,11 +164,12 @@ export const LineImageMap = ({
             type,
         } = data;
         const validWidth = width === LINE_ASSET_WIDTH;
-        const validHeight = assetType === CUSTOM_ASSET_TYPE ? ( LINE_CUSTOM_ASSET_HEIGHT_MIN <= height && height <= LINE_CUSTOM_ASSET_HEIGHT_MAX) : height === LINE_ASSET_HEIGHT;
-        if (incorrectFile || size > LINE_IMG_SIZE || !validWidth || !validHeight) {
-            updateImageErrorMessage(formatMessage(messages.lineImageMapIncorrectSize))
+        const isCustom = assetType === CUSTOM_ASSET_TYPE;
+        const validHeight = isCustom ? ( LINE_CUSTOM_ASSET_HEIGHT_MIN <= height && height <= LINE_CUSTOM_ASSET_HEIGHT_MAX) : height === LINE_ASSET_HEIGHT;
+        if (incorrectFile || !validWidth || !validHeight) {
+            updateImageErrorMessage(formatMessage(messages.lineImageMapIncorrectSize));
         } else {
-            updateImageErrorMessage('')
+            updateImageErrorMessage('');
             data.fileParams.isGeneratePreview = true;
             updateBaseSize({
               height,
@@ -176,7 +177,7 @@ export const LineImageMap = ({
             });
             actions.uploadAsset(
                 data.file,
-                data.type,
+                isCustom ? `${data.type}?assetType=${CUSTOM_ASSET_TYPE}` : data.type,
                 data.fileParams,
             );
         }
@@ -323,12 +324,12 @@ export const LineImageMap = ({
                     <CapHeading className="dragger-or" type="label6">
                         <FormattedMessage {...messages.or} />
                     </CapHeading>
-                    <CapButton className="dragger-button" type="secondary" style={{marginRight: CAP_SPACE_08}}>
+                    <CapButton className="dragger-button" type="secondary" style={{marginRight: CAP_SPACE_08}} disabled={!imageMapTemplate}>
                         <FormattedMessage {...messages.uploadComputer} />
                     </CapButton>
                 </CapUploader.CapDragger>
                 <CapLabel type="label9" style={{marginTop: CAP_SPACE_12 }}>
-                    {formatMessage(messages.imageDimenstionDescription, {dimensions: assetType === DEFAULT_ASSET_TYPE ? '1040 X 1040 px' : '1040 X 520 - 2040 px'})}
+                    {formatMessage(messages.imageDimenstionDescription, {dimensions: assetType === DEFAULT_ASSET_TYPE ? '1040 X 1040 px' : '1040 X 520 - 2080 px'})}
                 </CapLabel>
                 <CapDivider />
             </>);
@@ -337,7 +338,7 @@ export const LineImageMap = ({
           <>
             <CapImage className="base-image-preview" src={`${imageSrc}/1040`} />
             <CapLabel type="label9" style={{marginTop: CAP_SPACE_12 }}>
-              {formatMessage(messages.imageDimenstionDescription, {dimensions: assetType === DEFAULT_ASSET_TYPE ? '1040 X 1040 px' : '1040 X 520 - 2040 px'})}
+              {formatMessage(messages.imageDimenstionDescription, {dimensions: assetType === DEFAULT_ASSET_TYPE ? '1040 X 1040 px' : '1040 X 520 - 2080 px'})}
             </CapLabel>
             <CapDivider />
           </>

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

@@ -296,6 +296,7 @@ export const LineText = ({
                 isDrawer={isDrawerRequired}
                 className="drawer-head"
                 searchPlaceholder={formatMessage(messages.searchText)}
+                Templates={Templates}
             />
         </>
         );

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

@@ -71,6 +71,7 @@ export const LineWrapper = ({
             });
         } else {
             togglePopup(true);
+            rest.deleteUploadedImgList(index);
             updateSelectedKey(type);
             updateActiveKey(activeKey);
         }

package/v2Containers/Line/Container/index.js

@@ -62,6 +62,7 @@ export const LineContainer = ({
     const [isEditFlow, checkEditFlow] = useState(false);
     const [isEditLoading, updateEditLoading] = useState(false);
     const [accountSelectFlow, updateAccountSelectFlow] = useState(false);
+    const [uploadedAssetList, updateUploadedAssetList] = useState({});
     const [selectedAccount, updateSelectedAccount] = useState('');
 
     useEffect(() => {
@@ -71,6 +72,7 @@ export const LineContainer = ({
             const queryParams = {"sortBy":"Most Recent","page":1,"perPage":25};
             templateActions.getAllTemplates('Line', queryParams);
         }
+        return () => actions.clearAsset();
     }, []);
 
     const onAccountSelect = (account) => {
@@ -174,6 +176,12 @@ export const LineContainer = ({
         }
     }, [templateData]);
 
+    const deleteUploadedImgList = (selectedIndex) => {
+        const newUploadedAssetList = { ...uploadedAssetList };
+        delete newUploadedAssetList[selectedIndex];
+        updateUploadedAssetList(newUploadedAssetList);
+    }
+
     const addLineWrappers = () => {
         updateLineWrapperContent([...lineWrapperContents, ...initialWrapperContent])
     }
@@ -181,6 +189,11 @@ export const LineContainer = ({
     const deleteWrapper = index => {
         const selectedIndex = lineWrapperContents.findIndex((el, i) => i === index);
         if (selectedIndex > -1) {
+            // change uploaded img sequence
+            const newUploadedAssetList = { ...uploadedAssetList };
+            delete newUploadedAssetList[index];
+            updateUploadedAssetList(newUploadedAssetList);
+
             const newLineWrapperContents = [...lineWrapperContents];
             newLineWrapperContents.splice(selectedIndex, 1);
             updateLineWrapperContent(newLineWrapperContents);
@@ -191,6 +204,14 @@ export const LineContainer = ({
         const selectedIndex = lineWrapperContents.findIndex((el, i) => i === index);
         const selectedElement = lineWrapperContents.find((el, i) => i === index);
         if (selectedIndex > -1) {
+            // change uploaded img sequence
+            const newUploadedAssetList = { ...uploadedAssetList };
+            const selectedUploadedAsset = uploadedAssetList[index];
+            const newPositionUploadedAsset = uploadedAssetList[index - 1];
+            newUploadedAssetList[index - 1] = selectedUploadedAsset;
+            newUploadedAssetList[index] = newPositionUploadedAsset;
+            updateUploadedAssetList(newUploadedAssetList);
+
             const newLineWrapperContents = [...lineWrapperContents];
             newLineWrapperContents.splice(selectedIndex, 1);
             newLineWrapperContents.splice(selectedIndex - 1, 0, selectedElement);
@@ -202,6 +223,14 @@ export const LineContainer = ({
         const selectedIndex = lineWrapperContents.findIndex((el, i) => i === index);
         const selectedElement = lineWrapperContents.find((el, i) => i === index);
         if (selectedIndex > -1) {
+            // change uploaded img sequence
+            const newUploadedAssetList = { ...uploadedAssetList };
+            const selectedUploadedAsset = uploadedAssetList[index];
+            const newPositionUploadedAsset = uploadedAssetList[index + 1];
+            newUploadedAssetList[index + 1] = selectedUploadedAsset;
+            newUploadedAssetList[index] = newPositionUploadedAsset;
+            updateUploadedAssetList(newUploadedAssetList);
+
             const newLineWrapperContents = [...lineWrapperContents];
             newLineWrapperContents.splice(selectedIndex, 1);
             newLineWrapperContents.splice(selectedIndex + 1, 0, selectedElement);
@@ -258,6 +287,9 @@ export const LineContainer = ({
                     lineWrappers={lineWrapperContents.length}
                     Templates={Templates}
                     getAllTemplates={templateActions.getAllTemplates}
+                    uploadedAssetList={uploadedAssetList}
+                    deleteUploadedImgList={deleteUploadedImgList}
+                    updateUploadedAssetList={updateUploadedAssetList}
                 />
             );
         });
@@ -505,7 +537,7 @@ export const LineContainer = ({
         <div className={className}>
             <CapSpin spinning={isLoading}>
                 <CapRow>
-                    <CapColumn span={14}>
+                    <CapColumn span={14} style={{ zIndex: 1 }}>
                         {getAccountSection()}
                         <CapHeader
                             title={formatMessage(messages.lineCreativeTitle)}