water-sys/app/screens/InquiryScreen.tsx

import React from 'react';
import { View, Text, Image, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
import BackIcon from '../components/BackIcon';
import fontSize from '../utils/fontsizeUtils';
import { LinearGradient } from 'expo-linear-gradient';
import widthUtils from '../utils/widthUtils';

export const InquiryScreen = () => {
  return (
    <View style={styles.container}>
      <View style={styles.productInquirySection1}>
        <LinearGradient
          colors={['#C8DFFF', '#ECF5FF' ]}
          style={styles.headerGradient}
          start={{ x: 0, y: 0 }}
          end={{ x: 0, y: 1 }}
        >
          <View>
            <View style={styles.titleContainer}>
              <View style={styles.title}>
                <BackIcon size={fontSize(24)}></BackIcon>
              </View>
              <View style={styles.titleText}>
                <Text style={styles.titleText}>图片询盘</Text>
              </View>
            </View>
            <View style={styles.heardContainer}>
              <View>
                <Text style={styles.heardContainer1Text}>通过上传图片，{'\n'}即可获取产品报价</Text>
              </View>
              <View>
                <Text style={styles.heardContainer1Img}>
                  <Image source={require('../../assets/img/image_7a9fbefc.png')} style={styles.heardContainer1Img}></Image>
                </Text>
              </View>
            </View>
          </View>
        </LinearGradient>
        
        <View style={styles.productQuoteSection}>
          <View style={styles.productInfoContainer}>
            <View style={styles.productImageUploadSection}>
              <View style={styles.productInfoContainer1}>
                <Image 
                  source={require('../../assets/img/image_fac2b0a9.png')} 
                  style={styles.productImageIcon} 
                  resizeMode="cover"
                />
                <View style={styles.productQuoteContainer}>
                  <Text style={styles.productInfoHeading}>
                    Obtenir un devis de produit via une image
                  </Text>
                  <Text style={styles.productInfoMessage1}>
                    Téléchargez une image du produit, {'\n'}et nous vous fournirons un devis détaillé ainsi{'\n'}que des informations sur le produit.
                  </Text>
                </View>
              </View>
              <View style={styles.photoUploadContainer}>
                <TouchableOpacity style={styles.photoUploadContainer1}>
                  <LinearGradient
                    colors={['#F5F9FF', '#D8E8FF', '#B9D6FF']}
                    style={styles.gradientBackground}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 0, y: 1 }}
                  >
                    <View style={styles.photoUploadPromptContainer}>
                      <Text style={styles.centerHeadingBoldWhite}>
                        Prendre une photo ou{'\n'}télécharger une image
                      </Text>
                    </View>
                  </LinearGradient>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
  },
  productInquirySection1: {
    flexDirection: 'column',
    alignItems: 'stretch',
    paddingBottom: 390,
    backgroundColor: '#f0f0f0',
  },
  titleContainer:{
    paddingLeft: 16,
    paddingTop: 16,
    flexDirection: 'row',
  },
  heardContainer:{
    paddingLeft: 16,
    paddingTop: 16,
    paddingRight: 16,
    flexDirection: 'row',
    justifyContent:'space-between',
    alignItems:'center'
  },
  heardContainer1Text:{
    fontSize: 16,
    fontWeight: 400,
    color: '#000',
  },
  heardContainer1Img:{
    width:116,
    height:116,
  },
  title:{
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  titleText:{
    flex:1,
    fontSize: 20,
    fontWeight: 600,
    color: '#000',
    textAlign: 'center',
  },
  productInquirySection: {
    flexDirection: 'column',
    paddingTop: 3,
    paddingBottom: 51,
    paddingLeft: 16,
    backgroundColor: '#f0f0f0',
  },
  timeInfoContainer: {
    flexDirection: 'row',
    gap: 8,
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingLeft: 40,
  },
  timeDisplay: {
    width: 42,
    fontWeight: '600',
    fontSize: 17,
    color: 'black',
    textAlign: 'center',
  },
  productInquirySection2: {
    marginTop: 2,
  },
  productInquirySection3: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
  },
  imageUploadSection: {
    paddingBottom: 39,
  },
  svgContainer: {
    width: 24,
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
  productInfoMessage: {
    paddingRight: 13,
    paddingLeft: 13,
    marginTop: 33,
    fontWeight: '400',
    fontSize: 16,
    lineHeight: 22,
    color: 'black',
    textAlign: 'left',
  },
  productInquiryHeading: {
    paddingBottom: 118,
    fontWeight: '600',
    fontSize: 20,
    lineHeight: 22,
    color: 'black',
  },
  imageContainer: {
    width: 116,
    height: 116,
    borderWidth: 0,
  },
  statusPanel: {
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'center',
    width: '100%',
    paddingRight: 16,
    marginTop: -7,
  },
  requestQuoteSection: {
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'center',
    height: 50,
    paddingRight: 29,
    paddingLeft: 29,
    backgroundColor: '#0766e9',
  },
  centerHeadingWhite: {
    fontWeight: '600',
    fontSize: 16,
    lineHeight: 18,
    color: 'white',
    textAlign: 'center',
  },
  statusContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'center',
    justifyContent: 'flex-end',
    minWidth: 167,
    height: 45,
    paddingRight: 20,
    paddingLeft: 20,
    marginTop: -45,
    marginLeft: -17,
    backgroundColor: '#fbfbfb',
    borderTopRightRadius: 25,
  },
  inProgressLabel: {
    marginRight: 2,
    fontWeight: '600',
    fontSize: 14,
    lineHeight: 14,
    color: 'grey',
    textAlign: 'center',
  },
  statusIndicator: {
    justifyContent: 'center',
    maxWidth: '100%',
    height: 16,
    paddingRight: 3,
    paddingLeft: 3,
    backgroundColor: '#0766e9',
  },
  whiteTextHeading: {
    fontWeight: '600',
    fontSize: 12,
    lineHeight: 14,
    color: 'white',
  },
  completionBox: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'center',
    justifyContent: 'center',
    minWidth: 139,
    height: 40,
    paddingLeft: 20,
    marginTop: -40,
    marginLeft: 259,
    backgroundColor: '#e8e8e8',
    borderTopRightRadius: 25,
  },
  completedText: {
    fontWeight: '600',
    fontSize: 14,
    color: 'grey',
  },
  numberBox: {
    justifyContent: 'center',
    maxWidth: '100%',
    height: 16,
    paddingRight: 3,
    paddingLeft: 3,
    marginLeft: 2,
    backgroundColor: '#0766e9',
  },
  productQuoteSection: {
    paddingRight: 16,
    paddingLeft: 16,
  },
  productInfoContainer: {
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'center',
    backgroundColor: '#0766e9',
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
  },
  productImageUploadSection: {
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'flex-start',
    maxWidth: '100%',
    height: 300,
    paddingBottom: 24,
    backgroundColor: '#0766e9',
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
  },
  productInfoContainer1: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'flex-start',
    paddingTop: 24,
    paddingBottom: 22,
    paddingLeft: 29,
    paddingRight: 29,
  },
  productImageIcon: {
    width: 60,
    height: 60,
    borderWidth: 0,
  },
  productQuoteContainer: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'flex-start',
    marginTop: 15,
  },
  productInfoHeading: {
    fontWeight: '900',
    fontSize: 16,
    lineHeight: 20,
    color: 'white',
  },
  productInfoMessage1: {
    marginTop: 7,
    fontWeight: '400',
    fontSize: 12,
    lineHeight: 16,
    color: 'white',
    textAlign: 'center',
  },
  photoUploadContainer: {
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'center',
    height: widthUtils(80, 80).height,
    paddingRight: 29,
    paddingLeft: 29,
  },
  photoUploadContainer1: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 30,
    shadowColor: '#fd5000',
    shadowOffset: { width: 2, height: 3 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    elevation: 3,
    overflow: 'hidden',
    height: '100%',
  },
  gradientBackground: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  photoUploadPromptContainer: {
    flexDirection: 'column',
    alignItems: 'flex-end',
    justifyContent: 'center',
    height: '100%',
    paddingRight: 20,
  },
  centerHeadingBoldWhite: {
    fontWeight: '700',
    fontSize: 16,
    lineHeight: 20,
    color: '#002FA7',
    textAlign: 'right',
  },
  headerGradient: {
    paddingBottom: 20,
  },
});