sdp-tech#25 feat: add quotation sent modal

SJ-Kwak · Feb 17, 2024 · 3590cc1 · 3590cc1
1 parent 7341dc6
commit 3590cc1
Show file tree

Hide file tree

Showing 7 changed files with 176 additions and 5 deletions.
diff --git a/src/assets/rocket.png b/src/assets/rocket.png
diff --git a/src/components/Home/Quotation/InputInfo.tsx b/src/components/Home/Quotation/InputInfo.tsx
@@ -0,0 +1,57 @@
+import { SafeAreaView, TouchableOpacity, View } from 'react-native';
+import styled from 'styled-components/native';
+import { getStatusBarHeight } from 'react-native-safearea-height';
+import { Body14M, Subtitle16B, Title20B } from '../../../styles/GlobalText';
+import { BLACK, PURPLE } from '../../../styles/GlobalColor';
+import Arrow from '../../../assets/common/Arrow.svg';
+import InputBox from '../../../common/InputBox';
+import BottomButton from '../../../common/BottomButton';
+
+interface InputInfoProps {
+  onClose: () => void;
+  onNavigate: () => void;
+}
+
+export interface InfoProps {
+  name: string;
+  tel: string;
+  address: string;
+}
+
+const statusBarHeight = getStatusBarHeight(true);
+
+const InputInfo = ({ onClose, onNavigate }: InputInfoProps) => {
+  return (
+    <SafeAreaView>
+      <BackButton onPress={onClose}>
+        <Arrow color={BLACK} />
+      </BackButton>
+      <Title20B style={{textAlign: 'center'}}>내 정보</Title20B>
+      <View style={{padding: 20, marginVertical: 30}}>
+        <Subtitle16B>이름</Subtitle16B>
+        <InputBox style={{height: 40, paddingVertical: 10, marginTop: 10, borderColor: PURPLE}} placeholder='입력해주세요' />
+        <Subtitle16B style={{marginTop: 25}}>연락처</Subtitle16B>
+        <InputBox style={{height: 40, paddingVertical: 10, marginTop: 10, borderColor: PURPLE}} placeholder='입력해주세요' />
+        <Subtitle16B style={{marginTop: 25}}>주소</Subtitle16B>
+        <InputBox style={{height: 40, paddingVertical: 10, marginTop: 10, borderColor: PURPLE}} />
+        <TouchableOpacity style={{position: 'absolute', top: 260, right: 30}}>
+          <Body14M style={{color: PURPLE}}>주소 찾기</Body14M>
+        </TouchableOpacity>
+        <InputBox style={{height: 40, paddingVertical: 10, marginTop: 10, borderColor: PURPLE}} placeholder='입력해주세요' />
+      </View>
+      <View style={{paddingHorizontal: 45, paddingVertical: 20, marginTop: 250}}>
+        <BottomButton value='다음' pressed={false} onPress={onNavigate} />
+      </View>
+    </SafeAreaView>
+  )
+}
+
+const BackButton = styled.TouchableOpacity`
+  padding: 10px;
+  position: absolute;
+  left: 0px;
+  top: ${statusBarHeight-10}px;
+  z-index: 1;
+`
+
+export default InputInfo;
diff --git a/src/components/Home/Quotation/QuotationForm.tsx b/src/components/Home/Quotation/QuotationForm.tsx
@@ -1,5 +1,5 @@
 import { SetStateAction, useState, Dispatch, useEffect } from 'react';
-import { ScrollView, View, Text, TouchableOpacity, ImageBackground } from 'react-native';
+import { ScrollView, View, Text, TouchableOpacity, ImageBackground, Modal } from 'react-native';
 import styled from 'styled-components/native';
 import { BLACK, LIGHTGRAY, PURPLE } from '../../../styles/GlobalColor';
 import { Body14M, Body16M, Caption11M, Caption12M, Subtitle16B, Subtitle18B, Subtitle18M, Title20B } from '../../../styles/GlobalText';
@@ -18,6 +18,8 @@ import Search from '../../../assets/common/Search.svg';
 import Photo from '../../../assets/common/Photo.svg';
 import PhotoOptions, { PhotoResultProps } from '../../../common/PhotoOptions';
 import Carousel from '../../../common/Carousel';
+import InputInfo from './InputInfo';
+import Rejection from './Rejection';
 
 const statusBarHeight = getStatusBarHeight(true);
 
@@ -49,6 +51,7 @@ const QuotationForm = ({ navigation, route }: StackScreenProps<HomeStackParams,
   const [text, setText] = useState<string>('');
   const [photos, setPhotos] = useState<PhotoResultProps[]>([]);
   const [refPhotos, setRefPhotos] = useState<PhotoResultProps[]>([]);
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
 
   // 한 줄에 2개씩 아이템 배치
   const splitArrayIntoPairs = (arr: any[], pairSize: number) => {
@@ -167,8 +170,12 @@ const QuotationForm = ({ navigation, route }: StackScreenProps<HomeStackParams,
         </FilterBox>
       </View>
       <View style={{paddingHorizontal: 45, paddingVertical: 20}}>
-        <BottomButton value='다음' pressed={false} onPress={() => {}} />
+        <BottomButton value='다음' pressed={false} onPress={() => setModalVisible(true)} />
       </View>
+      <Modal visible={modalVisible}>
+        {/* 소비자일 경우 */}
+        <InputInfo onClose={() => setModalVisible(false)} onNavigate={() => { setModalVisible(false); navigation.navigate('QuotationPage')}} />
+      </Modal>
     </ScrollView>
   )
 }

diff --git a/src/components/Home/Quotation/QuotationPage.tsx b/src/components/Home/Quotation/QuotationPage.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ScrollView, View, Text, TouchableOpacity, ImageBackground, Dimensions } from 'react-native';
+import { ScrollView, View, Text, TouchableOpacity, ImageBackground, Dimensions, Modal, Image } from 'react-native';
 import styled from 'styled-components/native';
 import { getStatusBarHeight } from 'react-native-safearea-height';
 
@@ -13,11 +13,20 @@ import { Body14R, Body16M, Caption11M, Caption12M, Filter14M, Subtitle16M, Title
 import Carousel from '../../../common/Carousel';
 import CheckBox from '../../../common/CheckBox';
 import BottomButton from '../../../common/BottomButton';
+import Rejection from './Rejection';
 
 const statusBarHeight = getStatusBarHeight(true);
 const { width, height } = Dimensions.get('window');
 
 const QuotationPage = ({ navigation, route }: StackScreenProps<HomeStackParams, 'QuotationPage'>) => {
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+  const [finishModal, setFinishModal] = useState<boolean>(false);
+  const showModal = () => {
+    setFinishModal(true);
+    setTimeout(() => {
+      setFinishModal(false);
+    }, 3000);
+  };
   const quotation = [
     {key: '재질', data: '니트'},
     {key: '희망 사이즈', data: '여성 55'},
@@ -107,11 +116,26 @@ const QuotationPage = ({ navigation, route }: StackScreenProps<HomeStackParams,
           <CheckBox style={{paddingHorizontal: 30, alignSelf: 'center', marginVertical: 5}} pressed={false} onPress={() => {}} text='리폼 제품이 서비스 내의 포트폴리오에 사용되는 것에 동의합니다.' />
         </View>
         <View style={{padding: 10, marginVertical: 30}}>
-          <BottomButton value={'견적서 보내기'} pressed={false} onPress={() => {}} />
+          <BottomButton value={'견적서 보내기'} pressed={false}
+            // onPress={showModal}
+            onPress={() => navigation.navigate('SentQuotation')}
+            />
           <View style={{marginVertical: 5}} />
-          <BottomButton value={'취소하기'} pressed={true} onPress={() => {}} />
+          <BottomButton value={'취소하기'} pressed={true} onPress={() => setModalVisible(true)} />
         </View>
       </ImageBackground>
+      <Modal visible={finishModal} transparent={true}>
+        {/* 리폼러일 경우 */}
+        <View style={{backgroundColor: 'black', opacity: 0.8, height: '100%', alignItems: 'center', justifyContent: 'center'}}>
+          <Title20B style={{color: 'white'}}>카톡 링크를 전송했어요!</Title20B>
+          <Image source={require('../../../assets/rocket.png')} style={{width: 230, height: 230}} />
+          <Subtitle16M style={{color: 'white', textAlign: 'center'}}>의뢰인이 카톡 링크를 통해{'\n'}상담을 신청할 거예요</Subtitle16M>
+        </View>
+      </Modal>
+      <Modal visible={modalVisible}>
+        {/* 리폼러일 경우 */}
+        <Rejection onClose={() => setModalVisible(false)} />
+      </Modal>
     </ScrollView>
   )
 }

diff --git a/src/components/Home/Quotation/Rejection.tsx b/src/components/Home/Quotation/Rejection.tsx
@@ -0,0 +1,57 @@
+import { FlatList, SafeAreaView, TouchableOpacity, View } from 'react-native';
+import styled from 'styled-components/native';
+import { getStatusBarHeight } from 'react-native-safearea-height';
+import { Body14M, Body14R, Subtitle16B, Subtitle18B, Subtitle18M, Title20B } from '../../../styles/GlobalText';
+import { BLACK, LIGHTGRAY, PURPLE } from '../../../styles/GlobalColor';
+import Arrow from '../../../assets/common/Arrow.svg';
+import InputBox from '../../../common/InputBox';
+import BottomButton from '../../../common/BottomButton';
+
+interface RejectionProps {
+  onClose: () => void;
+}
+
+const statusBarHeight = getStatusBarHeight(true);
+
+const Rejection = ({ onClose }: RejectionProps) => {
+  return (
+    <SafeAreaView>
+      <BackButton onPress={onClose}>
+        <Arrow color={BLACK} />
+      </BackButton>
+      <Title20B style={{textAlign: 'center'}}>견적서 거절 사유</Title20B>
+      <View style={{padding: 20, marginVertical: 30, alignItems: 'center'}}>
+        <Subtitle18B>견적서를 거절한 이유가 무엇인가요?</Subtitle18B>
+        <Body14R>다음 견적서를 작성할 때 많은 도움이 돼요.</Body14R>
+        <FlatList
+          data={[...new Array(6).keys()]}
+          style={{height: 400}}
+          renderItem={({item}: any) => {
+            return (
+              <TouchableOpacity style={{borderRadius: 8, borderColor: PURPLE, borderWidth: 1, backgroundColor: 'white', paddingHorizontal: 55, paddingVertical: 25, marginVertical: 5}}>
+                <Subtitle18M style={{color: PURPLE}}>요청하신 리폼을 할 수 없는 의류</Subtitle18M>
+              </TouchableOpacity>
+            )
+          }}
+         />
+      </View>
+      <View style={{position: 'absolute', width: '100%', bottom: -200, borderTopWidth: 8, borderColor: '#EAEAEA', zIndex: 1, backgroundColor: 'white', paddingHorizontal: 20}}>
+        <Body14R style={{textAlign: 'center', marginVertical: 10}}>추가적인 의견이나 거절 사유가 있다면 말씀해주세요.</Body14R>
+        <InputBox placeholder='입력해 주세요' long />
+        <View style={{paddingHorizontal: 30, paddingVertical: 20}}>
+          <BottomButton value='거절 사유 보내기' pressed={false} onPress={() => {}} />
+        </View>
+      </View>
+    </SafeAreaView>
+  )
+}
+
+const BackButton = styled.TouchableOpacity`
+  padding: 10px;
+  position: absolute;
+  left: 0px;
+  top: ${statusBarHeight-10}px;
+  z-index: 1;
+`
+
+export default Rejection;
diff --git a/src/components/Home/Quotation/SentQuotation.tsx b/src/components/Home/Quotation/SentQuotation.tsx
@@ -0,0 +1,23 @@
+import { SafeAreaView, Image, View, TouchableOpacity } from "react-native"
+import { Body14M, Body16B, Subtitle16B, Title20B } from "../../../styles/GlobalText"
+import Arrow from '../../../assets/common/Arrow.svg';
+import { GREEN } from "../../../styles/GlobalColor";
+
+const SentQuotation = () => {
+  return (
+    <SafeAreaView style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
+      <Title20B style={{marginBottom: 10, textAlign: 'center'}}>리폼러에게 견적서를{'\n'}전달했어요!</Title20B>
+      <Image source={require('../../../assets/rocket.png')} style={{width: 230, height: 230}} />
+      <Subtitle16B style={{textAlign: 'center', marginTop: 10}}>리폼러가 견적서를 확인 후,{'\n'}카톡으로 연락할거에요~{'\n'}느낌의 안내문</Subtitle16B>
+      <TouchableOpacity style={{flexDirection: 'row', borderRadius: 5, backgroundColor: GREEN, marginTop: 100, width: '90%', alignItems: 'center', justifyContent: 'space-between', paddingRight: 20}}>
+        <View style={{padding: 16}}>
+          <Body14M>이 마켓이 마음에 들었나요?</Body14M>
+          <Body16B>SDP 마켓의 다른 서비스 보러가기</Body16B>
+        </View>
+        <Arrow color={'black'} transform={[{ rotate: '180deg' }]} />
+      </TouchableOpacity>
+    </SafeAreaView>
+  )
+}
+
+export default SentQuotation;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -14,6 +14,7 @@ import CustomHeader from '../common/CustomHeader';
 import MarketTabView from '../components/Home/Market/MarketTabView';
 import QuotationForm from '../components/Home/Quotation/QuotationForm';
 import QuotationPage from '../components/Home/Quotation/QuotationPage';
+import SentQuotation from '../components/Home/Quotation/SentQuotation';
 import TempStorage from '../components/Home/Market/TempStorage';
 import ServiceRegistrationPage from '../components/Home/Market/ServiceRegistration';
 import ServiceDetailPageScreen from '../components/Home/Market/ServiceDetailPage';
@@ -31,6 +32,7 @@ export type HomeStackParams = {
   GoodsDetailPage: undefined;
   QuotationForm: undefined;
   QuotationPage: undefined;
+  SentQuotation: undefined;
   ServiceRegistrationPage: undefined;
   GoodsRegistrationPage: undefined;
   TempStorage: undefined;
@@ -55,6 +57,7 @@ const HomeScreen = ({
       <HomeStack.Screen name='ServiceRegistrationPage' component={ServiceRegistrationPage} />
       <HomeStack.Screen name='QuotationForm' component={QuotationForm} />
       <HomeStack.Screen name='QuotationPage' component={QuotationPage} />
+      <HomeStack.Screen name='SentQuotation' component={SentQuotation} />
       <HomeStack.Screen name='GoodsDetailPage' component={GoodsDetailPageScreen} />
       <HomeStack.Screen name='GoodsRegistrationPage' component={GoodsRegistrationPage} />
       <HomeStack.Screen name='TempStorage' component={TempStorage} />