contentoh-components-library 21.1.62 → 21.1.65

package/src/components/atoms/SliderToolTip/styles.js

@@ -5,10 +5,14 @@ export const Container = styled.div`
   background: transparent;
   cursor: pointer;
   position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
   & + * {
     margin-left: 10px;
   }
   img {
+    margin: auto 0;
     &.small-image {
       width: 20px;
       height: 20px;
@@ -101,22 +105,22 @@ export const Slider = styled.div`
         }
       }
       span {
-      font-family: "Avenir Next";
-      font-style: normal;
-      font-weight: 500;
-      font-size: 15px;
-      line-height: 15px;
-      text-align: center;
-      letter-spacing: -0.015em;
-      color: #fafafa;
-      display: flex;
-      justify-content: center;
-      background-color: #281f33;
-      & + * {
-        margin-top: 10px;
+        font-family: "Avenir Next";
+        font-style: normal;
+        font-weight: 500;
+        font-size: 15px;
+        line-height: 15px;
+        text-align: center;
+        letter-spacing: -0.015em;
+        color: #fafafa;
+        display: flex;
+        justify-content: center;
+        background-color: #281f33;
+        & + * {
+          margin-top: 10px;
+        }
       }
     }
-    }
     .end-div {
       div {
         height: 130px;

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

@@ -26,6 +26,8 @@ export const StatusAsignationInfo = ({
   onClickSave,
   showSaveButton,
   canAssign,
+  version,
+  setShowVersionSelector,
 }) => {
   const [showAsignationPanel, setShowAsignationPanel] = useState(false);
   const [layout, setLayout] = useState(false);
@@ -71,7 +73,14 @@ export const StatusAsignationInfo = ({
         slidefront={slidefront}
         iconSize={"medium-image"}
         slidePosition={"bottom-slide"}
-      ></SliderToolTip>
+      />
+      <Button
+        buttonType={"general circular-button version-button"}
+        onClick={() => {
+          setShowVersionSelector(true);
+        }}
+        label={`V${version}`}
+      />
       {status !== "-" && <StatusTag statusType={status} ovalForm={true} />}
       {showSaveButton && (
         <Button

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

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

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

@@ -0,0 +1,47 @@
+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 VersionItem = ({
+  version = "",
+  articleStatus,
+  currentVersion,
+  productOwner = "owner test",
+  setVersion,
+}) => {
+  return (
+    <Container>
+      <div className="header">
+        <Button
+          buttonType={"circular-button" + (currentVersion ? " disabled" : "")}
+          image={versionSelected}
+          onClick={() => setVersion && setVersion(version)}
+        />
+        <img
+          src={articleStatus ? acceptIcon : nullIcon}
+          alt={articleStatus ? "Validated version" : "Unvalidated version"}
+        />
+      </div>
+      <div className="version-info">
+        <ScreenHeader
+          text={"Version " + version}
+          headerType={"input-name-header"}
+          color={GlobalColors.magenta_s2}
+        />
+        <p>
+          {currentVersion
+            ? "Version actual"
+            : articleStatus
+            ? "Edición Content-oh!"
+            : "Version de " + productOwner}
+        </p>
+        <p>{articleStatus ? "Content-oh! Digital" : productOwner}</p>
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,32 @@
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import styled from "styled-components";
+
+export const Container = styled.div`
+  background-color: ${GlobalColors.deep_gray};
+  padding-bottom: 5px;
+  border-bottom: 1px solid ${GlobalColors.s4};
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .version-info {
+    text-align: right;
+    h2,
+    p {
+      & + * {
+        margin-top: 5px;
+      }
+    }
+
+    p {
+      font-size: 12px;
+      font-family: ${FontFamily.AvenirNext};
+      color: ${GlobalColors.s2};
+    }
+  }
+
+  & + * {
+    margin-top: 18px;
+  }
+`;

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

@@ -0,0 +1,14 @@
+import { CreateVersion } from "./index";
+
+export default {
+  title: "Components/organisms/CreateVersion",
+  component: CreateVersion,
+};
+
+const Template = (args) => <CreateVersion {...args} />;
+
+export const CreateVersionDefault = Template.bind({});
+CreateVersionDefault.args = {
+  idArticle: 76201,
+  version: 2,
+};

package/src/components/organisms/CreateVersion/RenderChilds.js

@@ -0,0 +1,137 @@
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+import { Button } from "../../atoms/GeneralButton";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { VersionOptions, EmptyVersion, CreateVersion } from "./styles";
+import createVersionImg from "../../../assets/images/versionSelector/createVersion.svg";
+import genericModalWarning from "../../../assets/images/genericModal/genericModalWarning.svg";
+import { VersionSelect } from "../../atoms/Select/VersionSelect";
+
+export const Children = (
+  step,
+  setStep,
+  versions,
+  selectedVersions,
+  onChange,
+  createVersion
+) => {
+  switch (step) {
+    case "version-options":
+      return (
+        <VersionOptions>
+          <img src={createVersionImg} alt="create version icon" />
+          <ScreenHeader
+            fontFamily={FontFamily.Raleway_500}
+            headerType={"product-name-header"}
+            color={GlobalColors.white}
+            text={"Crea una nueva versión"}
+          />
+          <ScreenHeader
+            fontFamily={FontFamily.Raleway}
+            headerType={"retailer-name-header"}
+            color={GlobalColors.white}
+            text={
+              "Puedes elegir el contenido de versiones anteriores o crear una versión desde cero"
+            }
+          />
+          <div className="buttons-container">
+            <Button
+              label={"Versión desde cero"}
+              buttonType={"general-transparent-button"}
+              onClick={() => setStep("empty-version")}
+            />
+            <Button
+              label={"Versión personalizada"}
+              buttonType={"general-default-button"}
+              onClick={() => setStep("create-version")}
+            />
+          </div>
+        </VersionOptions>
+      );
+    case "empty-version":
+      return (
+        <EmptyVersion>
+          <img src={genericModalWarning} alt="warning icon" />
+          <ScreenHeader
+            fontFamily={FontFamily.Raleway_500}
+            headerType={"product-name-header"}
+            color={GlobalColors.white}
+            text={
+              "Si creas una versión desde cero perderas la información actual"
+            }
+          />
+          <ScreenHeader
+            fontFamily={FontFamily.Raleway}
+            headerType={"retailer-name-header"}
+            color={GlobalColors.white}
+            text={"¿Deseas Continuar?"}
+          />
+          <div className="buttons-container">
+            <Button
+              label={"Atrás"}
+              buttonType={"general-transparent-button"}
+              onClick={() => setStep("version-options")}
+            />
+            <Button
+              label={"Continuar"}
+              buttonType={"general-default-button"}
+              onClick={() => createVersion(true)}
+            />
+          </div>
+        </EmptyVersion>
+      );
+    case "create-version":
+      return (
+        <CreateVersion>
+          <ScreenHeader
+            fontFamily={FontFamily.Raleway_500}
+            headerType={"retailer-name-header"}
+            color={GlobalColors.white}
+            text={
+              "Elige el contenido que deseas utilizar de versiones anteriores"
+            }
+          />
+          <div className="version-selector">
+            <div className="selector">
+              <VersionSelect
+                versions={versions}
+                label={"Ficha técnica"}
+                id={"datasheet"}
+                selectedVersions={selectedVersions}
+                onChange={(e) => onChange(e)}
+              />
+            </div>
+            <div className="selector">
+              <VersionSelect
+                versions={versions}
+                label={"Descripción"}
+                id={"description"}
+                selectedVersions={selectedVersions}
+                onChange={(e) => onChange(e)}
+              />
+            </div>
+            <div className="selector">
+              <VersionSelect
+                versions={versions}
+                label={"Imágenes"}
+                id={"image"}
+                selectedVersions={selectedVersions}
+                onChange={(e) => onChange(e)}
+              />
+            </div>
+          </div>
+          <div className="buttons-container">
+            <Button
+              label={"Atrás"}
+              buttonType={"general-transparent-button"}
+              onClick={() => setStep("version-options")}
+            />
+            <Button
+              label={"Continuar"}
+              buttonType={"general-default-button"}
+              onClick={() => createVersion()}
+            />
+          </div>
+        </CreateVersion>
+      );
+  }
+};

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

@@ -0,0 +1,88 @@
+import { Button } from "../../atoms/GeneralButton";
+import { Container } from "./styles";
+import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
+import { useEffect, useState } from "react";
+import { Children } from "./RenderChilds";
+import axios from "axios";
+
+export const CreateVersion = ({ idArticle, version, setShowCreateVersion }) => {
+  const [step, setStep] = useState("version-options");
+  const [versions, setVersions] = useState([]);
+  const [selectedVersions, setSelectedVersions] = useState({
+    datasheet: version,
+    description: version,
+    image: version,
+  });
+
+  const getVersions = async () => {
+    try {
+      const response = await axios({
+        method: "get",
+        url: `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${idArticle}&provider=true`,
+        headers: {
+          Authorization: sessionStorage.getItem("jwt"),
+        },
+      });
+      setVersions(JSON.parse(response.data.body).data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const createVersion = async (isEmpty) => {
+    try {
+      let data = {
+        articleId: idArticle,
+        isEmpty
+      };
+
+      isEmpty && (data["version"] = selectedVersions);
+
+      await axios({
+        method: "post",
+        url: process.env.REACT_APP_VERSIONS_ENDPOINT,
+        data: data,
+        headers: {
+          Authorization: sessionStorage.getItem("jwt"),
+        },
+      });
+      setShowCreateVersion(false);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const onChange = (e) => {
+    setSelectedVersions({
+      ...selectedVersions,
+      [e.target.name]: parseInt(e.target.value.slice(-1)),
+    });
+  };
+
+  useEffect(() => {
+    getVersions();
+  }, []);
+
+  return (
+    <Container>
+      <div className="modal-container">
+        <div className="button-container">
+          <Button
+            image={closeIcon}
+            buttonType={"circular-button"}
+            id="close-modal-button"
+            onClick={() => setShowCreateVersion(false)}
+          />
+        </div>
+        {Children(
+          step,
+          setStep,
+          versions,
+          selectedVersions,
+          onChange,
+          createVersion
+        )}
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,79 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  background-color: #281f3366;
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .modal-container {
+    position: relative;
+    padding: 40px 20px;
+    background: #281f33;
+    border-radius: 39px;
+
+    .button-container {
+      display: flex;
+      justify-content: flex-end;
+      padding-right: 15px;
+    }
+  }
+`;
+
+export const VersionOptions = styled.div`
+  max-width: 560px;
+  text-align: center;
+
+  & > * + * {
+    margin-top: 20px;
+  }
+
+  img + * {
+    margin-top: 0;
+  }
+
+  .buttons-container {
+    display: flex;
+    justify-content: space-evenly;
+
+    button {
+      flex: 0.3 0 30%;
+    }
+
+    .general-transparent-button {
+      color: ${GlobalColors.white};
+      border: 1px solid ${GlobalColors.white};
+    }
+  }
+`;
+
+export const EmptyVersion = VersionOptions;
+
+export const CreateVersion = styled(VersionOptions)`
+  .retailer-name-header {
+    margin: 30px 0;
+  }
+  .version-selector {
+    display: flex;
+    justify-content: space-evenly;
+
+    .selector {
+      flex: 0.1 1 20%;
+      font-family: ${FontFamily.Lato};
+      color: ${GlobalColors.white};
+      font-size: 11px;
+      font-weight: normal;
+    }
+
+    & + * {
+      margin-top: 50px;
+    }
+  }
+`;

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

@@ -17,6 +17,8 @@ export const FullTabsMenu = ({
   onClickSave,
   showSaveButton,
   canAssign,
+  version,
+  setShowVersionSelector,
 }) => {
   const [imagesSection, setImagesSection] = useState(false);
 
@@ -28,7 +30,7 @@ export const FullTabsMenu = ({
         setActiveTab={setActiveTab}
       />
       <StatusAsignationInfo
-      canAssign={canAssign}
+        canAssign={canAssign}
         status={status}
         activeTab={activeTab}
         setImageLayout={setImageLayout}
@@ -40,6 +42,8 @@ export const FullTabsMenu = ({
         onClickSave={onClickSave}
         askToDeleteImages={askToDeleteImages}
         showSaveButton={showSaveButton}
+        version={version}
+        setShowVersionSelector={setShowVersionSelector}
       />
     </Container>
   );

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

@@ -0,0 +1,15 @@
+import { VersionSelector } from "./index";
+
+export default {
+  title: "Components/organisms/VersionSelector",
+  component: VersionSelector,
+};
+
+const Template = (args) => <VersionSelector {...args} />;
+
+export const VersionSelectorDefault = Template.bind({});
+VersionSelectorDefault.args = {
+  articleId: 35707,
+  companyName: "COMPANY DEV",
+  currentVersion: 7,
+};

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

@@ -0,0 +1,75 @@
+import { Container } from "./styles";
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { Button } from "../../atoms/GeneralButton";
+import addVersion from "../../../assets/images/versionSelector/addVersion.svg";
+import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
+import { GlobalColors } from "contentoh-components-library/dist/global-files/variables";
+import { FontFamily } from "../../../global-files/variables";
+import { VersionItem } from "../../molecules/VersionItem";
+
+export const VersionSelector = ({
+  modalId,
+  articleId,
+  setVersion,
+  companyName,
+  currentVersion,
+  setShowCreateVersion,
+}) => {
+  const [versions, setVersions] = useState();
+
+  const loadProductVersions = async (articleId) => {
+    try {
+      const response = await axios.get(
+        `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${articleId}&provider=true`
+      );
+
+      const versionList = JSON.parse(response.data.body).data;
+      setVersions(versionList);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    loadProductVersions(articleId);
+  }, []);
+
+  return (
+    <Container id={modalId}>
+      <div className="versions-header">
+        <ScreenHeader
+          text={"Version del producto"}
+          headerType={"input-name-header"}
+          color={GlobalColors.white}
+          fontFamily={FontFamily.Lato}
+        />
+        <div className="buttons-container">
+          <Button
+            image={addVersion}
+            buttonType={"circular-button"}
+            onClick={() => setShowCreateVersion(true)}
+            id="add-version"
+          />
+          <Button
+            image={closeIcon}
+            buttonType={"circular-button"}
+            id="close-button"
+          />
+        </div>
+      </div>
+      <div className="versions-container">
+        {versions?.map((item) => (
+          <VersionItem
+            version={item.version}
+            articleStatus={item.article_status}
+            currentVersion={item.version === currentVersion}
+            productOwner={companyName}
+            setVersion={setVersion}
+          />
+        ))}
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 300px;
+  height: 100%;
+  background-color: ${GlobalColors.deep_gray};
+  padding: 15px;
+  overflow: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  .versions-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .buttons-container {
+      display: flex;
+      align-items: center;
+
+      button + * {
+        margin-left: 10px;
+      }
+    }
+  }
+`;