@transferwise/components 45.12.0 → 45.13.0

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

@@ -0,0 +1,109 @@
+import { postData } from '.';
+
+const HTTPOPTIONS = { url: 'a-url' };
+const DATA = 'some-data';
+
+describe('postData', () => {
+  afterEach(() => {
+    global.fetch.mockClear();
+  });
+
+  it('should work with resolve', async () => {
+    const RESOLVE_RESPONSE = { ok: true, someOtherStuff: 'someOtherStuff' };
+    jest.spyOn(global, 'fetch').mockImplementation(() => Promise.resolve(RESOLVE_RESPONSE));
+
+    expect.assertions(1);
+
+    await expect(postData(HTTPOPTIONS, DATA)).resolves.toStrictEqual(RESOLVE_RESPONSE);
+  });
+
+  it('should throw when call fails', async () => {
+    const REJECT_RESPONSE = { status: '500', statusText: 'Rejected' };
+    jest.spyOn(global, 'fetch').mockImplementation(() => Promise.reject(REJECT_RESPONSE));
+
+    expect.assertions(1);
+    await expect(postData(HTTPOPTIONS, DATA)).rejects.toStrictEqual(REJECT_RESPONSE);
+  });
+
+  it('should throw an Error when API returns an error code', async () => {
+    expect.assertions(1);
+
+    const ERROR_RESPONSE = { status: '500', statusText: 'Internal server error', ok: false };
+    jest.spyOn(global, 'fetch').mockImplementation(() => Promise.resolve(ERROR_RESPONSE));
+
+    await expect(postData(HTTPOPTIONS, DATA)).rejects.toStrictEqual(expect.any(Error));
+  });
+
+  it('should include the full response in the Error thrown', async () => {
+    expect.assertions(1);
+
+    const ERROR_RESPONSE = { status: '500', statusText: 'Internal server error', ok: false };
+    jest.spyOn(global, 'fetch').mockImplementation(() => Promise.resolve(ERROR_RESPONSE));
+
+    try {
+      await postData(HTTPOPTIONS, DATA);
+    } catch (error) {
+      expect(error.response).toStrictEqual(ERROR_RESPONSE);
+    }
+  });
+
+  it('should pass additional form data to request body', () => {
+    const data = { file: 'file', profileId: '1' };
+    const mockFetch = jest.fn(() => Promise.resolve({ ok: true }));
+    global.fetch = mockFetch;
+
+    postData(HTTPOPTIONS, data);
+
+    expect(mockFetch.mock.calls[0][1].body).toStrictEqual(data);
+  });
+
+  it('should override `Content-type` and add any custom headers to the request', () => {
+    const CUSTOM_CONTENT_TYPE = 'foo';
+    const CUSTOM_LANGUAGE = 'hu';
+
+    const mockFetch = jest.fn(() => Promise.resolve({ ok: true }));
+    global.fetch = mockFetch;
+
+    postData(
+      {
+        ...HTTPOPTIONS,
+        headers: { 'Content-type': CUSTOM_CONTENT_TYPE, 'Accept-language': CUSTOM_LANGUAGE },
+      },
+      DATA,
+    );
+
+    expect(mockFetch.mock.calls[0][1].headers['Content-type']).toStrictEqual(CUSTOM_CONTENT_TYPE);
+    expect(mockFetch.mock.calls[0][1].headers['Accept-language']).toStrictEqual(CUSTOM_LANGUAGE);
+  });
+
+  it('should set method to `POST` by default', () => {
+    const mockFetch = jest.fn(() => Promise.resolve({ ok: true }));
+    global.fetch = mockFetch;
+
+    postData(HTTPOPTIONS, DATA);
+
+    expect(mockFetch.mock.calls[0][1].method).toStrictEqual('POST');
+  });
+
+  it('should not set `Content-type` by default', () => {
+    const mockFetch = jest.fn(() => Promise.resolve({ ok: true }));
+    global.fetch = mockFetch;
+
+    postData(HTTPOPTIONS, DATA);
+
+    expect(mockFetch.mock.calls[0][1]['Content-type']).toBeUndefined();
+  });
+
+  describe('when passed a fetcher as third argument', () => {
+    it('should call that instead of global.fetch', () => {
+      const RESOLVE_RESPONSE = new Response('', { status: 200 });
+
+      const fetcher = jest.fn(async () => RESOLVE_RESPONSE);
+
+      postData(HTTPOPTIONS, DATA, fetcher);
+
+      expect(global.fetch).not.toHaveBeenCalled();
+      expect(fetcher).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/upload/utils/requestMedia/index.js

@@ -0,0 +1 @@
+export { requestMedia } from './requestMedia';

package/src/upload/utils/requestMedia/requestMedia.js

@@ -0,0 +1,26 @@
+export const requestMedia = (mediaRequest) =>
+  new Promise((resolve, reject) => {
+    if (typeof window === 'undefined' || typeof window.microapps === 'undefined') {
+      reject(`microapps must be available in window to use Spot Platform's Media API`);
+    }
+
+    window.microapps
+      .requestMedia(mediaRequest)
+      .then((response) => {
+        const fileByteArray = base64ToByteArray(response.bytes);
+        const blob = new Blob([fileByteArray], { type: response.mimeType });
+        resolve(blob);
+      })
+      .catch((error) => reject(error));
+  });
+
+const base64ToByteArray = (base64String) => {
+  const byteCharacters = atob(base64String);
+  const byteCharactersLength = byteCharacters.length;
+  const byteArray = new Array(byteCharactersLength);
+
+  for (let i = 0; i < byteCharactersLength; i += 1) {
+    byteArray[i] = byteCharacters.charCodeAt(i);
+  }
+  return new Uint8Array(byteArray);
+};

package/src/upload/utils/requestMedia/requestMedia.spec.js

@@ -0,0 +1,44 @@
+import { requestMedia } from '.';
+
+const mediaRequest = { allowedMimeTypes: ['images/jpeg'] };
+
+describe('requestMedia', () => {
+  describe('when microapps is not available in windows', () => {
+    it('rejects with an error', () => {
+      expect.assertions(1);
+      return requestMedia(mediaRequest).catch((error) =>
+        expect(error).toStrictEqual(
+          `microapps must be available in window to use Spot Platform's Media API`,
+        ),
+      );
+    });
+  });
+
+  describe('when microapps is available in windows', () => {
+    const originalMicroApps = window.microapps;
+    const image64 = {
+      bytes:
+        'iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEX/AAAZ4gk3AAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC',
+      mimeType: 'image/jpeg',
+    };
+    const microappsRequestMedia = jest.fn().mockImplementation(() => Promise.resolve(image64));
+
+    beforeAll(() => {
+      window.microapps = { requestMedia: microappsRequestMedia };
+    });
+
+    afterAll(() => {
+      window.microapps = originalMicroApps;
+    });
+
+    it(`calls microapps' requestMedia API when it's available in windows`, () => {
+      requestMedia(mediaRequest);
+      expect(microappsRequestMedia).toHaveBeenCalledWith(mediaRequest);
+    });
+
+    it('resolves with a blob file on success', () => {
+      expect.assertions(1);
+      return requestMedia(mediaRequest).then((file) => expect(file instanceof Blob).toBe(true));
+    });
+  });
+});

package/src/uploadInput/UploadInput.css

@@ -0,0 +1 @@
+.np-upload-input{border:1px solid #c9cbce;border:1px solid var(--color-interactive-secondary);border-radius:10px;border-radius:var(--radius-small)}.np-upload-input:has(:focus-visible){outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-upload-input.form-control{height:auto;padding:initial}.np-theme-personal .np-upload-input{border-radius:10px;border-radius:var(--radius-small);min-height:78px}.np-theme-personal .np-upload-input.disabled .btn{cursor:inherit}.np-theme-personal .np-upload-input .np-upload-button{border-radius:9px;border-radius:calc(var(--radius-small) - 1px);padding:16px;padding:var(--padding-small)}.np-theme-personal .np-upload-input .np-upload-input--square-top{border-top-left-radius:0;border-top-right-radius:0}.np-theme-personal .np-upload-input .np-upload-item__remove-button{border-radius:unset}.np-theme-personal .np-upload-input .np-upload-icon{color:var(--color-interactive-primary)}.np-theme-personal .np-upload-input .media-body{color:var(--color-content-link);white-space:break-spaces}.np-theme-personal .np-upload-input .media-body .np-text-body-large-bold{text-decoration:underline;text-underline-offset:.3em}.np-theme-personal .np-upload-input .media-body .np-text-body-default,.np-theme-personal .np-upload-input .media-body .np-upload-description,.np-theme-personal .np-upload-input .media-body .text-positive{color:#5d7079!important;color:var(--color-content-secondary)!important}.np-theme-personal .np-upload-input .media-body .text-negative{color:var(--color-sentiment-negative)!important}.np-theme-personal .np-upload-input .status-circle{height:24px;height:var(--size-x-small);width:24px;width:var(--size-x-small)}

package/src/uploadInput/UploadInput.less

@@ -0,0 +1,71 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_links.less";
+@import (reference) './uploadItem/UploadItem.less';
+
+.np-upload-input {
+  border: 1px solid var(--color-interactive-secondary);
+  border-radius: var(--radius-small);
+
+  &:has(:focus-visible) {
+    .ring();
+  }
+
+  &.form-control {
+    height: auto;
+    padding: initial;
+  }
+}
+
+.np-theme-personal {
+  .np-upload-input {
+    border-radius: var(--radius-small);
+    min-height: 78px;
+
+    &.disabled .btn {
+      cursor: inherit;
+    }
+
+    .np-upload-button {
+      border-radius: @small-border-minus-one;
+      padding: var(--padding-small);
+    }
+
+    .np-upload-input--square-top {
+      border-top-right-radius: 0px;
+      border-top-left-radius: 0px;
+    }
+
+    .np-upload-item__remove-button {
+      border-radius: unset;
+    }
+
+    .np-upload-icon {
+      color: var(--color-interactive-primary);
+    }
+
+    .media-body {
+      color: var(--color-content-link);
+      white-space: break-spaces;
+
+      .np-text-body-large-bold {
+        text-decoration: underline;
+        .link-underline();
+      }
+
+      .np-text-body-default,
+      .np-upload-description,
+      .text-positive {
+        color: var(--color-content-secondary) !important;
+      }
+
+      .text-negative {
+        color: var(--color-sentiment-negative) !important;
+      }
+    }
+
+    .status-circle {
+      width: var(--size-x-small);
+      height: var(--size-x-small);
+    }
+  }
+}

package/src/uploadInput/UploadInput.messages.ts

@@ -0,0 +1,41 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  fileIsTooLarge: {
+    id: 'neptune.UploadInput.fileIsTooLarge',
+    defaultMessage: 'File is too large',
+    description: 'Error message when the selected file size exceeds the limit',
+  },
+  fileTypeNotSupported: {
+    id: 'neptune.UploadInput.fileTypeNotSupported',
+    defaultMessage: 'File type not supported',
+    description: 'Error message when the selected file is not one of the supported types',
+  },
+  deleteModalTitle: {
+    id: 'neptune.UploadInput.deleteModalTitle',
+    defaultMessage: 'Sure you want to remove this file?',
+    description: 'Title to display on delete confirmation modal',
+  },
+  deleteModalBody: {
+    id: 'neptune.UploadInput.deleteModalBody',
+    defaultMessage: 'Removing this file will delete it from our system.',
+    description: 'Body copy to display on delete confirmation modal',
+  },
+  deleteModalCancelButtonText: {
+    id: 'neptune.UploadInput.deleteModalCancelButtonText',
+    defaultMessage: 'Cancel',
+    description: 'Cancel button text to display on delete confirmation modal',
+  },
+  deleteModalConfirmButtonText: {
+    id: 'neptune.UploadInput.deleteModalConfirmButtonText',
+    defaultMessage: 'Remove',
+    description: 'Confirm button text to display on delete confirmation modal',
+  },
+  maximumFilesAlreadyUploaded: {
+    id: 'neptune.UploadInput.maximumFilesAlreadyUploaded',
+    defaultMessage:
+      'Sorry, this upload failed because we can only accept {maxFilesAllowed} files at once.',
+    description:
+      'When number of files to be uploaded is restricted, this message is displayed below the files that are extra',
+  },
+});

package/src/uploadInput/UploadInput.spec.tsx

@@ -0,0 +1,314 @@
+import { within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Status } from '../common';
+import { render, screen, waitFor, waitForElementToBeRemoved } from '../test-utils';
+
+import UploadInput, { UploadInputProps } from './UploadInput';
+import { TEST_IDS as UPLOAD_BUTTON_TEST_IDS } from './uploadButton/UploadButton';
+import { TEST_IDS as UPLOAD_ITEM_TEST_IDS } from './uploadItem/UploadItem';
+
+const spiedDateObject = jest.spyOn(global, 'Date');
+
+describe('UploadInput', () => {
+  const pngFile = new File(['foo'], 'foo.png', { type: 'image/png' });
+  const jpgFile = new File(['foo'], 'foo.jpg', { type: 'image/jpeg' });
+
+  const files = [
+    {
+      id: 1,
+      filename: 'purchase-receipt.pdf',
+      status: Status.SUCCEEDED,
+    },
+    {
+      id: 2,
+      filename: 'CoWork-0317-invoice.pdf',
+      status: Status.PROCESSING,
+    },
+  ];
+
+  const props: UploadInputProps = {
+    onUploadFile: jest
+      .fn()
+      .mockResolvedValue({ id: 1 })
+      .mockResolvedValueOnce({ id: 2 })
+      .mockResolvedValueOnce({ id: 3 }),
+    onDeleteFile: jest.fn().mockResolvedValue({}),
+  };
+
+  const renderComponent = (customProps: UploadInputProps = props) =>
+    render(<UploadInput {...customProps} />);
+
+  beforeEach(() => {
+    (spiedDateObject as jest.Mock).mockImplementation(() => ({
+      getTime: jest.fn().mockReturnValue(Math.random()),
+    }));
+  });
+
+  afterAll(() => {
+    (spiedDateObject as jest.Mock).mockRestore();
+  });
+
+  describe('single file upload', () => {
+    it('should trigger onUploadFiles & onFilesChange with a single FormData entry containing `file` field', async () => {
+      const mockTimeStampValue1 = '11111111';
+      const mockTimeStampValue2 = '22222222';
+      (spiedDateObject as jest.Mock).mockImplementation(() => ({
+        getTime: jest
+          .fn()
+          .mockReturnValueOnce(mockTimeStampValue1)
+          .mockReturnValueOnce(mockTimeStampValue2),
+      }));
+
+      const onFilesChange = jest.fn();
+      renderComponent({ ...props, onFilesChange });
+
+      const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
+      userEvent.upload(input, [pngFile, jpgFile]);
+
+      await waitFor(() => {
+        expect(props.onUploadFile).toHaveBeenCalledTimes(1);
+      });
+
+      expect(onFilesChange).toHaveBeenCalledTimes(2);
+      expect(onFilesChange).toHaveBeenNthCalledWith(1, [
+        {
+          filename: 'foo.png',
+          id: `foo.png_3_${mockTimeStampValue1}`,
+          status: 'pending',
+          url: undefined,
+        },
+      ]);
+
+      expect(onFilesChange).toHaveBeenNthCalledWith(2, [
+        {
+          filename: 'foo.png',
+          id: 2,
+          status: 'succeeded',
+          url: undefined,
+        },
+      ]);
+    });
+
+    it('should render only one file even if multiple ones were supplied', () => {
+      renderComponent({ ...props, files });
+
+      expect(screen.getByText(files[0].filename)).toBeInTheDocument();
+      files.slice(1, files.length).forEach((file) => {
+        expect(screen.queryByText(file.filename)).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('multiple file upload', () => {
+    it('should render all files', () => {
+      renderComponent({ ...props, files, multiple: true });
+
+      files.forEach((file) => {
+        expect(screen.getByText(file.filename)).toBeInTheDocument();
+      });
+    });
+
+    it('should render the UploadButton also', () => {
+      renderComponent({ ...props, files, multiple: true });
+
+      expect(screen.getByText('Upload files')).toBeInTheDocument();
+    });
+
+    it('should trigger onUploadFile with multiple FormData entries containing `file` fields', async () => {
+      renderComponent({ ...props, multiple: true });
+
+      (props.onUploadFile as jest.Mock).mockClear();
+
+      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 waitFor(() => {
+        expect(props.onUploadFile).toHaveBeenCalledTimes(2);
+      });
+    });
+  });
+
+  describe('file deletion', () => {
+    const onFilesChange = jest.fn();
+
+    beforeEach(() => {
+      onFilesChange.mockClear();
+    });
+
+    it('should delete file with modal confirmation', async () => {
+      renderComponent({
+        ...props,
+        files,
+        multiple: true,
+        onFilesChange,
+      });
+
+      const fileToDelete = screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];
+      within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
+      screen.getByText('Remove').click();
+
+      await waitForElementToBeRemoved(fileToDelete);
+      expect(props.onDeleteFile).toHaveBeenCalledWith(files[0].id);
+
+      expect(onFilesChange).toHaveBeenCalledTimes(2);
+      expect(onFilesChange).toHaveBeenNthCalledWith(1, [
+        {
+          error: undefined,
+          filename: 'purchase-receipt.pdf',
+          id: 1,
+          status: 'processing',
+        },
+        {
+          filename: 'CoWork-0317-invoice.pdf',
+          id: 2,
+          status: 'processing',
+        },
+      ]);
+
+      expect(onFilesChange).toHaveBeenLastCalledWith([
+        {
+          filename: 'CoWork-0317-invoice.pdf',
+          id: 2,
+          status: 'processing',
+        },
+      ]);
+    });
+
+    it('should delete file with failed state without modal confirmation', () => {
+      const files = [
+        {
+          id: 1,
+          filename: 'purchase-receipt.pdf',
+          status: Status.FAILED,
+        },
+      ];
+
+      renderComponent({
+        ...props,
+        files,
+        multiple: true,
+        onFilesChange,
+      });
+
+      const fileToDelete = screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];
+      within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
+
+      expect(fileToDelete).not.toBeInTheDocument();
+
+      expect(onFilesChange).toHaveBeenCalledTimes(1);
+      expect(onFilesChange).toHaveBeenCalledWith([]);
+    });
+
+    it('should not render delete button when no delete callback is provided', () => {
+      renderComponent({
+        ...props,
+        files,
+        multiple: true,
+        onDeleteFile: undefined,
+      });
+
+      expect(screen.queryByLabelText('Remove file ', { exact: false })).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Max File Upload limit', () => {
+    it('should show max file number in the description next to the upload button', async () => {
+      renderComponent({
+        ...props,
+        multiple: true,
+        maxFiles: 2,
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText(/Maximum 2 files\./)).toBeInTheDocument();
+      });
+    });
+
+    it('should show given error when maxFiles limit is applied and more files are uploaded', async () => {
+      const maxFilesReachedMessage = 'Maximum files message from prop';
+      const mockOnUploadFileFn = jest.fn();
+      renderComponent({
+        ...props,
+        multiple: true,
+        maxFiles: 3,
+        maxFilesErrorMessage: maxFilesReachedMessage,
+        onUploadFile: mockOnUploadFileFn,
+      });
+
+      mockOnUploadFileFn.mockImplementation((formData: FormData) => {
+        const file = formData.get('file');
+        return Promise.resolve({ file, id: Math.random() });
+      });
+
+      const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
+      userEvent.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 waitFor(() => {
+        expect(screen.getByText(maxFilesReachedMessage)).toBeInTheDocument();
+      });
+    });
+
+    it('should show default error when maxFiles limit exceeds and no error message provided', async () => {
+      const defaultMaxFilesReachedMessage =
+        'Sorry, this upload failed because we can only accept 2 files at once.';
+      const mockOnUploadFileFn = jest.fn();
+      renderComponent({
+        ...props,
+        multiple: true,
+        maxFiles: 2,
+        onUploadFile: mockOnUploadFileFn,
+      });
+
+      mockOnUploadFileFn.mockImplementation((formData: FormData) => {
+        const file = formData.get('file');
+        return Promise.resolve({ file, id: Math.random() });
+      });
+
+      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 waitFor(() => {
+        expect(screen.getByText(defaultMaxFilesReachedMessage)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Misc', () => {
+    it('should attach the input id accepted from props to the input components', () => {
+      const inputId = 'testInputId';
+      const labelText = 'LabelText';
+      render(
+        <>
+          <label htmlFor={inputId}>{labelText}</label>
+          <UploadInput {...props} id={inputId} />
+        </>,
+      );
+      expect(screen.getByLabelText(labelText)).toHaveAttribute('id', inputId);
+    });
+
+    it('should show the file size error when provided in props', async () => {
+      const bytesInaKb = 1024;
+      const twoKbInBytes = 2 * bytesInaKb;
+
+      const sizeLimitErrorMessage = 'file oversized';
+      renderComponent({ ...props, sizeLimit: 1, sizeLimitErrorMessage });
+      const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
+      const overSizedFile = new File([''], 'testFile.png', { type: 'image/png' });
+      Object.defineProperty(overSizedFile, 'size', { value: twoKbInBytes });
+
+      userEvent.upload(input, [overSizedFile]);
+      await waitFor(() => {
+        expect(screen.getByText(sizeLimitErrorMessage)).toBeInTheDocument();
+      });
+    });
+  });
+});