From 8de5610f4e8a479e370a24c70d1109a486642e12 Mon Sep 17 00:00:00 2001 From: amnix Date: Fri, 6 Sep 2024 17:32:29 +0900 Subject: [PATCH] Added bank Transfer Form --- .../screens/payment/composables/BankForm.kt | 142 ++++++++++++++++++ .../payment/composables/CreditCardForm.kt | 52 ++----- .../payment/composables/KonbiniForm.kt | 79 ++-------- .../payment/composables/PaymentMethodForm.kt | 35 ++++- .../screens/payment/composables/TextField.kt | 58 +++++++ 5 files changed, 256 insertions(+), 110 deletions(-) create mode 100644 android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/BankForm.kt create mode 100644 android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/TextField.kt diff --git a/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/BankForm.kt b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/BankForm.kt new file mode 100644 index 0000000..20c6c5c --- /dev/null +++ b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/BankForm.kt @@ -0,0 +1,142 @@ +package com.degica.komoju.android.sdk.ui.screens.payment.composables + +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.runtime.Composable +import androidx.compose.runtime.derivedStateOf +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.input.KeyboardType +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.degica.komoju.android.sdk.types.Currency +import com.degica.komoju.android.sdk.types.Language +import com.degica.komoju.android.sdk.ui.theme.KomojuMobileSdkTheme +import com.degica.komoju.android.sdk.ui.theme.LocalI18nTextsProvider +import com.degica.komoju.android.sdk.utils.AmountUtils +import com.degica.komoju.mobile.sdk.entities.PaymentMethod + +@Composable +internal fun BankForm( + bankTransfer: PaymentMethod.BankTransfer, + lastName: String, + onLastNameChange: (String) -> Unit, + firstName: String, + onFirstNameChange: (String) -> Unit, + lastNamePhonetic: String, + onLastNamePhoneticChange: (String) -> Unit, + firstNamePhonetic: String, + onFirstNamePhoneticChange: (String) -> Unit, + email: String, + onEmailChange: (String) -> Unit, + phoneNumber: String, + onPhoneNumberChange: (String) -> Unit, +) { + val displayPayableAmount by remember(bankTransfer.amount) { + derivedStateOf { + AmountUtils.formatToDecimal(Currency.parse(bankTransfer.currency), bankTransfer.amount) + } + } + Column { + TextField( + value = lastName, + titleKey = "LAST_NAME", + placeholderKey = "LAST_NAME", + onValueChange = onLastNameChange, + ) + TextField( + value = firstName, + titleKey = "FIRST_NAME", + placeholderKey = "FIRST_NAME", + onValueChange = onFirstNameChange, + ) + TextField( + value = lastNamePhonetic, + titleKey = "LAST_NAME_PHONETIC", + placeholderKey = "LAST_NAME_PHONETIC", + onValueChange = onLastNamePhoneticChange, + ) + TextField( + value = firstNamePhonetic, + titleKey = "FIRST_NAME_PHONETIC", + placeholderKey = "FIRST_NAME_PHONETIC", + onValueChange = onFirstNamePhoneticChange, + ) + TextField( + value = email, + titleKey = "EMAIL", + placeholderKey = "EXAMPLE_EMAIL", + onValueChange = onEmailChange, + keyboardType = KeyboardType.Email, + ) + TextField( + value = phoneNumber, + titleKey = "TELEPHONE_NUMBER", + placeholderKey = "TELEPHONE_NUMBER_PLACEHOLDER", + onValueChange = onPhoneNumberChange, + keyboardType = KeyboardType.Number, + ) + Spacer(modifier = Modifier.height(16.dp)) + PaymentButton( + modifier = Modifier + .padding(16.dp) + .fillMaxWidth(), + text = "${LocalI18nTextsProvider.current["PAY"]} $displayPayableAmount", + ) { } + } +} + +@Composable +@Preview(showBackground = true) +private fun BankFormPreview() { + val bankTransfer = PaymentMethod.BankTransfer( + displayName = "Bank Transfer", + hashedGateway = "hashedGateway", + exchangeRate = 1.0, + currency = "JPY", + amount = 100.0, + additionalFields = emptyList(), + customerFee = 10, + ) + KomojuMobileSdkTheme(Language.ENGLISH) { + var lastName by remember { mutableStateOf("") } + var firstName by remember { mutableStateOf("") } + var lastNamePhonetic by remember { mutableStateOf("") } + var firstNamePhonetic by remember { mutableStateOf("") } + var email by remember { mutableStateOf("") } + var phoneNumber by remember { mutableStateOf("") } + BankForm( + bankTransfer, + lastName, + onLastNameChange = { + lastName = it + }, + firstName, + onFirstNameChange = { + firstName = it + }, + lastNamePhonetic, + onLastNamePhoneticChange = { + lastNamePhonetic = it + }, + firstNamePhonetic, + onFirstNamePhoneticChange = { + firstNamePhonetic = it + }, + email, + onEmailChange = { + email = it + }, + phoneNumber, + onPhoneNumberChange = { + phoneNumber = it + }, + ) + } +} diff --git a/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/CreditCardForm.kt b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/CreditCardForm.kt index 5a67d91..f0e2afd 100644 --- a/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/CreditCardForm.kt +++ b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/CreditCardForm.kt @@ -21,7 +21,6 @@ import androidx.compose.material3.VerticalDivider import androidx.compose.runtime.Composable import androidx.compose.runtime.derivedStateOf import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableIntStateOf import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue @@ -29,6 +28,7 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.onGloballyPositioned +import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.input.KeyboardType @@ -66,41 +66,15 @@ internal fun CreditCardForm( onSaveCardChange: (Boolean) -> Unit, ) { var cardScheme by remember { mutableStateOf(CardScheme.UNKNOWN) } - var textFieldHeight by remember { mutableIntStateOf(0) } + var expiryCvvExpiryHeight by remember { mutableStateOf(0.dp) } + val localDensity = LocalDensity.current val displayPayableAmount by remember(creditCard.amount) { derivedStateOf { AmountUtils.formatToDecimal(Currency.parse(creditCard.currency), creditCard.amount) } } - Column(modifier = Modifier.padding(vertical = 16.dp)) { - Text( - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp), - text = LocalI18nTextsProvider.current["CARD_HOLDER_NAME"], - ) - Box( - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp, vertical = 8.dp) - .border(1.dp, Gray200, shape = RoundedCornerShape(8.dp)) - .padding(16.dp), - ) { - BasicTextField( - modifier = Modifier.fillMaxWidth(), - value = fullNameOnCard, - onValueChange = onFullNameOnCardChange, - textStyle = TextStyle(fontSize = 16.sp, color = Color.Black), - singleLine = true, - ) - if (fullNameOnCard.isEmpty()) { - Text( - text = LocalI18nTextsProvider.current["FULL_NAME_ON_CARD"], - style = TextStyle(fontSize = 16.sp, color = Gray500), - ) - } - } - + Column { + TextField(fullNameOnCard, "CARD_HOLDER_NAME", "FULL_NAME_ON_CARD", onFullNameOnCardChange) Spacer(modifier = Modifier.height(16.dp)) Text( @@ -114,16 +88,15 @@ internal fun CreditCardForm( modifier = Modifier .fillMaxWidth() .padding(horizontal = 16.dp, vertical = 8.dp) - .border(1.dp, Gray200, shape = RoundedCornerShape(8.dp)), + .border(1.dp, Gray200, shape = RoundedCornerShape(8.dp)).onGloballyPositioned { + expiryCvvExpiryHeight = with(localDensity) { it.size.height.div(2).toDp() } + }, ) { Column { Row( verticalAlignment = Alignment.CenterVertically, modifier = Modifier - .padding(16.dp) - .onGloballyPositioned { - textFieldHeight = it.size.height - }, + .padding(16.dp), ) { Box(modifier = Modifier.weight(1f)) { BasicTextField( @@ -156,12 +129,9 @@ internal fun CreditCardForm( HorizontalDivider(thickness = 1.dp, color = Gray200) Row( - modifier = Modifier - .height(textFieldHeight.dp) - .padding(horizontal = 16.dp), verticalAlignment = Alignment.CenterVertically, ) { - Box(modifier = Modifier.weight(1f)) { + Box(modifier = Modifier.weight(1f).padding(16.dp)) { BasicTextField( modifier = Modifier.fillMaxWidth(), value = creditCardExpiryDate, @@ -182,7 +152,7 @@ internal fun CreditCardForm( ) } } - VerticalDivider(thickness = 1.dp, color = Gray200) + VerticalDivider(thickness = 1.dp, color = Gray200, modifier = Modifier.height(expiryCvvExpiryHeight)) Spacer(Modifier.width(16.dp)) Row(modifier = Modifier.weight(1f)) { Box { diff --git a/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/KonbiniForm.kt b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/KonbiniForm.kt index 926a642..a04f870 100644 --- a/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/KonbiniForm.kt +++ b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/KonbiniForm.kt @@ -1,16 +1,10 @@ package com.degica.komoju.android.sdk.ui.screens.payment.composables -import androidx.compose.foundation.border -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.foundation.text.BasicTextField -import androidx.compose.foundation.text.KeyboardOptions -import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.derivedStateOf import androidx.compose.runtime.getValue @@ -18,16 +12,10 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp import com.degica.komoju.android.sdk.types.Currency import com.degica.komoju.android.sdk.types.Language -import com.degica.komoju.android.sdk.ui.theme.Gray200 -import com.degica.komoju.android.sdk.ui.theme.Gray500 import com.degica.komoju.android.sdk.ui.theme.KomojuMobileSdkTheme import com.degica.komoju.android.sdk.ui.theme.LocalI18nTextsProvider import com.degica.komoju.android.sdk.utils.AmountUtils @@ -49,66 +37,21 @@ internal fun KonbiniForm( AmountUtils.formatToDecimal(Currency.parse(konbini.currency), konbini.amount) } } - Column(modifier = Modifier.padding(vertical = 16.dp)) { - Text( - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp), - text = LocalI18nTextsProvider.current["NAME_SHOWN_ON_RECEIPT"], + Column { + TextField( + receiptName, + "NAME_SHOWN_ON_RECEIPT", + "FULL_NAME_ON_RECEIPT", + onReceiptNameChange, ) - Box( - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp, vertical = 8.dp) - .border(1.dp, Gray200, shape = RoundedCornerShape(8.dp)) - .padding(16.dp), - ) { - BasicTextField( - modifier = Modifier.fillMaxWidth(), - value = receiptName, - onValueChange = onReceiptNameChange, - textStyle = TextStyle(fontSize = 16.sp, color = Color.Black), - singleLine = true, - ) - if (receiptName.isEmpty()) { - Text( - text = LocalI18nTextsProvider.current["FULL_NAME_ON_RECEIPT"], - style = TextStyle(fontSize = 16.sp, color = Gray500), - ) - } - } - - Text( - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp), - text = LocalI18nTextsProvider.current["EMAIL"], + TextField( + email, + "EMAIL", + "EXAMPLE_EMAIL", + onEmailChange, ) - Box( - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp, vertical = 8.dp) - .border(1.dp, Gray200, shape = RoundedCornerShape(8.dp)) - .padding(16.dp), - ) { - BasicTextField( - modifier = Modifier.fillMaxWidth(), - value = email, - onValueChange = onEmailChange, - textStyle = TextStyle(fontSize = 16.sp, color = Color.Black), - singleLine = true, - keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email), - ) - if (email.isEmpty()) { - Text( - text = LocalI18nTextsProvider.current["EXAMPLE_EMAIL"], - style = TextStyle(fontSize = 16.sp, color = Gray500), - ) - } - } Spacer(modifier = Modifier.height(8.dp)) KonbiniBrandsRow(konbini.brands, selectedKonbiniBrand, onKonbiniBrandChange) - PaymentButton(modifier = Modifier.padding(16.dp).fillMaxWidth(), text = "${LocalI18nTextsProvider.current["PAY"]} $displayPayableAmount") { } } } diff --git a/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/PaymentMethodForm.kt b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/PaymentMethodForm.kt index 61bc8d2..c8645a4 100644 --- a/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/PaymentMethodForm.kt +++ b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/PaymentMethodForm.kt @@ -19,6 +19,13 @@ internal fun PaymentMethodForm(paymentMethod: PaymentMethod) { var konbiniBrand by remember { mutableStateOf(null) } var userEmailAddress by remember { mutableStateOf("") } + var lastName by remember { mutableStateOf("") } + var firstName by remember { mutableStateOf("") } + var lastNamePhonetic by remember { mutableStateOf("") } + var firstNamePhonetic by remember { mutableStateOf("") } + var email by remember { mutableStateOf("") } + var phoneNumber by remember { mutableStateOf("") } + when (paymentMethod) { is PaymentMethod.CreditCard -> CreditCardForm( creditCard = paymentMethod, @@ -68,7 +75,33 @@ internal fun PaymentMethodForm(paymentMethod: PaymentMethod) { is PaymentMethod.RakutenPay, -> AppPayForm(paymentMethod) - is PaymentMethod.BankTransfer -> Unit + is PaymentMethod.BankTransfer -> BankForm( + bankTransfer = paymentMethod, + lastName = lastName, + onLastNameChange = { + lastName = it + }, + firstName = firstName, + onFirstNameChange = { + firstName = it + }, + lastNamePhonetic = lastNamePhonetic, + onLastNamePhoneticChange = { + lastNamePhonetic = it + }, + firstNamePhonetic = firstNamePhonetic, + onFirstNamePhoneticChange = { + firstNamePhonetic = it + }, + email = email, + onEmailChange = { + email = it + }, + phoneNumber = phoneNumber, + onPhoneNumberChange = { + phoneNumber = it + }, + ) is PaymentMethod.BitCash -> Unit is PaymentMethod.NetCash -> Unit is PaymentMethod.Paidy -> Unit diff --git a/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/TextField.kt b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/TextField.kt new file mode 100644 index 0000000..d31d9c9 --- /dev/null +++ b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/TextField.kt @@ -0,0 +1,58 @@ +package com.degica.komoju.android.sdk.ui.screens.payment.composables + +import androidx.compose.foundation.border +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.text.BasicTextField +import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.input.KeyboardType +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import com.degica.komoju.android.sdk.ui.theme.Gray200 +import com.degica.komoju.android.sdk.ui.theme.Gray500 +import com.degica.komoju.android.sdk.ui.theme.LocalI18nTextsProvider + +@Composable +internal fun TextField(value: String, titleKey: String, placeholderKey: String, onValueChange: (String) -> Unit, keyboardType: KeyboardType = KeyboardType.Unspecified) { + Column { + Spacer(modifier = Modifier.height(8.dp)) + Text( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 16.dp), + text = LocalI18nTextsProvider.current[titleKey], + ) + Box( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 16.dp, vertical = 8.dp) + .border(1.dp, Gray200, shape = RoundedCornerShape(8.dp)) + .padding(16.dp), + ) { + BasicTextField( + modifier = Modifier.fillMaxWidth(), + value = value, + onValueChange = onValueChange, + textStyle = TextStyle(fontSize = 16.sp, color = Color.Black), + singleLine = true, + keyboardOptions = KeyboardOptions(keyboardType = keyboardType), + ) + if (value.isEmpty()) { + Text( + text = LocalI18nTextsProvider.current[placeholderKey], + style = TextStyle(fontSize = 16.sp, color = Gray500), + ) + } + } + } +}