@networkinternational/ni-card-management-sdk 1.0.2

package/src/components/SetPin/SetPin.tsx

@@ -0,0 +1,140 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Platform,
+  TouchableWithoutFeedback,
+  Keyboard,
+  type TextStyle,
+  View,
+  I18nManager,
+} from 'react-native';
+
+import {
+  NIThemeEnum,
+  NILanguageEnum,
+  NIPinTypeEnum,
+} from '../../interfaces/NiInputInterfaces';
+import { NIStepEnum, type NISetupPin } from '../../interfaces/NiInterfaces';
+import SetUpNewCardPin from './SetUpNewCardPin';
+import ReenterCardPin from './ReenterCardPin';
+import NextButton from '../Pin/NextButton';
+import ConfirmPin from './ConfirmPin';
+import styles from './styles';
+import { themeColors } from '../../config/themeColors';
+
+function SetPin({
+  input,
+  pinType,
+  result,
+  isLoading,
+  onSetPin,
+  callback,
+}: NISetupPin): JSX.Element {
+  const [pin, setPin] = useState<string>('');
+  const [confirmationPin, setConfirmationPin] = useState<string>('');
+  const [step, setNextStep] = useState(NIStepEnum.setupPinStep);
+  const [pinEditable, setPinEditable] = useState(true);
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
+  const [initialKeyboardHeight, setInitialKeyboardHeight] = useState<number>(0);
+
+  const language =
+    (input && (input.displayAttributes?.language as string)) ||
+    NILanguageEnum.english;
+  const theme = input?.displayAttributes?.theme || NIThemeEnum.light;
+
+  const container: TextStyle = {
+    backgroundColor:
+      theme === NIThemeEnum.light
+        ? themeColors.light.background
+        : themeColors.dark.background,
+    paddingBottom: Platform.OS === 'ios' ? keyboardHeight : 0,
+  };
+
+  const isVisibleConfirmationButtonStep = step === NIStepEnum.reEnterPinStep;
+  const isVisibleConfirmationButton =
+    isVisibleConfirmationButtonStep && pin === confirmationPin;
+  const disabled = !isVisibleConfirmationButton || isLoading || !!result;
+
+  const pinLength =
+    pinType === NIPinTypeEnum.dynamicFourToSix
+      ? NIPinTypeEnum.sixDigits
+      : pinType;
+  const isPinDone =
+    pinType === NIPinTypeEnum.dynamicFourToSix
+      ? pin.length >= NIPinTypeEnum.fourDigits
+      : pin.length === pinLength;
+  function onConfirmPin(): void {
+    !disabled && input && onSetPin && onSetPin(pin, input, callback);
+    setPinEditable(false);
+  }
+
+  useEffect(() => {
+    Keyboard.addListener('keyboardDidShow', () => {
+      const metrics = Keyboard.metrics();
+      if (!initialKeyboardHeight) {
+        setInitialKeyboardHeight(metrics?.height || 0);
+      }
+
+      setKeyboardHeight(metrics?.height || 0);
+    });
+    Keyboard.addListener('keyboardWillHide', () => {
+      setKeyboardHeight(0);
+    });
+    Keyboard.addListener('keyboardWillShow', () => {
+      if (initialKeyboardHeight) {
+        setKeyboardHeight(initialKeyboardHeight);
+      }
+    });
+  }, [initialKeyboardHeight]);
+
+  return (
+    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+      <View style={[styles.container, container]}>
+        <SetUpNewCardPin
+          setPin={{ pin, setPin, pinEditable }}
+          setNextStep={{ step, setNextStep }}
+          pinType={pinType}
+          language={language}
+          theme={theme}
+          input={input}
+        />
+        <ReenterCardPin
+          setPin={{
+            confirmationPin,
+            setConfirmationPin,
+            pin,
+            pinEditable,
+          }}
+          setNextStep={{ step, onConfirmPin }}
+          pinType={pinType}
+          language={language}
+          theme={theme}
+          input={input}
+        />
+        {!isVisibleConfirmationButtonStep && (
+          <View
+            style={[
+              styles.capturePinSection,
+              I18nManager.isRTL ? { flexDirection: 'row' } : {},
+            ]}
+          >
+            <NextButton
+              setNextStep={{ step, setNextStep }}
+              disabled={!isPinDone}
+              theme={theme}
+            />
+          </View>
+        )}
+        {isVisibleConfirmationButtonStep && (
+          <ConfirmPin
+            language={language}
+            theme={theme}
+            disabled={!pinEditable || disabled}
+            onConfirmPin={onConfirmPin}
+          />
+        )}
+      </View>
+    </TouchableWithoutFeedback>
+  );
+}
+
+export default SetPin;

package/src/components/SetPin/SetUpNewCardPin.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { NILabels } from '../../interfaces/NiInputInterfaces';
+import {
+  type NISetUpNewCardPin,
+  NIStepEnum,
+} from '../../interfaces/NiInterfaces';
+import CapturePin from '../Pin/CapturePin';
+import localLabels from '../../utils/localization';
+
+export default function SetUpNewCardPin({
+  setPin: { pin, setPin, pinEditable },
+  setNextStep: { step, setNextStep },
+  pinType,
+  language,
+  theme,
+  input,
+}: NISetUpNewCardPin): JSX.Element {
+  return (
+    <>
+      {step === NIStepEnum.setupPinStep && (
+        <CapturePin
+          setPin={{ pin, setPin, pinEditable }}
+          setNextStep={{ step, setNextStep }}
+          pinType={pinType}
+          title={localLabels(language).setPinButtonLabel}
+          pinLabel={localLabels(language).enterNewCardPin}
+          pinLabelIndex={NILabels.setPinDescriptionLabel}
+          showHideLabels={{
+            show: localLabels(language).show,
+            hide: localLabels(language).hide,
+          }}
+          theme={theme}
+          input={input}
+        />
+      )}
+    </>
+  );
+}

package/src/components/SetPin/styles.ts

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  pinContainer: {
+    flex: 1,
+  },
+  container: {
+    flexDirection: 'column',
+    flex: 1,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  confirmButton: {
+    alignItems: 'center',
+    width: '80%',
+    marginBottom: 24,
+    height: 35,
+  },
+  capturePinSection: {
+    width: '80%',
+  },
+});
+
+export default styles;

package/src/components/VerifyPin/CaptureVerifyPin.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { NILabels } from '../../interfaces/NiInputInterfaces';
+import {
+  NIStepEnum,
+  type NICaptureVerifyPin,
+} from '../../interfaces/NiInterfaces';
+import CapturePin from '../Pin/CapturePin';
+import localLabels from '../../utils/localization';
+
+export default function CaptureVerifyPin({
+  setPin: { pin, setPin, pinEditable },
+  setNextStep: { step, onConfirmPin },
+  pinType,
+  language,
+  theme,
+  input,
+}: NICaptureVerifyPin): JSX.Element {
+  return (
+    <>
+      {step === NIStepEnum.verifyStep && (
+        <CapturePin
+          setPin={{ pin, setPin: setPin, pinEditable }}
+          setNextStep={{ step, onConfirmPin }}
+          pinType={pinType}
+          title={localLabels(language).verifyPinButtonLabel}
+          pinLabel={localLabels(language).enterVerifyCardPin}
+          pinLabelIndex={NILabels.setPinDescriptionLabel}
+          showHideLabels={{
+            show: localLabels(language).show,
+            hide: localLabels(language).hide,
+          }}
+          theme={theme}
+          input={input}
+        />
+      )}
+    </>
+  );
+}

package/src/components/VerifyPin/ConfirmPin.tsx

@@ -0,0 +1,49 @@
+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';
+
+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 textColor =
+    theme === NIThemeEnum.light
+      ? themeColors.light.buttonConfirmTextColor
+      : themeColors.dark.buttonConfirmTextColor;
+
+  const confirmPinButtonsLinearGradientColors =
+    theme === NIThemeEnum.light
+      ? themeColors.light.confirmPinButtonsLinearGradientColors
+      : themeColors.dark.confirmPinButtonsLinearGradientColors;
+  return (
+    <View style={[styles.confirmButton, confirmButton]}>
+      <NIButton
+        title={localLabels(language).verifyPinButtonLabel}
+        mode="text"
+        disabled={disabled}
+        textColor={textColor}
+        colors={confirmPinButtonsLinearGradientColors}
+        onPress={onConfirmPin}
+      />
+    </View>
+  );
+}
+
+export default ConfirmPin;

package/src/components/VerifyPin/VerifyPin.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from 'react';
+import {
+  View,
+  Platform,
+  TouchableWithoutFeedback,
+  Keyboard,
+  type TextStyle,
+} from 'react-native';
+
+import {
+  NILanguageEnum,
+  NIPinTypeEnum,
+  NIThemeEnum,
+} from '../../interfaces/NiInputInterfaces';
+import { NIStepEnum, type NIVerifyPin } from '../../interfaces/NiInterfaces';
+import CaptureVerifyPin from './CaptureVerifyPin';
+import ConfirmPin from './ConfirmPin';
+import styles from './styles';
+import { themeColors } from '../../config/themeColors';
+
+function VerifyPin({
+  pinType,
+  input,
+  result,
+  isLoading,
+  onVerifyPin,
+  callback,
+}: NIVerifyPin): JSX.Element {
+  const [pin, setPin] = useState<string>('');
+  const [step, setNextStep] = useState(NIStepEnum.verifyStep);
+  const [pinEditable, setPinEditable] = useState(true);
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
+  const [initialKeyboardHeight, setInitialKeyboardHeight] = useState<number>(0);
+
+  const { displayAttributes } = input || {};
+  const language =
+    (displayAttributes?.language as string) || NILanguageEnum.english;
+  const theme = input?.displayAttributes?.theme || NIThemeEnum.light;
+
+  const container: TextStyle = {
+    backgroundColor:
+      theme === NIThemeEnum.light
+        ? themeColors.light.background
+        : themeColors.dark.background,
+    paddingBottom: Platform.OS === 'ios' ? keyboardHeight : 0,
+  };
+
+  const isVisibleConfirmationButton = step === NIStepEnum.verifyStep;
+  const disabled = !isVisibleConfirmationButton || isLoading || !!result;
+
+  const pinLength =
+    pinType === NIPinTypeEnum.dynamicFourToSix
+      ? NIPinTypeEnum.sixDigits
+      : pinType;
+  const isPinDone =
+    pinType === NIPinTypeEnum.dynamicFourToSix
+      ? pin.length >= NIPinTypeEnum.fourDigits
+      : pin.length === pinLength;
+  function onConfirmPin() {
+    !disabled && input && onVerifyPin && onVerifyPin(pin, input, callback);
+    setPinEditable(false);
+  }
+
+  useEffect(() => {
+    Keyboard.addListener('keyboardDidShow', () => {
+      const metrics = Keyboard.metrics();
+      if (!initialKeyboardHeight) {
+        setInitialKeyboardHeight(metrics?.height || 0);
+      }
+
+      setKeyboardHeight(metrics?.height || 0);
+    });
+    Keyboard.addListener('keyboardWillHide', () => {
+      setKeyboardHeight(0);
+    });
+    Keyboard.addListener('keyboardWillShow', () => {
+      if (initialKeyboardHeight) {
+        setKeyboardHeight(initialKeyboardHeight);
+      }
+    });
+  }, [initialKeyboardHeight]);
+
+  return (
+    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+      <View style={[styles.container, container]}>
+        <CaptureVerifyPin
+          setPin={{ pin, setPin, pinEditable }}
+          setNextStep={{ step, setNextStep, onConfirmPin }}
+          pinType={pinType}
+          language={language}
+          theme={theme}
+          input={input}
+        />
+        <ConfirmPin
+          language={language}
+          theme={theme}
+          disabled={!pinEditable || !isPinDone}
+          onConfirmPin={onConfirmPin}
+        />
+      </View>
+    </TouchableWithoutFeedback>
+  );
+}
+
+export default VerifyPin;

package/src/components/VerifyPin/styles.ts

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  pinContainer: {
+    flex: 1,
+  },
+  container: {
+    flexDirection: 'column',
+    flex: 1,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  confirmButton: {
+    alignItems: 'center',
+    width: '80%',
+    marginBottom: 24,
+    height: 35,
+  },
+});
+
+export default styles;

package/src/components/ViewPin/ViewPin.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+import { Text, type TextStyle, View } from 'react-native';
+
+import styles from './styles';
+import { themeColors } from '../../config/themeColors';
+import {
+  NILabels,
+  NILanguageEnum,
+  NIThemeEnum,
+} from '../../interfaces/NiInputInterfaces';
+import { type NIViewPin } from '../../interfaces/NiInterfaces';
+import CapturePin from '../Pin/CapturePin';
+import localLabels from '../../utils/localization';
+
+function ViewPin({
+  pinType,
+  input,
+  result,
+  countdownTime,
+}: NIViewPin): JSX.Element {
+  const [showPin, setShowPin] = useState<boolean>(true);
+  const [pinCount, setPinCount] = useState<number>(countdownTime);
+
+  const { displayAttributes } = input || {};
+  const language =
+    (displayAttributes?.language as string) || NILanguageEnum.english;
+  const theme = displayAttributes?.theme || NIThemeEnum.light;
+
+  const countdownLabelFont =
+    input &&
+    input.displayAttributes &&
+    input.displayAttributes.fonts &&
+    input.displayAttributes.fonts.filter(
+      (item) => item.label === NILabels.viewPinCountDownDescription
+    );
+  const countdownLabelStyle: TextStyle = {
+    color:
+      theme === NIThemeEnum.light
+        ? themeColors.light.color
+        : themeColors.dark.color,
+    fontSize:
+      countdownLabelFont === undefined || countdownLabelFont === null
+        ? 17
+        : countdownLabelFont[0]?.font.size,
+    fontFamily:
+      countdownLabelFont === undefined || countdownLabelFont === null
+        ? 'Helvetica'
+        : countdownLabelFont[0]?.font.name,
+  };
+
+  useEffect(() => {
+    if (result && countdownTime > 0) {
+      let counter = 0;
+      let interval = setInterval(() => {
+        setPinCount(countdownTime - 1 - counter);
+        if (++counter > countdownTime - 1) {
+          setShowPin(false);
+          clearInterval(interval);
+        }
+      }, 1000);
+    }
+  }, [result, countdownTime]);
+
+  return (
+    <View style={styles.container}>
+      {result && (
+        <CapturePin
+          setPin={{
+            pin: result,
+            setPin: (pin: string) => pin,
+            pinEditable: false,
+          }}
+          setNextStep={{
+            step: 0,
+            setNextStep: (step: number) => step,
+          }}
+          pinType={pinType}
+          title={''}
+          pinLabel={''}
+          pinLabelIndex={NILabels.viewPinDescriptionLabel}
+          showHideLabels={{
+            show: '',
+            hide: '',
+          }}
+          theme={theme}
+          input={input}
+          showPin={showPin}
+        />
+      )}
+      {!!result && !!pinCount && (
+        <Text style={[styles.countdownLabelSection, countdownLabelStyle]}>
+          {(localLabels(language).viewPinCountdownLabel as Function)(pinCount)}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+export default ViewPin;

package/src/components/ViewPin/styles.ts

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    width: '80%',
+    marginTop: 2,
+  },
+  countdownLabelSection: {
+    marginTop: 8,
+    alignSelf: 'center',
+  },
+});
+
+export default styles;

package/src/components/icons/PredeterminedIcon.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Image, type ImageStyle, type ImageURISource } from 'react-native';
+
+export interface IconProps {
+  name: string;
+  size: number;
+}
+
+export const PredeterminedIcon = ({ name, size }: IconProps) => {
+  let imageSource;
+  switch (name) {
+    case 'red-eye':
+      imageSource =
+        require('../../assets/icons/red-eye-outline.png') as ImageURISource;
+      break;
+    case 'red-eye-off':
+      imageSource =
+        require('../../assets/icons/red-eye-off-outline.png') as ImageURISource;
+      break;
+    case 'eye':
+      imageSource =
+        require('../../assets/icons/eye-outline.png') as ImageURISource;
+      break;
+    case 'eye-off':
+      imageSource =
+        require('../../assets/icons/eye-off-outline.png') as ImageURISource;
+      break;
+    case 'content-copy':
+    default:
+      imageSource =
+        require('../../assets/icons/content-copy.png') as ImageURISource;
+      break;
+  }
+
+  const imageStyle: ImageStyle = {
+    width: size,
+    height: size,
+  };
+
+  return <Image source={imageSource} style={imageStyle} />;
+};

package/src/config/configCard.ts

@@ -0,0 +1,2 @@
+export const HEIGHT_CARD = 210;
+export const WIDTH_CARD = 95;

package/src/config/localization.ts

@@ -0,0 +1,44 @@
+const english = {
+  cardNumber: 'CARD NUMBER',
+  expiry: 'Expiry',
+  CVV: 'CVV',
+  cardHolderName: 'Name',
+  enterNewCardPin: 'Enter your new card PIN to secure your card.',
+  confirmCardPIN: 'Confirm your card PIN.',
+  wrongCardPin: 'PIN does not match.\nPlease re-enter the card PIN',
+  enterCurrentCardPin: 'Enter your current card PIN to secure your card.',
+  enterVerifyCardPin: 'Enter your current card PIN for verification.',
+  verifyPinButtonLabel: 'Verify PIN',
+  setPinButtonLabel: 'Set PIN',
+  changePinButtonLabel: 'Change PIN',
+  copiedToClipboard: 'Copied to clipboard',
+  viewPinCountdownLabel: (count: number) =>
+    'PIN will be hidden in ' + count + ' seconds',
+  show: 'Show',
+  hide: 'Hide',
+};
+
+const arabic = {
+  cardNumber: 'رقم البطاقة',
+  expiry: 'تاريخ الانتهاء',
+  CVV: '\u200Eرقم التحقق من البطاقة (CVV)',
+  cardHolderName: 'الإسم',
+  enterNewCardPin: '\u200Eالرجاء ادخال الرقم السري الجديد (PIN)',
+  confirmCardPIN: '\u200Eيرجى إعادة إدخال رقم السري لبطاقتك (PIN)',
+  wrongCardPin: '\u200Eالرقم السري لبطاقتك غير متطابق\n\u200Eيرجى إعادة إدخال رقم السري لبطاقتك (PIN)',
+  enterCurrentCardPin: '\u200Eالرجاء ادخال الرقم السري الحالي (PIN)',
+  enterVerifyCardPin: '\u200Eالرجاء إدخال رقم السري لبطاقتك للتحقق (PIN)',
+  verifyPinButtonLabel: 'التحقق من رقم السري لبطاقتك',
+  setPinButtonLabel: 'تعيين الرقم السري',
+  changePinButtonLabel: '\u200Eتغيير الرقم السري (PIN)',
+  copiedToClipboard: 'تم النسخ إلى الحافظة',
+  viewPinCountdownLabel: (count: number) =>
+    '\u200Eثواني\u200E ' + count + '\u200E سيتم إخفاء الرقم السري للبطاقة خلال',
+  show: '\u200Eعرض',
+  hide: '\u200Eإخفاء',
+};
+
+export const localization = {
+  english: english,
+  arabic: arabic,
+};

package/src/config/themeColors.ts

@@ -0,0 +1,37 @@
+const themeColors = {
+  light: {
+    background: 'white',
+    color: 'black',
+    colorCard: 'white',
+    colorActivityIndicator: '#041584"',
+
+    buttonConfirmTextColor: 'white',
+    buttonConfirmColorDisabled: 'gainsboro',
+
+    buttonCopiedTextColor: 'white',
+
+    buttonShowHideTextColor: 'red',
+    buttonShowHideColor: 'red',
+
+    buttonPrimaryTextColor: 'black',
+    confirmPinButtonsLinearGradientColors: ['#888888', '#555555', '#222222'],
+  },
+  dark: {
+    background: 'black',
+    color: 'white',
+    colorCard: 'white',
+    colorActivityIndicator: 'white',
+
+    buttonConfirmTextColor: 'white',
+    buttonConfirmColorDisabled: 'gainsboro',
+
+    buttonCopiedTextColor: 'white',
+
+    buttonShowHideTextColor: 'red',
+
+    buttonPrimaryTextColor: 'white',
+    confirmPinButtonsLinearGradientColors: ['#888888', '#555555', '#222222'],
+  },
+};
+
+export { themeColors };