Skip to content

Commit 938b773

Browse files
authored
Merge pull request #6797 from woocommerce/issue/6587-wcship-installation-initial-screen
Shipping Labels Onboarding: Pre-install screen
2 parents 6f1ceb5 + 00fe3b6 commit 938b773

File tree

11 files changed

+440
-137
lines changed

11 files changed

+440
-137
lines changed

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/details/OrderDetailFragment.kt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ import com.woocommerce.android.ui.orders.shippinglabels.ShippingLabelRefundFragm
6464
import com.woocommerce.android.ui.orders.simplepayments.TakePaymentViewModel
6565
import com.woocommerce.android.ui.orders.tracking.AddOrderShipmentTrackingFragment
6666
import com.woocommerce.android.ui.refunds.RefundSummaryFragment
67-
import com.woocommerce.android.ui.shipping.InstallWcShippingFlowViewModel
67+
import com.woocommerce.android.ui.shipping.InstallWCShippingViewModel
6868
import com.woocommerce.android.util.CurrencyFormatter
6969
import com.woocommerce.android.util.DateUtils
7070
import com.woocommerce.android.util.FeatureFlag
@@ -265,7 +265,7 @@ class OrderDetailFragment : BaseFragment(R.layout.fragment_order_detail), OrderP
265265
is TakePaymentViewModel.SharePaymentUrl -> {
266266
sharePaymentUrl(event.storeName, event.paymentUrl)
267267
}
268-
is InstallWcShippingFlowViewModel.InstallWcShipping -> navigateToInstallWcShippingFlow()
268+
is InstallWCShippingViewModel.InstallWcShipping -> navigateToInstallWcShippingFlow()
269269
else -> event.isHandled = false
270270
}
271271
}

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/details/OrderDetailViewModel.kt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ import com.woocommerce.android.ui.orders.OrderNavigationTarget.ViewPrintingInstr
5959
import com.woocommerce.android.ui.orders.OrderNavigationTarget.ViewRefundedProducts
6060
import com.woocommerce.android.ui.orders.simplepayments.TakePaymentViewModel
6161
import com.woocommerce.android.ui.products.addons.AddonRepository
62-
import com.woocommerce.android.ui.shipping.InstallWcShippingFlowViewModel
62+
import com.woocommerce.android.ui.shipping.InstallWCShippingViewModel
6363
import com.woocommerce.android.util.CoroutineDispatchers
6464
import com.woocommerce.android.util.WooLog
6565
import com.woocommerce.android.util.WooLog.T
@@ -264,7 +264,7 @@ final class OrderDetailViewModel @Inject constructor(
264264
}
265265

266266
fun onGetWcShippingClicked() {
267-
triggerEvent(InstallWcShippingFlowViewModel.InstallWcShipping)
267+
triggerEvent(InstallWCShippingViewModel.InstallWcShipping)
268268
}
269269

270270
/**
Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
package com.woocommerce.android.ui.shipping
2+
3+
import androidx.compose.animation.core.CubicBezierEasing
4+
import androidx.compose.animation.core.Transition
5+
import androidx.compose.animation.core.animateInt
6+
import androidx.compose.animation.core.tween
7+
import androidx.compose.foundation.border
8+
import androidx.compose.foundation.clickable
9+
import androidx.compose.foundation.layout.Arrangement
10+
import androidx.compose.foundation.layout.Box
11+
import androidx.compose.foundation.layout.Column
12+
import androidx.compose.foundation.layout.ColumnScope
13+
import androidx.compose.foundation.layout.Row
14+
import androidx.compose.foundation.layout.Spacer
15+
import androidx.compose.foundation.layout.fillMaxSize
16+
import androidx.compose.foundation.layout.fillMaxWidth
17+
import androidx.compose.foundation.layout.height
18+
import androidx.compose.foundation.layout.offset
19+
import androidx.compose.foundation.layout.padding
20+
import androidx.compose.foundation.layout.size
21+
import androidx.compose.foundation.rememberScrollState
22+
import androidx.compose.foundation.shape.CircleShape
23+
import androidx.compose.foundation.verticalScroll
24+
import androidx.compose.material.Icon
25+
import androidx.compose.material.MaterialTheme
26+
import androidx.compose.material.Text
27+
import androidx.compose.material.icons.Icons
28+
import androidx.compose.material.icons.outlined.Info
29+
import androidx.compose.runtime.Composable
30+
import androidx.compose.runtime.getValue
31+
import androidx.compose.runtime.mutableStateOf
32+
import androidx.compose.runtime.remember
33+
import androidx.compose.ui.Alignment
34+
import androidx.compose.ui.Modifier
35+
import androidx.compose.ui.draw.clip
36+
import androidx.compose.ui.res.colorResource
37+
import androidx.compose.ui.res.dimensionResource
38+
import androidx.compose.ui.res.painterResource
39+
import androidx.compose.ui.res.stringResource
40+
import androidx.compose.ui.text.font.FontWeight
41+
import androidx.compose.ui.tooling.preview.Preview
42+
import androidx.compose.ui.unit.Dp
43+
import androidx.compose.ui.unit.dp
44+
import com.woocommerce.android.R
45+
import com.woocommerce.android.ui.compose.component.WCColoredButton
46+
import com.woocommerce.android.ui.compose.component.WCTextButton
47+
import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
48+
import com.woocommerce.android.ui.shipping.InstallWCShippingViewModel.ViewState.InstallationState
49+
import com.woocommerce.android.ui.shipping.InstallWCShippingViewModel.ViewState.InstallationState.PreInstallation
50+
51+
@Composable
52+
fun InstallWCShippingFlow(viewState: InstallationState, transition: Transition<Boolean>? = null) {
53+
when (viewState) {
54+
is PreInstallation -> PreInstallationContent(viewState, transition)
55+
}
56+
}
57+
58+
@Composable
59+
private fun PreInstallationContent(viewState: PreInstallation, transition: Transition<Boolean>? = null) {
60+
val offset by transition?.animateInt(
61+
transitionSpec = {
62+
tween(
63+
durationMillis = 500,
64+
delayMillis = 500,
65+
// Ensure a bit of elasticity at the end of the animation
66+
easing = CubicBezierEasing(0.7f, 0.6f, 0.74f, 1.3f)
67+
)
68+
},
69+
label = "offset"
70+
) {
71+
if (it) 0 else 120
72+
} ?: remember { mutableStateOf(0) }
73+
74+
Column(
75+
modifier = Modifier
76+
.fillMaxSize()
77+
.padding(
78+
horizontal = dimensionResource(id = R.dimen.major_100),
79+
vertical = dimensionResource(id = R.dimen.major_150)
80+
)
81+
) {
82+
Column(
83+
verticalArrangement = Arrangement.Center,
84+
modifier = Modifier
85+
.weight(1f)
86+
.verticalScroll(rememberScrollState())
87+
.offset(y = -offset.dp)
88+
) {
89+
WCTextButton(onClick = viewState.onCancelClick) {
90+
Text(text = stringResource(id = R.string.cancel))
91+
}
92+
SpacerWithMinHeight(1f, dimensionResource(id = R.dimen.major_100))
93+
Box(
94+
modifier = Modifier
95+
.clip(CircleShape)
96+
.border(
97+
width = dimensionResource(id = R.dimen.major_75),
98+
color = colorResource(id = R.color.woo_purple_20),
99+
shape = CircleShape
100+
)
101+
.size(dimensionResource(id = R.dimen.image_major_120))
102+
) {
103+
Icon(
104+
painter = painterResource(id = R.drawable.ic_arrow_forward_rounded),
105+
contentDescription = null,
106+
tint = colorResource(id = R.color.woo_purple_50),
107+
modifier = Modifier
108+
.align(Alignment.Center)
109+
.size(dimensionResource(id = R.dimen.image_major_64))
110+
)
111+
}
112+
Spacer(modifier = Modifier.height(dimensionResource(id = R.dimen.major_150)))
113+
Text(
114+
text = stringResource(id = R.string.install_wc_shipping_preinstall_title),
115+
style = MaterialTheme.typography.h4,
116+
fontWeight = FontWeight.Bold
117+
)
118+
Text(
119+
text = stringResource(id = viewState.extensionsName),
120+
style = MaterialTheme.typography.h4,
121+
fontWeight = FontWeight.Bold,
122+
color = colorResource(id = R.color.woo_purple_50)
123+
)
124+
Spacer(modifier = Modifier.height(dimensionResource(id = R.dimen.major_150)))
125+
Text(
126+
text = viewState.siteName,
127+
style = MaterialTheme.typography.h4
128+
)
129+
SpacerWithMinHeight(0.75f, dimensionResource(id = R.dimen.major_100))
130+
Row(
131+
horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.minor_100)),
132+
modifier = Modifier
133+
.clickable(onClick = viewState.onInfoClick)
134+
) {
135+
Icon(
136+
imageVector = Icons.Outlined.Info,
137+
contentDescription = null,
138+
tint = colorResource(id = R.color.link_text)
139+
)
140+
Text(
141+
style = MaterialTheme.typography.subtitle1,
142+
color = colorResource(id = R.color.link_text),
143+
text = stringResource(id = R.string.install_wc_shipping_installation_info),
144+
)
145+
}
146+
SpacerWithMinHeight(0.75f, dimensionResource(id = R.dimen.major_100))
147+
}
148+
WCColoredButton(
149+
onClick = viewState.onProceedClick,
150+
modifier = Modifier
151+
.fillMaxWidth()
152+
.offset(y = offset.dp)
153+
) {
154+
Text(text = stringResource(id = R.string.install_wc_shipping_proceed_button))
155+
}
156+
}
157+
}
158+
159+
@Composable
160+
private fun ColumnScope.SpacerWithMinHeight(weight: Float, minHeight: Dp) {
161+
Spacer(modifier = Modifier.height(minHeight))
162+
Spacer(modifier = Modifier.weight(weight))
163+
}
164+
165+
@Preview
166+
@Composable
167+
private fun PreInstallationPreview() {
168+
WooThemeWithBackground {
169+
PreInstallationContent(
170+
viewState = PreInstallation(
171+
extensionsName = R.string.install_wc_shipping_extension_name,
172+
siteName = "Site",
173+
onCancelClick = {},
174+
onProceedClick = {},
175+
onInfoClick = {}
176+
)
177+
)
178+
}
179+
}
Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,17 @@ import androidx.navigation.fragment.findNavController
1111
import com.woocommerce.android.ui.base.BaseFragment
1212
import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
1313
import com.woocommerce.android.ui.main.AppBarStatus
14-
import com.woocommerce.android.ui.shipping.InstallWcShippingFlowViewModel.InstallWcShippingFlowEvent.ExitInstallFlowEvent
15-
import com.woocommerce.android.ui.shipping.InstallWcShippingFlowViewModel.InstallWcShippingFlowEvent.OpenLinkEvent
14+
import com.woocommerce.android.ui.shipping.InstallWCShippingViewModel.OpenLinkEvent
1615
import com.woocommerce.android.util.ChromeCustomTabUtils
16+
import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.Exit
1717
import dagger.hilt.android.AndroidEntryPoint
1818

1919
@AndroidEntryPoint
20-
class InstallWcShippingFlowFragment : BaseFragment() {
20+
class InstallWCShippingFragment : BaseFragment() {
2121
override val activityAppBarStatus: AppBarStatus
2222
get() = AppBarStatus.Hidden
2323

24-
private val viewModel: InstallWcShippingFlowViewModel by viewModels()
24+
private val viewModel: InstallWCShippingViewModel by viewModels()
2525

2626
override fun onCreateView(
2727
inflater: LayoutInflater,
@@ -34,7 +34,7 @@ class InstallWcShippingFlowFragment : BaseFragment() {
3434
setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
3535
setContent {
3636
WooThemeWithBackground {
37-
InstallWcShippingOnboardingScreen(viewModel)
37+
InstallWCShippingScreen(viewModel)
3838
}
3939
}
4040
}
@@ -45,7 +45,7 @@ class InstallWcShippingFlowFragment : BaseFragment() {
4545

4646
viewModel.event.observe(viewLifecycleOwner) { event ->
4747
when (event) {
48-
is ExitInstallFlowEvent -> findNavController().navigateUp()
48+
is Exit -> findNavController().navigateUp()
4949
is OpenLinkEvent -> openInBrowser(event.url)
5050
}
5151
}

0 commit comments

Comments
 (0)