diff --git a/src/Frames.tsx b/src/Frames.tsx index 65baedd..238fea2 100644 --- a/src/Frames.tsx +++ b/src/Frames.tsx @@ -13,9 +13,9 @@ import { tokenize, formatDataForTokenization } from "./utils/http"; export const FramesContext = React.createContext({} as FramesContextType); const Frames = (props: FramesProps) => { - // @ts-ignore const [state, dispatch]: [FramesState, FramesDispatch] = React.useReducer( framesReducer, + // @ts-ignore { cardNumber: null, cardBin: { @@ -28,10 +28,10 @@ const Frames = (props: FramesProps) => { cvv: null, cvvLength: 3, validation: { - cardNumber: false, - expiryDate: false, - cvv: false, - card: false, + cardNumber: true, + expiryDate: true, + cvv: true, + card: true, }, } ); @@ -57,11 +57,13 @@ const Frames = (props: FramesProps) => { } catch (error) { if (props.config.debug) console.info(`Emitting "cardTokenizationFailed"`, error); + // @ts-ignore if (props.cardTokenizationFailed) props.cardTokenizationFailed(error); log( "error", "com.checkout.frames-mobile-sdk.exception", props.config, + // @ts-ignore error ); } @@ -77,6 +79,7 @@ const Frames = (props: FramesProps) => { useEffect(() => { if (state.cardNumber !== null) { + console.log("TRIGGERS use effect"); let payload = { element: "card-number", isValid: state.validation.cardNumber, diff --git a/src/components/CardNumber.tsx b/src/components/CardNumber.tsx index d61235c..6dc0c99 100644 --- a/src/components/CardNumber.tsx +++ b/src/components/CardNumber.tsx @@ -16,23 +16,23 @@ const CardNumber: React.FC = (props) => { return ( { - dispatch({ type: CARD_CHANGE, payload: val }); + onChange={({ nativeEvent: { eventCount, target, text } }) => { + dispatch({ type: CARD_CHANGE, payload: text }); if ( - val.replace(/[^0-9]/g, "").length >= 8 && - val.replace(/[^0-9]/g, "").substring(0, 8) !== + text.replace(/[^0-9]/g, "").length >= 8 && + text.replace(/[^0-9]/g, "").substring(0, 8) !== state.cardBin.bin ) { dispatch({ type: BIN_CHANGE, - payload: val.replace(/[^0-9]/g, "").substring(0, 8), + payload: text.replace(/[^0-9]/g, "").substring(0, 8), }); } }} diff --git a/src/components/Cvv.tsx b/src/components/Cvv.tsx index 1143c6b..ff4c338 100644 --- a/src/components/Cvv.tsx +++ b/src/components/Cvv.tsx @@ -6,6 +6,7 @@ import { DEFAULT_CVV_PLACEHOLDER } from "../utils/constants"; import { CVV_CHANGE } from "../utils/actions"; import { FramesFieldProps } from "../types/types"; +//@ts-ignore const Cvv: React.SFC = (props) => { return ( @@ -15,7 +16,7 @@ const Cvv: React.SFC = (props) => { } return ( = (props) => { style={[styles.cvv, props.style]} value={state.cvv} maxLength={state.cvvLength} - onChangeText={(val: string) => - dispatch({ type: CVV_CHANGE, payload: val }) - } + onChange={({ nativeEvent: { eventCount, target, text } }) => { + dispatch({ type: CVV_CHANGE, payload: text }); + }} /> ); }} diff --git a/src/components/ExpiryDate.tsx b/src/components/ExpiryDate.tsx index 08537eb..e3999ec 100644 --- a/src/components/ExpiryDate.tsx +++ b/src/components/ExpiryDate.tsx @@ -5,7 +5,7 @@ import { FramesConsumer } from "../Frames"; import { DEFAULT_CARD_EXPIRY_DATE_PLACEHOLDER } from "../utils/constants"; import { DATE_CHANGE } from "../utils/actions"; import { FramesFieldProps } from "../types/types"; - +//@ts-ignore const ExpiryDate: React.SFC = (props) => { return ( @@ -15,7 +15,7 @@ const ExpiryDate: React.SFC = (props) => { } return ( = (props) => { {...props} style={[styles.expiryDate, props.style]} value={state.expiryDate} - onChangeText={(val: string) => - dispatch({ type: DATE_CHANGE, payload: val }) - } + onChange={({ nativeEvent: { eventCount, target, text } }) => { + dispatch({ type: DATE_CHANGE, payload: text }); + }} /> ); }} diff --git a/src/utils/card.tsx b/src/utils/card.tsx index 3b97840..1aa075c 100644 --- a/src/utils/card.tsx +++ b/src/utils/card.tsx @@ -11,7 +11,13 @@ const types = [mada, ...creditcardsTypes]; const cards = new Card(types); const cvc = new Cvc(types); -const extendedCardTypeMapWhitelist = { 6011111111111117: "Discover" }; +interface CardTypeMap { + [key: string]: string; +} + +const extendedCardTypeMapWhitelist: CardTypeMap = { + "6011111111111117": "Discover", +}; export const Icons = { Visa: require("../icons/visa.png"), @@ -31,7 +37,7 @@ export const formatCard = (text: string): string => { export const getCardType = (text: string) => { const sanitizedValue = cards.parse(text); const cardType: IconKey = - extendedCardTypeMapWhitelist[sanitizedValue] || + extendedCardTypeMapWhitelist[String(sanitizedValue)] || cards.type(sanitizedValue, true); return cardType; }; diff --git a/tsconfig.json b/tsconfig.json index a6d7f9d..e594de8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,35 +1,28 @@ { - "compilerOptions": { - "target": "es5", - "lib": [ - "esnext" - ], - "jsx": "react-native", - "types": ["react", "jest"], - "allowJs": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": false, - "outDir": "./dist", - "sourceMap": true, - "noImplicitReturns": true, - "suppressImplicitAnyIndexErrors": true, - "noUnusedLocals": true, - "declaration": true, - "noFallthroughCasesInSwitch": true - }, - "include": [ - "src/*" - ], - "exclude": [ - "node_modules", - "**/__tests__/*" - ] - } - \ No newline at end of file + "compilerOptions": { + "target": "es5", + "lib": ["esnext"], + "jsx": "react-native", + "types": ["react", "jest"], + "allowJs": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": false, + "outDir": "./dist", + "sourceMap": true, + "noImplicitReturns": true, + "ignoreDeprecations": "5.0", + "noUnusedLocals": true, + "declaration": true, + "noFallthroughCasesInSwitch": true, + "skipLibCheck": true + }, + "include": ["src/*"], + "exclude": ["node_modules", "**/__tests__/*"] +}