feat: Implement notice and file types banners for attire upload and enhance incomplete profile messaging

This commit is contained in:
Achintha Isuru
2026-02-28 22:42:04 -05:00
parent 1ab5ba2e6f
commit ce095924bc
8 changed files with 145 additions and 127 deletions

View File

@@ -10,6 +10,7 @@ import 'package:krow_domain/krow_domain.dart';
import 'package:staff_attire/src/presentation/blocs/attire_capture/attire_capture_cubit.dart';
import 'package:staff_attire/src/presentation/blocs/attire_capture/attire_capture_state.dart';
import '../widgets/attire_capture_page/file_types_banner.dart';
import '../widgets/attire_capture_page/footer_section.dart';
import '../widgets/attire_capture_page/image_preview_section.dart';
import '../widgets/attire_capture_page/info_section.dart';
@@ -286,7 +287,7 @@ class _AttireCapturePageState extends State<AttireCapturePage> {
padding: const EdgeInsets.all(UiConstants.space5),
child: Column(
children: <Widget>[
_FileTypesBanner(
FileTypesBanner(
message: t
.staff_profile_attire
.upload_file_types_banner,
@@ -335,35 +336,3 @@ class _AttireCapturePageState extends State<AttireCapturePage> {
);
}
}
/// Banner displaying accepted file types and size limit for attire upload.
class _FileTypesBanner extends StatelessWidget {
const _FileTypesBanner({required this.message});
final String message;
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(
horizontal: UiConstants.space4,
vertical: UiConstants.space3,
),
decoration: BoxDecoration(
color: UiColors.primary.withAlpha(20),
borderRadius: BorderRadius.circular(UiConstants.radiusBase),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Icon(UiIcons.info, size: 20, color: UiColors.primary),
const SizedBox(width: UiConstants.space3),
Expanded(
child: Text(message, style: UiTypography.body2r.textSecondary),
),
],
),
);
}
}

View File

@@ -0,0 +1,36 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
/// Banner displaying accepted file types and size limit for attire upload.
class FileTypesBanner extends StatelessWidget {
/// Creates a [FileTypesBanner].
const FileTypesBanner({super.key, required this.message});
/// The message to display in the banner.
final String message;
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(
horizontal: UiConstants.space4,
vertical: UiConstants.space3,
),
decoration: BoxDecoration(
color: UiColors.primary.withAlpha(20),
borderRadius: BorderRadius.circular(UiConstants.radiusBase),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Icon(UiIcons.info, size: 20, color: UiColors.primary),
const SizedBox(width: UiConstants.space3),
Expanded(
child: Text(message, style: UiTypography.body2r.textSecondary),
),
],
),
);
}
}

View File

@@ -7,35 +7,10 @@ class AttireInfoCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(UiConstants.space4),
decoration: BoxDecoration(
color: UiColors.primary.withValues(alpha: 0.08),
borderRadius: UiConstants.radiusLg,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Icon(UiIcons.shirt, color: UiColors.primary, size: 24),
const SizedBox(width: UiConstants.space3),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
t.staff_profile_attire.info_card.title,
style: UiTypography.body2m.textPrimary,
),
const SizedBox(height: 2),
Text(
t.staff_profile_attire.info_card.description,
style: UiTypography.body2r.textSecondary,
),
],
),
),
],
),
return UiNoticeBanner(
icon: UiIcons.shirt,
title: t.staff_profile_attire.info_card.title,
description: t.staff_profile_attire.info_card.description,
);
}
}

View File

@@ -1,14 +1,13 @@
import 'package:core_localization/core_localization.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'package:krow_core/core.dart';
import 'package:geolocator/geolocator.dart';
import 'package:krow_domain/krow_domain.dart';
import 'package:core_localization/core_localization.dart';
import '../../blocs/shifts/shifts_bloc.dart';
import '../my_shift_card.dart';
import '../shared/empty_state_view.dart';
import 'package:geolocator/geolocator.dart';
class FindShiftsTab extends StatefulWidget {
final List<Shift> availableJobs;
@@ -316,11 +315,21 @@ class _FindShiftsTabState extends State<FindShiftsTab> {
children: [
// Incomplete profile banner
if (!widget.profileComplete) ...[
_IncompleteProfileBanner(
title: context.t.staff_shifts.find_shifts.incomplete_profile_banner_title,
message: context.t.staff_shifts.find_shifts.incomplete_profile_banner_message,
ctaText: context.t.staff_shifts.find_shifts.incomplete_profile_cta,
onCtaPressed: () => Modular.to.toProfile(),
Container(
padding: const EdgeInsets.all(UiConstants.space4),
child: UiNoticeBanner(
icon: UiIcons.sparkles,
title: context
.t
.staff_shifts
.find_shifts
.incomplete_profile_banner_title,
description: context
.t
.staff_shifts
.find_shifts
.incomplete_profile_banner_message,
),
),
],
// Search and Filters
@@ -462,9 +471,7 @@ class _FindShiftsTabState extends State<FindShiftsTab> {
? () {
BlocProvider.of<ShiftsBloc>(
context,
).add(
AcceptShiftEvent(shift.id),
);
).add(AcceptShiftEvent(shift.id));
UiSnackbar.show(
context,
message: context
@@ -488,54 +495,3 @@ class _FindShiftsTabState extends State<FindShiftsTab> {
);
}
}
/// Banner shown when the worker's profile is incomplete.
class _IncompleteProfileBanner extends StatelessWidget {
const _IncompleteProfileBanner({
required this.title,
required this.message,
required this.ctaText,
required this.onCtaPressed,
});
final String title;
final String message;
final String ctaText;
final VoidCallback onCtaPressed;
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
margin: const EdgeInsets.all(UiConstants.space5),
padding: const EdgeInsets.all(UiConstants.space4),
decoration: BoxDecoration(
color: UiColors.tagPending,
borderRadius: BorderRadius.circular(UiConstants.radiusBase),
border: Border.all(
color: UiColors.textWarning.withValues(alpha: 0.5),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: UiTypography.body2b.textPrimary,
),
const SizedBox(height: UiConstants.space2),
Text(
message,
style: UiTypography.body3r.textSecondary,
),
const SizedBox(height: UiConstants.space4),
UiButton.primary(
text: ctaText,
onPressed: onCtaPressed,
size: UiButtonSize.small,
),
],
),
);
}
}