contentoh-components-library 20.0.0 → 21.0.2

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

@@ -69,6 +69,10 @@ var _GenericModal = require("../../atoms/GenericModal");
 
 var _ScreenHeader = require("../../atoms/ScreenHeader");
 
+var _Loading = require("../../atoms/Loading");
+
+var _genericModalCheck = _interopRequireDefault(require("../../../assets/images/genericModal/genericModalCheck.svg"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var reducerImages = function reducerImages(state, action) {
@@ -119,7 +123,7 @@ var myBucket = new _awsSdk.default.S3({
 });
 
 var RetailerProductEdition = function RetailerProductEdition(_ref) {
-  var _productSelected$reta, _servicesData$filter$, _servicesData$filter$2, _product$services, _datasheets$, _datasheets$$data, _product$services2, _product$article4, _product$services3;
+  var _productSelected$reta, _product$services3, _product$services4, _datasheets$, _datasheets$$data, _product$services5, _product$article4, _product$services6;
 
   var tabsSections = _ref.tabsSections,
       _ref$productSelected = _ref.productSelected,
@@ -341,6 +345,12 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       setCheckAll = _useState58[1];
 
   var isRetailer = user === null || user === void 0 ? void 0 : user.is_retailer;
+
+  var _useState59 = (0, _react.useState)(true),
+      _useState60 = (0, _slicedToArray2.default)(_useState59, 2),
+      loading = _useState60[0],
+      setLoading = _useState60[1];
+
   (0, _react.useEffect)(function () {
     checkAll && setSelectedImages(images.values);
   }, [checkAll]);
@@ -368,8 +378,9 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               });
               if (((_services$ = services[2]) === null || _services$ === void 0 ? void 0 : (_services$$values = _services$.values) === null || _services$$values === void 0 ? void 0 : _services$$values.length) > 0) setActiveImage(0);
               setProduct(productSelected);
+              setLoading(false);
 
-            case 8:
+            case 9:
             case "end":
               return _context2.stop();
           }
@@ -581,7 +592,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     if (services.length > 0) {
       var _services$2, _services$3;
 
-      services[0][activeRetailer.id].data = Object.values(services[0][activeRetailer.id].data);
+      if (services[0][activeRetailer.id]) services[0][activeRetailer.id].data = Object.values(services[0][activeRetailer.id].data);
       setActivePercentage(Math.round(activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.percentage, 0));
       var datagroups = services[0][activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id];
       var inputs = (_services$2 = services[0]) === null || _services$2 === void 0 ? void 0 : _services$2.inputs;
@@ -594,7 +605,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       setDatasheets([datagroups, inputs]);
       setDescriptions(_descriptions);
     }
-  }, [activeRetailer]);
+  }, [activeRetailer, services]);
 
   var thumbs = function thumbs() {
     var _images$inputs, _images$imageType, _images$imagePackagin, _images$values;
@@ -643,34 +654,37 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         while (1) {
           switch (_context6.prev = _context6.next) {
             case 0:
+              setLoading(true);
               dataObject = {
                 articleId: productSelected === null || productSelected === void 0 ? void 0 : (_productSelected$arti6 = productSelected.article) === null || _productSelected$arti6 === void 0 ? void 0 : _productSelected$arti6.id_article,
                 articleData: updatedDescriptions
               };
-              _context6.prev = 1;
-              _context6.next = 4;
+              if (productSelected !== null && productSelected !== void 0 && productSelected.orderId) dataObject["orderId"] = productSelected === null || productSelected === void 0 ? void 0 : productSelected.orderId;
+              _context6.prev = 3;
+              _context6.next = 6;
               return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?description=true&version=").concat(version), dataObject, {
                 headers: {
                   Authorization: token
                 }
               });
 
-            case 4:
+            case 6:
               setMessage("Descripciones guardadas con éxito");
-              _context6.next = 10;
+              loadData();
+              _context6.next = 13;
               break;
 
-            case 7:
-              _context6.prev = 7;
-              _context6.t0 = _context6["catch"](1);
+            case 10:
+              _context6.prev = 10;
+              _context6.t0 = _context6["catch"](3);
               console.log(_context6.t0);
 
-            case 10:
+            case 13:
             case "end":
               return _context6.stop();
           }
         }
-      }, _callee6, null, [[1, 7]]);
+      }, _callee6, null, [[3, 10]]);
     }));
 
     return function saveDescriptions() {
@@ -687,34 +701,37 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         while (1) {
           switch (_context7.prev = _context7.next) {
             case 0:
+              setLoading(true);
               dataObject = {
                 articleId: productSelected === null || productSelected === void 0 ? void 0 : (_productSelected$arti7 = productSelected.article) === null || _productSelected$arti7 === void 0 ? void 0 : _productSelected$arti7.id_article,
                 articleData: updatedDatasheets
               };
-              _context7.prev = 1;
-              _context7.next = 4;
+              if (productSelected !== null && productSelected !== void 0 && productSelected.orderId) dataObject["orderId"] = productSelected === null || productSelected === void 0 ? void 0 : productSelected.orderId;
+              _context7.prev = 3;
+              _context7.next = 6;
               return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?datasheet=true&version=").concat(version), dataObject, {
                 headers: {
                   Authorization: token
                 }
               });
 
-            case 4:
-              setMessage("Fichas técnicas guardadas con éxito");
-              _context7.next = 10;
+            case 6:
+              setMessage("Fichas técnicas guardadas");
+              loadData();
+              _context7.next = 13;
               break;
 
-            case 7:
-              _context7.prev = 7;
-              _context7.t0 = _context7["catch"](1);
+            case 10:
+              _context7.prev = 10;
+              _context7.t0 = _context7["catch"](3);
               console.log(_context7.t0);
 
-            case 10:
+            case 13:
             case "end":
               return _context7.stop();
           }
         }
-      }, _callee7, null, [[1, 7]]);
+      }, _callee7, null, [[3, 10]]);
     }));
 
     return function saveDatasheets() {
@@ -758,6 +775,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
                 return e.id;
               })
             };
+            if (productSelected !== null && productSelected !== void 0 && productSelected.orderId) data["orderId"] = productSelected === null || productSelected === void 0 ? void 0 : productSelected.orderId;
             valid = (data === null || data === void 0 ? void 0 : (_data$articleData = data.articleData) === null || _data$articleData === void 0 ? void 0 : _data$articleData.length) === 0 ? true : data === null || data === void 0 ? void 0 : (_data$articleData2 = data.articleData) === null || _data$articleData2 === void 0 ? void 0 : _data$articleData2.every(function (e, i) {
               if (e !== null && e !== void 0 && e.image_id && e !== null && e !== void 0 && e.packing_type && e !== null && e !== void 0 && e.image_type) {
                 return true;
@@ -777,18 +795,18 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
             }
 
             if (!(valid && (duplicated === null || duplicated === void 0 ? void 0 : duplicated.length) === 0)) {
-              _context8.next = 29;
+              _context8.next = 30;
               break;
             }
 
-            _context8.prev = 9;
+            _context8.prev = 10;
             data === null || data === void 0 ? void 0 : (_data$articleData3 = data.articleData) === null || _data$articleData3 === void 0 ? void 0 : _data$articleData3.forEach(function (e) {
               e.uuid = (0, _uuid.v4)();
             });
             setDataImages(data);
 
             if (!((data === null || data === void 0 ? void 0 : (_data$articleData4 = data.articleData) === null || _data$articleData4 === void 0 ? void 0 : _data$articleData4.length) > 0)) {
-              _context8.next = 21;
+              _context8.next = 22;
               break;
             }
 
@@ -804,40 +822,40 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               };
               promiseArray.push(myBucket.putObject(params).promise());
             });
-            _context8.next = 18;
+            _context8.next = 19;
             return Promise.all(promiseArray);
 
-          case 18:
+          case 19:
             setImagesUploaded(true);
-            _context8.next = 22;
+            _context8.next = 23;
             break;
 
-          case 21:
+          case 22:
             setImagesUploaded(true);
 
-          case 22:
-            _context8.next = 27;
+          case 23:
+            _context8.next = 28;
             break;
 
-          case 24:
-            _context8.prev = 24;
-            _context8.t0 = _context8["catch"](9);
+          case 25:
+            _context8.prev = 25;
+            _context8.t0 = _context8["catch"](10);
             console.log(_context8.t0); // setMainLoading(false);
 
-          case 27:
-            _context8.next = 30;
+          case 28:
+            _context8.next = 31;
             break;
 
-          case 29:
+          case 30:
             // setMainLoading(false);
             setMessage("Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma.\nRecuerda hay campos obligatorios y no podras avanzar si no estan completos.");
 
-          case 30:
+          case 31:
           case "end":
             return _context8.stop();
         }
       }
-    }, _callee8, null, [[9, 24]]);
+    }, _callee8, null, [[10, 25]]);
   })), [images, imagesUploaded]);
   (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9() {
     return _regenerator.default.wrap(function _callee9$(_context9) {
@@ -845,41 +863,44 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         switch (_context9.prev = _context9.next) {
           case 0:
             if (!imagesUploaded) {
-              _context9.next = 11;
+              _context9.next = 13;
               break;
             }
 
+            setLoading(true);
             dataImages.articleData = dataImages === null || dataImages === void 0 ? void 0 : dataImages.articleData.map(function (e) {
               delete e.src;
               e.imageID = e.image_id;
               e.packingType = e.packing_type;
               e.imageType = e.image_type;
+              if (productSelected !== null && productSelected !== void 0 && productSelected.orderId) e["orderId"] = productSelected === null || productSelected === void 0 ? void 0 : productSelected.orderId;
               return e;
             });
-            _context9.prev = 2;
-            _context9.next = 5;
+            _context9.prev = 3;
+            _context9.next = 6;
             return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?image=true&version=").concat(version), dataImages, {
               headers: {
                 Authorization: token
               }
             });
 
-          case 5:
+          case 6:
             setMessage("Imágenes guardadas con éxito");
-            _context9.next = 11;
+            loadData();
+            _context9.next = 13;
             break;
 
-          case 8:
-            _context9.prev = 8;
-            _context9.t0 = _context9["catch"](2);
+          case 10:
+            _context9.prev = 10;
+            _context9.t0 = _context9["catch"](3);
             console.log(_context9.t0);
 
-          case 11:
+          case 13:
           case "end":
             return _context9.stop();
         }
       }
-    }, _callee9, null, [[2, 8]]);
+    }, _callee9, null, [[3, 10]]);
   })), [dataImages, imagesUploaded]);
 
   var approveRejectButtons = function approveRejectButtons(action) {
@@ -1141,30 +1162,6 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     return (productSelected === null || productSelected === void 0 ? void 0 : productSelected.article["id_auditor"]) === user.id_user;
   };
 
-  function specialistValid(tab) {
-    var concept = "";
-
-    switch (tab) {
-      case "Ficha técnica":
-        concept = "datasheet";
-        break;
-
-      case "Imágenes":
-        concept = "images";
-        break;
-
-      default:
-        concept = "description";
-        break;
-    }
-
-    return product["".concat(concept, "_status")] === "IN_PROGRESS" || product["".concat(concept, "_status")] === "RF" || product["".concat(concept, "_status")] === "RA";
-  }
-
-  function versionMatch() {
-    return (productSelected === null || productSelected === void 0 ? void 0 : productSelected.version) === version;
-  }
-
   var createComment = /*#__PURE__*/function () {
     var _ref12 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee11(e, body, tab) {
       var _product$article2;
@@ -1407,6 +1404,8 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
           Authorization: token
         }
       });
+
+      loadData();
     } catch (err) {
       console.log(err);
     }
@@ -1460,7 +1459,9 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
           setAssignation: setAssignation,
           isRetailer: isRetailer,
           onClickSave: function onClickSave() {
-            return updateImages();
+            var _product$services;
+
+            return (product === null || product === void 0 ? void 0 : (_product$services = product.services) === null || _product$services === void 0 ? void 0 : _product$services.images) === 1 && updateImages();
           }
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -1477,12 +1478,8 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullTabsMenu.FullTabsMenu, {
           tabsSections: tabsSections,
           status: {
-            Descripción: (_servicesData$filter$ = servicesData.filter(function (service) {
-              return service.id_retailer === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) && service.service === "description";
-            })[0]) === null || _servicesData$filter$ === void 0 ? void 0 : _servicesData$filter$.status,
-            "Ficha técnica": (_servicesData$filter$2 = servicesData.filter(function (service) {
-              return service.id_retailer === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) && service.service === "datasheet";
-            })[0]) === null || _servicesData$filter$2 === void 0 ? void 0 : _servicesData$filter$2.status,
+            Descripción: product === null || product === void 0 ? void 0 : product.description_status,
+            "Ficha técnica": product === null || product === void 0 ? void 0 : product.datasheet_status,
             Imágenes: product === null || product === void 0 ? void 0 : product.images_status
           },
           activeTab: activeTab,
@@ -1494,6 +1491,8 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
           setAssignation: setAssignation,
           isRetailer: isRetailer,
           onClickSave: function onClickSave() {
+            var _product$services2;
+
             switch (activeTab) {
               case "Descripción":
                 saveDescriptions();
@@ -1504,53 +1503,58 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
                 break;
 
               case "Imágenes":
-                updateImages();
+                (product === null || product === void 0 ? void 0 : (_product$services2 = product.services) === null || _product$services2 === void 0 ? void 0 : _product$services2.images) === 1 && updateImages();
                 break;
 
               default:
                 break;
             }
           }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "services-information-container " + (imageLayout && activeTab === "Imágenes" ? "image-services" : ""),
-          children: [!imageLayout && activeTab === "Imágenes" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
-            setSelectedImages: setSelectedImages,
-            checkAll: checkAll,
-            setCheckAll: setCheckAll
-          }), activeTab === "Ficha técnica" && ((product === null || product === void 0 ? void 0 : (_product$services = product.services) === null || _product$services === void 0 ? void 0 : _product$services.datasheets) === 1 ? (_datasheets$ = datasheets[0]) === null || _datasheets$ === void 0 ? void 0 : (_datasheets$$data = _datasheets$.data) === null || _datasheets$$data === void 0 ? void 0 : _datasheets$$data.map(function (dataGroup, index) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
-              articleId: productSelected.article.id_article,
-              version: version,
+          children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [!imageLayout && activeTab === "Imágenes" && (product === null || product === void 0 ? void 0 : (_product$services3 = product.services) === null || _product$services3 === void 0 ? void 0 : _product$services3.images) === 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
+              setSelectedImages: setSelectedImages,
+              checkAll: checkAll,
+              setCheckAll: setCheckAll
+            }), activeTab === "Ficha técnica" && ((product === null || product === void 0 ? void 0 : (_product$services4 = product.services) === null || _product$services4 === void 0 ? void 0 : _product$services4.datasheets) === 1 ? (_datasheets$ = datasheets[0]) === null || _datasheets$ === void 0 ? void 0 : (_datasheets$$data = _datasheets$.data) === null || _datasheets$$data === void 0 ? void 0 : _datasheets$$data.map(function (dataGroup, index) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+                articleId: productSelected.article.id_article,
+                version: version,
+                activeSection: activeTab,
+                inputGroup: dataGroup,
+                dataInputs: datasheets[1],
+                updatedDatasheets: updatedDatasheets,
+                setUpdatedDatasheets: setUpdatedDatasheets
+              }, index + "-" + activeRetailer.name);
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+              text: "No cuentas con este servicio",
+              headerType: "input-name-header"
+            })), activeTab === "Descripción" && ((product === null || product === void 0 ? void 0 : (_product$services5 = product.services) === null || _product$services5 === void 0 ? void 0 : _product$services5.descriptions) === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
               activeSection: activeTab,
-              inputGroup: dataGroup,
-              dataInputs: datasheets[1],
-              updatedDatasheets: updatedDatasheets,
-              setUpdatedDatasheets: setUpdatedDatasheets
-            }, index + "-" + activeRetailer.name);
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-            children: "no tienes este servicio"
-          })), activeTab === "Descripción" && ((product === null || product === void 0 ? void 0 : (_product$services2 = product.services) === null || _product$services2 === void 0 ? void 0 : _product$services2.descriptions) === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
-            activeSection: activeTab,
-            inputGroup: descriptions[0],
-            updatedDescriptions: updatedDescriptions,
-            setUpdatedDescriptions: setUpdatedDescriptions,
-            articleId: product === null || product === void 0 ? void 0 : (_product$article4 = product.article) === null || _product$article4 === void 0 ? void 0 : _product$article4.id_article,
-            version: version,
-            dinamicHeight: true
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-            children: "no tienes este servicio"
-          })), activeTab === "Imágenes" && ((product === null || product === void 0 ? void 0 : (_product$services3 = product.services) === null || _product$services3 === void 0 ? void 0 : _product$services3.images) === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
-            className: "container",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, getRootProps({
-              className: "dropzone"
-            })), {}, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread2.default)({}, getInputProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
-                children: thumbs()
-              })]
-            }))
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-            children: "no tienes este servicio"
-          }))]
+              inputGroup: descriptions[0],
+              updatedDescriptions: updatedDescriptions,
+              setUpdatedDescriptions: setUpdatedDescriptions,
+              articleId: product === null || product === void 0 ? void 0 : (_product$article4 = product.article) === null || _product$article4 === void 0 ? void 0 : _product$article4.id_article,
+              version: version,
+              dinamicHeight: true
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+              text: "No cuentas con este servicio",
+              headerType: "input-name-header"
+            })), activeTab === "Imágenes" && ((product === null || product === void 0 ? void 0 : (_product$services6 = product.services) === null || _product$services6 === void 0 ? void 0 : _product$services6.images) === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
+              className: "container",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, getRootProps({
+                className: "dropzone"
+              })), {}, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread2.default)({}, getInputProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
+                  children: thumbs()
+                })]
+              }))
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+              text: "No cuentas con este servicio",
+              headerType: "input-name-header"
+            }))]
+          })
         }), (userAssigned(activeTab, "especialist" || "facilitator") || auditorAssigned()) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "commentary-box",
           children: [!comment ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -1610,8 +1614,11 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       sendToFacilitator: sendToFacilitator,
       approveRejectButtons: approveRejectButtons
     }), message.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GenericModal.GenericModal, {
-      buttonType: "delete-product",
-      componentsArray: componentsArray.length > 0 ? componentsArray : [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      buttonType: componentsArray.length > 0 && "delete-product",
+      componentsArray: componentsArray.length > 0 ? componentsArray : [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: _genericModalCheck.default,
+        alt: "success icon"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
         headerType: "retailer-name-header",
         text: message,
         color: "white"

package/package.json

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

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

@@ -77,8 +77,8 @@ export const GeneralInput = ({
           updatedDescriptions={updatedDatasheets}
           setUpdatedDescriptions={setUpdatedDescriptions}
           inputValue={inputValue?.replace(/<br>/gm, "<p><br></p>")}
-          isRequired={isRequired && !inputValue}
-        ></InputFormatter>
+          isRequired={isRequired}
+        />
       )}
     </Container>
   );

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

@@ -16,6 +16,10 @@ export const Container = styled.div`
   left: 0;
   z-index: 100;
 
+  h2 {
+    overflow: initial;
+  }
+
   .global-styles {
     background-color: ${GlobalColors.deep_gray};
     height: auto;

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

@@ -20,7 +20,7 @@ export const InputFormatter = ({
     setConvertedText((current) => (current = value));
     !id.includes("commentary") &&
       addTextAreaToArray(
-        value.replace(/<\/?p>/gm, ""),
+        value.trim().replace(/<\/?p>/gm, ""),
         updatedDescriptions,
         setUpdatedDescriptions
       );
@@ -47,13 +47,15 @@ export const InputFormatter = ({
         top: e.clientY - elementPosition.y,
       });
   };
-
+  console.log(convertedText);
   return (
     <Container
       focus={focus}
       selection={selection}
       position={position}
-      isRequired={isRequired}
+      isRequired={
+        isRequired && convertedText.replace(/<\/?p>/gm, "") === "<br>"
+      }
       onClick={(e) => {
         getCursorPosition(e);
       }}

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

@@ -15,7 +15,6 @@ export default function LabelToInput(props) {
       ) : (
         <Input
           {...props}
-          width={"100%"}
           onBlur={() => {
             props.onBlur && props.onBlur();
             setIsActive(false);

package/src/components/atoms/LabelToInput/style.js

@@ -6,13 +6,13 @@ export const MainContainer = styled.div`
   align-items: center;
   width: fit-content;
   height: 20px;
-  padding: 0 5px;
   box-sizing: border-box;
   border-radius: 2px;
-  margin-left: 15px;
+  margin-left: auto;
   white-space: nowrap;
   overflow-x: auto;
   overflow-y: hidden;
+
   & > p {
     font-family: ${FontFamily.AvenirNext};
     font-weight: 400;
@@ -22,6 +22,9 @@ export const MainContainer = styled.div`
     background-color: ${GlobalColors.s2};
     padding: 1px 3px;
     border-radius: 3px;
+    min-width: 50px;
+    height: 21px;
+    text-align: center;
   }
   border: ${(props) => props.error && "1px solid red"};
   ::-webkit-scrollbar {

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

@@ -0,0 +1,12 @@
+import { Container, Loader } from "./styles";
+export const Loading = () => {
+  return (
+    <Container>
+      <Loader>
+        <span className="first"></span>
+        <span className="second"></span>
+        <span className="third"></span>
+      </Loader>
+    </Container>
+  );
+};

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

@@ -0,0 +1,57 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+`;
+export const Loader = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  span {
+    display: inline-block;
+    border-radius: 100%;
+    margin: 35px 5px;
+    opacity: 1;
+  }
+  .first {
+    background-color: #ff75cf;
+  }
+  .second {
+    background-color: #e33aa9;
+  }
+  .third {
+    background-color: #b12d84;
+  }
+  span:nth-child(1) {
+    width: 16px;
+    height: 16px;
+    animation: opacitychange 1s ease-in-out infinite;
+  }
+  span:nth-child(2) {
+    width: 18px;
+    height: 18px;
+
+    animation: opacitychange 1s ease-in-out 0.33s infinite;
+  }
+  span:nth-child(3) {
+    width: 20px;
+    height: 20px;
+
+    animation: opacitychange 1s ease-in-out 0.66s infinite;
+  }
+  @keyframes opacitychange {
+    0%,
+    100% {
+      opacity: 0;
+    }
+    60% {
+      opacity: 1;
+    }
+  }
+`;