Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added bank Transfer Form #4

Merged
merged 1 commit into from
Sep 6, 2024
Merged

Added bank Transfer Form #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 142 additions & 0 deletions ...id/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/BankForm.kt
View file
Open in desktop
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
},
)
}
}
52 changes: 11 additions & 41 deletions .../main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/CreditCardForm.kt
View file
Open in desktop
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
79 changes: 11 additions & 68 deletions ...src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/KonbiniForm.kt
View file
Open in desktop
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
Loading