@capillarytech/creatives-library 6.8.5 → 6.8.7

package/app.js

@@ -76,7 +76,6 @@ Bugsnag.start({
   // eslint-disable-next-line no-undef
   apiKey: BUGSNAG_API_KEY,
   releaseStage: window.location.hostname,
-  enabledReleaseStages: ['production', 'staging'],
   plugins: [new BugsnagPluginReact()],
   onError: bugSnagErrorCallback,
 });

package/package.json

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

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

@@ -1,3 +1,4 @@
 export const LINE_IMG_HEIGHT = 400;
 export const LINE_IMG_WIDTH = 300;
-export const LINE_IMG_SIZE = 30000000;
+export const LINE_IMG_SIZE = 10000000;
+export const ALLOWED_EXTENSIONS_REGEX = (/\.(jpe?g|png)$/i);

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

@@ -6,12 +6,11 @@ import CapUploader from '@capillarytech/cap-ui-library/CapUploader';
 import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapDrawer from '@capillarytech/cap-ui-library/CapDrawer';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import CapImage from '@capillarytech/cap-ui-library/CapImage';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
 import LineDrawer from '../Drawer';
-import { CAP_SPACE_12, CAP_SPACE_08, FONT_COLOR_05, FONT_COLOR_04 } from '@capillarytech/cap-ui-library/styled/variables';
+import { CAP_SPACE_12, CAP_SPACE_08, FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
 import Gallery from '../../../Assets/Gallery';
 import style from './style';
 import { CAP_G06, CAP_G09 } from '@capillarytech/cap-ui-library/styled/variables';
@@ -22,6 +21,7 @@ import {
   LINE_IMG_HEIGHT,
   LINE_IMG_WIDTH,
   LINE_IMG_SIZE,
+  ALLOWED_EXTENSIONS_REGEX,
 } from './constants';
 
 export const LineImage = ({
@@ -168,11 +168,8 @@ export const LineImage = ({
         const _URL = window.URL || window.webkitURL;
         let incorrectFile = false;
         const file = files[0];
-        if (supportedExtensions) {
-            const allowedExtensions = /(\.bmp|\.jpeg|\.png|\.gif|\.jpg)$/i;
-            if (!allowedExtensions.exec(file.name)) {
-                incorrectFile = true;
-            }
+        if (!ALLOWED_EXTENSIONS_REGEX.test(file.name)) {
+            incorrectFile = true;
         }
         const img = new Image();
         img.src = _URL.createObjectURL(file);
@@ -402,18 +399,23 @@ export const LineImage = ({
         const image = get(imageTemplate, 'metaInfo.secure_file_path');
         const imagePreview = get(imageTemplate, 'metaInfo.secure_file_path_preview');
         updateDrawerRequirement(false);
-        updateImageStatus(true);
-        updateImageSrc(image);
-        updateImagePreview(imagePreview);
-        updateMessageState({
-            isError: !image || !(isFullMode ? messageTitle : true) || (isImageError && errorMessageTitle),
-            originalContentUrl: image,
-            previewImageUrl: imagePreview,
-            messageTitle,
-            index,
-            type: 'image',
-            messageType: 'originalContentUrl',
-        });
+        if (!ALLOWED_EXTENSIONS_REGEX.test(image)) {
+            updateImageErrorMessage(formatMessage(messages.lineImageIncorrectSize));
+        } else {
+            updateImageErrorMessage('');
+            updateImageStatus(true);
+            updateImageSrc(image);
+            updateImagePreview(imagePreview);
+            updateMessageState({
+                isError: !image || !(isFullMode ? messageTitle : true) || (isImageError && errorMessageTitle),
+                originalContentUrl: image,
+                previewImageUrl: imagePreview,
+                messageTitle,
+                index,
+                type: 'image',
+                messageType: 'originalContentUrl',
+            });
+        }
     }
 
     const getGalleryDrawerContent = () => {

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

@@ -37,7 +37,7 @@ export default defineMessages({
   },
   "imageDimenstionDescription": {
     id: `${scope}.imageDimenstionDescription`,
-    defaultMessage: 'Dimensions: 300px x 400px  Size: 30mb',
+    defaultMessage: 'Dimensions: 300px x 400px  Size: 10mb',
   },
   "imageReUpload": {
     id: `${scope}.imageReUpload`,

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

@@ -166,6 +166,9 @@ export const LineImageMap = ({
         const validWidth = width === LINE_ASSET_WIDTH;
         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 (isCustom) {
+            data.fileParams.assetType = CUSTOM_ASSET_TYPE;
+        }
         if (incorrectFile || !validWidth || !validHeight) {
             updateImageErrorMessage(formatMessage(messages.lineImageMapIncorrectSize));
         } else {
@@ -177,7 +180,7 @@ export const LineImageMap = ({
             });
             actions.uploadAsset(
                 data.file,
-                isCustom ? `${data.type}?assetType=${CUSTOM_ASSET_TYPE}` : data.type,
+                data.type,
                 data.fileParams,
             );
         }
@@ -432,7 +435,7 @@ export const LineImageMap = ({
                 }] = [{}],
                 } = {},
             } = template.versions.base;
-            templateData.url = baseUrl;
+            templateData.url = `${baseUrl}/1040`;
             templateData.title = template.name;
             templateData.key = template.name;
             templateData.hoverOption = (

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, Fragment } from 'react';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import CapTab from '@capillarytech/cap-ui-library/CapTab';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
@@ -126,9 +126,9 @@ export const LineWrapper = ({
             <CapTab
                 defaultActiveKey={TEXT}
                 activeKey={activeKey}
-                tabBarExtraContent={operations}
+                tabBarExtraContent={rest.isFullMode ? <Fragment /> : operations}
                 onChange={onTabChange}
-                panes={getTabPanes({ ...rest, index, activeKey, formatMessage: intl.formatMessage })}
+                panes={getTabPanes({ ...rest, index, activeKey, formatMessage: intl.formatMessage, isFullMode: rest.isFullMode })}
             />
             <StyledCapModal
                 title={intl.formatMessage(messages.changeModalTitle)}

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

@@ -41,6 +41,6 @@ export default defineMessages({
   },
   "imagemapLabel": {
     id: `${scope}.imagemapLabel`,
-    defaultMessage: 'Image Map',
+    defaultMessage: 'Rich message',
   },
 });

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import { CAP_WHITE } from '@capillarytech/cap-ui-library/styled/variables';
+import { CAP_WHITE, FONT_SIZE_VL } from '@capillarytech/cap-ui-library/styled/variables';
 
 import { TEXT, IMAGE, IMAGE_MAP, STICKER } from '../constants';
 import LineText from '../Text';
@@ -37,7 +37,8 @@ export const itemIcons = {
 
 export const getTabPanes = (props) => {
   const tableKeys = [TEXT, IMAGE, STICKER, IMAGE_MAP];
-  return tableKeys.map((item) => {
+  const tableKeysCreatives = [TEXT, IMAGE, IMAGE_MAP];
+  return (props.isFullMode ? tableKeysCreatives : tableKeys).map((item) => {
     const isSelected = props.activeKey === item;
     return {
       key: item,
@@ -48,6 +49,7 @@ export const getTabPanes = (props) => {
           <CapIcon
             type={itemIcons[item]}
             size="s"
+            style={{ fontSize: FONT_SIZE_VL }}
             theme={isSelected ? 'filled' : ''}
             svgProps={{
               fill: isSelected ? '#000' : CAP_WHITE,

package/v2Containers/Line/Container/index.js

@@ -544,15 +544,21 @@ export const LineContainer = ({
                             description={formatMessage(messages.lineCreativeDescription)}
                         />
                         {getLineWrappers()}
-                        <CapButton
-                            onClick={addLineWrappers}
-                            disabled={lineWrapperContents.length === (isFullMode ? MAX_LINE_WRAPPER_LIMIT_FULL_MODE : MAX_LINE_WRAPPER_LIMIT)}
-                            type="flat"
-                            isAddBtn
-                            className="add-msg"
-                        >
-                            <FormattedMessage {...messages.addMessageButtonLabel} />
-                        </CapButton>
+                        {
+                            !isFullMode
+                            ? (
+                            <CapButton
+                                onClick={addLineWrappers}
+                                disabled={lineWrapperContents.length === (isFullMode ? MAX_LINE_WRAPPER_LIMIT_FULL_MODE : MAX_LINE_WRAPPER_LIMIT)}
+                                type="flat"
+                                isAddBtn
+                                className="add-msg"
+                            >
+                                <FormattedMessage {...messages.addMessageButtonLabel} />
+                            </CapButton>
+                            )
+                            : null
+                        }
                     </CapColumn>
                     <CapColumn span={6}>
                         <CapRow>

package/v2Containers/Templates/index.js

@@ -81,7 +81,6 @@ const LINE_FILTERS = {
   ALL: 'all',
   TEXT: 'text',
   IMAGE_VIDEO: 'image',
-  STICKER: 'sticker',
   IMAGE_MAP: 'imagemap'
 };
 
@@ -1796,9 +1795,6 @@ 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>

package/v2Containers/Templates/messages.js

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