custom theme config

degica · Sep 9, 2024 · 1000e78 · 1000e78
1 parent d0b74bb
commit 1000e78
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 124 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,11 +1,11 @@
-import React, {useEffect, useState} from 'react';
-import {SafeAreaView, StyleSheet} from 'react-native';
-import {KomojuSDK, LanguageTypes} from '@komoju/komoju-react-native';
+import React, {useEffect, useState} from "react";
+import {SafeAreaView, StyleSheet} from "react-native";
+import {KomojuSDK, LanguageTypes} from "@komoju/komoju-react-native";
 
-import PaymentScreen from './components/PaymentScreen';
-import LanguageSelectComponent from './components/languageSelectComponet';
-import getPublishableKey from './services/keyService';
-import Loader from './components/Loader';
+import PaymentScreen from "./components/PaymentScreen";
+import LanguageSelectComponent from "./components/languageSelectComponet";
+import getPublishableKey from "./services/keyService";
+import Loader from "./components/Loader";
 
 /**
  * You can get your Publishable key and Secret keys from https://komoju.com/en/sign_in
@@ -14,7 +14,7 @@ import Loader from './components/Loader';
  */
 
 function App(): React.JSX.Element {
-  const [publishableKey, setPublishableKey] = useState('');
+  const [publishableKey, setPublishableKey] = useState("");
   const [loading, setLoading] = useState(true);
   const [language, setLanguage] = useState(LanguageTypes.ENGLISH);
 
@@ -34,6 +34,7 @@ function App(): React.JSX.Element {
 
       <KomojuSDK.KomojuProvider
         publishableKey={publishableKey}
+        // theme={theme}
         language={language}>
         <PaymentScreen language={language} setLoading={setLoading} />
       </KomojuSDK.KomojuProvider>
@@ -46,7 +47,7 @@ function App(): React.JSX.Element {
 const styles = StyleSheet.create({
   mainContainer: {
     flex: 1,
-    height: '100%',
+    height: "100%",
   },
 });
 

diff --git a/example/src/components/PaymentScreen.tsx b/example/src/components/PaymentScreen.tsx
@@ -1,20 +1,19 @@
-import { Dispatch, SetStateAction, useState } from 'react';
+import { Dispatch, SetStateAction, useState } from "react";
 import {
-  useColorScheme,
   View,
   Text,
   TextInput,
   Button,
   StyleSheet,
   Pressable,
   Alert,
-} from 'react-native';
-import { KomojuSDK, SessionShowResponseType } from '@komoju/komoju-react-native';
-import createSession from '../services/sessionService';
+} from "react-native";
+import { KomojuSDK, SessionShowResponseType } from "@komoju/komoju-react-native";
+import createSession from "../services/sessionService";
 
 export enum CurrencyTypes {
-  JPY = 'JPY',
-  USD = 'USD',
+  JPY = "JPY",
+  USD = "USD",
 }
 
 const PaymentScreen = ({
@@ -24,17 +23,16 @@ const PaymentScreen = ({
   language: string;
   setLoading: Dispatch<SetStateAction<boolean>>;
 }) => {
-  const [amount, setAmount] = useState('');
+  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();
 
   const handleSessionPay = async () => {
     setLoading(true);
     if (!amount) {
-      Alert.alert('Error', 'Please enter an amount to checkout');
+      Alert.alert("Error", "Please enter an amount to checkout");
       return;
     }
 
@@ -44,7 +42,7 @@ const PaymentScreen = ({
 
     // invoke createPayment method with sessionId as parameters to open the payment portal
     createPayment({
-      sessionId: sessionId ?? '',
+      sessionId: sessionId ?? "",
       onComplete: onPaymentComplete,
       onDismiss: onPaymentComplete,
     });
@@ -53,28 +51,15 @@ const PaymentScreen = ({
   // when the payment is complete pass a callback to get the final results of response
   const onPaymentComplete = (response: SessionShowResponseType) => {
     console.log(`Transaction Status: ${response?.status}`);
-    setAmount('');
+    setAmount("");
   };
 
   const changeCurrencyType = (key: CurrencyTypes) => {
     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 (
-    <View style={[styles.container, dynamicStyles.container]}>
+    <View style={[styles.container]}>
       <View style={styles.currencyRow}>
         {(Object.keys(CurrencyTypes) as Array<keyof typeof CurrencyTypes>).map(
           key => (
@@ -87,7 +72,6 @@ const PaymentScreen = ({
               ]}>
               <Text
                 style={[
-                  dynamicStyles.text,
                   key === currency && styles.currencySelectedText,
                 ]}>
                 {key}
@@ -96,13 +80,13 @@ const PaymentScreen = ({
           ),
         )}
       </View>
-      <Text style={[styles.title, dynamicStyles.text]}>
+      <Text style={[styles.title]}>
         Enter Amount to Pay with Komoju
       </Text>
       <TextInput
-        style={[styles.input, dynamicStyles.input]}
+        style={[styles.input]}
         placeholder="Enter amount"
-        placeholderTextColor={colorScheme === 'dark' ? '#CCC' : '#333'}
+        placeholderTextColor={"#333"}
         keyboardType="numeric"
         value={amount}
         onChangeText={setAmount}
@@ -111,7 +95,7 @@ const PaymentScreen = ({
         <Button
           title="Checkout"
           onPress={handleSessionPay}
-          color={colorScheme === 'dark' ? '#888' : '#007AFF'}
+          color={"#007AFF"}
         />
       </View>
     </View>
@@ -121,30 +105,30 @@ const PaymentScreen = ({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: "center",
     padding: 16,
   },
   title: {
     fontSize: 24,
-    textAlign: 'center',
+    textAlign: "center",
     marginBottom: 20,
   },
   input: {
     height: 40,
-    borderColor: 'gray',
+    borderColor: "gray",
     borderRadius: 8,
     borderWidth: 1,
     marginBottom: 20,
     paddingHorizontal: 8,
   },
   buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
+    flexDirection: "row",
+    justifyContent: "center",
     zIndex: -100,
     height: 40,
   },
   currencyRow: {
-    flexDirection: 'row',
+    flexDirection: "row",
     marginBottom: 20,
   },
   currencyTextContainer: {
@@ -153,10 +137,10 @@ const styles = StyleSheet.create({
   currencySelectedTextContainer: {
     borderWidth: 1,
     borderRadius: 5,
-    borderColor: 'coral',
+    borderColor: "coral",
   },
   currencySelectedText: {
-    color: 'coral',
+    color: "coral",
   },
 });
 

diff --git a/example/src/components/languageSelectComponet.tsx b/example/src/components/languageSelectComponet.tsx
@@ -1,6 +1,6 @@
-import {Dispatch, SetStateAction} from 'react';
-import {View, Pressable, StyleSheet, Text, useColorScheme} from 'react-native';
-import {LanguageTypes} from '@komoju/komoju-react-native';
+import {Dispatch, SetStateAction} from "react";
+import {View, Pressable, StyleSheet, Text} from "react-native";
+import {LanguageTypes} from "@komoju/komoju-react-native";
 
 const LanguageSelectComponent = ({
   language,
@@ -9,19 +9,9 @@ const LanguageSelectComponent = ({
   language: LanguageTypes;
   setLanguage: Dispatch<SetStateAction<LanguageTypes>>;
 }) => {
-  const colorScheme = useColorScheme(); // Detects the color scheme of the device
-
-  const dynamicStyles = StyleSheet.create({
-    container: {
-      backgroundColor: colorScheme === 'dark' ? '#333' : '#FFF',
-    },
-    text: {
-      color: colorScheme === 'dark' ? '#FFF' : '#000',
-    },
-  });
 
   return (
-    <View style={[styles.container, dynamicStyles.container]}>
+    <View style={[styles.container]}>
       {(Object.keys(LanguageTypes) as Array<keyof typeof LanguageTypes>).map(
         key => (
           <Pressable
@@ -34,7 +24,6 @@ const LanguageSelectComponent = ({
             ]}>
             <Text
               style={[
-                dynamicStyles.text,
                 LanguageTypes[key] === language && styles.languageSelectedText,
               ]}>
               {key}
@@ -48,25 +37,25 @@ const LanguageSelectComponent = ({
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
+    flexDirection: "row",
     padding: 16,
   },
   title: {
     fontSize: 24,
-    textAlign: 'center',
+    textAlign: "center",
     marginBottom: 20,
   },
   input: {
     height: 40,
-    borderColor: 'gray',
+    borderColor: "gray",
     borderRadius: 8,
     borderWidth: 1,
     marginBottom: 20,
     paddingHorizontal: 8,
   },
   buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
+    flexDirection: "row",
+    justifyContent: "center",
     zIndex: -100,
     height: 40,
   },
@@ -76,10 +65,10 @@ const styles = StyleSheet.create({
   languageSelectedTextContainer: {
     borderWidth: 1,
     borderRadius: 5,
-    borderColor: 'coral',
+    borderColor: "coral",
   },
   languageSelectedText: {
-    color: 'coral',
+    color: "coral",
   },
 });
 

diff --git a/src/components/PaymentModal.tsx b/src/components/PaymentModal.tsx
@@ -13,17 +13,14 @@ import {
 import { t } from "i18next";
 
 import { Actions, DispatchContext, StateContext } from "../context/state";
-import { useTheme } from "../context/ThemeContext";
 
 import {
   paymentFailedCtaText,
   paymentSuccessCtaText,
-  ThemeModes,
 } from "../util/constants";
 import { ResponseScreenStatuses, ThemeSchemeType } from "../util/types";
 
 import closeIcon from "../assets/images/close.png";
-import closeDMIcon from "../assets/images/close_dm.png";
 
 import { resizeFonts, responsiveScale, WINDOW_HEIGHT } from "../theme/scalling";
 import { useCurrentTheme } from "../theme/useCurrentTheme";
@@ -48,7 +45,6 @@ const PaymentModal = ({
 
   const theme = useCurrentTheme();
   const styles = getStyles(theme);
-  const { mode } = useTheme();
 
   const closeSheet = (showAlert = true) => {
     Keyboard.dismiss();
@@ -135,7 +131,7 @@ const PaymentModal = ({
           </KomojuText>
           <TouchableOpacity style={styles.crossBtn} onPress={onCloseModal}>
             <Image
-              source={mode === ThemeModes.light ? closeIcon : closeDMIcon}
+              source={closeIcon}
             />
           </TouchableOpacity>
         </View>

diff --git a/src/context/KomojuProvider.tsx b/src/context/KomojuProvider.tsx
@@ -8,7 +8,7 @@ import { ThemeProvider } from "./ThemeContext";
 export const KomojuProvider = (props: KomojuProviderIprops) => {
   return (
     <StateProvider>
-      <ThemeProvider theme={props?.theme} darkMode={props?.darkMode}>
+      <ThemeProvider theme={props?.theme}>
         <MainStateProvider
           publishableKey={props.publishableKey}
           paymentMethods={props?.paymentMethods}