@edx/frontend-app-subscription-learner-dashboard 1.27.2 → 1.29.0

package/dist/routes.js

@@ -7,15 +7,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { authenticatedLoader, getAuthenticatedHttpClient } from '@openedx/frontend-base';
-import { subscriptionDashboardRole, subscriptionDashboardUrlPath, subscriptionProgramProgressRole } from './constants';
+import { authenticatedLoader, getAuthenticatedHttpClient, getAppConfig } from '@openedx/frontend-base';
+import { appId, subscriptionDashboardRole, subscriptionDashboardUrlPath, subscriptionProgramProgressRole } from './constants';
 import { getSubsInitApiUrl } from './data/services/subs/urls';
 import { redirect } from 'react-router-dom';
 // loader to check if the user has subscription access
 const subscriptionAccessLoader = () => __awaiter(void 0, void 0, void 0, function* () {
     try {
         const { data } = yield getAuthenticatedHttpClient().get(getSubsInitApiUrl());
-        if (!(data === null || data === void 0 ? void 0 : data.userSubscription) || !data.userSubscription.isSubscriber) {
+        if (!(data === null || data === void 0 ? void 0 : data.userSubscription) || !data.userSubscription.isSubscriber || !getAppConfig(appId).ENABLE_SUBSCRIPTION_SITE) {
             throw redirect('/learner-dashboard'); //redirect to learner dashboard if user does not have subscription access
         }
         return null;

package/dist/routes.js.map

@@ -1 +1 @@
-{"version":3,"file":"routes.js","sourceRoot":"","sources":["../src/routes.jsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAEzF,OAAO,EAAG,yBAAyB,EAAE,4BAA4B,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AACxH,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,sDAAsD;AACtD,MAAM,wBAAwB,GAAG,GAAS,EAAE;IAC1C,IAAI,CAAC;QACH,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,0BAA0B,EAAE,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC;QAE7E,IAAI,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC;YACnE,MAAM,QAAQ,CAAC,oBAAoB,CAAC,CAAC,CAAE,yEAAyE;QAClH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,mCAAmC;QACnC,IAAI,KAAK,YAAY,QAAQ,EAAE,CAAC;YAC9B,MAAM,KAAK,CAAC;QACd,CAAC;QAED,MAAM,QAAQ,CAAC,oBAAoB,CAAC,CAAC,CAAC,mDAAmD;IAC3F,CAAC;AACH,CAAC,CAAA,CAAC;AAEF,yEAAyE;AACzE,MAAM,eAAe,GAAG,CAAO,IAAI,EAAE,EAAE;IACrC,MAAM,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,wBAAwB,EAAE,CAAC;IAEjC,OAAO,IAAI,CAAC;AACd,CAAC,CAAA,CAAC;AAEF,MAAM,MAAM,GAAG;IACb;QACE,EAAE,EAAE,kDAAkD;QACtD,IAAI,EAAE,4BAA4B;QAClC,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE;YACN,IAAI,EAAE,yBAAyB;SAChC;QACK,IAAI;;gBACR,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC;gBACtC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;YACvC,CAAC;SAAA;KACF;IACD;QACE,EAAE,EAAE,6DAA6D;QACjE,IAAI,EAAE,sCAAsC;QAC5C,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE;YACN,IAAI,EAAE,+BAA+B;SACtC;QACK,IAAI;;gBACR,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,qDAAqD,CAAC,CAAC;gBACnF,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;YACvC,CAAC;SAAA;KACF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { authenticatedLoader, getAuthenticatedHttpClient } from '@openedx/frontend-base';\n\nimport {  subscriptionDashboardRole, subscriptionDashboardUrlPath, subscriptionProgramProgressRole } from './constants';\nimport { getSubsInitApiUrl } from './data/services/subs/urls';\nimport { redirect } from 'react-router-dom';\n\n// loader to check if the user has subscription access\nconst subscriptionAccessLoader = async () => {\n  try {\n    const { data } = await getAuthenticatedHttpClient().get(getSubsInitApiUrl());\n\n    if (!data?.userSubscription || !data.userSubscription.isSubscriber) {\n      throw redirect('/learner-dashboard');  //redirect to learner dashboard if user does not have subscription access\n    }\n  \n    return null;\n  } catch (error) {\n    // Let redirect responses bubble up\n    if (error instanceof Response) {\n      throw error;\n    }\n\n    throw redirect('/learner-dashboard'); // redirect to learner dashboard if an error occurs\n  }\n};\n\n// composed loader that checks for authentication and subscription access\nconst protectedLoader = async (args) => {\n  await authenticatedLoader(args);\n  await subscriptionAccessLoader();\n\n  return null;\n};\n\nconst routes = [\n  {\n    id: 'org.edx.frontend.route.subsLearnerDashboard.main',\n    path: subscriptionDashboardUrlPath,\n    loader: protectedLoader,\n    handle: {\n      role: subscriptionDashboardRole\n    },\n    async lazy () {\n      const module = await import('./Main');\n      return { Component: module.default };\n    },\n  },\n  {\n    id: 'org.edx.frontend.route.subsLearnerDashboard.programProgress',\n    path: '/subscription-program-progress/:uuid',\n    loader: protectedLoader,\n    handle: {\n      role: subscriptionProgramProgressRole\n    },\n    async lazy () {\n      const module = await import('./containers/ProgramDashboard/ProgramProgress/index');\n      return { Component: module.default };\n    },\n  }\n];\n\nexport default routes;\n"]}
+{"version":3,"file":"routes.js","sourceRoot":"","sources":["../src/routes.jsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEvG,OAAO,EAAE,KAAK,EAAE,yBAAyB,EAAE,4BAA4B,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAC9H,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,sDAAsD;AACtD,MAAM,wBAAwB,GAAG,GAAS,EAAE;IAC1C,IAAI,CAAC;QACH,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,0BAA0B,EAAE,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC;QAE7E,IAAI,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,YAAY,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,wBAAwB,EAAE,CAAC;YACpH,MAAM,QAAQ,CAAC,oBAAoB,CAAC,CAAC,CAAE,yEAAyE;QAClH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,mCAAmC;QACnC,IAAI,KAAK,YAAY,QAAQ,EAAE,CAAC;YAC9B,MAAM,KAAK,CAAC;QACd,CAAC;QAED,MAAM,QAAQ,CAAC,oBAAoB,CAAC,CAAC,CAAC,mDAAmD;IAC3F,CAAC;AACH,CAAC,CAAA,CAAC;AAEF,yEAAyE;AACzE,MAAM,eAAe,GAAG,CAAO,IAAI,EAAE,EAAE;IACrC,MAAM,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,wBAAwB,EAAE,CAAC;IAEjC,OAAO,IAAI,CAAC;AACd,CAAC,CAAA,CAAC;AAEF,MAAM,MAAM,GAAG;IACb;QACE,EAAE,EAAE,kDAAkD;QACtD,IAAI,EAAE,4BAA4B;QAClC,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE;YACN,IAAI,EAAE,yBAAyB;SAChC;QACK,IAAI;;gBACR,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC;gBACtC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;YACvC,CAAC;SAAA;KACF;IACD;QACE,EAAE,EAAE,6DAA6D;QACjE,IAAI,EAAE,sCAAsC;QAC5C,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE;YACN,IAAI,EAAE,+BAA+B;SACtC;QACK,IAAI;;gBACR,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,qDAAqD,CAAC,CAAC;gBACnF,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;YACvC,CAAC;SAAA;KACF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { authenticatedLoader, getAuthenticatedHttpClient, getAppConfig } from '@openedx/frontend-base';\n\nimport { appId, subscriptionDashboardRole, subscriptionDashboardUrlPath, subscriptionProgramProgressRole } from './constants';\nimport { getSubsInitApiUrl } from './data/services/subs/urls';\nimport { redirect } from 'react-router-dom';\n\n// loader to check if the user has subscription access\nconst subscriptionAccessLoader = async () => {\n  try {\n    const { data } = await getAuthenticatedHttpClient().get(getSubsInitApiUrl());\n\n    if (!data?.userSubscription || !data.userSubscription.isSubscriber || !getAppConfig(appId).ENABLE_SUBSCRIPTION_SITE) {\n      throw redirect('/learner-dashboard');  //redirect to learner dashboard if user does not have subscription access\n    }\n  \n    return null;\n  } catch (error) {\n    // Let redirect responses bubble up\n    if (error instanceof Response) {\n      throw error;\n    }\n\n    throw redirect('/learner-dashboard'); // redirect to learner dashboard if an error occurs\n  }\n};\n\n// composed loader that checks for authentication and subscription access\nconst protectedLoader = async (args) => {\n  await authenticatedLoader(args);\n  await subscriptionAccessLoader();\n\n  return null;\n};\n\nconst routes = [\n  {\n    id: 'org.edx.frontend.route.subsLearnerDashboard.main',\n    path: subscriptionDashboardUrlPath,\n    loader: protectedLoader,\n    handle: {\n      role: subscriptionDashboardRole\n    },\n    async lazy () {\n      const module = await import('./Main');\n      return { Component: module.default };\n    },\n  },\n  {\n    id: 'org.edx.frontend.route.subsLearnerDashboard.programProgress',\n    path: '/subscription-program-progress/:uuid',\n    loader: protectedLoader,\n    handle: {\n      role: subscriptionProgramProgressRole\n    },\n    async lazy () {\n      const module = await import('./containers/ProgramDashboard/ProgramProgress/index');\n      return { Component: module.default };\n    },\n  }\n];\n\nexport default routes;\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react';
+import { QuizAnswerRecord } from './data/types';
 interface ProgressiveProfilingQuizContextType {
     isModalOpen: boolean;
     openModal: () => void;
@@ -7,8 +8,8 @@ interface ProgressiveProfilingQuizContextType {
     setCurrentStep: (step: number) => void;
     goToNextStep: () => void;
     goToPreviousStep: () => void;
-    answers: Record<string, string>;
-    setAnswer: (question: string, answer: string) => void;
+    answers: Record<string, QuizAnswerRecord>;
+    recordAnswer: (answer: QuizAnswerRecord) => void;
     isComplete: boolean;
     setIsComplete: (isComplete: boolean) => void;
 }

package/dist/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider.js

@@ -10,8 +10,8 @@ export const ProgressiveProfilingQuizProvider = ({ children }) => {
     const closeModal = useCallback(() => setIsModalOpen(false), []);
     const goToNextStep = useCallback(() => setCurrentStep(prev => prev + 1), []);
     const goToPreviousStep = useCallback(() => setCurrentStep(prev => Math.max(0, prev - 1)), []);
-    const setAnswer = useCallback((question, answer) => {
-        setAnswers(prev => (Object.assign(Object.assign({}, prev), { [question]: answer })));
+    const recordAnswer = useCallback((answer) => {
+        setAnswers(prev => (Object.assign(Object.assign({}, prev), { [answer.questionId]: answer })));
     }, []);
     const contextValue = useMemo(() => ({
         isModalOpen,
@@ -22,13 +22,13 @@ export const ProgressiveProfilingQuizProvider = ({ children }) => {
         goToNextStep,
         goToPreviousStep,
         answers,
-        setAnswer,
+        recordAnswer,
         isComplete,
         setIsComplete,
     }), [
         isModalOpen, openModal, closeModal,
         currentStep, goToNextStep, goToPreviousStep,
-        answers, setAnswer,
+        answers, recordAnswer,
         isComplete,
     ]);
     return (_jsx(ProgressiveProfilingQuizContext.Provider, { value: contextValue, children: children }));

package/dist/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressiveProfilingQuizProvider.js","sourceRoot":"","sources":["../../../src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider.tsx"],"names":[],"mappings":";AAAA,OAAc,EACZ,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAa,WAAW,GACrE,MAAM,OAAO,CAAC;AAgBf,MAAM,+BAA+B,GAAG,aAAa,CAA6C,IAAI,CAAC,CAAC;AAMxG,MAAM,CAAC,MAAM,gCAAgC,GAAoD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAChH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAyB,EAAE,CAAC,CAAC;IACnE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAC9D,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;IAEhE,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC7E,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE9F,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,QAAgB,EAAE,MAAc,EAAE,EAAE;QACjE,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,iCAAM,IAAI,KAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAG,CAAC,CAAC;IACxD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAClC,WAAW;QACX,SAAS;QACT,UAAU;QACV,WAAW;QACX,cAAc;QACd,YAAY;QACZ,gBAAgB;QAChB,OAAO;QACP,SAAS;QACT,UAAU;QACV,aAAa;KACd,CAAC,EAAE;QACF,WAAW,EAAE,SAAS,EAAE,UAAU;QAClC,WAAW,EAAE,YAAY,EAAE,gBAAgB;QAC3C,OAAO,EAAE,SAAS;QAClB,UAAU;KACX,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,+BAA+B,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC1D,QAAQ,GACgC,CAC5C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAwC,EAAE;IACnF,MAAM,OAAO,GAAG,UAAU,CAAC,+BAA+B,CAAC,CAAC;IAC5D,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,oFAAoF,CAAC,CAAC;IACxG,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["import React, {\n  createContext, useContext, useMemo, useState, ReactNode, useCallback,\n} from 'react';\n\ninterface ProgressiveProfilingQuizContextType {\n  isModalOpen: boolean,\n  openModal: () => void,\n  closeModal: () => void,\n  currentStep: number,\n  setCurrentStep: (step: number) => void,\n  goToNextStep: () => void,\n  goToPreviousStep: () => void,\n  answers: Record<string, string>,\n  setAnswer: (question: string, answer: string) => void,\n  isComplete: boolean,\n  setIsComplete: (isComplete: boolean) => void,\n}\n\nconst ProgressiveProfilingQuizContext = createContext<ProgressiveProfilingQuizContextType | null>(null);\n\ninterface ProgressiveProfilingQuizProviderProps {\n  children: ReactNode,\n}\n\nexport const ProgressiveProfilingQuizProvider: React.FC<ProgressiveProfilingQuizProviderProps> = ({ children }) => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [currentStep, setCurrentStep] = useState(0);\n  const [answers, setAnswers] = useState<Record<string, string>>({});\n  const [isComplete, setIsComplete] = useState(false);\n\n  const openModal = useCallback(() => setIsModalOpen(true), []);\n  const closeModal = useCallback(() => setIsModalOpen(false), []);\n\n  const goToNextStep = useCallback(() => setCurrentStep(prev => prev + 1), []);\n  const goToPreviousStep = useCallback(() => setCurrentStep(prev => Math.max(0, prev - 1)), []);\n\n  const setAnswer = useCallback((question: string, answer: string) => {\n    setAnswers(prev => ({ ...prev, [question]: answer }));\n  }, []);\n\n  const contextValue = useMemo(() => ({\n    isModalOpen,\n    openModal,\n    closeModal,\n    currentStep,\n    setCurrentStep,\n    goToNextStep,\n    goToPreviousStep,\n    answers,\n    setAnswer,\n    isComplete,\n    setIsComplete,\n  }), [\n    isModalOpen, openModal, closeModal,\n    currentStep, goToNextStep, goToPreviousStep,\n    answers, setAnswer,\n    isComplete,\n  ]);\n\n  return (\n    <ProgressiveProfilingQuizContext.Provider value={contextValue}>\n      {children}\n    </ProgressiveProfilingQuizContext.Provider>\n  );\n};\n\nexport const useProgressiveProfilingQuiz = (): ProgressiveProfilingQuizContextType => {\n  const context = useContext(ProgressiveProfilingQuizContext);\n  if (!context) {\n    throw new Error('useProgressiveProfilingQuiz must be used within a ProgressiveProfilingQuizProvider');\n  }\n  return context;\n};\n"]}
+{"version":3,"file":"ProgressiveProfilingQuizProvider.js","sourceRoot":"","sources":["../../../src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider.tsx"],"names":[],"mappings":";AAAA,OAAc,EACZ,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAa,WAAW,GACrE,MAAM,OAAO,CAAC;AAkBf,MAAM,+BAA+B,GAAG,aAAa,CAA6C,IAAI,CAAC,CAAC;AAMxG,MAAM,CAAC,MAAM,gCAAgC,GAAoD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAChH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAmC,EAAE,CAAC,CAAC;IAC7E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAC9D,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;IAEhE,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC7E,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE9F,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,MAAwB,EAAE,EAAE;QAC5D,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,iCAAM,IAAI,KAAE,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,MAAM,IAAG,CAAC,CAAC;IACjE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAClC,WAAW;QACX,SAAS;QACT,UAAU;QACV,WAAW;QACX,cAAc;QACd,YAAY;QACZ,gBAAgB;QAChB,OAAO;QACP,YAAY;QACZ,UAAU;QACV,aAAa;KACd,CAAC,EAAE;QACF,WAAW,EAAE,SAAS,EAAE,UAAU;QAClC,WAAW,EAAE,YAAY,EAAE,gBAAgB;QAC3C,OAAO,EAAE,YAAY;QACrB,UAAU;KACX,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,+BAA+B,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC1D,QAAQ,GACgC,CAC5C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAwC,EAAE;IACnF,MAAM,OAAO,GAAG,UAAU,CAAC,+BAA+B,CAAC,CAAC;IAC5D,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,oFAAoF,CAAC,CAAC;IACxG,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["import React, {\n  createContext, useContext, useMemo, useState, ReactNode, useCallback,\n} from 'react';\n\nimport { QuizAnswerRecord } from './data/types';\n\ninterface ProgressiveProfilingQuizContextType {\n  isModalOpen: boolean,\n  openModal: () => void,\n  closeModal: () => void,\n  currentStep: number,\n  setCurrentStep: (step: number) => void,\n  goToNextStep: () => void,\n  goToPreviousStep: () => void,\n  answers: Record<string, QuizAnswerRecord>,\n  recordAnswer: (answer: QuizAnswerRecord) => void,\n  isComplete: boolean,\n  setIsComplete: (isComplete: boolean) => void,\n}\n\nconst ProgressiveProfilingQuizContext = createContext<ProgressiveProfilingQuizContextType | null>(null);\n\ninterface ProgressiveProfilingQuizProviderProps {\n  children: ReactNode,\n}\n\nexport const ProgressiveProfilingQuizProvider: React.FC<ProgressiveProfilingQuizProviderProps> = ({ children }) => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [currentStep, setCurrentStep] = useState(0);\n  const [answers, setAnswers] = useState<Record<string, QuizAnswerRecord>>({});\n  const [isComplete, setIsComplete] = useState(false);\n\n  const openModal = useCallback(() => setIsModalOpen(true), []);\n  const closeModal = useCallback(() => setIsModalOpen(false), []);\n\n  const goToNextStep = useCallback(() => setCurrentStep(prev => prev + 1), []);\n  const goToPreviousStep = useCallback(() => setCurrentStep(prev => Math.max(0, prev - 1)), []);\n\n  const recordAnswer = useCallback((answer: QuizAnswerRecord) => {\n    setAnswers(prev => ({ ...prev, [answer.questionId]: answer }));\n  }, []);\n\n  const contextValue = useMemo(() => ({\n    isModalOpen,\n    openModal,\n    closeModal,\n    currentStep,\n    setCurrentStep,\n    goToNextStep,\n    goToPreviousStep,\n    answers,\n    recordAnswer,\n    isComplete,\n    setIsComplete,\n  }), [\n    isModalOpen, openModal, closeModal,\n    currentStep, goToNextStep, goToPreviousStep,\n    answers, recordAnswer,\n    isComplete,\n  ]);\n\n  return (\n    <ProgressiveProfilingQuizContext.Provider value={contextValue}>\n      {children}\n    </ProgressiveProfilingQuizContext.Provider>\n  );\n};\n\nexport const useProgressiveProfilingQuiz = (): ProgressiveProfilingQuizContextType => {\n  const context = useContext(ProgressiveProfilingQuizContext);\n  if (!context) {\n    throw new Error('useProgressiveProfilingQuiz must be used within a ProgressiveProfilingQuizProvider');\n  }\n  return context;\n};\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/data/schemaUtils.d.ts

@@ -0,0 +1,10 @@
+import { QuizAnswerRecord, QuizMessageDescriptor, QuizQuestionSchema } from './types';
+type FormatMessage = (descriptor: QuizMessageDescriptor) => string;
+/**
+ * Resolves a question schema and the user's selection into a self-describing record: the exact
+ * question and option text shown at answer time, not just the keys used to look them up. This is
+ * what should be persisted, so later copy edits to `messages.ts` can't retroactively change what
+ * a historical answer appears to have been a response to.
+ */
+export declare const buildAnswerRecord: (schema: QuizQuestionSchema, selectedValues: string[], formatMessage: FormatMessage) => QuizAnswerRecord;
+export {};

package/dist/widgets/ProgressiveProfilingQuiz/data/schemaUtils.js

@@ -0,0 +1,17 @@
+/**
+ * Resolves a question schema and the user's selection into a self-describing record: the exact
+ * question and option text shown at answer time, not just the keys used to look them up. This is
+ * what should be persisted, so later copy edits to `messages.ts` can't retroactively change what
+ * a historical answer appears to have been a response to.
+ */
+export const buildAnswerRecord = (schema, selectedValues, formatMessage) => ({
+    questionId: schema.questionId,
+    version: schema.version,
+    question: formatMessage(schema.question),
+    options: schema.options.map(option => ({
+        value: option.value,
+        label: formatMessage(option.message),
+    })),
+    selectedValues,
+});
+//# sourceMappingURL=schemaUtils.js.map

package/dist/widgets/ProgressiveProfilingQuiz/data/schemaUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schemaUtils.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/data/schemaUtils.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,MAA0B,EAC1B,cAAwB,EACxB,aAA4B,EACV,EAAE,CAAC,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC,UAAU;IAC7B,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,QAAQ,EAAE,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC;IACxC,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACrC,KAAK,EAAE,MAAM,CAAC,KAAK;QACnB,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC;KACrC,CAAC,CAAC;IACH,cAAc;CACf,CAAC,CAAC","sourcesContent":["import { QuizAnswerRecord, QuizMessageDescriptor, QuizQuestionSchema } from './types';\n\ntype FormatMessage = (descriptor: QuizMessageDescriptor) => string;\n\n/**\n * Resolves a question schema and the user's selection into a self-describing record: the exact\n * question and option text shown at answer time, not just the keys used to look them up. This is\n * what should be persisted, so later copy edits to `messages.ts` can't retroactively change what\n * a historical answer appears to have been a response to.\n */\nexport const buildAnswerRecord = (\n  schema: QuizQuestionSchema,\n  selectedValues: string[],\n  formatMessage: FormatMessage,\n): QuizAnswerRecord => ({\n  questionId: schema.questionId,\n  version: schema.version,\n  question: formatMessage(schema.question),\n  options: schema.options.map(option => ({\n    value: option.value,\n    label: formatMessage(option.message),\n  })),\n  selectedValues,\n});\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/data/types.d.ts

@@ -3,3 +3,43 @@ export interface SkillWithCount {
     value: string;
     count: number;
 }
+/** Structurally compatible with react-intl's MessageDescriptor, without depending on the package directly. */
+export interface QuizMessageDescriptor {
+    id: string;
+    defaultMessage: string;
+    description?: string;
+}
+/** A selectable option for a quiz question, as defined in source (unresolved) form. */
+export interface QuizAnswerOption {
+    value: string;
+    message: QuizMessageDescriptor;
+}
+/**
+ * The definition of a quiz question: its identity, the question text, and every option offered.
+ * This is the single source of truth used both to render a step's UI and to record what was
+ * actually shown to the user when they answered it.
+ */
+export interface QuizQuestionSchema {
+    questionId: string;
+    /** Bump whenever the question or its options change meaningfully, so recorded answers can be grouped by what was actually asked. */
+    version: string;
+    question: QuizMessageDescriptor;
+    options: QuizAnswerOption[];
+}
+/** A resolved (formatted) option, as actually presented to the user. */
+export interface QuizAnswerOptionRecord {
+    value: string;
+    label: string;
+}
+/**
+ * A snapshot of a question, its options, and the user's selection(s), as it existed at answer
+ * time. Always an array so single-select (radio) and multi-select (checkbox) questions share one
+ * shape — a single-select answer is simply a one-element array.
+ */
+export interface QuizAnswerRecord {
+    questionId: string;
+    version: string;
+    question: string;
+    options: QuizAnswerOptionRecord[];
+    selectedValues: string[];
+}

package/dist/widgets/ProgressiveProfilingQuiz/data/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/data/types.ts"],"names":[],"mappings":"","sourcesContent":["/** A single Algolia facet value with its matching record count, e.g. from fetchSkills. */\nexport interface SkillWithCount {\n  value: string,\n  count: number,\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/data/types.ts"],"names":[],"mappings":"","sourcesContent":["/** A single Algolia facet value with its matching record count, e.g. from fetchSkills. */\nexport interface SkillWithCount {\n  value: string,\n  count: number,\n}\n\n/** Structurally compatible with react-intl's MessageDescriptor, without depending on the package directly. */\nexport interface QuizMessageDescriptor {\n  id: string,\n  defaultMessage: string,\n  description?: string,\n}\n\n/** A selectable option for a quiz question, as defined in source (unresolved) form. */\nexport interface QuizAnswerOption {\n  value: string,\n  message: QuizMessageDescriptor,\n}\n\n/**\n * The definition of a quiz question: its identity, the question text, and every option offered.\n * This is the single source of truth used both to render a step's UI and to record what was\n * actually shown to the user when they answered it.\n */\nexport interface QuizQuestionSchema {\n  questionId: string,\n  /** Bump whenever the question or its options change meaningfully, so recorded answers can be grouped by what was actually asked. */\n  version: string,\n  question: QuizMessageDescriptor,\n  options: QuizAnswerOption[],\n}\n\n/** A resolved (formatted) option, as actually presented to the user. */\nexport interface QuizAnswerOptionRecord {\n  value: string,\n  label: string,\n}\n\n/**\n * A snapshot of a question, its options, and the user's selection(s), as it existed at answer\n * time. Always an array so single-select (radio) and multi-select (checkbox) questions share one\n * shape — a single-select answer is simply a one-element array.\n */\nexport interface QuizAnswerRecord {\n  questionId: string,\n  version: string,\n  question: string,\n  options: QuizAnswerOptionRecord[],\n  selectedValues: string[],\n}\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/modal/index.js

@@ -1,13 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import { ModalDialog } from '@openedx/paragon';
 import { useIntl } from '@openedx/frontend-base';
+import { useSearchParams } from 'react-router-dom';
 import { useProgressiveProfilingQuiz } from '../ProgressiveProfilingQuizProvider';
 import ProgressiveProfilingQuizStepper from './stepper';
 import messages from './messages';
 import './index.scss';
 const ProgressiveProfilingQuizModal = () => {
-    const { isModalOpen, closeModal } = useProgressiveProfilingQuiz();
+    const { isModalOpen, openModal, closeModal } = useProgressiveProfilingQuiz();
     const { formatMessage } = useIntl();
+    const [searchParams] = useSearchParams();
+    useEffect(() => {
+        if (searchParams.get('progressive_profiling') === 'active') {
+            openModal();
+        }
+    }, [searchParams, openModal]);
     return (_jsx(ModalDialog, { title: formatMessage(messages.modalTitle), isOpen: isModalOpen, onClose: closeModal, hasCloseButton: true, isFullscreenOnMobile: true, isOverflowVisible: false, className: "progressive-profiling-modal p-5 bg-light-400", children: _jsx(ModalDialog.Body, { children: _jsx(ProgressiveProfilingQuizStepper, {}) }) }));
 };
 export default ProgressiveProfilingQuizModal;

package/dist/widgets/ProgressiveProfilingQuiz/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/modal/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;AAClF,OAAO,+BAA+B,MAAM,WAAW,CAAC;AACxD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,cAAc,CAAC;AAEtB,MAAM,6BAA6B,GAAa,GAAG,EAAE;IACnD,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,2BAA2B,EAAE,CAAC;IAClE,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,OAAO,CACL,KAAC,WAAW,IACV,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,EACzC,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,UAAU,EACnB,cAAc,QACd,oBAAoB,QACpB,iBAAiB,EAAE,KAAK,EACxB,SAAS,EAAC,8CAA8C,YAExD,KAAC,WAAW,CAAC,IAAI,cACf,KAAC,+BAA+B,KAAG,GAClB,GACP,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,6BAA6B,CAAC","sourcesContent":["import React from 'react';\nimport { ModalDialog } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { useProgressiveProfilingQuiz } from '../ProgressiveProfilingQuizProvider';\nimport ProgressiveProfilingQuizStepper from './stepper';\nimport messages from './messages';\n\nimport './index.scss';\n\nconst ProgressiveProfilingQuizModal: React.FC = () => {\n  const { isModalOpen, closeModal } = useProgressiveProfilingQuiz();\n  const { formatMessage } = useIntl();\n\n  return (\n    <ModalDialog\n      title={formatMessage(messages.modalTitle)}\n      isOpen={isModalOpen}\n      onClose={closeModal}\n      hasCloseButton\n      isFullscreenOnMobile\n      isOverflowVisible={false}\n      className=\"progressive-profiling-modal p-5 bg-light-400\"\n    >\n      <ModalDialog.Body>\n        <ProgressiveProfilingQuizStepper />\n      </ModalDialog.Body>\n    </ModalDialog>\n  );\n};\n\nexport default ProgressiveProfilingQuizModal;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/modal/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;AAClF,OAAO,+BAA+B,MAAM,WAAW,CAAC;AACxD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,cAAc,CAAC;AAEtB,MAAM,6BAA6B,GAAa,GAAG,EAAE;IACnD,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,2BAA2B,EAAE,CAAC;IAC7E,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,CAAC,YAAY,CAAC,GAAG,eAAe,EAAE,CAAC;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,GAAG,CAAC,uBAAuB,CAAC,KAAK,QAAQ,EAAE,CAAC;YAC3D,SAAS,EAAE,CAAC;QACd,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9B,OAAO,CACL,KAAC,WAAW,IACV,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,EACzC,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,UAAU,EACnB,cAAc,QACd,oBAAoB,QACpB,iBAAiB,EAAE,KAAK,EACxB,SAAS,EAAC,8CAA8C,YAExD,KAAC,WAAW,CAAC,IAAI,cACf,KAAC,+BAA+B,KAAG,GAClB,GACP,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,6BAA6B,CAAC","sourcesContent":["import React, { useEffect } from 'react';\nimport { ModalDialog } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport { useSearchParams } from 'react-router-dom';\n\nimport { useProgressiveProfilingQuiz } from '../ProgressiveProfilingQuizProvider';\nimport ProgressiveProfilingQuizStepper from './stepper';\nimport messages from './messages';\n\nimport './index.scss';\n\nconst ProgressiveProfilingQuizModal: React.FC = () => {\n  const { isModalOpen, openModal, closeModal } = useProgressiveProfilingQuiz();\n  const { formatMessage } = useIntl();\n  const [searchParams] = useSearchParams();\n\n  useEffect(() => {\n    if (searchParams.get('progressive_profiling') === 'active') {\n      openModal();\n    }\n  }, [searchParams, openModal]);\n\n  return (\n    <ModalDialog\n      title={formatMessage(messages.modalTitle)}\n      isOpen={isModalOpen}\n      onClose={closeModal}\n      hasCloseButton\n      isFullscreenOnMobile\n      isOverflowVisible={false}\n      className=\"progressive-profiling-modal p-5 bg-light-400\"\n    >\n      <ModalDialog.Body>\n        <ProgressiveProfilingQuizStepper />\n      </ModalDialog.Body>\n    </ModalDialog>\n  );\n};\n\nexport default ProgressiveProfilingQuizModal;\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/modal/index.scss

@@ -1,3 +1,5 @@
 .progressive-profiling-modal {
   max-width: 900px;
+  max-height: fit-content;
+  border-radius: 0.75rem;
 }

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/BaseStep.js

@@ -18,7 +18,7 @@ const TOTAL_STEPS = Object.keys(PROGRESSIVE_PROFILING_QUIZ_STEPS).length;
 const BaseStep = (_a) => {
     var { children, optionalHeaderText } = _a, props = __rest(_a, ["children", "optionalHeaderText"]);
     const { formatMessage } = useIntl();
-    return (_jsxs(Stepper.Step, Object.assign({}, props, { children: [_jsxs("h3", { className: "h6", children: [_jsxs("span", { children: [optionalHeaderText, "\u00A0"] }), formatMessage(messages.stepCount, { step: props.index + 1, total: TOTAL_STEPS })] }), _jsx("div", { className: "bg-light-100 rounded p-4.5 mb-4", children: children })] })));
+    return (_jsxs(Stepper.Step, Object.assign({}, props, { children: [_jsxs("h3", { className: "h6 mb-3.5", children: [_jsxs("span", { children: [optionalHeaderText, "\u00A0"] }), formatMessage(messages.stepCount, { step: props.index + 1, total: TOTAL_STEPS })] }), _jsx("div", { className: "bg-white rounded p-4.5 mb-4", children: children })] })));
 };
 export default BaseStep;
 //# sourceMappingURL=BaseStep.js.map

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/BaseStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseStep.js","sourceRoot":"","sources":["../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/BaseStep.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAC;AACxG,OAAO,QAAQ,MAAM,YAAY,CAAC;AAUlC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC,MAAM,CAAC;AACzE,MAAM,QAAQ,GAA4B,CAAC,EAI1C,EAAE,EAAE;QAJsC,EACzC,QAAQ,EACR,kBAAkB,OAEnB,EADI,KAAK,cAHiC,kCAI1C,CADS;IAER,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,OAAO,CACL,MAAC,OAAO,CAAC,IAAI,oBAAK,KAAK,eACrB,cAAI,SAAS,EAAC,IAAI,aAChB,2BAAO,kBAAkB,cAAc,EACtC,aAAa,CAAC,QAAQ,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,IAC9E,EACL,cAAK,SAAS,EAAC,iCAAiC,YAC7C,QAAQ,GACL,KACO,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { Stepper } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport React, { ReactNode } from 'react';\n\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport messages from './messages';\n\ninterface BaseStepProps {\n  children: ReactNode,\n  eventKey: string,\n  title: string,\n  index: number,\n  optionalHeaderText?: string,\n}\n\nconst TOTAL_STEPS = Object.keys(PROGRESSIVE_PROFILING_QUIZ_STEPS).length;\nconst BaseStep: React.FC<BaseStepProps> = ({\n  children,\n  optionalHeaderText,\n  ...props\n}) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Stepper.Step {...props}>\n      <h3 className=\"h6\">\n        <span>{optionalHeaderText}&nbsp;</span>\n        {formatMessage(messages.stepCount, { step: props.index + 1, total: TOTAL_STEPS })}\n      </h3>\n      <div className=\"bg-light-100 rounded p-4.5 mb-4\">\n        {children}\n      </div>\n    </Stepper.Step>\n  );\n};\n\nexport default BaseStep;\n"]}
+{"version":3,"file":"BaseStep.js","sourceRoot":"","sources":["../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/BaseStep.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAC;AACxG,OAAO,QAAQ,MAAM,YAAY,CAAC;AAUlC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC,MAAM,CAAC;AACzE,MAAM,QAAQ,GAA4B,CAAC,EAI1C,EAAE,EAAE;QAJsC,EACzC,QAAQ,EACR,kBAAkB,OAEnB,EADI,KAAK,cAHiC,kCAI1C,CADS;IAER,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,OAAO,CACL,MAAC,OAAO,CAAC,IAAI,oBAAK,KAAK,eACrB,cAAI,SAAS,EAAC,WAAW,aACvB,2BAAO,kBAAkB,cAAc,EACtC,aAAa,CAAC,QAAQ,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,IAC9E,EACL,cAAK,SAAS,EAAC,6BAA6B,YACzC,QAAQ,GACL,KACO,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { Stepper } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport React, { ReactNode } from 'react';\n\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport messages from './messages';\n\ninterface BaseStepProps {\n  children: ReactNode,\n  eventKey: string,\n  title: string,\n  index: number,\n  optionalHeaderText?: string,\n}\n\nconst TOTAL_STEPS = Object.keys(PROGRESSIVE_PROFILING_QUIZ_STEPS).length;\nconst BaseStep: React.FC<BaseStepProps> = ({\n  children,\n  optionalHeaderText,\n  ...props\n}) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Stepper.Step {...props}>\n      <h3 className=\"h6 mb-3.5\">\n        <span>{optionalHeaderText}&nbsp;</span>\n        {formatMessage(messages.stepCount, { step: props.index + 1, total: TOTAL_STEPS })}\n      </h3>\n      <div className=\"bg-white rounded p-4.5 mb-4\">\n        {children}\n      </div>\n    </Stepper.Step>\n  );\n};\n\nexport default BaseStep;\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/messages.js

@@ -2,7 +2,7 @@ import { defineMessages } from '@openedx/frontend-base';
 const messages = defineMessages({
     stepCount: {
         id: 'progressiveProfilingQuiz.stepper.baseStep.stepCount',
-        defaultMessage: 'Step {step} of {total}',
+        defaultMessage: 'Step {step} of {total}.',
         description: 'Indicates the current step number out of the total number of steps in the progressive profiling quiz',
     },
     backButton: {

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,SAAS,EAAE;QACT,EAAE,EAAE,qDAAqD;QACzD,cAAc,EAAE,wBAAwB;QACxC,WAAW,EAAE,sGAAsG;KACpH;IACD,UAAU,EAAE;QACV,EAAE,EAAE,6CAA6C;QACjD,cAAc,EAAE,MAAM;QACtB,WAAW,EAAE,wFAAwF;KACtG;IACD,UAAU,EAAE;QACV,EAAE,EAAE,6CAA6C;QACjD,cAAc,EAAE,MAAM;QACtB,WAAW,EAAE,qFAAqF;KACnG;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  stepCount: {\n    id: 'progressiveProfilingQuiz.stepper.baseStep.stepCount',\n    defaultMessage: 'Step {step} of {total}',\n    description: 'Indicates the current step number out of the total number of steps in the progressive profiling quiz',\n  },\n  backButton: {\n    id: 'progressiveProfilingQuiz.stepper.backButton',\n    defaultMessage: 'Back',\n    description: 'Label for the button to go back to the previous step of the progressive profiling quiz',\n  },\n  nextButton: {\n    id: 'progressiveProfilingQuiz.stepper.nextButton',\n    defaultMessage: 'Next',\n    description: 'Label for the button to continue to the next step of the progressive profiling quiz',\n  },\n});\n\nexport default messages;\n"]}
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,SAAS,EAAE;QACT,EAAE,EAAE,qDAAqD;QACzD,cAAc,EAAE,yBAAyB;QACzC,WAAW,EAAE,sGAAsG;KACpH;IACD,UAAU,EAAE;QACV,EAAE,EAAE,6CAA6C;QACjD,cAAc,EAAE,MAAM;QACtB,WAAW,EAAE,wFAAwF;KACtG;IACD,UAAU,EAAE;QACV,EAAE,EAAE,6CAA6C;QACjD,cAAc,EAAE,MAAM;QACtB,WAAW,EAAE,qFAAqF;KACnG;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  stepCount: {\n    id: 'progressiveProfilingQuiz.stepper.baseStep.stepCount',\n    defaultMessage: 'Step {step} of {total}.',\n    description: 'Indicates the current step number out of the total number of steps in the progressive profiling quiz',\n  },\n  backButton: {\n    id: 'progressiveProfilingQuiz.stepper.backButton',\n    defaultMessage: 'Back',\n    description: 'Label for the button to go back to the previous step of the progressive profiling quiz',\n  },\n  nextButton: {\n    id: 'progressiveProfilingQuiz.stepper.nextButton',\n    defaultMessage: 'Next',\n    description: 'Label for the button to continue to the next step of the progressive profiling quiz',\n  },\n});\n\nexport default messages;\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/index.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
+import './index.scss';
 declare const LearningGoalStep: React.FC;
 export default LearningGoalStep;

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/index.js

@@ -1,14 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Stepper, Button } from '@openedx/paragon';
+import { Stepper, Button, Form, } from '@openedx/paragon';
 import { useIntl } from '@openedx/frontend-base';
 import BaseStep from '../BaseStep';
 import { useProgressiveProfilingQuiz } from '../../../../../../widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';
 import { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/constants';
+import { buildAnswerRecord } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/schemaUtils';
 import messages from './messages';
+import schema from './schema';
+import './index.scss';
 const LearningGoalStep = () => {
-    const { goToNextStep } = useProgressiveProfilingQuiz();
+    var _a, _b;
+    const { goToNextStep, answers, recordAnswer } = useProgressiveProfilingQuiz();
     const { formatMessage } = useIntl();
-    return (_jsxs(_Fragment, { children: [_jsx(BaseStep, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL, title: formatMessage(messages.title), index: 0, optionalHeaderText: formatMessage(messages.headerText), children: _jsx("h4", { children: formatMessage(messages.question) }) }), _jsxs(Stepper.ActionRow, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL, children: [_jsx(Stepper.ActionRow.Spacer, {}), _jsx(Button, { variant: "outline-primary", onClick: goToNextStep, children: formatMessage(messages.continueButton) })] })] }));
+    const selectedValue = (_b = (_a = answers[schema.questionId]) === null || _a === void 0 ? void 0 : _a.selectedValues[0]) !== null && _b !== void 0 ? _b : '';
+    const handleChange = (event) => {
+        recordAnswer(buildAnswerRecord(schema, [event.target.value], formatMessage));
+    };
+    const handleOptionClick = (event) => {
+        var _a;
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+        (_a = event.currentTarget.querySelector('input[type="radio"]')) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(BaseStep, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL, title: formatMessage(messages.title), index: 0, optionalHeaderText: formatMessage(messages.headerText), children: _jsxs(Form.Group, { className: "mb-0", children: [_jsx(Form.Label, { className: "h4", children: formatMessage(messages.question) }), _jsx("p", { children: formatMessage(messages.hint) }), _jsx(Form.RadioSet, { name: schema.questionId, value: selectedValue, onChange: handleChange, className: "gap-4", children: schema.options.map(option => (_jsx("div", { className: "learning-goal-radio d-flex bg-light-100 px-3 py-3.5 mt-0", onClick: handleOptionClick, children: _jsx(Form.Radio, { value: option.value, children: formatMessage(option.message) }) }, option.value))) })] }) }), _jsxs(Stepper.ActionRow, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL, children: [_jsx(Stepper.ActionRow.Spacer, {}), _jsx(Button, { variant: "outline-primary", onClick: goToNextStep, disabled: !selectedValue, children: formatMessage(messages.continueButton) })] })] }));
 };
 export default LearningGoalStep;
 //# sourceMappingURL=index.js.map

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,2BAA2B,EAAE,MAAM,wEAAwE,CAAC;AACrH,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAC;AACxG,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,gBAAgB,GAAa,GAAG,EAAE;IACtC,MAAM,EAAE,YAAY,EAAE,GAAG,2BAA2B,EAAE,CAAC;IACvD,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,OAAO,CACL,8BACE,KAAC,QAAQ,IACP,QAAQ,EAAE,gCAAgC,CAAC,aAAa,EACxD,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpC,KAAK,EAAE,CAAC,EACR,kBAAkB,EAAE,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,YAEtD,uBACG,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAC9B,GACI,EACX,MAAC,OAAO,CAAC,SAAS,IAAC,QAAQ,EAAE,gCAAgC,CAAC,aAAa,aACzE,KAAC,OAAO,CAAC,SAAS,CAAC,MAAM,KAAG,EAC5B,KAAC,MAAM,IAAC,OAAO,EAAC,iBAAiB,EAAC,OAAO,EAAE,YAAY,YACpD,aAAa,CAAC,QAAQ,CAAC,cAAc,CAAC,GAChC,IACS,IACnB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import React from 'react';\nimport { Stepper, Button } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport BaseStep from '../BaseStep';\nimport { useProgressiveProfilingQuiz } from '@src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport messages from './messages';\n\nconst LearningGoalStep: React.FC = () => {\n  const { goToNextStep } = useProgressiveProfilingQuiz();\n  const { formatMessage } = useIntl();\n\n  return (\n    <>\n      <BaseStep\n        eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL}\n        title={formatMessage(messages.title)}\n        index={0}\n        optionalHeaderText={formatMessage(messages.headerText)}\n      >\n        <h4>\n          {formatMessage(messages.question)}\n        </h4>\n      </BaseStep>\n      <Stepper.ActionRow eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL}>\n        <Stepper.ActionRow.Spacer />\n        <Button variant=\"outline-primary\" onClick={goToNextStep}>\n          {formatMessage(messages.continueButton)}\n        </Button>\n      </Stepper.ActionRow>\n    </>\n  );\n};\n\nexport default LearningGoalStep;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/index.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,OAAO,EAAE,MAAM,EAAE,IAAI,GACtB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,2BAA2B,EAAE,MAAM,wEAAwE,CAAC;AACrH,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAC;AACxG,OAAO,EAAE,iBAAiB,EAAE,MAAM,wDAAwD,CAAC;AAC3F,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,cAAc,CAAC;AAEtB,MAAM,gBAAgB,GAAa,GAAG,EAAE;;IACtC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,2BAA2B,EAAE,CAAC;IAC9E,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,aAAa,GAAG,MAAA,MAAA,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,0CAAE,cAAc,CAAC,CAAC,CAAC,mCAAI,EAAE,CAAC;IAE1E,MAAM,YAAY,GAAG,CAAC,KAA0C,EAAE,EAAE;QAClE,YAAY,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC;IAC/E,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAAuC,EAAE,EAAE;;QACpE,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,EAAE,CAAC;YACzC,OAAO;QACT,CAAC;QACD,MAAA,KAAK,CAAC,aAAa,CAAC,aAAa,CAAmB,qBAAqB,CAAC,0CAAE,KAAK,EAAE,CAAC;IACtF,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,QAAQ,IACP,QAAQ,EAAE,gCAAgC,CAAC,aAAa,EACxD,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpC,KAAK,EAAE,CAAC,EACR,kBAAkB,EAAE,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,YAEtD,MAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,MAAM,aAC1B,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,IAAI,YACvB,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,GACtB,EACb,sBAAI,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAK,EACrC,KAAC,IAAI,CAAC,QAAQ,IACZ,IAAI,EAAE,MAAM,CAAC,UAAU,EACvB,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAC,OAAO,YAEhB,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC5B,cAEE,SAAS,EAAC,0DAA0D,EACpE,OAAO,EAAE,iBAAiB,YAE1B,KAAC,IAAI,CAAC,KAAK,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,YAC5B,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,GACnB,IANR,MAAM,CAAC,KAAK,CAOb,CACP,CAAC,GACY,IACL,GACJ,EACX,MAAC,OAAO,CAAC,SAAS,IAAC,QAAQ,EAAE,gCAAgC,CAAC,aAAa,aACzE,KAAC,OAAO,CAAC,SAAS,CAAC,MAAM,KAAG,EAC5B,KAAC,MAAM,IAAC,OAAO,EAAC,iBAAiB,EAAC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,aAAa,YAC9E,aAAa,CAAC,QAAQ,CAAC,cAAc,CAAC,GAChC,IACS,IACnB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import React from 'react';\nimport {\n  Stepper, Button, Form,\n} from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport BaseStep from '../BaseStep';\nimport { useProgressiveProfilingQuiz } from '@src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport { buildAnswerRecord } from '@src/widgets/ProgressiveProfilingQuiz/data/schemaUtils';\nimport messages from './messages';\nimport schema from './schema';\n\nimport './index.scss';\n\nconst LearningGoalStep: React.FC = () => {\n  const { goToNextStep, answers, recordAnswer } = useProgressiveProfilingQuiz();\n  const { formatMessage } = useIntl();\n\n  const selectedValue = answers[schema.questionId]?.selectedValues[0] ?? '';\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    recordAnswer(buildAnswerRecord(schema, [event.target.value], formatMessage));\n  };\n\n  const handleOptionClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget) {\n      return;\n    }\n    event.currentTarget.querySelector<HTMLInputElement>('input[type=\"radio\"]')?.click();\n  };\n\n  return (\n    <>\n      <BaseStep\n        eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL}\n        title={formatMessage(messages.title)}\n        index={0}\n        optionalHeaderText={formatMessage(messages.headerText)}\n      >\n        <Form.Group className=\"mb-0\">\n          <Form.Label className=\"h4\">\n            {formatMessage(messages.question)}\n          </Form.Label>\n          <p>{formatMessage(messages.hint)}</p>\n          <Form.RadioSet\n            name={schema.questionId}\n            value={selectedValue}\n            onChange={handleChange}\n            className=\"gap-4\"\n          >\n            {schema.options.map(option => (\n              <div\n                key={option.value}\n                className=\"learning-goal-radio d-flex bg-light-100 px-3 py-3.5 mt-0\"\n                onClick={handleOptionClick}\n              >\n                <Form.Radio value={option.value}>\n                  {formatMessage(option.message)}\n                </Form.Radio>\n              </div>\n            ))}\n          </Form.RadioSet>\n        </Form.Group>\n      </BaseStep>\n      <Stepper.ActionRow eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL}>\n        <Stepper.ActionRow.Spacer />\n        <Button variant=\"outline-primary\" onClick={goToNextStep} disabled={!selectedValue}>\n          {formatMessage(messages.continueButton)}\n        </Button>\n      </Stepper.ActionRow>\n    </>\n  );\n};\n\nexport default LearningGoalStep;\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/index.scss

@@ -0,0 +1,4 @@
+.learning-goal-radio {
+  border: 1.2px solid var(--pgn-color-light-300);
+  border-radius: 0.25rem;
+}

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/messages.d.ts

@@ -14,6 +14,36 @@ declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    hint: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    optionStartCareer: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    optionAdvanceCareer: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    optionChangeCareer: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    optionFunOrPersonalInterest: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    optionEarnDegreeOrCredit: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     continueButton: {
         id: string;
         defaultMessage: string;

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/messages.js

@@ -15,6 +15,36 @@ const messages = defineMessages({
         defaultMessage: 'What’s your learning goal?',
         description: 'Question asked in the learning goal step of the progressive profiling quiz',
     },
+    hint: {
+        id: 'progressiveProfilingQuiz.stepper.learningGoal.hint',
+        defaultMessage: 'Select one',
+        description: 'Hint text shown above the learning goal question',
+    },
+    optionStartCareer: {
+        id: 'progressiveProfilingQuiz.stepper.learningGoal.optionStartCareer',
+        defaultMessage: 'Start my career',
+        description: 'Learning goal option: start new career',
+    },
+    optionAdvanceCareer: {
+        id: 'progressiveProfilingQuiz.stepper.learningGoal.optionAdvanceCareer',
+        defaultMessage: 'Advance my career',
+        description: 'Learning goal option: advancing in a current career',
+    },
+    optionChangeCareer: {
+        id: 'progressiveProfilingQuiz.stepper.learningGoal.optionChangeCareer',
+        defaultMessage: 'Change my career',
+        description: 'Learning goal option: changing careers',
+    },
+    optionFunOrPersonalInterest: {
+        id: 'progressiveProfilingQuiz.stepper.learningGoal.optionFunOrPersonalInterest',
+        defaultMessage: 'Learn for fun or personal interest',
+        description: 'Learning goal option: fun or personal interest',
+    },
+    optionEarnDegreeOrCredit: {
+        id: 'progressiveProfilingQuiz.stepper.learningGoal.optionEarnCertificate',
+        defaultMessage: 'Prepare for a degree or earn college credits',
+        description: 'Learning goal option: earning a degree or college credits',
+    },
     continueButton: {
         id: 'progressiveProfilingQuiz.stepper.learningGoal.continueButton',
         defaultMessage: 'Continue',

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,KAAK,EAAE;QACL,EAAE,EAAE,qDAAqD;QACzD,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,oEAAoE;KAClF;IACD,UAAU,EAAE;QACV,EAAE,EAAE,0DAA0D;QAC9D,cAAc,EAAE,+DAA+D;QAC/E,WAAW,EAAE,oDAAoD;KAClE;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,wDAAwD;QAC5D,cAAc,EAAE,4BAA4B;QAC5C,WAAW,EAAE,4EAA4E;KAC1F;IACD,cAAc,EAAE;QACd,EAAE,EAAE,8DAA8D;QAClE,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,+EAA+E;KAC7F;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  title: {\n    id: 'progressiveProfilingQuiz.stepper.learningGoal.title',\n    defaultMessage: 'Learning Goal',\n    description: 'Title for the learning goal step of the progressive profiling quiz',\n  },\n  headerText: {\n    id: 'progressiveProfilingQuiz.stepper.learningGoal.headerText',\n    defaultMessage: 'Tell us more about you so we can make course recommendations.',\n    description: 'Header text shown above the learning goal question',\n  },\n  question: {\n    id: 'progressiveProfilingQuiz.stepper.learningGoal.question',\n    defaultMessage: 'What’s your learning goal?',\n    description: 'Question asked in the learning goal step of the progressive profiling quiz',\n  },\n  continueButton: {\n    id: 'progressiveProfilingQuiz.stepper.learningGoal.continueButton',\n    defaultMessage: 'Continue',\n    description: 'Label for the button to continue to the next step from the learning goal step',\n  },\n});\n\nexport default messages;\n"]}
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,KAAK,EAAE;QACL,EAAE,EAAE,qDAAqD;QACzD,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,oEAAoE;KAClF;IACD,UAAU,EAAE;QACV,EAAE,EAAE,0DAA0D;QAC9D,cAAc,EAAE,+DAA+D;QAC/E,WAAW,EAAE,oDAAoD;KAClE;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,wDAAwD;QAC5D,cAAc,EAAE,4BAA4B;QAC5C,WAAW,EAAE,4EAA4E;KAC1F;IACD,IAAI,EAAE;QACJ,EAAE,EAAE,oDAAoD;QACxD,cAAc,EAAE,YAAY;QAC5B,WAAW,EAAE,kDAAkD;KAChE;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,iEAAiE;QACrE,cAAc,EAAE,iBAAiB;QACjC,WAAW,EAAE,wCAAwC;KACtD;IACD,mBAAmB,EAAE;QACnB,EAAE,EAAE,mEAAmE;QACvE,cAAc,EAAE,mBAAmB;QACnC,WAAW,EAAE,qDAAqD;KACnE;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,kEAAkE;QACtE,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,wCAAwC;KACtD;IACD,2BAA2B,EAAE;QAC3B,EAAE,EAAE,2EAA2E;QAC/E,cAAc,EAAE,oCAAoC;QACpD,WAAW,EAAE,gDAAgD;KAC9D;IACD,wBAAwB,EAAE;QACxB,EAAE,EAAE,qEAAqE;QACzE,cAAc,EAAE,8CAA8C;QAC9D,WAAW,EAAE,2DAA2D;KACzE;IACD,cAAc,EAAE;QACd,EAAE,EAAE,8DAA8D;QAClE,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,+EAA+E;KAC7F;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  title: {\n    id: 'progressiveProfilingQuiz.stepper.learningGoal.title',\n    defaultMessage: 'Learning Goal',\n    description: 'Title for the learning goal step of the progressive profiling quiz',\n  },\n  headerText: {\n    id: 'progressiveProfilingQuiz.stepper.learningGoal.headerText',\n    defaultMessage: 'Tell us more about you so we can make course recommendations.',\n    description: 'Header text shown above the learning goal question',\n  },\n  question: {\n    id: 'progressiveProfilingQuiz.stepper.learningGoal.question',\n    defaultMessage: 'What’s your learning goal?',\n    description: 'Question asked in the learning goal step of the progressive profiling quiz',\n  },\n  hint: {\n    id: 'progressiveProfilingQuiz.stepper.learningGoal.hint',\n    defaultMessage: 'Select one',\n    description: 'Hint text shown above the learning goal question',\n  },\n  optionStartCareer: {\n    id: 'progressiveProfilingQuiz.stepper.learningGoal.optionStartCareer',\n    defaultMessage: 'Start my career',\n    description: 'Learning goal option: start new career',\n  },\n  optionAdvanceCareer: {\n    id: 'progressiveProfilingQuiz.stepper.learningGoal.optionAdvanceCareer',\n    defaultMessage: 'Advance my career',\n    description: 'Learning goal option: advancing in a current career',\n  },\n  optionChangeCareer: {\n    id: 'progressiveProfilingQuiz.stepper.learningGoal.optionChangeCareer',\n    defaultMessage: 'Change my career',\n    description: 'Learning goal option: changing careers',\n  },\n  optionFunOrPersonalInterest: {\n    id: 'progressiveProfilingQuiz.stepper.learningGoal.optionFunOrPersonalInterest',\n    defaultMessage: 'Learn for fun or personal interest',\n    description: 'Learning goal option: fun or personal interest',\n  },\n  optionEarnDegreeOrCredit: {\n    id: 'progressiveProfilingQuiz.stepper.learningGoal.optionEarnCertificate',\n    defaultMessage: 'Prepare for a degree or earn college credits',\n    description: 'Learning goal option: earning a degree or college credits',\n  },\n  continueButton: {\n    id: 'progressiveProfilingQuiz.stepper.learningGoal.continueButton',\n    defaultMessage: 'Continue',\n    description: 'Label for the button to continue to the next step from the learning goal step',\n  },\n});\n\nexport default messages;\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/schema.d.ts

@@ -0,0 +1,8 @@
+import { QuizQuestionSchema } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/types';
+/**
+ * IF YOU CHANGE THE SCHEMA, MAKE SURE TO UPDATE THE VERSION AS WELL
+ * For typos and small adjustments, use patch version.
+ * For any other changes, use minor versions unless it's been clearly indicated otherwise.
+*/
+declare const schema: QuizQuestionSchema;
+export default schema;

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/schema.js

@@ -0,0 +1,21 @@
+import { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/constants';
+import messages from './messages';
+/**
+ * IF YOU CHANGE THE SCHEMA, MAKE SURE TO UPDATE THE VERSION AS WELL
+ * For typos and small adjustments, use patch version.
+ * For any other changes, use minor versions unless it's been clearly indicated otherwise.
+*/
+const schema = {
+    questionId: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL,
+    version: '1.0.0',
+    question: messages.question,
+    options: [
+        { value: 'start-career', message: messages.optionStartCareer },
+        { value: 'advance-career', message: messages.optionAdvanceCareer },
+        { value: 'change-career', message: messages.optionChangeCareer },
+        { value: 'fun-or-personal-interest', message: messages.optionFunOrPersonalInterest },
+        { value: 'earn-degree-or-credit', message: messages.optionEarnDegreeOrCredit },
+    ],
+};
+export default schema;
+//# sourceMappingURL=schema.js.map

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/schema.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAC;AACxG,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;;;EAIE;AACF,MAAM,MAAM,GAAuB;IACjC,UAAU,EAAE,gCAAgC,CAAC,aAAa;IAC1D,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,QAAQ,CAAC,QAAQ;IAC3B,OAAO,EAAE;QACP,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,QAAQ,CAAC,iBAAiB,EAAE;QAC9D,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,QAAQ,CAAC,mBAAmB,EAAE;QAClE,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,QAAQ,CAAC,kBAAkB,EAAE;QAChE,EAAE,KAAK,EAAE,0BAA0B,EAAE,OAAO,EAAE,QAAQ,CAAC,2BAA2B,EAAE;QACpF,EAAE,KAAK,EAAE,uBAAuB,EAAE,OAAO,EAAE,QAAQ,CAAC,wBAAwB,EAAE;KAC/E;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { QuizQuestionSchema } from '@src/widgets/ProgressiveProfilingQuiz/data/types';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport messages from './messages';\n\n/**\n * IF YOU CHANGE THE SCHEMA, MAKE SURE TO UPDATE THE VERSION AS WELL\n * For typos and small adjustments, use patch version.\n * For any other changes, use minor versions unless it's been clearly indicated otherwise.\n*/\nconst schema: QuizQuestionSchema = {\n  questionId: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL,\n  version: '1.0.0',\n  question: messages.question,\n  options: [\n    { value: 'start-career', message: messages.optionStartCareer },\n    { value: 'advance-career', message: messages.optionAdvanceCareer },\n    { value: 'change-career', message: messages.optionChangeCareer },\n    { value: 'fun-or-personal-interest', message: messages.optionFunOrPersonalInterest },\n    { value: 'earn-degree-or-credit', message: messages.optionEarnDegreeOrCredit },\n  ],\n};\n\nexport default schema;\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/index.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
+import './index.scss';
 declare const LearningMotivationStep: React.FC;
 export default LearningMotivationStep;

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/index.js

@@ -1,15 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Stepper, Button } from '@openedx/paragon';
+import { Stepper, Button, Form } from '@openedx/paragon';
 import { useIntl } from '@openedx/frontend-base';
 import BaseStep from '../BaseStep';
 import { useProgressiveProfilingQuiz } from '../../../../../../widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';
 import { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/constants';
+import { buildAnswerRecord } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/schemaUtils';
 import stepMessages from '../messages';
 import messages from './messages';
+import schema from './schema';
+import './index.scss';
 const LearningMotivationStep = () => {
-    const { goToPreviousStep, goToNextStep } = useProgressiveProfilingQuiz();
+    var _a, _b;
+    const { goToPreviousStep, goToNextStep, answers, recordAnswer, } = useProgressiveProfilingQuiz();
     const { formatMessage } = useIntl();
-    return (_jsxs(_Fragment, { children: [_jsx(BaseStep, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION, title: formatMessage(messages.title), index: 1, children: _jsx("h4", { children: formatMessage(messages.question) }) }), _jsxs(Stepper.ActionRow, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION, children: [_jsx(Button, { variant: "outline-primary", onClick: goToPreviousStep, children: formatMessage(stepMessages.backButton) }), _jsx(Button, { onClick: goToNextStep, children: formatMessage(stepMessages.nextButton) })] })] }));
+    const selectedValues = (_b = (_a = answers[schema.questionId]) === null || _a === void 0 ? void 0 : _a.selectedValues) !== null && _b !== void 0 ? _b : [];
+    const handleChange = (event) => {
+        const { checked, value } = event.target;
+        const nextValues = checked
+            ? [...selectedValues, value]
+            : selectedValues.filter(selectedValue => selectedValue !== value);
+        recordAnswer(buildAnswerRecord(schema, nextValues, formatMessage));
+    };
+    const handleOptionClick = (event) => {
+        var _a;
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+        (_a = event.currentTarget.querySelector('input[type="checkbox"]')) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(BaseStep, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION, title: formatMessage(messages.title), index: 1, children: _jsxs(Form.Group, { className: "mb-0", children: [_jsx(Form.Label, { className: "h4", children: formatMessage(messages.question) }), _jsx("p", { children: formatMessage(messages.hint) }), _jsx(Form.CheckboxSet, { name: schema.questionId, value: selectedValues, onChange: handleChange, className: "gap-4", children: schema.options.map(option => (_jsx("div", { className: "learning-motivation-checkbox d-flex bg-light-100 px-3 py-3.5 mt-0", onClick: handleOptionClick, children: _jsx(Form.Checkbox, { value: option.value, children: formatMessage(option.message) }) }, option.value))) })] }) }), _jsxs(Stepper.ActionRow, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION, children: [_jsx(Button, { variant: "outline-primary", onClick: goToPreviousStep, children: formatMessage(stepMessages.backButton) }), _jsx(Button, { onClick: goToNextStep, disabled: selectedValues.length === 0, className: "ml-3", children: formatMessage(stepMessages.nextButton) })] })] }));
 };
 export default LearningMotivationStep;
 //# sourceMappingURL=index.js.map

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,2BAA2B,EAAE,MAAM,wEAAwE,CAAC;AACrH,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAC;AACxG,OAAO,YAAY,MAAM,aAAa,CAAC;AACvC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,sBAAsB,GAAa,GAAG,EAAE;IAC5C,MAAM,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,2BAA2B,EAAE,CAAC;IACzE,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,OAAO,CACL,8BACE,KAAC,QAAQ,IACP,QAAQ,EAAE,gCAAgC,CAAC,mBAAmB,EAC9D,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpC,KAAK,EAAE,CAAC,YAER,uBACG,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAC9B,GACI,EACX,MAAC,OAAO,CAAC,SAAS,IAAC,QAAQ,EAAE,gCAAgC,CAAC,mBAAmB,aAC/E,KAAC,MAAM,IAAC,OAAO,EAAC,iBAAiB,EAAC,OAAO,EAAE,gBAAgB,YACxD,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,GAChC,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,YAAY,YAC1B,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,GAChC,IACS,IACnB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import React from 'react';\nimport { Stepper, Button } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport BaseStep from '../BaseStep';\nimport { useProgressiveProfilingQuiz } from '@src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport stepMessages from '../messages';\nimport messages from './messages';\n\nconst LearningMotivationStep: React.FC = () => {\n  const { goToPreviousStep, goToNextStep } = useProgressiveProfilingQuiz();\n  const { formatMessage } = useIntl();\n\n  return (\n    <>\n      <BaseStep\n        eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION}\n        title={formatMessage(messages.title)}\n        index={1}\n      >\n        <h4>\n          {formatMessage(messages.question)}\n        </h4>\n      </BaseStep>\n      <Stepper.ActionRow eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION}>\n        <Button variant=\"outline-primary\" onClick={goToPreviousStep}>\n          {formatMessage(stepMessages.backButton)}\n        </Button>\n        <Button onClick={goToNextStep}>\n          {formatMessage(stepMessages.nextButton)}\n        </Button>\n      </Stepper.ActionRow>\n    </>\n  );\n};\n\nexport default LearningMotivationStep;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,2BAA2B,EAAE,MAAM,wEAAwE,CAAC;AACrH,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAC;AACxG,OAAO,EAAE,iBAAiB,EAAE,MAAM,wDAAwD,CAAC;AAC3F,OAAO,YAAY,MAAM,aAAa,CAAC;AACvC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,cAAc,CAAC;AAEtB,MAAM,sBAAsB,GAAa,GAAG,EAAE;;IAC5C,MAAM,EACJ,gBAAgB,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,GACtD,GAAG,2BAA2B,EAAE,CAAC;IAClC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,cAAc,GAAG,MAAA,MAAA,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,0CAAE,cAAc,mCAAI,EAAE,CAAC;IAExE,MAAM,YAAY,GAAG,CAAC,KAA0C,EAAE,EAAE;QAClE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QACxC,MAAM,UAAU,GAAG,OAAO;YACxB,CAAC,CAAC,CAAC,GAAG,cAAc,EAAE,KAAK,CAAC;YAC5B,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC;QACpE,YAAY,CAAC,iBAAiB,CAAC,MAAM,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IACrE,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAAuC,EAAE,EAAE;;QACpE,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,EAAE,CAAC;YACzC,OAAO;QACT,CAAC;QACD,MAAA,KAAK,CAAC,aAAa,CAAC,aAAa,CAAmB,wBAAwB,CAAC,0CAAE,KAAK,EAAE,CAAC;IACzF,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,QAAQ,IACP,QAAQ,EAAE,gCAAgC,CAAC,mBAAmB,EAC9D,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpC,KAAK,EAAE,CAAC,YAER,MAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,MAAM,aAC1B,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,IAAI,YACvB,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,GACtB,EACb,sBAAI,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAK,EACrC,KAAC,IAAI,CAAC,WAAW,IACf,IAAI,EAAE,MAAM,CAAC,UAAU,EACvB,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAC,OAAO,YAEhB,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC5B,cAEE,SAAS,EAAC,mEAAmE,EAC7E,OAAO,EAAE,iBAAiB,YAE1B,KAAC,IAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,YAC/B,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,GAChB,IANX,MAAM,CAAC,KAAK,CAOb,CACP,CAAC,GACe,IACR,GACJ,EACX,MAAC,OAAO,CAAC,SAAS,IAAC,QAAQ,EAAE,gCAAgC,CAAC,mBAAmB,aAC/E,KAAC,MAAM,IAAC,OAAO,EAAC,iBAAiB,EAAC,OAAO,EAAE,gBAAgB,YACxD,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,GAChC,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE,SAAS,EAAC,MAAM,YACnF,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,GAChC,IACS,IACnB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import React from 'react';\nimport { Stepper, Button, Form } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport BaseStep from '../BaseStep';\nimport { useProgressiveProfilingQuiz } from '@src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport { buildAnswerRecord } from '@src/widgets/ProgressiveProfilingQuiz/data/schemaUtils';\nimport stepMessages from '../messages';\nimport messages from './messages';\nimport schema from './schema';\n\nimport './index.scss';\n\nconst LearningMotivationStep: React.FC = () => {\n  const {\n    goToPreviousStep, goToNextStep, answers, recordAnswer,\n  } = useProgressiveProfilingQuiz();\n  const { formatMessage } = useIntl();\n\n  const selectedValues = answers[schema.questionId]?.selectedValues ?? [];\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { checked, value } = event.target;\n    const nextValues = checked\n      ? [...selectedValues, value]\n      : selectedValues.filter(selectedValue => selectedValue !== value);\n    recordAnswer(buildAnswerRecord(schema, nextValues, formatMessage));\n  };\n\n  const handleOptionClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget) {\n      return;\n    }\n    event.currentTarget.querySelector<HTMLInputElement>('input[type=\"checkbox\"]')?.click();\n  };\n\n  return (\n    <>\n      <BaseStep\n        eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION}\n        title={formatMessage(messages.title)}\n        index={1}\n      >\n        <Form.Group className=\"mb-0\">\n          <Form.Label className=\"h4\">\n            {formatMessage(messages.question)}\n          </Form.Label>\n          <p>{formatMessage(messages.hint)}</p>\n          <Form.CheckboxSet\n            name={schema.questionId}\n            value={selectedValues}\n            onChange={handleChange}\n            className=\"gap-4\"\n          >\n            {schema.options.map(option => (\n              <div\n                key={option.value}\n                className=\"learning-motivation-checkbox d-flex bg-light-100 px-3 py-3.5 mt-0\"\n                onClick={handleOptionClick}\n              >\n                <Form.Checkbox value={option.value}>\n                  {formatMessage(option.message)}\n                </Form.Checkbox>\n              </div>\n            ))}\n          </Form.CheckboxSet>\n        </Form.Group>\n      </BaseStep>\n      <Stepper.ActionRow eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION}>\n        <Button variant=\"outline-primary\" onClick={goToPreviousStep}>\n          {formatMessage(stepMessages.backButton)}\n        </Button>\n        <Button onClick={goToNextStep} disabled={selectedValues.length === 0} className=\"ml-3\">\n          {formatMessage(stepMessages.nextButton)}\n        </Button>\n      </Stepper.ActionRow>\n    </>\n  );\n};\n\nexport default LearningMotivationStep;\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/index.scss

@@ -0,0 +1,4 @@
+.learning-motivation-checkbox {
+  border: 1.2px solid var(--pgn-color-light-300);
+  border-radius: 0.25rem;
+}

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/messages.d.ts

@@ -9,5 +9,35 @@ declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    hint: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    optionHardSkills: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    optionSoftSkills: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    optionEmergingTechnologies: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    optionPersonalEnrichment: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    optionFormalCredentials: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default messages;

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/messages.js

@@ -10,6 +10,36 @@ const messages = defineMessages({
         defaultMessage: 'What do you want to gain from your learning experience?',
         description: 'Question asked in the learning motivation step of the progressive profiling quiz',
     },
+    hint: {
+        id: 'progressiveProfilingQuiz.stepper.learningMotivation.hint',
+        defaultMessage: 'Select one or more',
+        description: 'Hint text shown above the learning motivation question',
+    },
+    optionHardSkills: {
+        id: 'progressiveProfilingQuiz.stepper.learningMotivation.optionHardSkills',
+        defaultMessage: 'Hard skills (i.e., coding, programming, statistics)',
+        description: 'Learning motivation option: hard skills',
+    },
+    optionSoftSkills: {
+        id: 'progressiveProfilingQuiz.stepper.learningMotivation.optionSoftSkills',
+        defaultMessage: 'Soft skills (i.e, leadership, management, and strategic thinking)',
+        description: 'Learning motivation option: soft skills',
+    },
+    optionEmergingTechnologies: {
+        id: 'progressiveProfilingQuiz.stepper.learningMotivation.optionEmergingTechnologies',
+        defaultMessage: 'Stay up to date on emerging technologies',
+        description: 'Learning motivation option: staying current on emerging technologies',
+    },
+    optionPersonalEnrichment: {
+        id: 'progressiveProfilingQuiz.stepper.learningMotivation.optionPersonalEnrichment',
+        defaultMessage: 'Personal enrichment and enjoyment',
+        description: 'Learning motivation option: personal enrichment and enjoyment',
+    },
+    optionFormalCredentials: {
+        id: 'progressiveProfilingQuiz.stepper.learningMotivation.optionFormalCredentials',
+        defaultMessage: 'Earn formal credentials for my resume',
+        description: 'Learning motivation option: earning formal credentials',
+    },
 });
 export default messages;
 //# sourceMappingURL=messages.js.map

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,KAAK,EAAE;QACL,EAAE,EAAE,2DAA2D;QAC/D,cAAc,EAAE,qBAAqB;QACrC,WAAW,EAAE,0EAA0E;KACxF;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,8DAA8D;QAClE,cAAc,EAAE,yDAAyD;QACzE,WAAW,EAAE,kFAAkF;KAChG;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  title: {\n    id: 'progressiveProfilingQuiz.stepper.learningMotivation.title',\n    defaultMessage: 'Learning Motivation',\n    description: 'Title for the learning motivation step of the progressive profiling quiz',\n  },\n  question: {\n    id: 'progressiveProfilingQuiz.stepper.learningMotivation.question',\n    defaultMessage: 'What do you want to gain from your learning experience?',\n    description: 'Question asked in the learning motivation step of the progressive profiling quiz',\n  },\n});\n\nexport default messages;\n"]}
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,KAAK,EAAE;QACL,EAAE,EAAE,2DAA2D;QAC/D,cAAc,EAAE,qBAAqB;QACrC,WAAW,EAAE,0EAA0E;KACxF;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,8DAA8D;QAClE,cAAc,EAAE,yDAAyD;QACzE,WAAW,EAAE,kFAAkF;KAChG;IACD,IAAI,EAAE;QACJ,EAAE,EAAE,0DAA0D;QAC9D,cAAc,EAAE,oBAAoB;QACpC,WAAW,EAAE,wDAAwD;KACtE;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,sEAAsE;QAC1E,cAAc,EAAE,qDAAqD;QACrE,WAAW,EAAE,yCAAyC;KACvD;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,sEAAsE;QAC1E,cAAc,EAAE,mEAAmE;QACnF,WAAW,EAAE,yCAAyC;KACvD;IACD,0BAA0B,EAAE;QAC1B,EAAE,EAAE,gFAAgF;QACpF,cAAc,EAAE,0CAA0C;QAC1D,WAAW,EAAE,sEAAsE;KACpF;IACD,wBAAwB,EAAE;QACxB,EAAE,EAAE,8EAA8E;QAClF,cAAc,EAAE,mCAAmC;QACnD,WAAW,EAAE,+DAA+D;KAC7E;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,6EAA6E;QACjF,cAAc,EAAE,uCAAuC;QACvD,WAAW,EAAE,wDAAwD;KACtE;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  title: {\n    id: 'progressiveProfilingQuiz.stepper.learningMotivation.title',\n    defaultMessage: 'Learning Motivation',\n    description: 'Title for the learning motivation step of the progressive profiling quiz',\n  },\n  question: {\n    id: 'progressiveProfilingQuiz.stepper.learningMotivation.question',\n    defaultMessage: 'What do you want to gain from your learning experience?',\n    description: 'Question asked in the learning motivation step of the progressive profiling quiz',\n  },\n  hint: {\n    id: 'progressiveProfilingQuiz.stepper.learningMotivation.hint',\n    defaultMessage: 'Select one or more',\n    description: 'Hint text shown above the learning motivation question',\n  },\n  optionHardSkills: {\n    id: 'progressiveProfilingQuiz.stepper.learningMotivation.optionHardSkills',\n    defaultMessage: 'Hard skills (i.e., coding, programming, statistics)',\n    description: 'Learning motivation option: hard skills',\n  },\n  optionSoftSkills: {\n    id: 'progressiveProfilingQuiz.stepper.learningMotivation.optionSoftSkills',\n    defaultMessage: 'Soft skills (i.e, leadership, management, and strategic thinking)',\n    description: 'Learning motivation option: soft skills',\n  },\n  optionEmergingTechnologies: {\n    id: 'progressiveProfilingQuiz.stepper.learningMotivation.optionEmergingTechnologies',\n    defaultMessage: 'Stay up to date on emerging technologies',\n    description: 'Learning motivation option: staying current on emerging technologies',\n  },\n  optionPersonalEnrichment: {\n    id: 'progressiveProfilingQuiz.stepper.learningMotivation.optionPersonalEnrichment',\n    defaultMessage: 'Personal enrichment and enjoyment',\n    description: 'Learning motivation option: personal enrichment and enjoyment',\n  },\n  optionFormalCredentials: {\n    id: 'progressiveProfilingQuiz.stepper.learningMotivation.optionFormalCredentials',\n    defaultMessage: 'Earn formal credentials for my resume',\n    description: 'Learning motivation option: earning formal credentials',\n  },\n});\n\nexport default messages;\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/schema.d.ts

@@ -0,0 +1,8 @@
+import { QuizQuestionSchema } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/types';
+/**
+ * IF YOU CHANGE THE SCHEMA, MAKE SURE TO UPDATE THE VERSION AS WELL
+ * For typos and small adjustments, use patch version.
+ * For any other changes, use minor versions unless it's been clearly indicated otherwise.
+*/
+declare const schema: QuizQuestionSchema;
+export default schema;

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/schema.js

@@ -0,0 +1,21 @@
+import { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/constants';
+import messages from './messages';
+/**
+ * IF YOU CHANGE THE SCHEMA, MAKE SURE TO UPDATE THE VERSION AS WELL
+ * For typos and small adjustments, use patch version.
+ * For any other changes, use minor versions unless it's been clearly indicated otherwise.
+*/
+const schema = {
+    questionId: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION,
+    version: '1.0.0',
+    question: messages.question,
+    options: [
+        { value: 'hard-skills', message: messages.optionHardSkills },
+        { value: 'soft-skills', message: messages.optionSoftSkills },
+        { value: 'emerging-technologies', message: messages.optionEmergingTechnologies },
+        { value: 'personal-enrichment', message: messages.optionPersonalEnrichment },
+        { value: 'formal-credentials', message: messages.optionFormalCredentials },
+    ],
+};
+export default schema;
+//# sourceMappingURL=schema.js.map

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/schema.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAC;AACxG,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;;;EAIE;AACF,MAAM,MAAM,GAAuB;IACjC,UAAU,EAAE,gCAAgC,CAAC,mBAAmB;IAChE,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,QAAQ,CAAC,QAAQ;IAC3B,OAAO,EAAE;QACP,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,CAAC,gBAAgB,EAAE;QAC5D,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,CAAC,gBAAgB,EAAE;QAC5D,EAAE,KAAK,EAAE,uBAAuB,EAAE,OAAO,EAAE,QAAQ,CAAC,0BAA0B,EAAE;QAChF,EAAE,KAAK,EAAE,qBAAqB,EAAE,OAAO,EAAE,QAAQ,CAAC,wBAAwB,EAAE;QAC5E,EAAE,KAAK,EAAE,oBAAoB,EAAE,OAAO,EAAE,QAAQ,CAAC,uBAAuB,EAAE;KAC3E;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { QuizQuestionSchema } from '@src/widgets/ProgressiveProfilingQuiz/data/types';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport messages from './messages';\n\n/**\n * IF YOU CHANGE THE SCHEMA, MAKE SURE TO UPDATE THE VERSION AS WELL\n * For typos and small adjustments, use patch version.\n * For any other changes, use minor versions unless it's been clearly indicated otherwise.\n*/\nconst schema: QuizQuestionSchema = {\n  questionId: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION,\n  version: '1.0.0',\n  question: messages.question,\n  options: [\n    { value: 'hard-skills', message: messages.optionHardSkills },\n    { value: 'soft-skills', message: messages.optionSoftSkills },\n    { value: 'emerging-technologies', message: messages.optionEmergingTechnologies },\n    { value: 'personal-enrichment', message: messages.optionPersonalEnrichment },\n    { value: 'formal-credentials', message: messages.optionFormalCredentials },\n  ],\n};\n\nexport default schema;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edx/frontend-app-subscription-learner-dashboard",
-  "version": "1.27.2",
+  "version": "1.29.0",
   "description": "",
   "repository": {
     "type": "git",