Merge pull request #59 from degica/task/MOB-48

Input error style fixes
degica · Aug 20, 2024 · 3c158e3 · 3c158e3
2 parents 6b4d77e + f480f49
commit 3c158e3
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 9 deletions.
diff --git a/example/services/keyService.ts b/example/services/keyService.ts
@@ -8,7 +8,10 @@ const getPublishableKey = async () => {
 
     return publishableKey;
   } catch (e) {
-    Alert.alert('Error', 'Unable to fetch session. Is your server running?');
+    Alert.alert(
+      'Error',
+      'Unable to fetch publishable Key. Is your server running?',
+    );
     return null;
   }
 };

diff --git a/payment_sdk/src/assets/languages/en.json b/payment_sdk/src/assets/languages/en.json
@@ -79,6 +79,7 @@
     "CARD_NUMBER_ERROR": "You have entered an invalid card number",
     "EXPIRY_DATE_ERROR": "Please input the full expiration date",
     "CVV_ERROR": "Please input the CVV",
+    "EMAIL_ERROR": "Please enter a valid email address",
     "": ""
   }
 }
diff --git a/payment_sdk/src/assets/languages/ja.json b/payment_sdk/src/assets/languages/ja.json
@@ -79,6 +79,7 @@
       "CARD_NUMBER_ERROR": "無効なカード番号を入力しました",
       "EXPIRY_DATE_ERROR": "有効期限を完全に入力してください",
       "CVV_ERROR": "CVVを入力してください",
+      "EMAIL_ERROR": "有効なメールアドレスを入力してください",
       "": ""
    }
   }
diff --git a/payment_sdk/src/components/CardInputGroup.tsx b/payment_sdk/src/components/CardInputGroup.tsx
@@ -320,10 +320,9 @@ const getStyles = (theme: ThemeSchemeType) => {
     },
     errorText: {
       color: theme.ERROR,
-      fontSize: resizeFonts(16),
-      textAlign: "center",
-      top: -responsiveScale(10),
-      marginBottom: responsiveScale(5),
+      fontSize: resizeFonts(14),
+      marginLeft: responsiveScale(16),
+      top: -responsiveScale(20),
     },
   });
 };
diff --git a/payment_sdk/src/components/Input.tsx b/payment_sdk/src/components/Input.tsx
@@ -80,6 +80,7 @@ const getStyles = (theme: ThemeSchemeType) => {
     errorMsg: {
       fontSize: resizeFonts(14),
       color: theme.ERROR,
+      marginTop: responsiveScale(5),
     },
     input: {
       height: "100%",

diff --git a/payment_sdk/src/components/sections/CardSection.tsx b/payment_sdk/src/components/sections/CardSection.tsx
@@ -110,8 +110,7 @@ const styles = StyleSheet.create({
   },
   cardNameContainer: {
     margin: responsiveScale(16),
-    marginBottom: responsiveScale(24),
-    height: responsiveScale(60),
+    marginBottom: responsiveScale(8),
   },
   btn: {
     height: responsiveScale(60),

diff --git a/payment_sdk/src/components/sections/KonbiniSection.tsx b/payment_sdk/src/components/sections/KonbiniSection.tsx
@@ -108,6 +108,7 @@ const KonbiniSection = (): JSX.Element => {
           }}
           inputStyle={styles.inputStyle}
           error={inputErrors.name}
+          errorText="REQUIRED"
         />
       </View>
       <View style={styles.inputContainer}>
@@ -122,6 +123,7 @@ const KonbiniSection = (): JSX.Element => {
           }}
           inputStyle={styles.inputStyle}
           error={inputErrors.email}
+          errorText="EMAIL_ERROR"
           inputMode="email"
         />
       </View>
@@ -154,8 +156,7 @@ const styles = StyleSheet.create({
   },
   inputContainer: {
     margin: responsiveScale(16),
-    marginBottom: responsiveScale(24),
-    height: responsiveScale(60),
+    marginBottom: responsiveScale(8),
   },
   inputStyle: {
     height: responsiveScale(50),