contentoh-components-library 21.1.78 → 21.1.81

package/dist/global-files/customHooks.js

@@ -5,31 +5,39 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.closeModals = void 0;
+exports.useCloseModal = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
 var _react = require("react");
 
-var closeModals = function closeModals(id) {
+var useCloseModal = function useCloseModal(id) {
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       showModal = _useState2[0],
       setShowModal = _useState2[1];
 
-  (0, _react.useEffect)(function () {
-    var closeModal = function closeModal(e) {
-      if ((!e.target.closest("#".concat(id)) || e.target.closest("#close-button") || e.target.closest("#add-version")) && showModal) {
-        document.removeEventListener("click", closeModal);
-        setShowModal(false);
-      }
-    };
+  var closeModal = function closeModal(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    console.log(e.target);
+
+    if (!e.target.closest("#".concat(id)) && showModal) {
+      document.removeEventListener("click", closeModal, false);
+      setShowModal(false);
+    }
+  };
 
+  (0, _react.useEffect)(function () {
     if (showModal) {
-      document.addEventListener("click", closeModal);
+      document.addEventListener("click", closeModal, false);
     }
+
+    return function () {
+      document.removeEventListener("click", closeModal, false);
+    };
   }, [showModal]);
   return [showModal, setShowModal];
 };
 
-exports.closeModals = closeModals;
+exports.useCloseModal = useCloseModal;

package/dist/global-files/data.js

@@ -280,18 +280,18 @@ var getNewStatus = function getNewStatus(statusArray) {
   statusArray.forEach(function (element) {
     return lookupString += element + "/";
   });
-  if (lookupString.includes("RCA")) return "RCA";
-  if (lookupString.includes("RC")) return "RC";
+  if (lookupString.includes("RF")) return "RF";
   if (lookupString.includes("RA")) return "RA";
   if (lookupString.includes("RP")) return "RP";
-  if (lookupString.includes("ACA")) return "ACA";
-  if (lookupString.includes("PA")) return "PA";
-  if (lookupString.includes("CA")) return "CA";
-  if (lookupString.includes("IE")) return "IE";
-  if (lookupString.includes("AC")) return "AC";
+  if (lookupString.includes("RC")) return "RC";
+  if (lookupString.includes("UNASSIGNED")) return "IN_PROGRESS";
+  if (lookupString.includes("IN_PROGRESS")) return "IN_PROGRESS";
+  if (lookupString.includes("QF")) return "QF";
+  if (lookupString.includes("AF")) return "AF";
   if (lookupString.includes("AA")) return "AA";
   if (lookupString.includes("AP")) return "AP";
-  if (lookupString.includes("R")) return "R";
+  if (lookupString.includes("AC")) return "AC";
+  if (lookupString.includes("RECEIVED")) return "RECEIVED";
   if (lookupString.includes("NA")) return "NA";
   return new Error("Status not found");
 };

package/dist/index.js

@@ -264,7 +264,7 @@ Object.keys(_index20).forEach(function (key) {
   });
 });
 
-var _index21 = require("./components/atoms/Status/index");
+var _index21 = require("./components/atoms/StatusTag/index");
 
 Object.keys(_index21).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -784,6 +784,19 @@ Object.keys(_OnboardPlan).forEach(function (key) {
   });
 });
 
+var _RegistrationLoginFirstStep = require("./components/pages/RegistrationLoginFirstStep");
+
+Object.keys(_RegistrationLoginFirstStep).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RegistrationLoginFirstStep[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _RegistrationLoginFirstStep[key];
+    }
+  });
+});
+
 var _RegistrationLoginSecondStep = require("./components/pages/RegistrationLoginSecondStep");
 
 Object.keys(_RegistrationLoginSecondStep).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.1.78",
+  "version": "21.1.81",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/atoms/AsignationOption/index.js

@@ -6,7 +6,7 @@ import requesToProvider from "../../../assets/images/asignationOptions/requestTo
 import requestToTeam from "../../../assets/images/asignationOptions/requestToTeam.svg";
 import availableIcon from "../../../assets/images/asignationOptions/availableIcon.svg";
 import { getNewStatus } from "../../../global-files/data";
-import { Status } from "../Status";
+import { StatusTag } from "../StatusTag";
 
 export const AsignationOption = ({
   profileImage,
@@ -51,7 +51,7 @@ export const AsignationOption = ({
       {asignationType && iconsAsignation[asignationType]}
       {services && (
         <div className="status-container">
-          <Status statusType={getStatus()} />
+          <StatusTag statusType={getStatus()} />
         </div>
       )}
       {active && <div className="green-circle"></div>}

package/src/components/atoms/ProductPercentCard/Percent.stories.js

@@ -3,18 +3,18 @@ import { ProductPercentCard } from "./index";
 const status = [
   "-",
   "Pr",
-  "R",
-  "AS",
-  "CA",
-  "IE",
-  "AC",
+  "Rc",
+  "As",
+  "P",
+  "QF",
+  "AF",
   "AA",
   "AP",
-  "ACA",
+  "AC",
   "RA",
-  "RC",
+  "RF",
   "RP",
-  "RCA",
+  "RC",
   "Ex",
 ];
 
@@ -29,12 +29,13 @@ export default {
   },
 };
 
-const Template = (args) => <ProductPercentCard {...args} />;
+const Template = (args) => <ProductPercentCard {...args}/>;
 
-export const ProductPercentCardDefault = Template.bind({});
+export const ProductPercentCardDefault = Template.bind ({});
 
 ProductPercentCardDefault.args = {
   statusType: "-",
   productsInStatus: 0,
   totalProcucts: 0,
-};
+
+};

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

@@ -8,8 +8,8 @@ export const Container = styled.div`
   height: 83px;
   padding: 10px;
 
-  &.status-PA,
-  &.status-RC {
+  &.status-Pr,
+  &.status-Rc {
     border: 1px solid ${GlobalColors.reception};
     .span {
       color: ${GlobalColors.reception};
@@ -22,19 +22,19 @@ export const Container = styled.div`
     }
   }
 
-  &.status-AS,
-  &.status-CA,
-  &.status-IE {
+  &.status-As,
+  &.status-P,
+  &.status-QF {
     border: 1px solid ${GlobalColors.in_progress};
     .span {
       color: ${GlobalColors.in_progress};
     }
   }
 
-  &.status-AC,
+  &.status-AF,
   &.status-AA,
   &.status-AP,
-  &.status-ACA {
+  &.status-AC {
     border: 1px solid ${GlobalColors.finished};
     .span {
       color: ${GlobalColors.finished};
@@ -42,9 +42,9 @@ export const Container = styled.div`
   }
 
   &.status-RA,
-  &.status-RC,
+  &.status-RF,
   &.status-RP,
-  &.status-RCA {
+  &.status-RC {
     border: 1px solid #d74ded;
     .span {
       color: #d74ded;

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

@@ -16,26 +16,27 @@ export const Container = styled.div`
       ? GlobalColors.s4
       : GlobalColors.white};
 
-  &.status-CA {
+  &.status-As,
+  &.status-P {
     background-color: ${GlobalColors.in_progress};
   }
 
-  &.status-R,
-  &.status-AS {
+  &.status-Pr,
+  &.status-Rr {
     background-color: ${GlobalColors.reception};
   }
 
   &.status-AA,
   &.status-AP,
-  &.status-ACA,
-  &.status-AC {
+  &.status-AC,
+  &.status-AF {
     background-color: ${GlobalColors.finished};
   }
 
   &.status-RA,
-  &.status-RC,
+  &.status-RF,
   &.status-RP,
-  &.status-RCA {
+  &.status-RC {
     background-color: ${GlobalColors.rejected_status};
   }
 

package/src/components/atoms/StatusTag/index.js

@@ -0,0 +1,37 @@
+import { Container } from "./styles";
+
+export const StatusTag = ({ statusType, ovalForm }) => {
+  const getShortStatus = (status) => {
+    switch (status) {
+      case "COMPLETED":
+        return "C";
+      case "RECEPTION":
+        return "Pr";
+      case "NULL":
+        return "-";
+      case "RECEIVED":
+        return "Rc";
+      case "IN_PROGRESS":
+        return "P";
+      case "ASSIGNED":
+        return "As";
+      case "APPROVED":
+        return "Ap";
+      case "VALIDATING":
+        return "V";
+      case "PAID_OUT":
+        return "Po";
+      default:
+        return status;
+    }
+  };
+  return (
+    <Container
+      className={`status-${getShortStatus(statusType)} ${
+        ovalForm && "oval-form"
+      }`}
+    >
+      <p>{getShortStatus(statusType)}</p>
+    </Container>
+  );
+};

package/src/components/atoms/{Status → StatusTag}/styles.js

@@ -16,27 +16,30 @@ export const Container = styled.div`
     line-height: 20px;
   }
 
-  &.status-CA,
-  &.status-IE {
+  &.status-As,
+  &.status-P,
+  &.status-IN_PROGRESS,
+  &.status-QF {
     background-color: ${GlobalColors.in_progress};
   }
 
-  &.status-R,
-  &.status-AS {
+  &.status-Pr,
+  &.status-Rr,
+  &.status-Rc {
     background-color: ${GlobalColors.reception};
   }
 
   &.status-AA,
   &.status-AP,
   &.status-AC,
-  &.status-ACA {
+  &.status-AF {
     background-color: ${GlobalColors.finished};
   }
 
   &.status-RA,
-  &.status-RC,
+  &.status-RF,
   &.status-RP,
-  &.status-RCA {
+  &.status-RC {
     background-color: ${GlobalColors.rejected_status};
   }
 

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

@@ -5,18 +5,18 @@ import assignedImage2 from "../../../assets/images/componentAssigned/assignedIma
 const status = [
   "-",
   "Pr",
-  "R",
-  "AS",
-  "CA",
-  "IE",
-  "AC",
+  "Rc",
+  "As",
+  "P",
+  "QF",
+  "AF",
   "AA",
   "AP",
-  "ACA",
+  "AC",
   "RA",
-  "RC",
+  "RF",
   "RP",
-  "RCA",
+  "RC",
   "Ex",
 ];
 

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

@@ -9,8 +9,8 @@ export const Container = styled.div`
   padding-bottom: 5px;
   position: relative;
 
-  &.status-PA,
-  &.status-R {
+  &.status-Pr,
+  &.status-Rc {
     border: 1px solid ${GlobalColors.reception};
     .header-and-paragraph {
       color: ${GlobalColors.reception};
@@ -23,19 +23,19 @@ export const Container = styled.div`
     }
   }
 
-  &.status-AA,
-  &.status-CA,
-  &.status-IE {
+  &.status-As,
+  &.status-P,
+  &.status-QF {
     border: 1px solid ${GlobalColors.in_progress};
     .header-and-paragraph {
       color: ${GlobalColors.in_progress};
     }
   }
 
-  &.status-AC,
+  &.status-AF,
   &.status-AA,
   &.status-AP,
-  &.status-ACA {
+  &.status-AC {
     border: 1px solid ${GlobalColors.finished};
     .header-and-paragraph {
       color: ${GlobalColors.finished};
@@ -43,9 +43,9 @@ export const Container = styled.div`
   }
 
   &.status-RA,
-  &.status-RC,
+  &.status-RF,
   &.status-RP,
-  &.status-RCA {
+  &.status-RC {
     border: 1px solid #d74ded;
     .header-and-paragraph {
       color: #d74ded;
@@ -56,6 +56,7 @@ export const Container = styled.div`
     border: 1px solid ${GlobalColors.exported};
     .header-and-paragraph {
       color: ${GlobalColors.exported};
+      
     }
   }
 

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

@@ -1,6 +1,6 @@
 import { Container } from "./styles";
 import { ScreenHeader } from "../../atoms/ScreenHeader/index";
-import { Status } from "../../atoms/Status/index";
+import { StatusTag } from "../../atoms/StatusTag/index";
 import { ProgressBar } from "../../atoms/ProgressBar/index";
 import { PriorityFlag } from "../../atoms/PriorityFlag/index";
 
@@ -14,7 +14,7 @@ export const ProductNameHeader = ({
   return (
     <Container>
       <ScreenHeader headerType={"product-name-header"} text={productName} />
-      <Status statusType={statusType} />
+      <StatusTag statusType={statusType} />
       <ProgressBar percent={percent} progressBarType={statusType} />
       <PriorityFlag priority={priority} />
       <ScreenHeader headerType={"date-header"} text={date} />

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

@@ -1,7 +1,7 @@
 import { Container } from "./styles";
 import { ScreenHeader } from "../../atoms/ScreenHeader/index";
 import { Avatar } from "../../atoms/Avatar";
-import { Status as StatusTag } from "../../atoms/Status/index";
+import { StatusTag } from "../../atoms/StatusTag/index";
 import { Button } from "../../atoms/GeneralButton";
 import { useEffect, useState } from "react";
 import { AsignationOption } from "../../atoms/AsignationOption/index";
@@ -74,12 +74,10 @@ export const StatusAsignationInfo = ({
         iconSize={"medium-image"}
         slidePosition={"bottom-slide"}
       />
-      <Button
+      <img
         buttonType={"general circular-button version-button"}
-        onClick={() => {
-          setShowVersionSelector(true);
-        }}
-        label={`V${version}`}
+        onClick={setShowVersionSelector}
+        alt={`V${version}`}
       />
       {status !== "-" && <StatusTag statusType={status} ovalForm={true} />}
       {showSaveButton && (

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

@@ -26,7 +26,7 @@ export const FullProductNameHeader = ({
         const element = [];
         servicesData.forEach((sd) => {
           if (sd.id_retailer === rt.id) {
-            element.push(sd.status ? sd.status : "R");
+            element.push(sd.status ? sd.status : "RECEIVED");
           } else element.push("NA");
           rt["services"] = element;
         });
@@ -81,4 +81,4 @@ export const FullProductNameHeader = ({
       </div>
     </Container>
   );
-};
+};

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

@@ -16,8 +16,9 @@ export const VersionSelector = ({
   companyName,
   currentVersion,
   setShowCreateVersion,
+  setShowVersionSelector,
 }) => {
-  const [versions, setVersions] = useState();
+  const [versions, setVersions] = useState([]);
 
   const loadProductVersions = async (articleId) => {
     try {
@@ -32,8 +33,13 @@ export const VersionSelector = ({
     }
   };
 
-  useEffect(async () => {
-    await loadProductVersions(articleId);
+  useEffect(() => {
+    loadProductVersions(articleId);
+
+    return () => {
+      setVersions([]);
+      setShowCreateVersion(false);
+    };
   }, []);
 
   return (
@@ -55,6 +61,7 @@ export const VersionSelector = ({
           <Button
             image={closeIcon}
             buttonType={"circular-button"}
+            onClick={() => setShowVersionSelector(false)}
             id="close-button"
           />
         </div>

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

@@ -10,6 +10,7 @@ export const Container = styled.div`
   position: absolute;
   right: 0;
   top: 0;
+  z-index: 500;
 
   .versions-header {
     display: flex;

package/src/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js

@@ -12,8 +12,8 @@ export const ProviderProductEditionDefault = Template.bind({});
 ProviderProductEditionDefault.args = {
   tabsSections: {
     Descripción: true,
-    "Ficha técnica": true,
-    Imágenes: true,
+    "Ficha técnica": false,
+    Imágenes: false,
   },
   token:
     "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5ZTQ0OGMwZS0xOGVkLTRlYWYtOWY4OC0zYjMxOTdkNGEyZmQiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjllNDQ4YzBlLTE4ZWQtNGVhZi05Zjg4LTNiMzE5N2Q0YTJmZCIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiI5ODg5YTFhYi1mMTljLTRiNzQtYjQ5Ni0xZDM3YzZjY2U3YmQiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY1NjQzMTQ5OCwibmFtZSI6IkdlcnNvbiBNYXJ0w61uZXoiLCJwaG9uZV9udW1iZXIiOiIrNTIxMjMxMjMxMjMiLCJleHAiOjE2NTY0MzUwOTgsImlhdCI6MTY1NjQzMTQ5OCwiZW1haWwiOiJnbWFydGluZXpAY29udGVudG9oLmNvbSJ9.qMBMYKxcaQrXT-3373y3K4eX73vgRApuFsT9-FVl9AuP_BKy51nHReEvwWHO4SMVpFxf3eHoQhUHG2PTl8qlvnoXlLqfCdgJEnq5DMFIOqcs_WzUHfb3k4r3y66DMzPwQI0aEk35ZYsAvkxd9m6Ax9fwJBuMCpb3jf7Az0SBpDvUgT7iRvS2b09UTwkW3ZIxfnaUE4uoqacoTUm7239AjuNe5Qh3UZl0rVvZ-mnh3SmAcNpxl-RtUEdcw4gO0MbIch39gIJ_1CcvBxXR2tVSUILZWfbpXI2ubA_sQZ0VJy5kWpe4pYF5beJISZ7sZ0Fzrv2ftE7poEtueYloftRfng",
@@ -96,6 +96,7 @@ ProviderProductEditionDefault.args = {
     ],
   },
   location: {
+    product: { articleId: 109485, versionId: 3 },
     state: { origin: "Contentoh" },
   },
   user: {