From 834f844ff268b65b020557c4eadb47cc5867f295 Mon Sep 17 00:00:00 2001
From: ioan-ghisoi-cko <ioan.ghisoi@checkout.com>
Date: Mon, 2 Jun 2025 16:01:14 +0100
Subject: [PATCH] Update tsconfig to allow build and autoComplete

---
 src/Frames.tsx                | 55 +++++++++++++++---------------
 src/components/CardNumber.tsx |  2 +-
 src/components/Cvv.tsx        |  4 +--
 src/components/ExpiryDate.tsx |  4 +--
 tsconfig.json                 | 63 ++++++++++++++++-------------------
 5 files changed, 63 insertions(+), 65 deletions(-)

diff --git a/src/Frames.tsx b/src/Frames.tsx
index 65baedd..90690de 100644
--- a/src/Frames.tsx
+++ b/src/Frames.tsx
@@ -1,39 +1,40 @@
-import React, { useEffect } from "react";
-import { View, StyleSheet } from "react-native";
+import React, { useEffect, useReducer } from "react";
+import { View, StyleSheet, ImageSourcePropType } from "react-native";
 import { framesReducer } from "./utils/reducer";
 import {
   FramesContextType,
   FramesProps,
   FramesState,
-  FramesDispatch,
+  FrameCardTokenizationFailedEvent,
 } from "./types/types";
 import { log } from "./utils/logger";
 import { tokenize, formatDataForTokenization } from "./utils/http";
 
 export const FramesContext = React.createContext({} as FramesContextType);
 
+const initialState: FramesState = {
+  cardNumber: "",
+  cardBin: {
+    bin: "",
+    scheme: "",
+  },
+  cardType: "",
+  cardIcon: null as unknown as ImageSourcePropType,
+  expiryDate: "",
+  cvv: "",
+  cvvLength: 3,
+  validation: {
+    cardNumber: false,
+    expiryDate: false,
+    cvv: false,
+    card: false,
+  },
+};
+
 const Frames = (props: FramesProps) => {
-  // @ts-ignore
-  const [state, dispatch]: [FramesState, FramesDispatch] = React.useReducer(
+  const [state, dispatch] = useReducer<typeof framesReducer>(
     framesReducer,
-    {
-      cardNumber: null,
-      cardBin: {
-        bin: null,
-        scheme: null,
-      },
-      cardType: null,
-      cardIcon: undefined,
-      expiryDate: null,
-      cvv: null,
-      cvvLength: 3,
-      validation: {
-        cardNumber: false,
-        expiryDate: false,
-        cvv: false,
-        card: false,
-      },
-    }
+    initialState
   );
 
   const submitCard = async () => {
@@ -43,7 +44,7 @@ const Frames = (props: FramesProps) => {
         "com.checkout.frames-mobile-sdk.token_requested",
         props.config
       );
-      let response = await tokenize(
+      const response = await tokenize(
         formatDataForTokenization(state, props.config)
       );
       if (props.config.debug)
@@ -57,12 +58,14 @@ const Frames = (props: FramesProps) => {
     } catch (error) {
       if (props.config.debug)
         console.info(`Emitting "cardTokenizationFailed"`, error);
-      if (props.cardTokenizationFailed) props.cardTokenizationFailed(error);
+      if (props.cardTokenizationFailed && error instanceof Object) {
+        props.cardTokenizationFailed(error as FrameCardTokenizationFailedEvent);
+      }
       log(
         "error",
         "com.checkout.frames-mobile-sdk.exception",
         props.config,
-        error
+        error as object
       );
     }
   };
diff --git a/src/components/CardNumber.tsx b/src/components/CardNumber.tsx
index d61235c..aae5d90 100644
--- a/src/components/CardNumber.tsx
+++ b/src/components/CardNumber.tsx
@@ -16,7 +16,7 @@ const CardNumber: React.FC<FramesCardFieldProps> = (props) => {
         return (
           <View style={styles.wrapper}>
             <TextInput
-              autoCompleteType="cc-number"
+              autoComplete="cc-number"
               keyboardType="number-pad"
               returnKeyType="done"
               placeholder={DEFAULT_CARD_NUMBER_PLACEHOLDER}
diff --git a/src/components/Cvv.tsx b/src/components/Cvv.tsx
index 1143c6b..834fb61 100644
--- a/src/components/Cvv.tsx
+++ b/src/components/Cvv.tsx
@@ -6,7 +6,7 @@ import { DEFAULT_CVV_PLACEHOLDER } from "../utils/constants";
 import { CVV_CHANGE } from "../utils/actions";
 import { FramesFieldProps } from "../types/types";
 
-const Cvv: React.SFC<FramesFieldProps> = (props) => {
+const Cvv: React.FC<FramesFieldProps> = (props) => {
   return (
     <FramesConsumer>
       {({ state, dispatch }) => {
@@ -15,7 +15,7 @@ const Cvv: React.SFC<FramesFieldProps> = (props) => {
         }
         return (
           <TextInput
-            autoCompleteType="cc-csc"
+            autoComplete="cc-csc"
             keyboardType="number-pad"
             returnKeyType="done"
             secureTextEntry={true}
diff --git a/src/components/ExpiryDate.tsx b/src/components/ExpiryDate.tsx
index 08537eb..876e105 100644
--- a/src/components/ExpiryDate.tsx
+++ b/src/components/ExpiryDate.tsx
@@ -6,7 +6,7 @@ import { DEFAULT_CARD_EXPIRY_DATE_PLACEHOLDER } from "../utils/constants";
 import { DATE_CHANGE } from "../utils/actions";
 import { FramesFieldProps } from "../types/types";
 
-const ExpiryDate: React.SFC<FramesFieldProps> = (props) => {
+const ExpiryDate: React.FC<FramesFieldProps> = (props) => {
   return (
     <FramesConsumer>
       {({ state, dispatch }) => {
@@ -15,7 +15,7 @@ const ExpiryDate: React.SFC<FramesFieldProps> = (props) => {
         }
         return (
           <TextInput
-            autoCompleteType="cc-exp"
+            autoComplete="cc-exp"
             keyboardType="number-pad"
             maxLength={5}
             returnKeyType="done"
diff --git a/tsconfig.json b/tsconfig.json
index a6d7f9d..ae9460f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,35 +1,30 @@
 {
-    "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", "dom"],
+    "jsx": "react-native",
+    "types": ["react-native", "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,
+    "noUnusedLocals": true,
+    "declaration": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "ignoreDeprecations": "5.0",
+    "noImplicitAny": false,
+    "strictNullChecks": false
+  },
+  "include": ["src/*"],
+  "exclude": ["node_modules", "**/__tests__/*"]
+}