contentoh-components-library 21.4.61 → 21.4.63

package/src/components/molecules/BoxAttribute/index.js

@@ -0,0 +1,71 @@
+import { Container } from "./styles";
+import IconInfo from "../../../assets/images/Icons/info.svg";
+import TextField from "@mui/material/TextField";
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import { styled } from '@mui/material/styles';
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const BoxAttribute = (props) => {
+  const {
+    id,
+    key,
+    className,
+    text,
+    borderType,
+    atributos,
+    setAtributos,
+    required,
+    description,
+  } = props;
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    setAtributos((prevAtributos) => ({
+      ...prevAtributos,
+      [name]: value,
+    }));
+  };
+  const LightTooltip = styled(({ className, ...props }) => (
+    <Tooltip {...props} classes={{ popper: className }} />
+  ))(({ theme }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+      backgroundColor: GlobalColors.white,
+      color: 'rgba(0, 0, 0, 0.87)',
+      boxShadow: theme.shadows[1],
+      fontSize: 11,
+      fontFamily: `${FontFamily.Roboto}, sans-serif`,
+    },
+  }));
+  return (
+    <>
+       <Container
+        id={id}
+        key={key}
+        className={className}
+        borderType={borderType}
+      >
+        <LightTooltip title={
+              <div className="container-tooltip">
+                <p className="container-tooltip">{description}</p>
+              </div>
+            }>
+              <Container className="">
+                <img className="icon" src={IconInfo} alt="iconInfo" />
+              </Container>
+        </LightTooltip>
+        <span>{text}<span className={required ? 'required-text' : ''}>{required ? '*' : ''}</span></span>
+          <TextField
+            hiddenLabel
+            key={props.id}
+            name={props.id}
+            value={atributos[props.id]}
+            onChange={handleInputChange}
+            className="caja-borde"
+            variant="outlined"
+            size="small"
+            type="number"
+            required={required}
+          />
+      </Container>
+    </>
+  );
+};

package/src/components/molecules/BoxAttribute/styles.js

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap:4px;
+  #atr-alto {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .caja-borde {
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 12px;
+    line-height: 1.2;
+    border-radius: ${({ borderType }) => {
+      return borderType?.toLowerCase() === "rectangle"
+        ? "5px"
+        : borderType?.toLowerCase() === "circle"
+        ? "50%"
+        : "none";
+    }};
+  }
+  span {
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 12px;
+    line-height: 1.2;
+    font-weight: 600;
+  }
+  .icon {
+    width: 8px;
+    height: 8px;
+  }
+  .required-text {
+    color: red;
+  }
+`;

package/src/components/molecules/BoxButtons/BoxButtons.stories.js

@@ -0,0 +1,15 @@
+import { BoxButtons } from "./index";
+
+export default {
+  title: "Components/molecules/BoxButtons",
+  component: BoxButtons,
+};
+
+const Template = (args) => <BoxButtons {...args} />;
+
+export const BoxButtonsDefault = Template.bind({});
+
+BoxButtonsDefault.args = {
+    text:"texto prueba",
+    showAdd:true,
+};

package/src/components/molecules/BoxButtons/index.js

@@ -0,0 +1,28 @@
+import { Container, ContainerIcon } from "./styles";
+import { Button } from "@mui/material";
+
+export const BoxButtons = ({ showAdd, onAdd, onDelete, isTheFirstBox, index  }) => {
+  console.log("index",index)
+  return (
+      <Container index={index}>
+        {!isTheFirstBox && (
+          <Button
+            variant="outlined"
+            className="button-circle"
+            onClick={onDelete}
+          >
+            <ContainerIcon>
+              <span className="iconos-out">delete_forever</span>
+            </ContainerIcon>
+          </Button>
+        )}
+        {showAdd && (
+          <Button onClick={onAdd} variant="outlined" className="button-circle">
+            <ContainerIcon>
+              <span className="iconos-out iconos-grises">add</span>
+            </ContainerIcon>
+          </Button>
+        )}
+      </Container>
+  );
+};

package/src/components/molecules/BoxButtons/styles.js

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+    display:flex;
+    flex-direction:row;
+    gap:8px;
+  .button-circle{
+    width:30px;
+    height:30px;
+    padding:2px;
+    border-radius:100%;
+    min-width:30px;
+    border: 1px solid #F0F0F0;
+  }
+  .button-circle:hover {
+    border: 1px solid #F0F0F0;
+  }
+
+`;
+export const ContainerIcon = styled.div`
+cursor: pointer;
+@font-face {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-weight: 100 700;
+  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
+    format("woff2");
+}
+.iconos-out {
+  font-family: "Material Symbols Outlined";
+  font-size: 20px;
+  //line-height: 1;
+  margin-top: 10px;
+}
+.iconos-out {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+  color:  #B64545;
+}
+.iconos-grises {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+  color:  ${GlobalColors.gray};
+}`;

package/src/components/molecules/TagAndInput/index.js

@@ -1,6 +1,7 @@
 import { Container } from "./styles";
 import { ScreenHeader } from "../../atoms/ScreenHeader/index";
 import { GeneralInput } from "../../atoms/GeneralInput/index";
+import { useState, useEffect } from "react";
 
 export const TagAndInput = ({
   inputType,
@@ -29,21 +30,54 @@ export const TagAndInput = ({
   onKeyDown,
   showTooltip,
   auditClass,
+  onChange, 
+  dataInputs,
+  inputGroup,
+  boxOnboardingData,
 }) => {
+  const [boxOnboardingList, setBoxOnboardingList] = useState(boxOnboardingData || []);
+
+  useEffect(() => {
+    const temp = {};
+    let maxBoxId = 0;
+    inputGroup?.inputs.forEach((attrId) => {
+      if (!dataInputs[attrId].box) return;
+      Object.entries(dataInputs[attrId].box).forEach(([boxId, value]) => {
+        if (boxId > maxBoxId) maxBoxId = boxId;
+        if (!temp[boxId]) temp[boxId] = {};
+        temp[boxId][attrId] = value;
+      });
+    });
+    const tempList = Object.values(temp);
+    if (tempList.length > 0) {
+      setBoxOnboardingList(
+        tempList.map((value, index) =>
+          index === tempList.length - 1 ? {value } : { value }
+        )
+      );
+    }
+  }, []);
+
+  useEffect(() => {
+    onChange && onChange(boxOnboardingList);
+  }, [boxOnboardingList]);
+
   return (
     <Container
       inputType={inputType}
       className={"input-container"}
       key={`generalTagInput-${inputType}`}
     >
-      <div className="title-container">
-        <ScreenHeader
-          text={label}
-          headerType={"input-name-header"}
-          color={color}
-        />
-        {showTooltip && <span className="tooltip">{label}</span>}
-      </div>
+       {label?.length && (
+        <div className="title-container">
+          <ScreenHeader
+            text={label}
+            headerType={"input-name-header"}
+            color={color}
+          />
+          {showTooltip && <span className="tooltip">{label}</span>}
+        </div>
+      )}
       <GeneralInput
         inputId={inputId}
         inputType={inputType}
@@ -68,6 +102,16 @@ export const TagAndInput = ({
         inputOnChange={inputOnChange}
         onKeyDown={onKeyDown}
         auditClass={auditClass}
+        onChange={(e) => {
+          setBoxOnboardingList((prev) => {
+            return prev.map((box, i) => {
+              if (i != index) {
+                return box;
+              }
+              return { ...box, value: e };
+            });
+          });
+        }}
       />
     </Container>
   );

package/src/components/organisms/Box/Box.stories.js

@@ -0,0 +1,17 @@
+import { Box } from "./index";
+import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
+import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
+import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
+
+export default {
+  title: "Components/organisms/Box",
+  component: Box,
+};
+
+const Template = (args) => <Box {...args} />;
+
+export const BoxDefault = Template.bind({});
+BoxDefault.args = {
+  panelImg:[LoginImage, Login2, Login3],
+  panelText:"Elige la plataforma que conecta proovedores y retailers",
+};

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

@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from "react";
+import { Container } from "./styles";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { BoxOnboarding } from "../BoxOnboarding";
+import { BoxButtons } from "../../molecules/BoxButtons";
+
+export const Box = ({ onChange, dataInputs, inputGroup }) => {
+  const [isDeleteDisabled, setIsDeleteDisabled] = useState(true);
+  const [boxOnboardingList, setBoxOnboardingList] = useState([
+    {
+      showAdd: true,
+      value: {},
+    },
+  ]);
+
+  useEffect(() => {
+    const temp = {};
+    let maxBoxId = 0;
+    inputGroup.inputs.forEach((attrId) => {
+      if (!dataInputs[attrId].box) return;
+      Object.entries(dataInputs[attrId].box).forEach(([boxId, value]) => {
+        if (boxId > maxBoxId) maxBoxId = boxId;
+        if (!temp[boxId]) temp[boxId] = {};
+        temp[boxId][attrId] = value;
+      });
+    });
+    const tempList = Object.values(temp);
+    if (tempList.length > 0) {
+      setBoxOnboardingList(
+        tempList.map((value, index) =>
+          index === tempList.length - 1 ? { showAdd: true, value } : { value }
+        )
+      );
+    }
+  }, []);
+
+  const handleAddBoxOnboarding = () => {
+    const newBoxOnboarding = {
+      showAdd: false,
+      value: {},
+    };
+
+    setBoxOnboardingList([...boxOnboardingList, newBoxOnboarding]);
+  };
+
+  const handleDeleteBoxOnboarding = (index) => {
+    if (index !== 0) {
+      const updatedBoxOnboardingList = [...boxOnboardingList];
+      updatedBoxOnboardingList.splice(index, 1);
+      setBoxOnboardingList(updatedBoxOnboardingList);
+    } else {
+      setIsDeleteDisabled(true);
+    }
+  };
+  
+  useEffect(() => {
+    onChange && onChange(boxOnboardingList);
+  }, [boxOnboardingList]);
+
+  return (
+    <Container
+      fontFamily={FontFamily.Raleway}
+      color={GlobalColors.original_magenta}
+    >
+      <h1 fontFamily={FontFamily.Raleway}>{inputGroup.dataGroup}</h1>
+      <div className="container-box">
+        {boxOnboardingList.map((boxOnboarding, index) => (
+          <>
+
+            <div className="container-buttons">
+              <BoxOnboarding
+                key={index}
+                index={index}
+                showAdd={boxOnboarding.showAdd}
+                data={boxOnboarding.value}
+                dataInputs={dataInputs}
+                inputs={inputGroup.inputs}
+                onChange={(e) => {
+                  setBoxOnboardingList((prev) => {
+                    return prev.map((box, i) => {
+                      if (i != index) {
+                        return box;
+                      }
+                      return { ...box, value: e };
+                    });
+                  });
+                }}
+              />
+              <BoxButtons
+                key={index}
+                index={index}
+                showAdd={boxOnboarding.showAdd}
+                onAdd={handleAddBoxOnboarding}
+                onDelete={() => handleDeleteBoxOnboarding(index)}
+                isDeleteDisabled={isDeleteDisabled}
+              />
+            </div>
+          </>
+        ))}
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  font-family: ${FontFamily.Roboto}, sans-serif;
+  font-weight: 400;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: var(--size);
+  line-height: 1.2;
+  height: auto;
+  border-radius: 10px;
+  background: white;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  text-align: center;
+  .container-buttons {
+    display: flex;
+    gap:10px;
+  }
+  .container-box{
+    display: flex;
+    flex-direction:column-reverse;
+    gap:10px;
+  }
+  #contenedor-caja {
+    display: flex;
+    justify-content: space-between;
+    color: #262626;
+    white-space: nowrap;
+    gap: 10px;
+  }
+  #atr-alto {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 6px;
+  }
+  h1 {
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 17px;
+    line-height: 1.2;
+    font-weight: 500;
+    text-align: left;
+  }
+`;

package/src/components/organisms/BoxOnboarding/BoxOnboarding.stories.js

@@ -0,0 +1,17 @@
+import { BoxOnboarding } from "./index";
+import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
+import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
+import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
+
+export default {
+  title: "Components/organisms/BoxOnboarding",
+  component: BoxOnboarding,
+};
+
+const Template = (args) => <BoxOnboarding {...args} />;
+
+export const BoxOnboardingDefault = Template.bind({});
+BoxOnboardingDefault.args = {
+  panelImg:[LoginImage, Login2, Login3],
+  panelText:"Elige la plataforma que conecta proovedores y retailers",
+};

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

@@ -0,0 +1,60 @@
+import { Container } from "./styles";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { BoxAttribute } from "../../molecules/BoxAttribute";
+import { useState, useEffect, memo } from "react";
+import { isEqual } from "lodash";
+
+export const BoxOnboarding = memo(
+  ({
+    panelColor,
+    index,
+    onChange,
+    data,
+    dataInputs,
+    inputs,
+  }) => {
+    const [atributos, setAtributos] = useState({});
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+      onChange && onChange(atributos);
+    }, [atributos]);
+    
+
+    useEffect(() => {
+      if (isLoading && Object.keys(data).length > 0) {
+        setAtributos(data);
+        setIsLoading(false);
+      }
+    }, [data]);
+
+    return (
+      <Container
+        panelColor={panelColor}
+        fontFamily={FontFamily.Raleway}
+        color={GlobalColors.original_magenta}
+      >
+        <div id="contenedor-caja">
+          <p fontFamily={FontFamily.Raleway}>Caja {index + 1}</p>
+          {inputs.map((attrId) => {
+            return (
+              <BoxAttribute
+                id={attrId}
+                key={attrId}
+                borderType="rectangle"
+                className="caja"
+                text={dataInputs[attrId]?.name}
+                required={dataInputs[attrId]?.required}
+                description={dataInputs[attrId]?.description}
+                atributos={atributos}
+                setAtributos={setAtributos}
+              />
+            );
+          })}
+          
+        </div>
+      </Container>
+    );
+  },
+  isEqual
+);

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

@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  font-family: ${FontFamily.Roboto}, sans-serif;
+  font-weight: 400;
+  font-size: var(--size);
+  line-height: 1.2;
+  background: white;
+  position: relative;
+  overflow: hidden;
+  width: 80%;
+  height: 100%;
+  text-align: center;
+  #contenedor-caja {
+    display: flex;
+    justify-content: space-between;
+    color: #262626;
+  }
+  #atr-alto {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  p {
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 12px;
+    line-height: 1.2;
+    font-weight: 600;
+    align-self: center;
+  }
+  }
+  .icon-red {
+    color: #B64545;
+    height:18px;
+  }
+  .icon-gray {
+    color: #707070;
+  }
+  .icon-gray-l {
+    color: #707070;
+    height:18px;
+  }
+`