refactor(bill-customization): encapsulate controller and expose BillPlayground

Signed-off-by: Brandon McAnsh <git@bmcreations.dev>

Author: bmc08gt

apps/flipcash/features/bill-customization/build.gradle.kts

@@ -12,7 +12,7 @@ dependencies {
     implementation(libs.compose.activities)
 
     implementation(project(":apps:flipcash:shared:bills"))
-    implementation(project(":apps:flipcash:shared:bill-customization"))
+    api(project(":apps:flipcash:shared:bill-customization"))
     implementation(project(":apps:flipcash:shared:tokens"))
     implementation(project(":libs:datetime"))
     implementation(project(":libs:messaging"))

apps/flipcash/features/bill-customization/src/main/kotlin/com/flipcash/app/bill/customization/BillCustomizationScaffold.kt

@@ -42,7 +42,6 @@ import com.flipcash.app.bill.customization.components.BillPlayground
 import com.flipcash.app.bills.AnimatedBill
 import com.flipcash.app.core.bill.Bill
 import com.flipcash.features.bill.playground.R
-import com.getcode.opencode.model.ui.TokenBillCustomizations
 import com.getcode.theme.CodeTheme
 import com.getcode.ui.components.AppBarDefaults
 import com.getcode.ui.core.measured
@@ -64,20 +63,7 @@ fun BillPlaygroundScaffold(content: @Composable () -> Unit) {
         )
     }
 
-    val customizationsOptions by remember(
-        playgroundState.backgroundState.selectedColors,
-        playgroundState.textureState.selectedOption,
-        playgroundState.textureState.selectedBlendMode,
-        playgroundState.bill?.token?.billCustomizations
-    ) {
-        derivedStateOf {
-            return@derivedStateOf TokenBillCustomizations(
-                background = playgroundState.background,
-                texture = playgroundState.texture,
-                icon = null,
-            )
-        }
-    }
+    val customizationsOptions = playgroundState.customizations
 
     val augmentedBill by remember(playgroundState.bill, customizationsOptions) {
         derivedStateOf {

apps/flipcash/features/bill-customization/src/main/kotlin/com/flipcash/app/bill/customization/components/BillPlayground.kt

@@ -54,11 +54,12 @@ import com.getcode.ui.core.rememberedClickable
 
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
-internal fun BillPlayground(
+fun BillPlayground(
+    modifier: Modifier = Modifier,
     state: PlaygroundState,
     dispatchEvent: (Event) -> Unit,
 ) {
-    BoxWithConstraints {
+    Box(modifier = modifier) {
         val screenWidth = CodeTheme.dimens.screenWidth
         var firstFeatureWidth by remember { mutableStateOf(0.dp) }
         var lastFeatureWidth by remember { mutableStateOf(0.dp) }

apps/flipcash/features/scanner/src/main/kotlin/com/flipcash/app/scanner/internal/ui/components/DecorView.kt

@@ -55,96 +55,92 @@ internal fun DecorView(
     modifier: Modifier = Modifier,
     onAction: (ScannerDecorItem) -> Unit,
 ) {
-    val billPlayground = LocalBillPlaygroundController.current
-    val playgroundState by billPlayground.state.collectAsStateWithLifecycle()
-    AnimatedVisibility(!playgroundState.isCustomizing) {
-        Box(
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .then(modifier)
+    ) {
+        Image(
             modifier = Modifier
-                .fillMaxSize()
-                .then(modifier)
+                .statusBarsPadding()
+                .padding(vertical = CodeTheme.dimens.grid.x3)
+                .padding(horizontal = CodeTheme.dimens.grid.x3)
+                .align(Alignment.TopStart)
+                .width(CodeTheme.dimens.staticGrid.x18)
+                .rememberedClickable(
+                    interactionSource = remember { MutableInteractionSource() },
+                    indication = null
+                ) {
+                    onAction(ScannerDecorItem.Logo)
+                }.testTag("flipcash_logo"),
+            painter = painterResource(R.drawable.ic_flipcash_logo_w_name),
+            contentDescription = "Tap to share the app",
+        )
+
+        Column(
+            modifier = Modifier
+                .statusBarsPadding()
+                .padding(vertical = CodeTheme.dimens.grid.x2)
+                .padding(horizontal = CodeTheme.dimens.grid.x3)
+                .align(Alignment.TopEnd),
+            horizontalAlignment = Alignment.End,
+            verticalArrangement = Arrangement.spacedBy(CodeTheme.dimens.inset)
         ) {
             Image(
                 modifier = Modifier
-                    .statusBarsPadding()
-                    .padding(vertical = CodeTheme.dimens.grid.x3)
-                    .padding(horizontal = CodeTheme.dimens.grid.x3)
-                    .align(Alignment.TopStart)
-                    .width(CodeTheme.dimens.staticGrid.x18)
-                    .rememberedClickable(
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = null
-                    ) {
-                        onAction(ScannerDecorItem.Logo)
-                    }.testTag("flipcash_logo"),
-                painter = painterResource(R.drawable.ic_flipcash_logo_w_name),
-                contentDescription = "Tap to share the app",
+                    .clip(CircleShape)
+                    .unboundedClickable {
+                        onAction(ScannerDecorItem.Menu)
+                    }.testTag("menu_button"),
+                painter = painterResource(R.drawable.ic_home_options),
+                contentDescription = "",
             )
+        }
 
-            Column(
+        Column(modifier = Modifier.align(Alignment.BottomCenter)) {
+            val networkState by LocalNetworkObserver.current.state.collectAsState()
+
+            AnimatedVisibility(
                 modifier = Modifier
-                    .statusBarsPadding()
-                    .padding(vertical = CodeTheme.dimens.grid.x2)
-                    .padding(horizontal = CodeTheme.dimens.grid.x3)
-                    .align(Alignment.TopEnd),
-                horizontalAlignment = Alignment.End,
-                verticalArrangement = Arrangement.spacedBy(CodeTheme.dimens.inset)
+                    .align(Alignment.CenterHorizontally),
+                visible = state.showNetworkOffline && !networkState.connected,
+                enter = fadeIn(animationSpec = tween(500, 100)),
+                exit = fadeOut(animationSpec = tween(500, 100)),
             ) {
-                Image(
-                    modifier = Modifier
-                        .clip(CircleShape)
-                        .unboundedClickable {
-                            onAction(ScannerDecorItem.Menu)
-                        }.testTag("menu_button"),
-                    painter = painterResource(R.drawable.ic_home_options),
-                    contentDescription = "",
-                )
-            }
-
-            Column(modifier = Modifier.align(Alignment.BottomCenter)) {
-                val networkState by LocalNetworkObserver.current.state.collectAsState()
-
-                AnimatedVisibility(
+                Row(
                     modifier = Modifier
-                        .align(Alignment.CenterHorizontally),
-                    visible = state.showNetworkOffline && !networkState.connected,
-                    enter = fadeIn(animationSpec = tween(500, 100)),
-                    exit = fadeOut(animationSpec = tween(500, 100)),
+                        .wrapContentSize()
+                        .clip(CodeTheme.shapes.xxl)
+                        .background(CodeTheme.colors.error)
+                        .padding(
+                            horizontal = CodeTheme.dimens.grid.x2,
+                            vertical = CodeTheme.dimens.grid.x1
+                        ),
+                    horizontalArrangement = Arrangement.spacedBy(CodeTheme.dimens.staticGrid.x1),
+                    verticalAlignment = Alignment.CenterVertically
                 ) {
-                    Row(
-                        modifier = Modifier
-                            .wrapContentSize()
-                            .clip(CodeTheme.shapes.xxl)
-                            .background(CodeTheme.colors.error)
-                            .padding(
-                                horizontal = CodeTheme.dimens.grid.x2,
-                                vertical = CodeTheme.dimens.grid.x1
-                            ),
-                        horizontalArrangement = Arrangement.spacedBy(CodeTheme.dimens.staticGrid.x1),
-                        verticalAlignment = Alignment.CenterVertically
-                    ) {
-                        Icon(
-                            modifier = Modifier.size(16.dp),
-                            painter = painterResource(id = R.drawable.ic_wifi_slash),
-                            contentDescription = null
-                        )
-                        Text(
-                            text = stringResource(id = R.string.title_badge_no_connection),
-                            color = Color.White,
-                            style = CodeTheme.typography.caption
-                        )
-                    }
+                    Icon(
+                        modifier = Modifier.size(16.dp),
+                        painter = painterResource(id = R.drawable.ic_wifi_slash),
+                        contentDescription = null
+                    )
+                    Text(
+                        text = stringResource(id = R.string.title_badge_no_connection),
+                        color = Color.White,
+                        style = CodeTheme.typography.caption
+                    )
                 }
-
-                ScannerNavigationBar(
-                    modifier = Modifier
-                        .windowInsetsPadding(WindowInsets.navigationBars)
-                        .padding(bottom = CodeTheme.dimens.grid.x3),
-                    state = state,
-                    billState = billState,
-                    isPaused = isPaused,
-                    onAction = onAction
-                )
             }
+
+            ScannerNavigationBar(
+                modifier = Modifier
+                    .windowInsetsPadding(WindowInsets.navigationBars)
+                    .padding(bottom = CodeTheme.dimens.grid.x3),
+                state = state,
+                billState = billState,
+                isPaused = isPaused,
+                onAction = onAction
+            )
         }
     }
 }

apps/flipcash/shared/bill-customization/src/main/kotlin/com/flipcash/app/bill/customization/BillPlaygroundController.kt

@@ -7,9 +7,12 @@ import com.flipcash.app.bill.customization.internal.features.ColorState
 import com.flipcash.app.bill.customization.internal.features.GraphicState
 import com.flipcash.app.bill.customization.models.PlaygroundFeature
 import com.flipcash.app.core.bill.Bill
+import com.getcode.opencode.model.financial.Fiat
 import com.getcode.opencode.model.financial.Token
+import com.getcode.opencode.model.financial.toFiat
 import com.getcode.opencode.model.ui.BillBackground
 import com.getcode.opencode.model.ui.BillTexture
+import com.getcode.opencode.model.ui.TokenBillCustomizations
 import com.getcode.ui.utils.Hsv
 import com.getcode.ui.utils.toAGColor
 import kotlinx.coroutines.flow.MutableStateFlow
@@ -19,7 +22,6 @@ interface BillPlaygroundController {
     val state: StateFlow<PlaygroundState>
     val canUndo: Boolean
     val canCopy: Boolean
-    fun customizeFor(token: Token)
 
     fun dispatchEvent(event: Event)
     fun cancel()
@@ -67,6 +69,24 @@ data class PlaygroundState(
             }
         }
 
+    val customizations: TokenBillCustomizations
+        get() = TokenBillCustomizations(
+            background = background,
+            texture = texture,
+            icon = null,
+        )
+
+    val customizedBill: Bill?
+        get() {
+            if (bill == null) return null
+            if (bill !is Bill.Cash) return null
+            return bill.copy(
+                token = bill.token.copy(
+                    billCustomizations = customizations
+                )
+            )
+        }
+
     val backgroundBrush: Brush
         get() {
             with (backgroundState) {
@@ -80,6 +100,10 @@ data class PlaygroundState(
 }
 
 sealed interface Event {
+    data class Load(
+        val customizations: TokenBillCustomizations?,
+        val amount: Fiat = 5.toFiat(),
+    ): Event
     data class SelectFeature(val feature: PlaygroundFeature): Event
     sealed interface Colors: Event {
         data object AddSlot : Colors
@@ -105,7 +129,6 @@ internal object StubPlaygroundController : BillPlaygroundController {
     override val state: StateFlow<PlaygroundState> = MutableStateFlow(PlaygroundState())
     override val canUndo: Boolean = false
     override val canCopy: Boolean = false
-    override fun customizeFor(token: Token) = Unit
     override fun dispatchEvent(event: Event) = Unit
     override fun cancel() = Unit
 }

apps/flipcash/shared/bill-customization/src/main/kotlin/com/flipcash/app/bill/customization/internal/InternalBillPlaygroundController.kt

@@ -15,10 +15,13 @@ import com.flipcash.app.bill.customization.models.PlaygroundFeature
 import com.flipcash.app.core.bill.Bill
 import com.getcode.opencode.model.core.OpenCodePayload
 import com.getcode.opencode.model.core.PayloadKind
+import com.getcode.opencode.model.financial.Fiat
 import com.getcode.opencode.model.financial.LocalFiat
 import com.getcode.opencode.model.financial.Token
 import com.getcode.opencode.model.financial.toFiat
+import com.getcode.opencode.model.financial.usdf
 import com.getcode.opencode.model.ui.BillBackground
+import com.getcode.opencode.model.ui.TokenBillCustomizations
 import com.getcode.opencode.utils.nonce
 import com.getcode.ui.utils.Hsv
 import com.getcode.ui.utils.toHex
@@ -77,12 +80,12 @@ class InternalBillPlaygroundController(
         get() = !undoStack.isEmpty()
 
     override val canCopy: Boolean
-        get() = true
+        get() = false
 
-    override fun customizeFor(token: Token) {
+    private fun customizeFor(token: Token, amount: Fiat, customizations: TokenBillCustomizations?) {
         // create amount for the bill
         val demoAmount = LocalFiat(
-            usdf = 5.toFiat(),
+            usdf = amount,
         )
 
         // provide bill "data" to render the scan code
@@ -93,7 +96,7 @@ class InternalBillPlaygroundController(
         )
         // create bill for token
         val bill = Bill.Cash(
-            token = token.copy(billCustomizations = null),
+            token = token.copy(billCustomizations = customizations),
             amount = demoAmount,
             disableGestures = true,
             data = payloadInfo.codeData.toList()
@@ -105,6 +108,9 @@ class InternalBillPlaygroundController(
     override fun dispatchEvent(event: Event) {
         when (event) {
             // high level actions
+            is Event.Load -> {
+                customizeFor(Token.usdf, event.amount, event.customizations)
+            }
 
             // selecting feature from tab row
             is Event.SelectFeature -> selectFeature(event.feature)