Merge pull request #73 from degica/task/MOB-62

Replace with figma icons

eslint.config.mjs

@@ -1,4 +1,3 @@
-
 import eslint from '@eslint/js';
 import tseslint from 'typescript-eslint';
 
@@ -20,22 +19,29 @@ export default tseslint.config(
       '@typescript-eslint': tseslint.plugin,
     },
     rules: {
-     'react-hooks/exhaustive-deps': 'off',
+      'react-hooks/exhaustive-deps': 'off',
       '@typescript-eslint/no-unsafe-function-type': 'off',
       '@typescript-eslint/no-explicit-any': 'warn',
       'no-prototype-builtins': 'off',
       'no-case-declarations': 'off',
       '@typescript-eslint/no-unused-vars': ['off'],
       '@typescript-eslint/no-unused-expressions': 'off',
       '@typescript-eslint/no-require-imports': 'warn',
+      'quotes': ['error', 'double'],
     },
   },
   {
     files: ['**/*.ts', '**/*.tsx'],
-    ignores: ['**/__tests__/**', '**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts', '**/*.spec.tsx'],
+    ignores: [
+      '**/__tests__/**',
+      '**/*.test.ts',
+      '**/*.test.tsx',
+      '**/*.spec.ts',
+      '**/*.spec.tsx',
+    ],
     rules: {
       '@typescript-eslint/ban-ts-comment': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
     },
   }
-);
+);

package.json

@@ -135,7 +135,7 @@
         "error",
         {
           "quoteProps": "consistent",
-          "singleQuote": true,
+          "singleQuote": false,
           "tabWidth": 2,
           "trailingComma": "es5",
           "useTabs": false
@@ -149,7 +149,7 @@
   ],
   "prettier": {
     "quoteProps": "consistent",
-    "singleQuote": true,
+    "singleQuote": false,
     "tabWidth": 2,
     "trailingComma": "es5",
     "useTabs": false

src/components/LightBox.tsx

@@ -4,12 +4,11 @@ import { useTranslation } from "react-i18next";
 
 import { ThemeSchemeType } from "../util/types";
 
-import Thunder from "../assets/images/thunder.png"
+import Thunder from "../assets/images/thunder.png";
 
 import { resizeFonts, responsiveScale } from "../theme/scalling";
 import { useCurrentTheme } from "../theme/useCurrentTheme";
 
-
 type Props = {
   content: string;
 };
@@ -52,14 +51,13 @@ const getStyles = (theme: ThemeSchemeType) => {
       backgroundColor: theme.BACKGROUND_COLOR,
       width: responsiveScale(38),
       height: responsiveScale(38),
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center'
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
     },
     icon: {
       width: responsiveScale(18),
       height: responsiveScale(18),
-    }
+    },
   });
-
-}
+};

src/components/Pill.tsx

@@ -68,10 +68,10 @@ const getStyles = (theme: ThemeSchemeType) => {
     },
     icon: {
       marginRight: responsiveScale(8),
-      flex:1
+      flex: 1,
     },
     label: {
-      width: '90%',
+      width: "90%",
       fontSize: resizeFonts(14),
       color: theme.TEXT_COLOR,
       fontWeight: "500",

src/components/PillContainer.tsx

@@ -17,11 +17,26 @@ type Props = {
   selectedItem: PaymentType;
 };
 
+const squareSizeImages = [
+  PaymentType.CREDIT,
+  PaymentType.KONBINI,
+  PaymentType.PAY_PAY,
+];
+
 const PillContainer = ({ onSelect, selectedItem }: Props) => {
   const { paymentMethods } = useContext(StateContext);
 
   const getIcon = (slug: PaymentType) => {
-    return <Image source={PaymentMethodImages[slug]} style={styles.image} />;
+    return (
+      <Image
+        source={PaymentMethodImages[slug]}
+        style={[
+          styles.image,
+          squareSizeImages.includes(slug) ? styles.squareImage : {},
+        ]}
+        resizeMode="contain"
+      />
+    );
   };
 
   const renderItem = ({ item }: { item: sessionShowPaymentMethodType }) => {
@@ -57,8 +72,11 @@ const styles = StyleSheet.create({
   },
   image: {
     width: responsiveScale(38),
-    height: responsiveScale(24),
-    resizeMode: "contain",
+    height: responsiveScale(32),
+  },
+  squareImage: {
+    width: responsiveScale(32),
+    height: responsiveScale(32),
   },
 });
 

src/components/ResponseScreen.tsx

@@ -2,14 +2,22 @@ import { useCallback, useMemo } from "react";
 
 import { Image, StyleSheet, View, ImageSourcePropType } from "react-native";
 
-import { ResponseScreenStatuses, ThemeSchemeType, PaymentType } from "../util/types";
+import {
+  ResponseScreenStatuses,
+  ThemeSchemeType,
+  PaymentType,
+} from "../util/types";
 
 import { resizeFonts, responsiveScale } from "../theme/scalling";
 import { useCurrentTheme } from "../theme/useCurrentTheme";
 
 import KomojuText from "./KomojuText";
 import SubmitButton from "./SubmitButton";
 
+import successIcon from "../assets/images/success.png";
+import errorIcon from "../assets/images/error.png";
+import awaitingPaymentIcon from "../assets/images/awaitingPayment.png";
+
 type StatusConfig = {
   title: string;
   defaultMessage: string;
@@ -21,27 +29,27 @@ const statusConfigs: Partial<Record<ResponseScreenStatuses, StatusConfig>> = {
   [ResponseScreenStatuses.SUCCESS]: {
     title: "PAYMENT_SUCCESS",
     defaultMessage: "ORDER_THANK_YOU_NOTE",
-    image: require("../assets/images/success.png"),
+    image: successIcon,
   },
   [ResponseScreenStatuses.FAILED]: {
     title: "PAYMENT_FAILED",
     defaultMessage: "PAYMENT_RE_TRY_MSG",
-    image: require("../assets/images/error.png"),
+    image: errorIcon,
   },
   [ResponseScreenStatuses.CANCELLED]: {
     title: "PAYMENT_CANCELLED",
     defaultMessage: "PAYMENT_CANCELLED_MSG",
-    image: require("../assets/images/error.png"),
+    image: errorIcon,
   },
   [ResponseScreenStatuses.COMPLETE]: {
     title: "PAYMENT_WAITING",
     defaultMessage: "PAYMENT_WAITING_MSG",
-    image: require("../assets/images/awaitingPayment.png"),
+    image: awaitingPaymentIcon,
   },
   [ResponseScreenStatuses.EXPIRED]: {
     title: "SESSION_EXPIRED",
     defaultMessage: "SESSION_EXPIRED_MSG",
-    image: require("../assets/images/error.png"),
+    image: errorIcon,
   },
 };
 
@@ -50,10 +58,16 @@ type Props = {
   message?: string;
   onPressLabel: string;
   onPress: () => void;
-  paymentType: PaymentType
+  paymentType: PaymentType;
 };
 
-const ResponseScreen = ({ status, message, onPress, onPressLabel, paymentType }: Props) => {
+const ResponseScreen = ({
+  status,
+  message,
+  onPress,
+  onPressLabel,
+  paymentType,
+}: Props) => {
   const theme = useCurrentTheme();
   const styles = getStyles(theme);
 

src/context/KomojuProvider.tsx

@@ -1,9 +1,9 @@
-import { KomojuProviderIprops } from '../util/types';
+import { KomojuProviderIprops } from "../util/types";
 
-import '../assets/languages/i18n';
-import { MainStateProvider } from './MainStateProvider';
-import StateProvider from './StateProvider';
-import { ThemeProvider } from './ThemeContext';
+import "../assets/languages/i18n";
+import { MainStateProvider } from "./MainStateProvider";
+import StateProvider from "./StateProvider";
+import { ThemeProvider } from "./ThemeContext";
 
 export const KomojuProvider = (props: KomojuProviderIprops) => {
   return (

src/context/MainStateProvider.tsx

@@ -1,26 +1,21 @@
-import {
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { useCallback, useContext, useMemo, useRef, useState } from "react";
 
-import PaymentModal from '../components/PaymentModal';
-import Sheet, { SheetRefProps } from '../components/Sheet';
+import PaymentModal from "../components/PaymentModal";
+import Sheet, { SheetRefProps } from "../components/Sheet";
 
 import {
   CreatePaymentFuncType,
   initialState,
   InitPrams,
-  KomojuProviderIprops} from '../util/types';
+  KomojuProviderIprops,
+} from "../util/types";
 
-import '../assets/languages/i18n';
-import { Actions, DispatchContext, KomojuContext } from './state';
-import useBackgroundHandler from '../hooks/useBackgroundHandler';
-import useDeepLinkHandler from '../hooks/useDeepLinkHandler';
-import usePaymentHandler from '../hooks/usePaymentHandler';
-import useMainStateUtils from '../hooks/useMainStateUtils';
+import "../assets/languages/i18n";
+import { Actions, DispatchContext, KomojuContext } from "./state";
+import useBackgroundHandler from "../hooks/useBackgroundHandler";
+import useDeepLinkHandler from "../hooks/useDeepLinkHandler";
+import usePaymentHandler from "../hooks/usePaymentHandler";
+import useMainStateUtils from "../hooks/useMainStateUtils";
 
 export const MainStateProvider = (props: KomojuProviderIprops) => {
   const dispatch = useContext(DispatchContext);
@@ -32,7 +27,7 @@ export const MainStateProvider = (props: KomojuProviderIprops) => {
   // ref to hold client provided onDismiss callback
   const onDismissCallback = useRef(null);
   // ref to hold client provided session Id
-  const sessionIdRef = useRef('');
+  const sessionIdRef = useRef("");
 
   // Get all the util functions that needs to function the Main State
   const {
@@ -46,15 +41,15 @@ export const MainStateProvider = (props: KomojuProviderIprops) => {
     closePaymentSheet,
     onUserCancel,
     openPaymentSheet,
-    resetGlobalStates
+    resetGlobalStates,
   } = useMainStateUtils({
     props: props,
     sheetRef: sheetRef,
     sessionIdRef: sessionIdRef,
     toggleUIVisibility: (value: boolean) => setModalVisible(value),
     initialState: initialState,
     onDismissCallback: onDismissCallback,
-  })
+  });
 
   // Handle events when module goes foreground
   useBackgroundHandler({
@@ -67,8 +62,8 @@ export const MainStateProvider = (props: KomojuProviderIprops) => {
     onPaymentCancelled: onPaymentCancelled,
     onSessionExpired: onSessionExpired,
     onPaymentFailed: onPaymentFailed,
-    onPaymentSuccess: onPaymentSuccess
-  })
+    onPaymentSuccess: onPaymentSuccess,
+  });
 
   // Handle deep-links of the module
   useDeepLinkHandler({
@@ -80,8 +75,8 @@ export const MainStateProvider = (props: KomojuProviderIprops) => {
     onPaymentAwaiting: onPaymentAwaiting,
     onPaymentCancelled: onPaymentCancelled,
     onPaymentFailed: onPaymentFailed,
-    onPaymentSuccess: onPaymentSuccess
-  })
+    onPaymentSuccess: onPaymentSuccess,
+  });
 
   // Handle validations of the session and pay for session
   const { sessionPay, validateSession } = usePaymentHandler({
@@ -91,8 +86,8 @@ export const MainStateProvider = (props: KomojuProviderIprops) => {
     onPaymentAwaiting: onPaymentAwaiting,
     onPaymentFailed: onPaymentFailed,
     onPaymentSuccess: onPaymentSuccess,
-    closePaymentSheet: closePaymentSheet
-  })
+    closePaymentSheet: closePaymentSheet,
+  });
 
   const createPayment = useCallback(
     ({ sessionId, onComplete, onDismiss }: CreatePaymentFuncType) => {
@@ -127,8 +122,8 @@ export const MainStateProvider = (props: KomojuProviderIprops) => {
   }, []);
 
   // TODO: Fix this type error
-   
-  const initializeKomoju = useCallback((_params: InitPrams) => { }, []);
+
+  const initializeKomoju = useCallback((_params: InitPrams) => {}, []);
 
   // Conditionally rendering the payment ui
   const renderPaymentUI = useMemo(() => {

src/context/StateProvider.tsx

@@ -1,8 +1,8 @@
-import { ReactNode, useReducer } from 'react';
+import { ReactNode, useReducer } from "react";
 
-import { DispatchContext, StateContext, reducer } from './state';
+import { DispatchContext, StateContext, reducer } from "./state";
 
-import { initialState } from '../util/types';
+import { initialState } from "../util/types";
 
 /**
  * StateProvider component to provide state and dispatch contexts to its children.

src/context/ThemeContext.tsx

@@ -1,9 +1,9 @@
 // ThemeContext.tsx
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { createContext, useContext, useState, useEffect } from "react";
 
-import { Appearance } from 'react-native';
+import { Appearance } from "react-native";
 
-import { ThemeModes } from '../util/constants';
+import { ThemeModes } from "../util/constants";
 
 interface ThemeContextType {
   mode: ThemeModes;
@@ -17,12 +17,12 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
 }) => {
   const [mode, setMode] = useState<ThemeModes>(() => {
     const colorScheme = Appearance.getColorScheme();
-    return colorScheme === 'dark' ? ThemeModes.dark : ThemeModes.light;
+    return colorScheme === "dark" ? ThemeModes.dark : ThemeModes.light;
   });
 
   useEffect(() => {
     const subscription = Appearance.addChangeListener(({ colorScheme }) => {
-      setMode(colorScheme === 'dark' ? ThemeModes.dark : ThemeModes.light);
+      setMode(colorScheme === "dark" ? ThemeModes.dark : ThemeModes.light);
     });
 
     return () => subscription.remove();
@@ -44,7 +44,7 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
 export const useTheme = (): ThemeContextType => {
   const context = useContext(ThemeContext);
   if (context === undefined) {
-    throw new Error('useTheme must be used within a ThemeProvider');
+    throw new Error("useTheme must be used within a ThemeProvider");
   }
   return context;
 };