From 03508eb68ef0f28855202dac132627f4c85e5907 Mon Sep 17 00:00:00 2001 From: Chathura Date: Thu, 4 Jul 2024 23:16:56 +0530 Subject: [PATCH 1/6] eslinting changes p1 --- payment_sdk/assets.d.ts | 5 ++ payment_sdk/eslint.config.mjs | 80 +++++++++++++++++-- payment_sdk/package.json | 7 +- .../src/__tests__/CardInputGroup.test.tsx | 2 +- .../src/__tests__/CardSection.test.tsx | 2 +- payment_sdk/src/components/CardInputGroup.tsx | 30 ++++--- payment_sdk/src/components/CardScanner.tsx | 2 + payment_sdk/src/components/Input.tsx | 2 + payment_sdk/src/components/KomojuText.tsx | 2 + payment_sdk/src/components/LightBox.tsx | 4 +- payment_sdk/src/components/Loader.tsx | 1 + payment_sdk/src/components/Pill.tsx | 2 + payment_sdk/src/components/PillContainer.tsx | 10 ++- payment_sdk/src/components/ResponseScreen.tsx | 6 +- payment_sdk/src/components/ScanCardButton.tsx | 4 +- payment_sdk/src/components/Sheet.tsx | 17 ++-- payment_sdk/src/components/SheetContent.tsx | 15 ++-- payment_sdk/src/components/SubmitButton.tsx | 4 +- payment_sdk/src/components/WebView.tsx | 6 +- .../components/paymentState/stateProvider.tsx | 5 +- .../src/components/sections/CardSection.tsx | 13 +-- .../components/sections/KonbiniSection.tsx | 17 ++-- .../src/components/sections/PayPaySection.tsx | 13 +-- .../src/components/sections/SheetFooter.tsx | 12 +-- .../src/{ => context}/KomojuProvider.tsx | 25 +++--- payment_sdk/src/{ => context}/state.ts | 5 +- payment_sdk/src/index.ts | 7 +- .../src/services/payForSessionService.ts | 6 +- payment_sdk/src/services/sessionShow.ts | 6 +- payment_sdk/src/util/display.ts | 27 +++++++ payment_sdk/src/util/helpers.ts | 7 +- payment_sdk/tsconfig.json | 42 ++++++++-- 32 files changed, 285 insertions(+), 101 deletions(-) create mode 100644 payment_sdk/assets.d.ts rename payment_sdk/src/{ => context}/KomojuProvider.tsx (94%) rename payment_sdk/src/{ => context}/state.ts (98%) create mode 100644 payment_sdk/src/util/display.ts diff --git a/payment_sdk/assets.d.ts b/payment_sdk/assets.d.ts new file mode 100644 index 0000000..baaf2ea --- /dev/null +++ b/payment_sdk/assets.d.ts @@ -0,0 +1,5 @@ +declare module '*.png'; +declare module '*.jpg'; +declare module '*.jpeg'; +declare module '*.gif'; +declare module '*.json'; \ No newline at end of file diff --git a/payment_sdk/eslint.config.mjs b/payment_sdk/eslint.config.mjs index a7ef612..eb2cb31 100644 --- a/payment_sdk/eslint.config.mjs +++ b/payment_sdk/eslint.config.mjs @@ -1,12 +1,82 @@ -import globals from "globals"; +import { fixupConfigRules } from "@eslint/compat"; import pluginJs from "@eslint/js"; -import tseslint from "typescript-eslint"; +import pluginImport from "eslint-plugin-import"; import pluginReactConfig from "eslint-plugin-react/configs/recommended.js"; -import { fixupConfigRules } from "@eslint/compat"; +import globals from "globals"; +import tseslint from "typescript-eslint"; export default [ - { languageOptions: { globals: globals.browser } }, + { + files: ["**/*.ts", "**/*.tsx"], + languageOptions: + { globals: globals.browser } + }, pluginJs.configs.recommended, ...tseslint.configs.recommended, ...fixupConfigRules(pluginReactConfig), -]; + { + plugins: { + import: pluginImport, + }, + rules: { + "import/order": [ + "error", + { + groups: [ + ["builtin", "external", "internal"], + ["parent", "sibling", "index"], + [] + ], + pathGroups: [ + { + pattern: "react", + group: "external", + position: "before" + }, + { + pattern: "react-native", + group: "external", + position: "before" + }, + { + pattern: "react-native-*", + group: "external", + position: "before" + }, + { + pattern: "@context/**", + group: "internal", + position: "after" + }, + { + pattern: "@components/**", + group: "internal", + position: "after" + }, + { + pattern: "@services/**", + group: "internal", + position: "after" + }, + { + pattern: "@util/**", + group: "internal", + position: "after" + }, + { + pattern: "@assets/**", + group: "internal", + position: "after" + } + ], + pathGroupsExcludedImportTypes: ["react", "react-native"], + "newlines-between": "always", + alphabetize: { + order: "asc", + caseInsensitive: true + } + } + ] + } + } +]; \ No newline at end of file diff --git a/payment_sdk/package.json b/payment_sdk/package.json index b81e89d..dcb01b4 100644 --- a/payment_sdk/package.json +++ b/payment_sdk/package.json @@ -24,6 +24,7 @@ "@typescript-eslint/parser": "^7.12.0", "babel-jest": "^29.7.0", "eslint": "9.x", + "eslint-plugin-import": "^2.29.1", "eslint-plugin-react": "^7.34.2", "globals": "^15.3.0", "jest": "^29.7.0", @@ -42,10 +43,10 @@ "i18next": "^23.11.5", "react-i18next": "^14.1.2", "react-native-svg": "^15.3.0", - "react-native-webview": "^13.10.2", - "react-native-worklets-core": "^1.3.3", "react-native-vision-camera": "^4.3.2", - "react-native-vision-camera-text-recognition": "^3.0.4" + "react-native-vision-camera-text-recognition": "^3.0.4", + "react-native-webview": "^13.10.2", + "react-native-worklets-core": "^1.3.3" }, "resolutions": { "@types/react": "^18.2.44" diff --git a/payment_sdk/src/__tests__/CardInputGroup.test.tsx b/payment_sdk/src/__tests__/CardInputGroup.test.tsx index a1b081d..f66f2c0 100644 --- a/payment_sdk/src/__tests__/CardInputGroup.test.tsx +++ b/payment_sdk/src/__tests__/CardInputGroup.test.tsx @@ -2,7 +2,7 @@ import React, { ReactNode } from "react"; import { render, fireEvent } from "@testing-library/react-native"; import { determineCardType, formatCreditCardNumber, formatExpiry } from "../util/helpers"; -import { Actions, DispatchContext, StateContext } from "../state"; +import { Actions, DispatchContext, StateContext } from "../context/state"; import CardInputGroup from "../components/CardInputGroup"; import { isCardNumberValid, validateCardExpiry } from "../util/validator"; diff --git a/payment_sdk/src/__tests__/CardSection.test.tsx b/payment_sdk/src/__tests__/CardSection.test.tsx index c59aaa4..16f755f 100644 --- a/payment_sdk/src/__tests__/CardSection.test.tsx +++ b/payment_sdk/src/__tests__/CardSection.test.tsx @@ -4,7 +4,7 @@ import { fireEvent, render, waitFor } from "@testing-library/react-native"; import CardSection from "../components/sections/CardSection"; import StateProvider from "../components/paymentState/stateProvider"; -import { DispatchContext, StateContext } from "../state"; +import { DispatchContext, StateContext } from "../context/state"; import { PaymentType } from "../util/types"; export const mockState = { diff --git a/payment_sdk/src/components/CardInputGroup.tsx b/payment_sdk/src/components/CardInputGroup.tsx index 1c5612a..b5d5f92 100644 --- a/payment_sdk/src/components/CardInputGroup.tsx +++ b/payment_sdk/src/components/CardInputGroup.tsx @@ -1,4 +1,3 @@ -import { StyleSheet, View } from "react-native"; import React, { memo, useContext, @@ -6,25 +5,30 @@ import React, { useState, useCallback, } from "react"; + +import { StyleSheet, View } from "react-native"; + import { SvgCssUri } from "react-native-svg/css"; -import Input from "./Input"; -import ScanCardButton from "./ScanCardButton"; -import { Actions, DispatchContext, StateContext } from "../state"; -import { isCardNumberValid, validateCardExpiry } from "../util/validator"; -import { - determineCardType, - formatCreditCardNumber, - formatExpiry, -} from "../util/helpers"; -import KomojuText from "./KomojuText"; +import { Actions, DispatchContext, StateContext } from "@context/state"; + import { BASE_URL, STATIC_CREDIT_CARD_CVC_SVG, STATIC_CREDIT_CARD_SVG, -} from "../util/constants"; -import { PaymentType, sessionShowPaymentMethodType } from "../util/types"; +} from "@util/constants"; +import { + determineCardType, + formatCreditCardNumber, + formatExpiry, +} from "@util/helpers"; +import { PaymentType, sessionShowPaymentMethodType } from "@util/types"; +import { isCardNumberValid, validateCardExpiry } from "@util/validator"; + import CardScanner from "./CardScanner"; +import Input from "./Input"; +import KomojuText from "./KomojuText"; +import ScanCardButton from "./ScanCardButton"; type Props = { inputErrors: { diff --git a/payment_sdk/src/components/CardScanner.tsx b/payment_sdk/src/components/CardScanner.tsx index 2a14b99..a454330 100644 --- a/payment_sdk/src/components/CardScanner.tsx +++ b/payment_sdk/src/components/CardScanner.tsx @@ -1,5 +1,7 @@ import React, { useEffect, useState, useCallback } from 'react'; + import { View, Text, StyleSheet, Dimensions } from 'react-native'; + import { Camera, useCameraDevice, diff --git a/payment_sdk/src/components/Input.tsx b/payment_sdk/src/components/Input.tsx index 8b230ba..572c7f5 100644 --- a/payment_sdk/src/components/Input.tsx +++ b/payment_sdk/src/components/Input.tsx @@ -1,4 +1,5 @@ import React from "react"; + import { View, TextInput, @@ -8,6 +9,7 @@ import { KeyboardTypeOptions, TextInputProps, } from "react-native"; + import { useTranslation } from "react-i18next"; interface InputProps extends TextInputProps { diff --git a/payment_sdk/src/components/KomojuText.tsx b/payment_sdk/src/components/KomojuText.tsx index 3c43368..6cb300e 100644 --- a/payment_sdk/src/components/KomojuText.tsx +++ b/payment_sdk/src/components/KomojuText.tsx @@ -1,5 +1,7 @@ import React from "react"; + import { Text, StyleProp, TextStyle } from "react-native"; + import { useTranslation } from "react-i18next"; interface KomojuTextProps { diff --git a/payment_sdk/src/components/LightBox.tsx b/payment_sdk/src/components/LightBox.tsx index 30f639a..18940ea 100644 --- a/payment_sdk/src/components/LightBox.tsx +++ b/payment_sdk/src/components/LightBox.tsx @@ -1,5 +1,7 @@ -import { StyleSheet, Text, View } from "react-native"; import React from "react"; + +import { StyleSheet, Text, View } from "react-native"; + import { useTranslation } from "react-i18next"; type Props = { diff --git a/payment_sdk/src/components/Loader.tsx b/payment_sdk/src/components/Loader.tsx index c3dc1fc..b1e4e08 100644 --- a/payment_sdk/src/components/Loader.tsx +++ b/payment_sdk/src/components/Loader.tsx @@ -1,4 +1,5 @@ import React from "react"; + import { ActivityIndicator, StyleSheet, View } from "react-native"; const Loader = () => { diff --git a/payment_sdk/src/components/Pill.tsx b/payment_sdk/src/components/Pill.tsx index 8712102..1628b5d 100644 --- a/payment_sdk/src/components/Pill.tsx +++ b/payment_sdk/src/components/Pill.tsx @@ -1,4 +1,5 @@ import React, { ReactNode } from "react"; + import { Text, StyleSheet, @@ -7,6 +8,7 @@ import { Image, ImageSourcePropType, } from "react-native"; + import { useTranslation } from "react-i18next"; interface PillProps { diff --git a/payment_sdk/src/components/PillContainer.tsx b/payment_sdk/src/components/PillContainer.tsx index e8f6c7e..089b982 100644 --- a/payment_sdk/src/components/PillContainer.tsx +++ b/payment_sdk/src/components/PillContainer.tsx @@ -1,11 +1,15 @@ import React, { useContext } from "react"; + import { StyleSheet, View, FlatList } from "react-native"; + import { SvgCssUri } from "react-native-svg/css"; +import { StateContext } from "@context/state"; + +import { BASE_URL } from "@util/constants"; +import { PaymentType, sessionShowPaymentMethodType } from "@util/types"; + import Pill from "./Pill"; -import { PaymentType, sessionShowPaymentMethodType } from "../util/types"; -import { StateContext } from "../state"; -import { BASE_URL } from "../util/constants"; type Props = { onSelect: (type: PaymentType) => void; diff --git a/payment_sdk/src/components/ResponseScreen.tsx b/payment_sdk/src/components/ResponseScreen.tsx index 0568d9a..8a4e4e1 100644 --- a/payment_sdk/src/components/ResponseScreen.tsx +++ b/payment_sdk/src/components/ResponseScreen.tsx @@ -1,8 +1,10 @@ -import { Image, StyleSheet, Text, View } from "react-native"; import React, { useCallback, useMemo } from "react"; +import { Image, StyleSheet, Text, View } from "react-native"; + +import { ResponseScreenStatuses } from "@util/types"; + import SubmitButton from "./SubmitButton"; -import { ResponseScreenStatuses } from "../util/types"; type Props = { status: ResponseScreenStatuses.SUCCESS | ResponseScreenStatuses.FAILED; diff --git a/payment_sdk/src/components/ScanCardButton.tsx b/payment_sdk/src/components/ScanCardButton.tsx index 1352198..211f456 100644 --- a/payment_sdk/src/components/ScanCardButton.tsx +++ b/payment_sdk/src/components/ScanCardButton.tsx @@ -1,5 +1,7 @@ -import { Image, StyleSheet, TouchableOpacity } from "react-native"; import React from "react"; + +import { Image, StyleSheet, TouchableOpacity } from "react-native"; + import KomojuText from "./KomojuText"; // When press the scan card button it will open the camera and scan the card, diff --git a/payment_sdk/src/components/Sheet.tsx b/payment_sdk/src/components/Sheet.tsx index 101fd2b..e01b38b 100644 --- a/payment_sdk/src/components/Sheet.tsx +++ b/payment_sdk/src/components/Sheet.tsx @@ -6,6 +6,7 @@ import React, { useEffect, ForwardRefRenderFunction, } from "react"; + import { Alert, Image, @@ -16,15 +17,17 @@ import { Keyboard, } from "react-native"; +import { Actions, DispatchContext, StateContext } from "@context/state"; + +import { paymentFailedCtaText, paymentSuccessCtaText } from "@util/constants"; +import { SCREEN_HEIGHT } from "@util/helpers"; +import { ResponseScreenStatuses } from "@util/types"; + +import closeIcon from "@assets/images/close.png"; + +import KomojuText from "./KomojuText"; import ResponseScreen from "./ResponseScreen"; -import { Actions, DispatchContext, StateContext } from "../state"; import SheetContent from "./SheetContent"; -import { paymentFailedCtaText, paymentSuccessCtaText } from "../util/constants"; -import { ResponseScreenStatuses } from "../util/types"; -import { SCREEN_HEIGHT } from "../util/helpers"; -import KomojuText from "./KomojuText"; - -const closeIcon = require("../assets/images/close.png"); const MAX_TRANSLATE_Y = -SCREEN_HEIGHT + 50; diff --git a/payment_sdk/src/components/SheetContent.tsx b/payment_sdk/src/components/SheetContent.tsx index 54e50af..b89e1f5 100644 --- a/payment_sdk/src/components/SheetContent.tsx +++ b/payment_sdk/src/components/SheetContent.tsx @@ -1,16 +1,19 @@ import React, { useContext, useEffect, useState } from "react"; + import { Keyboard, ScrollView, StyleSheet, View } from "react-native"; +import { Actions, DispatchContext, StateContext } from "@context/state"; + +import { SCREEN_HEIGHT, isAndroid } from "@util/helpers"; +import { PaymentType } from "@util/types"; + +import Loader from "./Loader"; import PillContainer from "./PillContainer"; -import WebView from "./WebView"; import CardSection from "./sections/CardSection"; +import KonbiniSection from "./sections/KonbiniSection"; import PayPaySection from "./sections/PayPaySection"; -import { Actions, DispatchContext, StateContext } from "../state"; -import Loader from "./Loader"; import SheetFooter from "./sections/SheetFooter"; -import { PaymentType } from "../util/types"; -import KonbiniSection from "./sections/KonbiniSection"; -import { SCREEN_HEIGHT, isAndroid } from "../util/helpers"; +import WebView from "./WebView"; const KEYBOARD_OFFSET = isAndroid() ? 120 : 80; diff --git a/payment_sdk/src/components/SubmitButton.tsx b/payment_sdk/src/components/SubmitButton.tsx index 3626019..75e2107 100644 --- a/payment_sdk/src/components/SubmitButton.tsx +++ b/payment_sdk/src/components/SubmitButton.tsx @@ -1,5 +1,7 @@ -import { StyleSheet, Text, TouchableOpacity } from "react-native"; import React from "react"; + +import { StyleSheet, Text, TouchableOpacity } from "react-native"; + import { useTranslation } from "react-i18next"; type Props = { diff --git a/payment_sdk/src/components/WebView.tsx b/payment_sdk/src/components/WebView.tsx index f801660..e033418 100644 --- a/payment_sdk/src/components/WebView.tsx +++ b/payment_sdk/src/components/WebView.tsx @@ -1,8 +1,10 @@ import React from "react"; -import { WebView } from "react-native-webview"; + import { StyleSheet } from "react-native"; -import { newNavStateProps } from "../util/types"; +import { WebView } from "react-native-webview"; + +import { newNavStateProps } from "@util/types"; type webViewProps = { link: string; diff --git a/payment_sdk/src/components/paymentState/stateProvider.tsx b/payment_sdk/src/components/paymentState/stateProvider.tsx index 8d53777..2e9f300 100644 --- a/payment_sdk/src/components/paymentState/stateProvider.tsx +++ b/payment_sdk/src/components/paymentState/stateProvider.tsx @@ -1,7 +1,8 @@ import React, { ReactNode, useReducer } from "react"; -import { DispatchContext, StateContext, reducer } from "../../state"; -import { initialState } from "../../util/types"; +import { DispatchContext, StateContext, reducer } from "@context/state"; + +import { initialState } from "@util/types"; /** * StateProvider component to provide state and dispatch contexts to its children. diff --git a/payment_sdk/src/components/sections/CardSection.tsx b/payment_sdk/src/components/sections/CardSection.tsx index 5664245..14dd474 100644 --- a/payment_sdk/src/components/sections/CardSection.tsx +++ b/payment_sdk/src/components/sections/CardSection.tsx @@ -1,13 +1,16 @@ import React, { useState, useContext } from "react"; + import { StyleSheet, View } from "react-native"; -import Input from "../Input"; +import { Actions, DispatchContext, StateContext } from "@context/state"; + +import { formatCurrency } from "@util/helpers"; +import { PaymentType } from "@util/types"; +import { validateCardFormFields } from "@util/validator"; + import CardInputGroup from "../CardInputGroup"; +import Input from "../Input"; import SubmitButton from "../SubmitButton"; -import { Actions, DispatchContext, StateContext } from "../../state"; -import { PaymentType } from "../../util/types"; -import { formatCurrency } from "../../util/helpers"; -import { validateCardFormFields } from "../../util/validator"; const initialErrors = { name: false, diff --git a/payment_sdk/src/components/sections/KonbiniSection.tsx b/payment_sdk/src/components/sections/KonbiniSection.tsx index 1c6b5b5..719396c 100644 --- a/payment_sdk/src/components/sections/KonbiniSection.tsx +++ b/payment_sdk/src/components/sections/KonbiniSection.tsx @@ -1,19 +1,22 @@ import React, { useContext, useState, useCallback } from "react"; + import { FlatList, StyleSheet, View } from "react-native"; + import { SvgCssUri } from "react-native-svg/css"; -import Input from "../Input"; -import SubmitButton from "../SubmitButton"; -import { formatCurrency, parseBrands } from "../../util/helpers"; -import { Actions, DispatchContext, StateContext } from "../../state"; +import { Actions, DispatchContext, StateContext } from "@context/state"; + +import { formatCurrency, parseBrands } from "@util/helpers"; import { brandType, PaymentType, sessionShowPaymentMethodType, -} from "../../util/types"; -import { validateKonbiniFormFields } from "../../util/validator"; +} from "@util/types"; +import { validateKonbiniFormFields } from "@util/validator"; + +import Input from "../Input"; import Pill from "../Pill"; -import { BASE_URL } from "../../util/constants"; +import SubmitButton from "../SubmitButton"; const initialErrors = { name: false, diff --git a/payment_sdk/src/components/sections/PayPaySection.tsx b/payment_sdk/src/components/sections/PayPaySection.tsx index df6b011..9b3345a 100644 --- a/payment_sdk/src/components/sections/PayPaySection.tsx +++ b/payment_sdk/src/components/sections/PayPaySection.tsx @@ -1,11 +1,14 @@ -import { StyleSheet, View } from "react-native"; import React, { useContext } from "react"; -import SubmitButton from "../SubmitButton"; -import LightBox from "../LightBox"; -import { StateContext } from "../../state"; -import { PaymentType } from "../../util/types"; +import { StyleSheet, View } from "react-native"; + +import { StateContext } from "@context/state"; + +import { PaymentType } from "@util/types"; + import KomojuText from "../KomojuText"; +import LightBox from "../LightBox"; +import SubmitButton from "../SubmitButton"; const PayPaySection = () => { const { sessionPay } = useContext(StateContext); diff --git a/payment_sdk/src/components/sections/SheetFooter.tsx b/payment_sdk/src/components/sections/SheetFooter.tsx index ea30847..b179196 100644 --- a/payment_sdk/src/components/sections/SheetFooter.tsx +++ b/payment_sdk/src/components/sections/SheetFooter.tsx @@ -1,13 +1,15 @@ -import { Image, StyleSheet, Platform, View } from "react-native"; import React from "react"; -type Props = {}; +import { Image, StyleSheet, View } from "react-native"; -const SheetFooter = (props: Props) => { +import FirstFooterImage from "@assets/images/footer_image1.png"; +import SecondFooterImage from "@assets/images/footer_image2.png"; + +const SheetFooter = () => { return ( - - + + ); }; diff --git a/payment_sdk/src/KomojuProvider.tsx b/payment_sdk/src/context/KomojuProvider.tsx similarity index 94% rename from payment_sdk/src/KomojuProvider.tsx rename to payment_sdk/src/context/KomojuProvider.tsx index 3706e65..cace9a7 100644 --- a/payment_sdk/src/KomojuProvider.tsx +++ b/payment_sdk/src/context/KomojuProvider.tsx @@ -5,9 +5,19 @@ import React, { useMemo, useRef, } from "react"; + import { Alert } from "react-native"; + import i18next from "i18next"; +import StateProvider from "@components/paymentState/stateProvider"; +import Sheet, { SheetRefProps } from "@components/Sheet"; + +import payForSession from "@services/payForSessionService"; +import sessionShow from "@services/sessionShow"; + +import { sessionParameterName, tokenParameterName } from "@util/constants"; +import { parsePaymentMethods } from "@util/helpers"; import { CreatePaymentFuncType, initialState, @@ -19,18 +29,11 @@ import { sessionPayProps, TokenResponseStatuses, webViewDataInitialState, -} from "./util/types"; +} from "@util/types"; +import { validateSessionResponse } from "@util/validator"; +import "@assets/languages/i18n"; import { Actions, DispatchContext, KomojuContext } from "./state"; -import StateProvider from "./components/paymentState/stateProvider"; -import payForSession from "./services/payForSessionService"; -import sessionShow from "./services/sessionShow"; -import { validateSessionResponse } from "./util/validator"; -import { sessionParameterName, tokenParameterName } from "./util/constants"; -import Sheet, { SheetRefProps } from "./components/Sheet"; - -import "./assets/languages/i18n"; -import { parsePaymentMethods } from "./util/helpers"; type KomojuProviderIprops = { children?: ReactNode | ReactNode[]; @@ -89,7 +92,7 @@ export const MainStateProvider = (props: KomojuProviderIprops) => { }; // fetch session status to check if the payment is completed - let sessionResponse = await sessionShow(sessionShowPayload); + const sessionResponse = await sessionShow(sessionShowPayload); // invoking client provided onDismiss callback onDismissCallback.current(sessionResponse); } diff --git a/payment_sdk/src/state.ts b/payment_sdk/src/context/state.ts similarity index 98% rename from payment_sdk/src/state.ts rename to payment_sdk/src/context/state.ts index 7e2ebfd..abc9dd1 100644 --- a/payment_sdk/src/state.ts +++ b/payment_sdk/src/context/state.ts @@ -1,7 +1,6 @@ import { createContext } from "react"; -import { noop } from "./util/constants"; - +import { noop } from "@util/constants"; import { ActionType, CreatePaymentFuncType, @@ -9,7 +8,7 @@ import { PaymentType, State, initialState, -} from "./util/types"; +} from "@util/types"; /** * Action types for the reducer diff --git a/payment_sdk/src/index.ts b/payment_sdk/src/index.ts index 23647fe..2a211b4 100644 --- a/payment_sdk/src/index.ts +++ b/payment_sdk/src/index.ts @@ -1,8 +1,9 @@ import { useContext } from "react"; -import { KomojuProvider } from "./KomojuProvider"; -import { KomojuContext } from "./state"; -import { LanguageTypes, PaymentType } from "./util/types"; +import { KomojuProvider } from "@context/KomojuProvider"; +import { KomojuContext } from "@context/state"; + +import { LanguageTypes, PaymentType } from "@util/types"; /** * KomojuSDK provides context utilities for the Komoju payment system. diff --git a/payment_sdk/src/services/payForSessionService.ts b/payment_sdk/src/services/payForSessionService.ts index 37adcaf..aa6a309 100644 --- a/payment_sdk/src/services/payForSessionService.ts +++ b/payment_sdk/src/services/payForSessionService.ts @@ -1,10 +1,10 @@ -import { BASE_URL_API } from "../util/constants"; -import { getMonthYearFromExpiry, printLog } from "../util/helpers"; +import { BASE_URL_API } from "@util/constants"; +import { getMonthYearFromExpiry, printLog } from "@util/helpers"; import { payForSessionProps, PaymentType, SessionPayResponseType, -} from "../util/types"; +} from "@util/types"; /** * Processes a payment for a given session. diff --git a/payment_sdk/src/services/sessionShow.ts b/payment_sdk/src/services/sessionShow.ts index f3674d2..5eac90d 100644 --- a/payment_sdk/src/services/sessionShow.ts +++ b/payment_sdk/src/services/sessionShow.ts @@ -1,6 +1,6 @@ -import { BASE_URL_API } from "../util/constants"; -import { printLog } from "../util/helpers"; -import { SessionShowResponseType } from "../util/types"; +import { BASE_URL_API } from "@util/constants"; +import { printLog } from "@util/helpers"; +import { SessionShowResponseType } from "@util/types"; type SessionShowProps = { sessionId: string; diff --git a/payment_sdk/src/util/display.ts b/payment_sdk/src/util/display.ts new file mode 100644 index 0000000..5b73f92 --- /dev/null +++ b/payment_sdk/src/util/display.ts @@ -0,0 +1,27 @@ +import {Dimensions, PixelRatio, Platform} from 'react-native'; + +export type DimensionType = 'width' | 'height'; + +const {width: WINDOW_WIDTH, height: WINDOW_HEIGHT} = Dimensions.get('window'); + +// Design resolution +const designWidth = 375; +const designHeight = 812; + +// Convert dp to pixel +const dpToPixel = (dp: number, dimension: DimensionType): number => { + const designDimension = dimension === 'width' ? designWidth : designHeight; + return ( + (dp / designDimension) * + (dimension === 'width' ? WINDOW_WIDTH : WINDOW_HEIGHT) + ); +}; + +// Convert dp to sp for font size +const fontSizeDPToSP = (size: number): number => { + const scale = Platform.OS === 'ios' ? 1 : PixelRatio.getFontScale(); + const spFontSize = size * scale; + return spFontSize; +}; + +export {dpToPixel, fontSizeDPToSP, WINDOW_WIDTH, WINDOW_HEIGHT}; diff --git a/payment_sdk/src/util/helpers.ts b/payment_sdk/src/util/helpers.ts index cb7ec6f..aaef771 100644 --- a/payment_sdk/src/util/helpers.ts +++ b/payment_sdk/src/util/helpers.ts @@ -1,4 +1,6 @@ import { Dimensions, Platform } from "react-native"; + +import { cardTypeRegex } from "./constants"; import { brandsType, CardTypes, @@ -7,7 +9,6 @@ import { PaymentType, sessionShowPaymentMethodType, } from "./types"; -import { cardTypeRegex } from "./constants"; export const isDevApp = __DEV__; @@ -111,10 +112,10 @@ export const parseBrands = ( obj: string[] | { [key: string]: brandsType } | undefined ) => { // Initialize an empty array to store the converted objects - let result = []; + const result = []; // Iterate over the keys of the input object - for (let key in obj) { + for (const key in obj) { if (obj.hasOwnProperty(key)) { // Create a new object with 'type' as the key and 'icon' as the value result.push({ type: key, icon: obj[key].icon }); diff --git a/payment_sdk/tsconfig.json b/payment_sdk/tsconfig.json index 1c2b896..041e40a 100644 --- a/payment_sdk/tsconfig.json +++ b/payment_sdk/tsconfig.json @@ -2,7 +2,10 @@ "compilerOptions": { "target": "es5", "module": "commonjs", - "lib": ["dom", "es2015"], + "lib": [ + "dom", + "es2015" + ], "jsx": "react", "declaration": true, "outDir": "lib", @@ -11,8 +14,37 @@ "moduleResolution": "node", "esModuleInterop": true, "skipLibCheck": true, - "forceConsistentCasingInFileNames": true + "forceConsistentCasingInFileNames": true, + "allowSyntheticDefaultImports": true, + "baseUrl": "./src", + "paths": { + "@services/*": [ + "services/*" + ], + "@assets/*": [ + "assets/*" + ], + "@components/*": [ + "components/*" + ], + "@util/*": [ + "util/*" + ], + "@context/*": [ + "context/*" + ] + } }, - "include": ["src"], - "exclude": ["node_modules", "lib", "__tests__"] -} + "include": [ + "src", + "assets.d.ts" + ], + "exclude": [ + "node_modules", + "lib", + "__tests__", + "babel.config.js", + "metro.config.js", + "jest.config.js" + ] +} \ No newline at end of file From ec903c23f59b95541f7e9cd8413c6b63c4aa0a94 Mon Sep 17 00:00:00 2001 From: Chathura Date: Fri, 5 Jul 2024 17:13:40 +0530 Subject: [PATCH 2/6] eslinting changes p1 --- payment_sdk/babel.config.js | 16 ++++++++++++++++ payment_sdk/jest.config.js | 9 ++++++++- payment_sdk/package.json | 1 + 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/payment_sdk/babel.config.js b/payment_sdk/babel.config.js index 2c38c60..39ed742 100644 --- a/payment_sdk/babel.config.js +++ b/payment_sdk/babel.config.js @@ -5,4 +5,20 @@ module.exports = { "@babel/preset-typescript", "module:@react-native/babel-preset", ], + plugins: [ + [ + 'module-resolver', + { + root: ['./src'], + extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'], + alias: { + "@services": "./src/services", + "@assets": "./src/assets", + "@components": "./src/components", + "@util": "./src/util", + "@context": "./src/context" + } + } + ] + ] }; diff --git a/payment_sdk/jest.config.js b/payment_sdk/jest.config.js index 24466d9..eff5142 100644 --- a/payment_sdk/jest.config.js +++ b/payment_sdk/jest.config.js @@ -1,3 +1,9 @@ +/* eslint-disable no-undef */ +/* eslint-disable @typescript-eslint/no-var-requires */ +const { pathsToModuleNameMapper } = require("ts-jest"); + +const { compilerOptions } = require("./tsconfig.json"); + module.exports = { preset: "react-native", testEnvironment: "node", @@ -5,4 +11,5 @@ module.exports = { setupFiles: ["/setupTests.js"], setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"], transformIgnorePatterns: [], -}; + moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: "/src/" }), +}; \ No newline at end of file diff --git a/payment_sdk/package.json b/payment_sdk/package.json index dcb01b4..b21a1ed 100644 --- a/payment_sdk/package.json +++ b/payment_sdk/package.json @@ -23,6 +23,7 @@ "@types/react": "^18.3.3", "@typescript-eslint/parser": "^7.12.0", "babel-jest": "^29.7.0", + "babel-plugin-module-resolver": "^5.0.2", "eslint": "9.x", "eslint-plugin-import": "^2.29.1", "eslint-plugin-react": "^7.34.2", From c4c6e6fb008a87b5186240555c12b49786577473 Mon Sep 17 00:00:00 2001 From: Chathura Date: Sun, 7 Jul 2024 00:34:39 +0530 Subject: [PATCH 3/6] eslinting changes p1 --- payment_sdk/package.json | 9 ++++++-- payment_sdk/src/components/CardInputGroup.tsx | 10 ++++---- payment_sdk/src/components/KomojuText.tsx | 2 +- payment_sdk/src/components/Sheet.tsx | 23 +++++++++++-------- .../src/components/sections/CardSection.tsx | 4 ++++ .../components/sections/KonbiniSection.tsx | 4 ++++ payment_sdk/src/context/KomojuProvider.tsx | 16 ++++++++++++- payment_sdk/src/util/helpers.ts | 8 +++++++ payment_sdk/tsconfig.json | 9 ++++---- 9 files changed, 63 insertions(+), 22 deletions(-) diff --git a/payment_sdk/package.json b/payment_sdk/package.json index b21a1ed..f8258ad 100644 --- a/payment_sdk/package.json +++ b/payment_sdk/package.json @@ -2,8 +2,13 @@ "name": "react-native-komoju", "version": "1.0.0", "description": "degica payment SDK", - "main": "src/index.ts", + "main": "dist/index.js", + "types": "dist/index.d.ts", + "files": ["dist"], "scripts": { + "build": "npm run build:js && npm run build:types", + "build:js": "babel src --out-dir dist --extensions \".ts,.tsx\" --copy-files", + "build:types": "tsc --emitDeclarationOnly --outDir dist", "test": "jest", "lint": "eslint . --ignore-pattern babel.config.js --ignore-pattern jest.config.js --ignore-pattern setupTests.js" }, @@ -56,4 +61,4 @@ "react": "*", "react-native": "*" } -} +} \ No newline at end of file diff --git a/payment_sdk/src/components/CardInputGroup.tsx b/payment_sdk/src/components/CardInputGroup.tsx index b5d5f92..16aa6b4 100644 --- a/payment_sdk/src/components/CardInputGroup.tsx +++ b/payment_sdk/src/components/CardInputGroup.tsx @@ -42,7 +42,7 @@ type Props = { const CARD_WIDTH = 26; const CARD_HEIGHT = 30; -const CardInputGroup = memo(({ inputErrors, resetError }: Props) => { +const CardInputGroup = ({ inputErrors, resetError }: Props) => { const dispatch = useContext(DispatchContext); const [cardType, setCardType] = useState(null); const [toggleScanCard, setToggleScanCard] = useState(false); @@ -153,7 +153,7 @@ const CardInputGroup = memo(({ inputErrors, resetError }: Props) => { { { )} ); -}); +}; -export default CardInputGroup; +export default memo(CardInputGroup); const styles = StyleSheet.create({ parentContainer: { diff --git a/payment_sdk/src/components/KomojuText.tsx b/payment_sdk/src/components/KomojuText.tsx index 6cb300e..5cccda0 100644 --- a/payment_sdk/src/components/KomojuText.tsx +++ b/payment_sdk/src/components/KomojuText.tsx @@ -12,7 +12,7 @@ interface KomojuTextProps { const KomojuText = ({ children, style = {} }: KomojuTextProps) => { const { t } = useTranslation(); - return {t(children)}; + return {t(children as string)}; }; export default KomojuText; diff --git a/payment_sdk/src/components/Sheet.tsx b/payment_sdk/src/components/Sheet.tsx index e01b38b..c1ae75a 100644 --- a/payment_sdk/src/components/Sheet.tsx +++ b/payment_sdk/src/components/Sheet.tsx @@ -198,6 +198,8 @@ const Sheet: ForwardRefRenderFunction = ( closeSheet( !( paymentState === ResponseScreenStatuses.SUCCESS || + // TODO: Fix this type error + // @ts-expect-error - Property 'COMPLETE' does not exist on type 'ResponseScreenStatuses'. paymentState === ResponseScreenStatuses.COMPLETE ) ) @@ -206,15 +208,18 @@ const Sheet: ForwardRefRenderFunction = ( - {paymentState && paymentState !== ResponseScreenStatuses.COMPLETE ? ( - - ) : ( - - )} + { + // TODO: Fix this type error + // @ts-expect-error - Property 'COMPLETE' does not exist on type 'ResponseScreenStatuses'. + paymentState && paymentState !== ResponseScreenStatuses.COMPLETE ? ( + + ) : ( + + )} ); diff --git a/payment_sdk/src/components/sections/CardSection.tsx b/payment_sdk/src/components/sections/CardSection.tsx index 14dd474..f33398c 100644 --- a/payment_sdk/src/components/sections/CardSection.tsx +++ b/payment_sdk/src/components/sections/CardSection.tsx @@ -40,6 +40,8 @@ const CardSection = (): JSX.Element => { const dispatch = useContext(DispatchContext); const resetError = (type: string) => { + // TODO: Fix this type error + // @ts-expect-error - Type 'string' cannot be used to index type 'object'. setInputErrors((pre: object) => ({ ...pre, [type]: false })); }; @@ -49,6 +51,8 @@ const CardSection = (): JSX.Element => { cardCVV, cardNumber, cardExpiredDate, + // TODO: Fix this type error + // @ts-expect-error - Type 'object' is not assignable to type 'SetStateAction'. setInputErrors, }); diff --git a/payment_sdk/src/components/sections/KonbiniSection.tsx b/payment_sdk/src/components/sections/KonbiniSection.tsx index 719396c..531ac18 100644 --- a/payment_sdk/src/components/sections/KonbiniSection.tsx +++ b/payment_sdk/src/components/sections/KonbiniSection.tsx @@ -44,6 +44,8 @@ const KonbiniSection = (): JSX.Element => { const konbiniBrands = parseBrands(konbiniPaymentMethodData?.brands || {}); const onPay = () => { + // TODO: Fix this type error + // @ts-expect-error - Type 'string' is not assignable to type 'object'. const isValid = validateKonbiniFormFields({ name, email, setInputErrors }); if (isValid) { @@ -59,6 +61,8 @@ const KonbiniSection = (): JSX.Element => { }; const resetError = (type: string) => { + // TODO: Fix this type error + // @ts-expect-error - Type 'string' cannot be used to index type 'object'. setInputErrors((pre: object) => ({ ...pre, [type]: false })); }; diff --git a/payment_sdk/src/context/KomojuProvider.tsx b/payment_sdk/src/context/KomojuProvider.tsx index cace9a7..1f37184 100644 --- a/payment_sdk/src/context/KomojuProvider.tsx +++ b/payment_sdk/src/context/KomojuProvider.tsx @@ -94,6 +94,8 @@ export const MainStateProvider = (props: KomojuProviderIprops) => { // fetch session status to check if the payment is completed const sessionResponse = await sessionShow(sessionShowPayload); // invoking client provided onDismiss callback + // TODO: Fix this type error + // @ts-expect-error - Argument of type 'PaymentSessionResponse' is not assignable to parameter of type 'string'. onDismissCallback.current(sessionResponse); } }; @@ -124,6 +126,8 @@ export const MainStateProvider = (props: KomojuProviderIprops) => { // validating the session data and closing the payment gateway if data is not valid if (validateSessionResponse(sessionData)) { + // TODO: Fix this type error + // @ts-expect-error - Object is possibly 'null'. sheetRef?.current?.close(false); Alert.alert("Error", "Session expired"); } else { @@ -200,6 +204,8 @@ export const MainStateProvider = (props: KomojuProviderIprops) => { onPaymentSuccess(); // calling user passed onComplete method with session response data onCompleteCallback.current && + // TODO: Fix this type error + // @ts-expect-error - Argument of type 'PaymentSessionResponse' is not assignable to parameter of type 'string'. onCompleteCallback.current(sessionResponse); } else { onPaymentFailed(); @@ -232,6 +238,8 @@ export const MainStateProvider = (props: KomojuProviderIprops) => { onPaymentSuccess(); // calling user passed onComplete method with session response data onCompleteCallback.current && + // TODO: Fix this type error + // @ts-expect-error - Argument of type 'PaymentSessionResponse' is not assignable to parameter of type 'string'. onCompleteCallback.current(sessionResponse); } else { onPaymentFailed(); @@ -296,8 +304,12 @@ export const MainStateProvider = (props: KomojuProviderIprops) => { }); // setting client provided onComplete callback into a ref + // TODO: Fix this type error + // @ts-expect-error - Argument of type 'PaymentSessionResponse' is not assignable to parameter of type 'string'. onCompleteCallback.current = onComplete; // setting client provided onDismiss callback into a ref + // TODO: Fix this type error + // @ts-expect-error - Argument of type 'PaymentSessionResponse' is not assignable to parameter of type 'string'. onDismissCallback.current = onDismiss; // setting client provided session Id and into a ref sessionIdRef.current = sessionId; @@ -319,7 +331,9 @@ export const MainStateProvider = (props: KomojuProviderIprops) => { // take params from state or props }, []); - const initializeKomoju = useCallback((params: InitPrams) => {}, []); + // TODO: Fix this type error + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const initializeKomoju = useCallback((params: InitPrams) => { }, []); const renderPaymentUI = useMemo(() => { const UI = ; diff --git a/payment_sdk/src/util/helpers.ts b/payment_sdk/src/util/helpers.ts index aaef771..be3f627 100644 --- a/payment_sdk/src/util/helpers.ts +++ b/payment_sdk/src/util/helpers.ts @@ -26,12 +26,16 @@ export const formatExpiry = (expiry: string) => { const prevExpiry = expiry.split(" / ").join("/"); if (!prevExpiry) return null; + // TODO: Fix this type error + // eslint-disable-next-line @typescript-eslint/no-explicit-any let expiryDate: any = prevExpiry; if (/^[2-9]$/.test(expiryDate)) { expiryDate = `0${expiryDate}`; } if (prevExpiry.length === 2 && +prevExpiry > 12) { + // TODO: Fix this type error + // @ts-expect-error - Type 'string' is not assignable to const [head, ...tail] = prevExpiry; expiryDate = `0${head}/${tail.join("")}`; } @@ -116,7 +120,11 @@ export const parseBrands = ( // Iterate over the keys of the input object for (const key in obj) { + // TODO: Fix this type error + // eslint-disable-next-line no-prototype-builtins if (obj.hasOwnProperty(key)) { + // TODO: Fix this type error + // @ts-expect-error - Type 'string' cannot be used to index type 'brandsType'. // Create a new object with 'type' as the key and 'icon' as the value result.push({ type: key, icon: obj[key].icon }); } diff --git a/payment_sdk/tsconfig.json b/payment_sdk/tsconfig.json index 3050740..0ef35e7 100644 --- a/payment_sdk/tsconfig.json +++ b/payment_sdk/tsconfig.json @@ -8,7 +8,8 @@ ], "jsx": "react", "declaration": true, - "outDir": "lib", + "emitDeclarationOnly": true, + "outDir": "./dist", "rootDir": "src", "strict": true, "moduleResolution": "node", @@ -41,10 +42,10 @@ ], "exclude": [ "node_modules", - "lib", - "__tests__", + "src/__tests__", "babel.config.js", "metro.config.js", - "jest.config.js" + "jest.config.js", + "dist" ] } \ No newline at end of file From 025111b111ca63b63a88c1951e4faff1f0b3907a Mon Sep 17 00:00:00 2001 From: Chathura Date: Mon, 8 Jul 2024 08:55:38 +0530 Subject: [PATCH 4/6] eslinting changes p2 with ci/cd flow --- .github/workflows/test.yml | 3 +++ payment_sdk/eslint.config.mjs | 11 +++++++++++ payment_sdk/package.json | 2 +- payment_sdk/src/assets/languages/i18n.js | 1 + .../components/paymentState/stateProvider.tsx | 2 ++ payment_sdk/src/context/state.ts | 4 ++++ .../src/services/payForSessionService.ts | 4 ++++ payment_sdk/src/util/types.ts | 18 +++++++++++++----- 8 files changed, 39 insertions(+), 6 deletions(-) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index ebe10db..a83ec06 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -27,5 +27,8 @@ jobs: - name: Install dependencies run: cd payment_sdk && yarn install + - name: Run Lint Check + run: cd payment_sdk && yarn lint + - name: Run Jest tests run: cd payment_sdk && yarn test diff --git a/payment_sdk/eslint.config.mjs b/payment_sdk/eslint.config.mjs index eb2cb31..b0669a5 100644 --- a/payment_sdk/eslint.config.mjs +++ b/payment_sdk/eslint.config.mjs @@ -6,6 +6,17 @@ import globals from "globals"; import tseslint from "typescript-eslint"; export default [ + { + ignores: [ + "node_modules/", + "dist/*", + "*.config.js", + "*.config.mjs", + "babel.config.js", + "setupTests.js", + "src/__tests__/*", + ] + }, { files: ["**/*.ts", "**/*.tsx"], languageOptions: diff --git a/payment_sdk/package.json b/payment_sdk/package.json index f8258ad..44e5aac 100644 --- a/payment_sdk/package.json +++ b/payment_sdk/package.json @@ -10,7 +10,7 @@ "build:js": "babel src --out-dir dist --extensions \".ts,.tsx\" --copy-files", "build:types": "tsc --emitDeclarationOnly --outDir dist", "test": "jest", - "lint": "eslint . --ignore-pattern babel.config.js --ignore-pattern jest.config.js --ignore-pattern setupTests.js" + "lint": "eslint ." }, "author": "", "license": "MIT", diff --git a/payment_sdk/src/assets/languages/i18n.js b/payment_sdk/src/assets/languages/i18n.js index 48110e0..e2cf456 100644 --- a/payment_sdk/src/assets/languages/i18n.js +++ b/payment_sdk/src/assets/languages/i18n.js @@ -1,5 +1,6 @@ import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; + import en from './en.json'; import ja from './ja.json'; diff --git a/payment_sdk/src/components/paymentState/stateProvider.tsx b/payment_sdk/src/components/paymentState/stateProvider.tsx index 2e9f300..f3cc386 100644 --- a/payment_sdk/src/components/paymentState/stateProvider.tsx +++ b/payment_sdk/src/components/paymentState/stateProvider.tsx @@ -1,3 +1,5 @@ +// TODO: Fix this type error +/* eslint-disable @typescript-eslint/no-explicit-any */ import React, { ReactNode, useReducer } from "react"; import { DispatchContext, StateContext, reducer } from "@context/state"; diff --git a/payment_sdk/src/context/state.ts b/payment_sdk/src/context/state.ts index abc9dd1..69f2ca8 100644 --- a/payment_sdk/src/context/state.ts +++ b/payment_sdk/src/context/state.ts @@ -131,6 +131,8 @@ const defaultValue = { * Function to create a payment session. * @param {CreatePaymentFuncType} data - The data for creating a payment session. */ + // TODO: Fix this type error + // eslint-disable-next-line @typescript-eslint/no-unused-vars createPayment: (data: CreatePaymentFuncType) => {}, /** * Function to display the payment sheet UI. @@ -140,6 +142,8 @@ const defaultValue = { * Function to initialize Komoju without relying on props. * @param {InitPrams} data - The initialization parameters. */ + // TODO: Fix this type error + // eslint-disable-next-line @typescript-eslint/no-unused-vars initializeKomoju: (data: InitPrams) => {}, }; /** diff --git a/payment_sdk/src/services/payForSessionService.ts b/payment_sdk/src/services/payForSessionService.ts index bf1d35f..a4c27e9 100644 --- a/payment_sdk/src/services/payForSessionService.ts +++ b/payment_sdk/src/services/payForSessionService.ts @@ -39,10 +39,14 @@ const payForSession = async ({ // credit card payment type payment type case PaymentType.CREDIT: // refactoring input data from user to separate month and year + // TODO: Fix this type error + // eslint-disable-next-line no-case-declarations const { month, year } = getMonthYearFromExpiry( paymentDetails?.cardExpiredDate || "" ); // refactoring number to remove all unsavory empty spaces from credit card number + // TODO: Fix this type error + // eslint-disable-next-line no-case-declarations const number = paymentDetails?.cardNumber?.replaceAll(" ", ""); // credit card payment_details mandatory parameters type, number, month, year diff --git a/payment_sdk/src/util/types.ts b/payment_sdk/src/util/types.ts index 6a4db0d..dfb26e3 100644 --- a/payment_sdk/src/util/types.ts +++ b/payment_sdk/src/util/types.ts @@ -140,6 +140,8 @@ export type SessionShowResponseType = { }; type setInputErrorType = { + // TODO: Fix this type error + // eslint-disable-next-line @typescript-eslint/ban-types setInputErrors: (data: object) => {}; }; @@ -178,6 +180,8 @@ export type State = CardDetailsType & /** * Callback function to call relevant api for each payment type. */ + // TODO: Fix this type error + // eslint-disable-next-line @typescript-eslint/ban-types sessionPay: Function; /** * Web view url and callback when url change at web view. @@ -201,9 +205,9 @@ export type State = CardDetailsType & * this state is used to toggle(show hide) the success and failed screens. */ paymentState: - | ResponseScreenStatuses.SUCCESS - | ResponseScreenStatuses.FAILED - | ""; + | ResponseScreenStatuses.SUCCESS + | ResponseScreenStatuses.FAILED + | ""; }; export type sessionPayProps = { @@ -211,7 +215,9 @@ export type sessionPayProps = { paymentDetails?: CardDetailsType; }; -export const webViewDataInitialState = { link: "", onNavChange: ({}) => {} }; +// TODO: Fix this type error +// eslint-disable-next-line no-empty-pattern +export const webViewDataInitialState = { link: "", onNavChange: ({ }) => { } }; // Define the initial state export const initialState: State = { @@ -232,11 +238,13 @@ export const initialState: State = { email: "", /** konbini pay related states start */ - sessionPay: () => {}, + sessionPay: () => { }, webViewData: webViewDataInitialState, amount: "", currency: CurrencyTypes.JPY, paymentState: "", paymentMethods: [], }; +// TODO: Fix this type error +// eslint-disable-next-line @typescript-eslint/no-explicit-any export type ActionType = { type: string; payload: any }; From 531dfa1d969e260a568eee36c4a96a7ee7f244f1 Mon Sep 17 00:00:00 2001 From: Chathura Date: Mon, 8 Jul 2024 15:00:45 +0530 Subject: [PATCH 5/6] dark mode and card determine fix --- example/PaymentScreen.tsx | 26 ++++++++++++++++--- payment_sdk/src/components/CardInputGroup.tsx | 2 +- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/example/PaymentScreen.tsx b/example/PaymentScreen.tsx index 7d0fbaf..6147e7c 100644 --- a/example/PaymentScreen.tsx +++ b/example/PaymentScreen.tsx @@ -1,5 +1,6 @@ import React, {useState} from 'react'; import { + useColorScheme, View, Text, TextInput, @@ -18,6 +19,7 @@ export enum CurrencyTypes { const PaymentScreen = () => { const [amount, setAmount] = useState(''); const [currency, setCurrency] = useState(CurrencyTypes.JPY); + const colorScheme = useColorScheme(); // Detects the color scheme of the device // use createPayment method to invoke the payment screen const {createPayment} = KomojuSDK.useKomoju(); @@ -45,8 +47,21 @@ const PaymentScreen = () => { setCurrency(key); }; + const dynamicStyles = StyleSheet.create({ + container: { + backgroundColor: colorScheme === 'dark' ? '#333' : '#FFF', + }, + text: { + color: colorScheme === 'dark' ? '#FFF' : '#000', + }, + input: { + backgroundColor: colorScheme === 'dark' ? '#555' : '#FFF', + color: colorScheme === 'dark' ? '#FFF' : '#000', + }, + }); + return ( - + {(Object.keys(CurrencyTypes) as Array).map( key => ( @@ -55,6 +70,7 @@ const PaymentScreen = () => { style={[ styles.currencyText, key === currency && styles.currencySelectedText, + dynamicStyles.text, ]}> {key} @@ -62,10 +78,13 @@ const PaymentScreen = () => { ), )} - Enter Amount to Pay with Komoju + + Enter Amount to Pay with Komoju + { title="Checkout" onPress={handleSessionPay} disabled={!amount} + color={colorScheme === 'dark' ? '#888' : '#007AFF'} /> diff --git a/payment_sdk/src/components/CardInputGroup.tsx b/payment_sdk/src/components/CardInputGroup.tsx index 16aa6b4..89727f9 100644 --- a/payment_sdk/src/components/CardInputGroup.tsx +++ b/payment_sdk/src/components/CardInputGroup.tsx @@ -55,7 +55,7 @@ const CardInputGroup = ({ inputErrors, resetError }: Props) => { const type = determineCardType(cardNumber); setCardType(type); } - }, []); + }, [cardNumber]); const renderSvg = (uri: string, widthMultiplier = 1) => ( Date: Mon, 15 Jul 2024 19:36:38 +0530 Subject: [PATCH 6/6] removed the card scan functionality --- example/App.tsx | 2 +- example/PaymentScreen.tsx | 2 +- example/package.json | 7 +-- payment_sdk/package.json | 45 +++++++++++++------ payment_sdk/src/components/CardInputGroup.tsx | 10 ++--- payment_sdk/src/components/Input.tsx | 2 + payment_sdk/src/components/ScanCardButton.tsx | 5 ++- payment_sdk/tsconfig.json | 4 +- 8 files changed, 47 insertions(+), 30 deletions(-) diff --git a/example/App.tsx b/example/App.tsx index 933b0e3..de73881 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {KomojuSDK} from 'react-native-komoju'; +import {KomojuSDK} from '@komoju/komoju-react-native'; import {PUBLIC_KEY} from '@env'; import PaymentScreen from './PaymentScreen'; diff --git a/example/PaymentScreen.tsx b/example/PaymentScreen.tsx index 6147e7c..0817179 100644 --- a/example/PaymentScreen.tsx +++ b/example/PaymentScreen.tsx @@ -8,7 +8,7 @@ import { StyleSheet, Pressable, } from 'react-native'; -import {KomojuSDK} from 'react-native-komoju'; +import {KomojuSDK} from '@komoju/komoju-react-native'; import createSession from './services/sessionService'; export enum CurrencyTypes { diff --git a/example/package.json b/example/package.json index ab1e079..a5108f1 100644 --- a/example/package.json +++ b/example/package.json @@ -10,16 +10,13 @@ "test": "jest" }, "dependencies": { + "@komoju/komoju-react-native": "0.0.1", "i18next": "^23.11.5", "react": "18.2.0", "react-i18next": "^14.1.2", "react-native": "0.74.1", - "react-native-komoju": "../payment_sdk", "react-native-svg": "^15.3.0", - "react-native-vision-camera": "^4.3.2", - "react-native-vision-camera-text-recognition": "^3.0.4", - "react-native-webview": "^13.10.2", - "react-native-worklets-core": "^1.3.3" + "react-native-webview": "^13.10.2" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/payment_sdk/package.json b/payment_sdk/package.json index 44e5aac..983e93d 100644 --- a/payment_sdk/package.json +++ b/payment_sdk/package.json @@ -1,18 +1,34 @@ { - "name": "react-native-komoju", - "version": "1.0.0", + "name": "@komoju/komoju-react-native", + "version": "0.0.1", + "private": false, "description": "degica payment SDK", "main": "dist/index.js", "types": "dist/index.d.ts", - "files": ["dist"], + "files": [ + "dist" + ], "scripts": { - "build": "npm run build:js && npm run build:types", + "build": "npm run build:js && npm run build:types && npm pack", "build:js": "babel src --out-dir dist --extensions \".ts,.tsx\" --copy-files", - "build:types": "tsc --emitDeclarationOnly --outDir dist", + "build:types": "tsc --emitDeclarationOnly && tsc-alias", "test": "jest", "lint": "eslint ." }, - "author": "", + "repository": { + "type": "git", + "url": "git+https://github.com/degica/mobile-sdk_react-native.git" + }, + "keywords": [ + "react-native", + "library", + "degica" + ], + "author": "chathura.pathiranage@rhino-partners.com", + "bugs": { + "url": "https://github.com/degica/mobile-sdk_react-native.git/issues" + }, + "homepage": "https://github.com/degica/mobile-sdk_react-native.git#readme", "license": "MIT", "devDependencies": { "@babel/cli": "^7.24.6", @@ -38,27 +54,28 @@ "react-native": "0.74.1", "react-native-gesture-handler": "^2.16.2", "react-native-reanimated": "^3.11.0", - "react-native-svg": "^15.3.0", - "react-native-webview": "^13.10.2", "react-test-renderer": "^18.2.0", "ts-jest": "^29.1.4", "typescript": "^5.4.5", - "typescript-eslint": "^7.12.0" + "typescript-eslint": "^7.12.0", + "react-native-vision-camera": "^4.3.2", + "react-native-vision-camera-text-recognition": "^3.0.4", + "react-native-worklets-core": "^1.3.3" }, "dependencies": { "i18next": "^23.11.5", "react-i18next": "^14.1.2", "react-native-svg": "^15.3.0", - "react-native-vision-camera": "^4.3.2", - "react-native-vision-camera-text-recognition": "^3.0.4", - "react-native-webview": "^13.10.2", - "react-native-worklets-core": "^1.3.3" + "react-native-webview": "^13.10.2" }, "resolutions": { "@types/react": "^18.2.44" }, "peerDependencies": { "react": "*", - "react-native": "*" + "react-native": "*", + "react-native-vision-camera": "^4.3.2", + "react-native-vision-camera-text-recognition": "^3.0.4", + "react-native-worklets-core": "^1.3.3" } } \ No newline at end of file diff --git a/payment_sdk/src/components/CardInputGroup.tsx b/payment_sdk/src/components/CardInputGroup.tsx index 89727f9..7c78f92 100644 --- a/payment_sdk/src/components/CardInputGroup.tsx +++ b/payment_sdk/src/components/CardInputGroup.tsx @@ -28,7 +28,7 @@ import { isCardNumberValid, validateCardExpiry } from "@util/validator"; import CardScanner from "./CardScanner"; import Input from "./Input"; import KomojuText from "./KomojuText"; -import ScanCardButton from "./ScanCardButton"; +// import ScanCardButton from "./ScanCardButton"; type Props = { inputErrors: { @@ -66,9 +66,9 @@ const CardInputGroup = ({ inputErrors, resetError }: Props) => { ); //Toggle card scanner - const toggleCardScanner = () => { - setToggleScanCard((prevState: boolean) => !prevState); - }; + // const toggleCardScanner = () => { + // setToggleScanCard((prevState: boolean) => !prevState); + // }; // Create card image list const cardImage = useCallback(() => { @@ -115,7 +115,7 @@ const CardInputGroup = ({ inputErrors, resetError }: Props) => { CARD_NUMBER - + {/* */} {toggleScanCard ? ( diff --git a/payment_sdk/src/components/Input.tsx b/payment_sdk/src/components/Input.tsx index 572c7f5..66067b7 100644 --- a/payment_sdk/src/components/Input.tsx +++ b/payment_sdk/src/components/Input.tsx @@ -44,6 +44,7 @@ const Input: React.FC = ({ keyboardType={keyboardType} onChangeText={onChangeText} placeholder={t(placeholder || "")} + placeholderTextColor="#7D8C9B" style={[ styles.input, styles.withBorder, @@ -70,6 +71,7 @@ const styles = StyleSheet.create({ borderColor: "#CAD6E1", borderWidth: 1, borderRadius: 8, + color: "#172E44", }, withErrorBorder: { borderColor: "#F24D49", diff --git a/payment_sdk/src/components/ScanCardButton.tsx b/payment_sdk/src/components/ScanCardButton.tsx index 211f456..416e16b 100644 --- a/payment_sdk/src/components/ScanCardButton.tsx +++ b/payment_sdk/src/components/ScanCardButton.tsx @@ -2,8 +2,9 @@ import React from "react"; import { Image, StyleSheet, TouchableOpacity } from "react-native"; -import KomojuText from "./KomojuText"; +import ScannerImage from "@assets/images/scan.png"; +import KomojuText from "./KomojuText"; // When press the scan card button it will open the camera and scan the card, // without manually typing the card number, this will automaticaly fill in the // card field @@ -20,7 +21,7 @@ const ScanCardButton = ({onPress}: ScanCardButtonProps) => { > SCAN_CARD diff --git a/payment_sdk/tsconfig.json b/payment_sdk/tsconfig.json index 0ef35e7..f97074d 100644 --- a/payment_sdk/tsconfig.json +++ b/payment_sdk/tsconfig.json @@ -10,14 +10,14 @@ "declaration": true, "emitDeclarationOnly": true, "outDir": "./dist", - "rootDir": "src", + "rootDir": "./src", + "baseUrl": "./src", "strict": true, "moduleResolution": "node", "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "allowSyntheticDefaultImports": true, - "baseUrl": "./src", "paths": { "@services/*": [ "services/*"