Localisation improvements and style fixes

example/App.tsx

@@ -11,8 +11,8 @@ import LanguageSelectComponent from './components/languageSelectComponet';
  * Your publishable key is required in order for Fields to access the KOMOJU API.
  * Your secret key is required in order to create a session. This should be done in your backend on a real world application
  */
-const PUBLIC_KEY = '';
-const SECRET_KEY = '';
+const PUBLIC_KEY = 'pk_test_bx0nb2z4jcczon39pm4m68l7';
+const SECRET_KEY = 'sk_test_61qdasmogfjxtaco2zocdaaw';
 
 function App(): React.JSX.Element {
   const [komojuKeys, setKomojuKeys] = useState({

payment_sdk/src/assets/languages/en.json

@@ -34,6 +34,15 @@
       "PAYMENT_VIA_PAY_PAY": "Payment via Paypay",
       "PAY_PAY_REDIRECT_MESSAGE": "You will be redirected to Paypay to complete the payment",
       "CONTINUE_TO_PAY_PAY": "Continue to Paypay",      
+      "YES": "Yes",      
+      "NO": "No",      
+      "CANCEL_PAYMENT": "Cancel Payment",      
+      "PAYMENT_SUCCESS": "Payment Success",      
+      "PAYMENT_FAILED": "Payment Failed",      
+      "ORDER_THANK_YOU_NOTE": "Thank you for your order",      
+      "PAYMENT_RE_TRY_MSG": "Hey there, We tried to charge your card but, something went wrong. Please update your payment method below to continue",      
+      "BACK_TO_STORE": "Back to store",      
+      "UPDATE_PAYMENT_METHOD": "Update payment method",      
       "": ""
    }
   }

payment_sdk/src/assets/languages/ja.json

@@ -14,26 +14,35 @@
       "net_cash": "NET CASH",
       "alipay": "Alipay",
       "aupay": "au PAY",
-      "seven-eleven": "セブン‐イレブン",
+      "seven-eleven": "セブンイレブン",
       "lawson": "ローソン",
       "family-mart": "ファミリーマート",
       "ministop": "ミニストップ",
       "daily-yamazaki": "デイリーヤマザキ",
       "seicomart": "セイコーマート",
 
       "PAYMENT_OPTIONS": "支払いオプション",
-      "CARD_HOLDER_NAME": "クレジットカード名義人氏名",
-      "FULL_NAME_ON_CARD": "カード上のフルネーム",
+      "CARD_HOLDER_NAME": "カード所有者名",
+      "FULL_NAME_ON_CARD": "TARO YAMADA",
       "CARD_NUMBER": "カード番号",
-      "SCAN_CARD": "スキャンカード",
+      "SCAN_CARD": "カードをスキャン",
       "PAY": "支払い",
-      "NAME_SHOWN_ON_RECEIPT": "氏名 (レシートに記載されている)",
-      "FULL_NAME_ON_RECEIPT": "氏名を入力（レシートで表示されます",
+      "NAME_SHOWN_ON_RECEIPT": "氏名",
+      "FULL_NAME_ON_RECEIPT": "氏名を入力（レシートで表示されます）",
       "EMAIL": "メールアドレス",
       "EXAMPLE_EMAIL": "メールアドレスを入力",
-      "PAYMENT_VIA_PAY_PAY": "Paypayでのお支払い",
-      "PAY_PAY_REDIRECT_MESSAGE": "支払いを完了するには Paypay にリダイレクトされます",
-      "CONTINUE_TO_PAY_PAY": "PayPayに進む",      
+      "PAYMENT_VIA_PAY_PAY": "Paypayで支払う",
+      "PAY_PAY_REDIRECT_MESSAGE": "Paypayの支払い画面にリダイレクトされます",
+      "CONTINUE_TO_PAY_PAY": "PayPayに進む",    
+      "YES": "はい",      
+      "NO": "いいえ",  
+      "CANCEL_PAYMENT": "支払いのキャンセル",      
+      "PAYMENT_SUCCESS": "支払い完了",      
+      "PAYMENT_FAILED": "おっと、支払いができませんでした",      
+      "ORDER_THANK_YOU_NOTE": "ご購入ありがとうございました",      
+      "PAYMENT_RE_TRY_MSG": "入力していただいたカードで支払いを行うことができませんでした。別の支払い方法を試してみてください。",
+      "BACK_TO_STORE": "ストアに戻る",      
+      "UPDATE_PAYMENT_METHOD": "支払い方法を変更する",     
       "": ""
    }
   }

payment_sdk/src/components/CardInputGroup.tsx

@@ -253,6 +253,7 @@ const getStyles = (theme: ThemeSchemeType) => {
       borderTopLeftRadius: 0,
       borderTopRightRadius: 0,
       borderBottomLeftRadius: 0,
+      marginLeft: -responsiveScale(1),
     },
     titleScanRow: {
       flexDirection: "row",

payment_sdk/src/components/Pill.tsx

@@ -1,20 +1,19 @@
 import React, { ReactNode } from "react";
 
 import {
-  Text,
   StyleSheet,
   TouchableOpacity,
   Image,
   ImageSourcePropType,
 } from "react-native";
 
-import { useTranslation } from "react-i18next";
-
 import { ThemeSchemeType } from "@util/types";
 
 import { resizeFonts, responsiveScale, WINDOW_WIDTH } from "@theme/scalling";
 import { useCurrentTheme } from "@theme/useCurrentTheme";
 
+import KomojuText from "./KomojuText";
+
 interface PillProps {
   label: string;
   icon?: ImageSourcePropType;
@@ -30,7 +29,6 @@ const Pill: React.FC<PillProps> = ({
   onPress,
   isSelected,
 }) => {
-  const { t } = useTranslation();
   const theme = useCurrentTheme();
   const styles = getStyles(theme);
 
@@ -41,7 +39,7 @@ const Pill: React.FC<PillProps> = ({
     >
       {image ? image : <Image style={styles.icon} source={icon} />}
 
-      <Text style={styles.label}>{t(label)}</Text>
+      <KomojuText style={styles.label}>{label}</KomojuText>
     </TouchableOpacity>
   );
 };
@@ -80,6 +78,6 @@ const getStyles = (theme: ThemeSchemeType) => {
       borderColor: theme.TEXT_COLOR,
     },
   });
-}
+};
 
 export default Pill;

payment_sdk/src/components/ResponseScreen.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback, useMemo } from "react";
 
-import { Image, StyleSheet, Text, View } from "react-native";
+import { Image, StyleSheet, View } from "react-native";
 
 import { ResponseScreenStatuses, ThemeSchemeType } from "@util/types";
 
 import { resizeFonts, responsiveScale } from "@theme/scalling";
 import { useCurrentTheme } from "@theme/useCurrentTheme";
 
+import KomojuText from "./KomojuText";
 import SubmitButton from "./SubmitButton";
 
 type Props = {
@@ -17,25 +18,24 @@ type Props = {
 };
 
 const ResponseScreen = ({ status, message, onPress, onPressLabel }: Props) => {
-
   const theme = useCurrentTheme();
   const styles = getStyles(theme);
 
   const renderMessageContent = useMemo(() => {
     const title =
       status === ResponseScreenStatuses.SUCCESS
-        ? "Payment Success"
-        : "Payment Failed";
+        ? "PAYMENT_SUCCESS"
+        : "PAYMENT_FAILED";
     const defaultMessage =
       status === ResponseScreenStatuses.SUCCESS
-        ? "Thank you for your order"
-        : "Hey there, We tried to charge your card but, something went wrong. Please update your payment method below to continue";
+        ? "ORDER_THANK_YOU_NOTE"
+        : "PAYMENT_RE_TRY_MSG";
     const msg = message || defaultMessage;
 
     return (
       <View style={styles.container}>
-        <Text style={styles.title}>{title}</Text>
-        <Text style={styles.message}>{msg}</Text>
+        <KomojuText style={styles.title}>{title}</KomojuText>
+        <KomojuText style={styles.message}>{msg}</KomojuText>
       </View>
     );
   }, [status, message]);
@@ -99,5 +99,4 @@ const getStyles = (theme: ThemeSchemeType) => {
       right: 0,
     },
   });
-
-}
+};

payment_sdk/src/components/Sheet.tsx

@@ -17,10 +17,16 @@ import {
   Keyboard,
 } from "react-native";
 
+import { useTranslation } from "react-i18next";
+
 import { Actions, DispatchContext, StateContext } from "@context/state";
 import { useTheme } from "@context/ThemeContext";
 
-import { paymentFailedCtaText, paymentSuccessCtaText, ThemeModes } from "@util/constants";
+import {
+  paymentFailedCtaText,
+  paymentSuccessCtaText,
+  ThemeModes,
+} from "@util/constants";
 import { ResponseScreenStatuses, ThemeSchemeType } from "@util/types";
 
 import closeIcon from "@assets/images/close.png";
@@ -33,7 +39,7 @@ import KomojuText from "./KomojuText";
 import ResponseScreen from "./ResponseScreen";
 import SheetContent from "./SheetContent";
 
-const MAX_TRANSLATE_Y = - WINDOW_HEIGHT + responsiveScale(50);
+const MAX_TRANSLATE_Y = -WINDOW_HEIGHT + responsiveScale(50);
 
 type SheetProps = {
   children?: React.ReactNode;
@@ -51,6 +57,8 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
   { swipeClose, onDismiss },
   ref
 ) => {
+  const { t } = useTranslation();
+
   const translateY = useRef(new RNAnimated.Value(0)).current;
   const active = useRef(new RNAnimated.Value(0)).current;
   const context = useRef(new RNAnimated.Value(0)).current;
@@ -63,7 +71,7 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
   const dispatch = useContext(DispatchContext);
   const theme = useCurrentTheme();
   const styles = getStyles(theme);
-  const {mode} = useTheme();
+  const { mode } = useTheme();
 
   useEffect(() => {
     const yListener = translateY.addListener(({ value }) => {
@@ -101,14 +109,14 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
 
     if (showAlert) {
       // showing an alert when user try to close the SDK modal
-      Alert.alert("Cancel Payment?", "", [
+      Alert.alert(`${t("CANCEL_PAYMENT")}?`, "", [
         {
-          text: "No",
+          text: t("NO"),
           onPress: () => scrollTo(MAX_TRANSLATE_Y + 50),
           style: "cancel",
         },
         {
-          text: "Yes",
+          text: t("YES"),
           onPress: () => {
             // invoking client provided onDismiss() callback when closing the SDK modal
             onDismiss && onDismiss();
@@ -212,7 +220,9 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
               )
             }
           >
-            <Image source={mode === ThemeModes.light ? closeIcon : closeDMIcon} />
+            <Image
+              source={mode === ThemeModes.light ? closeIcon : closeDMIcon}
+            />
           </TouchableOpacity>
         </RNAnimated.View>
         {
@@ -226,7 +236,8 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
             />
           ) : (
             <SheetContent />
-          )}
+          )
+        }
       </RNAnimated.View>
     </>
   );
@@ -270,6 +281,6 @@ const getStyles = (theme: ThemeSchemeType) => {
       flex: 1,
     },
   });
-}
+};
 
 export default React.forwardRef<SheetRefProps, SheetProps>(Sheet);

payment_sdk/src/context/KomojuProvider.tsx

@@ -1,18 +1,13 @@
 import React from "react";
 
-import i18next from "i18next";
-
-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";
 
 export const KomojuProvider = (props: KomojuProviderIprops) => {
-  if (props?.language) i18next.changeLanguage(props?.language);
   return (
     <StateProvider>
       <ThemeProvider>
@@ -26,4 +21,4 @@ export const KomojuProvider = (props: KomojuProviderIprops) => {
       </ThemeProvider>
     </StateProvider>
   );
-};
+};

payment_sdk/src/util/constants.ts

@@ -13,8 +13,8 @@ export const tokenParameterName = "secure_token_id=";
 // redirect url parameter to identify if session payment is completed
 export const sessionParameterName = "sessions";
 
-export const paymentSuccessCtaText = "Back to store";
-export const paymentFailedCtaText = "Update payment method";
+export const paymentSuccessCtaText = "BACK_TO_STORE";
+export const paymentFailedCtaText = "UPDATE_PAYMENT_METHOD";
 
 export const emailRegex = /^[a-zA-Z0–9._-]+@[a-zA-Z0–9.-]+\.[a-zA-Z]{2,4}$/;
 export const cardTypeRegex = {