@momo-kits/foundation 0.121.3-rc.3 → 0.121.3
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.
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import React, {useContext} from 'react';
|
|
2
|
+
import {StyleSheet, TouchableOpacity, View} from 'react-native';
|
|
3
|
+
import {ApplicationContext, MiniAppContext} from '../index';
|
|
4
|
+
import {Colors, Radius, Spacing, Styles} from '../../Consts';
|
|
5
|
+
import {Text} from '../../Text';
|
|
6
|
+
import {Icon} from '../../Icon';
|
|
7
|
+
|
|
8
|
+
const ServiceItem: React.FC<any> = ({service}) => {
|
|
9
|
+
const {theme, translate} = useContext(ApplicationContext);
|
|
10
|
+
const {title, description, icon, onPress} = service;
|
|
11
|
+
const serviceTitle = translate?.(title);
|
|
12
|
+
const serviceDescription = translate?.(description);
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<TouchableOpacity onPress={onPress} style={Styles.row}>
|
|
16
|
+
<View style={styles.iconWrapper}>
|
|
17
|
+
<Icon color={theme.colors.text.hint} source={icon} size={28} />
|
|
18
|
+
</View>
|
|
19
|
+
<View>
|
|
20
|
+
<View style={Styles.row}>
|
|
21
|
+
<Text typography={'action_xs_bold'}>{serviceTitle}</Text>
|
|
22
|
+
<Icon source={'arrow_chevron_right_small'} size={16} />
|
|
23
|
+
</View>
|
|
24
|
+
<Text
|
|
25
|
+
typography={'description_xs_regular'}
|
|
26
|
+
color={theme.colors.text.hint}>
|
|
27
|
+
{serviceDescription}
|
|
28
|
+
</Text>
|
|
29
|
+
</View>
|
|
30
|
+
</TouchableOpacity>
|
|
31
|
+
);
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
const BottomSheetHelpCenter: React.FC<any> = ({onRequestClose}) => {
|
|
35
|
+
const {theme, navigator} = useContext(ApplicationContext);
|
|
36
|
+
const context = useContext<any>(MiniAppContext);
|
|
37
|
+
|
|
38
|
+
const onPressFaq = () => {
|
|
39
|
+
const routes = navigator?.ref.current?.getRootState()?.routes || [];
|
|
40
|
+
const routesLength = routes.length;
|
|
41
|
+
let screenName = routes?.[0]?.params?.screen?.name;
|
|
42
|
+
if (routesLength > 1) {
|
|
43
|
+
screenName = routes[routesLength - 2]?.params?.screen?.name;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
context?.autoTracking?.({
|
|
47
|
+
...context,
|
|
48
|
+
componentName: 'TouchableOpacity',
|
|
49
|
+
componentId: 'bottomsheet_faq_item',
|
|
50
|
+
screenName: screenName,
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
onRequestClose?.(() => {
|
|
54
|
+
navigator?.maxApi?.startFeatureCode?.(
|
|
55
|
+
'helpcenter_problemlevel1',
|
|
56
|
+
context?.toolkitConfig?.faq
|
|
57
|
+
);
|
|
58
|
+
});
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
const onPressChatbot = () => {
|
|
62
|
+
const routes = navigator?.ref.current?.getRootState()?.routes || [];
|
|
63
|
+
const routesLength = routes.length;
|
|
64
|
+
let screenName = routes?.[0]?.params?.screen?.name;
|
|
65
|
+
if (routesLength > 1) {
|
|
66
|
+
screenName = routes[routesLength - 2]?.params?.screen?.name;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
context?.autoTracking?.({
|
|
70
|
+
...context,
|
|
71
|
+
componentName: 'TouchableOpacity',
|
|
72
|
+
componentId: 'bottomsheet_chatbot_item',
|
|
73
|
+
screenName: screenName,
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
onRequestClose?.(() => {
|
|
77
|
+
navigator?.maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
|
|
78
|
+
let screenName = data?.screenName;
|
|
79
|
+
navigator?.maxApi?.startFeatureCode?.('chatbot', {
|
|
80
|
+
botId: 'botGptCs',
|
|
81
|
+
forwardParams: {
|
|
82
|
+
forService: 'navigation',
|
|
83
|
+
mini_app_id: context?.appId,
|
|
84
|
+
feature_code: context?.code,
|
|
85
|
+
screen_name: screenName,
|
|
86
|
+
},
|
|
87
|
+
});
|
|
88
|
+
});
|
|
89
|
+
});
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
const onPressFeedback = () => {
|
|
93
|
+
const routes = navigator?.ref.current?.getRootState()?.routes || [];
|
|
94
|
+
const routesLength = routes.length;
|
|
95
|
+
let screenName = routes?.[0]?.params?.screen?.name;
|
|
96
|
+
if (routesLength > 1) {
|
|
97
|
+
screenName = routes[routesLength - 2]?.params?.screen?.name;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
context?.autoTracking?.({
|
|
101
|
+
...context,
|
|
102
|
+
componentName: 'TouchableOpacity',
|
|
103
|
+
componentId: 'bottomsheet_feedback_item',
|
|
104
|
+
screenName: screenName,
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
onRequestClose?.(() => {
|
|
108
|
+
navigator?.maxApi?.startFeatureCode?.('feedback', {
|
|
109
|
+
forService: 'navigation',
|
|
110
|
+
loggedStatus: true,
|
|
111
|
+
application: {
|
|
112
|
+
appId: context?.appId,
|
|
113
|
+
appCode: context?.code,
|
|
114
|
+
appName: context?.name?.['en'],
|
|
115
|
+
buildNumber: context?.buildNumber,
|
|
116
|
+
},
|
|
117
|
+
newUi: true,
|
|
118
|
+
stepFeedback: 1,
|
|
119
|
+
});
|
|
120
|
+
});
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
const services = [
|
|
124
|
+
{
|
|
125
|
+
title: {vi: 'Câu hỏi thường gặp', en: 'Câu hỏi thường gặp'},
|
|
126
|
+
description: {
|
|
127
|
+
vi: 'Giải đáp các thắc mắc mọi người thường gặp',
|
|
128
|
+
en: 'Giải đáp các thắc mắc mọi người thường gặp',
|
|
129
|
+
},
|
|
130
|
+
icon: 'notifications_circle_question',
|
|
131
|
+
onPress: onPressFaq,
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
title: {vi: 'Hỗ trợ trực tuyến', en: 'Hỗ trợ trực tuyến'},
|
|
135
|
+
description: {
|
|
136
|
+
vi: 'Trả lời mọi câu hỏi của bạn 24/7',
|
|
137
|
+
en: 'Trả lời mọi câu hỏi của bạn 24/7',
|
|
138
|
+
},
|
|
139
|
+
icon: 'ic_support',
|
|
140
|
+
onPress: onPressChatbot,
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
title: {vi: 'Chia sẻ góp ý', en: 'Chia sẻ góp ý'},
|
|
144
|
+
description: {
|
|
145
|
+
vi: 'Đề xuất cải thiện hoặc báo lỗi sản phẩm/dịch vụ',
|
|
146
|
+
en: 'Đề xuất cải thiện hoặc báo lỗi sản phẩm/dịch vụ',
|
|
147
|
+
},
|
|
148
|
+
icon: 'file_mail',
|
|
149
|
+
onPress: onPressFeedback,
|
|
150
|
+
},
|
|
151
|
+
];
|
|
152
|
+
|
|
153
|
+
return (
|
|
154
|
+
<View
|
|
155
|
+
style={[
|
|
156
|
+
styles.container,
|
|
157
|
+
{
|
|
158
|
+
backgroundColor: theme.colors.background.surface,
|
|
159
|
+
},
|
|
160
|
+
]}>
|
|
161
|
+
{services.map((item, index) => {
|
|
162
|
+
return (
|
|
163
|
+
<>
|
|
164
|
+
<ServiceItem service={item} />
|
|
165
|
+
{index !== services.length - 1 && <View style={styles.divider} />}
|
|
166
|
+
</>
|
|
167
|
+
);
|
|
168
|
+
})}
|
|
169
|
+
</View>
|
|
170
|
+
);
|
|
171
|
+
};
|
|
172
|
+
|
|
173
|
+
const styles = StyleSheet.create({
|
|
174
|
+
container: {height: 300, width: '100%', padding: Spacing.M},
|
|
175
|
+
divider: {
|
|
176
|
+
marginVertical: Spacing.M,
|
|
177
|
+
backgroundColor: Colors.black_02,
|
|
178
|
+
height: 1,
|
|
179
|
+
width: '100%',
|
|
180
|
+
},
|
|
181
|
+
iconWrapper: {
|
|
182
|
+
width: 36,
|
|
183
|
+
height: 36,
|
|
184
|
+
backgroundColor: Colors.black_02,
|
|
185
|
+
borderRadius: Radius.M,
|
|
186
|
+
marginRight: Spacing.S,
|
|
187
|
+
alignItems: 'center',
|
|
188
|
+
justifyContent: 'center',
|
|
189
|
+
},
|
|
190
|
+
});
|
|
191
|
+
|
|
192
|
+
export {BottomSheetHelpCenter};
|
|
@@ -30,7 +30,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
|
|
|
30
30
|
}) => {
|
|
31
31
|
const context = useContext<any>(MiniAppContext);
|
|
32
32
|
const navigationRef = useRef<NavigationContainerRef>(null);
|
|
33
|
-
const routes = useRef<any>(
|
|
33
|
+
const routes = useRef<any>();
|
|
34
34
|
const isReady = useRef(false);
|
|
35
35
|
const navigator = useRef(new Navigator(navigationRef, isReady));
|
|
36
36
|
const [showGrid, setShowGrid] = useState(false);
|
|
@@ -62,21 +62,8 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
|
|
|
62
62
|
}
|
|
63
63
|
);
|
|
64
64
|
|
|
65
|
-
const onFocusApp = maxApi?.listen?.('onFocusApp', () => {
|
|
66
|
-
const routes = navigationRef.current?.getRootState?.()?.routes;
|
|
67
|
-
const currentRoute: any = routes?.[routes?.length - 1];
|
|
68
|
-
const current = currentRoute?.params?.screen;
|
|
69
|
-
const screenName = current?.name ?? current?.type?.name;
|
|
70
|
-
|
|
71
|
-
maxApi?.getDataObserver('current_screen', (data: any) => {
|
|
72
|
-
onScreenNavigated(data?.screenName, screenName, 'push', 'Screen');
|
|
73
|
-
maxApi?.setObserver('current_screen', {screenName});
|
|
74
|
-
});
|
|
75
|
-
});
|
|
76
|
-
|
|
77
65
|
return () => {
|
|
78
66
|
subscription?.remove?.();
|
|
79
|
-
onFocusApp?.remove?.();
|
|
80
67
|
};
|
|
81
68
|
}, []);
|
|
82
69
|
|
|
@@ -172,15 +159,16 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
|
|
|
172
159
|
onReady={() => {
|
|
173
160
|
isReady.current = true;
|
|
174
161
|
routes.current = navigationRef.current?.getRootState?.()?.routes;
|
|
175
|
-
|
|
176
|
-
maxApi?.getDataObserver('current_screen', (data: any) => {
|
|
162
|
+
maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
|
|
177
163
|
onScreenNavigated(
|
|
178
164
|
data?.screenName,
|
|
179
|
-
|
|
165
|
+
screen?.name,
|
|
180
166
|
'push',
|
|
181
167
|
'Screen'
|
|
182
168
|
);
|
|
183
|
-
maxApi?.setObserver('
|
|
169
|
+
maxApi?.setObserver('CURRENT_SCREEN', {
|
|
170
|
+
screenName: screen?.name,
|
|
171
|
+
});
|
|
184
172
|
});
|
|
185
173
|
}}
|
|
186
174
|
onStateChange={state => {
|
|
@@ -220,7 +208,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
|
|
|
220
208
|
|
|
221
209
|
routes.current = state?.routes;
|
|
222
210
|
maxApi?.of?.({screenName});
|
|
223
|
-
maxApi?.setObserver('
|
|
211
|
+
maxApi?.setObserver('CURRENT_SCREEN', {screenName});
|
|
224
212
|
}}
|
|
225
213
|
independent={true}>
|
|
226
214
|
<Stack.Navigator initialRouteName="Stack" headerMode="screen">
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@momo-kits/foundation",
|
|
3
|
-
"version": "0.121.3
|
|
3
|
+
"version": "0.121.3",
|
|
4
4
|
"minimumDeployTarget": 32,
|
|
5
|
-
"deploymentTarget":
|
|
5
|
+
"deploymentTarget": 120,
|
|
6
6
|
"description": "React Native Component Kits",
|
|
7
7
|
"main": "index.ts",
|
|
8
8
|
"scripts": {},
|
|
@@ -16,13 +16,13 @@
|
|
|
16
16
|
"react-native-linear-gradient": "2.8.3",
|
|
17
17
|
"react-native-gesture-handler": "1.10.3",
|
|
18
18
|
"react-native-fast-image": "8.1.5",
|
|
19
|
-
"@react-navigation/bottom-tabs": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-bottom-tabs.git",
|
|
20
19
|
"@react-navigation/core": "5.16.1",
|
|
21
20
|
"@react-navigation/native": "5.9.8",
|
|
22
21
|
"@react-navigation/routers": "5.7.4",
|
|
23
|
-
"react-native-reanimated": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-reanimated.git#v1.13.4_gradle_7",
|
|
24
|
-
"lottie-react-native": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/momo-lottie-react-native.git
|
|
25
|
-
"@react-navigation/stack": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-navigation-stack.git"
|
|
22
|
+
"react-native-reanimated": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-reanimated.git#v1.13.4_gradle_7",
|
|
23
|
+
"lottie-react-native": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/momo-lottie-react-native.git",
|
|
24
|
+
"@react-navigation/stack": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-navigation-stack.git",
|
|
25
|
+
"@react-navigation/bottom-tabs": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-bottom-tabs.git"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"react-native": "*"
|
package/publish.sh
CHANGED
|
@@ -9,13 +9,10 @@ elif [ "$1" == "latest" ]; then
|
|
|
9
9
|
npm version $(npm view @momo-kits/foundation@latest version)
|
|
10
10
|
npm version prerelease --preid=rc
|
|
11
11
|
npm publish --tag latest --access=public
|
|
12
|
-
|
|
12
|
+
else
|
|
13
13
|
npm version $(npm view @momo-kits/foundation@beta version)
|
|
14
14
|
npm version prerelease --preid=beta
|
|
15
15
|
npm publish --tag beta --access=public
|
|
16
|
-
else
|
|
17
|
-
npm publish --tag alpha --access=public
|
|
18
16
|
fi
|
|
19
|
-
|
|
20
17
|
PACKAGE_NAME=$(npm pkg get name)
|
|
21
18
|
NEW_PACKAGE_VERSION=$(npm pkg get version)
|