Skip to content

Commit b6bf467

Browse files
wachuneibrianacnguyendesi
authored
feat(ramp): add activation keys labels and DS components (#9119)
Co-authored-by: Brian Nguyen <brianacnguyen@gmail.com> Co-authored-by: Desi McAdam <desi.mcadam@gmail.com>
1 parent c0c3b8e commit b6bf467

File tree

17 files changed

+1743
-2326
lines changed

17 files changed

+1743
-2326
lines changed

‎app/components/Nav/Main/MainNavigator.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ import Drawer from '../../UI/Drawer';
5151
import RampRoutes from '../../UI/Ramp/routes';
5252
import { RampType } from '../../UI/Ramp/types';
5353
import RampSettings from '../../UI/Ramp/Views/Settings';
54-
import RampAddActivationKey from '../../UI/Ramp/Views/Settings/AddActivationKey';
54+
import RampActivationKeyForm from '../../UI/Ramp/Views/Settings/ActivationKeyForm';
5555

5656
import { colors as importedColors } from '../../../styles/common';
5757
import OrderDetails from '../../UI/Ramp/Views/OrderDetails';
@@ -269,8 +269,8 @@ const SettingsFlow = () => (
269269
/>
270270
<Stack.Screen name={Routes.RAMP.SETTINGS} component={RampSettings} />
271271
<Stack.Screen
272-
name={Routes.RAMP.ADD_ACTIVATION_KEY}
273-
component={RampAddActivationKey}
272+
name={Routes.RAMP.ACTIVATION_KEY_FORM}
273+
component={RampActivationKeyForm}
274274
/>
275275
<Stack.Screen
276276
name="ExperimentalSettings"

‎app/components/UI/Ramp/Views/Settings/AddActivationKey.test.tsx‎ renamed to ‎app/components/UI/Ramp/Views/Settings/ActivationKeyForm.test.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import AddActivationKey from './AddActivationKey';
1+
import ActivationKeyForm from './ActivationKeyForm';
22
import { renderScreen } from '../../../../../util/test/renderWithProvider';
33
import initialBackgroundState from '../../../../../util/test/initial-background-state.json';
44
import Routes from '../../../../../constants/navigation/Routes';
@@ -8,7 +8,7 @@ function render(Component: React.ComponentType) {
88
return renderScreen(
99
Component,
1010
{
11-
name: Routes.RAMP.ADD_ACTIVATION_KEY,
11+
name: Routes.RAMP.ACTIVATION_KEY_FORM,
1212
},
1313
{
1414
state: {
@@ -45,37 +45,37 @@ describe('AddActivationKey', () => {
4545
jest.clearAllMocks();
4646
});
4747
it('renders correctly', () => {
48-
render(AddActivationKey);
48+
render(ActivationKeyForm);
4949
expect(screen.toJSON()).toMatchSnapshot();
5050
});
5151

5252
it('has button disabled when input is empty', () => {
53-
render(AddActivationKey);
53+
render(ActivationKeyForm);
5454
const addButton = screen.getByRole('button', { name: 'Add' });
5555
expect(addButton.props.disabled).toBe(true);
5656
});
5757

5858
it('navigates back when pressing cancel', () => {
59-
render(AddActivationKey);
59+
render(ActivationKeyForm);
6060
fireEvent.press(screen.getByRole('button', { name: 'Cancel' }));
6161
expect(mockGoBack).toHaveBeenCalled();
6262
});
6363

6464
it('calls onSubmit with a valid test key', () => {
6565
const validKey = 'valid-key';
66-
render(AddActivationKey);
66+
render(ActivationKeyForm);
6767
const textInput = screen.getByPlaceholderText(
6868
'Paste or type an Activation Key',
6969
);
7070
fireEvent.changeText(textInput, validKey);
7171
const addButton = screen.getByRole('button', { name: 'Add' });
7272
fireEvent.press(addButton);
73-
expect(mockOnSubmit).toHaveBeenCalledWith(validKey);
73+
expect(mockOnSubmit).toHaveBeenCalledWith(validKey, '', undefined);
7474
});
7575

7676
it('does not call onSubmit with an ivalid test key', () => {
7777
const invalidKey = 'invalid-key!!';
78-
render(AddActivationKey);
78+
render(ActivationKeyForm);
7979
const textInput = screen.getByPlaceholderText(
8080
'Paste or type an Activation Key',
8181
);

‎app/components/UI/Ramp/Views/Settings/ActivationKeyForm.tsx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
// Third party dependencies
2+
import React, { useCallback, useEffect, useState } from 'react';
3+
import { useNavigation } from '@react-navigation/native';
4+
5+
// External dependencies
6+
import Row from '../../components/Row';
7+
import ScreenLayout from '../../components/ScreenLayout';
8+
import Text, {
9+
TextVariant,
10+
} from '../../../../../component-library/components/Texts/Text';
11+
import TextField from '../../../../../component-library/components/Form/TextField';
12+
import Label from '../../../../../component-library/components/Form/Label';
13+
import Button, {
14+
ButtonVariants,
15+
ButtonSize,
16+
} from '../../../../../component-library/components/Buttons/Button';
17+
18+
import { getNavigationOptionsTitle } from '../../../Navbar';
19+
import {
20+
createNavigationDetails,
21+
useParams,
22+
} from '../../../../../util/navigation/navUtils';
23+
import { useTheme } from '../../../../../util/theme';
24+
import Routes from '../../../../../constants/navigation/Routes';
25+
import { strings } from '../../../../../../locales/i18n';
26+
import { regex } from '../../../../../util/regex';
27+
28+
// Internal dependencies
29+
import styles from './Settings.styles';
30+
31+
interface ActivationKeyFormParams {
32+
onSubmit: (key: string, label: string, active: boolean) => void;
33+
key: string;
34+
active: boolean;
35+
label: string;
36+
}
37+
38+
export const createActivationKeyFormNavDetails =
39+
createNavigationDetails<ActivationKeyFormParams>(
40+
Routes.RAMP.ACTIVATION_KEY_FORM,
41+
);
42+
43+
function ActivationKeyForm() {
44+
const navigation = useNavigation();
45+
const {
46+
key,
47+
label: initialLabel,
48+
active,
49+
onSubmit,
50+
} = useParams<ActivationKeyFormParams>();
51+
const [activationKey, setActivationKey] = useState(key ?? '');
52+
const [label, setLabel] = useState(initialLabel ?? '');
53+
const { colors } = useTheme();
54+
const style = styles();
55+
56+
useEffect(() => {
57+
navigation.setOptions(
58+
getNavigationOptionsTitle(
59+
key
60+
? strings('app_settings.fiat_on_ramp.edit_activation_key')
61+
: strings('app_settings.fiat_on_ramp.add_activation_key'),
62+
navigation,
63+
false,
64+
colors,
65+
),
66+
);
67+
}, [colors, key, navigation]);
68+
69+
const handleSubmit = useCallback(() => {
70+
if (!regex.activationKey.test(activationKey)) {
71+
return;
72+
}
73+
onSubmit(activationKey, label, active);
74+
navigation.goBack();
75+
}, [activationKey, navigation, onSubmit, active, label]);
76+
77+
const handleCancel = useCallback(() => {
78+
navigation.goBack();
79+
}, [navigation]);
80+
81+
return (
82+
<ScreenLayout>
83+
<ScreenLayout.Body>
84+
<ScreenLayout.Content>
85+
<Text variant={TextVariant.BodyLGMedium}>
86+
{key
87+
? strings('app_settings.fiat_on_ramp.edit_activation_key')
88+
: strings('app_settings.fiat_on_ramp.add_activation_key')}
89+
</Text>
90+
91+
<Row>
92+
<Label>{strings('app_settings.fiat_on_ramp.label')}</Label>
93+
<TextField
94+
autoCapitalize={'none'}
95+
onChangeText={setLabel}
96+
placeholder={strings('app_settings.fiat_on_ramp.add_label')}
97+
numberOfLines={1}
98+
value={label}
99+
returnKeyType={'done'}
100+
onSubmitEditing={handleSubmit}
101+
autoFocus
102+
/>
103+
</Row>
104+
<Row>
105+
<Label>{strings('app_settings.fiat_on_ramp.key')}</Label>
106+
<TextField
107+
autoCapitalize={'none'}
108+
autoCorrect={false}
109+
onChangeText={setActivationKey}
110+
placeholder={strings(
111+
'app_settings.fiat_on_ramp.paste_or_type_activation_key',
112+
)}
113+
spellCheck={false}
114+
numberOfLines={1}
115+
value={activationKey}
116+
returnKeyType={'done'}
117+
onSubmitEditing={handleSubmit}
118+
isReadonly={Boolean(key)}
119+
/>
120+
</Row>
121+
122+
<Row style={style.buttons}>
123+
<Button
124+
variant={ButtonVariants.Secondary}
125+
size={ButtonSize.Lg}
126+
style={style.button}
127+
onPress={handleCancel}
128+
label={strings('app_settings.fiat_on_ramp.cancel')}
129+
/>
130+
<Button
131+
variant={ButtonVariants.Primary}
132+
size={ButtonSize.Lg}
133+
style={style.button}
134+
onPress={handleSubmit}
135+
label={
136+
key
137+
? strings('app_settings.fiat_on_ramp.update')
138+
: strings('app_settings.fiat_on_ramp.add')
139+
}
140+
isDisabled={!regex.activationKey.test(activationKey)}
141+
/>
142+
</Row>
143+
</ScreenLayout.Content>
144+
</ScreenLayout.Body>
145+
</ScreenLayout>
146+
);
147+
}
148+
149+
export default ActivationKeyForm;

0 commit comments

Comments
 (0)