diff --git a/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/KomojuPaymentScreen.kt b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/KomojuPaymentScreen.kt index c24c471..7e086fa 100644 --- a/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/KomojuPaymentScreen.kt +++ b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/KomojuPaymentScreen.kt @@ -21,6 +21,7 @@ import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp @@ -64,6 +65,7 @@ fun KomojuPaymentScreen(sdkConfiguration: KomojuSDK.Configuration, onCompleted: onDismissRequest = { onCompleted() }, + containerColor = Color.White, shape = RectangleShape, sheetState = modalBottomSheetState, dragHandle = { PaymentSheetHandle(LocalI18nTextsProvider.current["PAYMENT_OPTIONS"], onCloseClicked = {}) }, @@ -73,7 +75,6 @@ fun KomojuPaymentScreen(sdkConfiguration: KomojuSDK.Configuration, onCompleted: else -> SecureFlagPolicy.SecureOn }, shouldDismissOnBackPress = false, - isFocusable = true, ), ) { Box( diff --git a/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/AppPayForm.kt b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/AppPayForm.kt new file mode 100644 index 0000000..ea9942b --- /dev/null +++ b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/AppPayForm.kt @@ -0,0 +1,112 @@ +package com.degica.komoju.android.sdk.ui.screens.payment.composables + +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +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.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontWeight +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.R +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.mobile.sdk.entities.PaymentMethod + +@Composable +internal fun AppPayForm(paymentMethod: PaymentMethod) { + val titleKey = remember(paymentMethod) { + when (paymentMethod) { + is PaymentMethod.AliPay -> "PAYMENT_VIA_ALI_PAY" + is PaymentMethod.AuPay -> "PAYMENT_VIA_AU_PAY" + is PaymentMethod.LinePay -> "PAYMENT_VIA_LINE_PAY" + is PaymentMethod.MerPay -> "PAYMENT_VIA_MER_PAY" + is PaymentMethod.PayPay -> "PAYMENT_VIA_PAY_PAY" + is PaymentMethod.RakutenPay -> "PAYMENT_VIA_RAKUTEN" + else -> null + } + } + + val messageKey = remember(paymentMethod) { + when (paymentMethod) { + is PaymentMethod.AliPay -> "ALI_PAY_REDIRECT_MESSAGE" + is PaymentMethod.AuPay -> "AU_PAY_REDIRECT_MESSAGE" + is PaymentMethod.LinePay -> "LINE_PAY_REDIRECT_MESSAGE" + is PaymentMethod.MerPay -> "MER_PAY_REDIRECT_MESSAGE" + is PaymentMethod.PayPay -> "PAY_PAY_REDIRECT_MESSAGE" + is PaymentMethod.RakutenPay -> "RAKUTEN_REDIRECT_MESSAGE" + else -> null + } + } + + val paymentButtonKey = remember(paymentMethod) { + when (paymentMethod) { + is PaymentMethod.AliPay -> "CONTINUE_TO_ALI_PAY" + is PaymentMethod.AuPay -> "CONTINUE_TO_AU_PAY" + is PaymentMethod.LinePay -> "CONTINUE_TO_LINE_PAY" + is PaymentMethod.MerPay -> "CONTINUE_TO_MER_PAY" + is PaymentMethod.PayPay -> "CONTINUE_TO_PAY_PAY" + is PaymentMethod.RakutenPay -> "CONTINUE_TO_RAKUTEN" + else -> null + } + } + + if (titleKey != null && messageKey != null && paymentButtonKey != null) { + Column(modifier = Modifier.padding(all = 16.dp)) { + Text(text = LocalI18nTextsProvider.current[titleKey], style = TextStyle(fontWeight = FontWeight.Bold, fontSize = 24.sp)) + Spacer(modifier = Modifier.height(12.dp)) + Text(text = LocalI18nTextsProvider.current[messageKey]) + Spacer(modifier = Modifier.height(24.dp)) + Row( + modifier = Modifier + .background(Color(0xFFF3F7F9), shape = RoundedCornerShape(8.dp)) + .padding(16.dp), + verticalAlignment = Alignment.CenterVertically, + ) { + Image( + painter = painterResource(R.drawable.komoju_ic_app_opens_info), + contentDescription = "app_opens_info", + modifier = Modifier.size(32.dp), + ) + Spacer(modifier = Modifier.width(16.dp)) + Text(text = LocalI18nTextsProvider.current["LIGHT_BOX_CONTENT"]) + } + Spacer(modifier = Modifier.height(32.dp)) + PaymentButton(LocalI18nTextsProvider.current[paymentButtonKey], modifier = Modifier.fillMaxWidth()) { } + } + } +} + +@Composable +@Preview(showBackground = true) +private fun AppPayFormPreview() { + KomojuMobileSdkTheme(Language.ENGLISH) { + AppPayForm( + PaymentMethod.LinePay( + displayName = "LINE Pay", + hashedGateway = "LINE", + exchangeRate = 1.0, + currency = "JPY", + amount = 100.0, + additionalFields = listOf(), + isOffsite = false, + ), + ) + } +} 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 9e44af8..61bc8d2 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 @@ -1,17 +1,10 @@ package com.degica.komoju.android.sdk.ui.screens.payment.composables -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height -import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue 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.unit.dp import com.degica.komoju.mobile.sdk.entities.PaymentMethod @Composable @@ -67,8 +60,20 @@ internal fun PaymentMethodForm(paymentMethod: PaymentMethod) { }, ) - else -> Box(modifier = Modifier.height(420.dp).fillMaxWidth(), contentAlignment = Alignment.Center) { - Text("// TODO") - } + is PaymentMethod.AliPay, + is PaymentMethod.AuPay, + is PaymentMethod.LinePay, + is PaymentMethod.MerPay, + is PaymentMethod.PayPay, + is PaymentMethod.RakutenPay, + -> AppPayForm(paymentMethod) + + is PaymentMethod.BankTransfer -> Unit + is PaymentMethod.BitCash -> Unit + is PaymentMethod.NetCash -> Unit + is PaymentMethod.Paidy -> Unit + is PaymentMethod.PayEasy -> Unit + is PaymentMethod.WebMoney -> Unit + is PaymentMethod.Other -> Unit } } diff --git a/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/PaymentMethodsRow.kt b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/PaymentMethodsRow.kt index 0520aa0..09dd424 100644 --- a/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/PaymentMethodsRow.kt +++ b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/PaymentMethodsRow.kt @@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.items import androidx.compose.foundation.shape.RoundedCornerShape @@ -51,7 +50,7 @@ private fun PaymentMethodComposable(paymentMethod: PaymentMethod, isSelected: Bo .clickable(onClick = onSelected) .padding(16.dp), ) { - Image(painter = painterResource(paymentMethod.displayIcon), contentDescription = "${paymentMethod.displayName} icon", modifier = Modifier.size(32.dp)) + Image(painter = painterResource(paymentMethod.displayIcon), contentDescription = "${paymentMethod.displayName} icon", modifier = Modifier.height(32.dp)) Spacer(modifier = Modifier.height(4.dp)) Text(paymentMethod.displayName) } @@ -59,20 +58,21 @@ private fun PaymentMethodComposable(paymentMethod: PaymentMethod, isSelected: Bo private val PaymentMethod.displayIcon get() = when (this) { - is PaymentMethod.AliPay -> R.drawable.komoju_ic_credit_card + is PaymentMethod.AliPay -> R.drawable.komoju_ic_alipay is PaymentMethod.AuPay -> R.drawable.komoju_ic_au_pay is PaymentMethod.BankTransfer -> R.drawable.komoju_ic_bank_transfer is PaymentMethod.BitCash -> R.drawable.komoju_ic_bitcash is PaymentMethod.CreditCard -> R.drawable.komoju_ic_credit_card is PaymentMethod.Konbini -> R.drawable.komoju_ic_konbini is PaymentMethod.LinePay -> R.drawable.komoju_ic_linepay - is PaymentMethod.MerPay -> R.drawable.komoju_ic_credit_card + is PaymentMethod.MerPay -> R.drawable.komoju_ic_merpay is PaymentMethod.NetCash -> R.drawable.komoju_ic_credit_card is PaymentMethod.Paidy -> R.drawable.komoju_ic_paidy is PaymentMethod.PayEasy -> R.drawable.komoju_ic_credit_card is PaymentMethod.PayPay -> R.drawable.komoju_ic_paypay is PaymentMethod.RakutenPay -> R.drawable.komoju_ic_rakuten_pay is PaymentMethod.WebMoney -> R.drawable.komoju_ic_credit_card + is PaymentMethod.Other -> R.drawable.komoju_ic_credit_card } @Composable @@ -108,6 +108,5 @@ private fun PaymentMethodComposablePreview() { displayName = "PayPay", ), ) - PaymentMethodsRow(paymentMethods, paymentMethods.first()) { - } + PaymentMethodsRow(paymentMethods, paymentMethods.first()) {} } diff --git a/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/PaymentSheetHandle.kt b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/PaymentSheetHandle.kt index ea10efb..89467db 100644 --- a/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/PaymentSheetHandle.kt +++ b/android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/PaymentSheetHandle.kt @@ -3,7 +3,8 @@ package com.degica.komoju.android.sdk.ui.screens.payment.composables import androidx.compose.foundation.Image import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.material.icons.Icons import androidx.compose.material.icons.rounded.Close @@ -11,6 +12,7 @@ import androidx.compose.material3.Text import androidx.compose.material3.ripple import androidx.compose.runtime.Composable import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.TextStyle @@ -21,18 +23,18 @@ import androidx.compose.ui.unit.sp @Composable internal fun PaymentSheetHandle(title: String, onCloseClicked: () -> Unit) { - Row(modifier = Modifier.padding(top = 16.dp)) { + Box(modifier = Modifier.padding(top = 16.dp)) { Text( title, modifier = Modifier .padding(16.dp) - .weight(1f), + .fillMaxWidth(), style = TextStyle(fontWeight = FontWeight.Bold, color = Color.Black, textAlign = TextAlign.Center, fontSize = 16.sp), ) Image( imageVector = Icons.Rounded.Close, contentDescription = "Close Payment Sheet", - modifier = Modifier + modifier = Modifier.align(Alignment.CenterEnd) .clickable( indication = ripple(bounded = true, radius = 24.dp), interactionSource = remember { MutableInteractionSource() }, diff --git a/android/src/main/res/drawable/komoju_ic_alipay.xml b/android/src/main/res/drawable/komoju_ic_alipay.xml new file mode 100644 index 0000000..9d20633 --- /dev/null +++ b/android/src/main/res/drawable/komoju_ic_alipay.xml @@ -0,0 +1,10 @@ + + + diff --git a/android/src/main/res/drawable/komoju_ic_app_opens_info.xml b/android/src/main/res/drawable/komoju_ic_app_opens_info.xml new file mode 100644 index 0000000..95b5851 --- /dev/null +++ b/android/src/main/res/drawable/komoju_ic_app_opens_info.xml @@ -0,0 +1,19 @@ + + + + + diff --git a/android/src/main/res/drawable/komoju_ic_merpay.xml b/android/src/main/res/drawable/komoju_ic_merpay.xml new file mode 100644 index 0000000..708c343 --- /dev/null +++ b/android/src/main/res/drawable/komoju_ic_merpay.xml @@ -0,0 +1,24 @@ + + + + + + + + diff --git a/shared/src/commonMain/kotlin/com/degica/komoju/mobile/sdk/entities/PaymentMethod.kt b/shared/src/commonMain/kotlin/com/degica/komoju/mobile/sdk/entities/PaymentMethod.kt index 135e095..723e690 100644 --- a/shared/src/commonMain/kotlin/com/degica/komoju/mobile/sdk/entities/PaymentMethod.kt +++ b/shared/src/commonMain/kotlin/com/degica/komoju/mobile/sdk/entities/PaymentMethod.kt @@ -162,4 +162,13 @@ sealed interface PaymentMethod { data class SeicoMart(override val key: String) : KonbiniBrand } } + + data class Other( + override val displayName: String, + override val hashedGateway: String, + override val exchangeRate: Double, + override val currency: String, + override val amount: Double, + override val additionalFields: List, + ) : PaymentMethod } diff --git a/shared/src/commonMain/kotlin/com/degica/komoju/mobile/sdk/remote/mappers/SessionMapper.kt b/shared/src/commonMain/kotlin/com/degica/komoju/mobile/sdk/remote/mappers/SessionMapper.kt index 862c178..e35236c 100644 --- a/shared/src/commonMain/kotlin/com/degica/komoju/mobile/sdk/remote/mappers/SessionMapper.kt +++ b/shared/src/commonMain/kotlin/com/degica/komoju/mobile/sdk/remote/mappers/SessionMapper.kt @@ -164,8 +164,15 @@ internal object SessionMapper { secondIcon = paymentMethod.secondIcon.orEmpty(), displayName = i18nTexts[paymentMethodType], ) - - else -> null + null -> null + else -> PaymentMethod.Other( + hashedGateway = paymentMethod.hashedGateway.orEmpty(), + exchangeRate = paymentMethod.exchangeRate ?: 1.0, + currency = paymentMethod.currency.orEmpty(), + amount = paymentMethod.amount ?: 0.0, + additionalFields = paymentMethod.additionalFields?.filterNotNull().orEmpty(), + displayName = i18nTexts[paymentMethodType], + ) } }.orEmpty(), )