feat(POM-506): Update fields design and style

build.gradle

@@ -2,7 +2,7 @@
 
 buildscript {
     ext {
-        androidGradlePluginVersion = '8.10.1'
+        androidGradlePluginVersion = '8.11.0'
         kotlinVersion = '2.1.20'
         kspVersion = '2.1.20-1.0.32'
         dokkaVersion = '1.9.20'

sdk/src/main/kotlin/com/processout/sdk/api/model/response/napm/v2/PONativeAlternativePaymentElement.kt

@@ -78,13 +78,13 @@ sealed class PONativeAlternativePaymentElement {
                 /**
                  * Available parameter value.
                  *
-                 * @param[value] Parameter value.
+                 * @param[key] Parameter value.
                  * @param[label] Value display label.
                  * @param[preselected] Indicates whether the value should be preselected by default.
                  */
                 @JsonClass(generateAdapter = true)
                 data class AvailableValue(
-                    val value: String,
+                    val key: String,
                     val label: String,
                     val preselected: Boolean
                 )

sdk/src/main/kotlin/com/processout/sdk/ui/nativeapm/NativeAlternativePaymentMethodViewModel.kt

@@ -697,8 +697,8 @@ internal class NativeAlternativePaymentMethodViewModel private constructor(
 
     private fun getInputHint(type: ParameterType) =
         when (type) {
-            EMAIL -> app.getString(R.string.po_native_apm_email_placeholder)
-            PHONE -> app.getString(R.string.po_native_apm_phone_placeholder)
+            EMAIL -> app.getString(R.string.po_native_apm_placeholder_email)
+            PHONE -> app.getString(R.string.po_native_apm_placeholder_phone)
             else -> null
         }
 

sdk/src/main/res/values-ar/strings.xml

@@ -29,9 +29,9 @@
     <string name="po_native_apm_save_barcode_error_title">فشل حفظ الصورة</string>
     <string name="po_native_apm_save_barcode_error_message">لم نتمكن من حفظ الصورة. يرجى التحقق من أذوناتك أو محاولة التقاط لقطة شاشة كبديل.</string>
     <string name="po_native_apm_save_barcode_error_confirm">فهمت</string>
-    <string name="po_native_apm_country_placeholder">بلد</string>
-    <string name="po_native_apm_phone_placeholder">أدخل رقم الهاتف</string>
-    <string name="po_native_apm_email_placeholder">name@example.com</string>
+    <string name="po_native_apm_label_country">بلد</string>
+    <string name="po_native_apm_placeholder_phone">أدخل رقم الهاتف</string>
+    <string name="po_native_apm_placeholder_email">name@example.com</string>
     <string name="po_native_apm_success_message">نجاح! تمت الموافقة على الدفع</string>
     <string name="po_native_apm_error_required_parameter">البيانات مطلوبة</string>
     <string name="po_native_apm_error_invalid_number">الرقم غير صحيح</string>

sdk/src/main/res/values-fr/strings.xml

@@ -29,9 +29,9 @@
     <string name="po_native_apm_save_barcode_error_title">Échec de l\'enregistrement de l\'image</string>
     <string name="po_native_apm_save_barcode_error_message">Nous n\'avons pas pu enregistrer l\'image. Veuillez vérifier vos permissions ou alternativement prendre une capture d\'écran.</string>
     <string name="po_native_apm_save_barcode_error_confirm">Compris</string>
-    <string name="po_native_apm_country_placeholder">Pays</string>
-    <string name="po_native_apm_phone_placeholder">Entrez votre numéro de téléphone</string>
-    <string name="po_native_apm_email_placeholder">nom@exemple.fr</string>
+    <string name="po_native_apm_label_country">Pays</string>
+    <string name="po_native_apm_placeholder_phone">Entrez votre numéro de téléphone</string>
+    <string name="po_native_apm_placeholder_email">nom@exemple.fr</string>
     <string name="po_native_apm_success_message">Succès !\nPaiement confirmé.</string>
     <string name="po_native_apm_error_required_parameter">Paramètre requis.</string>
     <string name="po_native_apm_error_invalid_number">Numéro invalide.</string>

sdk/src/main/res/values-pl/strings.xml

@@ -29,9 +29,9 @@
     <string name="po_native_apm_save_barcode_error_title">Nie udało się zapisać obrazu</string>
     <string name="po_native_apm_save_barcode_error_message">Sprawdź uprawnienia systemu lub zrób zrzut ekranu.</string>
     <string name="po_native_apm_save_barcode_error_confirm">Rozumiem</string>
-    <string name="po_native_apm_country_placeholder">Kraj</string>
-    <string name="po_native_apm_phone_placeholder">Twój numer telefonu</string>
-    <string name="po_native_apm_email_placeholder">imię@przykład.pl</string>
+    <string name="po_native_apm_label_country">Kraj</string>
+    <string name="po_native_apm_placeholder_phone">Twój numer telefonu</string>
+    <string name="po_native_apm_placeholder_email">imię@przykład.pl</string>
     <string name="po_native_apm_success_message">Sukces!\nPłatność przyjęta.</string>
     <string name="po_native_apm_error_required_parameter">Parametr jest wmagany.</string>
     <string name="po_native_apm_error_invalid_number">Niepoprawny numer.</string>

sdk/src/main/res/values-pt/strings.xml

@@ -29,9 +29,9 @@
     <string name="po_native_apm_save_barcode_error_title">Falha na gravação da imagem</string>
     <string name="po_native_apm_save_barcode_error_message">Não conseguimos gravar a imagem. Por favor, verifique as suas permissões ou tire uma captura do ecrā como alternativa.</string>
     <string name="po_native_apm_save_barcode_error_confirm">Compreendi</string>
-    <string name="po_native_apm_country_placeholder">País</string>
-    <string name="po_native_apm_phone_placeholder">Insira o seu número de telemóvel</string>
-    <string name="po_native_apm_email_placeholder">nome@exemplo.pt</string>
+    <string name="po_native_apm_label_country">País</string>
+    <string name="po_native_apm_placeholder_phone">Insira o seu número de telemóvel</string>
+    <string name="po_native_apm_placeholder_email">nome@exemplo.pt</string>
     <string name="po_native_apm_success_message">Successo!\nPagamento aprovado.</string>
     <string name="po_native_apm_error_required_parameter">Campo obrigatório.</string>
     <string name="po_native_apm_error_invalid_number">Número inválido.</string>

sdk/src/main/res/values/strings.xml

@@ -29,9 +29,9 @@
     <string name="po_native_apm_save_barcode_error_title">Image save failed</string>
     <string name="po_native_apm_save_barcode_error_message">We couldn\'t save the image. Please check your permissions or try taking a screenshot as an alternative.</string>
     <string name="po_native_apm_save_barcode_error_confirm">Got it</string>
-    <string name="po_native_apm_country_placeholder">Country</string>
-    <string name="po_native_apm_phone_placeholder">Enter phone number</string>
-    <string name="po_native_apm_email_placeholder">name@example.com</string>
+    <string name="po_native_apm_label_country">Country</string>
+    <string name="po_native_apm_placeholder_phone">Enter phone number</string>
+    <string name="po_native_apm_placeholder_email">name@example.com</string>
     <string name="po_native_apm_success_message">Success!\nPayment approved.</string>
     <string name="po_native_apm_error_required_parameter">Parameter is required.</string>
     <string name="po_native_apm_error_invalid_number">Number is not valid.</string>

ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POActionsContainer.kt

@@ -136,6 +136,17 @@ object POActionsContainer {
             )
         }
 
+    val default2: Style
+        @Composable get() = with(ProcessOutTheme) {
+            Style(
+                primary = POButton.primary2,
+                secondary = POButton.secondary2,
+                dividerColor = colors.border.subtle,
+                backgroundColor = colors.surface.default,
+                axis = POAxis.Vertical
+            )
+        }
+
     @Composable
     fun custom(style: POActionsContainerStyle) = with(style) {
         Style(

ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POButton.kt

@@ -17,6 +17,7 @@ import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
@@ -235,7 +236,7 @@ object POButton {
                 ),
                 disabled = StateStyle(
                     text = POText.Style(
-                        color = colors.text.disabled,
+                        color = colors.text.onButtonDisabled,
                         textStyle = typography.button
                     ),
                     shape = shapes.roundedCornersSmall,
@@ -252,6 +253,38 @@ object POButton {
             )
         }
 
+    val primary2: Style
+        @Composable get() = with(ProcessOutTheme) {
+            Style(
+                normal = StateStyle(
+                    text = POText.Style(
+                        color = colors.text.inverse,
+                        textStyle = typography.s15(FontWeight.Medium)
+                    ),
+                    shape = shapes.roundedCorners6,
+                    border = POBorderStroke(width = 0.dp, color = Color.Transparent),
+                    backgroundColor = colors.button.primaryBackgroundDefault,
+                    elevation = 0.dp
+                ),
+                disabled = StateStyle(
+                    text = POText.Style(
+                        color = colors.text.onButtonDisabled,
+                        textStyle = typography.s15(FontWeight.Medium)
+                    ),
+                    shape = shapes.roundedCorners6,
+                    border = POBorderStroke(width = 0.dp, color = Color.Transparent),
+                    backgroundColor = colors.button.primaryBackgroundDisabled,
+                    elevation = 0.dp
+                ),
+                highlighted = HighlightedStyle(
+                    textColor = colors.text.inverse,
+                    borderColor = Color.Transparent,
+                    backgroundColor = colors.button.primaryBackgroundPressed
+                ),
+                progressIndicatorColor = colors.text.inverse
+            )
+        }
+
     val secondary: Style
         @Composable get() = with(ProcessOutTheme) {
             Style(
@@ -261,23 +294,55 @@ object POButton {
                         textStyle = typography.button
                     ),
                     shape = shapes.roundedCornersSmall,
-                    border = POBorderStroke(width = 1.dp, color = colors.button.secondaryBorderDefault),
+                    border = POBorderStroke(width = 0.dp, color = Color.Transparent),
                     backgroundColor = colors.button.secondaryBackgroundDefault,
                     elevation = 0.dp
                 ),
                 disabled = StateStyle(
                     text = POText.Style(
-                        color = colors.text.disabled,
+                        color = colors.text.onButtonDisabled,
                         textStyle = typography.button
                     ),
                     shape = shapes.roundedCornersSmall,
-                    border = POBorderStroke(width = 1.dp, color = colors.button.secondaryBorderDisabled),
+                    border = POBorderStroke(width = 0.dp, color = Color.Transparent),
                     backgroundColor = colors.button.secondaryBackgroundDisabled,
                     elevation = 0.dp
                 ),
                 highlighted = HighlightedStyle(
                     textColor = colors.text.primary,
-                    borderColor = colors.button.secondaryBorderPressed,
+                    borderColor = Color.Transparent,
+                    backgroundColor = colors.button.secondaryBackgroundPressed
+                ),
+                progressIndicatorColor = colors.text.primary
+            )
+        }
+
+    val secondary2: Style
+        @Composable get() = with(ProcessOutTheme) {
+            Style(
+                normal = StateStyle(
+                    text = POText.Style(
+                        color = colors.text.primary,
+                        textStyle = typography.s15(FontWeight.Medium)
+                    ),
+                    shape = shapes.roundedCorners6,
+                    border = POBorderStroke(width = 0.dp, color = Color.Transparent),
+                    backgroundColor = colors.button.secondaryBackgroundDefault,
+                    elevation = 0.dp
+                ),
+                disabled = StateStyle(
+                    text = POText.Style(
+                        color = colors.text.onButtonDisabled,
+                        textStyle = typography.s15(FontWeight.Medium)
+                    ),
+                    shape = shapes.roundedCorners6,
+                    border = POBorderStroke(width = 0.dp, color = Color.Transparent),
+                    backgroundColor = colors.button.secondaryBackgroundDisabled,
+                    elevation = 0.dp
+                ),
+                highlighted = HighlightedStyle(
+                    textColor = colors.text.primary,
+                    borderColor = Color.Transparent,
                     backgroundColor = colors.button.secondaryBackgroundPressed
                 ),
                 progressIndicatorColor = colors.text.primary
@@ -299,12 +364,12 @@ object POButton {
                 ),
                 disabled = StateStyle(
                     text = POText.Style(
-                        color = colors.text.disabled,
+                        color = colors.text.onButtonDisabled,
                         textStyle = typography.button
                     ),
                     shape = shapes.roundedCornersSmall,
                     border = POBorderStroke(width = 0.dp, color = Color.Transparent),
-                    backgroundColor = Color.Transparent,
+                    backgroundColor = colors.button.ghostBackgroundDisabled,
                     elevation = 0.dp
                 ),
                 highlighted = HighlightedStyle(

ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/PODialog.kt

@@ -20,6 +20,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
 import androidx.compose.ui.window.DialogProperties
@@ -30,6 +31,7 @@ import com.processout.sdk.ui.core.theme.ProcessOutTheme.colors
 import com.processout.sdk.ui.core.theme.ProcessOutTheme.dimensions
 import com.processout.sdk.ui.core.theme.ProcessOutTheme.shapes
 import com.processout.sdk.ui.core.theme.ProcessOutTheme.spacing
+import com.processout.sdk.ui.core.theme.ProcessOutTheme.typography
 
 /** @suppress */
 @ProcessOutInternalApi
@@ -166,8 +168,14 @@ object PODialog {
 
     val default: Style
         @Composable get() = Style(
-            title = POText.title,
-            message = POText.body2,
+            title = POText.Style(
+                color = colors.text.primary,
+                textStyle = typography.s20(FontWeight.SemiBold)
+            ),
+            message = POText.Style(
+                color = colors.text.secondary,
+                textStyle = typography.paragraph.s16()
+            ),
             confirmButton = defaultButton,
             dismissButton = defaultButton,
             backgroundColor = colors.surface.default
@@ -176,8 +184,22 @@ object PODialog {
     private val defaultButton: POButton.Style
         @Composable get() = with(POButton.ghost) {
             copy(
-                normal = normal.copy(paddingHorizontal = spacing.large),
-                disabled = disabled.copy(paddingHorizontal = spacing.large)
+                normal = normal.copy(
+                    text = POText.Style(
+                        color = colors.text.primary,
+                        textStyle = typography.s15(FontWeight.Medium)
+                    ),
+                    shape = shapes.roundedCorners6,
+                    paddingHorizontal = spacing.space16
+                ),
+                disabled = disabled.copy(
+                    text = POText.Style(
+                        color = colors.text.onButtonDisabled,
+                        textStyle = typography.s15(FontWeight.Medium)
+                    ),
+                    shape = shapes.roundedCorners6,
+                    paddingHorizontal = spacing.space16
+                )
             )
         }
 

ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POIme.kt

@@ -12,11 +12,13 @@ import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi
 object POIme {
 
     @Composable
-    fun isImeVisibleAsState(): State<Boolean> {
+    fun isImeVisibleAsState(
+        policy: SnapshotMutationPolicy<Boolean> = neverEqualPolicy()
+    ): State<Boolean> {
         val isImeVisible = remember {
             mutableStateOf(
                 value = false,
-                policy = neverEqualPolicy()
+                policy = policy
             )
         }
         val view = LocalView.current.rootView