box-ui-elements 14.0.0 → 14.1.0-beta.3

package/i18n/sv-SE.js

@@ -333,6 +333,8 @@ export default {
   "be.uploadsCancelButtonTooltip": "Avbryt uppladdningen",
   "be.uploadsDefaultErrorMessage": "Något gick fel med uppladdningen. Försök igen.",
   "be.uploadsFileSizeLimitExceededErrorMessage": "Filstorleken överskrider mappägarens filstorleksgräns",
+  "be.uploadsFileSizeLimitExceededErrorMessageForUpgradeCta": "This file exceeds your plan’s upload limit. Upgrade now to store larger files.",
+  "be.uploadsFileSizeLimitExceededUpgradeMessageForUpgradeCta": "Upgrade",
   "be.uploadsItemNameInUseErrorMessage": "Det finns redan en fil med det här namnet.",
   "be.uploadsManagerUploadComplete": "Klar",
   "be.uploadsManagerUploadFailed": "Några uppladdningar misslyckades",

package/i18n/tr-TR.js

@@ -333,6 +333,8 @@ export default {
   "be.uploadsCancelButtonTooltip": "Bu yüklemeyi iptal et",
   "be.uploadsDefaultErrorMessage": "Yüklemeyle ilgili bir şeyler ters gitti. Lütfen tekrar deneyin.",
   "be.uploadsFileSizeLimitExceededErrorMessage": "Dosya boyutu klasör sahibinin dosya boyutu sınırını aşıyor",
+  "be.uploadsFileSizeLimitExceededErrorMessageForUpgradeCta": "This file exceeds your plan’s upload limit. Upgrade now to store larger files.",
+  "be.uploadsFileSizeLimitExceededUpgradeMessageForUpgradeCta": "Upgrade",
   "be.uploadsItemNameInUseErrorMessage": "Bu ada sahip bir dosya zaten var.",
   "be.uploadsManagerUploadComplete": "Tamamlandı",
   "be.uploadsManagerUploadFailed": "Bazı Yüklemeler Başarısız Oldu",

package/i18n/zh-CN.js

@@ -333,6 +333,8 @@ export default {
   "be.uploadsCancelButtonTooltip": "取消此上传",
   "be.uploadsDefaultErrorMessage": "上传时出错。请重试。",
   "be.uploadsFileSizeLimitExceededErrorMessage": "文件大小超过文件夹所有者设置的文件大小限制",
+  "be.uploadsFileSizeLimitExceededErrorMessageForUpgradeCta": "This file exceeds your plan’s upload limit. Upgrade now to store larger files.",
+  "be.uploadsFileSizeLimitExceededUpgradeMessageForUpgradeCta": "Upgrade",
   "be.uploadsItemNameInUseErrorMessage": "具有此名称的文件已存在。",
   "be.uploadsManagerUploadComplete": "已完成",
   "be.uploadsManagerUploadFailed": "部分上传失败",

package/i18n/zh-TW.js

@@ -333,6 +333,8 @@ export default {
   "be.uploadsCancelButtonTooltip": "取消此次上傳",
   "be.uploadsDefaultErrorMessage": "上傳時發生錯誤。請再試一次。",
   "be.uploadsFileSizeLimitExceededErrorMessage": "檔案大小超過資料夾擁有者的檔案大小限制",
+  "be.uploadsFileSizeLimitExceededErrorMessageForUpgradeCta": "This file exceeds your plan’s upload limit. Upgrade now to store larger files.",
+  "be.uploadsFileSizeLimitExceededUpgradeMessageForUpgradeCta": "Upgrade",
   "be.uploadsItemNameInUseErrorMessage": "具有此名稱的檔案已存在。",
   "be.uploadsManagerUploadComplete": "已完成",
   "be.uploadsManagerUploadFailed": "部分上傳失敗",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "14.0.0",
+    "version": "14.1.0-beta.3",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",

package/src/components/notification/Notification.js

@@ -3,8 +3,6 @@ import * as React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 
-import { bdlGray } from '../../styles/variables';
-
 import IconAlertCircle from '../../icons/general/IconAlertCircle';
 import IconBell from '../../icons/general/IconBell';
 import IconClose from '../../icons/general/IconClose';
@@ -109,7 +107,7 @@ class Notification extends React.Component<Props> {
         return (
             <div className={classes}>
                 {React.cloneElement(ICON_RENDERER[type](), {
-                    color: bdlGray,
+                    color: '#fff',
                     height: 20,
                     width: 20,
                 })}
@@ -120,7 +118,7 @@ class Notification extends React.Component<Props> {
                     onClick={this.onClose}
                     type="button"
                 >
-                    <IconClose color={bdlGray} height={18} width={18} />
+                    <IconClose color="#FFF" height={18} width={18} />
                 </button>
             </div>
         );

package/src/components/notification/Notification.scss

@@ -21,24 +21,24 @@
     margin: 10px auto;
     padding: 10px 10px 10px 20px;
     overflow: hidden;
-    color: $bdl-gray;
+    color: $white;
     font-weight: bold;
-    background-color: $bdl-gray-40;
+    background-color: $bdl-gray-80;
     border-radius: 4px;
     box-shadow: 0 2px 6px fade-out($black, .85);
     opacity: .9;
     transition: opacity .1s ease-out;
 
     &.info {
-        background-color: $bdl-green-light-50;
+        background-color: $bdl-green-light;
     }
 
     &.warn {
-        background-color: $bdl-yellorange-50;
+        background-color: $bdl-yellorange;
     }
 
     &.error {
-        background-color: $bdl-watermelon-red-50;
+        background-color: $bdl-watermelon-red;
     }
 
     &.is-hidden {
@@ -71,15 +71,14 @@
     button,
     a {
         flex: none;
-        color: $bdl-gray;
-        border-color: $bdl-gray;
+        color: $white;
 
         &.btn.is-disabled,
         &.btn:not(.is-disabled) {
             margin: 0 5px;
             padding: 7px 13px;
             background-color: transparent;
-            border-color: inherit;
+            border-color: $bdl-gray-10;
         }
 
         &.close-btn {

package/src/elements/common/messages.js

@@ -687,6 +687,16 @@ const messages = defineMessages({
         description: 'Error message shown when file size exceeds the limit',
         defaultMessage: 'File size exceeds the folder owner’s file size limit',
     },
+    uploadsFileSizeLimitExceededErrorMessageForUpgradeCta: {
+        id: 'be.uploadsFileSizeLimitExceededErrorMessageForUpgradeCta',
+        description: 'Error message shown when file size exceeds the limit',
+        defaultMessage: 'This file exceeds your plan’s upload limit. Upgrade now to store larger files.',
+    },
+    uploadsFileSizeLimitExceededUpgradeMessageForUpgradeCta: {
+        id: 'be.uploadsFileSizeLimitExceededUpgradeMessageForUpgradeCta',
+        description: 'Upgrade message shown when file size exceeds the limit',
+        defaultMessage: 'Upgrade',
+    },
     uploadsStorageLimitErrorMessage: {
         id: 'be.uploadsStorageLimitErrorMessage',
         description: 'Error message shown when account storage limit has been reached',

package/src/elements/content-uploader/ContentUploader.js

@@ -90,6 +90,7 @@ type Props = {
     onMinimize?: Function,
     onProgress: Function,
     onResume: Function,
+    onUpgradeCTAClick?: Function,
     onUpload: Function,
     overwrite: boolean,
     requestInterceptor?: Function,
@@ -1203,17 +1204,18 @@ class ContentUploader extends Component<Props, State> {
      */
     render() {
         const {
+            className,
+            fileLimit,
+            isDraggingItemsToUploadsManager = false,
+            isFolderUploadEnabled,
+            isResumableUploadsEnabled,
+            isTouch,
             language,
+            measureRef,
             messages,
             onClose,
-            className,
-            measureRef,
-            isTouch,
-            fileLimit,
+            onUpgradeCTAClick,
             useUploadsManager,
-            isResumableUploadsEnabled,
-            isFolderUploadEnabled,
-            isDraggingItemsToUploadsManager = false,
         }: Props = this.props;
         const { view, items, errorCode, isUploadsManagerExpanded }: State = this.state;
         const isEmpty = items.length === 0;
@@ -1240,6 +1242,7 @@ class ContentUploader extends Component<Props, State> {
                             items={items}
                             onItemActionClick={this.onClick}
                             onRemoveActionClick={this.removeFileFromUploadQueue}
+                            onUpgradeCTAClick={onUpgradeCTAClick}
                             onUploadsManagerActionClick={this.clickAllWithStatus}
                             toggleUploadsManager={this.toggleUploadsManager}
                             view={view}

package/src/elements/content-uploader/ItemAction.js

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import type { InjectIntlProvidedProps } from 'react-intl';
 import IconCheck from '../../icons/general/IconCheck';
 import IconClose from '../../icons/general/IconClose';
@@ -12,9 +12,17 @@ import IconInProgress from './IconInProgress';
 import IconRetry from '../../icons/general/IconRetry';
 import LoadingIndicator from '../../components/loading-indicator';
 import PlainButton from '../../components/plain-button/PlainButton';
+import PrimaryButton from '../../components/primary-button/PrimaryButton';
 import Tooltip from '../../components/tooltip';
 import messages from '../common/messages';
-import { STATUS_PENDING, STATUS_IN_PROGRESS, STATUS_STAGED, STATUS_COMPLETE, STATUS_ERROR } from '../../constants';
+import {
+    ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED,
+    STATUS_PENDING,
+    STATUS_IN_PROGRESS,
+    STATUS_STAGED,
+    STATUS_COMPLETE,
+    STATUS_ERROR,
+} from '../../constants';
 import type { UploadStatus } from '../../common/types/upload';
 
 import './ItemAction.scss';
@@ -22,15 +30,26 @@ import './ItemAction.scss';
 const ICON_CHECK_COLOR = '#26C281';
 
 type Props = {
+    error?: Object,
     isFolder?: boolean,
     isResumableUploadsEnabled: boolean,
     onClick: Function,
+    onUpgradeCTAClick?: Function,
     status: UploadStatus,
 } & InjectIntlProvidedProps;
 
-const ItemAction = ({ status, onClick, intl, isResumableUploadsEnabled, isFolder = false }: Props) => {
+const ItemAction = ({
+    error = {},
+    intl,
+    isFolder = false,
+    isResumableUploadsEnabled,
+    onClick,
+    onUpgradeCTAClick,
+    status,
+}: Props) => {
     let icon = <IconClose />;
     let tooltip;
+    const { code } = error;
 
     if (isFolder && status !== STATUS_PENDING) {
         return null;
@@ -66,6 +85,18 @@ const ItemAction = ({ status, onClick, intl, isResumableUploadsEnabled, isFolder
             break;
     }
 
+    if (status === STATUS_ERROR && code === ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED && !!onUpgradeCTAClick) {
+        return (
+            <PrimaryButton
+                onClick={onUpgradeCTAClick}
+                data-resin-target="large_version_error_inline_upgrade_cta"
+                type="button"
+            >
+                <FormattedMessage {...messages.uploadsFileSizeLimitExceededUpgradeMessageForUpgradeCta} />
+            </PrimaryButton>
+        );
+    }
+
     return (
         <div className="bcu-item-action">
             {tooltip ? (

package/src/elements/content-uploader/ItemList.js

@@ -20,14 +20,21 @@ type Props = {
     items: UploadItem[],
     onClick: Function,
     onRemoveClick?: (item: UploadItem) => void,
+    onUpgradeCTAClick?: Function,
 };
 
-const ItemList = ({ isResumableUploadsEnabled = false, items, onClick, onRemoveClick = noop }: Props) => (
+const ItemList = ({
+    isResumableUploadsEnabled = false,
+    items,
+    onClick,
+    onRemoveClick = noop,
+    onUpgradeCTAClick,
+}: Props) => (
     <AutoSizer>
         {({ width, height }) => {
             const nameCell = nameCellRenderer(isResumableUploadsEnabled);
-            const progressCell = progressCellRenderer();
-            const actionCell = actionCellRenderer(isResumableUploadsEnabled, onClick);
+            const progressCell = progressCellRenderer(!!onUpgradeCTAClick);
+            const actionCell = actionCellRenderer(isResumableUploadsEnabled, onClick, onUpgradeCTAClick);
             const removeCell = removeCellRenderer(onRemoveClick);
 
             return (
@@ -56,7 +63,7 @@ const ItemList = ({ isResumableUploadsEnabled = false, items, onClick, onRemoveC
                         cellRenderer={actionCell}
                         dataKey="status"
                         flexShrink={0}
-                        width={25}
+                        width={onUpgradeCTAClick ? 100 : 25}
                     />
                     {isResumableUploadsEnabled && (
                         <Column

package/src/elements/content-uploader/UploadsManager.js

@@ -21,22 +21,24 @@ type Props = {
     items: UploadItem[],
     onItemActionClick: Function,
     onRemoveActionClick: (item: UploadItem) => void,
+    onUpgradeCTAClick?: Function,
     onUploadsManagerActionClick: Function,
     toggleUploadsManager: Function,
     view: View,
 };
 
 const UploadsManager = ({
+    isExpanded,
+    isVisible,
+    isResumableUploadsEnabled,
+    isDragging,
     items,
-    view,
     onItemActionClick,
     onRemoveActionClick,
+    onUpgradeCTAClick,
     onUploadsManagerActionClick,
     toggleUploadsManager,
-    isExpanded,
-    isVisible,
-    isResumableUploadsEnabled,
-    isDragging,
+    view,
 }: Props) => {
     /**
      * Keydown handler for progress bar
@@ -98,6 +100,7 @@ const UploadsManager = ({
                     items={items}
                     onClick={onItemActionClick}
                     onRemoveClick={onRemoveActionClick}
+                    onUpgradeCTAClick={onUpgradeCTAClick}
                     view={view}
                 />
             </div>

package/src/elements/content-uploader/__tests__/ItemAction.test.js

@@ -2,7 +2,14 @@ import React from 'react';
 import noop from 'lodash/noop';
 import { shallow } from 'enzyme';
 import { ItemActionForTesting as ItemAction } from '../ItemAction';
-import { STATUS_PENDING, STATUS_IN_PROGRESS, STATUS_COMPLETE, STATUS_STAGED, STATUS_ERROR } from '../../../constants';
+import {
+    ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED,
+    STATUS_PENDING,
+    STATUS_IN_PROGRESS,
+    STATUS_COMPLETE,
+    STATUS_STAGED,
+    STATUS_ERROR,
+} from '../../../constants';
 
 describe('elements/content-uploader/ItemAction', () => {
     const getWrapper = props =>
@@ -58,4 +65,15 @@ describe('elements/content-uploader/ItemAction', () => {
 
         expect(wrapper).toMatchSnapshot();
     });
+
+    test('should render PrimaryButton with STATUS_ERROR and upload file size exceeded', () => {
+        const wrapper = getWrapper({
+            status: STATUS_ERROR,
+            error: { code: ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED },
+            onUpgradeCTAClick: () => {},
+        });
+
+        expect(wrapper.exists('PrimaryButton')).toBe(true);
+        expect(wrapper.exists('PlainButton')).toBe(false);
+    });
 });

package/src/elements/content-uploader/__tests__/ItemList.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import { ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED, STATUS_COMPLETE, STATUS_ERROR } from '../../../constants';
+import ItemList from '../ItemList';
+
+jest.mock('@box/react-virtualized/dist/es/AutoSizer', () => ({ children }) => children({ height: 600, width: 600 }));
+
+describe('elements/content-uploader/ItemList', () => {
+    const renderComponent = props => mount(<ItemList items={[]} onClick={() => {}} {...props} />);
+
+    describe('render()', () => {
+        test('should render default component', () => {
+            const wrapper = renderComponent();
+
+            expect(wrapper.find('Table').length).toBe(1);
+            expect(wrapper.find('Table.bcu-item-list').length).toBe(1);
+        });
+
+        test('should render component with correct number of items', () => {
+            const items = [
+                { id: '1', name: 'item1', status: STATUS_COMPLETE },
+                { id: '2', name: 'item2', status: STATUS_COMPLETE },
+                { id: '3', name: 'item3', status: STATUS_COMPLETE },
+            ];
+            const wrapper = renderComponent({ items });
+            expect(wrapper.find('div.bcu-item-row').length).toBe(3);
+            const actionColumnStyle = wrapper
+                .find('.bcu-item-list-action-column')
+                .first()
+                .prop('style');
+            expect(actionColumnStyle.flex).toEqual('0 0 25px');
+        });
+
+        test('should render action column with correct width for upgrade cta', () => {
+            const items = [
+                { id: '1', name: 'item1', status: STATUS_ERROR, code: ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED },
+            ];
+            const wrapper = renderComponent({ items, onUpgradeCTAClick: () => {} });
+            expect(wrapper.find('div.bcu-item-row').length).toBe(1);
+            const actionColumnStyle = wrapper.find('.bcu-item-list-action-column').prop('style');
+            expect(actionColumnStyle.flex).toEqual('0 0 100px');
+        });
+    });
+});

package/src/elements/content-uploader/actionCellRenderer.js

@@ -11,6 +11,13 @@ type Props = {
     rowData: UploadItem,
 };
 
-export default (isResumableUploadsEnabled: boolean, onClick: Function) => ({ rowData }: Props) => (
-    <ItemAction {...rowData} isResumableUploadsEnabled={isResumableUploadsEnabled} onClick={() => onClick(rowData)} />
+export default (isResumableUploadsEnabled: boolean, onClick: Function, onUpgradeCTAClick?: Function) => ({
+    rowData,
+}: Props) => (
+    <ItemAction
+        {...rowData}
+        isResumableUploadsEnabled={isResumableUploadsEnabled}
+        onClick={() => onClick(rowData)}
+        onUpgradeCTAClick={onUpgradeCTAClick}
+    />
 );

package/src/elements/content-uploader/progressCellRenderer.js

@@ -35,11 +35,14 @@ type Props = {
  * @param {string} [itemName]
  * @returns {FormattedMessage}
  */
-const getErrorMessage = (errorCode: ?string, itemName: ?string) => {
+const getErrorMessage = (errorCode: ?string, itemName: ?string, shouldShowUpgradeCTAMessage?: boolean) => {
     switch (errorCode) {
         case ERROR_CODE_UPLOAD_CHILD_FOLDER_FAILED:
             return <FormattedMessage {...messages.uploadsOneOrMoreChildFoldersFailedToUploadMessage} />;
         case ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED:
+            if (shouldShowUpgradeCTAMessage) {
+                return <FormattedMessage {...messages.uploadsFileSizeLimitExceededErrorMessageForUpgradeCta} />;
+            }
             return <FormattedMessage {...messages.uploadsFileSizeLimitExceededErrorMessage} />;
         case ERROR_CODE_ITEM_NAME_IN_USE:
             return <FormattedMessage {...messages.uploadsItemNameInUseErrorMessage} />;
@@ -58,7 +61,7 @@ const getErrorMessage = (errorCode: ?string, itemName: ?string) => {
     }
 };
 
-export default () => ({ rowData }: Props) => {
+export default (shouldShowUpgradeCTAMessage?: boolean) => ({ rowData }: Props) => {
     const { status, error = {}, name, isFolder, file } = rowData;
     const { code } = error;
 
@@ -74,7 +77,7 @@ export default () => ({ rowData }: Props) => {
             if (Browser.isSafari() && code === ERROR_CODE_UPLOAD_BAD_DIGEST && file.name.indexOf('.zip') !== -1) {
                 return getErrorMessage(ERROR_CODE_UPLOAD_FAILED_PACKAGE, file.name);
             }
-            return getErrorMessage(code, name);
+            return getErrorMessage(code, name, shouldShowUpgradeCTAMessage);
         default:
             return null;
     }