@networkinternational/ni-card-management-sdk 1.0.2

package/react-native-ni-card-management.podspec

@@ -0,0 +1,43 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-ni-card-management"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "12.0" }
+  s.source       = { :git => "#{package["homepage"]}", :tag => "#{s.version}" }
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+
+  s.dependency "React-Core"
+  s.dependency "NICardManagementSDK", '1.1.0'
+  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
+  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+ 
+
+  # Don't install the dependencies when we run `pod install` in the old architecture.
+  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+    s.pod_target_xcconfig    = {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+    }
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+   end
+  end    
+end
+

package/src/NICardManagementComponents/CardDetailsComponent.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect } from 'react';
+import { StyleSheet, type TextStyle, View } from 'react-native';
+
+import type { NICardDetailsComponent } from '../interfaces/NiInterfaces';
+import { CardDetails } from '../components/CardDetails/CardDetails';
+import PinState from '../components/PinState/PinState';
+import { useGetCardDetails } from '../hooks/useGetCardDetails';
+import { NIThemeEnum } from '../interfaces/NiInputInterfaces';
+import type { NIGetCardSuccessResponse } from '../interfaces/NiCardManagementInterfaces';
+import { themeColors } from '../config/themeColors';
+
+function CardDetailsComponent({
+  input,
+  callback,
+}: NICardDetailsComponent): JSX.Element {
+  const { displayAttributes } = input || {};
+  const theme = displayAttributes?.theme || NIThemeEnum.light;
+  const cardDetailsStyle: TextStyle = {
+    height: '100%',
+    width: '100%',
+    backgroundColor:
+      theme === NIThemeEnum.light
+        ? themeColors.light.background
+        : themeColors.dark.background,
+  };
+
+  const {
+    result: getCardDetailsResult,
+    error: getCardDetailsError,
+    isLoading: getCardDetailsIsLoading,
+    onGetCardDetails,
+  } = useGetCardDetails();
+
+  useEffect(() => {
+    input && onGetCardDetails(input, callback);
+  }, []);
+
+  const error_getCardDetailsResult: NIGetCardSuccessResponse = {
+    clearPan: '-',
+    maskedPan: '-',
+    expiry: '-',
+    clearCVV2: '-',
+    cardholderName: '-',
+  };
+  return (
+    <View style={cardDetailsStyle}>
+      <View style={styles.cardDetailsStyle}>
+        <CardDetails
+          displayAttributes={displayAttributes}
+          getCardDetailsResult={
+            !getCardDetailsError
+              ? getCardDetailsResult
+              : error_getCardDetailsResult
+          }
+          isError={!!getCardDetailsError}
+        />
+        <PinState
+          isLoading={getCardDetailsIsLoading}
+          theme={theme}
+          isCardDetails={true}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  cardDetailsStyle: {
+    marginTop: 60,
+  },
+});
+
+export {
+  CardDetailsComponent,
+  useGetCardDetails,
+  type NIGetCardSuccessResponse,
+};

package/src/NICardManagementComponents/ChangePinView.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { NIPinTypeEnum, NIThemeEnum } from '../interfaces/NiInputInterfaces';
+import { type NIChangePinView } from '../interfaces/NiInterfaces';
+import { useChangePin } from '../hooks/useChangePin';
+import ChangePin from '../components/ChangePin/ChangePin';
+import PinState from '../components/PinState/PinState';
+
+function ChangePinView({
+  input,
+  type,
+  callback,
+}: NIChangePinView): JSX.Element {
+  const theme = input?.displayAttributes?.theme || NIThemeEnum.light;
+
+  const _pinType = type || NIPinTypeEnum.dynamicFourToSix;
+  const pinType = [0, 4, 5, 6].includes(type || NIPinTypeEnum.dynamicFourToSix)
+    ? _pinType
+    : NIPinTypeEnum.dynamicFourToSix;
+
+  const {
+    result: changePinResult,
+    isLoading: isChangePinLoading,
+    onChangePin,
+  } = useChangePin();
+
+  return (
+    <>
+      <ChangePin
+        input={input}
+        pinType={pinType || NIPinTypeEnum.dynamicFourToSix}
+        result={changePinResult}
+        isLoading={isChangePinLoading}
+        onChangePin={onChangePin}
+        callback={callback}
+      />
+      <PinState isLoading={isChangePinLoading} theme={theme} />
+    </>
+  );
+}
+export { ChangePinView, useChangePin };

package/src/NICardManagementComponents/NiInputInterfaces.ts

@@ -0,0 +1,14 @@
+import type {
+  NIErrorResponse,
+  NIInputInterface,
+  NIConnectionProperties,
+  NIGetCardSuccessResponse,
+} from '../interfaces/NiCardManagementInterfaces';
+export type {
+  NIErrorResponse,
+  NIInputInterface,
+  NIConnectionProperties,
+  NIGetCardSuccessResponse,
+};
+
+export * from '../interfaces/NiInputInterfaces';

package/src/NICardManagementComponents/SetPinView.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { NIPinTypeEnum, NIThemeEnum } from '../interfaces/NiInputInterfaces';
+import { type NISetPinView } from '../interfaces/NiInterfaces';
+import { useSetPin } from '../hooks/useSetPin';
+import SetPin from '../components/SetPin/SetPin';
+import PinState from '../components/PinState/PinState';
+
+function SetPinView({ input, type, callback }: NISetPinView): JSX.Element {
+  const theme = input?.displayAttributes?.theme || NIThemeEnum.light;
+
+  const _pinType = type || NIPinTypeEnum.dynamicFourToSix;
+  const pinType = [0, 4, 5, 6].includes(type || NIPinTypeEnum.dynamicFourToSix)
+    ? _pinType
+    : NIPinTypeEnum.dynamicFourToSix;
+
+  const {
+    result: setPinResult,
+    isLoading: isSetPinLoading,
+    onSetPin,
+  } = useSetPin();
+
+  return (
+    <>
+      <SetPin
+        input={input}
+        pinType={pinType || NIPinTypeEnum.dynamicFourToSix}
+        result={setPinResult}
+        isLoading={isSetPinLoading}
+        onSetPin={onSetPin}
+        callback={callback}
+      />
+      <PinState isLoading={isSetPinLoading} theme={theme} />
+    </>
+  );
+}
+
+export { SetPinView, useSetPin };

package/src/NICardManagementComponents/VerifyPinView.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { NIPinTypeEnum, NIThemeEnum } from '../interfaces/NiInputInterfaces';
+import { type NIVerifyPinView } from '../interfaces/NiInterfaces';
+import { useVerifyPin } from '../hooks/useVerifyPin';
+import VerifyPin from '../components/VerifyPin/VerifyPin';
+import PinState from '../components/PinState/PinState';
+
+function VerifyPinView({
+  input,
+  type,
+  callback,
+}: NIVerifyPinView): JSX.Element {
+  const theme = input?.displayAttributes?.theme || NIThemeEnum.light;
+
+  const _pinType = type || NIPinTypeEnum.dynamicFourToSix;
+  const pinType = [0, 4, 5, 6].includes(type || NIPinTypeEnum.dynamicFourToSix)
+    ? _pinType
+    : NIPinTypeEnum.dynamicFourToSix;
+
+  const {
+    result: verifyPinResult,
+    isLoading: isVerifyPinLoading,
+    onVerifyPin,
+  } = useVerifyPin();
+
+  return (
+    <>
+      <VerifyPin
+        input={input}
+        pinType={pinType}
+        result={verifyPinResult}
+        isLoading={isVerifyPinLoading}
+        onVerifyPin={onVerifyPin}
+        callback={callback}
+      />
+      <PinState isLoading={isVerifyPinLoading} theme={theme} />
+    </>
+  );
+}
+
+export { VerifyPinView, useVerifyPin };

package/src/NICardManagementComponents/ViewPinComponent.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react';
+
+import { NIPinTypeEnum, NIThemeEnum } from '../interfaces/NiInputInterfaces';
+import { type NIViewPinComponent } from '../interfaces/NiInterfaces';
+import { useViewPin } from '../hooks/useViewPin';
+import PinState from '../components/PinState/PinState';
+import ViewPin from '../components/ViewPin/ViewPin';
+
+function ViewPinComponent({
+  input,
+  type: pinType,
+  callback,
+}: NIViewPinComponent): JSX.Element {
+  const theme = input?.displayAttributes?.theme || NIThemeEnum.light;
+  const countdownTime = input?.timer;
+
+  const {
+    result: viewPinResult,
+    error: viewPinError,
+    isLoading: isViewPinLoading,
+    onViewPin,
+  } = useViewPin();
+
+  (!!viewPinResult || !!viewPinError) &&
+    console.log('ViewPinView', {
+      viewPinResult,
+      viewPinError,
+      isViewPinLoading,
+    });
+
+  useEffect(() => {
+    input && onViewPin(input, callback);
+  }, []);
+
+  return (
+    <>
+      <ViewPin
+        input={input}
+        pinType={pinType || NIPinTypeEnum.dynamicFourToSix}
+        result={viewPinResult || ''}
+        countdownTime={countdownTime || 0}
+      />
+      <PinState isLoading={isViewPinLoading} theme={theme} />
+    </>
+  );
+}
+
+export { ViewPinComponent, useViewPin };

package/src/components/CardDetails/CardDetails.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { type NICardDetails } from '../../interfaces/NiInterfaces';
+import { CardDetailsBackgroundImage } from './CardDetailsBackgroundImage';
+import styles from './styles';
+import { View } from 'react-native';
+
+export function CardDetails({
+  displayAttributes,
+  getCardDetailsResult,
+  isError,
+}: NICardDetails): JSX.Element {
+  return (
+    <View style={styles.cardDetailsContainer}>
+      <View style={styles.cardDetailsRow}>
+        <CardDetailsBackgroundImage
+          displayAttributes={displayAttributes}
+          getCardDetailsResult={getCardDetailsResult}
+          isError={isError}
+        />
+      </View>
+    </View>
+  );
+}

package/src/components/CardDetails/CardDetailsBackgroundImage.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ImageBackground, type ImageURISource } from 'react-native';
+
+import { type NICardDetailsImage } from '../../interfaces/NiInterfaces';
+import { CardDetailsGroups } from './CardDetailsGroups';
+import { styles } from './styles';
+
+export function CardDetailsBackgroundImage({
+  displayAttributes,
+  getCardDetailsResult,
+  isError,
+}: NICardDetailsImage): JSX.Element {
+  const backgroundImageDefault =
+    require('../../assets/images/grayCard.png') as ImageURISource;
+
+  const backgroundImage =
+    displayAttributes?.cardAttributes?.backgroundImage ||
+    backgroundImageDefault;
+
+  return (
+    <ImageBackground
+      source={backgroundImage}
+      style={styles.containerCardDetails}
+      imageStyle={styles.backgroundImageStyle}
+    >
+      <CardDetailsGroups
+        displayAttributes={displayAttributes}
+        getCardDetailsResult={getCardDetailsResult}
+        isError={isError}
+      />
+    </ImageBackground>
+  );
+}

package/src/components/CardDetails/CardDetailsGroups.tsx

@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import { View, useWindowDimensions, I18nManager } from 'react-native';
+
+import {
+  NILabels,
+  NILanguageEnum,
+  NIThemeEnum,
+} from '../../interfaces/NiInputInterfaces';
+import { type NICardDetailsGroups } from '../../interfaces/NiInterfaces';
+import { CardDetailsCardNumberGroup } from './CardNumberGroup';
+import { CardDetailsDateCVVGroupOneRow } from './DateCVVGroupOneRow';
+import { CardDetailsCardHolderNameGroups } from './CardHolderNameGroups';
+import { styles } from './styles';
+import { WIDTH_CARD } from '../../config/configCard';
+import { NIButton } from '../NIButton/NIButton';
+import { themeColors } from '../../config/themeColors';
+import localLabels from '../../utils/localization';
+
+export function CardDetailsGroups({
+  displayAttributes,
+  getCardDetailsResult,
+  isError,
+}: NICardDetailsGroups): JSX.Element {
+  const language =
+    (displayAttributes?.language as string) || NILanguageEnum.english;
+  const theme = displayAttributes?.theme || NIThemeEnum.light;
+
+  const shouldHide = displayAttributes?.cardAttributes?.shouldHide || false;
+  const [cardDetailsVisible, setCardDetailsVisible] = useState(shouldHide);
+  const [isVisibleCopiedButton, setIsVisibleCopiedButton] = useState(false);
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
+
+  const { width } = useWindowDimensions();
+  const leftAlignment =
+    displayAttributes?.cardAttributes?.textPositioning?.leftAlignment || 0.09;
+  const groupsLeftAlignment = Math.round(
+    (leftAlignment * width * WIDTH_CARD) / 100
+  );
+  const containerGroupsLeftAlignmentStyle = {
+    marginLeft: groupsLeftAlignment,
+  };
+
+  const textColor =
+    theme === NIThemeEnum.light
+      ? themeColors.light.buttonCopiedTextColor
+      : themeColors.dark.buttonCopiedTextColor;
+
+  const setTimeOut = () => {
+    clearTimeout(timeoutId);
+
+    setTimeoutId(
+      setTimeout(() => {
+        setIsVisibleCopiedButton(false);
+        setTimeoutId(undefined);
+      }, 4000)
+    );
+  };
+
+  return (
+    <>
+      {getCardDetailsResult && (
+        <View
+          style={[
+            styles.containerGroupsLeftAlignment,
+            containerGroupsLeftAlignmentStyle,
+            I18nManager.isRTL ? { flexDirection: 'row-reverse' } : {},
+          ]}
+        >
+          <CardDetailsCardNumberGroup
+            clearPan={getCardDetailsResult.clearPan}
+            maskedPan={getCardDetailsResult.maskedPan}
+            pinContentIndex={NILabels.cardNumberValueLabel}
+            cardDetailsVisible={cardDetailsVisible}
+            setIsVisibleCopiedButton={setIsVisibleCopiedButton}
+            displayAttributes={displayAttributes}
+            setTimeOut={setTimeOut}
+          />
+          <CardDetailsDateCVVGroupOneRow
+            expiry={getCardDetailsResult.expiry}
+            clearCVV2={getCardDetailsResult.clearCVV2}
+            pinLabelIndex={NILabels.expiryDateLabel}
+            pinContentIndex={NILabels.expiryDateValueLabel}
+            pinLabel1Index={NILabels.cvvLabel}
+            pinContent1Index={NILabels.cvvValueLabel}
+            cardDetailsVisible={{ cardDetailsVisible, setCardDetailsVisible }}
+            shouldHide={shouldHide}
+            displayAttributes={displayAttributes}
+            isError={isError}
+          />
+          <CardDetailsCardHolderNameGroups
+            cardholderName={getCardDetailsResult.cardholderName}
+            pinContentIndex={NILabels.cardholderNameLabel}
+            cardDetailsVisible={cardDetailsVisible}
+            setIsVisibleCopiedButton={setIsVisibleCopiedButton}
+            setTimeOut={setTimeOut}
+            displayAttributes={displayAttributes}
+          />
+          {isVisibleCopiedButton && (
+            <View
+              style={[
+                styles.copyButton,
+                I18nManager.isRTL ? { marginRight: '15%' } : {},
+              ]}
+            >
+              <NIButton
+                title={localLabels(language).copiedToClipboard}
+                mode="text"
+                textColor={textColor}
+                colors={['#bbb', '#bbb', '#bbb']}
+                disabled={false}
+                opacity={0.8}
+              />
+            </View>
+          )}
+        </View>
+      )}
+    </>
+  );
+}

package/src/components/CardDetails/CardHolderNameGroups.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import {
+  type TextStyle,
+  View,
+  Text,
+  TouchableOpacity,
+  I18nManager,
+} from 'react-native';
+import { useClipboard } from '@react-native-community/clipboard';
+
+import {
+  type NIFontLabelPair,
+  NIThemeEnum,
+} from '../../interfaces/NiInputInterfaces';
+import { type NICardDetailsCardHolderNameGroups } 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 CardDetailsCardHolderNameGroups({
+  cardholderName,
+  pinContentIndex,
+  cardDetailsVisible,
+  setIsVisibleCopiedButton,
+  displayAttributes,
+  setTimeOut,
+}: NICardDetailsCardHolderNameGroups): JSX.Element {
+  const [data, setString] = useClipboard();
+
+  const maskedCardholderName = cardholderName.replace(
+    /\b\w*/g,
+    function (s: string) {
+      return s.replace(/(?<!^)./g, '*');
+    }
+  );
+  const cardholderNameRendered = cardDetailsVisible
+    ? maskedCardholderName
+    : cardholderName;
+
+  const holderNameContentGroupTopAlignment = Math.round(
+    (displayAttributes?.cardAttributes?.textPositioning
+      ?.cardHolderNameGroupTopAlignment || 0.8) * HEIGHT_CARD
+  );
+  const containerHolderNameContentGroupTopAlignmentStyle: TextStyle = {
+    position: 'absolute',
+    top: holderNameContentGroupTopAlignment,
+  };
+
+  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(cardholderName);
+    setIsVisibleCopiedButton(true);
+    setTimeOut();
+  }
+  !!data && console.log('clipboard', data);
+
+  return (
+    <>
+      <View
+        style={[
+          styles.containerHolderNameContentGroupTopAlignment,
+          containerHolderNameContentGroupTopAlignmentStyle,
+        ]}
+      >
+        <View
+          style={[
+            styles.copyRow,
+            I18nManager.isRTL ? { flexDirection: 'row-reverse' } : {},
+          ]}
+        >
+          <Text style={[styles.textContent, contentStyleText]}>
+            {cardholderNameRendered}
+          </Text>
+          {!cardDetailsVisible && (
+            <TouchableOpacity onPress={handleOnPress}>
+              <PredeterminedIcon name="content-copy" size={13} />
+            </TouchableOpacity>
+          )}
+        </View>
+      </View>
+    </>
+  );
+}