water-sys/app/screens/previewOrder/perviewOrder.tsx

import { View, Text, TouchableOpacity, StyleSheet, TextInput } from "react-native";
import useCreateOrderStore from "../../store/createOrder";
import BackIcon from "../../components/BackIcon";
import { useNavigation } from "@react-navigation/native";
import { useState, useEffect } from "react";

export const PreviewOrder = () => {
    const {orderData, setOrderData} = useCreateOrderStore();
    const navigation = useNavigation();
    const [phoneNumber, setPhoneNumber] = useState("");
    const [showPhoneInput, setShowPhoneInput] = useState(false);

    useEffect(() => {
        if (orderData?.payment_method === "Brainnel Pay(Mobile Money)") {
            setShowPhoneInput(true);
        } else {
            setShowPhoneInput(false);
        }
    }, [orderData?.payment_method]);

    const handleSubmit = () => {
        if (showPhoneInput && !phoneNumber) {
            // Show error or alert if needed
            console.log("Phone number is required for Mobile Money");
            return;
        }
        
        if (showPhoneInput) {
            setOrderData({ ...orderData, mobile_money_phone: phoneNumber });
        }
        
        console.log("orderData", orderData);
        // Add your submission logic here
    }
    
  return (
    <View style={styles.container}>
        <View style={styles.titleContainer}>
        <View style={styles.backIconContainer}>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <BackIcon size={20} />
          </TouchableOpacity>
        </View>

        <Text style={styles.titleHeading}>立即支付</Text>
      </View>

      {/* Payment Details */}
      <View style={styles.section}>

        {showPhoneInput && (
          <View style={styles.phoneInputContainer}>
            <Text style={styles.phoneInputLabel}>请输入手机号码</Text>
            <TextInput
              style={styles.phoneInput}
              value={phoneNumber}
              onChangeText={setPhoneNumber}
              placeholder="输入手机号码"
              keyboardType="phone-pad"
            />
          </View>
        )}

        {/* Order Details Card */}
        <View style={styles.card}>
          <Text style={styles.cardTitle}>订单详情</Text>
          <View style={styles.detailRow}>
            <Text style={styles.detailLabel}>收货地址:</Text>
            <Text style={styles.detailValue} numberOfLines={2} ellipsizeMode="tail">{orderData?.address || "请选择地址"}</Text>
          </View>
          <View style={styles.detailRow}>
            <Text style={styles.detailLabel}>订单金额:</Text>
            <Text style={styles.detailValue}>{orderData?.amount ? `${orderData.currency || ''} ${orderData.amount}` : "N/A"}</Text>
          </View>
          <View style={styles.detailRow}>
            <Text style={styles.detailLabel}>运费:</Text>
            <Text style={styles.detailValue}>{orderData?.shipping_fee ? `${orderData.currency || ''} ${orderData.shipping_fee}` : "N/A"}</Text>
          </View>
          {orderData?.whatsapp_phone && (
            <View style={styles.detailRow}>
              <Text style={styles.detailLabel}>WhatsApp:</Text>
              <Text style={styles.detailValue}>{orderData.whatsapp_phone}</Text>
            </View>
          )}
        </View>
      </View>

     <View style={styles.submitButtonContainer}>
            <TouchableOpacity
              style={[
                styles.primaryButtonStyle,
                (!showPhoneInput || (showPhoneInput && phoneNumber)) ? {} : styles.disabledButtonStyle
              ]}
              onPress={handleSubmit}
              disabled={showPhoneInput && !phoneNumber}
            >
              <Text style={styles.buttonText}>确认支付</Text>
            </TouchableOpacity>
          </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
  },
  submitButtonContainer: {
    paddingRight: 11,
    paddingLeft: 11,
    marginTop: 20,
    marginBottom: 20,
  },
  primaryButtonStyle: {
    width: "100%",
    height: 50,
    justifyContent: "center",
    alignItems: "center",
    fontWeight: "600",
    fontSize: 16,
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "white",
    backgroundColor: "#002fa7",
    borderWidth: 0,
    borderRadius: 25,
  },
  buttonText: {
    color: "white",
    fontWeight: "600",
    fontSize: 16,
    lineHeight: 22,
    fontFamily: "PingFang SC",
  },
  selectedCountryText: {
    padding: 0,
    margin: 0,
    fontWeight: "500",
    fontSize: 16,
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "#646472",
  },
  disabledButtonStyle: {
    backgroundColor: "#ccc",
  },
  titleContainer: {
    width: "100%",
    padding: 15,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundColor: "#fff",

  },
  backIconContainer: {
    position: "absolute",
    left: 15,
    backgroundColor: "#fff",

  },
  titleHeading: {
    fontWeight: "600",
    fontSize: 20,
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "black",

  },
  // Order Summary Styles
  section: {
    backgroundColor: "#fff",
    borderRadius: 8,
    paddingHorizontal: 15,
    marginTop: 15,
    paddingVertical: 12,
  },
  sectionTitle: {
    fontWeight: "600",
    fontSize: 16,
    marginBottom: 8,
    color: "#333",
  },
  paymentMethod: {
    fontSize: 15,
    color: "#666",
    marginBottom: 10,
  },
  phoneInputContainer: {
    marginTop: 10,
    marginBottom: 10,
  },
  phoneInputLabel: {
    fontSize: 14,
    color: "#333",
    marginBottom: 5,
  },
  phoneInput: {
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 8,
    padding: 10,
    fontSize: 16,
    backgroundColor: "#f9f9f9",
  },
  // Card styles for order details
  card: {
    backgroundColor: "#ffffff", // White background for the card
    borderRadius: 12,          // Rounded corners
    // marginHorizontal: 15,   // Removed to align with parent section padding
    marginTop: 20,             // Margin from the top element
    padding: 18,               // Inner padding
    // shadowColor: "#000",    // Removed shadow
    // shadowOffset: {
    //   width: 0,
    //   height: 2,
    // },
    // shadowOpacity: 0.1,
    // shadowRadius: 3.84,
    // elevation: 5,           // Removed elevation
    borderWidth: 1,            // Add a border to define the card area
    borderColor: "#e0e0e0",    // Light border color
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#333333",
    marginBottom: 15,          // Space below the title
    fontFamily: "PingFang SC",
  },
  detailRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-start", // Align items to the start for multi-line values
    paddingVertical: 8,      // Vertical padding for each row
    borderBottomWidth: 1,
    borderBottomColor: "#f0f0f0", // Lighter separator line
  },
  detailLabel: {
    fontSize: 15,
    color: "#555555",        // Slightly lighter label color
    fontFamily: "PingFang SC",
    fontWeight: '500',
    marginRight: 10,          // Space between label and value
  },
  detailValue: {
    fontSize: 15,
    color: "#333333",        // Darker value color
    fontFamily: "PingFang SC",
    textAlign: 'right',
    flexShrink: 1,            // Allow text to shrink and wrap
  },
});