@transferwise/components 45.11.0 → 45.13.0

package/src/upload/Upload.spec.js

@@ -0,0 +1,266 @@
+import { shallow, mount } from 'enzyme';
+
+import { ANIMATION_DURATION_IN_MS } from '../processIndicator';
+
+import { CompleteStep, UploadImageStep, MediaUploadStep, ProcessingStep } from './steps';
+
+import Upload from '.';
+
+jest.useFakeTimers();
+jest.mock('./utils/postData', () => ({
+  postData: () => new Promise((resolve) => resolve('ServerResponse')),
+}));
+
+jest.mock('./utils/asyncFileRead');
+const { asyncFileRead } = require('./utils/asyncFileRead');
+
+const defaultLocale = 'en-GB';
+jest.mock('react-intl', () => ({
+  injectIntl: (Component) =>
+    function (props) {
+      return (
+        <Component {...props} intl={{ locale: defaultLocale, formatMessage: (id) => `${id}` }} />
+      );
+    },
+  defineMessages: (translations) => translations,
+}));
+
+const TEST_FILE = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' });
+const ANIMATION_DELAY = ANIMATION_DURATION_IN_MS * 2;
+
+const props = {
+  animationDelay: 1000,
+  csButtonText: 'csButtonText',
+  csFailureText: 'csFailureText',
+  csSuccessText: 'csSuccessText',
+  csTooLargeMessage: 'csTooLargeMessage',
+  maxSize: 5000000,
+  onCancel: jest.fn(),
+  onChange: jest.fn(),
+  onFailure: jest.fn(),
+  onStart: jest.fn(),
+  onSuccess: jest.fn(),
+  psButtonText: 'psButtonText',
+  psProcessingText: 'psProcessingText',
+  usAccept: 'image/*',
+  usButtonText: 'Or Select File',
+  usDropMessage: 'Drop file to start upload',
+  usPlaceholder: 'Drag and drop a file less than 5MB',
+};
+
+const UPLOADIMAGE_STEP_PROPS = {
+  fileDropped: expect.any(Function),
+  isComplete: false,
+  usAccept: props.usAccept,
+  usButtonText: props.usButtonText,
+  usDisabled: false,
+  usHelpImage: '',
+  usLabel: '',
+  usPlaceholder: props.usPlaceholder,
+};
+
+const PROCESSING_STEP_PROPS = {
+  isComplete: false,
+  isError: false,
+  isSuccess: false,
+  onAnimationCompleted: expect.any(Function),
+  onClear: expect.any(Function),
+  psButtonText: props.psButtonText,
+  psProcessingText: props.psProcessingText,
+  psButtonDisabled: false,
+};
+
+const COMPLETED_STEP_PROPS = {
+  csButtonText: props.csButtonText,
+  csFailureText: props.csFailureText,
+  csSuccessText: props.csSuccessText,
+  fileName: TEST_FILE.name,
+  isComplete: true,
+  isError: false,
+  isImage: true,
+  onClear: expect.any(Function),
+  uploadedImage: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
+};
+
+describe('Upload', () => {
+  let component;
+  beforeEach(() => {
+    component = shallow(<Upload {...props} />).dive();
+    asyncFileRead.mockImplementation(() => new Promise((resolve) => resolve('a value')));
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.clearAllTimers();
+  });
+
+  it('renders container', () => {
+    expect(component.find('.droppable-md')).toHaveLength(1);
+  });
+
+  it('renders the UploadImageStep by default', () => {
+    expect(component.find(UploadImageStep)).toHaveLength(1);
+    expect(component.find(MediaUploadStep)).toHaveLength(0);
+    expect(component.find(ProcessingStep)).toHaveLength(0);
+    expect(component.find(CompleteStep)).toHaveLength(0);
+    expect(component.find('.droppable-dropping-card')).toHaveLength(1);
+  });
+
+  it(`renders the MediaUploadStep by default is it's the uploadStep in props`, () => {
+    component.setProps({ uploadStep: 'mediaUploadStep' });
+
+    expect(component.find(MediaUploadStep)).toHaveLength(1);
+    expect(component.find(UploadImageStep)).toHaveLength(0);
+    expect(component.find(ProcessingStep)).toHaveLength(0);
+    expect(component.find(CompleteStep)).toHaveLength(0);
+    expect(component.find('.droppable-dropping-card')).toHaveLength(1);
+  });
+
+  it('renders the ProcessingStep when state is processing', () => {
+    component.setState({ isProcessing: true });
+
+    expect(component.find(UploadImageStep)).toHaveLength(0);
+    expect(component.find(ProcessingStep)).toHaveLength(1);
+    expect(component.find(CompleteStep)).toHaveLength(0);
+    expect(component.find('.droppable-dropping-card')).toHaveLength(0);
+  });
+
+  it('renders the CompleteStep when state is completed', () => {
+    component.setState({ isComplete: true });
+
+    expect(component.find(UploadImageStep)).toHaveLength(0);
+    expect(component.find(ProcessingStep)).toHaveLength(0);
+    expect(component.find(CompleteStep)).toHaveLength(1);
+    expect(component.find('.droppable-dropping-card')).toHaveLength(1);
+  });
+
+  describe('before file is dropped', () => {
+    it('renders the UploadImageStep with right props', () => {
+      expect(component.find(UploadImageStep).props()).toStrictEqual(UPLOADIMAGE_STEP_PROPS);
+    });
+  });
+
+  describe('when file is dropped', () => {
+    it('onStart is called with file', async () => {
+      await component.instance().fileDropped(TEST_FILE);
+
+      expect(props.onStart).toHaveBeenCalledWith(TEST_FILE);
+    });
+
+    it('step changes from UploadImageStep to ProcessingStep', async () => {
+      expect(component.find(UploadImageStep)).toHaveLength(1);
+      expect(component.find(ProcessingStep)).toHaveLength(0);
+      expect(component.find(CompleteStep)).toHaveLength(0);
+
+      await component.instance().fileDropped(TEST_FILE);
+      component.update();
+
+      expect(component.find(UploadImageStep)).toHaveLength(0);
+      expect(component.find(ProcessingStep)).toHaveLength(1);
+      expect(component.find(CompleteStep)).toHaveLength(0);
+    });
+
+    it('step changes from UploadImageStep to ProcessingStep with right props', async () => {
+      await component.instance().fileDropped(TEST_FILE);
+      component.update();
+
+      expect(component.find(ProcessingStep).props()).toStrictEqual(PROCESSING_STEP_PROPS);
+    });
+  });
+
+  describe('when file is being processed', () => {
+    it('step ProcessingStep is called with success props', async () => {
+      await component.instance().fileDropped(TEST_FILE);
+      jest.advanceTimersByTime(props.animationDelay);
+      component.update();
+
+      expect(component.find(ProcessingStep).props()).toStrictEqual({
+        ...PROCESSING_STEP_PROPS,
+        isSuccess: true,
+      });
+    });
+
+    it('step ProcessingStep is called with error props', async () => {
+      asyncFileRead.mockImplementation(() => new Promise((resolve, reject) => reject('An error')));
+
+      await component.instance().fileDropped(TEST_FILE);
+      jest.advanceTimersByTime(props.animationDelay);
+      component.update();
+
+      expect(component.find(ProcessingStep).props()).toStrictEqual({
+        ...PROCESSING_STEP_PROPS,
+        isError: true,
+      });
+    });
+
+    it('should disable processing button when psButtonDisabled is true', async () => {
+      component.setProps({ psButtonDisabled: true });
+      await component.instance().fileDropped(TEST_FILE);
+      jest.advanceTimersByTime(props.animationDelay);
+      component.update();
+
+      expect(component.find(ProcessingStep).props()).toStrictEqual({
+        ...PROCESSING_STEP_PROPS,
+        psButtonDisabled: true,
+        isError: false,
+        isSuccess: true,
+      });
+    });
+  });
+
+  describe('when file is processed', () => {
+    it('step changes from UploadImageStep to CompleteStep', async () => {
+      component = mount(<Upload {...props} />);
+      const upload = component.children();
+      expect(upload.find(UploadImageStep)).toHaveLength(1);
+      expect(upload.find(ProcessingStep)).toHaveLength(0);
+      expect(upload.find(CompleteStep)).toHaveLength(0);
+
+      await upload.instance().fileDropped(TEST_FILE);
+      jest.advanceTimersByTime(props.animationDelay + ANIMATION_DELAY);
+      component.update();
+
+      expect(component.find(UploadImageStep)).toHaveLength(0);
+      expect(component.find(ProcessingStep)).toHaveLength(0);
+      expect(component.find(CompleteStep)).toHaveLength(1);
+    });
+
+    it('step CompleteStep is called with error props', async () => {
+      component = mount(<Upload {...props} />);
+      const upload = component.children();
+      asyncFileRead.mockImplementation(() => new Promise((resolve, reject) => reject('An error')));
+
+      await upload.instance().fileDropped(TEST_FILE);
+      jest.advanceTimersByTime(props.animationDelay + ANIMATION_DELAY);
+      component.update();
+
+      expect(component.find(CompleteStep).props()).toStrictEqual({
+        ...COMPLETED_STEP_PROPS,
+        isImage: false,
+        isComplete: true,
+        isError: true,
+        uploadedImage: null,
+      });
+    });
+
+    it('onSuccess is called with response when httpOptions are provided', async () => {
+      component = mount(<Upload {...props} httpOptions={{ url: 'a-url' }} />).children();
+
+      await component.instance().fileDropped(TEST_FILE);
+      jest.advanceTimersByTime(props.animationDelay + ANIMATION_DELAY);
+
+      expect(props.onSuccess).toHaveBeenCalledWith('ServerResponse', TEST_FILE.name);
+    });
+
+    it('wont process new file while current process is in progress', async () => {
+      component = mount(<Upload {...props} httpOptions={{ url: 'a-url' }} />).children();
+
+      await component.instance().fileDropped(TEST_FILE);
+      const result = await component.instance().fileDropped(TEST_FILE);
+      jest.advanceTimersByTime(props.animationDelay + ANIMATION_DELAY);
+
+      expect(result).toBe(false);
+      expect(props.onSuccess).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/upload/Upload.story.js

@@ -0,0 +1,36 @@
+import { action } from '@storybook/addon-actions';
+import { boolean, number, select, text } from '@storybook/addon-knobs';
+
+import Upload from '.';
+
+export default {
+  component: Upload,
+  title: 'Forms/Upload',
+};
+
+export const Basic = () => {
+  const size = select('size', ['sm', 'md', 'lg'], 'md');
+  const maxSize = number('max file size', 5000000);
+  const usAccept = text('accepted format', '*');
+  const usDisabled = boolean('disabled', false);
+  const psButtonDisabled = boolean('psButtonDisabled', false);
+
+  return (
+    <Upload
+      maxSize={maxSize}
+      size={size}
+      usAccept={usAccept}
+      usLabel="Front of your ID document"
+      usDisabled={usDisabled}
+      psButtonDisabled={psButtonDisabled}
+      httpOptions={{
+        url: 'https://httpbin.org/post',
+        method: 'POST',
+      }}
+      onStart={(file) => action('onStart', file)}
+      onSuccess={(httpResponse, fileName) => action('onSuccess', httpResponse, fileName)}
+      onFailure={(httpResponse) => action('onFailure', httpResponse)}
+      onCancel={() => action('onCancel')}
+    />
+  );
+};

package/src/upload/index.js

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

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

@@ -0,0 +1,95 @@
+import { AlertCircle as AlertCircleIcon, Document as DocumentIcon } from '@transferwise/icons';
+import { useTheme } from '@wise/components-theming';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { Priority, Typography } from '../../..';
+import Body from '../../../body';
+import Button from '../../../button';
+import { Sentiment, Size } from '../../../common';
+import StatusIcon from '../../../statusIcon';
+import Title from '../../../title';
+
+const CompleteStep = (props) => {
+  const { isModern } = useTheme();
+  const {
+    csButtonText,
+    csFailureText,
+    csSuccessText,
+    fileName,
+    isComplete,
+    isError,
+    isImage,
+    onClear,
+    uploadedImage,
+  } = props;
+  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">
+          {isError ? (
+            <>
+              {isModern ? (
+                <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />
+              ) : (
+                <AlertCircleIcon size={24} className="text-negative" />
+              )}
+              {csFailureText && (
+                <p className={classNames('m-t-2', { 'm-b-0': isModern })}>{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
+            priority={isModern ? Priority.PRIMARY : Priority.SECONDARY}
+            className={classNames({
+              'm-t-1': isModern && !isError,
+              'm-t-2': isModern && isError,
+              'm-t-3': !isModern,
+            })}
+            onClick={(event) => onClear(event)}
+          >
+            {csButtonText}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+CompleteStep.propTypes = {
+  csButtonText: PropTypes.string.isRequired,
+  csSuccessText: PropTypes.string.isRequired,
+  csFailureText: PropTypes.string.isRequired,
+  fileName: PropTypes.string.isRequired,
+  isComplete: PropTypes.bool.isRequired,
+  isError: PropTypes.bool.isRequired,
+  isImage: PropTypes.bool.isRequired,
+  onClear: PropTypes.func.isRequired,
+  uploadedImage: PropTypes.string,
+};
+CompleteStep.defaultProps = {
+  uploadedImage: null,
+};
+
+export default CompleteStep;

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

@@ -0,0 +1,59 @@
+import { AlertCircle as AlertCircleIcon, Document as DocumentIcon } from '@transferwise/icons';
+import { shallow } from 'enzyme';
+
+import Body from '../../../body';
+import Button from '../../../button';
+
+import CompleteStep from '.';
+
+describe('CompleteStep', () => {
+  const COMPLETED_STEP_PROPS = {
+    isComplete: true,
+    uploadedImage: '',
+    fileName: 'fileName',
+    isError: false,
+    isImage: true,
+    csSuccessText: 'csSuccessText',
+    csFailureText: 'csFailureText',
+    csButtonText: 'csButtonText',
+    onClear: jest.fn(),
+    usLabel: 'usLabel',
+  };
+  let component;
+  beforeEach(() => {
+    component = shallow(<CompleteStep {...COMPLETED_STEP_PROPS} />);
+  });
+
+  it('renders container', () => {
+    expect(component.find('.droppable-complete-card')).toHaveLength(1);
+  });
+
+  describe('when error is false', () => {
+    it('renders isImage or Upload icon', () => {
+      expect(component.find(DocumentIcon)).toHaveLength(1);
+      component.setProps({ uploadedImage: 'uploadedImage' });
+      expect(component.find('img.thumbnail')).toHaveLength(1);
+    });
+
+    it('renders filename when error is false', () => {
+      expect(component.find(Body).props().children).toBe(COMPLETED_STEP_PROPS.fileName);
+    });
+  });
+
+  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(AlertCircleIcon)).toHaveLength(1);
+    });
+  });
+
+  it('renders button when csButtonText is set up', () => {
+    expect(component.find(Button)).toHaveLength(1);
+  });
+
+  it('calls onClear when button is clicked', () => {
+    component.find(Button).simulate('click', {});
+    expect(COMPLETED_STEP_PROPS.onClear).toHaveBeenCalledTimes(1);
+  });
+});

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

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

package/src/upload/steps/index.js

@@ -0,0 +1,4 @@
+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/mediaUploadStep/index.js

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

package/src/upload/steps/mediaUploadStep/mediaUploadStep.js

@@ -0,0 +1,80 @@
+import { Upload as UploadIcon } from '@transferwise/icons';
+import PropTypes from 'prop-types';
+
+import Body from '../../../body';
+import Button from '../../../button/Button';
+import { Typography } from '../../../common';
+import Title from '../../../title';
+import { getSupportedSpotMimeTypes, requestMedia } from '../../utils';
+
+const MediaUploadStep = ({
+  isComplete,
+  usAccept,
+  usButtonText,
+  usDisabled,
+  usHelpImage,
+  usLabel,
+  usPlaceholder,
+  fileDropped,
+}) => {
+  const getMediaFile = () => {
+    const allowedMimeTypes = getSupportedSpotMimeTypes(usAccept);
+
+    if (allowedMimeTypes.length === 0) {
+      throw new Error('provided mimeTypes not supported');
+    }
+
+    const mediaRequest = { allowedMimeTypes };
+    requestMedia(mediaRequest).then((file) => fileDropped(file));
+  };
+
+  const getImage = () => {
+    if (!usHelpImage) {
+      return (
+        <div className="circle circle-sm circle-inverse p-t-1">
+          <UploadIcon size={24} />
+        </div>
+      );
+    }
+
+    if (typeof usHelpImage === 'string') {
+      return <img src={usHelpImage} alt={usLabel} className="thumbnail text-xs-center" />;
+    }
+
+    return usHelpImage;
+  };
+
+  return (
+    <div>
+      <div className="droppable-default-card" aria-hidden={isComplete}>
+        <div className="droppable-card-content">
+          <div className="m-b-3">{getImage()}</div>
+          {usLabel && (
+            <Title type={Typography.TITLE_BODY} className="m-b-1">
+              {usLabel}
+            </Title>
+          )}
+          {usPlaceholder && (
+            <Body as="p" type={Typography.BODY_LARGE} className="m-b-3">{`${usPlaceholder}`}</Body>
+          )}
+          <Button disabled={usDisabled} onClick={getMediaFile}>
+            {usButtonText || <UploadIcon size={24} className="m-r-0" />}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+MediaUploadStep.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 MediaUploadStep;

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

@@ -0,0 +1,77 @@
+import { render, fireEvent, screen } from '../../../test-utils';
+
+import MediaUploadStep from '.';
+
+describe('mediaUploadStep', () => {
+  const defaultProps = {
+    fileDropped: jest.fn(),
+    isComplete: false,
+    usAccept: '*',
+    usButtonText: '',
+    usDisabled: false,
+    usLabel: '',
+    usHelpImage: '',
+    usPlaceholder: '',
+  };
+
+  const renderMediaUploadStep = (props = {}) =>
+    render(<MediaUploadStep {...defaultProps} {...props} />);
+
+  const originalMicroApps = window.microapps;
+  const image64 = {
+    bytes:
+      'iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEX/AAAZ4gk3AAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC',
+    mimeType: 'image/jpeg',
+  };
+  const requestMedia = jest.fn().mockImplementation(() => Promise.resolve(image64));
+
+  beforeAll(() => {
+    window.microapps = { requestMedia };
+  });
+
+  afterAll(() => {
+    window.microapps = originalMicroApps;
+  });
+
+  it('renders help image passed as url string', () => {
+    renderMediaUploadStep({
+      usHelpImage: 'usHelpImage',
+      usLabel: 'usLabel',
+    });
+    expect(screen.getByAltText('usLabel')).toBeInTheDocument();
+  });
+
+  it('renders help images passed as image node', () => {
+    const usHelpImage = (
+      <span role="img" aria-label="rocket">
+        🚀
+      </span>
+    );
+
+    renderMediaUploadStep({ usHelpImage });
+    expect(screen.getByLabelText('rocket')).toBeInTheDocument();
+  });
+
+  it('renders label', () => {
+    renderMediaUploadStep({ usLabel: 'usLabel' });
+    expect(screen.getByText('usLabel')).toBeInTheDocument();
+  });
+
+  it('renders placeholder', () => {
+    renderMediaUploadStep({ usPlaceholder: 'usPlaceholder' });
+    expect(screen.getByText('usPlaceholder')).toBeInTheDocument();
+  });
+
+  it('renders buttonText', () => {
+    renderMediaUploadStep({ usButtonText: 'usButtonText' });
+    expect(screen.getByText('usButtonText')).toBeInTheDocument();
+  });
+
+  it(`calls microapps' requestMedia API to get file while upload button is clicked`, () => {
+    const allowedMimeTypes = ['image/jpeg', 'video/*', 'application/pdf'];
+    renderMediaUploadStep({ usButtonText: 'usButtonText' });
+    expect(requestMedia).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByText('usButtonText'));
+    expect(requestMedia).toHaveBeenCalledWith({ allowedMimeTypes });
+  });
+});

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

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