npm - @transferwise/components - Versions diffs - 46.38.0 → 46.40.0 - Mend

@transferwise/components 46.38.0 → 46.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

package/src/upload/Upload.story.js DELETED Viewed

@@ -1,36 +0,0 @@
-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', 4000000);
-  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 DELETED Viewed

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

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

@@ -1,98 +0,0 @@
-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"
-          aria-live="polite"
-        >
-          {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/index.js DELETED Viewed

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

package/src/upload/steps/mediaUploadStep/index.js DELETED Viewed

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

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

@@ -1,80 +0,0 @@
-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 DELETED Viewed

@@ -1,77 +0,0 @@
-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 DELETED Viewed

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

package/src/upload/steps/processingStep/processingStep.js DELETED Viewed

@@ -1,73 +0,0 @@
-import { useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import Button from '../../../button';
-import { Status, Size, Typography } from '../../../common';
-import ProcessIndicator from '../../../processIndicator';
-import Title from '../../../title';
-const ProcessingStep = (props) => {
-  const {
-    isComplete,
-    isError,
-    isSuccess,
-    onAnimationCompleted,
-    onClear,
-    psButtonText,
-    psProcessingText,
-    psButtonDisabled,
-  } = props;
-  const { isModern } = useTheme();
-  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
-          size={Size.Small}
-          status={processStatus}
-          onAnimationCompleted={(status) => onAnimationCompleted(status)}
-        />
-        <Title
-          className={classNames({
-            'm-t-3': !isModern,
-            'm-b-3': !isModern,
-            'm-t-2': isModern,
-            'm-b-2': isModern,
-          })}
-          type={Typography.TITLE_BODY}
-          aria-live="polite"
-        >
-          {psProcessingText}
-        </Title>
-        {psButtonText && (
-          <Button disabled={psButtonDisabled} onClick={(event) => onClear(event)}>
-            {psButtonText}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};
-ProcessingStep.propTypes = {
-  isComplete: PropTypes.bool.isRequired,
-  isError: PropTypes.bool.isRequired,
-  isSuccess: PropTypes.bool.isRequired,
-  onAnimationCompleted: PropTypes.func.isRequired,
-  onClear: PropTypes.func.isRequired,
-  psButtonText: PropTypes.string.isRequired,
-  psProcessingText: PropTypes.string.isRequired,
-  psButtonDisabled: PropTypes.bool.isRequired,
-};
-export default ProcessingStep;

package/src/upload/steps/uploadImageStep/index.js DELETED Viewed

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

package/src/upload/uploadSteps.ts DELETED Viewed

@@ -1,5 +0,0 @@
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-export enum UploadStep {
-  UPLOAD_IMAGE_STEP = 'uploadImageStep',
-  MEDIA_UPLOAD_STEP = 'mediaUploadStep',
-}

package/src/upload/utils/asyncFileRead/asyncFileRead.js DELETED Viewed

@@ -1,11 +0,0 @@
-export const asyncFileRead = (file) =>
-  new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.addEventListener('load', (event) => {
-      resolve(event.target.result);
-    });
-    reader.addEventListener('error', (event) => {
-      reject(event);
-    });
-  });

package/src/upload/utils/asyncFileRead/asyncFileRead.spec.js DELETED Viewed

@@ -1,17 +0,0 @@
-import { asyncFileRead } from '.';
-describe('asyncFileRead', () => {
-  it('should resolve with data64', () => {
-    const file = new Blob(['foo'], { type: 'text/plain' });
-    expect.assertions(1);
-    return asyncFileRead(file).then((data) =>
-      expect(data).toStrictEqual('data:text/plain;base64,Zm9v'),
-    );
-  });
-  it('should reject if  wrong file is given', () => {
-    const file = 'Not a blob';
-    expect.assertions(1);
-    return asyncFileRead(file).catch((error) => expect(error).toBeTruthy());
-  });
-});

package/src/upload/utils/getFileType/getFileType.js DELETED Viewed

@@ -1,19 +0,0 @@
-export const getFileType = (file, file64) => {
-  if (!file && !file64) {
-    return '';
-  }
-  if (file && file.type && file.type !== '') {
-    return file.type ?? '';
-  }
-  if (file64) {
-    const regex = /^data:([a-z]+\/[a-z]+);/;
-    const typeFromEncoded = file64.match(regex);
-    if (typeFromEncoded && typeFromEncoded[1]) {
-      return typeFromEncoded[1] ?? '';
-    }
-  }
-  return '';
-};

package/src/upload/utils/getFileType/getFileType.spec.js DELETED Viewed

@@ -1,33 +0,0 @@
-import { getFileType } from '.';
-const imageFile = {
-  type: 'image/png',
-};
-const data64Img = 'data:image/png;something';
-describe('getFileType', () => {
-  describe('returns null', () => {
-    it(`when both file and file64 haven't been provided`, () => {
-      expect(getFileType('', '')).toBe('');
-    });
-    it(`when file has no type and file64 hasn't been provided`, () => {
-      expect(getFileType({}, '')).toBe('');
-    });
-    it(`when file has empty type and file64 hasn't been provided`, () => {
-      expect(getFileType({ type: '' }, '')).toBe('');
-    });
-    it(`when file hasn't been provided and file64 is not supported`, () => {
-      expect(getFileType('', 'data:something-unexpected')).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('', data64Img)).toBe('image/png');
-    });
-  });
-});

package/src/upload/utils/getSupportedSpotMimeTypes/getSupportedSpotMimeTypes.js DELETED Viewed

@@ -1,18 +0,0 @@
-// Spot Platform's Media API only support these MIME types
-const SUPPORTED_MIME_TYPES = ['image/jpeg', 'video/*', 'application/pdf'];
-export const getSupportedSpotMimeTypes = (mimeTypes) => {
-  if (mimeTypes === '*') {
-    return SUPPORTED_MIME_TYPES;
-  }
-  const mimeTypesArray = mimeTypes.split(',');
-  const mimeMapping = {
-    'image/*': 'image/jpeg',
-    'application/*': 'application/pdf',
-  };
-  const mapSupportedMimeTypes = mimeTypesArray.map((type) => mimeMapping[type] || type);
-  return mapSupportedMimeTypes.filter((type) => SUPPORTED_MIME_TYPES.includes(type));
-};

package/src/upload/utils/getSupportedSpotMimeTypes/getSupportedSpotMimeTypes.spec.js DELETED Viewed

@@ -1,22 +0,0 @@
-import { getSupportedSpotMimeTypes } from '.';
-describe(getSupportedSpotMimeTypes, () => {
-  it('returns all supported mime types when * is passed', () => {
-    expect(getSupportedSpotMimeTypes('*')).toStrictEqual([
-      'image/jpeg',
-      'video/*',
-      'application/pdf',
-    ]);
-  });
-  it('maps image/* and application/* according to the supported', () => {
-    expect(getSupportedSpotMimeTypes('image/*,application/*')).toStrictEqual([
-      'image/jpeg',
-      'application/pdf',
-    ]);
-  });
-  it('filters out unsupported mime types', () => {
-    expect(getSupportedSpotMimeTypes('image/jpeg,text/csv')).toStrictEqual(['image/jpeg']);
-  });
-});

package/src/upload/utils/getSupportedSpotMimeTypes/index.js DELETED Viewed

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

package/src/upload/utils/isSizeValid/isSizeValid.js DELETED Viewed

	@@ -1 +0,0 @@
1	- export const isSizeValid = (file, maxSize) => Number.isInteger(maxSize) && file.size <= maxSize;

package/src/upload/utils/isTypeValid/isTypeValid.js DELETED Viewed

@@ -1,26 +0,0 @@
-import { getFileType } from '../getFileType';
-export const isTypeValid = (file, rule, file64) => {
-  if (!file || !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 splittedRule = type.split('/');
-    const typeAllowed = splittedRule[0];
-    const extensionAllowed = splittedRule[1];
-    if (extensionAllowed !== '*') {
-      return false;
-    }
-    return fileType.includes(typeAllowed);
-  });
-};

package/src/upload/utils/isTypeValid/isTypeValid.spec.js DELETED Viewed

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

package/src/upload/utils/postData/postData.js DELETED Viewed

@@ -1,18 +0,0 @@
-export const postData = (httpOptions, data = {}, fetcher = fetch) =>
-  fetcher(`${httpOptions.url}`, {
-    method: 'POST',
-    body: data,
-    ...httpOptions,
-  })
-    .then((response) => {
-      if (!response.ok) {
-        const error = new Error(response.statusText);
-        error.status = response.status;
-        error.response = response;
-        throw error;
-      }
-      return response;
-    })
-    .catch((error) => {
-      throw error;
-    });