diff --git a/mobile/src/screens/client/CartScreen.tsx b/mobile/src/screens/client/CartScreen.tsx index 6741b2ce..a37254f7 100644 --- a/mobile/src/screens/client/CartScreen.tsx +++ b/mobile/src/screens/client/CartScreen.tsx @@ -3,6 +3,7 @@ import { View, Text, FlatList, + ScrollView, Image, TouchableOpacity, StyleSheet, @@ -58,6 +59,7 @@ export default function CartScreen() { const [loadingMedia, setLoadingMedia] = useState(false); const [removeId, setRemoveId] = useState(null); const [showClearModal, setShowClearModal] = useState(false); + const [showRecapModal, setShowRecapModal] = useState(false); useFocusEffect( useCallback(() => { @@ -249,6 +251,94 @@ export default function CartScreen() { borderTopWidth: 1, borderTopColor: colors.border, }, + recapScroll: { + maxHeight: 280, + }, + recapItem: { + flexDirection: "row", + alignItems: "center", + paddingVertical: spacing.m, + borderBottomWidth: 1, + borderBottomColor: colors.borderLight, + }, + recapItemImage: { + width: 44, + height: 44, + borderRadius: borderRadius.sm, + }, + recapItemImagePlaceholder: { + width: 44, + height: 44, + borderRadius: borderRadius.sm, + backgroundColor: colors.bgInput, + justifyContent: "center", + alignItems: "center", + }, + recapItemInfo: { + flex: 1, + marginLeft: spacing.m, + }, + recapItemName: { + color: colors.textWhite, + fontSize: fontSize.sm, + fontWeight: fontWeight.semibold, + }, + recapItemQty: { + color: colors.textMuted, + fontSize: fontSize.xs, + marginTop: 2, + }, + recapItemPrice: { + color: colors.success, + fontSize: fontSize.sm, + fontWeight: fontWeight.bold, + }, + recapDivider: { + height: 1, + backgroundColor: colors.border, + marginVertical: spacing.l, + }, + recapTotalRow: { + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + marginBottom: spacing.xs, + }, + recapTotalLabel: { + color: colors.textSecondary, + fontSize: fontSize.md, + fontWeight: fontWeight.medium, + }, + recapTotalValue: { + color: colors.success, + fontSize: fontSize.xxl, + fontWeight: fontWeight.bold, + }, + recapArticlesCount: { + color: colors.textMuted, + fontSize: fontSize.xs, + }, + recapNote: { + flexDirection: "row", + alignItems: "center", + gap: spacing.s, + backgroundColor: colors.accent + "18", + borderRadius: borderRadius.sm, + borderWidth: 1, + borderColor: colors.accent + "44", + padding: spacing.m, + marginBottom: spacing.l, + }, + recapNoteText: { + color: colors.accentLight, + fontSize: fontSize.xs, + flex: 1, + lineHeight: 16, + }, + recapActions: { + flexDirection: "row", + gap: spacing.m, + }, totalRow: { flexDirection: "row", justifyContent: "space-between", @@ -375,8 +465,8 @@ export default function CartScreen() {