Feat: [LC-1411] Quick Nav

.changeset/curly-jobs-hope.md

@@ -0,0 +1,5 @@
+---
+"learn-card-app": patch
+---
+
+Feat: [LC-1411] Quick Nav

apps/learn-card-app/src/components/add-to-learncard-menu/AddToLearnCardMenu.tsx

@@ -15,6 +15,7 @@ import NewAiSessionIcon from 'learn-card-base/svgs/NewAiSessionIcon';
 import BoostsTwoTonedIcon from 'learn-card-base/svgs/SideNav/BoostsTwoTonedIcon';
 import BoostSelectMenu from '../boost/boost-select-menu/BoostSelectMenu';
 import useBoostModal from '../boost/hooks/useBoostModal';
+import IssueManagedBoostSelector from '../../pages/launchPad/LaunchPadHeader/IssueManagedBoostSelector';
 import { NewAiSessionIconShaded } from 'learn-card-base/svgs/NewAiSessionIcon';
 
 import {
@@ -30,6 +31,7 @@ export enum AddToLearnCardMenuEnum {
     boostSomeone = 'boostSomeone',
     newAiSession = 'newAiSession',
     issueCredential = 'issueCredential',
+    createCredential = 'createCredential',
     uploadCredential = 'uploadCredential',
     claimCredential = 'claimCredential',
 }
@@ -79,6 +81,22 @@ export const AddToLearnCardMenu: React.FC = () => {
         handlePresentBoostModal();
     };
 
+    const handleIssueManagedBoost = () => {
+        closeModal();
+
+        newModal(
+            <IssueManagedBoostSelector />,
+            {
+                hideButton: true,
+                sectionClassName: '!max-w-[500px]',
+            },
+            {
+                desktop: ModalTypes.Cancel,
+                mobile: ModalTypes.Cancel,
+            }
+        );
+    };
+
     const handleCheckListButton = () => {
         closeModal();
 
@@ -131,6 +149,12 @@ export const AddToLearnCardMenu: React.FC = () => {
             type: AddToLearnCardMenuEnum.issueCredential,
             Icon: AddCredentialIcon,
             label: 'Issue Credential',
+            onClick: () => handleIssueManagedBoost(),
+        },
+        {
+            type: AddToLearnCardMenuEnum.createCredential,
+            Icon: AddCredentialIcon,
+            label: 'Create Credential',
             onClick: () => handleNewBoostModal(),
         },
         {

apps/learn-card-app/src/components/learncard/AccountSwitcherModal.tsx

@@ -43,6 +43,8 @@ type AccountSwitcherModalProps = {
 
     showStepsFooter?: boolean;
     containerClassName?: string;
+    initialStep?: string;
+    childOnly?: boolean;
 };
 
 const AccountSwitcherModal: React.FC<AccountSwitcherModalProps> = ({
@@ -60,6 +62,8 @@ const AccountSwitcherModal: React.FC<AccountSwitcherModalProps> = ({
 
     showStepsFooter = false,
     containerClassName = '',
+    initialStep,
+    childOnly = false,
 }) => {
     const currentUser = useCurrentUser();
     const { currentLCNUser } = useGetCurrentLCNUser();
@@ -68,7 +72,7 @@ const AccountSwitcherModal: React.FC<AccountSwitcherModalProps> = ({
         mobile: ModalTypes.FullScreen,
     });
 
-    const [activeStep, setActiveStep] = useState(SwitcherStepEnum.selectProfile);
+    const [activeStep, setActiveStep] = useState(initialStep ?? SwitcherStepEnum.selectProfile);
 
     const { mutate: createChildAccount } = useCreateChildAccount();
 
@@ -153,11 +157,13 @@ const AccountSwitcherModal: React.FC<AccountSwitcherModalProps> = ({
                 )}
                 <div className="grid grid-cols-2 gap-[20px] justify-items-center ">
                     <ActiveChildAccountButton />
-                    <ParentSwitcherButton
-                        handlePlayerSwitchOverride={handlePlayerSwitchOverride}
-                        onPlayerSwitch={onPlayerSwitch}
-                        isSwitching={isSwitching}
-                    />
+                    {!childOnly && (
+                        <ParentSwitcherButton
+                            handlePlayerSwitchOverride={handlePlayerSwitchOverride}
+                            onPlayerSwitch={onPlayerSwitch}
+                            isSwitching={isSwitching}
+                        />
+                    )}
 
                     {profileRecords?.map((p, index) => {
                         const { profile, manager } = p;
@@ -174,6 +180,7 @@ const AccountSwitcherModal: React.FC<AccountSwitcherModalProps> = ({
                                     const switchedUser = {
                                         ...manager,
                                         did: profile?.did,
+                                        profileId: profile?.profileId,
                                         isServiceProfile: profile?.isServiceProfile,
                                     };
 

apps/learn-card-app/src/components/onboarding/onboarding.helpers.ts

@@ -9,6 +9,7 @@ export enum LearnCardRolesEnum {
     teacher = 'teacher',
     admin = 'admin',
     counselor = 'counselor',
+    developer = 'developer',
 }
 
 export type LearnCardRoleType = {
@@ -49,4 +50,10 @@ export const LearnCardRoles: LearnCardRoleType[] = [
         description: 'I support learners in planning their educational or career paths.',
         type: LearnCardRolesEnum.counselor,
     },
+    {
+        id: 6,
+        title: 'Developer',
+        description: 'I manage systems, data, and technology for my organization.',
+        type: LearnCardRolesEnum.developer,
+    },
 ];

apps/learn-card-app/src/components/onboarding/onboardingRoles/OnboardingRoleItem.tsx

@@ -2,6 +2,12 @@ import React from 'react';
 
 import { LearnCardRolesEnum, LearnCardRoleType } from '../onboarding.helpers';
 import Pencil from '../../svgs/Pencil';
+import Checkmark from 'learn-card-base/svgs/Checkmark';
+import LearnerIcon from '../../../assets/images/quicknavroles/learnergradcapicon.png';
+import GuardianIcon from '../../../assets/images/quicknavroles/guardianhomeicon.png';
+import TeacherIcon from '../../../assets/images/quicknavroles/teacherappleicon.png';
+import AdminIcon from '../../../assets/images/quicknavroles/adminshieldicon.png';
+import DeveloperIcon from '../../../assets/images/quicknavroles/developeralienicon.png';
 
 type OnboardingRoleItemProps = {
     role: LearnCardRolesEnum | null;
@@ -19,41 +25,89 @@ export const OnboardingRoleItem: React.FC<OnboardingRoleItemProps> = ({
     showDescription = true,
 }) => {
     const isSelected = role === roleItem?.type;
-    const activeStyles = isSelected ? 'bg-indigo-50 border-indigo-50' : 'border-grayscale-200';
+    const activeStyles = isSelected ? 'bg-[#CCFBF1] border-[#CCFBF1]' : 'border-grayscale-200';
+
+    const roleIcons: Record<LearnCardRolesEnum, string> = {
+        [LearnCardRolesEnum.learner]: LearnerIcon,
+        [LearnCardRolesEnum.guardian]: GuardianIcon,
+        [LearnCardRolesEnum.teacher]: TeacherIcon,
+        [LearnCardRolesEnum.admin]: AdminIcon,
+        [LearnCardRolesEnum.counselor]: TeacherIcon,
+        [LearnCardRolesEnum.developer]: DeveloperIcon,
+    };
+
+    const iconSrc = roleIcons[roleItem?.type as LearnCardRolesEnum];
+
+    const iconBgColors: Record<LearnCardRolesEnum, string> = {
+        [LearnCardRolesEnum.learner]: 'var(--teal-200, #99F6E4)',
+        [LearnCardRolesEnum.guardian]: 'var(--ion-color-violet-200)',
+        [LearnCardRolesEnum.teacher]: 'var(--ion-color-amber-100)',
+        [LearnCardRolesEnum.admin]: 'var(--ion-color-cyan-100)',
+        [LearnCardRolesEnum.counselor]: 'var(--ion-color-violet-200)',
+        [LearnCardRolesEnum.developer]: 'var(--lime-300, #BEF264)',
+    };
+
+    const iconBgStyle: React.CSSProperties = {
+        backgroundColor: iconBgColors[roleItem?.type as LearnCardRolesEnum],
+    };
 
     return (
         <li
             role="button"
-            className={`w-full text-grayscale-900 border-solid flex items-center justify-between border-[1px] border-grayscale-200 rounded-[10px] p-4 text-left list-none ${activeStyles}`}
+            className={`w-full text-grayscale-900 border-solid flex items-start justify-between border-[1px] rounded-[10px] p-4 text-left list-none ${activeStyles}`}
             onClick={e => {
                 e.stopPropagation();
                 setRole(roleItem?.type as LearnCardRolesEnum);
             }}
         >
-            <div className="flex flex-col gap-[5px] items-start justify-between">
-                <p className="font-semibold text-[17px] font-poppins">
-                    {!showDescription && isSelected && (
-                        <span className="text-grayscale-800 font-normal">I'm a {''}</span>
+            <div className="flex flex-1 min-w-0 flex-col items-start gap-[5px]">
+                <div className="flex items-center justify-between w-full gap-3">
+                    <div className="flex items-center gap-3 min-w-0">
+                        <span
+                            className="flex shrink-0 items-center justify-center h-[36px] w-[36px] rounded-full"
+                            style={iconBgStyle}
+                        >
+                            <img
+                                src={iconSrc}
+                                alt={`${roleItem?.title} icon`}
+                                className="h-[28px] w-[28px] object-contain"
+                            />
+                        </span>
+
+                        <p className="font-semibold text-[17px] font-poppins min-w-0">
+                            {!showDescription && isSelected && (
+                                <span className="text-grayscale-800 font-normal">I'm a {''}</span>
+                            )}
+                            {!showDescription && !isSelected ? 'Select Role' : roleItem?.title}
+                        </p>
+                    </div>
+
+                    {handleEdit ? (
+                        <button
+                            type="button"
+                            onClick={e => {
+                                e.stopPropagation();
+                                handleEdit?.();
+                            }}
+                        >
+                            <Pencil
+                                className="w-[28px] h-[28px] shrink-0 text-grayscale-900"
+                                strokeWidth="2"
+                            />
+                        </button>
+                    ) : (
+                        isSelected && (
+                            <Checkmark className="w-[20px] h-[20px] text-[#2A2F55] shrink-0 mt-[-6px]" />
+                        )
                     )}
-                    {!showDescription && !isSelected ? 'Select Role' : roleItem?.title}
-                </p>
+                </div>
+
                 {showDescription && (
                     <p className="text-grayscale-600 text-[14px] font-poppins">
                         {roleItem?.description}
                     </p>
                 )}
             </div>
-            {handleEdit && (
-                <button
-                    type="button"
-                    onClick={e => {
-                        e.stopPropagation();
-                        handleEdit?.();
-                    }}
-                >
-                    <Pencil className="w-[24px] h-[24px] text-grayscale-900" strokeWidth="2" />
-                </button>
-            )}
         </li>
     );
 };

apps/learn-card-app/src/components/onboarding/onboardingRoles/OnboardingRoles.tsx

@@ -11,11 +11,13 @@ export const OnboardingRoles = ({
     role: LearnCardRolesEnum | null;
     setRole: (role: LearnCardRolesEnum) => void;
 }) => {
+    const visibleRoles = LearnCardRoles.filter(r => r.type !== LearnCardRolesEnum.counselor);
+
     return (
         <ul className="w-full flex flex-col items-center gap-[10px]">
-            {LearnCardRoles.map(r => {
-                return <OnboardingRoleItem key={r.id} role={role} setRole={setRole} roleItem={r} />;
-            })}
+            {visibleRoles.map(r => (
+                <OnboardingRoleItem key={r.id} role={role} setRole={setRole} roleItem={r} />
+            ))}
         </ul>
     );
 };

apps/learn-card-app/src/components/svgs/NavBarPassportIcon.tsx

@@ -12,6 +12,7 @@ export const NavBarPassportIcon: React.FC<{ className?: string; version?: string
                 height="31"
                 viewBox="0 0 24 31"
                 fill="none"
+                className={className}
             >
                 <path
                     d="M20.3125 4.29817V6.9065C19.8791 6.75186 19.4128 6.66772 18.927 6.66772H2.30204C1.5369 6.66772 0.916626 6.04144 0.916626 5.2689V5.16951C0.916626 4.42391 1.45961 3.79178 2.19064 3.68634L17.1498 1.52865C18.819 1.28787 20.3125 2.59567 20.3125 4.29817Z"

apps/learn-card-app/src/components/svgs/quicknav/AISessionsQuickNav.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+const AISessionsQuickNav: React.FC<{ className?: string }> = ({ className = '' }) => {
+    return (
+        <svg
+            width="60"
+            height="60"
+            viewBox="0 0 60 60"
+            className={className}
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <circle cx="30" cy="30" r="24" fill="#22D3EE" />
+            <path
+                d="M42.0012 22.2004C42.7012 21.451 43.0991 23.2663 42.0012 22.2004L13.8038 51.0346C13.051 51.8445 11.7518 51.877 10.9559 51.1044L7.77715 48.0185C6.98127 47.2459 7.01483 45.9892 7.84906 45.2538L37.5012 18.0003C38.2779 17.3208 38.2032 19.3345 39.3012 20.4004L42.0012 22.2004Z"
+                fill="#A5F3FC"
+            />
+
+            <path
+                data-figma-bg-blur-radius="8"
+                d="M37.627 17.6711L47.5371 8.49257C48.2898 7.81302 50.6583 8.06436 51.3727 8.77649C52.1062 9.47 52.3651 11.7693 51.6651 12.5L42.2105 22.1208C40.1201 21.7763 37.7324 18.9371 37.627 17.6711Z"
+                fill="white"
+            />
+            <path
+                d="M51.3779 8.77801C52.4759 9.84388 52.3272 11.7941 51.6272 12.5435L13.8038 51.0357C13.051 51.8456 11.7518 51.8782 10.9559 51.1055L7.77715 48.0196C6.98127 47.247 7.01483 45.9903 7.84906 45.2549L47.4944 8.53598C48.2711 7.85644 50.2752 7.71215 51.3731 8.77801H51.3779Z"
+                stroke="#6366F1"
+                stroke-width="2.5"
+                stroke-miterlimit="10"
+            />
+            <path
+                d="M42.1675 22.1684C40.0771 21.824 37.6895 18.9848 37.584 17.7188"
+                stroke="#6366F1"
+                stroke-width="2.5"
+                stroke-miterlimit="10"
+            />
+            <path
+                d="M13.288 6.69123L14.904 2.76656C14.9952 2.545 15.2113 2.40039 15.4508 2.40039C15.6903 2.40039 15.9063 2.545 15.9976 2.76656L17.6136 6.69123C18.257 8.25359 19.4976 9.49424 21.06 10.1376L24.9846 11.7536C25.2063 11.8448 25.3508 12.0608 25.3508 12.3004C25.3508 12.54 25.2063 12.7559 24.9846 12.8472L21.06 14.4632C19.4976 15.1065 18.257 16.3472 17.6136 17.9096L15.9976 21.8342C15.9063 22.0558 15.6903 22.2004 15.4508 22.2004C15.2113 22.2004 14.9952 22.0558 14.904 21.8342L13.288 17.9096C12.6446 16.3472 11.404 15.1065 9.84162 14.4632L5.91694 12.8472C5.6954 12.7559 5.55078 12.54 5.55078 12.3004C5.55078 12.0608 5.6954 11.8448 5.91694 11.7536L9.84162 10.1376C11.404 9.49424 12.6446 8.25359 13.288 6.69123Z"
+                fill="#6366F1"
+            />
+            <path
+                d="M32.074 42.9317L33.1024 40.4342C33.1605 40.2932 33.298 40.2012 33.4504 40.2012C33.6028 40.2012 33.7403 40.2932 33.7984 40.4342L34.8267 42.9317C35.2362 43.9259 36.0256 44.7154 37.0199 45.1248L39.5173 46.1532C39.6585 46.2113 39.7504 46.3487 39.7504 46.5012C39.7504 46.6537 39.6585 46.7911 39.5173 46.8491L37.0199 47.8775C36.0256 48.2869 35.2362 49.0764 34.8267 50.0706L33.7984 52.5682C33.7403 52.7091 33.6028 52.8012 33.4504 52.8012C33.298 52.8012 33.1605 52.7091 33.1024 52.5682L32.074 50.0706C31.6647 49.0764 30.8752 48.2869 29.8809 47.8775L27.3834 46.8491C27.2424 46.7911 27.1504 46.6537 27.1504 46.5012C27.1504 46.3487 27.2424 46.2113 27.3834 46.1532L29.8809 45.1248C30.8752 44.7154 31.6647 43.9259 32.074 42.9317Z"
+                fill="#6366F1"
+            />
+            <path
+                d="M48.5846 30.3011L50.0537 26.7333C50.1366 26.5319 50.3331 26.4004 50.5508 26.4004C50.7685 26.4004 50.9649 26.5319 51.0479 26.7333L52.517 30.3011C53.1019 31.7215 54.2297 32.8493 55.6501 33.4342L59.2179 34.9033C59.4195 34.9862 59.5508 35.1825 59.5508 35.4004C59.5508 35.6182 59.4195 35.8145 59.2179 35.8975L55.6501 37.3666C54.2297 37.9514 53.1019 39.0793 52.517 40.4996L51.0479 44.0675C50.9649 44.2689 50.7685 44.4004 50.5508 44.4004C50.3331 44.4004 50.1366 44.2689 50.0537 44.0675L48.5846 40.4996C47.9997 39.0793 46.8719 37.9514 45.4515 37.3666L41.8837 35.8975C41.6823 35.8145 41.5508 35.6182 41.5508 35.4004C41.5508 35.1825 41.6823 34.9862 41.8837 34.9033L45.4515 33.4342C46.8719 32.8493 47.9997 31.7215 48.5846 30.3011Z"
+                fill="#6366F1"
+            />
+            <defs>
+                <clipPath
+                    id="bgblur_0_7422_156853_clip_path"
+                    transform="translate(-29.627 -0.09375)"
+                >
+                    <path d="M37.627 17.6711L47.5371 8.49257C48.2898 7.81302 50.6583 8.06436 51.3727 8.77649C52.1062 9.47 52.3651 11.7693 51.6651 12.5L42.2105 22.1208C40.1201 21.7763 37.7324 18.9371 37.627 17.6711Z" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+export default AISessionsQuickNav;

apps/learn-card-app/src/components/svgs/quicknav/AddChildQuickNav.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+const AddChildQuickNav: React.FC<{ className?: string }> = ({ className = '' }) => {
+    return (
+        <svg
+            width="50"
+            height="50"
+            viewBox="0 0 50 50"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={className}
+        >
+            <path
+                d="M25 43.75C35.3553 43.75 43.75 35.3553 43.75 25C43.75 14.6447 35.3553 6.25 25 6.25C14.6447 6.25 6.25 14.6447 6.25 25C6.25 35.3553 14.6447 43.75 25 43.75Z"
+                fill="white"
+            />
+            <path
+                d="M43.75 25C43.75 35.3553 35.3553 43.75 25 43.75C14.6447 43.75 6.25 35.3553 6.25 25C6.25 14.6447 14.6447 6.25 25 6.25"
+                stroke="#353E64"
+                stroke-width="2.5"
+                stroke-miterlimit="10"
+                stroke-linecap="round"
+            />
+            <path
+                d="M25 31.25C29.3147 31.25 32.8125 27.7522 32.8125 23.4375C32.8125 19.1228 29.3147 15.625 25 15.625C20.6853 15.625 17.1875 19.1228 17.1875 23.4375C17.1875 27.7522 20.6853 31.25 25 31.25Z"
+                fill="#E2E3E9"
+                stroke="#353E64"
+                stroke-width="2.5"
+                stroke-miterlimit="10"
+            />
+            <path
+                d="M12.4609 38.9402C13.6379 36.6262 15.4323 34.683 17.6454 33.3257C19.8585 31.9684 22.404 31.25 25.0002 31.25C27.5963 31.25 30.1418 31.9684 32.355 33.3257C34.5681 34.6829 36.3624 36.6262 37.5394 38.9402"
+                stroke="#353E64"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+            <path
+                d="M31.3848 10.832H46.2806"
+                stroke="#353E64"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+            <path
+                d="M38.834 3.38672V18.2826"
+                stroke="#353E64"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+        </svg>
+    );
+};
+
+export default AddChildQuickNav;