For TaaS Intake #498 & #479

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];
+};

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 = () => {
         </div>
       </div>
 
-      <Progress
-        stages={stages}
-        extraStyleName="role-selection final-step"
-        disabled="true"
-        percentage="97"
-      />
+      <div styleName="right-side">
+        <Progress
+          stages={stages}
+          extraStyleName="role-selection final-step"
+          disabled="true"
+          percentage="97"
+        />
+        <div styleName="trusted">
+          <h6>Trusted By</h6>
+          <TrustedLogos />
+        </div>
+      </div>
     </div>
   );
 };

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;
+  }
+}

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) => {