@reltio/components 1.4.2216 → 1.4.2218

package/AttributeVerificationStatus/AttributeVerificationStatus.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AttributeType, NestedAttributeValue } from '@reltio/mdm-sdk';
+type Props = {
+    attributeType: AttributeType;
+    attributeValue: NestedAttributeValue;
+};
+export declare const AttributeVerificationStatus: ({ attributeType, attributeValue }: Props) => React.JSX.Element;
+export {};

package/AttributeVerificationStatus/AttributeVerificationStatus.js

@@ -0,0 +1,22 @@
+import React, { useMemo } from 'react';
+import { isNil } from 'ramda';
+import classnames from 'classnames';
+import Tooltip from '@mui/material/Tooltip';
+import { useContextSelector } from '@fluentui/react-context-selector';
+import { AttributesVerificationContext } from '../contexts/AttributesVerificationContext';
+import { getIconByVerificationStatus, getTooltipTitleByVerificationStatus } from './helpers';
+import styles from './AttributeVerificationStatus.module.css';
+export var AttributeVerificationStatus = function (_a) {
+    var attributeType = _a.attributeType, attributeValue = _a.attributeValue;
+    var getVerificationStatus = useContextSelector(AttributesVerificationContext, function (context) { return context.getVerificationStatus; });
+    var verificationStatus = useMemo(function () { return getVerificationStatus(attributeType, attributeValue); }, [getVerificationStatus, attributeType, attributeValue]);
+    if (isNil(verificationStatus)) {
+        return null;
+    }
+    var Icon = getIconByVerificationStatus(verificationStatus.status);
+    var tooltipTitle = getTooltipTitleByVerificationStatus(verificationStatus);
+    return (React.createElement("div", { className: classnames(styles.status, styles[verificationStatus.status]), "data-reltio-id": "attribute-verification-status-".concat(verificationStatus.status) },
+        React.createElement(Tooltip, { title: tooltipTitle, placement: "bottom" },
+            React.createElement("span", { className: styles.icon },
+                React.createElement(Icon, null)))));
+};

package/AttributeVerificationStatus/AttributeVerificationStatus.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"status":"AttributeVerificationStatus-status--NwPR6","valid":"AttributeVerificationStatus-valid--PIGHP","invalid":"AttributeVerificationStatus-invalid--B7p6E","outdated":"AttributeVerificationStatus-outdated--l5khN","maybe":"AttributeVerificationStatus-maybe--egCRg","accept_all":"AttributeVerificationStatus-accept_all--jgMx5","icon":"AttributeVerificationStatus-icon--C8xBC"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.AttributeVerificationStatus-status--NwPR6{height:18px;margin-left:4px;position:relative;width:14px}.AttributeVerificationStatus-status--NwPR6:after{border-radius:50%;content:"";height:6px;left:calc(50% - 3px);position:absolute;top:calc(50% - 3px);width:6px}.AttributeVerificationStatus-valid--PIGHP:after{background-color:rgba(33,150,83,.5)}.AttributeVerificationStatus-invalid--B7p6E:after{background-color:rgba(235,87,87,.5)}.AttributeVerificationStatus-accept_all--jgMx5:after,.AttributeVerificationStatus-maybe--egCRg:after,.AttributeVerificationStatus-outdated--l5khN:after{background-color:rgba(242,201,76,.5)}.AttributeVerificationStatus-icon--C8xBC{background-color:#fff;left:0;opacity:var(--verify-status-opacity);position:absolute;top:2px;z-index:1}.AttributeVerificationStatus-icon--C8xBC:hover{background-color:#fff}`;
+    head.appendChild(style);
+}
+export default styles;

package/AttributeVerificationStatus/helpers.d.ts

@@ -0,0 +1,8 @@
+import { InputVerificationAttribute } from '@reltio/mdm-sdk';
+import { VerificationStatus } from '../contexts/AttributesVerificationContext/helpers';
+export declare const getIconByVerificationStatus: (verificationStatus: VerificationStatus) => import("react").FC<import("react").SVGProps<SVGSVGElement>> | (() => any);
+export declare const getTooltipTitleByVerificationStatus: ({ status, lastVerifiedTime, verificationType }: {
+    status: VerificationStatus;
+    lastVerifiedTime: number | null;
+    verificationType: InputVerificationAttribute;
+}) => string;

package/AttributeVerificationStatus/helpers.js

@@ -0,0 +1,56 @@
+import i18n from 'ui-i18n';
+import { InputVerificationAttribute } from '@reltio/mdm-sdk';
+import { EmptyStub } from '../EmptyStub';
+import VerificationInvalidIcon from '../icons/VerificationInvalidIcon';
+import VerificationValidIcon from '../icons/VerificationValidIcon';
+import VerificationOutdatedIcon from '../icons/VerificationOutdatedIcon';
+import VerificationMaybeIcon from '../icons/VerificationMaybeIcon';
+import { VerificationStatus } from '../contexts/AttributesVerificationContext/helpers';
+export var getIconByVerificationStatus = function (verificationStatus) {
+    switch (verificationStatus) {
+        case VerificationStatus.VALID:
+            return VerificationValidIcon;
+        case VerificationStatus.INVALID:
+            return VerificationInvalidIcon;
+        case VerificationStatus.OUTDATED:
+            return VerificationOutdatedIcon;
+        case VerificationStatus.MAYBE:
+        case VerificationStatus.ACCEPT_ALL:
+            return VerificationMaybeIcon;
+        default:
+            return EmptyStub;
+    }
+};
+export var getTooltipTitleByVerificationStatus = function (_a) {
+    var status = _a.status, lastVerifiedTime = _a.lastVerifiedTime, verificationType = _a.verificationType;
+    var attributeLabel = verificationType === InputVerificationAttribute.Email ? i18n.text('email') : i18n.text('phone number');
+    var date = i18n.date(lastVerifiedTime, 'L LTS');
+    switch (status) {
+        case VerificationStatus.VALID:
+            return i18n.text('The ${attributeLabel} is valid. Last verified on ${date}', {
+                attributeLabel: attributeLabel,
+                date: date
+            });
+        case VerificationStatus.INVALID:
+            return i18n.text('The ${attributeLabel} is invalid. Last verified on ${date}', {
+                attributeLabel: attributeLabel,
+                date: date
+            });
+        case VerificationStatus.OUTDATED:
+            return i18n.text('The verification for this has expired. It was valid when last verified on ${date}', {
+                date: date
+            });
+        case VerificationStatus.MAYBE:
+            return i18n.text('The ${attributeLabel} may be invalid. Last verified on ${date}', {
+                attributeLabel: attributeLabel,
+                date: date
+            });
+        case VerificationStatus.ACCEPT_ALL:
+            return i18n.text('The ${attributeLabel} may be valid. Last verified on ${date}', {
+                attributeLabel: attributeLabel,
+                date: date
+            });
+        default:
+            return null;
+    }
+};

package/ReadOnlyAttributesPager/components/MultiLineRenderer/MultiLineRenderer.js

@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from 'react';
-import { min } from 'ramda';
+import { min, F } from 'ramda';
 import classnames from 'classnames';
+import { useContextSelector } from '@fluentui/react-context-selector';
 import { checkHasMasking } from '@reltio/mdm-sdk';
 import { ReadOnlyAttribute } from '../../../ReadOnlyAttributesFactory';
 import { AttributeTitle } from '../../../AttributeTitle';
@@ -10,11 +11,14 @@ import { OvIcon } from '../../../OvIcon';
 import { DescriptionIcon } from '../../../DescriptionIcon';
 import { ControlAttributeIcon } from '../../../ControlAttributeIcon';
 import { useMdmControlAttributes, useMdmMetadata, useMdmShowMasking } from '../../../contexts/MdmModuleContext';
+import { AttributesVerificationContext } from '../../../contexts/AttributesVerificationContext';
+import { VerificationButton } from '../../../VerificationButton/VerificationButton';
 import { useMultiLineStyles } from '../../styles';
 export var MultiLineRenderer = function (_a) {
     var max = _a.max, values = _a.values, nonVisibleValues = _a.nonVisibleValues, totalVisibleValues = _a.totalVisibleValues, attributeType = _a.attributeType, parentUri = _a.parentUri, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, showNonOv = _a.showNonOv, totalNonVisibleValues = _a.totalNonVisibleValues, classes = _a.classes;
     var styles = useMultiLineStyles();
     var _b = useState(max), visibleValuesCount = _b[0], setVisibleValuesCount = _b[1];
+    var isVerificationAttribute = useContextSelector(AttributesVerificationContext, function (context) { return (context === null || context === void 0 ? void 0 : context.isVerificationAttribute) || F; });
     var controlAttributes = useMdmControlAttributes();
     var isControlAttribute = useMemo(function () { return controlAttributes.includes(attributeType.uri); }, [controlAttributes, attributeType.uri]);
     var hasPaging = max < totalVisibleValues;
@@ -45,12 +49,14 @@ export var MultiLineRenderer = function (_a) {
     };
     var shownValues = values.slice(0, visibleValuesCount);
     var hiddenValuesCount = totalVisibleValues - visibleValuesCount;
+    var showVerificationButton = isVerificationAttribute(attributeType);
     return (React.createElement("div", { "data-reltio-id": "multi-line-renderer", className: styles.wrapper },
         React.createElement("div", { className: styles.titleRow },
             React.createElement(AttributeTitle, { label: label, className: classnames(styles.title, classes === null || classes === void 0 ? void 0 : classes.title), "data-reltio-id": "reltio-attribute-label" }),
             React.createElement(DescriptionIcon, { description: description }),
             isControlAttribute && React.createElement(ControlAttributeIcon, null),
-            React.createElement(OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues })),
+            React.createElement(OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues }),
+            showVerificationButton && React.createElement(VerificationButton, { attributeType: attributeType })),
         React.createElement("div", { className: styles.attributes }, shownValues.map(function (value) { return (React.createElement(ReadOnlyAttribute, { key: value.uri, className: classnames(styles.attribute, classes === null || classes === void 0 ? void 0 : classes.content), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv, classes: classes })); })),
         showMore && (React.createElement(ShowMore, { moreNumber: min(max, hiddenValuesCount), valueNumber: hiddenValuesCount, onClick: onShowMore })),
         showLess && React.createElement(ShowLess, { onClick: onShowLess })));

package/ReadOnlyComplexAttribute/ReadOnlyComplexAttribute.js

@@ -10,19 +10,22 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { F } from 'ramda';
 import classnames from 'classnames';
+import { useContextSelector } from '@fluentui/react-context-selector';
 import { isAnalyticAttribute, createRelatedObjectUris, isOv, isSpecialAttribute, getObjectTypeByAttributeUri } from '@reltio/mdm-sdk';
 import Typography from '@mui/material/Typography';
 import { ReadOnlyAttributesList } from '../ReadOnlyAttributesList';
 import { ArrowExpandButton } from '../ArrowExpandButton';
 import { CommentsContainer } from '../CommentsContainer';
 import { HighlightedValuesContext } from '../contexts/HighlightedValuesContext';
+import { AttributesVerificationContext } from '../contexts/AttributesVerificationContext';
 import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../constants/classnames';
-import { useStyles } from './styles';
+import { AttributeVerificationStatus } from '../AttributeVerificationStatus/AttributeVerificationStatus';
+import styles from './ReadOnlyComplexAttribute.module.css';
 export var ReadOnlyComplexAttribute = function (_a) {
     var _b;
     var attributeTypesList = _a.attributeTypesList, attributeValue = _a.attributeValue, label = _a.label, _c = _a.expanded, expandedProp = _c === void 0 ? false : _c, children = _a.children, showNonOv = _a.showNonOv, attributeType = _a.attributeType, classes = _a.classes, LabelRenderer = _a.LabelRenderer, RightSlot = _a.RightSlot;
-    var styles = useStyles();
     var uri = attributeValue.uri;
     var _d = useState(false), expanded = _d[0], setExpanded = _d[1];
     var _e = useContext(HighlightedValuesContext), _f = _e.highlightedValuesUris, highlightedValuesUris = _f === void 0 ? [] : _f, highlightedClassName = _e.highlightedClassName;
@@ -31,7 +34,9 @@ export var ReadOnlyComplexAttribute = function (_a) {
     }, [expandedProp]);
     var hasAnalyticValue = (attributeTypesList || []).some(function (attributeType) { return isAnalyticAttribute(attributeType); });
     var attributeListEntity = useMemo(function () { return (__assign({ attributes: hasAnalyticValue ? null : attributeValue.value, analyticsAttributes: hasAnalyticValue ? attributeValue.value : null }, (isSpecialAttribute(attributeType) ? attributeValue.value : {}))); }, [attributeValue, hasAnalyticValue, attributeType]);
+    var isVerificationAttribute = useContextSelector(AttributesVerificationContext, function (context) { return (context === null || context === void 0 ? void 0 : context.isVerificationAttribute) || F; });
     var objectType = getObjectTypeByAttributeUri(attributeValue.uri);
+    var showVerificationStatus = isVerificationAttribute(attributeType);
     return (React.createElement("div", { className: styles.complexContainer },
         React.createElement("div", { className: classnames(styles.labelContainer, COMMENTS_CONTAINER_VISIBILITY_AREA) },
             React.createElement(ArrowExpandButton, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
@@ -39,7 +44,9 @@ export var ReadOnlyComplexAttribute = function (_a) {
                 React.createElement(Typography, { component: "span", variant: "body2", classes: { body2: styles.label }, className: classnames((_b = {},
                         _b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
                         _b[styles.ovFalse] = !isOv(attributeValue),
-                        _b)), "data-reltio-id": "reltio-attribute-complex-label" }, label),
+                        _b)), "data-reltio-id": "reltio-attribute-complex-label" },
+                    label,
+                    showVerificationStatus && (React.createElement(AttributeVerificationStatus, { attributeType: attributeType, attributeValue: attributeValue }))),
                 React.createElement("div", { className: styles.spacer }),
                 RightSlot && React.createElement(RightSlot, { attributeType: attributeType, attributeValue: attributeValue }),
                 React.createElement(CommentsContainer, { uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {

package/ReadOnlyComplexAttribute/ReadOnlyComplexAttribute.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"complexContainer":"ReadOnlyComplexAttribute-complexContainer--DybRT","labelContainer":"ReadOnlyComplexAttribute-labelContainer--x4Ikp","label":"ReadOnlyComplexAttribute-label--BqM8F","spacer":"ReadOnlyComplexAttribute-spacer--raB-d","ovFalse":"ReadOnlyComplexAttribute-ovFalse--9sySx"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ReadOnlyComplexAttribute-complexContainer--DybRT{margin-top:1px}.ReadOnlyComplexAttribute-labelContainer--x4Ikp{display:flex;min-height:18px;--verify-status-opacity:0}.ReadOnlyComplexAttribute-labelContainer--x4Ikp:hover{--verify-status-opacity:1}.ReadOnlyComplexAttribute-label--BqM8F{display:inline-flex;font-size:13px;letter-spacing:normal;line-height:16px;margin-left:2px;white-space:break-spaces}.ReadOnlyComplexAttribute-spacer--raB-d{flex:1}.ReadOnlyComplexAttribute-ovFalse--9sySx{opacity:var(--mui-inactive-opacity)}`;
+    head.appendChild(style);
+}
+export default styles;

package/VerificationButton/VerificationButton.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { AttributeType } from '@reltio/mdm-sdk';
+export declare enum VerificationButtonSize {
+    SMALL = "small",
+    MEDIUM = "medium"
+}
+type Props = {
+    attributeType?: AttributeType;
+    size?: VerificationButtonSize;
+    className?: string;
+};
+export declare const VerificationButton: ({ attributeType, size, className }: Props) => React.JSX.Element;
+export {};

package/VerificationButton/VerificationButton.js

@@ -0,0 +1,150 @@
+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 = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["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 _a, _b;
+import React, { useCallback, useMemo, useState } from 'react';
+import { isNil } from 'ramda';
+import classnames from 'classnames';
+import { useContextSelector } from '@fluentui/react-context-selector';
+import CircularProgress from '@mui/material/CircularProgress';
+import i18n from 'ui-i18n';
+import VerificationIcon from '../icons/VerifyAllIcon';
+import { useSafePromise } from '../hooks/useSafePromise';
+import { InputVerificationAttribute, verifyAttributes, VerifyAttributesClientFilter } from '@reltio/mdm-sdk';
+import { useMdmEntityUri, useMdmAction } from '../contexts/MdmModuleContext';
+import { AttributesVerificationContext } from '../contexts/AttributesVerificationContext';
+import { showDefaultErrorMessage } from '../helpers/errors';
+import { useCssVariableStyles } from '../hooks/useCssVariableStyles';
+import { SmallIconButtonWithTooltip } from '../SmallIconButton';
+import styles from './VerificationButton.module.css';
+export var VerificationButtonSize;
+(function (VerificationButtonSize) {
+    VerificationButtonSize["SMALL"] = "small";
+    VerificationButtonSize["MEDIUM"] = "medium";
+})(VerificationButtonSize || (VerificationButtonSize = {}));
+var ICON_SIZES = (_a = {},
+    _a[VerificationButtonSize.SMALL] = 16,
+    _a[VerificationButtonSize.MEDIUM] = 24,
+    _a);
+var BUTTON_SIZES = (_b = {},
+    _b[VerificationButtonSize.SMALL] = 20,
+    _b[VerificationButtonSize.MEDIUM] = 36,
+    _b);
+var getTooltipTitle = function (verificationTypes) {
+    if (verificationTypes.includes(InputVerificationAttribute.Email) &&
+        verificationTypes.includes(InputVerificationAttribute.Phone)) {
+        return i18n.text('Verify all email and phone numbers');
+    }
+    if (verificationTypes.includes(InputVerificationAttribute.Email)) {
+        return i18n.text('Verify all emails');
+    }
+    if (verificationTypes.includes(InputVerificationAttribute.Phone)) {
+        return i18n.text('Verify all phone numbers');
+    }
+    return null;
+};
+export var VerificationButton = function (_a) {
+    var attributeType = _a.attributeType, _b = _a.size, size = _b === void 0 ? VerificationButtonSize.SMALL : _b, className = _a.className;
+    var variableStyles = useCssVariableStyles({
+        '--icon-size': ICON_SIZES[size] + 'px',
+        '--button-size': BUTTON_SIZES[size] + 'px'
+    });
+    var _c = useState(false), loading = _c[0], setLoading = _c[1];
+    var entityUri = useMdmEntityUri();
+    var updateEntityAttributeValues = useMdmAction('updateEntityAttributeValues');
+    var getVerificationType = useContextSelector(AttributesVerificationContext, function (context) { return context.getVerificationType; });
+    var allVerificationTypes = useContextSelector(AttributesVerificationContext, function (context) {
+        return context.getAllVerificationTypes();
+    });
+    var verificationType = attributeType ? getVerificationType(attributeType) : null;
+    var verificationAttributeTypeUris = useContextSelector(AttributesVerificationContext, function (context) { return context.verificationAttributeTypeUris; });
+    var options = useMemo(function () {
+        if (isNil(attributeType))
+            return {};
+        var clientFilter = verificationType === InputVerificationAttribute.Email
+            ? VerifyAttributesClientFilter.EmailVerifier
+            : VerifyAttributesClientFilter.PhoneVerifier;
+        return {
+            clientFilter: clientFilter
+        };
+    }, [attributeType, verificationType]);
+    var verifySafePromise = useSafePromise();
+    var handleClick = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var attributeTypeUris, updatedEntity, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    attributeTypeUris = attributeType ? [attributeType.uri] : verificationAttributeTypeUris;
+                    setLoading(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, verifySafePromise(verifyAttributes({ entityUri: entityUri, options: options }))];
+                case 2:
+                    updatedEntity = _a.sent();
+                    if (updatedEntity) {
+                        updateEntityAttributeValues({
+                            updatedEntity: updatedEntity,
+                            attributeTypeUris: attributeTypeUris
+                        });
+                    }
+                    return [3 /*break*/, 5];
+                case 3:
+                    error_1 = _a.sent();
+                    showDefaultErrorMessage(error_1);
+                    return [3 /*break*/, 5];
+                case 4:
+                    setLoading(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); }, [
+        verifySafePromise,
+        entityUri,
+        options,
+        attributeType,
+        updateEntityAttributeValues,
+        verificationAttributeTypeUris
+    ]);
+    var currentVerificationTypes = useMemo(function () {
+        if (verificationType)
+            return [verificationType];
+        return allVerificationTypes;
+    }, [verificationType, allVerificationTypes]);
+    var tooltipTitle = getTooltipTitle(currentVerificationTypes);
+    return (React.createElement("div", { className: classnames(styles.root, className), style: variableStyles }, loading ? (React.createElement(CircularProgress, { size: BUTTON_SIZES[size] })) : (React.createElement(SmallIconButtonWithTooltip, { icon: VerificationIcon, iconClassName: styles.icon, className: styles.iconButton, tooltipTitle: tooltipTitle, onClick: handleClick }))));
+};

package/VerificationButton/VerificationButton.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"root":"VerificationButton-root--0piRf","icon":"VerificationButton-icon--hdGgX","iconButton":"VerificationButton-iconButton--OUG-s"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.VerificationButton-root--0piRf{display:inline-block;margin-left:2px}.VerificationButton-root--0piRf .VerificationButton-icon--hdGgX{height:var(--icon-size);width:var(--icon-size)}.VerificationButton-root--0piRf .VerificationButton-iconButton--OUG-s{height:var(--button-size);width:var(--button-size)}`;
+    head.appendChild(style);
+}
+export default styles;

package/cjs/AttributeVerificationStatus/AttributeVerificationStatus.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AttributeType, NestedAttributeValue } from '@reltio/mdm-sdk';
+type Props = {
+    attributeType: AttributeType;
+    attributeValue: NestedAttributeValue;
+};
+export declare const AttributeVerificationStatus: ({ attributeType, attributeValue }: Props) => React.JSX.Element;
+export {};

package/cjs/AttributeVerificationStatus/AttributeVerificationStatus.js

@@ -0,0 +1,52 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributeVerificationStatus = void 0;
+var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var classnames_1 = __importDefault(require("classnames"));
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
+var react_context_selector_1 = require("@fluentui/react-context-selector");
+var AttributesVerificationContext_1 = require("../contexts/AttributesVerificationContext");
+var helpers_1 = require("./helpers");
+var AttributeVerificationStatus_module_css_1 = __importDefault(require("./AttributeVerificationStatus.module.css"));
+var AttributeVerificationStatus = function (_a) {
+    var attributeType = _a.attributeType, attributeValue = _a.attributeValue;
+    var getVerificationStatus = (0, react_context_selector_1.useContextSelector)(AttributesVerificationContext_1.AttributesVerificationContext, function (context) { return context.getVerificationStatus; });
+    var verificationStatus = (0, react_1.useMemo)(function () { return getVerificationStatus(attributeType, attributeValue); }, [getVerificationStatus, attributeType, attributeValue]);
+    if ((0, ramda_1.isNil)(verificationStatus)) {
+        return null;
+    }
+    var Icon = (0, helpers_1.getIconByVerificationStatus)(verificationStatus.status);
+    var tooltipTitle = (0, helpers_1.getTooltipTitleByVerificationStatus)(verificationStatus);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(AttributeVerificationStatus_module_css_1.default.status, AttributeVerificationStatus_module_css_1.default[verificationStatus.status]), "data-reltio-id": "attribute-verification-status-".concat(verificationStatus.status) },
+        react_1.default.createElement(Tooltip_1.default, { title: tooltipTitle, placement: "bottom" },
+            react_1.default.createElement("span", { className: AttributeVerificationStatus_module_css_1.default.icon },
+                react_1.default.createElement(Icon, null)))));
+};
+exports.AttributeVerificationStatus = AttributeVerificationStatus;

package/cjs/AttributeVerificationStatus/AttributeVerificationStatus.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"status":"AttributeVerificationStatus-status--NwPR6","valid":"AttributeVerificationStatus-valid--PIGHP","invalid":"AttributeVerificationStatus-invalid--B7p6E","outdated":"AttributeVerificationStatus-outdated--l5khN","maybe":"AttributeVerificationStatus-maybe--egCRg","accept_all":"AttributeVerificationStatus-accept_all--jgMx5","icon":"AttributeVerificationStatus-icon--C8xBC"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.AttributeVerificationStatus-status--NwPR6{height:18px;margin-left:4px;position:relative;width:14px}.AttributeVerificationStatus-status--NwPR6:after{border-radius:50%;content:"";height:6px;left:calc(50% - 3px);position:absolute;top:calc(50% - 3px);width:6px}.AttributeVerificationStatus-valid--PIGHP:after{background-color:rgba(33,150,83,.5)}.AttributeVerificationStatus-invalid--B7p6E:after{background-color:rgba(235,87,87,.5)}.AttributeVerificationStatus-accept_all--jgMx5:after,.AttributeVerificationStatus-maybe--egCRg:after,.AttributeVerificationStatus-outdated--l5khN:after{background-color:rgba(242,201,76,.5)}.AttributeVerificationStatus-icon--C8xBC{background-color:#fff;left:0;opacity:var(--verify-status-opacity);position:absolute;top:2px;z-index:1}.AttributeVerificationStatus-icon--C8xBC:hover{background-color:#fff}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/AttributeVerificationStatus/helpers.d.ts

@@ -0,0 +1,8 @@
+import { InputVerificationAttribute } from '@reltio/mdm-sdk';
+import { VerificationStatus } from '../contexts/AttributesVerificationContext/helpers';
+export declare const getIconByVerificationStatus: (verificationStatus: VerificationStatus) => import("react").FC<import("react").SVGProps<SVGSVGElement>> | (() => any);
+export declare const getTooltipTitleByVerificationStatus: ({ status, lastVerifiedTime, verificationType }: {
+    status: VerificationStatus;
+    lastVerifiedTime: number | null;
+    verificationType: InputVerificationAttribute;
+}) => string;

package/cjs/AttributeVerificationStatus/helpers.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTooltipTitleByVerificationStatus = exports.getIconByVerificationStatus = void 0;
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var EmptyStub_1 = require("../EmptyStub");
+var VerificationInvalidIcon_1 = __importDefault(require("../icons/VerificationInvalidIcon"));
+var VerificationValidIcon_1 = __importDefault(require("../icons/VerificationValidIcon"));
+var VerificationOutdatedIcon_1 = __importDefault(require("../icons/VerificationOutdatedIcon"));
+var VerificationMaybeIcon_1 = __importDefault(require("../icons/VerificationMaybeIcon"));
+var helpers_1 = require("../contexts/AttributesVerificationContext/helpers");
+var getIconByVerificationStatus = function (verificationStatus) {
+    switch (verificationStatus) {
+        case helpers_1.VerificationStatus.VALID:
+            return VerificationValidIcon_1.default;
+        case helpers_1.VerificationStatus.INVALID:
+            return VerificationInvalidIcon_1.default;
+        case helpers_1.VerificationStatus.OUTDATED:
+            return VerificationOutdatedIcon_1.default;
+        case helpers_1.VerificationStatus.MAYBE:
+        case helpers_1.VerificationStatus.ACCEPT_ALL:
+            return VerificationMaybeIcon_1.default;
+        default:
+            return EmptyStub_1.EmptyStub;
+    }
+};
+exports.getIconByVerificationStatus = getIconByVerificationStatus;
+var getTooltipTitleByVerificationStatus = function (_a) {
+    var status = _a.status, lastVerifiedTime = _a.lastVerifiedTime, verificationType = _a.verificationType;
+    var attributeLabel = verificationType === mdm_sdk_1.InputVerificationAttribute.Email ? ui_i18n_1.default.text('email') : ui_i18n_1.default.text('phone number');
+    var date = ui_i18n_1.default.date(lastVerifiedTime, 'L LTS');
+    switch (status) {
+        case helpers_1.VerificationStatus.VALID:
+            return ui_i18n_1.default.text('The ${attributeLabel} is valid. Last verified on ${date}', {
+                attributeLabel: attributeLabel,
+                date: date
+            });
+        case helpers_1.VerificationStatus.INVALID:
+            return ui_i18n_1.default.text('The ${attributeLabel} is invalid. Last verified on ${date}', {
+                attributeLabel: attributeLabel,
+                date: date
+            });
+        case helpers_1.VerificationStatus.OUTDATED:
+            return ui_i18n_1.default.text('The verification for this has expired. It was valid when last verified on ${date}', {
+                date: date
+            });
+        case helpers_1.VerificationStatus.MAYBE:
+            return ui_i18n_1.default.text('The ${attributeLabel} may be invalid. Last verified on ${date}', {
+                attributeLabel: attributeLabel,
+                date: date
+            });
+        case helpers_1.VerificationStatus.ACCEPT_ALL:
+            return ui_i18n_1.default.text('The ${attributeLabel} may be valid. Last verified on ${date}', {
+                attributeLabel: attributeLabel,
+                date: date
+            });
+        default:
+            return null;
+    }
+};
+exports.getTooltipTitleByVerificationStatus = getTooltipTitleByVerificationStatus;

package/cjs/ReadOnlyAttributesPager/components/MultiLineRenderer/MultiLineRenderer.js

@@ -30,6 +30,7 @@ exports.MultiLineRenderer = void 0;
 var react_1 = __importStar(require("react"));
 var ramda_1 = require("ramda");
 var classnames_1 = __importDefault(require("classnames"));
+var react_context_selector_1 = require("@fluentui/react-context-selector");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var ReadOnlyAttributesFactory_1 = require("../../../ReadOnlyAttributesFactory");
 var AttributeTitle_1 = require("../../../AttributeTitle");
@@ -39,11 +40,14 @@ var OvIcon_1 = require("../../../OvIcon");
 var DescriptionIcon_1 = require("../../../DescriptionIcon");
 var ControlAttributeIcon_1 = require("../../../ControlAttributeIcon");
 var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+var AttributesVerificationContext_1 = require("../../../contexts/AttributesVerificationContext");
+var VerificationButton_1 = require("../../../VerificationButton/VerificationButton");
 var styles_1 = require("../../styles");
 var MultiLineRenderer = function (_a) {
     var max = _a.max, values = _a.values, nonVisibleValues = _a.nonVisibleValues, totalVisibleValues = _a.totalVisibleValues, attributeType = _a.attributeType, parentUri = _a.parentUri, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, showNonOv = _a.showNonOv, totalNonVisibleValues = _a.totalNonVisibleValues, classes = _a.classes;
     var styles = (0, styles_1.useMultiLineStyles)();
     var _b = (0, react_1.useState)(max), visibleValuesCount = _b[0], setVisibleValuesCount = _b[1];
+    var isVerificationAttribute = (0, react_context_selector_1.useContextSelector)(AttributesVerificationContext_1.AttributesVerificationContext, function (context) { return (context === null || context === void 0 ? void 0 : context.isVerificationAttribute) || ramda_1.F; });
     var controlAttributes = (0, MdmModuleContext_1.useMdmControlAttributes)();
     var isControlAttribute = (0, react_1.useMemo)(function () { return controlAttributes.includes(attributeType.uri); }, [controlAttributes, attributeType.uri]);
     var hasPaging = max < totalVisibleValues;
@@ -74,12 +78,14 @@ var MultiLineRenderer = function (_a) {
     };
     var shownValues = values.slice(0, visibleValuesCount);
     var hiddenValuesCount = totalVisibleValues - visibleValuesCount;
+    var showVerificationButton = isVerificationAttribute(attributeType);
     return (react_1.default.createElement("div", { "data-reltio-id": "multi-line-renderer", className: styles.wrapper },
         react_1.default.createElement("div", { className: styles.titleRow },
             react_1.default.createElement(AttributeTitle_1.AttributeTitle, { label: label, className: (0, classnames_1.default)(styles.title, classes === null || classes === void 0 ? void 0 : classes.title), "data-reltio-id": "reltio-attribute-label" }),
             react_1.default.createElement(DescriptionIcon_1.DescriptionIcon, { description: description }),
             isControlAttribute && react_1.default.createElement(ControlAttributeIcon_1.ControlAttributeIcon, null),
-            react_1.default.createElement(OvIcon_1.OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues })),
+            react_1.default.createElement(OvIcon_1.OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues }),
+            showVerificationButton && react_1.default.createElement(VerificationButton_1.VerificationButton, { attributeType: attributeType })),
         react_1.default.createElement("div", { className: styles.attributes }, shownValues.map(function (value) { return (react_1.default.createElement(ReadOnlyAttributesFactory_1.ReadOnlyAttribute, { key: value.uri, className: (0, classnames_1.default)(styles.attribute, classes === null || classes === void 0 ? void 0 : classes.content), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv, classes: classes })); })),
         showMore && (react_1.default.createElement(ShowMore_1.ShowMore, { moreNumber: (0, ramda_1.min)(max, hiddenValuesCount), valueNumber: hiddenValuesCount, onClick: onShowMore })),
         showLess && react_1.default.createElement(ShowLess_1.ShowLess, { onClick: onShowLess })));