@wise/dynamic-flow-client 0.4.2 → 0.4.3

package/build/layout/icon/DynamicIcon.js

@@ -1,49 +0,0 @@
-"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];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isValidIconName = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons = __importStar(require("@transferwise/icons"));
-const DynamicIcon = ({ type }) => {
-    const iconName = toCapitalisedCamelCase(type);
-    if (!Object.keys(icons).includes(iconName)) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    }
-    const Icon = icons[iconName];
-    return (0, jsx_runtime_1.jsx)(Icon, { size: 24 });
-};
-function toCapitalisedCamelCase(value) {
-    return value.split('-').map(capitaliseFirstChar).join('');
-}
-function capitaliseFirstChar(value) {
-    var _a;
-    return `${(_a = value[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()}${value.slice(1)}`;
-}
-function isValidIconName(name) {
-    const iconName = toCapitalisedCamelCase(name);
-    return Object.keys(icons).includes(iconName);
-}
-exports.isValidIconName = isValidIconName;
-exports.default = DynamicIcon;

package/build/layout/image/DynamicImage.js

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const components_1 = require("@transferwise/components");
-const react_1 = require("react");
-const contexts_1 = require("../../common/contexts");
-const utils_1 = require("../../common/utils");
-const utils_2 = require("../utils");
-const DynamicImage = ({ component: image }) => {
-    const { url, size, text, margin } = image;
-    const fetcher = (0, contexts_1.useFetcher)();
-    const [imageSource, setImageSource] = (0, react_1.useState)('');
-    (0, react_1.useEffect)(() => {
-        void getImageSource(fetcher, url).then(setImageSource);
-    }, [url, fetcher]);
-    const imageProps = {
-        alt: text || '',
-        src: imageSource,
-        stretch: true,
-        shrink: true,
-    };
-    if (!imageSource) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `df-image ${size || 'xl'}` }, { children: (0, jsx_runtime_1.jsx)(components_1.Image, Object.assign({ className: `img-responsive ${(0, utils_2.getMarginBottom)(margin || 'lg')}` }, imageProps)) })));
-};
-const readImageBlobAsDataURL = (imageBlob) => {
-    // 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
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.addEventListener('loadend', () => resolve(reader.result));
-        reader.addEventListener('error', (error) => reject(error));
-        reader.readAsDataURL(imageBlob);
-    });
-};
-const getImageSource = async (fetcher, imageUrl) => {
-    var _a;
-    try {
-        if ((0, utils_1.isRelativePath)(imageUrl) || (imageUrl === null || imageUrl === void 0 ? void 0 : imageUrl.indexOf(`${(_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.origin}/`)) === 0) {
-            return fetcher(imageUrl, {
-                method: 'GET',
-                headers: { 'Content-Type': 'image/image' },
-                credentials: 'same-origin',
-            })
-                .then((response) => {
-                if (response.ok) {
-                    return response.blob();
-                }
-                throw new Error('Image fetching failed');
-            })
-                .then(readImageBlobAsDataURL)
-                .catch(() => imageUrl);
-        }
-        return imageUrl;
-    }
-    catch (_b) {
-        return imageUrl;
-    }
-};
-exports.default = DynamicImage;

package/build/layout/index.js

@@ -1,40 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DynamicReview = exports.DynamicParagraph = exports.DynamicLoadingIndicator = exports.DynamicList = exports.DynamicLayout = exports.DynamicImage = exports.DynamicInfo = exports.DynamicIcon = exports.DynamicHeading = exports.DynamicForm = exports.DynamicExternal = exports.DynamicDivider = exports.DynamicDecision = exports.DynamicColumns = exports.DynamicButton = exports.DynamicBox = exports.DynamicAlert = void 0;
-var DynamicAlert_1 = require("./alert/DynamicAlert");
-Object.defineProperty(exports, "DynamicAlert", { enumerable: true, get: function () { return __importDefault(DynamicAlert_1).default; } });
-var DynamicBox_1 = require("./box/DynamicBox");
-Object.defineProperty(exports, "DynamicBox", { enumerable: true, get: function () { return __importDefault(DynamicBox_1).default; } });
-var DynamicButton_1 = require("./button/DynamicButton");
-Object.defineProperty(exports, "DynamicButton", { enumerable: true, get: function () { return __importDefault(DynamicButton_1).default; } });
-var DynamicColumns_1 = require("./columns/DynamicColumns");
-Object.defineProperty(exports, "DynamicColumns", { enumerable: true, get: function () { return __importDefault(DynamicColumns_1).default; } });
-var DynamicDecision_1 = require("./decision/DynamicDecision");
-Object.defineProperty(exports, "DynamicDecision", { enumerable: true, get: function () { return __importDefault(DynamicDecision_1).default; } });
-var DynamicDivider_1 = require("./divider/DynamicDivider");
-Object.defineProperty(exports, "DynamicDivider", { enumerable: true, get: function () { return __importDefault(DynamicDivider_1).default; } });
-var DynamicExternal_1 = require("./external/DynamicExternal");
-Object.defineProperty(exports, "DynamicExternal", { enumerable: true, get: function () { return __importDefault(DynamicExternal_1).default; } });
-var DynamicForm_1 = require("./form/DynamicForm");
-Object.defineProperty(exports, "DynamicForm", { enumerable: true, get: function () { return __importDefault(DynamicForm_1).default; } });
-var DynamicHeading_1 = require("./heading/DynamicHeading");
-Object.defineProperty(exports, "DynamicHeading", { enumerable: true, get: function () { return __importDefault(DynamicHeading_1).default; } });
-var DynamicIcon_1 = require("./icon/DynamicIcon");
-Object.defineProperty(exports, "DynamicIcon", { enumerable: true, get: function () { return __importDefault(DynamicIcon_1).default; } });
-var DynamicInfo_1 = require("./info/DynamicInfo");
-Object.defineProperty(exports, "DynamicInfo", { enumerable: true, get: function () { return __importDefault(DynamicInfo_1).default; } });
-var DynamicImage_1 = require("./image/DynamicImage");
-Object.defineProperty(exports, "DynamicImage", { enumerable: true, get: function () { return __importDefault(DynamicImage_1).default; } });
-var DynamicLayout_1 = require("./DynamicLayout");
-Object.defineProperty(exports, "DynamicLayout", { enumerable: true, get: function () { return __importDefault(DynamicLayout_1).default; } });
-var DynamicList_1 = require("./list/DynamicList");
-Object.defineProperty(exports, "DynamicList", { enumerable: true, get: function () { return __importDefault(DynamicList_1).default; } });
-var DynamicLoadingIndicator_1 = require("./loadingIndicator/DynamicLoadingIndicator");
-Object.defineProperty(exports, "DynamicLoadingIndicator", { enumerable: true, get: function () { return __importDefault(DynamicLoadingIndicator_1).default; } });
-var DynamicParagraph_1 = require("./paragraph/DynamicParagraph");
-Object.defineProperty(exports, "DynamicParagraph", { enumerable: true, get: function () { return __importDefault(DynamicParagraph_1).default; } });
-var DynamicReview_1 = require("./review/DynamicReview");
-Object.defineProperty(exports, "DynamicReview", { enumerable: true, get: function () { return __importDefault(DynamicReview_1).default; } });

package/build/layout/info/DynamicInfo.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const components_1 = require("@transferwise/components");
-const utils_1 = require("../utils");
-const DynamicInfo = ({ component }) => {
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, utils_1.getTextAlignmentAndMargin)(component) }, { children: (0, jsx_runtime_1.jsx)(components_1.Markdown, Object.assign({ config: { link: { target: '_blank' } } }, { children: component.markdown })) })));
-};
-exports.default = DynamicInfo;

package/build/layout/list/DynamicList.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-const components_1 = require("@transferwise/components");
-const __1 = require("..");
-const utils_1 = require("../utils");
-const DynamicList = ({ component }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, utils_1.getMarginBottom)(component.margin || 'md') }, { children: [component.title ? (0, jsx_runtime_1.jsxs)("h4", Object.assign({ className: "m-b-2" }, { children: [" ", component.title, " "] })) : null, component.items.map(mapItemToSummary)] })));
-};
-function mapItemToSummary({ title, description, icon, status }) {
-    const props = Object.assign(Object.assign({ key: `${title}/${description || ''}`, title,
-        description }, ((icon === null || icon === void 0 ? void 0 : icon.name) ? { icon: (0, jsx_runtime_1.jsx)(__1.DynamicIcon, { type: icon.name }) } : {})), (status ? { status: statusMap[status] } : {}));
-    return (0, jsx_runtime_1.jsx)(components_1.Summary, Object.assign({}, props));
-}
-const statusMap = {
-    positive: 'done',
-    warning: 'pending',
-    neutral: 'notDone',
-};
-exports.default = DynamicList;

package/build/layout/loadingIndicator/DynamicLoadingIndicator.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const components_1 = require("@transferwise/components");
-const utils_1 = require("../utils");
-const DynamicLoadingIndicator = ({ component }) => {
-    const { margin, size = 'md' } = component;
-    return ((0, jsx_runtime_1.jsx)(components_1.Loader, { size: size, classNames: {
-            'tw-loader': `tw-loader m-x-auto ${(0, utils_1.getMarginBottom)(margin)}`,
-        }, "data-testid": "loading-indicator" }));
-};
-exports.default = DynamicLoadingIndicator;

package/build/layout/paragraph/DynamicParagraph.js

@@ -1,30 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const components_1 = require("@transferwise/components");
-const react_intl_1 = require("react-intl");
-const utils_1 = require("../utils");
-const DynamicParagraph_messages_1 = __importDefault(require("./DynamicParagraph.messages"));
-const useSnackBarIfAvailable_1 = require("./useSnackBarIfAvailable");
-const DynamicParagraph = ({ component }) => component.control === 'copyable' ? ((0, jsx_runtime_1.jsx)(CopyableDynamicParagraph, { component: component })) : ((0, jsx_runtime_1.jsx)(BasicDynamicParagraph, { component: component }));
-const BasicDynamicParagraph = ({ component }) => ((0, jsx_runtime_1.jsxs)("p", Object.assign({ className: (0, utils_1.getTextAlignmentAndMargin)(component) }, { children: [" ", component.text, " "] })));
-const CopyableDynamicParagraph = ({ component }) => {
-    const { formatMessage } = (0, react_intl_1.useIntl)();
-    const createSnackbar = (0, useSnackBarIfAvailable_1.useSnackBarIfAvailable)();
-    const { text } = component;
-    const copy = () => {
-        var _a;
-        (_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText(text).then(() => createSnackbar({ text: formatMessage(DynamicParagraph_messages_1.default.copied) })).catch(noop);
-    };
-    const classNames = (0, utils_1.getTextAlignmentAndMargin)({ align: component.align, margin: 'sm' }) + ' form-control';
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, utils_1.getTextAlignmentAndMargin)(component) }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", className: classNames, value: text, readOnly: true, 
-                // eslint-disable-next-line react/forbid-dom-props
-                style: { textOverflow: 'ellipsis' } }), (0, jsx_runtime_1.jsx)(components_1.Button, Object.assign({ block: true, onClick: copy }, { children: formatMessage(DynamicParagraph_messages_1.default.copy) }))] })));
-};
-function noop() {
-    //
-}
-exports.default = DynamicParagraph;

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

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const 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

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

package/build/layout/review/DynamicReview.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const components_1 = require("@transferwise/components");
-const utils_1 = require("../utils");
-const mapFieldsToDefinitions = ({ label, value }, index) => {
-    return { key: String(index), title: label, value };
-};
-const getReviewLayout = (orientation) => {
-    return orientation === 'horizontal' ? 'HORIZONTAL_RIGHT_ALIGNED' : 'VERTICAL_ONE_COLUMN';
-};
-const DynamicReview = (props) => {
-    const review = props.component;
-    const margin = (0, utils_1.getMarginBottom)(review.margin || 'xs');
-    const getReviewAction = (action) => {
-        return ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: action.url, className: "pull-right", role: "button", onClick: (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", Object.assign({ className: "m-b-2" }, { children: [review.title, review.action && getReviewAction(review.action)] }))), (0, jsx_runtime_1.jsx)("div", Object.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

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTextAlignmentAndMargin = exports.getMarginBottom = void 0;
-const getMarginBottom = (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;
-const getTextAlignment = (align) => {
-    switch (align) {
-        case 'right':
-            return 'text-xs-right';
-        case 'center':
-            return 'text-xs-center';
-        case 'left':
-        default:
-            return '';
-    }
-};
-const getTextAlignmentAndMargin = (component) => `${getTextAlignment(component.align)} ${getMarginBottom(component.margin)}`;
-exports.getTextAlignmentAndMargin = getTextAlignmentAndMargin;

package/build/step/cameraStep/CameraStep.js

@@ -1,84 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const contexts_1 = require("../../common/contexts");
-const utils_1 = require("../../common/utils");
-const types_1 = require("../../types");
-const cameraCapture_1 = __importDefault(require("./cameraCapture"));
-function blobToBase64(blob) {
-    return new Promise((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
-        const reader = new FileReader();
-        // eslint-disable-next-line fp/no-mutation
-        reader.onloadend = () => resolve(reader.result);
-        reader.readAsDataURL(blob);
-    });
-}
-const CameraStep = (props) => {
-    const { step, model, onModelChange, onAction } = props;
-    const onEvent = (0, contexts_1.useEventDispatcher)();
-    const objectSchema = getObjectSchema(step);
-    const cameraSchema = getCameraSchema(step);
-    const action = getFirstAction(step);
-    const { title, image, cameraConfig } = cameraSchema;
-    const { assets, direction, instructions } = cameraConfig || {};
-    const { overlay, outline } = assets || {};
-    const { url: imageUrl } = image || {};
-    const [captureClicked, setCaptureClicked] = (0, react_1.useState)(false);
-    // We need to wait for model to update before we call onAction()
-    (0, react_1.useEffect)(() => {
-        if (captureClicked) {
-            onAction(action);
-        }
-    }, [model]);
-    const handleCapture = async (blob) => {
-        const { $id } = cameraSchema;
-        if (blob) {
-            const newValue = await blobToBase64(blob);
-            const newModel = { [$id || '']: newValue };
-            setCaptureClicked(true);
-            onModelChange({
-                model: newModel,
-                formSchema: objectSchema,
-                triggerModel: newValue,
-                triggerSchema: cameraSchema,
-            });
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(cameraCapture_1.default, { overlay: overlay, outline: outline, title: title, imageUrl: imageUrl, instructions: instructions, direction: direction, onEvent: onEvent, onCapture: (blob) => {
-            void handleCapture(blob);
-        } }));
-};
-exports.default = CameraStep;
-function getObjectSchema(step) {
-    const nonHiddenSchemas = (0, utils_1.filterHiddenSchemas)(step.schemas || []);
-    const 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) {
-    const objectSchema = getObjectSchema(step);
-    const 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

@@ -1,70 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_intl_1 = require("react-intl");
-const react_webcam_1 = __importDefault(require("react-webcam"));
-const CameraCapture_messages_1 = __importDefault(require("./CameraCapture.messages"));
-const components_1 = require("./components");
-const hooks_1 = require("./hooks");
-const Overlay_1 = __importDefault(require("./overlay/Overlay"));
-const screens_1 = require("./screens");
-const tracking_1 = require("./tracking");
-const utils_1 = require("./utils");
-const CameraCapture = ({ direction = 'back', overlay = '', outline = '', imageUrl = '', title = '', instructions = '', showReview = false, onCapture, onEvent, }) => {
-    const [mode, setMode] = (0, react_1.useState)('CAPTURE');
-    const [isVideoMirrored, setIsVideoMirrored] = (0, react_1.useState)(false);
-    const [ready, setReady] = (0, react_1.useState)(false);
-    const [reviewImage, setReviewImage] = (0, react_1.useState)();
-    const webcamReference = (0, react_1.useRef)(null);
-    const { videoConstraints } = (0, hooks_1.useVideoConstraints)(direction);
-    const intl = (0, react_intl_1.useIntl)();
-    const handleCapture = (0, react_1.useCallback)(async () => {
-        var _a, _b, _c, _d, _e, _f;
-        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) {
-            (_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();
-            const canvas = await (0, utils_1.generateCanvasFromVideo)((_f = webcamReference === null || webcamReference === void 0 ? void 0 : webcamReference.current) === null || _f === void 0 ? void 0 : _f.video);
-            canvas === null || canvas === void 0 ? void 0 : canvas.toBlob((blob) => {
-                if (blob) {
-                    if (showReview) {
-                        const source = window.URL.createObjectURL(blob);
-                        setReviewImage({ source, blob });
-                        setMode('REVIEW');
-                    }
-                    else {
-                        onCapture(blob);
-                    }
-                }
-            }, 'image/jpeg', 0.92);
-        }
-    }, [webcamReference, showReview, setReviewImage, setMode, onCapture, isVideoMirrored]);
-    const handleUserMediaError = (0, react_1.useCallback)((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]);
-    const handleUserMedia = (0, react_1.useCallback)((stream) => {
-        setReady(true);
-        setIsVideoMirrored((0, utils_1.isSelfieCamera)(stream));
-        void (0, tracking_1.trackCameraFeedStarted)(onEvent, { direction }, stream);
-    }, [setIsVideoMirrored, onEvent, direction]);
-    const handleReviewSubmit = () => {
-        onCapture((reviewImage === null || reviewImage === void 0 ? void 0 : reviewImage.blob) || null);
-    };
-    const handleReviewRetry = () => {
-        setMode('CAPTURE');
-        setReviewImage(undefined);
-    };
-    const handleRetryCameraAccess = () => setMode('CAPTURE');
-    const 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: () => void handleCapture() })] }));
-    const 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", Object.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

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const 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

@@ -1,18 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReviewBottomBar = exports.CaptureBottomBar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const components_1 = require("@transferwise/components");
-const react_intl_1 = require("react-intl");
-const CameraCapture_messages_1 = __importDefault(require("../CameraCapture.messages"));
-const CaptureBottomBar = ({ onCapture }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "bottom-bar" }, { children: (0, jsx_runtime_1.jsx)(CaptureButton, { onClick: onCapture }) })));
-exports.CaptureBottomBar = CaptureBottomBar;
-const ReviewBottomBar = ({ onSubmit, onRetry, }) => {
-    const intl = (0, react_intl_1.useIntl)();
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "bottom-bar p-x-2" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "row" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-xs-12 col-md-6 col-md-offset-3" }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, Object.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, Object.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;
-const CaptureButton = ({ onClick }) => ((0, jsx_runtime_1.jsx)("button", Object.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

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useVideoConstraints = void 0;
-const react_1 = require("react");
-const utils_1 = require("../utils");
-const useVideoConstraints = (direction) => {
-    const [videoConstraints, setVideoConstraints] = (0, react_1.useState)();
-    const 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)(() => {
-        void getVideoConstraints(direction).then(setVideoConstraints);
-    }, [direction]);
-    const getVideoConstraints = async (direction) => {
-        if (direction === 'back') {
-            const mainCamera = (await (0, utils_1.getAvailableVideoDevices)()).find(utils_1.isMainBackCamera);
-            if (mainCamera === null || mainCamera === void 0 ? void 0 : mainCamera.deviceId) {
-                return Object.assign(Object.assign({}, defaultVideoConstraints), { deviceId: { exact: mainCamera.deviceId } });
-            }
-        }
-        return defaultVideoConstraints;
-    };
-    return { videoConstraints };
-};
-exports.useVideoConstraints = useVideoConstraints;

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

@@ -1,8 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var CameraCapture_1 = require("./CameraCapture");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(CameraCapture_1).default; } });

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

@@ -1,68 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable fp/no-mutation */
-const react_1 = require("react");
-const debounce_1 = require("../../../../common/utils/debounce");
-const captureButtonHeight = 92;
-const reviewButtonsHeight = 120;
-const imageHeight = 40;
-const titleHeight = 32;
-const instructionsHeight = 48;
-const reviewInstructionsHeight = 40;
-const overlayMaxWidth = 800;
-const Overlay = ({ overlay, outline, imageUrl, title, instructions, reviewInstructions, }) => {
-    const svgReference = (0, react_1.useRef)(null);
-    /*
-      SVG doesn't always rerender when screen orientation changes,
-      so need to force rerender
-     */
-    (0, react_1.useEffect)(() => {
-        const listener = (0, debounce_1.debounce)(() => {
-            var _a;
-            if ((_a = svgReference.current) === null || _a === void 0 ? void 0 : _a.innerHTML) {
-                const reference = svgReference.current;
-                reference.innerHTML += '';
-            }
-        }, 100);
-        window.addEventListener('resize', listener);
-        return () => window.removeEventListener('resize', listener);
-    });
-    let helperBoxHeight = (imageUrl ? imageHeight : 0) +
-        (title ? titleHeight : 0) +
-        (instructions ? instructionsHeight : 0);
-    let 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", Object.assign({ className: "camera-capture-title" }, { children: title })), instructions && (0, jsx_runtime_1.jsx)("small", Object.assign({ className: "camera-capture-instructions" }, { children: instructions }))] }));
-    const 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", Object.assign({ className: "camera-capture-instructions" }, { children: reviewInstructions }));
-        const frameWithReviewInstructionsMinBottomMargin = reviewButtonsHeight + reviewInstructionsHeight;
-        if (frameBottomMargin < frameWithReviewInstructionsMinBottomMargin) {
-            helperBox = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-        }
-    }
-    const framePosition = {
-        x: '50%',
-        y: '5%',
-        width: `min(90%, ${overlayMaxWidth}px)`,
-        height: `calc(90% - ${frameBottomMargin}px)`,
-        style: { transform: `translateX(max(-45%, -${overlayMaxWidth / 2}px))` },
-    };
-    const helperBoxPosition = {
-        style: {
-            left: '5%',
-            top: `calc(100% - ${frameBottomMargin}px - 5%)`,
-            height: `calc(${helperBoxHeight}px + 5%)`,
-            width: '90%',
-        },
-    };
-    return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ ref: svgReference, xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("mask", Object.assign({ id: "mask" }, { children: [(0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: "#fff" }), (0, jsx_runtime_1.jsx)("image", Object.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", Object.assign({ href: outline }, framePosition)), (0, jsx_runtime_1.jsx)("foreignObject", Object.assign({ width: "100%", height: "100%" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "camera-capture-text-and-image-container" }, helperBoxPosition, { children: helperBox })) }))] })));
-};
-exports.default = Overlay;