diff --git a/composeApp/src/commonMain/composeResources/drawable/carftsman.png b/composeApp/src/commonMain/composeResources/drawable/carftsman.png new file mode 100644 index 0000000..98d3de6 Binary files /dev/null and b/composeApp/src/commonMain/composeResources/drawable/carftsman.png differ diff --git a/composeApp/src/commonMain/composeResources/drawable/customer.png b/composeApp/src/commonMain/composeResources/drawable/customer.png new file mode 100644 index 0000000..3f6d9f4 Binary files /dev/null and b/composeApp/src/commonMain/composeResources/drawable/customer.png differ diff --git a/composeApp/src/commonMain/composeResources/values-ar/string.xml b/composeApp/src/commonMain/composeResources/values-ar/string.xml index 4659eed..dd94369 100644 --- a/composeApp/src/commonMain/composeResources/values-ar/string.xml +++ b/composeApp/src/commonMain/composeResources/values-ar/string.xml @@ -24,4 +24,12 @@ التالى تخطى + + كيف ترغب في استخدام صُنع؟ + يمكنك تبديل الأدوار في أي وقت من ملفك الشخصي. + عميل + أحتاج إلى مساعدة بخدمة + حرفي + أقدم خدمات + \ No newline at end of file diff --git a/composeApp/src/commonMain/composeResources/values/string.xml b/composeApp/src/commonMain/composeResources/values/string.xml index afd1afe..e345422 100644 --- a/composeApp/src/commonMain/composeResources/values/string.xml +++ b/composeApp/src/commonMain/composeResources/values/string.xml @@ -33,4 +33,12 @@ What services do you offer? Choose your specialties to get relevant job requests. You can change this later. + + How would you like to use San3a? + You can switch roles anytime from your profile. + Customer + I need help with a service + Craftsman + I offer services + \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/org/example/project/presentation/designsystem/components/CraftsmanCard.kt b/composeApp/src/commonMain/kotlin/org/example/project/presentation/designsystem/components/CraftsmanCard.kt index c0a15b6..9839fbe 100644 --- a/composeApp/src/commonMain/kotlin/org/example/project/presentation/designsystem/components/CraftsmanCard.kt +++ b/composeApp/src/commonMain/kotlin/org/example/project/presentation/designsystem/components/CraftsmanCard.kt @@ -1,5 +1,4 @@ -package org.example.project.presentation.designsystem.components - +package org.example.project.designSystem.components import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement @@ -33,16 +32,16 @@ import androidx.compose.ui.unit.dp import crafto.composeapp.generated.resources.Res import crafto.composeapp.generated.resources.check_mark import crafto.composeapp.generated.resources.clipboard_text +import crafto.composeapp.generated.resources.customer import crafto.composeapp.generated.resources.dialog -import crafto.composeapp.generated.resources.selection_card_img import crafto.composeapp.generated.resources.star import crafto.composeapp.generated.resources.star_1 import crafto.composeapp.generated.resources.user_rounded import crafto.composeapp.generated.resources.verified_check_1 +import org.example.project.presentation.designsystem.components.DefaultButton import org.example.project.presentation.designsystem.textstyle.AppTheme import org.jetbrains.compose.resources.painterResource import org.jetbrains.compose.ui.tooling.preview.Preview - @Composable fun CraftsmanCard( modifier: Modifier = Modifier, @@ -57,31 +56,25 @@ fun CraftsmanCard( onButtonClick: () -> Unit = {} ) { val craftsmanIcon = craftsmanImage ?: painterResource(Res.drawable.user_rounded) - val (textStyle, textColor) = if (craftsmanImage != null) AppTheme.textStyle.body.medium to AppTheme.craftoColors.shade.primary else AppTheme.textStyle.body.smallMedium to AppTheme.craftoColors.shade.secondary - val (secondaryIcon, secondaryIconTint) = if (showOffers) painterResource(Res.drawable.clipboard_text) to AppTheme.craftoColors.brand.primary else painterResource(Res.drawable.star_1) to AppTheme.craftoColors.additional.primaryYellow - val (secondaryText, secondaryTextColor) = if (showOffers) "$numberOfOffers Offers" to AppTheme.craftoColors.brand.primary else "$rating Rating" to AppTheme.craftoColors.shade.secondary - - Row( modifier = modifier.fillMaxWidth().background(AppTheme.craftoColors.background.card), horizontalArrangement = Arrangement.spacedBy(12.dp) ) { - if (craftsmanImage == null) { DashedCircle( modifier = Modifier.clip(RoundedCornerShape(AppTheme.craftoRadius.full)) @@ -94,7 +87,7 @@ fun CraftsmanCard( CircleAvatar( modifier = Modifier.clip(RoundedCornerShape(AppTheme.craftoRadius.full)) .size(40.dp), - image = painterResource(Res.drawable.selection_card_img) + image = painterResource(Res.drawable.customer) ) } @@ -117,7 +110,6 @@ fun CraftsmanCard( modifier = Modifier.size(16.dp), tint = secondaryIconTint ) - Text( text = secondaryText, color = secondaryTextColor, @@ -125,9 +117,7 @@ fun CraftsmanCard( ) } } - Spacer(modifier = Modifier.weight(1f)) - DefaultButton( text = buttonText, enabled = true, @@ -138,7 +128,6 @@ fun CraftsmanCard( ) } } - @Composable private fun CircleAvatar( image: Painter, @@ -157,14 +146,12 @@ private fun CircleAvatar( contentScale = ContentScale.Crop, ) } - Icon( painter = painterResource(Res.drawable.verified_check_1), contentDescription = "Verified", modifier = Modifier.size(16.dp).align(Alignment.BottomCenter), tint = AppTheme.craftoColors.additional.primarySuccess ) - Icon( painter = painterResource(Res.drawable.check_mark), contentDescription = "check mark", @@ -173,7 +160,6 @@ private fun CircleAvatar( ) } } - @Composable private fun DashedCircle( icon: Painter, @@ -202,8 +188,6 @@ private fun DashedCircle( ) } } - - @Preview @Composable private fun CraftsmanCardPreview() { @@ -217,7 +201,7 @@ private fun CraftsmanCardPreview() { craftsmanName = "Hend", rating = 4.5, showOffers = false, - craftsmanImage = painterResource(Res.drawable.selection_card_img), + craftsmanImage = painterResource(Res.drawable.customer), buttonText = "Rate", buttonIcon = painterResource(Res.drawable.star), buttonColors = ButtonDefaults.buttonColors( @@ -225,7 +209,6 @@ private fun CraftsmanCardPreview() { contentColor = AppTheme.craftoColors.button.onSecondary ) ) - CraftsmanCard( modifier = Modifier.padding(16.dp), craftsmanName = "Craftsman Not Chosen", @@ -242,7 +225,7 @@ private fun CraftsmanCardPreview() { craftsmanName = "Hend", rating = 4.5, showOffers = false, - craftsmanImage = painterResource(Res.drawable.selection_card_img), + craftsmanImage = painterResource(Res.drawable.customer), buttonText = "Chat", buttonIcon = painterResource(Res.drawable.dialog), buttonColors = ButtonDefaults.buttonColors( diff --git a/composeApp/src/commonMain/kotlin/org/example/project/presentation/designsystem/components/SelectionCard.kt b/composeApp/src/commonMain/kotlin/org/example/project/presentation/designsystem/components/SelectionCard.kt index a1c88ac..4135911 100644 --- a/composeApp/src/commonMain/kotlin/org/example/project/presentation/designsystem/components/SelectionCard.kt +++ b/composeApp/src/commonMain/kotlin/org/example/project/presentation/designsystem/components/SelectionCard.kt @@ -1,8 +1,9 @@ -package org.example.project.presentation.designsystem.components - +package org.example.project.designSystem.components import androidx.compose.animation.animateColorAsState import androidx.compose.foundation.Image import androidx.compose.foundation.border +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.Card @@ -14,13 +15,13 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.painter.Painter +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import crafto.composeapp.generated.resources.Res -import crafto.composeapp.generated.resources.selection_card_img +import crafto.composeapp.generated.resources.customer import org.example.project.presentation.designsystem.textstyle.AppTheme import org.jetbrains.compose.resources.painterResource import org.jetbrains.compose.ui.tooling.preview.Preview - @Composable fun SelectionCard( img: Painter, @@ -42,32 +43,37 @@ fun SelectionCard( Card( onClick = onCardClick, - modifier.border(1.dp, strokeColor, RoundedCornerShape(AppTheme.craftoRadius.xl)), + modifier = modifier.border(1.dp, strokeColor, RoundedCornerShape(AppTheme.craftoRadius.xl)), shape = RoundedCornerShape(AppTheme.craftoRadius.xl), colors = CardDefaults.cardColors( background ), ) { - Image( - painter = img, - contentDescription = null, - modifier = Modifier.padding(12.dp) - ) - - Text( - text = title, - style = AppTheme.textStyle.body.mediumSemiBold, - modifier = Modifier.padding(8.dp).align(Alignment.CenterHorizontally), - color = titleColor - - ) - Text( - text = caption, - style = AppTheme.textStyle.body.smallMedium, - color = AppTheme.craftoColors.shade.secondary, - modifier = Modifier.padding(8.dp).align(Alignment.CenterHorizontally) - ) + Column( + modifier = Modifier.fillMaxWidth(), + horizontalAlignment = Alignment.CenterHorizontally + ) { + Image( + painter = img, + contentDescription = null, + modifier = Modifier.padding(12.dp) + ) + Text( + text = title, + style = AppTheme.textStyle.body.mediumSemiBold, + modifier = Modifier.padding(8.dp), + color = titleColor, + textAlign = TextAlign.Center + ) + Text( + text = caption, + style = AppTheme.textStyle.body.smallMedium, + color = AppTheme.craftoColors.shade.secondary, + modifier = Modifier.padding(8.dp), + textAlign = TextAlign.Center + ) + } } } @@ -75,7 +81,7 @@ fun SelectionCard( @Composable private fun SelectionCardPreview() { SelectionCard( - img = painterResource(Res.drawable.selection_card_img), + img = painterResource(Res.drawable.customer), title = "Title", caption = "Caption", isSelected = true, diff --git a/composeApp/src/commonMain/kotlin/org/example/project/presentation/screens/setupScreens/UserTypeSelectionScreen.kt b/composeApp/src/commonMain/kotlin/org/example/project/presentation/screens/setupScreens/UserTypeSelectionScreen.kt new file mode 100644 index 0000000..47d17af --- /dev/null +++ b/composeApp/src/commonMain/kotlin/org/example/project/presentation/screens/setupScreens/UserTypeSelectionScreen.kt @@ -0,0 +1,128 @@ +package org.example.project.presentation.screens.setupScreens + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.IntrinsicSize +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.WindowInsets +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.safeDrawing +import androidx.compose.foundation.layout.windowInsetsPadding +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import crafto.composeapp.generated.resources.Res +import crafto.composeapp.generated.resources.carftsman +import crafto.composeapp.generated.resources.craftsman +import crafto.composeapp.generated.resources.customer +import crafto.composeapp.generated.resources.how_would_you_like_to_use_san3a +import crafto.composeapp.generated.resources.i_need_help_with_a_service +import crafto.composeapp.generated.resources.i_offer_services +import crafto.composeapp.generated.resources.next +import crafto.composeapp.generated.resources.you_can_switch_roles_anytime +import org.example.project.designSystem.components.SelectionCard +import org.example.project.presentation.designsystem.components.ButtonState +import org.example.project.presentation.designsystem.components.PrimaryButton +import org.example.project.presentation.designsystem.components.ProgressIndicator +import org.example.project.presentation.designsystem.textstyle.AppTheme +import org.jetbrains.compose.resources.painterResource +import org.jetbrains.compose.resources.stringResource +import org.jetbrains.compose.ui.tooling.preview.Preview + +@Composable +fun UserTypeSelectionScreen( + onNextClick: () -> Unit +) { + var selectedRole by remember { mutableStateOf("") } + + Column( + modifier = Modifier + .fillMaxSize() + .windowInsetsPadding(WindowInsets.safeDrawing) + .background(AppTheme.craftoColors.background.screen) + .padding(horizontal = 16.dp, vertical = 16.dp), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.spacedBy(32.dp) + ) { + ProgressIndicator( + currentPage = 1, + totalPage = 4, + modifier = Modifier + .fillMaxWidth(0.75f) + ) + Column( + modifier = Modifier.weight(1f), + verticalArrangement = Arrangement.Bottom + ) { + Text( + text = stringResource(Res.string.how_would_you_like_to_use_san3a), + style = AppTheme.textStyle.display, + color = AppTheme.craftoColors.shade.primary + ) + + Text( + text = stringResource(Res.string.you_can_switch_roles_anytime), + style = AppTheme.textStyle.body.largeRegular, + color = AppTheme.craftoColors.shade.secondary + ) + } + Row( + modifier = Modifier + .fillMaxWidth() + .height(IntrinsicSize.Max) + ) { + SelectionCard( + img = painterResource(Res.drawable.customer), + title = stringResource(Res.string.customer), + caption = stringResource(Res.string.i_need_help_with_a_service), + isSelected = selectedRole == "Customer", + onCardClick = { selectedRole = "Customer" }, + modifier = Modifier + .weight(1f) + .padding(end = 8.dp) + .fillMaxHeight() + ) + + SelectionCard( + img = painterResource(Res.drawable.carftsman), + title = stringResource(Res.string.craftsman), + caption = stringResource(Res.string.i_offer_services), + isSelected = selectedRole == "Craftsman", + onCardClick = { selectedRole = "Craftsman" }, + modifier = Modifier + .weight(1f) + .padding(start = 8.dp) + .fillMaxHeight() + ) + } + + PrimaryButton( + text = stringResource(Res.string.next), + enabled = true, + onClick = onNextClick, + buttonState = ButtonState.Enable, + modifier = Modifier.fillMaxWidth(), + contentPadding = PaddingValues(horizontal = 24.dp, vertical = 14.dp) + ) + } +} + +@Preview +@Composable +private fun UserTypeSelectionScreenPreview() { + AppTheme(isDarkTheme = false) { + UserTypeSelectionScreen(onNextClick = {}) + } +} \ No newline at end of file