@edx/frontend-app-subscription-learner-dashboard 1.51.0 → 1.52.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tracking/trackers/progressiveProfiling.d.ts +18 -0
- package/dist/tracking/trackers/progressiveProfiling.js +23 -0
- package/dist/tracking/trackers/progressiveProfiling.js.map +1 -0
- package/dist/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingElements/ProgressiveProfilingElements.js +7 -1
- package/dist/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingElements/ProgressiveProfilingElements.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider.js +7 -2
- package/dist/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/SearchPageBanners/Banner.d.ts +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/SearchPageBanners/Banner.js +2 -2
- package/dist/widgets/ProgressiveProfilingQuiz/SearchPageBanners/Banner.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/SearchPageBanners/BannerEntry.js +7 -1
- package/dist/widgets/ProgressiveProfilingQuiz/SearchPageBanners/BannerEntry.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/SearchPageBanners/messages.js +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/SearchPageBanners/messages.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/InterestsDeclaredAutosuggest.js +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/InterestsDeclaredAutosuggest.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/index.js +16 -2
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/index.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/index.scss +14 -1
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/index.js +9 -2
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/index.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/index.scss +2 -1
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/index.js +14 -2
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/index.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/index.scss +1 -0
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/ViewResultsButton.js +2 -0
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/ViewResultsButton.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/index.js +12 -3
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/index.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/messages.js +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/messages.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export declare const eventNames: {
|
|
2
|
+
progressiveProfilingSubmitClick: string;
|
|
3
|
+
progressiveProfilingQuestionaireModalClose: string;
|
|
4
|
+
progressiveProfilingQuestionaireModalFormOpened: string;
|
|
5
|
+
progressiveProfilingAnswerSelected: string;
|
|
6
|
+
progressiveProfilingNextButtonClick: string;
|
|
7
|
+
progressiveProfilingBackButtonClick: string;
|
|
8
|
+
progressiveProfilingSearchPageBannerClick: string;
|
|
9
|
+
progressiveProfilingDashboardBannerClick: string;
|
|
10
|
+
};
|
|
11
|
+
export declare const trackProgressiveProfilingSubmitClick: (evenProperties: any) => void;
|
|
12
|
+
export declare const trackProgressiveProfilingQuestionaireModalFormOpened: (evenProperties: any) => void;
|
|
13
|
+
export declare const trackProgressiveProfilingQuestionaireModalCloseClick: (evenProperties: any) => void;
|
|
14
|
+
export declare const trackProgressiveProfilingAnswerSelected: (evenProperties: any) => void;
|
|
15
|
+
export declare const trackProgressiveProfilingNextButtonClick: (evenProperties: any) => void;
|
|
16
|
+
export declare const trackProgressiveProfilingBackButtonClick: (evenProperties: any) => void;
|
|
17
|
+
export declare const trackProgressiveProfilingSearchPageBannerClick: (evenProperties: any) => void;
|
|
18
|
+
export declare const trackProgressiveProfilingDashboardBannerClick: (evenProperties: any) => void;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { createEventTracker } from '../../data/services/segment/utils';
|
|
2
|
+
export const eventNames = {
|
|
3
|
+
progressiveProfilingSubmitClick: 'edx.pp.questionaire.modal.submit.button.clicked',
|
|
4
|
+
progressiveProfilingQuestionaireModalClose: 'edx.pp.questionaire.modal.close.button.clicked',
|
|
5
|
+
progressiveProfilingQuestionaireModalFormOpened: 'edx.pp.questionaire.modal.opened',
|
|
6
|
+
progressiveProfilingAnswerSelected: 'edx.pp.questionaire.modal.answer.selected',
|
|
7
|
+
progressiveProfilingNextButtonClick: 'edx.pp.questionaire.modal.next.button.clicked',
|
|
8
|
+
progressiveProfilingBackButtonClick: 'edx.pp.questionaire.modal.back.button.clicked',
|
|
9
|
+
progressiveProfilingSearchPageBannerClick: 'edx.pp.search.page.banner.clicked',
|
|
10
|
+
progressiveProfilingDashboardBannerClick: 'edx.pp.dashboard.banner.clicked',
|
|
11
|
+
};
|
|
12
|
+
// Event tracker for progressive profiling submit button click
|
|
13
|
+
export const trackProgressiveProfilingSubmitClick = (evenProperties) => createEventTracker(eventNames.progressiveProfilingSubmitClick, Object.assign({}, evenProperties))();
|
|
14
|
+
// Tracks the progressive profiling modal opened with the questionaire form.
|
|
15
|
+
export const trackProgressiveProfilingQuestionaireModalFormOpened = (evenProperties) => createEventTracker(eventNames.progressiveProfilingQuestionaireModalFormOpened, Object.assign({}, evenProperties))();
|
|
16
|
+
// Event tracker for Progressive profiling modal close button click
|
|
17
|
+
export const trackProgressiveProfilingQuestionaireModalCloseClick = (evenProperties) => createEventTracker(eventNames.progressiveProfilingQuestionaireModalClose, Object.assign({}, evenProperties))();
|
|
18
|
+
export const trackProgressiveProfilingAnswerSelected = (evenProperties) => createEventTracker(eventNames.progressiveProfilingAnswerSelected, Object.assign({}, evenProperties))();
|
|
19
|
+
export const trackProgressiveProfilingNextButtonClick = (evenProperties) => createEventTracker(eventNames.progressiveProfilingNextButtonClick, Object.assign({}, evenProperties))();
|
|
20
|
+
export const trackProgressiveProfilingBackButtonClick = (evenProperties) => createEventTracker(eventNames.progressiveProfilingBackButtonClick, Object.assign({}, evenProperties))();
|
|
21
|
+
export const trackProgressiveProfilingSearchPageBannerClick = (evenProperties) => createEventTracker(eventNames.progressiveProfilingSearchPageBannerClick, Object.assign({}, evenProperties))();
|
|
22
|
+
export const trackProgressiveProfilingDashboardBannerClick = (evenProperties) => createEventTracker(eventNames.progressiveProfilingDashboardBannerClick, Object.assign({}, evenProperties))();
|
|
23
|
+
//# sourceMappingURL=progressiveProfiling.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"progressiveProfiling.js","sourceRoot":"","sources":["../../../src/tracking/trackers/progressiveProfiling.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,+BAA+B,EAAE,iDAAiD;IAClF,0CAA0C,EAAE,gDAAgD;IAC5F,+CAA+C,EAAE,kCAAkC;IACnF,kCAAkC,EAAE,2CAA2C;IAC/E,mCAAmC,EAAE,+CAA+C;IACpF,mCAAmC,EAAE,+CAA+C;IACpF,yCAAyC,EAAE,mCAAmC;IAC9E,wCAAwC,EAAE,iCAAiC;CAC5E,CAAC;AAEF,8DAA8D;AAC9D,MAAM,CAAC,MAAM,oCAAoC,GAAG,CAAC,cAAc,EAAE,EAAE,CAAC,kBAAkB,CACxF,UAAU,CAAC,+BAA+B,oBACrC,cAAc,EACpB,EAAE,CAAC;AAEJ,4EAA4E;AAC5E,MAAM,CAAC,MAAM,oDAAoD,GAAG,CAAC,cAAc,EAAE,EAAE,CAAC,kBAAkB,CACxG,UAAU,CAAC,+CAA+C,oBACrD,cAAc,EACpB,EAAE,CAAC;AAEJ,mEAAmE;AACnE,MAAM,CAAC,MAAM,oDAAoD,GAAG,CAAC,cAAc,EAAE,EAAE,CAAC,kBAAkB,CACxG,UAAU,CAAC,0CAA0C,oBAChD,cAAc,EACpB,EAAE,CAAC;AAEJ,MAAM,CAAC,MAAM,uCAAuC,GAAG,CAAC,cAAc,EAAE,EAAE,CAAC,kBAAkB,CAC3F,UAAU,CAAC,kCAAkC,oBACxC,cAAc,EACpB,EAAE,CAAC;AAEJ,MAAM,CAAC,MAAM,wCAAwC,GAAG,CAAC,cAAc,EAAE,EAAE,CAAC,kBAAkB,CAC5F,UAAU,CAAC,mCAAmC,oBACzC,cAAc,EACpB,EAAE,CAAC;AAEJ,MAAM,CAAC,MAAM,wCAAwC,GAAG,CAAC,cAAc,EAAE,EAAE,CAAC,kBAAkB,CAC5F,UAAU,CAAC,mCAAmC,oBACzC,cAAc,EACpB,EAAE,CAAC;AAEJ,MAAM,CAAC,MAAM,8CAA8C,GAAG,CAAC,cAAc,EAAE,EAAE,CAAC,kBAAkB,CAClG,UAAU,CAAC,yCAAyC,oBAC/C,cAAc,EACpB,EAAE,CAAC;AAEJ,MAAM,CAAC,MAAM,6CAA6C,GAAG,CAAC,cAAc,EAAE,EAAE,CAAC,kBAAkB,CACjG,UAAU,CAAC,wCAAwC,oBAC9C,cAAc,EACpB,EAAE,CAAC","sourcesContent":["import { createEventTracker } from '@src/data/services/segment/utils';\n\nexport const eventNames = {\n progressiveProfilingSubmitClick: 'edx.pp.questionaire.modal.submit.button.clicked',\n progressiveProfilingQuestionaireModalClose: 'edx.pp.questionaire.modal.close.button.clicked',\n progressiveProfilingQuestionaireModalFormOpened: 'edx.pp.questionaire.modal.opened',\n progressiveProfilingAnswerSelected: 'edx.pp.questionaire.modal.answer.selected',\n progressiveProfilingNextButtonClick: 'edx.pp.questionaire.modal.next.button.clicked',\n progressiveProfilingBackButtonClick: 'edx.pp.questionaire.modal.back.button.clicked',\n progressiveProfilingSearchPageBannerClick: 'edx.pp.search.page.banner.clicked',\n progressiveProfilingDashboardBannerClick: 'edx.pp.dashboard.banner.clicked',\n};\n\n// Event tracker for progressive profiling submit button click\nexport const trackProgressiveProfilingSubmitClick = (evenProperties) => createEventTracker(\n eventNames.progressiveProfilingSubmitClick,\n { ...evenProperties },\n)();\n\n// Tracks the progressive profiling modal opened with the questionaire form.\nexport const trackProgressiveProfilingQuestionaireModalFormOpened = (evenProperties) => createEventTracker(\n eventNames.progressiveProfilingQuestionaireModalFormOpened,\n { ...evenProperties },\n)();\n\n// Event tracker for Progressive profiling modal close button click\nexport const trackProgressiveProfilingQuestionaireModalCloseClick = (evenProperties) => createEventTracker(\n eventNames.progressiveProfilingQuestionaireModalClose,\n { ...evenProperties },\n)();\n\nexport const trackProgressiveProfilingAnswerSelected = (evenProperties) => createEventTracker(\n eventNames.progressiveProfilingAnswerSelected,\n { ...evenProperties },\n)();\n\nexport const trackProgressiveProfilingNextButtonClick = (evenProperties) => createEventTracker(\n eventNames.progressiveProfilingNextButtonClick,\n { ...evenProperties },\n)();\n\nexport const trackProgressiveProfilingBackButtonClick = (evenProperties) => createEventTracker(\n eventNames.progressiveProfilingBackButtonClick,\n { ...evenProperties },\n)();\n\nexport const trackProgressiveProfilingSearchPageBannerClick = (evenProperties) => createEventTracker(\n eventNames.progressiveProfilingSearchPageBannerClick,\n { ...evenProperties },\n)();\n\nexport const trackProgressiveProfilingDashboardBannerClick = (evenProperties) => createEventTracker(\n eventNames.progressiveProfilingDashboardBannerClick,\n { ...evenProperties },\n)();\n"]}
|
|
@@ -5,6 +5,7 @@ import { Card } from '@openedx/paragon';
|
|
|
5
5
|
import { useIntl } from '@openedx/frontend-base';
|
|
6
6
|
import ActionButton from '../../../containers/CourseCard/components/CourseCardActions/ActionButton';
|
|
7
7
|
import { useProgressiveProfilingQuiz } from '../ProgressiveProfilingQuizProvider';
|
|
8
|
+
import { trackProgressiveProfilingDashboardBannerClick } from '../../../tracking/trackers/progressiveProfiling';
|
|
8
9
|
const ProgressiveProfilingElements = ({ progressiveProfileStatus, orientation }) => {
|
|
9
10
|
const { openModal } = useProgressiveProfilingQuiz();
|
|
10
11
|
const { formatMessage } = useIntl();
|
|
@@ -14,7 +15,12 @@ const ProgressiveProfilingElements = ({ progressiveProfileStatus, orientation })
|
|
|
14
15
|
const descriptionValues = Object.assign(Object.assign({}, (status === 'incomplete' && { remaining_questions: remainingQuestions })), (status === 'complete' && {
|
|
15
16
|
strong: (chunks) => _jsx("strong", { children: chunks }),
|
|
16
17
|
}));
|
|
17
|
-
|
|
18
|
+
// Handle button click for the banner and track the click event
|
|
19
|
+
const handleButtonClick = () => {
|
|
20
|
+
openModal();
|
|
21
|
+
trackProgressiveProfilingDashboardBannerClick({ host: window.location.origin, status });
|
|
22
|
+
};
|
|
23
|
+
return (_jsx("div", { "data-testid": "ProgressiveProfileStatus", children: _jsx(Card, { orientation: orientation, children: _jsxs("div", { className: "d-flex flex-column w-100 p-4", children: [status !== 'complete' && (_jsx("h6", { children: formatMessage(messages[`${status}_title`]) })), _jsx("p", { className: "small text-gray-700", children: formatMessage(messages[`${status}_description`], descriptionValues) }), _jsx(ActionButton, { variant: "outline-brand", size: "sm", style: { maxWidth: '12.5rem' }, onClick: handleButtonClick, children: formatMessage(messages[`${status}_button`]) })] }) }) }));
|
|
18
24
|
};
|
|
19
25
|
ProgressiveProfilingElements.propTypes = {
|
|
20
26
|
progressiveProfileStatus: PropTypes.shape({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressiveProfilingElements.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingElements/ProgressiveProfilingElements.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,YAAY,MAAM,sEAAsE,CAAC;AAChG,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;
|
|
1
|
+
{"version":3,"file":"ProgressiveProfilingElements.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingElements/ProgressiveProfilingElements.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,YAAY,MAAM,sEAAsE,CAAC;AAChG,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;AAClF,OAAO,EAAE,6CAA6C,EAAE,MAAM,6CAA6C,CAAC;AAE5G,MAAM,4BAA4B,GAAG,CAAC,EAAE,wBAAwB,EAAE,WAAW,EAAE,EAAE,EAAE;IACjF,MAAM,EAAE,SAAS,EAAE,GAAG,2BAA2B,EAAE,CAAC;IACpD,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,EACJ,MAAM,EACN,kBAAkB,GACnB,GAAG,wBAAwB,IAAI,EAAE,CAAC;IAEnC,IAAI,CAAC,wBAAwB;QAAE,OAAO,IAAI,CAAC;IAE3C,MAAM,iBAAiB,mCAClB,CAAC,MAAM,KAAK,YAAY,IAAI,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,CAAC,GACxE,CAAC,MAAM,KAAK,UAAU,IAAI;QAC3B,MAAM,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,2BAAS,MAAM,GAAU;KAC9C,CAAC,CACH,CAAC;IAEF,+DAA+D;IAC/D,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,SAAS,EAAE,CAAC;QACZ,6CAA6C,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAC1F,CAAC,CAAC;IAEF,OAAO,CACL,6BAAiB,0BAA0B,YACzC,KAAC,IAAI,IAAC,WAAW,EAAE,WAAW,YAC5B,eAAK,SAAS,EAAC,8BAA8B,aAC1C,MAAM,KAAK,UAAU,IAAI,CACxB,uBAAK,aAAa,CAAC,QAAQ,CAAC,GAAG,MAAM,QAAQ,CAAC,CAAC,GAAM,CACtD,EACD,YAAG,SAAS,EAAC,qBAAqB,YAC/B,aAAa,CACZ,QAAQ,CAAC,GAAG,MAAM,cAAc,CAAC,EACjC,iBAAiB,CAClB,GACC,EACJ,KAAC,YAAY,IACX,OAAO,EAAC,eAAe,EACvB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,EAC9B,OAAO,EAAE,iBAAiB,YAEzB,aAAa,CAAC,QAAQ,CAAC,GAAG,MAAM,SAAS,CAAC,CAAC,GAC/B,IACX,GACD,GACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,4BAA4B,CAAC,SAAS,GAAG;IACvC,wBAAwB,EAAE,SAAS,CAAC,KAAK,CAAC;QACxC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,aAAa,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC;QAClE,iBAAiB,EAAE,SAAS,CAAC,MAAM;QACnC,cAAc,EAAE,SAAS,CAAC,MAAM;QAChC,kBAAkB,EAAE,SAAS,CAAC,MAAM;KACrC,CAAC;IACF,WAAW,EAAE,SAAS,CAAC,MAAM;CAC9B,CAAC;AAEF,eAAe,4BAA4B,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport messages from './messages';\nimport { Card } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport ActionButton from '@src/containers/CourseCard/components/CourseCardActions/ActionButton';\nimport { useProgressiveProfilingQuiz } from '../ProgressiveProfilingQuizProvider';\nimport { trackProgressiveProfilingDashboardBannerClick } from '@src/tracking/trackers/progressiveProfiling';\n\nconst ProgressiveProfilingElements = ({ progressiveProfileStatus, orientation }) => {\n const { openModal } = useProgressiveProfilingQuiz();\n const { formatMessage } = useIntl();\n\n const {\n status,\n remainingQuestions,\n } = progressiveProfileStatus || {};\n\n if (!progressiveProfileStatus) return null;\n\n const descriptionValues = {\n ...(status === 'incomplete' && { remaining_questions: remainingQuestions }),\n ...(status === 'complete' && {\n strong: (chunks) => <strong>{chunks}</strong>,\n }),\n };\n\n // Handle button click for the banner and track the click event\n const handleButtonClick = () => {\n openModal();\n trackProgressiveProfilingDashboardBannerClick({ host: window.location.origin, status });\n };\n\n return (\n <div data-testid=\"ProgressiveProfileStatus\">\n <Card orientation={orientation}>\n <div className=\"d-flex flex-column w-100 p-4\">\n {status !== 'complete' && (\n <h6>{formatMessage(messages[`${status}_title`])}</h6>\n )}\n <p className=\"small text-gray-700\">\n {formatMessage(\n messages[`${status}_description`],\n descriptionValues,\n )}\n </p>\n <ActionButton\n variant=\"outline-brand\"\n size=\"sm\"\n style={{ maxWidth: '12.5rem' }}\n onClick={handleButtonClick}\n >\n {formatMessage(messages[`${status}_button`])}\n </ActionButton>\n </div>\n </Card>\n </div>\n );\n};\n\nProgressiveProfilingElements.propTypes = {\n progressiveProfileStatus: PropTypes.shape({\n status: PropTypes.oneOf(['not_started', 'incomplete', 'complete']),\n answeredQuestions: PropTypes.number,\n totalQuestions: PropTypes.number,\n remainingQuestions: PropTypes.number,\n }),\n orientation: PropTypes.string,\n};\n\nexport default ProgressiveProfilingElements;\n"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { createContext, useContext, useEffect, useMemo, useState, useCallback, } from 'react';
|
|
3
3
|
import { useAnswers, useSaveAnswers } from './data/queryHooks';
|
|
4
|
+
import { trackProgressiveProfilingQuestionaireModalFormOpened, trackProgressiveProfilingQuestionaireModalCloseClick } from '../../tracking/trackers/progressiveProfiling';
|
|
4
5
|
const ProgressiveProfilingQuizContext = createContext(null);
|
|
5
6
|
export const ProgressiveProfilingQuizProvider = ({ children }) => {
|
|
6
7
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
@@ -15,13 +16,17 @@ export const ProgressiveProfilingQuizProvider = ({ children }) => {
|
|
|
15
16
|
setAnswers(prev => (Object.assign(Object.assign({}, storedAnswers.answers), prev)));
|
|
16
17
|
}
|
|
17
18
|
}, [storedAnswers]);
|
|
18
|
-
const openModal = useCallback(() =>
|
|
19
|
+
const openModal = useCallback(() => {
|
|
20
|
+
trackProgressiveProfilingQuestionaireModalFormOpened({ host: window.location.origin });
|
|
21
|
+
setIsModalOpen(true);
|
|
22
|
+
}, []);
|
|
19
23
|
const closeModal = useCallback(() => {
|
|
24
|
+
trackProgressiveProfilingQuestionaireModalCloseClick({ host: window.location.origin, step: currentStep + 1 });
|
|
20
25
|
setIsModalOpen(false);
|
|
21
26
|
if (Object.keys(answers).length > 0) {
|
|
22
27
|
saveAnswers(answers);
|
|
23
28
|
}
|
|
24
|
-
}, [answers, saveAnswers]);
|
|
29
|
+
}, [answers, saveAnswers, currentStep]);
|
|
25
30
|
const goToNextStep = useCallback(() => setCurrentStep(prev => prev + 1), []);
|
|
26
31
|
const goToPreviousStep = useCallback(() => setCurrentStep(prev => Math.max(0, prev - 1)), []);
|
|
27
32
|
const recordAnswer = useCallback((answer) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressiveProfilingQuizProvider.js","sourceRoot":"","sources":["../../../src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider.tsx"],"names":[],"mappings":";AAAA,OAAc,EACZ,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAa,WAAW,GAChF,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"ProgressiveProfilingQuizProvider.js","sourceRoot":"","sources":["../../../src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n createContext, useContext, useEffect, useMemo, useState, ReactNode, useCallback,\n} from 'react';\n\nimport { StoredAnswerRecord, ProgressiveProfileStatus } from './data/api/fetchAnswers';\nimport { useAnswers, useSaveAnswers } from './data/queryHooks';\nimport { QuizAnswerRecord } from './data/types';\nimport { trackProgressiveProfilingQuestionaireModalFormOpened, trackProgressiveProfilingQuestionaireModalCloseClick } from '@src/tracking/trackers/progressiveProfiling';\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 | StoredAnswerRecord>,\n recordAnswer: (answer: QuizAnswerRecord) => void,\n isComplete: boolean,\n setIsComplete: (isComplete: boolean) => void,\n progressiveProfileStatus: ProgressiveProfileStatus | undefined,\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 | StoredAnswerRecord>>({});\n const [isComplete, setIsComplete] = useState(false);\n\n const { data: storedAnswers } = useAnswers();\n const { mutate: saveAnswers } = useSaveAnswers();\n const progressiveProfileStatus = storedAnswers?.progressiveProfileStatus;\n\n useEffect(() => {\n if (storedAnswers?.answers) {\n setAnswers(prev => ({ ...storedAnswers.answers, ...prev }));\n }\n }, [storedAnswers]);\n\n const openModal = useCallback(() => {\n trackProgressiveProfilingQuestionaireModalFormOpened({ host: window.location.origin });\n\n setIsModalOpen(true);\n }, []);\n\n const closeModal = useCallback(() => {\n trackProgressiveProfilingQuestionaireModalCloseClick({ host: window.location.origin, step: currentStep + 1 });\n setIsModalOpen(false);\n if (Object.keys(answers).length > 0) {\n saveAnswers(answers);\n }\n }, [answers, saveAnswers, currentStep]);\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 progressiveProfileStatus,\n }), [\n isModalOpen, openModal, closeModal,\n currentStep, goToNextStep, goToPreviousStep,\n answers, recordAnswer,\n isComplete,\n progressiveProfileStatus,\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"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Button } from '@openedx/paragon';
|
|
3
|
-
export const Banner = ({ title, buttonText,
|
|
4
|
-
return (_jsx("div", { className: "rounded shadow-sm bg-light-200 px-4 py-3 mb-3", children: _jsxs("div", { className: "d-flex justify-content-center align-items-center gap-3 flex-wrap", children: [_jsx("p", { className: "mb-0 text-center text-md-left", "data-testid": "banner-title", children: title }), _jsx(Button, { variant: "outline-brand", onClick:
|
|
3
|
+
export const Banner = ({ title, buttonText, onButtonClick }) => {
|
|
4
|
+
return (_jsx("div", { className: "rounded shadow-sm bg-light-200 px-4 py-3 mb-3", children: _jsxs("div", { className: "d-flex justify-content-center align-items-center gap-3 flex-wrap", children: [_jsx("p", { className: "mb-0 text-center text-md-left", "data-testid": "banner-title", children: title }), _jsx(Button, { variant: "outline-brand", onClick: onButtonClick, "data-testid": "banner-button", children: buttonText })] }) }));
|
|
5
5
|
};
|
|
6
6
|
//# sourceMappingURL=Banner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/SearchPageBanners/Banner.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAQ1C,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/SearchPageBanners/Banner.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAQ1C,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,EAAE;IAC9E,OAAO,CACL,cAAK,SAAS,EAAC,+CAA+C,YAC5D,eAAK,SAAS,EAAC,kEAAkE,aAC/E,YAAG,SAAS,EAAC,+BAA+B,iBAAa,cAAc,YAAE,KAAK,GAAK,EACnF,KAAC,MAAM,IAAC,OAAO,EAAC,eAAe,EAAC,OAAO,EAAE,aAAa,iBAAc,eAAe,YAChF,UAAU,GACJ,IACL,GACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC, ReactNode } from 'react';\nimport { Button } from '@openedx/paragon';\n\ninterface BannerProps {\n title: ReactNode,\n buttonText: string,\n onButtonClick: () => void,\n}\n\nexport const Banner: FC<BannerProps> = ({ title, buttonText, onButtonClick }) => {\n return (\n <div className=\"rounded shadow-sm bg-light-200 px-4 py-3 mb-3\">\n <div className=\"d-flex justify-content-center align-items-center gap-3 flex-wrap\">\n <p className=\"mb-0 text-center text-md-left\" data-testid=\"banner-title\">{title}</p>\n <Button variant=\"outline-brand\" onClick={onButtonClick} data-testid=\"banner-button\">\n {buttonText}\n </Button>\n </div>\n </div>\n );\n};\n"]}
|
|
@@ -4,6 +4,7 @@ import { useIntl } from '@openedx/frontend-base';
|
|
|
4
4
|
import { Banner } from './Banner';
|
|
5
5
|
import messages from './messages';
|
|
6
6
|
import { PROGRESSIVE_PROFILING_USER_STATUS } from '../data/constants';
|
|
7
|
+
import { trackProgressiveProfilingSearchPageBannerClick } from '../../../tracking/trackers/progressiveProfiling';
|
|
7
8
|
/**
|
|
8
9
|
* Single slot entry point.
|
|
9
10
|
* Reads progressive profiling state from context and selects one CTA.
|
|
@@ -20,6 +21,11 @@ export const BannerEntry = () => {
|
|
|
20
21
|
const formattedInterests = interests.length > 1
|
|
21
22
|
? `${interests.slice(0, -1).join(', ')} and ${interests.at(-1)}`
|
|
22
23
|
: interests[0];
|
|
24
|
+
// Handle button click for the banner and track the click event
|
|
25
|
+
const handleButtonClick = () => {
|
|
26
|
+
openModal();
|
|
27
|
+
trackProgressiveProfilingSearchPageBannerClick({ host: window.location.origin, status });
|
|
28
|
+
};
|
|
23
29
|
let title = formatMessage(messages.notStartedTitle);
|
|
24
30
|
let buttonText = formatMessage(messages.notStartedButtonText);
|
|
25
31
|
if (status === PROGRESSIVE_PROFILING_USER_STATUS.COMPLETE) {
|
|
@@ -30,6 +36,6 @@ export const BannerEntry = () => {
|
|
|
30
36
|
title = formatMessage(messages.incompleteTitle, { remainingQuestions });
|
|
31
37
|
buttonText = formatMessage(messages.incompleteButtonText);
|
|
32
38
|
}
|
|
33
|
-
return _jsx(Banner, {
|
|
39
|
+
return _jsx(Banner, { onButtonClick: handleButtonClick, title: title, buttonText: buttonText });
|
|
34
40
|
};
|
|
35
41
|
//# sourceMappingURL=BannerEntry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerEntry.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/SearchPageBanners/BannerEntry.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;AAClF,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,iCAAiC,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"BannerEntry.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/SearchPageBanners/BannerEntry.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;AAClF,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,iCAAiC,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,8CAA8C,EAAE,MAAM,6CAA6C,CAAC;AAE7G;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAO,GAAG,EAAE;;IAClC,MAAM,EACJ,SAAS,EACT,OAAO,EACP,wBAAwB,GACzB,GAAG,2BAA2B,EAAE,CAAC;IAClC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,IAAI,CAAC,wBAAwB;QAAE,OAAO,IAAI,CAAC;IAE3C,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,GAAG,wBAAwB,IAAI,EAAE,CAAC;IAEtE,MAAM,YAAY,GAAG,MAAA,MAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,eAAe,CAAC,0CAAE,cAAc,0CAAG,CAAC,CAAC,0CAAE,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAC3F,MAAM,SAAS,GAAG,MAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,oBAAoB,CAAC,0CAAE,cAAc,mCAAI,EAAE,CAAC;IACxE,MAAM,kBAAkB,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC;QAC7C,CAAC,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;QAChE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAEjB,+DAA+D;IAC/D,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,SAAS,EAAE,CAAC;QACZ,8CAA8C,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAC3F,CAAC,CAAC;IAEF,IAAI,KAAK,GAAc,aAAa,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;IAC/D,IAAI,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IAE9D,IAAI,MAAM,KAAK,iCAAiC,CAAC,QAAQ,EAAE,CAAC;QAC1D,KAAK,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,CAAC,2BAAS,MAAM,GAAU,EAAE,CAAC,CAAC;QAC1I,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IAC1D,CAAC;IAED,IAAI,MAAM,KAAK,iCAAiC,CAAC,UAAU,EAAE,CAAC;QAC5D,KAAK,GAAG,aAAa,CAAC,QAAQ,CAAC,eAAe,EAAE,EAAE,kBAAkB,EAAE,CAAC,CAAC;QACxE,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IAC5D,CAAC;IAED,OAAO,KAAC,MAAM,IAAC,aAAa,EAAE,iBAAiB,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,GAAI,CAAC;AAC5F,CAAC,CAAC","sourcesContent":["import { FC, ReactNode } from 'react';\nimport { useProgressiveProfilingQuiz } from '../ProgressiveProfilingQuizProvider';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { Banner } from './Banner';\nimport messages from './messages';\nimport { PROGRESSIVE_PROFILING_USER_STATUS } from '../data/constants';\nimport { trackProgressiveProfilingSearchPageBannerClick } from '@src/tracking/trackers/progressiveProfiling';\n\n/**\n * Single slot entry point.\n * Reads progressive profiling state from context and selects one CTA.\n */\nexport const BannerEntry: FC = () => {\n const {\n openModal,\n answers,\n progressiveProfileStatus,\n } = useProgressiveProfilingQuiz();\n const { formatMessage } = useIntl();\n\n if (!progressiveProfileStatus) return null;\n\n const { status, remainingQuestions } = progressiveProfileStatus || {};\n\n const learningGoal = answers?.['learning-goal']?.selectedValues?.[0]?.replaceAll('-', ' ');\n const interests = answers?.['interests-declared']?.selectedValues ?? [];\n const formattedInterests = interests.length > 1\n ? `${interests.slice(0, -1).join(', ')} and ${interests.at(-1)}`\n : interests[0];\n\n // Handle button click for the banner and track the click event\n const handleButtonClick = () => {\n openModal();\n trackProgressiveProfilingSearchPageBannerClick({ host: window.location.origin, status });\n };\n\n let title: ReactNode = formatMessage(messages.notStartedTitle);\n let buttonText = formatMessage(messages.notStartedButtonText);\n\n if (status === PROGRESSIVE_PROFILING_USER_STATUS.COMPLETE) {\n title = formatMessage(messages.completeTitle, { learningGoal, interests: formattedInterests, bold: chunks => <strong>{chunks}</strong> });\n buttonText = formatMessage(messages.completeButtonText);\n }\n\n if (status === PROGRESSIVE_PROFILING_USER_STATUS.INCOMPLETE) {\n title = formatMessage(messages.incompleteTitle, { remainingQuestions });\n buttonText = formatMessage(messages.incompleteButtonText);\n }\n\n return <Banner onButtonClick={handleButtonClick} title={title} buttonText={buttonText} />;\n};\n"]}
|
|
@@ -12,7 +12,7 @@ const messages = defineMessages({
|
|
|
12
12
|
},
|
|
13
13
|
incompleteTitle: {
|
|
14
14
|
id: 'progressiveProfiling.searchPage.banner.incomplete.title',
|
|
15
|
-
defaultMessage: 'Answer {remainingQuestions} more question
|
|
15
|
+
defaultMessage: 'Answer {remainingQuestions, plural, =0 {# more question} one {# more question} other {# more questions}} and get better course recommendations.',
|
|
16
16
|
description: 'Title to be shown on banner when the progressive profiling quiz is incomplete',
|
|
17
17
|
},
|
|
18
18
|
incompleteButtonText: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/SearchPageBanners/messages.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,eAAe,EAAE;QACf,EAAE,EAAE,yDAAyD;QAC7D,cAAc,EAAE,4BAA4B;QAC5C,WAAW,EAAE,sFAAsF;KACpG;IACD,oBAAoB,EAAE;QACpB,EAAE,EAAE,8DAA8D;QAClE,cAAc,EAAE,gBAAgB;QAChC,WAAW,EAAE,4FAA4F;KAC1G;IACD,eAAe,EAAE;QACf,EAAE,EAAE,yDAAyD;QAC7D,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/SearchPageBanners/messages.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,eAAe,EAAE;QACf,EAAE,EAAE,yDAAyD;QAC7D,cAAc,EAAE,4BAA4B;QAC5C,WAAW,EAAE,sFAAsF;KACpG;IACD,oBAAoB,EAAE;QACpB,EAAE,EAAE,8DAA8D;QAClE,cAAc,EAAE,gBAAgB;QAChC,WAAW,EAAE,4FAA4F;KAC1G;IACD,eAAe,EAAE;QACf,EAAE,EAAE,yDAAyD;QAC7D,cAAc,EAAE,iJAAiJ;QACjK,WAAW,EAAE,+EAA+E;KAC7F;IACD,oBAAoB,EAAE;QACpB,EAAE,EAAE,8DAA8D;QAClE,cAAc,EAAE,yBAAyB;QACzC,WAAW,EAAE,qFAAqF;KACnG;IACD,aAAa,EAAE;QACb,EAAE,EAAE,uDAAuD;QAC3D,cAAc,EAAE,4FAA4F;QAC5G,WAAW,EAAE,6EAA6E;KAC3F;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,4DAA4D;QAChE,cAAc,EAAE,gBAAgB;QAChC,WAAW,EAAE,mFAAmF;KACjG;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n notStartedTitle: {\n id: 'progressiveProfiling.searchPage.banner.notStarted.title',\n defaultMessage: 'What do you want to learn?',\n description: 'Title to be shown on banner when the progressive profiling quiz has not been started',\n },\n notStartedButtonText: {\n id: 'progressiveProfiling.searchPage.banner.notStarted.buttonText',\n defaultMessage: 'Share my goals',\n description: 'Button text to be shown on banner when the progressive profiling quiz has not been started',\n },\n incompleteTitle: {\n id: 'progressiveProfiling.searchPage.banner.incomplete.title',\n defaultMessage: 'Answer {remainingQuestions, plural, =0 {# more question} one {# more question} other {# more questions}} and get better course recommendations.',\n description: 'Title to be shown on banner when the progressive profiling quiz is incomplete',\n },\n incompleteButtonText: {\n id: 'progressiveProfiling.searchPage.banner.incomplete.buttonText',\n defaultMessage: 'Finish sharing my goals',\n description: 'Button text to be shown on banner when the progressive profiling quiz is incomplete',\n },\n completeTitle: {\n id: 'progressiveProfiling.searchPage.banner.complete.title',\n defaultMessage: 'Your learning on edX to <bold>{learningGoal}</bold> and you\\'re interested in {interests}.',\n description: 'Title to be shown on banner when the progressive profiling quiz is complete',\n },\n completeButtonText: {\n id: 'progressiveProfiling.searchPage.banner.complete.buttonText',\n defaultMessage: 'Share my goals',\n description: 'Button text to be shown on banner when the progressive profiling quiz is complete',\n },\n});\n\nexport default messages;\n"]}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { Form, Icon } from '@openedx/paragon';
|
|
3
3
|
import { Search } from '@openedx/paragon/icons';
|
|
4
4
|
const InterestsDeclaredAutosuggest = ({ inputValue, skills, onChange, }) => {
|
|
5
|
-
return (_jsx(Form.Autosuggest, { value: inputValue, onChange: onChange, name: "interests-declared-autosuggest", trailingElement: (_jsx(Icon, { src: Search })), className: "container-mw-xs", children: skills === null || skills === void 0 ? void 0 : skills.map(skill => (_jsx(Form.AutosuggestOption, { id: skill.value.replaceAll(' ', '-').toLowerCase(), children: skill.value }, skill.value))) }));
|
|
5
|
+
return (_jsx(Form.Autosuggest, { value: inputValue, onChange: onChange, name: "interests-declared-autosuggest", placeholder: "Search for a skill or subject", trailingElement: (_jsx(Icon, { src: Search })), className: "container-mw-xs", children: skills === null || skills === void 0 ? void 0 : skills.map(skill => (_jsx(Form.AutosuggestOption, { id: skill.value.replaceAll(' ', '-').toLowerCase(), children: skill.value }, skill.value))) }));
|
|
6
6
|
};
|
|
7
7
|
export default InterestsDeclaredAutosuggest;
|
|
8
8
|
//# sourceMappingURL=InterestsDeclaredAutosuggest.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InterestsDeclaredAutosuggest.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/InterestsDeclaredAutosuggest.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAUhD,MAAM,4BAA4B,GAAgD,CAAC,EACjF,UAAU,EACV,MAAM,EACN,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,IAAI,CAAC,WAAW,IACf,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,gCAAgC,EACrC,eAAe,EAAE,CACf,KAAC,IAAI,IACH,GAAG,EAAE,MAAM,GACX,CACH,EACD,SAAS,EAAC,iBAAiB,YAE1B,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACpB,KAAC,IAAI,CAAC,iBAAiB,IAAmB,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE,YACzF,KAAK,CAAC,KAAK,IADe,KAAK,CAAC,KAAK,CAEf,CAC1B,CAAC,GACe,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,4BAA4B,CAAC","sourcesContent":["import React from 'react';\nimport { Form, Icon } from '@openedx/paragon';\nimport { Search } from '@openedx/paragon/icons';\n\nimport { SkillWithCount, AutosuggestValue } from '@src/widgets/ProgressiveProfilingQuiz/data';\n\ninterface InterestsDeclaredAutosuggestProps {\n inputValue: AutosuggestValue,\n skills?: SkillWithCount[],\n onChange: (value: AutosuggestValue) => void,\n}\n\nconst InterestsDeclaredAutosuggest: React.FC<InterestsDeclaredAutosuggestProps> = ({\n inputValue,\n skills,\n onChange,\n}) => {\n return (\n <Form.Autosuggest\n value={inputValue}\n onChange={onChange}\n name=\"interests-declared-autosuggest\"\n trailingElement={(\n <Icon\n src={Search}\n />\n )}\n className=\"container-mw-xs\"\n >\n {skills?.map(skill => (\n <Form.AutosuggestOption key={skill.value} id={skill.value.replaceAll(' ', '-').toLowerCase()}>\n {skill.value}\n </Form.AutosuggestOption>\n ))}\n </Form.Autosuggest>\n );\n};\n\nexport default InterestsDeclaredAutosuggest;\n"]}
|
|
1
|
+
{"version":3,"file":"InterestsDeclaredAutosuggest.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/InterestsDeclaredAutosuggest.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAUhD,MAAM,4BAA4B,GAAgD,CAAC,EACjF,UAAU,EACV,MAAM,EACN,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,IAAI,CAAC,WAAW,IACf,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,gCAAgC,EACrC,WAAW,EAAC,+BAA+B,EAC3C,eAAe,EAAE,CACf,KAAC,IAAI,IACH,GAAG,EAAE,MAAM,GACX,CACH,EACD,SAAS,EAAC,iBAAiB,YAE1B,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACpB,KAAC,IAAI,CAAC,iBAAiB,IAAmB,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE,YACzF,KAAK,CAAC,KAAK,IADe,KAAK,CAAC,KAAK,CAEf,CAC1B,CAAC,GACe,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,4BAA4B,CAAC","sourcesContent":["import React from 'react';\nimport { Form, Icon } from '@openedx/paragon';\nimport { Search } from '@openedx/paragon/icons';\n\nimport { SkillWithCount, AutosuggestValue } from '@src/widgets/ProgressiveProfilingQuiz/data';\n\ninterface InterestsDeclaredAutosuggestProps {\n inputValue: AutosuggestValue,\n skills?: SkillWithCount[],\n onChange: (value: AutosuggestValue) => void,\n}\n\nconst InterestsDeclaredAutosuggest: React.FC<InterestsDeclaredAutosuggestProps> = ({\n inputValue,\n skills,\n onChange,\n}) => {\n return (\n <Form.Autosuggest\n value={inputValue}\n onChange={onChange}\n name=\"interests-declared-autosuggest\"\n placeholder=\"Search for a skill or subject\"\n trailingElement={(\n <Icon\n src={Search}\n />\n )}\n className=\"container-mw-xs\"\n >\n {skills?.map(skill => (\n <Form.AutosuggestOption key={skill.value} id={skill.value.replaceAll(' ', '-').toLowerCase()}>\n {skill.value}\n </Form.AutosuggestOption>\n ))}\n </Form.Autosuggest>\n );\n};\n\nexport default InterestsDeclaredAutosuggest;\n"]}
|
package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/index.js
CHANGED
|
@@ -10,6 +10,7 @@ import InterestsDeclaredAutosuggest from './InterestsDeclaredAutosuggest';
|
|
|
10
10
|
import { useSkills } from '../../../../../../widgets/ProgressiveProfilingQuiz/data';
|
|
11
11
|
import { buildAnswerRecord } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/schemaUtils';
|
|
12
12
|
import buildInterestsDeclaredSchema from './schema';
|
|
13
|
+
import { trackProgressiveProfilingAnswerSelected, trackProgressiveProfilingNextButtonClick, trackProgressiveProfilingBackButtonClick } from '../../../../../../tracking/trackers/progressiveProfiling';
|
|
13
14
|
const EMPTY_AUTOSUGGEST_VALUE = {
|
|
14
15
|
userProvidedText: '',
|
|
15
16
|
selectionValue: '',
|
|
@@ -20,7 +21,7 @@ import messages from './messages';
|
|
|
20
21
|
import './index.scss';
|
|
21
22
|
const InterestsDeclaredStep = () => {
|
|
22
23
|
var _a, _b;
|
|
23
|
-
const { goToPreviousStep, goToNextStep, answers, recordAnswer, } = useProgressiveProfilingQuiz();
|
|
24
|
+
const { goToPreviousStep, goToNextStep, answers, recordAnswer, currentStep, } = useProgressiveProfilingQuiz();
|
|
24
25
|
const { formatMessage } = useIntl();
|
|
25
26
|
const [inputValue, setInputValue] = useState(EMPTY_AUTOSUGGEST_VALUE);
|
|
26
27
|
const { data: skills } = useSkills();
|
|
@@ -31,10 +32,12 @@ const InterestsDeclaredStep = () => {
|
|
|
31
32
|
return;
|
|
32
33
|
}
|
|
33
34
|
recordAnswer(buildAnswerRecord(schema, [...interestInput, value], formatMessage));
|
|
35
|
+
trackProgressiveProfilingAnswerSelected({ host: window.location.origin, question: schema.questionId, answer: [...interestInput, value], step: currentStep + 1 });
|
|
34
36
|
};
|
|
35
37
|
const removeInterest = (value) => {
|
|
36
38
|
const newInterestInput = interestInput.filter(item => value !== item);
|
|
37
39
|
recordAnswer(buildAnswerRecord(schema, newInterestInput, formatMessage));
|
|
40
|
+
trackProgressiveProfilingAnswerSelected({ host: window.location.origin, question: schema.questionId, answer: newInterestInput, step: currentStep + 1 });
|
|
38
41
|
};
|
|
39
42
|
const handleAutosuggestChange = (value) => {
|
|
40
43
|
setInputValue(value);
|
|
@@ -48,8 +51,19 @@ const InterestsDeclaredStep = () => {
|
|
|
48
51
|
? [...interestInput, value]
|
|
49
52
|
: interestInput.filter((interest) => interest !== value);
|
|
50
53
|
recordAnswer(buildAnswerRecord(schema, nextValues, formatMessage));
|
|
54
|
+
trackProgressiveProfilingAnswerSelected({ host: window.location.origin, question: schema.questionId, answer: nextValues, step: currentStep + 1 });
|
|
51
55
|
};
|
|
52
|
-
|
|
56
|
+
// Handles the click event for the "Continue" button, advancing to the next step and tracking the event.
|
|
57
|
+
const handleNextButtonClick = () => {
|
|
58
|
+
goToNextStep();
|
|
59
|
+
trackProgressiveProfilingNextButtonClick({ host: window.location.origin, step: currentStep + 1, question: schema.questionId });
|
|
60
|
+
};
|
|
61
|
+
// Handles the click event for the "Back" button, going to the previous step and tracking the event.
|
|
62
|
+
const handleBackButtonClick = () => {
|
|
63
|
+
goToPreviousStep();
|
|
64
|
+
trackProgressiveProfilingBackButtonClick({ host: window.location.origin, step: currentStep + 1, question: schema.questionId });
|
|
65
|
+
};
|
|
66
|
+
return (_jsxs(_Fragment, { children: [_jsxs(BaseStep, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED, title: formatMessage(messages.title), index: 2, children: [_jsx("h4", { children: formatMessage(messages.question) }), _jsx("p", { children: formatMessage(messages.subtitle) }), _jsxs("div", { className: "d-flex flex-column gap-2", children: [_jsx(InterestsDeclaredAutosuggest, { inputValue: inputValue, onChange: handleAutosuggestChange, skills: skills }), _jsx("div", { children: interestInput.map(interest => (_jsx(Chip, { iconAfter: Close, iconAfterAlt: formatMessage(messages.removeInterestIconAlt), variant: "dark", onIconAfterClick: () => removeInterest(interest), className: "interest-chip-checkbox", children: interest }, interest))) }), _jsx("p", { className: "font-weight-bold", children: formatMessage(messages.popularTopicsLabel) }), _jsx(Form.CheckboxSet, { name: "interests-declared-topics", isInline: true, value: interestInput, onChange: handleCheckboxTopicToggle, className: "interests-declared-checkbox-set", children: skills === null || skills === void 0 ? void 0 : skills.slice(0, 10).map(skill => (_jsx(Form.Checkbox, { value: skill.value, className: "ml-0 mr-3", children: skill.value }, skill.value))) })] })] }), _jsxs(Stepper.ActionRow, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED, children: [_jsx(Button, { variant: "outline-primary", onClick: handleBackButtonClick, children: formatMessage(stepMessages.backButton) }), _jsx(Button, { onClick: handleNextButtonClick, children: formatMessage(stepMessages.nextButton) })] })] }));
|
|
53
67
|
};
|
|
54
68
|
export default InterestsDeclaredStep;
|
|
55
69
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { Stepper, Button, Form, Chip } from '@openedx/paragon';\nimport { Close } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport { useProgressiveProfilingQuiz } from '@src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport BaseStep from '../BaseStep';\nimport InterestsDeclaredAutosuggest from './InterestsDeclaredAutosuggest';\nimport { useSkills, AutosuggestValue } from '@src/widgets/ProgressiveProfilingQuiz/data';\nimport { buildAnswerRecord } from '@src/widgets/ProgressiveProfilingQuiz/data/schemaUtils';\nimport buildInterestsDeclaredSchema from './schema';\n\nconst EMPTY_AUTOSUGGEST_VALUE: AutosuggestValue = {\n userProvidedText: '',\n selectionValue: '',\n selectionId: '',\n};\n\nimport stepMessages from '../messages';\nimport messages from './messages';\n\nimport './index.scss';\n\nconst InterestsDeclaredStep: React.FC = () => {\n const {\n goToPreviousStep, goToNextStep, answers, recordAnswer,\n } = useProgressiveProfilingQuiz();\n const { formatMessage } = useIntl();\n\n const [inputValue, setInputValue] = useState<AutosuggestValue>(EMPTY_AUTOSUGGEST_VALUE);\n\n const { data: skills } = useSkills();\n const schema = buildInterestsDeclaredSchema(skills ?? []);\n const interestInput = answers[schema.questionId]?.selectedValues ?? [];\n\n const addInterest = (value: string) => {\n if (interestInput.includes(value)) {\n return;\n }\n recordAnswer(buildAnswerRecord(schema, [...interestInput, value], formatMessage));\n };\n\n const removeInterest = (value: string) => {\n const newInterestInput = interestInput.filter(item => value !== item);\n recordAnswer(buildAnswerRecord(schema, newInterestInput, formatMessage));\n };\n\n const handleAutosuggestChange = (value: AutosuggestValue) => {\n setInputValue(value);\n\n if (value.selectionValue) {\n addInterest(value.selectionValue);\n }\n };\n\n const handleCheckboxTopicToggle = (event: React.ChangeEvent<HTMLInputElement>) => {\n const { value, checked } = event.target;\n\n const nextValues = checked\n ? [...interestInput, value]\n : interestInput.filter((interest) => interest !== value);\n recordAnswer(buildAnswerRecord(schema, nextValues, formatMessage));\n };\n\n return (\n <>\n <BaseStep\n eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED}\n title={formatMessage(messages.title)}\n index={2}\n >\n <h4>{formatMessage(messages.question)}</h4>\n <p>{formatMessage(messages.subtitle)}</p>\n <div className=\"d-flex flex-column gap-2\">\n <InterestsDeclaredAutosuggest\n inputValue={inputValue}\n onChange={handleAutosuggestChange}\n skills={skills}\n />\n <div>\n {interestInput.map(interest => (\n <Chip\n key={interest}\n iconAfter={Close}\n iconAfterAlt={formatMessage(messages.removeInterestIconAlt)}\n variant=\"dark\"\n onIconAfterClick={() => removeInterest(interest)}\n >\n {interest}\n </Chip>\n ))}\n </div>\n <p className=\"font-weight-bold\">{formatMessage(messages.popularTopicsLabel)}</p>\n <Form.CheckboxSet\n name=\"interests-declared-topics\"\n isInline\n value={interestInput}\n onChange={handleCheckboxTopicToggle}\n className=\"interests-declared-checkbox-set\"\n >\n {skills?.slice(0, 10).map(skill => (\n <Form.Checkbox key={skill.value} value={skill.value} className=\"ml-0 mr-3\">\n {skill.value}\n </Form.Checkbox>\n ))}\n </Form.CheckboxSet>\n </div>\n </BaseStep>\n <Stepper.ActionRow eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED}>\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 InterestsDeclaredStep;\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { Stepper, Button, Form, Chip } from '@openedx/paragon';\nimport { Close } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport { useProgressiveProfilingQuiz } from '@src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport BaseStep from '../BaseStep';\nimport InterestsDeclaredAutosuggest from './InterestsDeclaredAutosuggest';\nimport { useSkills, AutosuggestValue } from '@src/widgets/ProgressiveProfilingQuiz/data';\nimport { buildAnswerRecord } from '@src/widgets/ProgressiveProfilingQuiz/data/schemaUtils';\nimport buildInterestsDeclaredSchema from './schema';\nimport { trackProgressiveProfilingAnswerSelected, trackProgressiveProfilingNextButtonClick, trackProgressiveProfilingBackButtonClick } from '@src/tracking/trackers/progressiveProfiling';\n\nconst EMPTY_AUTOSUGGEST_VALUE: AutosuggestValue = {\n userProvidedText: '',\n selectionValue: '',\n selectionId: '',\n};\n\nimport stepMessages from '../messages';\nimport messages from './messages';\n\nimport './index.scss';\n\nconst InterestsDeclaredStep: React.FC = () => {\n const {\n goToPreviousStep, goToNextStep, answers, recordAnswer, currentStep,\n } = useProgressiveProfilingQuiz();\n const { formatMessage } = useIntl();\n\n const [inputValue, setInputValue] = useState<AutosuggestValue>(EMPTY_AUTOSUGGEST_VALUE);\n\n const { data: skills } = useSkills();\n const schema = buildInterestsDeclaredSchema(skills ?? []);\n const interestInput = answers[schema.questionId]?.selectedValues ?? [];\n\n const addInterest = (value: string) => {\n if (interestInput.includes(value)) {\n return;\n }\n recordAnswer(buildAnswerRecord(schema, [...interestInput, value], formatMessage));\n trackProgressiveProfilingAnswerSelected({ host: window.location.origin, question: schema.questionId, answer: [...interestInput, value], step: currentStep + 1 });\n };\n\n const removeInterest = (value: string) => {\n const newInterestInput = interestInput.filter(item => value !== item);\n recordAnswer(buildAnswerRecord(schema, newInterestInput, formatMessage));\n trackProgressiveProfilingAnswerSelected({ host: window.location.origin, question: schema.questionId, answer: newInterestInput, step: currentStep + 1 });\n };\n\n const handleAutosuggestChange = (value: AutosuggestValue) => {\n setInputValue(value);\n\n if (value.selectionValue) {\n addInterest(value.selectionValue);\n }\n };\n\n const handleCheckboxTopicToggle = (event: React.ChangeEvent<HTMLInputElement>) => {\n const { value, checked } = event.target;\n\n const nextValues = checked\n ? [...interestInput, value]\n : interestInput.filter((interest) => interest !== value);\n recordAnswer(buildAnswerRecord(schema, nextValues, formatMessage));\n trackProgressiveProfilingAnswerSelected({ host: window.location.origin, question: schema.questionId, answer: nextValues, step: currentStep + 1 });\n };\n\n // Handles the click event for the \"Continue\" button, advancing to the next step and tracking the event.\n const handleNextButtonClick = () => {\n goToNextStep();\n trackProgressiveProfilingNextButtonClick({ host: window.location.origin, step: currentStep + 1, question: schema.questionId });\n };\n\n // Handles the click event for the \"Back\" button, going to the previous step and tracking the event.\n const handleBackButtonClick = () => {\n goToPreviousStep();\n trackProgressiveProfilingBackButtonClick({ host: window.location.origin, step: currentStep + 1, question: schema.questionId });\n };\n\n return (\n <>\n <BaseStep\n eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED}\n title={formatMessage(messages.title)}\n index={2}\n >\n <h4>{formatMessage(messages.question)}</h4>\n <p>{formatMessage(messages.subtitle)}</p>\n <div className=\"d-flex flex-column gap-2\">\n <InterestsDeclaredAutosuggest\n inputValue={inputValue}\n onChange={handleAutosuggestChange}\n skills={skills}\n />\n <div>\n {interestInput.map(interest => (\n <Chip\n key={interest}\n iconAfter={Close}\n iconAfterAlt={formatMessage(messages.removeInterestIconAlt)}\n variant=\"dark\"\n onIconAfterClick={() => removeInterest(interest)}\n className=\"interest-chip-checkbox\"\n >\n {interest}\n </Chip>\n ))}\n </div>\n <p className=\"font-weight-bold\">{formatMessage(messages.popularTopicsLabel)}</p>\n <Form.CheckboxSet\n name=\"interests-declared-topics\"\n isInline\n value={interestInput}\n onChange={handleCheckboxTopicToggle}\n className=\"interests-declared-checkbox-set\"\n >\n {skills?.slice(0, 10).map(skill => (\n <Form.Checkbox key={skill.value} value={skill.value} className=\"ml-0 mr-3\">\n {skill.value}\n </Form.Checkbox>\n ))}\n </Form.CheckboxSet>\n </div>\n </BaseStep>\n <Stepper.ActionRow eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED}>\n <Button variant=\"outline-primary\" onClick={handleBackButtonClick}>\n {formatMessage(stepMessages.backButton)}\n </Button>\n <Button onClick={handleNextButtonClick}>\n {formatMessage(stepMessages.nextButton)}\n </Button>\n </Stepper.ActionRow>\n </>\n );\n};\n\nexport default InterestsDeclaredStep;\n"]}
|
package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/index.scss
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
1
|
.interests-declared-checkbox-set {
|
|
2
2
|
line-height: 2;
|
|
3
|
-
}
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.interest-chip-checkbox {
|
|
6
|
+
background-color: var(--pgn-color-light-500);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.interest-chip-checkbox > .pgn__chip__label {
|
|
10
|
+
color: var(--pgn-color-dark-500);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.interest-chip-checkbox > .btn-icon > .btn-icon__icon-container {
|
|
14
|
+
background: var(--pgn-color-light-500);
|
|
15
|
+
color: var(--pgn-color-dark-500);
|
|
16
|
+
}
|
package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/index.js
CHANGED
|
@@ -7,14 +7,16 @@ import { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '../../../../../../widgets/Prog
|
|
|
7
7
|
import { buildAnswerRecord } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/schemaUtils';
|
|
8
8
|
import messages from './messages';
|
|
9
9
|
import schema from './schema';
|
|
10
|
+
import { trackProgressiveProfilingAnswerSelected, trackProgressiveProfilingNextButtonClick } from '../../../../../../tracking/trackers/progressiveProfiling';
|
|
10
11
|
import './index.scss';
|
|
11
12
|
const LearningGoalStep = () => {
|
|
12
13
|
var _a, _b;
|
|
13
|
-
const { goToNextStep, answers, recordAnswer } = useProgressiveProfilingQuiz();
|
|
14
|
+
const { goToNextStep, answers, recordAnswer, currentStep } = useProgressiveProfilingQuiz();
|
|
14
15
|
const { formatMessage } = useIntl();
|
|
15
16
|
const selectedValue = (_b = (_a = answers[schema.questionId]) === null || _a === void 0 ? void 0 : _a.selectedValues[0]) !== null && _b !== void 0 ? _b : '';
|
|
16
17
|
const handleChange = (event) => {
|
|
17
18
|
recordAnswer(buildAnswerRecord(schema, [event.target.value], formatMessage));
|
|
19
|
+
trackProgressiveProfilingAnswerSelected({ host: window.location.origin, question: schema.questionId, answer: event.target.value, step: currentStep + 1 });
|
|
18
20
|
};
|
|
19
21
|
const handleOptionClick = (event) => {
|
|
20
22
|
var _a;
|
|
@@ -23,7 +25,12 @@ const LearningGoalStep = () => {
|
|
|
23
25
|
}
|
|
24
26
|
(_a = event.currentTarget.querySelector('input[type="radio"]')) === null || _a === void 0 ? void 0 : _a.click();
|
|
25
27
|
};
|
|
26
|
-
|
|
28
|
+
// Handles the click event for the "Continue" button, advancing to the next step and tracking the event.
|
|
29
|
+
const handleButtonClick = () => {
|
|
30
|
+
goToNextStep();
|
|
31
|
+
trackProgressiveProfilingNextButtonClick({ host: window.location.origin, step: currentStep + 1, question: schema.questionId });
|
|
32
|
+
};
|
|
33
|
+
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: handleButtonClick, disabled: !selectedValue, children: formatMessage(messages.continueButton) })] })] }));
|
|
27
34
|
};
|
|
28
35
|
export default LearningGoalStep;
|
|
29
36
|
//# sourceMappingURL=index.js.map
|
package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/index.tsx"],"names":[],"mappings":"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","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';\nimport { trackProgressiveProfilingAnswerSelected, trackProgressiveProfilingNextButtonClick } from '@src/tracking/trackers/progressiveProfiling';\n\nimport './index.scss';\n\nconst LearningGoalStep: React.FC = () => {\n const { goToNextStep, answers, recordAnswer, currentStep } = 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 trackProgressiveProfilingAnswerSelected({ host: window.location.origin, question: schema.questionId, answer: event.target.value, step: currentStep + 1 });\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 // Handles the click event for the \"Continue\" button, advancing to the next step and tracking the event.\n const handleButtonClick = () => {\n goToNextStep();\n trackProgressiveProfilingNextButtonClick({ host: window.location.origin, step: currentStep + 1, question: schema.questionId });\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={handleButtonClick} 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-motivation/index.js
CHANGED
|
@@ -8,10 +8,11 @@ import { buildAnswerRecord } from '../../../../../../widgets/ProgressiveProfilin
|
|
|
8
8
|
import stepMessages from '../messages';
|
|
9
9
|
import messages from './messages';
|
|
10
10
|
import schema from './schema';
|
|
11
|
+
import { trackProgressiveProfilingAnswerSelected, trackProgressiveProfilingNextButtonClick, trackProgressiveProfilingBackButtonClick } from '../../../../../../tracking/trackers/progressiveProfiling';
|
|
11
12
|
import './index.scss';
|
|
12
13
|
const LearningMotivationStep = () => {
|
|
13
14
|
var _a, _b;
|
|
14
|
-
const { goToPreviousStep, goToNextStep, answers, recordAnswer, } = useProgressiveProfilingQuiz();
|
|
15
|
+
const { goToPreviousStep, goToNextStep, answers, recordAnswer, currentStep } = useProgressiveProfilingQuiz();
|
|
15
16
|
const { formatMessage } = useIntl();
|
|
16
17
|
const selectedValues = (_b = (_a = answers[schema.questionId]) === null || _a === void 0 ? void 0 : _a.selectedValues) !== null && _b !== void 0 ? _b : [];
|
|
17
18
|
const handleChange = (event) => {
|
|
@@ -20,6 +21,7 @@ const LearningMotivationStep = () => {
|
|
|
20
21
|
? [...selectedValues, value]
|
|
21
22
|
: selectedValues.filter(selectedValue => selectedValue !== value);
|
|
22
23
|
recordAnswer(buildAnswerRecord(schema, nextValues, formatMessage));
|
|
24
|
+
trackProgressiveProfilingAnswerSelected({ host: window.location.origin, question: schema.questionId, answer: nextValues, step: currentStep + 1 });
|
|
23
25
|
};
|
|
24
26
|
const handleOptionClick = (event) => {
|
|
25
27
|
var _a;
|
|
@@ -28,7 +30,17 @@ const LearningMotivationStep = () => {
|
|
|
28
30
|
}
|
|
29
31
|
(_a = event.currentTarget.querySelector('input[type="checkbox"]')) === null || _a === void 0 ? void 0 : _a.click();
|
|
30
32
|
};
|
|
31
|
-
|
|
33
|
+
// Handles the click event for the "Continue" button, advancing to the next step and tracking the event.
|
|
34
|
+
const handleNextButtonClick = () => {
|
|
35
|
+
goToNextStep();
|
|
36
|
+
trackProgressiveProfilingNextButtonClick({ host: window.location.origin, step: currentStep + 1, question: schema.questionId });
|
|
37
|
+
};
|
|
38
|
+
// Handles the click event for the "Back" button, going to the previous step and tracking the event.
|
|
39
|
+
const handleBackButtonClick = () => {
|
|
40
|
+
goToPreviousStep();
|
|
41
|
+
trackProgressiveProfilingBackButtonClick({ host: window.location.origin, step: currentStep + 1, question: schema.questionId });
|
|
42
|
+
};
|
|
43
|
+
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: handleBackButtonClick, children: formatMessage(stepMessages.backButton) }), _jsx(Button, { onClick: handleNextButtonClick, disabled: selectedValues.length === 0, className: "ml-3", children: formatMessage(stepMessages.nextButton) })] })] }));
|
|
32
44
|
};
|
|
33
45
|
export default LearningMotivationStep;
|
|
34
46
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +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,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;
|
|
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,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;AAC9B,OAAO,EAAE,uCAAuC,EAAE,wCAAwC,EAAE,wCAAwC,EAAE,MAAM,6CAA6C,CAAC;AAE1L,OAAO,cAAc,CAAC;AAEtB,MAAM,sBAAsB,GAAa,GAAG,EAAE;;IAC5C,MAAM,EACJ,gBAAgB,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EACnE,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;QACnE,uCAAuC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,GAAG,CAAC,EAAE,CAAC,CAAC;IACpJ,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,wGAAwG;IACxG,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,YAAY,EAAE,CAAC;QACf,wCAAwC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,EAAE,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC;IACjI,CAAC,CAAC;IAEF,oGAAoG;IACpG,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,gBAAgB,EAAE,CAAC;QACnB,wCAAwC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,EAAE,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC;IACjI,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,qBAAqB,YAC7D,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,GAChC,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE,SAAS,EAAC,MAAM,YAC5F,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';\nimport { trackProgressiveProfilingAnswerSelected, trackProgressiveProfilingNextButtonClick, trackProgressiveProfilingBackButtonClick } from '@src/tracking/trackers/progressiveProfiling';\n\nimport './index.scss';\n\nconst LearningMotivationStep: React.FC = () => {\n const {\n goToPreviousStep, goToNextStep, answers, recordAnswer, currentStep\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 trackProgressiveProfilingAnswerSelected({ host: window.location.origin, question: schema.questionId, answer: nextValues, step: currentStep + 1 });\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 // Handles the click event for the \"Continue\" button, advancing to the next step and tracking the event.\n const handleNextButtonClick = () => {\n goToNextStep();\n trackProgressiveProfilingNextButtonClick({ host: window.location.origin, step: currentStep + 1, question: schema.questionId });\n };\n\n // Handles the click event for the \"Back\" button, going to the previous step and tracking the event.\n const handleBackButtonClick = () => {\n goToPreviousStep();\n trackProgressiveProfilingBackButtonClick({ host: window.location.origin, step: currentStep + 1, question: schema.questionId });\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={handleBackButtonClick}>\n {formatMessage(stepMessages.backButton)}\n </Button>\n <Button onClick={handleNextButtonClick} disabled={selectedValues.length === 0} className=\"ml-3\">\n {formatMessage(stepMessages.nextButton)}\n </Button>\n </Stepper.ActionRow>\n </>\n );\n};\n\nexport default LearningMotivationStep;\n"]}
|
|
@@ -6,6 +6,7 @@ import { useProgressiveProfilingQuiz } from '../../../../../../widgets/Progressi
|
|
|
6
6
|
import { useSaveAnswers } from '../../../../../../widgets/ProgressiveProfilingQuiz/data';
|
|
7
7
|
import { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/constants';
|
|
8
8
|
import messages from './messages';
|
|
9
|
+
import { trackProgressiveProfilingSubmitClick } from '../../../../../../tracking/trackers/progressiveProfiling';
|
|
9
10
|
const ViewResultsButton = () => {
|
|
10
11
|
const { formatMessage } = useIntl();
|
|
11
12
|
const { answers, setIsComplete, closeModal } = useProgressiveProfilingQuiz();
|
|
@@ -13,6 +14,7 @@ const ViewResultsButton = () => {
|
|
|
13
14
|
const navigate = useNavigate();
|
|
14
15
|
const handleClick = () => {
|
|
15
16
|
var _a, _b;
|
|
17
|
+
trackProgressiveProfilingSubmitClick({ host: window.location.origin });
|
|
16
18
|
saveAnswers(answers, { onSuccess: () => setIsComplete(true) });
|
|
17
19
|
closeModal();
|
|
18
20
|
const interest = (_b = (_a = answers[PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED]) === null || _a === void 0 ? void 0 : _a.selectedValues[0]) !== null && _b !== void 0 ? _b : '';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewResultsButton.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/ViewResultsButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,2BAA2B,EAAE,MAAM,wEAAwE,CAAC;AACrH,OAAO,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAC5E,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAC;AACxG,OAAO,QAAQ,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"ViewResultsButton.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/ViewResultsButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,2BAA2B,EAAE,MAAM,wEAAwE,CAAC;AACrH,OAAO,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAC5E,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAC;AACxG,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,oCAAoC,EAAE,MAAM,6CAA6C,CAAC;AAEnG,MAAM,iBAAiB,GAAa,GAAG,EAAE;IACvC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,2BAA2B,EAAE,CAAC;IAC7E,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,MAAM,WAAW,GAAG,GAAG,EAAE;;QACvB,oCAAoC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;QACvE,WAAW,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC/D,UAAU,EAAE,CAAC;QAEb,MAAM,QAAQ,GAAG,MAAA,MAAA,OAAO,CAAC,gCAAgC,CAAC,kBAAkB,CAAC,0CAAE,cAAc,CAAC,CAAC,CAAC,mCAAI,EAAE,CAAC;QACvG,MAAM,YAAY,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC1D,QAAQ,CAAC,wBAAwB,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAC9D,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,MAAM,IAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,YAC9C,aAAa,CAAC,QAAQ,CAAC,iBAAiB,CAAC,GACnC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import React from 'react';\nimport { Button } from '@openedx/paragon';\nimport { useNavigate } from 'react-router';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { useProgressiveProfilingQuiz } from '@src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';\nimport { useSaveAnswers } from '@src/widgets/ProgressiveProfilingQuiz/data';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport messages from './messages';\nimport { trackProgressiveProfilingSubmitClick } from '@src/tracking/trackers/progressiveProfiling';\n\nconst ViewResultsButton: React.FC = () => {\n const { formatMessage } = useIntl();\n const { answers, setIsComplete, closeModal } = useProgressiveProfilingQuiz();\n const { mutate: saveAnswers, isPending } = useSaveAnswers();\n\n const navigate = useNavigate();\n\n const handleClick = () => {\n trackProgressiveProfilingSubmitClick({ host: window.location.origin });\n saveAnswers(answers, { onSuccess: () => setIsComplete(true) });\n closeModal();\n\n const interest = answers[PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED]?.selectedValues[0] ?? '';\n const searchParams = new URLSearchParams({ q: interest });\n navigate(`/subscription-search?${searchParams.toString()}`);\n };\n\n return (\n <Button onClick={handleClick} disabled={isPending}>\n {formatMessage(messages.viewResultsButton)}\n </Button>\n );\n};\n\nexport default ViewResultsButton;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
-
import { Stepper, Button, Form } from '@openedx/paragon';
|
|
3
|
+
import { Stepper, Button, Form, Icon } from '@openedx/paragon';
|
|
4
4
|
import { useIntl } from '@openedx/frontend-base';
|
|
5
5
|
import { useProgressiveProfilingQuiz } from '../../../../../../widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';
|
|
6
6
|
import { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/constants';
|
|
@@ -11,6 +11,8 @@ import stepMessages from '../messages';
|
|
|
11
11
|
import messages from './messages';
|
|
12
12
|
import schema, { NOT_EMPLOYED_VALUE } from './schema';
|
|
13
13
|
import ViewResultsButton from './ViewResultsButton';
|
|
14
|
+
import { trackProgressiveProfilingAnswerSelected, trackProgressiveProfilingBackButtonClick } from '../../../../../../tracking/trackers/progressiveProfiling';
|
|
15
|
+
import { Search } from '@openedx/paragon/icons';
|
|
14
16
|
const EMPTY_AUTOSUGGEST_VALUE = {
|
|
15
17
|
userProvidedText: '',
|
|
16
18
|
selectionValue: '',
|
|
@@ -18,7 +20,7 @@ const EMPTY_AUTOSUGGEST_VALUE = {
|
|
|
18
20
|
};
|
|
19
21
|
const WorkStatusStep = () => {
|
|
20
22
|
var _a, _b;
|
|
21
|
-
const { goToPreviousStep, answers, recordAnswer, } = useProgressiveProfilingQuiz();
|
|
23
|
+
const { goToPreviousStep, answers, recordAnswer, currentStep, } = useProgressiveProfilingQuiz();
|
|
22
24
|
const { formatMessage } = useIntl();
|
|
23
25
|
const [inputValue, setInputValue] = useState(EMPTY_AUTOSUGGEST_VALUE);
|
|
24
26
|
const selectedValue = (_b = (_a = answers[schema.questionId]) === null || _a === void 0 ? void 0 : _a.selectedValues[0]) !== null && _b !== void 0 ? _b : '';
|
|
@@ -27,6 +29,7 @@ const WorkStatusStep = () => {
|
|
|
27
29
|
setInputValue(value);
|
|
28
30
|
if (value.selectionValue) {
|
|
29
31
|
recordAnswer(buildAnswerRecord(schema, [value.selectionValue], formatMessage));
|
|
32
|
+
trackProgressiveProfilingAnswerSelected({ host: window.location.origin, question: schema.questionId, answer: [value.selectionValue], step: currentStep + 1 });
|
|
30
33
|
}
|
|
31
34
|
};
|
|
32
35
|
const handleNotEmployedToggle = (event) => {
|
|
@@ -35,8 +38,14 @@ const WorkStatusStep = () => {
|
|
|
35
38
|
setInputValue(EMPTY_AUTOSUGGEST_VALUE);
|
|
36
39
|
}
|
|
37
40
|
recordAnswer(buildAnswerRecord(schema, checked ? [NOT_EMPLOYED_VALUE] : [], formatMessage));
|
|
41
|
+
trackProgressiveProfilingAnswerSelected({ host: window.location.origin, question: schema.questionId, answer: checked ? [NOT_EMPLOYED_VALUE] : [], step: currentStep + 1 });
|
|
38
42
|
};
|
|
39
|
-
|
|
43
|
+
// Handles the click event for the "Back" button, going to the previous step and tracking the event.
|
|
44
|
+
const handleBackButtonClick = () => {
|
|
45
|
+
goToPreviousStep();
|
|
46
|
+
trackProgressiveProfilingBackButtonClick({ host: window.location.origin, step: currentStep + 1, question: schema.questionId });
|
|
47
|
+
};
|
|
48
|
+
return (_jsxs(_Fragment, { children: [_jsxs(BaseStep, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.WORK_STATUS, title: formatMessage(messages.title), index: 3, children: [_jsx("h4", { children: formatMessage(messages.question) }), _jsx("p", { children: formatMessage(messages.subtitle) }), _jsx(Form.Autosuggest, { name: "work-status-autosuggest", value: inputValue, onChange: handleJobSelect, className: "h-50", placeholder: "Search for a job title", trailingElement: (_jsx(Icon, { src: Search })), children: jobsList === null || jobsList === void 0 ? void 0 : jobsList.map(job => (_jsx(Form.AutosuggestOption, { id: job.jobTitle.replaceAll(' ', '-').toLowerCase(), children: job.jobTitle }, job.jobTitle))) }), _jsx(Form.Checkbox, { className: "mt-6", checked: isNotEmployed, onChange: handleNotEmployedToggle, children: _jsxs("span", { className: !isNotEmployed ? 'text-muted' : '', children: [" ", formatMessage(messages.notEmployedOption), " "] }) })] }), _jsxs(Stepper.ActionRow, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.WORK_STATUS, children: [_jsx(Button, { variant: "outline-primary", onClick: handleBackButtonClick, children: formatMessage(stepMessages.backButton) }), _jsx(ViewResultsButton, {})] })] }));
|
|
40
49
|
};
|
|
41
50
|
export default WorkStatusStep;
|
|
42
51
|
//# sourceMappingURL=index.js.map
|
package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { Stepper, Button, Form, Icon } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport { useProgressiveProfilingQuiz } from '@src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport { AutosuggestValue } from '@src/widgets/ProgressiveProfilingQuiz/data';\nimport { buildAnswerRecord } from '@src/widgets/ProgressiveProfilingQuiz/data/schemaUtils';\nimport jobsList from '@src/widgets/ProgressiveProfilingQuiz/data/jobsList';\nimport BaseStep from '../BaseStep';\nimport stepMessages from '../messages';\nimport messages from './messages';\nimport schema, { NOT_EMPLOYED_VALUE } from './schema';\nimport ViewResultsButton from './ViewResultsButton';\nimport { trackProgressiveProfilingAnswerSelected, trackProgressiveProfilingBackButtonClick } from '@src/tracking/trackers/progressiveProfiling';\nimport { Search } from '@openedx/paragon/icons';\n\nconst EMPTY_AUTOSUGGEST_VALUE: AutosuggestValue = {\n userProvidedText: '',\n selectionValue: '',\n selectionId: '',\n};\n\nconst WorkStatusStep: React.FC = () => {\n const {\n goToPreviousStep, answers, recordAnswer, currentStep,\n } = useProgressiveProfilingQuiz();\n const { formatMessage } = useIntl();\n\n const [inputValue, setInputValue] = useState<AutosuggestValue>(EMPTY_AUTOSUGGEST_VALUE);\n\n const selectedValue = answers[schema.questionId]?.selectedValues[0] ?? '';\n const isNotEmployed = selectedValue === NOT_EMPLOYED_VALUE;\n\n const handleJobSelect = (value: AutosuggestValue) => {\n setInputValue(value);\n\n if (value.selectionValue) {\n recordAnswer(buildAnswerRecord(schema, [value.selectionValue], formatMessage));\n trackProgressiveProfilingAnswerSelected({ host: window.location.origin, question: schema.questionId, answer: [value.selectionValue], step: currentStep + 1 });\n }\n };\n\n const handleNotEmployedToggle = (event: React.ChangeEvent<HTMLInputElement>) => {\n const { checked } = event.target;\n\n if (checked) {\n setInputValue(EMPTY_AUTOSUGGEST_VALUE);\n }\n recordAnswer(buildAnswerRecord(schema, checked ? [NOT_EMPLOYED_VALUE] : [], formatMessage));\n trackProgressiveProfilingAnswerSelected({ host: window.location.origin, question: schema.questionId, answer: checked ? [NOT_EMPLOYED_VALUE] : [], step: currentStep + 1 });\n };\n\n // Handles the click event for the \"Back\" button, going to the previous step and tracking the event.\n const handleBackButtonClick = () => {\n goToPreviousStep();\n trackProgressiveProfilingBackButtonClick({ host: window.location.origin, step: currentStep + 1, question: schema.questionId });\n };\n\n return (\n <>\n <BaseStep\n eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.WORK_STATUS}\n title={formatMessage(messages.title)}\n index={3}\n >\n <h4>\n {formatMessage(messages.question)}\n </h4>\n <p>\n {formatMessage(messages.subtitle)}\n </p>\n <Form.Autosuggest\n name=\"work-status-autosuggest\"\n value={inputValue}\n onChange={handleJobSelect}\n className=\"h-50\"\n placeholder=\"Search for a job title\"\n trailingElement={(\n <Icon\n src={Search}\n />\n )}\n >\n {jobsList?.map(job => (\n <Form.AutosuggestOption\n key={job.jobTitle}\n id={job.jobTitle.replaceAll(' ', '-').toLowerCase()}\n >\n {job.jobTitle}\n </Form.AutosuggestOption>\n ))}\n </Form.Autosuggest>\n <Form.Checkbox\n className=\"mt-6\"\n checked={isNotEmployed}\n onChange={handleNotEmployedToggle}\n >\n <span className={!isNotEmployed ? 'text-muted' : ''}> {formatMessage(messages.notEmployedOption)} </span>\n </Form.Checkbox>\n </BaseStep>\n <Stepper.ActionRow eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.WORK_STATUS}>\n <Button variant=\"outline-primary\" onClick={handleBackButtonClick}>\n {formatMessage(stepMessages.backButton)}\n </Button>\n <ViewResultsButton />\n </Stepper.ActionRow>\n </>\n );\n};\n\nexport default WorkStatusStep;\n"]}
|
package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/messages.js
CHANGED
|
@@ -17,7 +17,7 @@ const messages = defineMessages({
|
|
|
17
17
|
},
|
|
18
18
|
notEmployedOption: {
|
|
19
19
|
id: 'progressiveProfilingQuiz.stepper.workStatus.notEmployedOption',
|
|
20
|
-
defaultMessage: '
|
|
20
|
+
defaultMessage: 'I’m not employed',
|
|
21
21
|
description: 'Checkbox label for indicating the user is not currently employed, in the work status step of the progressive profiling quiz',
|
|
22
22
|
},
|
|
23
23
|
viewResultsButton: {
|
package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/messages.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,KAAK,EAAE;QACL,EAAE,EAAE,mDAAmD;QACvD,cAAc,EAAE,aAAa;QAC7B,WAAW,EAAE,kEAAkE;KAChF;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,sDAAsD;QAC1D,cAAc,EAAE,4BAA4B;QAC5C,WAAW,EAAE,0EAA0E;KACxF;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,sDAAsD;QAC1D,cAAc,EAAE,iDAAiD;QACjE,WAAW,EAAE,kGAAkG;KAChH;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,+DAA+D;QACnE,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,KAAK,EAAE;QACL,EAAE,EAAE,mDAAmD;QACvD,cAAc,EAAE,aAAa;QAC7B,WAAW,EAAE,kEAAkE;KAChF;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,sDAAsD;QAC1D,cAAc,EAAE,4BAA4B;QAC5C,WAAW,EAAE,0EAA0E;KACxF;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,sDAAsD;QAC1D,cAAc,EAAE,iDAAiD;QACjE,WAAW,EAAE,kGAAkG;KAChH;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,+DAA+D;QACnE,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,6HAA6H;KAC3I;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,+DAA+D;QACnE,cAAc,EAAE,cAAc;QAC9B,WAAW,EAAE,sFAAsF;KACpG;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n title: {\n id: 'progressiveProfilingQuiz.stepper.workStatus.title',\n defaultMessage: 'Work Status',\n description: 'Title for the work status step of the progressive profiling quiz',\n },\n question: {\n id: 'progressiveProfilingQuiz.stepper.workStatus.question',\n defaultMessage: 'What is your current role?',\n description: 'Question asked in the work status step of the progressive profiling quiz',\n },\n subtitle: {\n id: 'progressiveProfilingQuiz.stepper.workStatus.subtitle',\n defaultMessage: 'Find the job title that best matches your role.',\n description: 'Subtitle text shown below the question in the work status step of the progressive profiling quiz',\n },\n notEmployedOption: {\n id: 'progressiveProfilingQuiz.stepper.workStatus.notEmployedOption',\n defaultMessage: 'I’m not employed',\n description: 'Checkbox label for indicating the user is not currently employed, in the work status step of the progressive profiling quiz',\n },\n viewResultsButton: {\n id: 'progressiveProfilingQuiz.stepper.workStatus.viewResultsButton',\n defaultMessage: 'View Results',\n description: 'Label for the button to complete the quiz and view results from the work status step',\n },\n});\n\nexport default messages;\n"]}
|