@transferwise/components 46.38.0 → 46.40.0

package/src/upload/steps/processingStep/processingStep.tsx

@@ -0,0 +1,53 @@
+import Button from '../../../button';
+import { Status, Typography } from '../../../common';
+import ProcessIndicator, { ProcessIndicatorStatus } from '../../../processIndicator';
+import Title from '../../../title';
+
+export interface ProcessingStepProps {
+  isComplete: boolean;
+  isError: boolean;
+  isSuccess: boolean;
+  onAnimationCompleted: (status: ProcessIndicatorStatus) => void;
+  onClear: React.MouseEventHandler<HTMLButtonElement>;
+  psButtonText: string;
+  psProcessingText: string;
+  psButtonDisabled: boolean;
+}
+
+export default function ProcessingStep({
+  isComplete,
+  isError,
+  isSuccess,
+  onAnimationCompleted,
+  onClear,
+  psButtonText,
+  psProcessingText,
+  psButtonDisabled,
+}: ProcessingStepProps) {
+  let processStatus = Status.PROCESSING;
+  if (isError) {
+    processStatus = Status.FAILED;
+  }
+  if (isSuccess) {
+    processStatus = Status.SUCCEEDED;
+  }
+
+  return (
+    <div className="droppable-processing-card droppable-card" aria-hidden={isComplete}>
+      <div className="droppable-card-content">
+        <ProcessIndicator
+          status={processStatus}
+          onAnimationCompleted={(status) => onAnimationCompleted(status)}
+        />
+        <Title className="m-y-2" type={Typography.TITLE_BODY} aria-live="polite">
+          {psProcessingText}
+        </Title>
+        {psButtonText && (
+          <Button disabled={psButtonDisabled} onClick={onClear}>
+            {psButtonText}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

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

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

package/src/upload/steps/uploadImageStep/{uploadImageStep.js → uploadImageStep.tsx}

@@ -1,17 +1,24 @@
 import { Upload as UploadIcon } from '@transferwise/icons';
-import PropTypes from 'prop-types';
 import { createRef, PureComponent } from 'react';
 
-class UploadImageStep extends PureComponent {
-  constructor() {
-    super();
-    this.uploadInputRef = createRef();
-  }
+export interface UploadImageStepProps {
+  fileDropped: (file: File) => void;
+  isComplete: boolean;
+  usAccept: string;
+  usButtonText: string;
+  usDisabled: boolean;
+  usHelpImage: React.ReactNode;
+  usLabel: string;
+  usPlaceholder: string;
+}
+
+export default class UploadImageStep extends PureComponent<UploadImageStepProps> {
+  uploadInputRef = createRef<HTMLInputElement>();
 
   onManualUpload = () => {
     const { fileDropped } = this.props;
-    if (this.uploadInputRef && this.uploadInputRef.current) {
-      const file = this.uploadInputRef.current.files[0];
+    const file = this.uploadInputRef.current?.files?.[0];
+    if (file != null) {
       fileDropped(file);
     }
   };
@@ -43,7 +50,7 @@ class UploadImageStep extends PureComponent {
           <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">{`${usPlaceholder}`}</p>}
+            {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>
@@ -53,7 +60,7 @@ class UploadImageStep extends PureComponent {
               <input
                 ref={this.uploadInputRef}
                 type="file"
-                accept={usAccept === '*' ? null : usAccept}
+                accept={usAccept === '*' ? undefined : usAccept}
                 className="tw-droppable-input hidden"
                 disabled={usDisabled}
                 name="file-upload"
@@ -66,16 +73,3 @@ class UploadImageStep extends PureComponent {
     );
   }
 }
-
-UploadImageStep.propTypes = {
-  fileDropped: PropTypes.func.isRequired,
-  isComplete: PropTypes.bool.isRequired,
-  usAccept: PropTypes.string.isRequired,
-  usButtonText: PropTypes.string.isRequired,
-  usDisabled: PropTypes.bool.isRequired,
-  usHelpImage: PropTypes.node.isRequired,
-  usLabel: PropTypes.string.isRequired,
-  usPlaceholder: PropTypes.string.isRequired,
-};
-
-export default UploadImageStep;

package/src/upload/utils/asyncFileRead/asyncFileRead.spec.ts

@@ -0,0 +1,14 @@
+import { asyncFileRead } from '.';
+
+describe('asyncFileRead', () => {
+  it('should resolve with data64', async () => {
+    const file = new Blob(['foo'], { type: 'text/plain' });
+    await expect(asyncFileRead(file)).resolves.toBe('data:text/plain;base64,Zm9v');
+  });
+
+  it('should reject if  wrong file is given', async () => {
+    const file = 'Not a blob';
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument
+    await expect(asyncFileRead(file as any)).rejects.toThrow();
+  });
+});

package/src/upload/utils/asyncFileRead/asyncFileRead.ts

@@ -0,0 +1,12 @@
+export async function asyncFileRead(file: Blob) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => {
+      resolve(reader.result as string);
+    });
+    reader.addEventListener('error', () => {
+      reject(reader.error ?? new Error('Cannot read file'));
+    });
+    reader.readAsDataURL(file);
+  });
+}

package/src/upload/utils/getFileType/getFileType.spec.ts

@@ -0,0 +1,22 @@
+import { getFileType } from '.';
+
+const imageFile = new Blob(undefined, { type: 'image/png' });
+
+const data64Img = 'data:image/png;something';
+
+describe('getFileType', () => {
+  describe('returns empty string', () => {
+    it(`when file has empty type and file64 hasn't been provided`, () => {
+      expect(getFileType(new Blob())).toBe('');
+    });
+  });
+
+  describe('returns file-type', () => {
+    it('when file has type defined', () => {
+      expect(getFileType(imageFile)).toBe(imageFile.type);
+    });
+    it('when file has no type and file64 is supported', () => {
+      expect(getFileType(new Blob(), data64Img)).toBe('image/png');
+    });
+  });
+});

package/src/upload/utils/getFileType/getFileType.ts

@@ -0,0 +1,16 @@
+export function getFileType(file: Blob, file64?: string) {
+  if (file.type) {
+    return file.type;
+  }
+
+  if (file64) {
+    const regex = /^data:([a-z]+\/[a-z]+);/;
+    const typeFromEncoded = regex.exec(file64);
+
+    if (typeFromEncoded?.[1]) {
+      return typeFromEncoded[1];
+    }
+  }
+
+  return '';
+}

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

@@ -3,5 +3,3 @@ export { asyncFileRead } from './asyncFileRead';
 export { isSizeValid } from './isSizeValid';
 export { isTypeValid } from './isTypeValid';
 export { getFileType } from './getFileType';
-export { getSupportedSpotMimeTypes } from './getSupportedSpotMimeTypes';
-export { requestMedia } from './requestMedia';

package/src/upload/utils/isSizeValid/{isSizeValid.spec.js → isSizeValid.spec.ts}

@@ -4,14 +4,14 @@ const MAXSIZE = 5000;
 
 describe('isSizeValid', () => {
   it('should return true for valid size', () => {
-    expect(isSizeValid({ size: MAXSIZE }, MAXSIZE)).toBe(true);
+    expect(isSizeValid(new Blob([new ArrayBuffer(MAXSIZE)]), MAXSIZE)).toBe(true);
   });
 
   it('should return false for valid size', () => {
-    expect(isSizeValid({ size: MAXSIZE + 1 }, MAXSIZE)).toBe(false);
+    expect(isSizeValid(new Blob([new ArrayBuffer(MAXSIZE + 1)]), MAXSIZE)).toBe(false);
   });
 
   it('should return false for invalid MaxSize', () => {
-    expect(isSizeValid({ size: MAXSIZE }, MAXSIZE - 0.5)).toBe(false);
+    expect(isSizeValid(new Blob([new ArrayBuffer(MAXSIZE)]), MAXSIZE - 0.5)).toBe(false);
   });
 });

package/src/upload/utils/isSizeValid/isSizeValid.ts

@@ -0,0 +1,3 @@
+export function isSizeValid(file: Blob, maxSize: number) {
+  return Number.isInteger(maxSize) && file.size <= maxSize;
+}

package/src/upload/utils/isTypeValid/isTypeValid.spec.ts

@@ -0,0 +1,62 @@
+import { isTypeValid } from '.';
+
+const pdfFile = new Blob(undefined, {
+  type: 'application/pdf',
+});
+
+const pngFile = new Blob(undefined, {
+  type: 'image/png',
+});
+
+const data64Img = 'data:image/png;something';
+
+describe('isTypeValid', () => {
+  describe('when type is provided', () => {
+    it.each([pdfFile, pngFile])('returns true for wildcard rule %s', (file) => {
+      expect(isTypeValid(file, '*')).toBe(true);
+    });
+
+    it('returns true for matching type', () => {
+      expect(isTypeValid(pdfFile, 'application/*')).toBe(true);
+    });
+
+    it('returns true for matching type when multiple rules provided', () => {
+      expect(isTypeValid(pdfFile, 'application/*, image/*')).toBe(true);
+    });
+
+    it('returns true for matching subtype', () => {
+      expect(isTypeValid(pdfFile, 'application/pdf')).toBe(true);
+    });
+
+    it('returns true for matching subtype when multiple rules provided', () => {
+      expect(isTypeValid(pngFile, 'application/xls, image/png')).toBe(true);
+    });
+
+    it('can parse multiple types with extra whitespace', () => {
+      expect(isTypeValid(pngFile, ' application/xls,  image/png ')).toBe(true);
+    });
+
+    it('returns false for unsupported type', () => {
+      expect(isTypeValid(pngFile, 'application/*')).toBe(false);
+    });
+
+    it('returns false for unsupported subtype', () => {
+      expect(isTypeValid(pdfFile, 'application/xls')).toBe(false);
+    });
+
+    it('returns false for unsupported subtype when multiple rules provided', () => {
+      expect(isTypeValid(pngFile, 'application/xls, image/jpeg')).toBe(false);
+    });
+  });
+  describe('when type is not provided', () => {
+    it('returns true for supported file', () => {
+      expect(isTypeValid(new Blob(), 'image/png', data64Img)).toBe(true);
+      expect(isTypeValid(new Blob(), 'image/*', data64Img)).toBe(true);
+    });
+
+    it('returns false for unsupported file', () => {
+      expect(isTypeValid(new Blob(), 'image/jpeg', data64Img)).toBe(false);
+      expect(isTypeValid(new Blob(), 'application/*', data64Img)).toBe(false);
+    });
+  });
+});

package/src/upload/utils/isTypeValid/isTypeValid.ts

@@ -0,0 +1,19 @@
+import { getFileType } from '../getFileType';
+
+export function isTypeValid(file: Blob, rule: string, file64?: string) {
+  if (!rule) {
+    return false;
+  }
+
+  const allowedTypes = rule.replace(/\s/g, '').split(',');
+  const fileType = getFileType(file, file64);
+
+  if (rule === '*' || allowedTypes.includes(fileType)) {
+    return true;
+  }
+
+  return allowedTypes.some((type) => {
+    const [typeAllowed, extensionAllowed] = type.split('/');
+    return extensionAllowed === '*' && fileType.includes(typeAllowed);
+  });
+}

package/src/upload/utils/postData/postData.spec.ts

@@ -0,0 +1,65 @@
+import { postData } from '.';
+import { ResponseError } from './postData';
+
+const HTTPOPTIONS = { url: 'a-url' };
+const DATA = 'some-data';
+
+describe('postData', () => {
+  afterEach(() => {
+    (global.fetch as jest.Mock).mockClear();
+  });
+
+  it('should work with resolve', async () => {
+    const RESOLVE_RESPONSE = new Response();
+    jest.spyOn(global, 'fetch').mockImplementation(async () => RESOLVE_RESPONSE);
+
+    await expect(postData(HTTPOPTIONS, DATA)).resolves.toBe(RESOLVE_RESPONSE);
+  });
+
+  it('should throw when call fails', async () => {
+    const REJECT_RESPONSE = new ResponseError(
+      new Response(null, { status: 500, statusText: 'Rejected' }),
+    );
+    jest.spyOn(global, 'fetch').mockImplementation(async () => {
+      throw REJECT_RESPONSE;
+    });
+
+    await expect(postData(HTTPOPTIONS, DATA)).rejects.toThrow(REJECT_RESPONSE);
+  });
+
+  it('should throw an Error when API returns an error code', async () => {
+    const ERROR_RESPONSE = new Response(null, { status: 500, statusText: 'Internal server error' });
+    jest.spyOn(global, 'fetch').mockImplementation(async () => ERROR_RESPONSE);
+
+    await expect(postData(HTTPOPTIONS, DATA)).rejects.toThrow();
+  });
+
+  it('should pass additional form data to request body', async () => {
+    const mockFetch = jest.fn(async () => new Response());
+    jest.spyOn(global, 'fetch').mockImplementation(mockFetch);
+
+    const data = new FormData();
+    data.append('file', 'file');
+    data.append('profileId', '1');
+    await postData(HTTPOPTIONS, data);
+
+    expect(mockFetch).toHaveBeenCalledWith('a-url', { method: 'POST', body: data });
+  });
+
+  it('should override `Content-type` and add any custom headers to the request', async () => {
+    const mockFetch = jest.fn(async () => new Response());
+    jest.spyOn(global, 'fetch').mockImplementation(mockFetch);
+
+    const headers: HeadersInit = {
+      'Content-type': 'foo',
+      'Accept-language': 'hu',
+    };
+    await postData({ ...HTTPOPTIONS, headers }, DATA);
+
+    expect(mockFetch).toHaveBeenCalledWith('a-url', {
+      method: 'POST',
+      headers,
+      body: DATA,
+    });
+  });
+});

package/src/upload/utils/postData/postData.ts

@@ -0,0 +1,36 @@
+export class ResponseError extends Error {
+  response: Response;
+  status: number;
+
+  constructor(response: Response, message?: string) {
+    super(message);
+    this.name = 'ResponseError';
+    this.response = response;
+    this.status = response.status;
+  }
+}
+
+export interface PostDataHTTPOptions extends Omit<RequestInit, 'body'> {
+  url: string;
+  method?: 'POST' | 'PUT' | 'PATCH';
+}
+
+export type PostDataFetcher = (input: string, init: RequestInit) => Promise<Response>;
+
+export async function postData(
+  { url, method = 'POST', ...httpOptions }: PostDataHTTPOptions,
+  data: RequestInit['body'],
+  fetcher: PostDataFetcher = fetch,
+) {
+  const response = await fetcher(url, {
+    method,
+    body: data,
+    ...httpOptions,
+  });
+
+  if (!response.ok) {
+    throw new ResponseError(response, response.statusText);
+  }
+
+  return response;
+}

package/src/uploadInput/UploadInput.spec.tsx

@@ -1,5 +1,5 @@
 import { within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 
 import { Status } from '../common';
 import { mockMatchMedia, render, screen, waitFor, waitForElementToBeRemoved } from '../test-utils';
@@ -9,6 +9,8 @@ import { TEST_IDS as UPLOAD_BUTTON_TEST_IDS } from './uploadButton/UploadButton'
 import { TEST_IDS as UPLOAD_ITEM_TEST_IDS } from './uploadItem/UploadItem';
 import { act } from 'react';
 
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
+
 mockMatchMedia();
 
 describe('UploadInput', () => {
@@ -58,10 +60,7 @@ describe('UploadInput', () => {
       renderComponent({ ...props, onFilesChange });
 
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
-      userEvent.upload(input, [pngFile, jpgFile]);
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
+      await user.upload(input, [pngFile, jpgFile]);
 
       expect(props.onUploadFile).toHaveBeenCalledTimes(1);
       expect(onFilesChange).toHaveBeenCalledTimes(2);
@@ -116,7 +115,7 @@ describe('UploadInput', () => {
       expect(screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput)).toHaveAttribute('multiple');
 
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
-      userEvent.upload(input, [pngFile, jpgFile]);
+      await user.upload(input, [pngFile, jpgFile]);
 
       await waitFor(() => {
         expect(props.onUploadFile).toHaveBeenCalledTimes(2);
@@ -244,11 +243,11 @@ describe('UploadInput', () => {
       });
 
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
-      userEvent.upload(input, [pngFile, jpgFile]);
+      await user.upload(input, [pngFile, jpgFile]);
 
       const pngFile2 = new File(['foo2'], 'foo2.png', { type: 'image/png' });
       const jpgFile2 = new File(['foo2'], 'foo2.jpg', { type: 'image/jpeg' });
-      userEvent.upload(input, [pngFile2, jpgFile2]);
+      await user.upload(input, [pngFile2, jpgFile2]);
 
       await waitFor(() => {
         expect(screen.getByText(maxFilesReachedMessage)).toBeInTheDocument();
@@ -274,7 +273,7 @@ describe('UploadInput', () => {
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
       const pngFile2 = new File(['foo2'], 'foo2.png', { type: 'image/png' });
 
-      userEvent.upload(input, [pngFile, jpgFile, pngFile2]);
+      await user.upload(input, [pngFile, jpgFile, pngFile2]);
 
       await waitFor(() => {
         expect(screen.getByText(defaultMaxFilesReachedMessage)).toBeInTheDocument();
@@ -305,7 +304,7 @@ describe('UploadInput', () => {
       const overSizedFile = new File([''], 'testFile.png', { type: 'image/png' });
       Object.defineProperty(overSizedFile, 'size', { value: twoKbInBytes });
 
-      userEvent.upload(input, [overSizedFile]);
+      await user.upload(input, overSizedFile);
       await waitFor(() => {
         expect(screen.getByText(sizeLimitErrorMessage)).toBeInTheDocument();
       });