contentoh-components-library 21.4.20 → 21.4.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (115) hide show
  1. package/.env.development +5 -2
  2. package/.env.production +3 -1
  3. package/dist/components/atoms/Avatar/index.js +3 -2
  4. package/dist/components/atoms/Card/index.js +46 -5
  5. package/dist/components/atoms/Card/styles.js +3 -1
  6. package/dist/components/atoms/CheckBox/index.js +7 -2
  7. package/dist/components/atoms/CheckBox/styles.js +1 -1
  8. package/dist/components/atoms/InputFormatter/styles.js +1 -1
  9. package/dist/components/atoms/SliderToolTip/styles.js +1 -1
  10. package/dist/components/molecules/CarouselImagesLogin/index.js +1 -1
  11. package/dist/components/molecules/HeaderTop/index.js +68 -11
  12. package/dist/components/molecules/TagAndInput/index.js +1 -1
  13. package/dist/components/organisms/Chat/Chat.stories.js +27 -8
  14. package/dist/components/organisms/Chat/ContainerItems/index.js +19 -3
  15. package/dist/components/organisms/Chat/ContainerItems/styles.js +1 -1
  16. package/dist/components/organisms/Chat/ContentChat/index.js +350 -197
  17. package/dist/components/organisms/Chat/Footer/index.js +48 -39
  18. package/dist/components/organisms/Chat/index.js +49 -4
  19. package/dist/components/organisms/FullProductNameHeader/index.js +2 -2
  20. package/dist/components/organisms/Modal/styles.js +1 -1
  21. package/dist/components/organisms/PanelLayout/PanelLayout.stories.js +87 -0
  22. package/dist/components/organisms/PanelLayout/index.js +29 -0
  23. package/dist/components/organisms/PanelLayout/styles.js +32 -0
  24. package/dist/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +60 -116
  25. package/dist/components/pages/ProviderProductEdition/index.js +117 -142
  26. package/dist/components/pages/ProviderProductEdition/styles.js +1 -1
  27. package/dist/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js +8 -4
  28. package/dist/components/pages/RetailerProductEdition/index.js +316 -308
  29. package/dist/components/pages/RetailerProductEdition/styles.js +1 -1
  30. package/dist/components/pages/RetailerProductEdition/utils.js +61 -2
  31. package/dist/index.js +247 -52
  32. package/package.json +4 -1
  33. package/src/components/atoms/Avatar/index.js +8 -2
  34. package/src/components/atoms/Card/index.js +35 -2
  35. package/src/components/atoms/Card/styles.js +41 -5
  36. package/src/components/atoms/CheckBox/index.js +4 -1
  37. package/src/components/atoms/CheckBox/styles.js +2 -0
  38. package/src/components/atoms/ImageCarousel/ImgeSlider.stories.js +76 -0
  39. package/src/components/atoms/ImageCarousel/index.js +103 -0
  40. package/src/components/atoms/ImageCarousel/styles.js +79 -0
  41. package/src/components/atoms/InputFormatter/styles.js +2 -1
  42. package/src/components/atoms/PercentTag/PercentTag.stories.js +7 -0
  43. package/src/components/atoms/PercentTag/index.js +9 -0
  44. package/src/components/atoms/PercentTag/styles.js +69 -0
  45. package/src/components/atoms/RatingStars/RatingStars.stories.js +10 -0
  46. package/src/components/atoms/RatingStars/index.js +31 -0
  47. package/src/components/atoms/RatingStars/styles.js +28 -0
  48. package/src/components/atoms/RetailerCatalog/RetailerCatalog.stories.js +36 -0
  49. package/src/components/atoms/RetailerCatalog/index.js +49 -0
  50. package/src/components/atoms/RetailerCatalog/styles.js +30 -0
  51. package/src/components/atoms/RetailerOption/RetailerOption.stories.js +15 -0
  52. package/src/components/atoms/RetailerOption/index.js +53 -0
  53. package/src/components/atoms/RetailerOption/styles.js +41 -0
  54. package/src/components/atoms/RetailersList/RetailersList.stories.js +33 -0
  55. package/src/components/atoms/RetailersList/index.js +20 -0
  56. package/src/components/atoms/RetailersList/styles.js +19 -0
  57. package/src/components/atoms/SliderToolTip/styles.js +1 -1
  58. package/src/components/atoms/UserCatalog/UserCatalog.stories.js +67 -0
  59. package/src/components/atoms/UserCatalog/index.js +100 -0
  60. package/src/components/atoms/UserCatalog/styles.js +24 -0
  61. package/src/components/atoms/UserOption/UserOption.stories.js +25 -0
  62. package/src/components/atoms/UserOption/index.js +95 -0
  63. package/src/components/atoms/UserOption/styles.js +61 -0
  64. package/src/components/atoms/UserSelector/UserSelector.stories.js +25 -0
  65. package/src/components/atoms/UserSelector/index.js +86 -0
  66. package/src/components/atoms/UserSelector/styles.js +55 -0
  67. package/src/components/molecules/CarouselImagesLogin/index.js +1 -1
  68. package/src/components/molecules/GridItem/GridItem.stories.js +126 -0
  69. package/src/components/molecules/GridItem/index.js +105 -0
  70. package/src/components/molecules/GridItem/styles.js +104 -0
  71. package/src/components/molecules/HeaderItem/ColumnItem.js +9 -0
  72. package/src/components/molecules/HeaderItem/HeaderItem.stories.js +24 -0
  73. package/src/components/molecules/HeaderItem/index.js +26 -0
  74. package/src/components/molecules/HeaderItem/styles.js +27 -0
  75. package/src/components/molecules/HeaderTop/index.js +52 -6
  76. package/src/components/molecules/RowItem/ColumnItem.js +9 -0
  77. package/src/components/molecules/RowItem/RowItem.stories.js +5660 -0
  78. package/src/components/molecules/RowItem/index.js +45 -0
  79. package/src/components/molecules/RowItem/styles.js +40 -0
  80. package/src/components/molecules/StripeCardForm/StripeCardForm.stories.js +13 -0
  81. package/src/components/molecules/StripeCardForm/index.js +42 -0
  82. package/src/components/molecules/StripeCardForm/paymentForm.js +124 -0
  83. package/src/components/molecules/StripeCardForm/styles.js +73 -0
  84. package/src/components/molecules/StripeCardSelector/CardSelector.stories.js +12 -0
  85. package/src/components/molecules/StripeCardSelector/index.js +44 -0
  86. package/src/components/molecules/StripeCardSelector/styles.js +4 -0
  87. package/src/components/molecules/StripeCardSelector/utils.js +17 -0
  88. package/src/components/molecules/TagAndInput/index.js +10 -8
  89. package/src/components/organisms/Chat/Chat.stories.js +27 -7
  90. package/src/components/organisms/Chat/ContainerItems/index.js +18 -2
  91. package/src/components/organisms/Chat/ContainerItems/styles.js +10 -2
  92. package/src/components/organisms/Chat/ContentChat/index.js +88 -12
  93. package/src/components/organisms/Chat/Footer/index.js +11 -0
  94. package/src/components/organisms/Chat/index.js +46 -4
  95. package/src/components/organisms/FullProductNameHeader/index.js +1 -1
  96. package/src/components/organisms/GridProducts/GridProducts.stories.js +5485 -0
  97. package/src/components/organisms/GridProducts/index.js +50 -0
  98. package/src/components/organisms/GridProducts/styles.js +14 -0
  99. package/src/components/organisms/GridProducts/utils.js +111 -0
  100. package/src/components/organisms/Modal/styles.js +4 -1
  101. package/src/components/organisms/OrderDetail/utils/Table/utils.js +6 -16
  102. package/src/components/organisms/PanelLayout/PanelLayout.stories.js +63 -0
  103. package/src/components/organisms/PanelLayout/index.js +11 -0
  104. package/src/components/organisms/PanelLayout/styles.js +39 -0
  105. package/src/components/organisms/SideModal/SideModal.stories.js +23 -0
  106. package/src/components/organisms/SideModal/index.js +50 -0
  107. package/src/components/organisms/SideModal/styles.js +30 -0
  108. package/src/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +66 -116
  109. package/src/components/pages/ProviderProductEdition/index.js +97 -129
  110. package/src/components/pages/ProviderProductEdition/styles.js +5 -1
  111. package/src/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js +7 -3
  112. package/src/components/pages/RetailerProductEdition/index.js +158 -184
  113. package/src/components/pages/RetailerProductEdition/styles.js +4 -0
  114. package/src/components/pages/RetailerProductEdition/utils.js +37 -0
  115. package/src/index.js +16 -0
@@ -0,0 +1,50 @@
1
+ import { Container } from "./styles";
2
+ import { GridItem } from "../../molecules/GridItem";
3
+ import { HeaderItem } from "../../molecules/HeaderItem";
4
+ import { RowItem } from "../../molecules/RowItem";
5
+
6
+ export const GridProducts = ({
7
+ products = [],
8
+ columnsArray = [],
9
+ gridView = true,
10
+ chkOnChange,
11
+ selected = [],
12
+ chkChecked,
13
+ checkAll,
14
+ chkCheckedAll,
15
+ onGridClick,
16
+ }) => {
17
+ return (
18
+ <Container>
19
+ {!gridView ? (
20
+ products?.map(({ gridElement, product, id }, i) => (
21
+ <GridItem
22
+ key={i}
23
+ id={id}
24
+ index={i}
25
+ product={product}
26
+ gridElement={gridElement}
27
+ chkOnChange={chkOnChange}
28
+ onGridClick={onGridClick}
29
+ selected={selected}
30
+ chkChecked={chkChecked}
31
+ />
32
+ ))
33
+ ) : (
34
+ <div className="table-view">
35
+ <HeaderItem
36
+ columnsArray={columnsArray}
37
+ checkAll={checkAll}
38
+ chkCheckedAll={chkCheckedAll}
39
+ />
40
+ <RowItem
41
+ productsArray={products}
42
+ chkOnChange={chkOnChange}
43
+ onGridClick={onGridClick}
44
+ chkChecked={chkChecked}
45
+ />
46
+ </div>
47
+ )}
48
+ </Container>
49
+ );
50
+ };
@@ -0,0 +1,14 @@
1
+ import styled from "styled-components";
2
+
3
+ export const Container = styled.div`
4
+ display: flex;
5
+ flex-wrap: wrap;
6
+ gap: 10px;
7
+ height: calc(100% - 100px);
8
+ overflow: auto;
9
+
10
+ .table-view {
11
+ height: 100%;
12
+ width: 100%;
13
+ }
14
+ `;
@@ -0,0 +1,111 @@
1
+ import { RetailerCatalog } from "../../atoms/RetailerCatalog";
2
+ import { UserCatalog } from "../../atoms/UserCatalog";
3
+
4
+ export const getProductsToTable = (
5
+ products = [],
6
+ textSpecialists,
7
+ imagesSpecialists,
8
+ auditors,
9
+ images,
10
+ onAssign
11
+ ) => {
12
+ const productsTableArray = [];
13
+
14
+ products.forEach((product) => {
15
+ const { article, orderId, upc, status, version } = product;
16
+ const id = article?.id_article + "-" + orderId;
17
+ const imgArray = images[article?.id_article + "-" + version];
18
+ const element = {
19
+ id,
20
+ cols: [
21
+ { name: article?.country || "-", flex: 1, minWidth: 100 },
22
+ { name: orderId || "-", flex: 1, minWidth: 100 },
23
+ { name: upc || "-", flex: 1, minWidth: 100 },
24
+ { name: article?.name || "-", flex: 1, minWidth: 200 },
25
+ { name: "S/M" || "-", flex: 1, minWidth: 100 },
26
+ { name: status || "-", flex: 1, minWidth: 100 },
27
+ {
28
+ name: (
29
+ <RetailerCatalog
30
+ id={"retailers-" + id}
31
+ article={product}
32
+ retailers={product.retailers}
33
+ />
34
+ ),
35
+ flex: 1,
36
+ minWidth: 100,
37
+ },
38
+ { name: product.prio, flex: 1, minWidth: 100 },
39
+ {
40
+ name: (
41
+ <UserCatalog
42
+ datasheet={article.id_datasheet_especialist}
43
+ description={article.id_description_especialist}
44
+ images={article.id_images_especialist}
45
+ auditor={article.id_auditor}
46
+ textSpecialists={textSpecialists}
47
+ imagesSpecialists={imagesSpecialists}
48
+ auditors={auditors}
49
+ id={"users-" + id}
50
+ product={product}
51
+ onAssign={onAssign}
52
+ />
53
+ ),
54
+ flex: 1,
55
+ minWidth: 100,
56
+ },
57
+ { name: "Cont.", flex: 1, minWidth: 100 },
58
+ ],
59
+ gridElement: {
60
+ images: imgArray,
61
+ info: [
62
+ { title: "name", value: article?.name || "-" },
63
+ { title: "order", value: orderId || "-" },
64
+ { title: "category", value: article?.category || "-" },
65
+ { title: "company", value: article?.company_name || "-" },
66
+ { title: "price", value: article?.price || "-" },
67
+ ],
68
+ status: [
69
+ { title: "datasheet", value: product?.datasheet_status, percent: 80 },
70
+ {
71
+ title: "description",
72
+ value: product?.description_status,
73
+ percent: 80,
74
+ },
75
+ { title: "images", value: product?.images_status, percent: 80 },
76
+ ],
77
+ catalogs: {
78
+ leftSide: (
79
+ <RetailerCatalog
80
+ id={"retailers-" + id}
81
+ limit={2}
82
+ article={product}
83
+ retailers={product.retailers}
84
+ />
85
+ ),
86
+ rightSide: (
87
+ <UserCatalog
88
+ datasheet={article.id_datasheet_especialist}
89
+ description={article.id_description_especialist}
90
+ images={article.id_images_especialist}
91
+ auditor={article.id_auditor}
92
+ textSpecialists={textSpecialists}
93
+ imagesSpecialists={imagesSpecialists}
94
+ auditors={auditors}
95
+ id={"users-" + id}
96
+ product={product}
97
+ onAssign={onAssign}
98
+ />
99
+ ),
100
+ },
101
+ },
102
+ showBottom: true,
103
+ product,
104
+ article,
105
+ };
106
+
107
+ productsTableArray.push(element);
108
+ });
109
+
110
+ return productsTableArray;
111
+ };
@@ -31,7 +31,6 @@ export const ContainerModal = styled.div`
31
31
  align-items: center;
32
32
  justify-content: flex-start;
33
33
  gap: 6px;
34
- margin-bottom: 20px;
35
34
 
36
35
  .label-title {
37
36
  width: 100%;
@@ -42,6 +41,10 @@ export const ContainerModal = styled.div`
42
41
  color: #262626;
43
42
  white-space: pre-wrap;
44
43
  }
44
+
45
+ & + * {
46
+ margin-top: 20px;
47
+ }
45
48
  }
46
49
 
47
50
  .iconModal {
@@ -1,41 +1,31 @@
1
1
  export const servicesCodeIcon = {
2
2
  datasheet: (
3
3
  <div key="datasheet" className="tooltip">
4
- <span className="material-icons small">
5
- &#xf8ee;
6
- </span>
4
+ <span className="material-icons small">&#xf8ee;</span>
7
5
  <span className="tooltiptext">Ficha Técnica</span>
8
6
  </div>
9
7
  ),
10
8
  description: (
11
9
  <div key="description" className="tooltip">
12
- <span className="material-icons small">
13
- &#xe873;
14
- </span>
10
+ <span className="material-icons small">&#xe873;</span>
15
11
  <span className="tooltiptext">Descripción</span>
16
12
  </div>
17
13
  ),
18
14
  image: (
19
15
  <div key="image" className="tooltip">
20
- <span className="material-icons small">
21
- &#xe3f4;
22
- </span>
16
+ <span className="material-icons small">&#xe3f4;</span>
23
17
  <span className="tooltiptext">Imagen</span>
24
18
  </div>
25
19
  ),
26
20
  translate: (
27
21
  <div key="translate" className="tooltip">
28
- <span className="material-icons small">
29
- &#xe8e2;
30
- </span>
22
+ <span className="material-icons small">&#xe8e2;</span>
31
23
  <span className="tooltiptext">Traducción</span>
32
24
  </div>
33
25
  ),
34
26
  build: (
35
- <div key="build" className="tooltip">
36
- <span className="material-icons small">
37
- &#xe1bd;
38
- </span>
27
+ <div key="build" className="tooltip">
28
+ <span className="material-icons small">&#xe1bd;</span>
39
29
  <span className="tooltiptext">Construcción</span>
40
30
  </div>
41
31
  ),
@@ -0,0 +1,63 @@
1
+ import styled from "styled-components";
2
+ import { ButtonV2 } from "../../atoms/ButtonV2";
3
+ import { PanelLayout } from "./index";
4
+
5
+ const TwoColumns = styled.div`
6
+ display: grid;
7
+ width: 100%;
8
+ grid-auto-rows: 1fr;
9
+ grid-template-columns: 85% 15%;
10
+ grid-template-rows: 100%;
11
+ gap: 0px 10px;
12
+ grid-template-areas: "first second";
13
+ .first {
14
+ grid-area: first;
15
+ width: 100%;
16
+ margin-left: 50px;
17
+ display: flex;
18
+ }
19
+ .second {
20
+ grid-area: second;
21
+ width: 100%;
22
+ }
23
+ `;
24
+
25
+ export default {
26
+ title: "Components/organisms/PanelLayout",
27
+ component: PanelLayout,
28
+ };
29
+
30
+ const Template = (args) => <PanelLayout {...args} />;
31
+
32
+ export const PanelLayoutDefault = Template.bind({});
33
+ PanelLayoutDefault.args = {
34
+ header: (
35
+ <TwoColumns>
36
+ <div className="first">Productos</div>
37
+ <div className="second">Precio</div>
38
+ </TwoColumns>
39
+ ),
40
+ children: (
41
+ <>
42
+ <TwoColumns>
43
+ <div className="first">Nombre de producto 1</div>
44
+ <div className="second">Precio de producto 1</div>
45
+ </TwoColumns>
46
+ <TwoColumns>
47
+ <div className="first">Nombre de producto 1</div>
48
+ <div className="second">Precio de producto 1</div>
49
+ </TwoColumns>
50
+ </>
51
+ ),
52
+ footer: (
53
+ <TwoColumns>
54
+ <div className="first">
55
+ <ButtonV2 id="1" label="Seleccionar todos" type="pink" />
56
+ <ButtonV2 id="2" label="Manual" />
57
+ </div>
58
+ <div className="second">
59
+ <ButtonV2 id="3" label="Siguiente" type="pink" />
60
+ </div>
61
+ </TwoColumns>
62
+ ),
63
+ };
@@ -0,0 +1,11 @@
1
+ import { Container, Header, Body, Footer } from "./styles";
2
+
3
+ export const PanelLayout = ({ header, children, footer, className }) => {
4
+ return (
5
+ <Container className={className}>
6
+ {header ? <Header>{header}</Header> : null}
7
+ <Body>{children}</Body>
8
+ {footer ? <Footer>{footer}</Footer> : null}
9
+ </Container>
10
+ );
11
+ };
@@ -0,0 +1,39 @@
1
+ import styled from "styled-components";
2
+ import { FontFamily } from "../../../global-files/variables";
3
+
4
+ export const Container = styled.div`
5
+ display: grid;
6
+ grid-auto-rows: 1fr;
7
+ grid-template-columns: 1fr;
8
+ grid-template-rows: 34px 1fr 100%;
9
+ gap: 0px 0px;
10
+ grid-template-areas:
11
+ "header"
12
+ "body"
13
+ "footer";
14
+ font-family: ${FontFamily.RobotoMedium}, sans-serif;
15
+ font-size: 12px;
16
+ `;
17
+
18
+ export const Header = styled.div`
19
+ grid-area: header;
20
+ background: #8a6caa;
21
+ color: #ffffff;
22
+ border-radius: 5px 5px 0px 0px;
23
+ display: flex;
24
+ align-items: center;
25
+ `;
26
+
27
+ export const Body = styled.div`
28
+ grid-area: body;
29
+ border-left: 1px solid #f0f0f0;
30
+ border-right: 1px solid #f0f0f0;
31
+ `;
32
+
33
+ export const Footer = styled.div`
34
+ grid-area: footer;
35
+ display: flex;
36
+ align-items: center;
37
+ border: 1px solid #f0f0f0;
38
+ border-radius: 0 0 5px 5px;
39
+ `;
@@ -0,0 +1,23 @@
1
+ import { SideModal } from ".";
2
+ import { ButtonV2 } from "../../atoms/ButtonV2";
3
+
4
+ export default {
5
+ title: "Components/organisms/SideModal",
6
+ component: SideModal,
7
+ };
8
+
9
+ const Template = (args) => <SideModal {...args} />;
10
+
11
+ export const DefaultSideModal = Template.bind({});
12
+ DefaultSideModal.args = {
13
+ show: false,
14
+ header: [
15
+ <div className="title-container">
16
+ <h2></h2>
17
+ </div>,
18
+ <ButtonV2 label="Ir al Checkout" />,
19
+ <ButtonV2 label="X" />,
20
+ ],
21
+ body: <></>,
22
+ footer: <></>,
23
+ };
@@ -0,0 +1,50 @@
1
+ import { useRef } from "react";
2
+ import { Container } from "./styles";
3
+ import { useEffect } from "react";
4
+ import { PropaneSharp } from "@mui/icons-material";
5
+
6
+ export const SideModal = ({
7
+ header,
8
+ body,
9
+ footer,
10
+ show,
11
+ setShow,
12
+ id = "side-modal",
13
+ }) => {
14
+ const modal = useRef();
15
+
16
+ const closeModal = (e) => {
17
+ if (!e.target.closest(`#${id}`) && show) {
18
+ document.removeEventListener("click", closeModal, false);
19
+ modal?.current?.classList?.remove("shown");
20
+ setShow && setShow(false);
21
+ }
22
+ };
23
+
24
+ useEffect(() => {
25
+ if (show && modal.current) {
26
+ document.addEventListener("click", closeModal, false);
27
+ modal?.current?.classList?.add("shown");
28
+ }
29
+ }, [show]);
30
+
31
+ useEffect(() => {
32
+ return () => {
33
+ document.removeEventListener("click", closeModal, false);
34
+ modal?.current?.classList?.remove("shown");
35
+ setShow && setShow(false);
36
+ };
37
+ }, []);
38
+
39
+ return (
40
+ show && (
41
+ <Container>
42
+ <div id={id} ref={modal} className="modal-container">
43
+ <div className="modal-header">{header}</div>
44
+ <div className="modal-body">{body}</div>
45
+ <div className="modal-footer">{footer}</div>
46
+ </div>
47
+ </Container>
48
+ )
49
+ );
50
+ };
@@ -0,0 +1,30 @@
1
+ import styled from "styled-components";
2
+
3
+ export const Container = styled.div`
4
+ width: 100vw;
5
+ height: 100vh;
6
+ position: fixed;
7
+ z-index: 9999999;
8
+ background-color: transparent;
9
+ top: 0;
10
+ left: 0;
11
+
12
+ .modal-container {
13
+ width: 600px;
14
+ height: 100%;
15
+ position: absolute;
16
+ right: -600px;
17
+ background-color: #fff;
18
+ display: flex;
19
+ flex-direction: column;
20
+ box-shadow: -0.5px 0px 5px #f0f0f0;
21
+ border: 1px solid #f0f0f0;
22
+ .modal-body {
23
+ flex: 1;
24
+ }
25
+
26
+ &.shown {
27
+ right: 0;
28
+ }
29
+ }
30
+ `;
@@ -16,143 +16,93 @@ ProviderProductEditionDefault.args = {
16
16
  Imágenes: false,
17
17
  },
18
18
  token:
19
- "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIwZmUxYTZjMS05MzcyLTRiNjktOTgwMi1lN2QxOGM2MzU4YzQiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY5MzMzODMzMiwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2OTMzNDE5MzIsImlhdCI6MTY5MzMzODMzMiwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.lQwTS_RbJalEPmmpWcBsVYd8xx4tkw3U6uyW_laE6ucyHQpXSXYMfadAxxV2PZ5ObbgmX98nFKj32E2F4CxHxw3W7B1Wj7ZoGML409GjlylQ1RuVVHjwTw0OH5TtveV1JNNpts0belvzxbk5vX9E1vKoZLOKn8gO9yaFe0YawKjS0hW-P4NcjIonsNJ5KWMsh0fJCM2oAKAk8oAGZcszYHknMPF6ahf-fWeboVuK89UEsKlQukr7W8fnIePFI8aSlKM1nG0I7nOT_1734Pf-A9QQDXEwhfj8NMHHICb2c_ECgHPEspM9VxIR6Lbws-gCTSG6FTMjsIFKU3EqaQvlVw",
20
- articleId: 39485,
21
- category: 11,
22
- version: 3,
19
+ "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIyM2Q1NTlmYi1jMzIwLTRhMjItYjJmNy1lOThhYTFhZGEyNmYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MzkyNjgyMSwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODM5MzA0MjEsImlhdCI6MTY4MzkyNjgyMSwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.TvCoaKoctj5mypXWMz3NyV1Vm1ToBV0vJmpVyZSQw4-ikTChkxcZ5tFYvqhk1GdvNCFttfSQIqM-14dAYYBc28YwwKP86gqOuzB1fG41rN5x1Yx3tkJq6hiVRgiBbSHWtThA9c8VnxNQbrJiaRTvvkDiM5KNTEst1oxQHL5Ct9_iKQMJMRFie7Xv0xnyS0qZ6QHK4Q2A9OHsnDkAuumALZJcE19Zh6VgSitgWrZiz3x5Text4Q-U-R48NUAzUFirAzYZzJN_fCme5pGf1AnUaZjeUjPsmrV5TBVzPEYwXO0KG8lYjL8id80D7tbGs28ZIK6B4rf3-eqI_ngmBB4CjQ",
20
+ articleId: 238,
21
+ category: 846,
22
+ version: 2,
23
23
  productSelected: {
24
- orderId: 15275,
25
- status: "AA",
26
- datasheet_status: "AA",
27
- prio: "none",
28
- version: 3,
29
- description_status: "AA",
30
- images_status: "AA",
31
- brand: null,
32
- retailerOrder: 0,
33
- missing: {
34
- datasheet: null,
35
- descriptions: null,
36
- images: null,
37
- },
38
- services: {
39
- datasheets: 1,
40
- descriptions: 1,
41
- images: 1,
42
- },
43
- article: {
44
- category: "Abarrotes|Abarrotes Secos|Frutos Secos",
45
- company_name: "GRUPO BRAHMA",
46
- country: "México",
47
- id_category: "11",
48
- id_datasheet_especialist: 54,
49
- id_datasheet_facilitator: 52,
50
- id_description_especialist: 54,
51
- id_description_facilitator: 52,
52
- id_images_especialist: 55,
53
- id_images_facilitator: 53,
54
- id_order: 15275,
55
- id_article: 39485,
56
- id_auditor: 37,
57
- name: "Mix de nueces",
58
- timestamp: "2023-07-14T21:03:19.000Z",
59
- upc: "7543453453",
60
- },
61
- retailers: [
24
+ id_article: 43,
25
+ id_category: 2126,
26
+ name: "LIMA CERRAJERO 6 PULGADAS ACERO BELLOTA",
27
+ upc: "137915",
28
+ timestamp: "2022-11-14T16:03:56.000Z",
29
+ categoryName:
30
+ "Herramientas|Herramientas Manuales|Herramientas de Corte y Desbaste",
31
+ version: 1,
32
+ retailersAvailable: [
62
33
  {
63
- id: 34,
64
- name: "San Pablo",
34
+ name: "The Home Depot Golden",
35
+ id: 58,
65
36
  },
66
37
  ],
67
38
  statusByRetailer: {
68
- 34: {
39
+ 12: {
40
+ datasheet: "AA",
41
+ description: "AA",
42
+ images: "AA",
43
+ },
44
+ 29: {
45
+ datasheet: "AA",
46
+ description: "AA",
47
+ images: "AA",
48
+ },
49
+ 63: {
69
50
  datasheet: "AA",
70
51
  description: "AA",
71
52
  images: "AA",
72
53
  },
73
54
  },
55
+ checked: false,
74
56
  retailersAvailable: [
75
57
  {
76
- id: 34,
77
- name: "San Pablo",
58
+ id: 12,
59
+ name: "La Comer",
60
+ },
61
+ {
62
+ id: 29,
63
+ name: "Farmacias del Ahorro",
64
+ },
65
+ {
66
+ id: 63,
67
+ name: "DAX",
78
68
  },
79
69
  ],
80
- categoryName: "Abarrotes|Abarrotes Secos|Frutos Secos",
81
- upc: "7543453453",
82
- id_article: 39485,
83
- id_order: 15275,
70
+ categoryName:
71
+ "Salud y Belleza|Cuidado del Cabello|Shampoos y Acondicionadores",
72
+ upc: "750955287656712",
73
+ id_article: 39270,
74
+ id_order: 15142,
84
75
  },
85
76
  productToEdit: {
86
- ArticleId: 39485,
87
- idCategory: "11",
88
- product: {
89
- orderId: 15275,
90
- status: "AA",
91
- datasheet_status: "AA",
92
- prio: "none",
93
- version: 3,
94
- description_status: "AA",
95
- images_status: "AA",
96
- brand: null,
97
- retailerOrder: 0,
98
- missing: {
99
- datasheet: null,
100
- descriptions: null,
101
- images: null,
102
- },
103
- services: {
104
- datasheets: 1,
105
- descriptions: 1,
106
- images: 1,
107
- },
108
- article: {
109
- category: "Abarrotes|Abarrotes Secos|Frutos Secos",
110
- company_name: "GRUPO BRAHMA",
111
- country: "México",
112
- id_category: "11",
113
- id_datasheet_especialist: 54,
114
- id_datasheet_facilitator: 52,
115
- id_description_especialist: 54,
116
- id_description_facilitator: 52,
117
- id_images_especialist: 55,
118
- id_images_facilitator: 53,
119
- id_order: 15275,
120
- id_article: 39485,
121
- id_auditor: 37,
122
- name: "Mix de nueces",
123
- timestamp: "2023-07-14T21:03:19.000Z",
124
- upc: "7543453453",
125
- },
126
- retailers: [
127
- {
128
- id: 34,
129
- name: "San Pablo",
130
- },
131
- ],
132
- statusByRetailer: {
133
- 34: {
134
- datasheet: "AA",
135
- description: "AA",
136
- images: "AA",
137
- },
77
+ idCategory: 2126,
78
+ ArticleId: 43,
79
+ product: [
80
+ {
81
+ id_article: 43,
82
+ id_category: 2126,
83
+ name: "LIMA CERRAJERO 6 PULGADAS ACERO BELLOTA",
84
+ upc: "137915",
85
+ timestamp: "2022-11-14T16:03:56.000Z",
86
+ categoryName:
87
+ "Herramientas|Herramientas Manuales|Herramientas de Corte y Desbaste",
88
+ version: 1,
89
+ retailersAvailable: [
90
+ {
91
+ name: "The Home Depot Golden",
92
+ id: 58,
93
+ percentage: 2,
94
+ },
95
+ ],
138
96
  },
139
- retailersAvailable: [
140
- {
141
- id: 34,
142
- name: "San Pablo",
143
- },
144
- ],
145
- categoryName: "Abarrotes|Abarrotes Secos|Frutos Secos",
146
- upc: "7543453453",
147
- id_article: 39485,
148
- id_order: 15275,
149
- },
97
+ ],
150
98
  },
151
99
  location: {
152
100
  pathname: "/EditProducts",
153
101
  search: "",
154
102
  hash: "",
155
103
  state: {
104
+ withChat: true,
105
+ chatType: "product_status",
156
106
  origin: "RequestWithContentoh",
157
107
  },
158
108
  key: "24vwut",
@@ -185,11 +135,11 @@ ProviderProductEditionDefault.args = {
185
135
  planID: 8,
186
136
  plan: "prod_KtlhECVSFG2iro",
187
137
  name: "Plan Pro",
188
- user_limit: "50",
138
+ user_limit: "20",
189
139
  products_limit: "5000",
190
140
  type: "Enterprise",
191
141
  },
192
- src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1693338334183",
142
+ src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1691179745418",
193
143
  },
194
144
  company: {
195
145
  id_company: 1,