@wise/dynamic-flow-client 3.2.1 → 3.2.2-short-962e290

package/build/legacy/step/cameraStep/cameraCapture/CameraCapture.js

@@ -0,0 +1,161 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import Webcam from 'react-webcam';
+import { isMobile } from '../../../common/utils/mobile-utils';
+import messages from './CameraCapture.messages';
+import { CaptureBottomBar, ReviewBottomBar, OrientationLockOverlay } from './components';
+import { CameraErrorScreen } from './screens';
+import { useFullScreenOrientationLock } from './hooks/useFullScreenOrientationLock';
+import { useVideoConstraints } from './hooks/useVideoConstraints';
+import Overlay from './overlay/Overlay';
+import { trackCameraFeedStarted, trackCameraError } from './tracking';
+import { CameraMode } from './types';
+import { generateCanvasFromVideo, isSelfieCamera } from './utils';
+function CameraCapture(_a) {
+    var _this = this;
+    var _b = _a.direction, direction = _b === void 0 ? 'back' : _b, _c = _a.overlay, overlay = _c === void 0 ? '' : _c, _d = _a.outline, outline = _d === void 0 ? '' : _d, _e = _a.imageUrl, imageUrl = _e === void 0 ? '' : _e, _f = _a.title, title = _f === void 0 ? '' : _f, _g = _a.instructions, instructions = _g === void 0 ? '' : _g, _h = _a.showReview, showReview = _h === void 0 ? false : _h, onCapture = _a.onCapture, onEvent = _a.onEvent;
+    var _j = useState(CameraMode.CAPTURE), mode = _j[0], setMode = _j[1];
+    var _k = useState(), cameraError = _k[0], setCameraError = _k[1];
+    var _l = useState(false), isVideoMirrored = _l[0], setIsVideoMirrored = _l[1];
+    var _m = useState(false), ready = _m[0], setReady = _m[1];
+    var _o = useState(), reviewImage = _o[0], setReviewImage = _o[1];
+    var webcamReference = useRef(null);
+    var videoConstraints = useVideoConstraints(direction).videoConstraints;
+    var shouldLockOrientation = useMemo(function () { return !!(isMobile() && mode === CameraMode.CAPTURE); }, [mode]);
+    var _p = useFullScreenOrientationLock(shouldLockOrientation, onEvent), enterFullScreen = _p.enterFullScreen, exitFullScreen = _p.exitFullScreen;
+    var intl = useIntl();
+    var handleCapture = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        var canvas;
+        var _a, _b, _c, _d, _e, _f;
+        return __generator(this, function (_g) {
+            switch (_g.label) {
+                case 0:
+                    if (!(((_a = webcamReference === null || webcamReference === void 0 ? void 0 : webcamReference.current) === null || _a === void 0 ? void 0 : _a.video) && ((_c = (_b = webcamReference === null || webcamReference === void 0 ? void 0 : webcamReference.current) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.readyState) >= 3)) return [3 /*break*/, 2];
+                    (_e = (_d = webcamReference === null || webcamReference === void 0 ? void 0 : webcamReference.current) === null || _d === void 0 ? void 0 : _d.video) === null || _e === void 0 ? void 0 : _e.pause();
+                    return [4 /*yield*/, generateCanvasFromVideo((_f = webcamReference === null || webcamReference === void 0 ? void 0 : webcamReference.current) === null || _f === void 0 ? void 0 : _f.video)];
+                case 1:
+                    canvas = _g.sent();
+                    canvas === null || canvas === void 0 ? void 0 : canvas.toBlob(function (blob) {
+                        if (blob) {
+                            if (showReview) {
+                                var source = window.URL.createObjectURL(blob);
+                                setReviewImage({ source: source, blob: blob });
+                                setMode(CameraMode.REVIEW);
+                            }
+                            else {
+                                onCapture(blob);
+                            }
+                        }
+                    }, 'image/jpeg', 0.92);
+                    _g.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); }, [webcamReference, showReview, setReviewImage, setMode, onCapture, isVideoMirrored]);
+    var handleUserMediaError = useCallback(function (error) {
+        setMode(CameraMode.ERROR);
+        if (error instanceof DOMException) {
+            switch (error === null || error === void 0 ? void 0 : error.name) {
+                case 'NotAllowedError':
+                    setCameraError({
+                        title: intl.formatMessage(messages.noCameraAccessTitle),
+                        description: intl.formatMessage(messages.noCameraAccessParagraph),
+                        actionButton: intl.formatMessage(messages.noCameraAccessAction),
+                        onAction: handleRetryCameraAccess
+                    });
+                    trackCameraError('Dynamic Flow - Camera Permission Denied', onEvent, error);
+                    return;
+                case 'NotFoundError':
+                case 'OverconstrainedError':
+                case 'AbortError':
+                case 'NotReadableError':
+                    setCameraError({
+                        title: intl.formatMessage(messages.cameraConnectionIssueTitle),
+                        description: intl.formatMessage(messages.cameraConnectionIssueParagraph),
+                        actionButton: intl.formatMessage(messages.cameraConnectionIssueAction),
+                        onAction: handleRetryCameraAccess
+                    });
+                    trackCameraError('Dynamic Flow - Camera Not Accessible', onEvent, error);
+                    return;
+            }
+        }
+        setCameraError({
+            title: intl.formatMessage(messages.cameraNotSupportedTitle),
+            description: intl.formatMessage(messages.cameraNotSupportedParagraph)
+        });
+        trackCameraError('Dynamic Flow - Camera Not Supported', onEvent, error);
+    }, [intl, onEvent]);
+    var handleUserMedia = useCallback(function (stream) {
+        enterFullScreen();
+        setReady(true);
+        setIsVideoMirrored(isSelfieCamera(stream));
+        void trackCameraFeedStarted(onEvent, { direction: direction }, stream);
+    }, [setIsVideoMirrored, onEvent, direction, enterFullScreen]);
+    var handleReviewSubmit = function () {
+        onCapture((reviewImage === null || reviewImage === void 0 ? void 0 : reviewImage.blob) || null);
+    };
+    var handleReviewRetry = function () {
+        setMode(CameraMode.CAPTURE);
+        setReviewImage(undefined);
+    };
+    var handleRetryCameraAccess = function () { return setMode(CameraMode.CAPTURE); };
+    useEffect(function () {
+        if (mode !== CameraMode.CAPTURE) {
+            exitFullScreen();
+        }
+    }, [mode, exitFullScreen]);
+    var captureScreen = (_jsxs("div", __assign({ className: "camera-capture" }, { children: [videoConstraints && (_jsx(Webcam, { ref: webcamReference, audio: false, videoConstraints: videoConstraints, mirrored: isVideoMirrored, onUserMediaError: handleUserMediaError, onUserMedia: handleUserMedia })), _jsx(Overlay, { overlay: overlay, outline: outline, imageUrl: imageUrl, title: title, instructions: instructions }), shouldLockOrientation && _jsx(OrientationLockOverlay, {}), ready && (_jsx(CaptureBottomBar, { onCapture: function () {
+                    void handleCapture();
+                } }))] })));
+    var reviewScreen = (_jsxs("div", __assign({ className: "camera-capture" }, { children: [_jsx("img", { className: "review-image", src: reviewImage === null || reviewImage === void 0 ? void 0 : reviewImage.source, alt: "" }), _jsx(Overlay, { overlay: overlay, imageUrl: imageUrl, title: title, instructions: instructions, reviewInstructions: intl.formatMessage(messages.reviewInstructions) }), _jsx(ReviewBottomBar, { onSubmit: handleReviewSubmit, onRetry: handleReviewRetry })] })));
+    return (_jsxs("section", { children: [mode === CameraMode.CAPTURE && captureScreen, mode === CameraMode.REVIEW && reviewScreen, mode === CameraMode.ERROR && cameraError && _jsx(CameraErrorScreen, __assign({}, cameraError))] }));
+}
+export default CameraCapture;

package/build/legacy/step/cameraStep/cameraCapture/CameraCapture.messages.js

@@ -0,0 +1,58 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+    reviewSubmit: {
+        id: 'dynamicFlows.CameraCapture.reviewSubmit',
+        defaultMessage: 'Yes, submit',
+        description: 'Accept and submit the image taken with the camera'
+    },
+    reviewRetry: {
+        id: 'dynamicFlows.CameraCapture.reviewRetry',
+        defaultMessage: 'No, try again',
+        description: "Image taken with camera is not good, don't submit, and retake the image"
+    },
+    reviewInstructions: {
+        id: 'dynamicFlows.CameraCapture.reviewInstructions',
+        defaultMessage: 'Is your picture clear, readable and complete?',
+        description: 'After taking an image with the camera, prompt user to review the image'
+    },
+    cameraNotSupportedTitle: {
+        id: 'dynamicFlows.CameraCapture.CameraNotSupported.title',
+        defaultMessage: 'Camera not supported',
+        description: 'Title of standalone page prompting that camera is not available on users browser'
+    },
+    cameraNotSupportedParagraph: {
+        id: 'dynamicFlows.CameraCapture.CameraNotSupported.paragraph',
+        defaultMessage: "The browser you're using doesn't have support for a camera. Try a different browser, device, or download our mobile app.",
+        description: "Further text of standalone page prompting that camera is not available on user's browser"
+    },
+    noCameraAccessTitle: {
+        id: 'dynamicFlows.CameraCapture.NoCameraAccess.title',
+        defaultMessage: "We can't access your camera",
+        description: 'Title of standalone page prompting missing camera permissions'
+    },
+    noCameraAccessParagraph: {
+        id: 'dynamicFlows.CameraCapture.NoCameraAccess.paragraph',
+        defaultMessage: "Enable camera access in your browser's settings to get going again.",
+        description: 'Further text of standalone page prompting missing camera permissions'
+    },
+    noCameraAccessAction: {
+        id: 'dynamicFlows.CameraCapture.NoCameraAccess.action',
+        defaultMessage: 'Enable camera access',
+        description: 'Action to ask for camera permissions again'
+    },
+    cameraConnectionIssueTitle: {
+        id: 'dynamicFlows.CameraCapture.CameraConnectionIssue.title',
+        defaultMessage: "We can't access your camera",
+        description: 'Title of standalone page prompting that there was an issue connecting to a camera'
+    },
+    cameraConnectionIssueParagraph: {
+        id: 'dynamicFlows.CameraCapture.CameraConnectionIssue.paragraph',
+        defaultMessage: "Please check if it is connected and try again.",
+        description: 'Further text of standalone page prompting that there was an issue connecting to a camera'
+    },
+    cameraConnectionIssueAction: {
+        id: 'dynamicFlows.CameraCapture.CameraConnectionIssue.action',
+        defaultMessage: 'Try again',
+        description: 'Action to try using camera again'
+    }
+});

package/build/legacy/step/cameraStep/cameraCapture/components/bottomBar/BottomBar.js

@@ -0,0 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ControlType, Priority, Size } from '@transferwise/components';
+import { useIntl } from 'react-intl';
+import messages from '../../CameraCapture.messages';
+export var CaptureBottomBar = function (_a) {
+    var onCapture = _a.onCapture;
+    return (_jsx("div", __assign({ className: "bottom-bar" }, { children: _jsx(CaptureButton, { onClick: onCapture }) })));
+};
+export var ReviewBottomBar = function (_a) {
+    var onSubmit = _a.onSubmit, onRetry = _a.onRetry;
+    var intl = useIntl();
+    return (_jsx("div", __assign({ className: "bottom-bar p-x-2" }, { children: _jsx("div", __assign({ className: "row" }, { children: _jsxs("div", __assign({ className: "col-xs-12 col-md-6 col-md-offset-3" }, { children: [_jsx(Button, __assign({ className: "m-b-1", block: true, size: Size.MEDIUM, type: ControlType.ACCENT, onClick: onSubmit }, { children: intl.formatMessage(messages.reviewSubmit) })), _jsx(Button, __assign({ className: "m-b-2", block: true, size: Size.MEDIUM, type: ControlType.ACCENT, priority: Priority.SECONDARY, onClick: onRetry }, { children: intl.formatMessage(messages.reviewRetry) }))] })) })) })));
+};
+var CaptureButton = function (_a) {
+    var onClick = _a.onClick;
+    return (_jsx("button", __assign({ type: "button", className: "camera-capture-btn m-b-2", "data-testid": "camera-capture-button", onClick: onClick }, { children: _jsx("span", { className: "camera-capture-btn-inner" }) })));
+};

package/build/legacy/step/cameraStep/cameraCapture/components/index.js

@@ -0,0 +1,3 @@
+export { CaptureBottomBar } from './bottomBar/BottomBar';
+export { ReviewBottomBar } from './bottomBar/BottomBar';
+export { default as OrientationLockOverlay } from './orientationLockOverlay/OrientationLockOverlay';

package/build/legacy/step/cameraStep/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.js

@@ -0,0 +1,19 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntl } from 'react-intl';
+import messages from './OrientationLockOverlay.messages';
+function OrientationLockOverlay() {
+    var intl = useIntl();
+    return (_jsxs("div", __assign({ className: "orientation-lock-overlay" }, { children: [_jsx("img", { className: "m-b-3", src: "https://wise.com/public-resources/assets/camera-guidelines/icon-rotate-phone.svg", width: "96", height: "96", alt: "" }), _jsx("p", __assign({ className: "text-center m-b-0" }, { children: intl.formatMessage(messages.text) }))] })));
+}
+export default OrientationLockOverlay;

package/build/legacy/step/cameraStep/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+    text: {
+        id: 'dynamicFlows.CameraCapture.rotatePhone.text',
+        defaultMessage: 'Rotate your phone to portrait view to take a photo',
+        description: 'Prompt the user to rotate their phone from landscape to portrait mode when attempting to take a photo'
+    }
+});

package/build/legacy/step/cameraStep/cameraCapture/hooks/useFullScreenOrientationLock.js

@@ -0,0 +1,60 @@
+import { useCallback, useEffect } from 'react';
+import screenfull from 'screenfull';
+import { trackCameraOrientationLandscape, trackCameraOrientationLocked } from '../tracking';
+export var useFullScreenOrientationLock = function (shouldLockOrientation, onEvent) {
+    var lockOrientation = useCallback(function () {
+        if (window.screen.orientation &&
+            'lock' in window.screen.orientation &&
+            typeof window.screen.orientation.lock === 'function') {
+            window.screen.orientation
+                .lock('portrait')
+                .then(function () { return trackCameraOrientationLocked(onEvent); })["catch"](noop);
+        }
+    }, [onEvent]);
+    var unlockOrientation = useCallback(function () { var _a, _b, _c; return (_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.screen) === null || _a === void 0 ? void 0 : _a.orientation) === null || _b === void 0 ? void 0 : _b.unlock) === null || _c === void 0 ? void 0 : _c.call(_b); }, []);
+    var enterFullScreen = useCallback(function () {
+        setTimeout(function () {
+            if (shouldLockOrientation && !screenfull.isFullscreen && screenfull.isEnabled) {
+                screenfull
+                    .request(document.documentElement, { navigationUI: 'show' })
+                    .then(function () {
+                    lockOrientation();
+                })["catch"](noop);
+            }
+        }, 100);
+    }, [shouldLockOrientation, lockOrientation]);
+    var exitFullScreen = useCallback(function () {
+        if (screenfull.isFullscreen) {
+            screenfull.exit()["catch"](noop);
+        }
+        unlockOrientation();
+    }, [unlockOrientation]);
+    var handleOrientationChange = useCallback(function (event) {
+        var _a, _b;
+        if ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.type.includes('landscape')) {
+            if ((_b = window.screen) === null || _b === void 0 ? void 0 : _b.orientation) {
+                trackCameraOrientationLandscape(onEvent);
+            }
+        }
+    }, [onEvent]);
+    useEffect(function () {
+        var _a, _b;
+        if (shouldLockOrientation) {
+            (_b = (_a = window.screen) === null || _a === void 0 ? void 0 : _a.orientation) === null || _b === void 0 ? void 0 : _b.addEventListener('change', function (event) {
+                return handleOrientationChange(event);
+            });
+        }
+        return function () {
+            var _a, _b;
+            (_b = (_a = window.screen) === null || _a === void 0 ? void 0 : _a.orientation) === null || _b === void 0 ? void 0 : _b.removeEventListener('change', handleOrientationChange);
+            exitFullScreen();
+        };
+    }, [exitFullScreen, handleOrientationChange, shouldLockOrientation]);
+    return {
+        enterFullScreen: enterFullScreen,
+        exitFullScreen: exitFullScreen
+    };
+};
+var noop = function () {
+    // no-op
+};

package/build/legacy/step/cameraStep/cameraCapture/hooks/useVideoConstraints.js

@@ -0,0 +1,80 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { useEffect, useState } from 'react';
+import { getAvailableVideoDevices, isMainBackCamera } from '../utils';
+export var useVideoConstraints = function (direction) {
+    var _a = useState(), videoConstraints = _a[0], setVideoConstraints = _a[1];
+    var defaultVideoConstraints = {
+        facingMode: direction === 'front' ? 'user' : 'environment',
+        height: { min: 480, max: 1080, ideal: 720 },
+        width: { min: 640, max: 1920, ideal: 1280 },
+        frameRate: 30,
+        aspectRatio: 16 / 9
+    };
+    useEffect(function () {
+        void getVideoConstraints(direction).then(setVideoConstraints);
+    }, [direction]);
+    var getVideoConstraints = function (direction) { return __awaiter(void 0, void 0, void 0, function () {
+        var mainCamera;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(direction === 'back')) return [3 /*break*/, 2];
+                    return [4 /*yield*/, getAvailableVideoDevices()];
+                case 1:
+                    mainCamera = (_a.sent()).find(isMainBackCamera);
+                    if (mainCamera === null || mainCamera === void 0 ? void 0 : mainCamera.deviceId) {
+                        return [2 /*return*/, __assign(__assign({}, defaultVideoConstraints), { deviceId: { exact: mainCamera.deviceId } })];
+                    }
+                    _a.label = 2;
+                case 2: return [2 /*return*/, defaultVideoConstraints];
+            }
+        });
+    }); };
+    return { videoConstraints: videoConstraints };
+};

package/build/legacy/step/cameraStep/cameraCapture/index.js

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

package/build/legacy/step/cameraStep/cameraCapture/overlay/Overlay.js

@@ -0,0 +1,77 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { debounce } from '../../../../common/utils/debounce';
+var captureButtonHeight = 92;
+var reviewButtonsHeight = 120;
+var imageHeight = 40;
+var titleHeight = 32;
+var instructionsHeight = 48;
+var reviewInstructionsHeight = 40;
+var overlayMaxWidth = 800;
+function Overlay(_a) {
+    var overlay = _a.overlay, outline = _a.outline, imageUrl = _a.imageUrl, title = _a.title, instructions = _a.instructions, reviewInstructions = _a.reviewInstructions;
+    var svgReference = useRef(null);
+    /*
+      SVG doesn't always rerender when screen orientation changes,
+      so need to force rerender
+     */
+    useEffect(function () {
+        var listener = debounce(function () {
+            var _a;
+            if ((_a = svgReference.current) === null || _a === void 0 ? void 0 : _a.innerHTML) {
+                var reference = svgReference.current;
+                reference.innerHTML = String(reference.innerHTML);
+            }
+        }, 100);
+        window.addEventListener('resize', listener);
+        return function () { return window.removeEventListener('resize', listener); };
+    });
+    var helperBoxHeight = (imageUrl ? imageHeight : 0) +
+        (title ? titleHeight : 0) +
+        (instructions ? instructionsHeight : 0);
+    var helperBox = (_jsxs(_Fragment, { children: [imageUrl && _jsx("img", { className: "camera-capture-img", src: imageUrl, alt: "" }), title && _jsx("h4", __assign({ className: "camera-capture-title" }, { children: title })), instructions && _jsx("small", __assign({ className: "camera-capture-instructions" }, { children: instructions }))] }));
+    var frameBottomMargin = captureButtonHeight + helperBoxHeight;
+    /*
+        frameBottomMargin needs to stay the same for the review page so that
+        the overlay position does not change! Basically if it is the review step
+        and there is a 'reviewInstructions' specified, the overlay position stays
+        the same, but the helperBox height and content changes to adjust for the
+        large review buttons and smaller height required by 'reviewInstructionsHeight'
+     */
+    if (reviewInstructions) {
+        helperBoxHeight = frameBottomMargin - reviewButtonsHeight;
+        helperBox = _jsx("small", __assign({ className: "camera-capture-instructions" }, { children: reviewInstructions }));
+        var frameWithReviewInstructionsMinBottomMargin = reviewButtonsHeight + reviewInstructionsHeight;
+        if (frameBottomMargin < frameWithReviewInstructionsMinBottomMargin) {
+            helperBox = _jsx(_Fragment, {});
+        }
+    }
+    var framePosition = {
+        x: '50%',
+        y: '5%',
+        width: "min(90%, ".concat(overlayMaxWidth, "px)"),
+        height: "calc(90% - ".concat(frameBottomMargin, "px)"),
+        style: { transform: "translateX(max(-45%, -".concat(overlayMaxWidth / 2, "px))") }
+    };
+    var helperBoxPosition = {
+        style: {
+            left: '5%',
+            top: "calc(100% - ".concat(frameBottomMargin, "px - 5%)"),
+            height: "calc(".concat(helperBoxHeight, "px + 5%)"),
+            width: '90%'
+        }
+    };
+    return (_jsxs("svg", __assign({ ref: svgReference, xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("defs", { children: _jsxs("mask", __assign({ id: "mask" }, { children: [_jsx("rect", { width: "100%", height: "100%", fill: "#fff" }), _jsx("image", __assign({ href: overlay }, framePosition))] })) }), overlay && _jsx("rect", { width: "100%", height: "100%", mask: "url(#mask)", fillOpacity: "0.72" }), outline && _jsx("image", __assign({ href: outline }, framePosition)), _jsx("foreignObject", __assign({ width: "100%", height: "100%" }, { children: _jsx("div", __assign({ className: "camera-capture-text-and-image-container" }, helperBoxPosition, { children: helperBox })) }))] })));
+}
+export default Overlay;

package/build/legacy/step/cameraStep/cameraCapture/screens/cameraErrorScreen/CameraErrorScreen.js

@@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@transferwise/components';
+function CameraErrorScreen(_a) {
+    var title = _a.title, description = _a.description, actionButton = _a.actionButton, onAction = _a.onAction;
+    return (_jsx("div", __assign({ className: "container p-t-5" }, { children: _jsx("div", __assign({ className: "row" }, { children: _jsxs("div", __assign({ className: "col-md-6 col-md-offset-3" }, { children: [_jsx("h2", __assign({ className: "text-xs-center m-b-3" }, { children: title })), _jsx("p", __assign({ className: "text-xs-center m-b-5" }, { children: description })), onAction && actionButton && (_jsx(Button, __assign({ block: true, onClick: onAction }, { children: actionButton })))] })) })) })));
+}
+export default CameraErrorScreen;

package/build/legacy/step/cameraStep/cameraCapture/screens/index.js

@@ -0,0 +1 @@
+export { default as CameraErrorScreen } from "./cameraErrorScreen/CameraErrorScreen";

package/build/legacy/step/cameraStep/cameraCapture/tracking/index.js

@@ -0,0 +1,109 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { getActiveVideoDeviceLabel, getAvailableVideoDeviceLabels, getVideoCapabilities, getVideoTrack, } from '../utils';
+export var trackCameraError = function (message, onEvent, error) { return onEvent === null || onEvent === void 0 ? void 0 : onEvent(message, { Error: getSerializedError(error) }); };
+var getSerializedError = function (error) {
+    return error instanceof DOMException
+        ? JSON.stringify({
+            name: error === null || error === void 0 ? void 0 : error.name,
+            message: error === null || error === void 0 ? void 0 : error.message
+        })
+        : error;
+};
+export var trackCameraFeedStarted = function (onEvent, props, stream) { return __awaiter(void 0, void 0, void 0, function () { var _a, _b, _c; return __generator(this, function (_d) {
+    switch (_d.label) {
+        case 0:
+            if (!(onEvent === null || onEvent === void 0)) return [3 /*break*/, 1];
+            _a = void 0;
+            return [3 /*break*/, 3];
+        case 1:
+            _b = onEvent;
+            _c = ['Dynamic Flow - Camera Feed Started'];
+            return [4 /*yield*/, getCameraStartedProperties(props, stream)];
+        case 2:
+            _a = _b.apply(void 0, _c.concat([_d.sent()]));
+            _d.label = 3;
+        case 3: return [2 /*return*/, _a];
+    }
+}); }); };
+var getCameraStartedProperties = function (props, videoStream) { return __awaiter(void 0, void 0, void 0, function () {
+    var videoTrack, capabilities, settings, _a, _b, _c, _d;
+    var _e;
+    var _f;
+    return __generator(this, function (_g) {
+        switch (_g.label) {
+            case 0:
+                videoTrack = getVideoTrack(videoStream);
+                capabilities = getVideoCapabilities(videoStream);
+                settings = (_f = videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.getSettings) === null || _f === void 0 ? void 0 : _f.call(videoTrack);
+                _a = [{}];
+                _b = videoTrack;
+                if (!_b) return [3 /*break*/, 3];
+                _e = {};
+                _c = 'Available Video Devices (by label)';
+                return [4 /*yield*/, getAvailableVideoDeviceLabels()];
+            case 1:
+                _e[_c] = _g.sent();
+                _d = 'Active Video Device (by label)';
+                return [4 /*yield*/, getActiveVideoDeviceLabel(videoStream)];
+            case 2:
+                _b = (_e[_d] = _g.sent(),
+                    _e['Camera Capabilities'] = capabilities,
+                    _e['Camera Settings'] = settings,
+                    _e);
+                _g.label = 3;
+            case 3: return [2 /*return*/, __assign.apply(void 0, [__assign.apply(void 0, _a.concat([(_b)])), { 'Camera Direction (Asked)': props === null || props === void 0 ? void 0 : props.direction }])];
+        }
+    });
+}); };
+export var trackCameraOrientationLandscape = function (onEvent) {
+    onEvent === null || onEvent === void 0 ? void 0 : onEvent('Dynamic Flow - Camera Orientation Lock Overlay Shown', {});
+};
+export var trackCameraOrientationLocked = function (onEvent) {
+    onEvent === null || onEvent === void 0 ? void 0 : onEvent('Dynamic Flow - Camera Orientation Locked', {});
+};