@tonder.io/rn-sdk 0.1.0-beta.DEV1355.1

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

@@ -0,0 +1,137 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Text,
+  Image,
+  ActivityIndicator,
+} from 'react-native';
+import { getCardType } from '@shared/catalog/cardBrandCatalog';
+import { RadioButton } from '@components/RadioButton';
+import type { ICard, StylesSavedCardsVariant } from '@types';
+import { Trash2 } from 'lucide-react-native';
+import { buildBaseStyleText } from '@shared/utils/styleUtils';
+
+interface SavedCardsListProps {
+  cards: ICard[];
+  selectedMethod: string;
+  onMethodSelect: (methodId: string) => void;
+  onDeleteCard: (cardId: string) => Promise<void>;
+  deletingCards?: string[];
+  style?: StylesSavedCardsVariant;
+  showDeleteButton?: boolean;
+}
+
+const SavedCardsList: React.FC<SavedCardsListProps> = ({
+  cards,
+  selectedMethod,
+  onMethodSelect,
+  onDeleteCard,
+  deletingCards,
+  showDeleteButton = true,
+  style,
+}) => {
+  if (!cards.length) return null;
+
+  const replaceTextCardNumber = (cardNumber: string) => {
+    const carArr = cardNumber.split('-');
+    const last = carArr[carArr.length - 1];
+    return `• • • •  ${last}`;
+  };
+  return (
+    <View style={{ ...styles.container, ...(style?.base || {}) }}>
+      {cards.map((card) => (
+        <View key={card.fields.skyflow_id} style={styles.cardItem}>
+          <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),
+              }}
+            >
+              Exp. {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>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 0,
+  },
+  cardItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 5,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e2e8f0',
+  },
+  cardImage: {
+    width: 32,
+    height: 20,
+    marginLeft: 15,
+  },
+  cardInfo: {
+    flex: 1,
+    marginLeft: 15,
+  },
+  cardNumber: {
+    fontSize: 12,
+    color: '#1D1D1D',
+  },
+  cardExpiration: {
+    fontSize: 12,
+    color: '#1D1D1D',
+  },
+  deleteButton: {
+    padding: 10,
+  },
+});
+
+export default SavedCardsList;

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

@@ -0,0 +1,109 @@
+import React from 'react';
+import { View, StyleSheet, Animated, Easing, Text } from 'react-native';
+
+const CardFormSkeleton = ({ message }: { message?: string }) => {
+  const animatedValue = new Animated.Value(0);
+
+  React.useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          duration: 750,
+          easing: Easing.ease,
+          useNativeDriver: false,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 0,
+          duration: 750,
+          easing: Easing.ease,
+          useNativeDriver: false,
+        }),
+      ])
+    ).start();
+  }, []);
+
+  const interpolatedColor = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['#e0e0e0', '#f0f0f0'],
+  });
+
+  const SkeletonItem = () => (
+    <Animated.View
+      style={[styles.skeletonLoader, { backgroundColor: interpolatedColor }]}
+    />
+  );
+
+  return (
+    <View style={styles.container}>
+      <SkeletonItem />
+      <SkeletonItem />
+      <View style={styles.collectRow}>
+        <Animated.View
+          style={[
+            styles.skeletonLoaderItem,
+            { backgroundColor: interpolatedColor },
+          ]}
+        />
+        <Animated.View
+          style={[
+            styles.skeletonLoaderItem,
+            { backgroundColor: interpolatedColor },
+          ]}
+        />
+        <Animated.View
+          style={[
+            styles.skeletonLoaderItem,
+            { backgroundColor: interpolatedColor },
+          ]}
+        />
+      </View>
+      {!!message && (
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorText}>{message}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#F9F9F9',
+    padding: 20,
+    flex: 1,
+    gap: 20,
+    zIndex: 1,
+  },
+  collectRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginHorizontal: 10,
+    gap: 10,
+  },
+  skeletonLoader: {
+    height: 35,
+    borderRadius: 8,
+    marginVertical: 2,
+    marginHorizontal: 10,
+  },
+  skeletonLoaderItem: {
+    height: 35,
+    borderRadius: 8,
+    flex: 1,
+  },
+  errorContainer: {
+    paddingHorizontal: 11,
+  },
+  errorText: {
+    color: 'red',
+    fontSize: 12,
+  },
+});
+
+export default CardFormSkeleton;

package/src/ui/components/WebView/ThreeDSWebView.tsx

@@ -0,0 +1,110 @@
+// @ts-nocheck
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Modal,
+  SafeAreaView,
+  StyleSheet,
+  View,
+} from 'react-native';
+import WebView from 'react-native-webview';
+
+interface ThreeDSWebViewProps {
+  url?: string;
+  onComplete: () => void;
+  returnURL: string;
+}
+
+export const ThreeDSWebView: React.FC<ThreeDSWebViewProps> = ({
+  url,
+  onComplete,
+  returnURL,
+}) => {
+  const lastRedirectUrl = useRef('');
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    setIsLoading(true);
+  }, [url]);
+
+  const renderLoader = () => (
+    <View style={styles.loaderContainer}>
+      <ActivityIndicator size="large" color="#0277FF" />
+    </View>
+  );
+  return (
+    <Modal visible={!!url} animationType="slide" onRequestClose={onComplete}>
+      <SafeAreaView style={styles.safeArea}>
+        <View style={styles.container}>
+          {/*<TouchableOpacity style={styles.closeButton} onPress={onComplete}>*/}
+          {/*  <X size={22} color="#000" />*/}
+          {/*</TouchableOpacity>*/}
+          <WebView
+            source={{ uri: url }}
+            style={styles.webview}
+            onError={(e) => {
+              if ((e?.nativeEvent?.url || '').includes(returnURL)) {
+                setIsLoading(true);
+              } else {
+                setIsLoading(false);
+              }
+            }}
+            onLoadStart={(e) => {
+              if ((e?.nativeEvent?.url || '').includes(returnURL)) {
+                setIsLoading(true);
+              } else {
+                setIsLoading(false);
+              }
+            }}
+            onShouldStartLoadWithRequest={(e) => {
+              return !(e?.nativeEvent?.url || '').includes(returnURL);
+            }}
+            onNavigationStateChange={(navState) => {
+              if (
+                url &&
+                navState.url.includes(returnURL) &&
+                !navState.loading &&
+                lastRedirectUrl.current !== url
+              ) {
+                lastRedirectUrl.current = url;
+                onComplete();
+              }
+            }}
+          />
+          {isLoading && renderLoader()}
+        </View>
+      </SafeAreaView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  container: {
+    position: 'relative',
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+  webview: {
+    flex: 1,
+  },
+  loaderContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255, 255, 255,1)',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 10,
+    right: 10,
+    zIndex: 10,
+  },
+});

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

@@ -0,0 +1,141 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { ProcessButton } from '@components/Button/ProcessButton';
+import { NewCardForm } from '@components/CardForm';
+import CardFormSkeleton from '@components/Skeleton/CardFormSkeleton';
+import { DEFAULT_PAYMENT_CONTAINER } from '@ui/styles/payment';
+import { buildBaseStyleText } from '@shared/utils/styleUtils';
+import useTonderContext from '@ui/providers/TonderProvider/hook';
+import { SDKType } from '@types';
+
+export interface ITonderEnrollmentProps {}
+const TonderEnrollment: React.FC<ITonderEnrollmentProps> = () => {
+  const { sdk, state } = useTonderContext<SDKType.ENROLLMENT>();
+
+  const onSave = async () => {
+    try {
+      await sdk.saveCustomerCard();
+    } catch (error) {
+      console.error('[TonderEnrollment | onSave | ERROR]', error);
+    }
+  };
+
+  if (!state?.isCreating && !state?.isCreated) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      {state?.isCreating && <CardFormSkeleton message={state?.message} />}
+      <View
+        style={{
+          ...DEFAULT_PAYMENT_CONTAINER.base,
+          ...(state?.isCreating ? { minHeight: 210 } : {}),
+          ...(state?.customization?.styles?.sdkCard?.base || {}),
+        }}
+      >
+        {state?.isCreated && (
+          <NewCardForm
+            showSaveOption={false}
+            saveCard={false}
+            onSaveCardChange={() => {}}
+            style={state?.customization?.styles?.cardForm}
+            labels={state?.customization?.labels}
+            placeholders={state?.customization?.placeholders}
+          />
+        )}
+        {state?.customization?.showMessages &&
+          state?.message &&
+          state?.message !== '' &&
+          state?.error && (
+            <View
+              style={{
+                ...styles.messageContainer,
+                ...(state?.customization?.styles?.errorMessage?.base || {}),
+              }}
+            >
+              <Text
+                style={{
+                  ...styles.errorText,
+                  ...buildBaseStyleText(
+                    state?.customization?.styles?.errorMessage
+                  ),
+                }}
+              >
+                {state?.message}
+              </Text>
+            </View>
+          )}
+
+        {state?.customization?.showMessages &&
+          state?.message &&
+          state?.message !== '' &&
+          !state?.error && (
+            <View
+              style={{
+                ...styles.messageContainer,
+                ...(state?.customization?.styles?.successMessage?.base || {}),
+              }}
+            >
+              <Text
+                style={{
+                  ...styles.successText,
+                  ...buildBaseStyleText(
+                    state?.customization?.styles?.successMessage
+                  ),
+                }}
+              >
+                {state?.message}
+              </Text>
+            </View>
+          )}
+
+        {state?.customization?.saveButton?.show && (
+          <ProcessButton
+            text={state?.customization?.saveButton?.text || 'Pagar'}
+            style={state?.customization?.styles?.paymentButton}
+            onPress={onSave}
+            isLoading={state?.isProcessing}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+  },
+  newCardSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e2e8f0',
+  },
+  cardImage: {
+    width: 32,
+    height: 20,
+    marginLeft: 15,
+  },
+  newCardText: {
+    fontSize: 12,
+    color: '#1D1D1D',
+    marginLeft: 15,
+  },
+  messageContainer: {
+    paddingHorizontal: 20,
+  },
+  errorText: {
+    color: 'red',
+    fontSize: 12,
+  },
+  successText: {
+    color: '#3bc635',
+    fontSize: 12,
+  },
+});
+
+export default TonderEnrollment;