@transferwise/components 0.0.0-experimental-be73f56 → 0.0.0-experimental-2fa5e3f

package/src/upload/Upload.spec.js

@@ -46,7 +46,6 @@ 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',
 };
@@ -232,7 +231,7 @@ describe('Upload', () => {
       expect(component.find(CompleteStep)).toHaveLength(1);
     });
 
-    it('step UploadImageStep is called with error props', async () => {
+    it('step CompleteStep is called with error props', async () => {
       component = mount(<Upload {...props} />);
       const upload = component.children();
       asyncFileRead.mockImplementation(async () => {
@@ -245,12 +244,12 @@ describe('Upload', () => {
       await waitForUpload();
       component.update();
 
-      expect(component.find(UploadImageStep).props()).toStrictEqual({
-        ...UPLOADIMAGE_STEP_PROPS,
-        isComplete: false,
-        errorMessage: 'csFailureText',
-        usButtonText: 'Try again',
-        usHelpImage: null,
+      expect(component.find(CompleteStep).props()).toStrictEqual({
+        ...COMPLETED_STEP_PROPS,
+        isImage: false,
+        isComplete: true,
+        isError: true,
+        uploadedImage: undefined,
       });
     });
 

package/src/upload/Upload.story.tsx

@@ -6,7 +6,6 @@ import { MAX_SIZE_DEFAULT } from './Upload';
 
 const meta = {
   component: Upload,
-  title: 'Forms/Upload',
   tags: ['autodocs'],
   argTypes: {
     maxSize: {
@@ -36,20 +35,3 @@ export const Basic = {
     onCancel: fn(),
   },
 } satisfies Story;
-
-export const Loading = {
-  args: {
-    animationDelay: 10000000000,
-    maxSize: MAX_SIZE_DEFAULT,
-    usAccept: 'image/*',
-    usLabel: 'Front of your ID document',
-    httpOptions: {
-      url: 'https://httpbin.org/post',
-      method: 'POST',
-    },
-    onStart: fn(),
-    onSuccess: fn(),
-    onFailure: fn(),
-    onCancel: fn(),
-  },
-} satisfies Story;

package/src/upload/Upload.tsx

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

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

@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 
 import Body from '../../../body';
 import Button from '../../../button';
+import StatusIcon from '../../../statusIcon/StatusIcon';
 
 import CompleteStep from '.';
 
@@ -40,6 +41,14 @@ 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,13 +3,17 @@ 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>;
@@ -17,9 +21,11 @@ export interface CompleteStepProps {
 
 export default function CompleteStep({
   csButtonText,
+  csFailureText,
   csSuccessText,
   fileName,
   isComplete,
+  isError,
   isImage,
   onClear,
   uploadedImage,
@@ -31,25 +37,34 @@ export default function CompleteStep({
           className="droppable-card-content d-flex flex-column align-items-center"
           aria-live="polite"
         >
-          {isImage && uploadedImage ? (
-            <img src={uploadedImage} alt="OK" className="thumbnail " />
+          {isError ? (
+            <>
+              <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />
+              {csFailureText && <p className="m-t-2 m-b-0">{csFailureText}</p>}
+            </>
           ) : (
-            <DocumentIcon />
-          )}
+            <>
+              {isImage && uploadedImage ? (
+                <img src={uploadedImage} alt="OK" className="thumbnail " />
+              ) : (
+                <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="m-t-1" onClick={onClear}>
+          <Button className={isError ? 'm-t-2' : 'm-t-1'} onClick={onClear}>
             {csButtonText}
           </Button>
         )}

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

@@ -1,6 +1,5 @@
 import { Upload as UploadIcon } from '@transferwise/icons';
 import { shallow } from 'enzyme';
-import StatusIcon from '../../../statusIcon/StatusIcon';
 
 import UploadImageStep from '.';
 
@@ -14,7 +13,6 @@ describe('uploadImageStep', () => {
     usLabel: '',
     usHelpImage: '',
     usPlaceholder: '',
-    errorMessage: '',
   };
   let component;
   beforeEach(() => {
@@ -65,14 +63,4 @@ 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,8 +1,5 @@
 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;
@@ -13,7 +10,6 @@ export interface UploadImageStepProps {
   usHelpImage: React.ReactNode;
   usLabel: string;
   usPlaceholder: string;
-  errorMessage?: string | string[];
 }
 
 export default class UploadImageStep extends PureComponent<UploadImageStepProps> {
@@ -29,15 +25,6 @@ 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 (
@@ -55,38 +42,32 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
   };
 
   render() {
-    const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder, errorMessage } =
-      this.props;
+    const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder } = this.props;
 
     return (
-      <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 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>
       </div>
     );