Task/mob 14

payment_sdk/babel.config.js

@@ -16,7 +16,8 @@ module.exports = {
           "@assets": "./src/assets",
           "@components": "./src/components",
           "@util": "./src/util",
-          "@context": "./src/context"
+          "@context": "./src/context",
+          "@theme": "./src/theme",
         }
       }
     ]

payment_sdk/eslint.config.mjs

@@ -78,6 +78,11 @@ export default [
               pattern: "@assets/**",
               group: "internal",
               position: "after"
+            },
+            {
+              pattern: "@theme/**",
+              group: "internal",
+              position: "after"
             }
           ],
           pathGroupsExcludedImportTypes: ["react", "react-native"],

payment_sdk/jest.config.js

@@ -12,4 +12,8 @@ module.exports = {
   setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"],
   transformIgnorePatterns: [],
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: "<rootDir>/src/" }),
+  testPathIgnorePatterns: [
+    "<rootDir>/node_modules/",
+    "<rootDir>/dist/"
+  ]
 };

payment_sdk/setupTests.js

@@ -13,3 +13,26 @@ global.__DEV__ = process.env.NODE_ENV !== "production";
 //   jest.mock('react-native-worklets-core', () => ({
 //     Worklets: jest.fn(),
 //   }));
+
+jest.mock('react-i18next', () => ({
+    useTranslation: () => {
+      return {
+        t: (str) => str,
+        i18n: {
+          changeLanguage: () => new Promise(() => {}),
+        },
+      };
+    },
+    initReactI18next: {
+      type: '3rdParty',
+      init: () => {},
+    },
+  }));
+
+  jest.mock('./src/context/ThemeContext', () => ({
+    ThemeProvider: ({ children }) => children,
+    useTheme: () => ({
+      mode: 'light',
+      toggleMode: jest.fn(),
+    }),
+  }));

payment_sdk/src/__tests__/CardInputGroup.test.tsx

@@ -6,6 +6,8 @@ import { Actions, DispatchContext, StateContext } from "../context/state";
 import CardInputGroup from "../components/CardInputGroup";
 import { isCardNumberValid, validateCardExpiry } from "../util/validator";
 
+import { ThemeProvider } from "../context/ThemeContext";
+
 // Mock helper functions
 jest.mock("../util/helpers", () => ({
   formatCreditCardNumber: jest.fn(),
@@ -38,11 +40,13 @@ const mockDispatch = jest.fn();
 describe("CardInputGroup Component", () => {
   const renderWithContext = (component: ReactNode) => {
     return render(
-      <StateContext.Provider value={mockState}>
-        <DispatchContext.Provider value={mockDispatch}>
-          {component}
-        </DispatchContext.Provider>
-      </StateContext.Provider>
+      <ThemeProvider>
+        <StateContext.Provider value={mockState}>
+          <DispatchContext.Provider value={mockDispatch}>
+            {component}
+          </DispatchContext.Provider>
+        </StateContext.Provider>
+      </ThemeProvider>
     );
   };
 
@@ -55,7 +59,7 @@ describe("CardInputGroup Component", () => {
     const { getByTestId } = renderWithContext(
       <CardInputGroup
         inputErrors={inputGroupMockValues}
-        resetError={(data: string) => {}}
+        resetError={(data: string) => { }}
       />
     );
 
@@ -77,7 +81,7 @@ describe("CardInputGroup Component", () => {
     const { getByTestId } = renderWithContext(
       <CardInputGroup
         inputErrors={inputGroupMockValues}
-        resetError={(data: string) => {}}
+        resetError={(data: string) => { }}
       />
     );
 
@@ -102,7 +106,7 @@ describe("CardInputGroup Component", () => {
     const { getByTestId } = renderWithContext(
       <CardInputGroup
         inputErrors={inputGroupMockValues}
-        resetError={(data: string) => {}}
+        resetError={(data: string) => { }}
       />
     );
 
@@ -125,7 +129,7 @@ describe("CardInputGroup Component", () => {
     const { getByTestId } = renderWithContext(
       <CardInputGroup
         inputErrors={inputGroupMockValues}
-        resetError={(data: string) => {}}
+        resetError={(data: string) => { }}
       />
     );
 
@@ -148,7 +152,7 @@ describe("CardInputGroup Component", () => {
     const { getByTestId } = renderWithContext(
       <CardInputGroup
         inputErrors={inputGroupMockValues}
-        resetError={(data: string) => {}}
+        resetError={(data: string) => { }}
       />
     );
 

payment_sdk/src/components/CardInputGroup.tsx

@@ -22,10 +22,13 @@ import {
   formatCreditCardNumber,
   formatExpiry,
 } from "@util/helpers";
-import { PaymentType, sessionShowPaymentMethodType } from "@util/types";
+import { PaymentType, sessionShowPaymentMethodType, ThemeSchemeType } from "@util/types";
 import { isCardNumberValid, validateCardExpiry } from "@util/validator";
 
 // import CardScanner from "./CardScanner";
+import { resizeFonts, responsiveScale } from "@theme/scalling";
+import { useCurrentTheme } from "@theme/useCurrentTheme";
+
 import Input from "./Input";
 import KomojuText from "./KomojuText";
 // import ScanCardButton from "./ScanCardButton";
@@ -39,13 +42,15 @@ type Props = {
   resetError: (type: string) => void;
 };
 
-const CARD_WIDTH = 26;
-const CARD_HEIGHT = 30;
+const CARD_WIDTH = responsiveScale(30);
+const CARD_HEIGHT = responsiveScale(26);
 
 const CardInputGroup = ({ inputErrors, resetError }: Props) => {
   const dispatch = useContext(DispatchContext);
   const [cardType, setCardType] = useState<string | null>(null);
   // const [toggleScanCard, setToggleScanCard] = useState<boolean>(false);
+  const theme = useCurrentTheme();
+  const styles = getStyles(theme);
   const { cardCVV, cardNumber, cardExpiredDate, paymentMethods } =
     useContext(StateContext);
 
@@ -189,71 +194,75 @@ const CardInputGroup = ({ inputErrors, resetError }: Props) => {
 
 export default memo(CardInputGroup);
 
-const styles = StyleSheet.create({
-  parentContainer: {
-    margin: 16,
-    marginBottom: 24,
-    flexGrow: 0,
-    minHeight: 130,
-  },
-  label: {
-    fontSize: 16,
-    marginBottom: 8,
-    color: "#172E44",
-  },
-  container: {
-    flex: 1,
-    flexDirection: "column",
-    maxHeight: 120,
-  },
-  cardNumberRow: {
-    flex: 1,
-    height: 60,
-  },
-  splitRow: {
-    flex: 1,
-    flexDirection: "row",
-    height: 60,
-  },
-  itemRow: {
-    flex: 1,
-  },
-  numberInputStyle: {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-  expiryInputStyle: {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-  cvvInputStyle: {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    borderBottomLeftRadius: 0,
-  },
-  titleScanRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: 8,
-  },
-  cardContainer: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    position: "absolute",
-    top: 9,
-    right: 0,
-    marginRight: 8,
-  },
-  cardImage: {
-    width: 26,
-    marginRight: 8,
-  },
-  scanContainer: {
-    width: "100%",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});
+const getStyles = (theme: ThemeSchemeType) => {
+  return StyleSheet.create({
+    parentContainer: {
+      margin: responsiveScale(16),
+      marginBottom: responsiveScale(24),
+      flexGrow: 0,
+      minHeight: responsiveScale(130),
+    },
+    label: {
+      fontSize: resizeFonts(16),
+      marginBottom: responsiveScale(8),
+      color: theme.TEXT_COLOR,
+    },
+    container: {
+      flex: 1,
+      flexDirection: "column",
+      maxHeight: responsiveScale(120),
+    },
+    cardNumberRow: {
+      flex: 1,
+      marginBottom: -responsiveScale(1),
+      height: responsiveScale(60),
+    },
+    splitRow: {
+      flex: 1,
+      flexDirection: "row",
+      height: responsiveScale(60),
+    },
+    itemRow: {
+      flex: 1,
+    },
+    numberInputStyle: {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+    },
+    expiryInputStyle: {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+    },
+    cvvInputStyle: {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      borderBottomLeftRadius: 0,
+    },
+    titleScanRow: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: responsiveScale(8),
+    },
+    cardContainer: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      position: "absolute",
+      top: responsiveScale(9),
+      right: 0,
+      marginRight: responsiveScale(8),
+    },
+    cardImage: {
+      width: responsiveScale(26),
+      marginRight: responsiveScale(8),
+    },
+    scanContainer: {
+      width: "100%",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+  });
+
+}

payment_sdk/src/components/Input.tsx

@@ -12,6 +12,11 @@ import {
 
 import { useTranslation } from "react-i18next";
 
+import { ThemeSchemeType } from "@util/types";
+
+import { resizeFonts, responsiveScale } from "@theme/scalling";
+import { useCurrentTheme } from "@theme/useCurrentTheme";
+
 interface InputProps extends TextInputProps {
   value: string;
   onChangeText: (text: string) => void;
@@ -35,6 +40,8 @@ const Input: React.FC<InputProps> = ({
   ...rest
 }: InputProps) => {
   const { t } = useTranslation();
+  const theme = useCurrentTheme();
+  const styles = getStyles(theme);
 
   return (
     <View>
@@ -44,7 +51,7 @@ const Input: React.FC<InputProps> = ({
         keyboardType={keyboardType}
         onChangeText={onChangeText}
         placeholder={t(placeholder || "")}
-        placeholderTextColor="#7D8C9B"
+        placeholderTextColor={theme.INPUT_PLACEHOLDER}
         style={[
           styles.input,
           styles.withBorder,
@@ -58,25 +65,28 @@ const Input: React.FC<InputProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  label: {
-    fontSize: 16,
-    marginBottom: 8,
-    color: "#172E44",
-  },
-  input: {
-    height: "100%",
-    paddingLeft: 16,
-    fontSize: 16,
-    borderColor: "#CAD6E1",
-    borderWidth: 1,
-    borderRadius: 8,
-    color: "#172E44",
-  },
-  withErrorBorder: {
-    borderColor: "#F24D49",
-  },
-  withBorder: {},
-});
+const getStyles = (theme: ThemeSchemeType) => {
+  return StyleSheet.create({
+    label: {
+      fontSize: resizeFonts(16),
+      marginBottom: responsiveScale(8),
+      color: theme.TEXT_COLOR,
+    },
+    input: {
+      height: "100%",
+      paddingLeft: responsiveScale(16),
+      fontSize: resizeFonts(16),
+      borderColor: theme.CARD_BORDER,
+      borderWidth: responsiveScale(1),
+      borderRadius: responsiveScale(8),
+      backgroundColor: theme.INPUT_BACKGROUND,
+      color: theme.INPUT_TEXT,
+    },
+    withErrorBorder: {
+      borderColor: theme.ERROR,
+    },
+    withBorder: {},
+  });
+}
 
 export default Input;