Skip to content

Commit

Permalink
Merge pull request #13144 from woocommerce/13121-woo-poscash-receipts…
Browse files Browse the repository at this point in the history 
…-reimlement-the-ui-of-the-cash-payment-screen-as-per-new-design

[Woo POS][Cash & Receipts] Reimlement the UI of the cash payment screen as per new design
  • Loading branch information
@kidinov
kidinov authored Dec 18, 2024
2 parents 3cbdaa6 + b7b691f commit 6a76722
Show file tree
Hide file tree
Showing 5 changed files with 200 additions and 136 deletions.
90 changes: 45 additions & 45 deletions .../src/main/kotlin/com/woocommerce/android/ui/woopos/cashpayment/WooPosCashPaymentScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ package com.woocommerce.android.ui.woopos.cashpayment

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
Expand All @@ -21,19 +19,18 @@ import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension
import androidx.hilt.navigation.compose.hiltViewModel
import com.woocommerce.android.R
import com.woocommerce.android.ui.compose.component.NullableCurrencyTextFieldValueMapper
import com.woocommerce.android.ui.payments.changeduecalculator.CurrencyVisualTransformation
import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview
import com.woocommerce.android.ui.woopos.common.composeui.WooPosTheme
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosButton
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosButtonState
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosMoneyInputField
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosToolbar
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosTypedInputField
import com.woocommerce.android.ui.woopos.common.composeui.toAdaptivePadding
import com.woocommerce.android.ui.woopos.root.navigation.WooPosNavigationEvent
import org.wordpress.android.fluxc.model.WCSettingsModel
Expand Down Expand Up @@ -94,10 +91,9 @@ private fun Collecting(
onCompleteOrderClicked: () -> Unit,
) {
ConstraintLayout(
modifier = Modifier.padding(top = 48.dp.toAdaptivePadding())
.fillMaxWidth()
modifier = Modifier.fillMaxSize()
) {
val (input, total, changeDue, button) = createRefs()
val (input, total, error, changeDue, button) = createRefs()
val focusRequester = remember { FocusRequester() }
val keyboardController = LocalSoftwareKeyboardController.current

Expand All @@ -106,66 +102,70 @@ private fun Collecting(
keyboardController?.show()
}

val totalBarrier = createStartBarrier(total, changeDue)
Text(
text = state.totalText,
style = MaterialTheme.typography.h6,
modifier = Modifier
.constrainAs(total) {
top.linkTo(parent.top, margin = 4.dp)
start.linkTo(parent.start, margin = 64.dp)
}
)

var inputText by remember { mutableStateOf(state.enteredAmount) }

val marginBetweenTotalAndInput = 48.dp.toAdaptivePadding()
val standardMargin = 16.dp.toAdaptivePadding()
WooPosTypedInputField(
WooPosMoneyInputField(
modifier = Modifier
.focusRequester(focusRequester)
.constrainAs(input) {
top.linkTo(parent.top)
start.linkTo(parent.start)
end.linkTo(totalBarrier, margin = standardMargin)
width = Dimension.fillToConstraints
top.linkTo(total.bottom, margin = marginBetweenTotalAndInput)
start.linkTo(parent.start, margin = standardMargin)
end.linkTo(parent.end, margin = standardMargin)
},
value = inputText,
label = stringResource(R.string.woopos_cash_payment_enter_amount_label),
valueMapper = NullableCurrencyTextFieldValueMapper.create(
decimalSeparator = state.decimalSeparator,
numberOfDecimals = state.numberOfDecimals
),
onValueChange = {
onAmountChanged(it)
inputText = it
},
visualTransformation = CurrencyVisualTransformation(
state.currencySymbol,
state.currencyPosition
),
singleLine = true,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Decimal
),
errorMessage = state.errorMessage,
)

Text(
text = state.totalText,
style = MaterialTheme.typography.h6,
fontWeight = FontWeight.Bold,
modifier = Modifier
.constrainAs(total) {
top.linkTo(input.top)
bottom.linkTo(input.bottom)
end.linkTo(parent.end, margin = standardMargin)
}
textStyle = MaterialTheme.typography.h4,
currencySymbol = state.currencySymbol,
currencyPosition = state.currencyPosition,
decimalSeparator = state.decimalSeparator,
numberOfDecimals = state.numberOfDecimals,
)

val smallMargin = 8.dp.toAdaptivePadding()
Text(
text = state.changeDueText,
style = MaterialTheme.typography.subtitle2,
style = MaterialTheme.typography.body1,
color = WooPosTheme.colors.warning,
fontWeight = FontWeight.Normal,
modifier = Modifier
.constrainAs(changeDue) {
bottom.linkTo(input.bottom)
top.linkTo(input.bottom, margin = smallMargin)
start.linkTo(parent.start, margin = standardMargin)
end.linkTo(parent.end, margin = standardMargin)
}
)

val buttonTopMargin = 48.dp.toAdaptivePadding()
if (state.errorMessage != null) {
Text(
text = state.errorMessage,
color = MaterialTheme.colors.error,
style = MaterialTheme.typography.body1,
textAlign = TextAlign.Center,
modifier = Modifier.constrainAs(error) {
top.linkTo(changeDue.bottom, margin = smallMargin)
start.linkTo(parent.start, margin = standardMargin)
end.linkTo(parent.end, margin = standardMargin)
}
)
}

WooPosButton(
text = state.button.text,
Expand All @@ -177,7 +177,7 @@ private fun Collecting(
},
modifier = Modifier
.constrainAs(button) {
top.linkTo(changeDue.bottom, margin = buttonTopMargin)
top.linkTo(input.bottom, margin = 96.dp)
end.linkTo(parent.end, margin = standardMargin)
start.linkTo(parent.start, margin = standardMargin)
width = Dimension.fillToConstraints
Expand Down Expand Up @@ -222,9 +222,9 @@ fun WooPosTotalsPaymentCashWithLabelScreenPreview() {
state = WooPosCashPaymentState.Collecting(
enteredAmount = null,
errorMessage = null,
changeDueText = "5$",
changeDueText = "Change Due 5$",
total = BigDecimal(10),
totalText = "10$",
totalText = "Total: 10$",
currencySymbol = "$",
currencyPosition = WCSettingsModel.CurrencyPosition.LEFT,
decimalSeparator = ".",
Expand All @@ -250,9 +250,9 @@ fun WooPosTotalsPaymentCashWithErrorScreenPreview() {
state = WooPosCashPaymentState.Collecting(
enteredAmount = BigDecimal(500),
errorMessage = "Amount must be more or equal to total",
changeDueText = "5$",
changeDueText = "Change Due 5$",
total = BigDecimal(10),
totalText = "10$",
totalText = "Total: 10$",
currencySymbol = "$",
currencyPosition = WCSettingsModel.CurrencyPosition.LEFT,
decimalSeparator = ".",
Expand Down
11 changes: 9 additions & 2 deletions ...c/main/kotlin/com/woocommerce/android/ui/woopos/cashpayment/WooPosCashPaymentViewModel.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,16 @@ class WooPosCashPaymentViewModel @Inject constructor(
private val _state = savedState.getStateFlow<WooPosCashPaymentState>(
scope = viewModelScope,
initialValue = WooPosCashPaymentState.Initiating,
key = "woo_pos_cash_payment_state"
key = WOO_POS_CASH_PAYMENT_STATE_KEY
)

val state: StateFlow<WooPosCashPaymentState> = _state

init {
viewModelScope.launch {
val savedStateValue = savedState.get<WooPosCashPaymentState>(WOO_POS_CASH_PAYMENT_STATE_KEY)
if (savedStateValue != null && savedStateValue != WooPosCashPaymentState.Initiating) return@launch

val order = repository.getOrderById(orderId)!!
_state.value = WooPosCashPaymentState.Collecting(
enteredAmount = null,
Expand Down Expand Up @@ -74,7 +77,7 @@ class WooPosCashPaymentViewModel @Inject constructor(
priceFormat(changeDue)
)
} else {
resourceProvider.getString(R.string.woopos_cash_payment_no_chang_due)
""
}

_state.value = currentState.copy(
Expand Down Expand Up @@ -115,4 +118,8 @@ class WooPosCashPaymentViewModel @Inject constructor(
}
}
}

private companion object {
const val WOO_POS_CASH_PAYMENT_STATE_KEY = "woo_pos_cash_payment_state"
}
}
Loading

0 comments on commit 6a76722

Please sign in to comment.