@edx/frontend-app-subscription-learner-dashboard 1.53.0 → 1.53.2
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/containers/ProductCard/index.js +3 -2
- package/dist/containers/ProductCard/index.js.map +1 -1
- package/dist/containers/ProductCard/messages.d.ts +5 -0
- package/dist/containers/ProductCard/messages.js +5 -0
- package/dist/containers/ProductCard/messages.js.map +1 -1
- package/dist/containers/ProgramDashboard/ProgramsList/ProgramListCard.js +2 -2
- package/dist/containers/ProgramDashboard/ProgramsList/ProgramListCard.js.map +1 -1
- package/dist/containers/ProgramDashboard/ProgramsList/index.scss +5 -18
- package/dist/hooks/usePopularCoursesAndPrograms.js +3 -2
- package/dist/hooks/usePopularCoursesAndPrograms.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingElements/ProgressiveProfilingElements.js +10 -2
- package/dist/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingElements/ProgressiveProfilingElements.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingElements/messages.js +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingElements/messages.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/index.js +17 -2
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useIntl } from '@openedx/frontend-base';
|
|
3
3
|
import { Card, Hyperlink, Icon } from '@openedx/paragon';
|
|
4
|
-
import { Timelapse, Speed } from '@openedx/paragon/icons';
|
|
4
|
+
import { Timelapse, Speed, FormatListNumbered } from '@openedx/paragon/icons';
|
|
5
5
|
import './index.scss';
|
|
6
6
|
import cardFallbackImg from '@openedx/brand-openedx/paragon/images/card-imagecap-fallback.png';
|
|
7
7
|
import messages from './messages';
|
|
@@ -20,6 +20,7 @@ const getIdentifyingUrlPath = (marketingUrl) => {
|
|
|
20
20
|
export const ProductCard = ({ item, isLoading }) => {
|
|
21
21
|
const { formatMessage } = useIntl();
|
|
22
22
|
const identifyingUrlPath = getIdentifyingUrlPath(item.marketing_url);
|
|
23
|
-
|
|
23
|
+
const totalProgramCourses = item.product === 'program' && item.subject && item.subject.length ? item.subject.length : 0;
|
|
24
|
+
return (_jsxs(Card, { className: "shadow-sm d-flex flex-column rounded w-100 overflow-hidden align-items-stretch card-container", variant: "light", "data-testid": "product-card", isLoading: isLoading, as: identifyingUrlPath ? Hyperlink : 'div', destination: identifyingUrlPath ? `/subscription-enroll/${identifyingUrlPath}` : undefined, children: [_jsx(Card.Header, { title: item.product === 'program' ? `${item.content_type}` : 'Course', className: "pb-2 pt-2 bg-light-500 text-primary-500 content-type", size: "xs" }), _jsx("div", { className: "position-relative image-container", children: _jsx(Card.ImageCap, { src: item.url || cardFallbackImg, srcAlt: `${item.title} main-image`, "data-testid": "product-card-image", logoSrc: item.thumbnail || '', logoAlt: `${item.title} thumbnail-image` }) }), _jsx(Card.Header, { title: item.title, subtitle: item.partner, size: "sm", className: "product-card-title" }), _jsxs(Card.Section, { className: "d-flex flex-column flex-grow-1 overflow-hidden mt-5", children: [totalProgramCourses > 0 ? (_jsxs("span", { className: "d-flex align-items-center mb-2", children: [_jsx(Icon, { src: FormatListNumbered, className: "mr-2" }), _jsx("span", { children: formatMessage(messages.courses, { count: totalProgramCourses }) })] })) : null, typeof item.weeks_to_complete === 'number' && (_jsxs("span", { className: "d-flex align-items-center mb-2", children: [_jsx(Icon, { src: Timelapse, className: "mr-2" }), _jsx("span", { children: formatMessage(messages.weeksToComplete, { count: item.weeks_to_complete }) })] })), item.level ? (_jsxs("span", { className: `d-flex align-items-center${typeof item.weeks_to_complete === 'number' ? ' mt-3' : ''}`, children: [_jsx(Icon, { src: Speed, className: "mr-2" }), _jsx("span", { children: formatMessage(messages.level, { level: item.level }) })] })) : null] })] }));
|
|
24
25
|
};
|
|
25
26
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/ProductCard/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/ProductCard/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC } from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport { Card, Hyperlink, Icon } from '@openedx/paragon';\nimport { Timelapse, Speed, FormatListNumbered } from '@openedx/paragon/icons';\nimport './index.scss';\nimport cardFallbackImg from '@openedx/brand-openedx/paragon/images/card-imagecap-fallback.png';\nimport { ProductCardProps } from './data/types';\nimport messages from './messages';\n\nconst getIdentifyingUrlPath = (marketingUrl: string): string | null => {\n if (!marketingUrl) {\n return null;\n }\n try {\n const path = new URL(marketingUrl, window.location.origin).pathname.replace(/^\\//, '');\n return path || null;\n } catch {\n return null;\n }\n};\n\nexport const ProductCard: FC<ProductCardProps> = ({ item, isLoading }) => {\n const { formatMessage } = useIntl();\n const identifyingUrlPath = getIdentifyingUrlPath(item.marketing_url);\n const totalProgramCourses = item.product === 'program' && item.subject && item.subject.length ? item.subject.length : 0;\n\n return (\n <Card\n className=\"shadow-sm d-flex flex-column rounded w-100 overflow-hidden align-items-stretch card-container\"\n variant=\"light\"\n data-testid=\"product-card\"\n isLoading={isLoading}\n as={identifyingUrlPath ? Hyperlink : 'div'}\n destination={identifyingUrlPath ? `/subscription-enroll/${identifyingUrlPath}` : undefined}\n >\n <Card.Header title={item.product === 'program' ? `${item.content_type}` : 'Course'} className=\"pb-2 pt-2 bg-light-500 text-primary-500 content-type\" size=\"xs\" />\n\n <div className=\"position-relative image-container\">\n <Card.ImageCap\n src={item.url || cardFallbackImg}\n srcAlt={`${item.title} main-image`}\n data-testid=\"product-card-image\"\n logoSrc={item.thumbnail || ''}\n logoAlt={`${item.title} thumbnail-image`}\n />\n </div>\n\n <Card.Header title={item.title} subtitle={item.partner} size=\"sm\" className=\"product-card-title\" />\n\n <Card.Section className=\"d-flex flex-column flex-grow-1 overflow-hidden mt-5\">\n {totalProgramCourses > 0 ? (\n <span className=\"d-flex align-items-center mb-2\">\n <Icon src={FormatListNumbered} className=\"mr-2\" />\n <span>{formatMessage(messages.courses, { count: totalProgramCourses })}</span>\n </span>\n ) : null}\n {typeof item.weeks_to_complete === 'number' && (\n <span className=\"d-flex align-items-center mb-2\">\n <Icon src={Timelapse} className=\"mr-2\" />\n <span>{formatMessage(messages.weeksToComplete, { count: item.weeks_to_complete })}</span>\n </span>\n )}\n {item.level ? (\n <span className={`d-flex align-items-center${typeof item.weeks_to_complete === 'number' ? ' mt-3' : ''}`}>\n <Icon src={Speed} className=\"mr-2\" />\n <span>{formatMessage(messages.level, { level: item.level })}</span>\n </span>\n ) : null}\n </Card.Section>\n\n </Card>\n );\n};\n"]}
|
|
@@ -10,6 +10,11 @@ const messages = defineMessages({
|
|
|
10
10
|
defaultMessage: '{level} level',
|
|
11
11
|
description: 'Label for the level field',
|
|
12
12
|
},
|
|
13
|
+
courses: {
|
|
14
|
+
id: 'subs-dash.courses.label',
|
|
15
|
+
defaultMessage: '{count, plural, one {# course} other {# courses}}',
|
|
16
|
+
description: 'Label for the courses field',
|
|
17
|
+
},
|
|
13
18
|
});
|
|
14
19
|
export default messages;
|
|
15
20
|
//# sourceMappingURL=messages.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/ProductCard/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,eAAe,EAAE;QACf,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,uEAAuE;QACvF,WAAW,EAAE,uCAAuC;KACrD;IACD,KAAK,EAAE;QACL,EAAE,EAAE,uBAAuB;QAC3B,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,2BAA2B;KACzC;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n weeksToComplete: {\n id: 'subs-dash.weeksToComplete.label',\n defaultMessage: '{count, plural, one {# week to complete} other {# weeks to complete}}',\n description: 'Label for the weeks to complete field',\n },\n level: {\n id: 'subs-dash.level.label',\n defaultMessage: '{level} level',\n description: 'Label for the level field',\n },\n});\n\nexport default messages;\n"]}
|
|
1
|
+
{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/ProductCard/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,eAAe,EAAE;QACf,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,uEAAuE;QACvF,WAAW,EAAE,uCAAuC;KACrD;IACD,KAAK,EAAE;QACL,EAAE,EAAE,uBAAuB;QAC3B,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,2BAA2B;KACzC;IACD,OAAO,EAAE;QACP,EAAE,EAAE,yBAAyB;QAC7B,cAAc,EAAE,mDAAmD;QACnE,WAAW,EAAE,6BAA6B;KAC3C;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n weeksToComplete: {\n id: 'subs-dash.weeksToComplete.label',\n defaultMessage: '{count, plural, one {# week to complete} other {# weeks to complete}}',\n description: 'Label for the weeks to complete field',\n },\n level: {\n id: 'subs-dash.level.label',\n defaultMessage: '{level} level',\n description: 'Label for the level field',\n },\n courses: {\n id: 'subs-dash.courses.label',\n defaultMessage: '{count, plural, one {# course} other {# courses}}',\n description: 'Label for the courses field',\n },\n});\n\nexport default messages;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Link } from 'react-router-dom';
|
|
3
|
-
import { breakpoints, useWindowSize, Card,
|
|
3
|
+
import { breakpoints, useWindowSize, Card, } from '@openedx/paragon';
|
|
4
4
|
import programCardFallbackImage from '../assets/program-card-fallback.svg';
|
|
5
5
|
import ProgressCategoryBubbles from './ProgressCategoryBubbles';
|
|
6
6
|
const ProgramListCard = ({ program, }) => {
|
|
@@ -36,7 +36,7 @@ const ProgramListCard = ({ program, }) => {
|
|
|
36
36
|
}
|
|
37
37
|
return '';
|
|
38
38
|
};
|
|
39
|
-
return (_jsxs(Card, { className: "program-list-card mb-4 mr-4", isClickable: true, as: Link, to: `/subscription-program-progress/${program.uuid}`, "data-testid": "program-list-card", children: [_jsx(Card.ImageCap, { src: getBannerImageURL() || programCardFallbackImage, srcAlt: `program card image for ${program.title}`, logoSrc: getOrgImageUrl(), logoAlt: program.authoringOrganizations && ((_a = program.authoringOrganizations[0]) === null || _a === void 0 ? void 0 : _a.key), className: "banner-image" }), _jsx(Card.Section, { className: "pb-0
|
|
39
|
+
return (_jsxs(Card, { className: "program-list-card mb-4 mr-4", isClickable: true, as: Link, to: `/subscription-program-progress/${program.uuid}`, "data-testid": "program-list-card", children: [_jsx(Card.ImageCap, { src: getBannerImageURL() || programCardFallbackImage, srcAlt: `program card image for ${program.title}`, logoSrc: getOrgImageUrl(), logoAlt: program.authoringOrganizations && ((_a = program.authoringOrganizations[0]) === null || _a === void 0 ? void 0 : _a.key), className: "banner-image" }), _jsx(Card.Section, { className: "pb-0", children: _jsx("h3", { children: program.title }) }), _jsxs(Card.Section, { className: "d-flex flex-column flex-grow-1 overflow-hidden", children: [program.authoringOrganizations && (_jsx("span", { className: "d-flex align-items-center mb-1", children: program.authoringOrganizations.map(org => org.key).join(', ') })), _jsx("span", { className: "d-flex align-items-center program-type", children: program.type })] }), _jsx(Card.Section, { className: "pt-0", children: _jsx(ProgressCategoryBubbles, { inProgress: program.progress.inProgress, notStarted: program.progress.notStarted, completed: program.progress.completed }) })] }));
|
|
40
40
|
};
|
|
41
41
|
export default ProgramListCard;
|
|
42
42
|
//# sourceMappingURL=ProgramListCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgramListCard.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramsList/ProgramListCard.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EACL,WAAW,EACX,aAAa,EACb,IAAI,
|
|
1
|
+
{"version":3,"file":"ProgramListCard.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramsList/ProgramListCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Link } from 'react-router-dom';\nimport {\n breakpoints,\n useWindowSize,\n Card,\n} from '@openedx/paragon';\nimport programCardFallbackImage from '../assets/program-card-fallback.svg';\nimport { ProgramCardProps } from '../data/types';\nimport ProgressCategoryBubbles from './ProgressCategoryBubbles';\n\nconst ProgramListCard: React.FC<ProgramCardProps> = ({\n program,\n}) => {\n const { width: windowWidth } = useWindowSize();\n\n const getBannerImageURL = (): string => {\n let imageURL = '';\n // We need to check that the breakpoint value exists before using it\n // Otherwise TypeScript will flag it as it can potentially be undefined in Paragon\n if (program.bannerImage && Object.keys(program.bannerImage).length > 0) {\n if (!windowWidth) {\n return program.bannerImage.medium.url;\n }\n\n if (typeof breakpoints.large.minWidth === 'number' && windowWidth >= breakpoints.large.minWidth) {\n imageURL = program.bannerImage.large.url;\n } else if (typeof breakpoints.medium.minWidth === 'number' && windowWidth >= breakpoints.medium.minWidth) {\n imageURL = program.bannerImage.medium.url;\n } else if (typeof breakpoints.small.minWidth === 'number' && windowWidth >= breakpoints.small.minWidth) {\n imageURL = program.bannerImage.small.url;\n } else {\n imageURL = program.bannerImage.xSmall.url;\n }\n }\n return imageURL;\n };\n\n const getOrgImageUrl = (): string => {\n if (program.authoringOrganizations?.length === 1 && program.authoringOrganizations[0].logoImageUrl) {\n return program.authoringOrganizations[0].logoImageUrl;\n }\n return '';\n };\n\n return (\n <Card\n className=\"program-list-card mb-4 mr-4\"\n isClickable\n as={Link}\n to={`/subscription-program-progress/${program.uuid}`}\n data-testid=\"program-list-card\"\n >\n <Card.ImageCap\n src={getBannerImageURL() || programCardFallbackImage}\n srcAlt={`program card image for ${program.title}`}\n logoSrc={getOrgImageUrl()}\n logoAlt={program.authoringOrganizations && program.authoringOrganizations[0]?.key}\n className=\"banner-image\"\n />\n <Card.Section className=\"pb-0\">\n <h3>{program.title}</h3>\n </Card.Section>\n <Card.Section className=\"d-flex flex-column flex-grow-1 overflow-hidden\">\n {program.authoringOrganizations && (\n <span className=\"d-flex align-items-center mb-1\">\n {program.authoringOrganizations.map(org => org.key).join(', ')}\n </span>\n )}\n <span className=\"d-flex align-items-center program-type\">\n {program.type}\n </span>\n </Card.Section>\n <Card.Section className=\"pt-0\">\n <ProgressCategoryBubbles\n inProgress={program.progress.inProgress}\n notStarted={program.progress.notStarted}\n completed={program.progress.completed}\n />\n </Card.Section>\n </Card>\n );\n};\nexport default ProgramListCard;\n"]}
|
|
@@ -1,21 +1,8 @@
|
|
|
1
|
-
// The current Truncate component in Paragon is deprecated and soon to be removed
|
|
2
|
-
// See https://github.com/openedx/paragon/issues/3311 for developments on this issue
|
|
3
|
-
|
|
4
|
-
.truncate-text-1 {
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
display: -webkit-box;
|
|
7
|
-
-webkit-box-orient: vertical;
|
|
8
|
-
-webkit-line-clamp: 1;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.truncate-text-2 {
|
|
12
|
-
overflow: hidden;
|
|
13
|
-
display: -webkit-box;
|
|
14
|
-
-webkit-box-orient: vertical;
|
|
15
|
-
-webkit-line-clamp: 2;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
1
|
.banner-image > .pgn__card-logo-cap {
|
|
19
2
|
width: 12rem;
|
|
20
3
|
height: 4.7rem;
|
|
21
|
-
}
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.program-type {
|
|
7
|
+
font-size: 0.75rem;
|
|
8
|
+
}
|
|
@@ -23,7 +23,7 @@ export const usePopularCoursesAndProgramsData = (searchClient, enabled, productT
|
|
|
23
23
|
queryFn: () => __awaiter(void 0, void 0, void 0, function* () {
|
|
24
24
|
const hits = yield fetchPopularProducts(searchClient, productType, 4);
|
|
25
25
|
return hits.map((hit) => {
|
|
26
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
26
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
27
27
|
const hitDetails = hit;
|
|
28
28
|
return {
|
|
29
29
|
objectID: hit.objectID,
|
|
@@ -32,11 +32,12 @@ export const usePopularCoursesAndProgramsData = (searchClient, enabled, productT
|
|
|
32
32
|
url: (_g = (_f = hitDetails.card_image_url) !== null && _f !== void 0 ? _f : hitDetails.image_url) !== null && _g !== void 0 ? _g : '',
|
|
33
33
|
marketing_url: (_h = hitDetails.marketing_url) !== null && _h !== void 0 ? _h : '',
|
|
34
34
|
thumbnail: (_j = hitDetails.organization_logo_override) !== null && _j !== void 0 ? _j : '',
|
|
35
|
-
content_type: (_l = (_k = hitDetails.
|
|
35
|
+
content_type: (_l = (_k = hitDetails.program_type) !== null && _k !== void 0 ? _k : hitDetails.product) !== null && _l !== void 0 ? _l : 'Course',
|
|
36
36
|
product: productType,
|
|
37
37
|
partner: (_m = hitDetails.partner) !== null && _m !== void 0 ? _m : '',
|
|
38
38
|
weeks_to_complete: (_o = hitDetails.weeks_to_complete) !== null && _o !== void 0 ? _o : undefined,
|
|
39
39
|
level: (_p = hitDetails.level) !== null && _p !== void 0 ? _p : undefined,
|
|
40
|
+
subject: (_q = hitDetails.subject) !== null && _q !== void 0 ? _q : undefined,
|
|
40
41
|
};
|
|
41
42
|
});
|
|
42
43
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePopularCoursesAndPrograms.js","sourceRoot":"","sources":["../../src/hooks/usePopularCoursesAndPrograms.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,uBAAuB,CAAC;AAGjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAG/D,iFAAiF;AACjF,oDAAoD;AAEpD,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,GAAG,EAAE,CAAC,QAAQ,CAAU;IACxB,QAAQ,EAAE,CAAC,KAAa,EAAE,IAAc,EAAE,EAAE,CAC1C,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAU;IACvD,OAAO,EAAE,CAAC,KAAa,EAAE,IAAc,EAAE,IAAY,EAAE,EAAE,CACvD,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAU;IAC5D,OAAO,EAAE,CAAC,WAAwB,EAAE,KAAa,EAAE,EAAE,CACnD,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,CAAU;CAC9D,CAAC;AAEF,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAC9C,YAAiC,EACjC,OAAgB,EAChB,cAA2B,mBAAmB,EACX,EAAE,CACrC,QAAQ,CAAC;IACP,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5C,OAAO,EAAE,GAAS,EAAE;QAClB,MAAM,IAAI,GAAG,MAAM,oBAAoB,CAAC,YAAa,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;QACvE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAmB,EAAE;;YACvC,MAAM,UAAU,GAAG,
|
|
1
|
+
{"version":3,"file":"usePopularCoursesAndPrograms.js","sourceRoot":"","sources":["../../src/hooks/usePopularCoursesAndPrograms.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,uBAAuB,CAAC;AAGjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAG/D,iFAAiF;AACjF,oDAAoD;AAEpD,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,GAAG,EAAE,CAAC,QAAQ,CAAU;IACxB,QAAQ,EAAE,CAAC,KAAa,EAAE,IAAc,EAAE,EAAE,CAC1C,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAU;IACvD,OAAO,EAAE,CAAC,KAAa,EAAE,IAAc,EAAE,IAAY,EAAE,EAAE,CACvD,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAU;IAC5D,OAAO,EAAE,CAAC,WAAwB,EAAE,KAAa,EAAE,EAAE,CACnD,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,CAAU;CAC9D,CAAC;AAEF,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAC9C,YAAiC,EACjC,OAAgB,EAChB,cAA2B,mBAAmB,EACX,EAAE,CACrC,QAAQ,CAAC;IACP,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5C,OAAO,EAAE,GAAS,EAAE;QAClB,MAAM,IAAI,GAAG,MAAM,oBAAoB,CAAC,YAAa,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;QACvE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAmB,EAAE;;YACvC,MAAM,UAAU,GAAG,GAelB,CAAC;YAEF,OAAO;gBACL,QAAQ,EAAE,GAAG,CAAC,QAAQ;gBACtB,KAAK,EAAE,MAAA,MAAA,GAAG,CAAC,KAAK,mCAAI,GAAG,CAAC,IAAI,mCAAI,UAAU;gBAC1C,mBAAmB,EAAE,MAAA,MAAA,MAAA,UAAU,CAAC,mBAAmB,mCAAI,UAAU,CAAC,iBAAiB,mCAAI,UAAU,CAAC,WAAW,mCAAI,EAAE;gBACnH,GAAG,EAAE,MAAA,MAAA,UAAU,CAAC,cAAc,mCAAI,UAAU,CAAC,SAAS,mCAAI,EAAE;gBAC5D,aAAa,EAAE,MAAA,UAAU,CAAC,aAAa,mCAAI,EAAE;gBAC7C,SAAS,EAAE,MAAA,UAAU,CAAC,0BAA0B,mCAAI,EAAE;gBACtD,YAAY,EAAE,MAAA,MAAA,UAAU,CAAC,YAAY,mCAAI,UAAU,CAAC,OAAO,mCAAI,QAAQ;gBACvE,OAAO,EAAE,WAAW;gBACpB,OAAO,EAAE,MAAA,UAAU,CAAC,OAAO,mCAAI,EAAE;gBACjC,iBAAiB,EAAE,MAAA,UAAU,CAAC,iBAAiB,mCAAI,SAAS;gBAC5D,KAAK,EAAE,MAAA,UAAU,CAAC,KAAK,mCAAI,SAAS;gBACpC,OAAO,EAAE,MAAA,UAAU,CAAC,OAAO,mCAAI,SAAS;aACzC,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAA;IACD,OAAO,EAAE,CAAC,CAAC,YAAY,IAAI,OAAO;IAClC,SAAS,EAAE,IAAI,GAAG,EAAE,GAAG,EAAE;CAC1B,CAAC,CAAC","sourcesContent":["import { useQuery, UseQueryResult } from '@tanstack/react-query';\nimport { SearchClient } from 'algoliasearch';\nimport { ProductType } from '@src/types/types';\nimport { PRODUCT_TYPE_COURSE } from '@src/constants';\nimport { fetchPopularProducts } from '@src/utils/algoliaUtils';\nimport { ProductCardItem } from '@src/containers/ProductCard/data/types';\n\n// ─── Query key factories ──────────────────────────────────────────────────────\n// Centralised so cache invalidation is never a typo\n\nexport const searchKeys = {\n all: ['search'] as const,\n programs: (query: string, tags: string[]) =>\n [...searchKeys.all, 'programs', query, tags] as const,\n courses: (query: string, tags: string[], page: number) =>\n [...searchKeys.all, 'courses', query, tags, page] as const,\n popular: (productType: ProductType, limit: number) =>\n [...searchKeys.all, 'popular', productType, limit] as const,\n};\n\nexport const usePopularCoursesAndProgramsData = (\n searchClient: SearchClient | null,\n enabled: boolean,\n productType: ProductType = PRODUCT_TYPE_COURSE\n): UseQueryResult<ProductCardItem[]> =>\n useQuery({\n queryKey: searchKeys.popular(productType, 4),\n queryFn: async () => {\n const hits = await fetchPopularProducts(searchClient!, productType, 4);\n return hits.map((hit): ProductCardItem => {\n const hitDetails = hit as {\n short_description?: string,\n primary_description?: string,\n description?: string,\n marketing_url?: string,\n image_url?: string,\n card_image_url?: string,\n organization_logo_override?: string,\n content_type?: string,\n program_type?: string,\n product?: string,\n partner?: string,\n weeks_to_complete?: number,\n level?: string,\n subject?: string,\n };\n\n return {\n objectID: hit.objectID,\n title: hit.title ?? hit.name ?? 'Untitled',\n primary_description: hitDetails.primary_description ?? hitDetails.short_description ?? hitDetails.description ?? '',\n url: hitDetails.card_image_url ?? hitDetails.image_url ?? '',\n marketing_url: hitDetails.marketing_url ?? '',\n thumbnail: hitDetails.organization_logo_override ?? '',\n content_type: hitDetails.program_type ?? hitDetails.product ?? 'Course',\n product: productType,\n partner: hitDetails.partner ?? '',\n weeks_to_complete: hitDetails.weeks_to_complete ?? undefined,\n level: hitDetails.level ?? undefined,\n subject: hitDetails.subject ?? undefined,\n };\n });\n },\n enabled: !!searchClient && enabled,\n staleTime: 1000 * 60 * 10,\n });\n"]}
|
|
@@ -7,13 +7,21 @@ import ActionButton from '../../../containers/CourseCard/components/CourseCardAc
|
|
|
7
7
|
import { useProgressiveProfilingQuiz } from '../ProgressiveProfilingQuizProvider';
|
|
8
8
|
import { trackProgressiveProfilingDashboardBannerClick } from '../../../tracking/trackers/progressiveProfiling';
|
|
9
9
|
const ProgressiveProfilingElements = ({ progressiveProfileStatus, orientation }) => {
|
|
10
|
-
|
|
10
|
+
var _a, _b, _c, _d, _e;
|
|
11
|
+
const { openModal, answers } = useProgressiveProfilingQuiz();
|
|
11
12
|
const { formatMessage } = useIntl();
|
|
12
13
|
const { status, remainingQuestions, } = progressiveProfileStatus || {};
|
|
14
|
+
const learningGoal = (_c = (_b = (_a = answers === null || answers === void 0 ? void 0 : answers['learning-goal']) === null || _a === void 0 ? void 0 : _a.selectedValues) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.replaceAll('-', ' ');
|
|
15
|
+
const interests = (_e = (_d = answers === null || answers === void 0 ? void 0 : answers['interests-declared']) === null || _d === void 0 ? void 0 : _d.selectedValues) !== null && _e !== void 0 ? _e : [];
|
|
16
|
+
const formattedInterests = interests.length > 1
|
|
17
|
+
? `${interests.slice(0, -1).join(', ')} and ${interests.at(-1)}`
|
|
18
|
+
: interests[0];
|
|
13
19
|
if (!progressiveProfileStatus)
|
|
14
20
|
return null;
|
|
15
21
|
const descriptionValues = Object.assign(Object.assign({}, (status === 'incomplete' && { remaining_questions: remainingQuestions })), (status === 'complete' && {
|
|
16
|
-
|
|
22
|
+
learningGoal,
|
|
23
|
+
interests: formattedInterests,
|
|
24
|
+
bold: (chunks) => _jsx("strong", { children: chunks }),
|
|
17
25
|
}));
|
|
18
26
|
// Handle button click for the banner and track the click event
|
|
19
27
|
const handleButtonClick = () => {
|
|
@@ -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;AAClF,OAAO,EAAE,6CAA6C,EAAE,MAAM,6CAA6C,CAAC;AAE5G,MAAM,4BAA4B,GAAG,CAAC,EAAE,wBAAwB,EAAE,WAAW,EAAE,EAAE,EAAE
|
|
1
|
+
{"version":3,"file":"ProgressiveProfilingElements.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingElements/ProgressiveProfilingElements.tsx"],"names":[],"mappings":"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","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, answers } = useProgressiveProfilingQuiz();\n const { formatMessage } = useIntl();\n\n const {\n status,\n remainingQuestions,\n } = 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 if (!progressiveProfileStatus) return null;\n\n const descriptionValues = {\n ...(status === 'incomplete' && { remaining_questions: remainingQuestions }),\n ...(status === 'complete' && {\n learningGoal,\n interests: formattedInterests,\n bold: (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"]}
|
|
@@ -22,7 +22,7 @@ const messages = defineMessages({
|
|
|
22
22
|
},
|
|
23
23
|
complete_description: {
|
|
24
24
|
id: 'progressiveProfilingQuiz.complete.description',
|
|
25
|
-
defaultMessage: 'Your learning on edX to <
|
|
25
|
+
defaultMessage: 'Your learning on edX to <bold>{learningGoal}</bold> and you\'re interested in {interests}.',
|
|
26
26
|
description: 'Description for the progressive profiling quiz when complete',
|
|
27
27
|
},
|
|
28
28
|
not_started_button: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingElements/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,iBAAiB,EAAE;QACjB,EAAE,EAAE,4CAA4C;QAChD,cAAc,EAAE,mDAAmD;QACnE,WAAW,EAAE,2DAA2D;KACzE;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,2CAA2C;QAC/C,cAAc,EAAE,4BAA4B;QAC5C,WAAW,EAAE,0DAA0D;KACxE;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,kDAAkD;QACtD,cAAc,EAAE,oEAAoE;QACpF,WAAW,EAAE,iEAAiE;KAC/E;IACD,sBAAsB,EAAE;QACtB,EAAE,EAAE,iDAAiD;QACrD,cAAc,EACN,6HAA6H;QACrI,WAAW,EAAE,gEAAgE;KAC9E;IACD,oBAAoB,EAAE;QACpB,EAAE,EAAE,+CAA+C;QACnD,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingElements/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,iBAAiB,EAAE;QACjB,EAAE,EAAE,4CAA4C;QAChD,cAAc,EAAE,mDAAmD;QACnE,WAAW,EAAE,2DAA2D;KACzE;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,2CAA2C;QAC/C,cAAc,EAAE,4BAA4B;QAC5C,WAAW,EAAE,0DAA0D;KACxE;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,kDAAkD;QACtD,cAAc,EAAE,oEAAoE;QACpF,WAAW,EAAE,iEAAiE;KAC/E;IACD,sBAAsB,EAAE;QACtB,EAAE,EAAE,iDAAiD;QACrD,cAAc,EACN,6HAA6H;QACrI,WAAW,EAAE,gEAAgE;KAC9E;IACD,oBAAoB,EAAE;QACpB,EAAE,EAAE,+CAA+C;QACnD,cAAc,EAAE,4FAA4F;QAC5G,WAAW,EAAE,8DAA8D;KAC5E;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,6CAA6C;QACjD,cAAc,EAAE,gBAAgB;QAChC,WAAW,EAAE,iEAAiE;KAC/E;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,4CAA4C;QAChD,cAAc,EAAE,yBAAyB;QACzC,WAAW,EAAE,gEAAgE;KAC9E;IACD,eAAe,EAAE;QACf,EAAE,EAAE,0CAA0C;QAC9C,cAAc,EAAE,iBAAiB;QACjC,WAAW,EAAE,8DAA8D;KAC5E;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n not_started_title: {\n id: 'progressiveProfilingQuiz.not_started.title',\n defaultMessage: 'What is motivating you to study and learn on edx?',\n description: 'Title for the progressive profiling quiz when not started',\n },\n incomplete_title: {\n id: 'progressiveProfilingQuiz.incomplete.title',\n defaultMessage: 'What do you want to learn?',\n description: 'Title for the progressive profiling quiz when incomplete',\n },\n not_started_description: {\n id: 'progressiveProfilingQuiz.not_started.description',\n defaultMessage: 'Tell us what more about you and get better course recommendations.',\n description: 'Description for the progressive profiling quiz when not started',\n },\n incomplete_description: {\n id: 'progressiveProfilingQuiz.incomplete.description',\n defaultMessage:\n 'Answer {remaining_questions, plural, one {# more question} other {# more questions}} and get better course recommendations.',\n description: 'Description for the progressive profiling quiz when incomplete',\n },\n complete_description: {\n id: 'progressiveProfilingQuiz.complete.description',\n defaultMessage: 'Your learning on edX to <bold>{learningGoal}</bold> and you\\'re interested in {interests}.',\n description: 'Description for the progressive profiling quiz when complete',\n },\n not_started_button: {\n id: 'progressiveProfilingQuiz.not_started.button',\n defaultMessage: 'Share my goals',\n description: 'Button text for the progressive profiling quiz when not started',\n },\n incomplete_button: {\n id: 'progressiveProfilingQuiz.incomplete.button',\n defaultMessage: 'Finish sharing my goals',\n description: 'Button text for the progressive profiling quiz when incomplete',\n },\n complete_button: {\n id: 'progressiveProfilingQuiz.complete.button',\n defaultMessage: 'Update my goals',\n description: 'Button text for the progressive profiling quiz when complete',\n },\n});\n\nexport default messages;\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
2
|
+
import { useState, useEffect } from 'react';
|
|
3
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';
|
|
@@ -18,6 +18,7 @@ const EMPTY_AUTOSUGGEST_VALUE = {
|
|
|
18
18
|
selectionValue: '',
|
|
19
19
|
selectionId: '',
|
|
20
20
|
};
|
|
21
|
+
const getJobId = (jobTitle) => jobTitle.replaceAll(' ', '-').toLowerCase();
|
|
21
22
|
const WorkStatusStep = () => {
|
|
22
23
|
var _a, _b;
|
|
23
24
|
const { goToPreviousStep, answers, recordAnswer, currentStep, } = useProgressiveProfilingQuiz();
|
|
@@ -25,6 +26,20 @@ const WorkStatusStep = () => {
|
|
|
25
26
|
const [inputValue, setInputValue] = useState(EMPTY_AUTOSUGGEST_VALUE);
|
|
26
27
|
const selectedValue = (_b = (_a = answers[schema.questionId]) === null || _a === void 0 ? void 0 : _a.selectedValues[0]) !== null && _b !== void 0 ? _b : '';
|
|
27
28
|
const isNotEmployed = selectedValue === NOT_EMPLOYED_VALUE;
|
|
29
|
+
// Populate the controlled autosuggest when a previously saved answer is loaded.
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
var _a;
|
|
32
|
+
if (!selectedValue || isNotEmployed) {
|
|
33
|
+
setInputValue(EMPTY_AUTOSUGGEST_VALUE);
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
const matchingJob = jobsList.find(job => job.jobTitle === selectedValue);
|
|
37
|
+
setInputValue({
|
|
38
|
+
userProvidedText: (_a = matchingJob === null || matchingJob === void 0 ? void 0 : matchingJob.jobTitle) !== null && _a !== void 0 ? _a : selectedValue,
|
|
39
|
+
selectionValue: selectedValue,
|
|
40
|
+
selectionId: matchingJob ? getJobId(matchingJob.jobTitle) : '',
|
|
41
|
+
});
|
|
42
|
+
}, [selectedValue, isNotEmployed]);
|
|
28
43
|
const handleJobSelect = (value) => {
|
|
29
44
|
setInputValue(value);
|
|
30
45
|
if (value.selectionValue) {
|
|
@@ -45,7 +60,7 @@ const WorkStatusStep = () => {
|
|
|
45
60
|
goToPreviousStep();
|
|
46
61
|
trackProgressiveProfilingBackButtonClick({ host: window.location.origin, step: currentStep + 1, question: schema.questionId });
|
|
47
62
|
};
|
|
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
|
|
63
|
+
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: getJobId(job.jobTitle), 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, {})] })] }));
|
|
49
64
|
};
|
|
50
65
|
export default WorkStatusStep;
|
|
51
66
|
//# 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;
|
|
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, useEffect } 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 getJobId = (jobTitle: string) => jobTitle.replaceAll(' ', '-').toLowerCase();\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 // Populate the controlled autosuggest when a previously saved answer is loaded.\n useEffect(() => {\n if (!selectedValue || isNotEmployed) {\n setInputValue(EMPTY_AUTOSUGGEST_VALUE);\n return;\n }\n\n const matchingJob = jobsList.find(job => job.jobTitle === selectedValue);\n\n setInputValue({\n userProvidedText: matchingJob?.jobTitle ?? selectedValue,\n selectionValue: selectedValue,\n selectionId: matchingJob ? getJobId(matchingJob.jobTitle) : '',\n });\n }, [selectedValue, isNotEmployed]);\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={getJobId(job.jobTitle)}\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"]}
|