contentoh-components-library 21.1.62 → 21.1.65

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

@@ -95,6 +95,10 @@ var _slide4 = _interopRequireDefault(require("../../../assets/images/sliderToolT
 
 var _slide5 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide5.svg"));
 
+var _VersionSelector = require("../../organisms/VersionSelector");
+
+var _customHooks = require("../../../global-files/customHooks");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var reducerImages = function reducerImages(state, action) {
@@ -167,7 +171,8 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
       _ref$revision = _ref.revision,
       revision = _ref$revision === void 0 ? false : _ref$revision,
       setShowContentohRequestModal = _ref.setShowContentohRequestModal,
-      showSurvey = _ref.showSurvey;
+      showSurvey = _ref.showSurvey,
+      company = _ref.company;
 
   var _useState = (0, _react.useState)("Descripción"),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -473,6 +478,11 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
       saving = _useState82[0],
       setSaving = _useState82[1];
 
+  var _closeModals = (0, _customHooks.closeModals)("version-selector"),
+      _closeModals2 = (0, _slicedToArray2.default)(_closeModals, 2),
+      showVersionSelector = _closeModals2[0],
+      setShowVersionSelector = _closeModals2[1];
+
   (0, _react.useEffect)(function () {
     checkAll && setSelectedImages(images.values);
   }, [checkAll]);
@@ -487,7 +497,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
           switch (_context2.prev = _context2.next) {
             case 0:
               _context2.next = 2;
-              return (0, _data2.getRetailerServices)((product === null || product === void 0 ? void 0 : product.id_article) || (product === null || product === void 0 ? void 0 : (_product$article = product.article) === null || _product$article === void 0 ? void 0 : _product$article.id_article), (product === null || product === void 0 ? void 0 : (_product$article2 = product.article) === null || _product$article2 === void 0 ? void 0 : _product$article2.company_name) || (product === null || product === void 0 ? void 0 : product.categoryName), parseInt((product === null || product === void 0 ? void 0 : (_product$article3 = product.article) === null || _product$article3 === void 0 ? void 0 : _product$article3.id_category) || (product === null || product === void 0 ? void 0 : product.id_category)), product === null || product === void 0 ? void 0 : product.version);
+              return (0, _data2.getRetailerServices)((product === null || product === void 0 ? void 0 : product.id_article) || (product === null || product === void 0 ? void 0 : (_product$article = product.article) === null || _product$article === void 0 ? void 0 : _product$article.id_article), (product === null || product === void 0 ? void 0 : (_product$article2 = product.article) === null || _product$article2 === void 0 ? void 0 : _product$article2.company_name) || (product === null || product === void 0 ? void 0 : product.categoryName), parseInt((product === null || product === void 0 ? void 0 : (_product$article3 = product.article) === null || _product$article3 === void 0 ? void 0 : _product$article3.id_category) || (product === null || product === void 0 ? void 0 : product.id_category)), version);
 
             case 2:
               services = _context2.sent;
@@ -635,47 +645,48 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
       while (1) {
         switch (_context5.prev = _context5.next) {
           case 0:
+            setLoading(true);
             sessionStorage.setItem("user", JSON.stringify(user));
             loadData();
             getCart();
             _context5.t0 = setUserGroups;
-            _context5.next = 6;
+            _context5.next = 7;
             return (0, _data2.fetchUsers)(token);
 
-          case 6:
+          case 7:
             _context5.t1 = _context5.sent;
             (0, _context5.t0)(_context5.t1);
             arr = [];
             _context5.t2 = user.id_role;
-            _context5.next = _context5.t2 === 7 ? 12 : _context5.t2 === 8 ? 12 : _context5.t2 === 4 ? 14 : _context5.t2 === 5 ? 14 : _context5.t2 === 6 ? 16 : 18;
+            _context5.next = _context5.t2 === 7 ? 13 : _context5.t2 === 8 ? 13 : _context5.t2 === 4 ? 15 : _context5.t2 === 5 ? 15 : _context5.t2 === 6 ? 17 : 19;
             break;
 
-          case 12:
+          case 13:
             arr = ["IN_PROGRESS", "RF", "RA"];
-            return _context5.abrupt("break", 20);
+            return _context5.abrupt("break", 21);
 
-          case 14:
+          case 15:
             arr = ["RF", "AF", "AA", "AP", "AC"];
-            return _context5.abrupt("break", 20);
+            return _context5.abrupt("break", 21);
 
-          case 16:
+          case 17:
             arr = ["RP", "RC", "AF"];
-            return _context5.abrupt("break", 20);
+            return _context5.abrupt("break", 21);
 
-          case 18:
+          case 19:
             arr = [];
-            return _context5.abrupt("break", 20);
+            return _context5.abrupt("break", 21);
 
-          case 20:
+          case 21:
             setStatusArray(arr);
 
-          case 21:
+          case 22:
           case "end":
             return _context5.stop();
         }
       }
     }, _callee5);
-  })), [product]);
+  })), [product, version]);
 
   var loadAssignations = function loadAssignations(currentProduct) {
     setAssig(product === null || product === void 0 ? void 0 : product.asignations);
@@ -1749,6 +1760,8 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
           setAssignation: setAssignation,
           isRetailer: isRetailer,
           showSaveButton: enableActions(product.version_status),
+          version: version,
+          setShowVersionSelector: setShowVersionSelector,
           onClickSave: function onClickSave() {
             switch (activeTab) {
               case "Descripción":
@@ -1963,6 +1976,12 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
       },
       img: _defaultProfileImage.default,
       textArea: false
+    }), showVersionSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VersionSelector.VersionSelector, {
+      modalId: "version-selector",
+      articleId: product.id_article,
+      setVersion: setVersion,
+      companyName: company.company_name,
+      currentVersion: version
     })]
   });
 };

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

@@ -31,59 +31,52 @@ RetailerProductEditionDefault.args = {
     "Ficha técnica": false,
     Imágenes: false
   },
-  token: "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5ZDBjYzVjOC1hODllLTRiZGQtOWUyZC0zNThhMDFjYzlhNjIiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjp0cnVlLCJjb2duaXRvOnVzZXJuYW1lIjoiOWQwY2M1YzgtYTg5ZS00YmRkLTllMmQtMzU4YTAxY2M5YTYyIiwiYXVkIjoiNTJkOXNra2RjZzhxanA4OG9vazF1c2U2bWsiLCJldmVudF9pZCI6IjBkNmZjYzMxLTBkZTctNGU1NC1iYTYzLWU1YzU3ODE4MzZkNSIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjU4OTQzMjk0LCJuYW1lIjoiSXNtYWVsIExvcGV6IiwicGhvbmVfbnVtYmVyIjoiKzUyMzExMTM2NjMzNiIsImV4cCI6MTY1ODk0Njg5NCwiaWF0IjoxNjU4OTQzMjk0LCJlbWFpbCI6Imlsb3BlekBjb250ZW50b2guY29tIn0.qO6HSA8-g0XQSKbvZfJfrKeztVmBUE4yBm_1Vb9QpQaNF_KYQi2onyxTCViMpN4yxtwN0ToBTpZO4h5oK0qZl0Ua2qo64eKh1_-pLoHQnlaELVgkL33eYcigZG78W9zhrC2Eregcp62dlrzV-SLDBadZoiIy5Ywn4t_NrYhSpHXpRxRsr5it1DAumMQ6hQhnZwrJmXa7mTZ9OoK4MJTI19LC15c6xXwq-GzZ0olI5mkrdZsfC7Ginf5PhXMHIsx-rx0GTFSzMq4sfYf0ggZp7L5hHGtSMoIIOSSJGaL5xrgCb7D7bFqS7oG54OO2z6BgIkaEZT2dSHfvCZgD94k_jg",
+  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJhNmM0ZDNkNi0yNGE0LTQxZDQtYWQwZi1kMDg3NDM4YWI1YjYiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6ImE2YzRkM2Q2LTI0YTQtNDFkNC1hZDBmLWQwODc0MzhhYjViNiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmZTM3NjZmNS0zY2E0LTQ2N2MtOTIxMS0yM2Y0NWQ1ZWU4NjgiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY1ODk5MTc2NSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY1ODk5NTM2NSwiaWF0IjoxNjU4OTkxNzY1LCJlbWFpbCI6ImV0Y0Bjb250ZW50b2guY29tIn0.bQDE_eVpwSBWXqgbX2bicpPTgAoG8mfeA_P0l92vBWV0Q7m7llCNOmLvaaZn-EtYNf3xjVH8pGivJGT5KMOLl9adBl8TnUxD0IS2BJp0wB3m3l79BFAswLbfCAFb-x0XJw4LznnnrlN12ZF-9sPcE4s8RXRxw2cSX3Lt4pdJqi8sOG_DNu3BvxmML3Ckv23aK82zWzskXQb_gNdTM2mqi7SvxvE87yb4X_5cfvP6QtA6hEh1jezbHWdzPDxKkme0ZdVOpqEb3c1JMSIP06EQ9NfnXVt0S19hz6kfppC2laFEwrK2M8tO8EH06k2qlSk3Hp5b6Ga3BACvKAWnfOnC1A",
   productSelected: {
     services: {
       datasheets: 1,
       descriptions: 1,
       images: 1
     },
-    orderId: 2012,
-    status: "QF",
-    datasheet_status: "QF",
+    orderId: 131,
+    status: "AA",
+    datasheet_status: "AA",
     prio: "none",
     version: 2,
-    description_status: "QF",
-    images_status: "AF",
+    description_status: "AA",
+    images_status: "AA",
     article: {
-      id_article: 76958,
-      id_category: "2627",
-      name: "COLGANTE MAGIC NAVIDAD",
-      upc: "163963",
-      timestamp: "2022-07-07T17:01:17.000Z",
-      id_user: 1195,
+      id_article: 76201,
+      id_category: "632",
+      name: "DEMO SB BAA PLAY CR SM FP PANDAS",
+      upc: "7501816169170",
+      timestamp: "2022-07-25T20:42:40.000Z",
+      id_user: 119,
       status: "NULL",
       active: 1,
-      company_id: 657,
-      SKU: null,
-      Descripcion: null,
-      Proveedor: null,
-      id_proveedor: 0,
-      company_name: "",
-      country: null,
-      id_order: 2012,
-      id_datasheet_especialist: 1248,
-      id_datasheet_facilitator: 1252,
-      id_description_especialist: 334,
-      id_description_facilitator: 1252,
-      id_images_especialist: 1251,
-      id_images_facilitator: 1286,
-      id_auditor: 1254,
+      company_id: 841,
+      company_name: "Financiado Bodega",
+      country: "México",
+      id_order: 131,
+      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: 30,
       id_recepcionist: null,
-      category: "Navidad|Esferas y Colgantes|Colgantes",
-      missingAttributes: 3,
+      category: "Ropa, Accesorios, Fragancias y Joyería|Ropa Bebés|Bebé Niña",
+      missingAttributes: 0,
       missingDescriptions: 0,
       missingImages: 0
     },
     retailers: [{
-      id: 58,
-      name: "The Home Depot Golden",
-      country: "México",
-      id_region: 1,
-      active: 1
+      id: 13,
+      name: "Soriana"
     }],
-    country: null,
-    upc: "163963"
+    country: "México",
+    upc: "7501816169170"
   },
   location: {
     product: {
@@ -92,16 +85,16 @@ RetailerProductEditionDefault.args = {
     }
   },
   user: {
-    id_user: 460,
-    name: "Ismael",
-    last_name: "López",
-    email: "ilopez@contentoh.com",
-    position: "Desarrollador",
+    id_user: 51,
+    name: "ADMIN PRUEBA",
+    last_name: "",
+    email: "etc@contentoh.com",
+    position: null,
     telephone: null,
-    country: "México",
-    id_company: 254,
-    id_cognito: "9d0cc5c8-a89e-4bdd-9e2d-358a01cc9a62",
-    birth_Date: "1997-08-15T00:00:00.000Z",
+    country: null,
+    id_company: 2,
+    id_cognito: "a6c4d3d6-24a4-41d4-ad0f-d087438ab5b6",
+    birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
@@ -110,18 +103,18 @@ RetailerProductEditionDefault.args = {
     id_role: 1,
     active: 1,
     is_retailer: 0,
-    email_notify: null,
+    email_notify: 0,
     membership: {
-      id: 750,
-      start_date: "2022-01-07T21:32:54.000Z",
-      end_date: "2023-01-07T21:32:54.000Z",
-      planID: 6,
-      plan: "prod_KvGd6YSTJyR3AP",
-      name: "Plan Small",
-      user_limit: "10",
-      products_limit: "1000",
-      type: "Enterprise"
+      id: 2,
+      start_date: "2021-11-05T02:35:12.000Z",
+      end_date: "2022-11-05T02:34:49.000Z",
+      planID: 1,
+      plan: "prod_KtkvuFFLpOdP6e",
+      name: "Plan Free",
+      user_limit: "1",
+      products_limit: "3",
+      type: "PyMES"
     },
-    src: "https://content-management-profile-prod.s3.amazonaws.com/id-460/460.png?1658943295529"
+    src: "https://content-management-profile.s3.amazonaws.com/id-51/51.png?1658991766462"
   }
 };

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

@@ -75,6 +75,12 @@ var _genericModalCheck = _interopRequireDefault(require("../../../assets/images/
 
 var _errorModal = _interopRequireDefault(require("../../../assets/images/genericModal/errorModal.svg"));
 
+var _VersionSelector = require("../../organisms/VersionSelector");
+
+var _customHooks = require("../../../global-files/customHooks");
+
+var _CreateVersion = require("../../organisms/CreateVersion");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var reducerImages = function reducerImages(state, action) {
@@ -382,6 +388,17 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       setSaving = _useState70[1];
 
   var isAuditor = user.id_role === 6;
+
+  var _closeModals = (0, _customHooks.closeModals)("version-selector"),
+      _closeModals2 = (0, _slicedToArray2.default)(_closeModals, 2),
+      showVersionSelector = _closeModals2[0],
+      setShowVersionSelector = _closeModals2[1];
+
+  var _useState71 = (0, _react.useState)(false),
+      _useState72 = (0, _slicedToArray2.default)(_useState71, 2),
+      showCreateVersion = _useState72[0],
+      setShowCreateVersion = _useState72[1];
+
   (0, _react.useEffect)(function () {
     checkAll && setSelectedImages(images.values);
   }, [checkAll]);
@@ -396,7 +413,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
             case 0:
               _context.prev = 0;
               _context.next = 3;
-              return (0, _data2.getRetailerServices)(product === null || product === void 0 ? void 0 : (_product$article = product.article) === null || _product$article === void 0 ? void 0 : _product$article.id_article, product === null || product === void 0 ? void 0 : (_product$article2 = product.article) === null || _product$article2 === void 0 ? void 0 : _product$article2.category, parseInt(product === null || product === void 0 ? void 0 : (_product$article3 = product.article) === null || _product$article3 === void 0 ? void 0 : _product$article3.id_category), product === null || product === void 0 ? void 0 : product.version);
+              return (0, _data2.getRetailerServices)(product === null || product === void 0 ? void 0 : (_product$article = product.article) === null || _product$article === void 0 ? void 0 : _product$article.id_article, product === null || product === void 0 ? void 0 : (_product$article2 = product.article) === null || _product$article2 === void 0 ? void 0 : _product$article2.category, parseInt(product === null || product === void 0 ? void 0 : (_product$article3 = product.article) === null || _product$article3 === void 0 ? void 0 : _product$article3.id_category), version);
 
             case 3:
               _services = _context.sent;
@@ -533,46 +550,47 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       while (1) {
         switch (_context4.prev = _context4.next) {
           case 0:
+            setLoading(true);
             loadData();
             getComments();
             _context4.t0 = setUserGroups;
-            _context4.next = 5;
+            _context4.next = 6;
             return (0, _data2.fetchUsers)(token);
 
-          case 5:
+          case 6:
             _context4.t1 = _context4.sent;
             (0, _context4.t0)(_context4.t1);
             arr = [];
             _context4.t2 = user.id_role;
-            _context4.next = _context4.t2 === 7 ? 11 : _context4.t2 === 8 ? 11 : _context4.t2 === 4 ? 13 : _context4.t2 === 5 ? 13 : _context4.t2 === 6 ? 15 : 17;
+            _context4.next = _context4.t2 === 7 ? 12 : _context4.t2 === 8 ? 12 : _context4.t2 === 4 ? 14 : _context4.t2 === 5 ? 14 : _context4.t2 === 6 ? 16 : 18;
             break;
 
-          case 11:
+          case 12:
             arr = ["IN_PROGRESS", "RF", "RA"];
-            return _context4.abrupt("break", 19);
+            return _context4.abrupt("break", 20);
 
-          case 13:
+          case 14:
             arr = ["RF", "AF", "AA", "AP", "AC"];
-            return _context4.abrupt("break", 19);
+            return _context4.abrupt("break", 20);
 
-          case 15:
+          case 16:
             arr = ["RP", "RC", "AF", "RA"];
-            return _context4.abrupt("break", 19);
+            return _context4.abrupt("break", 20);
 
-          case 17:
+          case 18:
             arr = [];
-            return _context4.abrupt("break", 19);
+            return _context4.abrupt("break", 20);
 
-          case 19:
+          case 20:
             setStatusArray(arr);
 
-          case 20:
+          case 21:
           case "end":
             return _context4.stop();
         }
       }
     }, _callee4);
-  })), [product]);
+  })), [product, version]);
 
   var loadAssignations = function loadAssignations(currentProduct) {
     var _currentProduct$artic, _currentProduct$artic2, _currentProduct$artic3, _currentProduct$artic4, _currentProduct$artic5, _currentProduct$artic6;
@@ -1737,6 +1755,8 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
           setAssignation: setAssignation,
           isRetailer: isRetailer,
           showSaveButton: auditorAssigned() || userAssigned(),
+          version: version,
+          setShowVersionSelector: setShowVersionSelector,
           onClickSave: function onClickSave() {
             switch (activeTab) {
               case "Descripción":
@@ -1871,6 +1891,17 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       onClick: function onClick() {
         return setMessage("");
       }
+    }), showVersionSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VersionSelector.VersionSelector, {
+      modalId: "version-selector",
+      articleId: product.article.id_article,
+      setVersion: setVersion,
+      companyName: product.article.company_name,
+      currentVersion: version,
+      setShowCreateVersion: setShowCreateVersion
+    }), showCreateVersion && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CreateVersion.CreateVersion, {
+      idArticle: product.article.id_article,
+      version: version,
+      setShowCreateVersion: setShowCreateVersion
     })]
   });
 };

package/dist/global-files/customHooks.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.closeModals = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var closeModals = function closeModals(id) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  var closeModal = function closeModal(e) {
+    if ((!e.target.closest("#".concat(id)) || e.target.closest("#close-button") || e.target.closest("#add-version")) && showModal) {
+      document.removeEventListener("click", closeModal);
+      setShowModal(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showModal) {
+      document.addEventListener("click", closeModal);
+    }
+  }, [showModal]);
+  return [showModal, setShowModal];
+};
+
+exports.closeModals = closeModals;

package/dist/global-files/global-styles.css

@@ -12,6 +12,7 @@ body.sb-main-padded.sb-show-main {
   padding: 0;
   height: 100vh;
   overflow: hidden;
+  position: relative;
 }
 
 .sb-main-padded.sb-show-main #root {

package/package.json

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

package/src/assets/images/versionSelector/acceptIcon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 4.48578 4.48578 0 10 0C15.5142 0 20 4.48578 20 10C20 15.5142 15.5142 20 10 20C4.48578 20 0 15.5142 0 10ZM9.65054 13.2973L15.0673 7.88074C15.393 7.55481 15.393 7.02823 15.0673 6.70245C14.7413 6.37653 14.2148 6.37653 13.889 6.70245L9.0614 11.5299L6.94226 9.41074C6.61633 9.08481 6.08975 9.08481 5.76398 9.41074C5.43805 9.73651 5.43805 10.2632 5.76398 10.589L8.47226 13.2973C8.63477 13.4598 8.84808 13.5416 9.0614 13.5416C9.27472 13.5416 9.48804 13.4598 9.65054 13.2973Z" fill="#71DE56"/>
+</svg>

package/src/assets/images/versionSelector/addVersion.svg

@@ -0,0 +1,5 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="6.72461" y1="10" x2="14.7246" y2="10" stroke="#E33AA9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="10.7246" y1="6" x2="10.7246" y2="14" stroke="#E33AA9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="1.22461" y="0.5" width="19.2749" height="19" rx="9.5" stroke="#D4D1D7"/>
+</svg>

package/src/assets/images/versionSelector/closeVersionSelector.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="0.707107" y1="1" x2="16" y2="16.2929" stroke="#E33AA9" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="16" y1="1.70711" x2="1.70711" y2="16" stroke="#E33AA9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/images/versionSelector/createVersion.svg

@@ -0,0 +1,3 @@
+<svg width="73" height="73" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1666 18.2497H6.08325V60.833C6.08325 64.1788 8.82075 66.9163 12.1666 66.9163H54.7499V60.833H12.1666V18.2497ZM60.8332 6.08301H24.3333C20.9874 6.08301 18.2499 8.82051 18.2499 12.1663V48.6663C18.2499 52.0122 20.9874 54.7497 24.3333 54.7497H60.8332C64.1791 54.7497 66.9166 52.0122 66.9166 48.6663V12.1663C66.9166 8.82051 64.1791 6.08301 60.8332 6.08301ZM57.7916 33.458H45.6249V45.6247H39.5416V33.458H27.3749V27.3747H39.5416V15.208H45.6249V27.3747H57.7916V33.458Z" fill="#817393"/>
+</svg>

package/src/assets/images/versionSelector/nullIcon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM15 11H5V9H15V11Z" fill="#817393"/>
+</svg>

package/src/assets/images/versionSelector/versionSelected.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 0C6 0 1.73 3.11 0 7.5C1.73 11.89 6 15 11 15C16 15 20.27 11.89 22 7.5C20.27 3.11 16 0 11 0ZM11 12.5C8.24 12.5 6 10.26 6 7.5C6 4.74 8.24 2.5 11 2.5C13.76 2.5 16 4.74 16 7.5C16 10.26 13.76 12.5 11 12.5ZM11 4.5C9.34 4.5 8 5.84 8 7.5C8 9.16 9.34 10.5 11 10.5C12.66 10.5 14 9.16 14 7.5C14 5.84 12.66 4.5 11 4.5Z" fill="#D4D1D7"/>
+</svg>

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

@@ -2,6 +2,7 @@ import { Container } from "./styles";
 import React from "react";
 
 export const Button = ({
+  id,
   buttonType,
   label,
   image,
@@ -11,6 +12,7 @@ export const Button = ({
 }) => {
   return (
     <Container
+      id={id}
       className={buttonType}
       buttonFont={buttonFont}
       onClick={onClick}

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

@@ -57,6 +57,7 @@ export const Container = styled.button`
     background-color: transparent;
     background-repeat: no-repeat;
     background-position: center;
+
     &.accept-button {
       background-image: url(${acceptIcon});
     }
@@ -106,6 +107,23 @@ export const Container = styled.button`
         border: 1px solid ${GlobalColors.magenta_s2};
       }
     }
+
+    &.disabled {
+      opacity: 0.5;
+    }
+
+    img {
+      width: 100%;
+    }
+
+    &.version-button {
+      color: ${GlobalColors.s3};
+      border: 1px solid ${GlobalColors.s3};
+      border-radius: 15px;
+      font-size: 12px;
+      line-height: 25px;
+      text-align: center;
+    }
   }
 
   &.general-arrow-button {

package/src/components/atoms/Select/VersionSelect.js

@@ -0,0 +1,25 @@
+import { VrsnSelect } from "./style";
+
+export const VersionSelect = ({
+  id,
+  selectedVersions,
+  onChange,
+  label,
+  versions = [],
+}) => {
+  return (
+    <VrsnSelect>
+      <label htmlFor={id}>{label}</label>
+      <select
+        id={id}
+        name={id}
+        value={`Version ${selectedVersions[id]}`}
+        onChange={onChange}
+      >
+        {versions.map((item, index) => (
+          <option key={`${id}-${index}`}>Version {item.version}</option>
+        ))}
+      </select>
+    </VrsnSelect>
+  );
+};

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

@@ -8,6 +8,7 @@ export default function Select(props) {
         width={props.width}
         onChange={props.onChange}
         defaultValue={props.valueSelected ? props.valueSelected : ""}
+        className={props.className}
       >
         <option value="" disabled>
           {props.placeholder}
@@ -29,7 +30,6 @@ export default function Select(props) {
             </option>
           ))}
       </SelectCustom>
-      <BackgroundEnd />
     </Container>
   );
 }

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

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
 
 export const Container = styled.div`
   position: relative;
@@ -73,4 +74,22 @@ export const SelectCustom = styled.select`
       color: gray;
     }
   }
+
+  &.version-selector {
+  }
+`;
+
+export const VrsnSelect = styled.div`
+  background-color: ${GlobalColors.deep_gray};
+
+  select {
+    border: 1px solid ${GlobalColors.s3} !important;
+    background-color: transparent;
+    color: ${GlobalColors.white};
+    width: 100%;
+    text-align: center;
+    padding: 5px;
+    border-radius: 15px;
+    text-decoration: none;
+  }
 `;