chore: add new design for new routes

mobile/src/screens/client/CheckoutScreen.tsx

@@ -34,6 +34,8 @@ export default function CheckoutScreen() {
     const [error, setError] = useState<string | null>(null);
     const [showConfirmation, setShowConfirmation] = useState(false);
     const [confirmationData, setConfirmationData] = useState<any>(null);
+    const [invalidAddressModal, setInvalidAddressModal] = useState(false);
+    const [suggestedAddress, setSuggestedAddress] = useState("");
 
     const handleCheckout = async () => {
         if (!nom.trim()) {
@@ -70,6 +72,9 @@ export default function CheckoutScreen() {
                 setConfirmationData(res);
                 setShowConfirmation(true);
                 await refreshCart();
+            } else if (res.invalid_address && res.suggested_address) {
+                setSuggestedAddress(res.suggested_address);
+                setInvalidAddressModal(true);
             } else {
                 setError(res.message || "Erreur lors de la commande");
             }
@@ -153,6 +158,39 @@ export default function CheckoutScreen() {
                     fontSize: fontSize.sm,
                     textAlign: "center",
                 },
+                invalidAddrContent: { gap: spacing.m },
+                invalidAddrIconContainer: { alignItems: "center" },
+                invalidAddrIconCircle: {
+                    width: 64,
+                    height: 64,
+                    borderRadius: 32,
+                    backgroundColor: "rgba(251,191,36,0.12)",
+                    justifyContent: "center",
+                    alignItems: "center",
+                },
+                invalidAddrLabel: {
+                    color: colors.textSecondary,
+                    fontSize: fontSize.sm,
+                    textAlign: "center",
+                },
+                invalidAddrSuggestion: {
+                    backgroundColor: colors.bgInput,
+                    borderRadius: 10,
+                    padding: spacing.m,
+                    borderWidth: 1,
+                    borderColor: colors.borderLight,
+                },
+                invalidAddrSuggestionText: {
+                    color: colors.textPrimary,
+                    fontSize: fontSize.md,
+                    fontWeight: fontWeight.semibold,
+                    textAlign: "center",
+                },
+                invalidAddrActions: {
+                    flexDirection: "row",
+                    gap: spacing.m,
+                    marginTop: spacing.s,
+                },
                 confirmContent: { gap: spacing.m },
                 confirmIconContainer: { alignItems: "center" },
                 confirmIconCircle: {
@@ -354,6 +392,53 @@ export default function CheckoutScreen() {
                 />
             </ScrollView>
 
+            <Modal
+                visible={invalidAddressModal}
+                onClose={() => setInvalidAddressModal(false)}
+                title="Adresse invalide"
+                icon="warning-outline"
+                iconColor={colors.warning}
+            >
+                <View style={styles.invalidAddrContent}>
+                    <View style={styles.invalidAddrIconContainer}>
+                        <View style={styles.invalidAddrIconCircle}>
+                            <Ionicons
+                                name="location-outline"
+                                size={32}
+                                color={colors.warning}
+                            />
+                        </View>
+                    </View>
+                    <Text style={styles.invalidAddrLabel}>
+                        L'adresse saisie n'est pas reconnue. Voulez-vous utiliser l'adresse correcte suggérée ?
+                    </Text>
+                    <View style={styles.invalidAddrSuggestion}>
+                        <Text style={styles.invalidAddrSuggestionText}>
+                            {suggestedAddress}
+                        </Text>
+                    </View>
+                    <View style={styles.invalidAddrActions}>
+                        <Button
+                            title="Modifier"
+                            variant="outline"
+                            size="md"
+                            onPress={() => setInvalidAddressModal(false)}
+                            style={{ flex: 1 }}
+                        />
+                        <Button
+                            title="Utiliser"
+                            variant="success"
+                            size="md"
+                            onPress={() => {
+                                setAddress(suggestedAddress);
+                                setInvalidAddressModal(false);
+                            }}
+                            style={{ flex: 1 }}
+                        />
+                    </View>
+                </View>
+            </Modal>
+
             <Modal
                 visible={showConfirmation}
                 onClose={handleConfirmClose}