feat(POM-496): Labeled and copyable customer instructions

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

@@ -27,6 +27,8 @@
     <string name="po_native_apm_cancel_button_text">إلغاء</string>
     <string name="po_native_apm_confirm_payment_button_text">لقد دفعت</string>
     <string name="po_native_apm_done_button_text">تم</string>
+    <string name="po_native_apm_copy_button_text">نسخ</string>
+    <string name="po_native_apm_copied_button_text">تم النسخ!</string>
     <string name="po_native_apm_payment_confirmation_step1_title">تم إرسال التفاصيل</string>
     <string name="po_native_apm_payment_confirmation_step2_title">في انتظار التأكيد</string>
     <string name="po_native_apm_payment_confirmation_step2_description_format">يرجى الانتظار حتى %s دقيقة</string>

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

@@ -27,6 +27,8 @@
     <string name="po_native_apm_cancel_button_text">Annuler</string>
     <string name="po_native_apm_confirm_payment_button_text">J\'ai payé</string>
     <string name="po_native_apm_done_button_text">Terminé</string>
+    <string name="po_native_apm_copy_button_text">Copier</string>
+    <string name="po_native_apm_copied_button_text">Copié !</string>
     <string name="po_native_apm_payment_confirmation_step1_title">Détails envoyés</string>
     <string name="po_native_apm_payment_confirmation_step2_title">En attente de confirmation</string>
     <string name="po_native_apm_payment_confirmation_step2_description_format">Veuillez patienter jusqu\'à %s minutes</string>

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

@@ -27,6 +27,8 @@
     <string name="po_native_apm_cancel_button_text">Anuluj</string>
     <string name="po_native_apm_confirm_payment_button_text">Płatność wykonana</string>
     <string name="po_native_apm_done_button_text">Gotowe</string>
+    <string name="po_native_apm_copy_button_text">Skopiuj</string>
+    <string name="po_native_apm_copied_button_text">Skopiowano!</string>
     <string name="po_native_apm_payment_confirmation_step1_title">Szczegóły przesłane</string>
     <string name="po_native_apm_payment_confirmation_step2_title">Oczekiwanie na potwierdzenie</string>
     <string name="po_native_apm_payment_confirmation_step2_description_format">Poczekaj maksymalnie %s minut</string>

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

@@ -27,6 +27,8 @@
     <string name="po_native_apm_cancel_button_text">Cancelar</string>
     <string name="po_native_apm_confirm_payment_button_text">Já paguei</string>
     <string name="po_native_apm_done_button_text">Concluído</string>
+    <string name="po_native_apm_copy_button_text">Copiar</string>
+    <string name="po_native_apm_copied_button_text">Copiado!</string>
     <string name="po_native_apm_payment_confirmation_step1_title">Detalhes enviados</string>
     <string name="po_native_apm_payment_confirmation_step2_title">Aguardando confirmação</string>
     <string name="po_native_apm_payment_confirmation_step2_description_format">Aguarde até %s minutos</string>

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

@@ -27,6 +27,8 @@
     <string name="po_native_apm_cancel_button_text">Cancel</string>
     <string name="po_native_apm_confirm_payment_button_text">I\'ve paid</string>
     <string name="po_native_apm_done_button_text">Done</string>
+    <string name="po_native_apm_copy_button_text">Copy</string>
+    <string name="po_native_apm_copied_button_text">Copied!</string>
     <string name="po_native_apm_payment_confirmation_step1_title">Details submitted</string>
     <string name="po_native_apm_payment_confirmation_step2_title">Waiting for confirmation</string>
     <string name="po_native_apm_payment_confirmation_step2_description_format">Please wait for up to %s minutes</string>

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

@@ -0,0 +1,108 @@
+@file:Suppress("MayBeConstant")
+
+package com.processout.sdk.ui.core.component
+
+import androidx.compose.animation.*
+import androidx.compose.animation.core.tween
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalClipboardManager
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.Dp
+import com.processout.sdk.ui.core.R
+import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi
+import com.processout.sdk.ui.core.component.POCopyButton.FadeAnimationDurationMillis
+import com.processout.sdk.ui.core.component.POCopyButton.SizeAnimationDurationMillis
+import com.processout.sdk.ui.core.shared.image.PODrawableImage
+import com.processout.sdk.ui.core.shared.image.POImageRenderingMode
+import com.processout.sdk.ui.core.theme.ProcessOutTheme.dimensions
+import com.processout.sdk.ui.core.theme.ProcessOutTheme.spacing
+import com.processout.sdk.ui.core.theme.ProcessOutTheme.typography
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+
+/** @suppress */
+@ProcessOutInternalApi
+@Composable
+fun POCopyButton(
+    textToCopy: String,
+    copyText: String,
+    copiedText: String,
+    modifier: Modifier = Modifier,
+    style: POButton.Style = POCopyButton.default,
+    copyIcon: PODrawableImage? = POCopyButton.CopyIcon,
+    copiedIcon: PODrawableImage? = POCopyButton.CopiedIcon,
+    iconSize: Dp = dimensions.iconSizeSmall
+) {
+    val clipboardManager = LocalClipboardManager.current
+    var isCopied by remember { mutableStateOf(false) }
+    var timerJob by remember { mutableStateOf<Job?>(null) }
+    val coroutineScope = rememberCoroutineScope()
+    AnimatedContent(
+        targetState = isCopied,
+        transitionSpec = {
+            fadeIn(
+                tween(durationMillis = FadeAnimationDurationMillis)
+            ) togetherWith fadeOut(
+                tween(durationMillis = FadeAnimationDurationMillis)
+            ) using SizeTransform { _, _ ->
+                tween(durationMillis = SizeAnimationDurationMillis)
+            }
+        }
+    ) { isCopiedAnimated ->
+        POButton(
+            text = if (isCopiedAnimated) copiedText else copyText,
+            onClick = {
+                clipboardManager.setText(AnnotatedString(textToCopy))
+                isCopied = true
+                timerJob?.cancel()
+                timerJob = coroutineScope.launch {
+                    delay(timeMillis = 2500)
+                    isCopied = false
+                }
+            },
+            modifier = modifier,
+            style = style,
+            icon = if (isCopiedAnimated) copiedIcon else copyIcon,
+            iconSize = iconSize
+        )
+    }
+}
+
+/** @suppress */
+@ProcessOutInternalApi
+object POCopyButton {
+
+    val default: POButton.Style
+        @Composable get() = POButton.secondary2.let {
+            it.copy(
+                normal = it.normal.copy(
+                    text = it.normal.text.copy(
+                        textStyle = typography.s13(FontWeight.Medium)
+                    ),
+                    paddingHorizontal = spacing.space10
+                ),
+                disabled = it.disabled.copy(
+                    text = it.disabled.text.copy(
+                        textStyle = typography.s13(FontWeight.Medium)
+                    ),
+                    paddingHorizontal = spacing.space10
+                )
+            )
+        }
+
+    internal val CopyIcon = PODrawableImage(
+        resId = R.drawable.po_icon_copy,
+        renderingMode = POImageRenderingMode.TEMPLATE
+    )
+
+    internal val CopiedIcon = PODrawableImage(
+        resId = R.drawable.po_icon_check,
+        renderingMode = POImageRenderingMode.TEMPLATE
+    )
+
+    internal val FadeAnimationDurationMillis = 300
+    internal val SizeAnimationDurationMillis = 400
+}

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

@@ -0,0 +1,110 @@
+package com.processout.sdk.ui.core.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi
+import com.processout.sdk.ui.core.state.POImmutableList
+import com.processout.sdk.ui.core.style.POGroupedContentStyle
+import com.processout.sdk.ui.core.theme.ProcessOutTheme.colors
+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
+@Composable
+fun POGroupedContent(
+    items: POImmutableList<@Composable () -> Unit>,
+    modifier: Modifier = Modifier,
+    style: POGroupedContent.Style = POGroupedContent.default,
+    title: String? = null
+) {
+    Column(modifier = modifier) {
+        if (!title.isNullOrBlank()) {
+            POText(
+                text = title,
+                modifier = Modifier.padding(bottom = spacing.space12),
+                color = style.title.color,
+                style = style.title.textStyle
+            )
+        }
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .border(
+                    width = style.border.width,
+                    color = style.border.color,
+                    shape = style.shape
+                )
+                .clip(shape = style.shape)
+                .background(style.backgroundColor)
+                .padding(style.border.width)
+        ) {
+            items.elements.forEachIndexed { index, item ->
+                Box(modifier = Modifier.padding(spacing.space16)) {
+                    item()
+                }
+                if (index != items.elements.lastIndex) {
+                    HorizontalDivider(
+                        modifier = Modifier.padding(horizontal = spacing.space4),
+                        thickness = 1.dp,
+                        color = style.dividerColor
+                    )
+                }
+            }
+        }
+    }
+}
+
+/** @suppress */
+@ProcessOutInternalApi
+object POGroupedContent {
+
+    @Immutable
+    data class Style(
+        val title: POText.Style,
+        val shape: Shape,
+        val border: POBorderStroke,
+        val dividerColor: Color,
+        val backgroundColor: Color
+    )
+
+    val default: Style
+        @Composable get() = Style(
+            title = POText.Style(
+                color = colors.text.primary,
+                textStyle = typography.s16(FontWeight.Medium)
+            ),
+            shape = shapes.roundedCorners6,
+            border = POBorderStroke(width = 1.5.dp, color = colors.input.borderDefault2),
+            dividerColor = colors.border.border1,
+            backgroundColor = colors.surface.default
+        )
+
+    @Composable
+    fun custom(style: POGroupedContentStyle) = Style(
+        title = POText.custom(style = style.title),
+        shape = RoundedCornerShape(size = style.border.radiusDp.dp),
+        border = POBorderStroke(
+            width = style.border.widthDp.dp,
+            color = colorResource(id = style.border.colorResId)
+        ),
+        dividerColor = colorResource(id = style.dividerColorResId),
+        backgroundColor = colorResource(id = style.backgroundColorResId)
+    )
+}

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

@@ -0,0 +1,52 @@
+package com.processout.sdk.ui.core.component
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi
+import com.processout.sdk.ui.core.theme.ProcessOutTheme.colors
+import com.processout.sdk.ui.core.theme.ProcessOutTheme.spacing
+import com.processout.sdk.ui.core.theme.ProcessOutTheme.typography
+
+/** @suppress */
+@ProcessOutInternalApi
+@Composable
+fun POLabeledContent(
+    label: String,
+    modifier: Modifier = Modifier,
+    labelStyle: POText.Style = POText.Style(
+        color = colors.text.placeholder,
+        textStyle = typography.s12(FontWeight.Medium)
+    ),
+    trailingContent: @Composable () -> Unit = {},
+    trailingContentAlignment: Alignment = Alignment.TopStart,
+    content: @Composable () -> Unit
+) {
+    Row(
+        modifier = modifier.height(IntrinsicSize.Min),
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxHeight()
+                .padding(end = spacing.space8)
+                .weight(1f, fill = false),
+            verticalArrangement = Arrangement.spacedBy(spacing.space6)
+        ) {
+            POText(
+                text = label,
+                color = labelStyle.color,
+                style = labelStyle.textStyle
+            )
+            content()
+        }
+        Box(
+            modifier = Modifier.fillMaxHeight(),
+            contentAlignment = trailingContentAlignment
+        ) {
+            trailingContent()
+        }
+    }
+}

ui-core/src/main/kotlin/com/processout/sdk/ui/core/style/POGroupedContentStyle.kt

@@ -0,0 +1,15 @@
+package com.processout.sdk.ui.core.style
+
+import android.os.Parcelable
+import androidx.annotation.ColorRes
+import kotlinx.parcelize.Parcelize
+
+@Parcelize
+data class POGroupedContentStyle(
+    val title: POTextStyle,
+    val border: POBorderStyle,
+    @ColorRes
+    val dividerColorResId: Int,
+    @ColorRes
+    val backgroundColorResId: Int
+) : Parcelable

ui-core/src/main/kotlin/com/processout/sdk/ui/core/style/POLabeledContentStyle.kt

@@ -0,0 +1,10 @@
+package com.processout.sdk.ui.core.style
+
+import android.os.Parcelable
+import kotlinx.parcelize.Parcelize
+
+@Parcelize
+data class POLabeledContentStyle(
+    val label: POTextStyle,
+    val text: POTextStyle
+) : Parcelable

ui-core/src/main/kotlin/com/processout/sdk/ui/core/theme/Colors.kt

@@ -94,6 +94,7 @@ data class POColors(
 
     @Immutable
     data class Border(
+        val border1: Color,
         val border2: Color,
         val border4: Color
     )
@@ -164,6 +165,7 @@ val POLightColorPalette = POColors(
         toastError = Color(0xFFFDE3DE)
     ),
     border = Border(
+        border1 = Color(0x0F121314),
         border2 = Color(0x14121314),
         border4 = Color(0x29212222)
     )
@@ -234,6 +236,7 @@ val PODarkColorPalette = POColors(
         toastError = Color(0xFF511511)
     ),
     border = Border(
+        border1 = Color(0x14F6F8FB),
         border2 = Color(0x1FF6F8FB),
         border4 = Color(0x33F6F8FB)
     )

ui-core/src/main/res/drawable/po_icon_check.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M13,3.3L7,12.633L4,8.3"
+        android:strokeWidth="1.5"
+        android:strokeColor="#000000"
+        android:strokeLineCap="round"
+        android:strokeLineJoin="round" />
+</vector>