contentoh-components-library 11.0.0 → 12.0.0

package/dist/components/pages/RetailerProductEdition/styles.js

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            max-width: 201px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button {\n              width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n    }\n  }\n  .container {\n    width: 100%;\n    height: 100%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            max-width: 201px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button {\n              width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n    }\n  }\n  .container {\n    width: 100%;\n    height: 100%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), function (_ref) {
   var headerTop = _ref.headerTop;
   return headerTop;
 });

package/dist/global-files/data.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getRetailerServices = exports.getProfilePicture = exports.getPercentage = exports.getImage = void 0;
+exports.getRetailerServices = exports.getProfilePicture = exports.getPercentage = exports.getImage = exports.fetchUsers = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -33,7 +33,6 @@ var getRetailerServices = /*#__PURE__*/function () {
 
           case 2:
             responseArray = _context.sent;
-            console.log(JSON.parse(responseArray[0].data.body).data);
             datasheets = JSON.parse(responseArray[0].data.body).data;
             descriptions = JSON.parse(responseArray[1].data.body).data;
             images = JSON.parse(responseArray[2].data.body).data;
@@ -45,7 +44,7 @@ var getRetailerServices = /*#__PURE__*/function () {
             });
             return _context.abrupt("return", [datasheets, descriptions, images]);
 
-          case 9:
+          case 8:
           case "end":
             return _context.stop();
         }
@@ -216,4 +215,52 @@ var getProfilePicture = function getProfilePicture(userId, width, height) {
   }
 };
 
-exports.getProfilePicture = getProfilePicture;
+exports.getProfilePicture = getProfilePicture;
+
+var fetchUsers = /*#__PURE__*/function () {
+  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(auth) {
+    var usersPromises, usersGroups, header, usersResponse;
+    return _regenerator.default.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            usersPromises = [];
+            usersGroups = [];
+            header = {
+              headers: {
+                Authorization: auth
+              }
+            };
+            /**
+             * 7 will fetch all text specialists
+             * 8 will fetch all img specialists
+             * 4 will fetch all text facilitators
+             * 5 will fetch all img facilitators
+             * 6 will fetch all auditors
+             */
+
+            usersPromises.push(_axios.default.get("".concat(process.env.REACT_APP_USER_ENDPOINT, "?fetchRole=7"), header), _axios.default.get("".concat(process.env.REACT_APP_USER_ENDPOINT, "?fetchRole=8"), header), _axios.default.get("".concat(process.env.REACT_APP_USER_ENDPOINT, "?fetchRole=4"), header), _axios.default.get("".concat(process.env.REACT_APP_USER_ENDPOINT, "?fetchRole=5"), header), _axios.default.get("".concat(process.env.REACT_APP_USER_ENDPOINT, "?fetchRole=6"), header));
+            _context4.next = 6;
+            return Promise.all(usersPromises);
+
+          case 6:
+            usersResponse = _context4.sent;
+            usersResponse.forEach(function (item, i) {
+              usersGroups.push(item.data.data);
+            });
+            return _context4.abrupt("return", usersGroups);
+
+          case 9:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  }));
+
+  return function fetchUsers(_x4) {
+    return _ref4.apply(this, arguments);
+  };
+}();
+
+exports.fetchUsers = fetchUsers;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "11.0.0",
+  "version": "12.0.0",
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@storybook/addon-postcss": "^2.0.0",

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

@@ -30,7 +30,7 @@ export const AsignationOption = ({
     <Container onClick={onClick}>
       <Avatar
         imageType={imageType}
-        image={profileImage?.image}
+        image={profileImage}
         altText={"profile image"}
       />
       <div className="labels-container">

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

@@ -6,6 +6,8 @@ export const Container = styled.div`
   width: fit-content;
   align-items: center;
   cursor: pointer;
+  border-radius: 3px;
+  padding: 5px;
 
   .profile-image,
   .medium-image {
@@ -45,6 +47,10 @@ export const Container = styled.div`
     border: none;
   }
 
+  &:hover {
+    background-color: ${GlobalColors.s3};
+  }
+
   & + * {
     margin-top: 10px;
   }

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

@@ -1,8 +1,8 @@
 import { Container } from "./styles";
 
-export const Commentary = ({ comment }) => {
+export const Commentary = ({ comment, reviewed }) => {
   return (
-    <Container>
+    <Container reviewed={reviewed}>
       <p>{comment}</p>
     </Container>
   );

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

@@ -11,5 +11,6 @@ export const Container = styled.div`
     font-size: 12px;
     line-height: 15px;
     color: ${GlobalColors.s4};
+    text-decoration: ${({ reviewed }) => (reviewed ? "line-through" : "none")};
   }
 `;

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

@@ -28,16 +28,22 @@ export const GeneralInput = ({
 
   const onHandleChange = (e) => {
     setTextValue(({ value }) => (value = e.target.value));
-    addTextAreaToArray(e.target.value, updatedDatasheets, setUpdatedDatasheets);
+    updatedDatasheets &&
+      addTextAreaToArray(
+        e.target.value,
+        updatedDatasheets,
+        setUpdatedDatasheets
+      );
   };
 
   const onHandleTextAreaChange = (e) => {
     setTextValue(({ value }) => (value = e.target.value));
-    addTextAreaToArray(
-      e.target.value,
-      updatedDescriptions,
-      setUpdatedDescriptions
-    );
+    updatedDatasheets &&
+      addTextAreaToArray(
+        e.target.value,
+        updatedDescriptions,
+        setUpdatedDescriptions
+      );
   };
 
   useEffect(() => {

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

@@ -19,10 +19,13 @@ export const StatusAsignationInfo = ({
   saveDescriptions,
   updateImages,
   assignationsImages,
+  setAssignation,
+  isRetailer,
   id = "default-id",
 }) => {
   const [showAsignationPanel, setShowAsignationPanel] = useState(false);
   const [layout, setLayout] = useState(true);
+  const [assignationType, setAssignationType] = useState("facilitator");
 
   const closeAsignations = (e) => {
     if (!e.target.closest("#default-id") && showAsignationPanel) {
@@ -77,14 +80,15 @@ export const StatusAsignationInfo = ({
       )}
       <StatusTag statusType={status} ovalForm={true} />
       <div className="assignations-container">
-        {assignationsImages?.map((assignation, index) => (
+        {assignationsImages?.assignations?.map((assignation, index) => (
           <Avatar
-            key={index + "-" + assignation}
+            key={index + "-" + assignation.id}
             imageType={"small-image"}
-            image={getProfilePicture(assignation, 20, 20)}
+            image={getProfilePicture(assignation.id, 20, 20)}
             altText="user profile image"
             onClick={() => {
               setShowAsignationPanel(true);
+              setAssignationType(assignation?.collaboratorType);
             }}
           />
         ))}
@@ -108,31 +112,41 @@ export const StatusAsignationInfo = ({
             </div>
           </div>
           <div className="asignations-list">
-            {asignationsList !== undefined ? (
-              asignationsList.map((asigantion, index) => (
-                <AsignationOption
-                  profileImage={asignation.image}
-                  asignationType={asignation.asignationType}
-                  name={asignation.name}
-                  team={asigantion.team}
-                />
-              ))
+            {assignationsImages?.collaborators !== undefined ? (
+              assignationsImages?.collaborators[assignationType]?.map(
+                (asignation, index) => (
+                  <AsignationOption
+                    key={index + "-" + asignation.name}
+                    profileImage={getProfilePicture(
+                      asignation?.id_user,
+                      40,
+                      40
+                    )}
+                    onClick={() => {
+                      setAssignation(assignationType, asignation?.id_user);
+                    }}
+                    name={asignation.name}
+                  />
+                )
+              )
             ) : (
               <p className="no-asignations">Sin personas para asignar</p>
             )}
           </div>
-          <div className="default-asignations-list">
-            <AsignationOption
-              asignationType={"provider"}
-              name={"Solicitar a"}
-              team={"Proveedor"}
-            />
-            <AsignationOption
-              asignationType={"team"}
-              name={"Solicitar a"}
-              team={"Content-oh!"}
-            />
-          </div>
+          {isRetailer === 0 && (
+            <div className="default-asignations-list">
+              <AsignationOption
+                asignationType={"provider"}
+                name={"Solicitar a"}
+                team={"Proveedor"}
+              />
+              <AsignationOption
+                asignationType={"team"}
+                name={"Solicitar a"}
+                team={"Content-oh!"}
+              />
+            </div>
+          )}
         </div>
       )}
     </Container>

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

@@ -18,6 +18,7 @@ export const Container = styled.div`
 
   .assignations-container {
     display: flex;
+    cursor: pointer;
   }
 
   .asignation-panel {
@@ -26,10 +27,11 @@ export const Container = styled.div`
     box-sizing: border-box;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
     border-radius: 4px;
-    padding: 10px;
+    padding: 10px 8px;
     position: absolute;
     top: calc(100% + 10px);
     right: 0;
+    z-index: 10;
 
     .asignation-header {
       display: flex;
@@ -57,7 +59,6 @@ export const Container = styled.div`
 
     .asignations-list {
       min-height: 40px;
-      border-bottom: 1px solid ${GlobalColors.s3};
 
       .no-asignations {
         padding: 5px;
@@ -70,7 +71,12 @@ export const Container = styled.div`
 
       & + * {
         margin-top: 10px;
+        border-top: 1px solid ${GlobalColors.s3};
       }
     }
+
+    .default-asignations-list {
+      padding-top: 10px;
+    }
   }
 `;

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

@@ -3,7 +3,13 @@ import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { StatusAsignationInfo } from "../StatusAsignationInfo";
 import { GlobalColors } from "../../../global-files/variables";
 
-export const TableHeader = ({ imagesStatus, activeImage, assignationsImages }) => {
+export const TableHeader = ({
+  imagesStatus,
+  activeImage,
+  assignationsImages,
+  setAssignation,
+  isRetailer,
+}) => {
   return (
     <Container>
       <ScreenHeader
@@ -14,6 +20,8 @@ export const TableHeader = ({ imagesStatus, activeImage, assignationsImages }) =
       <StatusAsignationInfo
         status={imagesStatus}
         assignationsImages={assignationsImages}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
       />
     </Container>
   );

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

@@ -13,10 +13,11 @@ export const FullTabsMenu = ({
   saveDatasheets,
   saveDescriptions,
   updateImages,
-  assignations,
+  assig,
+  setAssignation,
+  isRetailer,
 }) => {
   const [imagesSection, setImagesSection] = useState(false);
-  //console.log(status);
 
   return (
     <Container>
@@ -34,7 +35,9 @@ export const FullTabsMenu = ({
         saveDatasheets={saveDatasheets}
         saveDescriptions={saveDescriptions}
         updateImages={updateImages}
-        assignationsImages={assignations[activeTab]}
+        assignationsImages={assig}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
       />
     </Container>
   );

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

@@ -12,6 +12,8 @@ export const ImageDataTable = ({
   setImages,
   assignationsImages,
   imagesStatus,
+  setAssignation,
+  isRetailer,
 }) => {
   return (
     <Container darkMode={darkMode}>
@@ -19,6 +21,8 @@ export const ImageDataTable = ({
         imagesStatus={imagesStatus}
         activeImage={activeImage}
         assignationsImages={assignationsImages}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
       />
       <Row>
         <ScreenHeader headerType={"table-row-text"} text="Tipo de toma" />

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

@@ -37,10 +37,6 @@ export const ProductImageModal = ({
     }
   }, [showValidationPanel]);
 
-  useEffect(() => {
-    console.log(images?.values[activeImage]);
-  }, [activeImage]);
-
   return (
     <Container>
       <div className="modal-container">

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

@@ -43,6 +43,8 @@ RetailerProductEditionDefault.args = {
     "Ficha técnica": false,
     Imágenes: false,
   },
+  token:
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjOTRhNzMwNS05MzY1LTQ2ZmYtYTQyMy00YjRiYzNiOGIxODAiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjp0cnVlLCJjb2duaXRvOnVzZXJuYW1lIjoiYzk0YTczMDUtOTM2NS00NmZmLWE0MjMtNGI0YmMzYjhiMTgwIiwiY29nbml0bzpyb2xlcyI6WyJhcm46YXdzOmlhbTo6ODk4NjcwMjMyODA3OnJvbGVcL2NvbnRlbnRvaC1kZXYtdXMtZWFzdC0xLWxhbWJkYVJvbGUiXSwiYXVkIjoiNWFjOHRwZ3M2Z2JzcTEzZnJ2cnBpZWVwNDAiLCJldmVudF9pZCI6IjU2M2I0NTFlLTVhZDQtNGMzNy1iNjIzLTc3NjMwM2Y3YjJiNSIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjQ4NzYwODcwLCJuYW1lIjoiQ29sYWJvcmFkb3IiLCJwaG9uZV9udW1iZXIiOiIrNTIxMTExIiwiZXhwIjoxNjQ4NzY0NDcwLCJpYXQiOjE2NDg3NjA4NzAsImVtYWlsIjoic2FsbWVyb24uNUBob3RtYWlsLmNvbSJ9.Y2gmN-9KDeYyvvSJOzKJUP-WL8O4AmZhdLnfHxSB_9lAXQFns6uJUbX1nzE75cuqeQ3NeiNZy4hu8y5Y7hckPuQFy01nY3OoY3SfD06W0SciNz0txNSR7oN6KH_c_9FOwQiQ0mnOs9udo9nDM4faFFUuu9UD6RMVfeLW1gfZmtyc3lfmy6YO6feJcS3opSSQpXH4Mgh415fXFjbyz344ssd5nl7Onyh8jq5i-LAex3OPXhKzjrBnDRpGg3BQPIfpsquGZNKBiWqyos--CuohFBeyevMLGoKOcU-Ga-zIdEfonTtDVRe6CQLgOZJ2xTPdswlzRPby1gFoZjNebeeRVw",
   articleId: 238,
   category: 846,
   version: 2,