box-ui-elements 15.0.0-beta.7 → 15.0.0

package/src/elements/content-open-with/__tests__/__snapshots__/ContentOpenWith.test.js.snap

@@ -8,7 +8,7 @@ exports[`elements/content-open-with/ContentOpenWith render() should render the E
     id="uniqueId"
   >
     <OpenWithButton
-      displayIntegration="Adobe"
+      displayIntegration="ABCD"
       error={null}
       isLoading={true}
       onClick={[Function]}
@@ -39,7 +39,7 @@ exports[`elements/content-open-with/ContentOpenWith render() should render the O
     id="uniqueId"
   >
     <OpenWithButton
-      displayIntegration="Adobe"
+      displayIntegration="ABCD"
       error={null}
       isLoading={false}
       onClick={[Function]}
@@ -75,7 +75,7 @@ exports[`elements/content-open-with/ContentOpenWith render() should render the O
     <OpenWithDropdownMenu
       integrations={
         Array [
-          "Adobe",
+          "ABCD",
           "Google Suite",
         ]
       }
@@ -95,7 +95,7 @@ exports[`elements/content-open-with/ContentOpenWith render() should render the P
     <OpenWithDropdownMenu
       integrations={
         Array [
-          "Adobe",
+          "ABCD",
           "Google Suite",
         ]
       }
@@ -118,7 +118,7 @@ exports[`elements/content-open-with/ContentOpenWith render() should render the P
     <OpenWithDropdownMenu
       integrations={
         Array [
-          "Adobe",
+          "ABCD",
           "Google Suite",
         ]
       }

package/src/elements/content-open-with/__tests__/__snapshots__/OpenWithButton.test.js.snap

@@ -50,7 +50,7 @@ exports[`elements/content-open-with/OpenWithButton should render as disabled if
     type="submit"
   >
     <OpenWithButtonContents>
-      <IconAdobeSign
+      <IconGoogleDocs
         className="bcow-integration-icon"
         dimension={26}
         height={26}

package/src/elements/content-open-with/__tests__/__snapshots__/OpenWithDropdownMenu.test.js.snap

@@ -16,20 +16,10 @@ exports[`elements/content-open-with/OpenWithDropdownMenu should render a button
       integration={
         Object {
           "appIntegrationId": 1,
-          "displayName": "Adobe Sign",
-        }
-      }
-      key="1"
-      onClick={[Function]}
-    />
-    <OpenWithDropdownMenuItem
-      integration={
-        Object {
-          "appIntegrationId": 2,
           "displayName": "Google Docs",
         }
       }
-      key="2"
+      key="1"
       onClick={[Function]}
     />
   </Menu>

package/src/elements/content-open-with/__tests__/__snapshots__/OpenWithDropdownMenuItem.test.js.snap

@@ -118,7 +118,8 @@ exports[`elements/content-open-with/OpenWithDropdownMenuItem should render the d
   className=""
   onClick={[Function]}
 >
-  <IconAdobeSign
+  <IconGoogleDocs
+    className=""
     dimension={30}
     height={30}
     width={30}
@@ -127,12 +128,12 @@ exports[`elements/content-open-with/OpenWithDropdownMenuItem should render the d
     <p
       className="bcow-menu-item-title"
     >
-      Adobe Sign
+      Google Docs
     </p>
     <p
       className="bcow-menu-item-description"
     >
-      Open With Adobe
+      Open With Google Docs
     </p>
   </span>
 </MenuItem>

package/src/elements/content-sidebar/Sidebar.js

@@ -235,7 +235,7 @@ class Sidebar extends React.Component<Props, State> {
         });
 
         return (
-            <aside id={this.id} className={styleClassName}>
+            <aside id={this.id} className={styleClassName} data-testid="preview-sidebar">
                 {isLoading ? (
                     <div className="bcs-loading">
                         <LoadingIndicator />

package/src/elements/content-sidebar/__tests__/AddTaskButton.test.js

@@ -2,6 +2,21 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { AddTaskButtonComponent as AddTaskButton } from '../AddTaskButton';
 
+jest.mock('../../../components/date-picker/DatePicker', () => props => {
+    // only spread `input` attritutes to the input field
+    const { name, value = '', className, onChange, placeholder } = props;
+    const localInputProps = {
+        name,
+        value,
+        className,
+        onChange,
+        placeholder,
+    };
+    return (
+        <input type="date" {...localInputProps} {...props.inputProps} /> // eslint-disable-line react/prop-types
+    );
+});
+
 describe('elements/content-sidebar/AddTaskButton', () => {
     /* 
     1. Pushing the open state into history keeps the sidebar open upon resize and refresh

package/src/elements/content-sidebar/activity-feed/common/delete-confirmation/DeleteConfirmation.scss

@@ -16,11 +16,11 @@
 }
 
 // overrides for confirm/cancel button spacing
-.bcs-DeleteConfirmation-delete,
-.bcs-DeleteConfirmation-cancel {
+.btn.bcs-DeleteConfirmation-delete,
+.btn.bcs-DeleteConfirmation-cancel {
     margin-left: 0;
 }
 
-.bcs-DeleteConfirmation-cancel {
+.btn.bcs-DeleteConfirmation-cancel {
     margin-right: 10px;
 }

package/src/elements/content-sidebar/activity-feed/task-form/TaskForm.js

@@ -6,6 +6,7 @@
 import * as React from 'react';
 import noop from 'lodash/noop';
 import getProp from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
 import classNames from 'classnames';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import type { InjectIntlProvidedProps } from 'react-intl';
@@ -83,6 +84,8 @@ type Props = TaskFormProps & TaskFormConsumerProps & InjectIntlProvidedProps;
 
 type TaskFormFieldName = 'taskName' | 'taskAssignees' | 'taskDueDate';
 
+type TaskFormInvalidSubmitState = { [key: TaskFormFieldName]: ?{ validityState: ?{ patternMismatch: boolean } } };
+
 type State = {|
     approverTextInput: string, // partial text input value for approver field before autocomplete/select
     approvers: Array<TaskCollabAssignee>,
@@ -135,7 +138,7 @@ class TaskForm extends React.Component<Props, State> {
         };
     }
 
-    validateForm = (only?: TaskFormFieldName) => {
+    validateForm = (only?: TaskFormFieldName, invalidSubmitValidityState?: ?TaskFormInvalidSubmitState) => {
         this.setState(state => {
             const { intl } = this.props;
             const { approvers, message, approverTextInput } = state;
@@ -151,12 +154,18 @@ class TaskForm extends React.Component<Props, State> {
                 code: 'required',
                 message: intl.formatMessage(commonMessages.requiredFieldError),
             };
+            const taskDueDateError = {
+                code: 'invalid',
+                message: intl.formatMessage(commonMessages.invalidDateError),
+            };
             const formValidityState = {
                 taskAssignees:
                     (approverTextInput.length ? assigneeFieldInvalidError : null) ||
                     (approvers.length ? null : assigneeFieldMissingError),
                 taskName: message ? null : messageFieldError,
-                taskDueDate: null,
+                taskDueDate: getProp(invalidSubmitValidityState, 'taskDueDate.validityState.patternMismatch')
+                    ? taskDueDateError
+                    : null,
             };
             const isValid = Object.values(formValidityState).every(val => val == null);
             return {
@@ -175,8 +184,12 @@ class TaskForm extends React.Component<Props, State> {
 
     clearForm = () => this.setState(this.getInitialFormState());
 
-    handleInvalidSubmit = () => {
-        this.validateForm();
+    handleInvalidSubmit = (invalidSubmitValidityState?: ?TaskFormInvalidSubmitState) => {
+        if (!isEmpty(invalidSubmitValidityState)) {
+            this.validateForm(undefined, invalidSubmitValidityState);
+        } else {
+            this.validateForm();
+        }
     };
 
     handleSubmitSuccess = () => {
@@ -273,7 +286,6 @@ class TaskForm extends React.Component<Props, State> {
             // Modify date to be the end of day (minus 1 millisecond) for the given due date
             dateValue.setHours(23, 59, 59, 999);
         }
-
         this.setState({ dueDate: dateValue });
         this.validateForm('taskDueDate');
     };
@@ -448,6 +460,7 @@ class TaskForm extends React.Component<Props, State> {
                                 [INTERACTION_TARGET]: ACTIVITY_TARGETS.TASK_DATE_PICKER,
                                 'data-testid': 'task-form-date-input',
                             }}
+                            isAccessible
                             isDisabled={isForbiddenErrorOnEdit}
                             isKeyboardInputAllowed
                             isRequired={false}

package/src/elements/content-sidebar/versions/StaticVersionSidebar.js

@@ -0,0 +1,97 @@
+/**
+ * @flow
+ * @file Static Versions Sidebar component
+ * @author Box
+ */
+
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import BoxDrive140 from '../../../illustration/BoxDrive140';
+
+import { BackButton } from '../../common/nav-button';
+import PrimaryButton from '../../../components/primary-button';
+import { LoadingIndicatorWrapper } from '../../../components/loading-indicator';
+import VersionsMenu from './VersionsMenu';
+
+import messages from './messages';
+
+import './StaticVersionsSidebar.scss';
+
+type Props = {
+    isLoading: boolean,
+    onUpgradeClick: () => void,
+    parentName: string,
+    showUpsellWithPicture: boolean,
+};
+
+const StaticVersionsSidebar = ({ isLoading, onUpgradeClick, parentName, showUpsellWithPicture }: Props): React.Node => {
+    const versionTimestamp = new Date();
+    versionTimestamp.setDate(versionTimestamp.getDate() - 1);
+
+    const versions = ['1', '2', '3'].map(versionNumber => {
+        return {
+            id: versionNumber,
+            version_number: versionNumber,
+            type: 'file_version',
+            permissions: {
+                can_preview: true,
+            },
+            created_at: versionTimestamp.toUTCString(),
+            modified_by: null,
+            size: 1875887,
+            trashed_at: null,
+            uploader_display_name: 'John Doe',
+        };
+    });
+
+    return (
+        <div
+            className="bcs-StaticVersionSidebar"
+            role="tabpanel"
+            data-resin-component="preview"
+            data-resin-feature="versions"
+        >
+            <div className="bcs-StaticVersionSidebar-header">
+                <h3 className="bcs-StaticVersionSidebar-title">
+                    <>
+                        <BackButton data-resin-target="back" to={`/${parentName}`} />
+                        <FormattedMessage {...messages.versionsTitle} />
+                    </>
+                </h3>
+            </div>
+
+            <div className="bcs-StaticVersionSidebar-content-wrapper">
+                <LoadingIndicatorWrapper
+                    className="bcs-StaticVersionSidebar-content"
+                    crawlerPosition="top"
+                    isLoading={isLoading}
+                >
+                    <VersionsMenu versions={versions} fileId="1" versionCount={3} versionLimit={3} />
+                </LoadingIndicatorWrapper>
+            </div>
+
+            <div className="bcs-StaticVersionSidebar-upsell-wrapper">
+                <div className="bcs-StaticVersionSidebar-upsell">
+                    {showUpsellWithPicture && <BoxDrive140 className="bcs-StaticVersionSidebar-upsell-icon" />}
+                    <p className="bcs-StaticVersionSidebar-upsell-header">
+                        <FormattedMessage {...messages.versionUpgradeLink} />
+                    </p>
+                    <p>
+                        <FormattedMessage {...messages.versionUpsell} />
+                    </p>
+                    <PrimaryButton
+                        className="bcs-StaticVersionSidebar-upsell-button"
+                        data-resin-target="versioning_error_upgrade_cta"
+                        onClick={onUpgradeClick}
+                        type="button"
+                    >
+                        <FormattedMessage {...messages.upgradeButton} />
+                    </PrimaryButton>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default StaticVersionsSidebar;

package/src/elements/content-sidebar/versions/StaticVersionsSidebar.scss

@@ -0,0 +1,67 @@
+@import '../../../styles/variables';
+@import '../../common/variables';
+
+.bcs-StaticVersionSidebar {
+    position: relative;
+    width: 341px; // 1px extra to account for the margin left
+    margin-left: -1px; // -1px to make nav button hover not have blank space
+    border-left: 1px solid $bdl-gray-10;
+
+    .bcs-StaticVersionSidebar-header {
+        display: flex;
+        align-items: center;
+        height: 60px;
+        margin: 0 25px;
+        border-bottom: 1px solid $bdl-gray-10;
+
+        .bcs-StaticVersionSidebar-title {
+            display: flex;
+            font-size: 16px;
+        }
+    }
+
+    .bcs-StaticVersionSidebar-content-wrapper {
+        position: absolute;
+        width: calc(100% - 20px);
+
+        .bcs-StaticVersionSidebar-content {
+            padding-left: 25px;
+            pointer-events: none;
+
+            button[data-resin-iscurrent='true'].bcs-VersionsItemButton {
+                width: 100%;
+                background-color: $hover-blue-background;
+                border: 1px solid $bdl-box-blue;
+            }
+        }
+    }
+}
+
+.bcs-StaticVersionSidebar-upsell-wrapper {
+    position: relative;
+    height: 100%;
+    text-align: center;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 30%);
+
+    .bcs-StaticVersionSidebar-upsell {
+        position: absolute;
+        top: 30%;
+        padding: 48px;
+
+        .bcs-StaticVersionSidebar-upsell-icon {
+            width: 80px;
+            height: 80px;
+        }
+
+        .bcs-StaticVersionSidebar-upsell-header {
+            margin: 0 0 10px;
+            font-weight: bold;
+        }
+
+        .bcs-StaticVersionSidebar-upsell-button {
+            margin-top: -8px;
+            padding: 10px 15px;
+            border-radius: 5px;
+        }
+    }
+}

package/src/elements/content-sidebar/versions/VersionsSidebar.js

@@ -12,6 +12,7 @@ import messages from './messages';
 import SidebarContent from '../SidebarContent';
 import VersionsMenu from './VersionsMenu';
 import { BackButton } from '../../common/nav-button';
+import PlainButton from '../../../components/plain-button/PlainButton';
 import { DEFAULT_FETCH_END } from '../../../constants';
 import { LoadingIndicatorWrapper } from '../../../components/loading-indicator';
 import type { BoxItemVersion } from '../../../common/types/core';
@@ -21,18 +22,20 @@ const MAX_VERSIONS = DEFAULT_FETCH_END;
 
 type Props = {
     error?: MessageDescriptor,
+    errorTitle?: MessageDescriptor,
     fileId: string,
     isLoading: boolean,
+    onUpgradeClick?: () => void,
     parentName: string,
     versionCount: number,
     versionLimit: number,
     versions: Array<BoxItemVersion>,
 };
 
-const VersionsSidebar = ({ error, isLoading, parentName, versions, ...rest }: Props) => {
+const VersionsSidebar = ({ error, errorTitle, onUpgradeClick, isLoading, parentName, versions, ...rest }: Props) => {
     const showLimit = versions.length >= MAX_VERSIONS;
     const showVersions = !!versions.length;
-    const showEmpty = !isLoading && !showVersions;
+    const showEmpty = !isLoading && !showVersions && !onUpgradeClick;
     const showError = !!error;
 
     return (
@@ -49,8 +52,18 @@ const VersionsSidebar = ({ error, isLoading, parentName, versions, ...rest }: Pr
         >
             <LoadingIndicatorWrapper className="bcs-Versions-content" crawlerPosition="top" isLoading={isLoading}>
                 {showError && (
-                    <InlineError title={<FormattedMessage {...messages.versionServerError} />}>
+                    <InlineError title={<FormattedMessage {...errorTitle} />}>
                         <FormattedMessage {...error} />
+                        {onUpgradeClick && (
+                            <PlainButton
+                                onClick={onUpgradeClick}
+                                data-resin-target="versioning_error_error_message_upgrade_cta"
+                                type="button"
+                                className="bcs-Versions-upgrade"
+                            >
+                                <FormattedMessage {...messages.versionUpgradeLink} />
+                            </PlainButton>
+                        )}
                     </InlineError>
                 )}
 

package/src/elements/content-sidebar/versions/VersionsSidebar.scss

@@ -37,3 +37,8 @@
         padding-bottom: 20px;
     }
 }
+
+.btn-plain.bcs-Versions-upgrade {
+    color: $bdl-box-blue;
+    font-weight: bold;
+}

package/src/elements/content-sidebar/versions/VersionsSidebarContainer.js

@@ -15,10 +15,11 @@ import type { MessageDescriptor } from 'react-intl';
 import API from '../../../api';
 import messages from './messages';
 import openUrlInsideIframe from '../../../utils/iframe';
+import StaticVersionsSidebar from './StaticVersionSidebar';
 import VersionsSidebar from './VersionsSidebar';
 import VersionsSidebarAPI from './VersionsSidebarAPI';
 import { withAPIContext } from '../../common/api-context';
-import type { VersionActionCallback, VersionChangeCallback } from './flowTypes';
+import type { VersionActionCallback, VersionChangeCallback, SidebarLoadCallback } from './flowTypes';
 import type { BoxItemVersion, BoxItem, FileVersions } from '../../../common/types/core';
 
 type Props = {
@@ -27,6 +28,8 @@ type Props = {
     hasSidebarInitialized?: boolean,
     history: RouterHistory,
     match: Match,
+    onLoad: SidebarLoadCallback,
+    onUpgradeClick?: () => void,
     onVersionChange: VersionChangeCallback,
     onVersionDelete: VersionActionCallback,
     onVersionDownload: VersionActionCallback,
@@ -35,10 +38,18 @@ type Props = {
     onVersionRestore: VersionActionCallback,
     parentName: string,
     versionId?: string,
+    versionUpsellExperience: ?string,
+};
+
+const UPSELL_TYPE = {
+    STATIC_VERSION_HISTORY: 'STATIC_VERSION_HISTORY',
+    STATIC_VERSION_HISTORY_WITH_PICTURE: 'STATIC_VERSION_HISTORY_WITH_PICTURE',
+    ERROR_MESSAGE: 'ERROR_MESSAGE',
 };
 
 type State = {
     error?: MessageDescriptor,
+    errorTitle?: MessageDescriptor,
     isLoading: boolean,
     isWatermarked: boolean,
     versionCount: number,
@@ -48,6 +59,7 @@ type State = {
 
 class VersionsSidebarContainer extends React.Component<Props, State> {
     static defaultProps = {
+        onLoad: noop,
         onVersionChange: noop,
         onVersionDelete: noop,
         onVersionDownload: noop,
@@ -72,8 +84,11 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
     window: any = window;
 
     componentDidMount() {
+        const { onLoad, versionUpsellExperience } = this.props;
         this.initialize();
-        this.fetchData();
+        this.fetchData().then(() => {
+            onLoad({ component: 'preview', feature: 'versions', versionUpsellExperience });
+        });
     }
 
     componentDidUpdate({ fileId: prevFileId, versionId: prevVersionId }: Props) {
@@ -163,9 +178,13 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
         this.mergeResponse(data);
     };
 
-    handleFetchError = (): void => {
+    handleFetchError = (error: Object): void => {
+        const { onUpgradeClick } = this.props;
+        const shouldShowVersionErrorWithUpsell = !!onUpgradeClick && error.status === 403;
+
         this.setState({
-            error: messages.versionFetchError,
+            error: shouldShowVersionErrorWithUpsell ? messages.versionNotAvailable : messages.versionFetchError,
+            errorTitle: shouldShowVersionErrorWithUpsell ? messages.versionAccessError : messages.versionServerError,
             isLoading: false,
             isWatermarked: false,
             versionCount: 0,
@@ -208,8 +227,8 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
         this.api = new VersionsSidebarAPI(this.props);
     };
 
-    fetchData = (): void => {
-        this.api
+    fetchData = (): Promise<?[BoxItem, FileVersions]> => {
+        return this.api
             .fetchData()
             .then(this.handleFetchSuccess)
             .catch(this.handleFetchError);
@@ -275,7 +294,22 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
     };
 
     render() {
-        const { fileId, parentName } = this.props;
+        const { fileId, parentName, onUpgradeClick, versionUpsellExperience } = this.props;
+
+        if (
+            onUpgradeClick &&
+            (versionUpsellExperience === UPSELL_TYPE.STATIC_VERSION_HISTORY ||
+                versionUpsellExperience === UPSELL_TYPE.STATIC_VERSION_HISTORY_WITH_PICTURE)
+        ) {
+            return (
+                <StaticVersionsSidebar
+                    onUpgradeClick={onUpgradeClick}
+                    parentName={parentName}
+                    showUpsellWithPicture={versionUpsellExperience === UPSELL_TYPE.STATIC_VERSION_HISTORY_WITH_PICTURE}
+                    {...this.state}
+                />
+            );
+        }
 
         return (
             <VersionsSidebar
@@ -285,6 +319,7 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
                 onPreview={this.handleActionPreview}
                 onPromote={this.handleActionPromote}
                 onRestore={this.handleActionRestore}
+                onUpgradeClick={onUpgradeClick}
                 parentName={parentName}
                 {...this.state}
             />

package/src/elements/content-sidebar/versions/__tests__/VersionsSidebar.test.js

@@ -4,6 +4,7 @@ import InlineError from '../../../../components/inline-error';
 import messages from '../messages';
 import VersionsMenu from '../VersionsMenu';
 import VersionsSidebar from '../VersionsSidebar';
+import PlainButton from '../../../../components/plain-button/PlainButton';
 
 jest.mock('../../../common/nav-button', () => ({
     BackButton: () => <button type="button">Back</button>,
@@ -22,12 +23,28 @@ describe('elements/content-sidebar/versions/VersionsSidebar', () => {
         });
 
         test('should show an inline error if the prop is provided', () => {
-            const wrapper = getWrapper({ error: messages.versionFetchError, versions: [] });
+            const wrapper = getWrapper({
+                error: messages.versionFetchError,
+                errorTitle: messages.versionServerError,
+                versions: [],
+            });
 
             expect(wrapper.exists(InlineError)).toBe(true);
             expect(wrapper).toMatchSnapshot();
         });
 
+        test('should show an upsell inline error if the errorUpsell prop is provided', () => {
+            const wrapper = getWrapper({
+                error: messages.versionNotAvailable,
+                errorTitle: messages.versionAccessError,
+                onUpgradeClick: () => {},
+                versions: [],
+            });
+
+            expect(wrapper.exists(InlineError)).toBe(true);
+            expect(wrapper.exists(PlainButton)).toBe(true);
+        });
+
         test('should show max versions text if max versions provided', () => {
             const versions = Array.from({ length: 1000 }).map((item, index) => ({ id: index }));
             const wrapper = getWrapper({ versions });