|
|
import 'dart:ui' as ui;
|
|
|
import 'package:easy_localization/easy_localization.dart';
|
|
|
import 'package:flutter/material.dart';
|
|
|
import 'package:flutter_html/flutter_html.dart';
|
|
|
import 'package:flutter_svg/flutter_svg.dart';
|
|
|
import 'package:mohem_flutter_app/api/offers_and_discounts_api_client.dart';
|
|
|
import 'package:mohem_flutter_app/app_state/app_state.dart';
|
|
|
import 'package:mohem_flutter_app/classes/colors.dart';
|
|
|
import 'package:mohem_flutter_app/classes/consts.dart';
|
|
|
import 'package:mohem_flutter_app/classes/utils.dart';
|
|
|
import 'package:mohem_flutter_app/config/routes.dart';
|
|
|
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
|
|
|
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
|
|
|
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
|
|
|
import 'package:mohem_flutter_app/models/offers_and_discounts/wala_plus_retailer_model.dart';
|
|
|
import 'package:mohem_flutter_app/widgets/app_bar_widget.dart';
|
|
|
import 'package:mohem_flutter_app/widgets/app_in_app_webview_screen.dart';
|
|
|
import 'package:mohem_flutter_app/widgets/button/default_button.dart';
|
|
|
import 'package:url_launcher/url_launcher.dart';
|
|
|
|
|
|
class WalaPlusRetailerDetailsScreen extends StatefulWidget {
|
|
|
final WalaPlusRetailerModel? retailer;
|
|
|
final String? retailerId;
|
|
|
|
|
|
const WalaPlusRetailerDetailsScreen({
|
|
|
Key? key,
|
|
|
this.retailer,
|
|
|
this.retailerId,
|
|
|
}) : super(key: key);
|
|
|
|
|
|
@override
|
|
|
State<WalaPlusRetailerDetailsScreen> createState() => _WalaPlusRetailerDetailsScreenState();
|
|
|
}
|
|
|
|
|
|
class _WalaPlusRetailerDetailsScreenState extends State<WalaPlusRetailerDetailsScreen> {
|
|
|
WalaPlusRetailerModel? _retailer;
|
|
|
bool _isLoading = true;
|
|
|
bool _hasDetailsData = false;
|
|
|
String? _effectiveRetailerId;
|
|
|
bool _hasFetched = false;
|
|
|
bool _isRedeeming = false;
|
|
|
|
|
|
@override
|
|
|
void initState() {
|
|
|
super.initState();
|
|
|
_retailer = widget.retailer;
|
|
|
_effectiveRetailerId = widget.retailerId ?? widget.retailer?.id;
|
|
|
}
|
|
|
|
|
|
@override
|
|
|
void didChangeDependencies() {
|
|
|
super.didChangeDependencies();
|
|
|
if (_effectiveRetailerId == null) {
|
|
|
Object? args = ModalRoute.of(context)?.settings.arguments;
|
|
|
if (args is WalaPlusRetailerModel) {
|
|
|
_retailer ??= args;
|
|
|
_effectiveRetailerId = args.id;
|
|
|
} else if (args is String) {
|
|
|
_effectiveRetailerId = args;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (!_hasFetched && _effectiveRetailerId != null) {
|
|
|
_hasFetched = true;
|
|
|
_fetchRetailerDetails();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
Future<void> _fetchRetailerDetails() async {
|
|
|
if (_effectiveRetailerId == null) {
|
|
|
if (mounted) {
|
|
|
setState(() {
|
|
|
_isLoading = false;
|
|
|
});
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
setState(() {
|
|
|
_isLoading = true;
|
|
|
});
|
|
|
|
|
|
try {
|
|
|
debugPrint("WalaPlusRetailerDetailsScreen: fetching details for retailer ID: $_effectiveRetailerId");
|
|
|
WalaPlusRetailerModel? result = await OffersAndDiscountsApiClient().getWalaPlusRetailerById(
|
|
|
retailerId: _effectiveRetailerId!,
|
|
|
context: context,
|
|
|
);
|
|
|
if (result != null && mounted) {
|
|
|
if ((result.image == null || result.image!.isEmpty || result.image == "null") && _retailer?.image != null) {
|
|
|
result.image = _retailer!.image;
|
|
|
}
|
|
|
if ((result.imageThumb == null || result.imageThumb!.isEmpty || result.imageThumb == "null") && _retailer?.imageThumb != null) {
|
|
|
result.imageThumb = _retailer!.imageThumb;
|
|
|
}
|
|
|
if ((result.logo == null || result.logo!.isEmpty || result.logo == "null") && _retailer?.logo != null) {
|
|
|
result.logo = _retailer!.logo;
|
|
|
}
|
|
|
if ((result.logoThumb == null || result.logoThumb!.isEmpty || result.logoThumb == "null") && _retailer?.logoThumb != null) {
|
|
|
result.logoThumb = _retailer!.logoThumb;
|
|
|
}
|
|
|
if ((result.name == null || result.name!.isEmpty) && _retailer?.name != null) {
|
|
|
result.name = _retailer!.name;
|
|
|
}
|
|
|
if ((result.type == null || result.type!.isEmpty) && _retailer?.type != null) {
|
|
|
result.type = _retailer!.type;
|
|
|
}
|
|
|
if ((result.locations == null || result.locations!.isEmpty) && _retailer?.locations != null && _retailer!.locations!.isNotEmpty) {
|
|
|
result.locations = _retailer!.locations;
|
|
|
}
|
|
|
if ((result.offers == null || result.offers!.isEmpty) && _retailer?.offers != null && _retailer!.offers!.isNotEmpty) {
|
|
|
result.offers = _retailer!.offers;
|
|
|
}
|
|
|
if ((result.validity == null || result.validity!.isEmpty) && _retailer?.validity != null) {
|
|
|
result.validity = _retailer!.validity;
|
|
|
}
|
|
|
if ((result.offerTitle == null || result.offerTitle!.isEmpty) && _retailer?.offerTitle != null) {
|
|
|
result.offerTitle = _retailer!.offerTitle;
|
|
|
}
|
|
|
if (result.contact == null && _retailer?.contact != null) {
|
|
|
result.contact = _retailer!.contact;
|
|
|
}
|
|
|
if ((result.email == null || result.email!.isEmpty) && _retailer?.email != null) {
|
|
|
result.email = _retailer!.email;
|
|
|
}
|
|
|
if ((result.phone == null || result.phone!.isEmpty) && _retailer?.phone != null) {
|
|
|
result.phone = _retailer!.phone;
|
|
|
}
|
|
|
|
|
|
setState(() {
|
|
|
_retailer = result;
|
|
|
_hasDetailsData = true;
|
|
|
});
|
|
|
}
|
|
|
} catch (e) {
|
|
|
debugPrint("Error fetching WalaPlus retailer by ID: $e");
|
|
|
} finally {
|
|
|
if (mounted) {
|
|
|
setState(() {
|
|
|
_isLoading = false;
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
Future<void> _openInAppBrowser(String url) async {
|
|
|
String title = _retailer?.name ?? LocaleKeys.offerDetails.tr();
|
|
|
|
|
|
await Navigator.push(
|
|
|
context,
|
|
|
MaterialPageRoute(
|
|
|
builder: (BuildContext context) => AppInAppWebViewScreen(
|
|
|
url: url,
|
|
|
title: title,
|
|
|
),
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
|
|
|
void _onUseOffer() {
|
|
|
if (_isRedeeming) return;
|
|
|
|
|
|
List<WalaPlusOfferModel> offers = _retailer?.offers ?? [];
|
|
|
if (offers.length > 1) {
|
|
|
_showOffersBottomSheet(offers);
|
|
|
} else if (offers.length == 1) {
|
|
|
WalaPlusOfferModel singleOffer = offers.first;
|
|
|
String offerId = (singleOffer.id != null && singleOffer.id!.isNotEmpty)
|
|
|
? singleOffer.id!
|
|
|
: (_retailer?.id ?? _effectiveRetailerId ?? "");
|
|
|
String offerType = (singleOffer.type != null && singleOffer.type!.isNotEmpty)
|
|
|
? singleOffer.type!
|
|
|
: (_retailer?.offerType ?? "promo");
|
|
|
_redeemOffer(offerId: offerId, offerType: offerType);
|
|
|
} else {
|
|
|
String offerId = _retailer?.id ?? _effectiveRetailerId ?? "";
|
|
|
if (offerId.isEmpty) {
|
|
|
Utils.showToast(LocaleKeys.offerIdNotAvailable.tr());
|
|
|
return;
|
|
|
}
|
|
|
_redeemOffer(offerId: offerId, offerType: _retailer?.offerType ?? "promo");
|
|
|
}
|
|
|
}
|
|
|
|
|
|
Future<void> _redeemOffer({required String offerId, required String offerType}) async {
|
|
|
if (_isRedeeming) return;
|
|
|
if (offerId.isEmpty) {
|
|
|
Utils.showToast(LocaleKeys.offerIdNotAvailable.tr());
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
setState(() {
|
|
|
_isRedeeming = true;
|
|
|
});
|
|
|
Utils.showLoading(context);
|
|
|
|
|
|
try {
|
|
|
Map<String, dynamic>? res = await OffersAndDiscountsApiClient().redeemWalaPlusOffer(
|
|
|
offerId: offerId,
|
|
|
offerType: offerType,
|
|
|
context: context,
|
|
|
);
|
|
|
|
|
|
Utils.hideLoading(context);
|
|
|
|
|
|
String? transactionUrl;
|
|
|
if (res != null) {
|
|
|
transactionUrl = res['Transaction_Url'] ??
|
|
|
res['TransactionUrl'] ??
|
|
|
res['transaction_url'] ??
|
|
|
res['transactionUrl'] ??
|
|
|
res['Url'] ??
|
|
|
res['url'];
|
|
|
}
|
|
|
|
|
|
if (transactionUrl != null && transactionUrl.trim().isNotEmpty) {
|
|
|
await _openInAppBrowser(transactionUrl.trim());
|
|
|
} else {
|
|
|
String? error = res?['Error']?.toString() ??
|
|
|
res?['error']?.toString() ??
|
|
|
res?['ErrorMessage']?.toString() ??
|
|
|
res?['message']?.toString();
|
|
|
if (error != null && error.isNotEmpty && error != "null") {
|
|
|
Utils.showToast(error);
|
|
|
} else {
|
|
|
Utils.showToast(LocaleKeys.unableToRedeemOffer.tr());
|
|
|
}
|
|
|
}
|
|
|
} catch (e) {
|
|
|
Utils.hideLoading(context);
|
|
|
debugPrint("Error redeeming offer: $e");
|
|
|
Utils.showToast(LocaleKeys.errorRedeemingOffer.tr());
|
|
|
} finally {
|
|
|
if (mounted) {
|
|
|
setState(() {
|
|
|
_isRedeeming = false;
|
|
|
});
|
|
|
} else {
|
|
|
_isRedeeming = false;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
void _showOffersBottomSheet(List<WalaPlusOfferModel> offers) {
|
|
|
bool isAr = Directionality.of(context) == ui.TextDirection.rtl || AppState().isArabic(context);
|
|
|
|
|
|
showModalBottomSheet(
|
|
|
context: context,
|
|
|
isScrollControlled: true,
|
|
|
backgroundColor: Colors.transparent,
|
|
|
builder: (BuildContext sheetContext) {
|
|
|
return Container(
|
|
|
constraints: BoxConstraints(
|
|
|
maxHeight: MediaQuery.of(sheetContext).size.height * 0.78,
|
|
|
),
|
|
|
decoration: const BoxDecoration(
|
|
|
color: Color(0xFFF8F9FA),
|
|
|
borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
|
|
|
),
|
|
|
child: Column(
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
12.height,
|
|
|
Center(
|
|
|
child: Container(
|
|
|
width: 44,
|
|
|
height: 4.5,
|
|
|
decoration: BoxDecoration(
|
|
|
color: const Color(0xFFCBD5E1),
|
|
|
borderRadius: BorderRadius.circular(2.5),
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
12.height,
|
|
|
Padding(
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 20),
|
|
|
child: Row(
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
children: [
|
|
|
Expanded(
|
|
|
child: Column(
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
LocaleKeys.availableOffers.tr().toText18(
|
|
|
isBold: true,
|
|
|
color: const Color(0xFF1E293B),
|
|
|
),
|
|
|
4.height,
|
|
|
LocaleKeys.selectOfferToRedeem.tr().toText12(
|
|
|
color: const Color(0xFF64748B),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
IconButton(
|
|
|
icon: const Icon(Icons.close_rounded, color: Color(0xFF64748B), size: 24),
|
|
|
onPressed: () => Navigator.pop(sheetContext),
|
|
|
padding: EdgeInsets.zero,
|
|
|
constraints: const BoxConstraints(),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
14.height,
|
|
|
const Divider(height: 1, color: Color(0xFFF1F5F9)),
|
|
|
Flexible(
|
|
|
child: ListView.separated(
|
|
|
shrinkWrap: true,
|
|
|
physics: const BouncingScrollPhysics(),
|
|
|
padding: const EdgeInsets.fromLTRB(20, 16, 20, 24),
|
|
|
itemCount: offers.length,
|
|
|
separatorBuilder: (_, __) => 14.height,
|
|
|
itemBuilder: (BuildContext _, int index) {
|
|
|
WalaPlusOfferModel offer = offers[index];
|
|
|
return _buildOfferBottomSheetCard(sheetContext, offer, isAr);
|
|
|
},
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
);
|
|
|
},
|
|
|
);
|
|
|
}
|
|
|
|
|
|
Widget _buildOfferBottomSheetCard(BuildContext sheetContext, WalaPlusOfferModel offer, bool isAr) {
|
|
|
String title = offer.title ?? "";
|
|
|
String description = offer.description ?? "";
|
|
|
String type = (offer.type != null && offer.type!.isNotEmpty) ? offer.type! : "discount";
|
|
|
String? expiredAt = offer.expiredAt;
|
|
|
|
|
|
bool hasDifferentDescription = description.trim().isNotEmpty && description.trim() != title.trim();
|
|
|
|
|
|
return Container(
|
|
|
decoration: BoxDecoration(
|
|
|
color: Colors.white,
|
|
|
borderRadius: BorderRadius.circular(16),
|
|
|
boxShadow: [
|
|
|
BoxShadow(
|
|
|
color: const Color(0xff000000).withOpacity(.05),
|
|
|
blurRadius: 10,
|
|
|
offset: const Offset(0, 3),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
padding: const EdgeInsets.all(16),
|
|
|
child: Column(
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
Row(
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
|
children: [
|
|
|
Container(
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
|
|
|
decoration: BoxDecoration(
|
|
|
color: const Color(0xFFE6F7F0),
|
|
|
borderRadius: BorderRadius.circular(8),
|
|
|
),
|
|
|
child: type.toUpperCase().toText10(
|
|
|
isBold: true,
|
|
|
color: const Color(0xFF00A651),
|
|
|
),
|
|
|
),
|
|
|
if (expiredAt != null && expiredAt.trim().isNotEmpty && expiredAt != "null") ...[
|
|
|
Row(
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
children: [
|
|
|
const Icon(Icons.event_outlined, size: 12, color: Color(0xFF64748B)),
|
|
|
const SizedBox(width: 4),
|
|
|
expiredAt.toText10(
|
|
|
color: const Color(0xFF64748B),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
],
|
|
|
],
|
|
|
),
|
|
|
10.height,
|
|
|
title.toText14(
|
|
|
isBold: true,
|
|
|
color: const Color(0xFF1E293B),
|
|
|
maxlines: 2,
|
|
|
),
|
|
|
if (hasDifferentDescription) ...[
|
|
|
6.height,
|
|
|
description.toText12(
|
|
|
color: const Color(0xFF64748B),
|
|
|
maxLine: 3,
|
|
|
),
|
|
|
],
|
|
|
DefaultButton(
|
|
|
LocaleKeys.useOffer.tr(),
|
|
|
() {
|
|
|
Navigator.pop(sheetContext);
|
|
|
String offerId = (offer.id != null && offer.id!.isNotEmpty)
|
|
|
? offer.id!
|
|
|
: (_retailer?.id ?? _effectiveRetailerId ?? "");
|
|
|
String offerType = (offer.type != null && offer.type!.isNotEmpty)
|
|
|
? offer.type!
|
|
|
: (_retailer?.offerType ?? "promo");
|
|
|
_redeemOffer(offerId: offerId, offerType: offerType);
|
|
|
},
|
|
|
height: 42,
|
|
|
borderRadius: 10,
|
|
|
fontSize: 14,
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
|
|
|
@override
|
|
|
Widget build(BuildContext context) {
|
|
|
bool isAr = Directionality.of(context) == ui.TextDirection.rtl || AppState().isArabic(context);
|
|
|
String title = _retailer?.name ?? LocaleKeys.offerDetails.tr();
|
|
|
|
|
|
return Scaffold(
|
|
|
backgroundColor: const Color(0xFFF8F9FA),
|
|
|
appBar: AppBarWidget(
|
|
|
context,
|
|
|
title: title,
|
|
|
showHomeButton: true,
|
|
|
onHomeTapped: () {
|
|
|
if (ApiConsts.isDependetLogin) {
|
|
|
Navigator.popUntil(context, ModalRoute.withName(AppRoutes.dashboardScreenForDependet));
|
|
|
} else {
|
|
|
Navigator.popUntil(context, ModalRoute.withName(AppRoutes.dashboard));
|
|
|
}
|
|
|
},
|
|
|
),
|
|
|
body: (_isLoading && !_hasDetailsData)
|
|
|
? Center(
|
|
|
child: Image.asset(
|
|
|
"assets/images/logos/loading_mohemm_logo.gif",
|
|
|
height: 96.0,
|
|
|
width: 96.0,
|
|
|
),
|
|
|
)
|
|
|
: Column(
|
|
|
children: [
|
|
|
if (_isLoading && _hasDetailsData)
|
|
|
const LinearProgressIndicator(
|
|
|
minHeight: 2.5,
|
|
|
backgroundColor: Colors.transparent,
|
|
|
valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF168A89)),
|
|
|
),
|
|
|
Expanded(
|
|
|
child: SingleChildScrollView(
|
|
|
physics: const BouncingScrollPhysics(),
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
|
|
child: Column(
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
Container(
|
|
|
decoration: BoxDecoration(
|
|
|
color: Colors.white,
|
|
|
borderRadius: BorderRadius.circular(20),
|
|
|
boxShadow: [
|
|
|
BoxShadow(
|
|
|
color: const Color(0xff000000).withOpacity(.05),
|
|
|
blurRadius: 14,
|
|
|
offset: const Offset(0, 4),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
padding: const EdgeInsets.all(16),
|
|
|
child: Column(
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
// 1. Top Banner Image with rounded corners
|
|
|
ClipRRect(
|
|
|
borderRadius: BorderRadius.circular(16),
|
|
|
child: SizedBox(
|
|
|
height: 190,
|
|
|
width: double.infinity,
|
|
|
child: (_retailer?.displayImage != null && _retailer!.displayImage!.isNotEmpty)
|
|
|
? Image.network(
|
|
|
_retailer!.displayImage!,
|
|
|
fit: BoxFit.cover,
|
|
|
errorBuilder: (_, __, ___) => Container(
|
|
|
color: const Color(0xFFF3F4F6),
|
|
|
child: const Icon(Icons.broken_image, size: 48, color: Color(0xFF9CA3AF)),
|
|
|
),
|
|
|
)
|
|
|
: Container(
|
|
|
color: const Color(0xFFF3F4F6),
|
|
|
child: const Icon(Icons.image_outlined, size: 48, color: Color(0xFF9CA3AF)),
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
14.height,
|
|
|
|
|
|
// 2. Brand Strip (Human Resources - Retailer Logo - Dr Sulaiman Al Habib)
|
|
|
_buildBrandStrip(isAr),
|
|
|
18.height,
|
|
|
|
|
|
// 3. Retailer Name (Centered, Bold) & Offer Title Subtitle
|
|
|
Center(
|
|
|
child: (_retailer?.name ?? "").toText22(
|
|
|
isBold: true,
|
|
|
isCentered: true,
|
|
|
color: const Color(0xFF1E293B),
|
|
|
),
|
|
|
),
|
|
|
if (_retailer?.offerTitle != null &&
|
|
|
_retailer!.offerTitle!.trim().isNotEmpty &&
|
|
|
_retailer!.offerTitle!.trim() != _retailer!.name?.trim()) ...[
|
|
|
6.height,
|
|
|
Center(
|
|
|
child: _cleanHtml(_retailer!.offerTitle!).toText16(
|
|
|
isCentered: true,
|
|
|
color: const Color(0xFF168A89),
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
18.height,
|
|
|
|
|
|
// 4. 3 Info Badges Row (Store Type, Validity, City)
|
|
|
_buildInfoBadgesRow(isAr),
|
|
|
22.height,
|
|
|
|
|
|
// 5. Description Section (parsed as HTML)
|
|
|
"${LocaleKeys.description.tr()}:".toText16(
|
|
|
isBold: true,
|
|
|
color: const Color(0xFF1E293B),
|
|
|
),
|
|
|
8.height,
|
|
|
Html(
|
|
|
data: _getHowToUseHtml(isAr),
|
|
|
style: {
|
|
|
"body": Style(
|
|
|
fontSize: FontSize(14.0),
|
|
|
color: const Color(0xFF4B5563),
|
|
|
),
|
|
|
},
|
|
|
onLinkTap: (String? url, Map<String, String> attributes, _) async {
|
|
|
if (url != null && url.isNotEmpty) {
|
|
|
try {
|
|
|
Uri uri = Uri.parse(url);
|
|
|
if (!uri.hasScheme) {
|
|
|
uri = Uri.parse("https://$url");
|
|
|
}
|
|
|
await launchUrl(uri, mode: LaunchMode.externalApplication);
|
|
|
} catch (e) {
|
|
|
debugPrint("Error launching url: $e");
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
|
|
|
// 6. Locations Section (below description)
|
|
|
_buildLocationsSection(isAr),
|
|
|
|
|
|
// 7. Contact Information (Email & Phone Number)
|
|
|
_buildContactSection(isAr),
|
|
|
|
|
|
16.height,
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
|
|
|
// 7. Bottom Action Button
|
|
|
Container(
|
|
|
padding: const EdgeInsets.fromLTRB(16, 10, 16, 20),
|
|
|
color: Colors.white,
|
|
|
child: SizedBox(
|
|
|
width: double.infinity,
|
|
|
height: 50,
|
|
|
child: DefaultButton(
|
|
|
LocaleKeys.useOffer.tr(),
|
|
|
_isRedeeming ? null : _onUseOffer,
|
|
|
height: 50,
|
|
|
borderRadius: 12,
|
|
|
fontSize: 16,
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
|
|
|
Widget _buildBrandStrip(bool isAr) {
|
|
|
String? logoUrl = _retailer?.displayLogo;
|
|
|
return Row(
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
children: <Widget>[
|
|
|
// Left: Retailer Logo
|
|
|
if (logoUrl != null && logoUrl.isNotEmpty)
|
|
|
Container(
|
|
|
decoration: BoxDecoration(
|
|
|
color: Colors.white,
|
|
|
borderRadius: BorderRadius.circular(8),
|
|
|
boxShadow: [
|
|
|
BoxShadow(
|
|
|
color: const Color(0xff000000).withOpacity(.04),
|
|
|
blurRadius: 4,
|
|
|
offset: const Offset(0, 2),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
padding: const EdgeInsets.all(2),
|
|
|
child: Image.network(
|
|
|
logoUrl,
|
|
|
height: 36,
|
|
|
width: 36,
|
|
|
fit: BoxFit.contain,
|
|
|
errorBuilder: (_, __, ___) => const SizedBox(width: 36, height: 36),
|
|
|
),
|
|
|
)
|
|
|
else
|
|
|
const SizedBox(width: 36, height: 36),
|
|
|
|
|
|
// Right: Mazaya Brand Logo
|
|
|
SvgPicture.asset(
|
|
|
"assets/icons/mazaya_brand.svg",
|
|
|
height: 48,
|
|
|
fit: BoxFit.contain,
|
|
|
),
|
|
|
],
|
|
|
);
|
|
|
}
|
|
|
|
|
|
Widget _buildInfoBadgesRow(bool isAr) {
|
|
|
String storeTypeText = (_retailer?.type?.toLowerCase() == 'online')
|
|
|
? LocaleKeys.online.tr()
|
|
|
: LocaleKeys.inStore.tr();
|
|
|
|
|
|
IconData storeIcon = (_retailer?.type?.toLowerCase() == 'online')
|
|
|
? Icons.language_rounded
|
|
|
: Icons.storefront_rounded;
|
|
|
|
|
|
String cityText = _getDisplayCity(isAr);
|
|
|
String validityText = _retailer?.getDisplayValidity() ?? LocaleKeys.offerValid.tr();
|
|
|
|
|
|
return Row(
|
|
|
children: [
|
|
|
Expanded(
|
|
|
child: _buildInfoCard(
|
|
|
icon: storeIcon,
|
|
|
label: storeTypeText,
|
|
|
),
|
|
|
),
|
|
|
12.width,
|
|
|
Expanded(
|
|
|
child: _buildInfoCard(
|
|
|
icon: Icons.check_circle_outline_rounded,
|
|
|
label: validityText,
|
|
|
),
|
|
|
),
|
|
|
12.width,
|
|
|
Expanded(
|
|
|
child: _buildInfoCard(
|
|
|
icon: Icons.location_on_rounded,
|
|
|
label: cityText,
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
);
|
|
|
}
|
|
|
|
|
|
String _getDisplayCity(bool isAr) {
|
|
|
if (_retailer?.locations != null && _retailer!.locations!.isNotEmpty) {
|
|
|
// 1. First pass: look for a specific city name (e.g. Riyadh, Jeddah, Hail)
|
|
|
for (var loc in _retailer!.locations!) {
|
|
|
String? cName = isAr ? loc.cityNameAr : loc.cityNameEn;
|
|
|
if (cName != null && cName.trim().isNotEmpty && cName != "null") {
|
|
|
return cName.trim();
|
|
|
}
|
|
|
}
|
|
|
// 2. Second pass: fallback to 'city' field if not generic country
|
|
|
for (var loc in _retailer!.locations!) {
|
|
|
if (loc.city != null && loc.city!.trim().isNotEmpty && loc.city != "null") {
|
|
|
String c = loc.city!.trim();
|
|
|
if (c.toLowerCase() != 'saudi arabia' && c != 'المملكة العربية السعودية') {
|
|
|
return c;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// 3. Third pass: any non-empty city
|
|
|
for (var loc in _retailer!.locations!) {
|
|
|
if (loc.city != null && loc.city!.trim().isNotEmpty && loc.city != "null") {
|
|
|
return loc.city!.trim();
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
if (_retailer?.type?.toLowerCase() == 'online') {
|
|
|
return LocaleKeys.ksa.tr();
|
|
|
}
|
|
|
return LocaleKeys.riyadh.tr();
|
|
|
}
|
|
|
|
|
|
Widget _buildInfoCard({required IconData icon, required String label}) {
|
|
|
return Container(
|
|
|
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 8),
|
|
|
decoration: BoxDecoration(
|
|
|
color: const Color(0xFFF4F6F9),
|
|
|
borderRadius: BorderRadius.circular(14),
|
|
|
),
|
|
|
child: Column(
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
|
children: [
|
|
|
Icon(icon, color: const Color(0xFF168A89), size: 26),
|
|
|
const SizedBox(height: 8),
|
|
|
label.toText12(
|
|
|
isCenter: true,
|
|
|
maxLine: 1,
|
|
|
color: const Color(0xFF334155),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
|
|
|
String _getHowToUseHtml(bool isAr) {
|
|
|
String? content;
|
|
|
|
|
|
// 1. Language-specific how-to-use field
|
|
|
if (isAr) {
|
|
|
if (_retailer?.arHowToUse != null && _retailer!.arHowToUse!.trim().isNotEmpty && _retailer!.arHowToUse != "null") {
|
|
|
content = _retailer!.arHowToUse!.trim();
|
|
|
}
|
|
|
} else {
|
|
|
if (_retailer?.enHowToUse != null && _retailer!.enHowToUse!.trim().isNotEmpty && _retailer!.enHowToUse != "null") {
|
|
|
content = _retailer!.enHowToUse!.trim();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 2. In WalaPlus API, 'usage' field often holds the rich HTML formatted instructions
|
|
|
if (content == null || content.isEmpty) {
|
|
|
if (_retailer?.usage != null) {
|
|
|
String u = _retailer!.usage.toString().trim();
|
|
|
if (u.isNotEmpty && u != "null") {
|
|
|
// If usage contains HTML tags or step keywords, prioritize it
|
|
|
if (u.contains('<') ||
|
|
|
u.toLowerCase().contains('step') ||
|
|
|
u.contains('خطوة') ||
|
|
|
u.toLowerCase().contains('discount')) {
|
|
|
content = u;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 3. Fallback to generic 'howToUse'
|
|
|
if (content == null || content.isEmpty) {
|
|
|
if (_retailer?.howToUse != null && _retailer!.howToUse!.trim().isNotEmpty && _retailer!.howToUse != "null") {
|
|
|
content = _retailer!.howToUse!.trim();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 4. Fallback to 'usage' even if plain text
|
|
|
if (content == null || content.isEmpty) {
|
|
|
if (_retailer?.usage != null) {
|
|
|
String u = _retailer!.usage.toString().trim();
|
|
|
if (u.isNotEmpty && u != "null" && int.tryParse(u) == null) {
|
|
|
content = u;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 5. Fallback to the other language field
|
|
|
if (content == null || content.isEmpty) {
|
|
|
if (isAr) {
|
|
|
if (_retailer?.enHowToUse != null && _retailer!.enHowToUse!.trim().isNotEmpty && _retailer!.enHowToUse != "null") {
|
|
|
content = _retailer!.enHowToUse!.trim();
|
|
|
}
|
|
|
} else {
|
|
|
if (_retailer?.arHowToUse != null && _retailer!.arHowToUse!.trim().isNotEmpty && _retailer!.arHowToUse != "null") {
|
|
|
content = _retailer!.arHowToUse!.trim();
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 6. Fallback to description or info
|
|
|
if (content == null || content.isEmpty) {
|
|
|
if (_retailer?.description != null && _retailer!.description!.trim().isNotEmpty && _retailer!.description != "null") {
|
|
|
content = _retailer!.description!.trim();
|
|
|
} else if (_retailer?.info != null && _retailer!.info!.trim().isNotEmpty && _retailer!.info != "null") {
|
|
|
content = _retailer!.info!.trim();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (content == null || content.isEmpty) {
|
|
|
return "<p>${LocaleKeys.noInstructionsAvailable.tr()}</p>";
|
|
|
}
|
|
|
|
|
|
return _formatHtmlInstructions(content);
|
|
|
}
|
|
|
|
|
|
String _formatHtmlInstructions(String raw) {
|
|
|
String s = raw.trim();
|
|
|
|
|
|
// 1. Strip surrounding quotes (handles multiple layers e.g. "\"text\"")
|
|
|
while ((s.startsWith('"') && s.endsWith('"')) || (s.startsWith("'") && s.endsWith("'"))) {
|
|
|
if (s.length >= 2) {
|
|
|
s = s.substring(1, s.length - 1).trim();
|
|
|
} else {
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 2. Unescape JSON slashes & quotes
|
|
|
s = s
|
|
|
.replaceAll(r'\/', '/')
|
|
|
.replaceAll(r'\"', '"')
|
|
|
.replaceAll(r"\'", "'");
|
|
|
|
|
|
// 3. Decode \uXXXX Unicode escape sequences
|
|
|
s = s.replaceAllMapped(RegExp(r'\\u([0-9a-fA-F]{4})'), (match) {
|
|
|
try {
|
|
|
int codeUnit = int.parse(match.group(1)!, radix: 16);
|
|
|
return String.fromCharCode(codeUnit);
|
|
|
} catch (_) {
|
|
|
return match.group(0)!;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 4. Decode common specific unicode escapes (quotes, bullets, dashes, etc.)
|
|
|
s = s
|
|
|
.replaceAll(r'\u201c', '“')
|
|
|
.replaceAll(r'\u201d', '”')
|
|
|
.replaceAll(r'\u2019', '’')
|
|
|
.replaceAll(r'\u2018', '‘')
|
|
|
.replaceAll(r'\u00a0', ' ')
|
|
|
.replaceAll(r'\u2022', '•')
|
|
|
.replaceAll(r'\u2013', '–')
|
|
|
.replaceAll(r'\u2014', '—')
|
|
|
.replaceAll(r'\u200f', '')
|
|
|
.replaceAll(r'\u200e', '')
|
|
|
.replaceAll(r'\u061f', '؟')
|
|
|
.replaceAll(r'\u201', '“'); // Fallback if truncated to 3 digits
|
|
|
|
|
|
// 5. Decode HTML entities
|
|
|
s = s
|
|
|
.replaceAll('"', '"')
|
|
|
.replaceAll(''', "'")
|
|
|
.replaceAll(''', "'")
|
|
|
.replaceAll(' ', ' ')
|
|
|
.replaceAll('&', '&');
|
|
|
|
|
|
// 6. Check if string contains HTML tags
|
|
|
bool hasHtmlTags = RegExp(r'<[a-zA-Z][^>]*>').hasMatch(s);
|
|
|
|
|
|
if (!hasHtmlTags) {
|
|
|
// Plain text: format nicely into structured HTML with bold step titles and line breaks
|
|
|
s = s.replaceAll(r'\r\n', '\n').replaceAll(r'\n', '\n');
|
|
|
|
|
|
// Separate step markers
|
|
|
RegExp stepRegex = RegExp(
|
|
|
r'(\b(?:First|Second|Third|Fourth|Fifth|Sixth|Seventh|Eighth|Ninth|Tenth)\s+step\s*:?|'
|
|
|
r'\b(?:1st|2nd|3rd|4th|5th|6th|7th|8th|9th|10th)\s+step\s*:?|'
|
|
|
r'(?:الخطوة\s+(?:الأولى|الثانية|الثالثة|الرابعة|الخامسة|السادسة|السابعة|الثامنة|التاسعة|العاشرة))\s*:?)',
|
|
|
caseSensitive: false,
|
|
|
);
|
|
|
|
|
|
s = s.replaceAllMapped(stepRegex, (match) {
|
|
|
String matchText = match.group(0)!.trim();
|
|
|
return '<br><br><strong>$matchText</strong> ';
|
|
|
});
|
|
|
|
|
|
// Split remaining newlines to <br>
|
|
|
s = s.replaceAll('\n', '<br>');
|
|
|
|
|
|
// Clean leading <br> tags
|
|
|
s = s.replaceFirst(RegExp(r'^(?:<br\s*/?>)+'), '');
|
|
|
|
|
|
s = '<p>$s</p>';
|
|
|
}
|
|
|
|
|
|
return s;
|
|
|
}
|
|
|
|
|
|
Widget _buildLocationsSection(bool isAr) {
|
|
|
List<WalaPlusRetailerLocation> locations = _retailer?.locations ?? [];
|
|
|
if (locations.isEmpty) {
|
|
|
return const SizedBox.shrink();
|
|
|
}
|
|
|
|
|
|
int totalCount = locations.length;
|
|
|
List<WalaPlusRetailerLocation> previewLocations =
|
|
|
totalCount <= 2 ? locations : locations.take(2).toList();
|
|
|
|
|
|
return Column(
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
18.height,
|
|
|
// Header
|
|
|
Row(
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
children: [
|
|
|
Row(
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
children: [
|
|
|
Container(
|
|
|
padding: const EdgeInsets.all(6),
|
|
|
decoration: BoxDecoration(
|
|
|
color: const Color(0xFF168A89).withOpacity(0.1),
|
|
|
borderRadius: BorderRadius.circular(8),
|
|
|
),
|
|
|
child: const Icon(Icons.storefront_rounded, size: 18, color: Color(0xFF168A89)),
|
|
|
),
|
|
|
8.width,
|
|
|
LocaleKeys.locations.tr().toText16(
|
|
|
isBold: true,
|
|
|
color: const Color(0xFF1E293B),
|
|
|
),
|
|
|
8.width,
|
|
|
Container(
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
|
|
decoration: BoxDecoration(
|
|
|
color: const Color(0xFFF1F5F9),
|
|
|
borderRadius: BorderRadius.circular(10),
|
|
|
),
|
|
|
child: '$totalCount'.toText11(
|
|
|
isBold: true,
|
|
|
color: const Color(0xFF64748B),
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
if (totalCount > 2)
|
|
|
InkWell(
|
|
|
onTap: () => _showAllLocationsBottomSheet(locations, isAr),
|
|
|
borderRadius: BorderRadius.circular(6),
|
|
|
child: Padding(
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
|
|
|
child: Row(
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
children: [
|
|
|
LocaleKeys.showAllLocations.tr(args: ['$totalCount']).toText12(
|
|
|
color: const Color(0xFF168A89),
|
|
|
isBold: true,
|
|
|
),
|
|
|
const SizedBox(width: 2),
|
|
|
Icon(
|
|
|
isAr ? Icons.chevron_left_rounded : Icons.chevron_right_rounded,
|
|
|
size: 18,
|
|
|
color: const Color(0xFF168A89),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
12.height,
|
|
|
// Preview Cards
|
|
|
ListView.separated(
|
|
|
shrinkWrap: true,
|
|
|
physics: const NeverScrollableScrollPhysics(),
|
|
|
padding: EdgeInsets.zero,
|
|
|
itemCount: previewLocations.length,
|
|
|
separatorBuilder: (_, __) => 10.height,
|
|
|
itemBuilder: (BuildContext _, int index) {
|
|
|
return _buildLocationCard(previewLocations[index], isAr);
|
|
|
},
|
|
|
),
|
|
|
// If more than 2, show the banner to browse all
|
|
|
if (totalCount > 2) ...[
|
|
|
10.height,
|
|
|
InkWell(
|
|
|
onTap: () => _showAllLocationsBottomSheet(locations, isAr),
|
|
|
borderRadius: BorderRadius.circular(16),
|
|
|
child: Container(
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 14),
|
|
|
decoration: BoxDecoration(
|
|
|
color: Colors.white,
|
|
|
borderRadius: BorderRadius.circular(16),
|
|
|
boxShadow: [
|
|
|
BoxShadow(
|
|
|
color: const Color(0xff000000).withOpacity(.05),
|
|
|
blurRadius: 10,
|
|
|
offset: const Offset(0, 3),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
child: Row(
|
|
|
children: [
|
|
|
Container(
|
|
|
padding: const EdgeInsets.all(9),
|
|
|
decoration: BoxDecoration(
|
|
|
color: const Color(0xFF168A89).withOpacity(0.08),
|
|
|
shape: BoxShape.circle,
|
|
|
),
|
|
|
child: const Icon(Icons.map_outlined, color: Color(0xFF168A89), size: 18),
|
|
|
),
|
|
|
12.width,
|
|
|
Expanded(
|
|
|
child: Column(
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
LocaleKeys.showAllLocations.tr(args: ['$totalCount']).toText14(
|
|
|
isBold: true,
|
|
|
color: const Color(0xFF168A89),
|
|
|
),
|
|
|
2.height,
|
|
|
LocaleKeys.browseAllBranches.tr(args: ['$totalCount']).toText11(
|
|
|
color: const Color(0xFF64748B),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
Icon(
|
|
|
isAr ? Icons.arrow_back_ios_rounded : Icons.arrow_forward_ios_rounded,
|
|
|
size: 14,
|
|
|
color: const Color(0xFF168A89),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
],
|
|
|
);
|
|
|
}
|
|
|
|
|
|
Widget _buildLocationCard(WalaPlusRetailerLocation loc, bool isAr) {
|
|
|
String cityText = loc.getLocalizedCity(isAr);
|
|
|
if (cityText.isEmpty) {
|
|
|
cityText = loc.city ?? "";
|
|
|
}
|
|
|
String addressText = loc.address ?? "";
|
|
|
|
|
|
String primaryTitle = addressText.isNotEmpty ? addressText : cityText;
|
|
|
String? secondaryText = (addressText.isNotEmpty &&
|
|
|
cityText.isNotEmpty &&
|
|
|
addressText.toLowerCase() != cityText.toLowerCase())
|
|
|
? cityText
|
|
|
: null;
|
|
|
|
|
|
return Container(
|
|
|
padding: const EdgeInsets.all(14),
|
|
|
decoration: BoxDecoration(
|
|
|
color: Colors.white,
|
|
|
borderRadius: BorderRadius.circular(16),
|
|
|
boxShadow: [
|
|
|
BoxShadow(
|
|
|
color: const Color(0xff000000).withOpacity(.05),
|
|
|
blurRadius: 10,
|
|
|
offset: const Offset(0, 3),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
child: Column(
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
Row(
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
children: [
|
|
|
// City Pill Badge
|
|
|
if (cityText.isNotEmpty)
|
|
|
Container(
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3.5),
|
|
|
decoration: BoxDecoration(
|
|
|
color: const Color(0xFF168A89).withOpacity(0.08),
|
|
|
borderRadius: BorderRadius.circular(6),
|
|
|
),
|
|
|
child: Row(
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
children: [
|
|
|
const Icon(Icons.location_on, size: 12, color: Color(0xFF168A89)),
|
|
|
const SizedBox(width: 4),
|
|
|
cityText.toText11(
|
|
|
isBold: true,
|
|
|
color: const Color(0xFF168A89),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
)
|
|
|
else
|
|
|
const SizedBox.shrink(),
|
|
|
|
|
|
// Directions / Map action button
|
|
|
InkWell(
|
|
|
onTap: () => _openMapForLocation(loc),
|
|
|
borderRadius: BorderRadius.circular(8),
|
|
|
child: Container(
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
|
|
decoration: BoxDecoration(
|
|
|
gradient: const LinearGradient(
|
|
|
transform: GradientRotation(.83),
|
|
|
begin: Alignment.topRight,
|
|
|
end: Alignment.bottomLeft,
|
|
|
colors: [MyColors.gradiantEndColor, MyColors.gradiantStartColor],
|
|
|
),
|
|
|
borderRadius: BorderRadius.circular(8),
|
|
|
),
|
|
|
child: Row(
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
children: [
|
|
|
const Icon(Icons.directions_outlined, color: Colors.white, size: 14),
|
|
|
const SizedBox(width: 4),
|
|
|
LocaleKeys.viewOnMap.tr().toText11(
|
|
|
color: Colors.white,
|
|
|
isBold: true,
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
10.height,
|
|
|
// Branch title & pin icon
|
|
|
Row(
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
Container(
|
|
|
margin: const EdgeInsets.only(top: 2),
|
|
|
padding: const EdgeInsets.all(6),
|
|
|
decoration: BoxDecoration(
|
|
|
color: const Color(0xFF168A89).withOpacity(0.08),
|
|
|
shape: BoxShape.circle,
|
|
|
),
|
|
|
child: const Icon(Icons.store_mall_directory_rounded, size: 14, color: Color(0xFF168A89)),
|
|
|
),
|
|
|
8.width,
|
|
|
Expanded(
|
|
|
child: Column(
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
primaryTitle.toText14(
|
|
|
isBold: true,
|
|
|
color: const Color(0xFF1E293B),
|
|
|
maxlines: 2,
|
|
|
),
|
|
|
if (secondaryText != null) ...[
|
|
|
2.height,
|
|
|
secondaryText.toText12(
|
|
|
color: const Color(0xFF64748B),
|
|
|
maxLine: 1,
|
|
|
),
|
|
|
],
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
|
|
|
void _showAllLocationsBottomSheet(List<WalaPlusRetailerLocation> locations, bool isAr) {
|
|
|
Map<String, int> cityCounts = {};
|
|
|
for (var loc in locations) {
|
|
|
String c = loc.getLocalizedCity(isAr);
|
|
|
if (c.isEmpty) c = loc.city ?? "";
|
|
|
if (c.trim().isNotEmpty) {
|
|
|
cityCounts[c.trim()] = (cityCounts[c.trim()] ?? 0) + 1;
|
|
|
}
|
|
|
}
|
|
|
List<String> sortedCities = cityCounts.keys.toList()
|
|
|
..sort((a, b) => (cityCounts[b] ?? 0).compareTo(cityCounts[a] ?? 0));
|
|
|
|
|
|
String selectedCity = "ALL";
|
|
|
String searchQuery = "";
|
|
|
TextEditingController searchController = TextEditingController();
|
|
|
|
|
|
showModalBottomSheet(
|
|
|
context: context,
|
|
|
isScrollControlled: true,
|
|
|
backgroundColor: Colors.transparent,
|
|
|
builder: (BuildContext sheetContext) {
|
|
|
return StatefulBuilder(
|
|
|
builder: (BuildContext _, StateSetter setSheetState) {
|
|
|
List<WalaPlusRetailerLocation> filtered = locations.where((loc) {
|
|
|
String c = loc.getLocalizedCity(isAr);
|
|
|
if (c.isEmpty) c = loc.city ?? "";
|
|
|
if (selectedCity != "ALL" && c.trim() != selectedCity) {
|
|
|
return false;
|
|
|
}
|
|
|
if (searchQuery.isNotEmpty) {
|
|
|
String q = searchQuery.toLowerCase();
|
|
|
String addr = (loc.address ?? "").toLowerCase();
|
|
|
String cityEn = (loc.cityNameEn ?? "").toLowerCase();
|
|
|
String cityAr = (loc.cityNameAr ?? "").toLowerCase();
|
|
|
String genericCity = (loc.city ?? "").toLowerCase();
|
|
|
if (!addr.contains(q) && !cityEn.contains(q) && !cityAr.contains(q) && !genericCity.contains(q)) {
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
|
return true;
|
|
|
}).toList();
|
|
|
|
|
|
return Container(
|
|
|
constraints: BoxConstraints(
|
|
|
maxHeight: MediaQuery.of(sheetContext).size.height * 0.85,
|
|
|
),
|
|
|
decoration: const BoxDecoration(
|
|
|
color: Color(0xFFF8F9FA),
|
|
|
borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
|
|
|
),
|
|
|
child: Column(
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
12.height,
|
|
|
Center(
|
|
|
child: Container(
|
|
|
width: 44,
|
|
|
height: 4.5,
|
|
|
decoration: BoxDecoration(
|
|
|
color: const Color(0xFFCBD5E1),
|
|
|
borderRadius: BorderRadius.circular(2.5),
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
12.height,
|
|
|
Padding(
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 20),
|
|
|
child: Row(
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
children: [
|
|
|
Expanded(
|
|
|
child: Column(
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
LocaleKeys.locations.tr().toText18(
|
|
|
isBold: true,
|
|
|
color: const Color(0xFF1E293B),
|
|
|
),
|
|
|
3.height,
|
|
|
LocaleKeys.branchesCount.tr(args: ['${locations.length}']).toText12(
|
|
|
color: const Color(0xFF64748B),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
IconButton(
|
|
|
icon: const Icon(Icons.close_rounded, color: Color(0xFF64748B), size: 24),
|
|
|
onPressed: () => Navigator.pop(sheetContext),
|
|
|
padding: EdgeInsets.zero,
|
|
|
constraints: const BoxConstraints(),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
12.height,
|
|
|
Padding(
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 20),
|
|
|
child: Container(
|
|
|
height: 44,
|
|
|
decoration: BoxDecoration(
|
|
|
color: Colors.white,
|
|
|
borderRadius: BorderRadius.circular(12),
|
|
|
boxShadow: [
|
|
|
BoxShadow(
|
|
|
color: const Color(0xff000000).withOpacity(.04),
|
|
|
blurRadius: 8,
|
|
|
offset: const Offset(0, 2),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
child: Row(
|
|
|
children: [
|
|
|
12.width,
|
|
|
const Icon(Icons.search_rounded, size: 20, color: Color(0xFF94A3B8)),
|
|
|
8.width,
|
|
|
Expanded(
|
|
|
child: TextField(
|
|
|
controller: searchController,
|
|
|
style: const TextStyle(fontSize: 13, color: Color(0xFF1E293B)),
|
|
|
decoration: InputDecoration(
|
|
|
hintText: LocaleKeys.searchBranches.tr(),
|
|
|
hintStyle: const TextStyle(fontSize: 13, color: Color(0xFF94A3B8)),
|
|
|
border: InputBorder.none,
|
|
|
isDense: true,
|
|
|
contentPadding: EdgeInsets.zero,
|
|
|
),
|
|
|
onChanged: (val) {
|
|
|
setSheetState(() {
|
|
|
searchQuery = val.trim();
|
|
|
});
|
|
|
},
|
|
|
),
|
|
|
),
|
|
|
if (searchQuery.isNotEmpty)
|
|
|
GestureDetector(
|
|
|
onTap: () {
|
|
|
searchController.clear();
|
|
|
setSheetState(() {
|
|
|
searchQuery = "";
|
|
|
});
|
|
|
},
|
|
|
child: const Padding(
|
|
|
padding: EdgeInsets.symmetric(horizontal: 10),
|
|
|
child: Icon(Icons.cancel, size: 18, color: Color(0xFF94A3B8)),
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
if (sortedCities.length > 1) ...[
|
|
|
10.height,
|
|
|
SizedBox(
|
|
|
height: 38,
|
|
|
child: ListView.separated(
|
|
|
scrollDirection: Axis.horizontal,
|
|
|
physics: const BouncingScrollPhysics(),
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 20),
|
|
|
itemCount: sortedCities.length + 1,
|
|
|
separatorBuilder: (_, __) => 8.width,
|
|
|
itemBuilder: (BuildContext _, int index) {
|
|
|
if (index == 0) {
|
|
|
bool isSelected = selectedCity == "ALL";
|
|
|
return GestureDetector(
|
|
|
onTap: () {
|
|
|
setSheetState(() {
|
|
|
selectedCity = "ALL";
|
|
|
});
|
|
|
},
|
|
|
child: Container(
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
|
alignment: Alignment.center,
|
|
|
decoration: BoxDecoration(
|
|
|
borderRadius: BorderRadius.circular(6),
|
|
|
color: isSelected ? MyColors.darkIconColor : MyColors.lightGreyEAColor,
|
|
|
),
|
|
|
child: '${LocaleKeys.allCities.tr()} (${locations.length})'.toText12(
|
|
|
color: isSelected ? MyColors.white : MyColors.black,
|
|
|
),
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
String cName = sortedCities[index - 1];
|
|
|
int cCount = cityCounts[cName] ?? 0;
|
|
|
bool isSelected = selectedCity == cName;
|
|
|
return GestureDetector(
|
|
|
onTap: () {
|
|
|
setSheetState(() {
|
|
|
selectedCity = cName;
|
|
|
});
|
|
|
},
|
|
|
child: Container(
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
|
alignment: Alignment.center,
|
|
|
decoration: BoxDecoration(
|
|
|
borderRadius: BorderRadius.circular(6),
|
|
|
color: isSelected ? MyColors.darkIconColor : MyColors.lightGreyEAColor,
|
|
|
),
|
|
|
child: '$cName ($cCount)'.toText12(
|
|
|
color: isSelected ? MyColors.white : MyColors.black,
|
|
|
),
|
|
|
),
|
|
|
);
|
|
|
},
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
12.height,
|
|
|
const Divider(height: 1, color: Color(0xFFF1F5F9)),
|
|
|
Flexible(
|
|
|
child: filtered.isEmpty
|
|
|
? Center(
|
|
|
child: Padding(
|
|
|
padding: const EdgeInsets.all(32),
|
|
|
child: Column(
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
children: [
|
|
|
const Icon(Icons.location_off_outlined, size: 44, color: Color(0xFF94A3B8)),
|
|
|
12.height,
|
|
|
LocaleKeys.noBranchesFound.tr().toText14(
|
|
|
isBold: true,
|
|
|
color: const Color(0xFF64748B),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
)
|
|
|
: ListView.separated(
|
|
|
shrinkWrap: true,
|
|
|
physics: const BouncingScrollPhysics(),
|
|
|
padding: const EdgeInsets.fromLTRB(20, 16, 20, 24),
|
|
|
itemCount: filtered.length,
|
|
|
separatorBuilder: (_, __) => 10.height,
|
|
|
itemBuilder: (BuildContext _, int index) {
|
|
|
return _buildLocationCard(filtered[index], isAr);
|
|
|
},
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
);
|
|
|
},
|
|
|
);
|
|
|
},
|
|
|
);
|
|
|
}
|
|
|
|
|
|
Future<void> _openMapForLocation(WalaPlusRetailerLocation loc) async {
|
|
|
bool hasCoordinates = loc.latitude != null &&
|
|
|
loc.longitude != null &&
|
|
|
loc.latitude != 0 &&
|
|
|
loc.longitude != 0;
|
|
|
|
|
|
Uri googleMapsUrl;
|
|
|
if (hasCoordinates) {
|
|
|
googleMapsUrl = Uri.parse("https://www.google.com/maps/search/?api=1&query=${loc.latitude},${loc.longitude}");
|
|
|
} else {
|
|
|
String query = "${loc.address ?? ''} ${loc.city ?? ''}".trim();
|
|
|
if (query.isEmpty) {
|
|
|
query = _retailer?.name ?? "";
|
|
|
}
|
|
|
googleMapsUrl = Uri.parse("https://www.google.com/maps/search/?api=1&query=${Uri.encodeComponent(query)}");
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
if (await canLaunchUrl(googleMapsUrl)) {
|
|
|
await launchUrl(googleMapsUrl, mode: LaunchMode.externalApplication);
|
|
|
} else {
|
|
|
await launchUrl(googleMapsUrl);
|
|
|
}
|
|
|
} catch (e) {
|
|
|
debugPrint("Error launching maps: $e");
|
|
|
}
|
|
|
}
|
|
|
|
|
|
Widget _buildContactSection(bool isAr) {
|
|
|
String? email = _retailer?.resolvedEmail;
|
|
|
String? phone = _retailer?.resolvedPhone;
|
|
|
|
|
|
if ((email == null || email.isEmpty) && (phone == null || phone.isEmpty)) {
|
|
|
return const SizedBox.shrink();
|
|
|
}
|
|
|
|
|
|
return Column(
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
18.height,
|
|
|
LocaleKeys.contactInformation.tr().toText16(
|
|
|
isBold: true,
|
|
|
color: const Color(0xFF1E293B),
|
|
|
),
|
|
|
10.height,
|
|
|
if (phone != null && phone.isNotEmpty) ...[
|
|
|
InkWell(
|
|
|
onTap: () async {
|
|
|
try {
|
|
|
Uri phoneUri = Uri(scheme: 'tel', path: phone);
|
|
|
await launchUrl(phoneUri);
|
|
|
} catch (e) {
|
|
|
debugPrint("Error launching phone: $e");
|
|
|
}
|
|
|
},
|
|
|
borderRadius: BorderRadius.circular(14),
|
|
|
child: Container(
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
|
|
|
decoration: BoxDecoration(
|
|
|
color: Colors.white,
|
|
|
borderRadius: BorderRadius.circular(14),
|
|
|
boxShadow: [
|
|
|
BoxShadow(
|
|
|
color: const Color(0xff000000).withOpacity(.05),
|
|
|
blurRadius: 10,
|
|
|
offset: const Offset(0, 3),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
child: Row(
|
|
|
children: [
|
|
|
Container(
|
|
|
padding: const EdgeInsets.all(8),
|
|
|
decoration: BoxDecoration(
|
|
|
color: const Color(0xFF168A89).withOpacity(0.12),
|
|
|
borderRadius: BorderRadius.circular(8),
|
|
|
),
|
|
|
child: const Icon(Icons.phone_outlined, color: Color(0xFF168A89), size: 20),
|
|
|
),
|
|
|
12.width,
|
|
|
Expanded(
|
|
|
child: Column(
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
LocaleKeys.phoneNumber.tr().toText12(
|
|
|
color: const Color(0xFF64748B),
|
|
|
),
|
|
|
const SizedBox(height: 2),
|
|
|
phone.toText14(
|
|
|
color: const Color(0xFF1E293B),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
Icon(
|
|
|
isAr ? Icons.arrow_back_ios_rounded : Icons.arrow_forward_ios_rounded,
|
|
|
size: 13,
|
|
|
color: const Color(0xFF94A3B8),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
if (email != null && email.isNotEmpty) 10.height,
|
|
|
],
|
|
|
if (email != null && email.isNotEmpty) ...[
|
|
|
InkWell(
|
|
|
onTap: () async {
|
|
|
try {
|
|
|
Uri emailUri = Uri(scheme: 'mailto', path: email);
|
|
|
await launchUrl(emailUri);
|
|
|
} catch (e) {
|
|
|
debugPrint("Error launching email: $e");
|
|
|
}
|
|
|
},
|
|
|
borderRadius: BorderRadius.circular(14),
|
|
|
child: Container(
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
|
|
|
decoration: BoxDecoration(
|
|
|
color: Colors.white,
|
|
|
borderRadius: BorderRadius.circular(14),
|
|
|
boxShadow: [
|
|
|
BoxShadow(
|
|
|
color: const Color(0xff000000).withOpacity(.05),
|
|
|
blurRadius: 10,
|
|
|
offset: const Offset(0, 3),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
child: Row(
|
|
|
children: [
|
|
|
Container(
|
|
|
padding: const EdgeInsets.all(8),
|
|
|
decoration: BoxDecoration(
|
|
|
color: const Color(0xFF168A89).withOpacity(0.12),
|
|
|
borderRadius: BorderRadius.circular(8),
|
|
|
),
|
|
|
child: const Icon(Icons.email_outlined, color: Color(0xFF168A89), size: 20),
|
|
|
),
|
|
|
12.width,
|
|
|
Expanded(
|
|
|
child: Column(
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
LocaleKeys.email.tr().toText12(
|
|
|
color: const Color(0xFF64748B),
|
|
|
),
|
|
|
const SizedBox(height: 2),
|
|
|
email.toText14(
|
|
|
color: const Color(0xFF1E293B),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
Icon(
|
|
|
isAr ? Icons.arrow_back_ios_rounded : Icons.arrow_forward_ios_rounded,
|
|
|
size: 13,
|
|
|
color: const Color(0xFF94A3B8),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
],
|
|
|
);
|
|
|
}
|
|
|
|
|
|
String _cleanHtml(String text) {
|
|
|
String decoded = WalaPlusRetailerModel.decodeUnicodeString(text) ?? text;
|
|
|
return decoded
|
|
|
.replaceAll(RegExp(r'<br\s*/?>', caseSensitive: false), '\n')
|
|
|
.replaceAll(RegExp(r'</p>', caseSensitive: false), '\n\n')
|
|
|
.replaceAll(RegExp(r'<[^>]*>'), '')
|
|
|
.replaceAll(' ', ' ')
|
|
|
.replaceAll('&', '&')
|
|
|
.replaceAll('"', '"')
|
|
|
.replaceAll(''', "'")
|
|
|
.replaceAll('<', '<')
|
|
|
.replaceAll('>', '>')
|
|
|
.trim();
|
|
|
}
|
|
|
}
|