ebanutsya

src/screens/OrderScreen/OrderScreen.tsx

@@ -5,108 +5,151 @@ import {RFPercentage} from "react-native-responsive-fontsize";
 import DTitle from "../../components/DTitle/DTitle";
 import BasicButton from "../../components/BasicButton/BasicButton";
 import Hyperlink from "../../components/Hyperlink/Hyperlink";
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import userApi from "../../api/userApi";
-
-type ArticleTextProps = {
-    article: number
-}
+import {StatusBar} from "expo-status-bar";
+import * as Progress from 'react-native-progress';
+import {useDispatch, useSelector} from "react-redux";
+import {RootState} from "../../redux/store";
+import {closeLoadingModal, openLoadingModal, setLoadingText} from "../../features/loadingModal/loadingModalSlice";
+import {useNavigation} from "@react-navigation/native";
+import printingApi from "../../api/printingApi";
+import PrintingService from "../../utils/PrintingService";
+import OrderProductsList from "../../components/OrderCard/OrderProductsList";
+import {setOrder} from "../../features/assembly/assemblySlice";
 
 
 function OrderScreen() {
 
-    const [order, setOrder] = useState({
-        article: 183658,
-        imageUrl: "https://421421.selcdn.ru/denco/996956/thumbzoom/h0b41036e5dc84a88b3dd344a46ab33edt.jpg-640x640.jpg",
-        orderNumber: "93757290-0104-7",
-        productName: "Фигурки животных «Собачки» 258, 5-7 см., статичные / 12 шт.",
-        supplierName: "simaland",
-        marketplaceName: "Wildberries РЕНТА",
-        sellerName: "DENCO",
-        assembled: false
-    });
+    const order = useSelector((state: RootState) => state.assembly.order);
+    if (!order) return (
+        <View style={noOrderStyles.container}>
+            <DText style={noOrderStyles.title}>Заказ не выбран!</DText>
+            <View style={noOrderStyles.buttonWrapper}>
 
+                <BasicButton onPress={() => {
+                    // @ts-ignore
+                    navigator.navigate("Box");
+                }} label={"На главную"}/>
+            </View>
+
+        </View>
+    )
+    const dispatch = useDispatch();
+    const assembled = useSelector((state: RootState) => state.assembly.assembled);
+    const shipped = useSelector((state: RootState) => state.assembly.shipped);
+    const navigator = useNavigation();
+    const [selectedProduct, setSelectedProduct] = useState(order.products[0]);
     return (
         <View style={styles.container}>
-            <View style={styles.dataContainer}>
+            <View style={styles.productsContainer}>
+                <View style={styles.orderProductsListWrapper}>
+                    <OrderProductsList products={order.products} onSelected={() => {
+                    }}/>
+                </View>
                 <View style={styles.imageWrapper}>
-                    <Image source={{uri: order.imageUrl}} style={styles.image}/>
-                </View>
-                <View style={styles.contentContainer}>
-                    <View style={styles.contentWrapper}>
-                        <DTitle style={styles.contentTitle}>{order.orderNumber}</DTitle>
-                        <Hyperlink url={`https://denco.store/manager/?a=resource/update&id=${order.article}`}>
-                            <DText style={styles.articleText}>Артикул: {order.article}</DText>
-                        </Hyperlink>
-                        <DText>Товар: {order.productName}</DText>
-                        <DText>Поставщик: {order.supplierName}</DText>
-                        <DText>Селлер: {order.sellerName}</DText>
-                        <DText>Маркетплейс: {order.marketplaceName}</DText>
-                    </View>
+                    <Image style={styles.image} source={{uri: selectedProduct.imageUrl}}/>
+                </View>
+            </View>
+            <View style={styles.contentContainer}>
+                <View style={styles.dataContainer}>
+                    <DTitle style={styles.contentTitle}>Заказ</DTitle>
+                    <DText>Номер заказа: {order.orderNumber}</DText>
+                    <DText>Маркетплейс: {order.marketplaceName}</DText>
+                    <DText>Селлер: {order.sellerName}</DText>
+                    <DText>{}</DText>
+                    <DTitle style={styles.contentTitle}>Товар</DTitle>
+                    <DText>Артикул DENCO: {selectedProduct.dencoArticle}</DText>
+                    <DText>Поставщик: {selectedProduct.supplierName}</DText>
+                    <DText>Номер товара: {0}</DText>
+                </View>
+                <View style={styles.buttonsContainer}>
+                    <BasicButton label={"Отметить как собранный"}
+                                 disabled={!selectedProduct.assembled}
+                                 onPress={()=>{
+                                     setOrder(oldValue => ({ ...oldValue }));
+                                 }}
+                    />
+                    <BasicButton label={"Печать этикетки"}
+                                 disabled={Boolean(order.products.find(product => product.assembled))}/>
                 </View>
             </View>
-            <View style={styles.buttonsContainer}>
-                <View style={styles.buttonsWrapper}>
-                    {!order.assembled &&
-                        <BasicButton label={"Отметить как собранный"} onPress={() => {
-                            userApi.test()
-                            // setOrder({...order, assembled: true})
-                            // console.log(order);
-                        }}/>
-                    }
 
-                    {order.assembled &&
-                        <BasicButton label={"Печать этикетки"}/>
-                    }
-                    {/*<BasicButton label={"Следующий товар"}/>*/}
-                </View>
-            </View>
         </View>
     )
 }
 
+const noOrderStyles = StyleSheet.create({
+    container: {
+        justifyContent: "center",
+        flex: 1,
+        rowGap: responsiveHeight(5)
+    },
+    title: {
+        textAlign: "center",
+        fontSize: responsiveWidth(5)
+    },
+    buttonWrapper: {
+        paddingHorizontal: responsiveWidth(20)
+    }
+})
 const styles = StyleSheet.create({
+    orderProductsListWrapper: {
+        flex: 0.5,
+        backgroundColor: "white",
+        borderRadius: RFPercentage(3),
+        padding: RFPercentage(2),
+    },
+    buttonWrapper: {
+        flex: 1,
+        backgroundColor: "red"
+    },
+    dataContainer: {
+        backgroundColor: "white",
+        padding: RFPercentage(2),
+        flex: 0.5,
+        borderRadius: RFPercentage(3),
+    },
+    buttonsContainer: {
+        backgroundColor: "white",
+        padding: RFPercentage(2),
+        flex: 0.5,
+        borderRadius: RFPercentage(3),
+        rowGap: responsiveHeight(2)
+    },
+    contentContainer: {
+        flex: 1,
+        borderRadius: RFPercentage(3),
+        flexDirection: "row",
+        columnGap: responsiveWidth(3),
+    },
     container: {
         width: "100%",
         height: "100%",
         display: "flex",
-        flex: 1,
-        paddingHorizontal: responsiveWidth(5)
-
+        paddingHorizontal: responsiveWidth(5),
+        paddingBottom: responsiveHeight(10),
+        rowGap: responsiveHeight(2)
     },
-    dataContainer: {
-        // backgroundColor: "black",
+    productsContainer: {
         display: "flex",
         flexDirection: "row",
-        columnGap: responsiveWidth(3)
-    },
-    buttonsContainer: {
-        // backgroundColor: "blue",
-        flex: 1,
-        display: "flex",
-        justifyContent: "center",
-        paddingHorizontal: responsiveWidth(10)
+        columnGap: responsiveWidth(3),
+        height: responsiveHeight(30)
     },
+
     buttonsWrapper: {
-        // backgroundColor: "red",
         rowGap: responsiveHeight(3)
     },
     imageWrapper: {
-        width: responsiveWidth(40),
-        height: responsiveHeight(40),
-        // height: responsiveHeight(40),
-        // backgroundColor: "red",
+        flex: 0.5,
+        backgroundColor: "white",
+        padding: RFPercentage(2),
+        borderRadius: RFPercentage(3)
     },
     image: {
         flex: 1,
-        borderRadius: RFPercentage(3)
-    },
-    contentContainer: {
-        padding: RFPercentage(2),
-        backgroundColor: "white",
-        borderRadius: RFPercentage(3),
-        flex: 1
-
+        resizeMode: "contain"
     },
     contentWrapper: {
         display: "flex",