@tap-payments/os-micro-frontend-shared 0.1.260 → 0.1.261

package/build/components/CountryFilter/CountryFilter.d.ts

@@ -0,0 +1,13 @@
+import { SxProps } from '@mui/material';
+interface CountryFilterProps {
+    onCountriesChange: (countries: string[]) => void;
+    sx?: SxProps;
+    selectedCountries?: string[];
+    countriesOptions: {
+        label: string;
+        value: string;
+        icon: string;
+    }[];
+}
+export default function CountryFilter({ onCountriesChange, sx, selectedCountries, countriesOptions }: CountryFilterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/CountryFilter/CountryFilter.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import { ClickAwayListener } from '@mui/material';
+import { Menu, MenuItem } from '../index.js';
+import { rightArrow } from '../../constants/index.js';
+export default function CountryFilter({ onCountriesChange, sx, selectedCountries, countriesOptions }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const containerRef = useRef(null);
+    const open = Boolean(anchorEl);
+    const onOpen = () => {
+        if (!open) {
+            setAnchorEl(containerRef.current);
+            return;
+        }
+        onClose();
+    };
+    const onClose = () => {
+        setAnchorEl(null);
+    };
+    const checkIsSelected = (countryCode) => { var _a; return (_a = selectedCountries === null || selectedCountries === void 0 ? void 0 : selectedCountries.includes(countryCode)) !== null && _a !== void 0 ? _a : false; };
+    const onClickCountry = (countryCodes) => {
+        onCountriesChange(countryCodes);
+    };
+    const handleCheckboxChange = (value) => {
+        const newCountries = (selectedCountries === null || selectedCountries === void 0 ? void 0 : selectedCountries.includes(value)) ? selectedCountries === null || selectedCountries === void 0 ? void 0 : selectedCountries.filter((c) => c !== value) : [...(selectedCountries !== null && selectedCountries !== void 0 ? selectedCountries : []), value];
+        onClickCountry(newCountries);
+        onCountriesChange(newCountries);
+    };
+    const isAllCountriesSelected = useMemo(() => {
+        return (selectedCountries === null || selectedCountries === void 0 ? void 0 : selectedCountries.length) === countriesOptions.length;
+    }, [selectedCountries, countriesOptions]);
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(Box, Object.assign({ ref: containerRef, sx: sx }, { children: [_jsx(Box, { children: _jsxs(MenuItem, Object.assign({ onMouseEnter: (e) => {
+                            e.stopPropagation();
+                            onOpen();
+                        }, sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            paddingInline: '16px',
+                            gap: '4px',
+                            borderBlock: '1px solid #F2F2F2',
+                            '&:hover': {
+                                backgroundColor: '#fff',
+                                boxShadow: '0px 0px 16px 0px #00000021',
+                            },
+                        }, hideCheckbox: true }, { children: [_jsx("span", { children: "Country" }), _jsx(Box, { component: "img", src: rightArrow, width: 16, height: 12, sx: { marginLeft: 'auto' } })] })) }), _jsxs(Menu, Object.assign({ open: open, anchorEl: anchorEl, sx: { marginTop: '8px', marginBottom: '8px', maxHeight: '190px', overflow: 'auto' }, placement: "right-start", popperSx: {
+                        zIndex: 99999,
+                    } }, { children: [_jsx(MenuItem, Object.assign({ sx: {
+                                color: (theme) => theme.palette.info.dark,
+                                backgroundColor: '#F4F4F4',
+                                fontWeight: 600,
+                                paddingInline: '16px',
+                            }, onClick: (e) => {
+                                e.stopPropagation();
+                                if (isAllCountriesSelected) {
+                                    onClickCountry([]);
+                                    onCountriesChange([]);
+                                }
+                                else {
+                                    onClickCountry(countriesOptions.map(({ value }) => value));
+                                    onCountriesChange(countriesOptions.map(({ value }) => value));
+                                }
+                            }, isSelected: isAllCountriesSelected }, { children: isAllCountriesSelected ? 'Unselect All' : 'Select All' })), countriesOptions.map(({ value, label, icon }) => (_jsxs(MenuItem, Object.assign({ sx: {
+                                gap: '0px',
+                                paddingInline: '16px',
+                                '&:hover': {
+                                    backgroundColor: '#fff',
+                                    boxShadow: '0px 0px 16px 0px #00000021',
+                                },
+                            }, isSelected: checkIsSelected(value), onClick: () => handleCheckboxChange(value) }, { children: [_jsx(Box, { component: "img", src: icon, width: 16, height: 12, sx: { marginRight: '4px', borderRadius: '2px' } }), label] }), value)))] }))] })) })));
+}

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

@@ -0,0 +1,2 @@
+import CountryFilter from './CountryFilter';
+export default CountryFilter;

package/build/components/CountryFilter/index.js

@@ -0,0 +1,2 @@
+import CountryFilter from './CountryFilter';
+export default CountryFilter;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const FilterButton: 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> & {
+    isActive?: boolean | undefined;
+}, {}, {}>;

package/build/components/CountryFilter/style.js

@@ -0,0 +1,7 @@
+import { Box, styled } from '@mui/material';
+export const FilterButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ theme, isActive }) => (Object.assign({ borderRadius: '4px', border: `1px solid ${theme.palette.divider}`, height: 32, width: 30, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backgroundColor: theme.palette.common.white, ':hover': {
+        opacity: 0.7,
+    } }, (isActive && {
+    boxShadow: `0px 0px 4px 0px ${theme.palette.info.dark}80`,
+    border: `1px solid ${theme.palette.info.dark}`,
+}))));

package/build/components/PhoneFilter/PhoneFilter.d.ts

@@ -0,0 +1,9 @@
+import { Country } from '../../types/index.js';
+export default function PhoneFilter({ onPhoneChange, onCountryChange, selectedPhone, selectedCountry, countriesOptions, isCountriesLoading, }: {
+    onPhoneChange: (phone: string) => void;
+    onCountryChange: (countryId: string) => void;
+    selectedPhone?: string;
+    selectedCountry?: Country;
+    countriesOptions: Country[];
+    isCountriesLoading: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/build/components/PhoneFilter/PhoneFilter.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PhoneInputBase } from '../index.js';
+export default function PhoneFilter({ onPhoneChange, onCountryChange, selectedPhone, selectedCountry, countriesOptions, isCountriesLoading, }) {
+    return (_jsx(PhoneInputBase, { "data-testid": `ColumnFilterInputs_PhoneInput`, phoneValue: selectedPhone, onPhoneChange: (val) => {
+            onPhoneChange(val);
+        }, countryValue: selectedCountry, onCountryChange: (c) => {
+            onCountryChange(c === null || c === void 0 ? void 0 : c.countryId);
+        }, countries: countriesOptions || [], isCountriesLoading: isCountriesLoading || false, hasError: false, disabled: isCountriesLoading, placeholder: 'User Mobile', sx: {
+            '&.MuiInputBase-root': {
+                paddingLeft: '0px !important',
+            },
+        } }));
+}

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

@@ -0,0 +1,2 @@
+import PhoneFilter from './PhoneFilter';
+export default PhoneFilter;

package/build/components/PhoneFilter/index.js

@@ -0,0 +1,2 @@
+import PhoneFilter from './PhoneFilter';
+export default PhoneFilter;

package/build/components/index.d.ts

@@ -128,3 +128,5 @@ export * from './VAT';
 export * from './Discount';
 export * from './MerchantLogo';
 export * from './FilterDropdown';
+export { default as PhoneFilter } from './PhoneFilter';
+export { default as CountryFilter } from './CountryFilter';

package/build/components/index.js

@@ -128,3 +128,5 @@ export * from './VAT';
 export * from './Discount';
 export * from './MerchantLogo';
 export * from './FilterDropdown';
+export { default as PhoneFilter } from './PhoneFilter';
+export { default as CountryFilter } from './CountryFilter';

package/build/constants/apps.d.ts

@@ -843,6 +843,17 @@ export declare const APP_CODES: {
                     };
                 };
             };
+            appSettings: {
+                code: string;
+                functions: {
+                    view: {
+                        code: string;
+                    };
+                    update: {
+                        code: string;
+                    };
+                };
+            };
         };
     };
     order: {

package/build/constants/apps.js

@@ -320,6 +320,10 @@ export const APP_CODES = {
                 code: 'BRAND',
                 functions: { view: { code: 'VIEW' }, update: { code: 'UPDATE' } },
             },
+            appSettings: {
+                code: 'APP_SETTINGS',
+                functions: { view: { code: 'VIEW' }, update: { code: 'UPDATE' } },
+            },
         },
     },
     order: {

package/build/types/account.d.ts

@@ -2,5 +2,6 @@ export declare enum ACCOUNT_SECTION {
     BRAND = "brand",
     ENTITY = "entity",
     USERS = "users",
-    USER_ROLES = "userRoles"
+    USER_ROLES = "userRoles",
+    APP_SETTINGS = "appSettings"
 }

package/build/types/account.js

@@ -4,4 +4,5 @@ export var ACCOUNT_SECTION;
     ACCOUNT_SECTION["ENTITY"] = "entity";
     ACCOUNT_SECTION["USERS"] = "users";
     ACCOUNT_SECTION["USER_ROLES"] = "userRoles";
+    ACCOUNT_SECTION["APP_SETTINGS"] = "appSettings";
 })(ACCOUNT_SECTION || (ACCOUNT_SECTION = {}));

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