@tap-payments/os-micro-frontend-shared 0.1.306 → 0.1.308
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/PaymentSourceFilter/PaymentMethods.js +10 -8
- package/build/components/PaymentSourceFilter/PaymentSchemes.d.ts +1 -1
- package/build/components/PaymentSourceFilter/PaymentSchemes.js +8 -6
- package/build/components/TableCells/CustomCells/ProviderCell/style.js +1 -1
- package/build/constants/payment.d.ts +5 -0
- package/build/constants/payment.js +20 -9
- package/build/constants/table/cell/authenticationsTableCellWidth.d.ts +3 -3
- package/build/constants/table/cell/authenticationsTableCellWidth.js +3 -3
- package/build/types/segment.d.ts +9 -0
- package/build/types/segment.js +10 -1
- package/build/utils/index.d.ts +1 -0
- package/build/utils/index.js +1 -0
- package/build/utils/merchantSource.d.ts +32 -0
- package/build/utils/merchantSource.js +37 -0
- package/package.json +1 -1
|
@@ -16,9 +16,10 @@ import { rightArrow } from '../../constants/index.js';
|
|
|
16
16
|
import PaymentMethod from './PaymentMethod';
|
|
17
17
|
import { MenuItemStyled } from './style';
|
|
18
18
|
export default function PaymentMethods({ paymentMethodsSource, filters, setFilters }) {
|
|
19
|
-
var _a, _b;
|
|
19
|
+
var _a, _b, _c;
|
|
20
20
|
const [paymentMethodsEl, setPaymentMethodsEl] = useState(null);
|
|
21
21
|
const filterPaymentMethods = (_a = filters === null || filters === void 0 ? void 0 : filters.payment_methods) !== null && _a !== void 0 ? _a : [];
|
|
22
|
+
const isDisabled = !((_b = paymentMethodsSource === null || paymentMethodsSource === void 0 ? void 0 : paymentMethodsSource.options) === null || _b === void 0 ? void 0 : _b.length);
|
|
22
23
|
const onOpen = (e) => {
|
|
23
24
|
setPaymentMethodsEl(e.currentTarget);
|
|
24
25
|
};
|
|
@@ -27,22 +28,23 @@ export default function PaymentMethods({ paymentMethodsSource, filters, setFilte
|
|
|
27
28
|
};
|
|
28
29
|
const paymentMethodsAll = useMemo(() => {
|
|
29
30
|
var _a, _b, _c;
|
|
30
|
-
return (_c = (_b = ((_a = paymentMethodsSource.options) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.reduce((acc, method) => {
|
|
31
|
+
return (_c = (_b = ((_a = paymentMethodsSource === null || paymentMethodsSource === void 0 ? void 0 : paymentMethodsSource.options) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.reduce((acc, method) => {
|
|
31
32
|
var _a, _b, _c;
|
|
32
33
|
acc.push(...((_c = (_b = ((_a = method.options) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.map((m) => m.type)) !== null && _c !== void 0 ? _c : []));
|
|
33
34
|
return acc;
|
|
34
35
|
}, [])) !== null && _c !== void 0 ? _c : [];
|
|
35
36
|
}, []);
|
|
36
|
-
const isSelected = useMemo(() => (paymentMethodsAll === null || paymentMethodsAll === void 0 ? void 0 : paymentMethodsAll.length) === filterPaymentMethods.length, [filterPaymentMethods.length, paymentMethodsAll === null || paymentMethodsAll === void 0 ? void 0 : paymentMethodsAll.length]);
|
|
37
|
-
const isIndeterminate = useMemo(() => !isSelected &&
|
|
37
|
+
const isSelected = useMemo(() => (paymentMethodsAll === null || paymentMethodsAll === void 0 ? void 0 : paymentMethodsAll.length) === filterPaymentMethods.length && filterPaymentMethods.length > 0, [filterPaymentMethods.length, paymentMethodsAll === null || paymentMethodsAll === void 0 ? void 0 : paymentMethodsAll.length]);
|
|
38
|
+
const isIndeterminate = useMemo(() => !isSelected && filterPaymentMethods.length > 0, [filterPaymentMethods.length, isSelected]);
|
|
38
39
|
const onClick = () => {
|
|
40
|
+
if (isDisabled)
|
|
41
|
+
return;
|
|
39
42
|
if (isSelected) {
|
|
40
43
|
const { payment_methods } = filters, resetFilters = __rest(filters, ["payment_methods"]);
|
|
41
44
|
setFilters(resetFilters);
|
|
45
|
+
return;
|
|
42
46
|
}
|
|
43
|
-
|
|
44
|
-
setFilters(Object.assign(Object.assign({}, filters), { payment_methods: paymentMethodsAll }));
|
|
45
|
-
}
|
|
47
|
+
setFilters(Object.assign(Object.assign({}, filters), { payment_methods: paymentMethodsAll }));
|
|
46
48
|
};
|
|
47
|
-
return (_jsxs(MenuItemStyled, Object.assign({ isSelected: isSelected, isIndeterminate: isIndeterminate, onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: paymentMethodsSource === null || paymentMethodsSource === void 0 ? void 0 : paymentMethodsSource.name })), _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(Menu, Object.assign({ open: Boolean(paymentMethodsEl), anchorEl: paymentMethodsEl, placement: "right-start" }, { children: (
|
|
49
|
+
return (_jsxs(MenuItemStyled, Object.assign({ isSelected: isSelected, isIndeterminate: isIndeterminate, onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick, sx: Object.assign({}, (isDisabled && { opacity: 0.5, pointerEvents: 'none' })) }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: paymentMethodsSource === null || paymentMethodsSource === void 0 ? void 0 : paymentMethodsSource.name })), _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(Menu, Object.assign({ open: Boolean(paymentMethodsEl), anchorEl: paymentMethodsEl, placement: "right-start" }, { children: (_c = paymentMethodsSource === null || paymentMethodsSource === void 0 ? void 0 : paymentMethodsSource.options) === null || _c === void 0 ? void 0 : _c.map((paymentMethod) => (_jsx(PaymentMethod, Object.assign({}, paymentMethod, { filters: filters, setFilters: setFilters }), paymentMethod.type))) }))] })));
|
|
48
50
|
}
|
|
@@ -15,27 +15,29 @@ import { Menu } from '../index.js';
|
|
|
15
15
|
import { rightArrow } from '../../constants/index.js';
|
|
16
16
|
import { MenuItemStyled } from './style';
|
|
17
17
|
export default function PaymentSchemes({ paymentSchemesSource, filters, setFilters }) {
|
|
18
|
-
var _a, _b, _c;
|
|
18
|
+
var _a, _b, _c, _d;
|
|
19
19
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
20
20
|
const paymentScheme = (_a = filters === null || filters === void 0 ? void 0 : filters.payment_scheme) !== null && _a !== void 0 ? _a : [];
|
|
21
|
+
const isDisabled = !((_b = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _b === void 0 ? void 0 : _b.length);
|
|
21
22
|
const onOpen = (e) => {
|
|
22
23
|
setAnchorEl(e.currentTarget);
|
|
23
24
|
};
|
|
24
25
|
const onClose = () => {
|
|
25
26
|
setAnchorEl(null);
|
|
26
27
|
};
|
|
27
|
-
const isSelected = useMemo(() => { var _a; return paymentScheme.length === ((_a = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _a === void 0 ? void 0 : _a.length); }, [paymentScheme.length, (
|
|
28
|
+
const isSelected = useMemo(() => { var _a; return paymentScheme.length === ((_a = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _a === void 0 ? void 0 : _a.length) && paymentScheme.length > 0; }, [paymentScheme.length, (_c = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _c === void 0 ? void 0 : _c.length]);
|
|
28
29
|
const isIndeterminate = useMemo(() => !isSelected && paymentScheme.length > 0, [paymentScheme.length, isSelected]);
|
|
29
30
|
const isSelectedPaymentScheme = useCallback((selectedPaymentScheme) => { var _a; return (_a = paymentScheme.includes(selectedPaymentScheme)) !== null && _a !== void 0 ? _a : false; }, [paymentScheme]);
|
|
30
31
|
const onClick = () => {
|
|
31
32
|
var _a, _b;
|
|
33
|
+
if (isDisabled)
|
|
34
|
+
return;
|
|
32
35
|
if (isSelected) {
|
|
33
36
|
const { payment_scheme } = filters, resetFilters = __rest(filters, ["payment_scheme"]);
|
|
34
37
|
setFilters(resetFilters);
|
|
38
|
+
return;
|
|
35
39
|
}
|
|
36
|
-
|
|
37
|
-
setFilters(Object.assign(Object.assign({}, filters), { payment_scheme: (_b = (_a = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _a === void 0 ? void 0 : _a.map((paymentSchemeItem) => paymentSchemeItem.type)) !== null && _b !== void 0 ? _b : [] }));
|
|
38
|
-
}
|
|
40
|
+
setFilters(Object.assign(Object.assign({}, filters), { payment_scheme: (_b = (_a = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _a === void 0 ? void 0 : _a.map((paymentSchemeItem) => paymentSchemeItem.type)) !== null && _b !== void 0 ? _b : [] }));
|
|
39
41
|
};
|
|
40
42
|
const onClickPaymentScheme = (e, selectedPaymentScheme) => {
|
|
41
43
|
var _a, _b;
|
|
@@ -47,5 +49,5 @@ export default function PaymentSchemes({ paymentSchemesSource, filters, setFilte
|
|
|
47
49
|
setFilters(Object.assign(Object.assign({}, filters), { payment_scheme: [...((_b = filters === null || filters === void 0 ? void 0 : filters.payment_scheme) !== null && _b !== void 0 ? _b : []), selectedPaymentScheme] }));
|
|
48
50
|
}
|
|
49
51
|
};
|
|
50
|
-
return (_jsxs(MenuItemStyled, Object.assign({ isSelected: isSelected, isIndeterminate: isIndeterminate, onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.name })), _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(Menu, Object.assign({ open: Boolean(anchorEl), anchorEl: anchorEl, placement: "right-start" }, { children: (
|
|
52
|
+
return (_jsxs(MenuItemStyled, Object.assign({ isSelected: isSelected, isIndeterminate: isIndeterminate, onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick, sx: Object.assign({}, (isDisabled && { opacity: 0.5, pointerEvents: 'none' })) }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.name })), _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(Menu, Object.assign({ open: Boolean(anchorEl), anchorEl: anchorEl, placement: "right-start" }, { children: (_d = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _d === void 0 ? void 0 : _d.map((scheme) => (_jsx(MenuItemStyled, Object.assign({ isSelected: isSelectedPaymentScheme(scheme.type), onClick: (e) => onClickPaymentScheme(e, scheme.type) }, { children: _jsx("img", { src: scheme.icon, alt: scheme === null || scheme === void 0 ? void 0 : scheme.name, style: { height: 24 } }) }), scheme.type))) }))] })));
|
|
51
53
|
}
|
|
@@ -1,8 +1,13 @@
|
|
|
1
|
+
export declare const PAYMENT_TYPES_ICONS: {
|
|
2
|
+
[key: string]: string;
|
|
3
|
+
};
|
|
1
4
|
export declare const PAYMENT_TYPES: {
|
|
2
5
|
name: string;
|
|
3
6
|
label: string;
|
|
4
7
|
icon: string;
|
|
5
8
|
}[];
|
|
9
|
+
export declare const PAYMENT_INITIATED_CUSTOMER_KEY = "customer";
|
|
10
|
+
export declare const PAYMENT_INITIATED_MERCHANT_KEY = "merchant";
|
|
6
11
|
export declare const PAYMENT_INITIATED_OPTIONS: {
|
|
7
12
|
key: string;
|
|
8
13
|
value: string;
|
|
@@ -1,42 +1,53 @@
|
|
|
1
1
|
import { lightUrl } from './assets';
|
|
2
|
+
export const PAYMENT_TYPES_ICONS = {
|
|
3
|
+
DEVICE: `${lightUrl}/device.svg`,
|
|
4
|
+
CARD: `${lightUrl}/payment-method/card.svg`,
|
|
5
|
+
PASS_THRU_WALLET: `${lightUrl}/passThruWallet.svg`,
|
|
6
|
+
EXPRESS_CHECKOUT: `${lightUrl}/express_checkout.svg`,
|
|
7
|
+
STORED_VALUE_WALLET: `${lightUrl}/storedValueWallet.svg`,
|
|
8
|
+
CASH_WALLET: `${lightUrl}/cash.svg`,
|
|
9
|
+
BUY_NOW_PAY_LATER: `${lightUrl}/buyNowPayLater.svg`,
|
|
10
|
+
};
|
|
2
11
|
export const PAYMENT_TYPES = [
|
|
3
12
|
{
|
|
4
13
|
name: 'CARD',
|
|
5
14
|
label: 'Card',
|
|
6
|
-
icon:
|
|
15
|
+
icon: PAYMENT_TYPES_ICONS.CARD,
|
|
7
16
|
},
|
|
8
17
|
{
|
|
9
18
|
name: 'EXPRESS',
|
|
10
19
|
label: 'Express Checkout',
|
|
11
|
-
icon:
|
|
20
|
+
icon: PAYMENT_TYPES_ICONS.EXPRESS_CHECKOUT,
|
|
12
21
|
},
|
|
13
22
|
{
|
|
14
23
|
name: 'DEVICE',
|
|
15
24
|
label: 'Device',
|
|
16
|
-
icon:
|
|
25
|
+
icon: PAYMENT_TYPES_ICONS.DEVICE,
|
|
17
26
|
},
|
|
18
27
|
{
|
|
19
28
|
name: 'PT_WALLET',
|
|
20
29
|
label: 'Pass-Thru Wallet',
|
|
21
|
-
icon:
|
|
30
|
+
icon: PAYMENT_TYPES_ICONS.PASS_THRU_WALLET,
|
|
22
31
|
},
|
|
23
32
|
{
|
|
24
33
|
name: 'SV_WALLET',
|
|
25
34
|
label: 'Stored Value Wallet',
|
|
26
|
-
icon:
|
|
35
|
+
icon: PAYMENT_TYPES_ICONS.STORED_VALUE_WALLET,
|
|
27
36
|
},
|
|
28
37
|
{
|
|
29
38
|
name: 'BNPL',
|
|
30
39
|
label: 'Buy Now Pay Later',
|
|
31
|
-
icon:
|
|
40
|
+
icon: PAYMENT_TYPES_ICONS.BUY_NOW_PAY_LATER,
|
|
32
41
|
},
|
|
33
42
|
{
|
|
34
43
|
name: 'CASH',
|
|
35
44
|
label: 'Cash Wallet',
|
|
36
|
-
icon:
|
|
45
|
+
icon: PAYMENT_TYPES_ICONS.CASH_WALLET,
|
|
37
46
|
},
|
|
38
47
|
];
|
|
48
|
+
export const PAYMENT_INITIATED_CUSTOMER_KEY = 'customer';
|
|
49
|
+
export const PAYMENT_INITIATED_MERCHANT_KEY = 'merchant';
|
|
39
50
|
export const PAYMENT_INITIATED_OPTIONS = [
|
|
40
|
-
{ key:
|
|
41
|
-
{ key:
|
|
51
|
+
{ key: PAYMENT_INITIATED_CUSTOMER_KEY, value: 'true', label: 'Customer' },
|
|
52
|
+
{ key: PAYMENT_INITIATED_MERCHANT_KEY, value: 'false', label: 'Merchant' },
|
|
42
53
|
];
|
|
@@ -15,9 +15,9 @@ export declare const authenticationsTableCellWidth: {
|
|
|
15
15
|
readonly sheet: "250px";
|
|
16
16
|
};
|
|
17
17
|
readonly provider: {
|
|
18
|
-
readonly default: "
|
|
19
|
-
readonly text: "
|
|
20
|
-
readonly sheet: "
|
|
18
|
+
readonly default: "102px";
|
|
19
|
+
readonly text: "102px";
|
|
20
|
+
readonly sheet: "102px";
|
|
21
21
|
};
|
|
22
22
|
readonly purpose: {
|
|
23
23
|
readonly default: "126px";
|
package/build/types/segment.d.ts
CHANGED
|
@@ -4,3 +4,12 @@ export interface SegmentData extends Segment {
|
|
|
4
4
|
defaultCountry?: SegmentCountry;
|
|
5
5
|
defaultEntity?: Entity;
|
|
6
6
|
}
|
|
7
|
+
export declare enum SEGMENT_CODE {
|
|
8
|
+
BUSINESS = "BUSINESS",
|
|
9
|
+
PLATFORM = "PLATFORM",
|
|
10
|
+
DEVELOPMENT = "DEVELOPMENT",
|
|
11
|
+
PAYMENT_TECHNOLOGY = "PAYMENT_TECHNOLOGY",
|
|
12
|
+
PAYMENT_FACILITATOR = "PAYMENT_FACILITATOR",
|
|
13
|
+
PAYMENT_ACQUIRER = "PAYMENT_ACQUIRER",
|
|
14
|
+
PAYMENT_GATEWAY = "PAYMENT_GATEWAY"
|
|
15
|
+
}
|
package/build/types/segment.js
CHANGED
|
@@ -1 +1,10 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var SEGMENT_CODE;
|
|
2
|
+
(function (SEGMENT_CODE) {
|
|
3
|
+
SEGMENT_CODE["BUSINESS"] = "BUSINESS";
|
|
4
|
+
SEGMENT_CODE["PLATFORM"] = "PLATFORM";
|
|
5
|
+
SEGMENT_CODE["DEVELOPMENT"] = "DEVELOPMENT";
|
|
6
|
+
SEGMENT_CODE["PAYMENT_TECHNOLOGY"] = "PAYMENT_TECHNOLOGY";
|
|
7
|
+
SEGMENT_CODE["PAYMENT_FACILITATOR"] = "PAYMENT_FACILITATOR";
|
|
8
|
+
SEGMENT_CODE["PAYMENT_ACQUIRER"] = "PAYMENT_ACQUIRER";
|
|
9
|
+
SEGMENT_CODE["PAYMENT_GATEWAY"] = "PAYMENT_GATEWAY";
|
|
10
|
+
})(SEGMENT_CODE || (SEGMENT_CODE = {}));
|
package/build/utils/index.d.ts
CHANGED
package/build/utils/index.js
CHANGED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { TextAndLang } from '../types/index.js';
|
|
2
|
+
interface Source {
|
|
3
|
+
code: string;
|
|
4
|
+
name: TextAndLang[];
|
|
5
|
+
}
|
|
6
|
+
interface PaymentMethod extends Source {
|
|
7
|
+
payment_methods: Source[];
|
|
8
|
+
}
|
|
9
|
+
export declare function transformPaymentMethodsData(data?: PaymentMethod[]): {
|
|
10
|
+
name: string;
|
|
11
|
+
type: string;
|
|
12
|
+
options: {
|
|
13
|
+
name: string;
|
|
14
|
+
type: string;
|
|
15
|
+
icon: string;
|
|
16
|
+
options: {
|
|
17
|
+
name: string | undefined;
|
|
18
|
+
type: string;
|
|
19
|
+
icon: string;
|
|
20
|
+
}[];
|
|
21
|
+
}[] | undefined;
|
|
22
|
+
};
|
|
23
|
+
export declare function transformPaymentSchemesData(data?: Source[]): {
|
|
24
|
+
name: string;
|
|
25
|
+
type: string;
|
|
26
|
+
options: {
|
|
27
|
+
name: string | undefined;
|
|
28
|
+
type: string;
|
|
29
|
+
icon: string;
|
|
30
|
+
}[];
|
|
31
|
+
};
|
|
32
|
+
export {};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import capitalize from 'lodash/capitalize';
|
|
2
|
+
import { lightUrl, PAYMENT_TYPES_ICONS } from '../constants/index.js';
|
|
3
|
+
import { getNameText } from './language';
|
|
4
|
+
export function transformPaymentMethodsData(data) {
|
|
5
|
+
return {
|
|
6
|
+
name: 'Payment Methods',
|
|
7
|
+
type: 'payment_methods',
|
|
8
|
+
options: data === null || data === void 0 ? void 0 : data.map((category) => {
|
|
9
|
+
var _a;
|
|
10
|
+
return {
|
|
11
|
+
name: capitalize(getNameText(category === null || category === void 0 ? void 0 : category.name)),
|
|
12
|
+
type: category === null || category === void 0 ? void 0 : category.code,
|
|
13
|
+
icon: PAYMENT_TYPES_ICONS[category.code],
|
|
14
|
+
options: (_a = category.payment_methods) === null || _a === void 0 ? void 0 : _a.map((method) => ({
|
|
15
|
+
name: getNameText(method.name),
|
|
16
|
+
type: method.code,
|
|
17
|
+
icon: `${lightUrl}/payment-method/${method.code}.svg`,
|
|
18
|
+
})),
|
|
19
|
+
};
|
|
20
|
+
}),
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
export function transformPaymentSchemesData(data = []) {
|
|
24
|
+
return {
|
|
25
|
+
name: 'Payment Schemes',
|
|
26
|
+
type: 'payment_scheme',
|
|
27
|
+
options: data
|
|
28
|
+
.filter((scheme) => scheme.code)
|
|
29
|
+
.map((scheme) => {
|
|
30
|
+
return {
|
|
31
|
+
name: getNameText(scheme === null || scheme === void 0 ? void 0 : scheme.name),
|
|
32
|
+
type: scheme === null || scheme === void 0 ? void 0 : scheme.code,
|
|
33
|
+
icon: `${lightUrl}/payment-method/${scheme.code}.svg`,
|
|
34
|
+
};
|
|
35
|
+
}),
|
|
36
|
+
};
|
|
37
|
+
}
|
package/package.json
CHANGED