75 |
174 |
175 | );
176 | };
177 |
178 | export default Header;
--------------------------------------------------------------------------------
/src/components/Icon/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface IProps extends React.HTMLProps
76 | {
114 | document.body.click();
115 | e.stopPropagation();
116 | setI18nMenuOpen(true);
117 | }}
118 | className={styles['language-popup']}
119 | >
120 | {i18n === 'en-US' ? 'English' : '中文'}
121 |
123 | }
124 | >
125 |
77 | {
78 | isScroll
79 | ? })
80 | : })
81 | }
82 |
83 | {
84 | isLogin && (
85 |
80 | :
81 | }
82 |
86 | { gotoStart(); }}>
87 |
102 | )
103 | }
104 |
105 | { setI18nMenuOpen(false); }}>
126 |
133 |
134 | { setI18n('en-US'); }}>
127 | English
128 |
129 | { setI18n('zh-CN'); }}>
130 | 中文
131 |
132 | { setShowMenus(!showMenus); }}>
135 | { showMenus ?
137 | {
138 | showMenus && (
139 |
140 |
171 | )
172 | }
173 | {
141 | gotoStart();
142 | setShowMenus(false);
143 | }}>
144 |
146 | {
147 | gotoFirstTask();
148 | setShowMenus(false);
149 | }}>
150 |
152 | {
153 | gotoSecondtTask();
154 | setShowMenus(false);
155 | }}>
156 |
158 | {
159 | gotoThirdTask();
160 | setShowMenus(false);
161 | }}>
162 |
164 | {
165 | gotoFourthTask();
166 | setShowMenus(false);
167 | }}>
168 |
170 |
10 | { props.children }
11 |
12 | );
13 | };
14 |
15 | export default BasicLayout;
--------------------------------------------------------------------------------
/src/locales/en-US.json:
--------------------------------------------------------------------------------
1 | {
2 | "header.start": "Home",
3 | "header.status": "Enabled/disabled",
4 | "header.user": "For user",
5 | "header.percentage": "Percentage",
6 | "header.variation": "Variations",
7 |
8 | "demo.title": "Interactive experience",
9 | "demo.description": "Here is a SPA(Single Page Application). It updates its UI according to the toggle status configured on FeatureProbe platform. Click the link below to open FeatureProbe platform and follow the steps to run the demo.",
10 | "demo.userid": "Your userId is 00003",
11 | "demo.start.login.description": "Click the link below to open FeatureProbe platform and follow the steps to run the demo.",
12 | "demo.start.unlogin.description": "Here is a SPA(Single Page Application). It updates its UI according to the toggle status configured on FeatureProbe platform. Click 'Try Now' to experience~ 🎉",
13 | "demo.try.btn": "Try Now",
14 | "demo.welcome": "Welcome! {account}",
15 |
16 | "demo.task1.title": "Task 1: enable/disable a feature toggle.",
17 | "demo.task1.description": "We have launched a marketing promotion campaign. The basic use case is inviting all end users or not letting them know the campaign by toggling the toggle between “enable” and ”disable” status.",
18 | "demo.task1.task.left": "You will find the “",
19 | "demo.task1.task.right": "” toggle and “enable” it so that all end users will see the marketing campaign.",
20 | "demo.task1.status.on": "The entry page of the campaign is: ",
21 | "demo.task1.status.off": "Not showing the campaign entry page.",
22 |
23 | "demo.task2.title": "Task 2: enable a toggle for a group of specified users.",
24 | "demo.task2.description": "We have launched a marketing promotion campaign. We are going to invite some “internal users” in the first place and let them give it a try. If it goes smoothly, we will extend the invitation to the rest users.",
25 | "demo.task2.task.left": "You will find the “",
26 | "demo.task2.task.right": "” toggle first. Since you are one of the “internal users”, you will want to add your userId into the custom rules so that you will be invited to the marketing campaign. Remember that your userId is 00003.",
27 | "demo.task2.status.on": "The entry page of the campaign shown to userId 00003 is: ",
28 | "demo.task2.status.off": "Not showing the campaign entry page to userId 00003.",
29 |
30 | "demo.task3.title": "Task 3: enable a toggle to users by percentage.",
31 | "demo.task3.description": "To mitigate the risks, we will allow a proportional of end users to join the newly launched market campaign.",
32 | "demo.task3.task.left": "You will find the “",
33 | "demo.task3.task.right": "” toggle and modify the percentage setting. The current setting is 40% and it allow as many as 40% of total users to join. But you cannot see the campaign entry page because you are not one of the 40% users. Try to increase the percentage until you can see the entry page.",
34 | "demo.task3.status.on": "The entry page of the campaign shown to userId 00003 is: ",
35 | "demo.task3.status.off": "Not showing the campaign entry page to userId 00003.",
36 |
37 | "demo.task4.title": "Task 4: customize groups.",
38 | "demo.task4.description": "We decide to show different price tags to different users of a specific product which will be put on the rack shortly. It is not ideal to give a special discount to some users based on a true/false toggle, and we need more options. In FeatureProbe, you can customize pricing groups and specify toggles to each group to achieve rich settings.",
39 | "demo.task4.task.left": "You will find the “",
40 | "demo.task4.task.right": "” toggle and add a new pricing group. Set the group's name and value as “30” respectively. Select your userId(here is 00003) and set the return value as the newly added group 30.",
41 | "demo.task4.status": "The pricing format shown to userId 00003 is: $",
42 |
43 | "demo.ready": "You are now in the「feature」delivery new era.",
44 |
45 | "login.demo.text": "Access FeatureProbe demo instance",
46 | "login.demo.tip": "No further data required",
47 | "login.email.text": "Email",
48 | "login.email.placeholder.text": "Please input email address",
49 | "login.email.invalid.text": "Invalid email address",
50 | "login.signin": "Sign in",
51 | "login.error.message": "Login error, please retry!",
52 | "login.demo.password.tip": "The quick trial environment provides password free login, and the open source version supports password customization",
53 |
54 | "qrcode.title": "Scan WeChat QR code"
55 | }
--------------------------------------------------------------------------------
/src/locales/intl.tsx:
--------------------------------------------------------------------------------
1 | import { ReactElement } from 'react';
2 | import { IntlProvider } from 'react-intl';
3 | import { I18NContainer } from 'hooks';
4 | import dayjs from 'dayjs';
5 | import zh_CN from './zh-CN.json';
6 | import en_US from './en-US.json';
7 |
8 | interface IProps {
9 | children: ReactElement
10 | }
11 |
12 | const Intl = (props: IProps) => {
13 | const { children } = props;
14 |
15 | const {
16 | i18n,
17 | } = I18NContainer.useContainer();
18 |
19 | const chooseLocale = (val: string) => {
20 | const _val = val || navigator.language;
21 | switch (_val) {
22 | case 'en-US':
23 | dayjs.locale('en');
24 | return en_US;
25 | case 'zh-CN':
26 | dayjs.locale('zh-CN');
27 | return zh_CN;
28 | default:
29 | return en_US;
30 | }
31 | };
32 |
33 | return (
34 |
155 | setLoginOpen(false)}
472 | onOpen={() => setLoginOpen(true)}
473 | className={styles['modal-container']}
474 | >
475 |
538 |
539 | {/* qr code */}
540 | {
541 | isShow && (
542 |
560 | );
561 | };
562 |
563 | export default Home;
564 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
162 |
243 |
244 | {/* first task */}
245 | {
246 | isLogin && (
247 |
163 |
235 | {
236 | isLogin && (
237 |
164 | })
165 | })
167 |
168 |
169 | {
170 | isLogin ? (
171 |
165 |
167 |
172 |
173 | {
174 | intl.formatMessage({
175 | id: 'demo.welcome'
176 | }, {
177 | account: localStorage.getItem('account')
178 | })
179 | }
180 |
181 |
182 | ) : (
183 |
184 |
203 | )
204 | }
205 |
206 |
185 |
202 |
186 |
189 |
190 |
193 |
194 |
197 |
198 |
201 |
207 | { isLogin ?
209 | {
210 | isLogin && (
211 | <>
212 |
213 |
214 |
215 | https://featureprobe.io
216 |
217 |
218 |
219 |
220 |
222 |
223 | )
224 | }
225 | {
226 | !isLogin && (
227 |
228 |
231 |
232 | )
233 | }
234 |
238 |
240 | )
241 | }
242 |
248 |
291 | )
292 | }
293 |
294 | {/* second task */}
295 | {
296 | isLogin && (
297 |
249 |
290 |
250 | })
251 |
252 |
251 |
253 |
289 |
254 |
256 |
257 |
259 |
268 | {
269 | firstTaskStatusOn ? (
270 |
271 |
282 | ) : (
283 |
272 |
274 |
275 | {
276 | localStorage.getItem('i18n')?.replaceAll('"', '') === 'en-US'
277 | ? })
278 | : })
279 | }
280 |
281 |
278 | :
279 | }
280 |
284 |
286 | )
287 | }
288 |
298 | })
341 | })
342 |
343 | )
344 | }
345 |
346 | {/* third task */}
347 | {
348 | isLogin && (
349 |
299 |
340 |
300 | })
301 |
302 |
301 |
303 |
339 |
304 |
306 |
307 |
309 |
318 | {
319 | secondTaskStatusOn ? (
320 |
321 |
332 | ) : (
333 |
322 |
324 |
325 | {
326 | localStorage.getItem('i18n')?.replaceAll('"', '') === 'en-US'
327 | ?
328 | :
329 | }
330 |
331 |
328 | :
329 | }
330 |
334 |
336 | )
337 | }
338 |
341 |
342 |
350 |
393 | )
394 | }
395 |
396 | {/* fourth task */}
397 | {
398 | isLogin && (
399 |
351 |
392 |
352 | })
353 |
354 |
353 |
355 |
391 |
356 |
358 |
359 |
361 |
370 | {
371 | thirdTaskStatusOn ? (
372 |
373 |
384 | ) : (
385 |
374 |
376 |
377 | {
378 | localStorage.getItem('i18n')?.replaceAll('"', '') === 'en-US'
379 | ?
380 | :
381 | }
382 |
383 |
380 | :
381 | }
382 |
386 |
388 | )
389 | }
390 |
400 | })
447 |
448 | )
449 | }
450 | {
451 | isLogin && (
452 |
401 |
446 |
402 | })
403 |
404 |
403 |
405 |
445 |
406 |
408 |
409 |
411 |
420 |
421 |
444 |
422 | {
423 | intl.formatMessage({ id: 'demo.task4.status' })
424 | }
425 | {
426 | fourthTaskResultShow && { fourthTaskStatusOn }
427 | }
428 |
429 |
430 | {
431 | localStorage.getItem('i18n')?.replaceAll('"', '') === 'en-US'
432 | ? })
433 | : })
434 | }
435 | {
436 | fourthTaskResultShow && (
437 |
443 |
433 | :
434 | }
435 | {
436 | fourthTaskResultShow && (
437 |
438 | { fourthTaskStatusOn }
439 |
440 | )
441 | }
442 |
447 |
453 |
463 | )
464 | }
465 |
466 | {/* login modal */}
467 |
454 |
456 |
457 | 
458 |
459 |
460 |
462 |
476 |
537 |
477 |
536 |
478 |
480 |
481 |
483 |
484 |
534 |
535 |
543 |
554 | )
555 | }
556 |
544 |
546 |
547 | }`})
552 |
553 |
552 | { showQrCode(true); }} onMouseLeave={() => { showQrCode(false); }}>
557 |
559 |