contentoh-components-library 21.0.51 → 21.0.55

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

@@ -7,14 +7,12 @@ exports.Loading = void 0;
 
 var _styles = require("./styles");
 
-var _LogoImage = require("../LogoImage");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var Loading = function Loading() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "loader",
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: "loading",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Loader, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "first"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -22,7 +20,7 @@ var Loading = function Loading() {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "third"
       })]
-    })]
+    })
   });
 };
 

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

@@ -5,14 +5,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Container = void 0;
+exports.Loader = exports.Container = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  width: 50%;\n  position: relative;\n  img {\n    width: 75% !important;\n    position: absolute;\n    bottom: 55%;\n    left: 10%;\n  }\n  .loader {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 10%;\n    width: 50%;\n    position: absolute;\n    bottom: 45%;\n    left:25%;\n    span {\n      display: inline-block;\n      border-radius: 100%;\n      margin-left: 5px;\n      opacity: 1;\n    }\n    .first {\n      background-color: #ff75cf;\n    }\n    .second {\n      background-color: #e33aa9;\n    }\n    .third {\n      background-color: #b12d84;\n    }\n    span:nth-child(1) {\n      width: 16px;\n      height: 16px;\n      animation: opacitychange 1s ease-in-out infinite;\n    }\n    span:nth-child(2) {\n      width: 18px;\n      height: 18px;\n\n      animation: opacitychange 1s ease-in-out 0.33s infinite;\n    }\n    span:nth-child(3) {\n      width: 20px;\n      height: 20px;\n\n      animation: opacitychange 1s ease-in-out 0.66s infinite;\n    }\n    @keyframes opacitychange {\n      0%,\n      100% {\n        opacity: 0;\n      }\n      60% {\n        opacity: 1;\n      }\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n"])));
 
-exports.Container = Container;
+exports.Container = Container;
+
+var Loader = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  span {\n    display: inline-block;\n    border-radius: 100%;\n    margin: 35px 5px;\n    opacity: 1;\n  }\n  .first {\n    background-color: #ff75cf;\n  }\n  .second {\n    background-color: #e33aa9;\n  }\n  .third {\n    background-color: #b12d84;\n  }\n  span:nth-child(1) {\n    width: 16px;\n    height: 16px;\n    animation: opacitychange 1s ease-in-out infinite;\n  }\n  span:nth-child(2) {\n    width: 18px;\n    height: 18px;\n\n    animation: opacitychange 1s ease-in-out 0.33s infinite;\n  }\n  span:nth-child(3) {\n    width: 20px;\n    height: 20px;\n\n    animation: opacitychange 1s ease-in-out 0.66s infinite;\n  }\n  @keyframes opacitychange {\n    0%,\n    100% {\n      opacity: 0;\n    }\n    60% {\n      opacity: 1;\n    }\n  }\n"])));
+
+exports.Loader = Loader;

package/dist/components/atoms/LogoImage/index.js

@@ -15,6 +15,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var LogoImage = function LogoImage() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: "logo",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
       src: _logoLogin.default,
       alt: "logo"

package/dist/components/molecules/LoginPasswordStrength/styles.js

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject, _templateObject2, _templateObject3;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  .divPasswordStrength {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-top: 30px;\n    & + * {\n      margin-top: 40px;\n    }\n  }\n  label {\n    color: red;\n    margin-top: 3px;\n    margin-left: 15px;\n    font-family: ", ";\n    font-size: 11px;\n  }\n"])), _variables.FontFamily.Raleway_700);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  .divPasswordStrength {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-top: 30px;\n    & + * {\n      margin-top: 40px;\n    }\n  }\n  label {\n    color: red;\n    margin-top: 3px;\n    margin-left: 15px;\n    font-family: ", ";\n    font-size: 11px;\n  }\n  & + *{\n    margin-top: 20px;\n  }\n"])), _variables.FontFamily.Raleway_700);
 
 exports.Container = Container;
 

package/dist/components/molecules/LogoLoading/Loading.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LogoLoadingDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/LogoLoading",
+  component: _index.LogoLoading
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LogoLoading, (0, _objectSpread2.default)({}, args));
+};
+
+var LogoLoadingDefault = Template.bind({});
+exports.LogoLoadingDefault = LogoLoadingDefault;
+LogoLoadingDefault.args = {};

package/dist/components/molecules/LogoLoading/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LogoLoading = void 0;
+
+var _styles = require("./styles");
+
+var _Loading = require("../../atoms/Loading");
+
+var _LogoImage = require("../../atoms/LogoImage");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var LogoLoading = function LogoLoading() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {})]
+  });
+};
+
+exports.LogoLoading = LogoLoading;

package/dist/components/molecules/LogoLoading/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 100vh;\n  width: 50%;\n  padding-top: 25%;\n  .logo {\n    text-align: center;\n    img {\n      width: 65%;\n    }\n  }\n  .loading {\n    height: 10%;\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/SignInLogin/index.js

@@ -103,7 +103,7 @@ var SignInLogin = function SignInLogin(props) {
               }
 
               if (!valid) {
-                _context.next = 34;
+                _context.next = 36;
                 break;
               }
 
@@ -122,7 +122,7 @@ var SignInLogin = function SignInLogin(props) {
 
               props.setUser(session);
               props.setPaso(8);
-              _context.next = 26;
+              _context.next = 28;
               break;
 
             case 20:
@@ -136,6 +136,8 @@ var SignInLogin = function SignInLogin(props) {
 
             case 23:
               response = _context.sent;
+              console.log(userGroup);
+              console.log(userGroup[0]);
               userGroupValue = typeof userGroup === "string" ? userGroup : userGroup[0];
 
               if (userGroupValue === "usuario_contentoh") {
@@ -157,12 +159,12 @@ var SignInLogin = function SignInLogin(props) {
                 setLoading(false);
               }
 
-            case 26:
-              _context.next = 34;
+            case 28:
+              _context.next = 36;
               break;
 
-            case 28:
-              _context.prev = 28;
+            case 30:
+              _context.prev = 30;
               _context.t0 = _context["catch"](10);
               console.log(_context.t0);
               setLoading(false);
@@ -179,12 +181,12 @@ var SignInLogin = function SignInLogin(props) {
                 console.log("error 2");
               }
 
-            case 34:
+            case 36:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[10, 28]]);
+      }, _callee, null, [[10, 30]]);
     }));
 
     return function validate(_x) {
@@ -258,7 +260,7 @@ var SignInLogin = function SignInLogin(props) {
               return validate(e);
             }
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }), props.registration && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "new-login",
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
             className: "pre-registro",

package/dist/components/molecules/SignInLoginCreationApp/index.js

@@ -103,14 +103,14 @@ var SignInLoginCreationApp = function SignInLoginCreationApp(props) {
               }
 
               if (!valid) {
-                _context.next = 33;
+                _context.next = 35;
                 break;
               }
 
               _context.prev = 10;
               setLoading(true);
               _context.next = 14;
-              return Auth.signIn(email, password);
+              return props.Auth.signIn(email, password);
 
             case 14:
               session = _context.sent;
@@ -122,7 +122,7 @@ var SignInLoginCreationApp = function SignInLoginCreationApp(props) {
 
               props.setUser(session);
               props.setPaso(8);
-              _context.next = 26;
+              _context.next = 28;
               break;
 
             case 20:
@@ -136,14 +136,15 @@ var SignInLoginCreationApp = function SignInLoginCreationApp(props) {
 
             case 23:
               response = _context.sent;
+              console.log(userGroup);
+              console.log(userGroup[0]);
               userGroupValue = typeof userGroup === "string" ? userGroup : userGroup[0];
 
               if (userGroupValue === "colaboradores_contentoh") {
                 sessionStorage.setItem("auth", true);
                 sessionStorage.setItem("jwt", session.signInUserSession.idToken.jwtToken);
                 user = JSON.parse(response.data.body).data[0];
-                company = JSON.parse(response.data.body).data[1]; // const picture = getProfilePicture(user.id_user, 83, 83);
-
+                company = JSON.parse(response.data.body).data[1];
                 caches.keys().then(function (names) {
                   names.forEach(function (name) {
                     caches.delete(name);
@@ -158,12 +159,12 @@ var SignInLoginCreationApp = function SignInLoginCreationApp(props) {
                 setLoading(false);
               }
 
-            case 26:
-              _context.next = 33;
+            case 28:
+              _context.next = 35;
               break;
 
-            case 28:
-              _context.prev = 28;
+            case 30:
+              _context.prev = 30;
               _context.t0 = _context["catch"](10);
               console.log(_context.t0);
               setLoading(false);
@@ -177,12 +178,12 @@ var SignInLoginCreationApp = function SignInLoginCreationApp(props) {
                 setSignInError("Error");
               }
 
-            case 33:
+            case 35:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[10, 28]]);
+      }, _callee, null, [[10, 30]]);
     }));
 
     return function validate(_x) {

package/dist/components/organisms/ChangePassword/styles.js

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 50%;\n  height: 100vh;\n  .button-center {\n    position: absolute;\n    bottom: 13%;\n    left: 18%;\n    .general-default-button {\n      width: 160px;\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 50%;\n  height: 100vh;\n  .button-center {\n    display: flex;\n    justify-content: center;\n    .general-default-button {\n      width: 160px;\n    }\n  }\n"])));
 
 exports.Container = Container;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.51",
+  "version": "21.0.55",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
@@ -77,7 +77,7 @@
     "auto": "^10.36.5",
     "babel-loader": "^8.2.3",
     "chromatic": "^6.3.3",
-    "contentoh-components-library": "^21.0.40",
+    "contentoh-components-library": "^21.0.52",
     "cross-env": "^7.0.3",
     "storybook-css-modules-preset": "^1.1.1"
   },

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

@@ -1,15 +1,13 @@
-import { Container } from "./styles";
-import { LogoImage } from "../LogoImage";
+import { Container,Loader } from "./styles";
 
 export const Loading = () => {
   return (
-    <Container >
-      <LogoImage/>
-      <div className="loader">
+    <Container className="loading">
+      <Loader>
         <span className="first"></span>
         <span className="second"></span>
         <span className="third"></span>
-      </div>
+      </Loader>
     </Container>
   );
 };

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

@@ -1,66 +1,57 @@
 import styled from "styled-components";
 
 export const Container = styled.div`
+  display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
-  width: 50%;
-  position: relative;
-  img {
-    width: 75% !important;
-    position: absolute;
-    bottom: 55%;
-    left: 10%;
+  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;
   }
-  .loader {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 10%;
-    width: 50%;
-    position: absolute;
-    bottom: 45%;
-    left:25%;
-    span {
-      display: inline-block;
-      border-radius: 100%;
-      margin-left: 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;
+  .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.33s infinite;
+  }
+  span:nth-child(3) {
+    width: 20px;
+    height: 20px;
 
-      animation: opacitychange 1s ease-in-out 0.66s infinite;
+    animation: opacitychange 1s ease-in-out 0.66s infinite;
+  }
+  @keyframes opacitychange {
+    0%,
+    100% {
+      opacity: 0;
     }
-    @keyframes opacitychange {
-      0%,
-      100% {
-        opacity: 0;
-      }
-      60% {
-        opacity: 1;
-      }
+    60% {
+      opacity: 1;
     }
   }
 `;

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

@@ -3,7 +3,7 @@ import logoLogin from "../../../assets/images/logo/logoLogin.svg";
 
 export const LogoImage = () => {
   return (
-    <Container key={`logo`}>
+    <Container key={`logo`} className="logo">
       <img src={logoLogin} alt={"logo"} />
     </Container>
   );

package/src/components/molecules/LoginPasswordStrength/styles.js

@@ -20,6 +20,9 @@ export const Container = styled.div`
     font-family: ${FontFamily.Raleway_700};
     font-size: 11px;
   }
+  & + *{
+    margin-top: 20px;
+  }
 `;
 
 export const Password = styled.div`

package/src/components/molecules/LogoLoading/Loading.stories.js

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

package/src/components/molecules/LogoLoading/index.js

@@ -0,0 +1,12 @@
+import { Container } from "./styles";
+import { Loading } from "../../atoms/Loading";
+import { LogoImage } from "../../atoms/LogoImage";
+
+export const LogoLoading = () => {
+  return (
+    <Container>
+      <LogoImage/>
+      <Loading/>
+    </Container>
+  );
+};

package/src/components/molecules/LogoLoading/styles.js

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  height: 100vh;
+  width: 50%;
+  padding-top: 25%;
+  .logo {
+    text-align: center;
+    img {
+      width: 65%;
+    }
+  }
+  .loading {
+    height: 10%;
+  }
+`;

package/src/components/molecules/SignInLogin/index.js

@@ -60,6 +60,8 @@ export const SignInLogin = (props) => {
               },
             }
           );
+          console.log(userGroup);
+          console.log(userGroup[0]);
           const userGroupValue =
             typeof userGroup === "string" ? userGroup : userGroup[0];
           if (userGroupValue === "usuario_contentoh") {
@@ -175,32 +177,34 @@ export const SignInLogin = (props) => {
               onClick={(e) => validate(e)}
             />
           </div>
-          <div className="new-login">
-            <p
-              className="pre-registro"
-              onClick={() => {
-                props.setPaso(1);
-                sessionStorage.setItem(
-                  "nuevoRegistro",
-                  JSON.stringify({
-                    name: "",
-                    lastName: "",
-                    email: "",
-                    position: "",
-                    country: "",
-                    phone: "",
-                    commercialName: "",
-                    companyName: "",
-                    rfc: "",
-                    adress: "",
-                  })
-                );
-                sessionStorage.setItem("countryCode", JSON.stringify("+52"));
-              }}
-            >
-              ¿Aún no tienes cuenta?<span> Regístrate</span>
-            </p>
-          </div>
+          {props.registration && (
+            <div className="new-login">
+              <p
+                className="pre-registro"
+                onClick={() => {
+                  props.setPaso(1);
+                  sessionStorage.setItem(
+                    "nuevoRegistro",
+                    JSON.stringify({
+                      name: "",
+                      lastName: "",
+                      email: "",
+                      position: "",
+                      country: "",
+                      phone: "",
+                      commercialName: "",
+                      companyName: "",
+                      rfc: "",
+                      adress: "",
+                    })
+                  );
+                  sessionStorage.setItem("countryCode", JSON.stringify("+52"));
+                }}
+              >
+                ¿Aún no tienes cuenta?<span> Regístrate</span>
+              </p>
+            </div>
+          )}
         </div>
       </Container>
       {upgradePlanRedirect && <Redirect to={{ pathname: "/dashboard" }} />}

package/src/components/molecules/SignInLoginCreationApp/index.js

@@ -18,6 +18,7 @@ export const SignInLoginCreationApp = (props) => {
   const [signInError, setSignInError] = useState("");
   const [loading, setLoading] = useState(false);
   const [upgradePlanRedirect, setUpgradePlanRedirect] = useState(false);
+
   const validate = async (e) => {
     e.preventDefault();
     setSignInError("");
@@ -45,7 +46,7 @@ export const SignInLoginCreationApp = (props) => {
     if (valid) {
       try {
         setLoading(true);
-        const session = await Auth.signIn(email, password);
+        const session = await props.Auth.signIn(email, password);
         if (session.challengeName === "NEW_PASSWORD_REQUIRED") {
           props.setUser(session);
           props.setPaso(8);
@@ -60,7 +61,8 @@ export const SignInLoginCreationApp = (props) => {
               },
             }
           );
-
+          console.log(userGroup);
+          console.log(userGroup[0]);
           const userGroupValue =
             typeof userGroup === "string" ? userGroup : userGroup[0];
           if (userGroupValue === "colaboradores_contentoh") {
@@ -71,7 +73,7 @@ export const SignInLoginCreationApp = (props) => {
             );
             const user = JSON.parse(response.data.body).data[0];
             const company = JSON.parse(response.data.body).data[1];
-            // const picture = getProfilePicture(user.id_user, 83, 83);
+
             caches.keys().then((names) => {
               names.forEach((name) => {
                 caches.delete(name);

package/src/components/organisms/ChangePassword/styles.js

@@ -1,13 +1,11 @@
 import styled from "styled-components";
 
 export const Container = styled.div`
-  display: flex;
   width: 50%;
   height: 100vh;
   .button-center {
-    position: absolute;
-    bottom: 13%;
-    left: 18%;
+    display: flex;
+    justify-content: center;
     .general-default-button {
       width: 160px;
     }