inji-wallet/screens/Issuers/TransactionCodeScreen.tsx

import React, {useState} from 'react';
import {useTranslation} from 'react-i18next';
import {Button, Column, Text} from '../../components/ui';
import {Theme} from '../../components/ui/styleUtils';
import {
  Dimensions,
  Keyboard,
  KeyboardAvoidingView,
  TouchableWithoutFeedback,
  View,
  ModalProps,
} from 'react-native';
import {isIOS} from '../../shared/constants';
import {SvgImage} from '../../components/ui/svg';
import {getScreenHeight} from '../../shared/commonUtil';
import {PinInput} from '../../components/PinInput';
import {Modal} from '../../components/ui/Modal';
import {CancelDownloadModal} from './ConfirmationModal';
import {Icon, Input} from 'react-native-elements';

export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => {
  const {t} = useTranslation('transactionCodeScreen');
  const {isSmallScreen, screenHeight} = getScreenHeight();
  const [transactionCode, setTransactionCode] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
  const [showCode, setShowCode] = useState(false);
  const [touched, setTouched] = useState(false);
  const [showFullDescription, setShowFullDescription] = useState(false);
  const [textLineCount, setTextLineCount] = useState(0);
  const maxLines = 2;

  const validateCode = (code: string): string => {
    if (!code.trim()) return t('emptyCodeError');
    if (!/^[a-zA-Z0-9]+$/.test(code)) return t('invalidCharacters');
    return '';
  };

  const handleVerify = () => {
    const error = validateCode(transactionCode);
    if (error) {
      setErrorMessage(error);
      return;
    }
    setErrorMessage('');
    props.onVerify?.(transactionCode);
  };

  const handleChange = (text: string) => {
    if (!touched) setTouched(true);
    setTransactionCode(text);
    let error;
    if (touched) error = validateCode(text);
    setErrorMessage(error);
  };

  return (
    <>
      {showCancelConfirm ? (
        <CancelDownloadModal
          onCancel={() => setShowCancelConfirm(false)}
          onConfirm={props.onDismiss ?? (() => {})}
          visible={showCancelConfirm}
        />
      ) : (
        <Modal
          isVisible={props.visible ?? false}
          onDismiss={() => setShowCancelConfirm(true)}>
          <KeyboardAvoidingView
            style={
              isSmallScreen
                ? {flex: 1, paddingHorizontal: 10}
                : Theme.Styles.keyboardAvoidStyle
            }
            behavior={isIOS() ? 'padding' : 'height'}>
            <TouchableWithoutFeedback
              onPress={Keyboard.dismiss}
              accessible={false}>
              <View style={{height: 700}}>
                <Column
                  crossAlign="center"
                  style={
                    isSmallScreen
                      ? null
                      : {
                          maxHeight: screenHeight,
                          flex: 1,
                          justifyContent: 'space-around',
                          marginBottom: 20,
                        }
                  }>
                  {SvgImage.OtpVerificationIcon()}
                  <View>
                    <Column crossAlign="center">
                      <Text
                        testID="otpVerificationHeader"
                        weight="bold"
                        style={Theme.TextStyles.header}>
                        {t('TransactionCode')}
                      </Text>
                      <Text
                        style={{marginTop: 15}}
                        testID="otpVerificationDescription"
                        color={Theme.Colors.RetrieveIdLabel}
                        numLines={showFullDescription ? undefined : 2}
                        ellipsizeMode="tail"
                        weight="semibold"
                        size="small"
                        align="center"
                        onTextLayout={e => {
                          if (textLineCount !== e.nativeEvent.lines.length) {
                            setTextLineCount(e.nativeEvent.lines.length);
                          }
                        }}>
                        {t(`${props.description || t('description')}`)}
                      </Text>
                      {textLineCount > maxLines && (
                        <Text
                          onPress={() => setShowFullDescription(prev => !prev)}
                          style={
                            Theme.TransactionCodeScreenStyle.showMoreButton
                          }>
                          {showFullDescription
                            ? t('Show less ↑')
                            : t('Show more ↓')}
                        </Text>
                      )}
                    </Column>
                  </View>

                  {(props.error || errorMessage) && (
                    <View style={Theme.TransactionCodeScreenStyle.errorView}>
                      <Text
                        testID="otpVerificationError"
                        align="center"
                        color={Theme.Colors.errorMessage}>
                        {errorMessage || props.error}
                      </Text>
                    </View>
                  )}

                  <View style={{alignItems: 'center'}}>
                    {(!props.inputMode ||
                      (props.inputMode && props.inputMode === 'numeric')) &&
                    props.length &&
                    props.length <= 6 ? (
                      <>
                        <PinInput
                          testID="pinInput"
                          length={props.length}
                          autosubmit={false}
                          onChange={handleChange}
                          onDone={(code: string) => {
                            const error = validateCode(code);
                            if (error) {
                              setErrorMessage(error);
                              return;
                            }
                            setErrorMessage('');
                            props.onVerify?.(code);
                            props.onDismiss?.();
                          }}
                        />
                        <Button
                          styles={{marginTop: 30}}
                          disabled={transactionCode.length == 0}
                          title={t('verify')}
                          type="gradient"
                          onPress={handleVerify}
                        />
                      </>
                    ) : (
                      <>
                        <Input
                          containerStyle={{
                            width: Dimensions.get('window').width - 80,
                            alignSelf: 'center',
                          }}
                          placeholder={t('placeholder')}
                          placeholderTextColor="#ACACAC"
                          inputContainerStyle={{
                            borderBottomColor: '#C1C1C1',
                            borderBottomWidth: 1,
                            marginBottom: 16,
                          }}
                          inputStyle={
                            Theme.TransactionCodeScreenStyle.inputStyle
                          }
                          maxLength={props.length ?? 30}
                          autoFocus
                          secureTextEntry={!showCode}
                          value={transactionCode}
                          keyboardType={
                            props.inputMode === 'numeric'
                              ? 'numeric'
                              : 'default'
                          }
                          onChangeText={handleChange}
                          rightIcon={
                            <Icon
                              name={showCode ? 'eye-off' : 'eye'}
                              type="feather"
                              size={20}
                              color="#888"
                              onPress={() => setShowCode(prev => !prev)}
                            />
                          }
                        />
                        <Button
                          disabled={transactionCode.length == 0}
                          title="Verify"
                          type="gradient"
                          onPress={handleVerify}
                        />
                      </>
                    )}
                  </View>
                </Column>
              </View>
            </TouchableWithoutFeedback>
          </KeyboardAvoidingView>
        </Modal>
      )}
    </>
  );
};

interface ExtendedModalProps extends ModalProps {
  onVerify?: (transactionCode: string) => void;
  error?: string;
  description?: string;
  inputMode?: 'text' | 'numeric';
  length?: number;
}