package-lock.json

@@ -9,11 +9,13 @@
 			"version": "0.1.0",
 			"dependencies": {
 				"@types/react-router-dom": "^5.3.3",
+				"@types/react-text-mask": "^5.4.11",
 				"formik": "^2.2.9",
 				"react": "^18.2.0",
 				"react-dom": "^18.2.0",
 				"react-router-dom": "^6.6.1",
 				"react-scripts": "5.0.1",
+				"react-text-mask": "^5.5.0",
 				"sass": "^1.57.1",
 				"web-vitals": "^2.1.4",
 				"yup": "^0.32.11"
@@ -3925,6 +3927,14 @@
 				"@types/react-router": "*"
 			}
 		},
+		"node_modules/@types/react-text-mask": {
+			"version": "5.4.11",
+			"resolved": "https://registry.npmjs.org/@types/react-text-mask/-/react-text-mask-5.4.11.tgz",
+			"integrity": "sha512-DIJ3/dS4jd7NK3lEgsOwcgpp+ZlVrNJEiUDRayZRE/PNMbV/nLWmOKGdL0BUS29hnx0CDgITgPudKx0BgbF5fA==",
+			"dependencies": {
+				"@types/react": "*"
+			}
+		},
 		"node_modules/@types/resolve": {
 			"version": "1.17.1",
 			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -14202,6 +14212,17 @@
 				}
 			}
 		},
+		"node_modules/react-text-mask": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
+			"integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
+			"dependencies": {
+				"prop-types": "^15.5.6"
+			},
+			"peerDependencies": {
+				"react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
 		"node_modules/read-cache": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -19723,6 +19744,14 @@
 				"@types/react-router": "*"
 			}
 		},
+		"@types/react-text-mask": {
+			"version": "5.4.11",
+			"resolved": "https://registry.npmjs.org/@types/react-text-mask/-/react-text-mask-5.4.11.tgz",
+			"integrity": "sha512-DIJ3/dS4jd7NK3lEgsOwcgpp+ZlVrNJEiUDRayZRE/PNMbV/nLWmOKGdL0BUS29hnx0CDgITgPudKx0BgbF5fA==",
+			"requires": {
+				"@types/react": "*"
+			}
+		},
 		"@types/resolve": {
 			"version": "1.17.1",
 			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -27022,6 +27051,14 @@
 				"workbox-webpack-plugin": "^6.4.1"
 			}
 		},
+		"react-text-mask": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
+			"integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
+			"requires": {
+				"prop-types": "^15.5.6"
+			}
+		},
 		"read-cache": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -9,11 +9,13 @@
 	},
 	"dependencies": {
 		"@types/react-router-dom": "^5.3.3",
+		"@types/react-text-mask": "^5.4.11",
 		"formik": "^2.2.9",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-router-dom": "^6.6.1",
 		"react-scripts": "5.0.1",
+		"react-text-mask": "^5.5.0",
 		"sass": "^1.57.1",
 		"web-vitals": "^2.1.4",
 		"yup": "^0.32.11"

src/components/Molecules/ItemList/@types/index.d.ts

@@ -7,6 +7,6 @@ export interface ItemListProps
 	extends AnchorHTMLAttributes<HTMLAnchorElement>,
 		CustomLinkProps {
 	to?: To
-	children: ReactNode | ReactNode[]
+	children?: ReactNode | ReactNode[]
 	$container?: ItemProps
 }

src/pages/Institutional/Contact/fragments/Input.tsx

@@ -1,13 +1,15 @@
 import { ErrorMessage, Field } from 'formik'
 import { InputHTMLAttributes } from 'react'
+import MaskedInput from 'react-text-mask'
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
 	name: string
 	label: string
 	error?: any
+	setValues: any
 }
 
-export function Input({ label, name, error, ...props }: InputProps) {
+export function Input({ label, name, error, setValues, ...props }: InputProps) {
 	return (
 		<div className="form__group">
 			<label className="form__label" htmlFor={name}>
@@ -24,6 +26,25 @@ export function Input({ label, name, error, ...props }: InputProps) {
 					id={name}
 					name={name}
 					className={`form__input ${error}`}
+					render={({ field }: any) => {
+						return (
+							<MaskedInput
+								{...field}
+								mask="+7 (999) 999-99-99"
+								onChange={(e) => {
+									const value = e.target.value || ''
+									const changedValue = value
+										.replace(/\)/g, '')
+										.replace(/\(/g, '')
+										.replace(/-/g, '')
+										.replace(/ /g, '')
+									console.log({ value })
+									console.log({ changedValue })
+									setValues('phone', value)
+								}}
+							/>
+						)
+					}}
 					{...props}
 				/>
 			</div>

src/routes/index.module.scss

@@ -39,27 +39,23 @@ main :global {
 .scroll__fixed {
 	position: fixed;
 	right: 16px;
-	margin-bottom: 28px;
-	bottom: 0;
+	bottom: 28px;
 	display: flex;
 	align-items: center;
 	flex-direction: column;
 	gap: 5px;
 
 	@media screen and (min-width: 1025px) {
-		/* bottom: calc(10vh + 168px); */
-
-		margin-bottom: 168px;
+		bottom: 168px;
 	}
 
 	@media screen and (min-width: 2500px) {
-		/* bottom: 16.812vh; */
-
-		margin-bottom: 229.24px;
+		bottom: 229.24px;
 	}
 
 	&-whatsapp,
 	&-top {
+		display: block;
 		width: 34px;
 		height: 34px;
 
@@ -69,11 +65,33 @@ main :global {
 		}
 	}
 
+	&-whatsapp {
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
 	&-top {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		background-color: var(--clr-gray-400);
 		border-radius: 100%;
+
+		img {
+			width: 12px;
+			height: 6.46px;
+
+			@media screen and (min-width: 1025px) {
+				width: 13px;
+				height: 7px;
+			}
+
+			@media screen and (min-width: 2500px) {
+				width: 24.24px;
+				height: 13px;
+			}
+		}
 	}
 }

src/routes/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Outlet, Route, Routes } from 'react-router-dom'
 
 import { Header } from '../template/Header'
@@ -10,8 +10,10 @@ import { Newsletter } from '../template/Newsletter'
 import { Footer } from '../template/Footer'
 
 import whatsappImg from '../assets/brands/svgs/whatsapp.svg'
+import scrollTopImg from '../assets/icons/scroll-top.svg'
 
 import styles from './index.module.scss'
+import { ItemList } from '../components/Molecules/ItemList'
 
 export function RouterBreadcrumb() {
 	let list = useMemo(() => [{ name: 'Introduction', href: '/' }], [])
@@ -24,15 +26,29 @@ export function RouterBreadcrumb() {
 }
 
 export function ScrollFixed() {
+	const [isScrollTop, setIsScrollTop] = useState<boolean>(false)
+
+	useEffect(() => {
+		window.addEventListener('scroll', () => {
+			if (window.scrollY > 100) {
+				setIsScrollTop(true)
+			} else {
+				setIsScrollTop(false)
+			}
+		})
+	}, [])
+
 	return (
-		<div className={styles['scroll__fixed']}>
-			<a className={styles['scroll__fixed-whatsapp']} href="/">
+		<ul className={styles['scroll__fixed']}>
+			<ItemList className={styles['scroll__fixed-whatsapp']} href="https://wa.me/254777123456">
 				<img src={whatsappImg} alt="" />
-			</a>
-			<a className={styles['scroll__fixed-top']} href="#root">
-				TOP
-			</a>
-		</div>
+			</ItemList>
+			{isScrollTop && (
+				<ItemList className={styles['scroll__fixed-top']} href={'#root'}>
+					<img src={scrollTopImg} alt="" />
+				</ItemList>
+			)}
+		</ul>
 	)
 }