contentoh-components-library 21.2.90 → 21.2.92

package/src/components/organisms/OrderDetail/index.js

@@ -0,0 +1,189 @@
+import React, { useState, useEffect } from "react";
+import { Status } from "../../atoms/Status/index";
+import { ProgressBar } from "../../atoms/ProgressBar/index";
+import moment from "moment";
+import "moment/locale/es";
+import {
+  MainContainer,
+  Header,
+  Details,
+  Detail,
+  SpaceBetween,
+  Card,
+} from "./styles";
+import Button from "../../atoms/Button";
+import Table from "./utils/Table";
+
+moment.locale("es");
+
+export default function OrderDetail(props) {
+  const { order } = props;
+  const [showPaymentButton, setShowPaymentButton] = useState(
+    order.payment !== "pagado"
+  );
+  const [orderData, setOrderData] = useState({});
+  const [dataGeneral, setDataGeneral] = useState({
+    approved: "-",
+    rejected: "-",
+    in_progress: "-",
+    totalArticles: "-",
+    percentage: "0.0",
+    datasheet: "-",
+    description: "-",
+    images: "-",
+  });
+
+  const updBilling = (articleId, newBillingStatus) => {
+    props.updateBilling &&
+      props.updateBilling({
+        body: { orderId: order.id_order, articleId, newBillingStatus },
+      });
+    const items = document.querySelectorAll(`[id^="Fact."]`);
+    let generalBilling = true;
+    items.forEach((item) => {
+      if (!item.checked) {
+        generalBilling = false;
+        return;
+      }
+    });
+    props.updateGeneralBilling(order.id_order, generalBilling);
+  };
+
+  useEffect(() => {
+    props.getOrderDetail &&
+      props
+        .getOrderDetail({ query: { orderId: order.id_order } })
+        .then((res) => {
+          const { data, countArticles, totalArticles } = res;
+          const obj = {};
+          const orderKeys = [
+            "UPC",
+            "Nombre",
+            "Cadena",
+            "Servicios",
+            "Estatus",
+            "Fact.",
+            "extends",
+          ];
+          Object.keys(data).forEach((key) => {
+            obj[key] = {};
+            orderKeys.forEach((header) => {
+              obj[key][header] = data[key][header];
+            });
+            obj[key]["Fact."].onChange = updBilling;
+          });
+          setOrderData(obj);
+          setDataGeneral({ ...countArticles, totalArticles });
+        });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [order.id_order]);
+
+  return (
+    <MainContainer id={props.id}>
+      <Header>
+        <SpaceBetween>
+          <h2 className="headerTitle">Orden de trabajo {order.id_order}</h2>
+          <div className="buttons">
+            {showPaymentButton && (
+              <Button
+                type="primary"
+                onClick={() => {
+                  props.updatePaymentStatus(order.id_order, "pagado");
+                  setShowPaymentButton(false);
+                }}
+              >
+                Pagar
+              </Button>
+            )}
+            <Button
+              type="image"
+              onClick={() => {
+                props.setShowOrderDetail(false);
+              }}
+            >
+              &#x2715;
+            </Button>
+          </div>
+        </SpaceBetween>
+      </Header>
+      <Details>
+        <div>
+          <Detail>
+            <p className="title">Entrega estimada</p>
+            <p className="date">
+              {order.deliver_date
+                ? moment(order.deliver_date).format("dddd DD [de] MMMM YYYY")
+                : "Sin fecha asignada"}
+            </p>
+          </Detail>
+          <Detail>
+            <p className="title">Tipo de entrega</p>
+            <p>{order.type}</p>
+          </Detail>
+          <Detail>
+            <p className="title">Estatus de la orden</p>
+            <SpaceBetween>
+              <Status statusType={order.status} />
+              <ProgressBar
+                percent={dataGeneral.percentage}
+                progressBarType={order.status}
+              />
+            </SpaceBetween>
+          </Detail>
+        </div>
+        <div>
+          <Card>
+            <span className="title">APROBADOS</span>
+            <p>
+              {dataGeneral.approved} / {dataGeneral.totalArticles}
+            </p>
+          </Card>
+          <Card>
+            <span className="title">RECHAZADOS</span>
+            <p>
+              {dataGeneral.rejected} / {dataGeneral.totalArticles}
+            </p>
+          </Card>
+          <Card>
+            <span className="title">EN PROCESO</span>
+            <p>
+              {dataGeneral.in_progress} / {dataGeneral.totalArticles}
+            </p>
+          </Card>
+        </div>
+      </Details>
+      <div className="body">
+        <Table
+          headers={[
+            { width: 140, name: "UPC" },
+            { width: 210, name: "Nombre" },
+            { width: 100, name: "Cadena", type: "groupImages" },
+            { width: 130, name: "Servicios", type: "services" },
+            { width: 70, name: "Estatus", type: "status" },
+            { width: 65, name: "Fact.", type: "checkout" },
+          ]}
+          data={orderData}
+        />
+      </div>
+      <div className="footer">
+        <h2 className="headerTitle">Totales</h2>
+        <Card>
+          <span className="title">PRODUCTOS</span>
+          <p>{dataGeneral.totalArticles}</p>
+        </Card>
+        <Card>
+          <span className="title">FICHAS TÉCNICAS</span>
+          <p>{dataGeneral.datasheet}</p>
+        </Card>
+        <Card>
+          <span className="title">DESCRIPCIONES</span>
+          <p>{dataGeneral.description}</p>
+        </Card>
+        <Card>
+          <span className="title">IMÁGENES</span>
+          <p>{dataGeneral.images}</p>
+        </Card>
+      </div>
+    </MainContainer>
+  );
+}

package/src/components/organisms/OrderDetail/styles.js

@@ -0,0 +1,120 @@
+import styled from "styled-components";
+import { FontFamily } from "../../../global-files/variables";
+
+export const MainContainer = styled.div`
+  position: fixed;
+  right: 0;
+  width: 785px;
+  height: 100vh;
+  z-index: 5;
+  background: #ffffff;
+  box-sizing: border-box;
+  font-family: ${FontFamily.Roboto};
+  & > * {
+    padding: 0 30px;
+  }
+  .headerTitle {
+    font-weight: bold;
+    font-size: 25px;
+  }
+
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 101px 120px 1fr 115px;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+
+  .body {
+    overflow-y: auto;
+  }
+  .footer {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: 115px;
+    border-top: 1px solid #e6e6e6;
+    position: sticky;
+    bottom: 0;
+    padding: 20px;
+    box-sizing: border-box;
+    > h2 {
+      margin-right: 20px;
+    }
+    > div {
+      margin-right: 10px;
+    }
+  }
+`;
+
+export const Header = styled.div`
+  width: 100%;
+  border-bottom: 0.3px solid #e6e6e6;
+  box-sizing: border-box;
+  .buttons {
+    > button {
+      margin-left: 10px;
+    }
+  }
+`;
+
+export const Details = styled.div`
+  display: flex;
+  margin-top: 15px;
+  justify-content: space-between;
+  > div {
+    width: 48%;
+  }
+  & > div:last-child {
+    width: 50%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+`;
+
+export const Detail = styled.div`
+  display: flex;
+  justify-content: space-between;
+  font-family: Roboto;
+  font-size: 12px;
+  margin-bottom: 15px;
+  color: #262626;
+  .title {
+    color: #707070;
+    display: flex;
+    align-items: center;
+  }
+  & > * {
+    width: 50% !important;
+  }
+  .date::first-letter {
+    text-transform: capitalize;
+  }
+`;
+
+export const SpaceBetween = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+`;
+
+export const Card = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  border-radius: 10px;
+  font-family: Roboto;
+  font-size: 15px;
+  background: #f7f7fc;
+  height: 60px;
+  min-width: 100px;
+  padding: 10px 0;
+  box-sizing: border-box;
+  .title {
+    color: #808080;
+    font-size: 10px;
+  }
+`;

package/src/components/organisms/OrderDetail/utils/ImageGroup/index.js

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import ReactImageFallback from "react-image-fallback";
+import { MainContainer, Image, NameHover, CounterExtra } from "./styles";
+import DefaultImage from "../../../../../assets/images/defaultImages/defaultProfileImage.svg";
+
+export default function Table({ images }) {
+  const [indexHover, setIndexHover] = useState();
+
+  return (
+    <MainContainer>
+      {images.map((image, i) => (
+        <Image
+          onMouseEnter={() => setIndexHover(i)}
+          onMouseLeave={() => setIndexHover()}
+          key={image.id}
+          index={i}
+        >
+          {image.id !== -1 ? (
+            <ReactImageFallback
+              src={image.src}
+              fallbackImage={DefaultImage}
+              className="img"
+            />
+          ) : (
+            <CounterExtra>{image.src}</CounterExtra>
+          )}
+          {indexHover === i && image.name && (
+            <NameHover index={i}>{image.name}</NameHover>
+          )}
+        </Image>
+      ))}
+    </MainContainer>
+  );
+}

package/src/components/organisms/OrderDetail/utils/ImageGroup/styles.js

@@ -0,0 +1,46 @@
+import styled from "styled-components";
+
+export const MainContainer = styled.div`
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;
+
+export const Image = styled.div`
+  position: absolute;
+  z-index: ${({ index }) => 5 - index};
+  left: ${({ index }) => `${11 * index}px`};
+  .img {
+    width: 18px;
+    height: 18px;
+    object-fit: fill;
+    border-radius: 100%;
+  }
+`;
+
+export const NameHover = styled.div`
+  white-space: nowrap;
+  z-index: 20;
+  position: absolute;
+  left: ${({ index }) => 9}px;
+  top: -7px;
+  font-family: Roboto;
+  font-size: 10px;
+  background: #ffffff;
+  border-radius: 3px;
+  box-shadow: 0px 2px 4px #00000029;
+  padding: 2px 5px;
+`;
+
+export const CounterExtra = styled.div`
+  background: #8a6caaaa;
+  color: #ffffff;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 5px;
+`;

package/src/components/organisms/OrderDetail/utils/Table/index.js

@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from "react";
+import { Status } from "../../../../atoms/Status";
+import { CheckBox } from "../../../../atoms/CheckBox";
+import ImageGroup from "../ImageGroup";
+import { getRetailerPicture } from "../../../../../_utils/helper";
+import { Header, Column, Rows } from "./styles";
+import { servicesCodeIcon } from "./utils";
+
+export default function Table(props) {
+  const [headers, setHeaders] = useState([]);
+  const [values, setValues] = useState([]);
+  const [config, setConfig] = useState({ wides: [], types: [], extends: [] });
+  const [showExtends, setShowExtends] = useState(-1);
+
+  useEffect(() => {
+    const tempConfig = { wides: [], types: [], extends: [] };
+    const headersName = [];
+    const values = [];
+    props.headers.forEach(({ width, name, type }) => {
+      tempConfig.wides.push(width);
+      tempConfig.types.push(type);
+      headersName.push(name);
+    });
+    Object.entries(props.data).forEach(([key, columns]) => {
+      const copy = columns.extends
+        ? Object.entries(columns.extends).map(([keyExt, columnsExt]) => ({
+            key: keyExt,
+            columns: columnsExt,
+          }))
+        : undefined;
+      tempConfig.extends.push(copy);
+      values.push({ key, columns });
+    });
+    setValues(values);
+    setHeaders(headersName);
+    setConfig(tempConfig);
+  }, [props.data, props.headers]);
+
+  const getTypeColumn = (index, key, value, id, isDetail) => {
+    switch (config.types[index]) {
+      case "groupImages":
+        let images = [];
+        if (value.length > 4) {
+          const remaining = value.length - 3;
+          value.forEach((e, i) => {
+            if (i >= 3) return;
+            images.push({ ...e, src: getRetailerPicture(e.id) });
+          });
+          images.push({
+            id: -1,
+            src: `+${remaining}`,
+            name: `+${remaining} Cadenas`,
+          });
+        } else {
+          images = value.map((e) => ({ ...e, src: getRetailerPicture(e.id) }));
+        }
+        return <ImageGroup images={images} />;
+      case "services":
+        return (
+          <div className="flex">{value.map((e) => servicesCodeIcon[e])}</div>
+        );
+      case "status":
+        return (
+          <div className="center">{value && <Status statusType={value} />}</div>
+        );
+      case "checkout":
+        return (
+          !isDetail && (
+            <div className="center CheckBoxTable">
+              <CheckBox
+                id={`${key}-${id}`}
+                onChange={(e) => {
+                  e.stopPropagation();
+                  value && value.onChange(id, e.target.checked);
+                }}
+                defaultChecked={value.value}
+              />
+            </div>
+          )
+        );
+      default:
+        return value;
+    }
+  };
+
+  return (
+    <>
+      <Header>
+        {headers.map((headers, i) => (
+          <Column key={`header-${i}`} width={config.wides[i]} isHeader>
+            {headers}
+          </Column>
+        ))}
+      </Header>
+      {values.map((v, index) => (
+        <>
+          <Rows
+            key={`row-${v.key}`}
+            index={index}
+            onClick={() => setShowExtends(showExtends === index ? -1 : index)}
+          >
+            {Object.entries(v.columns).map(
+              ([key, c], i) =>
+                key !== "extends" && (
+                  <Column key={`${v.key}-${i}`} width={config.wides[i]}>
+                    {getTypeColumn(i, key, c, v.key)}
+                  </Column>
+                )
+            )}
+          </Rows>
+          {showExtends === index &&
+            config.extends[index] &&
+            Object.values(config.extends[index]).map((v, idx) => (
+              <Rows key={`extends-${v.key}`} index={idx}>
+                {Object.entries(v.columns).map(
+                  ([key, c], i) =>
+                    key !== "extends" && (
+                      <Column
+                        key={`extends-${v.key}-${i}`}
+                        width={config.wides[i]}
+                      >
+                        {getTypeColumn(i, key, c, v.key, true)}
+                      </Column>
+                    )
+                )}
+              </Rows>
+            ))}
+        </>
+      ))}
+    </>
+  );
+}

package/src/components/organisms/OrderDetail/utils/Table/styles.js

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+
+export const Header = styled.div`
+  display: flex;
+  height: 35px;
+  width: 100%;
+  border-radius: 5px 5px 0px 0px;
+  background: #f0f0f0;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+`;
+
+export const Column = styled.div`
+  display: flex;
+  align-items: center;
+  height: 35px;
+  width: ${({ width }) => `${width}px`};
+  padding: 10px 15px;
+  font-family: Roboto;
+  font-size: 12px;
+  color: ${({ isHeader }) => (isHeader ? "#262626" : "#707070")};
+  font-weight: ${({ isHeader }) => (isHeader ? "600" : "500")};
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  .flex {
+    display: flex;
+  }
+  .material-icons.small {
+    font-size: 18px;
+    color: #b3b3b3;
+  }
+  .center {
+    margin: auto;
+  }
+  &:nth-child(2) {
+    overflow: hidden;
+  }
+`;
+
+export const Rows = styled.div`
+  display: flex;
+  background: ${({ index }) => (index % 2 === 0 ? "#FFFFFF" : "#FAFAFA")};
+  overflow-y: auto;
+  &:hover {
+    cursor: pointer;
+    background: #d4d1d7;
+  }
+`;

package/src/components/organisms/OrderDetail/utils/Table/utils.js

@@ -0,0 +1,27 @@
+export const servicesCodeIcon = {
+  datasheet: (
+    <span key="datasheet" className="material-icons small">
+      &#xf8ee;
+    </span>
+  ),
+  description: (
+    <span key="description" className="material-icons small">
+      &#xe873;
+    </span>
+  ),
+  image: (
+    <span key="image" className="material-icons small">
+      &#xe3f4;
+    </span>
+  ),
+  translate: (
+    <span key="translate" className="material-icons small">
+      &#xe8e2;
+    </span>
+  ),
+  build: (
+    <span key="build" className="material-icons small">
+      &#xe1bd;
+    </span>
+  ),
+};

package/src/global-files/fonts.css

@@ -43,3 +43,27 @@
   src: url("../assets/fonts/raleway/Raleway-Black.ttf");
   font-weight: 900;
 }
+
+@font-face {
+  font-family: "RobotoMedium";
+  src: url("../assets/fonts/Roboto/Roboto-Medium.ttf");
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "RobotoRegular";
+  src: url("../assets/fonts/Roboto/Roboto-Regular.ttf");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("../assets/fonts/Roboto/Roboto-Regular.ttf");
+  font-weight: 400;
+}
+
+.prueba {
+  color: #9e3e26;
+  color: #b42983;
+  color: #e7e7e7;
+}