@wise/dynamic-flow-client 3.16.2 → 3.16.3-experimental-c0e84f1

package/build/common/cameraCapture/CameraCapture.spec.js

@@ -0,0 +1,460 @@
+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 };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable testing-library/no-node-access */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import screenfull from 'screenfull';
+import * as mobileUtils from './utils/mobile-utils';
+import { renderWithProviders } from '../../test-utils';
+import CameraCapture from '.';
+import { act } from 'react-dom/test-utils';
+var user = userEvent.setup();
+var getUserMedia = jest.fn(function () { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, Promise.resolve({
+                start: jest.fn(),
+                stop: jest.fn(),
+            })];
+    });
+}); });
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+global.navigator.mediaDevices = { getUserMedia: getUserMedia };
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+global.URL = { createObjectURL: jest.fn() };
+jest
+    .spyOn(window.HTMLCanvasElement.prototype, 'toBlob')
+    .mockImplementation(function (callback) { return callback(new Blob()); });
+jest.mock('screenfull', function () { return ({
+    isFullscreen: false,
+    element: null,
+    isEnabled: true,
+    request: jest.fn(),
+    exit: jest.fn(),
+}); });
+jest.spyOn(HTMLMediaElement.prototype, 'pause').mockImplementation(jest.fn());
+jest.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation(jest.fn());
+var schemas = [
+    {
+        format: 'base64url',
+        title: 'Front side of your driving license',
+        cameraConfig: {
+            assets: {
+                overlay: 'https://wise.com/public-resources/assets/camera-guidelines/v2/overlay_id.png',
+                outline: 'https://wise.com/public-resources/assets/camera-guidelines/v2/outline_id.png',
+            },
+            direction: 'back',
+            instructions: 'step.idwl.front_side.instructions.driving_license',
+        },
+        image: {
+            type: 'image',
+            url: 'https://wise.com/public-resources/assets/camera-guidelines/id-icon.png',
+            text: '',
+        },
+        source: 'camera',
+        type: 'string',
+    },
+    {
+        format: 'base64url',
+        title: 'Front side of your driving license',
+        cameraConfig: {
+            assets: {
+                overlay: 'https://wise.com/public-resources/assets/camera-guidelines/v2/overlay_id.png',
+            },
+            direction: 'front',
+            instructions: 'step.idwl.front_side.instructions.driving_license',
+        },
+        image: {
+            type: 'image',
+            url: 'https://wise.com/public-resources/assets/camera-guidelines/id-icon.png',
+            text: '',
+        },
+        source: 'camera',
+        type: 'string',
+    },
+];
+describe.each(schemas)('Given a component for rendering a camera capture experience', function (schema) {
+    var onCapture;
+    var unmount;
+    var renderComponent = function () {
+        var args_1 = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args_1[_i] = arguments[_i];
+        }
+        return __awaiter(void 0, __spreadArray([], args_1, true), void 0, function (customProps) {
+            var view;
+            var _a, _b, _c, _d, _e, _f, _g;
+            if (customProps === void 0) { customProps = {}; }
+            return __generator(this, function (_h) {
+                switch (_h.label) {
+                    case 0:
+                        unmount === null || unmount === void 0 ? void 0 : unmount();
+                        view = renderWithProviders(_jsx(CameraCapture, __assign({ overlay: (_b = (_a = schema.cameraConfig) === null || _a === void 0 ? void 0 : _a.assets) === null || _b === void 0 ? void 0 : _b.overlay, outline: (_d = (_c = schema.cameraConfig) === null || _c === void 0 ? void 0 : _c.assets) === null || _d === void 0 ? void 0 : _d.outline, title: schema.title, imageUrl: (_e = schema.image) === null || _e === void 0 ? void 0 : _e.url, instructions: (_f = schema.cameraConfig) === null || _f === void 0 ? void 0 : _f.instructions, direction: (_g = schema.cameraConfig) === null || _g === void 0 ? void 0 : _g.direction, onCapture: onCapture }, customProps)));
+                        return [4 /*yield*/, wait(0)];
+                    case 1:
+                        _h.sent();
+                        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                        document.querySelector('video') &&
+                            Object.defineProperty(document.querySelector('video'), 'readyState', {
+                                get: function () {
+                                    return 3;
+                                },
+                            });
+                        // eslint-disable-next-line require-atomic-updates
+                        unmount = view.unmount;
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    var enterFullscreen = jest.spyOn(screenfull, 'request');
+    var exitFullScreen = jest.spyOn(screenfull, 'exit');
+    beforeEach(function () {
+        onCapture = jest.fn();
+        enterFullscreen.mockImplementation(function () { return Promise.resolve(undefined); });
+        exitFullScreen.mockImplementation(function () { return Promise.resolve(undefined); });
+    });
+    afterEach(function () {
+        enterFullscreen.mockRestore();
+        exitFullScreen.mockRestore();
+    });
+    it('should draw helper text and icon', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var cameraConfig;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, renderComponent()];
+                case 1:
+                    _b.sent();
+                    cameraConfig = schema.cameraConfig;
+                    expect(screen.getByText(schema.title)).toBeInTheDocument();
+                    expect(screen.getByText(cameraConfig.instructions)).toBeInTheDocument();
+                    expect(screen.getByRole('img')).toHaveAttribute('src', (_a = schema.image) === null || _a === void 0 ? void 0 : _a.url);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render capture button', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, renderComponent()];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByTestId('camera-capture-button')).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    describe('screen orientation lock', function () {
+        var isMobile = jest.spyOn(mobileUtils, 'isMobile');
+        var screenSpy = jest.spyOn(window, 'screen', 'get');
+        var setupMockScreenOrientation = function (orientationLock, orientationUnlock) {
+            screenSpy.mockImplementation(function () {
+                return ({
+                    orientation: {
+                        lock: orientationLock !== null && orientationLock !== void 0 ? orientationLock : undefined,
+                        unlock: orientationUnlock !== null && orientationUnlock !== void 0 ? orientationUnlock : undefined,
+                        addEventListener: jest.fn(),
+                        removeEventListener: jest.fn(),
+                    },
+                });
+            });
+        };
+        describe('when device is mobile and orientation lock is supported', function () {
+            var orientationLock = jest.fn(function () { return Promise.resolve(undefined); });
+            var orientationUnLock = jest.fn();
+            beforeEach(function () {
+                isMobile.mockReturnValue(true);
+                setupMockScreenOrientation(orientationLock, orientationUnLock);
+            });
+            afterEach(function () {
+                isMobile.mockReset();
+                screenSpy.mockReset();
+            });
+            it('should enter fullscreen mode and lock orientation', function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, renderComponent()];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, waitFor(function () {
+                                    expect(enterFullscreen).toHaveBeenCalledWith(expect.any(HTMLElement), expect.any(Object));
+                                })];
+                        case 2:
+                            _a.sent();
+                            expect(orientationLock).toHaveBeenCalledWith('portrait');
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should exit fullscreen mode and unlock orientation when shown screen is not camera capture', function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            jest.replaceProperty(screenfull, 'isFullscreen', true);
+                            return [4 /*yield*/, renderComponent({ showReview: true })];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                        case 2:
+                            _a.sent();
+                            expect(exitFullScreen).toHaveBeenCalledWith();
+                            expect(orientationUnLock).toHaveBeenCalledWith();
+                            expect(screen.queryByText('Rotate your phone to portrait view to take a photo')).not.toBeInTheDocument();
+                            jest.replaceProperty(screenfull, 'isFullscreen', false);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        describe('when orientation lock is not supported', function () {
+            beforeAll(function () {
+                setupMockScreenOrientation();
+            });
+            afterAll(function () {
+                screenSpy.mockReset();
+            });
+            describe('if device is mobile', function () {
+                beforeAll(function () {
+                    isMobile.mockReturnValue(true);
+                });
+                afterAll(function () {
+                    isMobile.mockReset();
+                });
+                it('should display OrientationLock overlay', function () { return __awaiter(void 0, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, renderComponent()];
+                            case 1:
+                                _a.sent();
+                                expect(screen.getByText('Rotate your phone to portrait view to take a photo')).toBeInTheDocument();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+            });
+            describe('if device is desktop', function () {
+                beforeAll(function () {
+                    isMobile.mockReturnValue(false);
+                });
+                afterAll(function () {
+                    isMobile.mockReset();
+                });
+                it('should not display OrientationLock overlay', function () { return __awaiter(void 0, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, renderComponent()];
+                            case 1:
+                                _a.sent();
+                                expect(screen.queryByText('Rotate your phone to portrait view to take a photo')).not.toBeInTheDocument();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+                // it('should not enter fullscreen mode', async () => {
+                //   await renderComponent();
+                //   expect(enterFullscreen).not.toHaveBeenCalled();
+                // });
+            });
+        });
+    });
+    describe('when capture is clicked', function () {
+        it('should broadcast onCapture', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, renderComponent()];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 2:
+                        _a.sent();
+                        expect(onCapture).toHaveBeenCalledWith(expect.any(Blob));
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('when camera is not supported', function () {
+        beforeEach(function () {
+            getUserMedia.mockRejectedValueOnce(new Error(''));
+        });
+        it('should display camera not supported error page', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, renderComponent()];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByText('Camera not supported')).toBeInTheDocument();
+                        expect(screen.getByText("The browser you're using doesn't have support for a camera. Try a different browser, device, or download our mobile app.")).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('when camera permission is declined', function () {
+        beforeEach(function () {
+            getUserMedia.mockRejectedValueOnce(new DOMException('', 'NotAllowedError'));
+        });
+        it('should display permission error page', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, renderComponent()];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByText("We can't access your camera")).toBeInTheDocument();
+                        expect(screen.getByText("Enable camera access in your browser's settings to get going again.")).toBeInTheDocument();
+                        expect(screen.getByRole('button', { name: 'Enable camera access' })).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('when camera fails to connect', function () {
+        beforeEach(function () {
+            getUserMedia.mockRejectedValueOnce(new DOMException('', 'NotFoundError'));
+        });
+        it('should display permission error page', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, renderComponent()];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByText("We can't access your camera")).toBeInTheDocument();
+                        expect(screen.getByText('Please check if it is connected and try again.')).toBeInTheDocument();
+                        expect(screen.getByRole('button', { name: 'Try again' })).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('Given review mode is enabled', function () {
+        it('should display review page', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, renderComponent({ showReview: true })];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    case 2:
+                        _a.sent();
+                        expect(screen.getByText('Is your picture clear, readable and complete?')).toBeInTheDocument();
+                        expect(screen.getByRole('button', { name: 'No, try again' })).toBeInTheDocument();
+                        expect(screen.getByRole('button', { name: 'Yes, submit' })).toBeInTheDocument();
+                        expect(screen.getByText('Yes, submit')).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        describe('when retake button is clicked', function () {
+            it('camera feed should be shown again', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var cameraConfig;
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, renderComponent({ showReview: true })];
+                        case 1:
+                            _b.sent();
+                            return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                        case 2:
+                            _b.sent();
+                            return [4 /*yield*/, user.click(screen.getByRole('button', { name: 'No, try again' }))];
+                        case 3:
+                            _b.sent();
+                            expect(screen.getByText(schema.title)).toBeInTheDocument();
+                            cameraConfig = schema.cameraConfig;
+                            expect(screen.getByText(cameraConfig.instructions)).toBeInTheDocument();
+                            expect(screen.getByRole('img')).toHaveAttribute('src', (_a = schema.image) === null || _a === void 0 ? void 0 : _a.url);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        describe('when submit button is clicked', function () {
+            it('should broadcast onCapture', function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, renderComponent({ showReview: true })];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                        case 2:
+                            _a.sent();
+                            return [4 /*yield*/, user.click(screen.getByRole('button', { name: 'Yes, submit' }))];
+                        case 3:
+                            _a.sent();
+                            expect(onCapture).toHaveBeenCalledWith(expect.any(Blob));
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+    });
+});
+var wait = function (t) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, new Promise(function (resolve) {
+                            setTimeout(resolve, t);
+                        })];
+                });
+            }); })];
+    });
+}); };

package/build/common/cameraCapture/components/bottomBar/BottomBar.js

@@ -0,0 +1,17 @@
+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", { 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", { className: "bottom-bar p-x-2", children: _jsx("div", { className: "row", children: _jsxs("div", { className: "col-xs-12 col-md-6 col-md-offset-3", children: [_jsx(Button, { className: "m-b-1", block: true, size: Size.MEDIUM, type: ControlType.ACCENT, onClick: onSubmit, children: intl.formatMessage(messages.reviewSubmit) }), _jsx(Button, { 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", { 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/common/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/common/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.js

@@ -0,0 +1,8 @@
+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", { 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", { className: "text-center m-b-0", children: intl.formatMessage(messages.text) })] }));
+}
+export default OrientationLockOverlay;

package/build/common/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/common/cameraCapture/hooks/useFullScreenOrientationLock.js

@@ -0,0 +1,62 @@
+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') {
+            var lockPromise = window.screen.orientation.lock('portrait');
+            if (lockPromise instanceof Promise) {
+                lockPromise.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/common/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];
+    useEffect(function () {
+        void getVideoConstraints(direction).then(setVideoConstraints);
+    }, [direction]);
+    return { videoConstraints: videoConstraints };
+};
+var getVideoConstraints = function (dir) { return __awaiter(void 0, void 0, void 0, function () {
+    var defaultVideoConstraints, mainCamera;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                defaultVideoConstraints = {
+                    facingMode: dir === 'front' ? 'user' : 'environment',
+                    height: { min: 480, max: 1080, ideal: 720 },
+                    width: { min: 640, max: 1920, ideal: 1280 },
+                    frameRate: 30,
+                    aspectRatio: 16 / 9,
+                };
+                if (!(dir === '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];
+        }
+    });
+}); };

package/build/common/cameraCapture/index.js

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