@wise/dynamic-flow-client 0.4.0-beta-d2067b.7 → 0.4.0

package/build/layout/paragraph/DynamicParagraph.messages.js

@@ -0,0 +1,15 @@
+"use strict";
+exports.__esModule = true;
+var react_intl_1 = require("react-intl");
+exports["default"] = (0, react_intl_1.defineMessages)({
+    copy: {
+        id: 'dynamicFlows.DynamicParagraph.copy',
+        defaultMessage: 'Copy',
+        description: 'Copy to clipboard button label.'
+    },
+    copied: {
+        id: 'dynamicFlows.DynamicParagraph.copied',
+        defaultMessage: 'Copied to clipboard',
+        description: 'Appears in a snackbar when the copy operation succeeds.'
+    }
+});

package/build/layout/paragraph/useSnackBarIfAvailable.js

@@ -0,0 +1,13 @@
+"use strict";
+exports.__esModule = true;
+exports.useSnackBarIfAvailable = void 0;
+var components_1 = require("@transferwise/components");
+var react_1 = require("react");
+function useSnackBarIfAvailable() {
+    var context = (0, react_1.useContext)(components_1.SnackbarContext);
+    return context ? context.createSnackbar : noop;
+}
+exports.useSnackBarIfAvailable = useSnackBarIfAvailable;
+function noop() {
+    //
+}

package/build/layout/review/DynamicReview.js

@@ -0,0 +1,35 @@
+"use strict";
+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);
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@transferwise/components");
+var utils_1 = require("../utils");
+var mapFieldsToDefinitions = function (_a, index) {
+    var label = _a.label, value = _a.value;
+    return { key: String(index), title: label, value: value };
+};
+var getReviewLayout = function (orientation) {
+    return orientation === 'horizontal' ? 'HORIZONTAL_RIGHT_ALIGNED' : 'VERTICAL_ONE_COLUMN';
+};
+var DynamicReview = function (props) {
+    var review = props.component;
+    var margin = (0, utils_1.getMarginBottom)(review.margin || 'xs');
+    var getReviewAction = function (action) {
+        return ((0, jsx_runtime_1.jsx)("a", __assign({ href: action.url, className: "pull-right", role: "button", onClick: function (event) {
+                event.preventDefault();
+                props.onAction(action);
+            } }, { children: action.title })));
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [review.title && ((0, jsx_runtime_1.jsxs)("h6", __assign({ className: "m-b-2" }, { children: [review.title, review.action && getReviewAction(review.action)] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: margin }, { children: (0, jsx_runtime_1.jsx)(components_1.DefinitionList, { layout: getReviewLayout(review.orientation), definitions: review.fields.map(mapFieldsToDefinitions) }) }))] }));
+};
+exports["default"] = DynamicReview;

package/build/layout/utils.js

@@ -0,0 +1,35 @@
+"use strict";
+exports.__esModule = true;
+exports.getTextAlignmentAndMargin = exports.getMarginBottom = void 0;
+var getMarginBottom = function (size) {
+    switch (size) {
+        case 'xs':
+            return 'm-b-0';
+        case 'sm':
+            return 'm-b-1';
+        case 'md':
+            return 'm-b-2';
+        case 'lg':
+            return 'm-b-3';
+        case 'xl':
+            return 'm-b-5';
+        default:
+            return '';
+    }
+};
+exports.getMarginBottom = getMarginBottom;
+var getTextAlignment = function (align) {
+    switch (align) {
+        case 'right':
+            return 'text-xs-right';
+        case 'center':
+            return 'text-xs-center';
+        case 'left':
+        default:
+            return '';
+    }
+};
+var getTextAlignmentAndMargin = function (component) {
+    return "".concat(getTextAlignment(component.align), " ").concat(getMarginBottom(component.margin));
+};
+exports.getTextAlignmentAndMargin = getTextAlignmentAndMargin;

package/build/step/cameraStep/CameraStep.js

@@ -0,0 +1,130 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var contexts_1 = require("../../common/contexts");
+var utils_1 = require("../../common/utils");
+var types_1 = require("../../types");
+var cameraCapture_1 = __importDefault(require("./cameraCapture"));
+function blobToBase64(blob) {
+    return new Promise(function (resolve, _) {
+        // we can safely assume the type of reader.result is string
+        // because we're calling reader.readAsDataURL
+        // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/result
+        var reader = new FileReader();
+        // eslint-disable-next-line fp/no-mutation
+        reader.onloadend = function () { return resolve(reader.result); };
+        reader.readAsDataURL(blob);
+    });
+}
+var CameraStep = function (props) {
+    var step = props.step, model = props.model, onModelChange = props.onModelChange, onAction = props.onAction;
+    var onEvent = (0, contexts_1.useEventDispatcher)();
+    var objectSchema = getObjectSchema(step);
+    var cameraSchema = getCameraSchema(step);
+    var action = getFirstAction(step);
+    var title = cameraSchema.title, image = cameraSchema.image, cameraConfig = cameraSchema.cameraConfig;
+    var _a = cameraConfig || {}, assets = _a.assets, direction = _a.direction, instructions = _a.instructions;
+    var _b = assets || {}, overlay = _b.overlay, outline = _b.outline;
+    var imageUrl = (image || {}).url;
+    var _c = (0, react_1.useState)(false), captureClicked = _c[0], setCaptureClicked = _c[1];
+    // We need to wait for model to update before we call onAction()
+    (0, react_1.useEffect)(function () {
+        if (captureClicked) {
+            onAction(action);
+        }
+    }, [model]);
+    var handleCapture = function (blob) { return __awaiter(void 0, void 0, void 0, function () {
+        var $id, newValue, newModel;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    $id = cameraSchema.$id;
+                    if (!blob) return [3 /*break*/, 2];
+                    return [4 /*yield*/, blobToBase64(blob)];
+                case 1:
+                    newValue = _b.sent();
+                    newModel = (_a = {}, _a[$id || ''] = newValue, _a);
+                    setCaptureClicked(true);
+                    onModelChange({
+                        model: newModel,
+                        formSchema: objectSchema,
+                        triggerModel: newValue,
+                        triggerSchema: cameraSchema
+                    });
+                    _b.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); };
+    return ((0, jsx_runtime_1.jsx)(cameraCapture_1["default"], { overlay: overlay, outline: outline, title: title, imageUrl: imageUrl, instructions: instructions, direction: direction, onEvent: onEvent, onCapture: function (blob) {
+            void handleCapture(blob);
+        } }));
+};
+exports["default"] = CameraStep;
+function getObjectSchema(step) {
+    var nonHiddenSchemas = (0, utils_1.filterHiddenSchemas)(step.schemas || []);
+    var objectSchema = nonHiddenSchemas[0];
+    if (!objectSchema || !(0, types_1.isObjectSchema)(objectSchema)) {
+        throw new Error('The first schema in a camera step is expected to be of type object and have at least one property with a schema...');
+    }
+    return objectSchema;
+}
+function getCameraSchema(step) {
+    var objectSchema = getObjectSchema(step);
+    var firstProperty = Object.values(objectSchema.properties)[0];
+    if (!firstProperty) {
+        throw new Error('The first schema in a camera step is expected to be of type object and have at least one property with a schema...');
+    }
+    return firstProperty;
+}
+function getFirstAction(step) {
+    var _a, _b;
+    if (!step.schemas || ((_a = (0, utils_1.filterHiddenSchemas)(step.schemas)) === null || _a === void 0 ? void 0 : _a.length) !== 1) {
+        throw new Error('camera step expects 1 non-hidden object schema');
+    }
+    if (((_b = step === null || step === void 0 ? void 0 : step.actions) === null || _b === void 0 ? void 0 : _b.length) !== 1) {
+        throw new Error('camera step expects 1 action');
+    }
+    return step.actions[0];
+}

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

@@ -0,0 +1,127 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_intl_1 = require("react-intl");
+var react_webcam_1 = __importDefault(require("react-webcam"));
+var CameraCapture_messages_1 = __importDefault(require("./CameraCapture.messages"));
+var components_1 = require("./components");
+var hooks_1 = require("./hooks");
+var Overlay_1 = __importDefault(require("./overlay/Overlay"));
+var screens_1 = require("./screens");
+var tracking_1 = require("./tracking");
+var utils_1 = require("./utils");
+var CameraCapture = function (_a) {
+    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 = (0, react_1.useState)('CAPTURE'), mode = _j[0], setMode = _j[1];
+    var _k = (0, react_1.useState)(false), isVideoMirrored = _k[0], setIsVideoMirrored = _k[1];
+    var _l = (0, react_1.useState)(false), ready = _l[0], setReady = _l[1];
+    var _m = (0, react_1.useState)(), reviewImage = _m[0], setReviewImage = _m[1];
+    var webcamReference = (0, react_1.useRef)(null);
+    var videoConstraints = (0, hooks_1.useVideoConstraints)(direction).videoConstraints;
+    var intl = (0, react_intl_1.useIntl)();
+    var handleCapture = (0, react_1.useCallback)(function () { return __awaiter(void 0, 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*/, (0, utils_1.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('REVIEW');
+                            }
+                            else {
+                                onCapture(blob);
+                            }
+                        }
+                    }, 'image/jpeg', 0.92);
+                    _g.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); }, [webcamReference, showReview, setReviewImage, setMode, onCapture, isVideoMirrored]);
+    var handleUserMediaError = (0, react_1.useCallback)(function (error) {
+        if (error instanceof DOMException && (error === null || error === void 0 ? void 0 : error.name) === 'NotAllowedError') {
+            setMode('NO_CAMERA_ACCESS');
+            (0, tracking_1.trackCameraPermissionDenied)(onEvent);
+            return;
+        }
+        setMode('CAMERA_NOT_SUPPORTED');
+        (0, tracking_1.trackCameraNotSupported)(onEvent, error);
+    }, [setMode, onEvent]);
+    var handleUserMedia = (0, react_1.useCallback)(function (stream) {
+        setReady(true);
+        setIsVideoMirrored((0, utils_1.isSelfieCamera)(stream));
+        void (0, tracking_1.trackCameraFeedStarted)(onEvent, { direction: direction }, stream);
+    }, [setIsVideoMirrored, onEvent, direction]);
+    var handleReviewSubmit = function () {
+        onCapture((reviewImage === null || reviewImage === void 0 ? void 0 : reviewImage.blob) || null);
+    };
+    var handleReviewRetry = function () {
+        setMode('CAPTURE');
+        setReviewImage(undefined);
+    };
+    var handleRetryCameraAccess = function () { return setMode('CAPTURE'); };
+    var captureScreen = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [videoConstraints && ((0, jsx_runtime_1.jsx)(react_webcam_1["default"], { ref: webcamReference, audio: false, videoConstraints: videoConstraints, mirrored: isVideoMirrored, onUserMediaError: handleUserMediaError, onUserMedia: handleUserMedia })), (0, jsx_runtime_1.jsx)(Overlay_1["default"], { overlay: overlay, outline: outline, imageUrl: imageUrl, title: title, instructions: instructions }), ready && (0, jsx_runtime_1.jsx)(components_1.CaptureBottomBar, { onCapture: function () { return void handleCapture(); } })] }));
+    var reviewScreen = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { className: "review-image", src: reviewImage === null || reviewImage === void 0 ? void 0 : reviewImage.source, alt: "" }), (0, jsx_runtime_1.jsx)(Overlay_1["default"], { overlay: overlay, imageUrl: imageUrl, title: title, instructions: instructions, reviewInstructions: intl.formatMessage(CameraCapture_messages_1["default"].reviewInstructions) }), (0, jsx_runtime_1.jsx)(components_1.ReviewBottomBar, { onSubmit: handleReviewSubmit, onRetry: handleReviewRetry })] }));
+    return ((0, jsx_runtime_1.jsxs)("section", __assign({ className: "camera-capture" }, { children: [mode === 'CAPTURE' && captureScreen, mode === 'REVIEW' && reviewScreen, mode === 'NO_CAMERA_ACCESS' && (0, jsx_runtime_1.jsx)(screens_1.NoCameraAccess, { onAction: handleRetryCameraAccess }), mode === 'CAMERA_NOT_SUPPORTED' && (0, jsx_runtime_1.jsx)(screens_1.CameraNotSupported, {})] })));
+};
+exports["default"] = CameraCapture;

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

@@ -0,0 +1,20 @@
+"use strict";
+exports.__esModule = true;
+var react_intl_1 = require("react-intl");
+exports["default"] = (0, react_intl_1.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'
+    }
+});

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

@@ -0,0 +1,36 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.ReviewBottomBar = exports.CaptureBottomBar = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@transferwise/components");
+var react_intl_1 = require("react-intl");
+var CameraCapture_messages_1 = __importDefault(require("../CameraCapture.messages"));
+var CaptureBottomBar = function (_a) {
+    var onCapture = _a.onCapture;
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "bottom-bar" }, { children: (0, jsx_runtime_1.jsx)(CaptureButton, { onClick: onCapture }) })));
+};
+exports.CaptureBottomBar = CaptureBottomBar;
+var ReviewBottomBar = function (_a) {
+    var onSubmit = _a.onSubmit, onRetry = _a.onRetry;
+    var intl = (0, react_intl_1.useIntl)();
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "bottom-bar p-x-2" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "row" }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "col-xs-12 col-md-6 col-md-offset-3" }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, __assign({ className: "m-b-1", block: true, size: components_1.Size.MEDIUM, type: components_1.ControlType.ACCENT, onClick: onSubmit }, { children: intl.formatMessage(CameraCapture_messages_1["default"].reviewSubmit) })), (0, jsx_runtime_1.jsx)(components_1.Button, __assign({ className: "m-b-2", block: true, size: components_1.Size.MEDIUM, type: components_1.ControlType.ACCENT, priority: components_1.Priority.SECONDARY, onClick: onRetry }, { children: intl.formatMessage(CameraCapture_messages_1["default"].reviewRetry) }))] })) })) })));
+};
+exports.ReviewBottomBar = ReviewBottomBar;
+var CaptureButton = function (_a) {
+    var onClick = _a.onClick;
+    return ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", className: "camera-capture-btn m-b-2", "data-testid": "camera-capture-button", onClick: onClick }, { children: (0, jsx_runtime_1.jsx)("span", { className: "camera-capture-btn-inner" }) })));
+};

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

@@ -0,0 +1,84 @@
+"use strict";
+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 };
+    }
+};
+exports.__esModule = true;
+exports.useVideoConstraints = void 0;
+var react_1 = require("react");
+var utils_1 = require("../utils");
+var useVideoConstraints = function (direction) {
+    var _a = (0, react_1.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
+    };
+    (0, react_1.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*/, (0, utils_1.getAvailableVideoDevices)()];
+                case 1:
+                    mainCamera = (_a.sent()).find(utils_1.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 };
+};
+exports.useVideoConstraints = useVideoConstraints;

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

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+exports.__esModule = true;
+exports["default"] = void 0;
+var CameraCapture_1 = require("./CameraCapture");
+__createBinding(exports, CameraCapture_1, "default");

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

@@ -0,0 +1,80 @@
+"use strict";
+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);
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable fp/no-mutation */
+var react_1 = require("react");
+var debounce_1 = require("../../../../common/utils/debounce");
+var captureButtonHeight = 92;
+var reviewButtonsHeight = 120;
+var imageHeight = 40;
+var titleHeight = 32;
+var instructionsHeight = 48;
+var reviewInstructionsHeight = 40;
+var overlayMaxWidth = 800;
+var Overlay = function (_a) {
+    var overlay = _a.overlay, outline = _a.outline, imageUrl = _a.imageUrl, title = _a.title, instructions = _a.instructions, reviewInstructions = _a.reviewInstructions;
+    var svgReference = (0, react_1.useRef)(null);
+    /*
+      SVG doesn't always rerender when screen orientation changes,
+      so need to force rerender
+     */
+    (0, react_1.useEffect)(function () {
+        var listener = (0, debounce_1.debounce)(function () {
+            var _a;
+            if ((_a = svgReference.current) === null || _a === void 0 ? void 0 : _a.innerHTML) {
+                var reference = svgReference.current;
+                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 = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [imageUrl && (0, jsx_runtime_1.jsx)("img", { className: "camera-capture-img", src: imageUrl, alt: "" }), title && (0, jsx_runtime_1.jsx)("h4", __assign({ className: "camera-capture-title" }, { children: title })), instructions && (0, jsx_runtime_1.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 = (0, jsx_runtime_1.jsx)("small", __assign({ className: "camera-capture-instructions" }, { children: reviewInstructions }));
+        var frameWithReviewInstructionsMinBottomMargin = reviewButtonsHeight + reviewInstructionsHeight;
+        if (frameBottomMargin < frameWithReviewInstructionsMinBottomMargin) {
+            helperBox = (0, jsx_runtime_1.jsx)(jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("svg", __assign({ ref: svgReference, xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("mask", __assign({ id: "mask" }, { children: [(0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: "#fff" }), (0, jsx_runtime_1.jsx)("image", __assign({ href: overlay }, framePosition))] })) }), overlay && (0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", mask: "url(#mask)", fillOpacity: "0.72" }), outline && (0, jsx_runtime_1.jsx)("image", __assign({ href: outline }, framePosition)), (0, jsx_runtime_1.jsx)("foreignObject", __assign({ width: "100%", height: "100%" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "camera-capture-text-and-image-container" }, helperBoxPosition, { children: helperBox })) }))] })));
+};
+exports["default"] = Overlay;

package/build/step/cameraStep/cameraCapture/screens/CameraNotSupported/CameraNotSupported.js

@@ -0,0 +1,24 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_intl_1 = require("react-intl");
+var CameraNotSupported_messages_1 = __importDefault(require("./CameraNotSupported.messages"));
+var CameraNotSupported = function () {
+    var intl = (0, react_intl_1.useIntl)();
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ id: "camera-not-supported" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "container p-t-5" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "row" }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "col-md-6 col-md-offset-3" }, { children: [(0, jsx_runtime_1.jsx)("h2", __assign({ className: "text-xs-center m-b-3" }, { children: intl.formatMessage(CameraNotSupported_messages_1["default"].title) })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "text-xs-center m-b-5" }, { children: intl.formatMessage(CameraNotSupported_messages_1["default"].paragraph) }))] })) })) })) })));
+};
+exports["default"] = CameraNotSupported;

package/build/step/cameraStep/cameraCapture/screens/CameraNotSupported/CameraNotSupported.messages.js

@@ -0,0 +1,15 @@
+"use strict";
+exports.__esModule = true;
+var react_intl_1 = require("react-intl");
+exports["default"] = (0, react_intl_1.defineMessages)({
+    title: {
+        id: 'dynamicFlows.CameraCapture.CameraNotSupported.title',
+        defaultMessage: 'Camera not supported',
+        description: 'Title of standalone page prompting that camera is not available on users browser'
+    },
+    paragraph: {
+        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"
+    }
+});