Merge branch 'aa-staging/recruitment' into aa-master

merging from aa-staging/recruitment to aa-master

apps/app/pages/_document.js

@@ -1,7 +1,6 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 
 import { ServerStyleSheet } from 'styled-components';
-
 export default class MyDocument extends Document {
   render() {
     return (

apps/app/pages/join/[slug]/apply.jsx

@@ -1,9 +1,11 @@
 import Page from '@devlaunchers/dev-recruiters/src/pages/[slug]/apply';
 import App from '@devlaunchers/dev-recruiters/src/pages/_app';
-export { getStaticProps, getStaticPaths } from '@devlaunchers/dev-recruiters/src/pages/[slug]/apply';
+export {
+  getStaticProps,
+  getStaticPaths,
+} from '@devlaunchers/dev-recruiters/src/pages/[slug]/apply';
 
 /////////////////////////////////////////
 
 import { constructAppPage } from '../../../utils/routingTools.js';
 export default constructAppPage(App, Page);
-

apps/app/pages/join/[slug]/index.jsx

@@ -1,7 +1,9 @@
 import Page from '@devlaunchers/dev-recruiters/src/pages/[slug]/index';
-import App from '@devlaunchers/dev-recruiters/src/pages/_app';
-export { getStaticProps, getStaticPaths } from '@devlaunchers/dev-recruiters/src/pages/[slug]/index';
-
+import App from '@devlaunchers/dev-recruiters/src/pages/_app.jsx';
+export {
+  getStaticProps,
+  getStaticPaths,
+} from '@devlaunchers/dev-recruiters/src/pages/[slug]/index';
 /////////////////////////////////////////
 
 import { constructAppPage } from '../../../utils/routingTools.js';

apps/app/pages/join/confirmation.jsx

@@ -1,9 +1,9 @@
 import Page from '@devlaunchers/dev-recruiters/src/pages/confirmation';
-import App from '@devlaunchers/dev-recruiters/src/pages/_app';
+//import App from '@devlaunchers/dev-recruiters/_app.js';
+import App from '../../../dev-recruiters/src/pages/_app';
 export { getStaticProps } from '@devlaunchers/dev-recruiters/src/pages/confirmation';
 
 /////////////////////////////////////////
 
 import { constructAppPage } from '../../utils/routingTools.js';
 export default constructAppPage(App, Page);
-

apps/app/pages/join/filter.jsx

@@ -0,0 +1,8 @@
+import Page from '@devlaunchers/dev-recruiters/src/pages/filter';
+import App from '@devlaunchers/dev-recruiters/src/pages/_app';
+export { getStaticProps } from '@devlaunchers/dev-recruiters/src/pages/filter';
+
+/////////////////////////////////////////
+
+import { constructAppPage } from '../../utils/routingTools.js';
+export default constructAppPage(App, Page);

apps/app/pages/join/index.jsx

@@ -1,9 +1,8 @@
 import Page from '@devlaunchers/dev-recruiters/src/pages/index';
-import App from '@devlaunchers/dev-recruiters/src/pages/_app';
+//import App from '@devlaunchers/dev-recruiters/src/pages/_app';
+import App from '../../../dev-recruiters/src/pages/_app';
 export { getStaticProps } from '@devlaunchers/dev-recruiters/src/pages/index';
 
 /////////////////////////////////////////
-
 import { constructAppPage } from '../../utils/routingTools.js';
 export default constructAppPage(App, Page);
-

apps/app/pages/join/oldjoin.jsx

@@ -0,0 +1,8 @@
+import Page from '@devlaunchers/dev-recruiters/src/pages/oldjoin';
+import App from '@devlaunchers/dev-recruiters/src/pages/_app';
+export { getStaticProps } from '@devlaunchers/dev-recruiters/src/pages/oldjoin';
+
+/////////////////////////////////////////
+
+import { constructAppPage } from '../../utils/routingTools.js';
+export default constructAppPage(App, Page);

apps/app/pages/projects/[slug].jsx

@@ -1,8 +1,11 @@
 import Page from '@devlaunchers/site-projects/src/pages/[slug]';
 import App from '@devlaunchers/site-projects/src/pages/_app';
-export { getStaticPaths, getStaticProps } from '@devlaunchers/site-projects/src/pages/[slug]';
+export {
+  getStaticPaths,
+  getStaticProps,
+} from '@devlaunchers/site-projects/src/pages/[slug]';
 
 /////////////////////////////////////////
 
 import { constructAppPage } from '../../utils/routingTools.js';
-export default constructAppPage(App, Page);
+export default constructAppPage(App, Page);

apps/dev-recruiters/src/components/common/Slider/Slider.tsx

@@ -23,19 +23,38 @@ export default function Slider({
   initialValue = 0,
   onChange,
 }: Props) {
-  const [value, setValue] = useState(initialValue);
+  const [value, setValue] = useState(() => {
+    if (typeof window !== 'undefined') {
+      const savedValue = localStorage.getItem('sliderValue');
+      if (savedValue) {
+        return parseInt(savedValue, 10);
+      } else {
+        return initialValue;
+      }
+    }
+  });
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setIsValueAvailable(true);
+      localStorage.setItem('sliderValue', value.toString());
+    }
+  }, [value]);
 
   const handleOnChange = (value: number) => {
     setValue(value);
     onChange(value);
   };
 
+  const [isValueAvailable, setIsValueAvailable] = useState(false);
+
   const getBubblePosition = () => {
     return value > 0 ? Number(((value - min) * 90) / (max - min)) : 0;
   };
 
   return (
-      <Container>
+    <Container>
+      {isValueAvailable && (
         <BubbleContainer>
           <Bubble newVal={getBubblePosition()}>
             <p>
@@ -44,15 +63,17 @@ export default function Slider({
             </p>
           </Bubble>
         </BubbleContainer>
-        <SliderInputContainer>
-          <SliderInput
-            step={1}
-            min={min}
-            max={max}
-            value={value}
-            onChange={({ target }) => handleOnChange(+target.value)}
-          />
-        </SliderInputContainer>
+      )}
+      <SliderInputContainer>
+        <SliderInput
+          step={1}
+          min={min}
+          max={max}
+          value={value}
+          onChange={({ target }) => handleOnChange(+target.value)}
+        />
+      </SliderInputContainer>
+      {isValueAvailable && (
         <LabelsContainer>
           <p>
             {min} {prefix}
@@ -66,6 +87,7 @@ export default function Slider({
             {max} {prefix}
           </p>
         </LabelsContainer>
-      </Container>
+      )}
+    </Container>
   );
 }

apps/dev-recruiters/src/components/common/TitledHeader/TitledHeader.tsx

@@ -21,18 +21,15 @@ const TitledHeader = ({ title, backButtonUrl }) => {
         paddingInline="1rem"
         justifyContent="space-between"
         alignItems="center"
-        flexWrap='wrap'
+        flexWrap="wrap"
       >
         <Link href={backButtonUrl || previousPath} passHref>
           <a>
-            <molecules.BackButton type="small" withLabel={false} />
+            <molecules.BackButton type="back" withLabel={false} />
           </a>
         </Link>
-        <atoms.Box margin='0 1rem 0 0'>
-          <atoms.Typography
-            type="h1"
-            css={{ color: theme.colors.GREYSCALE_WHITE, textAlign: 'center' }}
-          >
+        <atoms.Box margin="0 1rem 0 0">
+          <atoms.Typography type="h1" css={{ textAlign: 'center' }}>
             {title}
           </atoms.Typography>
         </atoms.Box>

apps/dev-recruiters/src/components/modules/DetailedPage/Confirmation/ConfirmationModal.tsx

@@ -0,0 +1,44 @@
+import { ApplyButton } from '../../FilterPage/RolesFilterComponent/RolesFilterList/SearchRoles/RoleModal/StyledRoleModal';
+import { GradientLine } from '../../FormPage/styledSignupForm';
+import Modal from '../PositionPopupModal/Modal';
+import {
+  ConfirmationModalSection,
+  confirmationModalStyles,
+} from './StyledConfirmationModal';
+
+interface Props {
+  showModal: Boolean;
+  handleOpenModal: () => void;
+  handleCloseModal: () => void;
+}
+const ConfirmationModal = ({
+  showModal,
+  handleOpenModal,
+  handleCloseModal,
+}: Props) => {
+  return (
+    <Modal
+      modalIsOpen={showModal}
+      closeModal={handleCloseModal}
+      customModalStyles={confirmationModalStyles}
+      handleOpenModal={handleOpenModal}
+      modalContent={
+        <ConfirmationModalSection>
+          <h3>Thank you!</h3>
+          <GradientLine height={'5px'} />
+          <p>
+            Your application has been received and is now being reviewed. After
+            the product owner reviews your application, they will reach out
+            through the email address you have provided.
+          </p>
+
+          <ApplyButton color="DarkElectricBlue" onClick={handleCloseModal}>
+            Return to search results
+          </ApplyButton>
+        </ConfirmationModalSection>
+      }
+    />
+  );
+};
+
+export default ConfirmationModal;

apps/dev-recruiters/src/components/modules/DetailedPage/Confirmation/StyledConfirmationModal.tsx

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+export const confirmationModalStyles = {
+  content: {
+    position: 'absolute',
+    width: '700px',
+    height: '350px',
+    top: '50%',
+    left: '50%',
+    right: 'auto',
+    bottom: 'auto',
+    marginRight: '-50%',
+    transform: 'translate(-50%, -50%)',
+  },
+  overlay: { zIndex: 1000, backgroundColor: 'rgba(0,0,0,.75)' },
+};
+
+export const ConfirmationModalSection = styled.div`
+  height: 100%;
+  font-family: ${(props) => props.theme?.fonts?.normal};
+  font-style: normal;
+  font-weight: 700;
+  line-height: 22px;
+  align-items: center;
+  text-align: center;
+  justifycontent: center;
+  display: flex;
+  flex-direction: column;
+  margin: 0px 10px;
+
+  & h3 {
+    font-family: ${(props) => props.theme?.fonts?.normal};
+    font-style: normal;
+    font-weight: 500;
+    font-size: 36px;
+    line-height: 22px;
+    padding: 30px 0px 20px 0px;
+  }
+
+  & p {
+    font-family: ${(props) => props.theme?.fonts?.normal};
+    font-style: normal;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 19px;
+    line-height: 1.125rem;
+    max-width: 28rem;
+    overflow: hidden;
+    margin: 40px 0px;
+  }
+`;

apps/dev-recruiters/src/components/modules/DetailedPage/Confirmation/index.js

@@ -0,0 +1 @@
+export { default } from './ConfirmationModal';

apps/dev-recruiters/src/components/modules/DetailedPage/PositionCard/Modal.css

@@ -0,0 +1,34 @@
+/* styles.css */
+.custom-modal-content {
+  width: 50px; /* Set the desired width */
+  height: 100px; /* Set the desired height */
+  /* Add any other desired styling */
+}
+/* Modal.css */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal {
+  background-color: white;
+  padding: 20px;
+  border-radius: 4px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.close-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}