@tap-payments/os-micro-frontend-shared 0.1.324 → 0.1.326

package/build/components/ColorPicker/ColorPicker.d.ts

@@ -1,14 +1,14 @@
 import { type SxProps } from '@mui/material/styles';
 type ColorPickerProps = {
-    id: string;
     value?: string;
     onChange: (value: string) => void;
     onReset?: () => void;
     sx?: SxProps;
+    disabled?: boolean;
     options?: {
         hideReset?: boolean;
         disableAlpha?: boolean;
     };
 };
-declare const ColorPicker: ({ id, value, onChange, onReset, sx, options }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const ColorPicker: ({ value, onChange, onReset, sx, options, disabled }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
 export default ColorPicker;

package/build/components/ColorPicker/ColorPicker.js

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import { StyledCloseButtonWrapper } from './style';
+import { EditButton, StyledCloseButtonWrapper } from './style';
 import { closeXIcon } from '../../constants/index.js';
 import ColorPickerPanel from './ColorPickerPanel';
 import { Popper } from '@mui/material';
@@ -12,20 +12,24 @@ const DEFAULT_OPTIONS = {
     hideReset: false,
     disableAlpha: false,
 };
-const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx, options = DEFAULT_OPTIONS }) => {
+const ColorPicker = ({ value = '#ffffff', onChange, onReset, sx, options = DEFAULT_OPTIONS, disabled = false }) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const { disableAlpha = false, hideReset = false } = Object.assign(Object.assign({}, DEFAULT_OPTIONS), options);
     const rootRef = useRef(null);
     const handleOpen = useCallback(() => {
+        if (disabled)
+            return;
         setAnchorEl(rootRef.current);
-    }, []);
+    }, [disabled]);
     const handleCancel = useCallback(() => {
+        if (disabled)
+            return;
         setAnchorEl(null);
-    }, []);
+    }, [disabled]);
     const handleConfirm = useCallback((newValue) => {
         onChange(disableAlpha ? newValue.substring(0, 7) : newValue);
         setAnchorEl(null);
     }, [onChange, disableAlpha]);
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => setAnchorEl(null) }, { children: _jsxs(Stack, Object.assign({ ref: rootRef, bgcolor: "grey.400", borderRadius: "4px", p: "4px", pr: "12px", direction: "row", justifyContent: "space-between", spacing: 1, alignItems: "center", className: "color-picker", sx: sx }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", className: "color-picker__controls-wrapper" }, { children: [_jsx(Box, { borderRadius: "5px", width: 32, height: 32, sx: { backgroundColor: value }, className: "color-picker__viewer" }), _jsxs(Box, Object.assign({ className: "color-picker__actions-wrapper" }, { children: [_jsx(Typography, Object.assign({ className: "color-picker__label", fontWeight: 500, fontSize: 9, color: "text.primary", textTransform: "uppercase" }, { children: value })), _jsx(Typography, Object.assign({ className: "color-picker__edit-btn", role: "button", onClick: handleOpen, htmlFor: id, fontWeight: 500, fontSize: 9, color: "info.dark", component: "label", sx: { textDecoration: 'underline', cursor: 'pointer' } }, { children: "Edit" }))] }))] })), !hideReset ? (_jsx(StyledCloseButtonWrapper, Object.assign({ className: "color-picker__close-btn", type: "button", onClick: onReset }, { children: _jsx(Box, { component: "img", src: closeXIcon, width: 10, height: 10 }) }))) : (_jsx("div", {})), _jsx(Popper, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, placement: "top" }, { children: _jsx(ColorPickerPanel, { initialValue: value, onCancel: handleCancel, onConfirm: handleConfirm, disableAlpha: disableAlpha }) }))] })) })));
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => setAnchorEl(null) }, { children: _jsxs(Stack, Object.assign({ ref: rootRef, bgcolor: "grey.400", borderRadius: "4px", p: "4px", pr: "12px", direction: "row", justifyContent: "space-between", spacing: 1, alignItems: "center", className: "color-picker", sx: sx }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", className: "color-picker__controls-wrapper" }, { children: [_jsx(Box, { borderRadius: "5px", width: 32, height: 32, sx: { backgroundColor: value }, className: "color-picker__viewer" }), _jsxs(Box, Object.assign({ className: "color-picker__actions-wrapper" }, { children: [_jsx(Typography, Object.assign({ className: "color-picker__label", fontWeight: 500, fontSize: 9, color: "text.primary", textTransform: "uppercase" }, { children: value })), _jsx(EditButton, Object.assign({ className: "color-picker__edit-btn", onClick: handleOpen, disabled: disabled }, { children: "Edit" }))] }))] })), !hideReset ? (_jsx(StyledCloseButtonWrapper, Object.assign({ className: "color-picker__close-btn", type: "button", disabled: disabled, onClick: onReset }, { children: _jsx(Box, { component: "img", src: closeXIcon, width: 10, height: 10 }) }))) : (_jsx("div", {})), _jsx(Popper, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, placement: "top" }, { children: _jsx(ColorPickerPanel, { initialValue: value, onCancel: handleCancel, onConfirm: handleConfirm, disableAlpha: disableAlpha }) }))] })) })));
 };
 export default ColorPicker;

package/build/components/ColorPicker/style.d.ts

@@ -6,6 +6,11 @@ export declare const StyledColorWidgetWrapper: import("@emotion/styled").StyledC
 export declare const Footer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").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/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const EditButton: import("@emotion/styled").StyledComponent<import("@mui/material/Typography").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const ConfirmButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/ColorPicker/style.js

@@ -1,8 +1,10 @@
-import { styled } from '@mui/material/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
 import MenuList from '@mui/material/MenuList';
+import Typography from '@mui/material/Typography';
 export const StyledCloseButtonWrapper = styled('button')({
     background: 'transparent',
     border: 'none',
@@ -14,6 +16,10 @@ export const StyledCloseButtonWrapper = styled('button')({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
+    '&:disabled, &.Mui-disabled': {
+        opacity: 0.5,
+        cursor: 'not-allowed',
+    },
 });
 export const StyledColorWidgetWrapper = styled(Box)(({ theme }) => ({
     boxShadow: '0px 8px 30px rgba(0, 0, 0, 0.16)',
@@ -59,6 +65,24 @@ export const Footer = styled(Box)(() => ({
     gap: '8px',
     justifyContent: 'flex-end',
 }));
+export const EditButton = styled((props) => _jsx(Typography, Object.assign({}, props, { component: "button" })))(({ theme }) => ({
+    fontWeight: 500,
+    fontSize: '9px',
+    color: theme.palette.info.dark,
+    textDecoration: 'underline',
+    cursor: 'pointer',
+    background: 'transparent',
+    border: 'none',
+    padding: 0,
+    margin: 0,
+    '&:disabled, &.Mui-disabled': {
+        color: alpha(theme.palette.info.dark, 0.5),
+        textDecoration: 'none',
+    },
+    '&:hover': {
+        textDecoration: 'none',
+    },
+}));
 export const ConfirmButton = styled(Button)(({ theme }) => ({
     textTransform: 'capitalize',
     minWidth: 'auto',

package/build/constants/apps.d.ts

@@ -997,9 +997,4 @@ export declare const APP_ICONS: {
     toolbarIconUrl: string;
 }[];
 export declare const excludedApps: string[];
-export declare const MF_APPS_MAPPER: Readonly<{
-    TERMINALS: "TERMINALS";
-    BILLING: "BILLING";
-    ACCOUNT: "ACCOUNT";
-    BUSINESS: "BUSINESS";
-}>;
+export declare const MF_APPS_MAPPER: ReadonlySet<string>;

package/build/constants/apps.js

@@ -481,9 +481,10 @@ export const APP_ICONS = [
     },
 ];
 export const excludedApps = ['login'];
-export const MF_APPS_MAPPER = Object.freeze({
-    TERMINALS: 'TERMINALS',
-    BILLING: 'BILLING',
-    ACCOUNT: 'ACCOUNT',
-    BUSINESS: 'BUSINESS',
-});
+export const MF_APPS_MAPPER = new Set([
+    APP_CODES.terminals.code,
+    APP_CODES.billing.code,
+    APP_CODES.account.code,
+    APP_CODES.business.code,
+    APP_CODES.payouts.code,
+]);

package/build/types/refund.d.ts

@@ -1,5 +1,445 @@
+import { AuthenticationStatus } from './index.js';
 export type RefundOptions = Array<{
     name: string;
     value?: number;
     currency?: string;
 }>;
+export interface Refund {
+    id: string;
+    object: string;
+    live_mode: boolean;
+    customer_initiated: boolean;
+    api_version: string;
+    method: string;
+    created: number;
+    date: number;
+    status: 'REFUNDED' | 'PENDING' | 'IN_PROGRESS' | 'CANCELLED' | 'FAILED' | 'DECLINED' | 'RESTRICTED' | 'TIMEDOUT' | 'UNKNOWN' | 'ACCEPTED';
+    amount: number;
+    currency: string;
+    threeDSecure: boolean;
+    card_threeDSecure: boolean;
+    save_card: boolean;
+    merchant_id: string;
+    product: string;
+    statement_descriptor: string;
+    description: string;
+    metadata: Record<string, string>;
+    transaction: {
+        authorization_id: string;
+        timezone: string;
+        date: {
+            created: number;
+            completed: number;
+        };
+    };
+    reference: {
+        id: string;
+        track: string;
+        payment: string;
+        gateway: string;
+        acquirer: string;
+        transaction: string;
+        order: string;
+        invoice?: string;
+        trace_id?: string;
+    };
+    response: {
+        code: string;
+        message: string;
+    };
+    receipt: {
+        id: string;
+        email: boolean;
+        sms: boolean;
+    };
+    acquirer: {
+        id: string;
+        response: {
+            code: string;
+            message: string;
+        };
+        name: string;
+        mid: string;
+    };
+    gateway: {
+        id: string;
+        name: string;
+        response: {
+            code: string;
+            message: string;
+        };
+    };
+    redirect: {
+        status: string;
+        url: string;
+    };
+    post: {
+        status: string;
+    };
+    payouts: {
+        amount: number;
+        currency: string;
+        count: number;
+        payout: Array<{
+            date: number;
+            by: string;
+            reference_id: string;
+            id: string;
+            amount: number;
+            created: number;
+        }>;
+    };
+    net: {
+        transaction_currency: string;
+        transaction_amount: number;
+        currency: string;
+        currency_rate: number;
+        fee: number;
+        amount: number;
+    };
+    fees: {
+        amount: number;
+        currency: string;
+        count: number;
+        fee: Array<{
+            id: string;
+            type: string;
+            by: string;
+            on: string;
+            amount: number;
+            currency: string;
+        }>;
+    };
+    auto_reversed: boolean;
+    security: {
+        threeDSecure: {
+            id: string;
+            status: string;
+        };
+    };
+    destinations: {
+        reverse_destinations: boolean;
+        amount: number;
+        currency: string;
+        count: number;
+        destination: Array<{
+            id: string;
+            amount: number;
+            currency: string;
+            reverse_transfer: {
+                id: string;
+                amount: number;
+                currency: string;
+            };
+        }>;
+    };
+    refunds: {
+        refund: Array<{
+            id: string;
+            amount: number;
+            currency: string;
+            created: number;
+            date: number;
+            status: 'REFUNDED' | 'PENDING';
+        }>;
+    };
+    topup: {
+        id: string;
+        amount: number;
+        currency: string;
+    };
+    authenticate: {
+        id: string;
+        object: string;
+        type: string;
+        value: string;
+        by: string;
+        status: string;
+        created: string;
+        authenticated: string;
+        count: number;
+        retry_attempt: number;
+        message: string;
+    };
+    summary?: {
+        charge_amount: number;
+        refund_amount: number;
+        refunded_count: number;
+        remaing_amount: number;
+        remaing_percentage: number;
+    };
+    balance: {
+        status?: 'PAID_OUT' | 'SETTLED' | 'PENDING';
+        payout: {
+            id: string;
+            scheduled: number;
+            activities: [
+                {
+                    object: string;
+                    status: 'PAID_OUT' | 'PENDING';
+                    date: number;
+                }
+            ];
+        };
+        settlement: {
+            id: string;
+            scheduled: number;
+            activities: [
+                {
+                    object: string;
+                    status: 'SETTLED' | 'PENDING';
+                    date: number;
+                }
+            ];
+        };
+    };
+    charge: {
+        id: string;
+        refunds: {
+            refund: Array<{
+                id: string;
+                amount: number;
+                currency: string;
+                created: number;
+                date: number;
+                status: 'REFUNDED' | 'PENDING';
+            }>;
+        };
+        authentication: {
+            acsEci: string;
+            status: AuthenticationStatus;
+            data: {
+                asc_eci: string;
+                type: string;
+            };
+        };
+        metadata: Record<string, string>;
+        receipt: {
+            id: string;
+        };
+        merchant: {
+            id: string;
+            legacy_id: string;
+            country: string;
+            name: string;
+        };
+        reference: {
+            id: string;
+            track: string;
+            payment: string;
+            gateway: string;
+            acquirer: string;
+            transaction: string;
+            order: string;
+            invoice?: string;
+            trace_id?: string;
+        };
+        flags: {
+            flag: Array<{
+                id: string;
+                status: 'OPEN' | 'CLEARED';
+                amount: number;
+                created: number;
+                note: string;
+                ishold: boolean;
+            }>;
+        };
+        amount: number;
+        currency: string;
+        customer_initiated: boolean;
+        source: {
+            object: string;
+            type: string;
+            payment_type: string;
+            payment_method: 'MASTERCARD' | 'VISA' | 'APPLE_PAY';
+            channel: string;
+            id: string;
+            region: 'Local' | 'Global' | 'Regional';
+        };
+        issuer?: {
+            id: string;
+            name: string;
+            country: string;
+            region: 'G' | 'L' | 'R';
+            issuer_region: {
+                code: string;
+                name: string;
+            };
+        };
+        device?: {
+            type: 'DESKTOP' | 'PHONE' | 'TABLET';
+            id: string;
+            timezone: string;
+            location: {
+                ip: string;
+                country: string;
+                region: {
+                    code: 'G' | 'L' | 'R';
+                    name: 'Global' | 'Local' | 'Regional';
+                };
+            };
+        };
+        exchange?: {
+            capture?: {
+                amount: number;
+                currency: string;
+            };
+            settlement?: {
+                amount: number;
+                currency: string;
+                rate: number;
+            };
+        };
+        balance: {
+            status?: 'PAID_OUT' | 'SETTLED' | 'PENDING';
+            payout: {
+                id: string;
+                scheduled: number;
+                activities: [
+                    {
+                        object: string;
+                        status: 'PAID_OUT' | 'PENDING';
+                        date: number;
+                    }
+                ];
+            };
+            settlement: {
+                id: string;
+                scheduled: number;
+                activities: [
+                    {
+                        object: string;
+                        status: 'SETTLED' | 'PENDING';
+                        date: number;
+                    }
+                ];
+            };
+        };
+        order: {
+            id: string;
+            currency: string;
+            amount: number;
+            items_count?: number;
+            items?: object[];
+        };
+        customer: {
+            country: {
+                code: string;
+                name: string;
+            };
+            id: string;
+            first_name: string;
+            last_name: string;
+            email: string;
+            phone: {
+                country_code: string;
+                number: string;
+            };
+            region: {
+                name: 'Local' | 'Global' | 'Regional';
+                code: 'R' | 'G' | 'L';
+            };
+            timezone: string;
+        };
+        payment_agreement?: {
+            id: string;
+            type: 'UNSCHEDULED' | 'SCHEDULED_INSTALLMENT' | 'SCHEDULED_SUBSCRIPTION' | 'SCHEDULED_BILLING';
+            contract?: {
+                id: string;
+                type: 'ORDER' | 'SAVED_CARD' | 'SUBSCRIPTION' | 'INSTALLMENT';
+                period: {
+                    start_date: number;
+                    end_date: number;
+                    auto_renewal: boolean;
+                };
+            };
+            variable_amount?: {
+                id: string;
+                maximum_amount: number;
+            };
+            scheduled_payments?: {
+                id: string;
+                count: number;
+                frequency: {
+                    period: 'MINUTES' | 'HOURS' | 'DAYS' | 'MONTHS';
+                    count: number;
+                };
+            };
+            total_payments_count?: number;
+        };
+        payment: {
+            type: string;
+            account: string;
+            method: string;
+            scheme: string;
+            authentication?: '3DS' | 'Non-3DS';
+            card: string;
+            wallet: string;
+        };
+        card: {
+            object: string;
+            first_six: string;
+            first_eight: string;
+            scheme: string;
+            brand: string;
+            last_four: string;
+            name: string;
+            expiry: {
+                month: string;
+                year: string;
+            };
+            registered: boolean;
+        };
+        transaction: {
+            authorization_id: string;
+            timezone: string;
+            created: string | number;
+            expiry: {
+                period: number;
+                type: string;
+            };
+            asynchronous: boolean;
+            amount: number;
+            currency: string;
+            order: {
+                reference: string;
+                store_url: string;
+            };
+        };
+    };
+    merchant: {
+        id: string;
+        legacy_id: string;
+        retailer: {
+            id: string;
+        };
+    };
+    reason: string;
+    device?: {
+        type: 'DESKTOP' | 'PHONE' | 'TABLET';
+        id: string;
+        timezone: string;
+        location: {
+            ip: string;
+            country: string;
+            region: {
+                code: 'G' | 'L' | 'R';
+                name: 'Global' | 'Local' | 'Regional';
+            };
+        };
+    };
+    card: {
+        object: string;
+        first_six: string;
+        first_eight: string;
+        scheme: string;
+        brand: string;
+        last_four: string;
+    };
+    request_body?: Record<string, unknown>;
+    user?: {
+        id: string;
+        name: string;
+        channel: string;
+    };
+}

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.324",
+  "version": "0.1.326",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",