contentoh-components-library 21.2.7 → 21.2.8

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

@@ -31,59 +31,59 @@ RetailerProductEditionDefault.args = {
     "Ficha técnica": false,
     Imágenes: false
   },
-  token: "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIwYjY2YTRhOS03NzkwLTQwMzQtYTMwYS1jMDA4MDg5NjI4NjciLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwiY29nbml0bzp1c2VybmFtZSI6IjBiNjZhNGE5LTc3OTAtNDAzNC1hMzBhLWMwMDgwODk2Mjg2NyIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiI4ZjA2YmU0NC04ZWEzLTQ5OWMtOGFjZC0xMDlmMDZiZWI1MjAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2MDA3NjQ5MywibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY2MDA4MDA5MywiaWF0IjoxNjYwMDc2NDkzLCJlbWFpbCI6ImJheWFkaTE1MzhAbW5xbG0uY29tIn0.aw_x1A8WR2MCp_Kz-T2Jcg0ZtuKwyzQ23yT_OoKr-aGJmEjSPihmksWgLZr9hJXyfvU0JndaVMM_3DRly1TdtJ264zwH4dZ7Cp9gF4TSXG16HQxIIPUA4NnwdpOnlBdE9E27mCXs4XYnCZ7dRMXnkjpRL4PVbrGji9qbEEJR6TxCJafR-zes1o4HC1KfQ5QF4s5I_LYQYbD-Ot0A1zDiJg34HR9tTILu5f4uc_2Nj8bqqYJsEdKg982WWO9ac2uKRPXQqNL6CsdltnSeQQcnS6Wj5DJTRRoc-lRdE6ekpAvDGPo0Dyj1Q8GYH3uxvM-pVu8J1Z_JOtO5j5mPN9krpA",
+  token: "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIwYjY2YTRhOS03NzkwLTQwMzQtYTMwYS1jMDA4MDg5NjI4NjciLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwiY29nbml0bzp1c2VybmFtZSI6IjBiNjZhNGE5LTc3OTAtNDAzNC1hMzBhLWMwMDgwODk2Mjg2NyIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiIzNmIxMmUwMy0xOWJhLTRiMDktYWJiYS1kZjk3ZTFkNThjZTQiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2MDE4MjgzNywibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY2MDE4NjQzNywiaWF0IjoxNjYwMTgyODM3LCJlbWFpbCI6ImJheWFkaTE1MzhAbW5xbG0uY29tIn0.MM9nIHkrRIS2o8_s4BR6VTLgyw3ryvPrr-mf6RtnQ4smng2Q3fmtK07zInNcvcrv8EXO5J9z47_NZ5MOJDo1Pz1CV2cOYM7PT5tEn3F-W4SitqDbBw3KxfkqSMxdZUIHLWECGL-u2ATCYU2J4KRVQi8XSP1qbfv1hu9dh-vID8Fq641ccQwEqUDC13pshDPlR08legg7AAPJqoilV7wuvxqTYAK6fGqMS5jcdW2iDmU0ti9gkydXkYRIC-jg446VOmRCpwzKsk4UAPwlrGeodQ0LV1bfWn_-KVspWCRQd6U5WbFxHn0umYe3CvvPpyVmHzD3F_EMxaVyqV5aW5IoIQ",
   productSelected: {
-    services: {
-      datasheets: 0,
-      descriptions: 0,
-      images: 1
+    "services": {
+      "datasheets": 1,
+      "descriptions": 1,
+      "images": 1
     },
-    orderId: 1789,
-    status: "ACA",
-    datasheet_status: "NS",
-    prio: "none",
-    version: 2,
-    description_status: "NS",
-    images_status: "ACA",
-    article: {
-      id_article: 68865,
-      id_category: "2999",
-      name: "RESIZE",
-      upc: "169955",
-      timestamp: "2022-06-21T16:03:10.000Z",
-      id_user: 1238,
-      status: "NULL",
-      active: 0,
-      company_id: 819,
-      SKU: null,
-      Descripcion: null,
-      Proveedor: null,
-      id_proveedor: 0,
-      company_name: "The Home Depot Resize",
-      country: "México",
-      id_order: 1789,
-      id_datasheet_especialist: null,
-      id_datasheet_facilitator: null,
-      id_description_especialist: null,
-      id_description_facilitator: null,
-      id_images_especialist: 1250,
-      id_images_facilitator: 424,
-      id_auditor: null,
-      id_recepcionist: null,
-      category: "Resizing|Resizing|Resizing",
-      missingAttributes: null,
-      missingDescriptions: null,
-      missingImages: null
+    "orderId": 1810,
+    "status": "RP",
+    "datasheet_status": "RP",
+    "prio": "none",
+    "version": 2,
+    "description_status": "RP",
+    "images_status": "RP",
+    "article": {
+      "id_article": 68934,
+      "id_category": "2290",
+      "name": "SCOTCHBLUE  3PACK MASKING TAPE 24MMX55M",
+      "upc": "167907",
+      "timestamp": "2022-06-22T15:44:57.000Z",
+      "id_user": 704,
+      "status": "NULL",
+      "active": 1,
+      "company_id": 437,
+      "SKU": null,
+      "Descripcion": null,
+      "Proveedor": null,
+      "id_proveedor": 0,
+      "company_name": "",
+      "country": null,
+      "id_order": 1810,
+      "id_datasheet_especialist": 1248,
+      "id_datasheet_facilitator": 1252,
+      "id_description_especialist": 1248,
+      "id_description_facilitator": 1252,
+      "id_images_especialist": 1251,
+      "id_images_facilitator": 1286,
+      "id_auditor": 514,
+      "id_recepcionist": null,
+      "category": "Pinturas|Herramientas y accesorios para pintar|Cintas",
+      "missingAttributes": null,
+      "missingDescriptions": null,
+      "missingImages": null
     },
-    retailers: [{
-      id: 60,
-      name: "The Home Depot Resizing",
-      country: "México",
-      id_region: 1,
-      active: 1
+    "retailers": [{
+      "id": 58,
+      "name": "The Home Depot Golden",
+      "country": "México",
+      "id_region": 1,
+      "active": 1
     }],
-    country: "México",
-    upc: "169955"
+    "country": null,
+    "upc": "167907"
   },
   location: {
     product: {
@@ -92,22 +92,22 @@ RetailerProductEditionDefault.args = {
     }
   },
   user: {
-    id_user: 425,
-    name: "Auditor QA",
+    id_user: 1248,
+    name: "Facilitador Textos",
     last_name: " ",
-    email: "ladiboh785@mi166.com",
+    email: "bayadi1538@mnqlm.com",
     position: "Tester",
     telephone: null,
     country: null,
     id_company: 254,
-    id_cognito: "23a3f496-4e38-4e12-9bf5-7f90b77a2f35",
+    id_cognito: "0b66a4a9-7790-4034-a30a-c00808962867",
     birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
     job: null,
     id_stripe: null,
-    id_role: 1,
+    id_role: 7,
     active: 1,
     is_retailer: 0,
     email_notify: null,
@@ -122,6 +122,6 @@ RetailerProductEditionDefault.args = {
       products_limit: "1000",
       type: "Enterprise"
     },
-    src: "https://content-management-profile-prod.s3.amazonaws.com/id-425/425.png?1659649029658"
+    src: "https://content-management-profile-prod.s3.amazonaws.com/id-423/423.png?1660182839373"
   }
 };

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

@@ -118,7 +118,7 @@ var reducerImages = function reducerImages(state, action) {
 
     case "changeAttrValue":
       var index = attrForImgs.general.findIndex(function (f) {
-        return f.id = action.id;
+        return f.id === action.id;
       });
 
       if (index !== -1) {
@@ -1101,7 +1101,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         return statusArray.includes(srvActive) && (["RA", "RC"].includes(product === null || product === void 0 ? void 0 : product.status) || srv.filter(function (serv) {
           var _serv$status;
 
-          return statusArray.includes((_serv$status = serv.status) === null || _serv$status === void 0 ? void 0 : _serv$status.replace(/.*\//, ""));
+          return ["CA"].includes((_serv$status = serv.status) === null || _serv$status === void 0 ? void 0 : _serv$status.replace(/.*\//, ""));
         }).length === srv.length);
 
       case 4:
@@ -1897,7 +1897,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               headerType: "input-name-header"
             }))]
           })
-        }), (userAssigned(activeTab) || auditorAssigned()) && product["".concat(getConcept(activeTab), "_status")] !== "NS" && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        }), console.log(userAssigned(activeTab), auditorAssigned()), (userAssigned(activeTab) || auditorAssigned()) && product["".concat(getConcept(activeTab), "_status")] !== "NS" && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "commentary-box",
           children: [!comment ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "commentary",

package/dist/index.js

@@ -758,6 +758,19 @@ Object.keys(_CustomerType).forEach(function (key) {
   });
 });
 
+var _Dashboard = require("./components/pages/Dashboard");
+
+Object.keys(_Dashboard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Dashboard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dashboard[key];
+    }
+  });
+});
+
 var _EmailResetPassword = require("./components/pages/EmailResetPassword");
 
 Object.keys(_EmailResetPassword).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.2.7",
+  "version": "21.2.8",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
@@ -22,6 +22,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-chartjs-2": "^4.0.1",
+    "react-datepicker": "^4.8.0",
     "react-dom": "^17.0.2",
     "react-draft-wysiwyg": "^1.14.7",
     "react-dropzone": "^12.0.4",

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

@@ -34,4 +34,10 @@ export const Container = styled.div`
     letter-spacing: -0.015em;
     color: ${GlobalColors.s4};
   }
+
+  &:last-of-type {
+    p {
+      font-size: 24px;
+    }
+  }
 `;

package/src/components/atoms/Graphic/Graphic.stories.js

@@ -18,4 +18,12 @@ GraphicDefault.args = {
       },
     ],
   },
+  options: {
+    plugins: {
+      legend: {
+        position: "left",
+      },
+    },
+  },
+  type: "doughnut",
 };

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

@@ -2,17 +2,11 @@ import { Container } from "./styles";
 import { Chart } from "react-chartjs-2";
 import "chart.js/auto";
 
-export const Graphic = ({ data }) => {
-  const options = {
-    plugins: {
-      legend: {
-        position: "left",
-      },
-    },
-  };
+export const Graphic = ({ data, type, options }) => {
+ 
   return (
     <Container>
-      <Chart type="doughnut" data={data} options={options} />
+      <Chart type={type} data={data} options={options} />
     </Container>
   );
 };

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

@@ -1,4 +1,3 @@
 import styled from "styled-components";
 
-export const Container = styled.div`
-`;
+export const Container = styled.div``;

package/src/components/atoms/MetricCard/MetricCard.stories.js

@@ -0,0 +1,14 @@
+import { MetricCard } from "./index";
+
+export default {
+  title: "Components/atoms/MetricCard",
+  component: MetricCard,
+};
+
+const Template = (args) => <MetricCard {...args} />;
+export const MetricCardDefault = Template.bind({});
+
+MetricCardDefault.args = {
+  label: "Productos Totales",
+  number: 2367,
+};

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

@@ -0,0 +1,10 @@
+import { Container } from "./styles";
+
+export const MetricCard = ({ label, number }) => {
+  return (
+    <Container>
+      <p>{label}</p>
+      <p>{number}</p>
+    </Container>
+  );
+};

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

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  padding: 10px 20px;
+  border: 1px solid ${GlobalColors.s3};
+  width: fit-content;
+  text-align: center;
+  border-radius: 10px;
+
+  p {
+    color: #000;
+    font-size: 25px;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 25px;
+    font-feature-settings: "pnum", "lnum";
+
+    &:first-of-type {
+      color: ${GlobalColors.s3};
+      font-family: ${FontFamily.Raleway};
+      font-weight: 500;
+      font-size: 13px;
+      line-height: 13px;
+    }
+
+    & + * {
+      margin-top: 3px;
+    }
+  }
+`;

package/src/components/atoms/MetricSelect/MetricSelect.stories.js

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { MetricSelect } from ".";
+
+export default {
+  title: "Components/atoms/MetricSelect",
+  component: MetricSelect,
+};
+
+const Template = (args) => {
+  const [optionSelected, setSelectedOption] = useState("Semana actual");
+  const onChange = (e) => {
+    setSelectedOption(e.target.value);
+  };
+  return (
+    <MetricSelect
+      {...args}
+      optionSelected={optionSelected}
+      onChange={onChange}
+    />
+  );
+};
+export const MetricSelectDefault = Template.bind({});
+MetricSelectDefault.args = {
+  options: [
+    "12/12/12",
+    "12/12/13",
+    "12/12/14",
+    "12/12/15",
+    "12/12/16",
+    "12/12/17",
+    "12/12/18",
+    "12/12/19",
+    "12/12/20",
+    "12/12/21",
+    "12/12/22",
+  ],
+};

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

@@ -0,0 +1,22 @@
+import { Container } from "./styles";
+
+export const MetricSelect = ({
+  options,
+  optionSelected,
+  onChange,
+  label,
+  className,
+}) => {
+  return (
+    <Container className={className}>
+      <select value={optionSelected} onChange={onChange}>
+        <option value="" disabled>{label}</option>
+        {options?.map((option) => (
+          <option key={option.name} value={option.id}>
+            {option.name}
+          </option>
+        ))}
+      </select>
+    </Container>
+  );
+};

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

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background-color: ${GlobalColors.s2};
+  width: fit-content;
+  display: block;
+  padding-right: 10px;
+  border-radius: 5px;
+
+  select {
+    color: ${GlobalColors.s4};
+    outline: none;
+    padding: 10px;
+    background-color: transparent;
+    border: none;
+    option:first-of-type {
+    }
+  }
+`;

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

@@ -0,0 +1,10 @@
+import { Calendar } from ".";
+
+export default {
+  title: "Components/organisms/Calendar",
+  component: Calendar,
+};
+
+const Template = (args) => <Calendar {...args} />;
+export const CalendarDefault = Template.bind({});
+CalendarDefault.args = {};

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

@@ -0,0 +1,17 @@
+import { Container } from "./styles";
+import DatePicker from "react-datepicker";
+import { useState } from "react";
+
+export const Calendar = ({ onChange, startDate, endDate }) => {
+  return (
+    <Container>
+      <DatePicker
+        selected={startDate}
+        onChange={onChange}
+        startDate={startDate}
+        endDate={endDate}
+        selectsRange
+      />
+    </Container>
+  );
+};