From 7cc6663d5c04ec1186d0c9486f37b67da47e1f07 Mon Sep 17 00:00:00 2001 From: Michael Baghel <31278895+mbaghel@users.noreply.github.com> Date: Tue, 14 Sep 2021 22:28:39 -0400 Subject: [PATCH 1/2] feat: Ordering of Skills in Skill Select list. Issue #498 --- local/login-locally/package-lock.json | 5 +++ package-lock.json | 6 ++-- .../CreateNewTeam/hooks/useLoadSkills.js | 36 +++++++++++++++++++ .../CreateNewTeam/pages/InputSkills/index.jsx | 5 ++- 4 files changed, 46 insertions(+), 6 deletions(-) create mode 100644 local/login-locally/package-lock.json create mode 100644 src/routes/CreateNewTeam/hooks/useLoadSkills.js 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/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/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) => { From 7ba14278c5a6a155d74105d56c6ce4781758c86a Mon Sep 17 00:00:00 2001 From: Michael Baghel <31278895+mbaghel@users.noreply.github.com> Date: Wed, 15 Sep 2021 12:01:40 -0400 Subject: [PATCH 2/2] feat: Add Trusted By on checkout page. Issue #479 --- src/assets/images/trusted-logos.svg | 3 +++ .../pages/CreateTaasPayment/index.jsx | 19 +++++++++++++------ .../CreateTaasPayment/styles.module.scss | 17 +++++++++++++++++ 3 files changed, 33 insertions(+), 6 deletions(-) create mode 100644 src/assets/images/trusted-logos.svg 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/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 = () => { - +
+ +
+
Trusted By
+ +
+
); }; 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; + } +}