feat(ramp): add activation keys labels and DS components

app/components/Nav/Main/MainNavigator.js

@@ -51,7 +51,7 @@ import Drawer from '../../UI/Drawer';
 import RampRoutes from '../../UI/Ramp/routes';
 import { RampType } from '../../UI/Ramp/types';
 import RampSettings from '../../UI/Ramp/Views/Settings';
-import RampAddActivationKey from '../../UI/Ramp/Views/Settings/AddActivationKey';
+import RampActivationKeyForm from '../../UI/Ramp/Views/Settings/ActivationKeyForm';
 
 import { colors as importedColors } from '../../../styles/common';
 import OrderDetails from '../../UI/Ramp/Views/OrderDetails';
@@ -269,8 +269,8 @@ const SettingsFlow = () => (
     />
     <Stack.Screen name={Routes.RAMP.SETTINGS} component={RampSettings} />
     <Stack.Screen
-      name={Routes.RAMP.ADD_ACTIVATION_KEY}
-      component={RampAddActivationKey}
+      name={Routes.RAMP.ACTIVATION_KEY_FORM}
+      component={RampActivationKeyForm}
     />
     <Stack.Screen
       name="ExperimentalSettings"

app/components/UI/Ramp/Views/Settings/AddActivationKey.test.tsx → app/components/UI/Ramp/Views/Settings/ActivationKeyForm.test.tsx

@@ -1,4 +1,4 @@
-import AddActivationKey from './AddActivationKey';
+import ActivationKeyForm from './ActivationKeyForm';
 import { renderScreen } from '../../../../../util/test/renderWithProvider';
 import initialBackgroundState from '../../../../../util/test/initial-background-state.json';
 import Routes from '../../../../../constants/navigation/Routes';
@@ -8,7 +8,7 @@ function render(Component: React.ComponentType) {
   return renderScreen(
     Component,
     {
-      name: Routes.RAMP.ADD_ACTIVATION_KEY,
+      name: Routes.RAMP.ACTIVATION_KEY_FORM,
     },
     {
       state: {
@@ -45,37 +45,37 @@ describe('AddActivationKey', () => {
     jest.clearAllMocks();
   });
   it('renders correctly', () => {
-    render(AddActivationKey);
+    render(ActivationKeyForm);
     expect(screen.toJSON()).toMatchSnapshot();
   });
 
   it('has button disabled when input is empty', () => {
-    render(AddActivationKey);
+    render(ActivationKeyForm);
     const addButton = screen.getByRole('button', { name: 'Add' });
     expect(addButton.props.disabled).toBe(true);
   });
 
   it('navigates back when pressing cancel', () => {
-    render(AddActivationKey);
+    render(ActivationKeyForm);
     fireEvent.press(screen.getByRole('button', { name: 'Cancel' }));
     expect(mockGoBack).toHaveBeenCalled();
   });
 
   it('calls onSubmit with a valid test key', () => {
     const validKey = 'valid-key';
-    render(AddActivationKey);
+    render(ActivationKeyForm);
     const textInput = screen.getByPlaceholderText(
       'Paste or type an Activation Key',
     );
     fireEvent.changeText(textInput, validKey);
     const addButton = screen.getByRole('button', { name: 'Add' });
     fireEvent.press(addButton);
-    expect(mockOnSubmit).toHaveBeenCalledWith(validKey);
+    expect(mockOnSubmit).toHaveBeenCalledWith(validKey, '', undefined);
   });
 
   it('does not call onSubmit with an ivalid test key', () => {
     const invalidKey = 'invalid-key!!';
-    render(AddActivationKey);
+    render(ActivationKeyForm);
     const textInput = screen.getByPlaceholderText(
       'Paste or type an Activation Key',
     );

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

@@ -0,0 +1,149 @@
+// Third party dependencies
+import React, { useCallback, useEffect, useState } from 'react';
+import { useNavigation } from '@react-navigation/native';
+
+// External dependencies
+import Row from '../../components/Row';
+import ScreenLayout from '../../components/ScreenLayout';
+import Text, {
+  TextVariant,
+} from '../../../../../component-library/components/Texts/Text';
+import TextField from '../../../../../component-library/components/Form/TextField';
+import Label from '../../../../../component-library/components/Form/Label';
+import Button, {
+  ButtonVariants,
+  ButtonSize,
+} from '../../../../../component-library/components/Buttons/Button';
+
+import { getNavigationOptionsTitle } from '../../../Navbar';
+import {
+  createNavigationDetails,
+  useParams,
+} from '../../../../../util/navigation/navUtils';
+import { useTheme } from '../../../../../util/theme';
+import Routes from '../../../../../constants/navigation/Routes';
+import { strings } from '../../../../../../locales/i18n';
+import { regex } from '../../../../../util/regex';
+
+// Internal dependencies
+import styles from './Settings.styles';
+
+interface ActivationKeyFormParams {
+  onSubmit: (key: string, label: string, active: boolean) => void;
+  key: string;
+  active: boolean;
+  label: string;
+}
+
+export const createActivationKeyFormNavDetails =
+  createNavigationDetails<ActivationKeyFormParams>(
+    Routes.RAMP.ACTIVATION_KEY_FORM,
+  );
+
+function ActivationKeyForm() {
+  const navigation = useNavigation();
+  const {
+    key,
+    label: initialLabel,
+    active,
+    onSubmit,
+  } = useParams<ActivationKeyFormParams>();
+  const [activationKey, setActivationKey] = useState(key ?? '');
+  const [label, setLabel] = useState(initialLabel ?? '');
+  const { colors } = useTheme();
+  const style = styles();
+
+  useEffect(() => {
+    navigation.setOptions(
+      getNavigationOptionsTitle(
+        key
+          ? strings('app_settings.fiat_on_ramp.edit_activation_key')
+          : strings('app_settings.fiat_on_ramp.add_activation_key'),
+        navigation,
+        false,
+        colors,
+      ),
+    );
+  }, [colors, key, navigation]);
+
+  const handleSubmit = useCallback(() => {
+    if (!regex.activationKey.test(activationKey)) {
+      return;
+    }
+    onSubmit(activationKey, label, active);
+    navigation.goBack();
+  }, [activationKey, navigation, onSubmit, active, label]);
+
+  const handleCancel = useCallback(() => {
+    navigation.goBack();
+  }, [navigation]);
+
+  return (
+    <ScreenLayout>
+      <ScreenLayout.Body>
+        <ScreenLayout.Content>
+          <Text variant={TextVariant.BodyLGMedium}>
+            {key
+              ? strings('app_settings.fiat_on_ramp.edit_activation_key')
+              : strings('app_settings.fiat_on_ramp.add_activation_key')}
+          </Text>
+
+          <Row>
+            <Label>{strings('app_settings.fiat_on_ramp.label')}</Label>
+            <TextField
+              autoCapitalize={'none'}
+              onChangeText={setLabel}
+              placeholder={strings('app_settings.fiat_on_ramp.add_label')}
+              numberOfLines={1}
+              value={label}
+              returnKeyType={'done'}
+              onSubmitEditing={handleSubmit}
+              autoFocus
+            />
+          </Row>
+          <Row>
+            <Label>{strings('app_settings.fiat_on_ramp.key')}</Label>
+            <TextField
+              autoCapitalize={'none'}
+              autoCorrect={false}
+              onChangeText={setActivationKey}
+              placeholder={strings(
+                'app_settings.fiat_on_ramp.paste_or_type_activation_key',
+              )}
+              spellCheck={false}
+              numberOfLines={1}
+              value={activationKey}
+              returnKeyType={'done'}
+              onSubmitEditing={handleSubmit}
+              isReadonly={Boolean(key)}
+            />
+          </Row>
+
+          <Row style={style.buttons}>
+            <Button
+              variant={ButtonVariants.Secondary}
+              size={ButtonSize.Lg}
+              style={style.button}
+              onPress={handleCancel}
+              label={strings('app_settings.fiat_on_ramp.cancel')}
+            />
+            <Button
+              variant={ButtonVariants.Primary}
+              size={ButtonSize.Lg}
+              style={style.button}
+              onPress={handleSubmit}
+              label={
+                key
+                  ? strings('app_settings.fiat_on_ramp.update')
+                  : strings('app_settings.fiat_on_ramp.add')
+              }
+              isDisabled={!regex.activationKey.test(activationKey)}
+            />
+          </Row>
+        </ScreenLayout.Content>
+      </ScreenLayout.Body>
+    </ScreenLayout>
+  );
+}
+
+export default ActivationKeyForm;