@tonder.io/rn-sdk 0.1.7 → 0.1.8

package/src/shared/constants/paymentMethods.ts

@@ -1,6 +1,7 @@
 const PAYMENT_METHODS = Object.freeze({
   SORIANA: 'SORIANA',
   OXXO: 'OXXO',
+  OXXOPAY: 'OXXOPAY',
   SPEI: 'SPEI',
   CODI: 'CODI',
   MERCADOPAGO: 'MERCADOPAGO',
@@ -58,6 +59,8 @@ const PAYMENT_METHODS = Object.freeze({
   BAM: 'BAM',
   REFACIL: 'REFACIL',
   ACYVALORES: 'ACYVALORES',
+  SAFETYPAYCASH: 'SAFETYPAYCASH',
+  SAFETYPAYTRANSFER: 'SAFETYPAYTRANSFER',
 });
 
 export { PAYMENT_METHODS };

package/src/shared/constants/skyflow.ts

@@ -1,4 +1,4 @@
-import { ValidationRuleType } from 'skf-rnad';
+import { ValidationRuleType } from 'skyflow-react-native';
 const lengthMatchRule = {
   type: ValidationRuleType.LENGTH_MATCH_RULE,
   params: {

package/src/types/baseCheckout.ts

@@ -12,7 +12,7 @@ import type {
   IProcessPaymentRequest,
   ITransaction,
 } from '.';
-import type { IConfig } from 'skf-rnad';
+import type { IConfig } from 'skyflow-react-native';
 import { SDKType } from './base';
 
 export interface IBaseUIState {

package/src/types/baseEnrollment.ts

@@ -5,7 +5,7 @@ import type {
   ICustomerResponse,
   IEnrollmentCallbacks,
 } from '.';
-import type { IConfig } from 'skf-rnad';
+import type { IConfig } from 'skyflow-react-native';
 import { SDKType } from './base';
 
 export interface IBaseEnrollmentState extends IBaseState<SDKType.ENROLLMENT> {

package/src/types/baseSDK.ts

@@ -1,5 +1,5 @@
 import type { Business, IBaseState, ICustomerResponse } from '.';
-import type { IConfig } from 'skf-rnad';
+import type { IConfig } from 'skyflow-react-native';
 import { SDKType } from './base';
 
 export interface IBaseSDKState<T extends SDKType> extends IBaseState<T> {

package/src/types/enrollment.ts

@@ -1,7 +1,16 @@
-import type { IBaseCreateOptions, IBaseResponse, IEvents, SDKOptions } from './base';
+import type {
+  IBaseCreateOptions,
+  IBaseResponse,
+  IEvents,
+  SDKOptions,
+} from './base';
 import type { IBaseEnrollmentState } from './baseEnrollment';
 import { SDKType } from './base';
-import type { ICardsSummaryResponse, ISaveCardResponse } from './card';
+import type {
+  ICardsSummaryResponse,
+  ICustomerCardsResponse,
+  ISaveCardResponse,
+} from './card';
 import type { IFormLabels, IFormPlaceholder, IStyles } from './common';
 import type { ICustomer } from './customer';
 import TonderError from '../shared/utils/errors';
@@ -78,4 +87,12 @@ export interface IEnrollment {
    * @public
    */
   getCardSummary(id: string): Promise<IBaseResponse<ICardsSummaryResponse>>;
+
+  /**
+   * Retrieves the list of cards associated with a customer.
+   * @returns {Promise<IBaseResponse<ICustomerCardsResponse>>} A promise that resolves with the customer's card data.
+   *
+   * @public
+   */
+  getCustomerCards(): Promise<IBaseResponse<ICustomerCardsResponse>>;
 }

package/src/types/input.ts

@@ -1,7 +1,7 @@
 import type {
   CollectInputStylesVariant,
   CollectLabelStylesVariant,
-} from 'skf-rnad';
+} from 'skyflow-react-native';
 import type { StylesBaseVariant } from './common';
 
 export interface IEventSecureInput {

package/src/types/transaction.ts

@@ -17,12 +17,14 @@ export interface ITransaction {
   is_disputed?: boolean | null;
   number_of_payment_attempts: number;
   card_brand?: string | null;
+  is_route_finished?: boolean;
   number_of_installments: number;
   payment?: ITransactionPayment;
   checkout: ITransactionCheckout;
   currency: ITransactionCurrency;
   payment_method?: ITransactionPaymentMethod | null;
   issuing_country?: string | null;
+  is_apm?: boolean;
   decline?: {
     error_type?: string;
   };

package/src/ui/components/CardForm/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import type {
-  ICardFormEvents,
-  ICardFormStyles,
-  IFormLabels,
-  IFormPlaceholder,
+import {
+  type ICardFormEvents,
+  type ICardFormStyles,
+  type IFormLabels,
+  type IFormPlaceholder,
 } from '../../../types';
 import { CardHolderInput } from '../Input/CardHolderInput';
 import { CardNumberInput } from '../Input/CardNumberInput';
@@ -90,6 +90,7 @@ const styles = StyleSheet.create({
   container: {
     padding: 20,
     paddingVertical: 10,
+    minHeight: 250,
   },
   expirationRow: {
     flexDirection: 'row',

package/src/ui/components/Input/CardCVVInput.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { CvvElement } from 'skf-rnad';
+import { CvvElement } from 'skyflow-react-native';
 import React, { useState } from 'react';
 import type { InputProps } from '../../../types';
 import {
@@ -17,20 +17,23 @@ import {
   SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
 } from '../../styles/skyflow';
 import useTonderContext from '../../providers/TonderProvider/hook';
+import SkyflowContainerWrapper from '../../providers/SkyflowContainerWrapper';
 
-export const CardCVVInput: React.FC<InputProps> = ({
+export const CardCVVInput: React.FC<InputProps & { cardId?: string }> = ({
   placeholder = DEFAULT_SKYFLOW_PLACEHOLDERS.cvvPlaceholder,
   label = DEFAULT_SKYFLOW_lABELS.cvvLabel,
   style,
   onFocus,
   onBlur,
   onChange,
+  cardId,
 }) => {
   const [errorText, setErrorText] = useState('');
   const { state } = useTonderContext();
 
   return (
     <>
+      <SkyflowContainerWrapper key={`cvvElement-${cardId}`} />
       {state?.skyflowContainer && state?.isCreated && !state?.isCreating && (
         <View
           style={{
@@ -46,6 +49,7 @@ export const CardCVVInput: React.FC<InputProps> = ({
             column="cvv"
             placeholder={placeholder}
             label={label}
+            skyflowID={cardId}
             validations={[regexMatchRule]}
             inputStyles={{
               ...DEFAULT_SKYFLOW_INPUT_STYLES,

package/src/ui/components/Input/CardExpirationDateInput.tsx

@@ -14,6 +14,8 @@ import { DEFAULT_INPUT_CONTAINER_STYLES } from '../../styles/payment';
 import { CardExpirationMonthInput } from './CardExpirationMonthInput';
 import { CardExpirationYearInput } from './CardExpirationYearInput';
 import type { InputExpiryDateProps } from '../../../types';
+import SkyflowContainerWrapper from '../../providers/SkyflowContainerWrapper';
+import useTonderContext from '../../providers/TonderProvider/hook';
 
 export const CardExpirationDateInput: React.FC<InputExpiryDateProps> = ({
   yearPlaceholder = DEFAULT_SKYFLOW_PLACEHOLDERS.expiryYearPlaceholder,
@@ -22,16 +24,20 @@ export const CardExpirationDateInput: React.FC<InputExpiryDateProps> = ({
   style,
   events,
 }) => {
+  const { state } = useTonderContext();
   return (
     <View style={styles.container}>
-      <Text
-        style={{
-          ...(DEFAULT_SKYFLOW_lABEL_STYLES.base as StyleProp<TextStyle>),
-          ...((style?.labelStyles?.base || {}) as StyleProp<TextStyle>),
-        }}
-      >
-        {label}
-      </Text>
+      <SkyflowContainerWrapper />
+      {state?.skyflowContainer && state?.isCreated && !state?.isCreating && (
+        <Text
+          style={{
+            ...(DEFAULT_SKYFLOW_lABEL_STYLES.base as StyleProp<TextStyle>),
+            ...((style?.labelStyles?.base || {}) as StyleProp<TextStyle>),
+          }}
+        >
+          {label}
+        </Text>
+      )}
       <View style={styles.row}>
         <CardExpirationMonthInput
           label={''}

package/src/ui/components/Input/CardExpirationMonthInput.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React, { useState } from 'react';
 import type { InputProps } from '../../../types';
-import { ExpirationMonthElement } from 'skf-rnad';
+import { ExpirationMonthElement } from 'skyflow-react-native';
 import {
   getErrorField,
   regexMatchRule,
@@ -19,6 +19,7 @@ import {
   SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
 } from '../../styles/skyflow';
 import useTonderContext from '../../providers/TonderProvider/hook';
+import SkyflowContainerWrapper from '../../providers/SkyflowContainerWrapper';
 
 export const CardExpirationMonthInput: React.FC<InputProps> = ({
   placeholder = DEFAULT_SKYFLOW_PLACEHOLDERS.expiryMonthPlaceholder,
@@ -33,6 +34,7 @@ export const CardExpirationMonthInput: React.FC<InputProps> = ({
 
   return (
     <>
+      <SkyflowContainerWrapper />
       {state?.skyflowContainer && state?.isCreated && !state?.isCreating && (
         <View
           style={{

package/src/ui/components/Input/CardExpirationYearInput.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React, { useState } from 'react';
 import type { InputProps } from '../../../types';
-import { ExpirationYearElement } from 'skf-rnad';
+import { ExpirationYearElement } from 'skyflow-react-native';
 import {
   getErrorField,
   regexMatchRule,
@@ -17,6 +17,7 @@ import {
   SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
 } from '../../styles/skyflow';
 import useTonderContext from '../../providers/TonderProvider/hook';
+import SkyflowContainerWrapper from '../../providers/SkyflowContainerWrapper';
 
 export const CardExpirationYearInput: React.FC<InputProps> = ({
   placeholder = DEFAULT_SKYFLOW_PLACEHOLDERS.expiryYearPlaceholder,
@@ -31,6 +32,7 @@ export const CardExpirationYearInput: React.FC<InputProps> = ({
 
   return (
     <>
+      <SkyflowContainerWrapper />
       {state?.skyflowContainer && state?.isCreated && !state?.isCreating && (
         <View
           style={{

package/src/ui/components/Input/CardHolderInput.tsx

@@ -9,7 +9,7 @@ import {
   DEFAULT_SKYFLOW_PLACEHOLDERS,
 } from '../../../shared/constants/skyflow';
 import { Text, View } from 'react-native';
-import { CardHolderNameElement } from 'skf-rnad';
+import { CardHolderNameElement } from 'skyflow-react-native';
 import {
   DEFAULT_SKYFLOW_ERROR_TEXT_STYLES,
   DEFAULT_SKYFLOW_INPUT_STYLES,
@@ -18,6 +18,7 @@ import {
 } from '../../styles/skyflow';
 import { DEFAULT_INPUT_CONTAINER_STYLES } from '../../styles/payment';
 import useTonderContext from '../../providers/TonderProvider/hook';
+import SkyflowContainerWrapper from '../../providers/SkyflowContainerWrapper';
 
 export const CardHolderInput: React.FC<InputProps> = ({
   placeholder = DEFAULT_SKYFLOW_PLACEHOLDERS.namePlaceholder,
@@ -32,6 +33,7 @@ export const CardHolderInput: React.FC<InputProps> = ({
   const [errorText, setErrorText] = useState('');
   return (
     <>
+      <SkyflowContainerWrapper />
       {state?.skyflowContainer && state?.isCreated && !state?.isCreating && (
         <View
           style={{

package/src/ui/components/Input/CardNumberInput.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React, { useState } from 'react';
 import type { InputProps } from '../../../types';
-import { CardNumberElement } from 'skf-rnad';
+import { CardNumberElement } from 'skyflow-react-native';
 import {
   getErrorField,
   regexMatchRule,
@@ -17,6 +17,7 @@ import {
   SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
 } from '../../styles/skyflow';
 import useTonderContext from '../../providers/TonderProvider/hook';
+import SkyflowContainerWrapper from '../../providers/SkyflowContainerWrapper';
 
 export const CardNumberInput: React.FC<InputProps> = ({
   placeholder = DEFAULT_SKYFLOW_PLACEHOLDERS.cardPlaceholder,
@@ -31,6 +32,7 @@ export const CardNumberInput: React.FC<InputProps> = ({
 
   return (
     <>
+      <SkyflowContainerWrapper />
       {state?.skyflowContainer && state?.isCreated && !state?.isCreating && (
         <View
           style={{
@@ -44,6 +46,9 @@ export const CardNumberInput: React.FC<InputProps> = ({
             container={state.skyflowContainer}
             table="cards"
             column="card_number"
+            options={{
+              enableCardIcon: false,
+            }}
             placeholder={placeholder}
             label={label}
             validations={[regexMatchRule]}

package/src/ui/components/PaymentMethodsList/index.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { View, StyleSheet, Text, Image, ScrollView } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  Text,
+  Image,
+  ScrollView,
+  TouchableOpacity,
+} from 'react-native';
 import type { IPaymentMethod, StylesSelectVariant } from '../../../types';
 import { getPaymentMethodDetails } from '../../../shared/catalog/paymentMethodsCatalog';
 import { RadioButton } from '../RadioButton';
@@ -25,7 +32,12 @@ const PaymentMethodsList: React.FC<PaymentMethodsListProps> = ({
       {methods.map((method) => {
         const details = getPaymentMethodDetails(method.payment_method);
         return (
-          <View key={method.id} style={styles.methodItem}>
+          <TouchableOpacity
+            key={method.id}
+            style={styles.methodItem}
+            onPress={() => onMethodSelect(method.payment_method)}
+            activeOpacity={0.7}
+          >
             <RadioButton
               style={{
                 base: style?.radioBase,
@@ -52,7 +64,7 @@ const PaymentMethodsList: React.FC<PaymentMethodsListProps> = ({
             >
               {details.label}
             </Text>
-          </View>
+          </TouchableOpacity>
         );
       })}
     </ScrollView>

package/src/ui/components/SavedCardsList/index.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   View,
   StyleSheet,
@@ -7,16 +7,23 @@ import {
   Text,
   Image,
   ActivityIndicator,
+  Animated,
 } from 'react-native';
 import { getCardType } from '../../../shared/catalog/cardBrandCatalog';
 import { RadioButton } from '../RadioButton';
-import type { ICard, StylesSavedCardsVariant } from '../../../types';
+import {
+  type ICard,
+  type InputProps,
+  type StylesSavedCardsVariant,
+} from '../../../types';
 import { Trash2 } from 'lucide-react-native';
 import { buildBaseStyleText } from '../../../shared/utils/styleUtils';
+import { CardCVVInput } from '@tonder.io/rn-sdk';
 
 interface SavedCardsListProps {
   cards: ICard[];
   selectedMethod: string;
+  cvvProps: InputProps;
   onMethodSelect: (methodId: string) => void;
   onDeleteCard: (cardId: string) => Promise<void>;
   deletingCards?: string[];
@@ -25,6 +32,153 @@ interface SavedCardsListProps {
   expirationLabel?: string;
 }
 
+interface CardItemProps {
+  card: ICard;
+  selectedMethod: string;
+  onMethodSelect: (methodId: string) => void;
+  onDeleteCard: (cardId: string) => Promise<void>;
+  deletingCards?: string[];
+  showDeleteButton: boolean;
+  style?: StylesSavedCardsVariant;
+  expirationLabel: string;
+  isLastItem: boolean;
+  replaceTextCardNumber: (cardNumber: string) => string;
+  cvvProps: InputProps;
+}
+
+const CardItem: React.FC<CardItemProps> = ({
+  card,
+  selectedMethod,
+  onMethodSelect,
+  onDeleteCard,
+  deletingCards,
+  showDeleteButton,
+  style,
+  expirationLabel,
+  isLastItem,
+  replaceTextCardNumber,
+  cvvProps,
+}) => {
+  const isSelected = selectedMethod === card.fields.skyflow_id;
+  const animationScale = useRef(new Animated.Value(0)).current;
+  const animationOpacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.spring(animationScale, {
+        toValue: isSelected ? 1 : 0,
+        useNativeDriver: true,
+        friction: 8,
+        tension: 40,
+      }),
+      Animated.timing(animationOpacity, {
+        toValue: isSelected ? 1 : 0,
+        duration: 100,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [isSelected, animationScale, animationOpacity]);
+
+  return (
+    <View
+      style={[
+        styles.cardItem,
+        { ...{ ...(style?.cardItem?.base || {}) } },
+        isLastItem && styles.cardItemContainerLast,
+      ]}
+    >
+      <TouchableOpacity
+        style={[styles.cardItemPreview]}
+        onPress={() => onMethodSelect(card.fields.skyflow_id)}
+        activeOpacity={0.7}
+      >
+        <RadioButton
+          style={{
+            base: style?.radioBase,
+            selected: style?.radioSelected,
+            inner: style?.radioInner,
+          }}
+          value={card.fields.skyflow_id}
+          selected={isSelected}
+          onSelect={() => onMethodSelect(card.fields.skyflow_id)}
+        />
+        <Image
+          source={{ uri: getCardType(card.fields.card_scheme) }}
+          style={{ ...styles.cardImage, ...(style?.cardIcon || {}) }}
+        />
+        <View style={styles.cardInfo}>
+          <Text
+            style={{
+              ...styles.cardNumber,
+              ...buildBaseStyleText(style),
+            }}
+          >
+            {replaceTextCardNumber(card.fields.card_number)}
+          </Text>
+          <Text
+            style={{
+              ...styles.cardExpiration,
+              ...buildBaseStyleText(style),
+            }}
+          >
+            {expirationLabel} {card.fields.expiration_month}/
+            {card.fields.expiration_year}
+          </Text>
+        </View>
+        {(deletingCards || []).includes(card.fields.skyflow_id) && (
+          <ActivityIndicator color="#000000" size="small" />
+        )}
+        {!(deletingCards || []).includes(card.fields.skyflow_id) &&
+          showDeleteButton && (
+            <TouchableOpacity
+              onPress={(e) => {
+                e.stopPropagation();
+                onDeleteCard(card.fields.skyflow_id);
+              }}
+              style={{
+                ...styles.deleteButton,
+                ...(style?.deleteButton || {}),
+              }}
+              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            >
+              <Trash2
+                size={style?.deleteIcon?.fontSize || 16}
+                color={style?.deleteIcon?.color || '#000000'}
+              />
+            </TouchableOpacity>
+          )}
+      </TouchableOpacity>
+
+      {/* Contenido expandible del accordion */}
+      <Animated.View
+        style={[
+          styles.expandedContent,
+          {
+            opacity: animationOpacity,
+            transform: [{ scaleY: animationScale }],
+          },
+        ]}
+      >
+        {isSelected && (
+          <View style={styles.expandedContentInner}>
+            <View style={styles.expandedBodyInner}>
+              <CardCVVInput
+                style={cvvProps?.style}
+                label={cvvProps?.label}
+                placeholder={cvvProps?.placeholder}
+                onBlur={cvvProps?.onBlur}
+                onChange={cvvProps?.onChange}
+                onFocus={cvvProps?.onFocus}
+                cardId={card.fields.skyflow_id}
+              />
+            </View>
+          </View>
+        )}
+      </Animated.View>
+    </View>
+  );
+};
+
 const SavedCardsList: React.FC<SavedCardsListProps> = ({
   cards,
   selectedMethod,
@@ -34,6 +188,7 @@ const SavedCardsList: React.FC<SavedCardsListProps> = ({
   showDeleteButton = true,
   style,
   expirationLabel = 'Exp.',
+  cvvProps,
 }) => {
   if (!cards.length) return null;
 
@@ -45,69 +200,20 @@ const SavedCardsList: React.FC<SavedCardsListProps> = ({
   return (
     <View style={{ ...styles.container, ...(style?.base || {}) }}>
       {cards.map((card, index) => (
-        <View
+        <CardItem
           key={card.fields.skyflow_id}
-          style={[
-            styles.cardItem,
-            { ...{ ...(style?.cardItem?.base || {}) } },
-            index === cards.length - 1 && {
-              borderBottomWidth: 0,
-            },
-          ]}
-        >
-          <RadioButton
-            style={{
-              base: style?.radioBase,
-              selected: style?.radioSelected,
-              inner: style?.radioInner,
-            }}
-            value={card.fields.skyflow_id}
-            selected={selectedMethod === card.fields.skyflow_id}
-            onSelect={() => onMethodSelect(card.fields.skyflow_id)}
-          />
-          <Image
-            source={{ uri: getCardType(card.fields.card_scheme) }}
-            style={{ ...styles.cardImage, ...(style?.cardIcon || {}) }}
-          />
-          <View style={styles.cardInfo}>
-            <Text
-              style={{
-                ...styles.cardNumber,
-                ...buildBaseStyleText(style),
-              }}
-            >
-              {replaceTextCardNumber(card.fields.card_number)}
-            </Text>
-            <Text
-              style={{
-                ...styles.cardExpiration,
-                ...buildBaseStyleText(style),
-              }}
-            >
-              {expirationLabel} {card.fields.expiration_month}/
-              {card.fields.expiration_year}
-            </Text>
-          </View>
-          {(deletingCards || []).includes(card.fields.skyflow_id) && (
-            <ActivityIndicator color="#000000" size="small" />
-          )}
-          {!(deletingCards || []).includes(card.fields.skyflow_id) &&
-            showDeleteButton && (
-              <TouchableOpacity
-                onPress={() => onDeleteCard(card.fields.skyflow_id)}
-                style={{
-                  ...styles.deleteButton,
-                  ...(style?.deleteButton || {}),
-                }}
-                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-              >
-                <Trash2
-                  size={style?.deleteIcon?.fontSize || 16}
-                  color={style?.deleteIcon?.color || '#000000'}
-                />
-              </TouchableOpacity>
-            )}
-        </View>
+          card={card}
+          selectedMethod={selectedMethod}
+          onMethodSelect={onMethodSelect}
+          onDeleteCard={onDeleteCard}
+          deletingCards={deletingCards}
+          showDeleteButton={showDeleteButton}
+          style={style}
+          expirationLabel={expirationLabel}
+          isLastItem={index === cards.length - 1}
+          replaceTextCardNumber={replaceTextCardNumber}
+          cvvProps={cvvProps}
+        />
       ))}
     </View>
   );
@@ -117,9 +223,14 @@ const styles = StyleSheet.create({
   container: {
     paddingHorizontal: 0,
   },
-  cardItem: {
+  cardItemPreview: {
     flexDirection: 'row',
     alignItems: 'center',
+  },
+  cardItemContainerLast: {
+    borderBottomWidth: 0,
+  },
+  cardItem: {
     paddingHorizontal: 20,
     paddingVertical: 5,
     borderBottomWidth: 1,
@@ -145,6 +256,16 @@ const styles = StyleSheet.create({
   deleteButton: {
     padding: 10,
   },
+  expandedContent: {},
+  expandedContentInner: {
+    paddingHorizontal: 20,
+    paddingTop: 15,
+  },
+  expandedBodyInner: {
+    paddingHorizontal: 10,
+    minHeight: 75,
+    maxWidth: '60%',
+  },
 });
 
 export default SavedCardsList;