diff --git a/payment_sdk/CHANGELOG.md b/payment_sdk/CHANGELOG.md index 4ce1ac3..f63393c 100644 --- a/payment_sdk/CHANGELOG.md +++ b/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. \ No newline at end of file +- Dark theme support on both `ios` and `android` platforms. diff --git a/payment_sdk/src/assets/images/paymentMethodImages/bank_transfer.png b/payment_sdk/src/assets/images/paymentMethodImages/bank_transfer.png index fcc2645..d4cb611 100644 Binary files a/payment_sdk/src/assets/images/paymentMethodImages/bank_transfer.png and b/payment_sdk/src/assets/images/paymentMethodImages/bank_transfer.png differ diff --git a/payment_sdk/src/assets/images/paymentMethodImages/credit_card.png b/payment_sdk/src/assets/images/paymentMethodImages/credit_card.png index bb9c81e..83c5cc3 100644 Binary files a/payment_sdk/src/assets/images/paymentMethodImages/credit_card.png and b/payment_sdk/src/assets/images/paymentMethodImages/credit_card.png differ diff --git a/payment_sdk/src/assets/images/paymentMethodImages/konbini.png b/payment_sdk/src/assets/images/paymentMethodImages/konbini.png index d839293..e211b6d 100644 Binary files a/payment_sdk/src/assets/images/paymentMethodImages/konbini.png and b/payment_sdk/src/assets/images/paymentMethodImages/konbini.png differ diff --git a/payment_sdk/src/assets/languages/en.json b/payment_sdk/src/assets/languages/en.json index 1ba1492..5016324 100644 --- a/payment_sdk/src/assets/languages/en.json +++ b/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", - "": "" - } - } \ No newline at end of file + "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)", + "": "" + } +} \ No newline at end of file diff --git a/payment_sdk/src/components/LightBox.tsx b/payment_sdk/src/components/LightBox.tsx index f8f4030..acff3d3 100644 --- a/payment_sdk/src/components/LightBox.tsx +++ b/payment_sdk/src/components/LightBox.tsx @@ -21,7 +21,7 @@ const LightBox = ({ content, icon }: Props) => { return ( - {icon && {icon}} + {icon && {icon}} {t(content)} ); @@ -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) + } }); } \ No newline at end of file diff --git a/payment_sdk/src/components/Pill.tsx b/payment_sdk/src/components/Pill.tsx index 67cee15..95916dc 100644 --- a/payment_sdk/src/components/Pill.tsx +++ b/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", }, diff --git a/payment_sdk/src/components/SheetContent.tsx b/payment_sdk/src/components/SheetContent.tsx index abd0708..9f8ab1e 100644 --- a/payment_sdk/src/components/SheetContent.tsx +++ b/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 + case PaymentType.ALI_PAY: + case PaymentType.AU_PAY: + case PaymentType.PAY_PAY: + case PaymentType.LINE_PAY: + case PaymentType.MER_PAY: + case PaymentType.RAKUTEN: + return + case PaymentType.NET_CASH: + case PaymentType.BIT_CASH: + case PaymentType.WEB_MONEY: + return + case PaymentType.BANK_TRANSFER: + case PaymentType.PAY_EASY: + return + case PaymentType.KONBINI: + return + case PaymentType.PAIDY: + return + default: + break; + } + } const renderItem = () => { return ( - {paymentType === PaymentType.CREDIT && } - {paymentType === PaymentType.PAY_PAY && } - {paymentType === PaymentType.KONBINI && } + {getBaseScreenByPaymentType(paymentType)} {renderLoading} ); @@ -79,7 +106,13 @@ const SheetContent = () => { styles.flatListContent, { paddingBottom: keyboardHeight }, ]} - ListFooterComponent={} + ListFooterComponent={ + <> + + + + + } ListFooterComponentStyle={styles.footerContent} /> @@ -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), }, }), diff --git a/payment_sdk/src/components/sections/CardSection.tsx b/payment_sdk/src/components/sections/CardSection.tsx index 64a8d44..9e1e591 100644 --- a/payment_sdk/src/components/sections/CardSection.tsx +++ b/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), diff --git a/payment_sdk/src/components/sections/KonbiniSection.tsx b/payment_sdk/src/components/sections/KonbiniSection.tsx index fefde56..18d315b 100644 --- a/payment_sdk/src/components/sections/KonbiniSection.tsx +++ b/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), diff --git a/payment_sdk/src/components/sections/PaidyFormSection.tsx b/payment_sdk/src/components/sections/PaidyFormSection.tsx new file mode 100644 index 0000000..faee96c --- /dev/null +++ b/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 ( + + + { + console.log(text) + // resetError("name"); + // dispatch({ type: Actions.SET_NAME, payload: text }); + }} + inputStyle={styles.inputStyle} + // error={inputErrors.name} + /> + + + { + console.log(text) + // resetError("email"); + // dispatch({ type: Actions.SET_EMAIL, payload: text }); + }} + inputStyle={styles.inputStyle} + // error={inputErrors.email} + /> + + + + + + ); +}; + +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), + }, +}); \ No newline at end of file diff --git a/payment_sdk/src/components/sections/SimpleRedirectSection.tsx b/payment_sdk/src/components/sections/SimpleRedirectSection.tsx new file mode 100644 index 0000000..e9e39d7 --- /dev/null +++ b/payment_sdk/src/components/sections/SimpleRedirectSection.tsx @@ -0,0 +1,83 @@ +import React, { useContext } from "react"; + +import { StyleSheet, View } from "react-native"; + +import { StateContext } from "@context/state"; + +import LightBox from "@components/LightBox"; + +import { LangKeys } from "@util/constants"; +import { PaymentType, ThemeSchemeType } from "@util/types"; + +import { resizeFonts, responsiveScale } from "@theme/scalling"; +import { useCurrentTheme } from "@theme/useCurrentTheme"; + +import KomojuText from "../KomojuText"; +import SubmitButton from "../SubmitButton"; + +type SimpleRedirectSectionProps = { + type: PaymentType; +} + +const SimpleRedirectSection = ({ type }: SimpleRedirectSectionProps) => { + const { sessionPay } = useContext(StateContext); + const theme = useCurrentTheme(); + const styles = getStyles(theme); + const onPay = () => { + sessionPay({ paymentType: type }); + }; + + return ( + + + {`PAYMENT_VIA_${LangKeys[type]}`} + + {`${LangKeys[type]}_REDIRECT_MESSAGE`} + + + + + + + + + + ); +}; + +export default SimpleRedirectSection; + +const getStyles = (theme: ThemeSchemeType) => { + return StyleSheet.create({ + container: { + flexGrow: 1, + }, + textContent: { + marginBottom: responsiveScale(24), + marginTop: responsiveScale(16), + marginHorizontal: responsiveScale(16), + }, + title: { + fontSize: resizeFonts(20), + fontWeight: "bold", + color: theme.TEXT_COLOR, + marginBottom: responsiveScale(8), + }, + description: { + fontSize: resizeFonts(16), + color: theme.TEXT_COLOR, + }, + lbWrapper: { + minHeight: responsiveScale(80), + marginHorizontal: responsiveScale(16), + marginBottom: responsiveScale(24), + }, + btn: { + height: responsiveScale(60), + marginBottom: responsiveScale(24), + }, + }); +} diff --git a/payment_sdk/src/components/sections/SingleInputFormSection.tsx b/payment_sdk/src/components/sections/SingleInputFormSection.tsx new file mode 100644 index 0000000..43fd757 --- /dev/null +++ b/payment_sdk/src/components/sections/SingleInputFormSection.tsx @@ -0,0 +1,80 @@ +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 { formatCurrency } from "@util/helpers"; +import { PaymentType } from "@util/types"; + +import { responsiveScale } from "@theme/scalling"; + +import SubmitButton from "../SubmitButton"; + +type SingleInputFormSectionProps = { + type: PaymentType; +} + +const SingleInputFormSection = ({ type }: SingleInputFormSectionProps) => { + const onPay = () => { + sessionPay({ paymentType: PaymentType.PAY_PAY }); + }; + + const { + sessionPay, + amount, + currency, + } = useContext(StateContext); + + return ( + + + { + console.log(text) + // resetError("name"); + // dispatch({ type: Actions.SET_CARDHOLDER_NAME, payload: text }); + }} + inputStyle={styles.inputStyle} + // error={inputErrors.name} + testID="cardHolderName" + /> + + + + + + ); +}; + +export default SingleInputFormSection; + +const styles = StyleSheet.create({ + cardContainer: { + position: "relative", + flexGrow: 1, + }, + cardNameContainer: { + margin: responsiveScale(16), + marginBottom: responsiveScale(24), + height: responsiveScale(60), + }, + btn: { + height: responsiveScale(60), + marginVertical: responsiveScale(24), + }, + inputStyle: { + height: responsiveScale(50), + }, +}); diff --git a/payment_sdk/src/components/sections/TransferFormSection.tsx b/payment_sdk/src/components/sections/TransferFormSection.tsx new file mode 100644 index 0000000..36b35cf --- /dev/null +++ b/payment_sdk/src/components/sections/TransferFormSection.tsx @@ -0,0 +1,148 @@ +import React, { useContext } from "react"; + +import { StyleSheet, View } from "react-native"; + +import { StateContext } from "@context/state"; + +import Input from "@components/Input"; + +import { formatCurrency } from "@util/helpers"; +import { PaymentType } from "@util/types"; + +import { responsiveScale } from "@theme/scalling"; + +import SubmitButton from "../SubmitButton"; + +type TransferFormSectionProps = { + type: PaymentType; +} + +const TransferFormSection = ({ type }: TransferFormSectionProps) => { + const onPay = () => { + sessionPay({ paymentType: type }); + }; + + const { + sessionPay, + amount, + currency, + } = useContext(StateContext); + + return ( + + + { + console.log(text) + // resetError("name"); + // dispatch({ type: Actions.SET_NAME, payload: text }); + }} + inputStyle={styles.inputStyle} + // error={inputErrors.name} + /> + + + { + console.log(text) + // resetError("email"); + // dispatch({ type: Actions.SET_EMAIL, payload: text }); + }} + inputStyle={styles.inputStyle} + // error={inputErrors.email} + /> + + + { + console.log(text) + // resetError("email"); + // dispatch({ type: Actions.SET_EMAIL, payload: text }); + }} + inputStyle={styles.inputStyle} + // error={inputErrors.email} + /> + + + { + console.log(text) + // resetError("email"); + // dispatch({ type: Actions.SET_EMAIL, payload: text }); + }} + inputStyle={styles.inputStyle} + // error={inputErrors.email} + /> + + + { + console.log(text) + // resetError("email"); + // dispatch({ type: Actions.SET_EMAIL, payload: text }); + }} + inputStyle={styles.inputStyle} + // error={inputErrors.email} + /> + + + { + console.log(text) + // resetError("email"); + // dispatch({ type: Actions.SET_EMAIL, payload: text }); + }} + inputStyle={styles.inputStyle} + // error={inputErrors.email} + /> + + + + + + ); +}; + +export default TransferFormSection; + +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), + marginVertical: responsiveScale(24), + }, +}); \ No newline at end of file diff --git a/payment_sdk/src/theme/defaultColorTheme.ts b/payment_sdk/src/theme/defaultColorTheme.ts index 36fbdef..734089f 100644 --- a/payment_sdk/src/theme/defaultColorTheme.ts +++ b/payment_sdk/src/theme/defaultColorTheme.ts @@ -27,7 +27,7 @@ const lightTheme = { WHITE50: '#00000050', CARD_BACKGROUND: '#ffffff', CARD_BORDER: '#CAD6E1', - LIGHT_BOX: '#BCBCBC', + LIGHT_BOX: '#dbdbdb', CARD_SHADOW_IOS_COLOR: '#D9D9D9', CARD_SHADOW_ANDROID_COLOR: '#c4c2c2', }; diff --git a/payment_sdk/src/util/constants.ts b/payment_sdk/src/util/constants.ts index 5b45af0..0a4239c 100644 --- a/payment_sdk/src/util/constants.ts +++ b/payment_sdk/src/util/constants.ts @@ -1,4 +1,6 @@ -export const noop = () => {}; +import { PaymentType } from "./types"; + +export const noop = () => { }; export const BASE_URL = "https://komoju.com"; export const BASE_URL_API = `${BASE_URL}/api/v1`; export const API_HEADER = (publicKey: string) => ({ @@ -30,3 +32,30 @@ export enum ThemeModes { light = "light", dark = "dark", } + +export enum SimpleRedirectTypeModes { + paypay = "PAY_PAY", + alipay = "ALI_PAY", + linepay = "LINE_PAY", + merpay = "MER_PAY", + rakuten = "RAKUTEN", + aupay = "AU_PAY" +} + +export const LangKeys: { [key in PaymentType]: string } = { + [PaymentType.ALI_PAY]: "ALI_PAY", + [PaymentType.AU_PAY]: "AU_PAY", + [PaymentType.BANK_TRANSFER]: "BANK_TRANSFER", + [PaymentType.BIT_CASH]: "BIT_CASH", + [PaymentType.CREDIT]: "CREDIT", + [PaymentType.KONBINI]: "KONBINI", + [PaymentType.LINE_PAY]: "LINE_PAY", + [PaymentType.MER_PAY]: "MER_PAY", + [PaymentType.PAIDY]: "PAIDY", + [PaymentType.PAY_EASY]: "PAY_EASY", + [PaymentType.PAY_PAY]: "PAY_PAY", + [PaymentType.RAKUTEN]: "RAKUTEN", + [PaymentType.WEB_MONEY]: "WEB_MONEY", + [PaymentType.NET_CASH]: "NET_CASH", + +};