@tap-payments/auth-jsconnect 2.8.52-development → 2.8.54-development
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/@types/app.d.ts +1 -0
- package/build/api/axios.js +1 -2
- package/build/components/AnimationFlow/AnimationFlow.js +2 -2
- package/build/components/AnimationFlow/BottomSheet.d.ts +3 -2
- package/build/components/AnimationFlow/BottomSheet.js +30 -6
- package/build/features/connect/Connect.d.ts +5 -1
- package/build/features/connect/Connect.js +9 -4
- package/package.json +1 -1
package/build/@types/app.d.ts
CHANGED
package/build/api/axios.js
CHANGED
|
@@ -42,8 +42,7 @@ var instance = axios.create({
|
|
|
42
42
|
headers: {
|
|
43
43
|
'Content-Type': 'application/json',
|
|
44
44
|
'Access-Control-Allow-Headers': true
|
|
45
|
-
}
|
|
46
|
-
timeout: 180000
|
|
45
|
+
}
|
|
47
46
|
});
|
|
48
47
|
instance.interceptors.request.use(function (config) {
|
|
49
48
|
return encryptionContractTransformer(config);
|
|
@@ -39,7 +39,7 @@ export default function AnimationFlow(_a) {
|
|
|
39
39
|
return (_jsx(Dialog, __assign({ pointerEvents: pointerEvents, onClose: onClose, onConfirm: onConfirm, open: open, isTapOrigin: isTapOrigin, animationType: animationType, merchantInfo: merchantInfo, isMaturityExpress: isMaturityExpress, hideTextLogo: (features === null || features === void 0 ? void 0 : features.tapTextLogo) === false, hideLanguage: (features === null || features === void 0 ? void 0 : features.switchLanguage) === false, hidePoweredBy: (features === null || features === void 0 ? void 0 : features.poweredBy) === false, hideMerchantLogo: (features === null || features === void 0 ? void 0 : features.merchantLogo) === false, animationDirection: animationDirection, dialogEdgeFormat: dialogEdgeFormat }, { children: children })));
|
|
40
40
|
}
|
|
41
41
|
if (type === 'BOTTOMSHEET') {
|
|
42
|
-
return (_jsx(BottomSheet, __assign({ pointerEvents: pointerEvents, open: open, isMaturityExpress: isMaturityExpress, merchantInfo: merchantInfo,
|
|
42
|
+
return (_jsx(BottomSheet, __assign({ pointerEvents: pointerEvents, open: open, onClose: onClose, isMaturityExpress: isMaturityExpress, merchantInfo: merchantInfo, hideMerchantLogo: (features === null || features === void 0 ? void 0 : features.merchantLogo) === false, hideFooter: (features === null || features === void 0 ? void 0 : features.switchLanguage) === false, hidePoweredBy: (features === null || features === void 0 ? void 0 : features.poweredBy) === false, dialogEdgeFormat: dialogEdgeFormat }, { children: children })));
|
|
43
43
|
}
|
|
44
|
-
return small ? (_jsx(BottomSheet, __assign({ pointerEvents: pointerEvents, open: open, screenId: screenId, isMaturityExpress: isMaturityExpress, merchantInfo: merchantInfo,
|
|
44
|
+
return small ? (_jsx(BottomSheet, __assign({ pointerEvents: pointerEvents, open: open, onClose: onClose, screenId: screenId, isMaturityExpress: isMaturityExpress, merchantInfo: merchantInfo, hideMerchantLogo: (features === null || features === void 0 ? void 0 : features.merchantLogo) === false, hideFooter: (features === null || features === void 0 ? void 0 : features.switchLanguage) === false, hidePoweredBy: (features === null || features === void 0 ? void 0 : features.poweredBy) === false, dialogEdgeFormat: dialogEdgeFormat }, { children: children }))) : (_jsx(Dialog, __assign({ pointerEvents: pointerEvents, onClose: onClose, onConfirm: onConfirm, open: open, isTapOrigin: isTapOrigin, animationType: animationType, merchantInfo: merchantInfo, isMaturityExpress: isMaturityExpress, hideTextLogo: (features === null || features === void 0 ? void 0 : features.tapTextLogo) === false, hideLanguage: (features === null || features === void 0 ? void 0 : features.switchLanguage) === false, hidePoweredBy: (features === null || features === void 0 ? void 0 : features.poweredBy) === false, hideMerchantLogo: (features === null || features === void 0 ? void 0 : features.merchantLogo) === false, animationDirection: animationDirection, dialogEdgeFormat: dialogEdgeFormat }, { children: children })));
|
|
45
45
|
}
|
|
@@ -9,10 +9,11 @@ export interface BottomSheetProps extends MainBottomSheetProps {
|
|
|
9
9
|
pointerEvents?: 'none' | 'auto';
|
|
10
10
|
isMaturityExpress?: boolean;
|
|
11
11
|
merchantInfo?: MerchantInfo;
|
|
12
|
-
|
|
12
|
+
hideFooter?: boolean;
|
|
13
13
|
hidePoweredBy?: boolean;
|
|
14
14
|
hideMerchantLogo?: boolean;
|
|
15
15
|
dialogEdgeFormat?: DialogEdgeFormat;
|
|
16
|
+
onClose?: () => void;
|
|
16
17
|
}
|
|
17
|
-
declare const _default: React.MemoExoticComponent<({ open, children, screenId, pointerEvents, isMaturityExpress, merchantInfo,
|
|
18
|
+
declare const _default: React.MemoExoticComponent<({ open, children, screenId, pointerEvents, isMaturityExpress, merchantInfo, hideFooter, hideMerchantLogo, dialogEdgeFormat, hidePoweredBy, onClose, ...rest }: BottomSheetProps) => import("react/jsx-runtime").JSX.Element>;
|
|
18
19
|
export default _default;
|
|
@@ -28,6 +28,7 @@ import Box from '@mui/material/Box';
|
|
|
28
28
|
import 'react-spring-bottom-sheet/dist/style.css';
|
|
29
29
|
import { ICONS_NAMES } from '../../constants';
|
|
30
30
|
import { useLanguage } from '../../hooks';
|
|
31
|
+
import Icon from '../Icon';
|
|
31
32
|
import { DialogEdgeFormat } from '../../@types';
|
|
32
33
|
import { CustomFooter, PoweredByFooter } from '../../features/shared/Footer';
|
|
33
34
|
import LogoBadge from '../LogoBadge';
|
|
@@ -75,15 +76,38 @@ var FooterStyled = styled(Box)(function (_a) {
|
|
|
75
76
|
var theme = _a.theme;
|
|
76
77
|
return (__assign(__assign({ bottom: theme.spacing(-5.625), position: 'fixed', height: theme.spacing(5.625), display: 'flex' }, theme.typography.caption), { justifyContent: 'center', alignItems: 'center', width: '100vw', background: '#E6E7E9', borderTop: '1px solid rgba(156, 160, 169, 0.3)' }));
|
|
77
78
|
});
|
|
79
|
+
var CloseIconStyled = styled(Icon)(function (_a) {
|
|
80
|
+
var theme = _a.theme;
|
|
81
|
+
return ({
|
|
82
|
+
width: theme.spacing(3.75),
|
|
83
|
+
height: theme.spacing(3.75)
|
|
84
|
+
});
|
|
85
|
+
});
|
|
86
|
+
var CloseBox = styled(Box)(function (_a) {
|
|
87
|
+
var theme = _a.theme;
|
|
88
|
+
return ({
|
|
89
|
+
display: 'flex',
|
|
90
|
+
justifyContent: 'end',
|
|
91
|
+
marginBlockStart: theme.spacing(2),
|
|
92
|
+
marginInlineEnd: theme.spacing(2),
|
|
93
|
+
cursor: 'pointer',
|
|
94
|
+
direction: theme.direction,
|
|
95
|
+
position: 'absolute',
|
|
96
|
+
right: 0,
|
|
97
|
+
left: 0,
|
|
98
|
+
zIndex: 9999
|
|
99
|
+
});
|
|
100
|
+
});
|
|
78
101
|
var BottomSheetComponent = function (_a) {
|
|
79
|
-
var open = _a.open, children = _a.children, screenId = _a.screenId, _b = _a.pointerEvents, pointerEvents = _b === void 0 ? 'auto' : _b, isMaturityExpress = _a.isMaturityExpress, merchantInfo = _a.merchantInfo,
|
|
102
|
+
var open = _a.open, children = _a.children, screenId = _a.screenId, _b = _a.pointerEvents, pointerEvents = _b === void 0 ? 'auto' : _b, isMaturityExpress = _a.isMaturityExpress, merchantInfo = _a.merchantInfo, hideFooter = _a.hideFooter, hideMerchantLogo = _a.hideMerchantLogo, dialogEdgeFormat = _a.dialogEdgeFormat, hidePoweredBy = _a.hidePoweredBy, onClose = _a.onClose, rest = __rest(_a, ["open", "children", "screenId", "pointerEvents", "isMaturityExpress", "merchantInfo", "hideFooter", "hideMerchantLogo", "dialogEdgeFormat", "hidePoweredBy", "onClose"]);
|
|
80
103
|
var sheetRef = React.useRef(null);
|
|
81
104
|
var isAr = useLanguage().isAr;
|
|
82
105
|
var logo = (merchantInfo || {}).logo;
|
|
106
|
+
var handleOnCloseButton = function () {
|
|
107
|
+
onClose && onClose();
|
|
108
|
+
};
|
|
83
109
|
var getLanguageBarHeight = function () {
|
|
84
|
-
|
|
85
|
-
var documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
|
|
86
|
-
return documentHeight - viewportHeight + (isMaturityExpress ? 150 : 70);
|
|
110
|
+
return isMaturityExpress && !hideFooter ? 150 : 70;
|
|
87
111
|
};
|
|
88
112
|
var getMinHeight = function (maxHeight) {
|
|
89
113
|
var el = document.getElementById('main-feature-container');
|
|
@@ -103,9 +127,9 @@ var BottomSheetComponent = function (_a) {
|
|
|
103
127
|
}, 500);
|
|
104
128
|
}
|
|
105
129
|
}, [screenId]);
|
|
106
|
-
return (_jsxs(BottomSheetStyled, __assign({ languageBarHeight: getLanguageBarHeight(), dialogEdgeFormat: dialogEdgeFormat, sibling:
|
|
130
|
+
return (_jsxs(BottomSheetStyled, __assign({ languageBarHeight: getLanguageBarHeight(), dialogEdgeFormat: dialogEdgeFormat, sibling: hideFooter ? (_jsx(_Fragment, {})) : (open && (_jsx(LanguageFooterStyled, { children: _jsx(CustomFooter, {}) }))), isMaturityExpress: isMaturityExpress, sx: { pointerEvents: pointerEvents }, ref: sheetRef, open: open, snapPoints: function (_a) {
|
|
107
131
|
var maxHeight = _a.maxHeight;
|
|
108
132
|
return [getMinHeight(maxHeight), maxHeight * 0.95];
|
|
109
|
-
} }, rest, { children: [isMaturityExpress && !hideMerchantLogo && (_jsx(LogoBadge, { src: isMaturityExpress ? logo || ICONS_NAMES.LOGO_ICON : ICONS_NAMES.LOGO_ICON })), children, isMaturityExpress && !hidePoweredBy && (_jsx(FooterStyled, { children: _jsx(PoweredByFooter, { id: 'bottom-sheet-powered_by_footer', sx: { margin: '0px' }, textSx: { color: 'rgba(63, 66, 77, 0.6)' }, icon: isAr ? ICONS_NAMES.LOGO_WITH_NAME_DARK_AR_ICON : ICONS_NAMES.LOGO_WITH_NAME_DARK_EN_ICON }) }))] })));
|
|
133
|
+
} }, rest, { children: [isMaturityExpress && !hideMerchantLogo && (_jsx(LogoBadge, { src: isMaturityExpress ? logo || ICONS_NAMES.LOGO_ICON : ICONS_NAMES.LOGO_ICON })), onClose && (_jsx(CloseBox, __assign({ id: 'close-container', onClick: handleOnCloseButton }, { children: _jsx(CloseIconStyled, { src: ICONS_NAMES.CLOSE_ICON }) }))), children, isMaturityExpress && !hidePoweredBy && (_jsx(FooterStyled, { children: _jsx(PoweredByFooter, { id: 'bottom-sheet-powered_by_footer', sx: { margin: '0px' }, textSx: { color: 'rgba(63, 66, 77, 0.6)' }, icon: isAr ? ICONS_NAMES.LOGO_WITH_NAME_DARK_AR_ICON : ICONS_NAMES.LOGO_WITH_NAME_DARK_EN_ICON }) }))] })));
|
|
110
134
|
};
|
|
111
135
|
export default React.memo(BottomSheetComponent);
|
|
@@ -3,7 +3,11 @@ export interface ConnectLibProps extends LibConfig {
|
|
|
3
3
|
configToken?: string;
|
|
4
4
|
leadId?: string;
|
|
5
5
|
}
|
|
6
|
-
|
|
6
|
+
interface ConnectFullProps extends ConnectLibProps {
|
|
7
|
+
unmount?: () => void;
|
|
8
|
+
}
|
|
9
|
+
export declare function ConnectElement(props: ConnectFullProps): import("react/jsx-runtime").JSX.Element;
|
|
7
10
|
export declare function renderConnectLib(config: ConnectLibProps, elementId: string): {
|
|
8
11
|
unmount: () => void;
|
|
9
12
|
};
|
|
13
|
+
export {};
|
|
@@ -61,11 +61,12 @@ import { CONNECT_SCREENS_NAVIGATION } from '../../constants';
|
|
|
61
61
|
import { connectFeatureScreens } from '../featuresScreens';
|
|
62
62
|
import Background from '../shared/Background';
|
|
63
63
|
var Connect = memo(function (props) {
|
|
64
|
+
var _a;
|
|
64
65
|
var theme = useAppTheme().theme;
|
|
65
66
|
var dispatch = useAppDispatch();
|
|
66
67
|
var configToken = props.configToken;
|
|
67
|
-
var
|
|
68
|
-
var
|
|
68
|
+
var _b = useAppSelector(settingsSelector), data = _b.data, error = _b.error, settingLoading = _b.loading;
|
|
69
|
+
var _c = useAppSelector(connectSelector), connectError = _c.error, loading = _c.loading, customLoading = _c.customLoading, connectData = _c.data;
|
|
69
70
|
var leadId = connectData.leadId;
|
|
70
71
|
var onVerifyConfigTokenSuccess = function (data) { return __awaiter(void 0, void 0, void 0, function () {
|
|
71
72
|
var lead, id;
|
|
@@ -134,8 +135,12 @@ var Connect = memo(function (props) {
|
|
|
134
135
|
}, [data.businessCountry]);
|
|
135
136
|
var handleDialogClose = function () {
|
|
136
137
|
dispatch(handleOpen(false));
|
|
138
|
+
setTimeout(function () {
|
|
139
|
+
var _a;
|
|
140
|
+
(_a = props.unmount) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
141
|
+
}, 1100);
|
|
137
142
|
};
|
|
138
|
-
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', onConfirm: handleDialogClose, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: false, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: __assign(__assign({}, appConfig.features), { tapTextLogo: activeScreen.name !== 'CONNECT_BUSINESS_COUNTRY_STEP', poweredBy: false }) }, { children: _jsx(FeatureContainer, __assign({ isMaturityExpress: false }, { children: connectFeatureScreens.map(function (_a, index) {
|
|
143
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: !isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', onConfirm: handleDialogClose, onClose: ((_a = appConfig.features) === null || _a === void 0 ? void 0 : _a.closeButton) ? handleDialogClose : undefined, isTapOrigin: !isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: false, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: __assign(__assign({}, appConfig.features), { tapTextLogo: activeScreen.name !== 'CONNECT_BUSINESS_COUNTRY_STEP', poweredBy: false }) }, { children: _jsx(FeatureContainer, __assign({ isMaturityExpress: false }, { children: connectFeatureScreens.map(function (_a, index) {
|
|
139
144
|
var Element = _a.element, name = _a.name;
|
|
140
145
|
var isActive = activeScreen.name === name;
|
|
141
146
|
return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
|
|
@@ -147,7 +152,7 @@ export function ConnectElement(props) {
|
|
|
147
152
|
export function renderConnectLib(config, elementId) {
|
|
148
153
|
var element = findOrCreateElementAndInject(elementId);
|
|
149
154
|
var root = createRoot(element);
|
|
150
|
-
root.render(_jsx(ConnectElement, __assign({}, config)));
|
|
151
155
|
var unmount = function () { return root.unmount(); };
|
|
156
|
+
root.render(_jsx(ConnectElement, __assign({}, config, { unmount: unmount })));
|
|
152
157
|
return { unmount: unmount };
|
|
153
158
|
}
|