@transferwise/components 46.38.0 → 46.40.0

package/src/upload/Upload.story.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import Upload from '.';
+import { MAX_SIZE_DEFAULT } from './Upload';
+
+const meta = {
+  component: Upload,
+  tags: ['autodocs'],
+  argTypes: {
+    maxSize: {
+      control: {
+        type: 'number',
+        min: 0,
+      },
+    },
+  },
+} satisfies Meta<typeof Upload>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic = {
+  args: {
+    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.js → Upload.tsx}

@@ -1,68 +1,130 @@
 import { Plus as PlusIcon } from '@transferwise/icons';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { Component } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 
-import { Status, Typography } from '../common';
+import { Size, Typography } from '../common';
 import Title from '../title';
 
 import messages from './Upload.messages';
-import { UploadImageStep, MediaUploadStep, ProcessingStep, CompleteStep } from './steps';
-import { UploadStep } from './uploadSteps';
+import { UploadImageStep, ProcessingStep, CompleteStep } from './steps';
 import { postData, asyncFileRead, isSizeValid, isTypeValid, getFileType } from './utils';
-
-const PROCESS_STATE = ['error', 'success'];
+import { PostDataFetcher, PostDataHTTPOptions, ResponseError } from './utils/postData/postData';
+import { ProcessIndicatorStatus } from '../processIndicator';
 
 /*
  * This delay is required for the isError/isSuccess to be fired after isProcessing so the processIndicator, will be
  * rendered first and then updated with the right status.
  */
 const ANIMATION_FIX = 10;
-const MAX_SIZE_DEFAULT = 5000000;
-const UPLOAD_STEP_COMPONENTS = {
-  [UploadStep.UPLOAD_IMAGE_STEP]: UploadImageStep,
-  [UploadStep.MEDIA_UPLOAD_STEP]: MediaUploadStep,
-};
-
-class Upload extends Component {
-  constructor(props) {
+export const MAX_SIZE_DEFAULT = 5000000;
+
+export enum UploadStep {
+  UPLOAD_IMAGE_STEP = 'uploadImageStep',
+}
+
+export interface UploadProps extends WrappedComponentProps {
+  animationDelay?: number;
+  csButtonText?: string;
+  csFailureText?: string;
+  csSuccessText?: string;
+  csTooLargeMessage?: string;
+  csWrongTypeMessage?: string;
+  httpOptions?: PostDataHTTPOptions & {
+    fileInputName?: string;
+    data?: Record<string, string | Blob>;
+  };
+  /**
+   * You can provide a fetcher function with the same interface as the global fetch function, which is used by default.
+   * function fetcher(input: RequestInfo, init?: RequestInit): Promise<Response>
+   */
+  fetcher?: PostDataFetcher;
+  maxSize?: number;
+  psButtonText?: string;
+  psButtonDisabled?: boolean;
+  psProcessingText?: string;
+  size?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;
+  /**
+   * You can provide multiple rules separated by comma, e.g.: "application/pdf,image/*".
+   * Using "*" will allow every file type to be uploaded.
+   */
+  usAccept?: string;
+  usButtonText?: string;
+  usDisabled?: boolean;
+  usDropMessage?: string;
+  usHelpImage?: React.ReactNode;
+  usLabel?: string;
+  usPlaceholder?: string;
+  /** @deprecated Only a single variant exists, please remove this prop. */
+  uploadStep?: `${UploadStep}`;
+  onCancel?: () => void;
+  onFailure?: (error: unknown) => void;
+  onStart?: (file: File) => void;
+  onSuccess?: (response: string | Response, fileName: string) => void;
+}
+
+interface UploadState {
+  fileName: string;
+  isDroppable: boolean;
+  isComplete: boolean;
+  isError: boolean;
+  isImage: boolean;
+  isProcessing: boolean;
+  isSuccess: boolean;
+  response: unknown;
+  uploadedImage: string | undefined;
+}
+
+export class Upload extends Component<UploadProps, UploadState> {
+  declare props: UploadProps & Required<Pick<UploadProps, keyof typeof Upload.defaultProps>>;
+
+  static defaultProps = {
+    animationDelay: 700,
+    maxSize: MAX_SIZE_DEFAULT,
+    psButtonDisabled: false,
+    size: 'md',
+    usAccept: 'image/*',
+    usDisabled: false,
+    usLabel: '',
+  } satisfies Partial<UploadProps>;
+
+  dragCounter = 0;
+  timeouts = 0;
+
+  constructor(props: UploadProps) {
     super(props);
-    this.dragCounter = 0;
-    this.timeouts = null;
 
     this.state = {
       fileName: '',
+      isDroppable: false,
       isComplete: false,
       isError: false,
       isImage: false,
       isProcessing: false,
       isSuccess: false,
-      response: null,
-      uploadedImage: null,
+      response: undefined,
+      uploadedImage: undefined,
     };
   }
 
-  getErrorMessage(status) {
+  getErrorMessage(status?: number) {
+    const { csFailureText, csTooLargeMessage, csWrongTypeMessage, maxSize, intl } = this.props;
     switch (status) {
       case 413:
         return (
-          this.props.csTooLargeMessage ||
-          this.props.intl.formatMessage(messages.csTooLargeMessage, {
-            maxSize: this.props.maxSize / 1000000,
+          csTooLargeMessage ||
+          intl.formatMessage(messages.csTooLargeMessage, {
+            maxSize: maxSize / 1000000,
           })
         );
       case 415:
-        return (
-          this.props.csWrongTypeMessage ||
-          this.props.intl.formatMessage(messages.csWrongTypeMessage)
-        );
+        return csWrongTypeMessage || intl.formatMessage(messages.csWrongTypeMessage);
       default:
-        return this.props.csFailureText || this.props.intl.formatMessage(messages.csFailureText);
+        return csFailureText || intl.formatMessage(messages.csFailureText);
     }
   }
 
-  onDragLeave(event) {
+  onDragLeave(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
     this.dragCounter -= 1;
     if (this.dragCounter === 0) {
@@ -70,7 +132,7 @@ class Upload extends Component {
     }
   }
 
-  onDragEnter(event) {
+  onDragEnter(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
     this.dragCounter += 1;
     const { usDisabled } = this.props;
@@ -80,90 +142,85 @@ class Upload extends Component {
     }
   }
 
-  onDrop(event) {
+  async onDrop(event: React.DragEvent<HTMLDivElement>) {
     const { isProcessing } = this.state;
     event.preventDefault();
     if (!isProcessing) {
       this.reset();
     }
 
-    if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
-      this.fileDropped(event.dataTransfer.files[0]);
+    if (event.dataTransfer?.files?.[0]) {
+      await this.fileDropped(event.dataTransfer.files[0]);
     }
   }
 
-  onAnimationCompleted = async (status) => {
+  onAnimationCompleted = async (status: ProcessIndicatorStatus) => {
     const { response, isProcessing, fileName } = this.state;
-    // Success.
     const { animationDelay } = this.props;
-    if (isProcessing && status === Status.SUCCEEDED) {
+
+    if (isProcessing && status === 'succeeded') {
       const { onSuccess } = this.props;
-      this.timeouts = setTimeout(() => {
+      this.timeouts = window.setTimeout(() => {
         this.setState(
           {
             isProcessing: false,
             isComplete: true,
           },
-          () => (onSuccess ? onSuccess(response, fileName) : {}),
+          onSuccess ? () => onSuccess(response as string | Response, fileName) : undefined,
         );
       }, animationDelay);
     }
-    // Failure.
-    if (isProcessing && status === Status.FAILED) {
+
+    if (isProcessing && status === 'failed') {
       const { onFailure } = this.props;
-      this.timeouts = setTimeout(() => {
+      this.timeouts = window.setTimeout(() => {
         this.setState(
           {
             isProcessing: false,
             isComplete: true,
           },
-          () => (onFailure ? onFailure(response) : {}),
+          onFailure ? () => onFailure(response) : undefined,
         );
       }, animationDelay);
     }
   };
 
-  asyncPost = (file) => {
+  asyncPost = async (file: File) => {
     const { httpOptions, fetcher } = this.props;
-    const { fileInputName = file.name, data = {} } = httpOptions || {};
+    if (httpOptions == null) {
+      throw new Error('Cannot find HTTP options');
+    }
+
+    const { fileInputName = file.name, data = {} } = httpOptions;
 
     const formData = new FormData();
     formData.append(fileInputName, file);
     Object.keys(data).forEach((key) => formData.append(key, data[key]));
-    return postData(this.prepareHttpOptions(httpOptions), formData, fetcher);
+    return postData(httpOptions, formData, fetcher);
   };
 
-  asyncResponse = (response, type) => {
+  asyncResponse = (response: unknown, type: 'success' | 'error') => {
     // Gives time to the animation callback to fire.
-    this.timeouts = setTimeout(() => {
+    this.timeouts = window.setTimeout(() => {
       this.setState({
         response,
-        isError: type === PROCESS_STATE[0],
-        isSuccess: type === PROCESS_STATE[1],
+        isError: type === 'error',
+        isSuccess: type === 'success',
       });
     }, ANIMATION_FIX);
   };
 
-  prepareHttpOptions = (httpOptions) => {
-    if (!httpOptions.url) {
-      throw new Error('You must supply a URL to post image data asynchronously');
-    }
-    return httpOptions;
-  };
-
-  handleOnClear = (event) => {
+  handleOnClear: React.MouseEventHandler<HTMLButtonElement> = (event) => {
     event.preventDefault();
     const { onCancel } = this.props;
-    if (onCancel) {
-      onCancel();
-    }
+    onCancel?.();
 
     this.reset();
   };
 
   reset = () => {
     this.dragCounter = 0;
-    clearTimeout(this.timeouts);
+    window.clearTimeout(this.timeouts);
     this.setState({
       isComplete: false,
       isError: false,
@@ -172,7 +229,7 @@ class Upload extends Component {
     });
   };
 
-  showDataImage = (dataUrl) => {
+  showDataImage = (dataUrl: string) => {
     const { isImage } = this.state;
     if (isImage) {
       this.setState({
@@ -181,7 +238,7 @@ class Upload extends Component {
     }
   };
 
-  fileDropped = async (file) => {
+  fileDropped = async (file: File) => {
     const { httpOptions, maxSize, onStart, usDisabled, usAccept } = this.props;
     const { isProcessing } = this.state;
 
@@ -199,16 +256,14 @@ class Upload extends Component {
       isProcessing: true,
     });
 
-    if (onStart) {
-      onStart(file);
-    }
+    onStart?.(file);
 
     let file64 = null;
 
     try {
       file64 = await asyncFileRead(file);
     } catch (error) {
-      this.asyncResponse(error, PROCESS_STATE[0]);
+      this.asyncResponse(error, 'error');
     }
 
     if (!file64) {
@@ -220,35 +275,43 @@ class Upload extends Component {
     });
 
     if (!isTypeValid(file, usAccept, file64)) {
-      const response = {
-        status: 415,
-        statusText: 'Unsupported Media Type',
-      };
-      this.asyncResponse(response, PROCESS_STATE[0]);
+      this.asyncResponse(
+        new ResponseError(
+          new Response(null, {
+            status: 415,
+            statusText: 'Unsupported Media Type',
+          }),
+        ),
+        'error',
+      );
       return false;
     }
 
     if (!isSizeValid(file, maxSize)) {
-      const response = {
-        status: 413,
-        statusText: 'Request Entity Too Large',
-      };
-      this.asyncResponse(response, PROCESS_STATE[0]);
+      this.asyncResponse(
+        new ResponseError(
+          new Response(null, {
+            status: 413,
+            statusText: 'Request Entity Too Large',
+          }),
+        ),
+        'error',
+      );
       return false;
     }
 
     if (httpOptions) {
       // Post the file to provided endpoint
-      return await this.asyncPost(file)
-        .then((response) => this.asyncResponse(response, 'success'))
-        .then(() => {
-          this.showDataImage(file64);
-          return true;
-        })
-        .catch((error) => {
-          this.asyncResponse(error, PROCESS_STATE[0]);
-          return false;
-        });
+      let response;
+      try {
+        response = await this.asyncPost(file);
+      } catch (error) {
+        this.asyncResponse(error, 'error');
+        return false;
+      }
+      this.asyncResponse(response, 'success');
+      this.showDataImage(file64);
+      return true;
     }
     // Post on form submit. And return the encoded image.
     this.showDataImage(file64);
@@ -258,6 +321,7 @@ class Upload extends Component {
 
   render() {
     const {
+      maxSize,
       usDropMessage,
       usAccept,
       usButtonText,
@@ -271,7 +335,6 @@ class Upload extends Component {
       csButtonText,
       csSuccessText,
       size,
-      uploadStep,
       intl,
     } = this.props;
 
@@ -287,8 +350,6 @@ class Upload extends Component {
       uploadedImage,
     } = this.state;
 
-    const UploadStepComponent = UPLOAD_STEP_COMPONENTS[uploadStep] || UploadImageStep;
-
     return (
       <div
         className={classNames('droppable-area', {
@@ -303,12 +364,12 @@ class Upload extends Component {
         })}
         onDragEnter={(event) => this.onDragEnter(event)}
         onDragLeave={(event) => this.onDragLeave(event)}
-        onDrop={(event) => this.onDrop(event)}
+        onDrop={async (event) => this.onDrop(event)}
         onDragOver={(event) => event.preventDefault()}
       >
         {!isProcessing && !isComplete && (
-          <UploadStepComponent
-            fileDropped={(file) => this.fileDropped(file)}
+          <UploadImageStep
+            fileDropped={async (file) => this.fileDropped(file)}
             isComplete={isComplete}
             usAccept={usAccept}
             usButtonText={usButtonText || intl.formatMessage(messages.usButtonText)}
@@ -317,7 +378,7 @@ class Upload extends Component {
             usLabel={usLabel}
             usPlaceholder={
               usPlaceholder ||
-              intl.formatMessage(messages.usPlaceholder, { maxSize: this.props.maxSize / 1000000 })
+              intl.formatMessage(messages.usPlaceholder, { maxSize: maxSize / 1000000 })
             }
           />
         )}
@@ -330,7 +391,7 @@ class Upload extends Component {
             psButtonText={psButtonText || intl.formatMessage(messages.psButtonText)}
             psProcessingText={psProcessingText || intl.formatMessage(messages.psProcessingText)}
             psButtonDisabled={psButtonDisabled}
-            onAnimationCompleted={(status) => this.onAnimationCompleted(status)}
+            onAnimationCompleted={async (status) => this.onAnimationCompleted(status)}
             onClear={(event) => this.handleOnClear(event)}
           />
         )}
@@ -343,7 +404,14 @@ class Upload extends Component {
             isError={isError}
             isImage={isImage}
             csButtonText={csButtonText || intl.formatMessage(messages.csButtonText)}
-            csFailureText={this.getErrorMessage(response?.status)}
+            csFailureText={this.getErrorMessage(
+              response != null &&
+                typeof response === 'object' &&
+                'status' in response &&
+                typeof response.status === 'number'
+                ? response.status
+                : undefined,
+            )}
             csSuccessText={csSuccessText || intl.formatMessage(messages.csSuccessText)}
             uploadedImage={uploadedImage}
             onClear={(event) => this.handleOnClear(event)}
@@ -366,77 +434,4 @@ class Upload extends Component {
   }
 }
 
-Upload.propTypes = {
-  animationDelay: PropTypes.number,
-  csButtonText: PropTypes.string,
-  csFailureText: PropTypes.string,
-  csSuccessText: PropTypes.string,
-  csTooLargeMessage: PropTypes.string,
-  csWrongTypeMessage: PropTypes.string,
-  httpOptions: PropTypes.shape({
-    url: PropTypes.string.isRequired,
-    method: PropTypes.oneOf(['POST', 'PUT', 'PATCH']),
-    fileInputName: PropTypes.string,
-    data: PropTypes.object,
-    headers: PropTypes.object,
-  }),
-  /**
-   * You can provide a fetcher function with the same interface as the global fetch function, which is used by default.
-   * function fetcher(input: RequestInfo, init?: RequestInit): Promise<Response>
-   */
-  fetcher: PropTypes.func,
-  maxSize: PropTypes.number,
-  onCancel: PropTypes.func,
-  onFailure: PropTypes.func,
-  onStart: PropTypes.func,
-  onSuccess: PropTypes.func,
-  psButtonText: PropTypes.string,
-  psButtonDisabled: PropTypes.bool,
-  psProcessingText: PropTypes.string,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  /**
-   * You can provide multiple rules separated by comma, e.g.: "application/pdf,image/*".
-   * Using "*" will allow every file type to be uploaded.
-   */
-  usAccept: PropTypes.string,
-  usButtonText: PropTypes.string,
-  usDisabled: PropTypes.bool,
-  usDropMessage: PropTypes.string,
-  usHelpImage: PropTypes.node,
-  usLabel: PropTypes.string,
-  usPlaceholder: PropTypes.string,
-  uploadStep: PropTypes.oneOf(['uploadImageStep', 'mediaUploadStep']),
-};
-
-Upload.defaultProps = {
-  animationDelay: 700,
-  csButtonText: undefined,
-  csFailureText: undefined,
-  csSuccessText: undefined,
-  csTooLargeMessage: undefined,
-  csWrongTypeMessage: undefined,
-  httpOptions: null,
-  maxSize: MAX_SIZE_DEFAULT,
-  onCancel: null,
-  onFailure: null,
-  onStart: null,
-  onSuccess: null,
-  psButtonText: undefined,
-  psButtonDisabled: false,
-  psProcessingText: undefined,
-  size: 'md',
-  usAccept: 'image/*',
-  usButtonText: undefined,
-  usDisabled: false,
-  usDropMessage: undefined,
-  usHelpImage: '',
-  usLabel: '',
-  usPlaceholder: undefined,
-  uploadStep: UploadStep.UPLOAD_IMAGE_STEP,
-};
-
-// this export is necessary for react-to-typescript-definitions
-// to be able to properly generate TS types, this is due to us wrapping this component in `injectIntl` before exporting
-export { Upload };
-
 export default injectIntl(Upload);

package/src/upload/index.ts

@@ -0,0 +1,2 @@
+export { default, UploadStep } from './Upload';
+export type { UploadProps } from './Upload';

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

@@ -1,8 +1,9 @@
-import { AlertCircle as AlertCircleIcon, Document as DocumentIcon } from '@transferwise/icons';
+import { Document as DocumentIcon } from '@transferwise/icons';
 import { shallow } from 'enzyme';
 
 import Body from '../../../body';
 import Button from '../../../button';
+import StatusIcon from '../../../statusIcon/StatusIcon';
 
 import CompleteStep from '.';
 
@@ -44,7 +45,7 @@ describe('CompleteStep', () => {
     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(AlertCircleIcon)).toHaveLength(1);
+      expect(component.find(StatusIcon)).toHaveLength(1);
     });
   });
 

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

@@ -0,0 +1,74 @@
+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>;
+}
+
+export default function CompleteStep({
+  csButtonText,
+  csFailureText,
+  csSuccessText,
+  fileName,
+  isComplete,
+  isError,
+  isImage,
+  onClear,
+  uploadedImage,
+}: CompleteStepProps) {
+  return (
+    <div className="droppable-complete-card droppable-card" aria-hidden={!isComplete}>
+      <div className="droppable-card-content">
+        <div
+          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 " />
+              ) : (
+                <DocumentIcon />
+              )}
+
+              {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}>
+            {csButtonText}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/upload/steps/completeStep/index.ts

@@ -0,0 +1,2 @@
+export { default } from './completeStep';
+export type { CompleteStepProps } from './completeStep';

package/src/upload/steps/{index.js → index.ts}

@@ -1,4 +1,3 @@
 export { default as UploadImageStep } from './uploadImageStep';
-export { default as MediaUploadStep } from './mediaUploadStep';
 export { default as ProcessingStep } from './processingStep';
 export { default as CompleteStep } from './completeStep';

package/src/upload/steps/processingStep/index.ts

@@ -0,0 +1,2 @@
+export { default } from './processingStep';
+export type { ProcessingStepProps } from './processingStep';