@tap-payments/os-micro-frontend-shared 0.1.302 → 0.1.303

package/build/components/TableCells/CustomCells/AuthenticationStatusCell/constant.d.ts

@@ -3,12 +3,14 @@ export declare const authenticationStatusIcons: {
     PENDING: string;
     INITIATED: string;
     ATTEMPTED: string;
+    EXEMPTED: string;
     EXEMPTED_WITH_TRANSACTION: string;
     EXEMPTED_WITHOUT_TRANSACTION: string;
     REJECTED: string;
     UNAVAILABLE: string;
     UNDETERMINED: string;
     SUCCESS: string;
+    AUTHENTICATED: string;
     AUTHENTICATED_WITH_TRANSACTION: string;
     AUTHENTICATED_WITHOUT_TRANSACTION: string;
     AUTHENTICATED_AUTHORIZE_FAILED: string;

package/build/components/TableCells/CustomCells/AuthenticationStatusCell/constant.js

@@ -1,18 +1,20 @@
-import { authenticationAttemptedIcon, authenticationFailedIcon, authenticationPendingIcon, authenticationUnavailableIcon, authenticationExemptedWithTransactionIcon, authenticationExemptedWithoutTransactionIcon, authenticationWithTransactionIcon, authenticationWithoutTransactionIcon, authenticatedSuccessIcon, authenticationDeclinedIcon, } from '../../../../constants/index.js';
+import { authenticationAttemptedIcon, authenticationFailedIcon, authenticationPendingIcon, authenticationUnavailableIcon, authenticationExemptedWithTransactionIcon, authenticationExemptedWithoutTransactionIcon, authenticationWithTransactionIcon, authenticationWithoutTransactionIcon, authenticatedSuccessIcon, authenticationDeclinedIcon, authenticationUndeterminedIcon, authenticationNoAuthIcon, } from '../../../../constants/index.js';
 import { statusIcons } from '../../../TableCells/CustomCells/StatusCell/constant';
 export const authenticationStatusIcons = {
     FAILED: authenticationFailedIcon,
     PENDING: authenticationPendingIcon,
-    INITIATED: authenticationPendingIcon,
+    INITIATED: authenticationNoAuthIcon,
     ATTEMPTED: authenticationAttemptedIcon,
+    EXEMPTED: authenticationExemptedWithTransactionIcon,
     EXEMPTED_WITH_TRANSACTION: authenticationExemptedWithTransactionIcon,
     EXEMPTED_WITHOUT_TRANSACTION: authenticationExemptedWithoutTransactionIcon,
     REJECTED: authenticationDeclinedIcon,
     UNAVAILABLE: authenticationUnavailableIcon,
-    UNDETERMINED: authenticationUnavailableIcon,
+    UNDETERMINED: authenticationUndeterminedIcon,
     SUCCESS: authenticatedSuccessIcon,
+    AUTHENTICATED: authenticationWithTransactionIcon,
     AUTHENTICATED_WITH_TRANSACTION: authenticationWithTransactionIcon,
     AUTHENTICATED_WITHOUT_TRANSACTION: authenticationWithoutTransactionIcon,
-    AUTHENTICATED_AUTHORIZE_FAILED: authenticationDeclinedIcon,
+    AUTHENTICATED_AUTHORIZE_FAILED: authenticationFailedIcon,
 };
 export const chargeStatusIcons = statusIcons;

package/build/components/TableCells/CustomCells/ProviderCell/ProviderCell.d.ts

@@ -0,0 +1,2 @@
+import { ProviderCellProps } from './type';
+export default function ProviderCell({ provider, ...props }: ProviderCellProps): import("react/jsx-runtime").JSX.Element;

package/build/components/TableCells/CustomCells/ProviderCell/ProviderCell.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import TableCell from '../../TableCell';
+import { providerIcons } from './constants';
+import { ProviderChip, ProviderIcon } from './style';
+export default function ProviderCell(_a) {
+    var { provider } = _a, props = __rest(_a, ["provider"]);
+    const iconUrl = providerIcons[provider];
+    if (!iconUrl) {
+        return _jsx(TableCell, Object.assign({}, props, { children: provider }));
+    }
+    return (_jsx(ProviderChip, { children: _jsx(ProviderIcon, { src: iconUrl, alt: provider }) }));
+}

package/build/components/TableCells/CustomCells/ProviderCell/constants.d.ts

@@ -0,0 +1,2 @@
+export type ProviderName = 'CYBERSOURCE' | 'MPGS' | 'NETCETERA' | 'TAP3DS';
+export declare const providerIcons: Record<ProviderName, string>;

package/build/components/TableCells/CustomCells/ProviderCell/constants.js

@@ -0,0 +1,7 @@
+import { cyberSourceProviderIcon, MPGSProviderIcon, NETCETERAProviderIcon, TAP3DSPROVIDERIcon } from '../../../../constants/index.js';
+export const providerIcons = {
+    CYBERSOURCE: cyberSourceProviderIcon,
+    MPGS: MPGSProviderIcon,
+    NETCETERA: NETCETERAProviderIcon,
+    TAP3DS: TAP3DSPROVIDERIcon,
+};

package/build/components/TableCells/CustomCells/ProviderCell/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ProviderCell } from './ProviderCell';
+export * from './type';

package/build/components/TableCells/CustomCells/ProviderCell/index.js

@@ -0,0 +1,2 @@
+export { default as ProviderCell } from './ProviderCell';
+export * from './type';

package/build/components/TableCells/CustomCells/ProviderCell/style.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ProviderChip: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ProviderIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

package/build/components/TableCells/CustomCells/ProviderCell/style.js

@@ -0,0 +1,19 @@
+import { styled } from '@mui/material';
+import Box from '@mui/material/Box';
+export const ProviderChip = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '86px',
+    height: '24px',
+    gap: '8px',
+    padding: '4px 8px',
+    borderRadius: '24px',
+    border: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.background.paper,
+}));
+export const ProviderIcon = styled('img')(() => ({
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain',
+}));

package/build/components/TableCells/CustomCells/ProviderCell/type.d.ts

@@ -0,0 +1,5 @@
+import { TableCellProps } from '@mui/material';
+import { ProviderName } from './constants';
+export type ProviderCellProps = TableCellProps & {
+    provider: ProviderName | string;
+};

package/build/components/TableCells/CustomCells/ProviderCell/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/TableCells/CustomCells/PurposeCell/PurposeCell.d.ts

@@ -0,0 +1,2 @@
+import { PurposeCellProps } from './type';
+export default function PurposeCell({ purpose, ...props }: PurposeCellProps): import("react/jsx-runtime").JSX.Element;

package/build/components/TableCells/CustomCells/PurposeCell/PurposeCell.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { purposeIcons, purposeLabels } from './constants';
+import { PurposeChip, PurposeIcon, PurposeLabel } from './style';
+export default function PurposeCell(_a) {
+    var { purpose } = _a, props = __rest(_a, ["purpose"]);
+    const purposeIcon = purposeIcons[purpose];
+    const purposeLabel = purposeLabels[purpose];
+    return (_jsxs(PurposeChip, Object.assign({ purposeType: purpose }, props, { children: [_jsx(PurposeIcon, { src: purposeIcon, alt: purpose }), _jsx(PurposeLabel, { children: purposeLabel })] })));
+}

package/build/components/TableCells/CustomCells/PurposeCell/constants.d.ts

@@ -0,0 +1,8 @@
+export type PurposeType = 'CHARGE' | 'AUTHORIZE';
+export declare const purposeIcons: Record<PurposeType, string>;
+export declare const purposeLabels: Record<PurposeType, string>;
+export declare const purposeStyles: Record<PurposeType, {
+    backgroundColor: string;
+    color: string;
+    border: string;
+}>;

package/build/components/TableCells/CustomCells/PurposeCell/constants.js

@@ -0,0 +1,21 @@
+import { authorizedIcon, babyBlueCheckIcon } from '../../../../constants/index.js';
+export const purposeIcons = {
+    CHARGE: babyBlueCheckIcon,
+    AUTHORIZE: authorizedIcon,
+};
+export const purposeLabels = {
+    CHARGE: 'Charge',
+    AUTHORIZE: 'Authorization',
+};
+export const purposeStyles = {
+    CHARGE: {
+        backgroundColor: '#1F88D01A',
+        color: '#1F88D0',
+        border: 'none',
+    },
+    AUTHORIZE: {
+        backgroundColor: '#FFFFFF',
+        color: '#1F88D0',
+        border: '#1F88D01A',
+    },
+};

package/build/components/TableCells/CustomCells/PurposeCell/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PurposeCell } from './PurposeCell';
+export * from './type';

package/build/components/TableCells/CustomCells/PurposeCell/index.js

@@ -0,0 +1,2 @@
+export { default as PurposeCell } from './PurposeCell';
+export * from './type';

package/build/components/TableCells/CustomCells/PurposeCell/style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { PurposeType } from './constants';
+export declare const PurposeChip: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    purposeType: PurposeType;
+}, {}, {}>;
+export declare const PurposeIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const PurposeLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/TableCells/CustomCells/PurposeCell/style.js

@@ -0,0 +1,35 @@
+import { styled } from '@mui/material';
+import Box from '@mui/material/Box';
+import { purposeStyles } from './constants';
+export const PurposeChip = styled(Box, {
+    shouldForwardProp: (prop) => !['purposeType'].includes(prop),
+})(({ purposeType }) => {
+    const styles = purposeStyles[purposeType];
+    return {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '4px',
+        width: 'fit-content',
+        minWidth: '86px',
+        height: '24px',
+        padding: '4px 8px',
+        borderRadius: '24px',
+        border: `1px solid ${styles.border}`,
+        backgroundColor: styles.backgroundColor,
+        color: styles.color,
+        fontSize: '11px',
+        fontWeight: 400,
+    };
+});
+export const PurposeIcon = styled('img')(() => ({
+    width: '16px',
+    height: '16px',
+    objectFit: 'contain',
+    flexShrink: 0,
+}));
+export const PurposeLabel = styled('span')(() => ({
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+}));

package/build/components/TableCells/CustomCells/PurposeCell/type.d.ts

@@ -0,0 +1,5 @@
+import { TableCellProps } from '@mui/material';
+import { PurposeType } from './constants';
+export type PurposeCellProps = TableCellProps & {
+    purpose: PurposeType;
+};

package/build/components/TableCells/CustomCells/PurposeCell/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/TableCells/CustomCells/index.d.ts

@@ -50,3 +50,5 @@ export * from './type';
 export * from './style';
 export * from './LeadStatusCell';
 export * from './PaymentAgreementCell';
+export * from './ProviderCell';
+export * from './PurposeCell';

package/build/components/TableCells/CustomCells/index.js

@@ -50,3 +50,5 @@ export * from './type';
 export * from './style';
 export * from './LeadStatusCell';
 export * from './PaymentAgreementCell';
+export * from './ProviderCell';
+export * from './PurposeCell';

package/build/components/VerificationIcon/VerificationIcon.d.ts

@@ -0,0 +1,5 @@
+type UserVerificationProps = {
+    status: string;
+};
+export declare const VerificationIcon: ({ status }: UserVerificationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/VerificationIcon/VerificationIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import startCase from 'lodash/startCase';
+import { Tooltip } from '../index.js';
+import { statusIcon } from './constant';
+export const VerificationIcon = ({ status }) => {
+    return (_jsx(Tooltip, Object.assign({ title: startCase(status) }, { children: _jsx("img", { loading: "lazy", src: statusIcon[((status === null || status === void 0 ? void 0 : status.toLowerCase()) || '')] || statusIcon.default, alt: status, width: 10.5, height: 10.5 }) })));
+};

package/build/components/VerificationIcon/VerificationIconWithBg.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    status: string;
+};
+export declare const VerificationIconWithBg: ({ status }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/VerificationIcon/VerificationIconWithBg.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import startCase from 'lodash/startCase';
+import { Box, Tooltip } from '@mui/material';
+import { statusIcon, statusIconBG } from './constant';
+export const VerificationIconWithBg = ({ status }) => {
+    return (_jsx(Tooltip, Object.assign({ title: startCase(status) }, { children: _jsx(Box, Object.assign({ component: "li", sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '24px',
+                height: '24px',
+                borderRadius: '50%',
+                backgroundColor: statusIconBG[status],
+            } }, { children: _jsx("img", { loading: "lazy", src: statusIcon[((status === null || status === void 0 ? void 0 : status.toLowerCase()) || '')] || statusIcon.default, alt: status, width: 10.5, height: 10.5 }) })) })));
+};

package/build/components/VerificationIcon/constant.d.ts

@@ -0,0 +1,2 @@
+export declare const statusIcon: Record<string, string>;
+export declare const statusIconBG: Record<string, string>;

package/build/components/VerificationIcon/constant.js

@@ -0,0 +1,18 @@
+import { blueVerifyIcon, grayVerifyIcon, greenVerifyIcon, redVerifyIcon } from '../../constants/index.js';
+export const statusIcon = {
+    verified: greenVerifyIcon,
+    reviewed: blueVerifyIcon,
+    completed: blueVerifyIcon,
+    incomplete: grayVerifyIcon,
+    complete: blueVerifyIcon,
+    rejected: redVerifyIcon,
+    default: grayVerifyIcon,
+};
+export const statusIconBG = {
+    incomplete: '#D9D9D929',
+    completed: '#11D0FA29',
+    complete: '#11D0FA29',
+    reviewed: '#11D0FA29',
+    verified: '#2ACE0029',
+    rejected: '#FF3D0029',
+};

package/build/components/VerificationIcon/index.d.ts

@@ -0,0 +1,3 @@
+export { VerificationIcon } from './VerificationIcon';
+export { VerificationIconWithBg } from './VerificationIconWithBg';
+export * from './constant';

package/build/components/VerificationIcon/index.js

@@ -0,0 +1,3 @@
+export { VerificationIcon } from './VerificationIcon';
+export { VerificationIconWithBg } from './VerificationIconWithBg';
+export * from './constant';

package/build/components/VerificationIcon/type.d.ts

@@ -0,0 +1,2 @@
+import { statusIcon } from './constant';
+export type VerificationStatus = keyof typeof statusIcon;

package/build/components/VerificationIcon/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/index.d.ts

@@ -152,3 +152,4 @@ export * from './PartnersFilter';
 export * from './SalesChannelFilter';
 export * from './ReferenceTypeFilter';
 export * from './ListColumnFilter';
+export * from './VerificationIcon';

package/build/components/index.js

@@ -152,3 +152,4 @@ export * from './PartnersFilter';
 export * from './SalesChannelFilter';
 export * from './ReferenceTypeFilter';
 export * from './ListColumnFilter';
+export * from './VerificationIcon';

package/build/constants/assets.d.ts

@@ -324,10 +324,15 @@ export declare const authenticationExemptedWithTransactionIcon: string;
 export declare const authenticationFailedIcon: string;
 export declare const authenticationInitiatedIcon: string;
 export declare const authenticationUnavailableIcon: string;
+export declare const authenticationUndeterminedIcon: string;
 export declare const authenticationWithoutTransactionIcon: string;
 export declare const authenticationWithTransactionIcon: string;
 export declare const authenticatedSuccessIcon: string;
 export declare const authenticationPendingIcon: string;
+export declare const cyberSourceProviderIcon: string;
+export declare const MPGSProviderIcon: string;
+export declare const NETCETERAProviderIcon: string;
+export declare const TAP3DSPROVIDERIcon: string;
 export declare const viewInvoiceIcon: string;
 export declare const checkoutStatusIcon: string;
 export declare const checkoutStatusBlueIcon: string;

package/build/constants/assets.js

@@ -330,10 +330,15 @@ export const authenticationExemptedWithTransactionIcon = `${lightUrl}/status/aut
 export const authenticationFailedIcon = `${lightUrl}/status/authenticationFailed1.svg`;
 export const authenticationInitiatedIcon = `${lightUrl}/status/authenticationInitiated.svg`;
 export const authenticationUnavailableIcon = `${lightUrl}/status/authenticationUnavailable.svg`;
+export const authenticationUndeterminedIcon = `${lightUrl}/status/authenticationUndetermined.svg`;
 export const authenticationWithoutTransactionIcon = `${lightUrl}/status/AuthenticationWithoutTransaction1.svg`;
 export const authenticationWithTransactionIcon = `${lightUrl}/status/authenticationWithTransaction1 2.svg`;
 export const authenticatedSuccessIcon = `${lightUrl}/status/AuthenticationAuthenticated.svg`;
 export const authenticationPendingIcon = `${lightUrl}/status/authenticationPending2.svg`;
+export const cyberSourceProviderIcon = `${lightUrl}/provider/CYBERSOURCE.svg`;
+export const MPGSProviderIcon = `${lightUrl}/provider/MPGS.svg`;
+export const NETCETERAProviderIcon = `${lightUrl}/provider/NETCETERA.svg`;
+export const TAP3DSPROVIDERIcon = `${lightUrl}/provider/TAP3DS.svg`;
 export const viewInvoiceIcon = `${appBaseUrl}/viewInvoice.svg`;
 export const checkoutStatusIcon = `${appBaseUrl}/checkoutStatus.svg`;
 export const checkoutStatusBlueIcon = `${appBaseUrl}/checkStatusOutBlue.svg`;

package/build/constants/table/cell/authenticationsTableCellWidth.d.ts

@@ -49,6 +49,11 @@ export declare const authenticationsTableCellWidth: {
         readonly text: "250px";
         readonly sheet: "250px";
     };
+    readonly authentication_id: {
+        readonly default: "290px";
+        readonly text: "290px";
+        readonly sheet: "290px";
+    };
     readonly actions: {
         readonly default: "100px";
         readonly text: "100px";

package/build/constants/table/cell/authenticationsTableCellWidth.js

@@ -49,6 +49,11 @@ export const authenticationsTableCellWidth = {
         text: '250px',
         sheet: '250px',
     },
+    authentication_id: {
+        default: '290px',
+        text: '290px',
+        sheet: '290px',
+    },
     actions: {
         default: '100px',
         text: '100px',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.302",
+  "version": "0.1.303",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",