@transferwise/components 46.53.0 → 46.54.1

package/src/nudge/Nudge.less

@@ -90,7 +90,7 @@
       align-self: var(--nudge-content-flex-alignment);
       display: flex;
       flex-direction: column;
-      align-items: start;
+      align-items: flex-start;
 
       .wds-nudge-title {
         color: var(--nudge-title-color);

package/src/upload/Upload.css

@@ -13,3 +13,13 @@
 .tw-droppable-sm {
   min-height: 245px;
 }
+.upload-error-message {
+  margin-top: 24px;
+  margin-top: var(--padding-medium);
+  border-top: 1px solid rgba(0,0,0,0.10196);
+  border-top: 1px solid var(--color-border-neutral);
+  text-align: start;
+}
+.upload-error-message .alert {
+  min-width: 100px;
+}

package/src/upload/Upload.less

@@ -19,3 +19,12 @@
 .tw-droppable-sm {
   min-height: 245px;
 }
+
+.upload-error-message {
+  margin-top: var(--padding-medium);
+  border-top: 1px solid var(--color-border-neutral);
+  text-align: start;
+  .alert {
+    min-width: 100px;
+  }
+}

package/src/upload/Upload.messages.ts

@@ -41,4 +41,8 @@ export default defineMessages({
     id: 'neptune.Upload.usPlaceholder',
     defaultMessage: 'Drag and drop a file less than {maxSize}MB',
   },
+  retry: {
+    id: 'neptune.Upload.retry',
+    defaultMessage: 'Retry',
+  },
 });

package/src/upload/Upload.spec.js

@@ -46,6 +46,7 @@ const props = {
   psProcessingText: 'psProcessingText',
   usAccept: 'image/*',
   usButtonText: 'Or Select File',
+  usButtonRetryText: 'Try again',
   usDropMessage: 'Drop file to start upload',
   usPlaceholder: 'Drag and drop a file less than 5MB',
 };
@@ -231,7 +232,7 @@ describe('Upload', () => {
       expect(component.find(CompleteStep)).toHaveLength(1);
     });
 
-    it('step CompleteStep is called with error props', async () => {
+    it('step UploadImageStep is called with error props', async () => {
       component = mount(<Upload {...props} />);
       const upload = component.children();
       asyncFileRead.mockImplementation(async () => {
@@ -244,12 +245,12 @@ describe('Upload', () => {
       await waitForUpload();
       component.update();
 
-      expect(component.find(CompleteStep).props()).toStrictEqual({
-        ...COMPLETED_STEP_PROPS,
-        isImage: false,
-        isComplete: true,
-        isError: true,
-        uploadedImage: undefined,
+      expect(component.find(UploadImageStep).props()).toStrictEqual({
+        ...UPLOADIMAGE_STEP_PROPS,
+        isComplete: false,
+        errorMessage: 'csFailureText',
+        usButtonText: 'Try again',
+        usHelpImage: null,
       });
     });
 

package/src/upload/Upload.story.tsx

@@ -6,6 +6,7 @@ import { MAX_SIZE_DEFAULT } from './Upload';
 
 const meta = {
   component: Upload,
+  title: 'Forms/Upload',
   tags: ['autodocs'],
   argTypes: {
     maxSize: {

package/src/upload/Upload.tsx

@@ -50,6 +50,7 @@ export interface UploadProps extends WrappedComponentProps {
    */
   usAccept?: string;
   usButtonText?: string;
+  usButtonRetryText?: string;
   usDisabled?: boolean;
   usDropMessage?: string;
   usHelpImage?: React.ReactNode;
@@ -325,6 +326,7 @@ export class Upload extends Component<UploadProps, UploadState> {
       usDropMessage,
       usAccept,
       usButtonText,
+      usButtonRetryText,
       usDisabled,
       usHelpImage,
       usLabel,
@@ -359,8 +361,8 @@ export class Upload extends Component<UploadProps, UploadState> {
           'tw-droppable-lg droppable-lg': size === 'lg',
           'droppable-dropping': isDroppable,
           'droppable-processing': isProcessing,
-          'droppable-complete': isComplete,
-          'droppable-negative': isError,
+          'droppable-complete': isComplete && !isError,
+          'droppable-negative': isError && !isProcessing,
         })}
         onDragEnter={(event) => this.onDragEnter(event)}
         onDragLeave={(event) => this.onDragLeave(event)}
@@ -383,28 +385,36 @@ export class Upload extends Component<UploadProps, UploadState> {
           />
         )}
 
-        {isProcessing && (
-          <ProcessingStep
-            isComplete={isComplete}
-            isError={isError}
-            isSuccess={isSuccess}
-            psButtonText={psButtonText || intl.formatMessage(messages.psButtonText)}
-            psProcessingText={psProcessingText || intl.formatMessage(messages.psProcessingText)}
-            psButtonDisabled={psButtonDisabled}
-            onAnimationCompleted={async (status) => this.onAnimationCompleted(status)}
-            onClear={(event) => this.handleOnClear(event)}
-          />
-        )}
-        {/* Starts render the step when isSuccess or isError are true so markup is there when css transition kicks in
+        {/* Starts render the step when isSuccess is true so markup is there when css transition kicks in
       css transition to work properly */}
-        {(isSuccess || isError || isComplete) && (
+        {(isSuccess || isComplete) && !isError && (
           <CompleteStep
             fileName={fileName}
             isComplete={isComplete}
-            isError={isError}
             isImage={isImage}
             csButtonText={csButtonText || intl.formatMessage(messages.csButtonText)}
-            csFailureText={this.getErrorMessage(
+            csSuccessText={csSuccessText || intl.formatMessage(messages.csSuccessText)}
+            uploadedImage={uploadedImage}
+            onClear={(event) => this.handleOnClear(event)}
+          />
+        )}
+        {isError && !isProcessing && (
+          <UploadImageStep
+            fileDropped={async (file) => {
+              this.reset();
+              await this.fileDropped(file);
+            }}
+            isComplete={!isError}
+            usAccept={usAccept}
+            usButtonText={usButtonRetryText || intl.formatMessage(messages.retry)}
+            usDisabled={usDisabled}
+            usHelpImage={null}
+            usLabel={usLabel}
+            usPlaceholder={
+              usPlaceholder ||
+              intl.formatMessage(messages.usPlaceholder, { maxSize: maxSize / 1000000 })
+            }
+            errorMessage={this.getErrorMessage(
               response != null &&
                 typeof response === 'object' &&
                 'status' in response &&
@@ -412,8 +422,17 @@ export class Upload extends Component<UploadProps, UploadState> {
                 ? response.status
                 : undefined,
             )}
-            csSuccessText={csSuccessText || intl.formatMessage(messages.csSuccessText)}
-            uploadedImage={uploadedImage}
+          />
+        )}
+        {isProcessing && (
+          <ProcessingStep
+            isComplete={isComplete}
+            isError={isError}
+            isSuccess={isSuccess}
+            psButtonText={psButtonText || intl.formatMessage(messages.psButtonText)}
+            psProcessingText={psProcessingText || intl.formatMessage(messages.psProcessingText)}
+            psButtonDisabled={psButtonDisabled}
+            onAnimationCompleted={async (status) => this.onAnimationCompleted(status)}
             onClear={(event) => this.handleOnClear(event)}
           />
         )}

package/src/upload/steps/completeStep/completeStep.spec.js

@@ -3,7 +3,6 @@ import { shallow } from 'enzyme';
 
 import Body from '../../../body';
 import Button from '../../../button';
-import StatusIcon from '../../../statusIcon/StatusIcon';
 
 import CompleteStep from '.';
 
@@ -41,14 +40,6 @@ describe('CompleteStep', () => {
     });
   });
 
-  describe('when error is true', () => {
-    it('renders errorMessage and icon when error is true', () => {
-      component = shallow(<CompleteStep {...COMPLETED_STEP_PROPS} isError />);
-      expect(component.find('p').text()).toBe(COMPLETED_STEP_PROPS.csFailureText);
-      expect(component.find(StatusIcon)).toHaveLength(1);
-    });
-  });
-
   it('renders button when csButtonText is set up', () => {
     expect(component.find(Button)).toHaveLength(1);
   });

package/src/upload/steps/completeStep/completeStep.tsx

@@ -3,17 +3,13 @@ import { Document as DocumentIcon } from '@transferwise/icons';
 import { Typography } from '../../..';
 import Body from '../../../body';
 import Button from '../../../button';
-import { Sentiment, Size } from '../../../common';
-import StatusIcon from '../../../statusIcon';
 import Title from '../../../title';
 
 export interface CompleteStepProps {
   csButtonText: string;
   csSuccessText: string;
-  csFailureText: string;
   fileName: string;
   isComplete: boolean;
-  isError: boolean;
   isImage: boolean;
   uploadedImage?: string;
   onClear: React.MouseEventHandler<HTMLButtonElement>;
@@ -21,11 +17,9 @@ export interface CompleteStepProps {
 
 export default function CompleteStep({
   csButtonText,
-  csFailureText,
   csSuccessText,
   fileName,
   isComplete,
-  isError,
   isImage,
   onClear,
   uploadedImage,
@@ -37,34 +31,25 @@ export default function CompleteStep({
           className="droppable-card-content d-flex flex-column align-items-center"
           aria-live="polite"
         >
-          {isError ? (
-            <>
-              <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />
-              {csFailureText && <p className="m-t-2 m-b-0">{csFailureText}</p>}
-            </>
+          {isImage && uploadedImage ? (
+            <img src={uploadedImage} alt="OK" className="thumbnail " />
           ) : (
-            <>
-              {isImage && uploadedImage ? (
-                <img src={uploadedImage} alt="OK" className="thumbnail " />
-              ) : (
-                <DocumentIcon />
-              )}
+            <DocumentIcon />
+          )}
 
-              {fileName && (
-                <Body as="p" className="m-b-0">
-                  {fileName}
-                </Body>
-              )}
-              {csSuccessText && (
-                <Title className="caption m-t-1" type={Typography.TITLE_BODY}>
-                  {csSuccessText}
-                </Title>
-              )}
-            </>
+          {fileName && (
+            <Body as="p" className="m-b-0">
+              {fileName}
+            </Body>
+          )}
+          {csSuccessText && (
+            <Title className="caption m-t-1" type={Typography.TITLE_BODY}>
+              {csSuccessText}
+            </Title>
           )}
         </div>
         {csButtonText && (
-          <Button className={isError ? 'm-t-2' : 'm-t-1'} onClick={onClear}>
+          <Button className="m-t-1" onClick={onClear}>
             {csButtonText}
           </Button>
         )}

package/src/upload/steps/uploadImageStep/uploadImageStep.spec.js

@@ -1,5 +1,6 @@
 import { Upload as UploadIcon } from '@transferwise/icons';
 import { shallow } from 'enzyme';
+import StatusIcon from '../../../statusIcon/StatusIcon';
 
 import UploadImageStep from '.';
 
@@ -13,6 +14,7 @@ describe('uploadImageStep', () => {
     usLabel: '',
     usHelpImage: '',
     usPlaceholder: '',
+    errorMessage: '',
   };
   let component;
   beforeEach(() => {
@@ -63,4 +65,14 @@ describe('uploadImageStep', () => {
 
     expect(component.find('.test-image')).toHaveLength(1);
   });
+
+  describe('when errorMessage is not empty', () => {
+    it('renders errorMessage and icon when error is true', () => {
+      component = shallow(
+        <UploadImageStep {...UPLOADIMAGE_STEP_PROPS} errorMessage="error message" />,
+      );
+      expect(component.find('.upload-error-message').text()).toBe('<InlineAlert />');
+      expect(component.find(StatusIcon)).toHaveLength(1);
+    });
+  });
 });

package/src/upload/steps/uploadImageStep/uploadImageStep.tsx

@@ -1,5 +1,8 @@
 import { Upload as UploadIcon } from '@transferwise/icons';
 import { createRef, PureComponent } from 'react';
+import StatusIcon from '../../../statusIcon';
+import { Sentiment, Size } from '../../../common';
+import InlineAlert from '../../../inlineAlert';
 
 export interface UploadImageStepProps {
   fileDropped: (file: File) => void;
@@ -10,6 +13,7 @@ export interface UploadImageStepProps {
   usHelpImage: React.ReactNode;
   usLabel: string;
   usPlaceholder: string;
+  errorMessage?: string | string[];
 }
 
 export default class UploadImageStep extends PureComponent<UploadImageStepProps> {
@@ -25,6 +29,15 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
 
   getImage = () => {
     const { usHelpImage, usLabel } = this.props;
+    const { errorMessage } = this.props;
+
+    if (errorMessage) {
+      return (
+        <div className="d-flex flex-column align-items-center">
+          <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />
+        </div>
+      );
+    }
 
     if (!usHelpImage) {
       return (
@@ -42,32 +55,38 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
   };
 
   render() {
-    const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder } = this.props;
+    const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder, errorMessage } =
+      this.props;
 
     return (
-      <div>
-        <div className="droppable-default-card" aria-hidden={isComplete}>
-          <div className="droppable-card-content">
-            <div className="m-b-3">{this.getImage()}</div>
-            {usLabel && <h4 className="np-text-title-body m-b-1">{usLabel}</h4>}
-            {usPlaceholder && <p className="np-text-body-large m-b-3">{String(usPlaceholder)}</p>}
-            <label className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}>
-              {usButtonText ? (
-                <span>{usButtonText}</span>
-              ) : (
-                <UploadIcon size={24} className="m-r-0" />
-              )}
-              <input
-                ref={this.uploadInputRef}
-                type="file"
-                accept={usAccept === '*' ? undefined : usAccept}
-                className="tw-droppable-input hidden"
-                disabled={usDisabled}
-                name="file-upload"
-                onChange={() => this.onManualUpload()}
-              />
-            </label>
-          </div>
+      <div className="droppable-default-card" aria-hidden={isComplete}>
+        <div className="droppable-card-content">
+          <div className="m-b-3">{this.getImage()}</div>
+          {usLabel && <h4 className="np-text-title-body m-b-1">{usLabel}</h4>}
+          {usPlaceholder && <p className="np-text-body-large m-b-3">{String(usPlaceholder)}</p>}
+          <label className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}>
+            {usButtonText ? (
+              <span>{usButtonText}</span>
+            ) : (
+              <UploadIcon size={24} className="m-r-0" />
+            )}
+            <input
+              ref={this.uploadInputRef}
+              type="file"
+              accept={usAccept === '*' ? undefined : usAccept}
+              className="tw-droppable-input hidden"
+              disabled={usDisabled}
+              name="file-upload"
+              onChange={() => this.onManualUpload()}
+            />
+          </label>
+          {errorMessage && (
+            <div className="upload-error-message">
+              <div className="m-t-3 has-error">
+                <InlineAlert type={Sentiment.NEGATIVE}>{errorMessage}</InlineAlert>
+              </div>
+            </div>
+          )}
         </div>
       </div>
     );