diff --git a/local/login-locally/package-lock.json b/local/login-locally/package-lock.json
new file mode 100644
index 00000000..35fdb913
--- /dev/null
+++ b/local/login-locally/package-lock.json
@@ -0,0 +1,5 @@
+{
+ "name": "login-locally",
+ "version": "1.0.0",
+ "lockfileVersion": 1
+}
diff --git a/package-lock.json b/package-lock.json
index d0d5c0df..4239388b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4819,9 +4819,9 @@
}
},
"caniuse-lite": {
- "version": "1.0.30001146",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001146.tgz",
- "integrity": "sha512-VAy5RHDfTJhpxnDdp2n40GPPLp3KqNrXz1QqFv4J64HvArKs8nuNMOWkB3ICOaBTU/Aj4rYAo/ytdQDDFF/Pug==",
+ "version": "1.0.30001257",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001257.tgz",
+ "integrity": "sha512-JN49KplOgHSXpIsVSF+LUyhD8PUp6xPpAXeRrrcBh4KBeP7W864jHn6RvzJgDlrReyeVjMFJL3PLpPvKIxlIHA==",
"dev": true
},
"capture-exit": {
diff --git a/src/assets/images/trusted-logos.svg b/src/assets/images/trusted-logos.svg
new file mode 100644
index 00000000..7fd53faa
--- /dev/null
+++ b/src/assets/images/trusted-logos.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/src/routes/CreateNewTeam/hooks/useLoadSkills.js b/src/routes/CreateNewTeam/hooks/useLoadSkills.js
new file mode 100644
index 00000000..86b0f695
--- /dev/null
+++ b/src/routes/CreateNewTeam/hooks/useLoadSkills.js
@@ -0,0 +1,36 @@
+/**
+ * useLoadSkills hook
+ */
+import { useEffect, useState } from "react";
+import { flatten, partition } from "lodash";
+import { useData } from "hooks/useData";
+import { getSkills } from "services/skills";
+import { getRoles } from "services/roles";
+
+/**
+ * Hook which loads all skills and roles, then partitions skills based
+ * on whether any role requires the given skill.
+ *
+ * @returns [skills, error] tuple with `skills` array and `error` object
+ */
+export const useLoadSkills = () => {
+ const [skills, skillsError] = useData(getSkills);
+ const [roles, rolesError] = useData(getRoles);
+ const [partedSkills, setPartedSkills] = useState();
+
+ useEffect(() => {
+ if (skills && roles) {
+ const requiredSkills = new Set();
+ roles.forEach((role) => {
+ role.listOfSkills.forEach((skill) => {
+ requiredSkills.add(skill);
+ });
+ });
+ setPartedSkills(() =>
+ flatten(partition(skills, (skill) => requiredSkills.has(skill.name)))
+ );
+ }
+ }, [skills, roles]);
+
+ return [partedSkills, skillsError || rolesError];
+};
diff --git a/src/routes/CreateNewTeam/pages/CreateTaasPayment/index.jsx b/src/routes/CreateNewTeam/pages/CreateTaasPayment/index.jsx
index bca64103..c0c24932 100644
--- a/src/routes/CreateNewTeam/pages/CreateTaasPayment/index.jsx
+++ b/src/routes/CreateNewTeam/pages/CreateTaasPayment/index.jsx
@@ -12,6 +12,7 @@ import { calculateAmount } from "services/teams";
import Progress from "../../components/Progress";
import theme from "./theme";
import FallbackIcon from "../../../../assets/images/icon-role-fallback.svg";
+import TrustedLogos from "../../../../assets/images/trusted-logos.svg";
import "./styles.module.scss";
const stripePromise = loadStripe(process.env.STRIPE_PUBLIC_KEY);
@@ -160,12 +161,18 @@ const CreateTassPayment = () => {
-
+
);
};
diff --git a/src/routes/CreateNewTeam/pages/CreateTaasPayment/styles.module.scss b/src/routes/CreateNewTeam/pages/CreateTaasPayment/styles.module.scss
index 23516d0d..14ee4892 100644
--- a/src/routes/CreateNewTeam/pages/CreateTaasPayment/styles.module.scss
+++ b/src/routes/CreateNewTeam/pages/CreateTaasPayment/styles.module.scss
@@ -167,3 +167,20 @@
}
}
}
+
+.trusted {
+ background-color: #FFF;
+ border-radius: 8px;
+ padding: 12px 10px 15px 10px;
+ width: 250px;
+
+ h6 {
+ @include font-barlow;
+ font-weight: 600;
+ text-align: center;
+ color: #9D41C9;
+ font-size: 16px;
+ margin-bottom: 10px;
+ text-transform: uppercase;
+ }
+}
diff --git a/src/routes/CreateNewTeam/pages/InputSkills/index.jsx b/src/routes/CreateNewTeam/pages/InputSkills/index.jsx
index 516c057b..83ac07a9 100644
--- a/src/routes/CreateNewTeam/pages/InputSkills/index.jsx
+++ b/src/routes/CreateNewTeam/pages/InputSkills/index.jsx
@@ -7,13 +7,12 @@
*/
import React, { useCallback, useState } from "react";
import { useDispatch } from "react-redux";
-import { useData } from "hooks/useData";
import { setIsLoading } from "../../actions";
import SkillsList from "./components/SkillsList";
-import { getSkills } from "services/skills";
import LoadingIndicator from "components/LoadingIndicator";
import SkillListPopup from "../../components/SkillListPopup";
import SearchAndSubmit from "../../components/SearchAndSubmit";
+import { useLoadSkills } from "../../hooks/useLoadSkills";
function InputSkills() {
const dispatch = useDispatch();
@@ -26,7 +25,7 @@ function InputSkills() {
const [popupSelectedSkills, setPopupSelectedSkills] = useState([]);
const [popupOpen, setPopupOpen] = useState(false);
const [isPopupLoading, setIsPopupLoading] = useState(false);
- const [skills, loadingError] = useData(getSkills);
+ const [skills, loadingError] = useLoadSkills();
const toggleSkill = useCallback(
(skill) => {