feat: add freemium upsell changes (#2739)

feat: add freemium upsell changes

Author: jackiejou

i18n/en-US.properties

@@ -666,6 +666,10 @@ be.uploadsCancelButtonTooltip = Cancel this upload
 be.uploadsDefaultErrorMessage = Something went wrong with the upload. Please try again.
 # Error message shown when file size exceeds the limit
 be.uploadsFileSizeLimitExceededErrorMessage = File size exceeds the folder owner’s file size limit
+# Error message shown when file size exceeds the limit
+be.uploadsFileSizeLimitExceededErrorMessageForUpgradeCta = This file exceeds your plan’s upload limit. Upgrade now to store larger files.
+# Upgrade message shown when file size exceeds the limit
+be.uploadsFileSizeLimitExceededUpgradeMessageForUpgradeCta = Upgrade
 # Error message shown when attempting to upload a file which name already exists
 be.uploadsItemNameInUseErrorMessage = A file with this name already exists.
 # Text shown when uploads are completed

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',

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}

src/elements/content-uploader/ItemAction.js

@@ -4,33 +4,52 @@
  */
 
 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';
 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';
 
 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 ? (

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

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>

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);
+    });
 });

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');
+        });
+    });
+});

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}
+    />
 );

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;
     }