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

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

@@ -0,0 +1,95 @@
+// @ts-nocheck
+import React from 'react';
+import type { IElementStyle } from '@types';
+import {
+  DEFAULT_SKYFLOW_lABELS,
+  DEFAULT_SKYFLOW_PLACEHOLDERS,
+} from '@shared/constants/skyflow';
+import { StyleSheet, Text, View } from 'react-native';
+import type { StyleProp, TextStyle } from 'react-native';
+import {
+  DEFAULT_SKYFLOW_INPUT_STYLES,
+  DEFAULT_SKYFLOW_lABEL_STYLES,
+} from '@ui/styles/skyflow';
+import { DEFAULT_INPUT_CONTAINER_STYLES } from '@ui/styles/payment';
+import { CardExpirationMonthInput } from '@ui/components/Input/CardExpirationMonthInput';
+import { CardExpirationYearInput } from '@ui/components/Input/CardExpirationYearInput';
+
+export interface InputExpiryDateProps {
+  label?: string;
+  yearPlaceholder?: string;
+  monthPlaceholder?: string;
+  style?: IElementStyle;
+}
+export const CardExpirationDateInput: React.FC<InputExpiryDateProps> = ({
+  yearPlaceholder = DEFAULT_SKYFLOW_PLACEHOLDERS.expiryYearPlaceholder,
+  monthPlaceholder = DEFAULT_SKYFLOW_PLACEHOLDERS.expiryMonthPlaceholder,
+  label = DEFAULT_SKYFLOW_lABELS.expiryDateLabel,
+  style,
+}) => {
+  return (
+    <View style={styles.container}>
+      <Text
+        style={{
+          ...(DEFAULT_SKYFLOW_lABEL_STYLES.base as StyleProp<TextStyle>),
+          ...((style?.labelStyles?.base || {}) as StyleProp<TextStyle>),
+        }}
+      >
+        {label}
+      </Text>
+      <View style={styles.row}>
+        <CardExpirationMonthInput
+          label={''}
+          placeholder={monthPlaceholder}
+          style={{
+            ...({
+              ...style,
+              inputStyles: {
+                ...DEFAULT_SKYFLOW_INPUT_STYLES,
+                ...(style?.inputStyles || {}),
+                container: {
+                  ...DEFAULT_INPUT_CONTAINER_STYLES.base,
+                  ...{ marginVertical: 0 },
+                  ...(style?.inputStyles?.container || {}),
+                },
+              },
+            } as StyleProp<TextStyle>),
+          }}
+        />
+        <CardExpirationYearInput
+          label={''}
+          placeholder={yearPlaceholder}
+          style={{
+            ...({
+              ...style,
+              inputStyles: {
+                ...DEFAULT_SKYFLOW_INPUT_STYLES,
+                ...(style?.inputStyles || {}),
+                container: {
+                  ...DEFAULT_INPUT_CONTAINER_STYLES.base,
+                  ...{ marginVertical: 0 },
+                  ...(style?.inputStyles?.container || {}),
+                },
+              },
+            } as StyleProp<TextStyle>),
+          }}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 2,
+    marginVertical: 5,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: 10,
+  },
+  inputContainerCustom: {
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import type { InputProps } from '@types';
+import { ExpirationMonthElement } from 'skyflow-react-native';
+import { getErrorField, regexMatchRule } from '@shared/constants/skyflow';
+import {
+  DEFAULT_SKYFLOW_lABELS,
+  DEFAULT_SKYFLOW_PLACEHOLDERS,
+} from '@shared/constants/skyflow';
+import { Text, View } from 'react-native';
+import { DEFAULT_INPUT_CONTAINER_STYLES } from '@ui/styles/payment';
+import {
+  DEFAULT_SKYFLOW_ERROR_TEXT_STYLES,
+  DEFAULT_SKYFLOW_INPUT_STYLES,
+  DEFAULT_SKYFLOW_lABEL_STYLES,
+  SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
+} from '@ui/styles/skyflow';
+import useTonderContext from '@ui/providers/TonderProvider/hook';
+
+export const CardExpirationMonthInput: React.FC<InputProps> = ({
+  placeholder = DEFAULT_SKYFLOW_PLACEHOLDERS.expiryMonthPlaceholder,
+  label = DEFAULT_SKYFLOW_lABELS.expiryMonthLabel,
+  style,
+}) => {
+  const { state } = useTonderContext();
+  const [errorText, setErrorText] = useState('');
+
+  return (
+    <>
+      {state?.skyflowContainer && state?.isCreated && !state?.isCreating && (
+        <View
+          style={{
+            ...(style?.inputStyles?.container
+              ? { ...style.inputStyles.container }
+              : DEFAULT_INPUT_CONTAINER_STYLES.base),
+          }}
+        >
+          <ExpirationMonthElement
+            container={state.skyflowContainer}
+            table="cards"
+            column="expiration_month"
+            options={{}}
+            placeholder={placeholder}
+            label={label}
+            validations={[regexMatchRule]}
+            inputStyles={{
+              ...DEFAULT_SKYFLOW_INPUT_STYLES,
+              ...(style?.inputStyles
+                ? {
+                    ...style?.inputStyles,
+                    base: {
+                      ...DEFAULT_SKYFLOW_INPUT_STYLES.base,
+                      ...style?.inputStyles.base,
+                    },
+                  }
+                : {}),
+            }}
+            errorTextStyles={{
+              ...SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
+            }}
+            labelStyles={{
+              ...DEFAULT_SKYFLOW_lABEL_STYLES,
+              ...(style?.labelStyles
+                ? {
+                    ...style?.labelStyles,
+                    base: {
+                      ...DEFAULT_SKYFLOW_lABEL_STYLES.base,
+                      ...style?.labelStyles.base,
+                    },
+                  }
+                : {}),
+            }}
+            onChange={() => {
+              setErrorText('');
+            }}
+            // onFocus={props.onFocus}
+            onBlur={(e) => {
+              setErrorText(getErrorField(e, label));
+            }}
+            // onReady={props.onReady}
+          />
+          {errorText && (
+            <Text style={{ ...DEFAULT_SKYFLOW_ERROR_TEXT_STYLES.base }}>
+              {errorText}
+            </Text>
+          )}
+        </View>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import type { InputProps } from '@types';
+import { ExpirationYearElement } from 'skyflow-react-native';
+import {
+  getErrorField,
+  regexMatchRule,
+  DEFAULT_SKYFLOW_lABELS,
+  DEFAULT_SKYFLOW_PLACEHOLDERS,
+} from '@shared/constants/skyflow';
+import { Text, View } from 'react-native';
+import { DEFAULT_INPUT_CONTAINER_STYLES } from '@ui/styles/payment';
+import {
+  DEFAULT_SKYFLOW_ERROR_TEXT_STYLES,
+  DEFAULT_SKYFLOW_INPUT_STYLES,
+  DEFAULT_SKYFLOW_lABEL_STYLES,
+  SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
+} from '@ui/styles/skyflow';
+import useTonderContext from '@ui/providers/TonderProvider/hook';
+
+export const CardExpirationYearInput: React.FC<InputProps> = ({
+  placeholder = DEFAULT_SKYFLOW_PLACEHOLDERS.expiryYearPlaceholder,
+  label = DEFAULT_SKYFLOW_lABELS.expiryYearLabel,
+  style,
+}) => {
+  const { state } = useTonderContext();
+  const [errorText, setErrorText] = useState('');
+
+  return (
+    <>
+      {state?.skyflowContainer && state?.isCreated && !state?.isCreating && (
+        <View
+          style={{
+            ...(style?.inputStyles?.container
+              ? { ...style.inputStyles.container }
+              : DEFAULT_INPUT_CONTAINER_STYLES.base),
+          }}
+        >
+          <ExpirationYearElement
+            container={state.skyflowContainer}
+            table="cards"
+            column="expiration_year"
+            options={{}}
+            placeholder={placeholder}
+            label={label}
+            validations={[regexMatchRule]}
+            inputStyles={{
+              ...DEFAULT_SKYFLOW_INPUT_STYLES,
+              ...(style?.inputStyles
+                ? {
+                    ...style?.inputStyles,
+                    base: {
+                      ...DEFAULT_SKYFLOW_INPUT_STYLES.base,
+                      ...style?.inputStyles.base,
+                    },
+                  }
+                : {}),
+            }}
+            errorTextStyles={{
+              ...SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
+            }}
+            labelStyles={{
+              ...DEFAULT_SKYFLOW_lABEL_STYLES,
+              ...(style?.labelStyles
+                ? {
+                    ...style?.labelStyles,
+                    base: {
+                      ...DEFAULT_SKYFLOW_lABEL_STYLES.base,
+                      ...style?.labelStyles.base,
+                    },
+                  }
+                : {}),
+            }}
+            onChange={() => {
+              setErrorText('');
+            }}
+            // onFocus={props.onFocus}
+            onBlur={(e) => {
+              setErrorText(getErrorField(e, label));
+            }}
+            // onReady={props.onReady}
+          />
+          {errorText && (
+            <Text style={{ ...DEFAULT_SKYFLOW_ERROR_TEXT_STYLES.base }}>
+              {errorText}
+            </Text>
+          )}
+        </View>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import type { InputProps } from '@types';
+import {
+  getErrorField,
+  lengthMatchRule,
+  regexMatchRule,
+  DEFAULT_SKYFLOW_lABELS,
+  DEFAULT_SKYFLOW_PLACEHOLDERS,
+} from '@shared/constants/skyflow';
+import { Text, View } from 'react-native';
+import { CardHolderNameElement } from 'skyflow-react-native';
+import {
+  DEFAULT_SKYFLOW_ERROR_TEXT_STYLES,
+  DEFAULT_SKYFLOW_INPUT_STYLES,
+  DEFAULT_SKYFLOW_lABEL_STYLES,
+  SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
+} from '@ui/styles/skyflow';
+import { DEFAULT_INPUT_CONTAINER_STYLES } from '@ui/styles/payment';
+import useTonderContext from '@ui/providers/TonderProvider/hook';
+
+export const CardHolderInput: React.FC<InputProps> = ({
+  placeholder = DEFAULT_SKYFLOW_PLACEHOLDERS.namePlaceholder,
+  label = DEFAULT_SKYFLOW_lABELS.nameLabel,
+  style,
+}) => {
+  const { state } = useTonderContext();
+
+  const [errorText, setErrorText] = useState('');
+  return (
+    <>
+      {state?.skyflowContainer && state?.isCreated && !state?.isCreating && (
+        <View
+          style={{
+            ...(style?.inputStyles?.container
+              ? { ...style.inputStyles.container }
+              : DEFAULT_INPUT_CONTAINER_STYLES.base),
+          }}
+        >
+          <CardHolderNameElement
+            container={state.skyflowContainer}
+            table="cards"
+            column="cardholder_name"
+            validations={[lengthMatchRule, regexMatchRule]}
+            placeholder={placeholder}
+            label={label}
+            inputStyles={{
+              ...DEFAULT_SKYFLOW_INPUT_STYLES,
+              ...(style?.inputStyles
+                ? {
+                    ...style?.inputStyles,
+                    base: {
+                      ...DEFAULT_SKYFLOW_INPUT_STYLES.base,
+                      ...style?.inputStyles.base,
+                    },
+                  }
+                : {}),
+            }}
+            errorTextStyles={{
+              ...SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
+            }}
+            labelStyles={{
+              ...DEFAULT_SKYFLOW_lABEL_STYLES,
+              ...(style?.labelStyles
+                ? {
+                    ...style?.labelStyles,
+                    base: {
+                      ...DEFAULT_SKYFLOW_lABEL_STYLES.base,
+                      ...style?.labelStyles.base,
+                    },
+                  }
+                : {}),
+            }}
+            onChange={() => {
+              setErrorText('');
+            }}
+            // onFocus={props.onFocus}
+            onBlur={(e) => {
+              setErrorText(getErrorField(e, label));
+            }}
+            // onReady={props.onReady}
+          />
+          {errorText && (
+            <Text style={{ ...DEFAULT_SKYFLOW_ERROR_TEXT_STYLES.base }}>
+              {errorText}
+            </Text>
+          )}
+        </View>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import type { InputProps } from '@types';
+import { CardNumberElement } from 'skyflow-react-native';
+import {
+  getErrorField,
+  regexMatchRule,
+  DEFAULT_SKYFLOW_lABELS,
+  DEFAULT_SKYFLOW_PLACEHOLDERS,
+} from '@shared/constants/skyflow';
+import { Text, View } from 'react-native';
+import { DEFAULT_INPUT_CONTAINER_STYLES } from '@ui/styles/payment';
+import {
+  DEFAULT_SKYFLOW_ERROR_TEXT_STYLES,
+  DEFAULT_SKYFLOW_INPUT_STYLES,
+  DEFAULT_SKYFLOW_lABEL_STYLES,
+  SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
+} from '@ui/styles/skyflow';
+import useTonderContext from '@ui/providers/TonderProvider/hook';
+
+export const CardNumberInput: React.FC<InputProps> = ({
+  placeholder = DEFAULT_SKYFLOW_PLACEHOLDERS.cardPlaceholder,
+  label = DEFAULT_SKYFLOW_lABELS.cardLabel,
+  style,
+}) => {
+  const { state } = useTonderContext();
+  const [errorText, setErrorText] = useState('');
+
+  return (
+    <>
+      {state?.skyflowContainer && state?.isCreated && !state?.isCreating && (
+        <View
+          style={{
+            ...(style?.inputStyles?.container
+              ? { ...style.inputStyles.container }
+              : DEFAULT_INPUT_CONTAINER_STYLES.base),
+          }}
+        >
+          <CardNumberElement
+            container={state.skyflowContainer}
+            table="cards"
+            column="card_number"
+            placeholder={placeholder}
+            label={label}
+            validations={[regexMatchRule]}
+            inputStyles={{
+              ...DEFAULT_SKYFLOW_INPUT_STYLES,
+              ...(style?.inputStyles
+                ? {
+                    ...style?.inputStyles,
+                    base: {
+                      ...DEFAULT_SKYFLOW_INPUT_STYLES.base,
+                      ...style?.inputStyles.base,
+                    },
+                  }
+                : {}),
+            }}
+            errorTextStyles={{
+              ...SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
+            }}
+            labelStyles={{
+              ...DEFAULT_SKYFLOW_lABEL_STYLES,
+              ...(style?.labelStyles
+                ? {
+                    ...style?.labelStyles,
+                    base: {
+                      ...DEFAULT_SKYFLOW_lABEL_STYLES.base,
+                      ...style?.labelStyles.base,
+                    },
+                  }
+                : {}),
+            }}
+            onChange={() => {
+              setErrorText('');
+            }}
+            // onFocus={props.onFocus}
+            onBlur={(e) => {
+              setErrorText(getErrorField(e, label));
+            }}
+            // onReady={props.onReady}
+          />
+          {errorText && (
+            <Text style={{ ...DEFAULT_SKYFLOW_ERROR_TEXT_STYLES.base }}>
+              {errorText}
+            </Text>
+          )}
+        </View>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import { View, StyleSheet, Text, Image, ScrollView } from 'react-native';
+import type { IPaymentMethod, StylesSelectVariant } from '@types';
+import { getPaymentMethodDetails } from '@shared/catalog/paymentMethodsCatalog';
+import { RadioButton } from '@components/RadioButton';
+import { buildBaseStyleText } from '@shared/utils/styleUtils';
+
+interface PaymentMethodsListProps {
+  methods: IPaymentMethod[];
+  selectedMethod: string;
+  onMethodSelect: (methodId: string) => void;
+  style?: StylesSelectVariant;
+}
+
+const PaymentMethodsList: React.FC<PaymentMethodsListProps> = ({
+  methods,
+  selectedMethod,
+  onMethodSelect,
+  style,
+}) => {
+  if (!methods.length) return null;
+
+  return (
+    <ScrollView style={{ ...styles.container, ...(style?.base || {}) }}>
+      {methods.map((method) => {
+        const details = getPaymentMethodDetails(method.payment_method);
+        return (
+          <View key={method.id} style={styles.methodItem}>
+            <RadioButton
+              style={{
+                base: style?.radioBase,
+                selected: style?.radioSelected,
+                inner: style?.radioInner,
+              }}
+              value={method.id}
+              selected={selectedMethod === method.id}
+              onSelect={() => onMethodSelect(method.id)}
+            />
+            <View style={styles.methodIconContainer}>
+              <View style={styles.methodIconBorder} />
+              <Image
+                source={{ uri: details.icon }}
+                style={{ ...styles.methodIcon, ...(style?.cardIcon || {}) }}
+                resizeMode="contain"
+              />
+            </View>
+            <Text
+              style={{
+                ...styles.methodName,
+                ...buildBaseStyleText(style),
+              }}
+            >
+              {details.label}
+            </Text>
+          </View>
+        );
+      })}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 0,
+  },
+  methodItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 5,
+    paddingHorizontal: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e2e8f0',
+  },
+  methodIconContainer: {
+    width: 25,
+    height: 25,
+    marginLeft: 15,
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  methodIcon: {
+    width: '100%',
+    height: '100%',
+  },
+  methodIconBorder: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: 1,
+    borderColor: '#bababa36',
+    borderRadius: 4,
+  },
+  methodName: {
+    fontSize: 12,
+    color: '#1D1D1D',
+    marginLeft: 10,
+  },
+});
+
+export default PaymentMethodsList;

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

@@ -0,0 +1,57 @@
+// RadioButton.tsx
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import type { StylesBaseVariant } from '@types';
+
+interface RadioButtonProps {
+  value: string;
+  selected: boolean;
+  onSelect: () => void;
+  style?: StylesBaseVariant & {
+    selected?: Record<string, any>;
+    inner?: Record<string, any>;
+  };
+}
+
+export const RadioButton: React.FC<RadioButtonProps> = ({
+  selected,
+  onSelect,
+  style,
+}) => (
+  <TouchableOpacity onPress={onSelect}>
+    <View
+      style={{
+        ...styles.radio,
+        ...(style?.base || {}),
+        ...(selected
+          ? { ...styles.radioSelected, ...(style?.selected || {}) }
+          : {}),
+      }}
+    >
+      {selected && (
+        <View style={{ ...styles.radioInner, ...(style?.inner || {}) }} />
+      )}
+    </View>
+  </TouchableOpacity>
+);
+
+const styles = StyleSheet.create({
+  radio: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#bababa',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  radioSelected: {
+    borderColor: '#3bc635',
+  },
+  radioInner: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#3bc635',
+  },
+});