feat(platform-sdk): Phase 4.2/4.3 - iOS and Android native UI components
- BLInAppMessageUI.swift: Banner + Modal SwiftUI components - BLSurveyUI.swift: Survey modal with all 9 question types for iOS - BroadcastUI.kt: Banner + Modal Jetpack Compose components - SurveyUI.kt: Survey modal with all 9 question types for Android
This commit is contained in:
saravanakumardb1
parent
30583a1768
commit
b472f73c94
@ -0,0 +1,330 @@
|
||||
package com.bytelyst.platform.ui
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.layout.*
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.Close
|
||||
import androidx.compose.material.icons.filled.OpenInNew
|
||||
import androidx.compose.material3.*
|
||||
import androidx.compose.runtime.*
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.draw.shadow
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.layout.ContentScale
|
||||
import androidx.compose.ui.platform.LocalContext
|
||||
import androidx.compose.ui.text.style.TextOverflow
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.window.Dialog
|
||||
import coil.compose.AsyncImage
|
||||
import com.bytelyst.platform.*
|
||||
import kotlinx.coroutines.launch
|
||||
|
||||
/**
|
||||
* In-App Message Banner — Jetpack Compose component for top/bottom banner display.
|
||||
* Part of ByteLystPlatformSDK.
|
||||
*/
|
||||
@Composable
|
||||
fun InAppMessageBanner(
|
||||
client: BLBroadcastClient,
|
||||
position: BannerPosition = BannerPosition.TOP,
|
||||
modifier: Modifier = Modifier
|
||||
) {
|
||||
val scope = rememberCoroutineScope()
|
||||
val context = LocalContext.current
|
||||
var messages by remember { mutableStateOf<List<InAppMessage>>(emptyList()) }
|
||||
var unreadCount by remember { mutableIntStateOf(0) }
|
||||
|
||||
LaunchedEffect(client) {
|
||||
// Initial load
|
||||
val result = client.getMessages()
|
||||
result.onSuccess { response ->
|
||||
messages = response.messages
|
||||
unreadCount = messages.count { it.status == MessageStatus.UNREAD }
|
||||
}
|
||||
|
||||
// Start polling
|
||||
client.startPolling(60000L) { updatedMessages ->
|
||||
messages = updatedMessages
|
||||
unreadCount = updatedMessages.count { it.status == MessageStatus.UNREAD }
|
||||
}
|
||||
}
|
||||
|
||||
val bannerMessages = messages.filter {
|
||||
it.status == MessageStatus.UNREAD && (it.style == MessageStyle.BANNER || it.style == MessageStyle.TOAST)
|
||||
}
|
||||
|
||||
if (bannerMessages.isEmpty()) return
|
||||
|
||||
Column(
|
||||
modifier = modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 16.dp)
|
||||
.padding(
|
||||
top = if (position == BannerPosition.TOP) 16.dp else 0.dp,
|
||||
bottom = if (position == BannerPosition.BOTTOM) 16.dp else 0.dp
|
||||
),
|
||||
verticalArrangement = Arrangement.spacedBy(8.dp)
|
||||
) {
|
||||
bannerMessages.forEach { message ->
|
||||
BannerCard(
|
||||
message = message,
|
||||
onDismiss = {
|
||||
scope.launch {
|
||||
client.markDismissed(message.id)
|
||||
messages = messages.filter { it.id != message.id }
|
||||
}
|
||||
},
|
||||
onTap = {
|
||||
scope.launch {
|
||||
client.trackClick(message.id)
|
||||
message.ctaUrl?.let { url ->
|
||||
// Open URL
|
||||
val intent = android.content.Intent(android.content.Intent.ACTION_VIEW, android.net.Uri.parse(url))
|
||||
context.startActivity(intent)
|
||||
}
|
||||
client.markRead(message.id)
|
||||
messages = messages.map {
|
||||
if (it.id == message.id) it.copy(status = MessageStatus.READ)
|
||||
else it
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
enum class BannerPosition {
|
||||
TOP, BOTTOM
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun BannerCard(
|
||||
message: InAppMessage,
|
||||
onDismiss: () -> Unit,
|
||||
onTap: () -> Unit
|
||||
) {
|
||||
val backgroundColor = when (message.priority) {
|
||||
MessagePriority.URGENT -> MaterialTheme.colorScheme.errorContainer
|
||||
MessagePriority.HIGH -> Color(0xFFFFF3E0) // Orange-ish
|
||||
else -> MaterialTheme.colorScheme.surface
|
||||
}
|
||||
|
||||
Card(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.shadow(4.dp, RoundedCornerShape(12.dp))
|
||||
.clickable { onTap() },
|
||||
shape = RoundedCornerShape(12.dp),
|
||||
colors = CardDefaults.cardColors(containerColor = backgroundColor)
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(16.dp),
|
||||
horizontalArrangement = Arrangement.spacedBy(12.dp),
|
||||
verticalAlignment = Alignment.Top
|
||||
) {
|
||||
if (message.imageUrl != null) {
|
||||
AsyncImage(
|
||||
model = message.imageUrl,
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.size(48.dp)
|
||||
.clip(RoundedCornerShape(8.dp)),
|
||||
contentScale = ContentScale.Crop
|
||||
)
|
||||
}
|
||||
|
||||
Column(
|
||||
modifier = Modifier.weight(1f),
|
||||
verticalArrangement = Arrangement.spacedBy(4.dp)
|
||||
) {
|
||||
Text(
|
||||
text = message.title,
|
||||
style = MaterialTheme.typography.titleMedium,
|
||||
maxLines = 1,
|
||||
overflow = TextOverflow.Ellipsis
|
||||
)
|
||||
|
||||
message.body?.let { body ->
|
||||
Text(
|
||||
text = body,
|
||||
style = MaterialTheme.typography.bodyMedium,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
maxLines = 2,
|
||||
overflow = TextOverflow.Ellipsis
|
||||
)
|
||||
}
|
||||
|
||||
if (message.ctaText != null) {
|
||||
Text(
|
||||
text = "Tap to open →",
|
||||
style = MaterialTheme.typography.labelMedium,
|
||||
color = MaterialTheme.colorScheme.primary
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (message.dismissible) {
|
||||
IconButton(
|
||||
onClick = onDismiss,
|
||||
modifier = Modifier.size(32.dp)
|
||||
) {
|
||||
Icon(
|
||||
imageVector = Icons.Default.Close,
|
||||
contentDescription = "Dismiss",
|
||||
tint = MaterialTheme.colorScheme.onSurfaceVariant
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Broadcast Modal — Jetpack Compose component for modal/fullscreen broadcast display.
|
||||
*/
|
||||
@Composable
|
||||
fun BroadcastModal(
|
||||
client: BLBroadcastClient,
|
||||
modifier: Modifier = Modifier
|
||||
) {
|
||||
val scope = rememberCoroutineScope()
|
||||
var currentMessage by remember { mutableStateOf<InAppMessage?>(null) }
|
||||
var showDialog by remember { mutableStateOf(false) }
|
||||
|
||||
LaunchedEffect(client) {
|
||||
// Start polling for modal messages
|
||||
client.startPolling(30000L) { messages ->
|
||||
val modalMessages = messages.filter {
|
||||
it.status == MessageStatus.UNREAD && (it.style == MessageStyle.MODAL || it.style == MessageStyle.FULLSCREEN)
|
||||
}
|
||||
if (modalMessages.isNotEmpty() && currentMessage == null) {
|
||||
currentMessage = modalMessages.first()
|
||||
showDialog = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (showDialog && currentMessage != null) {
|
||||
val message = currentMessage!!
|
||||
|
||||
Dialog(
|
||||
onDismissRequest = {
|
||||
if (message.dismissible) {
|
||||
scope.launch {
|
||||
client.markDismissed(message.id)
|
||||
}
|
||||
showDialog = false
|
||||
currentMessage = null
|
||||
}
|
||||
}
|
||||
) {
|
||||
Surface(
|
||||
modifier = modifier
|
||||
.fillMaxWidth()
|
||||
.padding(16.dp),
|
||||
shape = RoundedCornerShape(16.dp),
|
||||
color = MaterialTheme.colorScheme.surface
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier.padding(24.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(16.dp)
|
||||
) {
|
||||
// Header with image
|
||||
if (message.imageUrl != null) {
|
||||
AsyncImage(
|
||||
model = message.imageUrl,
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(160.dp)
|
||||
.clip(RoundedCornerShape(12.dp)),
|
||||
contentScale = ContentScale.Crop
|
||||
)
|
||||
}
|
||||
|
||||
Text(
|
||||
text = message.title,
|
||||
style = MaterialTheme.typography.headlineSmall,
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
)
|
||||
|
||||
message.body?.let { body ->
|
||||
Text(
|
||||
text = body,
|
||||
style = MaterialTheme.typography.bodyLarge,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
)
|
||||
}
|
||||
|
||||
// Action buttons
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalArrangement = Arrangement.End,
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
if (message.dismissible) {
|
||||
TextButton(
|
||||
onClick = {
|
||||
scope.launch {
|
||||
client.markDismissed(message.id)
|
||||
}
|
||||
showDialog = false
|
||||
currentMessage = null
|
||||
}
|
||||
) {
|
||||
Text("Dismiss")
|
||||
}
|
||||
}
|
||||
|
||||
if (message.ctaText != null) {
|
||||
Button(
|
||||
onClick = {
|
||||
scope.launch {
|
||||
client.trackClick(message.id)
|
||||
message.ctaUrl?.let { url ->
|
||||
val context = androidx.compose.ui.platform.LocalContext.current
|
||||
val intent = android.content.Intent(android.content.Intent.ACTION_VIEW, android.net.Uri.parse(url))
|
||||
context.startActivity(intent)
|
||||
}
|
||||
client.markRead(message.id)
|
||||
}
|
||||
showDialog = false
|
||||
currentMessage = null
|
||||
}
|
||||
) {
|
||||
Text(message.ctaText)
|
||||
Spacer(modifier = Modifier.width(4.dp))
|
||||
Icon(
|
||||
imageVector = Icons.Default.OpenInNew,
|
||||
contentDescription = null,
|
||||
modifier = Modifier.size(16.dp)
|
||||
)
|
||||
}
|
||||
} else {
|
||||
Button(
|
||||
onClick = {
|
||||
scope.launch {
|
||||
client.markRead(message.id)
|
||||
}
|
||||
showDialog = false
|
||||
currentMessage = null
|
||||
}
|
||||
) {
|
||||
Text("Got it")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,754 @@
|
||||
package com.bytelyst.platform.ui
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.layout.*
|
||||
import androidx.compose.foundation.rememberScrollState
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.foundation.text.KeyboardOptions
|
||||
import androidx.compose.foundation.verticalScroll
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.ArrowDownward
|
||||
import androidx.compose.material.icons.filled.ArrowUpward
|
||||
import androidx.compose.material.icons.filled.Check
|
||||
import androidx.compose.material.icons.filled.CheckCircle
|
||||
import androidx.compose.material.icons.filled.Close
|
||||
import androidx.compose.material.icons.filled.RadioButtonUnchecked
|
||||
import androidx.compose.material3.*
|
||||
import androidx.compose.runtime.*
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.text.input.KeyboardType
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.window.Dialog
|
||||
import com.bytelyst.platform.*
|
||||
import kotlinx.coroutines.launch
|
||||
|
||||
/**
|
||||
* Survey Modal — Jetpack Compose component for displaying and completing surveys.
|
||||
* Part of ByteLystPlatformSDK.
|
||||
*/
|
||||
@Composable
|
||||
fun SurveyModal(
|
||||
client: BLSurveyClient,
|
||||
modifier: Modifier = Modifier
|
||||
) {
|
||||
val scope = rememberCoroutineScope()
|
||||
var survey by remember { mutableStateOf<ActiveSurvey?>(null) }
|
||||
var currentQuestionIndex by remember { mutableIntStateOf(0) }
|
||||
var answers by remember { mutableStateOf<Map<String, SurveyAnswer>>(emptyMap()) }
|
||||
var isComplete by remember { mutableStateOf(false) }
|
||||
var showCompletion by remember { mutableStateOf(false) }
|
||||
var showDialog by remember { mutableStateOf(false) }
|
||||
|
||||
// Question state
|
||||
var selectedOption by remember { mutableStateOf<String?>(null) }
|
||||
var selectedOptions by remember { mutableStateOf<Set<String>>(emptySet()) }
|
||||
var ratingValue by remember { mutableIntStateOf(0) }
|
||||
var textAnswer by remember { mutableStateOf("") }
|
||||
var rankingOrder by remember { mutableStateOf<List<String>>(emptyList()) }
|
||||
|
||||
LaunchedEffect(client) {
|
||||
// Check for active survey
|
||||
val result = client.getActiveSurvey()
|
||||
result.onSuccess { response ->
|
||||
response?.let {
|
||||
survey = it
|
||||
showDialog = true
|
||||
}
|
||||
}
|
||||
|
||||
// Start polling
|
||||
client.startPolling(60000L) { newSurvey ->
|
||||
if (newSurvey != null && survey == null) {
|
||||
survey = newSurvey
|
||||
showDialog = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (showDialog) {
|
||||
when {
|
||||
showCompletion -> {
|
||||
CompletionDialog(
|
||||
survey = survey,
|
||||
onDismiss = {
|
||||
scope.launch {
|
||||
survey?.let { client.dismissSurvey(it.id) }
|
||||
}
|
||||
showDialog = false
|
||||
resetSurvey()
|
||||
}
|
||||
)
|
||||
}
|
||||
survey != null && currentQuestionIndex < survey!!.questions.size -> {
|
||||
val question = survey!!.questions[currentQuestionIndex]
|
||||
QuestionDialog(
|
||||
survey = survey!!,
|
||||
question = question,
|
||||
questionIndex = currentQuestionIndex,
|
||||
totalQuestions = survey!!.questions.size,
|
||||
selectedOption = selectedOption,
|
||||
selectedOptions = selectedOptions,
|
||||
ratingValue = ratingValue,
|
||||
textAnswer = textAnswer,
|
||||
rankingOrder = rankingOrder,
|
||||
onSelectedOptionChange = { selectedOption = it },
|
||||
onSelectedOptionsChange = { selectedOptions = it },
|
||||
onRatingChange = { ratingValue = it },
|
||||
onTextChange = { textAnswer = it },
|
||||
onRankingChange = { rankingOrder = it },
|
||||
onSubmit = {
|
||||
scope.launch {
|
||||
submitAnswer(
|
||||
client = client,
|
||||
survey = survey!!,
|
||||
question = question,
|
||||
selectedOption = selectedOption,
|
||||
selectedOptions = selectedOptions,
|
||||
ratingValue = ratingValue,
|
||||
textAnswer = textAnswer,
|
||||
rankingOrder = rankingOrder,
|
||||
onSuccess = { newIndex, newAnswers ->
|
||||
currentQuestionIndex = newIndex
|
||||
answers = newAnswers
|
||||
resetQuestionState(
|
||||
onSelectedOption = { selectedOption = it },
|
||||
onSelectedOptions = { selectedOptions = it },
|
||||
onRating = { ratingValue = it },
|
||||
onText = { textAnswer = it },
|
||||
onRanking = { rankingOrder = it }
|
||||
)
|
||||
|
||||
if (currentQuestionIndex >= survey!!.questions.size) {
|
||||
completeSurvey(client, survey!!.id) { success, incentive ->
|
||||
if (success) {
|
||||
isComplete = true
|
||||
showCompletion = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
onSkip = {
|
||||
if (!question.required) {
|
||||
scope.launch {
|
||||
skipQuestion(client, survey!!, question.id) { newIndex ->
|
||||
currentQuestionIndex = newIndex
|
||||
resetQuestionState(
|
||||
onSelectedOption = { selectedOption = it },
|
||||
onSelectedOptions = { selectedOptions = it },
|
||||
onRating = { ratingValue = it },
|
||||
onText = { textAnswer = it },
|
||||
onRanking = { rankingOrder = it }
|
||||
)
|
||||
|
||||
if (currentQuestionIndex >= survey!!.questions.size) {
|
||||
completeSurvey(client, survey!!.id) { success, _ ->
|
||||
if (success) {
|
||||
isComplete = true
|
||||
showCompletion = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onDismiss = {
|
||||
scope.launch {
|
||||
survey?.let { client.dismissSurvey(it.id) }
|
||||
}
|
||||
showDialog = false
|
||||
resetSurvey()
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fun resetSurvey() {
|
||||
survey = null
|
||||
currentQuestionIndex = 0
|
||||
answers = emptyMap()
|
||||
isComplete = false
|
||||
showCompletion = false
|
||||
resetQuestionState(
|
||||
onSelectedOption = { selectedOption = it },
|
||||
onSelectedOptions = { selectedOptions = it },
|
||||
onRating = { ratingValue = it },
|
||||
onText = { textAnswer = it },
|
||||
onRanking = { rankingOrder = it }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
private suspend fun submitAnswer(
|
||||
client: BLSurveyClient,
|
||||
survey: ActiveSurvey,
|
||||
question: Question,
|
||||
selectedOption: String?,
|
||||
selectedOptions: Set<String>,
|
||||
ratingValue: Int,
|
||||
textAnswer: String,
|
||||
rankingOrder: List<String>,
|
||||
onSuccess: (Int, Map<String, SurveyAnswer>) -> Unit
|
||||
) {
|
||||
val answer: SurveyAnswer = when (question.type) {
|
||||
QuestionType.SINGLE_CHOICE, QuestionType.DROPDOWN -> {
|
||||
selectedOption?.let {
|
||||
SurveyAnswer(type = "single_choice", value = JsonObject(mapOf("value" to JsonPrimitive(it))))
|
||||
} ?: return
|
||||
}
|
||||
QuestionType.MULTIPLE_CHOICE -> {
|
||||
SurveyAnswer(type = "multiple_choice", value = JsonObject(mapOf("values" to JsonArray(selectedOptions.map { JsonPrimitive(it) }))))
|
||||
}
|
||||
QuestionType.RATING, QuestionType.SCALE, QuestionType.NPS -> {
|
||||
SurveyAnswer(type = "rating", value = JsonObject(mapOf("value" to JsonPrimitive(ratingValue))))
|
||||
}
|
||||
QuestionType.TEXT_SHORT, QuestionType.TEXT_LONG -> {
|
||||
SurveyAnswer(type = "text", value = JsonObject(mapOf("value" to JsonPrimitive(textAnswer))))
|
||||
}
|
||||
QuestionType.RANKING -> {
|
||||
SurveyAnswer(type = "ranking", value = JsonObject(mapOf("order" to JsonArray(rankingOrder.map { JsonPrimitive(it) }))))
|
||||
}
|
||||
}
|
||||
|
||||
val result = client.submitAnswer(survey.id, question.id, answer)
|
||||
result.onSuccess { response ->
|
||||
onSuccess(response.currentQuestionIndex, response.answers)
|
||||
}
|
||||
}
|
||||
|
||||
private suspend fun skipQuestion(
|
||||
client: BLSurveyClient,
|
||||
survey: ActiveSurvey,
|
||||
questionId: String,
|
||||
onSuccess: (Int) -> Unit
|
||||
) {
|
||||
val answer = SurveyAnswer(type = "skipped", value = JsonObject(emptyMap()))
|
||||
val result = client.submitAnswer(survey.id, questionId, answer)
|
||||
result.onSuccess { response ->
|
||||
onSuccess(response.currentQuestionIndex)
|
||||
}
|
||||
}
|
||||
|
||||
private suspend fun completeSurvey(
|
||||
client: BLSurveyClient,
|
||||
surveyId: String,
|
||||
onComplete: (Boolean, Boolean) -> Unit
|
||||
) {
|
||||
val result = client.completeSurvey(surveyId)
|
||||
result.onSuccess { completion ->
|
||||
onComplete(completion.success, completion.incentiveClaimed)
|
||||
}
|
||||
}
|
||||
|
||||
private fun resetQuestionState(
|
||||
onSelectedOption: (String?) -> Unit,
|
||||
onSelectedOptions: (Set<String>) -> Unit,
|
||||
onRating: (Int) -> Unit,
|
||||
onText: (String) -> Unit,
|
||||
onRanking: (List<String>) -> Unit
|
||||
) {
|
||||
onSelectedOption(null)
|
||||
onSelectedOptions(emptySet())
|
||||
onRating(0)
|
||||
onText("")
|
||||
onRanking(emptyList())
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun QuestionDialog(
|
||||
survey: ActiveSurvey,
|
||||
question: Question,
|
||||
questionIndex: Int,
|
||||
totalQuestions: Int,
|
||||
selectedOption: String?,
|
||||
selectedOptions: Set<String>,
|
||||
ratingValue: Int,
|
||||
textAnswer: String,
|
||||
rankingOrder: List<String>,
|
||||
onSelectedOptionChange: (String?) -> Unit,
|
||||
onSelectedOptionsChange: (Set<String>) -> Unit,
|
||||
onRatingChange: (Int) -> Unit,
|
||||
onTextChange: (String) -> Unit,
|
||||
onRankingChange: (List<String>) -> Unit,
|
||||
onSubmit: () -> Unit,
|
||||
onSkip: () -> Unit,
|
||||
onDismiss: () -> Unit
|
||||
) {
|
||||
Dialog(onDismissRequest = onDismiss) {
|
||||
Surface(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(16.dp),
|
||||
shape = RoundedCornerShape(16.dp),
|
||||
color = MaterialTheme.colorScheme.surface
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.padding(24.dp)
|
||||
.verticalScroll(rememberScrollState()),
|
||||
verticalArrangement = Arrangement.spacedBy(16.dp)
|
||||
) {
|
||||
// Progress
|
||||
LinearProgressIndicator(
|
||||
progress = { (questionIndex + 1) / totalQuestions.toFloat() },
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
)
|
||||
Text(
|
||||
text = "Question ${questionIndex + 1} of $totalQuestions",
|
||||
style = MaterialTheme.typography.labelSmall,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
textAlign = TextAlign.Center
|
||||
)
|
||||
|
||||
// Question text
|
||||
Text(
|
||||
text = question.text,
|
||||
style = MaterialTheme.typography.titleMedium
|
||||
)
|
||||
question.description?.let {
|
||||
Text(
|
||||
text = it,
|
||||
style = MaterialTheme.typography.bodyMedium,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant
|
||||
)
|
||||
}
|
||||
if (question.required) {
|
||||
Text(
|
||||
text = "Required",
|
||||
style = MaterialTheme.typography.labelSmall,
|
||||
color = MaterialTheme.colorScheme.error
|
||||
)
|
||||
}
|
||||
|
||||
// Question input
|
||||
when (question.type) {
|
||||
QuestionType.SINGLE_CHOICE, QuestionType.DROPDOWN -> {
|
||||
SingleChoiceInput(
|
||||
options = question.options ?: emptyList(),
|
||||
selected = selectedOption,
|
||||
onSelect = onSelectedOptionChange
|
||||
)
|
||||
}
|
||||
QuestionType.MULTIPLE_CHOICE -> {
|
||||
MultipleChoiceInput(
|
||||
options = question.options ?: emptyList(),
|
||||
selected = selectedOptions,
|
||||
onSelect = onSelectedOptionsChange
|
||||
)
|
||||
}
|
||||
QuestionType.RATING, QuestionType.SCALE, QuestionType.NPS -> {
|
||||
RatingInput(
|
||||
minValue = question.minValue ?: if (question.type == QuestionType.NPS) 0 else 1,
|
||||
maxValue = question.maxValue ?: if (question.type == QuestionType.NPS) 10 else 5,
|
||||
rating = ratingValue,
|
||||
onRatingChange = onRatingChange
|
||||
)
|
||||
}
|
||||
QuestionType.TEXT_SHORT, QuestionType.TEXT_LONG -> {
|
||||
TextAnswerInput(
|
||||
text = textAnswer,
|
||||
isLong = question.type == QuestionType.TEXT_LONG,
|
||||
maxLength = question.maxLength,
|
||||
onTextChange = onTextChange
|
||||
)
|
||||
}
|
||||
QuestionType.RANKING -> {
|
||||
RankingInput(
|
||||
options = question.options ?: emptyList(),
|
||||
order = rankingOrder,
|
||||
onOrderChange = onRankingChange
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalArrangement = Arrangement.SpaceBetween,
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
if (!question.required) {
|
||||
TextButton(onClick = onSkip) {
|
||||
Text("Skip")
|
||||
}
|
||||
} else {
|
||||
Spacer(modifier = Modifier.width(1.dp))
|
||||
}
|
||||
|
||||
val canSubmit = when (question.type) {
|
||||
QuestionType.SINGLE_CHOICE, QuestionType.DROPDOWN -> selectedOption != null
|
||||
QuestionType.MULTIPLE_CHOICE -> selectedOptions.isNotEmpty()
|
||||
QuestionType.RATING, QuestionType.SCALE, QuestionType.NPS -> ratingValue > 0
|
||||
QuestionType.TEXT_SHORT, QuestionType.TEXT_LONG -> textAnswer.isNotBlank()
|
||||
QuestionType.RANKING -> rankingOrder.size == (question.options?.size ?: 0)
|
||||
}
|
||||
|
||||
val isLast = questionIndex == totalQuestions - 1
|
||||
Button(
|
||||
onClick = onSubmit,
|
||||
enabled = canSubmit
|
||||
) {
|
||||
Text(if (isLast) "Complete" else "Next")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun SingleChoiceInput(
|
||||
options: List<QuestionOption>,
|
||||
selected: String?,
|
||||
onSelect: (String?) -> Unit
|
||||
) {
|
||||
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
|
||||
options.forEach { option ->
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.clip(RoundedCornerShape(8.dp))
|
||||
.background(
|
||||
if (selected == option.id) MaterialTheme.colorScheme.primaryContainer
|
||||
else MaterialTheme.colorScheme.surfaceVariant
|
||||
)
|
||||
.clickable { onSelect(option.id) }
|
||||
.padding(12.dp),
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Text(text = option.emoji ?: "")
|
||||
Text(
|
||||
text = option.text,
|
||||
modifier = Modifier.weight(1f)
|
||||
)
|
||||
Icon(
|
||||
imageVector = if (selected == option.id) Icons.Default.CheckCircle else Icons.Default.RadioButtonUnchecked,
|
||||
contentDescription = null,
|
||||
tint = if (selected == option.id) MaterialTheme.colorScheme.primary
|
||||
else MaterialTheme.colorScheme.onSurfaceVariant
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun MultipleChoiceInput(
|
||||
options: List<QuestionOption>,
|
||||
selected: Set<String>,
|
||||
onSelect: (Set<String>) -> Unit
|
||||
) {
|
||||
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
|
||||
options.forEach { option ->
|
||||
val isSelected = selected.contains(option.id)
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.clip(RoundedCornerShape(8.dp))
|
||||
.background(
|
||||
if (isSelected) MaterialTheme.colorScheme.primaryContainer
|
||||
else MaterialTheme.colorScheme.surfaceVariant
|
||||
)
|
||||
.clickable {
|
||||
val newSet = if (isSelected) selected - option.id else selected + option.id
|
||||
onSelect(newSet)
|
||||
}
|
||||
.padding(12.dp),
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Text(text = option.emoji ?: "")
|
||||
Text(
|
||||
text = option.text,
|
||||
modifier = Modifier.weight(1f)
|
||||
)
|
||||
Checkbox(
|
||||
checked = isSelected,
|
||||
onCheckedChange = {
|
||||
val newSet = if (it) selected + option.id else selected - option.id
|
||||
onSelect(newSet)
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun RatingInput(
|
||||
minValue: Int,
|
||||
maxValue: Int,
|
||||
rating: Int,
|
||||
onRatingChange: (Int) -> Unit
|
||||
) {
|
||||
Column(
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
verticalArrangement = Arrangement.spacedBy(8.dp)
|
||||
) {
|
||||
Row(
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp)
|
||||
) {
|
||||
(minValue..maxValue).forEach { value ->
|
||||
Button(
|
||||
onClick = { onRatingChange(value) },
|
||||
shape = CircleShape,
|
||||
colors = ButtonDefaults.buttonColors(
|
||||
containerColor = if (rating == value) MaterialTheme.colorScheme.primary
|
||||
else MaterialTheme.colorScheme.surfaceVariant,
|
||||
contentColor = if (rating == value) MaterialTheme.colorScheme.onPrimary
|
||||
else MaterialTheme.colorScheme.onSurfaceVariant
|
||||
),
|
||||
modifier = Modifier.size(44.dp)
|
||||
) {
|
||||
Text("$value")
|
||||
}
|
||||
}
|
||||
}
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalArrangement = Arrangement.SpaceBetween
|
||||
) {
|
||||
Text(
|
||||
text = if (maxValue == 10) "Not likely" else "Low",
|
||||
style = MaterialTheme.typography.labelSmall,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant
|
||||
)
|
||||
Text(
|
||||
text = if (maxValue == 10) "Very likely" else "High",
|
||||
style = MaterialTheme.typography.labelSmall,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun TextAnswerInput(
|
||||
text: String,
|
||||
isLong: Boolean,
|
||||
maxLength: Int?,
|
||||
onTextChange: (String) -> Unit
|
||||
) {
|
||||
Column {
|
||||
if (isLong) {
|
||||
OutlinedTextField(
|
||||
value = text,
|
||||
onValueChange = { newText ->
|
||||
maxLength?.let {
|
||||
if (newText.length <= it) onTextChange(newText)
|
||||
} ?: onTextChange(newText)
|
||||
},
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.heightIn(min = 120.dp),
|
||||
maxLines = 6,
|
||||
keyboardOptions = KeyboardOptions.Default
|
||||
)
|
||||
} else {
|
||||
OutlinedTextField(
|
||||
value = text,
|
||||
onValueChange = { newText ->
|
||||
maxLength?.let {
|
||||
if (newText.length <= it) onTextChange(newText)
|
||||
} ?: onTextChange(newText)
|
||||
},
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
singleLine = true,
|
||||
keyboardOptions = KeyboardOptions.Default
|
||||
)
|
||||
}
|
||||
maxLength?.let {
|
||||
Text(
|
||||
text = "${text.length}/$it",
|
||||
style = MaterialTheme.typography.labelSmall,
|
||||
color = if (text.length > it) MaterialTheme.colorScheme.error
|
||||
else MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
modifier = Modifier.align(Alignment.End)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun RankingInput(
|
||||
options: List<QuestionOption>,
|
||||
order: List<String>,
|
||||
onOrderChange: (List<String>) -> Unit
|
||||
) {
|
||||
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
|
||||
options.forEach { option ->
|
||||
val rank = order.indexOf(option.id).let { if (it >= 0) it + 1 else null }
|
||||
val isRanked = rank != null
|
||||
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.clip(RoundedCornerShape(8.dp))
|
||||
.background(MaterialTheme.colorScheme.surfaceVariant)
|
||||
.padding(12.dp),
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
// Rank badge
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(28.dp)
|
||||
.clip(CircleShape)
|
||||
.background(
|
||||
if (isRanked) MaterialTheme.colorScheme.primary
|
||||
else MaterialTheme.colorScheme.surface
|
||||
),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Text(
|
||||
text = rank?.toString() ?: "-",
|
||||
style = MaterialTheme.typography.labelSmall,
|
||||
color = if (isRanked) MaterialTheme.colorScheme.onPrimary
|
||||
else MaterialTheme.colorScheme.onSurfaceVariant
|
||||
)
|
||||
}
|
||||
|
||||
Text(
|
||||
text = option.text,
|
||||
modifier = Modifier.weight(1f)
|
||||
)
|
||||
|
||||
// Controls
|
||||
Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
|
||||
IconButton(
|
||||
onClick = {
|
||||
val idx = order.indexOf(option.id)
|
||||
if (idx > 0) {
|
||||
val newOrder = order.toMutableList()
|
||||
newOrder.swap(idx, idx - 1)
|
||||
onOrderChange(newOrder)
|
||||
}
|
||||
},
|
||||
enabled = isRanked && rank!! > 1,
|
||||
modifier = Modifier.size(32.dp)
|
||||
) {
|
||||
Icon(Icons.Default.ArrowUpward, null, modifier = Modifier.size(16.dp))
|
||||
}
|
||||
|
||||
IconButton(
|
||||
onClick = {
|
||||
val idx = order.indexOf(option.id)
|
||||
if (idx < order.size - 1) {
|
||||
val newOrder = order.toMutableList()
|
||||
newOrder.swap(idx, idx + 1)
|
||||
onOrderChange(newOrder)
|
||||
}
|
||||
},
|
||||
enabled = isRanked && rank!! < order.size,
|
||||
modifier = Modifier.size(32.dp)
|
||||
) {
|
||||
Icon(Icons.Default.ArrowDownward, null, modifier = Modifier.size(16.dp))
|
||||
}
|
||||
|
||||
IconButton(
|
||||
onClick = {
|
||||
if (!isRanked) {
|
||||
onOrderChange(order + option.id)
|
||||
}
|
||||
},
|
||||
enabled = !isRanked,
|
||||
modifier = Modifier.size(32.dp)
|
||||
) {
|
||||
Icon(Icons.Default.Check, null, modifier = Modifier.size(16.dp))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private fun MutableList<String>.swap(i: Int, j: Int) {
|
||||
val temp = this[i]
|
||||
this[i] = this[j]
|
||||
this[j] = temp
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun CompletionDialog(
|
||||
survey: ActiveSurvey?,
|
||||
onDismiss: () -> Unit
|
||||
) {
|
||||
Dialog(onDismissRequest = onDismiss) {
|
||||
Surface(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(16.dp),
|
||||
shape = RoundedCornerShape(16.dp),
|
||||
color = MaterialTheme.colorScheme.surface
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier.padding(24.dp),
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
verticalArrangement = Arrangement.spacedBy(16.dp)
|
||||
) {
|
||||
Icon(
|
||||
imageVector = Icons.Default.CheckCircle,
|
||||
contentDescription = null,
|
||||
modifier = Modifier.size(64.dp),
|
||||
tint = Color(0xFF4CAF50)
|
||||
)
|
||||
|
||||
Text(
|
||||
text = "Thank You!",
|
||||
style = MaterialTheme.typography.headlineSmall
|
||||
)
|
||||
|
||||
Text(
|
||||
text = "Your feedback helps us improve.",
|
||||
style = MaterialTheme.typography.bodyMedium,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
textAlign = TextAlign.Center
|
||||
)
|
||||
|
||||
survey?.incentive?.let { incentive ->
|
||||
Card(
|
||||
colors = CardDefaults.cardColors(
|
||||
containerColor = Color(0xFFE8F5E9)
|
||||
)
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier.padding(16.dp),
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Icon(
|
||||
imageVector = Icons.Default.Check,
|
||||
contentDescription = null,
|
||||
tint = Color(0xFF4CAF50)
|
||||
)
|
||||
Text(
|
||||
text = "You've earned ${incentive.amount} ${if (incentive.type == "pro_days") "Pro Days" else "Credits"}!",
|
||||
style = MaterialTheme.typography.titleSmall,
|
||||
color = Color(0xFF2E7D32)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Button(
|
||||
onClick = onDismiss,
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
) {
|
||||
Text("Close")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
260
packages/swift-platform-sdk/Sources/BLInAppMessageUI.swift
Normal file
260
packages/swift-platform-sdk/Sources/BLInAppMessageUI.swift
Normal file
@ -0,0 +1,260 @@
|
||||
import SwiftUI
|
||||
|
||||
/**
|
||||
* In-App Message Banner — SwiftUI component for top/bottom banner display.
|
||||
* Part of ByteLystPlatformSDK.
|
||||
*/
|
||||
@available(iOS 15.0, *)
|
||||
public struct BLInAppMessageBanner: View {
|
||||
@ObservedObject var client: BLBroadcastClient
|
||||
@State private var messages: [BLInAppMessage] = []
|
||||
@State private var unreadCount = 0
|
||||
|
||||
let position: BannerPosition
|
||||
|
||||
public enum BannerPosition {
|
||||
case top, bottom
|
||||
}
|
||||
|
||||
public init(client: BLBroadcastClient, position: BannerPosition = .top) {
|
||||
self.client = client
|
||||
self.position = position
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
VStack(spacing: 8) {
|
||||
ForEach(messages.filter { $0.status == .unread && ($0.style == .banner || $0.style == .toast) }) { message in
|
||||
BannerCard(
|
||||
message: message,
|
||||
onDismiss: { await dismissMessage(message) },
|
||||
onTap: { await handleTap(message) }
|
||||
)
|
||||
}
|
||||
}
|
||||
.padding(.horizontal)
|
||||
.padding(position == .top ? .top : .bottom, 8)
|
||||
.task {
|
||||
await loadMessages()
|
||||
startPolling()
|
||||
}
|
||||
}
|
||||
|
||||
private func loadMessages() async {
|
||||
let result = await client.listMessages()
|
||||
if let response = result.1 {
|
||||
messages = response.messages
|
||||
unreadCount = messages.filter { $0.status == .unread }.count
|
||||
}
|
||||
}
|
||||
|
||||
private func startPolling() {
|
||||
client.startPolling(intervalMs: 60000) { updatedMessages in
|
||||
messages = updatedMessages
|
||||
unreadCount = updatedMessages.filter { $0.status == .unread }.count
|
||||
}
|
||||
}
|
||||
|
||||
private func dismissMessage(_ message: BLInAppMessage) async {
|
||||
_ = await client.markDismissed(message.id)
|
||||
messages.removeAll { $0.id == message.id }
|
||||
}
|
||||
|
||||
private func handleTap(_ message: BLInAppMessage) async {
|
||||
_ = await client.trackClick(message.id)
|
||||
if let urlString = message.ctaUrl, let url = URL(string: urlString) {
|
||||
await UIApplication.shared.open(url)
|
||||
}
|
||||
_ = await client.markRead(message.id)
|
||||
if let index = messages.firstIndex(where: { $0.id == message.id }) {
|
||||
messages[index].status = .read
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@available(iOS 15.0, *)
|
||||
struct BannerCard: View {
|
||||
let message: BLInAppMessage
|
||||
let onDismiss: () async -> Void
|
||||
let onTap: () async -> Void
|
||||
|
||||
var body: some View {
|
||||
HStack(alignment: .top, spacing: 12) {
|
||||
if let imageUrl = message.imageUrl, let url = URL(string: imageUrl) {
|
||||
AsyncImage(url: url) { phase in
|
||||
switch phase {
|
||||
case .success(let image):
|
||||
image.resizable().aspectRatio(contentMode: .fill)
|
||||
default:
|
||||
Color.gray
|
||||
}
|
||||
}
|
||||
.frame(width: 48, height: 48)
|
||||
.clipShape(RoundedRectangle(cornerRadius: 8))
|
||||
}
|
||||
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text(message.title)
|
||||
.font(.headline)
|
||||
|
||||
if let body = message.body {
|
||||
Text(body)
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
.lineLimit(2)
|
||||
}
|
||||
|
||||
if message.ctaText != nil {
|
||||
Text("Tap to open")
|
||||
.font(.caption)
|
||||
.foregroundColor(.blue)
|
||||
}
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
if message.dismissible {
|
||||
Button(action: { Task { await onDismiss() } }) {
|
||||
Image(systemName: "xmark")
|
||||
.foregroundColor(.secondary)
|
||||
.padding(8)
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding()
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 12)
|
||||
.fill(backgroundColor)
|
||||
.shadow(radius: 2)
|
||||
)
|
||||
.contentShape(Rectangle())
|
||||
.onTapGesture {
|
||||
Task { await onTap() }
|
||||
}
|
||||
}
|
||||
|
||||
private var backgroundColor: Color {
|
||||
switch message.priority {
|
||||
case .urgent:
|
||||
return Color.red.opacity(0.1)
|
||||
case .high:
|
||||
return Color.orange.opacity(0.1)
|
||||
default:
|
||||
return Color(.systemBackground)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@available(iOS 15.0, *)
|
||||
public struct BLBroadcastModal: View {
|
||||
@ObservedObject var client: BLBroadcastClient
|
||||
@State private var currentMessage: BLInAppMessage?
|
||||
@State private var isPresented = false
|
||||
|
||||
public init(client: BLBroadcastClient) {
|
||||
self.client = client
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
EmptyView()
|
||||
.sheet(isPresented: $isPresented) {
|
||||
if let message = currentMessage {
|
||||
ModalContent(
|
||||
message: message,
|
||||
onDismiss: { await dismissMessage() },
|
||||
onAction: { await handleAction() }
|
||||
)
|
||||
}
|
||||
}
|
||||
.task {
|
||||
startPolling()
|
||||
}
|
||||
}
|
||||
|
||||
private func startPolling() {
|
||||
client.startPolling(intervalMs: 30000) { messages in
|
||||
let modalMessages = messages.filter {
|
||||
$0.status == .unread && ($0.style == .modal || $0.style == .fullscreen)
|
||||
}
|
||||
if let first = modalMessages.first, currentMessage == nil {
|
||||
currentMessage = first
|
||||
isPresented = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func dismissMessage() async {
|
||||
if let message = currentMessage {
|
||||
_ = await client.markDismissed(message.id)
|
||||
}
|
||||
isPresented = false
|
||||
currentMessage = nil
|
||||
}
|
||||
|
||||
private func handleAction() async {
|
||||
if let message = currentMessage {
|
||||
_ = await client.trackClick(message.id)
|
||||
if let urlString = message.ctaUrl, let url = URL(string: urlString) {
|
||||
await UIApplication.shared.open(url)
|
||||
}
|
||||
_ = await client.markRead(message.id)
|
||||
}
|
||||
isPresented = false
|
||||
currentMessage = nil
|
||||
}
|
||||
}
|
||||
|
||||
@available(iOS 15.0, *)
|
||||
struct ModalContent: View {
|
||||
let message: BLInAppMessage
|
||||
let onDismiss: () async -> Void
|
||||
let onAction: () async -> Void
|
||||
|
||||
var body: some View {
|
||||
NavigationView {
|
||||
ScrollView {
|
||||
VStack(spacing: 20) {
|
||||
if let imageUrl = message.imageUrl, let url = URL(string: imageUrl) {
|
||||
AsyncImage(url: url) { phase in
|
||||
switch phase {
|
||||
case .success(let image):
|
||||
image.resizable().aspectRatio(contentMode: .fit)
|
||||
default:
|
||||
Color.gray
|
||||
}
|
||||
}
|
||||
.frame(maxHeight: 200)
|
||||
.clipShape(RoundedRectangle(cornerRadius: 12))
|
||||
}
|
||||
|
||||
Text(message.title)
|
||||
.font(.title2.bold())
|
||||
|
||||
if let body = message.body {
|
||||
Text(body)
|
||||
.font(.body)
|
||||
.foregroundColor(.secondary)
|
||||
.multilineTextAlignment(.center)
|
||||
}
|
||||
|
||||
if message.ctaText != nil {
|
||||
Button(action: { Task { await onAction() } }) {
|
||||
Text(message.ctaText!)
|
||||
.font(.headline)
|
||||
.foregroundColor(.white)
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding()
|
||||
.background(Color.blue)
|
||||
.cornerRadius(12)
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding()
|
||||
}
|
||||
.navigationBarItems(
|
||||
trailing: message.dismissible ? Button("Close") {
|
||||
Task { await onDismiss() }
|
||||
} : nil
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
584
packages/swift-platform-sdk/Sources/BLSurveyUI.swift
Normal file
584
packages/swift-platform-sdk/Sources/BLSurveyUI.swift
Normal file
@ -0,0 +1,584 @@
|
||||
import SwiftUI
|
||||
|
||||
/**
|
||||
* Survey Modal — SwiftUI component for displaying and completing surveys.
|
||||
* Part of ByteLystPlatformSDK.
|
||||
*/
|
||||
@available(iOS 15.0, *)
|
||||
public struct BLSurveyModal: View {
|
||||
@ObservedObject var client: BLSurveyClient
|
||||
@State private var survey: BLActiveSurvey?
|
||||
@State private var currentQuestionIndex = 0
|
||||
@State private var answers: [String: BLSurveyAnswer] = [:]
|
||||
@State private var isComplete = false
|
||||
@State private var showCompletion = false
|
||||
@State private var isPresented = false
|
||||
|
||||
// Local state for question answers
|
||||
@State private var selectedOption: String?
|
||||
@State private var selectedOptions: Set<String> = []
|
||||
@State private var ratingValue: Int = 0
|
||||
@State private var textAnswer: String = ""
|
||||
@State private var rankingOrder: [String] = []
|
||||
|
||||
public init(client: BLSurveyClient) {
|
||||
self.client = client
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
EmptyView()
|
||||
.sheet(isPresented: $isPresented) {
|
||||
surveyContent
|
||||
}
|
||||
.task {
|
||||
await checkForSurvey()
|
||||
startPolling()
|
||||
}
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var surveyContent: some View {
|
||||
if showCompletion {
|
||||
CompletionView(
|
||||
survey: survey,
|
||||
onDismiss: { dismissSurvey() }
|
||||
)
|
||||
} else if let survey = survey, currentQuestionIndex < survey.questions.count {
|
||||
let question = survey.questions[currentQuestionIndex]
|
||||
QuestionView(
|
||||
survey: survey,
|
||||
question: question,
|
||||
questionIndex: currentQuestionIndex,
|
||||
totalQuestions: survey.questions.count,
|
||||
selectedOption: $selectedOption,
|
||||
selectedOptions: $selectedOptions,
|
||||
ratingValue: $ratingValue,
|
||||
textAnswer: $textAnswer,
|
||||
rankingOrder: $rankingOrder,
|
||||
onSubmit: { await submitAnswer(question) },
|
||||
onSkip: { await skipQuestion() },
|
||||
onDismiss: { dismissSurvey() }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
private func checkForSurvey() async {
|
||||
let result = await client.getActiveSurvey()
|
||||
if let activeSurvey = result.1 {
|
||||
survey = activeSurvey
|
||||
if !isPresented {
|
||||
isPresented = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func startPolling() {
|
||||
client.startPolling(intervalMs: 60000) { newSurvey in
|
||||
if let newSurvey = newSurvey, survey == nil {
|
||||
survey = newSurvey
|
||||
isPresented = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func submitAnswer(_ question: BLQuestion) async {
|
||||
let answer: BLSurveyAnswer
|
||||
|
||||
switch question.type {
|
||||
case .singleChoice, .dropdown:
|
||||
guard let value = selectedOption else { return }
|
||||
answer = BLSurveyAnswer(type: "single_choice", value: .string(value))
|
||||
case .multipleChoice:
|
||||
let values = Array(selectedOptions)
|
||||
answer = BLSurveyAnswer(type: "multiple_choice", value: .stringArray(values))
|
||||
case .rating, .scale, .nps:
|
||||
answer = BLSurveyAnswer(type: "rating", value: .int(ratingValue))
|
||||
case .textShort, .textLong:
|
||||
answer = BLSurveyAnswer(type: "text", value: .string(textAnswer))
|
||||
case .ranking:
|
||||
answer = BLSurveyAnswer(type: "ranking", value: .stringArray(rankingOrder))
|
||||
}
|
||||
|
||||
let result = await client.submitAnswer(surveyId: survey!.id, questionId: question.id, answer: answer)
|
||||
if let response = result.1 {
|
||||
currentQuestionIndex = response.currentQuestionIndex
|
||||
answers = response.answers
|
||||
resetQuestionState()
|
||||
|
||||
if currentQuestionIndex >= survey!.questions.count {
|
||||
await completeSurvey()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func skipQuestion() async {
|
||||
let question = survey!.questions[currentQuestionIndex]
|
||||
if !question.required {
|
||||
// Submit empty answer to skip
|
||||
let answer = BLSurveyAnswer(type: "skipped", value: .null)
|
||||
_ = await client.submitAnswer(surveyId: survey!.id, questionId: question.id, answer: answer)
|
||||
|
||||
currentQuestionIndex += 1
|
||||
resetQuestionState()
|
||||
|
||||
if currentQuestionIndex >= survey!.questions.count {
|
||||
await completeSurvey()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func completeSurvey() async {
|
||||
let result = await client.completeSurvey(surveyId: survey!.id)
|
||||
if let completion = result.1, completion.success {
|
||||
isComplete = true
|
||||
showCompletion = true
|
||||
}
|
||||
}
|
||||
|
||||
private func dismissSurvey() {
|
||||
if let survey = survey {
|
||||
Task {
|
||||
_ = await client.dismissSurvey(surveyId: survey.id)
|
||||
}
|
||||
}
|
||||
isPresented = false
|
||||
resetSurvey()
|
||||
}
|
||||
|
||||
private func resetSurvey() {
|
||||
survey = nil
|
||||
currentQuestionIndex = 0
|
||||
answers = [:]
|
||||
isComplete = false
|
||||
showCompletion = false
|
||||
resetQuestionState()
|
||||
}
|
||||
|
||||
private func resetQuestionState() {
|
||||
selectedOption = nil
|
||||
selectedOptions = []
|
||||
ratingValue = 0
|
||||
textAnswer = ""
|
||||
rankingOrder = []
|
||||
}
|
||||
}
|
||||
|
||||
@available(iOS 15.0, *)
|
||||
struct QuestionView: View {
|
||||
let survey: BLActiveSurvey
|
||||
let question: BLQuestion
|
||||
let questionIndex: Int
|
||||
let totalQuestions: Int
|
||||
|
||||
@Binding var selectedOption: String?
|
||||
@Binding var selectedOptions: Set<String>
|
||||
@Binding var ratingValue: Int
|
||||
@Binding var textAnswer: String
|
||||
@Binding var rankingOrder: [String]
|
||||
|
||||
let onSubmit: () async -> Void
|
||||
let onSkip: () async -> Void
|
||||
let onDismiss: () -> Void
|
||||
|
||||
var body: some View {
|
||||
NavigationView {
|
||||
ScrollView {
|
||||
VStack(spacing: 24) {
|
||||
// Progress bar
|
||||
ProgressView(value: Double(questionIndex + 1), total: Double(totalQuestions))
|
||||
.padding(.horizontal)
|
||||
|
||||
Text("Question \(questionIndex + 1) of \(totalQuestions)")
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
|
||||
// Question text
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
Text(question.text)
|
||||
.font(.title3.bold())
|
||||
|
||||
if let description = question.description {
|
||||
Text(description)
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
|
||||
if question.required {
|
||||
Text("Required")
|
||||
.font(.caption)
|
||||
.foregroundColor(.red)
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.padding(.horizontal)
|
||||
|
||||
// Question input based on type
|
||||
questionInput
|
||||
|
||||
Spacer()
|
||||
|
||||
// Action buttons
|
||||
VStack(spacing: 12) {
|
||||
Button(action: { Task { await onSubmit() } }) {
|
||||
Text(isLast ? "Complete" : "Next")
|
||||
.font(.headline)
|
||||
.foregroundColor(.white)
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding()
|
||||
.background(canSubmit ? Color.blue : Color.gray)
|
||||
.cornerRadius(12)
|
||||
}
|
||||
.disabled(!canSubmit)
|
||||
|
||||
if !question.required {
|
||||
Button(action: { Task { await onSkip() } }) {
|
||||
Text("Skip")
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(.horizontal)
|
||||
}
|
||||
.padding(.vertical)
|
||||
}
|
||||
.navigationTitle(survey.title)
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.toolbar {
|
||||
ToolbarItem(placement: .navigationBarTrailing) {
|
||||
Button("Dismiss") {
|
||||
onDismiss()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private var isLast: Bool {
|
||||
questionIndex == totalQuestions - 1
|
||||
}
|
||||
|
||||
private var canSubmit: Bool {
|
||||
if !question.required { return true }
|
||||
|
||||
switch question.type {
|
||||
case .singleChoice, .dropdown:
|
||||
return selectedOption != nil
|
||||
case .multipleChoice:
|
||||
return !selectedOptions.isEmpty
|
||||
case .rating, .scale, .nps:
|
||||
return ratingValue > 0
|
||||
case .textShort, .textLong:
|
||||
return !textAnswer.isEmpty
|
||||
case .ranking:
|
||||
return rankingOrder.count == (question.options?.count ?? 0)
|
||||
}
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var questionInput: some View {
|
||||
switch question.type {
|
||||
case .singleChoice, .dropdown:
|
||||
SingleChoiceView(
|
||||
options: question.options ?? [],
|
||||
selected: $selectedOption
|
||||
)
|
||||
case .multipleChoice:
|
||||
MultipleChoiceView(
|
||||
options: question.options ?? [],
|
||||
selected: $selectedOptions
|
||||
)
|
||||
case .rating, .scale, .nps:
|
||||
RatingView(
|
||||
minValue: question.minValue ?? (question.type == .nps ? 0 : 1),
|
||||
maxValue: question.maxValue ?? (question.type == .nps ? 10 : 5),
|
||||
rating: $ratingValue
|
||||
)
|
||||
case .textShort, .textLong:
|
||||
TextAnswerView(
|
||||
text: $textAnswer,
|
||||
isLong: question.type == .textLong,
|
||||
minLength: question.minLength,
|
||||
maxLength: question.maxLength
|
||||
)
|
||||
case .ranking:
|
||||
RankingView(
|
||||
options: question.options ?? [],
|
||||
order: $rankingOrder
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Question Type Views
|
||||
|
||||
@available(iOS 15.0, *)
|
||||
struct SingleChoiceView: View {
|
||||
let options: [BLQuestionOption]
|
||||
@Binding var selected: String?
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 8) {
|
||||
ForEach(options) { option in
|
||||
Button(action: { selected = option.id }) {
|
||||
HStack {
|
||||
Text(option.emoji ?? "")
|
||||
Text(option.text)
|
||||
.foregroundColor(.primary)
|
||||
Spacer()
|
||||
if selected == option.id {
|
||||
Image(systemName: "checkmark.circle.fill")
|
||||
.foregroundColor(.blue)
|
||||
} else {
|
||||
Image(systemName: "circle")
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
.padding()
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 8)
|
||||
.fill(selected == option.id ? Color.blue.opacity(0.1) : Color(.systemGray6))
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(.horizontal)
|
||||
}
|
||||
}
|
||||
|
||||
@available(iOS 15.0, *)
|
||||
struct MultipleChoiceView: View {
|
||||
let options: [BLQuestionOption]
|
||||
@Binding var selected: Set<String>
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 8) {
|
||||
ForEach(options) { option in
|
||||
Button(action: { toggleOption(option.id) }) {
|
||||
HStack {
|
||||
Text(option.emoji ?? "")
|
||||
Text(option.text)
|
||||
.foregroundColor(.primary)
|
||||
Spacer()
|
||||
if selected.contains(option.id) {
|
||||
Image(systemName: "checkmark.square.fill")
|
||||
.foregroundColor(.blue)
|
||||
} else {
|
||||
Image(systemName: "square")
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
.padding()
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 8)
|
||||
.fill(selected.contains(option.id) ? Color.blue.opacity(0.1) : Color(.systemGray6))
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(.horizontal)
|
||||
}
|
||||
|
||||
private func toggleOption(_ id: String) {
|
||||
if selected.contains(id) {
|
||||
selected.remove(id)
|
||||
} else {
|
||||
selected.insert(id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@available(iOS 15.0, *)
|
||||
struct RatingView: View {
|
||||
let minValue: Int
|
||||
let maxValue: Int
|
||||
@Binding var rating: Int
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 16) {
|
||||
HStack(spacing: 8) {
|
||||
ForEach(minValue...maxValue, id: \.self) { value in
|
||||
Button(action: { rating = value }) {
|
||||
Text("\(value)")
|
||||
.font(.headline)
|
||||
.frame(width: 44, height: 44)
|
||||
.background(
|
||||
Circle()
|
||||
.fill(rating == value ? Color.blue : Color(.systemGray5))
|
||||
)
|
||||
.foregroundColor(rating == value ? .white : .primary)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HStack {
|
||||
Text("Low")
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
Spacer()
|
||||
Text("High")
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
.padding(.horizontal, 32)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@available(iOS 15.0, *)
|
||||
struct TextAnswerView: View {
|
||||
@Binding var text: String
|
||||
let isLong: Bool
|
||||
let minLength: Int?
|
||||
let maxLength: Int?
|
||||
|
||||
var body: some View {
|
||||
VStack {
|
||||
if isLong {
|
||||
TextEditor(text: $text)
|
||||
.frame(minHeight: 120)
|
||||
.padding(8)
|
||||
.background(Color(.systemGray6))
|
||||
.cornerRadius(8)
|
||||
} else {
|
||||
TextField("Your answer", text: $text)
|
||||
.padding()
|
||||
.background(Color(.systemGray6))
|
||||
.cornerRadius(8)
|
||||
}
|
||||
|
||||
if let max = maxLength {
|
||||
Text("\(text.count)/\(max)")
|
||||
.font(.caption)
|
||||
.foregroundColor(text.count > max ? .red : .secondary)
|
||||
}
|
||||
}
|
||||
.padding(.horizontal)
|
||||
}
|
||||
}
|
||||
|
||||
@available(iOS 15.0, *)
|
||||
struct RankingView: View {
|
||||
let options: [BLQuestionOption]
|
||||
@Binding var order: [String]
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 8) {
|
||||
ForEach(options) { option in
|
||||
HStack {
|
||||
Text("\(order.firstIndex(of: option.id).map { "\($0 + 1)" } ?? "-")")
|
||||
.font(.caption)
|
||||
.frame(width: 24, height: 24)
|
||||
.background(
|
||||
Circle()
|
||||
.fill(order.contains(option.id) ? Color.blue : Color(.systemGray5))
|
||||
)
|
||||
.foregroundColor(order.contains(option.id) ? .white : .secondary)
|
||||
|
||||
Text(option.text)
|
||||
|
||||
Spacer()
|
||||
|
||||
HStack(spacing: 4) {
|
||||
Button(action: { moveUp(option.id) }) {
|
||||
Image(systemName: "arrow.up")
|
||||
}
|
||||
.disabled(!canMoveUp(option.id))
|
||||
|
||||
Button(action: { moveDown(option.id) }) {
|
||||
Image(systemName: "arrow.down")
|
||||
}
|
||||
.disabled(!canMoveDown(option.id))
|
||||
|
||||
Button(action: { addToRanking(option.id) }) {
|
||||
Image(systemName: "plus")
|
||||
}
|
||||
.disabled(order.contains(option.id))
|
||||
}
|
||||
}
|
||||
.padding()
|
||||
.background(Color(.systemGray6))
|
||||
.cornerRadius(8)
|
||||
}
|
||||
}
|
||||
.padding(.horizontal)
|
||||
}
|
||||
|
||||
private func canMoveUp(_ id: String) -> Bool {
|
||||
guard let index = order.firstIndex(of: id), index > 0 else { return false }
|
||||
return true
|
||||
}
|
||||
|
||||
private func canMoveDown(_ id: String) -> Bool {
|
||||
guard let index = order.firstIndex(of: id), index < order.count - 1 else { return false }
|
||||
return true
|
||||
}
|
||||
|
||||
private func moveUp(_ id: String) {
|
||||
guard let index = order.firstIndex(of: id), index > 0 else { return }
|
||||
order.swapAt(index, index - 1)
|
||||
}
|
||||
|
||||
private func moveDown(_ id: String) {
|
||||
guard let index = order.firstIndex(of: id), index < order.count - 1 else { return }
|
||||
order.swapAt(index, index + 1)
|
||||
}
|
||||
|
||||
private func addToRanking(_ id: String) {
|
||||
if !order.contains(id) {
|
||||
order.append(id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@available(iOS 15.0, *)
|
||||
struct CompletionView: View {
|
||||
let survey: BLActiveSurvey?
|
||||
let onDismiss: () -> Void
|
||||
|
||||
var body: some View {
|
||||
NavigationView {
|
||||
VStack(spacing: 24) {
|
||||
Image(systemName: "checkmark.circle.fill")
|
||||
.font(.system(size: 64))
|
||||
.foregroundColor(.green)
|
||||
|
||||
Text("Thank You!")
|
||||
.font(.title.bold())
|
||||
|
||||
Text("Your feedback helps us improve.")
|
||||
.font(.body)
|
||||
.foregroundColor(.secondary)
|
||||
.multilineTextAlignment(.center)
|
||||
|
||||
if let incentive = survey?.incentive {
|
||||
HStack {
|
||||
Image(systemName: "gift.fill")
|
||||
.foregroundColor(.green)
|
||||
Text("You've earned \(incentive.amount) \(incentive.type == .proDays ? "Pro Days" : "Credits")!")
|
||||
.font(.headline)
|
||||
.foregroundColor(.green)
|
||||
}
|
||||
.padding()
|
||||
.background(Color.green.opacity(0.1))
|
||||
.cornerRadius(12)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
Button(action: onDismiss) {
|
||||
Text("Close")
|
||||
.font(.headline)
|
||||
.foregroundColor(.white)
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding()
|
||||
.background(Color.blue)
|
||||
.cornerRadius(12)
|
||||
}
|
||||
.padding(.horizontal)
|
||||
}
|
||||
.padding()
|
||||
.navigationBarHidden(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user