Skip to content

Commit

Permalink
Added Native way to support i18n (#57)
Browse files Browse the repository at this point in the history 
* Added Native way to support i18n

* Always show footer
  • Loading branch information
@AmniX
AmniX authored Oct 22, 2024
1 parent 41b4ea7 commit fa3a20e
Show file tree
Hide file tree
Showing 31 changed files with 586 additions and 544 deletions.
86 changes: 28 additions & 58 deletions ...d/src/main/java/com/komoju/android/sdk/ui/screens/awating/KonbiniAwaitingPaymentScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Text
Expand All @@ -24,11 +22,11 @@ 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.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
Expand Down Expand Up @@ -103,13 +101,9 @@ private fun PaymentStatus(payment: Payment, onPrimaryButtonClicked: () -> Unit,
.weight(1f)
.padding(vertical = 16.dp),
) {
LazyColumn(
modifier = Modifier.background(Gray50, RoundedCornerShape(8.dp)),
) {
item {
InformationItem("Total Payment", displayPayableAmount)
}
items(payment.additionalInformation) {
Column(modifier = Modifier.background(Gray50, RoundedCornerShape(8.dp))) {
InformationItem(title = stringResource(R.string.komoju_total_payment), displayPayableAmount)
payment.additionalInformation.forEach {
HorizontalDivider(color = Gray200, modifier = Modifier.padding(horizontal = 16.dp))
InformationItem(it.first, it.second)
}
Expand All @@ -128,47 +122,19 @@ private fun PaymentStatus(payment: Payment, onPrimaryButtonClicked: () -> Unit,
}

@Composable
private fun InformationItem(key: String, value: String) {
private fun InformationItem(title: String, description: String) {
Row(Modifier.padding(16.dp)) {
Text(key, maxLines = 1, style = TextStyle(color = Gray700))
Text(title, maxLines = 1, style = TextStyle(color = Gray700))
Spacer(modifier = Modifier.weight(1f))
Text(
text = value,
text = description,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = TextStyle(color = Color.Black, fontWeight = FontWeight.Bold),
)
}
}

@Composable
@Preview(showBackground = true)
private fun InformationItemPreview() {
InformationItem("Total payment", "$200.00")
}

@Composable
@Preview(showBackground = true, showSystemUi = true)
private fun KonbiniPaymentStatusPreview() {
val konbini = Payment.Konbini(
status = PaymentStatus.AUTHORIZED,
redirectURL = "",
konbiniStoreKey = "lawson",
email = "",
instructionURL = "",
amount = "110",
currency = "JPY",
receiptNumber = "123456789",
confirmationCode = "123456",
)
PaymentStatus(
konbini,
{
},
) {
}
}

private val Payment.icon
get() = when {
status == PaymentStatus.COMPLETED -> R.drawable.komoju_ic_payment_status_completed
Expand All @@ -178,44 +144,48 @@ private val Payment.icon
}

private val Payment.title
@Composable
get() = when (status) {
PaymentStatus.COMPLETED -> "Payment successful"
PaymentStatus.FAILED -> "Payment failed"
else -> "Awaiting payment"
PaymentStatus.COMPLETED -> stringResource(R.string.komoju_payment_successful)
PaymentStatus.FAILED -> stringResource(R.string.komoju_payment_failed)
else -> stringResource(R.string.komoju_awaiting_payment)
}

private val Payment.description
@Composable
get() = when {
status == PaymentStatus.COMPLETED -> "Your payment has been processed successfully."
status == PaymentStatus.FAILED -> "Your payment has failed."
status == PaymentStatus.COMPLETED -> stringResource(R.string.komoju_your_payment_has_been_processed_successfully)
status == PaymentStatus.FAILED -> stringResource(R.string.komoju_your_payment_has_failed)
this is Payment.Konbini && status == PaymentStatus.AUTHORIZED ->
"You need to go to your local ${this.konbiniStoreKey}" +
" and make the payment to proceed."
else -> "Your payment is awaiting processing."
stringResource(R.string.komoju_awaiting_payment_instruction, this.konbiniStoreKey)
else -> stringResource(R.string.komoju_your_payment_is_awaiting_processing)
}

private val Payment.additionalInformation
@Composable
get() = when {
this is Payment.Error -> listOf("Error" to code + message)
this is Payment.Error -> listOf(stringResource(R.string.komoju_error) to code + message)
this is Payment.Konbini && status == PaymentStatus.AUTHORIZED -> listOfNotNull(
receiptNumber?.let { "Receipt Number" to it },
confirmationCode?.let { "Confirmation Code" to it },
receiptNumber?.let { stringResource(R.string.komoju_receipt_number) to it },
confirmationCode?.let { stringResource(R.string.komoju_confirmation_code) to it },
)

else -> emptyList()
}

private val Payment.primaryButtonText
@Composable
get() = when {
status == PaymentStatus.COMPLETED -> "Done"
status == PaymentStatus.FAILED -> "Update Payment method"
this is Payment.Konbini && status == PaymentStatus.AUTHORIZED -> "View instructions"
else -> "Okay"
status == PaymentStatus.COMPLETED -> stringResource(R.string.komoju_done)
status == PaymentStatus.FAILED -> stringResource(R.string.komoju_update_payment_method)
this is Payment.Konbini && status == PaymentStatus.AUTHORIZED -> stringResource(R.string.komoju_view_instructions)
else -> stringResource(R.string.komoju_okay)
}

private val Payment.secondaryButtonText
@Composable
get() = when {
status == PaymentStatus.FAILED -> "Have a question? Contact us"
this is Payment.Konbini && status == PaymentStatus.AUTHORIZED -> "I will do it later"
status == PaymentStatus.FAILED -> stringResource(R.string.komoju_have_a_question_contact_us)
this is Payment.Konbini && status == PaymentStatus.AUTHORIZED -> stringResource(R.string.komoju_i_will_do_it_later)
else -> null
}
13 changes: 6 additions & 7 deletions android/src/main/java/com/komoju/android/sdk/ui/screens/failed/PaymentFailedScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
Expand All @@ -27,7 +28,6 @@ import com.komoju.android.sdk.R
import com.komoju.android.sdk.ui.composables.PrimaryButton
import com.komoju.android.sdk.ui.screens.KomojuPaymentRoute
import com.komoju.android.sdk.ui.screens.RouterEffect
import com.komoju.android.sdk.ui.theme.LocalI18nTexts

internal class PaymentFailedScreen(private val route: KomojuPaymentRoute.PaymentFailed) : Screen {
@Composable
Expand All @@ -38,7 +38,6 @@ internal class PaymentFailedScreen(private val route: KomojuPaymentRoute.Payment

@Composable
private fun Screen.PaymentFailedScreenContent(route: KomojuPaymentRoute.PaymentFailed) {
val i18nTexts = LocalI18nTexts.current
val screenModel = rememberScreenModel { PaymentFailedScreenModel() }
RouterEffect(screenModel.router.collectAsStateWithLifecycle(), screenModel::onRouteConsumed)
Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
Expand All @@ -53,12 +52,12 @@ private fun Screen.PaymentFailedScreenContent(route: KomojuPaymentRoute.PaymentF
}
Image(painterResource(R.drawable.komoju_ic_payment_status_failed), "status_icon")
Spacer(Modifier.height(16.dp))
Text(i18nTexts["PAYMENT_FAILED"], fontSize = 24.sp, fontWeight = FontWeight.Bold)
Text(stringResource(R.string.komoju_payment_failed), fontSize = 24.sp, fontWeight = FontWeight.Bold)
Text(
text = when (route.reason) {
Reason.USER_CANCEL -> i18nTexts["PAYMENT_CANCELLED_MSG"]
Reason.OTHER -> i18nTexts["PAYMENT_RE_TRY_MSG_OTHERS"]
Reason.CREDIT_CARD_ERROR -> i18nTexts["PAYMENT_RE_TRY_MSG"]
Reason.USER_CANCEL -> stringResource(R.string.komoju_error_user_cancel)
Reason.OTHER -> stringResource(R.string.komoju_error_other)
Reason.CREDIT_CARD_ERROR -> stringResource(R.string.komoju_credit_card_error)
},
modifier = Modifier.padding(16.dp),
textAlign = TextAlign.Center,
Expand All @@ -68,7 +67,7 @@ private fun Screen.PaymentFailedScreenContent(route: KomojuPaymentRoute.PaymentF
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
text = i18nTexts["BACK_TO_STORE"],
text = stringResource(R.string.komoju_back_to_store),
) {
screenModel.onBackToStoreButtonClicked()
}
Expand Down
32 changes: 16 additions & 16 deletions android/src/main/java/com/komoju/android/sdk/ui/screens/payment/KomojuPaymentScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
Expand All @@ -26,6 +27,7 @@ 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.res.stringResource
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
Expand All @@ -39,7 +41,6 @@ import com.komoju.android.sdk.ui.screens.RouterEffect
import com.komoju.android.sdk.ui.screens.payment.composables.PaymentMethodForm
import com.komoju.android.sdk.ui.screens.payment.composables.PaymentMethodsRow
import com.komoju.android.sdk.ui.screens.payment.composables.PaymentSheetHandle
import com.komoju.android.sdk.ui.theme.LocalI18nTexts
import com.komoju.android.sdk.utils.OffsiteCustomTabResultContract
import com.komoju.mobile.sdk.entities.PaymentMethod
import kotlinx.parcelize.Parcelize
Expand Down Expand Up @@ -72,19 +73,19 @@ internal data class KomojuPaymentScreen(private val sdkConfiguration: KomojuSDK.
Box {
if (uiState.session != null) {
Column {
Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
PaymentSheetHandle(
LocalI18nTexts.current["PAYMENT_OPTIONS"],
onCloseClicked = {
screenViewModel.onCloseClicked()
},
)
PaymentMethodsRow(
paymentMethods = uiState.session!!.paymentMethods,
selectedPaymentMethod = uiState.selectedPaymentMethod,
onSelected = screenViewModel::onNewPaymentMethodSelected,
)
Spacer(modifier = Modifier.height(8.dp))
PaymentSheetHandle(
stringResource(R.string.komoju_payment_options),
onCloseClicked = {
screenViewModel.onCloseClicked()
},
)
PaymentMethodsRow(
paymentMethods = uiState.session!!.paymentMethods,
selectedPaymentMethod = uiState.selectedPaymentMethod,
onSelected = screenViewModel::onNewPaymentMethodSelected,
)
Spacer(modifier = Modifier.height(8.dp))
Box(modifier = Modifier.weight(1f).verticalScroll(rememberScrollState())) {
uiState.selectedPaymentMethod?.let { paymentMethod ->
PaymentMethodForm(
paymentMethod = paymentMethod,
Expand All @@ -106,9 +107,8 @@ internal data class KomojuPaymentScreen(private val sdkConfiguration: KomojuSDK.
)
}
}
Spacer(Modifier.weight(1f))
Image(
modifier = Modifier.padding(16.dp),
modifier = Modifier.fillMaxWidth().height(54.dp).padding(horizontal = 16.dp),
painter = painterResource(R.drawable.komoju_img_payment_footer),
contentDescription = "payment footer",
)
Expand Down
Loading

0 comments on commit fa3a20e

Please sign in to comment.