contentoh-components-library 21.4.69 → 21.4.71

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

@@ -0,0 +1,49 @@
+import { Container } from "./styles";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { useEffect, useRef, useState } from "react";
+import { Validation } from "../Validation";
+
+export const ServiceDataValidator = ({
+  headerData,
+  activeRetailer,
+  setActiveRetailer,
+  showValidationButtons,
+  showApproveRejectAll,
+  approveAll,
+  rejectAll,
+  approve,
+  reject,
+  text,
+  complete,
+  showValidation,
+  missingData,
+}) => {
+  const headerTop = useRef();
+  return (
+    <Container
+      fontFamily={FontFamily.Raleway}
+      color={GlobalColors.original_magenta}
+      ref={headerTop}
+    >
+        <span className="service-text">
+          {text}:{" "}
+          <span className="service-complete">
+            {complete ? "Completado" : `${missingData} ${missingData > 1 ? 'Faltantes' : 'Faltante'}`}
+          </span>
+        </span>
+     { showValidation &&  (
+     <Validation
+           headerData={headerData}
+           activeRetailer={activeRetailer}
+           setActiveRetailer={setActiveRetailer}
+           showValidationButtons={showValidationButtons}
+           showApproveRejectAll={showApproveRejectAll}
+           approveAll={approveAll}
+           rejectAll={rejectAll}
+           approve={approve}
+           reject={reject}
+          ></Validation>
+        )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+display:flex;
+padding:7px 15px;
+justify-content: space-between;
+background:${GlobalColors.blue_light};
+width: auto;
+height:34px;
+align-items: center;
+max-width:300px;
+border-radius:5px;
+
+
+  * + * {
+    margin-left: 10px;
+  }
+
+  .btn-gral{
+    min-width: 34px;
+    min-height:34px;
+  }
+  .images-buttons{
+    display:flex;
+  }
+  .service-text{
+    font-family:${FontFamily.RobotoMedium}, sans-serif;
+    font-size:12px;
+    font-weight: 500;
+    color:${GlobalColors.gray};
+  }
+  .service-complete{
+    color:${GlobalColors.black};
+  }
+`;

package/src/components/molecules/StatusRetailer/StatusAsignationInfo.stories.js

@@ -0,0 +1,17 @@
+import { StatusRetailer } from "./index";
+
+export default {
+  title: "Components/molecules/StatusRetailer",
+  component: StatusRetailer,
+};
+
+const Template = (args) => <StatusRetailer {...args} />;
+
+export const StatusRetailerDefault = Template.bind({});
+StatusRetailerDefault.args = {
+  status: "AA",
+  image: {
+    src: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+  },
+  imagesSection: true,
+};

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

@@ -0,0 +1,55 @@
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+import { ProductSkuStatus } from "../ProductSkuStatus";
+import { RetailerSelectorv2 } from "../RetailerSelectorv2";
+export const StatusRetailer = ({
+  percent = 0,
+  id = "default-id",
+  showRetailer=false,
+  retailers,
+  activeRetailer,
+  setActiveRetailer,
+  headerData,
+  setShowVersionSelector,
+  version
+}) => {
+  const [showAsignationPanel, setShowAsignationPanel] = useState(false);
+
+  const closeAsignations = (e) => {
+    if (!e.target.closest("#default-id") && showAsignationPanel) {
+      document.removeEventListener("click", closeAsignations, false);
+      setShowAsignationPanel(false);
+    }
+  };
+
+  useEffect(() => {
+    if (showAsignationPanel) {
+      document.addEventListener("click", closeAsignations, false);
+    }
+  }, [showAsignationPanel]);
+  return (
+    <Container id={id}>
+      {showRetailer && 
+        <RetailerSelectorv2
+            retailers={retailers}
+            activeRetailer={activeRetailer}
+            setActiveRetailer={setActiveRetailer}
+          />
+      }
+      <ProductSkuStatus
+          productName={headerData?.article?.name || headerData?.name}
+          statusType={
+            headerData?.version_status ||
+            headerData?.status ||
+            headerData?.article_status
+          }
+          setShowVersionSelector={setShowVersionSelector}
+          percentRequired={percent}
+          percent={percent?.toFixed(0)}
+          containerClassName="bar-sku"
+          contClassName="bar-sku-cont"
+              version={version}
+        />
+    </Container>
+  );
+};

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

@@ -0,0 +1,85 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  border-radius: 117px;
+  padding: 4px 5px;
+  display: flex;
+  border: 1px solid #F0F0F0;
+  gap:10px;
+  min-width: 128px;
+  justify-content:center;
+
+  .images-buttons {
+    button + * {
+      margin-left: 8px;
+    }
+  }
+
+  .assignations-container {
+    display: flex;
+    cursor: pointer;
+  }
+
+  .asignation-panel {
+    background: ${GlobalColors.s2};
+    border: 1px solid ${GlobalColors.s3};
+    box-sizing: border-box;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+    padding: 10px 8px;
+    position: absolute;
+    top: calc(100% + 10px);
+    right: 0;
+    z-index: 10;
+
+    .asignation-header {
+      display: flex;
+      justify-content: space-between;
+
+      .asignation-status,
+      .asignation-percent {
+        & > p {
+          font-family: ${FontFamily.AvenirNext};
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 16px;
+          color: ${GlobalColors.s5};
+        }
+      }
+
+      .asignation-percent {
+        text-align: right;
+      }
+
+      & + * {
+        margin-top: 10px;
+      }
+    }
+
+    .asignations-list {
+      min-height: 40px;
+
+      .no-asignations {
+        padding: 5px;
+        font-family: ${FontFamily.AvenirNext};
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 16px;
+        color: ${GlobalColors.s5};
+      }
+
+      & + * {
+        margin-top: 10px;
+        border-top: 1px solid ${GlobalColors.s3};
+      }
+    }
+
+    .default-asignations-list {
+      padding-top: 10px;
+    }
+  }
+`;

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

@@ -0,0 +1,19 @@
+import { TabsMenuv2 } from "./index";
+
+export default {
+  title: "Components/molecules/TabsMenuv2",
+  component: TabsMenuv2,
+};
+
+const Template = (args) => <TabsMenuv2 {...args} />;
+
+export const TabsMenuv2Default = Template.bind({});
+
+TabsMenuv2Default.args = {
+  tabsSections: {
+    Descripción: true,
+    "Ficha técnica": false,
+    Imágenes: false,
+    "Golden SKU": false,
+  },
+};

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

@@ -0,0 +1,112 @@
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+
+import { Modal } from "../../organisms/Modal";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+import { TabSectionv2 } from "../../atoms/TabSectionv2";
+
+export const TabsMenuv2 = ({
+  tabsSections = {},
+  setImagesSection,
+  setActiveTab,
+  activeTab,
+  updatedDescriptions,
+  updatedDatasheets,
+  images,
+  setUpdatedDescriptions,
+  setUpdatedDatasheets,
+  setImages,
+  className
+}) => {
+  const [sections, setSections] = useState(tabsSections);
+
+  const [modal, setModal] = useState(false);
+  const [cancelAccept, setCancelAccept] = useState("");
+  const [llave, setLlave] = useState("");
+  const [objeto, setObjeto] = useState();
+
+  const activeSection = (key, array = {}) => {
+    let tempArray = {};
+    setImagesSection(key === "Imágenes");
+    Object.keys(array).forEach((section) => {
+      tempArray[section] = section === key;
+      if (section === key) return setActiveTab(key);
+    });
+    setSections(tempArray);
+  };
+
+  useEffect(() => {
+    if (cancelAccept === "Aceptar" && llave !== "") {
+      setCancelAccept("");
+      setModal(false);
+      activeSection(llave, objeto);
+      setUpdatedDescriptions([]);
+      setUpdatedDatasheets([]);
+      setImages({});
+    } else if (cancelAccept === "Cancelar" && llave !== "") {
+      setModal(false);
+      setCancelAccept("");
+    }
+  }, [cancelAccept]);
+
+  const detectClickFunction = (e, key, sections) => {
+    const targetIsTheCurrentTab = e.target.innerHTML === activeTab;
+    const descriptionsWereUpdated = updatedDescriptions.length > 0;
+    const datasheetWereUpdated = updatedDatasheets.length > 0;
+    const imagesWereUpdated = images?.values?.filter((f) => !f.id)?.length > 0;
+    const dataWereUpdated =
+      descriptionsWereUpdated || datasheetWereUpdated || imagesWereUpdated;
+
+    if (!targetIsTheCurrentTab && !dataWereUpdated) {
+      setLlave(key);
+      setObjeto(sections);
+      activeSection(key, sections);
+    } else if (!targetIsTheCurrentTab && dataWereUpdated) {
+      setModal(true);
+      setLlave(key);
+      setObjeto(sections);
+    }
+  };
+
+  return (
+    <>
+      {activeTab && (
+        <Modal
+          show={modal}
+          title="Cambios sin Guardar"
+          message="Estás cambiando de vista y aun no guardas cambios ¿Estás seguro?"
+          buttons={[
+            <ButtonV2
+              key="btn-Cancelar"
+              type="white"
+              label="Cancelar"
+              size={12}
+              onClick={() => setCancelAccept("Cancelar")}
+            />,
+            <ButtonV2
+              key="btn-Aceptar"
+              type="pink"
+              label="Aceptar"
+              size={12}
+              onClick={() => setCancelAccept("Aceptar")}
+            />,
+          ]}
+        />
+      )}
+
+      <Container>
+        {Object.keys(sections).map((key, index) => (
+          <TabSectionv2
+            key={index}
+            label={key}
+            className={`tab ${className}`}
+            active={sections[key]}
+            onClick={(e) => {
+              detectClickFunction(e, key, sections);
+            }}
+          />
+        ))}
+      </Container>
+    </>
+  );
+};

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

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  height: 34px;
+  align-items: center;
+  div {
+    font-family: Raleway-500;
+    color: #262626;
+    font-size: 12px;
+    line-height: 21px;
+    border-bottom: none;
+    width: 104px;
+    padding-bottom: 0px;
+    -webkit-transition: 0.1s all;
+    transition: 0.1s all;
+    cursor: pointer;
+  }
+`;

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

@@ -0,0 +1,24 @@
+import { TagAndInputv2 } from "./index";
+
+export default {
+  title: "Components/molecules/TagAndInputv2",
+  component: TagAndInputv2,
+};
+
+const Template = (args) => <TagAndInputv2 {...args} />;
+
+export const InputType = Template.bind({});
+InputType.args = {
+  label: "Default text label",
+  inputType: "text",
+  value: "default text",
+  inputPlaceHolder: "default placeholder",
+};
+
+export const TextAreaType = Template.bind({});
+TextAreaType.args = {
+  label: "Default textarea label",
+  inputType: "textarea",
+  value: "default textarea text",
+  inputPlaceHolder: "default textarea placeholder",
+};

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

@@ -0,0 +1,86 @@
+import { Container } from "./styles";
+import { GeneralInputv2 } from "../../atoms/GeneralInputv2";
+import { ScreenHeaderv2 } from "../../atoms/ScreenHeaderv2";
+
+export const TagAndInputv2 = ({
+  inputType,
+  label,
+  value,
+  inputPlaceHolder,
+  inputId,
+  updatedDescriptions,
+  setUpdatedDescriptions,
+  updatedDatasheets,
+  setUpdatedDatasheets,
+  articleId,
+  version,
+  index,
+  isRequired,
+  dinamicHeight,
+  inputCols,
+  inputRows,
+  minChar,
+  maxChar,
+  minWords,
+  maxWords,
+  required,
+  optionList,
+  description,
+  inputOnChange,
+  color,
+  disabled,
+  onKeyDown,
+  showTooltip,
+  auditClass,
+  showMissingChars,
+}) => {
+  return (
+    <Container
+      inputType={inputType}
+      className={"input-container"}
+      key={`generalTagInput-${inputType}`}
+    >
+      {label?.length && (
+        <div className="title-container">
+          <ScreenHeaderv2
+            text={label}
+            headerType={"input-name-header"}
+            color={color}
+            showInfoTool={true}
+            minChar={minChar}
+            maxChar={maxChar}
+            minWords={minWords}
+            maxWords={maxWords}
+            required={required}
+            description={description}
+            showMissingChars={showMissingChars}
+          />
+        </div>
+      )}
+      <GeneralInputv2
+        inputId={inputId}
+        inputType={inputType}
+        inputValue={value}
+        index={index}
+        disabled={disabled}
+        isRequired={isRequired}
+        inputPlaceholder={inputPlaceHolder}
+        updatedDescriptions={updatedDescriptions}
+        setUpdatedDescriptions={setUpdatedDescriptions}
+        updatedDatasheets={updatedDatasheets}
+        setUpdatedDatasheets={setUpdatedDatasheets}
+        articleId={articleId}
+        version={version}
+        dinamicHeight={dinamicHeight}
+        inputCols={inputCols}
+        inputRows={inputRows}
+        maxChar={maxChar}
+        optionList={optionList}
+        description={description}
+        inputOnChange={inputOnChange}
+        onKeyDown={onKeyDown}
+        auditClass={auditClass}
+      />
+    </Container>
+  );
+};

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

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  .title-container {
+    position: relative;
+    .tooltip {
+      display: none;
+      position: absolute;
+      background-color: ${GlobalColors.white};
+      color: ${({ color }) => (color ? color : GlobalColors.s5)};
+      font-family: ${FontFamily.Raleway};
+      font-size: 12px;
+      line-height: 19px;
+      left: 0;
+      top: 0;
+      height: fit-content;
+    }
+
+    // &:hover {
+    //   .tooltip {
+    //     display: block;
+    //   }
+    // }
+  }
+
+  // & > :first-child {
+  //   & + * {
+  //     margin-top: ${({ inputType }) => (inputType !== "textarea" ? 4 : 15)}px;
+  //   }
+  // }
+  & + * {
+    margin-top: ${({ inputType }) => (inputType !== "textarea" ? 0 : 10)}px;
+  }
+`;

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

@@ -0,0 +1,12 @@
+import { AvatarAndValidation } from "./index";
+
+export default {
+  title: "Components/molecules/AvatarAndValidation",
+  component: AvatarAndValidation,
+};
+
+const Template = (args) => <AvatarAndValidation {...args} />;
+
+export const AvatarAndValidationDefault = Template.bind({});
+
+AvatarAndValidationDefault.args = {};

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

@@ -0,0 +1,77 @@
+import { useState } from "react";
+
+//Components
+import { Container } from "./styles";
+import { Button } from "../../atoms/GeneralButton";
+import { ValidationPanel } from "../../atoms/ValidationPanel";
+import { useEffect } from "react";
+import { RetailerSelector } from "../RetailerSelector";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+
+export const Validation = ({
+  retailers,
+  validation,
+  activeRetailer,
+  setActiveRetailer,
+  showValidationButtons,
+  approve,
+  reject,
+  approveAll,
+  rejectAll,
+  showApproveRejectAll,
+}) => {
+  const [showValidationPanel, setShowValidationPanel] = useState(false);
+  const [buttonType, setButtonType] = useState(
+    validation ? validation : "null-button"
+  );
+
+  const closeValidationPanel = (e) => {
+    if (
+      !e.target.closest("#validation-panel") ||
+      (e.target.closest(".validation-option") && showValidationPanel)
+    ) {
+      document.removeEventListener("click", closeValidationPanel, false);
+      setShowValidationPanel(false);
+    }
+  };
+
+  useEffect(() => {
+    if (showValidationPanel) {
+      document.addEventListener("click", closeValidationPanel, false);
+    }
+  }, [showValidationPanel]);
+
+  return (
+    <Container>
+      <div className="buttons-container">
+        {showValidationButtons && (
+          <ButtonV2
+            id={"btn-validar-info"}
+            key={"btn-validar-info"}
+            type={"pink"}
+            className="button-height"
+            borderType={"oval"}
+            label={"Validar información"}
+            size={10}
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowValidationPanel(true);
+            }}
+          />
+        )}
+      </div>
+      {showValidationPanel && (
+        <ValidationPanel
+          id="validation-panel"
+          setOptionClicked={setButtonType}
+          setShowValidationPanel={setShowValidationPanel}
+          approve={approve}
+          reject={reject}
+          approveAll={approveAll}
+          rejectAll={rejectAll}
+          showApproveRejectAll={showApproveRejectAll}
+        />
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  position: relative;
+  width: fit-content;
+
+  .buttons-container {
+    display: flex;
+    align-items: center;
+
+    > * + * {
+      margin-left: 3px;
+    }
+  }
+  #btn-validar-info button{
+    height:20px;
+    padding:4px 10px;
+  }
+`;

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

@@ -0,0 +1,14 @@
+import { VersionItemv2 } from "./index";
+
+export default {
+  title: "Components/molecules/VersionItemv2",
+  component: VersionItemv2,
+};
+
+const Template = (args) => <VersionItemv2 {...args} />;
+
+export const VersionItemv2Default = Template.bind({});
+
+VersionItemv2Default.args = {
+  
+};