contentoh-components-library 21.3.21 → 21.3.23

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

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getInputsData = exports.getAuditVersion = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var getAuditVersion = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(articleId, setState, token) {
+    var auditResponse;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return _axios.default.get("".concat(process.env.REACT_APP_GET_AUDIT, "?articleId=").concat(articleId), {
+              headers: {
+                Authorization: token
+              }
+            });
+
+          case 2:
+            auditResponse = _context.sent;
+            console.log(auditResponse, "auditResponse");
+
+            if (auditResponse.status === 200) {
+              setState(JSON.parse(auditResponse.data.body).data);
+            }
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function getAuditVersion(_x, _x2, _x3) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+exports.getAuditVersion = getAuditVersion;
+
+var getInputsData = function getInputsData(services, activeRetailer, setDatasheetState, setDescriptionState) {
+  if (services.length > 0) {
+    var _services$0$activeRet, _services$, _services$2;
+
+    if ((_services$0$activeRet = services[0][activeRetailer.id]) !== null && _services$0$activeRet !== void 0 && _services$0$activeRet.data) services[0][activeRetailer.id].data = Object.values(services[0][activeRetailer.id].data);
+    var datagroups = services[0][activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id];
+    var inputs = (_services$ = services[0]) === null || _services$ === void 0 ? void 0 : _services$.inputs;
+    var descriptions = (_services$2 = services[1]) === null || _services$2 === void 0 ? void 0 : _services$2.filter(function (service) {
+      return (service === null || service === void 0 ? void 0 : service.id) === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id);
+    });
+    setDatasheetState([datagroups, inputs]);
+    setDescriptionState(descriptions);
+  }
+};
+
+exports.getInputsData = getInputsData;

package/package.json

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

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

@@ -26,6 +26,7 @@ export const GeneralInput = ({
   inputOnChange,
   disabled,
   onKeyDown,
+  auditClass,
 }) => {
   const [textValue, setTextValue] = useState({
     value: inputValue,
@@ -100,7 +101,7 @@ export const GeneralInput = ({
   };
 
   return (
-    <Container isRequired={requiredEmpty}>
+    <Container isRequired={requiredEmpty} className={auditClass}>
       {optionList?.length > 0 ? (
         <select
           key={`dropdownK${inputId}`}

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

@@ -57,4 +57,12 @@ export const Container = styled.div`
     font-size: 12px;
     color: ${GlobalColors.deep_gray};
   }
-`;
+
+  &.audit-class {
+    input,
+    .quill {
+      border: 1px solid #8a6caa;
+      background-color: #ededfc;
+    }
+  }
+`;

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

@@ -21,6 +21,8 @@ export const GalleryElement = ({
   selectedImages,
   setSelectedImages,
   setCheckAll,
+  auditImages,
+  compare,
 }) => {
   const [statusValidation, setStatusValidation] = useState(validation);
   const [showValidationPanel, setShowValidationPanel] = useState(false);
@@ -55,14 +57,24 @@ export const GalleryElement = ({
     }
   }, [showValidationPanel]);
 
+  const isEquals = (value, auditValue) => {
+    return !value === auditValue;
+  };
+
   return (
-    <Container className={gridLayout ? "grid-gallery" : "row-gallery"}>
+    <Container
+      className={`${gridLayout ? "grid-gallery" : "row-gallery"} ${
+        !isEquals(image.uuid, auditImages?.values[number].uuid) && compare
+          ? "audit-class"
+          : ""
+      }`}
+    >
       <div className="buttons-container">
         <CheckBox id={id} label={label} onChange={(e) => checkOnChange(e)} />
       </div>
       <div className="image-container">
         <ProductImage
-          img={image?.src}
+          img={compare ? auditImages?.values[number]?.src : image?.src}
           altText={image?.altText}
           imageType={`catalogue-image-${gridLayout ? "big" : "small"}-size`}
         />

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

@@ -110,4 +110,9 @@ export const Container = styled.div`
       }
     }
   }
+
+  &.audit-class{
+    border: 1px solid #8a6caa;
+    background-color: #ededfc;
+  }
 `;

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

@@ -4,12 +4,7 @@ import { Button } from "../../atoms/GeneralButton/index";
 import { useEffect, useRef, useState } from "react";
 import { Chat } from "../../organisms/Chat";
 
-export const HeaderTop = ({
-  setHeaderTop,
-  withChat,
-  productSelected,
-  token,
-}) => {
+export const HeaderTop = ({ setHeaderTop, auditableVersion, setCompare }) => {
   const headerTop = useRef();
 
   useEffect(() => {
@@ -19,22 +14,18 @@ export const HeaderTop = ({
   return (
     <Container ref={headerTop}>
       <ScreenHeader text="Edición de producto" />
-      <div className="buttons-top">
-        {withChat && (
-          <Chat
-            chatType="merchant_product"
-            chatContainerType="popUp"
-            chatData={{
-              userToken: token,
-              id: productSelected.id_article,
-              version: productSelected.version,
+      <div className="buttons-container">
+        {auditableVersion && (
+          <Button
+            buttonType="general-white-button circular-button"
+            label={"A|B"}
+            onClick={() => {
+              setCompare((current) => !current);
             }}
-            size={18}
           />
         )}
-
         <Button
-          buttonType="close-button"
+          buttonType="general-white-button close-button"
           onClick={() => {
             window.location.href = `/products`;
           }}

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

@@ -3,8 +3,27 @@ import styled from "styled-components";
 export const Container = styled.div`
   display: flex;
   justify-content: space-between;
+<<<<<<< HEAD
   .buttons-top {
     display: flex;
     align-items: center;
+=======
+  padding-top: 10px;
+
+  .buttons-container {
+    display: flex;
+
+    button {
+      width: 30px;
+      height: 30px;
+      border: 1px solid #f0f0f0;
+      background-size: 20px;
+      padding: 0;
+
+      & + * {
+        margin-left: 10px;
+      }
+    }
+>>>>>>> versionManager
   }
 `;

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

@@ -1,6 +1,8 @@
 import { Container } from "./styles";
 import { ScreenHeader } from "../../atoms/ScreenHeader/index";
 import { GeneralInput } from "../../atoms/GeneralInput/index";
+import { useEffect } from "react";
+import { useState } from "react";
 
 export const TagAndInput = ({
   inputType,
@@ -28,6 +30,7 @@ export const TagAndInput = ({
   disabled,
   onKeyDown,
   showTooltip,
+  auditClass,
 }) => {
   return (
     <Container
@@ -66,6 +69,7 @@ export const TagAndInput = ({
         description={description}
         inputOnChange={inputOnChange}
         onKeyDown={onKeyDown}
+        auditClass={auditClass}
       />
     </Container>
   );

package/src/components/organisms/Chat/ContentChat/index.js

@@ -107,7 +107,6 @@ export const ContentChat = (props) => {
 
   // ejecutar update
   useEffect(() => {
-    // if (runUpdate == 0) return;
     if (chatType === "merchant_product") {
       if (singleChat.items) getUpdateLatestMerchantProduct();
       else getInitialMerchantProduct();
@@ -489,6 +488,7 @@ export const ContentChat = (props) => {
   };
 
   const getUpdateLatestTicket = async (fromUpdate = false) => {
+    if (singleChat.statusChat === "closed") return;
     const dataUser = {
       id: dataChat.currentUser?.id,
       companyId: dataChat.currentUser?.companyId,

package/src/components/organisms/Chat/Footer/index.js

@@ -45,8 +45,8 @@ const S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
 const REGION = "us-east-1";
 
 AWS.config.update({
-  accessKeyId: process.env.REACT_APP_KEY_UPLOAD_TO_S3,
-  secretAccessKey: process.env.REACT_APP_ACCESS_KEY_UPLOAD_TO_S3,
+  accessKeyId: process.env.REACT_APP_KUTS3,
+  secretAccessKey: process.env.REACT_APP_AKUTS3,
 });
 
 const myBucket = new AWS.S3({

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

@@ -4,8 +4,10 @@ import { TagAndInput } from "../../molecules/TagAndInput";
 
 export const InputGroup = ({
   inputGroup = {},
+  auditInputGroup,
   activeSection,
   dataInputs = {},
+  auditInputs = {},
   updatedDescriptions,
   setUpdatedDescriptions,
   updatedDatasheets,
@@ -13,6 +15,7 @@ export const InputGroup = ({
   articleId,
   version,
   dinamicHeight,
+  compare,
 }) => {
   const inputTypeValue = (type) => {
     switch (type) {
@@ -24,6 +27,12 @@ export const InputGroup = ({
         return "text";
     }
   };
+
+  const isEquals = (dataInputsVal, auditInputsVal) => {
+    const result = dataInputsVal === auditInputsVal;
+    return result;
+  };
+
   return (
     <Container
       className={
@@ -47,7 +56,9 @@ export const InputGroup = ({
                 "-" +
                 dataInputs[input]?.value +
                 "-" +
-                dataInputs[input]?.id
+                dataInputs[input]?.id +
+                "-" +
+                compare
               }
               //disabled={input === 40001}
               disabled={false}
@@ -58,7 +69,9 @@ export const InputGroup = ({
                 dataInputs[input]?.name +
                 (dataInputs[input]?.required ? "*" : "")
               }
-              value={dataInputs[input]?.value}
+              value={
+                compare ? auditInputs[input]?.value : dataInputs[input]?.value
+              }
               inputPlaceHolder={input?.placeholder}
               articleId={articleId}
               isRequired={dataInputs[input]?.required}
@@ -72,15 +85,23 @@ export const InputGroup = ({
               optionList={dataInputs[input]?.option_list}
               description={dataInputs[input]?.description}
               showTooltip={true}
+              auditClass={
+                compare &&
+                !isEquals(dataInputs[input].value, auditInputs[input].value)
+                  ? "audit-class"
+                  : ""
+              }
             />
           ) : (
             <TagAndInput
-              key={index + "-" + input?.value}
+              key={index + "-" + input?.value + "-" + compare}
               inputId={input.id}
               index={index}
               inputType={"textarea"}
               label={input?.name + (input.required ? "*" : "")}
-              value={input?.value}
+              value={
+                compare ? auditInputGroup?.inputs[index]?.value : input?.value
+              }
               isRequired={input.required}
               maxChar={input.max_chars}
               inputPlaceHolder={input?.placeholder}
@@ -91,6 +112,12 @@ export const InputGroup = ({
               dinamicHeight={dinamicHeight}
               description={input?.description}
               showTooltip={true}
+              auditClass={
+                compare &&
+                !isEquals(input?.value, auditInputGroup?.inputs[index]?.value)
+                  ? "audit-class"
+                  : ""
+              }
             />
           )
         )}

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

@@ -16,95 +16,86 @@ RetailerProductEditionDefault.args = {
     Imágenes: true,
   },
   token:
-    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmMzY2YTdjYi02YjA0LTRiMzAtOTJmYy1iMzY0MmY3ZjEzNmEiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY3MTc0MzE0OSwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjcxNzQ2NzQ5LCJpYXQiOjE2NzE3NDMxNDksImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.J8kTv1sEotxoicaRclaK1r0tjVbwHPDxIzdDfxYo9J4XwBYYfS180__KYYE0Dh1AfUK_K0mrk2_78_rhTNxCQT85W7XS3ZEcxIOUekqoxaKFl8LSVN_eWz3SlsGG0yRflhJGt6d4gBVByXZbdNiyp1rkjgMln6fhwlRUnuGRbG1WKQvdAPli3qfH8mLzgoTz-6HWs1Jf2Ujheavf3ipGMNtj-OSUdQsh04Ov7jehDWdnPNn2s2DAl4eubgjdXrwIiBPCRkbuFeYZZJpzj1wy__a0nCM7bzly5uTZ2aWujgEJvf9bJb-Y4gkS8TxyJaggJ01ZsMki36aEpIt8J1tJag",
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjOTRhNzMwNS05MzY1LTQ2ZmYtYTQyMy00YjRiYzNiOGIxODAiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjp0cnVlLCJjb2duaXRvOnVzZXJuYW1lIjoiYzk0YTczMDUtOTM2NS00NmZmLWE0MjMtNGI0YmMzYjhiMTgwIiwiY29nbml0bzpyb2xlcyI6WyJhcm46YXdzOmlhbTo6ODk4NjcwMjMyODA3OnJvbGVcL2NvbnRlbnRvaC1kZXYtdXMtZWFzdC0xLWxhbWJkYVJvbGUiXSwiYXVkIjoiNWFjOHRwZ3M2Z2JzcTEzZnJ2cnBpZWVwNDAiLCJldmVudF9pZCI6IjllNTRjMDc0LWFjNzktNGEwNC1iOGEzLWNhOWU2ZmQxNDE3ZiIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjc3NTQ1NzA2LCJuYW1lIjoiQ29sYWJvcmFkb3IiLCJwaG9uZV9udW1iZXIiOiIrNTIxMTExIiwiZXhwIjoxNjc3NTQ5MzA2LCJpYXQiOjE2Nzc1NDU3MDYsImVtYWlsIjoic2FsbWVyb24uNUBob3RtYWlsLmNvbSJ9.CS5zthG2PFlQIn5yCV64aadrBvh0ccEMlm8osN_BHTqqYARTiGJMnGUzD-FqmCB9JNeLn036eNHQ7TppqlvhBEe66-F7Aq3fSCMR2X31dWkASsg1E9kSmYS2V6NeG1G5WkfaIBOh7d7VH5Dnu6i5phne_BAu_fDbnBgsQUxQQMh-LMfv2heQ_MInJ6O2MrIzbYYMZYK7ioO5C7FvBnOCpDuk3DcgVFwuqBdVJAGkm-VYJbbnR6NYmYMnZfzrFJ8DjNE3O-L3ugVDOIfZOjuVBt2ZsfIB0-I7h_TBuIzwVE309f68AoDAujacOKvPORoN4ympPrAUSa7ZrM6ye2564g",
   productSelected: {
     services: {
       datasheets: 1,
       descriptions: 1,
       images: 1,
     },
-    orderId: 194,
-    status: "AC",
-    datasheet_status: "AC",
+    orderId: 130,
+    status: "PA",
+    datasheet_status: "PA",
     prio: "none",
-    version: 3,
-    description_status: "AC",
-    images_status: "AC",
+    version: 17,
+    description_status: "PA",
+    images_status: "PA",
     statusByRetailer: {
-      40: {
-        description: "AC",
-        images: "AC",
-        datasheet: "AC",
-      },
-      43: {
-        datasheet: "AC",
-        description: "AC",
-        images: "AC",
+      58: {
+        datasheet: "PA",
+        description: "PA",
+        images: "PA",
       },
     },
     article: {
-      id_article: 354,
-      id_category: "684",
-      name: "Enjuague Bucal ",
-      upc: "22342342",
-      timestamp: "2023-01-03T16:19:49.000Z",
+      id_article: 3,
+      id_category: "2032",
+      name: "CORTINA BLACKOUT DE POLIÉSTER CAFÉ 2.13 X 1.06 M",
+      upc: "161157",
+      timestamp: "2022-11-14T16:02:47.000Z",
       id_user: 28,
       status: "NULL",
       active: 1,
       company_id: 1,
       company_name: "GRUPO BRAHMA",
       country: "México",
-      id_order: 194,
-      id_datasheet_especialist: 54,
-      id_datasheet_facilitator: 52,
-      id_description_especialist: 54,
-      id_description_facilitator: 52,
-      id_images_especialist: 55,
-      id_images_facilitator: 53,
-      id_auditor: 37,
+      id_order: 130,
+      id_datasheet_especialist: null,
+      id_datasheet_facilitator: null,
+      id_description_especialist: null,
+      id_description_facilitator: null,
+      id_images_especialist: null,
+      id_images_facilitator: null,
+      id_auditor: null,
       id_recepcionist: null,
-      category: "Salud y Belleza|Cuidado Bucal|Pastas Dentales y Aseo Bucal",
+      category: "Decoración|Cortinas y Persianas|Cortinas",
       missingAttributes: 0,
       missingDescriptions: 0,
       missingImages: 0,
     },
     retailers: [
       {
-        id: 40,
-        name: "Nadro",
-      },
-      {
-        id: 43,
-        name: "City Club",
+        id: 58,
+        name: "The Home Depot Golden",
       },
     ],
     country: "México",
-    upc: "22342342",
+    upc: "161157",
   },
   location: {
     product: { articleId: 354, versionId: 3 },
   },
   user: {
-    id_user: 65,
-    name: "Oscar Alberto",
-    last_name: "Arenas",
-    email: "oarenas@contentoh.com",
-    position: "",
+    id_user: 30,
+    name: "Admin",
+    last_name: "Ulises",
+    email: "salmeron.5@hotmail.com",
+    position: "Admin",
     telephone: "",
-    country: "",
+    country: "México",
     id_company: 2,
-    id_cognito: "73cc8d40-c841-422a-a2f2-e69d7fe26ebf",
+    id_cognito: "c94a7305-9365-46ff-a423-4b4bc3b8b180",
     birth_Date: null,
     about_me: "",
     zip_code: "",
     address: "",
     job: "",
     id_stripe: "",
-    id_role: 1,
+    id_role: 6,
     active: 1,
     is_retailer: 0,
     email_notify: 1,
-    is_user_tech: "AS",
+    is_user_tech: "ADMIN-AS",
     membership: {
       id: 2,
       start_date: "2021-11-05T02:35:12.000Z",
@@ -116,6 +107,6 @@ RetailerProductEditionDefault.args = {
       products_limit: "3",
       type: "PyMES",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-65/65.png?1675063399869",
+    src: "https://content-management-profile.s3.amazonaws.com/id-30/30.png?1676494961913",
   },
 };