@networkinternational/ni-card-management-sdk 1.0.2

package/src/components/CardDetails/CardNumberGroup.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import {
+  type TextStyle,
+  View,
+  TouchableOpacity,
+  Text,
+  I18nManager,
+} from 'react-native';
+import { useClipboard } from '@react-native-community/clipboard';
+
+import {
+  type NIFontLabelPair,
+  NIThemeEnum,
+} from '../../interfaces/NiInputInterfaces';
+import { type NICardDetailsCardNumberGroup } from '../../interfaces/NiInterfaces';
+import { styles } from './styles';
+import { HEIGHT_CARD } from '../../config/configCard';
+import { themeColors } from '../../config/themeColors';
+import { PredeterminedIcon } from '../icons/PredeterminedIcon';
+
+export function CardDetailsCardNumberGroup({
+  clearPan,
+  maskedPan,
+  pinContentIndex,
+  cardDetailsVisible,
+  setIsVisibleCopiedButton,
+  displayAttributes,
+  setTimeOut,
+}: NICardDetailsCardNumberGroup): JSX.Element {
+  const [data, setString] = useClipboard();
+
+  const clearPanRendered = clearPan.replace(/.{4}/g, '$& ');
+  const maskedPanRendered = maskedPan
+    .replace(/[a-zA-Z0-9]+(?=....)/g, function (s: string) {
+      return '*'.repeat(s.length);
+    })
+    .replace(/.{4}/g, '$& ');
+
+  const cardNumber = cardDetailsVisible ? maskedPanRendered : clearPanRendered;
+
+  const cardNumberGroupTopAlignment = Math.round(
+    (displayAttributes?.cardAttributes?.textPositioning
+      ?.cardNumberGroupTopAlignment || 0.4) * HEIGHT_CARD
+  );
+  const containerCardNumberContentGroupTopAlignmentStyle: TextStyle = {
+    position: 'absolute',
+    top: cardNumberGroupTopAlignment,
+  };
+
+  const theme = displayAttributes?.theme || NIThemeEnum.light;
+
+  const textFonts = displayAttributes?.fonts?.filter(
+    (item: NIFontLabelPair) => item.label === pinContentIndex
+  );
+
+  let textFont = textFonts && textFonts.length && textFonts[0]?.font;
+  textFont = textFont || { name: 'Helvetica', size: 17 };
+
+  const contentStyleText: TextStyle = {
+    color:
+      theme === NIThemeEnum.light
+        ? themeColors.light.colorCard
+        : themeColors.dark.colorCard,
+    fontSize: textFont.size,
+    fontFamily: textFont.name,
+  };
+
+  async function handleOnPress(): Promise<void> {
+    await setString(clearPan);
+    setIsVisibleCopiedButton(true);
+    setTimeOut();
+  }
+  !!data && console.log('clipboard', data);
+
+  return (
+    <>
+      <View
+        style={[
+          styles.containerCardNumberContentGroupTopAlignment,
+          containerCardNumberContentGroupTopAlignmentStyle,
+        ]}
+      >
+        <View
+          style={[
+            styles.copyRow,
+            I18nManager.isRTL ? { flexDirection: 'row-reverse' } : {},
+          ]}
+        >
+          <Text style={[styles.textContent, contentStyleText]}>
+            {cardNumber}
+          </Text>
+          {!cardDetailsVisible && (
+            <TouchableOpacity onPress={handleOnPress}>
+              <PredeterminedIcon name="content-copy" size={13} />
+            </TouchableOpacity>
+          )}
+        </View>
+      </View>
+    </>
+  );
+}

package/src/components/CardDetails/DateCVVGroupOneRow.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import {
+  type TextStyle,
+  View,
+  type ViewStyle,
+  TouchableOpacity,
+  Text,
+  I18nManager,
+} from 'react-native';
+
+import {
+  type NIFontLabelPair,
+  NILanguageEnum,
+  NIThemeEnum,
+} from '../../interfaces/NiInputInterfaces';
+import type { NICardDetailsDateCVVGroupOneRow } from '../../interfaces/NiInterfaces';
+import { styles } from './styles';
+import localLabels from '../../utils/localization';
+import { HEIGHT_CARD } from '../../config/configCard';
+import { themeColors } from '../../config/themeColors';
+import { PredeterminedIcon } from '../icons/PredeterminedIcon';
+
+export function CardDetailsDateCVVGroupOneRow({
+  expiry,
+  clearCVV2,
+  pinLabelIndex,
+  pinContentIndex,
+  pinLabel1Index,
+  pinContent1Index,
+  cardDetailsVisible: { cardDetailsVisible, setCardDetailsVisible },
+  shouldHide,
+  displayAttributes,
+  isError,
+}: NICardDetailsDateCVVGroupOneRow): JSX.Element {
+  const expiryRendered = isError
+    ? expiry
+    : !cardDetailsVisible
+    ? expiry.replace(/(\d{2})/, '$&/')
+    : '**/**';
+  const clearCVV2Rendered = cardDetailsVisible
+    ? clearCVV2.replace(/[0-9]/g, '*')
+    : clearCVV2;
+  const language =
+    (displayAttributes?.language as string) || NILanguageEnum.english;
+
+  const dateCVVContentGroupTopAlignment = Math.round(
+    (displayAttributes?.cardAttributes?.textPositioning
+      ?.dateCvvGroupTopAlignment || 0.6) * HEIGHT_CARD
+  );
+  const containerDateCVVContentGroupTopAlignmentStyle: ViewStyle = {
+    position: 'absolute',
+    top: dateCVVContentGroupTopAlignment,
+    gap: 10,
+  };
+
+  const theme = displayAttributes?.theme || NIThemeEnum.light;
+  const labelFonts = displayAttributes?.fonts?.filter(
+    (item: NIFontLabelPair) => item.label === pinLabelIndex
+  );
+  let labelFont = labelFonts && labelFonts.length && labelFonts[0]?.font;
+  labelFont = labelFont || { name: 'Helvetica', size: 17 };
+  const labelStyleText: TextStyle = {
+    color:
+      theme === NIThemeEnum.light
+        ? themeColors.light.colorCard
+        : themeColors.dark.colorCard,
+    fontSize: labelFont.size,
+    fontFamily: labelFont.name,
+  };
+
+  const labelFonts1 = displayAttributes?.fonts?.filter(
+    (item: NIFontLabelPair) => item.label === pinLabel1Index
+  );
+  let labelFont1 = labelFonts1 && labelFonts1.length && labelFonts1[0]?.font;
+  labelFont1 = labelFont1 || { name: 'Helvetica', size: 17 };
+  const labelStyleText1: TextStyle = {
+    color:
+      theme === NIThemeEnum.light
+        ? themeColors.light.colorCard
+        : themeColors.dark.colorCard,
+    fontSize: labelFont1.size,
+    fontFamily: labelFont1.name,
+  };
+
+  const textFonts = displayAttributes?.fonts?.filter(
+    (item: NIFontLabelPair) => item.label === pinContentIndex
+  );
+  let textFont = textFonts && textFonts.length && textFonts[0]?.font;
+  textFont = textFont || { name: 'Helvetica', size: 17 };
+  const contentStyleText: TextStyle = {
+    color:
+      theme === NIThemeEnum.light
+        ? themeColors.light.colorCard
+        : themeColors.dark.colorCard,
+    fontSize: textFont.size,
+    fontFamily: textFont.name,
+  };
+
+  const textFonts1 = displayAttributes?.fonts?.filter(
+    (item: NIFontLabelPair) => item.label === pinContent1Index
+  );
+  let textFont1 = textFonts1 && textFonts1.length && textFonts1[0]?.font;
+  textFont1 = textFont1 || { name: 'Helvetica', size: 17 };
+  const contentStyleText1: TextStyle = {
+    color:
+      theme === NIThemeEnum.light
+        ? themeColors.light.colorCard
+        : themeColors.dark.colorCard,
+    fontSize: textFont1.size,
+    fontFamily: textFont1.name,
+  };
+
+  return (
+    <View
+      style={[
+        styles.containerDateCVVContentGroupTopAlignment,
+        containerDateCVVContentGroupTopAlignmentStyle,
+        I18nManager.isRTL ? {flexDirection: 'row-reverse'} : {}
+      ]}
+    >
+      <Text style={[styles.textLabel, labelStyleText]}>
+        {localLabels(language).expiry}
+      </Text>
+      <Text style={[styles.textContent, contentStyleText]}>
+        {expiryRendered}
+      </Text>
+      <Text style={[styles.textLabel, labelStyleText1]}>
+        {localLabels(language).CVV}
+      </Text>
+      <Text style={[styles.textContent, contentStyleText1]}>
+        {clearCVV2Rendered}
+      </Text>
+
+      {!isError && shouldHide && (
+        <TouchableOpacity
+          onPress={() => setCardDetailsVisible(!cardDetailsVisible)}
+        >
+          <PredeterminedIcon
+            name={cardDetailsVisible ? 'eye' : 'eye-off'}
+            size={13}
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}

package/src/components/CardDetails/styles.ts

@@ -0,0 +1,105 @@
+import { StyleSheet } from 'react-native';
+import { HEIGHT_CARD, WIDTH_CARD } from '../../config/configCard';
+
+export const styles = StyleSheet.create({
+  cardDetailsContainer: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100%',
+  },
+  cardDetailsRow: {
+    width: `${WIDTH_CARD}%`,
+    height: HEIGHT_CARD,
+    alignItems: 'center',
+    borderRadius: 20,
+  },
+
+  containerCardDetails: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 20,
+  },
+
+  backgroundImageStyle: {
+    resizeMode: 'cover',
+    borderRadius: 20,
+  },
+
+  copyRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-start',
+    gap: 5,
+  },
+
+  textLabel: {
+    color: 'white',
+    fontFamily: 'Helvetica',
+    fontWeight: '100',
+    fontSize: 12,
+    textAlign: 'left',
+    letterSpacing: 0,
+    writingDirection: 'ltr',
+  },
+
+  textContent: {
+    color: 'white',
+    fontFamily: 'Helvetica',
+    fontWeight: '400',
+    fontSize: 18,
+    textAlign: 'left',
+    letterSpacing: 0,
+    writingDirection: 'ltr',
+  },
+
+  containerGroupsLeftAlignment: {
+    marginLeft: 40,
+  },
+
+  containerCardNumberGroupTopAlignment: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    position: 'absolute',
+    top: 60,
+  },
+  containerCardNumberContentGroupTopAlignment: {
+    position: 'absolute',
+    top: 65,
+  },
+
+  containerDateCVVGroupTopAlignment: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    position: 'absolute',
+    top: 85,
+    gap: 50,
+  },
+
+  containerDateCVVContentGroupTopAlignment: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    position: 'absolute',
+    top: 110,
+    gap: 45,
+  },
+
+  containerHolderNameGroupTopAlignment: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    position: 'absolute',
+    top: 135,
+  },
+
+  containerHolderNameContentGroupTopAlignment: {
+    position: 'absolute',
+    top: 160,
+  },
+
+  copyButton: {
+    alignSelf: 'center',
+    marginTop: '30%',
+    width: '60%',
+  },
+});
+
+export default styles;

package/src/components/ChangePin/CaptureCurrentPin.tsx

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

package/src/components/ChangePin/CaptureNewPin.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 CaptureNewPin({
+  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).changePinButtonLabel}
+          pinLabel={localLabels(language).enterNewCardPin}
+          pinLabelIndex={NILabels.changePinDescriptionLabel}
+          showHideLabels={{
+            show: localLabels(language).show,
+            hide: localLabels(language).hide,
+          }}
+          theme={theme}
+          input={input}
+        />
+      )}
+    </>
+  );
+}

package/src/components/ChangePin/ChangePin.tsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from 'react';
+import {
+  View,
+  Platform,
+  TouchableWithoutFeedback,
+  Keyboard,
+  type TextStyle,
+  I18nManager,
+} from 'react-native';
+
+import {
+  NIThemeEnum,
+  NILanguageEnum,
+  NIPinTypeEnum,
+} from '../../interfaces/NiInputInterfaces';
+import { NIStepEnum, type NIChangePin } from '../../interfaces/NiInterfaces';
+import CaptureCurrentPin from './CaptureCurrentPin';
+import CaptureNewPin from './CaptureNewPin';
+import ReenterNewPin from './ReenterNewPin';
+import NextButton from '../Pin/NextButton';
+import ConfirmPin from './ConfirmPin';
+import styles from './styles';
+import { themeColors } from '../../config/themeColors';
+
+function ChangePin({
+  input,
+  pinType,
+  result,
+  isLoading,
+  onChangePin,
+  callback,
+}: NIChangePin): JSX.Element {
+  const [currentPin, setCurrentPin] = useState<string>('');
+  const [pin, setPin] = useState<string>('');
+  const [confirmationPin, setConfirmationPin] = useState<string>('');
+  const [step, setNextStep] = useState(NIStepEnum.currentPinStep);
+  const [pinEditable, setPinEditable] = useState(true);
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
+  const [initialKeyboardHeight, setInitialKeyboardHeight] = useState<number>(0);
+  const language =
+    (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 _pin = step === NIStepEnum.currentPinStep ? currentPin : pin;
+  const isPinDone =
+    pinType === NIPinTypeEnum.dynamicFourToSix
+      ? _pin.length >= NIPinTypeEnum.fourDigits
+      : _pin.length === pinLength;
+  function onConfirmPin() {
+    !disabled &&
+      input &&
+      onChangePin &&
+      onChangePin(currentPin as string, 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]}>
+        <CaptureCurrentPin
+          setPin={{ currentPin, setCurrentPin, pinEditable }}
+          setNextStep={{ step, setNextStep }}
+          pinType={pinType}
+          language={language}
+          theme={theme}
+          input={input}
+        />
+        <CaptureNewPin
+          setPin={{ pin, setPin, pinEditable }}
+          setNextStep={{ step, setNextStep }}
+          pinType={pinType}
+          language={language}
+          theme={theme}
+          input={input}
+        />
+        <ReenterNewPin
+          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 ChangePin;

package/src/components/ChangePin/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).changePinButtonLabel}
+        mode="text"
+        disabled={disabled}
+        textColor={textColor}
+        colors={confirmPinButtonsLinearGradientColors}
+        onPress={onConfirmPin}
+      />
+    </View>
+  );
+}

package/src/components/ChangePin/ReenterNewPin.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 ReenterNewPin({
+  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).changePinButtonLabel}
+          pinLabel={localLabels(language).confirmCardPIN}
+          wrongPinLabel={localLabels(language).wrongCardPin}
+          pinLabelIndex={NILabels.changePinDescriptionLabel}
+          showHideLabels={{
+            show: localLabels(language).show,
+            hide: localLabels(language).hide,
+          }}
+          theme={theme}
+          input={input}
+        />
+      )}
+    </>
+  );
+}

package/src/components/ChangePin/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;