Enable short verification codes remotely and related UI facelift

packages/mobile/locales/en-US/onboarding.json

@@ -74,6 +74,7 @@
     "title": "Confirm",
     "body": "We sent you three messages (SMS). Please copy and paste them below.",
     "body_ios": "We sent you three messages (SMS). Please tap the link in each message to fill the codes below or copy and paste them manually.",
+    "body_short": "We sent three codes to {{phoneNumber}}, please enter them below.",
     "codeLabel1": "First Code",
     "codeLabel2": "Second Code",
     "codeLabel3": "Third Code",
@@ -84,7 +85,6 @@
     "codePlaceholder3": "Copy the third message",
     "codePlaceholder3_ios": "Tap or copy the third message",
     "codePlaceholderWithCodeInClipboard": "Great! Paste it here",
-    "typingTip": "Typing? Try copying and pasting",
     "resendMessages": "Resend last message",
     "resendMessages_plural": "Resend {{count}} messages",
     "resendMessages_all": "Resend all messages"

packages/mobile/locales/es-419/onboarding.json

@@ -74,6 +74,7 @@
     "title": "Confirmar",
     "body": "Te enviamos tres mensajes de texto (SMS). Por favor copia y pégualos abajo.",
     "body_ios": "Te enviamos tres mensajes de texto (SMS). Por favor presiona el link en cada mensaje para completar los códigos a continuación o cópialos y pégalos manualmente.",
+    "body_short": "Enviamos tres códigos al {{phoneNumber}}, ingréselos a continuación.",
     "codeLabel1": "Primer código",
     "codeLabel2": "Segundo código",
     "codeLabel3": "Tercer código",
@@ -84,7 +85,6 @@
     "codePlaceholder3": "Copia el tercer mensaje",
     "codePlaceholder3_ios": "Toca o copia el tercer mensaje",
     "codePlaceholderWithCodeInClipboard": "¡Excelente! Péguelo aquí",
-    "typingTip": "¿Mecanografía? Intenta copiar y pegar",
     "resendMessages": "Reenviar el último mensaje",
     "resendMessages_plural": "Reenviar {{count}} mensajes",
     "resendMessages_all": "Reenviar todos los mensajes"

packages/mobile/locales/pt-BR/onboarding.json

@@ -74,6 +74,7 @@
     "title": "Confirmar",
     "body": "Enviamos três mensagens para você (SMS). Copie e cole-os abaixo.",
     "body_ios": "Enviamos três mensagens para você (SMS). Toque no link de cada mensagem para preencher os códigos abaixo ou copie e cole-os manualmente.",
+    "body_short": "Enviamos três códigos para {{phoneNumber}}, insira-os abaixo.",
     "codeLabel1": "Primeiro código",
     "codeLabel2": "Segundo código",
     "codeLabel3": "Terceiro código",
@@ -84,7 +85,6 @@
     "codePlaceholder3": "Copiar a terceira mensagem",
     "codePlaceholder3_ios": "Toque ou copie a terceira mensagem",
     "codePlaceholderWithCodeInClipboard": "Ótimo! Cole aqui",
-    "typingTip": "Você está digitando? Tente copiar e colar",
     "resendMessages": "Reenviar última mensagem",
     "resendMessages_plural": "Reenviar {{count}} mensagens",
     "resendMessages_all": "Reenviar todas as mensagens"

packages/mobile/src/app/reducers.ts

@@ -19,6 +19,7 @@ export interface State {
   pontoEnabled: boolean
   kotaniEnabled: boolean
   celoEducationUri: string | null
+  shortVerificationCodesEnabled: boolean
   inviteModalVisible: boolean
   activeScreen: Screens
 }
@@ -37,6 +38,7 @@ const initialState = {
   minVersion: null,
   pontoEnabled: false,
   kotaniEnabled: false,
+  shortVerificationCodesEnabled: false,
   celoEducationUri: null,
   inviteModalVisible: false,
   activeScreen: Screens.Main,
@@ -140,6 +142,7 @@ export const appReducer = (
         pontoEnabled: action.flags.pontoEnabled,
         kotaniEnabled: action.flags.kotaniEnabled,
         celoEducationUri: action.flags.celoEducationUri,
+        shortVerificationCodesEnabled: action.flags.shortVerificationCodesEnabled,
       }
     case Actions.TOGGLE_INVITE_MODAL:
       return {

packages/mobile/src/app/saga.ts

@@ -91,6 +91,7 @@ export interface RemoteFeatureFlags {
   kotaniEnabled: boolean
   pontoEnabled: boolean
   celoEducationUri: string | null
+  shortVerificationCodesEnabled: boolean
 }
 
 export function* appRemoteFeatureFlagSaga() {

packages/mobile/src/app/selectors.ts

@@ -45,3 +45,6 @@ export const numberVerifiedSelector = (state: RootState) => state.app.numberVeri
 export const pontoEnabledSelector = (state: RootState) => state.app.pontoEnabled
 
 export const kotaniEnabledSelector = (state: RootState) => state.app.kotaniEnabled
+
+export const shortVerificationCodesEnabledSelector = (state: RootState) =>
+  state.app.shortVerificationCodesEnabled

packages/mobile/src/components/CodeInput.test.tsx

@@ -20,6 +20,30 @@ describe('CodeInput', () => {
           inputPlaceholder={'placeholder'}
           onInputChange={jest.fn()}
           shouldShowClipboard={jest.fn()}
+          shortVerificationCodesEnabled={false}
+        />
+      )
+      expect(toJSON()).toMatchSnapshot()
+    })
+  })
+
+  it('renders correctly for all CodeInputStatus states with short codes', () => {
+    ;[
+      CodeInputStatus.DISABLED,
+      CodeInputStatus.INPUTTING,
+      CodeInputStatus.PROCESSING,
+      CodeInputStatus.RECEIVED,
+      CodeInputStatus.ACCEPTED,
+    ].map((status) => {
+      const { toJSON } = render(
+        <CodeInput
+          label="label"
+          status={status}
+          inputValue={'test'}
+          inputPlaceholder={'placeholder'}
+          onInputChange={jest.fn()}
+          shouldShowClipboard={jest.fn()}
+          shortVerificationCodesEnabled={true}
         />
       )
       expect(toJSON()).toMatchSnapshot()
@@ -35,6 +59,7 @@ describe('CodeInput', () => {
         inputPlaceholder={'placeholder'}
         onInputChange={jest.fn()}
         shouldShowClipboard={jest.fn()}
+        shortVerificationCodesEnabled={false}
       />
     )
 

packages/mobile/src/components/CodeInput.tsx

@@ -38,6 +38,7 @@ export interface Props {
   numberOfLines?: number
   testID?: string
   style?: StyleProp<ViewStyle>
+  shortVerificationCodesEnabled: boolean
 }
 
 export default function CodeInput({
@@ -52,6 +53,7 @@ export default function CodeInput({
   numberOfLines,
   testID,
   style,
+  shortVerificationCodesEnabled,
 }: Props) {
   const [forceShowingPasteIcon, clipboardContent, getFreshClipboardContent] = useClipboard()
 
@@ -83,11 +85,36 @@ export default function CodeInput({
     >
       {/* These views cannot be combined as it will cause the shadow to be clipped on iOS */}
       <View style={styles.containRadius}>
-        <View style={showInput ? styles.contentActive : styles.content}>
+        <View
+          style={
+            showInput
+              ? shortVerificationCodesEnabled
+                ? styles.contentActive
+                : styles.contentActiveLong
+              : shortVerificationCodesEnabled
+              ? styles.content
+              : styles.contentLong
+          }
+        >
+          {showStatus && shortVerificationCodesEnabled && <View style={styles.statusContainer} />}
           <View style={styles.innerContent}>
-            <Text style={showInput ? styles.labelActive : styles.label}>{label}</Text>
+            <Text
+              style={
+                showInput
+                  ? shortVerificationCodesEnabled
+                    ? styles.labelActive
+                    : styles.labelActiveLong
+                  : shortVerificationCodesEnabled
+                  ? styles.label
+                  : styles.labelLong
+              }
+            >
+              {label}
+            </Text>
+
             {showInput ? (
               <TextInput
+                showClearButton={false}
                 value={inputValue}
                 placeholder={
                   inputPlaceholderWithClipboardContent && shouldShowClipboardInternal()
@@ -109,18 +136,24 @@ export default function CodeInput({
                 // numberOfLines is currently Android only on TextInput
                 // workaround is to set the minHeight on iOS :/
                 numberOfLines={Platform.OS === 'ios' ? undefined : numberOfLines}
-                inputStyle={
-                  Platform.OS === 'ios' && numberOfLines
-                    ? {
-                        minHeight: LINE_HEIGHT * numberOfLines,
-                      }
-                    : undefined
-                }
+                inputStyle={{
+                  ...(shortVerificationCodesEnabled && {
+                    ...fontStyles.large,
+                    textAlign: 'center',
+                  }),
+                  minHeight:
+                    Platform.OS === 'ios' && numberOfLines
+                      ? LINE_HEIGHT * numberOfLines
+                      : undefined,
+                }}
                 autoCapitalize="none"
                 testID={testID}
               />
             ) : (
-              <Text style={styles.codeValue} numberOfLines={1}>
+              <Text
+                style={shortVerificationCodesEnabled ? styles.codeValue : styles.codeValueLong}
+                numberOfLines={1}
+              >
                 {inputValue || ' '}
               </Text>
             )}
@@ -158,34 +191,64 @@ const styles = StyleSheet.create({
     borderRadius: Spacing.Smallest8,
     overflow: 'hidden',
   },
-  content: {
+  contentLong: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
     padding: Spacing.Regular16,
     paddingVertical: Spacing.Small12,
   },
-  contentActive: {
+  contentActiveLong: {
     flexDirection: 'row',
     alignItems: 'center',
     padding: Spacing.Regular16,
     paddingBottom: 4,
   },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 20,
+    // paddingVertical: Spacing.Small12,
+  },
+  contentActive: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 20,
+    paddingBottom: 4,
+  },
   innerContent: {
     flex: 1,
   },
+  labelLong: {
+    ...fontStyles.label,
+    color: colors.onboardingBrownLight,
+    opacity: 0.5,
+    marginBottom: 4,
+  },
+  labelActiveLong: {
+    ...fontStyles.label,
+  },
+  codeValueLong: {
+    ...fontStyles.regular,
+    color: colors.onboardingBrownLight,
+  },
+
   label: {
     ...fontStyles.label,
     color: colors.onboardingBrownLight,
     opacity: 0.5,
     marginBottom: 4,
+    textAlign: 'center',
   },
   labelActive: {
     ...fontStyles.label,
+    textAlign: 'center',
   },
   codeValue: {
-    ...fontStyles.regular,
+    ...fontStyles.large,
     color: colors.onboardingBrownLight,
+    textAlign: 'center',
   },
   statusContainer: {
     width: 32,