@tonder.io/rn-sdk 0.1.10 → 0.1.11

package/src/shared/catalog/paymentMethodsCatalog.ts

@@ -1,3 +1,4 @@
+import { getStaticAssetsUrlByMode } from '../constants/environments';
 import { PAYMENT_METHODS } from '../constants/paymentMethods';
 import { clearSpace } from '../utils/stringUtils';
 
@@ -6,263 +7,268 @@ const PAYMENT_METHODS_CATALOG: {
 } = {
   [PAYMENT_METHODS.SORIANA]: {
     label: 'Soriana',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/soriana.png',
+    icon: '/payment_methods/soriana.png',
   },
   [PAYMENT_METHODS.OXXO]: {
     label: 'Oxxo',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/oxxo.png',
+    icon: '/payment_methods/oxxo.png',
   },
   [PAYMENT_METHODS.CODI]: {
     label: 'CoDi',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/codi.png',
+    icon: '/payment_methods/codi.png',
   },
   [PAYMENT_METHODS.MERCADOPAGO]: {
     label: 'Mercado Pago',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/mercadopago.png',
+    icon: '/payment_methods/mercadopago.png',
   },
   [PAYMENT_METHODS.OXXOPAY]: {
     label: 'Oxxo Pay',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/oxxopay.png',
+    icon: '/payment_methods/oxxopay.png',
   },
   [PAYMENT_METHODS.SPEI]: {
     label: 'SPEI',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/spei.png',
+    icon: '/payment_methods/spei.png',
   },
   [PAYMENT_METHODS.PAYPAL]: {
     label: 'Paypal',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/paypal.png',
+    icon: '/payment_methods/paypal.png',
   },
   [PAYMENT_METHODS.COMERCIALMEXICANA]: {
     label: 'Comercial Mexicana',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/comercial_exicana.png',
+    icon: '/payment_methods/comercial_exicana.png',
   },
   [PAYMENT_METHODS.BANCOMER]: {
     label: 'Bancomer',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/bancomer.png',
+    icon: '/payment_methods/bancomer.png',
   },
   [PAYMENT_METHODS.WALMART]: {
     label: 'Walmart',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/walmart.png',
+    icon: '/payment_methods/walmart.png',
   },
   [PAYMENT_METHODS.BODEGA]: {
     label: 'Bodega Aurrera',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/bodega_aurrera.png',
+    icon: '/payment_methods/bodega_aurrera.png',
   },
   [PAYMENT_METHODS.SAMSCLUB]: {
     label: 'Sam´s Club',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/sams_club.png',
+    icon: '/payment_methods/sams_club.png',
   },
   [PAYMENT_METHODS.SUPERAMA]: {
     label: 'Superama',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/superama.png',
+    icon: '/payment_methods/superama.png',
   },
   [PAYMENT_METHODS.CALIMAX]: {
     label: 'Calimax',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/calimax.png',
+    icon: '/payment_methods/calimax.png',
   },
   [PAYMENT_METHODS.EXTRA]: {
     label: 'Tiendas Extra',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/tiendas_extra.png',
+    icon: '/payment_methods/tiendas_extra.png',
   },
   [PAYMENT_METHODS.CIRCULOK]: {
     label: 'Círculo K',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/circulo_k.png',
+    icon: '/payment_methods/circulo_k.png',
   },
   [PAYMENT_METHODS.SEVEN11]: {
     label: '7 Eleven',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/7_eleven.png',
+    icon: '/payment_methods/7_eleven.png',
   },
   [PAYMENT_METHODS.TELECOMM]: {
     label: 'Telecomm',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/telecomm.png',
+    icon: '/payment_methods/telecomm.png',
   },
   [PAYMENT_METHODS.BANORTE]: {
     label: 'Banorte',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/banorte.png',
+    icon: '/payment_methods/banorte.png',
   },
   [PAYMENT_METHODS.BENAVIDES]: {
     label: 'Farmacias Benavides',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_benavides.png',
+    icon: '/payment_methods/farmacias_benavides.png',
   },
   [PAYMENT_METHODS.DELAHORRO]: {
     label: 'Farmacias del Ahorro',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_ahorro.png',
+    icon: '/payment_methods/farmacias_ahorro.png',
   },
   [PAYMENT_METHODS.ELASTURIANO]: {
     label: 'El Asturiano',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/asturiano.png',
+    icon: '/payment_methods/asturiano.png',
   },
   [PAYMENT_METHODS.WALDOS]: {
     label: 'Waldos',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/waldos.png',
+    icon: '/payment_methods/waldos.png',
   },
   [PAYMENT_METHODS.ALSUPER]: {
     label: 'Alsuper',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/al_super.png',
+    icon: '/payment_methods/al_super.png',
   },
   [PAYMENT_METHODS.KIOSKO]: {
     label: 'Kiosko',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/kiosko.png',
+    icon: '/payment_methods/kiosko.png',
   },
   [PAYMENT_METHODS.STAMARIA]: {
     label: 'Farmacias Santa María',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_santa_maria.png',
+    icon: '/payment_methods/farmacias_santa_maria.png',
   },
   [PAYMENT_METHODS.LAMASBARATA]: {
     label: 'Farmacias la más barata',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_barata.png',
+    icon: '/payment_methods/farmacias_barata.png',
   },
   [PAYMENT_METHODS.FARMROMA]: {
     label: 'Farmacias Roma',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_roma.png',
+    icon: '/payment_methods/farmacias_roma.png',
   },
   [PAYMENT_METHODS.FARMUNION]: {
     label: 'Pago en Farmacias Unión',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_union.png',
+    icon: '/payment_methods/farmacias_union.png',
   },
   [PAYMENT_METHODS.FARMATODO]: {
     label: 'Pago en Farmacias Farmatodo',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_farmatodo.png	',
+    icon: '/payment_methods/farmacias_farmatodo.png	',
   },
   [PAYMENT_METHODS.SFDEASIS]: {
     label: 'Pago en Farmacias San Francisco de Asís',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_san_francisco.png',
+    icon: '/payment_methods/farmacias_san_francisco.png',
   },
   [PAYMENT_METHODS.FARM911]: {
     label: 'Farmacias 911',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.FARMECONOMICAS]: {
     label: 'Farmacias Economicas',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.FARMMEDICITY]: {
     label: 'Farmacias Medicity',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.RIANXEIRA]: {
     label: 'Rianxeira',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.WESTERNUNION]: {
     label: 'Western Union',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.ZONAPAGO]: {
     label: 'Zona Pago',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.CAJALOSANDES]: {
     label: 'Caja Los Andes',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.CAJAPAITA]: {
     label: 'Caja Paita',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.CAJASANTA]: {
     label: 'Caja Santa',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.CAJASULLANA]: {
     label: 'Caja Sullana',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.CAJATRUJILLO]: {
     label: 'Caja Trujillo',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.EDPYME]: {
     label: 'Edpyme',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.KASNET]: {
     label: 'KasNet',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.NORANDINO]: {
     label: 'Norandino',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.QAPAQ]: {
     label: 'Qapaq',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.RAIZ]: {
     label: 'Raiz',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.PAYSER]: {
     label: 'Paysera',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.WUNION]: {
     label: 'Western Union',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.BANCOCONTINENTAL]: {
     label: 'Banco Continental',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.GMONEY]: {
     label: 'Go money',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.GOPAY]: {
     label: 'Go pay',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.WU]: {
     label: 'Western Union',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.PUNTOSHEY]: {
     label: 'Puntoshey',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.AMPM]: {
     label: 'Ampm',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.JUMBOMARKET]: {
     label: 'Jumbomarket',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.SMELPUEBLO]: {
     label: 'Smelpueblo',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.BAM]: {
     label: 'Bam',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.REFACIL]: {
     label: 'Refacil',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.ACYVALORES]: {
     label: 'Acyvalores',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
   },
   [PAYMENT_METHODS.SAFETYPAYCASH]: {
     label: 'Paga en Efectivo',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/cash_apm_sp.png',
+    icon: '/payment_methods/cash_apm_sp.png',
   },
   [PAYMENT_METHODS.SAFETYPAYTRANSFER]: {
     label: 'Paga por Transferencia',
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/transfer_apm_sp.png',
+    icon: '/payment_methods/transfer_apm_sp.png',
   },
 };
 
 type PaymentMethodKey = keyof typeof PAYMENT_METHODS_CATALOG;
 
 export const getPaymentMethodDetails = (
-  scheme_data: string
+  scheme_data: string,
+  mode: string
 ): { label: string; icon: string } => {
   const scheme: PaymentMethodKey = clearSpace(scheme_data.toUpperCase());
   const _default = {
-    icon: 'https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png',
+    icon: '/payment_methods/store.png',
     label: '',
   };
-  return PAYMENT_METHODS_CATALOG[scheme] || _default;
+  const details = PAYMENT_METHODS_CATALOG[scheme] || _default;
+  return {
+    ...details,
+    icon: `${getStaticAssetsUrlByMode(mode)}${details.icon}`,
+  };
 };

package/src/shared/constants/environments.ts

@@ -14,4 +14,15 @@ const getPayFlowLoadingUrlByMode = (mode: string) => {
   return 'https://dev-payflow.tonder.io/loading';
 };
 
-export { TONDER_URL_BY_MODE, getPayFlowLoadingUrlByMode };
+const getStaticAssetsUrlByMode = (mode: string) => {
+  if (mode === 'production') {
+    return 'https://d35a75syrgujp0.cloudfront.net';
+  }
+  return 'https://static.staging.tonder.io';
+};
+
+export {
+  TONDER_URL_BY_MODE,
+  getPayFlowLoadingUrlByMode,
+  getStaticAssetsUrlByMode,
+};

package/src/shared/utils/paymentMethodUtils.ts

@@ -1,7 +1,7 @@
 import { getPaymentMethodDetails } from '../catalog/paymentMethodsCatalog';
 import { defaultTo, get } from './stringUtils';
 
-export const getPaymentMethodsWithDetails = (response) => {
+export const getPaymentMethodsWithDetails = (response, mode: string) => {
   return defaultTo(get(response, 'results'), [])
     .filter((pmItem) => pmItem.category.toLowerCase() !== 'cards')
     .map((pmItem) => {
@@ -10,7 +10,7 @@ export const getPaymentMethodsWithDetails = (response) => {
         payment_method: pmItem.payment_method,
         priority: pmItem.priority,
         category: pmItem.category,
-        ...getPaymentMethodDetails(pmItem.payment_method),
+        ...getPaymentMethodDetails(pmItem.payment_method, mode),
       };
     })
     .sort((a, b) => a.priority - b.priority);

package/src/types/common.ts

@@ -89,4 +89,5 @@ export interface ITonderContext<T extends SDKType> {
   uiWrapper: IUIWrapper;
   sdk: SDKInstance<T>;
   state: any;
+  mode: Environment;
 }

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

@@ -7,12 +7,17 @@ import {
   ScrollView,
   TouchableOpacity,
 } from 'react-native';
-import type { IPaymentMethod, StylesSelectVariant } from '../../../types';
+import type {
+  Environment,
+  IPaymentMethod,
+  StylesSelectVariant,
+} from '../../../types';
 import { getPaymentMethodDetails } from '../../../shared/catalog/paymentMethodsCatalog';
 import { RadioButton } from '../RadioButton';
 import { buildBaseStyleText } from '../../../shared/utils/styleUtils';
 
 interface PaymentMethodsListProps {
+  mode: Environment;
   methods: IPaymentMethod[];
   selectedMethod: string;
   onMethodSelect: (methodId: string) => void;
@@ -20,6 +25,7 @@ interface PaymentMethodsListProps {
 }
 
 const PaymentMethodsList: React.FC<PaymentMethodsListProps> = ({
+  mode,
   methods,
   selectedMethod,
   onMethodSelect,
@@ -30,7 +36,7 @@ const PaymentMethodsList: React.FC<PaymentMethodsListProps> = ({
   return (
     <ScrollView style={{ ...styles.container, ...(style?.base || {}) }}>
       {methods.map((method) => {
-        const details = getPaymentMethodDetails(method.payment_method);
+        const details = getPaymentMethodDetails(method.payment_method, mode);
         return (
           <TouchableOpacity
             key={method.id}

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

@@ -12,6 +12,7 @@ import {
 import { getCardType } from '../../../shared/catalog/cardBrandCatalog';
 import { RadioButton } from '../RadioButton';
 import {
+  type Environment,
   type ICard,
   type InputProps,
   type StylesSavedCardsVariant,
@@ -21,6 +22,7 @@ import { buildBaseStyleText } from '../../../shared/utils/styleUtils';
 import { CardCVVInput } from '@tonder.io/rn-sdk';
 
 interface SavedCardsListProps {
+  mode: Environment;
   cards: ICard[];
   selectedMethod: string;
   cvvProps: InputProps;
@@ -33,6 +35,7 @@ interface SavedCardsListProps {
 }
 
 interface CardItemProps {
+  mode: Environment;
   card: ICard;
   selectedMethod: string;
   onMethodSelect: (methodId: string) => void;
@@ -47,6 +50,7 @@ interface CardItemProps {
 }
 
 const CardItem: React.FC<CardItemProps> = ({
+  mode,
   card,
   selectedMethod,
   onMethodSelect,
@@ -103,7 +107,7 @@ const CardItem: React.FC<CardItemProps> = ({
           onSelect={() => onMethodSelect(card.fields.skyflow_id)}
         />
         <Image
-          source={{ uri: getCardType(card.fields.card_scheme) }}
+          source={{ uri: getCardType(card.fields.card_scheme, mode) }}
           style={{ ...styles.cardImage, ...(style?.cardIcon || {}) }}
         />
         <View style={styles.cardInfo}>
@@ -180,6 +184,7 @@ const CardItem: React.FC<CardItemProps> = ({
 };
 
 const SavedCardsList: React.FC<SavedCardsListProps> = ({
+  mode,
   cards,
   selectedMethod,
   onMethodSelect,
@@ -202,6 +207,7 @@ const SavedCardsList: React.FC<SavedCardsListProps> = ({
       {cards.map((card, index) => (
         <CardItem
           key={card.fields.skyflow_id}
+          mode={mode}
           card={card}
           selectedMethod={selectedMethod}
           onMethodSelect={onMethodSelect}

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

@@ -22,7 +22,7 @@ import { toCurrency } from '../../../shared/utils/numberUtils';
 
 export interface ITonderPaymentProps {}
 const TonderPayment: React.FC<ITonderPaymentProps> = () => {
-  const { uiWrapper, sdk, state } = useTonderContext<SDKType.INLINE>();
+  const { uiWrapper, sdk, state, mode } = useTonderContext<SDKType.INLINE>();
   const [deletingCards, setDelitingCards] = useState<string[]>([]);
 
   // Animación para NewCardForm
@@ -100,6 +100,7 @@ const TonderPayment: React.FC<ITonderPaymentProps> = () => {
       >
         {state?.customization?.saveCards?.showSaved && state?.isCreated && (
           <SavedCardsList
+            mode={mode}
             style={state?.customization?.styles?.savedCards}
             expirationLabel={state?.customization?.labels?.expirationCard}
             cards={state.uiData?.cards}
@@ -142,7 +143,7 @@ const TonderPayment: React.FC<ITonderPaymentProps> = () => {
               }}
             />
             <Image
-              source={{ uri: getCardType('') }}
+              source={{ uri: getCardType('', mode) }}
               style={{
                 ...styles.cardImage,
                 ...(state?.customization?.styles?.paymentRadio?.cardIcon || {}),
@@ -188,6 +189,7 @@ const TonderPayment: React.FC<ITonderPaymentProps> = () => {
         )}
         {state?.customization?.paymentMethods?.show && (
           <PaymentMethodsList
+            mode={mode}
             methods={state?.uiData.paymentMethods}
             selectedMethod={state?.uiData?.payment_method || ''}
             onMethodSelect={(methodId) => {

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

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

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

@@ -73,8 +73,9 @@ const TonderProvider: React.FC<React.PropsWithChildren<ITonderProvider>> = <
       sdk: sdk as SDKInstance<T>,
       uiWrapper: uiSDKWrapper,
       state,
+      mode: config.mode,
     }),
-    [sdk, state, uiSDKWrapper]
+    [config.mode, sdk, state, uiSDKWrapper]
   );
 
   return (