Task/mob 18

payment_sdk/CHANGELOG.md

@@ -14,4 +14,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## 0.0.4 - 2023-07-22
 
 ### Added
-- Dark theme support on both `ios` and `android` platforms.
+- Dark theme support on both `ios` and `android` platforms.

payment_sdk/src/assets/languages/en.json

@@ -1,48 +1,78 @@
 {
-    "translation": {
-      "credit_card": "Credit Card",
-      "paypay": "PayPay",
-      "linepay": "LINE Pay",
-      "merpay": "Merpay",
-      "rakutenpay": "Rakuten Pay",
-      "paidy": "Paidy",
-      "konbini": "Konbini",
-      "bank_transfer": "Bank Transfer",
-      "pay_easy": "Pay Easy",
-      "web_money": "WebMoney",
-      "bit_cash": "BitCash",
-      "net_cash": "NET CASH",
-      "alipay": "Alipay",
-      "aupay": "au PAY",
-      "seven-eleven": "7-Eleven",
-      "lawson": "Lawson",
-      "family-mart": "Family Mart",
-      "ministop": "Ministop",
-      "daily-yamazaki": "Daily Yamazaki",
-      "seicomart": "Seicomart",
-
-      "PAYMENT_OPTIONS": "Payment Options",
-      "CARD_HOLDER_NAME": "Cardholder name",
-      "FULL_NAME_ON_CARD": "Full name on card",
-      "CARD_NUMBER": "Card Number",
-      "SCAN_CARD": "Scan Card",
-      "PAY": "Pay",
-      "NAME_SHOWN_ON_RECEIPT": "Name (shown on receipt)",
-      "FULL_NAME_ON_RECEIPT": "Full name on receipt",
-      "EMAIL": "Email",
-      "EXAMPLE_EMAIL": "Enter Your Email Address",
-      "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",      
-      "": ""
-   }
-  }
+  "translation": {
+    "credit_card": "Credit Card",
+    "paypay": "PayPay",
+    "linepay": "LINE Pay",
+    "merpay": "Merpay",
+    "rakutenpay": "Rakuten Pay",
+    "paidy": "Paidy",
+    "konbini": "Konbini",
+    "bank_transfer": "Bank Transfer",
+    "pay_easy": "Pay Easy",
+    "web_money": "WebMoney",
+    "bit_cash": "BitCash",
+    "net_cash": "NET CASH",
+    "alipay": "Alipay",
+    "aupay": "au PAY",
+    "seven-eleven": "7-Eleven",
+    "lawson": "Lawson",
+    "family-mart": "Family Mart",
+    "ministop": "Ministop",
+    "daily-yamazaki": "Daily Yamazaki",
+    "seicomart": "Seicomart",
+    "PAYMENT_OPTIONS": "Payment Options",
+    "CARD_HOLDER_NAME": "Cardholder name",
+    "FULL_NAME_ON_CARD": "Full name on card",
+    "CARD_NUMBER": "Card Number",
+    "SCAN_CARD": "Scan Card",
+    "PAY": "Pay",
+    "NAME_SHOWN_ON_RECEIPT": "Name (shown on receipt)",
+    "FULL_NAME_ON_RECEIPT": "Full name on receipt",
+    "EMAIL": "Email",
+    "EXAMPLE_EMAIL": "Enter Your Email Address",
+    "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_VIA_ALI_PAY": "Payment via Alipay",
+    "ALI_PAY_REDIRECT_MESSAGE": "You will be redirected to Alipay to complete the payment",
+    "CONTINUE_TO_ALI_PAY": "Continue to Alipay",
+    "PAYMENT_VIA_LINE_PAY": "Payment via Line Pay",
+    "LINE_PAY_REDIRECT_MESSAGE": "You will be redirected to Line Pay to complete the payment",
+    "CONTINUE_TO_LINE_PAY": "Continue to Line Pay",
+    "PAYMENT_VIA_MER_PAY": "Payment via Mer Pay",
+    "MER_PAY_REDIRECT_MESSAGE": "You will be redirected to Mer Pay to complete the payment",
+    "CONTINUE_TO_MER_PAY": "Continue to Mer Pay",
+    "PAYMENT_VIA_RAKUTEN": "Payment via Rakuten",
+    "RAKUTEN_REDIRECT_MESSAGE": "You will be redirected to Rakuten to complete the payment",
+    "CONTINUE_TO_RAKUTEN": "Continue to Rakuten",
+    "CONTINUE_TO_PAIDY": "Continue to Paidy",
+    "PAYMENT_VIA_AU_PAY": "Payment via AU Pay",
+    "AU_PAY_REDIRECT_MESSAGE": "You will be redirected to AU Pay to complete the payment",
+    "CONTINUE_TO_AU_PAY": "Continue to AU Pay",
+    "LIGHT_BOX_CONTENT": "Note, a browser window will be opened. After purchase you will be redirected back.",
+    "NET_CASH_INPUT_LABEL": "NET CASH Information",
+    "NET_CASH_INPUT_PLACEHOLDER": "NET CASH id",
+    "BIT_CASH_INPUT_LABEL": "BitCash Information",
+    "BIT_CASH_INPUT_PLACEHOLDER": "Hiragana id",
+    "WEB_MONEY_INPUT_LABEL": "WebMoney Information",
+    "WEB_MONEY_INPUT_PLACEHOLDER": "Prepaid number",
+    "FULL_NAME": "Full Name",
+    "FULL_NAME_PLACEHOLDER": "Enter your name",
+    "TELEPHONE_NUMBER": "Telephone Number",
+    "TELEPHONE_NUMBER_PLACEHOLDER": "Enter your phone number",
+    "SURNAME": "Surname",
+    "GIVEN_NAME": "Given Name",
+    "LAST_NAME": "Last Name (Katakana)",
+    "FIRST_NAME": "First Name (Katakana)",
+    "": ""
+  }
+}

payment_sdk/src/components/LightBox.tsx

@@ -21,7 +21,7 @@ const LightBox = ({ content, icon }: Props) => {
 
   return (
     <View style={styles.container}>
-      <View style={styles.iconWrapper}>{icon && <Text>{icon}</Text>}</View>
+      <View style={styles.iconWrapper}>{icon && <Text style={styles.icon}>{icon}</Text>}</View>
       <Text style={styles.content}>{t(content)}</Text>
     </View>
   );
@@ -48,13 +48,16 @@ const getStyles = (theme: ThemeSchemeType) => {
     iconWrapper: {
       marginRight: responsiveScale(8),
       borderRadius: responsiveScale(100),
-      backgroundColor: theme.WHITE50,
+      backgroundColor: theme.BACKGROUND_COLOR,
       width: responsiveScale(38),
       height: responsiveScale(38),
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center'
     },
+    icon: {
+      fontSize: resizeFonts(20)
+    }
   });
 
 }

payment_sdk/src/components/Pill.tsx

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

payment_sdk/src/components/SheetContent.tsx

@@ -13,8 +13,11 @@ import Loader from "./Loader";
 import PillContainer from "./PillContainer";
 import CardSection from "./sections/CardSection";
 import KonbiniSection from "./sections/KonbiniSection";
-import PayPaySection from "./sections/PayPaySection";
+import PaidyFormSection from "./sections/PaidyFormSection";
 import SheetFooter from "./sections/SheetFooter";
+import SimpleRedirectSection from "./sections/SimpleRedirectSection";
+import SingleInputFormSection from "./sections/SingleInputFormSection";
+import TransferFormSection from "./sections/TransferFormSection";
 import WebView from "./WebView";
 
 // const KEYBOARD_OFFSET = isAndroid() ? 120 : 80;
@@ -55,13 +58,37 @@ const SheetContent = () => {
       />
     );
 
+  const getBaseScreenByPaymentType = (paymentType: PaymentType) => {
+    switch (paymentType) {
+      case PaymentType.CREDIT:
+        return <CardSection />
+      case PaymentType.ALI_PAY:
+      case PaymentType.AU_PAY:
+      case PaymentType.PAY_PAY:
+      case PaymentType.LINE_PAY:
+      case PaymentType.MER_PAY:
+      case PaymentType.RAKUTEN:
+        return <SimpleRedirectSection type={paymentType} />
+      case PaymentType.NET_CASH:
+      case PaymentType.BIT_CASH:
+      case PaymentType.WEB_MONEY:
+        return <SingleInputFormSection type={paymentType} />
+      case PaymentType.BANK_TRANSFER:
+      case PaymentType.PAY_EASY:
+        return <TransferFormSection type={paymentType}/>
+      case PaymentType.KONBINI:
+        return <KonbiniSection />
+      case PaymentType.PAIDY:
+        return <PaidyFormSection type={paymentType}/>
+      default:
+        break;
+    }
+  }
   const renderItem = () => {
     return (
       <View style={styles.item}>
         <PillContainer onSelect={handlePillSelect} selectedItem={paymentType} />
-        {paymentType === PaymentType.CREDIT && <CardSection />}
-        {paymentType === PaymentType.PAY_PAY && <PayPaySection />}
-        {paymentType === PaymentType.KONBINI && <KonbiniSection />}
+        {getBaseScreenByPaymentType(paymentType)}
         {renderLoading}
       </View>
     );
@@ -79,7 +106,13 @@ const SheetContent = () => {
           styles.flatListContent,
           { paddingBottom: keyboardHeight },
         ]}
-        ListFooterComponent={<SheetFooter />}
+        ListFooterComponent={
+          <>
+            <View style={styles.footerSpace} />
+            <SheetFooter />
+          </>
+
+        }
         ListFooterComponentStyle={styles.footerContent}
       />
     </View>
@@ -96,14 +129,17 @@ const styles = StyleSheet.create({
   item: {
     height: "100%",
   },
+  footerSpace: {
+    flex: 1,
+  },
   footerContent: {
     ...Platform.select({
       ios: {
-        marginBottom: responsiveScale(200),
+        marginBottom: responsiveScale(100),
         marginTop: -responsiveScale(60),
       },
       android: {
-        marginBottom: responsiveScale(200),
+        marginBottom: responsiveScale(100),
         marginTop: -responsiveScale(60),
       },
     }),

payment_sdk/src/components/sections/CardSection.tsx

@@ -114,6 +114,7 @@ const styles = StyleSheet.create({
   },
   btn: {
     height: responsiveScale(60),
+    marginBottom: responsiveScale(24),
   },
   inputStyle: {
     height: responsiveScale(50),

payment_sdk/src/components/sections/KonbiniSection.tsx

@@ -173,6 +173,7 @@ const styles = StyleSheet.create({
   },
   btn: {
     height: responsiveScale(60),
+    marginBottom: responsiveScale(24),
   },
   image: {
     width: responsiveScale(38),

payment_sdk/src/components/sections/PaidyFormSection.tsx

@@ -0,0 +1,85 @@
+import React, { useContext } from "react";
+
+import { StyleSheet, View } from "react-native";
+
+import { StateContext } from "@context/state";
+
+import Input from "@components/Input";
+
+import { LangKeys } from "@util/constants";
+import { PaymentType } from "@util/types";
+
+import { responsiveScale } from "@theme/scalling";
+
+import SubmitButton from "../SubmitButton";
+
+type PaidyFormSectionProps = {
+  type: PaymentType;
+}
+
+const PaidyFormSection = ({ type }: PaidyFormSectionProps) => {
+  const onPay = () => {
+    sessionPay({ paymentType: PaymentType.PAY_PAY });
+  };
+
+  const {
+    sessionPay,
+  } = useContext(StateContext);
+
+  return (
+    <View style={styles.mainContainer}>
+      <View style={styles.inputContainer}>
+        <Input
+          value={""}
+          label="FULL_NAME"
+          placeholder="FULL_NAME_PLACEHOLDER"
+          onChangeText={(text: string) => {
+            console.log(text)
+            // resetError("name");
+            // dispatch({ type: Actions.SET_NAME, payload: text });
+          }}
+          inputStyle={styles.inputStyle}
+        // error={inputErrors.name}
+        />
+      </View>
+      <View style={styles.inputContainer}>
+        <Input
+          value={""}
+          label="TELEPHONE_NUMBER"
+          placeholder="TELEPHONE_NUMBER_PLACEHOLDER"
+          onChangeText={(text: string) => {
+            console.log(text)
+            // resetError("email");
+            // dispatch({ type: Actions.SET_EMAIL, payload: text });
+          }}
+          inputStyle={styles.inputStyle}
+        // error={inputErrors.email}
+        />
+      </View>
+      <View style={styles.btn}>
+        <SubmitButton onPress={onPay} label={`CONTINUE_TO_${LangKeys[type]}`} />
+      </View>
+    </View>
+  );
+};
+
+export default PaidyFormSection;
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    position: "relative",
+    flex: 1,
+  },
+  inputContainer: {
+    margin: responsiveScale(16),
+    marginBottom: responsiveScale(24),
+    height: responsiveScale(60),
+  },
+  inputStyle: {
+    height: responsiveScale(50),
+  },
+  btn: {
+    height: responsiveScale(60),
+    marginTop: responsiveScale(24),
+  },
+});