🎯 IMPROVE: clean

XDPVD · Aug 17, 2021 · 6c54040 · 6c54040
1 parent 2015802
commit 6c54040
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 22 deletions.
diff --git a/sections/ShowChat/Chat.tsx b/sections/ShowChat/Chat.tsx
@@ -229,7 +229,7 @@ export default function Chat() {
                       <ModalNewQuote
                         variant="primary"
                         width="100px"
-                        height="25px"
+                        height="35px"
                         showModalButtonText="Cotizar"
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                         // @ts-ignore

diff --git a/sections/ShowChat/MessageProposal.tsx b/sections/ShowChat/MessageProposal.tsx
@@ -23,29 +23,37 @@ export default function MessageProposal({ message, own }: MessageProps) {
       my="3"
       mx="2"
     >
-      <Box maxW="500px">
+      <Box w="800px">
         <Flex
           px="5"
           color="gray"
           align="center"
           py="1"
-          maxW="500px"
+          w="full"
           direction={`${own === true ? "row-reverse" : "row"}`}
         >
           {/* <Avatar size="md" name="name" position="relative" mx="2" /> */}
 
           <Box
-            px="3"
             bg="gray.100"
             color="red"
             d="flex"
             flexDirection="column"
             justifyContent="start"
             borderRadius="lg"
-            py="2"
             borderColor="primary"
             borderWidth="1px"
           >
+            <Box
+              h="80px"
+              w="full"
+              bg="primary"
+              d="flex"
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Text>Nombre del servicio</Text>
+            </Box>
             <strong>Presupuesto: </strong>
             <br />
             <span>{message.msj_precio_prop}</span>

diff --git a/sections/ShowChat/ModalNewQuote.tsx b/sections/ShowChat/ModalNewQuote.tsx
@@ -12,9 +12,12 @@ import {
   FormLabel,
   Input,
   Grid,
-  Textarea
+  Textarea,
+  NumberInput,
+  NumberInputField
 } from "@chakra-ui/react"
-import { useContext } from "react"
+import { useContext, useEffect, useState } from "react"
+import SelectField, { Option } from "../../components/SelectField"
 import { DataContext } from "../../store/GlobalState"
 import { useForm } from "../../utils/hooks/useForm"
 import { toCapitalFirstLetter } from "../../utils/toCapital"
@@ -28,24 +31,41 @@ export default function ModalNewQuote({
 }) {
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { state } = useContext(DataContext)
-  const { socket, auth } = state
+  const { socket, auth, posts } = state
   const [values, handleInputChange, reset] = useForm({
     servicio: "",
     nombre: "",
     presupuesto: "",
     fechaLimite: "",
-    descripcion: ""
+    descripcion: "",
+    price: ""
   })
-  const { nombre, descripcion, servicio, presupuesto, fechaLimite } = values
+  const [category, setCategory] = useState(null)
+  const { nombre, descripcion, servicio, presupuesto, fechaLimite, price } =
+    values
+  function handleChangeSelect(option) {
+    setCategory(option)
+  }
+
   const handleSubmit = (e: any) => {
     e.preventDefault()
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const dataEmit = { ...values, categoryId: category.value }
     socket.emit("messageProposal", {
       to: currentChat!.idAmiwi,
       from: auth.user.id,
-      data: values
+      data: dataEmit
     })
     reset()
   }
+
+  useEffect(() => {
+    if (!isOpen) {
+      reset()
+      setCategory(null)
+    }
+  }, [isOpen])
   return (
     <Box>
       <Button variant={variant} width={width} height={height} onClick={onOpen}>
@@ -95,16 +115,24 @@ export default function ModalNewQuote({
               <Grid templateColumns="repeat(2,1fr)" gap="6">
                 <FormControl mb="2">
                   <FormLabel color="letter" fontWeight="light" fontSize="sm">
-                    Presupuesto
+                    Categoría
                   </FormLabel>
-                  <Input
-                    fontSize="sm"
-                    type="text"
-                    placeholder="s/"
-                    name="presupuesto"
-                    onChange={handleInputChange}
-                    value={toCapitalFirstLetter(presupuesto)}
-                  />
+                  <SelectField
+                    fullWidth
+                    required
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    option={category}
+                    placeholder="Seleccione una categoría "
+                    onChange={handleChangeSelect}
+                    // errorHelper={!!errors.category}
+                  >
+                    {posts.map((p, idx) => (
+                      <Option key={idx} value={p.id}>
+                        {p.pst_nombre}
+                      </Option>
+                    ))}
+                  </SelectField>
                 </FormControl>
                 <FormControl mb="2">
                   <FormLabel color="letter" fontWeight="light" fontSize="sm">
@@ -131,19 +159,43 @@ export default function ModalNewQuote({
                   placeholder="Escribe tu contenido detallado aquí"
                   h="100"
                   maxLength={100}
-                  resizable="false"
+                  resize="none"
                   name="descripcion"
                   onChange={handleInputChange}
                   value={toCapitalFirstLetter(descripcion)}
                 />
               </FormControl>
+              <FormControl mb="2" id="first-name">
+                <FormLabel color="letter" fontWeight="light" fontSize="sm">
+                  Presupuesto
+                </FormLabel>
+                <NumberInput min={0} defaultValue={price}>
+                  <NumberInputField
+                    fontSize="sm"
+                    placeholder="S/."
+                    name="presupuesto"
+                    onChange={handleInputChange}
+                    value={presupuesto}
+                  />
+                </NumberInput>
+
+                {/* <Input
+                  fontSize="sm"
+                  type="text"
+                  placeholder="s/"
+                  name="presupuesto"
+                  onChange={handleInputChange}
+                  value={toCapitalFirstLetter(presupuesto)}
+                /> */}
+              </FormControl>
 
               <Button
                 fontSize="sm"
                 width="full"
                 variant="primary"
                 type="submit"
                 className="buttonDisabledPrimary"
+                my="4"
               >
                 Enviar cotización
               </Button>

diff --git a/sections/ShowData/Pay.tsx b/sections/ShowData/Pay.tsx
@@ -1,6 +1,5 @@
 import styles from "../../styles/sections/Show.module.css"
 import { Box, Text, Flex, Button } from "@chakra-ui/react"
-import ZIcon from "../../components/Icon/ZIcon"
 import ModalDowload from "../ShowData/ModalDowload"
 import React from "react"
 import ModalSteper from "./ModalSteper"