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

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

@@ -0,0 +1,243 @@
+import React, { useState } from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import SavedCardsList from '@components/SavedCardsList';
+import { ProcessButton } from '@components/Button/ProcessButton';
+import PaymentMethodsList from '@components/PaymentMethodsList';
+import { NewCardForm } from '@components/CardForm';
+import { RadioButton } from '@components/RadioButton';
+import { getCardType } from '@shared/catalog/cardBrandCatalog';
+import CardFormSkeleton from '@components/Skeleton/CardFormSkeleton';
+import { DEFAULT_PAYMENT_CONTAINER } from '@ui/styles/payment';
+import { buildBaseStyleText } from '@shared/utils/styleUtils';
+import { toCurrency } from '@shared/utils/numberUtils';
+import useTonderContext from '@ui/providers/TonderProvider/hook';
+import { SDKType } from '@types';
+
+export interface ITonderPaymentProps {}
+const TonderPayment: React.FC<ITonderPaymentProps> = () => {
+  const { uiWrapper, sdk, state } = useTonderContext<SDKType.INLINE>();
+  const [deletingCards, setDelitingCards] = useState<string[]>([]);
+
+  const handleMethodSelect = (methodId: string, type: string) => {
+    const value =
+      type === 'card'
+        ? methodId
+        : type === 'payment_method'
+          ? state.uiData?.paymentMethods.find((it) => it.id === methodId)
+              ?.payment_method || ''
+          : '';
+    uiWrapper.updateMethod(type, value);
+  };
+
+  const handleSaveCardChange = (value: boolean) => {
+    uiWrapper.updateSaveCard(value);
+  };
+
+  const onDeleteCard = async (cardId: string) => {
+    try {
+      setDelitingCards((prev) => [...prev, ...[cardId]]);
+      await uiWrapper.removeCustomerCard(cardId);
+      setDelitingCards((prev) => {
+        return prev.filter((it) => it !== cardId);
+      });
+    } catch (error) {
+      setDelitingCards((prev) => {
+        return prev.filter((it) => it !== cardId);
+      });
+      console.error('[TonderPayment | onDeleteCard | ERROR]', error);
+    }
+  };
+
+  const onPayment = async () => {
+    try {
+      await sdk.payment();
+    } catch (error) {
+      console.error('[TonderPayment | onPayment | 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?.customization?.saveCards?.showSaved && (
+          <SavedCardsList
+            style={state?.customization?.styles?.savedCards}
+            cards={state.uiData?.cards}
+            selectedMethod={state?.uiData?.card || ''}
+            onMethodSelect={(methodId) => {
+              handleMethodSelect(methodId, 'card');
+            }}
+            onDeleteCard={onDeleteCard}
+            deletingCards={deletingCards}
+            showDeleteButton={state?.customization?.saveCards?.showDeleteOption}
+          />
+        )}
+
+        {state?.customization?.cardForm?.show && (
+          <View
+            style={{
+              ...styles.newCardSection,
+              ...state?.customization?.styles?.paymentRadio?.base,
+            }}
+          >
+            <RadioButton
+              value="new"
+              selected={state?.uiData?.selectedMethod === 'new'}
+              onSelect={() => handleMethodSelect('new', '')}
+              style={{
+                base: state?.customization?.styles?.paymentRadio?.radioBase,
+                selected:
+                  state?.customization?.styles?.paymentRadio?.radioSelected,
+                inner: state?.customization?.styles?.paymentRadio?.radioInner,
+              }}
+            />
+            <Image
+              source={{ uri: getCardType('') }}
+              style={{
+                ...styles.cardImage,
+                ...(state?.customization?.styles?.paymentRadio?.cardIcon || {}),
+              }}
+            />
+            <Text
+              style={{
+                ...styles.newCardText,
+                ...buildBaseStyleText(
+                  state?.customization?.styles?.paymentRadio
+                ),
+              }}
+            >
+              Pagar con tarjeta
+            </Text>
+          </View>
+        )}
+
+        {state?.uiData?.selectedMethod === 'new' &&
+          state?.isCreated &&
+          state?.customization?.cardForm?.show && (
+            <NewCardForm
+              showSaveOption={
+                state?.customization?.saveCards?.showSaveCardOption
+              }
+              saveCard={state?.uiData?.saveCard || false}
+              onSaveCardChange={handleSaveCardChange}
+              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?.paymentMethods?.show && (
+          <PaymentMethodsList
+            methods={state?.uiData.paymentMethods}
+            selectedMethod={state?.uiData?.payment_method || ''}
+            onMethodSelect={(methodId) => {
+              handleMethodSelect(methodId, 'payment_method');
+            }}
+            style={state?.customization?.styles?.paymentMethods}
+          />
+        )}
+
+        {state?.customization?.paymentButton?.show && (
+          <ProcessButton
+            text={`${state?.customization?.paymentButton?.text || 'Pagar'} ${state?.paymentData.cart.total && state?.customization?.paymentButton?.showAmount ? toCurrency(state?.paymentData.cart.total) : ''}`}
+            style={state?.customization?.styles?.paymentButton}
+            onPress={onPayment}
+            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 TonderPayment;

package/src/ui/providers/InnerProvider/index.tsx

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import React from 'react';
+import { ITonderContext, SDKType } from '@types';
+import { tonderContext } from '@ui/providers/TonderProvider/context';
+
+interface InnerProviderProps {
+  children: React.ReactNode;
+  container: any;
+  contextValue: ITonderContext<SDKType>;
+}
+
+const InnerProvider = ({ children, contextValue }: InnerProviderProps) => {
+  return (
+    <tonderContext.Provider
+      value={{
+        ...contextValue,
+      }}
+    >
+      {children}
+    </tonderContext.Provider>
+  );
+};
+
+export default InnerProvider;

package/src/ui/providers/SkyflowContainerWrapper/index.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import { useCollectContainer } from 'skyflow-react-native';
+import InnerProvider from '@ui/providers/InnerProvider';
+import type { ITonderContext } from '@types';
+import { SDKType } from '@types';
+
+interface SkyflowContainerWrapperProps {
+  children: React.ReactNode;
+  contextValue: ITonderContext<SDKType>;
+}
+
+const SkyflowContainerWrapper = ({
+  children,
+  contextValue,
+}: SkyflowContainerWrapperProps) => {
+  const container = useCollectContainer();
+
+  useEffect(() => {
+    if (contextValue?.state?.isCreated && container) {
+      contextValue.uiWrapper.setSkyFlowContainer(container);
+    }
+  }, [
+    contextValue?.state?.isCreated,
+    contextValue.sdk,
+    contextValue.uiWrapper,
+  ]);
+
+  return (
+    <InnerProvider container={container} contextValue={contextValue}>
+      {children}
+    </InnerProvider>
+  );
+};
+
+export default SkyflowContainerWrapper;

package/src/ui/providers/TonderProvider/context.tsx

@@ -0,0 +1,11 @@
+// @ts-nocheck
+import React from 'react';
+import type { ITonderContext, SDKInstance } from '@types';
+import { SDKType } from '@types';
+import { IUIWrapper } from '@ui/providers/TonderProvider/uiWrapper';
+
+export const tonderContext = React.createContext<ITonderContext<SDKType>>({
+  sdk: {} as SDKInstance<SDKType>,
+  state: {},
+  uiWrapper: {} as IUIWrapper,
+});

package/src/ui/providers/TonderProvider/hook.ts

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import { useContext } from 'react';
+import { ITonderContext, SDKType } from '@types';
+import { tonderContext } from '@ui/providers/TonderProvider/context';
+
+const useTonderContext = <T extends SDKType>(): ITonderContext<T> => {
+  return useContext(tonderContext);
+};
+
+export default useTonderContext;

package/src/ui/providers/TonderProvider/index.tsx

@@ -0,0 +1,110 @@
+// @ts-nocheck
+import React, { useEffect, useMemo, useState } from 'react';
+import Tonder from '@core/Tonder';
+import type { ISDKBaseConfig, SDKInstance } from '@types';
+import { SDKType } from '@types';
+import { SkyflowProvider } from 'skyflow-react-native';
+import SkyflowContainerWrapper from '@ui/providers/SkyflowContainerWrapper';
+import { ThreeDSWebView } from '@components/WebView/ThreeDSWebView';
+import { EnrollmentContainer } from '@core/EnrollmentContainer';
+import PaymentLiteContainer from '@core/PaymentLiteContainer';
+import PaymentInlineContainer from '@core/PaymentInlineContainer';
+import uiWrapper from '@ui/providers/TonderProvider/uiWrapper';
+import { tonderContext } from '@ui/providers/TonderProvider/context';
+
+export interface ITonderProvider {
+  config: ISDKBaseConfig;
+}
+
+const TonderProvider: React.FC<React.PropsWithChildren<ITonderProvider>> = <
+  T extends SDKType,
+>({
+  children,
+  config,
+}) => {
+  const [skyflowConfig, setSkyflowConfig] = useState<any | null>(null);
+  const [state, setState] = useState<Readonly<any>>(() => {});
+  const [threeDSConfig, setThreeDSConfig] = useState<{
+    url?: string;
+    onComplete?: () => void;
+    returnURL?: string;
+  }>({});
+
+  const tonder = useMemo(() => new Tonder(config), [config]);
+  const sdk: SDKInstance<T> = useMemo(() => {
+    if (config.type === SDKType.ENROLLMENT) {
+      return new EnrollmentContainer(
+        tonder,
+        setSkyflowConfig
+      ) as SDKInstance<T>;
+    }
+    if (config.type === SDKType.LITE) {
+      return new PaymentLiteContainer(
+        tonder,
+        setSkyflowConfig
+      ) as SDKInstance<T>;
+    }
+    return new PaymentInlineContainer(
+      tonder,
+      setSkyflowConfig
+    ) as SDKInstance<T>;
+  }, [tonder, setSkyflowConfig]);
+  const uiSDKWrapper = useMemo(() => uiWrapper(tonder), [tonder]);
+
+  useEffect(() => {
+    const unsubscribe = tonder.subscribe(() => {
+      setState(tonder.getState());
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [tonder]);
+
+  useEffect(() => {
+    if (!tonder) return;
+
+    const unsubscribeShow = tonder.on(
+      'show3DS',
+      ({ url, onComplete, returnURL }) => {
+        setThreeDSConfig({ url, onComplete, returnURL });
+      }
+    );
+    const unsubscribeHide = tonder.on('hide3DS', ({}) => {
+      setThreeDSConfig({ url: '' });
+    });
+
+    return () => {
+      unsubscribeShow();
+      unsubscribeHide();
+    };
+  }, [tonder]);
+
+  const contextValue = useMemo(
+    () => ({
+      sdk: sdk as SDKInstance<T>,
+      uiWrapper: uiSDKWrapper,
+      state,
+    }),
+    [sdk, state, uiSDKWrapper]
+  );
+
+  return (
+    <tonderContext.Provider value={contextValue}>
+      <SkyflowProvider config={skyflowConfig}>
+        <SkyflowContainerWrapper contextValue={contextValue}>
+          <ThreeDSWebView
+            url={threeDSConfig.url}
+            onComplete={() => {
+              threeDSConfig.onComplete?.();
+            }}
+            returnURL={threeDSConfig.returnURL!}
+          />
+          {children}
+        </SkyflowContainerWrapper>
+      </SkyflowProvider>
+    </tonderContext.Provider>
+  );
+};
+
+export default React.memo(TonderProvider);

package/src/ui/providers/TonderProvider/uiWrapper.ts

@@ -0,0 +1,67 @@
+import type Tonder from '@core/Tonder';
+import { executeCallback } from '@shared/utils/common';
+import { MESSAGES_EN } from '@shared/constants';
+
+export interface IUIWrapper {
+  removeCustomerCard: (cardId: string) => Promise<void>;
+  updateMethod: (method: string, value: string) => void;
+  updateSaveCard: (value: boolean) => void;
+  setSkyFlowContainer: (value: any) => void;
+}
+
+const uiWrapper = (tonder: Tonder): IUIWrapper => ({
+  removeCustomerCard: async (cardId: string) => {
+    const callbacks = tonder.getState().callbacks;
+    try {
+      await executeCallback({
+        callbacks,
+        callback: 'beforeDeleteCard',
+        throwError: true,
+      });
+
+      await tonder
+        .getService()
+        .card.removeCustomerCard(
+          tonder.getCustomerAuthToken(),
+          tonder.getSecureToken(),
+          cardId,
+          tonder.getBusinessPK()
+        );
+
+      tonder.updateUIState({
+        cards: tonder
+          .getState()
+          .uiData.cards.filter((card: any) => card.id !== cardId),
+      });
+      await executeCallback({
+        callbacks,
+        callback: 'onFinishDeleteCard',
+        data: { response: MESSAGES_EN.REMOVE_CARD },
+      });
+    } catch (error) {
+      await executeCallback({
+        callbacks,
+        callback: 'onFinishDeleteCard',
+        data: { error: error },
+      });
+    }
+  },
+  updateMethod: (method: string, value: string) => {
+    tonder.updateUIState({
+      ...(method === 'card'
+        ? { card: value }
+        : method === 'payment_method'
+          ? { paymentMethod: value }
+          : {}),
+      selectedMethod: method === '' ? 'new' : method,
+    });
+  },
+  updateSaveCard: (value: boolean) => {
+    tonder.updateUIState({ saveCard: value });
+  },
+  setSkyFlowContainer: (value: any) => {
+    tonder.setState({ skyflowContainer: value });
+  },
+});
+
+export default uiWrapper;

package/src/ui/styles/payment.ts

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+
+// TODO: CHECK INTER FAMILY
+const DEFAULT_INPUT_CONTAINER_STYLES = StyleSheet.create({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    flex: 1,
+    marginVertical: 5,
+  },
+});
+
+const DEFAULT_PAYMENT_CONTAINER = StyleSheet.create({
+  base: {
+    backgroundColor: '#F9F9F9',
+    borderWidth: 1,
+    borderColor: '#e3e3e3',
+    width: '100%',
+    marginBottom: 10,
+  },
+});
+export { DEFAULT_INPUT_CONTAINER_STYLES, DEFAULT_PAYMENT_CONTAINER };

package/src/ui/styles/skyflow.ts

@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native';
+
+// TODO: CHECK INTER FAMILY
+const DEFAULT_SKYFLOW_INPUT_STYLES = StyleSheet.create({
+  base: {
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+    fontSize: 12,
+    paddingVertical: 0,
+    paddingHorizontal: 5,
+    borderRadius: 5,
+    color: '#1d1d1d',
+    backgroundColor: 'white',
+    // fontFamily: 'Inter',
+  },
+  complete: {
+    color: '#4caf50',
+  },
+  invalid: {
+    borderWidth: 1,
+    borderColor: 'f44336',
+  },
+  empty: {},
+  focus: {},
+});
+
+const DEFAULT_SKYFLOW_lABEL_STYLES = {
+  base: {
+    fontSize: 12,
+    fontWeight: 500,
+    // fontFamily: 'Inter',
+  },
+};
+
+const DEFAULT_SKYFLOW_ERROR_TEXT_STYLES = StyleSheet.create({
+  base: {
+    fontWeight: 500,
+    color: '#f44336',
+    marginTop: 0,
+    paddingVertical: 0,
+    fontSize: 12,
+  },
+});
+
+const SKYFLOW_HIDDEN_ERROR_TEXT_STYLES = {
+  base: {
+    color: 'transparent',
+    display: 'none',
+    // fontFamily: 'Inter',
+  },
+};
+
+export {
+  DEFAULT_SKYFLOW_INPUT_STYLES,
+  DEFAULT_SKYFLOW_lABEL_STYLES,
+  DEFAULT_SKYFLOW_ERROR_TEXT_STYLES,
+  SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
+};