@networkinternational/ni-card-management-sdk 1.0.2

package/src/components/NIButton/NIButton.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { type TextStyle } from 'react-native';
+import { Button } from 'react-native-paper';
+import LinearGradient from 'react-native-linear-gradient';
+
+import styles from './styles';
+
+interface NIButtonInterface {
+  title: string;
+  textColor?: string;
+  colors?: string[];
+  mode:
+    | 'text'
+    | 'outlined'
+    | 'contained'
+    | 'elevated'
+    | 'contained-tonal'
+    | undefined;
+  opacity?: number;
+  disabled?: boolean;
+  onPress?: () => void;
+}
+
+function NIButton({
+  title,
+  mode,
+  textColor,
+  colors,
+  disabled,
+  opacity,
+  onPress,
+}: NIButtonInterface): JSX.Element {
+  const defaultLinearGradientColors = ['#f0f0f0', '#e0e0e0', '#b0b0b0'];
+  const buttonStyle: TextStyle = {
+    opacity: opacity,
+  };
+  return (
+    <LinearGradient
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 0 }}
+      locations={[0, 0.65, 0.9]}
+      style={[styles.button, buttonStyle]}
+      colors={(!disabled && colors) || defaultLinearGradientColors}
+    >
+      <Button
+        mode={mode}
+        textColor={textColor}
+        disabled={disabled}
+        onPress={onPress}
+      >
+        {title}
+      </Button>
+    </LinearGradient>
+  );
+}
+
+export { NIButton };

package/src/components/NIButton/styles.ts

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  button: {
+    width: '100%',
+    borderRadius: 20,
+  },
+});
+
+export default styles;

package/src/components/Pin/CapturePin.tsx

@@ -0,0 +1,227 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  View,
+  Platform,
+  Text,
+  TextInput,
+  type NativeSyntheticEvent,
+  type TextInputKeyPressEventData,
+  type TextStyle,
+  Keyboard,
+  TouchableWithoutFeedback,
+  I18nManager,
+} from 'react-native';
+
+import ShowHide from './ShowHideButton';
+import styles from './styles';
+import {
+  NIPinTypeEnum,
+  NILabels,
+  NIThemeEnum,
+} from '../../interfaces/NiInputInterfaces';
+import { type NICapturePin } from '../../interfaces/NiInterfaces';
+import { themeColors } from '../../config/themeColors';
+
+export default function CapturePin({
+  setPin: { pin, setPin, initialPin, pinEditable },
+  setNextStep: { step, setNextStep, onConfirmPin },
+  pinType,
+  title,
+  pinLabel,
+  wrongPinLabel,
+  pinLabelIndex,
+  showHideLabels,
+  theme,
+  input,
+  showPin,
+}: NICapturePin): JSX.Element {
+  const [isShowHide, setIsShowHide] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+
+  const [keyboardWillShow, setKeyboardWillShow] = useState(false);
+
+  useEffect(() => {
+    Keyboard.addListener('keyboardDidShow', () => {
+      setKeyboardWillShow(false);
+    });
+    Keyboard.addListener('keyboardWillShow', () => {
+      setKeyboardWillShow(true);
+    });
+  }, []);
+
+  const pinLength =
+    pinType === NIPinTypeEnum.dynamicFourToSix
+      ? NIPinTypeEnum.sixDigits
+      : pinType;
+
+  const pinChars = [
+    ...[...(pin.length ? pin.toString() : '').padEnd(pinLength, ' ')].join('|'),
+  ];
+
+  const pinInputError = {
+    color: 'red',
+  };
+
+  function handleKeyPress(
+    event: NativeSyntheticEvent<TextInputKeyPressEventData>
+  ) {
+    const key = event.nativeEvent.key.toLowerCase();
+    pin.length < pinLength &&
+      ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(key) &&
+      setPin(pin + key);
+    ['backspace'].includes(key) && setPin(pin.substring(0, pin.length - 1));
+  }
+
+  const isPinDone =
+    pinType === NIPinTypeEnum.dynamicFourToSix
+      ? pin.length >= NIPinTypeEnum.fourDigits
+      : pin.length === pinLength;
+  const isErrorPin = initialPin && isPinDone && initialPin !== pin;
+  function onSubmitEditing() {
+    if (isPinDone && !isErrorPin) {
+      onConfirmPin && onConfirmPin();
+      setNextStep && setNextStep(++step);
+    } else {
+      Keyboard.dismiss;
+    }
+  }
+
+  const labelFonts =
+    input &&
+    input.displayAttributes &&
+    input.displayAttributes.fonts &&
+    input.displayAttributes.fonts.filter(
+      (item) => item.label === pinLabelIndex
+    );
+  let font = labelFonts && labelFonts.length && labelFonts[0]?.font;
+  font = font || { name: 'Helvetica', size: 17 };
+
+  const pinInputStyle: TextStyle = {
+    width:
+      pinType === NIPinTypeEnum.fourDigits
+        ? '14%'
+        : pinType === NIPinTypeEnum.fiveDigits
+        ? '11%'
+        : '9%',
+    color:
+      theme === NIThemeEnum.light
+        ? themeColors.light.color
+        : themeColors.dark.color,
+  };
+  const pinInputBorder: TextStyle = {
+    borderColor:
+      theme === NIThemeEnum.light
+        ? themeColors.light.color
+        : themeColors.dark.color,
+  };
+  const titleStyle: TextStyle = {
+    color:
+      theme === NIThemeEnum.light
+        ? themeColors.light.color
+        : themeColors.dark.color,
+    fontSize: font.size,
+    fontFamily: font.name,
+    fontWeight: 'bold',
+  };
+  const pinLabelStyle: TextStyle = {
+    color:
+      theme === NIThemeEnum.light
+        ? themeColors.light.color
+        : themeColors.dark.color,
+    fontSize: font.size,
+    fontFamily: font.name,
+  };
+  const viewPinCapturePinSectionSizes: TextStyle =
+    pinLabelIndex === NILabels.viewPinDescriptionLabel
+      ? {
+          height: undefined,
+          width: undefined,
+        }
+      : {};
+  const viewPinPinInputViewTopMargin: TextStyle =
+    pinLabelIndex === NILabels.viewPinDescriptionLabel
+      ? {
+          marginTop: undefined,
+        }
+      : {};
+  const keyboardAppearance =
+    theme === NIThemeEnum.light ? NIThemeEnum.light : NIThemeEnum.dark;
+
+  return (
+    <View style={[styles.capturePinSection, viewPinCapturePinSectionSizes]}>
+      {pinLabelIndex !== NILabels.viewPinDescriptionLabel && (
+        <View style={styles.titleSection}>
+          <Text style={titleStyle}>{title}</Text>
+        </View>
+      )}
+      <View style={styles.pinSection}>
+        {pinLabelIndex !== NILabels.viewPinDescriptionLabel && (
+          <Text style={[pinLabelStyle, isErrorPin ? pinInputError : {}]}>
+            {isErrorPin ? wrongPinLabel : pinLabel}
+          </Text>
+        )}
+        <TouchableWithoutFeedback>
+          <View
+            style={[
+              styles.pinInputView,
+              pinInputBorder,
+              viewPinPinInputViewTopMargin,
+              I18nManager.isRTL ? { flexDirection: 'row-reverse' } : {},
+            ]}
+            onTouchEnd={() => {
+              const isIos = Platform.OS === 'ios';
+              if (!Keyboard.isVisible()) {
+                if (isIos && keyboardWillShow) {
+                  return;
+                }
+                Keyboard.dismiss();
+                inputRef.current?.focus();
+              }
+            }}
+          >
+            {pinChars.map((pinChar: string, index: number) => (
+              <TextInput
+                ref={inputRef}
+                onLayout={() => {
+                  index === 0 && inputRef.current && inputRef.current.focus();
+                }}
+                editable={
+                  pinLabelIndex === NILabels.viewPinDescriptionLabel
+                    ? false
+                    : pinEditable && index === 2 * (pinLength - 1)
+                }
+                key={index}
+                placeholder={''}
+                style={[
+                  styles.pinInput,
+                  pinInputStyle,
+                  isErrorPin && !(index % 2) ? pinInputError : {},
+                ]}
+                inputMode="decimal"
+                keyboardType="numeric"
+                textAlign="center"
+                caretHidden={true}
+                value={
+                  index % 2 || pinChar === ' ' || isShowHide || showPin
+                    ? pinChar
+                    : '*'
+                }
+                onKeyPress={(event) => handleKeyPress(event)}
+                onSubmitEditing={onSubmitEditing}
+                maxLength={1}
+                keyboardAppearance={keyboardAppearance}
+              />
+            ))}
+          </View>
+        </TouchableWithoutFeedback>
+        {pinLabelIndex !== NILabels.viewPinDescriptionLabel && (
+          <ShowHide
+            setShowHide={{ isShowHide, setIsShowHide }}
+            showHideLabels={showHideLabels}
+            theme={theme}
+          />
+        )}
+      </View>
+    </View>
+  );
+}

package/src/components/Pin/NextButton.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  View,
+  ImageBackground,
+  type ImageURISource,
+} from 'react-native';
+
+import styles from './styles';
+import { NIThemeEnum } from '../../interfaces/NiInputInterfaces';
+import { type NINextButton, NIStepEnum } from '../../interfaces/NiInterfaces';
+
+export default function NextButton({
+  setNextStep: { step, setNextStep },
+  disabled,
+  theme,
+}: NINextButton): JSX.Element {
+  const nextButtonSource =
+    theme === NIThemeEnum.light
+      ? (require('../../assets/icons/icons8-arrow-100_1.png') as ImageURISource)
+      : (require('../../assets/icons/icons8-arrow-100.png') as ImageURISource);
+
+  const pinButtonStyle = {
+    opacity: disabled ? 0.3 : 1,
+  };
+  const nextButtonStyle = {
+    width: 50,
+    height: 50,
+    borderRadius: 20,
+  };
+
+  return (
+    <>
+      {(step === NIStepEnum.currentPinStep ||
+        step === NIStepEnum.setupPinStep) && (
+        <View style={[styles.pinButton, pinButtonStyle]}>
+          <TouchableOpacity
+            onPress={() => setNextStep && setNextStep(++step)}
+            disabled={disabled}
+          >
+            <ImageBackground
+              source={nextButtonSource}
+              style={[styles.nextButton, nextButtonStyle]}
+            />
+          </TouchableOpacity>
+        </View>
+      )}
+    </>
+  );
+}

package/src/components/Pin/ShowHideButton.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  Text,
+  type TextStyle,
+  TouchableOpacity,
+  View,
+  I18nManager,
+} from 'react-native';
+
+import styles from './styles';
+import { themeColors } from '../../config/themeColors';
+import { NIThemeEnum } from '../../interfaces/NiInputInterfaces';
+import { type NIShowHideButton } from '../../interfaces/NiInterfaces';
+import { PredeterminedIcon } from '../icons/PredeterminedIcon';
+
+export default function ShowHide({
+  setShowHide: { isShowHide, setIsShowHide },
+  showHideLabels: { show, hide },
+  theme,
+}: NIShowHideButton): JSX.Element {
+  const color =
+    theme === NIThemeEnum.light
+      ? themeColors.light.buttonShowHideTextColor
+      : themeColors.dark.buttonShowHideTextColor;
+  const showHideTextButton: TextStyle = {
+    color: color,
+  };
+
+  return (
+    <View
+      style={[
+        styles.showHideButton,
+        I18nManager.isRTL ? { flexDirection: 'row' } : {},
+      ]}
+    >
+      <TouchableOpacity onPress={() => setIsShowHide(!isShowHide)}>
+        <View
+          style={[
+            styles.row,
+            I18nManager.isRTL ? { flexDirection: 'row-reverse' } : {},
+          ]}
+        >
+          <PredeterminedIcon
+            name={isShowHide ? 'red-eye-off' : 'red-eye'}
+            size={20}
+          />
+          {isShowHide && <Text style={showHideTextButton}>{hide}</Text>}
+          {!isShowHide && <Text style={showHideTextButton}>{show}</Text>}
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+}

package/src/components/Pin/styles.ts

@@ -0,0 +1,56 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  capturePinSection: {
+    flexDirection: 'column',
+    marginTop: 2,
+    width: '80%',
+    height: 225,
+    justifyContent: 'space-between',
+  },
+  titleSection: {
+    flexDirection: 'column',
+    marginTop: 20,
+    alignSelf: 'center',
+  },
+  pinSection: {
+    flexDirection: 'column',
+  },
+  pinInputView: {
+    flexDirection: 'row',
+    marginTop: 15,
+    borderColor: 'gray',
+    color: 'gray',
+    borderWidth: 1,
+    borderRadius: 15,
+    paddingLeft: 16,
+    paddingRight: 16,
+    fontSize: 16,
+    height: 50,
+  },
+  pinInput: {
+    borderColor: 'gray',
+    color: 'gray',
+    fontSize: 18,
+    height: 50,
+  },
+  showHideButton: {
+    alignItems: 'flex-end',
+    paddingTop: 10,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-start',
+    gap: 5,
+  },
+  pinButton: {
+    alignSelf: 'flex-end',
+    marginBottom: 24,
+  },
+  nextButton: {
+    borderRadius: 20,
+  },
+});
+
+export default styles;

package/src/components/PinState/LoadingState.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ActivityIndicator, type TextStyle, View } from 'react-native';
+
+import { themeColors } from '../../config/themeColors';
+import { NIThemeEnum } from '../../interfaces/NiInputInterfaces';
+import { HEIGHT_CARD } from '../../config/configCard';
+
+export default function LoadingState({
+  isLoading,
+  theme,
+  isCardDetails,
+}: {
+  isLoading: boolean;
+  theme: string;
+  isCardDetails?: boolean | undefined;
+}): JSX.Element {
+  const color =
+    theme === NIThemeEnum.light
+      ? themeColors.light.colorActivityIndicator
+      : themeColors.dark.colorActivityIndicator;
+
+  const LoadingIndicator: TextStyle = {
+    top: isCardDetails ? -(HEIGHT_CARD + 24) / 2 : 250,
+  };
+  return (
+    <View style={LoadingIndicator}>
+      {isLoading && <ActivityIndicator size="small" color={color} />}
+    </View>
+  );
+}

package/src/components/PinState/PinState.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { type TextStyle, View } from 'react-native';
+
+import LoadingState from './LoadingState';
+
+function PinState({
+  isLoading,
+  theme,
+  isCardDetails,
+}: {
+  isLoading: boolean;
+  theme: string;
+  isCardDetails?: boolean;
+}): JSX.Element {
+  const pinState: TextStyle = isCardDetails
+    ? {}
+    : {
+        position: 'absolute',
+        width: '100%',
+      };
+
+  return (
+    <View style={pinState}>
+      <LoadingState
+        isLoading={isLoading}
+        theme={theme}
+        isCardDetails={isCardDetails}
+      />
+    </View>
+  );
+}
+
+export default PinState;

package/src/components/SetPin/ConfirmPin.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { type TextStyle, View } from 'react-native';
+
+import { NIThemeEnum } from '../../interfaces/NiInputInterfaces';
+import { type NIConfirmPin } from '../../interfaces/NiInterfaces';
+import { themeColors } from '../../config/themeColors';
+import { NIButton } from '../NIButton/NIButton';
+import styles from './styles';
+import localLabels from '../../utils/localization';
+
+export default function ConfirmPin({
+  language,
+  theme,
+  disabled,
+  onConfirmPin,
+}: NIConfirmPin): JSX.Element {
+  const buttonConfirmColorDisabled =
+    theme === NIThemeEnum.light
+      ? themeColors.light.buttonConfirmColorDisabled
+      : themeColors.dark.buttonConfirmColorDisabled;
+  const confirmButton: TextStyle = {
+    backgroundColor: buttonConfirmColorDisabled,
+    borderRadius: 20,
+  };
+  const confirmPinButtonsLinearGradientColors =
+    theme === NIThemeEnum.light
+      ? themeColors.light.confirmPinButtonsLinearGradientColors
+      : themeColors.dark.confirmPinButtonsLinearGradientColors;
+
+  const textColor =
+    theme === NIThemeEnum.light
+      ? themeColors.light.buttonConfirmTextColor
+      : themeColors.dark.buttonConfirmTextColor;
+
+  return (
+    <View style={[styles.confirmButton, confirmButton]}>
+      <NIButton
+        title={localLabels(language).setPinButtonLabel}
+        mode="text"
+        disabled={disabled}
+        textColor={textColor}
+        colors={confirmPinButtonsLinearGradientColors}
+        onPress={onConfirmPin}
+      />
+    </View>
+  );
+}

package/src/components/SetPin/ReenterCardPin.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { NILabels } from '../../interfaces/NiInputInterfaces';
+import {
+  type NIReenterCardPin,
+  NIStepEnum,
+} from '../../interfaces/NiInterfaces';
+import CapturePin from '../Pin/CapturePin';
+import localLabels from '../../utils/localization';
+
+export default function ReenterCardPin({
+  setPin: { confirmationPin, setConfirmationPin, pin, pinEditable },
+  setNextStep: { step, onConfirmPin },
+  pinType,
+  language,
+  theme,
+  input,
+}: NIReenterCardPin): JSX.Element {
+  return (
+    <>
+      {step === NIStepEnum.reEnterPinStep && (
+        <CapturePin
+          setPin={{
+            pin: confirmationPin,
+            setPin: setConfirmationPin,
+            initialPin: pin,
+            pinEditable,
+          }}
+          setNextStep={{ step, onConfirmPin }}
+          pinType={pinType}
+          title={localLabels(language).setPinButtonLabel}
+          pinLabel={localLabels(language).confirmCardPIN}
+          wrongPinLabel={localLabels(language).wrongCardPin}
+          pinLabelIndex={NILabels.setPinDescriptionLabel}
+          showHideLabels={{
+            show: localLabels(language).show,
+            hide: localLabels(language).hide,
+          }}
+          theme={theme}
+          input={input}
+        />
+      )}
+    </>
+  );
+}