contentoh-components-library 21.4.20 → 21.4.22

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
@@ -86,7 +86,8 @@ export const ContentChat = (props) => {
86
86
 
87
87
  // al cargar el componente
88
88
  useEffect(() => {
89
- if (dataChat && showPopUpChat) {
89
+ //if (dataChat && showPopUpChat) {
90
+ if (Object.keys(dataChat || {}).length) {
90
91
  stopUpdate();
91
92
  if (dataChat.code) {
92
93
  setErrorChat({
@@ -100,6 +101,7 @@ export const ContentChat = (props) => {
100
101
  }
101
102
  if (chatType === "merchant_product") getInitialMerchantProduct();
102
103
  else if (chatType === "order_product") getInitialOrderProduct();
104
+ else if (chatType === "product_status") getInitialProductStatus();
103
105
  else getInitialTicket();
104
106
  }
105
107
  if (!showPopUpChat) {
@@ -126,6 +128,8 @@ export const ContentChat = (props) => {
126
128
  } else if (chatType === "order_product") {
127
129
  if (companies) getUpdateLatestOrderProduct(true);
128
130
  else getInitialOrderProduct();
131
+ } else if (chatType === "product_status") {
132
+ getInitialProductStatus();
129
133
  } else {
130
134
  if (singleChat.items) getUpdateLatestTicket(true);
131
135
  else getInitialTicket();
@@ -135,6 +139,47 @@ export const ContentChat = (props) => {
135
139
  /*=======================================================================
136
140
  PETICION GET INICIAL SEGUN EL TIPO DE CHAT
137
141
  ======================================================================= */
142
+ const getInitialProductStatus = async () => {
143
+ const paramsQuery = {
144
+ articleData: JSON.stringify({
145
+ articleId: JSON.stringify(dataChat.id),
146
+ version: JSON.stringify(dataChat.version),
147
+ retailerId: JSON.stringify(dataChat.retailerId),
148
+ status: dataChat.status,
149
+ })
150
+ };
151
+ const paramsHeaders = { Authorization: dataChat.userToken };
152
+ const response = await fetchGET(
153
+ process.env.REACT_APP_READ_MESSAGES,
154
+ paramsQuery,
155
+ paramsHeaders
156
+ );
157
+ if (!response.body) {
158
+ setErrorChat({
159
+ existError: true,
160
+ code: 400,
161
+ message: response.message,
162
+ errorDetail: response.errorDetail,
163
+ });
164
+ setIsLoading(false);
165
+ return;
166
+ }
167
+ // success
168
+ setStartUpdate((prev) => prev + 1);
169
+ setCurrentUser({
170
+ id: response.body.data.currentUserId,
171
+ companyId: response.body.data.currentCompanyId,
172
+ });
173
+ setLastUpdateDate(response.body.data.lastUpdateDate);
174
+ setAllUsers(response.body.users);
175
+ setSingleChat({
176
+ items: response.body.items,
177
+ enabledLoadMore: response.body.items.length === 50,
178
+ });
179
+ setErrorChat({ existError: false });
180
+ setIsLoading(false);
181
+ };
182
+
138
183
  const getInitialMerchantProduct = async () => {
139
184
  const paramsQuery = {
140
185
  getType: "initial",
@@ -568,14 +613,14 @@ export const ContentChat = (props) => {
568
613
  };
569
614
 
570
615
  /*=======================================================================
571
- FUNCION QUE EJECUTA EL MICROSERVICIO CREATE-ITEM
616
+ FUNCION QUE EJECUTA EL MICROSERVICIO CREATE-ITEM
572
617
  Este metodo recibe los items que queremos agregar al chat.
573
618
  requiere:
574
- => items: [ { type , value } , ... ]
619
+ => items: [ { type , value } , ... ]
575
620
  NOTA: si se quiere agregar un mensaje mandar un array con un object
576
- example: [ {
577
- type: "message" ,
578
- value: "mi mensaje"
621
+ example: [ {
622
+ type: "message" ,
623
+ value: "mi mensaje"
579
624
  } ]
580
625
  ======================================================================= */
581
626
  const createItemsChat = async (items = []) => {
@@ -611,12 +656,14 @@ export const ContentChat = (props) => {
611
656
  // enviar items a la BD
612
657
  if (chatType === "merchant_product") {
613
658
  errorCreate = await createItemsMerchantProduct(items);
659
+ } else if (chatType === "product_status") {
660
+ errorCreate = await createItemsProductStatus(items);
614
661
  } else if (chatType === "order_product") {
615
662
  errorCreate = await createItemsOrderProduct(items);
616
663
  } else errorCreate = await createItemsTicket(items);
617
664
 
618
665
  // actualizar chat para que aparezcan los items enviados
619
- if (chatType === "merchant_product") {
666
+ if (["merchant_product", "product_status"].includes(chatType)) {
620
667
  await getUpdateLatestMerchantProduct();
621
668
  } else if (chatType === "order_product") {
622
669
  await getUpdateLatestOrderProduct();
@@ -629,9 +676,10 @@ export const ContentChat = (props) => {
629
676
  };
630
677
 
631
678
  const createItemsMerchantProduct = async (items = []) => {
632
- const { id, version } = dataChat;
679
+ const { id, version, orderId } = dataChat;
633
680
  const { id: retailerId } = activeRetailer;
634
681
  const paramsBody = { id, version, items, retailerId };
682
+ if (chatType === "product_status") paramsBody["orderId"] = orderId;
635
683
  const paramsHeaders = { Authorization: dataChat.userToken };
636
684
  const response = await fetchPOST(
637
685
  process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT,
@@ -645,6 +693,23 @@ export const ContentChat = (props) => {
645
693
  };
646
694
  }
647
695
  };
696
+ const createItemsProductStatus = async (items = []) => {
697
+ const { id, version, orderId, status } = dataChat;
698
+ const { id: retailerId } = activeRetailer;
699
+ const paramsBody = { id, version, items, retailerId, orderId, status };
700
+ const paramsHeaders = { Authorization: dataChat.userToken };
701
+ const response = await fetchPOST(
702
+ process.env.REACT_APP_CREATE_MESSAGES,
703
+ paramsBody,
704
+ paramsHeaders
705
+ );
706
+ if (!response.body) {
707
+ return {
708
+ message: response.message,
709
+ errorDetail: response.errorDetail,
710
+ };
711
+ }
712
+ };
648
713
 
649
714
  const createItemsOrderProduct = async (items = []) => {
650
715
  const paramsBody = {
@@ -692,7 +757,11 @@ export const ContentChat = (props) => {
692
757
  SECCION DE FUNCIONES
693
758
  ======================================================================= */
694
759
  const isSingleChat = () => {
695
- if (chatType === "merchant_product" || chatType === "ticket") {
760
+ if (
761
+ chatType === "merchant_product" ||
762
+ chatType === "ticket" ||
763
+ chatType === "product_status"
764
+ ) {
696
765
  return true;
697
766
  }
698
767
  if (companies && Object.keys(companies).length < 2) return true;
@@ -807,7 +876,7 @@ export const ContentChat = (props) => {
807
876
  // mostrar chat?
808
877
  let items;
809
878
  let enabledLoadMore;
810
- if (["merchant_product", "ticket"].includes(chatType)) {
879
+ if (["merchant_product", "ticket", "product_status"].includes(chatType)) {
811
880
  items = singleChat.items;
812
881
  enabledLoadMore = singleChat.enabledLoadMore;
813
882
  }
@@ -849,7 +918,9 @@ export const ContentChat = (props) => {
849
918
  activeCompanyId={activeCompanyId}
850
919
  ticketCompany={ticketCompany}
851
920
  currentUser={
852
- ["merchant_product", "order_product"].includes(chatType)
921
+ ["merchant_product", "order_product", "product_status"].includes(
922
+ chatType
923
+ )
853
924
  ? currentUser
854
925
  : dataChat.currentUser
855
926
  }
@@ -888,6 +959,12 @@ export const ContentChat = (props) => {
888
959
  ? { id: dataChat.id, version: currentArticle.version }
889
960
  : chatType === "ticket"
890
961
  ? { id: dataChat.id }
962
+ : chatType === "product_status"
963
+ ? {
964
+ id: dataChat.id,
965
+ version: dataChat.version,
966
+ retailerId: dataChat.retailerId,
967
+ }
891
968
  : undefined
892
969
  }
893
970
  chatCompany={getChatCompany()}
@@ -930,7 +1007,6 @@ export const ContentChat = (props) => {
930
1007
  }}
931
1008
  />
932
1009
  )}
933
-
934
1010
  {/* body */}
935
1011
  {renderBodyChat()}
936
1012
  </Container>
@@ -169,6 +169,17 @@ export const Footer = (props) => {
169
169
  errorMessage = "El ID del ticket no es valido";
170
170
  }
171
171
  break;
172
+ case "product_status":
173
+ if (
174
+ isValidNaturalNumber(dataChat?.id) &&
175
+ isValidNaturalNumber(dataChat?.version) &&
176
+ isValidNaturalNumber(dataChat?.retailerId)
177
+ ) {
178
+ fileKey += `productStatus/${dataChat.id}-${dataChat?.version}-${dataChat?.retailerId}/`;
179
+ } else {
180
+ errorMessage = "El ID del ticket no es valido";
181
+ }
182
+ break;
172
183
 
173
184
  default:
174
185
  errorMessage =
@@ -17,14 +17,14 @@ export const Chat = (props) => {
17
17
  const {
18
18
  chatType, // "merchant_product" | "order_product" | "ticket"
19
19
  chatContainerType, // ("fixed") | ("popUp")
20
- chatData, // {} => aqui poner los datos requeridos segun el tipo de chat
20
+ chatData = {}, // {} => aqui poner los datos requeridos segun el tipo de chat
21
21
  classNameContainerFixed, // clases CSS del envoltoria chat fixed
22
22
  size = 14, // tamaño del icono
23
23
  } = props;
24
24
  const [showPopUpChat, setShowPopUpChat] = useState(false);
25
25
  const [data, setData] = useState();
26
26
 
27
- const { ticketCompany } = chatData || {};
27
+ const { ticketCompany, retailerId } = chatData || {};
28
28
 
29
29
  useEffect(() => {
30
30
  switch (chatType) {
@@ -37,6 +37,9 @@ export const Chat = (props) => {
37
37
  case "ticket":
38
38
  validateChatTicket();
39
39
  break;
40
+ case "product_status":
41
+ validateProductStatus();
42
+ break;
40
43
  default:
41
44
  setData({
42
45
  code: 404,
@@ -46,6 +49,45 @@ export const Chat = (props) => {
46
49
  }
47
50
  }, [chatType]);
48
51
 
52
+ const validateProductStatus = () => {
53
+ const {
54
+ userToken, // string
55
+ id, // number
56
+ version,
57
+ retailerId, // number
58
+ status,
59
+ orderId,
60
+ } = chatData;
61
+
62
+ if (!isValidGeneral(userToken, id)) return;
63
+
64
+ // validar el ID de la cadena asociada al producto en la OT
65
+ if (!isValidNaturalNumber(retailerId)) {
66
+ setDataError("La cadena relacionada al producto no es válida");
67
+ return;
68
+ }
69
+
70
+ // validar el ID de la version asociada al producto en la OT
71
+ if (!isValidNaturalNumber(version)) {
72
+ setDataError("La versión del producto no es válida");
73
+ return;
74
+ }
75
+
76
+ if (orderId && !isValidNaturalNumber(orderId)) {
77
+ setDataError("La orden del producto no es válida");
78
+ return;
79
+ }
80
+
81
+ setData({
82
+ userToken,
83
+ id,
84
+ version,
85
+ retailerId,
86
+ orderId,
87
+ status,
88
+ });
89
+ };
90
+
49
91
  const isValidGeneral = (userToken, id) => {
50
92
  // validar token del user
51
93
  if (isStringEmpty(userToken)) {
@@ -197,7 +239,7 @@ export const Chat = (props) => {
197
239
  dataChat={data}
198
240
  showBtnClose={false}
199
241
  ticketCompany={ticketCompany}
200
- activeRetailer={props.activeRetailer}
242
+ activeRetailer={props.activeRetailer || { id: retailerId }}
201
243
  />
202
244
  </ContainerFixed>
203
245
  );
@@ -230,7 +272,7 @@ export const Chat = (props) => {
230
272
  onClickBtnClose={() => {
231
273
  setShowPopUpChat(false);
232
274
  }}
233
- activeRetailer={props.activeRetailer}
275
+ activeRetailer={props.activeRetailer || { id: retailerId }}
234
276
  />
235
277
  </ContainerPopUp>
236
278
  </Slide>
@@ -23,7 +23,7 @@ export const FullProductNameHeader = ({
23
23
  useEffect(() => {
24
24
  const rtls = headerData?.retailers || headerData?.retailersAvailable;
25
25
  servicesData &&
26
- rtls.forEach((rt) => {
26
+ rtls?.forEach((rt) => {
27
27
  const element = [];
28
28
  servicesData.forEach((sd) => {
29
29
  if (sd.id_retailer === rt.id) {