Finished feature 694

src/AppRoutes.js

@@ -61,10 +61,7 @@ const AppRoutes = () => {
       <AdminRoute path={ADMIN_HOME_PAGE} component={AdminHomePage} />
       <Route path={NOT_FOUND_PAGE} component={NotFoundPage} />
       <Route path={ERROR_PAGE} component={ErrorPage} />
-      <AuthRoute
-        path={REGISTER_SUCCESSFUL_PAGE}
-        component={RegisterSuccessful}
-      />
+      <Route path={REGISTER_SUCCESSFUL_PAGE} component={RegisterSuccessful} />
       <AuthRoute path={REGISTER_PAGE} component={Register} />
       <AuthRoute path={FORGOT_PASSWORD_MAIL_SENT} component={MailSent} />
       <AuthRoute path={FORGOT_PASSWORD_PAGE} component={ForgotPasswordPage} />

src/components/Cards/ProfileCard/SkeletonProfileCard/SkeletonProfileCard.styled.js

@@ -1,7 +1,7 @@
 import { Box } from "@mui/material";
 import styled, { keyframes } from "styled-components";
 import selectedTheme from "../../../../themes";
-const skeletonBackgroundAnimation = keyframes`
+const skeletonAnimation = keyframes`
     0% { 
         opacity: 1;
     }
@@ -15,11 +15,11 @@ const skeletonBackgroundAnimation = keyframes`
 
 export const SkeletonItemBackgroundColor = styled(Box)`
   background-color: ${selectedTheme.colors.filterSkeletonItems};
-  animation: ${skeletonBackgroundAnimation} 1.2s infinite;
+  animation: ${skeletonAnimation} 1.2s infinite;
 `;
 export const SkeletonBackgroundColor = styled(Box)`
   background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonBackgroundAnimation} 1.2s infinite;
+  animation: ${skeletonAnimation} 1.2s infinite;
 `;
 
 export const SkeletonProfileCardContainer = styled(Box)`

src/components/Styles/globalStyleComponents.js

@@ -24,6 +24,28 @@ export const SkeletonItemAnimation = keyframes`
     background-color: ${selectedTheme.colors.filterSkeletonItems};
   }
 `;
+export const ButtonLoadingAnimation = keyframes`
+  0% {
+    background-color: ${selectedTheme.colors.primaryPurple};
+  }
+  50% {
+    background-color: ${selectedTheme.colors.primaryPurpleAnimation};
+  }
+  100% {
+    background-color: ${selectedTheme.colors.primaryPurple};
+  }
+`
+export const ButtonLoadingEllipseAnimation = keyframes`
+  0% {
+    left: -24px;
+  }
+  50% {
+    left: calc(100% + 24px);
+  }
+  100% {
+    left: -48px;
+  }
+`
 
 export const BackgroundTransition = styled(Box)`
   border-radius: 4px;

src/pages/RegisterPages/Register/Register.js

@@ -23,9 +23,11 @@ import { REGISTER_SUCCESSFUL_PAGE } from "../../../constants/pages";
 import FirstPartOfRegistration from "./FirstPart/FirstPartOfRegistration";
 import SecondPartOfRegistration from "./SecondPart/SecondPartOfRegistration";
 import ThirdPartOfRegistration from "./ThirdPart/ThirdPartOfRegistration";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { fetchRegisterUser } from "../../../store/actions/register/registerActions";
 import { makeErrorToastMessage } from "../../../store/utils/makeToastMessage";
+import { selectIsLoadingByActionType } from "../../../store/selectors/loadingSelectors";
+import { REGISTER_USER_SCOPE } from "../../../store/actions/register/registerActionConstants";
 
 const Register = () => {
   const { t } = useTranslation();
@@ -38,6 +40,7 @@ const Register = () => {
   const [PIBError, setPIBError] = useState(""); // Wrong PIB typed
   const [PIBErrorMessage, setPIBErrorMessage] = useState(""); // Error message caused by typing wrong PIB
   const [imageError, setImageError] = useState(false); // Not picked image
+  const isLoadingRegister = useSelector(selectIsLoadingByActionType(REGISTER_USER_SCOPE));
 
   const handleResponseSuccess = () => {
     history.push(REGISTER_SUCCESSFUL_PAGE);
@@ -154,6 +157,7 @@ const Register = () => {
           <ThirdPartOfRegistration
             handleSubmit={handleSubmit}
             informations={informations}
+            isLoading={isLoadingRegister}
           />
         )}
 

src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.js

@@ -1,14 +1,13 @@
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import {
+  FinishRegistrationButton,
   FormContainer,
   RegisterDescription,
 } from "./ThirdPartOfRegistration.styled";
 import { useFormik } from "formik";
 import { useTranslation } from "react-i18next";
 import { TextField } from "../../../../components/TextFields/TextField/TextField";
-import { PrimaryButton } from "../../../../components/Buttons/PrimaryButton/PrimaryButton";
-import selectedTheme from "../../../../themes";
 import AutoSuggestTextField from "../../../../components/TextFields/AutoSuggestTextField/AutoSuggestTextField";
 import { useDispatch, useSelector } from "react-redux";
 import { selectLocations } from "../../../../store/selectors/locationsSelectors";
@@ -97,16 +96,16 @@ const ThirdPartOfRegistration = (props) => {
 
       <ErrorMessage formik={formik} />
 
-      <PrimaryButton
+      <FinishRegistrationButton
         type="submit"
         variant="contained"
         height="48px"
         fullWidth
-        buttoncolor={selectedTheme.colors.primaryPurple}
         textcolor="white"
+        isLoading={props.isLoading}
       >
         {t("common.continue")}
-      </PrimaryButton>
+      </FinishRegistrationButton>
     </FormContainer>
   );
 };
@@ -115,6 +114,7 @@ ThirdPartOfRegistration.propTypes = {
   children: PropTypes.node,
   handleSubmit: PropTypes.func,
   informations: PropTypes.any,
+  isLoading: PropTypes.bool,
 };
 
 export default ThirdPartOfRegistration;

src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.styled.js

@@ -1,5 +1,10 @@
-import {  Typography } from "@mui/material";
-import styled from "styled-components";
+import { Typography } from "@mui/material";
+import styled, { css } from "styled-components";
+import { PrimaryButton } from "../../../../components/Buttons/PrimaryButton/PrimaryButton";
+import {
+  ButtonLoadingAnimation,
+  ButtonLoadingEllipseAnimation,
+} from "../../../../components/Styles/globalStyleComponents";
 import selectedTheme from "../../../../themes";
 
 export const FormContainer = styled.form`
@@ -23,3 +28,32 @@ export const RegisterDescription = styled(Typography)`
     margin-top: 14px;
   }
 `;
+export const FinishRegistrationButton = styled(PrimaryButton)`
+  ${props => props.isLoading && css`
+    cursor: default;
+  `}
+  & button {
+    position: relative;
+    /* background-color: green !important; */
+    animation: ${(props) =>
+      props.isLoading
+        ? css`
+            ${ButtonLoadingAnimation} 2.2s infinite;
+          `
+        : ""};
+    /* animation: ${ButtonLoadingAnimation} 2s infinite; */
+  }
+  ${props => props.isLoading && css`
+  & button::after {
+    content: "";
+    width: 47px;
+    height: 96px;
+    background-color: green;
+    position: absolute;
+    top: -24px;
+    background-color: ${selectedTheme.colors.borderSponsoredColor};
+    filter: blur(45px);
+    animation: ${ButtonLoadingEllipseAnimation} 2.2s infinite;
+  }
+  `}
+`;

src/pages/RegisterPages/RegisterSuccessful.js/RegisterSuccessful.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import {
   RegisterSuccessfulContainer,
@@ -10,6 +10,7 @@ import { useHistory } from "react-router-dom";
 import { HOME_PAGE } from "../../../constants/pages";
 import RegisterRiv from "../../../assets/animations/register.riv";
 import { useRive } from "rive-react";
+import { useEffect } from "react";
 
 const RegisterSuccessful = () => {
   const { t } = useTranslation();
@@ -29,7 +30,10 @@ const RegisterSuccessful = () => {
 
   return (
     <RegisterSuccessfulContainer>
-      <RiveComponent />
+      <RiveComponent style={{
+        width: "500px",
+        height: "500px"
+      }}/>
 
       <RegisterTitle component="h1" variant="h5">
         {t("register.success")}

src/pages/RegisterPages/RegisterSuccessful.js/RegisterSuccessful.styled.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import selectedTheme from "../../../themes";
 
 export const RegisterSuccessfulContainer = styled(Container)`
-  margin-top: 300px;
+  margin-top: 150px;
   display: flex;
   flex-direction: column;
   align-items: center;

src/store/actions/register/registerActionConstants.js

@@ -4,7 +4,7 @@ import {
   createSuccessType,
 } from "../actionHelpers";
 
-const REGISTER_USER_SCOPE = "REGISTER_USER";
+export const REGISTER_USER_SCOPE = "REGISTER_USER";
 export const REGISTER_USER_FETCH = createFetchType(REGISTER_USER_SCOPE);
 export const REGISTER_USER_FETCH_ERROR = createErrorType(REGISTER_USER_SCOPE);
 export const REGISTER_USER_FETCH_SUCCESS =

src/themes/primaryTheme/primaryThemeColors.js

@@ -1,5 +1,6 @@
 export const primaryThemeColors = {
   primaryPurple: "#5A3984",
+  primaryPurpleAnimation: "#4B2C73",
   primaryYellow: "#f7b126",
   primaryPurpleDisabled: "#4D4D4D",
   primaryBackgroundColor: "#F1F1F1",