Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: add spinner while loading the optional fields in embadded exp (#1102)

Browse Source 
Description:
Add spinner while loading the optional fields in embadded exp
VAN-1658
This commit is contained in:
Blue
2023-11-14 18:32:39 +05:00
committed by GitHub
parent 446649735d
commit f0b855d87e
2 changed files with 81 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/progressive-profiling/ProgressiveProfiling.jsx
View File

@@ -14,6 +14,7 @@ import {
Alert,
Form,
Hyperlink,
Spinner,
StatefulButton,
} from '@edx/paragon';
import { Error } from '@edx/paragon/icons';
@@ -217,57 +218,63 @@ const ProgressiveProfiling = (props) => {
/>
)}
<div className="mw-xs m-4 pp-page-content">
<div>
<h2 className="pp-page__heading text-primary">{formatMessage(messages['progressive.profiling.page.heading'])}</h2>
</div>
<hr className="border-light-700 mb-4" />
{showError ? (
<Alert id="pp-page-errors" className="mb-3" variant="danger" icon={Error}>
<Alert.Heading>{formatMessage(messages['welcome.page.error.heading'])}</Alert.Heading>
<p>{formatMessage(messages['welcome.page.error.message'])}</p>
</Alert>
) : null}
<Form>
{formFields}
{(getConfig().AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK) && (
<span className="pp-page__support-link">
<Hyperlink
isInline
variant="muted"
destination={getConfig().AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK}
target="_blank"
showLaunchIcon={false}
onClick={() => (sendTrackEvent('edx.bi.welcome.page.support.link.clicked'))}
>
{formatMessage(messages['optional.fields.information.link'])}
</Hyperlink>
</span>
)}
<div className="d-flex mt-4 mb-3">
<StatefulButton
type="submit"
variant="brand"
className="pp-page__button-width"
state={submitState}
labels={{
default: showRecommendationsPage ? formatMessage(messages['optional.fields.next.button']) : formatMessage(messages['optional.fields.submit.button']),
pending: '',
}}
onClick={handleSubmit}
onMouseDown={(e) => e.preventDefault()}
/>
<StatefulButton
className="text-gray-700 font-weight-500"
type="submit"
variant="link"
labels={{
default: formatMessage(messages['optional.fields.skip.button']),
}}
onClick={handleSkip}
onMouseDown={(e) => e.preventDefault()}
/>
</div>
</Form>
{registrationEmbedded && welcomePageContextApiStatus === PENDING_STATE ? (
<Spinner animation="border" variant="primary" id="tpa-spinner" />
) : (
<>
<div>
<h2 className="pp-page__heading text-primary">{formatMessage(messages['progressive.profiling.page.heading'])}</h2>
</div><hr className="border-light-700 mb-4" />
{showError ? (
<Alert id="pp-page-errors" className="mb-3" variant="danger" icon={Error}>
<Alert.Heading>{formatMessage(messages['welcome.page.error.heading'])}</Alert.Heading>
<p>{formatMessage(messages['welcome.page.error.message'])}</p>
</Alert>
) : null}
<Form>
{formFields}
{(getConfig().AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK) && (
<span className="pp-page__support-link">
<Hyperlink
isInline
variant="muted"
destination={getConfig().AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK}
target="_blank"
showLaunchIcon={false}
onClick={() => (sendTrackEvent('edx.bi.welcome.page.support.link.clicked'))}
>
{formatMessage(messages['optional.fields.information.link'])}
</Hyperlink>
</span>
)}
<div className="d-flex mt-4 mb-3">
<StatefulButton
type="submit"
variant="brand"
className="pp-page__button-width"
state={submitState}
labels={{
default: showRecommendationsPage ? formatMessage(messages['optional.fields.next.button']) : formatMessage(messages['optional.fields.submit.button']),
pending: '',
}}
onClick={handleSubmit}
onMouseDown={(e) => e.preventDefault()}
/>
<StatefulButton
className="text-gray-700 font-weight-500"
type="submit"
variant="link"
labels={{
default: formatMessage(messages['optional.fields.skip.button']),
}}
onClick={handleSkip}
onMouseDown={(e) => e.preventDefault()}
/>
</div>
</Form>
</>
)}
</div>
</BaseContainer>
);

23
src/progressive-profiling/tests/ProgressiveProfiling.test.jsx
View File

@@ -14,6 +14,7 @@ import {
COMPLETE_STATE, DEFAULT_REDIRECT_URL,
EMBEDDED,
FAILURE_STATE,
PENDING_STATE,
RECOMMENDATIONS,
} from '../../data/constants';
import { saveUserProfile } from '../data/actions';
@@ -292,6 +293,28 @@ describe('ProgressiveProfilingTests', () => {
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked', { host });
});
it('should show spinner while fetching the optional fields', () => {
delete window.location;
window.location = {
assign: jest.fn().mockImplementation((value) => { window.location.href = value; }),
href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING),
search: `?host=${host}&variant=${EMBEDDED}`,
};
store = mockStore({
...initialState,
commonComponents: {
...initialState.commonComponents,
thirdPartyAuthApiStatus: PENDING_STATE,
optionalFields,
},
});
const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
expect(progressiveProfilingPage.find('#tpa-spinner').exists()).toBeTruthy();
});
it('should set host property value to host where iframe is embedded for on ramp experience', () => {
const expectedEventProperties = {
isGenderSelected: false,