@capillarytech/creatives-library 6.8.6 → 6.8.7

package/v2Containers/CreativesContainer/sagas.js

@@ -1,11 +1,11 @@
-// import { take, call, put, select } from 'redux-saga/effects';
-
-// Individual exports for testing
-export function* defaultSaga() {
-  // See example in v2Containers/HomePage/sagas.js
-}
-
-// All sagas to be loaded
-export default [
-  defaultSaga,
-];
+// import { take, call, put, select } from 'redux-saga/effects';
+
+// Individual exports for testing
+export function* defaultSaga() {
+  // See example in v2Containers/HomePage/sagas.js
+}
+
+// All sagas to be loaded
+export default [
+  defaultSaga,
+];

package/v2Containers/CreativesContainer/selectors.js

@@ -1,30 +1,30 @@
-import { createSelector } from 'reselect';
-
-/**
- * Direct selector to the creativesContainer state domain
- */
-const selectCreativesContainerDomain = () => (state) => state.get('creativesContainer');
-
-/**
- * Other specific selectors
- */
-
-
-/**
- * Default selector used by CreativesContainer
- */
-
-const makeSelectCreativesContainer = () => createSelector(
-  selectCreativesContainerDomain(),
-  (substate) => substate.toJS()
-);
-const isLoading = () => createSelector(
-  makeSelectCreativesContainer(),
-  (substate) => substate.containerLoader
-);
-
-export default makeSelectCreativesContainer;
-export {
-  selectCreativesContainerDomain,
-  isLoading,
-};
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the creativesContainer state domain
+ */
+const selectCreativesContainerDomain = () => (state) => state.get('creativesContainer');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by CreativesContainer
+ */
+
+const makeSelectCreativesContainer = () => createSelector(
+  selectCreativesContainerDomain(),
+  (substate) => substate.toJS()
+);
+const isLoading = () => createSelector(
+  makeSelectCreativesContainer(),
+  (substate) => substate.containerLoader
+);
+
+export default makeSelectCreativesContainer;
+export {
+  selectCreativesContainerDomain,
+  isLoading,
+};

package/v2Containers/CreativesContainer/tests/actions.test.js

@@ -1,18 +1,18 @@
-
-import {
-  defaultAction,
-} from '../actions';
-import {
-  DEFAULT_ACTION,
-} from '../constants';
-
-describe('CreativesContainer actions', () => {
-  describe('Default Action', () => {
-    it('has a type of DEFAULT_ACTION', () => {
-      const expected = {
-        type: DEFAULT_ACTION,
-      };
-      expect(defaultAction()).toEqual(expected);
-    });
-  });
-});
+
+import {
+  defaultAction,
+} from '../actions';
+import {
+  DEFAULT_ACTION,
+} from '../constants';
+
+describe('CreativesContainer actions', () => {
+  describe('Default Action', () => {
+    it('has a type of DEFAULT_ACTION', () => {
+      const expected = {
+        type: DEFAULT_ACTION,
+      };
+      expect(defaultAction()).toEqual(expected);
+    });
+  });
+});

package/v2Containers/CreativesContainer/tests/index.test.js

@@ -1,10 +1,10 @@
-// import React from 'react';
-// import { shallow } from 'enzyme';
-
-// import { CreativesContainer } from '../index';
-
-describe('<CreativesContainer />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(true);
-  });
-});
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import { CreativesContainer } from '../index';
+
+describe('<CreativesContainer />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true);
+  });
+});

package/v2Containers/CreativesContainer/tests/reducer.test.js

@@ -1,9 +1,9 @@
-
-import { fromJS } from 'immutable';
-import creativesContainerReducer from '../reducer';
-
-describe('creativesContainerReducer', () => {
-  it('returns the initial state', () => {
-    expect(creativesContainerReducer(undefined, {})).toEqual(fromJS({}));
-  });
-});
+
+import { fromJS } from 'immutable';
+import creativesContainerReducer from '../reducer';
+
+describe('creativesContainerReducer', () => {
+  it('returns the initial state', () => {
+    expect(creativesContainerReducer(undefined, {})).toEqual(fromJS({}));
+  });
+});

package/v2Containers/CreativesContainer/tests/sagas.test.js

@@ -1,15 +1,15 @@
-/**
- * Test  sagas
- */
-
-/* eslint-disable redux-saga/yield-effects */
-// import { take, call, put, select } from 'redux-saga/effects';
-// import { defaultSaga } from '../sagas';
-
-// const generator = defaultSaga();
-
-describe('defaultSaga Saga', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(true);
-  });
-});
+/**
+ * Test  sagas
+ */
+
+/* eslint-disable redux-saga/yield-effects */
+// import { take, call, put, select } from 'redux-saga/effects';
+// import { defaultSaga } from '../sagas';
+
+// const generator = defaultSaga();
+
+describe('defaultSaga Saga', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true);
+  });
+});

package/v2Containers/CreativesContainer/tests/selectors.test.js

@@ -1,10 +1,10 @@
-// import { fromJS } from 'immutable';
-// import { makeSelectCreativesContainerDomain } from '../selectors';
-
-// const selector = makeSelectCreativesContainerDomain();
-
-describe('makeSelectCreativesContainerDomain', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(true);
-  });
-});
+// import { fromJS } from 'immutable';
+// import { makeSelectCreativesContainerDomain } from '../selectors';
+
+// const selector = makeSelectCreativesContainerDomain();
+
+describe('makeSelectCreativesContainerDomain', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true);
+  });
+});

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

@@ -435,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>