Skip to content

Commit

Permalink
Added bank Transfer Form (#4)
Browse files Browse the repository at this point in the history
  • Loading branch information
AmniX authored Sep 6, 2024
1 parent d08519b commit 1b1e7d3
Show file tree
Hide file tree
Showing 5 changed files with 256 additions and 110 deletions.
Original file line number Diff line number Diff line change
@@ -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
},
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@ 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
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
Expand Down Expand Up @@ -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(
Expand All @@ -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(
Expand Down Expand Up @@ -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,
Expand All @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,33 +1,21 @@
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
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
Expand All @@ -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") { }
}
}
Expand Down
Loading

0 comments on commit 1b1e7d3

Please sign in to comment.