contentoh-components-library 21.5.3 → 21.5.4

package/src/components/molecules/StripeCardSelector/CardSelector.stories.js

@@ -8,6 +8,5 @@ export default {
 const Template = (args) => <CardSelector {...args} />;
 export const CardSelectorDefault = Template.bind({});
 CardSelectorDefault.args = {
-  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxMTAyNWQzMi1kMTM5LTQ0MzctYmZlYy1hNWY1Njg0NDdjODciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY5NDQ3ODQ2NSwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2OTQ0ODIwNjUsImlhdCI6MTY5NDQ3ODQ2NSwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.Fia8x4aahTvCOdt2GohSNoe_9XgBcVuF4bXGWvuNTJ7-_YTe9t1vxGlhw7AG0WC2-tqFiAdx8_UojxqX-UW4lE6vI3pGLmkF7hEfV4XCWq6I3pF5aXYDkRD4YBPyQfzBgwQsx4bR_rm5oRfHPItfc_zJwObV9rQgTYLEQ9u-SL2t0bdx2yOmAjCAtGHp83w5highRkcZx0huKGJnRQ4Wmt5HlgAvsnkzqAimC9E6NH-IDLMAXq8T2f9INPzcdMR403Ybpy3Zrqphw5ITHK1tkUUZxcVsaAnRM7g1-q0OA5S0vRFbcw2lRgaZ_DVJbk0Lzba5NK4nDZ4U97Nw_zXqLA",
-  isSelected: true,
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjQzNjAwMC0wYzgyLTRjNzYtYWEzNi1kM2Q1NGJjZTZiMTMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4NTU2OTUyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODU1NzMxMjMsImlhdCI6MTY4NTU2OTUyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.EotcxmtkUpBxwlXa3bo25iLAmRcT0kj1G3PVITVB_0ZtF8UC19rJIMTNSc1hYkl8cbfCuB_vkjYCAxi4b2SOru5MdMTRhgNjcQTVbiwIYww-QdUWq0WSv84nW_HaRoxCJ8ezm-wBZgUTpcD3VFuynUICbODKKHUfxVdKdVoAM6GGE6ymSbO7-0C7ZumoWEqaZ22BF4G1H-JvLkR-tL5iqXa2N-QCnNoteFmHstBfH6Sp5UZhPav1VBEGRmwdFfUnC-Xc-aNeIFwgWCXMsOXFWbbmWeh0uNF-Btu-QEJ7VkCu4pbElqHWJKBYLCx1zqDBrKrsrNxyvQlxsJ9NSOae8Q",
 };

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/TagAndInput/index.js

@@ -2,7 +2,8 @@ import { Container } from "./styles";
 import { ScreenHeader } from "../../atoms/ScreenHeader/index";
 import { GeneralInput } from "../../atoms/GeneralInput/index";
 import { useState, useEffect } from "react";
-
+import acceptIcon from "../../../assets/images/generalButton/acceptIcon.svg";
+import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
 export const TagAndInput = ({
   inputType,
   label,
@@ -30,12 +31,14 @@ export const TagAndInput = ({
   onKeyDown,
   showTooltip,
   auditClass,
-  onChange, 
+  onChange,
   dataInputs,
   inputGroup,
   boxOnboardingData,
 }) => {
-  const [boxOnboardingList, setBoxOnboardingList] = useState(boxOnboardingData || []);
+  const [boxOnboardingList, setBoxOnboardingList] = useState(
+    boxOnboardingData || []
+  );
 
   useEffect(() => {
     const temp = {};
@@ -52,12 +55,11 @@ export const TagAndInput = ({
     if (tempList.length > 0) {
       setBoxOnboardingList(
         tempList.map((value, index) =>
-          index === tempList.length - 1 ? {value } : { value }
+          index === tempList.length - 1 ? { value } : { value }
         )
       );
     }
   }, []);
-
   useEffect(() => {
     onChange && onChange(boxOnboardingList);
   }, [boxOnboardingList]);
@@ -68,7 +70,7 @@ export const TagAndInput = ({
       className={"input-container"}
       key={`generalTagInput-${inputType}`}
     >
-       {label?.length && (
+      {label?.length && (
         <div className="title-container">
           <ScreenHeader
             text={label}

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 = {
+  
+};

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

@@ -0,0 +1,59 @@
+import { Avatar } from "../../atoms/Avatar/index";
+import { Container } from "./styles";
+import nullIcon from "../../../assets/images/versionSelector/nullIcon.svg";
+import acceptIcon from "../../../assets/images/versionSelector/acceptIcon.svg";
+import versionSelected from "../../../assets/images/versionSelector/versionSelected.svg";
+import { Button } from "../../atoms/GeneralButton";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const VersionItemv2 = ({
+  version = "",
+  articleStatus,
+  currentVersion,
+  productOwner = "owner test",
+  setVersion,
+  timestamp,
+}) => {
+  let textExportedDate = "";
+  if (timestamp !== null) {
+    const exportedDate = new Date(timestamp).toLocaleDateString();
+    textExportedDate = `Última vez exportado: ${exportedDate}`;
+  }
+
+  return (
+    <Container className={(currentVersion ? "active" : "disabled")} onClick={() => setVersion && setVersion(version)}>
+      <div className="header">
+        {/* <Button
+          buttonType={"circular-button" + (currentVersion ? " disabled" : "")}
+          image={versionSelected}
+        
+        /> */}
+       
+      </div>
+      <div className="version-info">
+        <div className="version-title">
+          <ScreenHeader
+            text={"Versión " + version}
+            headerType={"input-name-header"}
+            color={GlobalColors.black}
+          /> 
+          <img
+            src={articleStatus ? acceptIcon : nullIcon}
+            alt={articleStatus ? "Validated version" : "Unvalidated version"}
+          />
+        </div>
+        
+        <p>{textExportedDate}</p>
+        <p>
+          {currentVersion
+            ? "Versión actual"
+            : articleStatus
+            ? "Edición Content-Oh!"
+            : "Versión de " + productOwner}
+        </p>
+        <p>{articleStatus ? "Content-Oh! digital" : productOwner}</p>
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,47 @@
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import styled from "styled-components";
+
+export const Container = styled.div`
+  background-color: ${GlobalColors.white};
+  padding: 5px 10px;
+  border-radius:10px;
+  &.disabled {
+    border: 1px solid ${GlobalColors.gray_light};
+  }
+  &.active {
+    border: 1px solid ${GlobalColors.purple};
+    background:rgba(138,108,170,0.2);
+  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .version-title {
+    display:flex;
+    justify-content:space-between;
+    align-items: center;
+  }
+  .version-info {
+    text-align: left;
+    h2{
+      font-size: 12px;
+      font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    }
+    p {
+      & + * {
+        margin-top: 5px;
+      }
+    }
+
+    p {
+      font-size: 12px;
+      font-family: ${FontFamily.RobotoRegular}, sans-serif;
+      color: ${GlobalColors.gray};
+    }
+  }
+
+  & + * {
+    margin-top: 10px;
+  }
+`;

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

@@ -0,0 +1,13 @@
+import { BarButtons } from "./index";
+
+export default {
+  title: "Components/organisms/BarButtons",
+  component: BarButtons,
+};
+
+const Template = (args) => <BarButtons {...args} />;
+
+export const BarButtonsDefault = Template.bind({});
+BarButtonsDefault.args = {
+  panelText:"Elige la plataforma que conecta proovedores y retailers",
+};