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>

      {/* Order Details */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>订单详情</Text>
        <View style={styles.detailItem}>
          <Text style={styles.detailLabel}>收货地址:</Text>
          <Text style={styles.detailValue}>{orderData?.address || "请选择地址"}</Text>
        </View>
        <View style={styles.detailItem}>
          <Text style={styles.detailLabel}>订单金额:</Text>
          <Text style={styles.detailValue}>{orderData?.amount || "N/A"}</Text>
        </View>
        <View style={styles.detailItem}>
          <Text style={styles.detailLabel}>运费:</Text>
          <Text style={styles.detailValue}>{orderData?.shipping_fee || "N/A"}</Text>
        </View>
        <View style={styles.detailItem}>
          <Text style={styles.detailLabel}>WhatsApp 手机号:</Text>
          <Text style={styles.detailValue}>{orderData?.whatsapp_phone || "N/A"}</Text>
        </View>
      </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>
        )}
      </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",
  },
  detailItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 6,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0', // Lighter separator line
  },
  detailLabel: {
    fontSize: 15,
    color: '#333333',
    fontFamily: "PingFang SC",
    fontWeight: '500',
  },
  detailValue: {
    fontSize: 15,
    color: '#666666',
    fontFamily: "PingFang SC",
    textAlign: 'right',
    flexShrink: 1, // Allow text to shrink if needed
  },
});