@tonder.io/rn-sdk 0.1.3 → 0.1.4

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

@@ -22,6 +22,7 @@ interface SavedCardsListProps {
   deletingCards?: string[];
   style?: StylesSavedCardsVariant;
   showDeleteButton?: boolean;
+  expirationLabel?: string;
 }
 
 const SavedCardsList: React.FC<SavedCardsListProps> = ({
@@ -32,6 +33,7 @@ const SavedCardsList: React.FC<SavedCardsListProps> = ({
   deletingCards,
   showDeleteButton = true,
   style,
+  expirationLabel = 'Exp.',
 }) => {
   if (!cards.length) return null;
 
@@ -42,8 +44,17 @@ const SavedCardsList: React.FC<SavedCardsListProps> = ({
   };
   return (
     <View style={{ ...styles.container, ...(style?.base || {}) }}>
-      {cards.map((card) => (
-        <View key={card.fields.skyflow_id} style={styles.cardItem}>
+      {cards.map((card, index) => (
+        <View
+          key={card.fields.skyflow_id}
+          style={[
+            styles.cardItem,
+            { ...{ ...(style?.cardItem?.base || {}) } },
+            index === cards.length - 1 && {
+              borderBottomWidth: 0,
+            },
+          ]}
+        >
           <RadioButton
             style={{
               base: style?.radioBase,
@@ -73,7 +84,8 @@ const SavedCardsList: React.FC<SavedCardsListProps> = ({
                 ...buildBaseStyleText(style),
               }}
             >
-              Exp. {card.fields.expiration_month}/{card.fields.expiration_year}
+              {expirationLabel} {card.fields.expiration_month}/
+              {card.fields.expiration_year}
             </Text>
           </View>
           {(deletingCards || []).includes(card.fields.skyflow_id) && (

package/src/ui/components/Skeleton/CardFormSkeleton.tsx

@@ -1,8 +1,34 @@
 import React from 'react';
 import { View, StyleSheet, Animated, Easing, Text } from 'react-native';
+import type { ISkeletonCardStyles, StylesBaseVariant } from '@tonder.io/rn-sdk';
+import { buildBaseStyleText } from '../../../shared/utils/styleUtils';
 
-const CardFormSkeleton = ({ message }: { message?: string }) => {
-  const animatedValue = new Animated.Value(0);
+const SkeletonItem = ({
+  styleItem,
+  interpolatedColor,
+}: {
+  styleItem?: StylesBaseVariant;
+  interpolatedColor: Animated.AnimatedInterpolation<string | number>;
+}) => (
+  <Animated.View
+    style={[
+      styles.skeletonLoader,
+      ...(styleItem?.base ? [styleItem.base] : []),
+      { backgroundColor: interpolatedColor },
+    ]}
+  />
+);
+
+const CardFormSkeleton = ({
+  message,
+  style,
+  errorMessageStyle,
+}: {
+  message?: string;
+  style?: ISkeletonCardStyles;
+  errorMessageStyle?: StylesBaseVariant;
+}) => {
+  const animatedValue = React.useRef(new Animated.Value(0)).current;
 
   React.useEffect(() => {
     Animated.loop(
@@ -25,42 +51,71 @@ const CardFormSkeleton = ({ message }: { message?: string }) => {
 
   const interpolatedColor = animatedValue.interpolate({
     inputRange: [0, 1],
-    outputRange: ['#e0e0e0', '#f0f0f0'],
+    outputRange: style?.animatedBGColors || ['#e0e0e0', '#dddddd'],
   });
 
-  const SkeletonItem = () => (
-    <Animated.View
-      style={[styles.skeletonLoader, { backgroundColor: interpolatedColor }]}
-    />
-  );
-
   return (
-    <View style={styles.container}>
-      <SkeletonItem />
-      <SkeletonItem />
-      <View style={styles.collectRow}>
+    <View
+      style={{
+        ...styles.container,
+        ...(style?.base || {}),
+        ...styles.containerBase,
+      }}
+    >
+      <SkeletonItem
+        styleItem={style?.fullField}
+        interpolatedColor={interpolatedColor}
+      />
+      <SkeletonItem
+        styleItem={style?.fullField}
+        interpolatedColor={interpolatedColor}
+      />
+      <View
+        style={{
+          ...styles.collectRow,
+          ...(style?.compactRow?.base || {}),
+        }}
+      >
         <Animated.View
           style={[
+            styles.skeletonLoader,
+            ...(style?.compactField?.base ? [style?.compactField?.base] : []),
             styles.skeletonLoaderItem,
             { backgroundColor: interpolatedColor },
           ]}
         />
         <Animated.View
           style={[
+            styles.skeletonLoader,
+            ...(style?.compactField?.base ? [style?.compactField?.base] : []),
             styles.skeletonLoaderItem,
             { backgroundColor: interpolatedColor },
           ]}
         />
         <Animated.View
           style={[
+            styles.skeletonLoader,
+            ...(style?.compactField?.base ? [style?.compactField?.base] : []),
             styles.skeletonLoaderItem,
             { backgroundColor: interpolatedColor },
           ]}
         />
       </View>
       {!!message && (
-        <View style={styles.errorContainer}>
-          <Text style={styles.errorText}>{message}</Text>
+        <View
+          style={{
+            ...styles.errorContainer,
+            ...(errorMessageStyle?.base || {}),
+          }}
+        >
+          <Text
+            style={{
+              ...styles.errorText,
+              ...buildBaseStyleText(errorMessageStyle),
+            }}
+          >
+            {message}
+          </Text>
         </View>
       )}
     </View>
@@ -68,17 +123,19 @@ const CardFormSkeleton = ({ message }: { message?: string }) => {
 };
 
 const styles = StyleSheet.create({
-  container: {
+  containerBase: {
     position: 'absolute',
     top: 0,
     left: 0,
     width: '100%',
     height: '100%',
+    zIndex: 1,
+  },
+  container: {
     backgroundColor: '#F9F9F9',
     padding: 20,
     flex: 1,
     gap: 20,
-    zIndex: 1,
   },
   collectRow: {
     flexDirection: 'row',
@@ -93,12 +150,13 @@ const styles = StyleSheet.create({
     marginHorizontal: 10,
   },
   skeletonLoaderItem: {
-    height: 35,
-    borderRadius: 8,
     flex: 1,
+    marginVertical: 0,
+    marginHorizontal: 0,
   },
   errorContainer: {
-    paddingHorizontal: 11,
+    paddingHorizontal: 20,
+    marginVertical: 5,
   },
   errorText: {
     color: 'red',

package/src/ui/features/TonderEnrollment/index.tsx

@@ -26,7 +26,12 @@ const TonderEnrollment: React.FC<ITonderEnrollmentProps> = () => {
 
   return (
     <View style={styles.container}>
-      {state?.isCreating && <CardFormSkeleton message={state?.message} />}
+      {state?.isCreating && (
+        <CardFormSkeleton
+          style={state?.customization?.styles?.skeletonCard}
+          message={state?.message}
+        />
+      )}
       <View
         style={{
           ...DEFAULT_PAYMENT_CONTAINER.base,

package/src/ui/features/TonderPayment/index.tsx

@@ -55,7 +55,12 @@ const TonderPayment: React.FC<ITonderPaymentProps> = () => {
 
   return (
     <View style={styles.container}>
-      {state?.isCreating && <CardFormSkeleton message={state?.message} />}
+      {state?.isCreating && (
+        <CardFormSkeleton
+          style={state?.customization?.styles?.skeletonCard}
+          message={state?.message}
+        />
+      )}
       <View
         style={{
           ...DEFAULT_PAYMENT_CONTAINER.base,
@@ -66,6 +71,7 @@ const TonderPayment: React.FC<ITonderPaymentProps> = () => {
         {state?.customization?.saveCards?.showSaved && (
           <SavedCardsList
             style={state?.customization?.styles?.savedCards}
+            expirationLabel={state?.customization?.labels?.expirationCard}
             cards={state.uiData?.cards}
             selectedMethod={state?.uiData?.card || ''}
             onMethodSelect={(methodId) => {
@@ -110,7 +116,7 @@ const TonderPayment: React.FC<ITonderPaymentProps> = () => {
                 ),
               }}
             >
-              Pagar con tarjeta
+              {state?.customization?.labels?.payWithCard || 'Pagar con tarjeta'}
             </Text>
           </View>
         )}
@@ -210,6 +216,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     borderBottomWidth: 1,
     borderBottomColor: '#e2e8f0',
+    borderTopWidth: 1,
+    borderTopColor: '#e2e8f0',
   },
   cardImage: {
     width: 32,