Skip to content

Commit 3d06229

Browse files
ioan-ghisoi-ckoioan-ghisoi-cko
committed
Update change handler to support paste
1 parent caa8a1f commit 3d06229

6 files changed

Lines changed: 59 additions & 56 deletions

File tree

‎src/Frames.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ import { tokenize, formatDataForTokenization } from "./utils/http";
1313
export const FramesContext = React.createContext({} as FramesContextType);
1414

1515
const Frames = (props: FramesProps) => {
16-
// @ts-ignore
1716
const [state, dispatch]: [FramesState, FramesDispatch] = React.useReducer(
1817
framesReducer,
18+
// @ts-ignore
1919
{
2020
cardNumber: null,
2121
cardBin: {
@@ -28,10 +28,10 @@ const Frames = (props: FramesProps) => {
2828
cvv: null,
2929
cvvLength: 3,
3030
validation: {
31-
cardNumber: false,
32-
expiryDate: false,
33-
cvv: false,
34-
card: false,
31+
cardNumber: true,
32+
expiryDate: true,
33+
cvv: true,
34+
card: true,
3535
},
3636
}
3737
);
@@ -57,11 +57,13 @@ const Frames = (props: FramesProps) => {
5757
} catch (error) {
5858
if (props.config.debug)
5959
console.info(`Emitting "cardTokenizationFailed"`, error);
60+
// @ts-ignore
6061
if (props.cardTokenizationFailed) props.cardTokenizationFailed(error);
6162
log(
6263
"error",
6364
"com.checkout.frames-mobile-sdk.exception",
6465
props.config,
66+
// @ts-ignore
6567
error
6668
);
6769
}
@@ -77,6 +79,7 @@ const Frames = (props: FramesProps) => {
7779

7880
useEffect(() => {
7981
if (state.cardNumber !== null) {
82+
console.log("TRIGGERS use effect");
8083
let payload = {
8184
element: "card-number",
8285
isValid: state.validation.cardNumber,

‎src/components/CardNumber.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,23 @@ const CardNumber: React.FC<FramesCardFieldProps> = (props) => {
1616
return (
1717
<View style={styles.wrapper}>
1818
<TextInput
19-
autoCompleteType="cc-number"
19+
autoComplete="cc-number"
2020
keyboardType="number-pad"
2121
returnKeyType="done"
2222
placeholder={DEFAULT_CARD_NUMBER_PLACEHOLDER}
2323
{...props}
2424
value={state.cardNumber}
2525
style={[styles.cardNumber, props.style]}
26-
onChangeText={(val: string) => {
27-
dispatch({ type: CARD_CHANGE, payload: val });
26+
onChange={({ nativeEvent: { eventCount, target, text } }) => {
27+
dispatch({ type: CARD_CHANGE, payload: text });
2828
if (
29-
val.replace(/[^0-9]/g, "").length >= 8 &&
30-
val.replace(/[^0-9]/g, "").substring(0, 8) !==
29+
text.replace(/[^0-9]/g, "").length >= 8 &&
30+
text.replace(/[^0-9]/g, "").substring(0, 8) !==
3131
state.cardBin.bin
3232
) {
3333
dispatch({
3434
type: BIN_CHANGE,
35-
payload: val.replace(/[^0-9]/g, "").substring(0, 8),
35+
payload: text.replace(/[^0-9]/g, "").substring(0, 8),
3636
});
3737
}
3838
}}

‎src/components/Cvv.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { DEFAULT_CVV_PLACEHOLDER } from "../utils/constants";
66
import { CVV_CHANGE } from "../utils/actions";
77
import { FramesFieldProps } from "../types/types";
88

9+
//@ts-ignore
910
const Cvv: React.SFC<FramesFieldProps> = (props) => {
1011
return (
1112
<FramesConsumer>
@@ -15,7 +16,7 @@ const Cvv: React.SFC<FramesFieldProps> = (props) => {
1516
}
1617
return (
1718
<TextInput
18-
autoCompleteType="cc-csc"
19+
autoComplete="cc-csc"
1920
keyboardType="number-pad"
2021
returnKeyType="done"
2122
secureTextEntry={true}
@@ -24,9 +25,9 @@ const Cvv: React.SFC<FramesFieldProps> = (props) => {
2425
style={[styles.cvv, props.style]}
2526
value={state.cvv}
2627
maxLength={state.cvvLength}
27-
onChangeText={(val: string) =>
28-
dispatch({ type: CVV_CHANGE, payload: val })
29-
}
28+
onChange={({ nativeEvent: { eventCount, target, text } }) => {
29+
dispatch({ type: CVV_CHANGE, payload: text });
30+
}}
3031
/>
3132
);
3233
}}

‎src/components/ExpiryDate.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { FramesConsumer } from "../Frames";
55
import { DEFAULT_CARD_EXPIRY_DATE_PLACEHOLDER } from "../utils/constants";
66
import { DATE_CHANGE } from "../utils/actions";
77
import { FramesFieldProps } from "../types/types";
8-
8+
//@ts-ignore
99
const ExpiryDate: React.SFC<FramesFieldProps> = (props) => {
1010
return (
1111
<FramesConsumer>
@@ -15,17 +15,17 @@ const ExpiryDate: React.SFC<FramesFieldProps> = (props) => {
1515
}
1616
return (
1717
<TextInput
18-
autoCompleteType="cc-exp"
18+
autoComplete="cc-exp"
1919
keyboardType="number-pad"
2020
maxLength={5}
2121
returnKeyType="done"
2222
placeholder={DEFAULT_CARD_EXPIRY_DATE_PLACEHOLDER}
2323
{...props}
2424
style={[styles.expiryDate, props.style]}
2525
value={state.expiryDate}
26-
onChangeText={(val: string) =>
27-
dispatch({ type: DATE_CHANGE, payload: val })
28-
}
26+
onChange={({ nativeEvent: { eventCount, target, text } }) => {
27+
dispatch({ type: DATE_CHANGE, payload: text });
28+
}}
2929
/>
3030
);
3131
}}

‎src/utils/card.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,13 @@ const types = [mada, ...creditcardsTypes];
1111
const cards = new Card(types);
1212
const cvc = new Cvc(types);
1313

14-
const extendedCardTypeMapWhitelist = { 6011111111111117: "Discover" };
14+
interface CardTypeMap {
15+
[key: string]: string;
16+
}
17+
18+
const extendedCardTypeMapWhitelist: CardTypeMap = {
19+
"6011111111111117": "Discover",
20+
};
1521

1622
export const Icons = {
1723
Visa: require("../icons/visa.png"),
@@ -31,7 +37,7 @@ export const formatCard = (text: string): string => {
3137
export const getCardType = (text: string) => {
3238
const sanitizedValue = cards.parse(text);
3339
const cardType: IconKey =
34-
extendedCardTypeMapWhitelist[sanitizedValue] ||
40+
extendedCardTypeMapWhitelist[String(sanitizedValue)] ||
3541
cards.type(sanitizedValue, true);
3642
return cardType;
3743
};

‎tsconfig.json‎

Lines changed: 27 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,28 @@
11
{
2-
"compilerOptions": {
3-
"target": "es5",
4-
"lib": [
5-
"esnext"
6-
],
7-
"jsx": "react-native",
8-
"types": ["react", "jest"],
9-
"allowJs": true,
10-
"esModuleInterop": true,
11-
"allowSyntheticDefaultImports": true,
12-
"strict": true,
13-
"forceConsistentCasingInFileNames": true,
14-
"module": "esnext",
15-
"moduleResolution": "node",
16-
"resolveJsonModule": true,
17-
"isolatedModules": true,
18-
"noEmit": false,
19-
"outDir": "./dist",
20-
"sourceMap": true,
21-
"noImplicitReturns": true,
22-
"suppressImplicitAnyIndexErrors": true,
23-
"noUnusedLocals": true,
24-
"declaration": true,
25-
"noFallthroughCasesInSwitch": true
26-
},
27-
"include": [
28-
"src/*"
29-
],
30-
"exclude": [
31-
"node_modules",
32-
"**/__tests__/*"
33-
]
34-
}
35-
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": ["esnext"],
5+
"jsx": "react-native",
6+
"types": ["react", "jest"],
7+
"allowJs": true,
8+
"esModuleInterop": true,
9+
"allowSyntheticDefaultImports": true,
10+
"strict": true,
11+
"forceConsistentCasingInFileNames": true,
12+
"module": "esnext",
13+
"moduleResolution": "node",
14+
"resolveJsonModule": true,
15+
"isolatedModules": true,
16+
"noEmit": false,
17+
"outDir": "./dist",
18+
"sourceMap": true,
19+
"noImplicitReturns": true,
20+
"ignoreDeprecations": "5.0",
21+
"noUnusedLocals": true,
22+
"declaration": true,
23+
"noFallthroughCasesInSwitch": true,
24+
"skipLibCheck": true
25+
},
26+
"include": ["src/*"],
27+
"exclude": ["node_modules", "**/__tests__/*"]
28+
}

0 commit comments

Comments
 (0)